Appearance
List Toolbar
FTListToolbar is the layout of the controls above a list. It has four groups in one row or two, and a cover:
| Slot | Content | One row | stacked |
|---|---|---|---|
modes | The mode tabs (FTTabs compound) | Left, first | Top row, left |
start | The filters (FTFilterBar) | Left, after the modes | Second row, left |
time | Every time control as one group, with Refresh last | Right, first | Top row, right |
end | The search, then the list actions (Export, Display) | Right, last | Second row, right |
cover | The selection bar | Over the modes and the filters | Over the filters |
One row wraps when it does not fit: the right side moves under the left side and stays on the right. Use stacked when the page shows two rows.
While covered, the cover fills the area it lies over, and the controls under it cannot be reached. The time and end groups stay usable. Stacked, the tabs stay visible: the page sets their own disabled state. A page without rows selected shows no cover.
Contract: src/components/FTListToolbar/contract.ts (a composition, status: draft). History: contract-log.md.
Basic usage
Select rows with the button below to see the cover. Switch to two rows with the toggle.
vue
<template>
<FTListToolbar :covered="selectedCount > 0" :stacked="twoRows" label="Bonus list controls">
<template #modes>
<!-- stacked and covered: every tab has disabled: true -->
<FTTabs tabStyle="compound" :tabs="modeTabs" @tab-click="onMode" />
</template>
<template #start>
<FTFilterBar
:filters="filters"
:pinned="pinned"
:disabled="selectedCount > 0"
@update="update"
@clear="clear"
/>
</template>
<template #time>
<!-- date presets, custom range, then Refresh last -->
</template>
<template #end>
<FTInput v-model="search" placeholder="Type to filter" preIcon="fas magnifying-glass" />
<FTButton type="button" iconOnly icon="fas file-export" aria-label="Export the listed rows" />
</template>
<template #cover>
<FTSelectionBar :count="selectedCount" />
</template>
</FTListToolbar>
</template><template>
<FTListToolbar :covered="selectedCount > 0" :stacked="twoRows" label="Bonus list controls">
<template #modes>
<!-- stacked and covered: every tab has disabled: true -->
<FTTabs tabStyle="compound" :tabs="modeTabs" @tab-click="onMode" />
</template>
<template #start>
<FTFilterBar
:filters="filters"
:pinned="pinned"
:disabled="selectedCount > 0"
@update="update"
@clear="clear"
/>
</template>
<template #time>
<!-- date presets, custom range, then Refresh last -->
</template>
<template #end>
<FTInput v-model="search" placeholder="Type to filter" preIcon="fas magnifying-glass" />
<FTButton type="button" iconOnly icon="fas file-export" aria-label="Export the listed rows" />
</template>
<template #cover>
<FTSelectionBar :count="selectedCount" />
</template>
</FTListToolbar>
</template>The page must
- Set
coveredwhile rows are selected, and pass the selection bar in thecoverslot. - While covered, set
disabledon theFTFilterBarinstart, so its open menus close. - Stacked and covered, set
disabledon every tab inmodes: the tabs' own disabled state, never a dim. - Keep every time control in
time, as one group, with Refresh last. - Keep Export and Display beside the search in
end, not in the selection bar.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
covered | boolean | false | The cover slot lies over the start group; the start group is hidden and inert. Without a cover slot nothing changes. |
stacked | boolean | false | Two rows: modes and time on top, filters and end below |
label | string | 'List controls' | Accessible name of the toolbar group |
Slots
modes, start, time, end, cover: see the table above. An empty slot renders no group.
CSS custom properties
| Property | Default |
|---|---|
--ft-list-toolbar-gap | var(--spacing-sm) |