होम कंपोनेंटFAB मेन्यू

FAB मेन्यू

सिमटे हुए मुख्य ऐक्शन बटन के रूप में बने टॉगल से संबंधित क्रियाओं की एक छोटी लिस्ट खोलता है, और जब तक वे दिखती हैं, टॉगल उस लिस्ट का बंद करने वाला बटन बन जाता है।

अंतिम अपडेट: 23 अक्टूबर 2026

content_copy

Markdown में देखें

श्रेणी: ऐक्शन
टोकन: comp.fab-menu
स्तर: आधार

अवलोकन

Web: tanrei-fab-menu; schedule
SwiftUI: TanreiFabMenu; schedule
Jetpack Compose: TanreiFabMenu; schedule
Flutter: TanreiFabMenu; schedule
React Native: FabMenu; schedule

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

हर डिज़ाइन सिस्टम में नहीं

m3-expressive-like, m3-like में शामिल, @tanrei/web/m3-expressive-like, @tanrei/web/m3-like से रजिस्टर होता है।

tanrei, cupertino में नहीं है। यह m3-like लेयर में है, जिसे ये सिस्टम आगे नहीं बढ़ाते। A system outside this layer draws no floating action button that opens a list: its main action button opens a bottom sheet that lists the related actions. इसके बजाय Main action button, Bottom sheet इस्तेमाल करें।

जिस सिस्टम में यह नहीं है, उस पर बना प्रोडक्ट भी इसे ले सकता है: इसे अपनी लेयर में शामिल करें (आपका अपना डिज़ाइन सिस्टम) और इसका अपना मॉड्यूल इम्पोर्ट करें। तब यह आपके सिस्टम के अपने टोकन से बनता है।

"components": {
  "include": [{ "name": "fab-menu", "from": "m3-like" }]
}

import '@tanrei/web/components/fab-menu';

बंद और खुला

add

m3-like के साथ

इस्तेमाल

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

<tanrei-fab-menu class="primary-action" label="बनाएँ">
  <span slot="icon">add</span>
  <tanrei-fab-menu-item label="दस्तावेज़" icon="description"></tanrei-fab-menu-item>
  <tanrei-fab-menu-item label="फ़ोल्डर" icon="create_new_folder"></tanrei-fab-menu-item>
  <tanrei-fab-menu-item label="अपलोड" icon="upload"></tanrei-fab-menu-item>
</tanrei-fab-menu>

<style>
  /* एलिमेंट ख़ुद कुछ नहीं रखता: पेज टॉगल को इनलाइन-एंड वाले निचले कोने में रखता है। */
  tanrei-fab-menu.primary-action {
    position: fixed;
    inset-inline-end: var(--tanrei-sys-space-space400);
    inset-block-end: var(--tanrei-sys-space-space400);
  }
</style>

<script type="module">
  // FAB मेन्यू m3-like लेयर में रहता है: m3-like सिस्टम की एंट्री इसे बाक़ी कॉम्पोनेंट के साथ रजिस्टर करती है।
  import '@tanrei/web/m3-like';
  const fabMenu = document.querySelector('tanrei-fab-menu');
  // टॉगल खोलने या बंद करने को कहता है; open आप सेट करते हैं।
  fabMenu.addEventListener('toggle', (e) => (fabMenu.open = e.detail.open));
  // close के साथ कारण आता है: escape, outside, tab, focus-out या item। वेब कभी back एमिट नहीं करता।
  fabMenu.addEventListener('close', () => (fabMenu.open = false));
  // आइटम का click बबल होता है, और close से पहले आता है।
  fabMenu.querySelector('[label="अपलोड"]').addEventListener('click', upload);
</script>

// FAB मेन्यू m3-like लेयर में रहता है: यह उन सिस्टमों की एंट्री में है जिनमें यह है (m3-like, m3-expressive-like), और /all में।
import { FabMenu, FabMenuItem } from '@tanrei/react/m3-like';

<FabMenu
  className="primary-action"
  label="बनाएँ"
  open={open}
  onToggle={(e) => setOpen(e.detail.open)}
  onClose={() => setOpen(false)}
>
  <span slot="icon">add</span>
  <FabMenuItem label="दस्तावेज़" icon="description" onClick={newDocument} />
  <FabMenuItem label="फ़ोल्डर" icon="create_new_folder" onClick={newFolder} />
  <FabMenuItem label="अपलोड" icon="upload" onClick={upload} />
</FabMenu>

import Tanrei

// इसे FAB की तरह ही रखा जाता है। टॉगल और आइटम, दोनों बाइंडिंग में लिखते हैं।
DocumentList()
    .overlay(alignment: .bottomTrailing) {
        TanreiFabMenu("बनाएँ", icon: "add", isPresented: $showsCreate) {
            TanreiFabMenuItem("दस्तावेज़", icon: "description", action: newDocument)
            TanreiFabMenuItem("फ़ोल्डर", icon: "create_new_folder", action: newFolder)
            TanreiFabMenuItem("अपलोड", icon: "upload", action: upload)
        }
        .padding()
    }

import io.github.chnotchy.tanrei.components.TanreiFabMenu
import io.github.chnotchy.tanrei.components.TanreiFabMenuItem
import io.github.chnotchy.tanrei.primitives.TanreiText

// स्टेट होइस्टिंग: expanded आप रखते हैं। इसे scaffold के floatingActionButton स्लॉट में रखें, या ख़ुद जगह दें।
TanreiFabMenu(
    expanded = expanded,
    onExpandedChange = { expanded = it },
    onDismissRequest = { expanded = false },
    contentDescription = "बनाएँ",
    icon = { TanreiText("add") },
) {
    TanreiFabMenuItem(text = "दस्तावेज़", icon = "description", onClick = ::newDocument)
    TanreiFabMenuItem(text = "फ़ोल्डर", icon = "create_new_folder", onClick = ::newFolder)
    TanreiFabMenuItem(text = "अपलोड", icon = "upload", onClick = ::upload)
}

import 'package:tanrei/tanrei.dart';

// FAB मेन्यू कंट्रोलर के ज़रिए ख़ुद खुलता और बंद होता है; onToggle और onClose इसकी सूचना देते हैं।
Scaffold(
  body: const DocumentList(),
  floatingActionButton: TanreiFabMenu(
    controller: createMenu,
    semanticLabel: 'बनाएँ',
    icon: const Icon(AppSymbols.add),
    items: <TanreiFabMenuItem>[
      TanreiFabMenuItem(label: 'दस्तावेज़', icon: const Icon(AppSymbols.description), onPressed: newDocument),
      TanreiFabMenuItem(label: 'फ़ोल्डर', icon: const Icon(AppSymbols.createNewFolder), onPressed: newFolder),
      TanreiFabMenuItem(label: 'अपलोड', icon: const Icon(AppSymbols.upload), onPressed: upload),
    ],
  ),
);

import { View } from 'react-native';
import { FabMenu } from '@tanrei/react-native';

