/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { html } from "lit.all.mjs";
// Imported for side-effects.
// eslint-disable-next-line import/no-unassigned-import
import "toolkit-widgets/named-deck.js";
export default {
title: "UI Widgets/Named Deck",
component: "named-deck",
parameters: {
status: "stable",
fluent: `
named-deck-tab-one = Tab 1
named-deck-tab-two = Tab 2
named-deck-tab-three = Tab 3
named-deck-content-one = This is tab 1
named-deck-content-two = This is tab 2
named-deck-content-three = This is tab 3
button-group-one = One
button-group-two = Two
button-group-three = Three
button-group-four = Four
`,
},
};
export const Tabs = () => html`
The dashed outline is added for emphasis here. It applies to the button with
the selected
attribute, but matches the deck's
selected-view
name.
These tabs are a combination of button-group
,
named-deck-button
, and named-deck
.
button-group
makes the tabs a single focusable group,
using left/right to switch between focused buttons.
named-deck-button
s are button
subclasses
that are used to control the named-deck
.
named-deck
show only one selected child at a time.
This is tab 1
This is tab 2
This is tab 3
This is an alternate layout for creating a menu navigation. In this case,
the first view in the named-deck
is the list view which
contains the named-deck-button
s to link to the other views.
Each view then includes a back named-deck-button
which is used
to navigate back to the first view.
The button-group
element will group focus to the buttons,
requiring left/right or up/down to switch focus between its child elements.
It accepts an orientation
property, which determines if
left/right or up/down are used to change the focused button.