Card Stack

<x-wirekit::card-stack> draws named parts, most often the cards of a record page, in an order the application remembers for a reader. A part the reader hid is carried along hidden rather than left out, and it shows again for the visit when a link leads into it.

Basic Usage

Write each part as a named slot, and give order the names in the order to draw them. A name the order holds without a slot is skipped, and a slot the order does not name yet, a part added after the order was remembered, comes last.

<x-wirekit::card-stack :order="['prices', 'details', 'stock']">
    <x-slot:details>
        <x-wirekit::card>
            <x-wirekit::card.body>
                <x-wirekit::heading :level="3" size="sm">Details</x-wirekit::heading>
                <x-wirekit::text size="sm" intent="muted">Name, brand and category.</x-wirekit::text>
            </x-wirekit::card.body>
        </x-wirekit::card>
    </x-slot:details>
    <x-slot:prices>
        <x-wirekit::card>
            <x-wirekit::card.body>
                <x-wirekit::heading :level="3" size="sm">Prices</x-wirekit::heading>
                <x-wirekit::text size="sm" intent="muted">The price in each channel.</x-wirekit::text>
            </x-wirekit::card.body>
        </x-wirekit::card>
    </x-slot:prices>
    <x-slot:stock>
        <x-wirekit::card>
            <x-wirekit::card.body>
                <x-wirekit::heading :level="3" size="sm">Stock</x-wirekit::heading>
                <x-wirekit::text size="sm" intent="muted">What each warehouse holds.</x-wirekit::text>
            </x-wirekit::card.body>
        </x-wirekit::card>
    </x-slot:stock>
</x-wirekit::card-stack>

Hidden Parts

An entry of order may be ['key' => name, 'shown' => false]. That part is drawn with hidden rather than left out: a slot is rendered before the stack places it, and a Livewire component inside it would otherwise lose its element.

{{-- 1. The reader's order, with the stock card hidden. --}}
<x-wirekit::card-stack :order="[
    ['key' => 'details', 'shown' => true],
    ['key' => 'prices', 'shown' => true],
    ['key' => 'stock', 'shown' => false],
]">
    <x-slot:details>…</x-slot:details>
    <x-slot:prices>…</x-slot:prices>
    <x-slot:stock><livewire:stock-card :product="$product" /></x-slot:stock>
</x-wirekit::card-stack>

A hidden part shows for the visit in two ways, and stays shown when a Livewire render draws it hidden again, until the page is left:

• A link whose fragment leads to an element inside it, such as <a href="#stock">Stock</a> to a card with id="stock", shows it on arrival and on every change of the fragment, and brings the element into view.
• wirekit:card-stack-show on window with the name of the part. Where a page holds two stacks with that part, stack names the stack's id.

{{-- 2. A button that shows the stock card. --}}
<x-wirekit::button x-on:click="$dispatch('wirekit:card-stack-show', { key: 'stock' })">Show stock</x-wirekit::button>

Order on Screen and in the Document

Each part stands in a wrapper with no box of its own and a wire:key. A new order moves the parts instead of drawing them again, so a form in one keeps what was typed, and the order in the document is the order on screen, which is the order the keyboard and a screen reader follow.

Props

Accessibility

• A hidden part is hidden from everyone with hidden, the way the reader asked, and nothing of it is reached by the keyboard.
• The parts follow their order in the document, so the reading order is the visual one.

Keyboard Interaction

The stack adds no keys. Its parts keep their own.