// कंट्रोल्ड: visible को onToggle से सेट करें, और onDismiss से false करें, जिसे कारण मिलता है।
// टॉगल अपनी जगह कभी ख़ुद तय नहीं करता: उसे style रखता है।
<View style={{ flex: 1 }}>
  <DocumentList />
  <FabMenu
    icon="add"
    accessibilityLabel="बनाएँ"
    visible={open}
    onToggle={setOpen}
    onDismiss={() => setOpen(false)}
    items={[
      { label: 'दस्तावेज़', icon: 'description', onPress: newDocument },
      { label: 'फ़ोल्डर', icon: 'create_new_folder', onPress: newFolder },
      { label: 'अपलोड', icon: 'upload', onPress: upload },
    ]}
    style={styles.primaryAction}
  />
</View>

स्पेक

वेरिएंट, साइज़ और अक्षम

add

m3-like के साथ

संरचना

भाग	विवरण
1 `container`	The toggle that opens and closes the menu, drawn as a collapsed main action button. It casts the shadow, carries hover, focus and press, and changes its colors and corners between closed and open.
2 `icon`	The toggle's glyph: the product's icon while closed, the glyph close of the system's icon set while open. The FAB menu draws no mark of its own for it.
3 `list`	The column of items above the toggle, end-aligned with it. It draws nothing of its own and is presented above the page.
4 `item`	One action: a raised container holding an icon and a label. It carries its own hover, focus and press.
5 `item-icon`	An item's glyph, before its label.
6 `item-label`	An item's text and its accessible name.
7 `focus-ring`	Gap-then-ring indicator shown for keyboard focus, around the toggle or the item that has it.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`variant`	`filled` \| `tonal` \| `surface`	`"filled"`	Emphasis, as the main action button's variants of the same names: it colors the toggle and the items. A design system may add values.
`size`	`small` \| `medium` \| `large`	`"medium"`	The toggle's size (40 / 48 / 64, square), as the main action button's. The items keep one size. A design system may add values.
`open`	`boolean`	`false`	Whether the items are shown. Where open is a plain value (web, Compose, React Native) the product sets it from toggle and sets it to false from close; where it is a binding or a controller (SwiftUI, Flutter) the FAB menu opens and closes itself through it (FBM-1, FBM-15).
`label`	`string`	`""`	The accessible name of the toggle and of the list ("Create"). Required: an icon alone is not a name.
`disabled`	`boolean`	`false`	Prevents opening and removes the toggle from the focus order. Hiding a FAB menu whose actions are unavailable is usually better than disabling it.

स्लॉट

स्लॉट	विवरण
`icon`	The toggle's glyph while closed (a glyph of the system's icon set).

इवेंट

इवेंट	विवरण
`toggle`	The toggle asks to open or close the menu; carries the open value it asks for.
`close`	The menu asks to be closed; carries the reason: escape, back, outside, tab, focus-out or item (in the platform's casing).

आइटम

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

`item`

One action of the menu: an icon and a label on a raised container.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`label`	`string`	`""`	The item's text and its accessible name. Required.
`icon`	`string`	`""`	The name of the item's icon (a glyph of the system's icon set). Required.

इवेंट	विवरण
`click`	The item was activated by pointer, touch, keyboard or assistive technology.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	`tanrei-fab-menu-item`	`TanreiFabMenuItem`	`TanreiFabMenuItem`	`TanreiFabMenuItem`	`FabMenuItem`
`label` · प्रॉपर्टी	`label`	`title`	`text`	`label`	`label`
`icon` · प्रॉपर्टी	`icon`	`icon`	`icon`	`icon`	`icon`
`click` · इवेंट	`click`	`action`	`onClick`	`onPressed`	`onPress`
टिप्पणियाँ	A child element: `<tanrei-fab-menu-item label="Upload" icon="upload">`; its `click` bubbles.	`TanreiFabMenuItem(_ title:, icon:, action:)` in the view builder.	`TanreiFabMenuItem(text, icon, onClick)` called in the content lambda.	`TanreiFabMenuItem(label:, icon:, onPressed:)` in the `items:` list.	The element type of the `items` array: `{ label, icon, onPress }`, where `icon` is the glyph's name.

स्टेट

व्यवहार

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

