टैब

अवलोकन

link

Web

tanrei-tabs

schedule

SwiftUI

TanreiTabs

schedule

Jetpack Compose

TanreiTabs

schedule

Flutter

TanreiTabBar

schedule

React Native

Tabs

schedule

वे वेरिएंट जो इनमें शामिल नहीं

m3-expressive-like: tonal · m3-like: tonal

इससे जनरेट किया गया: docs/status/status.json, specs/tabs.spec.json

संशोधित स्पेक, जो अभी हर प्लैटफ़ॉर्म पर नहीं है

यह पेज टैब का वह रूप बताता है जो अब स्पेक में है: ट्रैक पर रखे टैब, एक इंडिकेटर के साथ जो चयनित टैब तक सरकता है और पंक्ति पर किए गए ड्रैग के साथ चलता है, टैब जो डिफ़ॉल्ट रूप से अपने कॉन्टेंट जितने होते हैं, लेबल जो अगली पंक्ति में जाने की जगह काटे जाते हैं, और पंक्तियाँ जो एक चुनाव साझा कर सकती हैं और उसे याद रख सकती हैं (group और rememberAs)। fullWidth ने scrollable की जगह ली है। पंक्ति के तीन वेरिएंट (primary, secondary और tonal) और दो साइज़ भी हैं, एक ट्रैक जिसे हटाया जा सकता है, और एक transition जो बताता है कि इंडिकेटर सरकता है या नहीं। वेब कंपोनेंट यह सब करता है, और डेमो भी। SwiftUI, Compose, Flutter और React Native ऊपर “पीछे” के रूप में चिह्नित हैं: जब तक वे बराबरी पर नहीं आते, वे एक पुराना संशोधन देते हैं, जिसमें scrollable है (Flutter पर isScrollable, जिसका डिफ़ॉल्ट false है), रेखा वाला इंडिकेटर है, तय चौड़ाई के लेबल हैं जो अगली पंक्ति में जाते हैं, और न ट्रैक है, न ड्रैग।

Primary टैब और चयनित टैब का पैनल

तीन सर्विस, सभी चल रही हैं।

2 घंटे पहले डिप्लॉय किया गया।

रीजन, डोमेन और ऐक्सेस।

प्लेग्राउंड

variant

size

track

fullWidth

orientation

value

transition

label

group

rememberAs

हर कंट्रोल लाइव कंपोनेंट की एक प्रॉपर्टी सेट करता है, और कोड भी उसी के साथ बदलता है। आपकी सेटिंग पेज के पते में रहती है, इसलिए लिंक खोलने पर वही स्थिति दिखती है। यह कोड वेब के लिए है। दूसरे प्लैटफ़ॉर्म के लिए “प्लैटफ़ॉर्म के अनुसार नामों का मिलान” देखें।

इस्तेमाल

link

टैब की पंक्ति में एक ही तरह का आइटम होता है, tab। हर प्लैटफ़ॉर्म टैब को उसी तरह लेता है जैसे वह किसी भी दोहराए जाने वाले चाइल्ड को लेता है: वेब पर <tanrei-tab> चाइल्ड एलिमेंट, SwiftUI के व्यू बिल्डर में मान से टैग किए गए TanreiTab व्यू, Compose के कॉन्टेंट लैम्ब्डा में TanreiTab कॉल, Flutter की tabs: लिस्ट में TanreiTab विजेट, और React Native पर सादे ऑब्जेक्ट का एक items ऐरे।

चयन पंक्ति का होता है, मान के आधार पर। value में चयनित टैब का मान रहता है और change नया मान लाता है। SwiftUI पर इसे selection लिखा जाता है और Compose पर selectedValue। ख़ाली छोड़ने पर पहला सक्षम टैब चयनित होता है। टैब का disabled उसका अपना है।

टैब पैनल नहीं बनाते, पर वे तय करते हैं कि कौन-सा पैनल दिखे। वेब पर <tanrei-tab-panel> एलिमेंट टैब के बाद आते हैं और value से उनसे मिलाए जाते हैं। SwiftUI पर हर टैब अपना पैनल साथ रखता है। Flutter पर TanreiTabBarView चयनित मान का पैनल दिखाता है। Compose और React Native पर चयनित पैनल आप ख़ुद दिखाते हैं, पंक्ति के ठीक बाद। जिन पैनल के बीच व्यक्ति स्वाइप कर सके, उनके लिए इसकी जगह टैब व्यू इस्तेमाल करें: वह टैब की अपनी पंक्ति बनाता है, या कहीं और रखी पंक्ति से जुड़ता है, जैसे ऐप बार में रखी पंक्ति से।

<!-- पंक्ति का चयनित टैब उसका value है, जैसे <select> का। -->
<tanrei-tabs value="overview" label="प्रोजेक्ट">
  <tanrei-tab value="overview" label="अवलोकन" icon="dashboard"></tanrei-tab>
  <tanrei-tab value="activity" label="गतिविधि" icon="history"></tanrei-tab>
  <tanrei-tab value="billing" label="बिलिंग" icon="payments" disabled></tanrei-tab>
  <!-- पैनल टैब के बाद आते हैं और value से उनसे मिलाए जाते हैं। -->
  <tanrei-tab-panel value="overview">…</tanrei-tab-panel>
  <tanrei-tab-panel value="activity">…</tanrei-tab-panel>
  <tanrei-tab-panel value="billing">…</tanrei-tab-panel>
</tanrei-tabs>

<!-- जो पंक्तियाँ एक ही ग्रुप का नाम लेती हैं, वे एक ही चुनाव दिखाती हैं। remember-as उसे डिवाइस पर, आपकी अपनी कुंजी के नीचे रखता है। -->
<tanrei-tabs variant="secondary" group="units" remember-as="report-units" label="इकाइयाँ">
  <tanrei-tab value="metric" label="मेट्रिक"></tanrei-tab>
  <tanrei-tab value="imperial" label="इंपीरियल"></tanrei-tab>
  <tanrei-tab-panel value="metric">…</tanrei-tab-panel>
  <tanrei-tab-panel value="imperial">…</tanrei-tab-panel>
</tanrei-tabs>

<script type="module">
  import '@tanrei/web/components/tabs';
  // पंक्ति change फ़ायर करने से पहले अपना value ख़ुद सेट करती है, और change उसे साथ लाता है।
  document.querySelector('tanrei-tabs').addEventListener('change', (e) => showView(e.detail.value));
</script>

import { Tab, TabPanel, Tabs } from '@tanrei/react';

<Tabs value={view} label="प्रोजेक्ट" onChange={(e) => setView(e.detail.value)}>
  <Tab value="overview" label="अवलोकन" icon="dashboard" />
  <Tab value="activity" label="गतिविधि" icon="history" />
  <TabPanel value="overview"><Overview /></TabPanel>
  <TabPanel value="activity"><Activity /></TabPanel>
</Tabs>

// जो पंक्तियाँ एक ही ग्रुप का नाम लेती हैं, वे एक ही चुनाव दिखाती हैं; सिर्फ़ वही पंक्ति onChange फ़ायर करती है जिसे व्यक्ति ने इस्तेमाल किया।
<Tabs variant="secondary" group="units" rememberAs="report-units" label="इकाइयाँ" onChange={(e) => setUnits(e.detail.value)}>
  <Tab value="metric" label="मेट्रिक" />
  <Tab value="imperial" label="इंपीरियल" />
  <TabPanel value="metric"><Metric /></TabPanel>
  <TabPanel value="imperial"><Imperial /></TabPanel>
</Tabs>

import Tanrei

// TabView के टैग किए गए टैब की तरह: हर टैब अपना पैनल साथ रखता है, और सिर्फ़ चयनित पैनल दिखाया जाता है।
// बाइंडिंग में लिखना ही change है। nil selection (Binding<V?>) पहला सक्षम टैब चुनता है।
// .tag(_:) और .labelStyle(.iconOnly) को सीधे TanreiTab पर लगाएँ, किसी भी दूसरे मॉडिफ़ायर से पहले।
@State private var view = "overview"

TanreiTabs(selection: $view, label: "प्रोजेक्ट") {
    TanreiTab("अवलोकन", icon: "dashboard") { OverviewView() }.tag("overview")
    TanreiTab("गतिविधि", icon: "history") { ActivityView() }.tag("activity")
    TanreiTab("बिलिंग", icon: "payments") { BillingView() }.tag("billing").disabled(true)
}

import io.github.chnotchy.tanrei.components.TanreiTab
import io.github.chnotchy.tanrei.components.TanreiTabs
import io.github.chnotchy.tanrei.primitives.TanreiText

// स्टेट होइस्टिंग: selectedValue आप रखते हैं और उसे onSelectedValueChange से बदलते हैं।
var view by rememberSaveable { mutableStateOf("overview") }
Column {
    TanreiTabs(selectedValue = view, onSelectedValueChange = { view = it }, contentDescription = "प्रोजेक्ट") {
        TanreiTab(value = "overview", label = "अवलोकन", icon = { TanreiText("dashboard") })
        TanreiTab(value = "activity", label = "गतिविधि", icon = { TanreiText("history") })
        // enabled स्पेक के disabled का उलटा है।
        TanreiTab(value = "billing", label = "बिलिंग", icon = { TanreiText("payments") }, enabled = false)
    }
    // Compose में टैब पैनल का कोई रोल नहीं है: चयनित व्यू को पंक्ति के नीचे, पढ़ने के क्रम में दिखाएँ।
    when (view) {
        "overview" -> Overview()
        "activity" -> Activity()
    }
}

import 'package:tanrei/tanrei.dart';

// TabBar की तरह, पर चयन TabController के इंडेक्स की जगह मान से होता है। बार अपना कोई चयन नहीं रखता।
TanreiTabBar<String>(
  value: view, // null पहला सक्षम टैब चुनता है
  onChanged: (String value) => setState(() => view = value),
  semanticLabel: 'प्रोजेक्ट',
  tabs: const <TanreiTab<String>>[
    TanreiTab<String>(value: 'overview', label: 'अवलोकन', icon: Icon(AppSymbols.dashboard)),
    TanreiTab<String>(value: 'activity', label: 'गतिविधि', icon: Icon(AppSymbols.history)),
    TanreiTab<String>(value: 'billing', label: 'बिलिंग', icon: Icon(AppSymbols.payments), enabled: false),
  ],
),
// चयनित मान का व्यू दिखाता है, और स्वाइप नहीं होता। हर व्यू एक टैब पैनल है, जिसका नाम उसके टैब के लेबल से आता है।
TanreiTabBarView<String>(
  value: view,
  semanticLabels: const <String, String>{'overview': 'अवलोकन', 'activity': 'गतिविधि', 'billing': 'बिलिंग'},
  children: <String, Widget>{'overview': const OverviewPage(), 'activity': const ActivityPage(), 'billing': const BillingPage()},
),

import { useState } from 'react';
import { Tabs } from '@tanrei/react-native';

const [view, setView] = useState('overview');

// कंट्रोल्ड: value को onValueChange से बदलें।
<Tabs
  accessibilityLabel="प्रोजेक्ट"
  value={view}
  onValueChange={setView}
  items={[
    { value: 'overview', label: 'अवलोकन', icon: 'dashboard' },
    { value: 'activity', label: 'गतिविधि', icon: 'history' },
    { value: 'billing', label: 'बिलिंग', icon: 'payments', disabled: true },
  ]}
/>
// React Native में टैब पैनल का कोई रोल नहीं है: चयनित पैनल को पंक्ति के ठीक बाद रेंडर करें।
{view === 'overview' ? <Overview /> : <Activity />}

स्पेक

link

Secondary टैब, पूरी चौड़ाई भरने वाली पंक्ति, कॉन्टेंट जितनी रहकर स्क्रॉल होने वाली पंक्ति, और सिर्फ़ आइकन

Tonal टैब: अपने ट्रैक के साथ, उसके बिना, और small साइज़ में ट्रैक और ट्रांज़िशन दोनों के बिना

संरचना

संरचना

वेब पैकेज जिस तरह फ़िक्स्चर primary बनाता है, उसी के ऊपर बनाया गया।

