Vitral 0.2
Layout

WrapPanel

Dispõe os filhos numa linha e passa para a seguinte quando ela enche, na horizontal ou na vertical, com um tamanho uniforme opcional.

Testado com WAI-ARIA

Importação

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

Horizontal

Cada filho mantém a própria largura. Arraste o canto da moldura para redimensioná-la e veja as linhas se reorganizarem.

ButtonCheckBoxComboBoxDatePickerExpanderGridListBoxMenuNumericUpDownProgressBarRadioButtonSliderSplitViewTabControlTextBoxToggleSwitchTreeView
<script setup lang="ts">import { WrapPanel } from '@vitral/vue'; const words = ['Button', 'CheckBox', 'ComboBox', 'DatePicker', 'Expander', 'Grid', 'ListBox', 'Menu', 'NumericUpDown', 'ProgressBar', 'RadioButton', 'Slider', 'SplitView', 'TabControl', 'TextBox', 'ToggleSwitch', 'TreeView'];</script> <template>    <WrapPanel class="frame resizable">        <span v-for="(word, i) in words" :key="word" class="box" :class="`c${(i % 5) + 1}`">{{ word }}</span>    </WrapPanel></template> <style scoped>.frame {    width: 100%;    padding: 0.5rem;    border: 1px dashed color-mix(in srgb, var(--vt-text-color) 30%, transparent);    border-radius: var(--vt-border-radius-md);} .resizable {    resize: horizontal;    overflow: auto;    min-width: 12rem;} .box {    --c: var(--vt-chart-1);    padding: 0.375rem 0.625rem;    font-size: 0.8125rem;    color: var(--vt-text-color);    background: color-mix(in srgb, var(--c) 18%, transparent);    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);    border-radius: var(--vt-border-radius-sm);} .c1 {    --c: var(--vt-chart-1);} .c2 {    --c: var(--vt-chart-2);} .c3 {    --c: var(--vt-chart-3);} .c4 {    --c: var(--vt-chart-4);} .c5 {    --c: var(--vt-chart-5);}</style>

ItemWidth e ItemHeight

item-width="120" item-height="72": todos os filhos do mesmo tamanho, seja qual for o conteúdo.

Photos
Mail
Maps
Music
Video
News
Store
Weather
Clock
Notes
<script setup lang="ts">import { WrapPanel } from '@vitral/vue'; const tiles = ['Photos', 'Mail', 'Maps', 'Music', 'Video', 'News', 'Store', 'Weather', 'Clock', 'Notes'];</script> <template>    <WrapPanel class="frame resizable" :item-width="120" :item-height="72" :spacing="8">        <div v-for="(tile, i) in tiles" :key="tile" class="box tile" :class="`c${(i % 5) + 1}`">{{ tile }}</div>    </WrapPanel></template> <style scoped>.frame {    width: 100%;    padding: 0.5rem;    border: 1px dashed color-mix(in srgb, var(--vt-text-color) 30%, transparent);    border-radius: var(--vt-border-radius-md);} .resizable {    resize: horizontal;    overflow: auto;    min-width: 12rem;} .box {    --c: var(--vt-chart-1);    padding: 0.375rem 0.625rem;    font-size: 0.8125rem;    color: var(--vt-text-color);    background: color-mix(in srgb, var(--c) 18%, transparent);    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);    border-radius: var(--vt-border-radius-sm);} .tile {    display: flex;    align-items: flex-end;    font-weight: 600;} .c1 {    --c: var(--vt-chart-1);} .c2 {    --c: var(--vt-chart-2);} .c3 {    --c: var(--vt-chart-3);} .c4 {    --c: var(--vt-chart-4);} .c5 {    --c: var(--vt-chart-5);}</style>

Vertical

Preenche colunas de cima para baixo; precisa de uma altura para quebrar.

ButtonCheckBoxComboBoxDatePickerExpanderGridListBoxMenuNumericUpDownProgressBarRadioButtonSliderSplitViewTabControlTextBoxToggleSwitchTreeView
<script setup lang="ts">import { WrapPanel } from '@vitral/vue'; const words = ['Button', 'CheckBox', 'ComboBox', 'DatePicker', 'Expander', 'Grid', 'ListBox', 'Menu', 'NumericUpDown', 'ProgressBar', 'RadioButton', 'Slider', 'SplitView', 'TabControl', 'TextBox', 'ToggleSwitch', 'TreeView'];</script> <template>    <WrapPanel class="frame short" orientation="vertical" :item-width="140">        <span v-for="(word, i) in words" :key="word" class="box" :class="`c${(i % 5) + 1}`">{{ word }}</span>    </WrapPanel></template> <style scoped>.frame {    width: 100%;    padding: 0.5rem;    border: 1px dashed color-mix(in srgb, var(--vt-text-color) 30%, transparent);    border-radius: var(--vt-border-radius-md);} .short {    height: 10rem;    overflow: auto;} .box {    --c: var(--vt-chart-1);    padding: 0.375rem 0.625rem;    font-size: 0.8125rem;    color: var(--vt-text-color);    background: color-mix(in srgb, var(--c) 18%, transparent);    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);    border-radius: var(--vt-border-radius-sm);} .c1 {    --c: var(--vt-chart-1);} .c2 {    --c: var(--vt-chart-2);} .c3 {    --c: var(--vt-chart-3);} .c4 {    --c: var(--vt-chart-4);} .c5 {    --c: var(--vt-chart-5);}</style>

API

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

Props

NomeTipoDescrição
orientation'vertical' | 'horizontal'`horizontal` (o padrão) preenche linhas e quebra para baixo; `vertical` preenche colunas e precisa de uma altura em que quebrar.
itemWidthnumber | stringTodo filho recebe esta largura. Um número de pixels ou qualquer comprimento CSS.
itemHeightnumber | stringTodo filho recebe esta altura.
spacingnumber | stringEspaço entre os filhos e entre as linhas. O padrão é o token `wrappanel.spacing`.
asstring | Component—

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

Slots

NomeProps do slotDescrição
default——