ID	आवश्यकता
`FBM-1`	WHEN the user activates the toggle by pointer, touch, Enter or Space THE FAB menu SHALL emit toggle exactly once with the opposite of open, and WHEN the user presses Down Arrow or Up Arrow on the toggle while open is false it SHALL emit toggle with true; the menu SHALL then open or close through open: through its binding or controller where open is one (SwiftUI, Flutter), and by the product setting open where open is a plain value (web, Compose, React Native).
`FBM-2`	WHILE disabled is true THE FAB menu SHALL NOT emit toggle or close, SHALL NOT make the toggle focusable, SHALL expose the disabled state to assistive technology, and SHALL draw the toggle closed and present no items, whatever open says.
`FBM-3`	WHILE the toggle or an item is hovered, keyboard-focused or pressed THE FAB menu SHALL render its container, icon, label, elevation and opacity from the component tokens of its variant in its own highest-precedence active state — the toggle from its closed parts (comp.fab-menu.filled.container.color for filled, and so on) or its open parts (comp.fab-menu.filled.open.container.color, and so on), an item from the item parts (comp.fab-menu.filled.item.container.color, and so on) — with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state.
`FBM-4`	WHEN the toggle or an item receives keyboard focus THE FAB menu SHALL show the focus ring around that one's own shape, without animation; focus gained by pointer or touch SHALL NOT show it.
`FBM-5`	WHERE the toggle is smaller than the minimum target THE FAB menu SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size; THE FAB menu SHALL make each item at least that target tall, because stacked items cannot extend a hit area over each other, and each item's whole container SHALL be its hit area; a platform that cannot tell the input type SHALL use sys.target.touch.
`FBM-6`	WHILE disabled is true THE FAB menu SHALL render the toggle's container, icon, elevation and opacity from the disabled component tokens of its variant's closed parts.
`FBM-7`	WHEN variant or size names a value that the active design system does not have THE FAB menu SHALL render with the default value's tokens, and in debug builds report the unknown value.
`FBM-8`	WHEN the toggle is pressed by pointer, touch, Enter or Space THE toggle 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.
`FBM-9`	WHILE pressed THE toggle 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; icon, elevation, 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.fab-menu.motion.feedback-duration with comp.fab-menu.motion.state-easing, fades over comp.fab-menu.motion.state-duration with comp.fab-menu.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced. Each item SHALL answer its own press in the same way, within its own container and from its item parts: label, icon, elevation and opacity still come from its pressed tokens.
`FBM-10`	THE toggle SHALL ease its container 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. Each item SHALL ease its corners and show its keyboard focus in the same way.
`FBM-11`	THE FAB menu SHALL draw the toggle as a square whose side is the container size of its size (comp.fab-menu.container.size.medium for medium, and so on), with the corners of its size (comp.fab-menu.container.shape.medium, and so on) while closed and comp.fab-menu.container.shape-open while open, and its icon centred in it at the icon size of its size (comp.fab-menu.icon.size.medium, and so on) through the icon helper, with the family and fill of an unselected icon, sys.icon.weight, and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max: the icon slot's glyph while closed, and the glyph close of the system's icon set while open, not mirrored when the layout direction is right-to-left. THE FAB menu SHALL draw no mark of its own (no path, shape or character of its own) for the close glyph.
`FBM-12`	THE FAB menu SHALL NOT position itself: the toggle SHALL lay out at its own size where the layout that holds it places it (normally the inline-end bottom corner of the screen, clear of any navigation bar), as a main action button does (MAB-18), and the items SHALL be presented above the page rather than laid out, so that they move no content.
`FBM-13`	WHEN open becomes true THE FAB menu SHALL present its items in the platform's overlay layer (the web's top layer through the popover API, SwiftUI's presentation as the menu's, Compose's Popup, Flutter's Overlay, React Native's overlay layer that TanreiProvider renders) as a column above the toggle, comp.fab-menu.list.offset from its top edge and comp.fab-menu.list.gap apart, the first item at the top and every item's end edge aligned with the toggle's, and SHALL move focus to the first item, or to the last (the one nearest the toggle) when Up Arrow opened it; WHEN open becomes false THE FAB menu SHALL remove the items and, if focus was in them, return focus to the toggle. The FAB menu is an operated overlay, so it takes focus and returns it although it is not modal.
`FBM-14`	WHILE open is true THE FAB menu SHALL NOT trap focus, SHALL NOT make the rest of the screen inert and SHALL draw no scrim: it is an operated overlay that is not modal.
`FBM-15`	WHEN the user presses Escape or the platform's back, presses outside the items and the toggle, presses Tab or Shift+Tab on an item, or moves focus out of the items and the toggle THE FAB menu SHALL emit close once with that reason (escape, back, outside, tab, focus-out) and SHALL be closed: through its binding or controller where open is one (SwiftUI, Flutter), and by the product setting open to false where open is a plain value (web, Compose, React Native); Tab and Shift+Tab SHALL then move focus on from the toggle as they would have from it. A press on the toggle while open is not a press outside: it SHALL emit toggle with false (FBM-1) and no close. Whether a press outside also reaches the element under it SHALL follow the platform, as the menu's does, and be stated in its README.
`FBM-16`	WHEN the user activates an item by pointer, touch, Enter or Space THE FAB menu SHALL emit the item's click once and then emit close with the reason item, in that order, and SHALL be closed as FBM-15 says.
`FBM-17`	WHILE open is true and an item has keyboard focus THE FAB menu SHALL move focus to the next item with Down Arrow and to the previous one with Up Arrow, wrapping at the ends, and to the first and last item with Home and End.
`FBM-18`	THE FAB menu SHALL draw each item as a container at least comp.fab-menu.item.height tall and as wide as its content, with corners comp.fab-menu.item.shape eased by sys.shape.corner-smoothing, holding its icon and then its label comp.fab-menu.item.gap apart, padded by comp.fab-menu.item.padding-inline-start at the start and comp.fab-menu.item.padding-inline-end at the end; the label SHALL be set in comp.fab-menu.item.label.typescale on one line while it fits and SHALL wrap rather than truncate, the item growing with it; the icon SHALL be drawn at comp.fab-menu.item.icon.size through the icon helper with the family and fill of an unselected icon, sys.icon.weight, and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max; and the item SHALL cast its item elevation (comp.fab-menu.filled.item.container.elevation for filled, and so on) outside its container without clipping it.
`FBM-19`	WHEN the FAB menu opens THE FAB menu SHALL change the toggle's colors and corners and cross-fade its icon to the glyph close (a cross-fade of two glyphs, neither drawn along a path) over comp.fab-menu.motion.open-duration with comp.fab-menu.motion.open-easing, and fade and grow each item in from its end edge over the same, starting with the item nearest the toggle and delaying each next one by comp.fab-menu.motion.stagger; WHEN it closes it SHALL reverse the toggle's change and fade all items out together over comp.fab-menu.motion.close-duration with comp.fab-menu.motion.close-easing; WHERE motion is reduced it SHALL change and show or hide everything at once.
`FBM-20`	THE FAB menu SHALL expose the toggle as a button named by label that opens a menu, with whether the menu is open where the platform has those properties, and while open SHALL expose the items as a menu named by label, each a menu item named by its own label with its position and the number of items; the icons SHALL be hidden.
`FBM-21`	THE FAB menu SHALL cast the toggle's elevation, of its variant and state (comp.fab-menu.filled.container.elevation for filled at rest, comp.fab-menu.filled.open.container.elevation while open, and so on), outside its container without clipping it, and WHEN the elevation or the colors of the toggle or an item change between interaction states SHALL animate the change over comp.fab-menu.motion.state-duration with comp.fab-menu.motion.state-easing, changing them at once where motion is reduced.
`FBM-22`	WHEN the layout direction is right-to-left THE FAB menu SHALL align the items' end edges with the toggle's left edge, mirror the order of each item's icon and label (a glyph itself only as FBM-26 says) and apply its paddings by logical start and end, and SHALL grow a ripple from the point of contact as in left-to-right.
`FBM-23`	WHILE label is not empty THE FAB menu SHALL expose it as the toggle's accessible name, over a name the product gives it on the element (aria-label or aria-labelledby). WHILE label is empty and the product gives the FAB menu a name of its own on the element — aria-label, or aria-labelledby naming an element — THE FAB menu SHALL expose that name as the toggle's accessible name and name the list by the toggle. WHILE label is empty and the product gives it none, an item's label or icon is empty, or the menu holds fewer than two or more than six items, THE FAB menu SHALL still render, and in debug builds report it.
`FBM-24`	IF the icon set cannot draw the close glyph yet (its font is still loading or failed to load) WHILE open is true THE FAB menu SHALL draw nothing in the toggle's icon box, never the glyph's name as text, SHALL keep the toggle's size, colors, corners, name and expanded state, and SHALL draw the glyph once the icon set can, without the cross-fade of FBM-19.
`FBM-25`	THE FAB menu 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 FAB menu is shown THE FAB menu SHALL draw itself for the new direction at once, without a motion of its own, keeping its open state and its focus.
`FBM-26`	WHERE the layout direction is right-to-left THE FAB menu SHALL draw the glyph of its icon slot while closed and the icon of each item 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 FBM-22 gives. THE FAB menu 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. The close glyph of the open toggle is not marked and is never mirrored (FBM-11).
`FBM-27`	THE FAB menu SHALL lay out the label of each item 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 FAB menu SHALL still place each label and align its lines by the layout direction, not by the text's own.
`FBM-28`	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE FAB menu 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 its toggle's role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the toggle is invalid — except those the FAB menu owns (aria-haspopup, aria-expanded, aria-controls, aria-disabled), which it SHALL move and not expose. 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 FAB menu SHALL take it off that element. An item's host carries its menu item role itself (FBM-20), so what the product writes on it is not moved, but for a name: WHILE an item's label is not empty THE FAB menu SHALL hold the product's aria-label and aria-labelledby on that host as their data-aria- twins, so that label is the item's whole name although the platform gives aria-labelledby the precedence, and WHEN label is emptied SHALL give them back as they were written; WHILE an item's label is empty a name the product gives so is the item's name and SHALL NOT be reported as having none in debug builds (FBM-23); WHEN the product removes one, or its data-aria- twin, or sets the ARIA property that reflects it to null, THE FAB menu SHALL take it away. WHEN the product sets an aria- attribute the FAB menu owns THE FAB menu SHALL report it in debug builds.

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

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

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	`tanrei-fab-menu`	`TanreiFabMenu`	`TanreiFabMenu`	`TanreiFabMenu`	`FabMenu`
`variant` · प्रॉपर्टी	`variant`	`variant`	`variant`	`variant`	`variant`
`size` · प्रॉपर्टी	`size`	`size`	`size`	`size`	`size`
`open` · प्रॉपर्टी	`open`	`isPresented`	`expanded`	`controller`	`visible`
`label` · प्रॉपर्टी	`label`	`label`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`disabled` · प्रॉपर्टी	`disabled`	`disabled`	`enabled`	`enabled`	`disabled`
`toggle` · इवेंट	`toggle`	`isPresented`	`onExpandedChange`	`onToggle`	`onToggle`
`close` · इवेंट	`close`	`isPresented`	`onDismissRequest`	`onClose`	`onDismiss`
टिप्पणियाँ	`<tanrei-fab-menu label="Create" variant size open>` with a `slot="icon"` glyph and `tanrei-fab-menu-item` children. The toggle is a `<button>` in the shadow root with `aria-haspopup="menu"`, `aria-expanded` and `aria-controls`; the items are a manual popover in the top layer with role menu, placed with CSS anchor positioning and a script fallback, as the menu is. `toggle` is a CustomEvent whose `detail.open` is the value asked for (not the popover's ToggleEvent, which does not leave the shadow root); `close` carries `detail.reason`. The page positions the element. The `inline` attribute, for tests, draws the open items in place (FBM-13). The open toggle's glyph is the icon helper's `close` in the `icon` part (FBM-11). It lives in the m3-like layer: `@tanrei/web/m3-like` registers it (with `@tanrei/web/components/fab-menu`, its own module), and `@tanrei/web` does not; its tokens are in the stylesheet of the m3-like systems (`@tanrei/web/systems/m3-like.css`, `m3-expressive-like.css`) and of a product that includes it.	`TanreiFabMenu(_ label:, icon:, variant:, size:, isPresented: Binding<Bool>) { TanreiFabMenuItem … }`, placed by the caller as the main action button is (an `.overlay(alignment: .bottomTrailing)`). The items are presented as `TanreiMenu` presents its surface, with a clear background, so a press outside closes them. Writing the binding is toggle and close. `disabled` follows `.disabled(_:)`. iOS has no menu role: the items are buttons in a container named by label. Without an installed icon font it strokes the close glyph as a shape of its own (`TanreiChipGlyph(kind: .close)`) instead of drawing nothing (FBM-11, FBM-24). The FAB menu lives in the m3-like layer, and only the systems that descend from it have its tokens; whether this platform ships it in a package of its own is decided when the platform catches up with the web.	`TanreiFabMenu(expanded, onExpandedChange, onDismissRequest, contentDescription, icon, variant, size, enabled) { TanreiFabMenuItem(…) }`, placed through `Scaffold`'s `floatingActionButton` slot or by the caller; the items are shown in a `Popup`. State hoisting: the caller keeps `expanded`, sets it from `onExpandedChange` and to false from `onDismissRequest`, which carries the reason. Material 3's `FloatingActionButtonMenu` is not used. `enabled` is the inverse flag. Without an installed icon font it strokes the close glyph as a vector of its own (`TanreiDrawnGlyph`) instead of drawing nothing (FBM-11, FBM-24). The FAB menu lives in the m3-like layer, and only the systems that descend from it have its tokens; whether this platform ships it in a package of its own is decided when the platform catches up with the web.	`TanreiFabMenu(controller:, semanticLabel:, icon:, variant:, size:, enabled:, items: [TanreiFabMenuItem(…)], onToggle:, onClose:)`, built with the widgets library and placed through `Scaffold.floatingActionButton` or by the caller; the items are shown in the `Overlay`. The controller is a `TanreiMenuController` (the Tanrei menu's own), passed or created internally; it is open, so the FAB menu opens and closes itself; `onToggle` and `onClose` report it. `enabled` is a flag here, because the toggle's press is the component's own. Lagging behind FBM-24: it writes the close glyph as the Material Symbols code point U+E5CD (`tanreiCloseGlyph`), and without the icon font it draws whatever the fallback face has there instead of nothing. The FAB menu lives in the m3-like layer, and only the systems that descend from it have its tokens; whether this platform ships it in a package of its own is decided when the platform catches up with the web.	`<FabMenu icon="add" accessibilityLabel visible onToggle onDismiss items={FabMenuItem[]} variant size disabled>`; the caller positions it. The items are presented on the overlay layer that `TanreiProvider` renders (not a `Modal`, which would make the rest of the screen unreachable) and placed by measuring the toggle (`measureInWindow`); Android's back button (`BackHandler`) is close. Controlled: the caller sets `visible` from `onToggle` and to false from `onDismiss`, which carries the reason. Lagging behind FBM-24: without the icon font the ligature `close` prints as a word. The FAB menu lives in the m3-like layer, and only the systems that descend from it have its tokens; whether this platform ships it in a package of its own is decided when the platform catches up with the web.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
`--tanrei-comp-fab-menu-container-shape-open`	`sys.shape.corner.full`	9999px
`--tanrei-comp-fab-menu-container-shape-large`	`sys.shape.corner.extra-large`	28px
`--tanrei-comp-fab-menu-container-shape-medium`	`sys.shape.corner.large`	16px
`--tanrei-comp-fab-menu-container-shape-small`	`sys.shape.corner.medium`	12px
`--tanrei-comp-fab-menu-container-size-large`	—	96px
`--tanrei-comp-fab-menu-container-size-medium`	—	56px
`--tanrei-comp-fab-menu-container-size-small`	—	40px
`--tanrei-comp-fab-menu-disabled-opacity`	—	1
`--tanrei-comp-fab-menu-filled-container-color`	`sys.color.primary`	#6750a4
`--tanrei-comp-fab-menu-filled-container-elevation`	`sys.elevation.level3`	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-disabled-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-filled-disabled-container-elevation`	—
`--tanrei-comp-fab-menu-filled-disabled-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-filled-disabled-item-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-filled-disabled-item-container-elevation`	—
`--tanrei-comp-fab-menu-filled-disabled-item-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-filled-disabled-item-label-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-filled-disabled-item-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-filled-disabled-open-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-filled-disabled-open-container-elevation`	—
`--tanrei-comp-fab-menu-filled-disabled-open-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-filled-disabled-open-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-filled-disabled-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-filled-focused-container-color`	—	#7965af
`--tanrei-comp-fab-menu-filled-focused-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-focused-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-focused-item-container-color`	—	#7965af
`--tanrei-comp-fab-menu-filled-focused-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-focused-item-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-focused-item-label-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-focused-item-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-focused-open-container-color`	—	#d0c6df
`--tanrei-comp-fab-menu-filled-focused-open-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-focused-open-icon-color`	—	#1d192b
`--tanrei-comp-fab-menu-filled-focused-open-state-layer-color`	—	#1d192b
`--tanrei-comp-fab-menu-filled-focused-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-hovered-container-color`	—	#735eab
`--tanrei-comp-fab-menu-filled-hovered-container-elevation`	—	0px 2px 3px 0px rgb(0 0 0 / 0.3), 0px 6px 10px 4px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-hovered-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-hovered-item-container-color`	—	#735eab
`--tanrei-comp-fab-menu-filled-hovered-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-hovered-item-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-hovered-item-label-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-hovered-item-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-hovered-open-container-color`	—	#d8cee8
`--tanrei-comp-fab-menu-filled-hovered-open-container-elevation`	—	0px 2px 3px 0px rgb(0 0 0 / 0.3), 0px 6px 10px 4px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-hovered-open-icon-color`	—	#1d192b
`--tanrei-comp-fab-menu-filled-hovered-open-state-layer-color`	—	#1d192b
`--tanrei-comp-fab-menu-filled-hovered-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-icon-color`	`sys.color.on-primary`	#ffffff
`--tanrei-comp-fab-menu-filled-item-container-color`	`sys.color.primary`	#6750a4
`--tanrei-comp-fab-menu-filled-item-container-elevation`	`sys.elevation.level2`	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-item-icon-color`	`sys.color.on-primary`	#ffffff
`--tanrei-comp-fab-menu-filled-item-label-color`	`sys.color.on-primary`	#ffffff
`--tanrei-comp-fab-menu-filled-item-state-layer-color`	`comp.fab-menu.filled.item.label.color`	#ffffff
`--tanrei-comp-fab-menu-filled-open-container-color`	`sys.color.secondary-container`	#e8def8
`--tanrei-comp-fab-menu-filled-open-container-elevation`	`sys.elevation.level3`	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-open-icon-color`	`sys.color.on-secondary-container`	#1d192b
`--tanrei-comp-fab-menu-filled-open-state-layer-color`	`comp.fab-menu.filled.open.icon.color`	#1d192b
`--tanrei-comp-fab-menu-filled-pressed-container-color`	—	#7965af
`--tanrei-comp-fab-menu-filled-pressed-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-pressed-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-pressed-item-container-color`	—	#7965af
`--tanrei-comp-fab-menu-filled-pressed-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-pressed-item-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-pressed-item-label-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-pressed-item-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-pressed-open-container-color`	—	#d0c6df
`--tanrei-comp-fab-menu-filled-pressed-open-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-filled-pressed-open-icon-color`	—	#1d192b
`--tanrei-comp-fab-menu-filled-pressed-open-state-layer-color`	—	#1d192b
`--tanrei-comp-fab-menu-filled-pressed-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-filled-state-layer-color`	`comp.fab-menu.filled.icon.color`	#ffffff
`--tanrei-comp-fab-menu-focused-opacity`	—	1
`--tanrei-comp-fab-menu-hovered-opacity`	—	1
`--tanrei-comp-fab-menu-icon-size-large`	`sys.icon.large`	36px
`--tanrei-comp-fab-menu-icon-size-medium`	`sys.icon.medium`	24px
`--tanrei-comp-fab-menu-icon-size-small`	`sys.icon.small`	24px
`--tanrei-comp-fab-menu-item-gap`	`sys.space.space100`	8px
`--tanrei-comp-fab-menu-item-height`	—	56px
`--tanrei-comp-fab-menu-item-icon-size`	`sys.icon.small`	24px
`--tanrei-comp-fab-menu-item-padding-inline-end`	`sys.space.space250`	20px
`--tanrei-comp-fab-menu-item-padding-inline-start`	`sys.space.space200`	16px
`--tanrei-comp-fab-menu-item-shape`	`sys.shape.corner.large`	9999px
`--tanrei-comp-fab-menu-list-gap`	`sys.space.space100`	4px
`--tanrei-comp-fab-menu-list-offset`	`sys.space.space100`	8px
`--tanrei-comp-fab-menu-motion-close-duration`	`sys.motion.duration.short3`	150ms
`--tanrei-comp-fab-menu-motion-close-easing`	`sys.motion.easing.emphasized-accelerate`	cubic-bezier(0.3, 0, 0.8, 0.15)
`--tanrei-comp-fab-menu-motion-feedback-duration`	`sys.motion.role.feedback`	450ms
`--tanrei-comp-fab-menu-motion-open-duration`	`sys.motion.duration.medium1`	250ms
`--tanrei-comp-fab-menu-motion-open-easing`	`sys.motion.easing.emphasized-decelerate`	cubic-bezier(0.05, 0.7, 0.1, 1)
`--tanrei-comp-fab-menu-motion-stagger`	`sys.motion.duration.stagger`	100ms
`--tanrei-comp-fab-menu-motion-state-duration`	`sys.motion.role.state.default`	150ms
`--tanrei-comp-fab-menu-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-fab-menu-pressed-opacity`	—	1
`--tanrei-comp-fab-menu-surface-container-color`	`sys.color.surface-container-lowest`	#ece6f0
`--tanrei-comp-fab-menu-surface-container-elevation`	`sys.elevation.level3`	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-disabled-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-surface-disabled-container-elevation`	—
`--tanrei-comp-fab-menu-surface-disabled-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-surface-disabled-item-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-surface-disabled-item-container-elevation`	—
`--tanrei-comp-fab-menu-surface-disabled-item-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-surface-disabled-item-label-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-surface-disabled-item-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-surface-disabled-open-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-surface-disabled-open-container-elevation`	—
`--tanrei-comp-fab-menu-surface-disabled-open-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-surface-disabled-open-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-surface-disabled-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-surface-focused-container-color`	—	#dcd4e7
`--tanrei-comp-fab-menu-surface-focused-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-focused-icon-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-focused-item-container-color`	—	#d3ced7
`--tanrei-comp-fab-menu-surface-focused-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-focused-item-icon-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-focused-item-label-color`	—	#1d1b20
`--tanrei-comp-fab-menu-surface-focused-item-state-layer-color`	—	#1d1b20
`--tanrei-comp-fab-menu-surface-focused-open-container-color`	—	#d0c6df
`--tanrei-comp-fab-menu-surface-focused-open-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-focused-open-icon-color`	—	#1d192b
`--tanrei-comp-fab-menu-surface-focused-open-state-layer-color`	—	#1d192b
`--tanrei-comp-fab-menu-surface-focused-state-layer-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-hovered-container-color`	—	#e1daea
`--tanrei-comp-fab-menu-surface-hovered-container-elevation`	—	0px 2px 3px 0px rgb(0 0 0 / 0.3), 0px 6px 10px 4px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-hovered-icon-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-hovered-item-container-color`	—	#dbd6df
`--tanrei-comp-fab-menu-surface-hovered-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-hovered-item-icon-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-hovered-item-label-color`	—	#1d1b20
`--tanrei-comp-fab-menu-surface-hovered-item-state-layer-color`	—	#1d1b20
`--tanrei-comp-fab-menu-surface-hovered-open-container-color`	—	#d8cee8
`--tanrei-comp-fab-menu-surface-hovered-open-container-elevation`	—	0px 2px 3px 0px rgb(0 0 0 / 0.3), 0px 6px 10px 4px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-hovered-open-icon-color`	—	#1d192b
`--tanrei-comp-fab-menu-surface-hovered-open-state-layer-color`	—	#1d192b
`--tanrei-comp-fab-menu-surface-hovered-state-layer-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-icon-color`	`sys.color.primary`	#6750a4
`--tanrei-comp-fab-menu-surface-item-container-color`	`sys.color.surface-container-lowest`	#ece6f0
`--tanrei-comp-fab-menu-surface-item-container-elevation`	`sys.elevation.level2`	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-item-icon-color`	`sys.color.primary`	#6750a4
`--tanrei-comp-fab-menu-surface-item-label-color`	`sys.color.on-surface`	#1d1b20
`--tanrei-comp-fab-menu-surface-item-state-layer-color`	`comp.fab-menu.surface.item.label.color`	#1d1b20
`--tanrei-comp-fab-menu-surface-open-container-color`	`sys.color.secondary-container`	#e8def8
`--tanrei-comp-fab-menu-surface-open-container-elevation`	`sys.elevation.level3`	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-open-icon-color`	`sys.color.on-secondary-container`	#1d192b
`--tanrei-comp-fab-menu-surface-open-state-layer-color`	`comp.fab-menu.surface.open.icon.color`	#1d192b
`--tanrei-comp-fab-menu-surface-pressed-container-color`	—	#dcd4e7
`--tanrei-comp-fab-menu-surface-pressed-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-pressed-icon-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-pressed-item-container-color`	—	#d3ced7
`--tanrei-comp-fab-menu-surface-pressed-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-pressed-item-icon-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-pressed-item-label-color`	—	#1d1b20
`--tanrei-comp-fab-menu-surface-pressed-item-state-layer-color`	—	#1d1b20
`--tanrei-comp-fab-menu-surface-pressed-open-container-color`	—	#d0c6df
`--tanrei-comp-fab-menu-surface-pressed-open-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-surface-pressed-open-icon-color`	—	#1d192b
`--tanrei-comp-fab-menu-surface-pressed-open-state-layer-color`	—	#1d192b
`--tanrei-comp-fab-menu-surface-pressed-state-layer-color`	—	#6750a4
`--tanrei-comp-fab-menu-surface-state-layer-color`	`comp.fab-menu.surface.icon.color`	#6750a4
`--tanrei-comp-fab-menu-tonal-container-color`	`sys.color.secondary-container`	#eaddff
`--tanrei-comp-fab-menu-tonal-container-elevation`	`sys.elevation.level3`	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-disabled-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-tonal-disabled-container-elevation`	—
`--tanrei-comp-fab-menu-tonal-disabled-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-tonal-disabled-item-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-tonal-disabled-item-container-elevation`	—
`--tanrei-comp-fab-menu-tonal-disabled-item-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-tonal-disabled-item-label-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-tonal-disabled-item-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-tonal-disabled-open-container-color`	—	#1d1b20 · 12%
`--tanrei-comp-fab-menu-tonal-disabled-open-container-elevation`	—
`--tanrei-comp-fab-menu-tonal-disabled-open-icon-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-tonal-disabled-open-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-tonal-disabled-state-layer-color`	—	#1d1b20 · 38%
`--tanrei-comp-fab-menu-tonal-focused-container-color`	—	#d2c2ec
`--tanrei-comp-fab-menu-tonal-focused-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-focused-icon-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-focused-item-container-color`	—	#d2c2ec
`--tanrei-comp-fab-menu-tonal-focused-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-focused-item-icon-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-focused-item-label-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-focused-item-state-layer-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-focused-open-container-color`	—	#7965af
`--tanrei-comp-fab-menu-tonal-focused-open-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-focused-open-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-tonal-focused-open-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-tonal-focused-state-layer-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-hovered-container-color`	—	#dacbf2
`--tanrei-comp-fab-menu-tonal-hovered-container-elevation`	—	0px 2px 3px 0px rgb(0 0 0 / 0.3), 0px 6px 10px 4px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-hovered-icon-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-hovered-item-container-color`	—	#dacbf2
`--tanrei-comp-fab-menu-tonal-hovered-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-hovered-item-icon-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-hovered-item-label-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-hovered-item-state-layer-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-hovered-open-container-color`	—	#735eab
`--tanrei-comp-fab-menu-tonal-hovered-open-container-elevation`	—	0px 2px 3px 0px rgb(0 0 0 / 0.3), 0px 6px 10px 4px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-hovered-open-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-tonal-hovered-open-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-tonal-hovered-state-layer-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-icon-color`	`sys.color.on-secondary-container`	#21005d
`--tanrei-comp-fab-menu-tonal-item-container-color`	`sys.color.secondary-container`	#eaddff
`--tanrei-comp-fab-menu-tonal-item-container-elevation`	`sys.elevation.level2`	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-item-icon-color`	`sys.color.on-secondary-container`	#21005d
`--tanrei-comp-fab-menu-tonal-item-label-color`	`sys.color.on-secondary-container`	#21005d
`--tanrei-comp-fab-menu-tonal-item-state-layer-color`	`comp.fab-menu.tonal.item.label.color`	#21005d
`--tanrei-comp-fab-menu-tonal-open-container-color`	`sys.color.primary`	#6750a4
`--tanrei-comp-fab-menu-tonal-open-container-elevation`	`sys.elevation.level3`	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-open-icon-color`	`sys.color.on-primary`	#ffffff
`--tanrei-comp-fab-menu-tonal-open-state-layer-color`	`comp.fab-menu.tonal.open.icon.color`	#ffffff
`--tanrei-comp-fab-menu-tonal-pressed-container-color`	—	#d2c2ec
`--tanrei-comp-fab-menu-tonal-pressed-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-pressed-icon-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-pressed-item-container-color`	—	#d2c2ec
`--tanrei-comp-fab-menu-tonal-pressed-item-container-elevation`	—	0px 1px 2px 0px rgb(0 0 0 / 0.3), 0px 2px 6px 2px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-pressed-item-icon-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-pressed-item-label-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-pressed-item-state-layer-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-pressed-open-container-color`	—	#7965af
`--tanrei-comp-fab-menu-tonal-pressed-open-container-elevation`	—	0px 1px 3px 0px rgb(0 0 0 / 0.3), 0px 4px 8px 3px rgb(0 0 0 / 0.15)
`--tanrei-comp-fab-menu-tonal-pressed-open-icon-color`	—	#ffffff
`--tanrei-comp-fab-menu-tonal-pressed-open-state-layer-color`	—	#ffffff
`--tanrei-comp-fab-menu-tonal-pressed-state-layer-color`	—	#21005d
`--tanrei-comp-fab-menu-tonal-state-layer-color`	`comp.fab-menu.tonal.icon.color`	#21005d
`--tanrei-comp-fab-menu-item-label-typescale`	`sys.typescale.label`	500 16px/1.5