भाग	विवरण
1 tablist	The row that holds the tabs. It lays them out on the track, hugging their content (scrolling when they do not fit) or sharing its width, moves keyboard focus among them, and follows a drag across it with the active indicator.
2 track	The constant background of the whole row, a capsule in the default system: one color per variant, the same whichever tab is selected and whatever state a tab is in, with no outline. Tabs are one choice among equals, so the track never says which one is selected; the active indicator does. It may be left out (track): the row then stands on the surface it is placed on and keeps the track's inset, corners and clip, so that nothing moves. A layer whose tabs sit on a line makes it transparent.
3 container	One tab's state layer, the area that draws hover, focus and press: the box the active indicator has on this tab while it is selected, or would have if it were. In the default system that is a capsule, or a circle where the tab's content is not wider than it is tall, and in a row that fills it is as wide as the tab; it is never the tab's rectangle. The area that answers hover and a tap is still the whole tab.
4 icon · वैकल्पिक	A glyph above the label (a primary tab of the medium size) or before it (a secondary or tonal tab, and every tab of the small size).
5 label · वैकल्पिक	The tab's text and its accessible name, always on one line. A tab that hugs its content shows it whole; a tab that shares the row's width truncates it with an ellipsis and shows it whole where the platform can. It may be hidden for an icon-only tab (labelHidden) and still name it.
6 active-indicator	The thumb: the shape behind the selected tab's content — filled in primary and secondary tabs, a translucent layer in tonal ones — and, with the selected label's color, the mark of the selection in the default system. Its height is the row's less the track's inset, the same on every tab, and on the first and the last tab it lies that same inset from the track's end, so the thumb's round end and the track's are concentric at every row height. In a row that hugs it is as wide as the selected tab's content plus padding, and a circle where that content is not wider than it is tall (an icon, one full-width character, a one-letter label); in a row that fills it is as wide as the tab. It slides to the newly selected tab, or is drawn on it at once where the row's transition is none, and follows a finger dragged across the row, and the label and icon take their covered colors wherever it covers them, so their inversion travels with it.
7 underline	The line on the row's bottom edge under the selected tab: as wide as the tab's content in primary tabs, as wide as the tab in secondary tabs. It moves with the active indicator. The default system leaves it transparent; a layer that marks the selection with a line (Material's tabs) colors it.
8 divider	The hairline along the bottom of the whole row, under the underline. The default system leaves it transparent, because its row is a track and needs no line; a layer whose tabs sit on a line colors it.
9 panel	The view a tab shows. The tabs associate the selected tab with it and hide the others; they do not draw it. A row's panels are its own or, where a Tab view draws the row or is linked to it, the Tab view's, which switches and swipes them. A row may have none: it then switches what the product draws below it, and says so by its name alone (TAB-42).
10 focus-ring	Gap-then-ring indicator shown for keyboard focus, drawn around the tab's container, so that it surrounds the place the active indicator has on that tab (a capsule or a circle in the default system), and held inside the track.

माप

माप

लंबाई	टोकन	मान (px)
container padding-inline	tanrei.comp.tabs.container.padding-inline.medium	16
container height	tanrei.comp.tabs.container.height.medium	48
active-indicator height	tanrei.comp.tabs.active-indicator.height	32

वेब पैकेज जिस तरह फ़िक्स्चर primary बनाता है, उसी के ऊपर बनाया गया।

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
variant	primary | secondary | tonal	"primary"	How much the selection weighs. Primary tabs switch the main views of a screen, at the top of its content: the active indicator is the filled color. Secondary tabs switch within one of those views: the indicator is one step quieter. Tonal tabs are the quiet row, for a choice that should not compete with what it changes — the language of a code sample, a contrast, a unit, a period: the indicator is a tonal layer, under a label that is darker than the others. The three are the same control in every other respect (TAB-50), and each is drawn with or without its track (track), at each size (size).
size	small | medium	"medium"	The row's height (32 / 48) and what shrinks with it: a tab's padding, the active indicator's margins and the icon. Medium is the row of a screen's views, as tall as the touch target. Small stands in a header or a toolbar, as tall as a small Button; its hit area still meets the minimum target (TAB-5), and its icon stands before the label in every variant. The label's text style, the colors and the motion are the same at both.
track	boolean	null	Whether the row draws its track, the tonal background behind all its tabs. False draws none: the row stands on the surface it is placed on — in a header that is already a bar, on a card, in the heading of a sample — and nothing else changes, neither its size nor a tab's place nor a color of its variant (TAB-49). True draws it. Null, the default, takes comp.tabs.track.visible, the system's choice, which is on in the default system. Independent of variant: each of the three is drawn both ways.
fullWidth	boolean	false	False (hug, the default) sizes each tab to its content, never truncating its label, and scrolls the tabs sideways inside the track when they do not fit; the active indicator's width then follows the selected tab's content. True (fill) divides the row's width equally among the tabs and truncates a label that does not fit its share (for two to five short labels); the active indicator's width is then the tab's, the same on every tab.
orientation	horizontal | vertical	"horizontal"	The direction the tabs run. Horizontal (the default) is a row above the views it switches. Vertical stacks the tabs in a column at the start edge, beside the views — the categories of a settings page or of a dialog, the sections of one record — with every tab as wide as the column and its icon before its label (TAB-51). It switches views of one subject as a row does; it is not navigation between the destinations of an app, which is the navigation drawer's. fullWidth does not apply to a column (TAB-56).
value	string	null	The value of the selected tab. The tabs set it when a tab is activated, or when a drag across the row is released on another tab, and emit change; the product may also set it. null selects the first enabled tab. While the row is a member of a group (group), the group's choice selects the tab of that value wherever the row has one (TAB-36).
indicatorOffset	number	0	Where the active indicator and the underline are drawn while the Tab view it belongs to is swiped, relative to the selected tab: 0 on it, 1 on the next enabled tab and −1 on the previous one in reading order, and in between for values between. The Tab view sets it; a product leaves it at 0 unless it drives the indicator itself. A drag across the row itself is followed by the tabs (TAB-28) and does not pass through this prop.
transition	auto | slide | none	"auto"	How this row draws a new selection: the row's part of the effect of switching views. slide: the active indicator and the underline slide and resize to the newly selected tab, the labels' colors changing under them, and a tab out of view is scrolled in with a motion. none: the new selection is drawn whole in one frame — nothing travels and nothing fades (TAB-43). Auto takes comp.tabs.motion.transition, the design system's answer (slide in the default system). Under both a drag across the row still carries the indicator and hover, focus and press are answered the same; reduced motion draws none whatever this says. A Tab view has a transition of its own for its panels, and the row it draws follows it where it is none (TBV-22, TBV-23).
label	string	""	The accessible name of the row: what the views are views of, or, for a row without panels, what is chosen (Contrast, Units). Needed when a screen has more than one row of tabs, and always for a row that has no panel, where nothing else says what the row is for (TAB-42).
group	string	""	Names a choice this row shares with other rows of tabs, placed by the product or drawn by a Tab view. Rows that name the same group show the same choice: selecting a tab in one selects the tab of the same value in every other row that has one, at once and without moving focus or the page, and a row that has no tab of that value keeps its own (TAB-36 to TAB-38, TAB-40). Empty (the default): the row's choice is its own. The name is the product's and is compared exactly. On a platform where the product keeps the selection in its own state, rows given the same state are the group, and each platform's mapping says how it is spelled.
rememberAs	string	""	The key under which a person's choice on this row is kept on their device across pages and visits, and from which it is restored before the row is first drawn (TAB-39). Empty (the default): the row neither reads nor writes any storage; nothing is remembered without a key. The key is the product's own and is used exactly as given, so the product can name it in its privacy notice, read it itself and clear it. Only the chosen tab's value is stored. It needs no group, and a group needs no key: sharing and remembering are separate choices.

इवेंट

इवेंट	विवरण
change	The user selected another tab, by activating it or by releasing a drag on it; carries its value, which the row's value now holds.

आइटम

वे आइटम के प्रकार जिन्हें कंपोनेंट दोहराता है। फ़िक्स्चर अपने आइटम क्रम से सूचीबद्ध करता है; हर प्लैटफ़ॉर्म हर प्रकार को अपने तरीक़े से नाम देता है।

tab

One tab of the row: a label, an optional icon, and the value that selects it.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
value	string	""	Identifies the tab: the row's value names the selected tab by it, and change carries it. Unique within the row; required.
label	string	""	The tab's text and its accessible name. Required, even when labelHidden is true.
icon	string	""	The name of an icon (a glyph of the system's icon set). Give every tab of a row an icon, or none.
labelHidden	boolean	false	Draws the icon alone and keeps label as the accessible name (an icon-only tab).
disabled	boolean	false	Prevents selecting the tab; the arrow keys skip it.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	tanrei-tab	TanreiTab	TanreiTab	TanreiTab	Tab
value · प्रॉपर्टी	value	tag	value	value	value
label · प्रॉपर्टी	label	title	label	label	label
icon · प्रॉपर्टी	icon	icon	icon	icon	icon
labelHidden · प्रॉपर्टी	labelHidden	labelStyle	labelHidden	labelHidden	labelHidden
disabled · प्रॉपर्टी	disabled	disabled	enabled	enabled	disabled
टिप्पणियाँ	A child element: <tanrei-tab value="overview" label="Overview" icon="dashboard">, with label-hidden and disabled attributes, as <option> in a <select>.	TanreiTab(_ title:, icon:) { panel }.tag(value) in the row's view builder, as TabView's tagged tabs; .labelStyle(.iconOnly) is labelHidden; disabled follows .disabled(_:).	TanreiTab(value, label, icon, labelHidden, enabled) called in the TanreiTabs { } content lambda. enabled is the inverse flag.	TanreiTab<T>(value:, label:, icon:, labelHidden:, enabled:) widgets in the bar's tabs: list.	The element type of the row's items array: { value, label, icon?, labelHidden?, disabled? }.

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
TAB-1	WHEN the user activates an enabled tab that is not selected by pointer, touch, Enter or Space THE tabs SHALL set value to the tab's value and emit change exactly once with it; WHEN the tab is already selected THE tabs SHALL emit nothing.
TAB-2	WHILE a tab's disabled is true THE tabs SHALL NOT select it or emit change for it, SHALL skip it with the arrow keys, SHALL NOT make it the Tab stop and SHALL expose the disabled state to assistive technology.
TAB-3	WHILE a tab is hovered, keyboard-focused or pressed THE tabs SHALL render its container, label, icon, covered label and icon, active indicator, underline and opacity from the component tokens of the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state.
TAB-4	WHEN a tab receives keyboard focus THE tabs SHALL show the focus indicator (the ring or the glow, TAB-10) around the tab's container (TAB-18), concentric with it and in its shape, so that it surrounds the place the active indicator has on that tab, with its inner edge sys.focus.offset outside the container's edge. THE tabs SHALL hold the indicator inside the track, which clips a row that scrolls: WHERE the space above and below the container (comp.tabs.track.padding) is less than the indicator reaches, it SHALL be drawn further in by the difference, on every side alike, keeping the container's shape. THE indicator SHALL be drawn above the neighbouring tabs and the active indicator, without animation; focus gained by pointer or touch SHALL NOT show it.
TAB-5	WHERE a tab is narrower than the minimum target THE tabs SHALL make it at least sys.target.touch wide for touch input and sys.target.pointer wide for fine pointers, in layout, because tabs touch their neighbours, so a hit area cannot extend over them. WHERE the row is shorter than the minimum target (the small size) THE tabs SHALL extend each tab's hit area above and below the row, by the same distance on each side, to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing the row's height or the place of anything around it; WHERE that extension lies over the row's own panel or over a control beside the row, a press on something that panel or control would itself answer SHALL go to it and not to the tab. A platform that cannot tell the input type SHALL use sys.target.touch.
TAB-6	WHILE a tab's disabled is true THE tabs SHALL render its container, label, icon, covered label and icon, active indicator, underline and opacity from the disabled component tokens of its variant and, for the selected tab, of its selected parts.
TAB-7	WHEN variant or size names a value that the active design system does not have THE tabs SHALL render with the tokens of that prop's default value, and in debug builds report the unknown value.
TAB-8	WHEN the tab is pressed by pointer, touch, Enter or Space THE tab SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
TAB-9	WHILE pressed THE tab SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, icon, covered label and icon, active indicator, underline, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.tabs.motion.feedback-duration with comp.tabs.motion.state-easing, fades over comp.tabs.motion.state-duration with comp.tabs.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
TAB-10	THE tab SHALL ease its container and track corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
TAB-11	THE tabs SHALL render the tab whose value equals the row's value (or, while the row's value is null, the first enabled tab) from the selected parts of its variant (comp.tabs.primary.selected.label.color and the other selected. parts for primary, and so on) and every other tab from the variant's own parts; WHEN value names no tab THE tabs SHALL render none as selected, show no panel, and in debug builds report the value; WHEN a tab's value is empty or repeats another tab's THE tabs SHALL still render it, treat the first tab with a value as the one that value selects, and in debug builds report the tab.
TAB-12	THE tabs SHALL be one Tab stop, the selected tab; WHILE orientation is horizontal and a tab has keyboard focus Right Arrow and Left Arrow SHALL move focus to the next and previous enabled tab, wrapping at the ends, and Home and End to the first and last enabled tab, and each move SHALL also select the tab it reaches and emit change (automatic activation); in a right-to-left layout Left Arrow SHALL move to the next tab and Right Arrow to the previous; WHILE orientation is vertical the arrow keys SHALL move and select as TAB-54 says, and WHERE the row has no panel, in either orientation, as TAB-42 says; in either orientation Tab SHALL move focus from the selected tab into its panel, or, WHERE the row has no panel (TAB-42), to whatever follows the row.
TAB-13	WHILE the row has a panel THE tabs SHALL expose the tab list role named by the row's label (over a name the product gives the row on the element, aria-label or aria-labelledby, which names it WHILE label is empty), each tab with the tab role, its selected state, its position and the number of tabs, named by its own label whether or not that label is drawn; THE tabs SHALL expose the selected tab's panel with the tab panel role, named by its tab and associated with it where the platform can express that, SHALL hide the other panels from view and from assistive technology, and SHALL make a panel with no focusable content itself focusable so that Tab reaches it. WHERE the tabs belong to a Tab view, as the row it draws itself (TBV-16) or as a row it is linked to (TBV-17), its panels take the place of the tabs' own (TBV-9, TBV-15), and each tab SHALL be associated with the Tab view's panel of its value. A row that has no panel is not a tab list: it is exposed as the single choice it is, as TAB-42 says.
TAB-14	WHILE fullWidth is false THE tabs SHALL size each tab to its content plus the padding of the row's size on each side (comp.tabs.container.padding-inline.medium for medium, comp.tabs.container.padding-inline.small for small; TAB-44), or, WHERE its active indicator is a circle (TAB-16), to that circle and no wider, in either case never narrower than its active indicator or than the minimum target (TAB-5), keep its label on one line and whole however long it is or however large the text, place the tabs so that the first tab's active indicator starts comp.tabs.track.padding in from the track's start edge and the last tab's ends the same distance before the track's end (TAB-34), and scroll them sideways inside the track when they are wider than the space the row has; WHILE fullWidth is true THE tabs SHALL divide the row's width, less comp.tabs.track.padding at each end, equally among the tabs, each at least as wide as the minimum target (the tabs scroll sideways only when the row is too narrow for that), keep each label on one line, and truncate a label wider than its tab less the padding of the row's size on each side (and, beside an icon, less the icon and comp.tabs.container.gap) at the end of the label's own direction (TAB-33), with an ellipsis. A label SHALL NOT wrap onto a second line or break within a word, and an icon SHALL NOT shrink to make room for it.
TAB-15	WHEN the row first appears with its selected tab partly or wholly out of view, or a tab becomes selected or receives keyboard focus while part of it is scrolled out of view, THE tabs SHALL scroll the tabs inside the track until the whole tab is visible (at once when the row first appears), over comp.tabs.motion.indicator-duration with comp.tabs.motion.indicator-easing, and at once where motion is reduced. WHERE the tab becomes selected because the row follows its group's choice THE tabs SHALL bring it into view at once (TAB-38). WHILE the row's transition is none (TAB-43) THE tabs SHALL bring a tab that becomes selected into view at once.
TAB-16	THE tabs SHALL draw the selected tab's active indicator behind its content and centred on it, as tall as the row less comp.tabs.track.padding above and below, which is the same height on every tab of the row whatever the tab holds. WHILE fullWidth is false the indicator SHALL be as wide as the tab's content (its label and icon as TAB-18 lays them out, the icon alone while the label is hidden) plus the active indicator's padding of the row's size on each side (comp.tabs.active-indicator.padding-inline.medium for medium, comp.tabs.active-indicator.padding-inline.small for small), never wider than the tab; WHERE that content is not wider than it is tall (an icon alone, one full-width character, a one-letter label) the indicator SHALL instead be exactly as wide as it is tall, so that it is a circle. WHILE fullWidth is true the indicator SHALL be as wide as the tab, whatever the tab holds. In either case it SHALL NOT be narrower than it is tall, its width SHALL follow the same rule in every variant, and its four corners SHALL be rounded by comp.tabs.primary.active-indicator.shape for primary, comp.tabs.secondary.active-indicator.shape for secondary and comp.tabs.tonal.active-indicator.shape for tonal, each at most half its height. THE tabs SHALL also draw the selected tab's underline on the bottom edge of the row, above the divider, comp.tabs.primary.underline.thickness thick for primary, comp.tabs.secondary.underline.thickness for secondary and comp.tabs.tonal.underline.thickness for tonal, with the corners that face away from the divider rounded by comp.tabs.primary.underline.shape for primary, comp.tabs.secondary.underline.shape for secondary and comp.tabs.tonal.underline.shape for tonal, spanning the tab's content for primary and the tab's whole width for secondary and tonal. Both are drawn in every system, each in its look's color; a transparent color (the default system's underline, and the active indicator of a system that marks the selection with the line) hides the part without changing the layout. The content the indicator's width is measured from SHALL be the label at the heavier of its two weights (TAB-50), so that no tab, indicator or container changes width when the selection moves. A tab with no content (an empty label and no icon, which TAB-22 reports in debug builds) has an underline of no width and a circular active indicator; the report, not a wider indicator, is the remedy.
TAB-17	WHEN the selected tab changes while indicatorOffset is 0 and no drag is followed (TAB-28), and the row's transition is slide (TAB-43), THE tabs SHALL slide and resize the active indicator and the underline together from the old tab to the new one over comp.tabs.motion.indicator-duration with comp.tabs.motion.indicator-easing, drawn in the newly selected tab's colors, every frame of the slide being the in-between look of TAB-28 (the indicator as a drag would draw it at that place: its width between the two tabs' indicators, a circle becoming a capsule and a capsule a circle, each label and icon in its covered color exactly where it is covered), and SHALL move them at once where motion is reduced; the panel SHALL change at once unless a linked Tab view switches it (TBV-2). WHEN the row first appears, or the selected tab changes size or place without a new selection (a font arriving, the text size changing, the row resizing), THE tabs SHALL put the active indicator and the underline on it at once, without a slide. WHERE the selected tab changes because the row follows a choice of its group that was made on another row, or one restored from storage, THE tabs SHALL likewise put them on it at once (TAB-38).
TAB-18	THE tabs SHALL make every tab of a row as tall as the row: at least the container height of the row's size (comp.tabs.container.height.medium for medium, comp.tabs.container.height.small for small), at least comp.tabs.container.height-with-icon where a primary tab stacks an icon above a drawn label, and tall enough that the content of its tallest tab keeps the indicator's padding of that size (comp.tabs.active-indicator.padding-block.medium for medium, comp.tabs.active-indicator.padding-block.small for small) between itself and the active indicator's top and bottom edges (TAB-16); each tab's content SHALL be centred in it and clear of the underline's thickness at the bottom edge. THE tabs SHALL draw each tab's container, which carries hover, focus and press, in the box the active indicator has on that tab while it is selected, or would have if it were (TAB-16), centred in the tab: as tall as the row less comp.tabs.track.padding above and below; WHILE fullWidth is false as wide as the tab's content plus the active indicator's padding of the row's size on each side (TAB-16), and exactly as wide as it is tall WHERE that content is not wider than it is tall; WHILE fullWidth is true as wide as the tab. Its corners SHALL be rounded by comp.tabs.container.shape, each at most half its height, and THE tabs SHALL NOT draw hover, focus or press on the part of the tab's rectangle outside that box. The container SHALL lie above the track and under the active indicator, except on the selected tab, whose container SHALL lie above the active indicator and under the focus indicator, drawn from that tab's selected parts (its state layer is comp.tabs.primary.selected.state-layer.color, comp.tabs.secondary.selected.state-layer.color or comp.tabs.tonal.selected.state-layer.color by variant, the color of the content the indicator covers), so that hover and press show on the selected tab as on any other; the area that answers hover and a press SHALL remain the whole tab (TAB-5): a pointer anywhere on the tab shows the state, in the container. A primary tab with an icon and a drawn label SHALL place them as the icon placement of the row's size says (comp.tabs.icon.placement.medium for medium, comp.tabs.icon.placement.small for small, and a size a layer added by its own value, or medium's WHERE the layer declares none): stacked puts the icon above the label, comp.tabs.container.gap apart; inline puts it before the label, comp.tabs.container.gap apart, centred on the label's line. A secondary or tonal tab SHALL place its icon before its label at every size, as inline does. THE tabs SHALL draw the icon at the icon size of the row's size (comp.tabs.icon.size.medium for medium, comp.tabs.icon.size.small for small) through the icon helper with the family and fill of the tab's selection (selected for the selected tab, otherwise unselected), sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, and the label in comp.tabs.label.typescale.
TAB-19	WHILE a tab's labelHidden is true THE tabs SHALL draw only the tab's icon and keep its label as its accessible name; WHILE labelHidden is true and icon is empty THE tabs SHALL draw the label anyway and in debug builds report the tab.
TAB-20	THE tabs SHALL draw a line of comp.tabs.divider.thickness in comp.tabs.divider.color along the bottom of the whole row, under the tabs, the active indicator and the underline, across the full width of the row even while its tabs scroll, and SHALL hide it from assistive technology. The line is drawn in every system; a transparent color (the default system's) hides it without changing the layout.
TAB-21	WHEN the layout direction is right-to-left THE tabs SHALL order the tabs from the right, start the track and a row of tabs that hug their content at the right edge, truncate a label at the end of the label's own direction (TAB-33: a right-to-left label at its left end, a left-to-right label at its right end), and mirror the slide of the active indicator and the underline; a drag (TAB-28) SHALL still carry them to where the pointer is; WHILE orientation is vertical the column SHALL still run from top to bottom, its start edge being its right one: each tab's icon and label SHALL start at the tab's right edge, and the divider and the underline SHALL lie on the column's left edge (TAB-53).
TAB-22	WHILE a tab's label is not empty THE tabs SHALL expose it as the tab's accessible name, over a name the product gives the tab on the element (aria-label or aria-labelledby); WHILE a tab's label is empty and the product gives the tab a name of its own on the element — aria-label, or aria-labelledby naming an element — THE tabs SHALL leave that name to the tab; WHILE a tab's label is empty and the product gives it none THE tabs SHALL still render the tab and in debug builds report that it has no accessible name.
TAB-23	WHEN the colors of a tab change between states or between selected and not selected THE tabs SHALL animate them over comp.tabs.motion.state-duration with comp.tabs.motion.state-easing, and SHALL change them at once where motion is reduced. WHERE a tab becomes selected or stops being selected because the row follows a choice of its group that was made on another row, or one restored from storage, THE tabs SHALL change its colors at once (TAB-38). WHILE the row's transition is none THE tabs SHALL change the colors of a tab that becomes selected or stops being selected at once (TAB-43), and SHALL still animate a change between states. WHEN the row first appears THE tabs SHALL draw every tab's colors, its label's weight (TAB-50) and its icon's fill (TAB-18) at once, as they are in that first frame, without a motion; WHEN a tab is added to a row that is already drawn THE tabs SHALL draw that tab so too. An appearance is not a change between states.
TAB-24	THE tabs SHALL draw each tab's label and icon a second time, over the first, in the covered colors of the tab's look (comp.tabs.primary.covered-label.color and comp.tabs.primary.covered-icon.color for a primary tab that is not selected, comp.tabs.primary.selected.covered-label.color and comp.tabs.primary.selected.covered-icon.color for the selected one, and the same parts of secondary and of tonal), clipped to the active indicator's current shape, its corners included, wherever the indicator is drawn; WHILE the indicator slides (TAB-17) the clip SHALL move with it in the same frame, so that each label and icon it passes over changes where it is covered and the newly selected tab's content is wholly in its covered colors when the indicator lands, neither before nor after. THE tabs SHALL NOT approximate the covered colors with a blend mode, and SHALL expose each label to assistive technology once.
TAB-25	WHILE a tab's label is truncated (TAB-14) THE tabs SHALL keep the whole label as the tab's accessible name and SHALL show the whole label through the platform's idiom for revealing truncated text where it has one — a plain tooltip on pointer hover and keyboard focus, or on long press where tooltips open that way, or the platform's large-content viewer — without exposing it to assistive technology a second time; WHILE the label fits THE tabs SHALL show no such tooltip.
TAB-26	WHILE indicatorOffset is not 0 THE tabs SHALL draw the active indicator and the underline between the selected tab and the next enabled tab (above 0) or the previous enabled tab (below 0) in reading order, each edge at the linear interpolation between its place on the one tab and on the other by the offset's magnitude, clamped to 1, in the selected tab's colors, and SHALL follow the offset in the frame it changes, without a motion of their own; the covered label and icon SHALL follow as TAB-24 says; WHERE there is no enabled tab in the offset's direction THE tabs SHALL draw them on the selected tab. WHEN value changes while indicatorOffset is not 0 THE tabs SHALL place them at once by the new selected tab and the offset, without the slide of TAB-17. WHILE indicatorOffset is not 0 THE tabs SHALL take no drag of their own (TAB-28): the swipe that sets it already has the indicator.
TAB-27	THE tabs SHALL draw a track behind the whole row, under the tabs, their containers and the active indicator: filled, WHILE the row's track is on (TAB-49), with comp.tabs.primary.track.color for primary, comp.tabs.secondary.track.color for secondary and comp.tabs.tonal.track.color for tonal, its corners rounded by comp.tabs.track.shape, each at most half its height, with no outline, as tall as the row, and as wide as the tabs plus comp.tabs.track.padding at each end but never wider than the space the row has; WHILE the tabs do not fit that space THE tabs SHALL keep the track still and scroll the tabs inside it, clipped to its shape (TAB-14). THE track SHALL be the same whichever tab is selected, whatever state any tab is in and while the active indicator moves, because tabs are one choice among equals: only the active indicator marks the selection. THE tabs SHALL hide the track from assistive technology. The track is drawn in every system; a transparent color hides it without changing the layout. So does a row whose track is off (TAB-49): it fills nothing and keeps the track's box, inset, corners and clip.
TAB-28	WHEN the user presses the row with touch, a pen or a mouse and drags past the platform's touch slop (8 points where the platform names none), further sideways than up or down, THE tabs SHALL take the drag: the press SHALL activate no tab when it ends (TAB-1), the tab under it SHALL leave its pressed state as it does when a press ends (TAB-8), and from then until the drag ends THE tabs SHALL draw the active indicator and the underline where the pointer is along the row — on an enabled tab while the pointer is at that tab's centre, halfway between two neighbouring enabled tabs while the pointer is where they meet (the middle of any disabled tabs between them), each edge at the linear interpolation in between, and on the first or last enabled tab while the pointer is before or beyond its centre — in the selected tab's colors. Everything that differs between the indicator on the one tab and on the other SHALL change continuously with the pointer, with no threshold: its place, its width (between the two tabs' indicators, a circle widening into a capsule and a capsule narrowing into a circle), the underline's place and width with it, and the color of each label and icon, which is its covered color exactly where the indicator covers it and its own color elsewhere, the clip of TAB-24 moving with the indicator in the same frame. THE tabs SHALL place them in the frame the pointer moves, without a motion of their own; WHEN the drag is taken with the pointer away from where they rest THE tabs SHALL bring them to the pointer's place over comp.tabs.motion.state-duration with comp.tabs.motion.state-easing instead of at once, following the pointer meanwhile. A drag that is further up or down than sideways when it passes the slop SHALL be left to vertical scrolling for its whole length, and a wheel or a trackpad SHALL only scroll. WHILE the tabs do not fit and scroll inside the track (TAB-14) THE tabs SHALL take only a drag that starts on the selected tab, SHALL leave every other sideways drag to scroll the tabs as before, and SHALL scroll the tabs to keep the active indicator in view while a drag carries it toward an end of the track.
TAB-29	WHEN the user releases a drag the tabs have taken THE tabs SHALL choose one enabled tab: the one the active indicator is nearer to of the two it lies between (the one after it from halfway on), or, WHEN the release is a fling along the row, the one of those two that the fling is toward; a fling is a release faster than the platform's minimum fling velocity (Android's ViewConfiguration.getScaledMinimumFlingVelocity, Flutter's kMinFlingVelocity) or, where the platform names none (the web, SwiftUI, React Native), 0.5 points per millisecond. A release's velocity is the pointer's over its last moves: WHERE the pointer has not moved for longer than the time after which the platform's velocity tracker takes a pointer as stopped (40 milliseconds in Android's VelocityTracker, Jetpack Compose's VelocityTracker and Flutter's VelocityTracker) or, where the platform names none (the web, SwiftUI, React Native), 40 milliseconds before the release THE tabs SHALL take the release as having no velocity, so that a drag that stops where it is wanted and is let go there is no fling, however fast it moved before it stopped. WHERE the chosen tab is not the selected one THE tabs SHALL set value to the tab's value and emit change exactly once with it, and SHALL slide and resize the active indicator and the underline from where the release left them onto that tab over comp.tabs.motion.indicator-duration with comp.tabs.motion.indicator-easing, as TAB-17 does from a tab; WHERE it is the selected tab THE tabs SHALL return them to it over the same motion and emit nothing. The place where two tabs meet decides only what a release chooses; nothing drawn changes at it. The chosen tab SHALL become the row's Tab stop (TAB-12), and the release SHALL NOT also activate the tab under the pointer.
TAB-30	WHEN a drag the tabs have taken is cancelled — the platform cancels the pointer (a system gesture, a lost capture), Escape is pressed while it lasts, or the product sets value or removes or disables a tab the indicator lies between — THE tabs SHALL return the active indicator and the underline to the selected tab (the one the product has just set, where it set one) over comp.tabs.motion.indicator-duration with comp.tabs.motion.indicator-easing and emit nothing. WHILE a drag lasts THE tabs SHALL NOT change value, the panel shown (their own, or a Tab view's, whose shown panel cannot change before a tab is chosen), keyboard focus, or the selected state that each tab exposes to assistive technology, whatever the indicator covers, and SHALL announce nothing: the selection is made, and announced, by the release alone (TAB-29). WHERE motion is reduced THE tabs SHALL still draw the active indicator and the underline where the pointer is, which the person's own finger moves, taking the drag without the catch-up motion of TAB-28, and SHALL put them on their tab at once when the drag is released or cancelled.
TAB-31	THE tabs SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the tabs is shown THE tabs SHALL draw itself for the new direction at once, without a motion of its own, keeping the selected tab, scrolled into view as TAB-15 says, and its focus.
TAB-32	WHERE the layout direction is right-to-left THE tabs SHALL draw a tab's icon, in both of its copies (TAB-24) mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order TAB-21 gives. THE tabs SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as an image or a view of its own rather than by a glyph's name.
TAB-33	THE tabs SHALL lay out a tab's label, in both of its copies (TAB-24) as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE tabs SHALL still place each label and align its lines by the layout direction, not by the text's own, and SHALL cut a label that does not fit (TAB-14) at the end of its own direction, so that a left-to-right label in a right-to-left layout loses its right end and never its beginning.
TAB-34	THE tabs SHALL hold the active indicator the same distance, comp.tabs.track.padding, from the track's top, from its bottom and, on the first and the last tab, from the track's end: at every height the row takes (comp.tabs.container.height.small, comp.tabs.container.height.medium, comp.tabs.container.height-with-icon, or taller with larger text), whether the tabs hug or fill, and whether the indicator is a capsule or a circle; so that wherever the track's corner radius less comp.tabs.track.padding is the indicator's corner radius — at every height while comp.tabs.track.shape and the variant's active-indicator shape are both full, as in the default system — the indicator's end and the track's end are concentric curves. WHERE the first or the last tab is wider than its active indicator (a circle in a tab widened to the minimum target) THE tabs SHALL let that tab reach into the track's inset on that side by half the difference, as far as the track's edge, rather than hold the indicator further in; WHERE half the difference is more than the inset the tab SHALL end at the track's edge in layout and its hit area SHALL extend beyond the track's end as far as the minimum target needs, without affecting layout. A tab's container and its focus ring are drawn in the indicator's box and SHALL lie in the same place; WHILE the tabs scroll inside the track the distance SHALL hold at each end once the row is scrolled to that end. All of this SHALL hold whether the track is drawn or not (TAB-49).
TAB-35	WHILE fullWidth is false and every tab of the row draws its icon alone (TAB-19) THE tabs SHALL draw every tab's place — the active indicator on the selected tab, the container of each other tab — as a circle of one diameter, the row's height less comp.tabs.track.padding above and below, with the tab's glyph, the icon size of the row's size across (TAB-18), at its center; SHALL set neighbouring circles' centers one tab's width apart, every tab being as wide as the larger of the circle and the minimum target of TAB-5; SHALL make the track as wide as that leaves it and no wider, the first and the last circle concentric with its ends (TAB-34), so that the row is symmetric about its middle and, but for the thumb's place and the glyphs, the same whichever tab is selected; SHALL keep the active indicator that circle, neither wider nor narrower, in every frame while it slides or is dragged from one tab to another (TAB-17, TAB-28); and SHALL give the tabs hit areas that meet halfway between neighbouring circles and reach the track's top, its bottom and, on the first and the last tab, its end, so that every point of the track selects the tab whose circle is nearest and every hit area meets the minimum target. A row of two such tabs stays a row of tabs: each is exposed as a tab with its label as its name, and activating the selected one changes nothing.
TAB-36	WHILE group is not empty THE tabs SHALL be a member of the group of that name, together with every other row of tabs in the same document or window whose group is the same string, compared exactly, whether the product placed that row or a Tab view drew it (TBV-16); a group SHALL hold one choice, the value of a tab, or none, and SHALL hold none until TAB-37 or TAB-39 gives it one. WHILE its group holds a choice and the tabs has an enabled tab with that value THE tabs SHALL have that tab selected: it SHALL set value to the choice and emit nothing, in the first frame it is drawn, in the frame the choice changes, and in the frame it gains such a tab, has such a tab enabled, or is given the group. WHILE its group holds no choice, or the tabs has no enabled tab with the choice's value, THE tabs SHALL keep its own value and select as TAB-11 says, SHALL report nothing, and SHALL follow the group again as soon as the choice is the value of one of its enabled tabs. WHILE group is empty THE tabs SHALL share its choice with no other row.
TAB-37	WHEN a person selects a tab on a row that is a member of a group (TAB-1, TAB-12, TAB-29), or the product sets value on such a row, after the row has first been drawn, to the value of one of its enabled tabs, THE tabs SHALL make that value its group's choice in the same frame, so that every member follows as TAB-36 says. THE row the person selected on SHALL emit change exactly once, as it does without a group, and every other member SHALL emit nothing, so that each choice a person makes is announced once, by the row it was made on, however many rows follow it; a value set by the product SHALL emit nothing on any member. The value a row has when it is first drawn SHALL NOT become the group's choice, nor SHALL a value that names none of the row's tabs or names a disabled one; a drag across a row before its release (TAB-28) and indicatorOffset SHALL NOT be shared, and the other members wait for the selection.
TAB-38	WHEN a group's choice gives a row another selected tab and that row is neither the one a person selected on nor the one the product set (TAB-37), or the choice is one restored from storage (TAB-39), THE tabs SHALL draw that tab as selected at once: the active indicator and the underline on it without the slide of TAB-17, its colors without the motion of TAB-23, the tab brought into view inside the track at once (TAB-15), and its own panel changed at once (TAB-13). THE tabs SHALL NOT move keyboard focus to that row or within it, SHALL NOT show a hovered, focused or pressed state for the change, SHALL NOT scroll anything outside its own track to bring itself into view, and SHALL announce nothing. THE row a person selected on SHALL answer the press, slide and keep keyboard focus as it does without a group, and a row whose value the product set SHALL slide as TAB-17 says. Every member SHALL draw the new choice in the same frame: no frame SHALL show one member with the new choice and another member, which has an enabled tab of that value, with the old one. WHERE a member follows a drag of its own when the choice changes THE tabs SHALL cancel that drag as TAB-30 says for a value the product sets.
TAB-39	WHILE rememberAs is not empty THE tabs SHALL keep the person's choice on their device: WHEN a person's selection gives the row another selected tab, made on the row itself or, through its group, on another member (TAB-37), THE tabs SHALL store that tab's value, and nothing else, under exactly the key rememberAs in the storage the platform keeps for the product on the device across pages and visits, once for each key however many members name it; a value set by the product and a choice restored from storage SHALL be stored by no row. WHEN the row is first drawn while a value is stored under its key THE tabs SHALL restore it before that first frame: WHILE the row is a member of a group that holds no choice the stored value SHALL become the group's choice, whether or not this row has a tab with it (a group that already holds a choice keeps it), and WHILE the row has no group the row SHALL select its enabled tab with that value where it has one; no frame SHALL show the row with another tab selected, or another panel, first, and the row SHALL emit nothing. THE tabs SHALL use a stored value only to compare it with its tabs' values, and SHALL NOT draw it, announce it or run it. WHILE rememberAs is empty THE tabs SHALL neither read nor write any storage. IF the storage is missing, blocked or full, or reading or writing it fails, THEN THE tabs SHALL behave as though nothing were stored, keep the choice for as long as the document or window lasts, and raise and report nothing.
TAB-40	WHEN a person selects a tab on a row that is a member of a group and, in following that choice, other members change the size of what lies before the row in a region that scrolls, THE tabs SHALL keep the row where the person is using it: in the frame that first draws the new choice the row SHALL be at the place in the window that it had in the frame before, the scroll positions of the regions it scrolls in having been moved by exactly the distance the row would otherwise have moved, at once, with no scrolling motion and with no frame in between that shows the row elsewhere; WHERE a region cannot scroll that far THE tabs SHALL move it as far as it goes. THE tabs SHALL make no such correction for a choice the product set or one restored from storage, where no person has a place to keep, and SHALL leave what lies after the row to move as its own panel's and the other members' new heights require.
TAB-41	WHILE many rows are members of one group (a page of sixty code samples) THE tabs SHALL do the work of a choice once for the group and not once for each row: storage SHALL be read at most once for each key in the life of a document or window and written at most once for each key and choice (TAB-39), the place of the row acted on SHALL be measured and corrected once (TAB-40), and a member that follows SHALL run no motion (TAB-38). WHEN a member is removed THE tabs SHALL take it out of its group, and the group SHALL keep its choice for as long as the document or window lasts, with or without members, so that a row drawn later (a view navigated to without a new document) takes it in its first frame.
TAB-42	WHILE the row has no panel — none of its own, none of a Tab view that draws it or is linked to it (TAB-13), and none of a component that draws the row together with the panel it switches (the date-time picker's entry-mode tabs, DTM-13) — THE tabs SHALL expose the row as a single choice and not as a tab list: the radio group role named by the row's label, and each tab with the radio role, its checked state (the selected tab checked, every other tab not), its disabled state, its position and the number of tabs, named by its own label whether or not that label is drawn; THE tabs SHALL expose no tab list, tab or tab panel role, SHALL associate no tab with any element as the thing it controls, and SHALL show and hide nothing itself. THE tabs SHALL keep the row one Tab stop, the selected tab (TAB-12), Tab moving focus from it to whatever follows the row. WHILE a tab of such a row has keyboard focus, in either orientation, Right Arrow and Down Arrow SHALL move focus to the next enabled tab and Left Arrow and Up Arrow to the previous one, wrapping at the ends, with Right Arrow and Left Arrow swapped in a right-to-left layout, and Home and End SHALL move it to the first and the last enabled tab; each move SHALL select the tab it reaches and emit change, as the arrows of a radio group check the radio they reach, and Enter and Space SHALL select the focused tab (TAB-1). A selection SHALL be made, announced and emitted exactly as on a row with panels: the checked state is what assistive technology is told, and what the choice changes below the row is the product's to draw on change. WHEN the row gains its first panel or loses its last THE tabs SHALL change what they expose to match, at once, without changing the selection, keyboard focus or anything drawn. WHERE a row has a panel for some of its tabs and not for others it is a tab list (TAB-13): THE tabs SHALL associate each tab that has one with it and SHALL show no panel while a tab without one is selected.
TAB-43	THE tabs SHALL draw a new selection as the row's transition names: the name transition gives, or, WHILE transition is auto, the name comp.tabs.motion.transition holds (slide or none); WHEN transition names a value the tabs do not define THE tabs SHALL treat it as auto and in debug builds report it. WHILE the row's transition is slide, TAB-15, TAB-17, TAB-23 and TAB-28 to TAB-30 hold as written. WHILE it is none THE tabs SHALL draw a new selection whole in the frame it is made, whatever made it — a press, a key, the release of a drag, the product, or the row's group: the active indicator and the underline on the newly selected tab at their full size and gone from the tab that was selected, each of the two tabs' labels and icons in the colors of its new look, and the tab brought into view inside the track (TAB-15), with no slide, no resize, no fade and no frame that shows a look in between. THE tabs SHALL still take a drag across the row (TAB-28) and still draw the active indicator where indicatorOffset puts it (TAB-26), each in the frame the pointer or the offset moves, since the person's own finger moves it and no motion is the component's; they SHALL take the drag without the catch-up motion of TAB-28 and SHALL put the active indicator and the underline on their tab at once when the drag is released or cancelled (TAB-29, TAB-30), as TAB-30 says where motion is reduced. A tab's hover, focus and press SHALL be answered as under slide: the state's colors over comp.tabs.motion.state-duration (TAB-23), the press as sys.behavior.pressed-feedback names and held for sys.motion.duration.press-hold (TAB-8, TAB-9), the focus indicator without animation (TAB-4); WHERE the newly selected tab is still hovered, focused or pressed it SHALL be drawn in that state of the selected look. WHERE motion is reduced THE tabs SHALL draw a new selection as none does whatever transition names. Changing transition SHALL NOT change the selected tab, keyboard focus or what the row emits, and a slide that is running when the row's transition becomes none SHALL end on its tab at once.
TAB-44	THE tabs SHALL draw the row at its size: every tab at least the container height of that size tall (comp.tabs.container.height.medium for medium, comp.tabs.container.height.small for small), with the tab padding (comp.tabs.container.padding-inline.medium for medium, comp.tabs.container.padding-inline.small for small), the active indicator's margins (comp.tabs.active-indicator.padding-inline.medium for medium, comp.tabs.active-indicator.padding-inline.small for small; comp.tabs.active-indicator.padding-block.medium for medium, comp.tabs.active-indicator.padding-block.small for small) and the icon size (comp.tabs.icon.size.medium for medium, comp.tabs.icon.size.small for small) of that size. Everything else SHALL be the same at every size: the label's text style (comp.tabs.label.typescale), the gap, the track's inset and corners (comp.tabs.track.padding, comp.tabs.track.shape), every color and every motion, what assistive technology is told and the keyboard model. The heights are minimums (TAB-18): with larger text a small row grows as a medium one does, cuts nothing, and scrolls its tabs inside the track rather than the page (TAB-14). WHILE size is small THE tabs SHALL place a tab's icon before its label in every variant (TAB-18) and SHALL meet the minimum target by its hit area (TAB-5). Size, variant, track and transition are independent: each variant SHALL be drawn at each size, and changing size SHALL NOT change the selected tab, keyboard focus or what is scrolled into view.
TAB-45	WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE tabs SHALL draw the active indicator as a filled, opaque shape in the platform's highlight color with the selected tab's label and icon in its highlighted-text color, every other tab's label and icon in its text color, a disabled tab's in its color for disabled text and a disabled selected tab's indicator in that same color, the underline in the highlight color and the divider in the text color, and the focus indicator in the platform's own colors, in every variant alike and with or without the track. THE tabs SHALL NOT rely on the track, on a state layer, on a translucent fill or on a difference between two of the system's own colors to say which tab is selected there: the filled indicator SHALL remain, so that a tonal row without a track, whose indicator is a faint layer in the system's own colors, shows its selection as plainly as a primary one.
TAB-49	THE tabs SHALL fill the track (TAB-27) while the row's track is on and SHALL fill nothing behind the row while it is off: on or off as track says while it is true or false, and, WHILE track is null, as comp.tabs.track.visible holds (on in the default system). WHILE the track is off the surface the row is placed on SHALL show between and around the tabs, and THE tabs SHALL change nothing else: the row's size, the inset the track has (comp.tabs.track.padding) above, below and at each end, the place and size of every tab, container, active indicator, underline and focus indicator (TAB-4, TAB-34), the corners that clip a row that scrolls (comp.tabs.track.shape, TAB-14), the hit areas, and every color of the row's variant, so that turning the track on or off moves nothing and two rows that differ only in it line up. THE tabs SHALL draw every part in its own color over whatever lies beneath it — the track, or with no track whatever is behind the row — and SHALL NOT assume a surface: a color that is translucent (a state layer, the default system's tonal active indicator) is laid over what is there. The track is decoration, drawn or not, and nothing a person is told changes with it. Track, variant, size and transition are independent: each variant SHALL be drawn with and without its track at each size, and changing track SHALL be drawn at once, without a motion of its own, and SHALL NOT change the selected tab, keyboard focus, what is scrolled into view or what the row emits.
TAB-50	THE tabs SHALL draw the three variants alike in everything but their tokens: the same parts in the same places, the same sizes, the same keyboard model, and the same roles, names and states told to assistive technology; a variant says how much the selection weighs, not what the row is. Each variant SHALL read its own parts (comp.tabs.primary.selected.active-indicator.color, comp.tabs.secondary.selected.active-indicator.color, comp.tabs.tonal.selected.active-indicator.color, and so on for every part TAB-3, TAB-6, TAB-11 and TAB-24 name). WHERE an active indicator's color is translucent — the default system's tonal indicator is a layer of the selected tab's content color — THE tabs SHALL draw it once, at that opacity, over the track or the surface beneath it, with the selected tab's state layer (TAB-18) over it; SHALL NOT let two drawings of it overlap and darken while it slides, resizes or is dragged; and SHALL draw the covered label and icon (TAB-24) over it at their own opacity. A tonal tab's label and icon are comp.tabs.tonal.label.color and comp.tabs.tonal.icon.color where the indicator does not cover them and comp.tabs.tonal.selected.covered-label.color and comp.tabs.tonal.selected.covered-icon.color on the selected tab once the indicator has landed, so that in the default system a tonal row tells its selection by the layer and by the darker label together. THE selected tab's label SHALL be drawn, in both of its copies, at the weight of comp.tabs.label.typescale plus comp.tabs.primary.selected.label.emphasis, comp.tabs.secondary.selected.label.emphasis or comp.tabs.tonal.selected.label.emphasis by variant, so that a selection drawn by a faint indicator is also told by something other than color; every other tab's label SHALL keep the typescale's weight, and every tab SHALL keep the width its label needs at the heavier weight whether it is selected or not, so that nothing in the row moves or wraps when the selection does. The weight SHALL change with the label's color (TAB-23), at once where the colors do. A tonal tab with an icon and a drawn label SHALL place the icon before the label at every size (TAB-18).
TAB-51	WHILE orientation is vertical THE tabs SHALL stack the tabs from top to bottom in the order given, in a column at the start edge of the row beside its panels, every tab as wide as the column: the widest tab's content plus the padding of the row's size on each side (comp.tabs.container.padding-inline.medium for medium, comp.tabs.container.padding-inline.small for small; TAB-44), or the width the product gives the tab list where that is wider, and never wider than the space the row has. Each tab's icon SHALL stand before its label in every variant and at every size, comp.tabs.container.gap apart, both at the tab's start edge, and each tab SHALL be at least the container height of the row's size tall and, because the tabs touch their neighbours above and below, at least the minimum target tall in layout (sys.target.touch for touch input, sys.target.pointer for fine pointers; TAB-5). TAB-51 to TAB-61 SHALL hold in place of what TAB-5, TAB-14, TAB-16, TAB-18, TAB-20, TAB-27, TAB-28, TAB-34 and TAB-35 say of a horizontal row's widths, heights, insets and edges; every other behaviour holds in both orientations.
TAB-52	WHILE orientation is vertical THE tabs SHALL draw the selected tab's active indicator, and every tab's container (TAB-18), as the tab's box less comp.tabs.track.padding on every side: as wide as the column less the inset on each side and as tall as the tab less the inset above and below, whatever the tab holds, never a circle, its corners rounded by the variant's active-indicator shape, each at most half its height (TAB-16); and SHALL slide and resize it from one tab to another along the column over comp.tabs.motion.indicator-duration with comp.tabs.motion.indicator-easing, as TAB-17 says, the covered label and icon following it as TAB-24 says.
TAB-53	WHILE orientation is vertical THE tabs SHALL draw the divider (TAB-20) as a line of comp.tabs.divider.thickness in comp.tabs.divider.color along the column's end edge, the side of the panels, the full height of the column, and the selected tab's underline (TAB-16) as a line of the variant's underline thickness on that edge, above the divider and as tall as the selected tab in every variant, its corners that face away from the divider rounded by the variant's underline shape; in a right-to-left layout both SHALL lie on the column's left edge.
TAB-54	WHILE orientation is vertical, the row has a panel and a tab has keyboard focus, Down Arrow and Up Arrow SHALL move focus to the next and previous enabled tab, wrapping at the ends, and Home and End to the first and last enabled tab, each move also selecting the tab it reaches and emitting change (automatic activation, TAB-12); Right Arrow and Left Arrow SHALL do nothing, in either layout direction, and are left to the page. A column without a panel moves by every arrow key, as TAB-42 says.
TAB-55	WHILE orientation is vertical and the row has a panel THE tabs SHALL expose the tab list as vertical (aria-orientation on the web, the platform's equivalent where it has one) and every other role, name, state and relation as TAB-13 says; WHILE it is horizontal THE tabs SHALL expose the tab list's orientation as the platform's default for a tab list, which is horizontal. A row without a panel (TAB-42) SHALL expose no orientation in either case, because its arrow keys do not depend on it.
TAB-56	WHILE orientation is vertical and the tabs are taller than the space the row has, THE tabs SHALL scroll them vertically inside the track, keeping the track still and the tabs clipped to its shape (TAB-27), and SHALL bring a tab into view along the column as TAB-15 says; WHILE orientation is vertical fullWidth SHALL be ignored, and WHERE it is true a debug build SHALL report it.
TAB-57	WHILE orientation is vertical THE tabs SHALL take a drag (TAB-28 to TAB-30) only from a mouse or a pen moved past the slop further up or down than sideways, carrying the active indicator and the underline along the column as TAB-28 says along the row, and SHALL leave every touch to scroll the tabs or whatever holds the row, and every drag that goes sideways first to the page.
TAB-58	WHILE orientation is vertical THE tabs SHALL round each corner of the track by the smaller of comp.tabs.track.shape and the active indicator's corner radius (the variant's active-indicator shape, at most half the indicator's height) plus comp.tabs.track.padding, so that the track's corners are concentric with the indicator's on the first and the last tab however tall the column is.
TAB-59	WHILE orientation is vertical and the row is linked to a Tab view (TBV-17) THE tabs SHALL draw indicatorOffset (TAB-26) along the column, between the selected tab and the enabled tab below it (above 0) or above it (below 0); the row a Tab view draws itself (TBV-16) is horizontal.
TAB-60	WHEN orientation names a value the tabs do not define THE tabs SHALL lay the tabs out horizontally, and in debug builds report the value.
TAB-61	WHILE orientation is vertical and a tab's label is wider than its tab less the padding of the row's size on each side (and, beside an icon, less the icon and comp.tabs.container.gap) — a column narrower than its widest tab — THE tabs SHALL truncate the label at the end of its own direction (TAB-33) with an ellipsis, on one line, and SHALL show it whole as TAB-25 says.
TAB-62	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the row's host, by the attribute or by the ARIA property that reflects it, THE tabs SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries the row's role (its tab list, or its radio group while the row has no panel) — an id reference by the elements it names in the host's tree or a tree around it. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE tabs SHALL take it off that element. A tab's host carries the tab's role itself, so what the product writes on it is not moved, but for a name: WHILE a tab's label is not empty THE tabs SHALL hold the product's aria-label and aria-labelledby on that host as their data-aria- twins, so that label is the tab's whole name although the platform gives aria-labelledby the precedence (TAB-22), and WHEN label is emptied SHALL give them back as they were written; WHEN the product removes one, or its data-aria- twin, or sets the ARIA property that reflects it to null, THE tabs SHALL take it away.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-tabs	TanreiTabs	TanreiTabs	TanreiTabBar	Tabs
variant · प्रॉपर्टी	variant	variant	variant	variant	variant
size · प्रॉपर्टी	size	size	size	size	size
track · प्रॉपर्टी	track	track	track	track	track
fullWidth · प्रॉपर्टी	fullWidth	fullWidth	fullWidth	isScrollable	fullWidth
orientation · प्रॉपर्टी	orientation	orientation	orientation	direction	orientation
value · प्रॉपर्टी	value	selection	selectedValue	value	value
indicatorOffset · प्रॉपर्टी	indicatorOffset	link	link	link	link
transition · प्रॉपर्टी	transition	transition	transition	transition	transition
label · प्रॉपर्टी	label	label	contentDescription	semanticLabel	accessibilityLabel
group · प्रॉपर्टी	group	selection	selectedValue	value	value
rememberAs · प्रॉपर्टी	rememberAs	selection	selectedValue	value	value
change · इवेंट	change	selection	onSelectedValueChange	onChanged	onValueChange
टिप्पणियाँ	tanrei-tabs (variant, full-width, value, label) holds tanrei-tab children and, after them, tanrei-tab-panel children matched to tabs by their value attribute, or is drawn by a tanrei-tab-view as its own row, or is named by a linked tanrei-tab-view (tabs="<id>") whose tanrei-tab-panel children take their place. indicatorOffset is a property only, with no attribute: the Tab view writes it in every frame of a drag. value names the selected tab, as a <select>'s does. It sets role tablist, tab and tabpanel, aria-selected, aria-controls and aria-labelledby (radiogroup and radio with aria-checked on a row without panels, TAB-42), hides the panels that are not selected, and gives a panel with no focusable content tabindex 0. It sets its own value before firing change, as a native control does. The covered copy of a label and icon (TAB-24) is an aria-hidden layer clipped with clip-path to the indicator's box, animated with it; a truncated label (text-overflow: ellipsis) shows the whole label in a plain tooltip (TAB-25) without aria-describedby, since it is already the name. The track is the row's own background, and the tabs scroll inside it. A drag (TAB-28 to TAB-30) is followed with Pointer Events: pointerdown on the row, setPointerCapture once the drag is taken, pointermove placing the indicator, pointerup choosing the tab, and pointercancel, lostpointercapture or Escape cancelling; the click that follows a taken drag is swallowed, and aria-selected is written only on the release. The in-between look needs no second mechanism: the indicator's inset and width are the same custom properties a slide transitions, written in each frame of a drag, and the covered copy's clip-path follows them, so a drag and a slide draw the same frames. touch-action: pan-y on a row that does not scroll (and on the selected tab of one that does) leaves sideways drags to the row and vertical ones to the page. A shared choice: group and remember-as are attributes with the properties group and rememberAs. A group is the tanrei-tabs of one document that name it, those inside shadow trees and those a tanrei-tab-view drew included; an iframe is another document. The members and the choice are kept by the module, in a map from the name, and never in the DOM. remember-as is a key of the origin's localStorage, read synchronously before the row's first render and at most once for each key, every access inside try, so a browser that blocks storage or throws on it costs nothing but the memory; a key is the product's to namespace, since localStorage is shared by everything on the origin. A member that follows is written (value, aria-selected, its panels' hidden) with its slide and its color transition off for that frame. For TAB-40 the row acted on reads its getBoundingClientRect().top before the group is written and once more after, and moves scrollTop of its nearest scrolling ancestor (the document's scrolling element where none is nearer) by the difference with behavior: 'instant'; a browser that anchors scrolling itself has by then moved some or all of the way, and the row corrects only what is left, so the two never add up. change bubbles, so one listener on the document hears each choice once and reads the group from event.target.group. The first frame of TAB-39 is the first the element draws: before tanrei-tabs is defined the element draws nothing of its own, and a product that shows server-rendered rows before then guards that as it guards any element not yet defined. The value tonal of variant; size is an attribute and a property (small, medium); both axes are open registries (TanreiTabsVariantRegistry, TanreiTabsSizeRegistry in registry.ts, in the Button's form), and each size's five tokens are read through the same private custom properties, set by a block per size as a variant's are. A small row's tab keeps its 32-high box and carries the hit area of TAB-5 as an inset pseudo-element that reaches above and below it, under any interactive content it overlaps; the row itself is not made taller. track is a property that is true, false or null: the attribute is absent for null, present for true and ="false" for false, as the tooltip's arrow is; null reads --tanrei-comp-tabs-track-visible from the cascade by a style query, as a separation is read, and off sets the track's fill to none and nothing else. transition is an attribute and a property (auto, slide, none); auto reads --tanrei-comp-tabs-motion-transition, in the stylesheet by a style query and once in the script for the scroll and the settle after a drag; under none the indicator's and the cover's transitions and the selected look's color transition are off, scrollIntoView uses behavior: 'instant', and the drag is taken as it is under prefers-reduced-motion. The tonal indicator is one element with a translucent background, so its slide and resize never overlap two drawings of it (TAB-50). A row without panels (TAB-42) has role radiogroup where a row with panels has role tablist, with no aria-orientation, and each tanrei-tab role radio with aria-checked in place of aria-selected and no aria-controls. The row has a panel while it holds a tanrei-tab-panel, while the tanrei-tab-view that draws it or is linked to it has a panel for one of its tabs, or while a Tanrei element that draws the row links its own panel to it (the date-time picker links its time section, DTM-13); the roles follow in the update that re-reads the panels. The roles are read from the panels and never set by the product, so a row cannot claim panels it does not have.	TanreiTabs(selection: Binding<V>, variant:, fullWidth:) { TanreiTab … }: each tab carries its panel, and only the selected one is shown. The binding holds the selected tab's tag; writing it is change. label sets the row's accessibilityLabel. A truncated label (.lineLimit(1), .truncationMode(.tail)) is shown whole by the large-content viewer and by .help on macOS (TAB-25). SwiftUI's TabView is an app's tab bar (a navigation bar), not this component. Until it catches up it ships scrollable: instead of fullWidth:, a line indicator and wrapping fixed labels. link is the shared TanreiTabLink a linked Tab view is passed too: the tabs read the indicator offset (TAB-26) from it and report their order and disabled tabs to the Tab view through it; without a Tab view it is omitted and the offset is 0. The drag is a DragGesture(minimumDistance:) on the row, simultaneousGesture with the tabs' taps, its onChanged placing the indicator and its onEnded reading predictedEndTranslation for the fling; the binding is written only in onEnded. Until it catches up it also draws no track and follows no drag. A shared choice has no parameter here: rows given the same Binding show the same choice, which is the group (TAB-36), and SwiftUI redraws them in one frame. The product keeps a row that lacks a value on a binding of its own, since a selection that names none of a row's tabs selects none (TAB-11), and remembers by backing the binding with @AppStorage (or @SceneStorage), which is restored before the first frame. TAB-37 to TAB-41 describe a group the component keeps, which this platform does not have: every row slides as TAB-17 says for a value the product sets, since the row cannot tell following from being set; the README says so, and says that a ScrollView does not hold a row in place when content above it changes height. Not built on this platform yet: the selected label's added weight from selected.label.emphasis with every tab keeping the heavier label's width (TAB-16, TAB-50); the selected tab's state layer over its active indicator (TAB-18); the icon's place read from icon.placement of the row's size (TAB-18); variant: .tonal; size: TanreiTabsSize (.small, .medium); track: Bool? (nil reads the generated choice trackVisible); transition: TanreiTabsTransition (.auto, .slide, .none; .auto reads the generated choice), under .none the selection is set without withAnimation and the DragGesture stays. The hit area of a small row is .contentShape on a frame of the minimum target. A row whose tabs carry no panel is the single choice of TAB-42: a container named by label without the tab bar trait, each tab a button with the selected trait, as a segmented picker is told; until it catches up every row has the tab bar trait.	TanreiTabs(selectedValue, onSelectedValueChange, variant, fullWidth, contentDescription) { TanreiTab(…) }, one composable for rows that hug and rows that fill (Material's PrimaryTabRow, SecondaryTabRow and ScrollableTabRow in one). State hoisting: the caller keeps selectedValue and moves it from onSelectedValueChange. A truncated label (maxLines = 1, TextOverflow.Ellipsis) is shown whole in a plain tooltip on long press and hover (TAB-25). Compose has no tab panel role: the product shows the selected tab's content below the row. Until it catches up it ships scrollable instead of fullWidth, a line indicator and wrapping fixed labels. link is the shared rememberTanreiTabLink() a linked Tab view is passed too: the tabs read the indicator offset (TAB-26) from it and report their order and disabled tabs to the Tab view through it; without a Tab view it is omitted and the offset is 0. The drag is Modifier.pointerInput with detectHorizontalDragGestures (or draggable with a DraggableState) on the row, a VelocityTracker giving the fling; onSelectedValueChange is called only when the drag ends. Until it catches up it also draws no track and follows no drag. A shared choice has no parameter here: rows given the same hoisted selectedValue show the same choice, which is the group (TAB-36), and recompose in one frame. The caller gives a row that lacks a value a state of its own, since a selection that names none of a row's tabs selects none (TAB-11), and remembers by keeping the state in DataStore or SharedPreferences, read before the first composition. TAB-37 to TAB-41 describe a group the component keeps, which this platform does not have: every row slides as TAB-17 says for a value the product sets, since the row cannot tell following from being set; the README says so, and says that a LazyColumn keeps its first visible item in place when items above change height while a scrolling Column does not. Not built on this platform yet: the selected label's added weight from selected.label.emphasis with every tab keeping the heavier label's width (TAB-16, TAB-50); the selected tab's state layer over its active indicator (TAB-18); the icon's place read from icon.placement of the row's size (TAB-18); TanreiTabsVariant.Tonal; size: TanreiTabsSize (Small, Medium); track: Boolean? = null (null reads the generated choice trackVisible); transition: TanreiTabsTransition (Auto, Slide, None), under None the indicator is placed with snapTo in place of animateTo and the drag is still detected. The hit area of a small row is Modifier.minimumInteractiveComponentSize() outside the drawn box. The row holds no panel here, since the product draws the content below it, so it is the single choice of TAB-42 until a Tab view links one: a selectableGroup() named by contentDescription, each tab with Role.RadioButton and its selected state; until it catches up every tab has Role.Tab.	TanreiTabBar<T>(value:, onChanged:, variant:, isScrollable:, semanticLabel:, tabs: [TanreiTab<T>(…)]), as TabBar but selected by value rather than by a TabController's index; the caller moves value from onChanged. isScrollable is the inverse of fullWidth, as in Flutter's TabBar, and defaults to true (hug). A truncated label (maxLines: 1, TextOverflow.ellipsis) is shown whole in a Tooltip (TAB-25). TanreiTabBarView gives way to the Tab view, TanreiTabView, which draws a TanreiTabBar itself or is linked by link:, a TanreiTabLink<T> passed to both, as Flutter's TabController is shared by a TabBar and a TabBarView: the bar reads the indicator offset (TAB-26) from it and reports its order and disabled tabs to the view through it. Until it catches up, TanreiTabBarView<T>(value:, children:, semanticLabels:) shows the panel of the selected value and does not swipe. Until it catches up it ships isScrollable defaulting to false, a line indicator and wrapping fixed labels. The drag is a GestureDetector's onHorizontalDragStart, onHorizontalDragUpdate and onHorizontalDragEnd on the bar, DragEndDetails.primaryVelocity giving the fling; onChanged is called only from onHorizontalDragEnd. Until it catches up it also draws no track and follows no drag. A shared choice has no parameter here: bars given the same value from one piece of the product's state show the same choice, which is the group (TAB-36), and rebuild in one frame. The product gives a bar that lacks a value a state of its own, since a selection that names none of a bar's tabs selects none (TAB-11), and remembers with shared_preferences or its own store, read before the first build. TAB-37 to TAB-41 describe a group the component keeps, which this platform does not have: every row slides as TAB-17 says for a value the product sets, since the row cannot tell following from being set; the README says so, and says that a scroll view does not hold a bar in place when content above it changes height. Not built on this platform yet: the selected label's added weight from selected.label.emphasis with every tab keeping the heavier label's width (TAB-16, TAB-50); the selected tab's state layer over its active indicator (TAB-18); the icon's place read from icon.placement of the row's size (TAB-18); TanreiTabsVariant.tonal; size: TanreiTabsSize (small, medium); bool? track (null reads the generated choice trackVisible); transition: TanreiTabsTransition (auto, slide, none), under none the controller's value is set without animateTo and the horizontal drag is still recognised. The hit area of a small row is a GestureDetector box of the minimum target with HitTestBehavior.translucent. A row with no linked TanreiTabBarView holds no panel and is the single choice of TAB-42: each tab is a radio, Semantics(checked:, inMutuallyExclusiveGroup: true), in place of SemanticsRole.tab and selected; until it catches up every tab has SemanticsRole.tab.	<Tabs items={Tab[]} value onValueChange variant fullWidth accessibilityLabel>; controlled, the caller moves value from onValueChange and renders the selected panel below the row. React Native has no tab panel role, and the row holds no panel (the caller renders it), so the row is the single choice of TAB-42: the radiogroup role, and each tab the radio role with its checked state. Until it catches up the row has the tablist role and each tab the tab role with its selected state, and the selected panel follows the row in reading order. A truncated label (numberOfLines={1}, ellipsizeMode="tail") keeps the whole label as the tab's accessibilityLabel; React Native has no tooltip of its own, so it is not shown whole elsewhere (TAB-25: where the platform has an idiom). Until it catches up it ships scrollable instead of fullWidth, a line indicator and wrapping fixed labels. link is the shared useTabLink() a linked Tab view is passed too: the tabs read the indicator offset (TAB-26) from it and report their order and disabled tabs to the Tab view through it; without a Tab view it is omitted and the offset is 0. The drag is a PanResponder on the row (or React Native Gesture Handler's Gesture.Pan() where the product has it), claiming the responder once the drag passes the slop sideways, with the release's vx giving the fling; onValueChange is called only on release. Until it catches up it also draws no track and follows no drag. A shared choice has no prop here: rows given the same controlled value from one piece of the product's state show the same choice, which is the group (TAB-36), and render in one commit. The product gives a row that lacks a value a state of its own, since a selection that names none of a row's tabs selects none (TAB-11), and remembers with AsyncStorage or its own store; AsyncStorage answers after the first frame, so a product that must not show another tab first reads it before it mounts the screen. TAB-37 to TAB-41 describe a group the component keeps, which this platform does not have: every row slides as TAB-17 says for a value the product sets, since the row cannot tell following from being set; the README says so, and says that a ScrollView holds a row in place only with maintainVisibleContentPosition. Not built on this platform yet: the selected label's added weight from selected.label.emphasis with every tab keeping the heavier label's width (TAB-16, TAB-50); the selected tab's state layer over its active indicator (TAB-18); the icon's place read from icon.placement of the row's size (TAB-18); variant="tonal"; size ("small", "medium"); track?: boolean | null (null reads the generated choice trackVisible); transition ("auto", "slide", "none"), under "none" the indicator's value is set with setValue in place of Animated.timing and the PanResponder stays. The hit area of a small row is hitSlop.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-tabs-active-indicator-height	—	32px
--tanrei-comp-tabs-active-indicator-padding-block-medium	sys.space.space50	4px
--tanrei-comp-tabs-active-indicator-padding-block-small	sys.space.space25	2px
--tanrei-comp-tabs-active-indicator-padding-inline-medium	comp.tabs.container.padding-inline.medium	16px
--tanrei-comp-tabs-active-indicator-padding-inline-small	comp.tabs.container.padding-inline.small	12px
--tanrei-comp-tabs-container-gap	sys.space.space50	4px
--tanrei-comp-tabs-container-height-with-icon	—	64px
--tanrei-comp-tabs-container-height-medium	—	48px
--tanrei-comp-tabs-container-height-small	—	32px
--tanrei-comp-tabs-container-padding-inline-medium	sys.space.space200	16px
--tanrei-comp-tabs-container-padding-inline-small	sys.space.space150	12px
--tanrei-comp-tabs-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-tabs-disabled-opacity	—	1
--tanrei-comp-tabs-divider-color	—	#000000 · 0%
--tanrei-comp-tabs-divider-thickness	sys.border.hairline	1px
--tanrei-comp-tabs-focused-opacity	—	1
--tanrei-comp-tabs-hovered-opacity	—	1
--tanrei-comp-tabs-icon-placement-medium	—	0
--tanrei-comp-tabs-icon-placement-small	—	1
--tanrei-comp-tabs-icon-size-medium	sys.icon.medium	24px
--tanrei-comp-tabs-icon-size-small	sys.icon.small	20px
--tanrei-comp-tabs-motion-feedback-duration	sys.motion.role.feedback	450ms
--tanrei-comp-tabs-motion-indicator-duration	sys.motion.role.selection.travel	250ms
--tanrei-comp-tabs-motion-indicator-easing	sys.motion.easing.spatial	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-tabs-motion-state-duration	sys.motion.role.state.large	250ms
--tanrei-comp-tabs-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-tabs-motion-transition	—	0
--tanrei-comp-tabs-pressed-opacity	—	1
--tanrei-comp-tabs-primary-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-active-indicator-shape	sys.shape.corner.full	9999px
--tanrei-comp-tabs-primary-active-indicator-thickness	—	3px
--tanrei-comp-tabs-primary-container-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-covered-icon-color	sys.color.on-primary	#ffffff
--tanrei-comp-tabs-primary-covered-label-color	sys.color.on-primary	#ffffff
--tanrei-comp-tabs-primary-disabled-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-disabled-active-indicator-shape	—	9999px
--tanrei-comp-tabs-primary-disabled-active-indicator-thickness	—	3px
--tanrei-comp-tabs-primary-disabled-container-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-disabled-covered-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-covered-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-selected-active-indicator-color	—	#1b1b1b · 12%
--tanrei-comp-tabs-primary-disabled-selected-container-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-disabled-selected-covered-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-selected-covered-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-selected-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-selected-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-selected-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-primary-disabled-track-color	—	#eeeeee
--tanrei-comp-tabs-primary-disabled-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-disabled-underline-shape	—	3px
--tanrei-comp-tabs-primary-disabled-underline-thickness	—	3px
--tanrei-comp-tabs-primary-focused-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-focused-active-indicator-shape	—	9999px
--tanrei-comp-tabs-primary-focused-active-indicator-thickness	—	3px
--tanrei-comp-tabs-primary-focused-container-color	—	#262626 · 10%
--tanrei-comp-tabs-primary-focused-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-primary-focused-covered-label-color	—	#ffffff
--tanrei-comp-tabs-primary-focused-icon-color	—	#262626
--tanrei-comp-tabs-primary-focused-label-color	—	#262626
--tanrei-comp-tabs-primary-focused-selected-active-indicator-color	—	#1b1b1b
--tanrei-comp-tabs-primary-focused-selected-container-color	—	#ffffff · 10%
--tanrei-comp-tabs-primary-focused-selected-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-primary-focused-selected-covered-label-color	—	#ffffff
--tanrei-comp-tabs-primary-focused-selected-icon-color	—	#262626
--tanrei-comp-tabs-primary-focused-selected-label-color	—	#262626
--tanrei-comp-tabs-primary-focused-selected-state-layer-color	—	#ffffff
--tanrei-comp-tabs-primary-focused-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-focused-state-layer-color	—	#262626
--tanrei-comp-tabs-primary-focused-track-color	—	#eeeeee
--tanrei-comp-tabs-primary-focused-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-focused-underline-shape	—	3px
--tanrei-comp-tabs-primary-focused-underline-thickness	—	3px
--tanrei-comp-tabs-primary-hovered-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-hovered-active-indicator-shape	—	9999px
--tanrei-comp-tabs-primary-hovered-active-indicator-thickness	—	3px
--tanrei-comp-tabs-primary-hovered-container-color	—	#262626 · 8%
--tanrei-comp-tabs-primary-hovered-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-primary-hovered-covered-label-color	—	#ffffff
--tanrei-comp-tabs-primary-hovered-icon-color	—	#262626
--tanrei-comp-tabs-primary-hovered-label-color	—	#262626
--tanrei-comp-tabs-primary-hovered-selected-active-indicator-color	—	#1b1b1b
--tanrei-comp-tabs-primary-hovered-selected-container-color	—	#ffffff · 8%
--tanrei-comp-tabs-primary-hovered-selected-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-primary-hovered-selected-covered-label-color	—	#ffffff
--tanrei-comp-tabs-primary-hovered-selected-icon-color	—	#262626
--tanrei-comp-tabs-primary-hovered-selected-label-color	—	#262626
--tanrei-comp-tabs-primary-hovered-selected-state-layer-color	—	#ffffff
--tanrei-comp-tabs-primary-hovered-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-hovered-state-layer-color	—	#262626
--tanrei-comp-tabs-primary-hovered-track-color	—	#eeeeee
--tanrei-comp-tabs-primary-hovered-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-hovered-underline-shape	—	3px
--tanrei-comp-tabs-primary-hovered-underline-thickness	—	3px
--tanrei-comp-tabs-primary-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-primary-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-primary-pressed-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-pressed-active-indicator-shape	—	9999px
--tanrei-comp-tabs-primary-pressed-active-indicator-thickness	—	3px
--tanrei-comp-tabs-primary-pressed-container-color	—	#262626 · 10%
--tanrei-comp-tabs-primary-pressed-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-primary-pressed-covered-label-color	—	#ffffff
--tanrei-comp-tabs-primary-pressed-icon-color	—	#262626
--tanrei-comp-tabs-primary-pressed-label-color	—	#262626
--tanrei-comp-tabs-primary-pressed-selected-active-indicator-color	—	#1b1b1b
--tanrei-comp-tabs-primary-pressed-selected-container-color	—	#ffffff · 10%
--tanrei-comp-tabs-primary-pressed-selected-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-primary-pressed-selected-covered-label-color	—	#ffffff
--tanrei-comp-tabs-primary-pressed-selected-icon-color	—	#262626
--tanrei-comp-tabs-primary-pressed-selected-label-color	—	#262626
--tanrei-comp-tabs-primary-pressed-selected-state-layer-color	—	#ffffff
--tanrei-comp-tabs-primary-pressed-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-pressed-state-layer-color	—	#262626
--tanrei-comp-tabs-primary-pressed-track-color	—	#eeeeee
--tanrei-comp-tabs-primary-pressed-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-pressed-underline-shape	—	3px
--tanrei-comp-tabs-primary-pressed-underline-thickness	—	3px
--tanrei-comp-tabs-primary-selected-active-indicator-color	sys.color.primary	#1b1b1b
--tanrei-comp-tabs-primary-selected-container-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-selected-covered-icon-color	sys.color.on-primary	#ffffff
--tanrei-comp-tabs-primary-selected-covered-label-color	sys.color.on-primary	#ffffff
--tanrei-comp-tabs-primary-selected-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-primary-selected-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-primary-selected-label-emphasis	—	0
--tanrei-comp-tabs-primary-selected-state-layer-color	comp.tabs.primary.selected.covered-label.color	#ffffff
--tanrei-comp-tabs-primary-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-state-layer-color	comp.tabs.primary.label.color	#262626
--tanrei-comp-tabs-primary-track-color	sys.color.secondary-container	#eeeeee
--tanrei-comp-tabs-primary-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-primary-underline-shape	sys.shape.corner.extra-small	3px
--tanrei-comp-tabs-primary-underline-thickness	—	3px
--tanrei-comp-tabs-secondary-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-active-indicator-shape	sys.shape.corner.full	9999px
--tanrei-comp-tabs-secondary-active-indicator-thickness	sys.border.thick	2px
--tanrei-comp-tabs-secondary-container-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-covered-icon-color	sys.color.on-secondary	#ffffff
--tanrei-comp-tabs-secondary-covered-label-color	sys.color.on-secondary	#ffffff
--tanrei-comp-tabs-secondary-disabled-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-disabled-active-indicator-shape	—	9999px
--tanrei-comp-tabs-secondary-disabled-active-indicator-thickness	—	2px
--tanrei-comp-tabs-secondary-disabled-container-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-disabled-covered-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-covered-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-selected-active-indicator-color	—	#1b1b1b · 12%
--tanrei-comp-tabs-secondary-disabled-selected-container-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-disabled-selected-covered-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-selected-covered-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-selected-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-selected-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-selected-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-secondary-disabled-track-color	—	#eeeeee
--tanrei-comp-tabs-secondary-disabled-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-disabled-underline-shape	—	0px
--tanrei-comp-tabs-secondary-disabled-underline-thickness	—	2px
--tanrei-comp-tabs-secondary-focused-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-focused-active-indicator-shape	—	9999px
--tanrei-comp-tabs-secondary-focused-active-indicator-thickness	—	2px
--tanrei-comp-tabs-secondary-focused-container-color	—	#262626 · 10%
--tanrei-comp-tabs-secondary-focused-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-secondary-focused-covered-label-color	—	#ffffff
--tanrei-comp-tabs-secondary-focused-icon-color	—	#262626
--tanrei-comp-tabs-secondary-focused-label-color	—	#262626
--tanrei-comp-tabs-secondary-focused-selected-active-indicator-color	—	#525252
--tanrei-comp-tabs-secondary-focused-selected-container-color	—	#ffffff · 10%
--tanrei-comp-tabs-secondary-focused-selected-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-secondary-focused-selected-covered-label-color	—	#ffffff
--tanrei-comp-tabs-secondary-focused-selected-icon-color	—	#262626
--tanrei-comp-tabs-secondary-focused-selected-label-color	—	#262626
--tanrei-comp-tabs-secondary-focused-selected-state-layer-color	—	#ffffff
--tanrei-comp-tabs-secondary-focused-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-focused-state-layer-color	—	#262626
--tanrei-comp-tabs-secondary-focused-track-color	—	#eeeeee
--tanrei-comp-tabs-secondary-focused-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-focused-underline-shape	—	0px
--tanrei-comp-tabs-secondary-focused-underline-thickness	—	2px
--tanrei-comp-tabs-secondary-hovered-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-hovered-active-indicator-shape	—	9999px
--tanrei-comp-tabs-secondary-hovered-active-indicator-thickness	—	2px
--tanrei-comp-tabs-secondary-hovered-container-color	—	#262626 · 8%
--tanrei-comp-tabs-secondary-hovered-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-secondary-hovered-covered-label-color	—	#ffffff
--tanrei-comp-tabs-secondary-hovered-icon-color	—	#262626
--tanrei-comp-tabs-secondary-hovered-label-color	—	#262626
--tanrei-comp-tabs-secondary-hovered-selected-active-indicator-color	—	#525252
--tanrei-comp-tabs-secondary-hovered-selected-container-color	—	#ffffff · 8%
--tanrei-comp-tabs-secondary-hovered-selected-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-secondary-hovered-selected-covered-label-color	—	#ffffff
--tanrei-comp-tabs-secondary-hovered-selected-icon-color	—	#262626
--tanrei-comp-tabs-secondary-hovered-selected-label-color	—	#262626
--tanrei-comp-tabs-secondary-hovered-selected-state-layer-color	—	#ffffff
--tanrei-comp-tabs-secondary-hovered-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-hovered-state-layer-color	—	#262626
--tanrei-comp-tabs-secondary-hovered-track-color	—	#eeeeee
--tanrei-comp-tabs-secondary-hovered-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-hovered-underline-shape	—	0px
--tanrei-comp-tabs-secondary-hovered-underline-thickness	—	2px
--tanrei-comp-tabs-secondary-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-secondary-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-secondary-pressed-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-pressed-active-indicator-shape	—	9999px
--tanrei-comp-tabs-secondary-pressed-active-indicator-thickness	—	2px
--tanrei-comp-tabs-secondary-pressed-container-color	—	#262626 · 10%
--tanrei-comp-tabs-secondary-pressed-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-secondary-pressed-covered-label-color	—	#ffffff
--tanrei-comp-tabs-secondary-pressed-icon-color	—	#262626
--tanrei-comp-tabs-secondary-pressed-label-color	—	#262626
--tanrei-comp-tabs-secondary-pressed-selected-active-indicator-color	—	#525252
--tanrei-comp-tabs-secondary-pressed-selected-container-color	—	#ffffff · 10%
--tanrei-comp-tabs-secondary-pressed-selected-covered-icon-color	—	#ffffff
--tanrei-comp-tabs-secondary-pressed-selected-covered-label-color	—	#ffffff
--tanrei-comp-tabs-secondary-pressed-selected-icon-color	—	#262626
--tanrei-comp-tabs-secondary-pressed-selected-label-color	—	#262626
--tanrei-comp-tabs-secondary-pressed-selected-state-layer-color	—	#ffffff
--tanrei-comp-tabs-secondary-pressed-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-pressed-state-layer-color	—	#262626
--tanrei-comp-tabs-secondary-pressed-track-color	—	#eeeeee
--tanrei-comp-tabs-secondary-pressed-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-pressed-underline-shape	—	0px
--tanrei-comp-tabs-secondary-pressed-underline-thickness	—	2px
--tanrei-comp-tabs-secondary-selected-active-indicator-color	sys.color.secondary	#525252
--tanrei-comp-tabs-secondary-selected-container-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-selected-covered-icon-color	sys.color.on-secondary	#ffffff
--tanrei-comp-tabs-secondary-selected-covered-label-color	sys.color.on-secondary	#ffffff
--tanrei-comp-tabs-secondary-selected-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-secondary-selected-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-secondary-selected-label-emphasis	—	0
--tanrei-comp-tabs-secondary-selected-state-layer-color	comp.tabs.secondary.selected.covered-label.color	#ffffff
--tanrei-comp-tabs-secondary-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-state-layer-color	comp.tabs.secondary.label.color	#262626
--tanrei-comp-tabs-secondary-track-color	sys.color.secondary-container	#eeeeee
--tanrei-comp-tabs-secondary-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-secondary-underline-shape	sys.shape.corner.none	0px
--tanrei-comp-tabs-secondary-underline-thickness	sys.border.thick	2px
--tanrei-comp-tabs-tonal-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-active-indicator-shape	sys.shape.corner.full	9999px
--tanrei-comp-tabs-tonal-active-indicator-thickness	sys.border.thick	2px
--tanrei-comp-tabs-tonal-container-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-covered-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-tonal-covered-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-tonal-disabled-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-disabled-active-indicator-shape	—	9999px
--tanrei-comp-tabs-tonal-disabled-active-indicator-thickness	—	2px
--tanrei-comp-tabs-tonal-disabled-container-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-disabled-covered-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-covered-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-selected-active-indicator-color	—	#1b1b1b · 12%
--tanrei-comp-tabs-tonal-disabled-selected-container-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-disabled-selected-covered-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-selected-covered-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-selected-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-selected-label-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-selected-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-tabs-tonal-disabled-track-color	—	#eeeeee
--tanrei-comp-tabs-tonal-disabled-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-disabled-underline-shape	—	0px
--tanrei-comp-tabs-tonal-disabled-underline-thickness	—	2px
--tanrei-comp-tabs-tonal-focused-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-focused-active-indicator-shape	—	9999px
--tanrei-comp-tabs-tonal-focused-active-indicator-thickness	—	2px
--tanrei-comp-tabs-tonal-focused-container-color	—	#4b4b4b · 10%
--tanrei-comp-tabs-tonal-focused-covered-icon-color	—	#262626
--tanrei-comp-tabs-tonal-focused-covered-label-color	—	#262626
--tanrei-comp-tabs-tonal-focused-icon-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-focused-label-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-focused-selected-active-indicator-color	—	#262626 · 16%
--tanrei-comp-tabs-tonal-focused-selected-container-color	—	#262626 · 10%
--tanrei-comp-tabs-tonal-focused-selected-covered-icon-color	—	#262626
--tanrei-comp-tabs-tonal-focused-selected-covered-label-color	—	#262626
--tanrei-comp-tabs-tonal-focused-selected-icon-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-focused-selected-label-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-focused-selected-state-layer-color	—	#262626
--tanrei-comp-tabs-tonal-focused-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-focused-state-layer-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-focused-track-color	—	#eeeeee
--tanrei-comp-tabs-tonal-focused-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-focused-underline-shape	—	0px
--tanrei-comp-tabs-tonal-focused-underline-thickness	—	2px
--tanrei-comp-tabs-tonal-hovered-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-hovered-active-indicator-shape	—	9999px
--tanrei-comp-tabs-tonal-hovered-active-indicator-thickness	—	2px
--tanrei-comp-tabs-tonal-hovered-container-color	—	#4b4b4b · 8%
--tanrei-comp-tabs-tonal-hovered-covered-icon-color	—	#262626
--tanrei-comp-tabs-tonal-hovered-covered-label-color	—	#262626
--tanrei-comp-tabs-tonal-hovered-icon-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-hovered-label-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-hovered-selected-active-indicator-color	—	#262626 · 16%
--tanrei-comp-tabs-tonal-hovered-selected-container-color	—	#262626 · 8%
--tanrei-comp-tabs-tonal-hovered-selected-covered-icon-color	—	#262626
--tanrei-comp-tabs-tonal-hovered-selected-covered-label-color	—	#262626
--tanrei-comp-tabs-tonal-hovered-selected-icon-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-hovered-selected-label-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-hovered-selected-state-layer-color	—	#262626
--tanrei-comp-tabs-tonal-hovered-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-hovered-state-layer-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-hovered-track-color	—	#eeeeee
--tanrei-comp-tabs-tonal-hovered-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-hovered-underline-shape	—	0px
--tanrei-comp-tabs-tonal-hovered-underline-thickness	—	2px
--tanrei-comp-tabs-tonal-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-tabs-tonal-label-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-tabs-tonal-pressed-active-indicator-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-pressed-active-indicator-shape	—	9999px
--tanrei-comp-tabs-tonal-pressed-active-indicator-thickness	—	2px
--tanrei-comp-tabs-tonal-pressed-container-color	—	#4b4b4b · 10%
--tanrei-comp-tabs-tonal-pressed-covered-icon-color	—	#262626
--tanrei-comp-tabs-tonal-pressed-covered-label-color	—	#262626
--tanrei-comp-tabs-tonal-pressed-icon-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-pressed-label-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-pressed-selected-active-indicator-color	—	#262626 · 16%
--tanrei-comp-tabs-tonal-pressed-selected-container-color	—	#262626 · 10%
--tanrei-comp-tabs-tonal-pressed-selected-covered-icon-color	—	#262626
--tanrei-comp-tabs-tonal-pressed-selected-covered-label-color	—	#262626
--tanrei-comp-tabs-tonal-pressed-selected-icon-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-pressed-selected-label-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-pressed-selected-state-layer-color	—	#262626
--tanrei-comp-tabs-tonal-pressed-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-pressed-state-layer-color	—	#4b4b4b
--tanrei-comp-tabs-tonal-pressed-track-color	—	#eeeeee
--tanrei-comp-tabs-tonal-pressed-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-pressed-underline-shape	—	0px
--tanrei-comp-tabs-tonal-pressed-underline-thickness	—	2px
--tanrei-comp-tabs-tonal-selected-active-indicator-color	sys.color.secondary-container	#262626 · 16%
--tanrei-comp-tabs-tonal-selected-container-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-selected-covered-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-tonal-selected-covered-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tabs-tonal-selected-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-tabs-tonal-selected-label-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-tabs-tonal-selected-label-emphasis	sys.typescale.emphasis.label	100
--tanrei-comp-tabs-tonal-selected-state-layer-color	comp.tabs.tonal.selected.covered-label.color	#262626
--tanrei-comp-tabs-tonal-selected-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-state-layer-color	comp.tabs.tonal.label.color	#4b4b4b
--tanrei-comp-tabs-tonal-track-color	sys.color.secondary-container	#eeeeee
--tanrei-comp-tabs-tonal-underline-color	—	#000000 · 0%
--tanrei-comp-tabs-tonal-underline-shape	sys.shape.corner.none	0px
--tanrei-comp-tabs-tonal-underline-thickness	sys.border.thick	2px
--tanrei-comp-tabs-track-padding	sys.space.space50	4px
--tanrei-comp-tabs-track-shape	sys.shape.corner.full	9999px
--tanrei-comp-tabs-track-visible	—	1
--tanrei-comp-tabs-label-typescale	sys.typescale.label	500 14px/1.4286

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

variant: primary (36)

primary

variant: primary value: overview label: Project items: 3

primary-fill

variant: primary fullWidth: true value: overview label: Project items: 3

primary-fill-truncated

variant: primary fullWidth: true value: notifications label: Account items: 3

primary-icons

variant: primary value: overview items: 3

primary-icon-only

variant: primary value: overview items: 3

primary-icon-only-fill

variant: primary fullWidth: true value: overview items: 3

primary-single-characters

variant: primary value: m label: Size items: 4

primary-second-selected

variant: primary value: activity items: 3

primary-scrollable

variant: primary value: overview items: 6

primary-disabled

variant: primary value: overview items: 3

primary-selected-disabled

variant: primary value: billing items: 3

primary-two-icons

variant: primary value: light label: Theme items: 2

primary-two-icons-second-selected

variant: primary value: dark label: Theme items: 2

shared-choice

variant: primary value: flutter label: Platform group: fixture-platform items: 4

shared-choice-lacking

variant: primary value: react label: Platform group: fixture-platform items: 2

primary-no-track

variant: primary track: false value: overview label: Project items: 3

primary-small

variant: primary size: small value: overview label: Project items: 3

primary-small-no-track

variant: primary size: small track: false value: overview label: Project items: 3

primary-small-fill

variant: primary size: small fullWidth: true value: overview label: Project items: 3

primary-small-icons

variant: primary size: small value: overview items: 3

primary-no-track-icon-only

variant: primary track: false value: overview items: 3

primary-small-icon-only

variant: primary size: small value: overview items: 3

primary-small-single-characters

variant: primary size: small value: m label: Size items: 4

primary-no-track-disabled

variant: primary track: false value: overview items: 3

primary-small-disabled

variant: primary size: small value: overview items: 3

primary-long-labels

variant: primary value: notifications label: Account items: 5

primary-small-long-labels

variant: primary size: small value: notifications label: Account items: 5

primary-rtl

variant: primary value: overview label: Project direction: rtl items: 3

primary-small-rtl

variant: primary size: small value: overview label: Project direction: rtl items: 3

primary-no-transition

variant: primary value: overview transition: none label: Project items: 3

primary-slide

variant: primary value: overview transition: slide label: Project items: 3

vertical

variant: primary orientation: vertical value: general label: Settings items: 5

vertical-small

variant: primary size: small orientation: vertical value: general label: Settings items: 5

vertical-scroll

variant: primary orientation: vertical value: november label: Month items: 12

vertical-rtl

variant: primary orientation: vertical value: notifications label: Settings direction: rtl items: 5

vertical-disabled-tab

variant: primary orientation: vertical value: general label: Settings items: 5

variant: secondary (14)

secondary

variant: secondary value: overview label: Project items: 3

secondary-fill

variant: secondary fullWidth: true value: overview label: Project items: 3

secondary-icons

variant: secondary value: overview items: 3

secondary-icons-fill

variant: secondary fullWidth: true value: overview items: 3

secondary-scrollable

variant: secondary value: analytics items: 6

secondary-disabled

variant: secondary value: overview items: 3

secondary-two-icons

variant: secondary value: light label: Theme items: 2

secondary-no-track

variant: secondary track: false value: overview label: Project items: 3

secondary-small

variant: secondary size: small value: overview label: Project items: 3

secondary-small-no-track

variant: secondary size: small track: false value: overview label: Project items: 3

secondary-small-icons

variant: secondary size: small value: overview items: 3

secondary-no-track-selected-disabled

variant: secondary track: false value: billing items: 3

secondary-rtl

variant: secondary value: overview label: Project direction: rtl items: 3

vertical-secondary

variant: secondary orientation: vertical value: notifications label: Settings items: 5

variant: tonal (34)

tonal

variant: tonal value: overview label: Project items: 3

tonal-no-track

variant: tonal track: false value: overview label: Project items: 3

tonal-small

variant: tonal size: small value: overview label: Project items: 3

tonal-small-no-track

variant: tonal size: small track: false value: overview label: Project items: 3

tonal-track-on

variant: tonal track: true value: overview label: Project items: 3

tonal-fill

variant: tonal fullWidth: true value: overview label: Project items: 3

tonal-no-track-fill

variant: tonal track: false fullWidth: true value: overview label: Project items: 3

tonal-small-no-track-fill

variant: tonal size: small track: false fullWidth: true value: standard label: Contrast items: 3

tonal-small-no-track-fill-truncated

variant: tonal size: small track: false fullWidth: true value: notifications label: Account items: 3

tonal-second-selected

variant: tonal value: activity label: Project items: 3

tonal-no-track-second-selected

variant: tonal track: false value: activity label: Project items: 3

tonal-icons

variant: tonal value: board items: 3

tonal-no-track-icons

variant: tonal track: false value: board items: 3

tonal-small-no-track-icons

variant: tonal size: small track: false value: overview items: 3

tonal-icon-only

variant: tonal value: overview items: 3

tonal-no-track-icon-only

variant: tonal track: false value: overview items: 3

tonal-small-no-track-icon-only

variant: tonal size: small track: false value: overview items: 3

tonal-disabled

variant: tonal value: overview items: 3

tonal-selected-disabled

variant: tonal value: billing items: 3

tonal-no-track-disabled

variant: tonal track: false value: overview items: 3

tonal-no-track-selected-disabled

variant: tonal track: false value: billing items: 3

tonal-small-no-track-disabled

variant: tonal size: small track: false value: overview items: 3

tonal-long-labels

variant: tonal value: notifications label: Account items: 5

tonal-no-track-long-labels

variant: tonal track: false value: notifications label: Account items: 5

tonal-small-no-track-long-labels

variant: tonal size: small track: false value: notifications label: Account items: 5

tonal-rtl

variant: tonal value: overview label: Project direction: rtl items: 3

tonal-no-track-rtl

variant: tonal track: false value: overview label: Project direction: rtl items: 3

tonal-small-no-track-rtl

variant: tonal size: small track: false value: standard label: التباين direction: rtl items: 3

tonal-small-no-track-icons-rtl

variant: tonal size: small track: false value: activity direction: rtl items: 3

tonal-small-no-track-long-labels-rtl

variant: tonal size: small track: false value: notifications label: Account direction: rtl items: 5

tonal-no-transition

variant: tonal value: overview transition: none label: Project items: 3

tonal-small-no-track-no-transition

variant: tonal size: small track: false value: standard transition: none label: Contrast items: 3

tonal-no-track-no-transition

variant: tonal track: false value: web transition: none label: Platform items: 5

vertical-no-track

variant: tonal track: false orientation: vertical value: notifications label: Settings items: 5

इससे जनरेट किया गया: specs/tabs.spec.json, tokens/comp/tabs.tokens.json, design/tokens/

दिशानिर्देश

link

कब इस्तेमाल करें

link

टैब का इस्तेमाल एक विषय को कई व्यू में बाँटने और एक समय में एक व्यू दिखाने के लिए करें: किसी प्रोजेक्ट के अवलोकन, गतिविधि और सेटिंग; किसी प्रोफ़ाइल के पोस्ट और जवाब; किसी फ़ाइल का प्रीव्यू और इतिहास। व्यू बराबर दर्जे के होते हैं, और लोग उनके बीच किसी भी क्रम में आते-जाते हैं।

ऐप के गंतव्यों के बीच जाने के लिए, जो अलग-अलग विषय हैं, नेविगेशन बार या ड्रॉअर इस्तेमाल करें। टैब को उन चरणों के लिए इस्तेमाल न करें जिन्हें क्रम से पूरा करना ज़रूरी है, और न किसी एक लिस्ट को फ़िल्टर करने के लिए: फ़िल्टर के लिए चिप इस्तेमाल करें। टैब व्यू बदलते हैं, कभी कोई क्रिया शुरू नहीं करते।

Tanrei सिस्टम में, जो सेगमेंटेड बटन साथ नहीं देता, टैब उसकी जगह भी लेते हैं जब कुछ विकल्पों में से एक का चुनाव यह बदलता है कि नीचे क्या दिखे: कैलेंडर के ऊपर दिन, हफ़्ता और महीना, या किसी पेज के उदाहरणों के ऊपर स्टैंडर्ड, मध्यम और उच्च। ऐसी पंक्ति को पैनल की ज़रूरत नहीं होती। उसे ऐसा नाम दें जो बताए कि क्या चुना जा रहा है। जहाँ उसे उस चीज़ के बग़ल में हल्का रहना चाहिए जिसे वह बदलती है, वहाँ tonal वेरिएंट इस्तेमाल करें, उसके ट्रैक के बिना, और हेडर में small साइज़। जो चुनाव फ़ॉर्म के साथ भेजा जाने वाला मान सेट करता है, या ऐसा कुछ नहीं बदलता जिसे व्यक्ति देख सके, वह टैब नहीं है। उसके लिए रेडियो बटन इस्तेमाल करें।

टैब, सेगमेंटेड बटन या बटन ग्रुप

link

कंपोनेंट	यह क्या है	किसके लिए
टैब	एक ही विषय के व्यू, या एक ऐसा चुनाव जो बदलता है कि नीचे क्या दिखे। एक टैब चयनित रहता है, और ऐरो कुंजियाँ ले जाती हैं और चुनती हैं।	यह बदलना कि नीचे क्या दिखे: अवलोकन, गतिविधि, सेटिंग; दिन, हफ़्ता, महीना।
सेगमेंटेड बटन	आपस में जुड़े दो से पाँच विकल्प, जो एक मान सेट करते हैं, उनमें से एक या कई। डिफ़ॉल्ट Tanrei सिस्टम इसे साथ नहीं देता; Material और cupertino प्रीसेट देते हैं।	कुछ तय जवाबों वाली सेटिंग, उस प्रॉडक्ट में जो इनमें से कोई प्रीसेट इस्तेमाल करता है।
बटन ग्रुप	साथ रखे गए अलग-अलग बटन। हर एक अपने आप दबाया जाता है, और ग्रुप कोई चयन नहीं रखता।	संबंधित क्रियाएँ: रद्द करें और सेव करें; बोल्ड, इटैलिक और अंडरलाइन।

एक झटपट जाँच: अगर चुनने से यह बदलता है कि नीचे क्या दिखे, तो यह टैब है, पैनल हो या न हो। अगर चुनने से ऐसा मान सेट होता है जो फ़ॉर्म के साथ भेजा जाता है, तो यह रेडियो बटन है, या जहाँ सिस्टम उसे देता है वहाँ सेगमेंटेड बटन। अगर दबाने से कुछ होता है, तो यह बटन ग्रुप है।

वेरिएंट, साइज़ और लेआउट चुनना

link

चुनाव	यह क्या करता है	किसके लिए
Primary	आइकन medium साइज़ पर लेबल के ऊपर रखा जाता है और small साइज़ पर लेबल से पहले रहता है, जैसा डिज़ाइन सिस्टम हर साइज़ के लिए तय करता है (comp.tabs.icon.placement)। इंडिकेटर primary वेरिएंट के रंगों में बनता है।	स्क्रीन के मुख्य व्यू, उसके कॉन्टेंट के सबसे ऊपर।
Secondary	आइकन लेबल से पहले, एक ही पंक्ति में रहता है। इंडिकेटर secondary वेरिएंट के रंगों में बनता है।	उन व्यू में से किसी एक के भीतर के व्यू, primary टैब की पंक्ति के नीचे या किसी पैनल के भीतर।
Tonal	इंडिकेटर एक हल्की परत है, और चयनित लेबल बाक़ी लेबल से गहरा और मोटा होता है। आइकन लेबल से पहले रहता है।	वह चुनाव जिसे उस चीज़ से नज़र नहीं हटानी चाहिए जिसे वह बदलता है: कोड उदाहरण की भाषाएँ, कंट्रास्ट, इकाई।
Medium (size, डिफ़ॉल्ट)	पंक्ति 48 ऊँची होती है और इंडिकेटर 40।	स्क्रीन के कॉन्टेंट के सबसे ऊपर की पंक्ति।
Small (size)	पंक्ति 32 ऊँची होती है और इंडिकेटर 24। लेबल के बग़ल की पैडिंग और आइकन छोटे होते हैं, और हर वेरिएंट में आइकन लेबल से पहले रहता है। लेबल के टेक्स्ट का साइज़ वही रहता है।	हेडर या टूलबार की पंक्ति, छोटे बटनों के बग़ल में।
कॉन्टेंट जितना (fullWidth false, डिफ़ॉल्ट)	हर टैब का साइज़ उसके कॉन्टेंट के अनुसार रखता है और हर लेबल को एक पंक्ति में पूरा रखता है, वह चाहे जितना लंबा या बड़ा हो। ट्रैक अपने आख़िरी टैब के साथ ख़त्म होता है, और जब टैब नहीं समाते तो वे उसके भीतर आड़े स्क्रॉल होते हैं। इंडिकेटर चयनित टैब के कॉन्टेंट के अनुसार चलता है।	ज़्यादातर पंक्तियाँ: कुछ से ज़्यादा टैब, अलग-अलग लंबाई के लेबल, वे लेबल जो अनूदित हैं या लोगों ने लिखे हैं।
पूरी चौड़ाई (fullWidth true)	पंक्ति की चौड़ाई को बराबर बाँटता है। जो लेबल अपने हिस्से में नहीं समाता, वह अंत में एलिप्सिस के साथ काटा जाता है। इंडिकेटर टैब के हिस्से जितना चौड़ा होता है।	दो से पाँच छोटे लेबल, जिन्हें पूरी पंक्ति में फैलना है।

fullWidth को वेब पर full-width लिखा जाता है, SwiftUI, Compose और React Native पर fullWidth, और Flutter पर इसके उलटे रूप isScrollable में, जिसका डिफ़ॉल्ट true है, जैसा Flutter के अपने TabBar में है।

किसी भी लेआउट में लेबल कभी दूसरी पंक्ति में नहीं जाता और न शब्द के बीच से टूटता है, और आइकन जगह बनाने के लिए कभी छोटा नहीं होता। पूरी चौड़ाई भरने वाली पंक्ति में कटा हुआ लेबल टैब का पूरा एक्सेसिबल नाम बना रहता है, और प्लैटफ़ॉर्म जहाँ कर सकता है वहाँ उसे पूरा दिखाता है: वेब पर होवर और कीबोर्ड फ़ोकस पर एक सादा टूलटिप, Compose पर देर तक दबाने और होवर पर एक टूलटिप, Flutter पर एक Tooltip, SwiftUI पर लार्ज कॉन्टेंट व्यूअर (और macOS पर .help)। React Native का अपना कोई टूलटिप नहीं है, इसलिए वहाँ वह पूरा नहीं दिखाया जाता।

तीनों वेरिएंट एक ही कंट्रोल हैं। उनमें फ़र्क़ सिर्फ़ इतना है कि चयन कितना भारी दिखता है, और कुछ नहीं: कुंजियाँ, रोल और सहायक तकनीक को जो बताया जाता है, सब एक जैसे हैं।

डिज़ाइन सिस्टम वेरिएंट और साइज़ जोड़ सकता है। उसका जोड़ा हुआ वेरिएंट primary की तरह लेआउट होता है।

साइज़

link

small साइज़ की पंक्ति small साइज़ के बटन जितनी ऊँची होती है, इसलिए हेडर में दोनों एक ही लाइन में आ जाते हैं। वह न्यूनतम टार्गेट से कम ऊँची है, और इसके लिए उसे ऊँचा नहीं किया जाता। पंक्ति के ठीक ऊपर या ठीक नीचे, किसी टैब की सीध में दबाने पर भी वही टैब चुना जाता है। वहाँ रखा कोई कंट्रोल अपना दबाना अपने पास रखता है: पंक्ति के नीचे के बटन पर दबाना उसी बटन तक जाता है। बड़े टेक्स्ट के साथ small साइज़ की पंक्ति वैसे ही बढ़ती है जैसे medium साइज़ की, और कुछ नहीं कटता।

ट्रैक और इंडिकेटर

link

टैब और स्विच का मॉडल एक ही है: ट्रैक पर एक हैंडल, जो चुनी हुई चीज़ तक सरकता है और जिसे हाथ से भी वहाँ सरकाया जा सकता है। स्विच के दो स्टेट बराबर दर्जे के नहीं हैं, इसलिए उनके बीच उसका पूरा रूप बदलता है। टैब बराबर दर्जे के चुनाव हैं, इसलिए उनका ट्रैक कभी नहीं बदलता और सिर्फ़ इंडिकेटर चलता है।

• ट्रैक। पूरी पंक्ति के पीछे एक हल्का फ़िल, पूरी तरह गोल सिरों के साथ और बिना आउटलाइन के। वह पंक्ति जितना ऊँचा होता है। कॉन्टेंट जितनी रहने वाली पंक्ति में वह अपने आख़िरी टैब के बाद एक छोटे इनसेट पर ख़त्म होता है; पूरी चौड़ाई भरने वाली पंक्ति में वह पंक्ति जितना चौड़ा होता है। कोई भी टैब चयनित हो और टैब किसी भी स्टेट में हो, वह वैसा ही रहता है। जब टैब नहीं समाते, तो ट्रैक स्थिर रहता है और टैब उसके भीतर स्क्रॉल होते हैं, उसके गोल सिरों पर कटते हुए।
• इंडिकेटर। चयनित टैब के कॉन्टेंट के पीछे इंडिकेटर रहता है। उसकी ऊँचाई पंक्ति की ऊँचाई में से ऊपर और नीचे का ट्रैक का इनसेट घटाकर आती है, इसलिए हर टैब पर उसकी ऊँचाई एक ही है: डिफ़ॉल्ट सिस्टम में 48 की पंक्ति में 40, और जहाँ primary टैब लेबल के ऊपर आइकन रखते हैं वहाँ 56। कॉन्टेंट जितनी रहने वाली पंक्ति में वह टैब के कॉन्टेंट और पैडिंग जितना चौड़ा होता है, और जहाँ वह कॉन्टेंट अपनी ऊँचाई से ज़्यादा चौड़ा नहीं है वहाँ एक गोला: अकेला आइकन, एक अक्षर का लेबल, एक फ़ुल-विड्थ कैरेक्टर। पूरी चौड़ाई भरने वाली पंक्ति में वह टैब के हिस्से जितना चौड़ा होता है। primary और secondary टैब के लिए नियम एक ही है।
• तीन ओर एक ही इनसेट। इंडिकेटर ट्रैक के ऊपर से, उसके नीचे से और, पहले और आख़िरी टैब पर, उसके सिरे से एक ही इनसेट रखता है, पंक्ति की हर ऊँचाई पर। उसका गोल सिरा और ट्रैक का गोल सिरा संकेंद्री हैं। जिस टैब का इंडिकेटर एक गोला है, वह उस गोले जितना चौड़ा होता है, या न्यूनतम टार्गेट जितना, जहाँ वह बड़ा हो।
• होवर, फ़ोकस और दबाना उस बॉक्स में बनते हैं जो इंडिकेटर का उस टैब पर है, या टैब के चयनित होने पर होता, टैब के पूरे आयत पर कभी नहीं। चयनित टैब पर वे इंडिकेटर के ऊपर, उसके ढके कॉन्टेंट के रंग में बनते हैं, इसलिए चयनित टैब भी बाक़ी टैब की तरह होवर और दबाने का जवाब देता है। फिर भी पूरा टैब पॉइंटर का जवाब देता है।
• बिना ट्रैक की पंक्ति। track को false करें, और पंक्ति के पीछे का फ़िल नहीं बनता। और कुछ नहीं बदलता: पंक्ति अपना साइज़, इनसेट, हर टैब की जगह और हर रंग बनाए रखती है, इसलिए ट्रैक वाली और बिना ट्रैक की पंक्ति एक सीध में रहती हैं। इसे वहाँ इस्तेमाल करें जहाँ पंक्ति ऐसी चीज़ पर रखी है जो पहले से एक बार है: हेडर, कार्ड, कोड उदाहरण का शीर्षक। सेट न करने पर track डिज़ाइन सिस्टम के अनुसार चलता है (comp.tabs.track.visible, डिफ़ॉल्ट सिस्टम में चालू)। वेब पर ऐट्रिब्यूट track="false" है।
• Tonal इंडिकेटर। यह चयनित लेबल के रंग की एक आधी पारदर्शी परत है, जो ट्रैक के ऊपर या उस चीज़ के ऊपर बिछाई जाती है जिस पर पंक्ति रखी है, इसलिए वह हर सरफ़ेस पर उतने ही स्टेप के फ़र्क़ से दिखता है। यह जान-बूझकर हल्का रखा गया निशान है, इसलिए चयनित लेबल दूसरा निशान है: गहरा, और वज़न में एक स्टेप मोटा, ताकि चयन सिर्फ़ रंग से कभी न बताया जाए। हर टैब अपने लेबल के लिए मोटे वज़न जितनी जगह रखता है, इसलिए चयन बदलने पर पंक्ति में कुछ भी नहीं खिसकता।
• ढके हुए लेबल। लेबल और आइकन ठीक वहीं अपने ढके हुए रंगों में बनते हैं जहाँ इंडिकेटर उन्हें ढकता है। जब इंडिकेटर सरकता है या ड्रैग किया जाता है, तो जिस भी लेबल के ऊपर से वह गुज़रता है वह सिर्फ़ वहीं बदलता है जहाँ वह ढका है, और जिस पल इंडिकेटर नए टैब पर पहुँचता है उसी पल उस टैब का लेबल पूरा ढका होता है। ढकी हुई कॉपी सिस्टम के रंगों से बनती है, किसी ब्लेंड से कभी नहीं, इसलिए उसका कंट्रास्ट वही है जिसका वादा टोकन करते हैं।

डिज़ाइन सिस्टम चयनित टैब के नीचे, पंक्ति के निचले किनारे पर एक रेखा भी बना सकता है, और पूरी पंक्ति के साथ एक डिवाइडर भी। दोनों हर सिस्टम में मौजूद हैं और डिफ़ॉल्ट सिस्टम में पारदर्शी हैं। Material प्रीसेट उन्हें रंग देते हैं और ट्रैक और इंडिकेटर को पारदर्शी कर देते हैं, जैसा Material के टैब करते हैं।

पंक्ति पर ड्रैग करना

link

• टैप अब भी चुनता है। पंक्ति पर टच, पेन या माउस से किया गया ड्रैग इसकी जगह इंडिकेटर को पॉइंटर के साथ ले चलता है। उसकी जगह, उसकी चौड़ाई और उसके नीचे के लेबल के ढके हुए रंग लगातार बदलते हैं, बिना किसी थ्रेशोल्ड के।
• छोड़ने पर चुनाव होता है। वह टैब चुना जाता है जिसके इंडिकेटर ज़्यादा क़रीब है, या वह जिसकी ओर फ़्लिंग किया गया है। अगर वह कोई दूसरा टैब है, तो पंक्ति उसे चुनती है और change एक बार एमिट करती है, उन टैब के लिए कभी नहीं जिनके ऊपर से इंडिकेटर गुज़रा। अगर वह चयनित टैब ही है, तो इंडिकेटर लौट आता है और कुछ एमिट नहीं होता।
• रास्ते में और कुछ नहीं बदलता। चयन, पैनल, कीबोर्ड फ़ोकस और सहायक तकनीक को जो बताया गया है, सब छोड़े जाने तक जैसे थे वैसे रहते हैं। Escape, या प्लैटफ़ॉर्म का पॉइंटर को रद्द करना, इंडिकेटर को चयनित टैब पर लौटा देता है।
• स्क्रॉल काम करता रहता है। जो ड्रैग पहले ऊपर या नीचे जाता है, वह पेज को स्क्रॉल करता है। वेब पर, जिस पंक्ति के टैब स्क्रॉल होते हैं उसमें सिर्फ़ चयनित टैब से शुरू हुआ ड्रैग इंडिकेटर को चलाता है; कोई भी दूसरा आड़ा ड्रैग टैब को स्क्रॉल करता है।
• कम किया गया मोशन। इंडिकेटर तब भी पॉइंटर के साथ चलता है, जिसे व्यक्ति की अपनी उँगली चलाती है, और अपने टैब पर तुरंत पहुँच जाता है।

ट्रांज़िशन

link

transition बताता है कि पंक्ति नया चयन कैसे दिखाती है।

मान	यह क्या करता है
slide	इंडिकेटर नए टैब तक सरकता है और अपना साइज़ बदलता है, और उसके नीचे लेबल का रंग बदलता है। नज़र से बाहर का टैब मोशन के साथ स्क्रॉल होकर नज़र में आता है।
none	नया चयन एक ही फ़्रेम में पूरा दिखाया जाता है। न कुछ खिसकता है, न कुछ फ़ेड होता है।
auto (डिफ़ॉल्ट)	डिज़ाइन सिस्टम का जवाब लेता है (comp.tabs.motion.transition, डिफ़ॉल्ट सिस्टम में slide)।

none उस पंक्ति के लिए इस्तेमाल करें जो उस कॉन्टेंट के बग़ल में है जिसे उसने अभी-अभी बदला है, जहाँ सरकता हुआ इंडिकेटर अकेली ऐसी चीज़ होता जो अब भी चल रही है। none के साथ भी पंक्ति पर ड्रैग इंडिकेटर को साथ ले चलता है, और छोड़ते ही इंडिकेटर अपने टैब पर तुरंत पहुँच जाता है। होवर, फ़ोकस और दबाने का जवाब हर मान के साथ एक जैसा रहता है। जहाँ मोशन कम किया गया है, वहाँ चयन वैसे ही दिखाया जाता है जैसे none दिखाता है, transition चाहे जो कहे।

टैब व्यू के पास अपने पैनल के लिए अपना transition है। none पर सेट होने पर वह अपनी बनाई पंक्ति का सरकना भी रोक देता है।

चयन और पैनल

link

• मान के आधार पर। हर टैब का एक value होता है, जो अपनी पंक्ति में अनूठा है। टैब जोड़े, हटाए या नए क्रम में रखे जाएँ, मान तब भी बना रहता है, जबकि इंडेक्स चुपचाप कोई दूसरा व्यू चुन लेता। जो value किसी टैब का नाम नहीं लेता, वह कोई टैब नहीं चुनता और कोई पैनल नहीं दिखाता, और डीबग बिल्ड इसकी रिपोर्ट करते हैं।
• अपने आप सक्रिय होना। ऐरो कुंजियों से फ़ोकस ले जाने पर टैब चुन भी लिया जाता है, और पैनल तुरंत बदल जाता है। अगर किसी पैनल को लोड होने में समय लगता है, तो स्विच में देरी करने की जगह उसके भीतर लोडिंग स्टेट दिखाएँ।
• अक्षम टैब लाँघ दिए जाते हैं। ऐरो कुंजियाँ उन्हें लाँघ जाती हैं और वे कभी Tab स्टॉप नहीं होते, क्योंकि उन पर पहुँचना ऐसे टैब को चुन लेता जिसे चुना नहीं जा सकता। यह लिस्ट और मेन्यू से अलग है, जिनके अक्षम आइटम तक पहुँचा जा सकता है, क्योंकि वहाँ पहुँचने से कुछ नहीं चुना जाता।
• इंडिकेटर सरकता है। जब चयन बदलता है, तो इंडिकेटर पुराने टैब से नए टैब तक सरकता है और अपना साइज़ बदलता है, और रास्ते में गोला फैलकर कैप्सूल बन जाता है। जहाँ मोशन कम किया गया है, वहाँ वह तुरंत पहुँच जाता है। जब पंक्ति पहली बार दिखती है, या चयनित टैब का साइज़ नए चयन के बिना बदलता है (किसी फ़ॉन्ट का आना, टेक्स्ट साइज़ का बदलना), तो इंडिकेटर बिना सरके अपनी जगह रख दिया जाता है। जो टैब तब चयनित होता है या फ़ोकस पाता है जब वह स्क्रॉल के कारण आंशिक रूप से नज़र से बाहर है, वह स्क्रॉल होकर नज़र में आ जाता है।
• पंक्ति अपना ट्रैक ख़ुद बनाती है। उसे स्क्रीन की या ऐप बार की सरफ़ेस पर रखें। उसे अपने किसी कंटेनर की ज़रूरत नहीं है।
• टैब व्यू में। जो टैब व्यू अपनी पंक्ति ख़ुद बनाता है, वह इन्हीं टैब का इस्तेमाल करता है, उन्हीं टोकन और उसी व्यवहार के साथ। जब व्यक्ति टैब व्यू को स्वाइप करता है, तो वह इंडिकेटर को indicatorOffset से चलाता है: चयनित टैब पर 0, अगले सक्षम टैब पर 1 और पिछले पर −1, और उँगली के चलने के साथ इनके बीच के मान। इंडिकेटर फ़्रेम-दर-फ़्रेम उसके साथ चलता है, अपनी ओर से सरके बिना। जब तक आप इंडिकेटर को ख़ुद न चला रहे हों, इसे 0 पर छोड़ दें। व्यू का स्वाइप और उसकी पंक्ति पर ड्रैग दो जगहों पर एक ही जेस्चर हैं: स्वाइप एक पैनल आगे बढ़ाता है, और पैनल उसके साथ चलते हैं; पंक्ति पर ड्रैग कई टैब पार कर सकता है, और पैनल छोड़े जाने का इंतज़ार करते हैं।

चुनाव साझा करना

link

जब एक ही सवाल का जवाब कई जगह दिया जाता है, जैसे इस साइट के हर कोड उदाहरण का प्लैटफ़ॉर्म या किसी रिपोर्ट के हर आँकड़े की इकाइयाँ, तो उन पंक्तियों को एक ही group दें। एक पंक्ति में टैब चुनने पर हर उस दूसरी पंक्ति में उसी मान वाला टैब चुन लिया जाता है जिसमें वह है; जिस पंक्ति में ऐसा कोई टैब नहीं है, वह अपना चुनाव बनाए रखती है।

• मान से मिलाया जाता है। ग्रुप टैब के value के अनुसार चलता है, उसके लेबल के अनुसार कभी नहीं, इसलिए अनूदित या नए शब्दों में लिखा गया लेबल चुनाव को बनाए रखता है।
• एक पंक्ति सरकती है, एक ही पंक्ति एमिट करती है। जिस पंक्ति को व्यक्ति ने इस्तेमाल किया, वह सरकती है और change एमिट करती है, एक बार। बाक़ी हर पंक्ति चुनाव को तुरंत अपना लेती है, बिना मोशन के, बिना फ़ोकस लिए और बिना स्क्रॉल किए, और कुछ एमिट नहीं करती। जिस पंक्ति को व्यक्ति ने इस्तेमाल किया, वह विंडो में वहीं रहती है जहाँ वह है, भले ही उसके ऊपर की पंक्तियों की ऊँचाई बदले।
• याद रखना अलग बात है। rememberAs उस कुंजी का नाम देता है जिसके नीचे व्यक्ति का चुनाव उसके डिवाइस पर रखा जाता है और पंक्ति के पहली बार बनने से पहले लौटाया जाता है। कुंजी के बिना कुछ स्टोर नहीं होता। कुंजी आपकी है, ठीक वैसी ही इस्तेमाल होती है जैसी दी गई है, और सिर्फ़ टैब का मान स्टोर होता है; जहाँ आपका प्रॉडक्ट इस्तेमाल होता है वहाँ याद रखी गई पसंद के लिए सहमति चाहिए या नहीं, यह फ़ैसला आपका है।
• वेब पर ग्रुप को टैब ख़ुद सँभालते हैं। group और remember-as ऐट्रिब्यूट हैं, और वह कुंजी localStorage की एक कुंजी है। SwiftUI, Compose, Flutter और React Native पर, जिन पंक्तियों को एक ही चयन स्टेट दिया जाता है वे उसे पहले से साझा करती हैं, और वह स्टेट आपका प्रॉडक्ट रखता और स्टोर करता है।

एक ही ग्रुप की दो पंक्तियाँ: किसी में भी एक टैब चुनें

मैराथन 42.195 km की होती है।

मैराथन 26.2 मील की होती है।

तेज़ चाल 6 km/h की होती है।

तेज़ चाल 3.7 mph की होती है।

तेज़ चाल 3.2 नॉट की होती है।

डेमो में नॉटिकल सिर्फ़ दूसरी पंक्ति में है: उसे चुनने पर पहली पंक्ति अपने ही चुनाव पर रहती है, और जैसे ही चुनाव ऐसा होता है जो पहली पंक्ति में भी है, वह फिर साथ चलने लगती है। कोई भी पंक्ति कुंजी का नाम नहीं देती, इसलिए कुछ स्टोर नहीं होता।

इस साइट के टैब इसका एक उदाहरण हैं: प्लैटफ़ॉर्म के उदाहरणों का हर सेट एक ही ग्रुप का टैब व्यू है।

वर्टिकल टैब

link

orientation को vertical करने पर टैब शुरुआती किनारे पर एक कॉलम में ऊपर से नीचे रखे जाते हैं, उन व्यू के बगल में जिन्हें वे बदलते हैं: सेटिंग्स पेज या डायलॉग की श्रेणियाँ, किसी एक रिकॉर्ड के सेक्शन। बाकी सब में यह वही कंपोनेंट है: एक चुना हुआ टैब, खिसकने और खींचे जा सकने वाला इंडिकेटर, पैनल और साझा चुनाव।

अपने पैनलों के बगल में वर्टिकल टैब

भाषा, क्षेत्र और शुरुआती पेज।

ईमेल, पुश और साप्ताहिक सारांश।

आपकी प्रोफ़ाइल कौन देख सकता है।

• कॉलम। हर टैब सबसे चौड़े टैब जितना चौड़ा होता है, और हर वेरिएंट और हर साइज़ में उसका आइकन लेबल से पहले, शुरुआती किनारे पर रहता है। टैब ऊपर और नीचे एक-दूसरे से सटे होते हैं, इसलिए हर टैब कम से कम न्यूनतम टारगेट जितना ऊँचा होता है: small कॉलम के टैब 32 नहीं, 44 ऊँचे होते हैं (टच इनपुट में 48)। कॉलम को चौड़ा करने के लिए ::part(tablist) का इस्तेमाल करें। जो कॉलम अपने सबसे चौड़े टैब से संकरा हो, उसमें लेबल कट जाता है और टूलटिप में पूरा दिखता है।
• इंडिकेटर और ट्रैक। इंडिकेटर, टैब में से हर तरफ़ ट्रैक का इनसेट घटाने पर बचा हिस्सा है। ट्रैक के कोने इंडिकेटर के कोनों में वही इनसेट जोड़कर बनते हैं, इसलिए कॉलम कितना भी ऊँचा हो, दोनों सिरों पर दोनों संकेंद्रित रहते हैं। जो डिज़ाइन सिस्टम चुने हुए टैब के नीचे रेखा बनाता है, वह उसे कॉलम के आख़िरी किनारे पर, पैनल की तरफ़ बनाता है, और डिवाइडर भी उसी किनारे पर चलता है।
• कुंजियाँ। नीचे और ऊपर के तीर अगले और पिछले टैब पर जाकर उसे चुनते हैं, और Home और End सिरों पर ले जाते हैं। दाएँ और बाएँ तीर कुछ नहीं करते, इसलिए वे पेज के ही रहते हैं। सहायक तकनीक को बताया जाता है कि टैब सूची वर्टिकल है।
• स्क्रॉल। पंक्ति को ऊँचाई दें, तो जो टैब समा नहीं पाते वे ट्रैक के भीतर ऊपर-नीचे स्क्रॉल होते हैं। टच से वे स्क्रॉल होते हैं; इंडिकेटर को सिर्फ़ माउस या पेन खींचता है। fullWidth कॉलम पर लागू नहीं होता।

आइकन

link

• पंक्ति के हर टैब को आइकन दें, या किसी को नहीं। आइकन चयनित न होने पर आउटलाइन वाले और चयनित होने पर भरे हुए बनते हैं।
• labelHidden सिर्फ़ आइकन बनाता है। लेबल तब भी ज़रूरी है: वह टैब का एक्सेसिबल नाम बना रहता है। labelHidden वाला और बिना आइकन का टैब फिर भी अपना लेबल बनाता है, और डीबग बिल्ड इसकी रिपोर्ट करते हैं।
• ख़ाली लेबल वाले और बिना आइकन के टैब में कोई कॉन्टेंट नहीं होता: उसका इंडिकेटर एक ख़ाली गोला है, और टैब का कोई एक्सेसिबल नाम नहीं है। डीबग बिल्ड ख़ाली लेबल की रिपोर्ट करते हैं; टैब को एक लेबल दें।
• टैब पर गिनती दिखाने के लिए, उसके आइकन पर Tanrei का बैज ख़ुद रखें। टैब में बैज की कोई प्रॉपर्टी नहीं है।

करें

link

• लेबल छोटे रखें: एक या दो शब्द जो व्यू का नाम बताएँ, जैसे “अवलोकन” या “बिलिंग”। पूरी चौड़ाई भरने वाली पंक्ति में लंबा लेबल कट जाता है।
• जब लेबल लंबे हों, अनूदित हों, लोगों के लिखे हों या बड़े टेक्स्ट साइज़ पर पढ़े जाते हों, तो डिफ़ॉल्ट, यानी कॉन्टेंट जितना रहना, ही रखें।
• टैब का क्रम स्थिर रखें, ताकि लोग किसी व्यू को वहीं पा सकें जहाँ उन्होंने उसे छोड़ा था।
• secondary टैब को primary टैब के किसी व्यू के भीतर रखें, इसका उलटा नहीं।
• जो टैब कभी-कभी उपलब्ध नहीं होता, उसे उसकी जगह पर अक्षम रखें, ताकि पंक्ति का आकार न बदले।
• जब एक ही विषय के व्यू बहुत हों या उनके लेबल लंबे हों, तब वर्टिकल टैब इस्तेमाल करें: सेटिंग्स पेज की श्रेणियाँ, किसी रिकॉर्ड के सेक्शन।

न करें

link

• टैब को ऐप के नेविगेशन के लिए इस्तेमाल न करें। वह नेविगेशन बार या ड्रॉअर का काम है।
• टैब से कोई डायलॉग न खुलवाएँ, कोई क्रिया शुरू न करवाएँ और स्क्रीन न छुड़वाएँ। टैब का अपना कोई गंतव्य नहीं होता: पेजों के बीच जाने के लिए लिंक, नेविगेशन बार या नेविगेशन ड्रॉअर इस्तेमाल करें।
• एक ही वेरिएंट की दो पंक्तियों को एक-दूसरे के भीतर न रखें।
• एक ही पंक्ति में आइकन वाले और बिना आइकन के टैब न मिलाएँ।
• ऐप में कहाँ जाना है, यह चुनने के लिए वर्टिकल टैब इस्तेमाल न करें। गंतव्यों का कॉलम नेविगेशन ड्रॉअर का काम है: उसके आइटम लिंक होते हैं, और किसी को चुनने पर पता बदल जाता है।

सुलभता

link

रोल

tablist (radiogroup while the row has no panel)

लेबलिंग

Each tab is named by its label, drawn or not (labelHidden), and whole even when it is drawn truncated. The row is named by its own label, which in a row without panels says what is chosen. The selected tab's panel is named by its tab; a row with no panel names nothing but itself and its tabs. Icons, the covered copies of labels and icons, the track, the indicator, the underline and the divider are decorative.

न्यूनतम टार्गेट

दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
Tab / Shift+Tab	Moves focus to the selected tab, and from it into its panel or, where the row has no panel, to whatever follows the row.
Right Arrow / Left Arrow	Horizontal, or any row without panels: moves focus to the next or previous enabled tab, wrapping, and selects it (mirrored in right-to-left layouts). Vertical with panels: does nothing.
Down Arrow / Up Arrow	Vertical, or any row without panels: moves focus to the next or previous enabled tab, wrapping, and selects it. Horizontal with panels: does nothing (the page scrolls).
Home / End	Moves focus to the first or last enabled tab and selects it.
Enter / Space	Selects the focused tab (needed only after the product has moved focus without selecting).
Escape (during a drag)	Cancels a drag that a pointer has in progress; the indicator returns to the selected tab and nothing is selected.

टिप्पणियाँ

• Activation is automatic: moving focus with the arrow keys selects the tab, as the WAI-ARIA tabs pattern recommends when a panel shows without a noticeable delay. A product whose panels load slowly shows a loading state in the panel; a manual mode (focus first, Enter to select) can be added later as a new prop without breaking this spec.
• Tabs and the switch share one model: a thumb on a track that slides to what is chosen and follows a finger. A switch has two states, and its track, outline and handle differ between them; tabs have two or more equal choices, so their track never changes and the active indicator alone moves.
• The drag is never the only way (WCAG 2.5.7): every tab is selected by a single tap or click on it, and by the arrow keys. With a screen reader running, a one-finger drag belongs to the reader; tabs are then selected by the reader's activation, as before.
• A drag changes what is drawn, continuously (the indicator's place and width, and the labels' colors under it), and nothing that assistive technology is told: no tab is exposed as selected on the way, no panel changes, and no change is emitted for the tabs the indicator passes (TAB-30). There is no threshold in the look; the place where two tabs meet decides only what a release chooses.
• Selection is the row's: value holds the selected tab's value, and change carries the new one. A tab's disabled is its own.
• Web: `tanrei-tab-panel` elements are matched to tabs by their `value` attribute, whether they are the row's children or a linked `tanrei-tab-view`'s, and get role tabpanel, aria-labelledby and the tab's aria-controls; a row with none is a radio group of radios (TAB-42). SwiftUI, Compose, Flutter and React Native have no tab panel role; there the selected panel follows the row in reading order, and each README says so.
• Tabs switch views of one subject. Moving between destinations of an app belongs to the navigation bar or drawer.
• A Tab view (`tab-view`) draws its own row of tabs from its panels by default, or is linked to a row placed elsewhere; either way it holds the panels. The link is by value: the Tab view shows the panel of `value`, follows the tabs when a tab is selected, and sets `value` on both and emits its own change when the user swipes it (TBV-2, TBV-4). While a swipe is in progress it sets `indicatorOffset`, which places the active indicator and the underline between two tabs (TAB-26); TAB-24 makes the covered colors follow the indicator wherever it is drawn. A drag across the row and a swipe of the view are one gesture in two places: the indicator follows the finger, the selection is made on release (from halfway, or by a fling), a cancelled gesture returns it, and nothing is announced before the release. They differ in reach: a swipe moves one panel, and the panels travel with it; a drag across the row can pass several tabs, and the panels wait for the release, then switch as for a selected tab (TBV-2). A row without a Tab view shows its own panels (TAB-13).
• Text size never hides a label: a tab that hugs its content grows wider and the row scrolls; a tab that shares the row's width truncates its label, which stays the tab's accessible name and is shown whole where the platform can (TAB-25). A product whose labels are long, translated, written by users, or read at large text sizes keeps the default hug.
• How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.
• A shared choice (group) is one decision shown in many places: a person who picks a platform, a language or a unit once should not be asked again by every sample on the page. The rows that follow change silently and at once (TAB-38): nothing is announced, focus stays on the tab the person used, and each row tells assistive technology its selected tab when the person reaches it. A change of content elsewhere on the page is not a change of context (WCAG 3.2.2), but it should not surprise: rows of one group carry the same labels for the same values (WCAG 3.2.4), and a product whose rows are far apart says near the first one that the choice applies to the whole page.
• Tabs of different rows are matched by value, never by label, so a choice survives a translated label, an icon-only tab and a change of wording, and a remembered choice still holds after the person changes language.
• Remembering (rememberAs) is off unless the product names a key, and what is kept is one short string the product itself wrote as a tab's value: no text a person typed, no identifier, nothing sent anywhere by the component. Whether keeping a preference on the device needs the person's consent where the product is used is the product's to decide, which is why there is no default key and no remembering by default. A person who blocks storage loses nothing but the memory (TAB-39).
• The page does not move under the person (TAB-40): a row whose choice changes the height of samples above it stays under the pointer and under keyboard focus, which is what WCAG 2.4.3 and 3.2.2 ask of a control that changes content elsewhere, and what keeps a person using magnification from losing their place.
• A row without panels (TAB-42) is still drawn as tabs when one choice changes what is shown below it: Day, Week and Month over a calendar; Standard, Medium and High over the examples of a page; a unit over a table; a filter over a list. It is announced as what it is, one choice among a few: a radio group named by the row's label, whose tabs are radio buttons, the selected one checked. A tab list promises panels: in the WAI-ARIA tabs pattern every tab controls the panel it shows, and a screen reader that says "tab" tells a person that a panel follows, so a tab list with no panel is announced wrongly. The radio group keeps what a person does the same: one Tab stop, and arrows that move and select, as a radio group's arrows check what they reach. The row knows which it is from what it holds — its own panels, a Tab view's, or the panel of a component that draws it — and not from a prop, so what it says can never disagree with what follows it: a row is a tab list from the moment it has a panel. The row's label tells a person what they are choosing, and the product draws the result after the row in reading order where it can, so that a person who has chosen finds it by reading on; where the choice reaches the whole page, the label or the words beside the row say so. A choice that sets a value sent with a form is radio buttons, which the form submits.
• Variant, track, size and transition say how the row looks and moves, never what it is: every combination is exposed alike, as a tab list where the row has a panel and as a radio group where it has none (TAB-42), with one keyboard model (TAB-49, TAB-50). Primary is the row of a screen's main views, secondary a row inside one of them, tonal the quiet row — in the heading of a sample, in a header, in a toolbar — where the choice should not draw the eye from what it changes.
• The selected tab is told to assistive technology as a state, and to sight by the indicator and by its label. A tonal row's indicator is a quiet mark on purpose: in the default system a layer about 1.4:1 from what it lies on, the same step on the track and on any surface, with the selected label darker than the others. It is not held to 3:1 against its ground, as the selected destination of a navigation drawer is not. A person who needs more has the system's medium and high contrast and the platform's forced colors, where the indicator is a filled highlight (TAB-45); a product that cannot accept the quiet mark uses secondary or primary, which are filled.
• Without its track (TAB-49) a row has no ground of its own: its labels are held on every surface role of the system, and a product that places a row on a color of its own checks the labels against it, as it does for text.
• A small row (TAB-44) is 32 tall and still pressed over the minimum target (TAB-5, WCAG 2.5.8): its hit area reaches above and below it, which a header or a toolbar has room for. Directly over content that answers a press at its top edge, that content wins the overlap; a product that stacks a small row tight against such content uses the medium size.
• transition none (TAB-43) takes away the motion the row plays by itself when the selection changes, in every motion setting; it takes away no way of selecting, and a drag across the row still carries the indicator under the finger. Where motion is reduced every row is drawn that way, and the state colors then change at once too (TAB-23), a ripple appearing whole (TAB-9).
• A vertical tab list (orientation vertical) is still tabs: one subject's views, the categories of a settings page or the sections of one record, with the arrow keys of its axis (Down and Up); a column without panels is a radio group, whose arrows move in both axes (TAB-42). It is not a menu of destinations — moving between the pages of an app belongs to the navigation drawer, whose items are links. A column never wraps a label: a column narrower than its widest tab truncates the label, which stays the tab's whole name, and shows it whole in a tooltip (TAB-61).

इससे जनरेट किया गया: specs/tabs.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

link

• पैनल वाली पंक्ति टैब लिस्ट का रोल देती है, जिसका नाम उसके label से आता है। हर टैब के पास टैब का रोल, उसका चयनित स्टेट, उसकी जगह और टैब की संख्या होती है, और उसका नाम उसके लेबल से आता है, लेबल दिखाया गया हो या नहीं।
• चयनित टैब का पैनल टैब पैनल का रोल देता है, जिसका नाम उसके टैब से आता है और जो उससे जुड़ा होता है, जहाँ प्लैटफ़ॉर्म यह व्यक्त कर सकता है। बाक़ी पैनल नज़र से और सहायक तकनीक से छिपे रहते हैं। जिस पैनल में फ़ोकस किया जा सकने वाला कुछ नहीं है, उसे ख़ुद फ़ोकस किए जाने लायक़ बनाया जाता है, ताकि Tab उस तक पहुँचे।
• पंक्ति एक Tab स्टॉप है: चयनित टैब। Right और Left Arrow अगले और पिछले सक्षम टैब पर ले जाती हैं, सिरों पर घूमकर दूसरे सिरे पर पहुँचती हैं, और उसे चुन लेती हैं। दाएँ से बाएँ वाले लेआउट में वे आपस में बदल जाती हैं। Home और End पहले और आख़िरी सक्षम टैब पर ले जाती हैं। Enter और Space फ़ोकस वाले टैब को चुनती हैं। Tab चयनित टैब से उसके पैनल में जाती है।
• अक्षम टैब को ऐरो कुंजियाँ लाँघ जाती हैं, वे कभी Tab स्टॉप नहीं होते, और अक्षम के रूप में पढ़कर सुनाए जाते हैं।
• फ़ोकस रिंग उस बॉक्स को घेरती है जो इंडिकेटर का फ़ोकस वाले टैब पर है, उसी के शेप में, और ट्रैक के भीतर रखी जाती है, इसलिए स्क्रॉल होने वाली पंक्ति उसे काट नहीं सकती। वह सिर्फ़ कीबोर्ड फ़ोकस के लिए दिखती है।
• टैब अपने पड़ोसियों को छूते हैं, इसलिए न्यूनतम टार्गेट से सँकरा टैब चौड़ाई में टार्गेट जितना हो जाता है। टार्गेट से कम ऊँची पंक्ति (small साइज़) को ऊँचा नहीं किया जाता: उसके टैब पंक्ति के थोड़ा ऊपर और थोड़ा नीचे दबाने का भी जवाब देते हैं, और जहाँ वहाँ कोई कंट्रोल रखा है, वहाँ दबाना उसी कंट्रोल का रहता है।
• बिना पैनल की पंक्ति कुछ विकल्पों में से एक को चुनना है, और वह इसी रूप में बताई जाती है: रेडियो ग्रुप, जिसका नाम उसके label से आता है, हर टैब एक रेडियो बटन, और चयनित टैब चेक किया हुआ। टैब लिस्ट बताने पर स्क्रीन रीडर इस्तेमाल करने वाले को लगेगा कि आगे कोई पैनल है। पंक्ति आड़ी हो या खड़ी, हर Arrow कुंजी रेडियो ग्रुप की तरह अगले या पिछले सक्षम टैब पर ले जाती है और उसे चुन लेती है। चुनाव पंक्ति के नीचे क्या बदलता है, यह दिखाना आपका काम है। Tab चयनित टैब से उस चीज़ पर जाती है जो पंक्ति के बाद आती है। जैसे ही पंक्ति को कोई पैनल मिलता है, वह टैब लिस्ट बन जाती है।
• फ़ोर्स्ड कलर्स में इंडिकेटर हर वेरिएंट में एक भरा हुआ हाइलाइट है, ट्रैक हो या न हो, इसलिए tonal पंक्ति अपना चयन उतना ही साफ़ दिखाती है जितना primary पंक्ति।
• बड़ा टेक्स्ट किसी लेबल को सहायक तकनीक से कभी नहीं छिपाता। जो टैब अपने कॉन्टेंट जितना रहता है, वह चौड़ा हो जाता है और पंक्ति स्क्रॉल होती है। जो टैब पंक्ति को बाँटता है, वह अपना लेबल काट देता है, जो उसका एक्सेसिबल नाम बना रहता है और जहाँ प्लैटफ़ॉर्म कर सकता है वहाँ पूरा दिखाया जाता है।
• आइकन, ट्रैक, इंडिकेटर, अंडरलाइन और डिवाइडर सहायक तकनीक से छिपे रहते हैं। इंडिकेटर के नीचे हर लेबल की ढकी हुई कॉपी सजावटी है, इसलिए हर लेबल एक ही बार पढ़कर सुनाया जाता है।
• पंक्ति पर ड्रैग कभी अकेला तरीक़ा नहीं है: हर टैब उस पर टैप या क्लिक से, और ऐरो कुंजियों से चुना जाता है। ड्रैग के दौरान कोई टैब चयनित के रूप में नहीं दिया जाता, कोई पैनल नहीं बदलता और कुछ भी पढ़कर नहीं सुनाया जाता; चयन छोड़ने पर होता है, और Escape ड्रैग को रद्द करती है। जब स्क्रीन रीडर चल रहा हो, तो एक उँगली का ड्रैग रीडर का होता है, और टैब रीडर के सक्रिय करने वाले जेस्चर से चुने जाते हैं।
• ग्रुप में, साथ चलने वाली पंक्तियाँ चुपचाप बदलती हैं। कुछ भी पढ़कर नहीं सुनाया जाता, फ़ोकस उसी टैब पर रहता है जिसे व्यक्ति ने इस्तेमाल किया, और वह पंक्ति विंडो में वहीं रहती है जहाँ वह है, इसलिए मैग्निफ़िकेशन इस्तेमाल करने वाला व्यक्ति अपनी जगह नहीं खोता। हर पंक्ति सहायक तकनीक को अपना चयनित टैब तब बताती है जब व्यक्ति उस तक पहुँचता है।
• डीबग बिल्ड इन बातों की रिपोर्ट करते हैं: बिना लेबल का टैब, ख़ाली या दोहराया हुआ मान, ऐसा value जो किसी टैब का नाम नहीं लेता, बिना आइकन का छिपा हुआ लेबल, ऐसा वेरिएंट या साइज़ जो डिज़ाइन सिस्टम में नहीं है, और ऐसा transition जिसे टैब डिफ़ाइन नहीं करते।

प्लैटफ़ॉर्म की ज्ञात कमियाँ:

• SwiftUI, Compose और React Native में टैब पैनल का कोई रोल नहीं है। चयनित पैनल पढ़ने के क्रम में पंक्ति के बाद आता है।
• SwiftUI, Compose, Flutter और React Native अब भी बिना पैनल की पंक्ति को रेडियो ग्रुप नहीं, टैब के रूप में बताते हैं।
• SwiftUI में टैब लिस्ट या टैब का रोल भी नहीं है। पंक्ति label के नाम वाला एक कंटेनर है, जिस पर टैब बार ट्रेट है, और हर टैब चयनित ट्रेट वाला एक बटन है। iOS पर VoiceOver टैब की जगह टैब बार ट्रेट से बताता है; बाक़ी जगहों पर जगह टैब का मान है (“2 of 3”), सिर्फ़ अंग्रेज़ी में।
• SwiftUI पैनल को उसके टैब से नहीं जोड़ सकता, और यह नहीं जान सकता कि पैनल में फ़ोकस किया जा सकने वाला कुछ है या नहीं, इसलिए जिस पैनल में ऐसा कुछ नहीं है उसे Tab स्टॉप नहीं बनाया जाता।
• Compose में टैब लिस्ट का कोई रोल नहीं है। पंक्ति contentDescription के नाम वाला एक चुना जा सकने वाला ग्रुप है और टैब की संख्या कलेक्शन इन्फ़ो के रूप में रखती है। हर टैब के पास टैब का रोल, उसका चयनित स्टेट और उसकी जगह होती है।
• Compose और React Native पैनल को आप पर छोड़ते हैं। वे बाक़ी पैनल नहीं छिपाते और ख़ाली पैनल को फ़ोकस किए जाने लायक़ नहीं बनाते।
• Compose: टैब के आइकन पर रखा गया बैज पढ़कर नहीं सुनाया जाता, क्योंकि आइकन का स्लॉट सजावटी है। पूरे टैब को लपेटने वाला बैज पढ़कर सुनाया जाता है, पर वह टैब के कोने पर बनता है।
• Compose: असली इनपुट पाइपलाइन से ऐरो कुंजियाँ और स्क्रॉल, और TalkBack का हर टैब का रोल और जगह पढ़ना, सिर्फ़ Robolectric पर जाँचे गए हैं, अभी किसी डिवाइस पर नहीं।
• Flutter के सिमैंटिक्स में न जगह है, न टैब की संख्या, और न टैब से उसके पैनल का कोई संबंध। TanreiTabBarView एक टैब पैनल है, जिसका नाम आपके दिए semanticLabels से आता है।
• React Native में न टैब पैनल का रोल है, न टैब से उसके पैनल का कोई संबंध। टैब अपनी जगह अपने मान टेक्स्ट के रूप में रखता है (“2 of 3”), अंग्रेज़ी में, जब तक आप positionText न दें।
• React Native: ऐरो कुंजियाँ, टैब का स्क्रॉल होकर नज़र में आना (और उसके दाएँ से बाएँ वाले ऑफ़सेट) और सरकता हुआ इंडिकेटर अभी किसी डिवाइस पर नहीं जाँचे गए हैं।
• Web: जिस टैब तक Tab कुंजी से तब पहुँचा जाता है जब वह स्क्रॉल के कारण नज़र से बाहर है, उसे ब्राउज़र तुरंत स्क्रॉल करके नज़र में लाता है, इंडिकेटर के मोशन की अवधि में नहीं।
• Flutter: जिस स्क्रॉल होने वाली पंक्ति का चयनित टैब शुरू में नज़र से बाहर है, वह टैब पर पहुँचने से पहले एक फ़्रेम अपने शुरुआती किनारे पर दिखाती है।

आपको क्या करना है

link

• हर टैब को एक लेबल दें, सिर्फ़ आइकन वाले टैब को भी।
• जब स्क्रीन पर टैब की एक से ज़्यादा पंक्तियाँ हों, तो पंक्ति को label से नाम दें। बताएँ कि ये व्यू किस चीज़ के व्यू हैं, जैसे “प्रोजेक्ट”।
• हर टैब का मान उसकी पंक्ति में अनूठा रखें, और जब तक स्क्रीन दिख रही है तब तक उसे न बदलें।
• Compose और React Native पर सिर्फ़ चयनित पैनल रेंडर करें, पंक्ति के ठीक बाद। जब उसमें फ़ोकस किया जा सकने वाला कुछ न हो, तो उसे फ़ोकस किए जाने लायक़ बनाएँ और उसे उसके टैब के नाम पर नाम दें, ताकि Tab उस तक पहुँचे।
• Flutter पर, TanreiTabBarView को हर टैब के लेबल के साथ semanticLabels दें।
• React Native पर, अपने प्रॉडक्ट की भाषा में positionText दें।
• जिस पैनल को लोड होने में समय लगता है, उसके भीतर लोडिंग स्टेट दिखाएँ। ऐरो कुंजियाँ चलते-चलते चुनती जाती हैं।
• एक ही ग्रुप की पंक्तियों में एक जैसे मानों को एक जैसे लेबल दें। जहाँ पंक्तियाँ एक-दूसरे से दूर हों, वहाँ पहली पंक्ति के पास बताएँ कि चुनाव पूरे पेज पर लागू होता है।
• rememberAs की कुंजी ख़ुद चुनें, और जहाँ आपके प्रॉडक्ट को प्राइवेसी नोटिस की ज़रूरत हो वहाँ उसमें इसका ज़िक्र करें। कुंजी के बिना कुछ स्टोर नहीं होता।