Vitral 0.2
Painel

Fieldset

Um fieldset nativo que dá nome aos controles de dentro e pode se recolher atrás da sua legenda.

Testado com WAI-ARIA

Importação

main.ts
import { Fieldset } from '@vitral/vue';

Básico

Shipping

Orders placed before 2 p.m. leave the warehouse the same day. Anything later goes out on the next working day.

<script setup lang="ts">import { Fieldset } from '@vitral/vue';</script> <template>    <Fieldset legend="Shipping" style="max-width: 32rem">        <p style="margin: 0">Orders placed before 2 p.m. leave the warehouse the same day. Anything later goes out on the next working day.</p>    </Fieldset></template>

Recolhível

collapsed: false
<script setup lang="ts">import { Checkbox, Fieldset } from '@vitral/vue';import { ref } from 'vue'; const collapsed = ref(false);const email = ref(true);const push = ref(false);</script> <template>    <div style="display: grid; gap: 0.5rem; width: 100%; max-width: 32rem">        <Fieldset v-model:collapsed="collapsed" legend="Notifications" toggleable>            <div style="display: grid; gap: 0.5rem">                <Checkbox v-model="email" label="Email" binary />                <Checkbox v-model="push" label="Push" binary />            </div>        </Fieldset>        <small style="color: var(--vt-text-muted-color)">collapsed: {{ collapsed }}</small>    </div></template>

API

Lido de packages/vue/src/components/Fieldset/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
legendstringO texto da legenda.
toggleablebooleanFaz da legenda um botão que mostra e oculta o grupo.
toggleIconIconProp—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
toggleevent: FieldsetToggleEvent—

Slots

NomeProps do slotDescrição
default——
legend—Substitui o texto da legenda.
toggleicon(props: { collapsed: boolean })—