फ़िक्स्चर

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

`variant: filled` (5)

filled-closed

variant: filled label: Create items: 3 slots: icon m3-like के साथ

small-closed

variant: filled size: small label: Create items: 3 slots: icon m3-like के साथ

large-closed

variant: filled size: large label: Create items: 3 slots: icon m3-like के साथ

filled-open

variant: filled open: true label: Create items: 3 slots: icon 320 × 320 की विंडो में अलग से बनाया गयाm3-like के साथ

filled-disabled

variant: filled label: Create disabled: true items: 3 slots: icon m3-like के साथ

`variant: tonal` (2)

tonal-closed

variant: tonal label: Create items: 3 slots: icon m3-like के साथ

tonal-open

variant: tonal open: true label: Create items: 3 slots: icon 320 × 320 की विंडो में अलग से बनाया गयाm3-like के साथ

`variant: surface` (2)

surface-closed

variant: surface label: Create items: 3 slots: icon m3-like के साथ

surface-open

variant: surface open: true label: Create items: 3 slots: icon 320 × 320 की विंडो में अलग से बनाया गयाm3-like के साथ

इससे जनरेट किया गया: specs/fab-menu.spec.json, tokens/systems/m3-like/comp/fab-menu.tokens.json, design/tokens/m3-like/

दिशानिर्देश

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

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

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

वेरिएंट चुनना

वेरिएंट	एम्फ़ेसिस	किसके लिए
Filled (डिफ़ॉल्ट)	सबसे ज़्यादा	पूरी ताक़त के साथ स्क्रीन की मुख्य क्रियाएँ।
Tonal	ज़्यादा	वह स्क्रीन जिसका कॉन्टेंट आगे रहना चाहिए।
Surface	तटस्थ	उस कॉन्टेंट के ऊपर का FAB मेन्यू जिसमें पहले से रंग है, जैसे नक़्शा या फ़ोटो।

वेरिएंट टॉगल और आइटम, दोनों को एक जैसा रंग देता है। खुला रहने पर टॉगल वेरिएंट का दूसरा रूप लेता है, गोल होकर एक गोला बन जाता है और बंद करने वाला ग्लिफ़ दिखाता है, इसलिए खुला कभी बंद जैसा नहीं दिखता। साइज़ सिर्फ़ टॉगल को तय करता है (40, 48 या 64): आइटम का एक ही साइज़ है।

खुलना और बंद होना

FAB मेन्यू एक ऑपरेट किया जाने वाला ओवरले है, जो मोडल नहीं है, मेन्यू की तरह। लोग इसके भीतर काम करते हैं, इसलिए यह फ़ोकस लेता है और उसे लौटाता है, पर स्क्रीन पर और कुछ भी रोका नहीं जाता: न कोई स्क्रिम है, न कोई फ़ोकस ट्रैप।

खुलना। टॉगल toggle से खोलने को कहता है। आइटम उसके ऊपर दिखते हैं, उसके अंतिम किनारे की सीध में, सबसे नज़दीक वाले से शुरू करके एक के बाद एक, और फ़ोकस सबसे ऊपर के पहले आइटम पर जाता है। Up Arrow से खोलने पर फ़ोकस इसकी जगह आख़िरी आइटम पर जाता है, यानी टॉगल के ठीक पास वाले पर।
बंद होना। Escape, प्लैटफ़ॉर्म का बैक, आइटम और टॉगल के बाहर दबाना, Tab, या फ़ोकस का बाहर चले जाना, ये सब close और कारण के साथ बंद करने को कहते हैं। किसी आइटम को सक्रिय करने पर पहले उसका click एमिट होता है, फिर item कारण के साथ close। खुला रहने पर टॉगल पर दबाना एक टॉगल है, बाहर दबाना नहीं।
फ़ोकस की वापसी। जब आइटम बंद होते हैं और फ़ोकस उनके बीच था, तो फ़ोकस टॉगल पर लौटता है। किसी आइटम से Tab उन्हें बंद करती है और टॉगल से आगे बढ़ती है, जैसे वह टॉगल से बढ़ती।
कौन बंद करता है। वेब, Compose और React Native पर आप open (expanded, visible) को toggle से सेट करते हैं और close से वापस false करते हैं। SwiftUI और Flutter पर FAB मेन्यू अपनी बाइंडिंग या कंट्रोलर के ज़रिए ख़ुद खुलता और बंद होता है।

करें

टॉगल को ऐसा लेबल दें जो बताए कि उसकी क्रियाओं में क्या साझा है, जैसे “बनाएँ”। खुला रहने पर भी उसका यही नाम रहता है। उसका expanded स्टेट स्क्रीन रीडर को बताता है कि अब वह लिस्ट को बंद करता है।
हर आइटम को एक छोटा लेबल और एक आइकन दें। लेबल वह है जो लोग पढ़ते हैं; आइकन सिर्फ़ उसे ढूँढ़ने में मदद करता है।
दो से छह आइटम तक ही रखें। उन्हें उसी क्रम में रखें जिसमें लोग उन पर नज़र दौड़ाते हैं: पहला सबसे ऊपर बनता है, और आख़िरी टॉगल के ठीक ऊपर रहता है।
स्क्रॉल होने वाले कॉन्टेंट के अंत में जगह छोड़ें, ताकि टॉगल आख़िरी आइटम को कभी हमेशा के लिए न ढके।

न करें

किसी आइटम को अक्षम न करें। जो क्रिया उपलब्ध नहीं है, उसे लिस्ट से बाहर रखें। अक्षम आइटम जैसी कोई चीज़ नहीं है।
खुला रहने पर टॉगल का नाम बदलकर “बंद करें” न करें, और उसका आइकन ख़ुद न बदलें। ये दोनों काम कंपोनेंट करता है।
एक स्क्रीन पर एक ही साइज़ के FAB मेन्यू और मुख्य ऐक्शन बटन न रखें। एक स्क्रीन पर एक ही तैरती हुई क्रिया होती है।
FAB मेन्यू को छोटी-मोटी, विनाशकारी या सेटिंग वाली क्रियाओं के लिए इस्तेमाल न करें।

सुलभता

रोल: button
लेबलिंग: label names the toggle and the list ("Create"). Each item is named by its label. Icons are decorative. The toggle keeps its name while open; its expanded state says it is open.
न्यूनतम टार्गेट: दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
`Tab / Shift+Tab`	Moves focus to the toggle; from an item, closes the menu and moves focus on from the toggle.
`Enter, Space` / `Down Arrow on the toggle`	Opens the menu (Enter and Space also close it); focus moves to the first item.
`Up Arrow on the toggle`	Opens the menu; focus moves to the last item, the one nearest the toggle.
`Down Arrow / Up Arrow`	Moves focus to the next or previous item, wrapping at the ends.
`Home / End`	Moves focus to the first or last item.
`Enter` / `Space on an item`	Activates the item and closes the menu.
`Escape`	Closes the menu and returns focus to the toggle.

Focus: the FAB menu is an operated overlay that is not modal, like the menu. It moves focus in when it opens and returns it to the toggle when it closes, but does not keep it: Tab from an item closes it.
Its place in the focus and reading order is where the layout puts the toggle in the element tree, not where it is drawn, as for the main action button.
Compose has no menu role: the items are buttons in a traversal group named by label, with their position in their collection info.
Text size does not change the toggle: an icon is not text. The items grow with enlarged text and wrap their labels.
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.

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

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

टॉगल लेबल से नाम पाने वाला एक बटन है। वह यह बताता है कि वह एक मेन्यू खोलता है और मेन्यू खुला है या नहीं, जहाँ प्लैटफ़ॉर्म में ये प्रॉपर्टी हैं, और खुला रहने पर भी अपना नाम बनाए रखता है।
खुला रहने पर आइटम उसी लेबल के नाम वाला एक मेन्यू हैं, और हर एक अपने लेबल के नाम वाला मेन्यू आइटम है, अपनी जगह और आइटम की संख्या के साथ। आइकन छिपे रहते हैं।
टॉगल पर Enter, Space या Down Arrow मेन्यू खोलती हैं और फ़ोकस को पहले आइटम पर ले जाती हैं। Up Arrow उसे खोलती है और फ़ोकस को आख़िरी आइटम पर ले जाती है। Down और Up Arrow आइटम के बीच ले जाती हैं और सिरे से घूमकर दूसरे सिरे पर आ जाती हैं, और Home और End सिरों तक पहुँचाती हैं। किसी आइटम पर Enter या Space उसे सक्रिय करती है और मेन्यू बंद करती है। Escape मेन्यू बंद करती है और फ़ोकस को टॉगल पर लौटा देती है।
मेन्यू मोडल नहीं है: वह फ़ोकस को भीतर बाँधकर नहीं रखता, स्क्रीन के बाक़ी हिस्से को निष्क्रिय नहीं करता और कोई स्क्रिम नहीं बनाता। किसी आइटम से Tab उसे बंद कर देती है।
टॉगल का हिट एरिया हर साइज़ पर न्यूनतम टार्गेट तक पहुँचता है। हर आइटम कम से कम एक टार्गेट जितना ऊँचा है, और उसका पूरा कंटेनर उसका हिट एरिया है।
टॉगल टेक्स्ट साइज़ के साथ नहीं बढ़ता, क्योंकि आइकन टेक्स्ट नहीं है। आइटम बढ़ते हैं और उनके लेबल अगली पंक्ति में जाते हैं।
जहाँ मोशन कम किया गया है, वहाँ टॉगल तुरंत बदलता है और आइटम तुरंत आते और जाते हैं।
डीबग बिल्ड टॉगल के लेबल के न होने की, बिना लेबल या बिना आइकन वाले आइटम की, और दो से कम या छह से ज़्यादा आइटम की रिपोर्ट करते हैं।

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

Web: वेब कभी back एमिट नहीं करता। Escape ही उसका बंद करने का अनुरोध है।
Web: आइटम को टॉगल के सापेक्ष स्क्रिप्ट से जगह दी जाती है, CSS ऐंकर पोज़िशनिंग से नहीं जैसा स्पेक का वेब नोट कहता है, ठीक वैसे ही जैसे मेन्यू को।
बाहर दबाने पर हर जगह आइटम बंद होते हैं। वेब और Flutter पर वह दबाना उस चीज़ तक भी पहुँचता है जो उसके नीचे है। SwiftUI, Compose और React Native पर नहीं पहुँचता।
SwiftUI में न मेन्यू या मेन्यू आइटम का रोल है, न यह कहने का कोई तरीक़ा कि टॉगल एक मेन्यू खोलता है या मेन्यू खुला है। आइटम लेबल के नाम वाले एक कंटेनर के भीतर बटन हैं, और हर एक का मान उसकी जगह है (“2 of 3”, सिर्फ़ अंग्रेज़ी में)।
SwiftUI आइटम को एक पॉपओवर में पेश करता है, जो अपनी जगह ख़ुद तय करता है। वह आइटम के पीछे अपना बबल और तीर बनाता है, कॉलम को टॉगल के अंतिम किनारे की सीध में रखने की जगह टॉगल के कोने पर केंद्रित करता है, और डिफ़ॉल्ट सिस्टम में उसे क्लिप करता है; list.offset दूरी तय नहीं करता। पॉपओवर की जगह Tanrei की ओवरले लेयर आनी है।
SwiftUI: Tab आइटम को बंद करती है और फ़ोकस को टॉगल पर लौटाती है, पर फ़ोकस उसी कीस्ट्रोक में टॉगल से आगे नहीं बढ़ सकता।
SwiftUI: आइटम का एक्सेसिबिलिटी फ़्रेम उसकी बनी हुई शैडो को भी शामिल करता है, इसलिए पड़ोसी आइटम के फ़्रेम कुछ पॉइंट एक-दूसरे पर चढ़ जाते हैं।
SwiftUI: जो SF Symbol अपनी ऊँचाई से ज़्यादा चौड़ा है, जैसे folder.badge.plus, वह आइटम के आइकन बॉक्स से बाहर निकल जाता है।
SwiftUI: टॉगल और आइटम पर कुंजियाँ, और फ़ोकस का भीतर जाना और लौटना, नियमों के रूप में टेस्ट किए गए हैं, अभी असली कीबोर्ड से नहीं।
Compose में न मेन्यू का रोल है, न ऐसी कोई प्रॉपर्टी जो कहे कि बटन एक मेन्यू खोलता है। आइटम लेबल के नाम वाले एक ट्रैवर्सल ग्रुप के भीतर बटन हैं, जिनकी जगह उनकी कलेक्शन इन्फ़ो में है, और टॉगल की फैलाने और समेटने की क्रियाएँ बताती हैं कि वह उन्हें खोलता है या बंद करता है।
Flutter टॉगल पर कोई has-popup नहीं बताता, और न मेन्यू में जगह या आइटम की संख्या।
React Native में ऐसी कोई प्रॉपर्टी नहीं है जो कहे कि बटन एक मेन्यू खोलता है। टॉगल सिर्फ़ यह बताता है कि मेन्यू खुला है या नहीं।
React Native आइटम को TanreiProvider की ओवरले लेयर में बनाता है, इसलिए उसके ऊपर एक TanreiProvider होना ज़रूरी है। Tab आइटम को बंद करती है और फ़ोकस को टॉगल पर लौटाती है, और अगली Tab उससे आगे बढ़ती है।
React Native: आइटम की जगह, उनका एक-एक करके आना, फ़ोकस का भीतर जाना और बाहर आना, और बाहर दबाना अभी किसी डिवाइस पर जाँचे नहीं गए हैं।

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

टॉगल के लिए और हर आइटम के लिए लेबल लिखें। अकेला आइकन कोई नाम नहीं है।
FAB मेन्यू को एलिमेंट ट्री में वहाँ रखें जहाँ उसकी क्रियाओं की जगह है। सहायक तकनीक टॉगल को ट्री के क्रम में पढ़ती है, उस जगह के हिसाब से नहीं जहाँ वह बना है।
वेब, Compose और React Native पर open को toggle से सेट करें और close से false करें। FAB मेन्यू सिर्फ़ अनुरोध करता है।
बंद होने पर फ़ोकस ख़ुद न ले जाएँ। FAB मेन्यू फ़ोकस को टॉगल पर लौटा देता है।
टॉगल को नेविगेशन बार से हटाकर रखें, और उसके ऊपर आइटम के लिए जगह छोड़ें।

GitHub पर सोर्स कोड और इश्यू