स्नैकबार

अवलोकन

link

Web

tanrei-snackbar

schedule

SwiftUI

TanreiSnackbar

schedule

Jetpack Compose

TanreiSnackbar

schedule

Flutter

TanreiSnackbar

schedule

React Native

Snackbar

schedule

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

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

यह पेज स्नैकबार को वैसा बताता है जैसा स्पेक में वह अभी है: स्कीम की किसी सरफ़ेस पर या इनवर्स बना एक बार, एक हल्की tonal क्रिया, हल्के टिंट वाले स्थिति के रूप, एक शीर्षक, और फैलने वाला टेक्स्ट। वेब यह सब बनाता है। जब तक उसके इनवर्स स्थिति वाले रूपों की समीक्षा नहीं हो जाती और उनकी बेसलाइन रिकॉर्ड नहीं हो जातीं, तब तक वह ऊपर “पीछे” के रूप में ही दर्ज रहता है। SwiftUI, Compose, Flutter और React Native एक पहले का संशोधन देते हैं, जिसमें text क्रिया है और न स्थिति वाले रूप हैं, न शीर्षक, न फैलना, न inverse, और जब तक वे बराबरी पर नहीं आते, उनके उदाहरण वही संशोधन दिखाते हैं। डेमो में वही वेब कंपोनेंट है जो आज दिया जाता है।

अपनी जगह पर बने हुए: क्रिया वाला एक संदेश, और बंद करने वाले बटन वाला एक संदेश

इस्तेमाल

link

स्नैकबार को आप ख़ुद कहीं नहीं रखते। आप किसी होस्ट से उसे दिखाने को कहते हैं, और होस्ट उसे क़तार में लगाता है, अपने क्षेत्र में सबसे नीचे या ऊपर अंतिम छोर पर रखता है, उसका टाइमआउट चलाता है और उसे पढ़कर सुनाता है। show तब रिज़ॉल्व होता है जब वह स्नैकबार बंद हो चुका हो: उसकी क्रिया सक्रिय की गई हो तो action के साथ, वरना dismiss और कारण के साथ। इसलिए “पहले जैसा करें” वाला कोड ऊपर से नीचे पढ़ा जाता है।

प्लैटफ़ॉर्म	होस्ट	स्नैकबार दिखाना
Web	<tanrei-snackbar-host>, पेज के आख़िरी एलिमेंट के रूप में रखा गया	host.show(options), एक promise
SwiftUI	एक TanreiSnackbarHost, जो .tanreiSnackbarHost(_:) से जोड़ा जाता है	await host.show(message:…)
Compose	TanreiSnackbarHost(hostState), कॉन्टेंट वाले Box में सबसे आख़िर में	hostState.showSnackbar(message, …), एक suspending कॉल
Flutter	TanreiSnackbarMessenger, उस पेज के चारों ओर जिसके बारे में वह बताता है	TanreiSnackbarMessenger.of(context).show(TanreiSnackbar(…)), एक कंट्रोलर जिसका closed एक future है
React Native	TanreiProvider इसे अपनी ओवरले लेयर में रेंडर करता है	useSnackbar().show(options), एक promise

हर होस्ट दिख रहे स्नैकबार को बंद भी करता है (dismissCurrent) और इंतज़ार कर रहे स्नैकबार को भी हटा देता है (clear), दोनों host कारण के साथ। होस्ट के बाहर बनाया गया स्नैकबार एलिमेंट अपनी जगह पर बनता है, उसे दी गई चौड़ाई के बीच में, जैसे होस्ट उसे बीच में रखता है (placement के top-end होने पर उस चौड़ाई के अंतिम छोर पर): न टाइमआउट, न क़तार, न आने का मोशन, न पढ़कर सुनाया जाना। यह रूप दस्तावेज़ के पेजों और टेस्ट के लिए है, जैसे ऊपर का डेमो।

<!-- पेज पर सबसे आख़िर में: फ़ोकस के क्रम में होस्ट की जगह वही है जहाँ स्नैकबार के कंट्रोल हैं। -->
<tanrei-snackbar-host></tanrei-snackbar-host>

<script type="module">
  import '@tanrei/web/components/snackbar';
  const snackbars = document.querySelector('tanrei-snackbar-host');

  async function archive() {
    await archiveConversation();
    // बंद हो जाने पर रिज़ॉल्व होता है: { result: 'action' } या { result: 'dismiss', reason }।
    const { result } = await snackbars.show({ message: 'बातचीत आर्काइव की गई', action: 'पहले जैसा करें' });
    if (result === 'action') await restoreConversation();
  }

  // स्थिति वाला रूप: ग्लिफ़, और सहायक तकनीक के लिए शब्दों में स्थिति।
  snackbars.show({
    status: 'error',
    statusLabel: 'त्रुटि',
    title: 'संदेश नहीं भेजा गया',
    message: 'आप ऑफ़लाइन हैं। संदेश आउटबॉक्स में रहेगा।',
    action: 'फिर कोशिश करें',
    expandLabel: 'पूरा संदेश दिखाएँ',
  });

  // इनवर्स बना हुआ, डिज़ाइन सिस्टम जो भी चुने। सिस्टम का चुनाव लेने के लिए `inverse` को छोड़ दें।
  snackbars.show({ message: 'लिंक कॉपी किया गया', inverse: true });
</script>

import { useRef } from 'react';
import { SnackbarHost } from '@tanrei/react';
import type { TanreiSnackbarHost } from '@tanrei/web';

// ref ही एलिमेंट है: show() उसी का मेथड है।
const snackbars = useRef<TanreiSnackbarHost>(null);

async function archive() {
  await archiveConversation();
  const { result } = await snackbars.current!.show({ message: 'बातचीत आर्काइव की गई', action: 'पहले जैसा करें' });
  if (result === 'action') await restoreConversation();
}

// स्थिति वाला रूप, संदेश के ऊपर एक शीर्षक के साथ।
snackbars.current?.show({ status: 'error', statusLabel: 'त्रुटि', title: 'संदेश नहीं भेजा गया', message: 'आप ऑफ़लाइन हैं।', action: 'फिर कोशिश करें' });

// इनवर्स बना हुआ, डिज़ाइन सिस्टम जो भी चुने।
snackbars.current?.show({ message: 'लिंक कॉपी किया गया', inverse: true });

// पेज में सबसे आख़िर में, कॉन्टेंट के बाद।
<SnackbarHost ref={snackbars} />

import Tanrei

@State private var snackbars = TanreiSnackbarHost()

// होस्ट को उस व्यू से जोड़ें जिसका निचला किनारा वह इस्तेमाल करता है। वह एक ओवरले में बनता है, शीट में नहीं।
ContentView()
    .tanreiSnackbarHost(snackbars)

// स्नैकबार के बंद हो जाने पर लौटता है: .action, या .dismissed(reason)।
// जिस होस्ट का व्यू स्क्रीन पर नहीं है, उससे किया गया अनुरोध व्यू के आने तक इंतज़ार करता है।
let result = await snackbars.show(message: "बातचीत आर्काइव की गई", actionLabel: "पहले जैसा करें")
if case .action = result { restoreConversation() }

import io.github.chnotchy.tanrei.components.TanreiSnackbarHost
import io.github.chnotchy.tanrei.components.TanreiSnackbarHostState
import io.github.chnotchy.tanrei.components.TanreiSnackbarResult

// Material के SnackbarHostState की तरह: showSnackbar स्नैकबार के बंद होने तक suspend रहता है।
val snackbars = remember { TanreiSnackbarHostState() }
val scope = rememberCoroutineScope()
Box(Modifier.fillMaxSize()) {
    Content(onArchive = {
        scope.launch {
            when (snackbars.showSnackbar("बातचीत आर्काइव की गई", actionLabel = "पहले जैसा करें")) {
                TanreiSnackbarResult.ActionPerformed -> unarchive()
                is TanreiSnackbarResult.Dismissed -> Unit
            }
        }
    })
    // Box में सबसे आख़िर में: कॉन्टेंट के ऊपर बनता है, और फ़ोकस के क्रम में सबसे आख़िर में आता है।
    TanreiSnackbarHost(snackbars, Modifier.fillMaxSize())
}

import 'package:tanrei/tanrei.dart';

// ScaffoldMessenger की तरह। इसे पेज के चारों ओर, उसके रूट के भीतर रखें, ताकि ऊपर खोला गया डायलॉग इसे ढके।
TanreiSnackbarMessenger(child: page);

Future<void> archive(BuildContext context) async {
  await archiveConversation();
  final TanreiSnackbarController snackbar = TanreiSnackbarMessenger.of(context).show(
    const TanreiSnackbar(message: 'बातचीत आर्काइव की गई', actionLabel: 'पहले जैसा करें'),
  );
  // action, close, escape, timeout या host के साथ पूरा होता है।
  if (await snackbar.closed == TanreiSnackbarClosedReason.action) {
    await restoreConversation();
  }
}

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

// होस्ट TanreiProvider की ओवरले लेयर में रहता है: प्रोवाइडर को अपने ऐप के रूट पर रखें।
const snackbar = useSnackbar();

async function archive() {
  await archiveConversation();
  const { result } = await snackbar.show({ message: 'बातचीत आर्काइव की गई', actionLabel: 'पहले जैसा करें' });
  if (result === 'action') await restoreConversation();
}

स्पेक

link

अगली पंक्ति में जाने वाला संदेश, और अपनी अलग पंक्ति में एक क्रिया

संरचना

संरचना

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

भाग	विवरण
1 container	The bar that holds the text and the controls, raised above the content of its host. Its color is its form's: a surface of the scheme (the default form, or a faint tint of a status) or, drawn inverse, the opposite scheme's surface or, in a status form, the bar the other theme draws for that status: deep in a light scheme, pale in a dark one.
2 outline · वैकल्पिक	The edge of a status form: a hairline in the status's color, at the edge's opacity, around the bar where the ring of its elevation is. The default form and the inverse form draw none and keep that ring alone.
3 icon · वैकल्पिक	The status glyph from the system's icon set, before the text: info, warning, error or check_circle. Drawn only in a status form, a little softer than the text (in the status's own color on a surface and, on an inverse bar, in the status color of the other theme, at the glyph's opacity), and hidden from assistive technology, which hears statusLabel instead.
4 title · वैकल्पिक	A few words that name what happened, above the message. Up to three lines while collapsed.
5 supporting-text	The message: what happened, or with a title the description, which is then drawn a little quieter than the title. Up to three lines while collapsed.
6 action · वैकल्पिक	One control that undoes or follows up on what happened, drawn as a tonal button with the snackbar's own tokens, as tall as the small Buttons beside it: the color of its own bar with a tonal layer of its label's color over it, so that it stands one quiet step off the bar, the same step in every form.
7 expand · वैकल्पिक	An icon-only Button of the small size that shows the whole title and message, and hides them again: the glyph expand_more while collapsed and expand_less while expanded. Drawn only while the text is longer than its collapsed limit, and drawn as the close button is (SNK-34).
8 close · वैकल्पिक	An icon-only Button of the small size showing the icon set's close glyph, which closes the snackbar. The snackbar places it, chooses its variant (comp.snackbar.close-button.variant: tonal in the default system) and gives it its form's tone (BTN-45): the glyph in the bar's message color and, where the variant draws a container, a circle of that color made translucent. Everything else it reads from Button's own tokens.
9 focus-ring · वैकल्पिक	Gap-then-ring indicator shown for keyboard focus of the action, or of the text while it scrolls, in the color its form gives it so that it shows on that form's bar. The expand and close buttons draw their own, in the same color (SNK-34).

माप

माप

लंबाई	टोकन	मान (px)
container padding-inline-start	tanrei.comp.snackbar.container.padding-inline-start	16
container padding-inline-end	tanrei.comp.snackbar.container.padding-inline-end	16

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

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
message	string	""	What happened; with a title, the description. Required. Plain text: the whole message is announced, even when a collapsed snackbar cuts it.
title	string	""	A few words above the message that name what happened ("Message not sent"). Empty draws the message alone.
action	string	""	The label of the one action ("Undo", "View"), drawn as a tonal button that sits one quiet step off the bar, the same step in every form. Empty draws no action.
status	default | info | warning | error | success	"default"	The form of the snackbar. Default is the neutral bar with no glyph; info, warning, error and success draw the bar as a quiet tint of that status (pale on the scheme's surface or, drawn inverse, the bar the other theme draws for that status, with that theme's text, glyph and edge colors), with an edge in the status's color and the status's glyph before the text, and warning and error are announced assertively.
statusLabel	string	""	The status in words, in the product's language ("Error"), announced before the title and the message so that the status never rests on color and glyph alone. Required while status is not default.
inverse	boolean	null	Whether this snackbar is drawn inverse: in the opposite scheme's colors (a dark bar in a light scheme), so that it stands apart from whatever it lands on. False draws it on a surface of the scheme. Null, the default, takes comp.snackbar.container.inverse, the system's choice, which is off in the default system. It changes colors only (SNK-30).
closable	boolean	false	Draws a close button, for a message that stays until the person closes it or for one they may want gone sooner.
closeLabel	string	""	The close button's accessible name, in the product's language ("Close"). Required while closable is true.
expanded	boolean	false	Whether the whole title and message show. The person toggles it with the expand button (SNK-24); it has no effect while the text fits within its collapsed limits.
expandLabel	string	""	The expand button's accessible name, in the product's language ("Show full message"). It stays the same while expanded; the button's expanded state says which way it acts. Required whenever the text can be longer than its collapsed limit.
duration	auto | short | long | indefinite	"auto"	How long the snackbar stays by itself. Auto is short without an action and indefinite with one (WCAG 2.2.1: a person must not be timed out of an action). Short and long close after the snackbar's timeout tokens; indefinite stays until it is closed.
placement	bottom | top-end	"bottom"	Where the host places the snackbar in its area. Bottom, the default, is the bottom edge, centred (SNK-13). Top-end is the top edge at the end side: the top right in a left-to-right layout and the top left in a right-to-left one, and across the top of a compact window (SNK-35). A host may be given one placement for all the snackbars it shows; a snackbar that names its own keeps it. It changes where the snackbar stands and the side it enters from (SNK-36, SNK-37), and nothing else: not its size, its form, its order in the queue, its place in the focus order or its announcement.

इवेंट

इवेंट	विवरण
action	The action was activated. The snackbar closes.
dismiss	The snackbar closed without its action; carries the reason: close (the close button), escape, timeout, or host (the product closed it or cleared the queue).
toggle	The person expanded or collapsed the text with the expand button; carries the new expanded value. Not emitted when the product sets expanded.

स्टेट

व्यवहार

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

ID	आवश्यकता
SNK-1	WHEN the user activates the action by pointer, touch, Enter or Space THE snackbar SHALL emit action exactly once and close; WHEN the user activates the close button the same way THE snackbar SHALL emit dismiss with the reason close exactly once and close.
SNK-2	WHILE the action is hovered, keyboard-focused or pressed THE snackbar SHALL render the action's container, content color and opacity from the component tokens of the highest-precedence active state of the action, in the snackbar's form (SNK-21, SNK-30), with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state. The expand and close buttons answer their states as any Button does (SNK-34).
SNK-3	WHEN the action receives keyboard focus THE snackbar SHALL show the focus ring around it without animation; focus gained by pointer or touch SHALL NOT show it. THE snackbar SHALL draw the outer stroke of that indicator, of the indicator inside the text while it scrolls and has keyboard focus (SNK-25) and, through the tone it gives them (SNK-34), of the indicators of the expand and close buttons, in its form's focus-ring color: comp.snackbar.focus-ring.color in the default form, and the token of that name under the form's prefix in every other (comp.snackbar.info.focus-ring.color, comp.snackbar.inverse.focus-ring.color, comp.snackbar.inverse-info.focus-ring.color, and warning's, error's and success's of the same names), never the system's focus-ring color role read directly. The widths and the offset SHALL stay the system's (sys.focus.outer-width, sys.focus.inner-width, sys.focus.offset), as SHALL the color of an inner stroke where the system draws one; under the glow focus style (SNK-7) the form's color SHALL be the halo's outer color.
SNK-4	WHERE the visual size of the action is below the minimum target THE snackbar SHALL extend the action's hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size; a platform that cannot tell the input type SHALL use sys.target.touch.
SNK-5	WHEN the action is pressed by pointer, touch, Enter or Space THE snackbar 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.
SNK-6	WHILE the action is pressed THE snackbar SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container of the action 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 action 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; content color, 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.snackbar.motion.feedback-duration with comp.snackbar.motion.state-easing, fades over comp.snackbar.motion.state-duration with comp.snackbar.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
SNK-7	THE snackbar SHALL ease its container corners and the action's 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.
SNK-8	WHILE duration is auto THE snackbar SHALL behave as short when action is empty and as indefinite when action is set. WHILE duration is short or long THE snackbar SHALL close by itself once it has been shown for comp.snackbar.timeout.short or comp.snackbar.timeout.long, and emit dismiss with the reason timeout; WHERE the platform recommends a longer time for the person's accessibility settings (Android's accessibility timeout) it SHALL use that time, and WHERE the platform reports that a screen reader is running a snackbar with an action SHALL NOT close by itself. WHILE duration is indefinite THE snackbar SHALL NOT close by itself.
SNK-9	WHILE the pointer is over the snackbar, focus is inside it, it is expanded, the app's window is hidden or in the background, or a Tanrei modal dialog covers its host THE snackbar SHALL pause its timeout, and WHEN none of these holds any longer SHALL start the timeout again from its whole length.
SNK-10	WHEN a snackbar is shown THE snackbar SHALL have assistive technology announce it once: statusLabel first when status is not default, then the title when it has one, then the whole message (never only the part a collapsed snackbar shows), then the action's label when it has one. It SHALL announce politely (after what is being read) when status is default, info or success, and assertively (interrupting what is being read) when status is warning or error, and SHALL NOT move keyboard or screen-reader focus.
SNK-11	THE snackbar's controls SHALL be reachable in the focus order at the place its host has in that order, in this order whatever row each is drawn on: the text while it scrolls (SNK-25), the action, the expand button, the close button; WHEN the user presses Escape while focus is inside the snackbar THE snackbar SHALL emit dismiss with the reason escape and close; WHEN a snackbar closes while focus is inside it, focus SHALL return to the element that had it before focus entered the snackbar or, where that element no longer exists, to the platform's default.
SNK-12	THE host SHALL show one snackbar at a time, in the order they were requested: WHEN a snackbar is requested while another is showing or closing it SHALL wait until the other has closed, and WHILE a Tanrei modal dialog covers the host a snackbar not yet shown SHALL wait until the dialog closes. Each request SHALL resolve once its snackbar has closed, with action or with dismiss and its reason. WHEN the product closes the showing snackbar THE host SHALL close it and resolve it with dismiss and the reason host, and the next waiting one SHALL then show; WHEN the product clears the queue THE host SHALL also drop every waiting one and resolve each with dismiss and the reason host.
SNK-13	WHILE placement is bottom THE host SHALL place the snackbar at the bottom of its area, centred, comp.snackbar.container.margin above the bottom edge and at least comp.snackbar.container.margin from the side edges, inside the safe area and above the on-screen keyboard; at either placement it SHALL draw the snackbar above its area's content and below a Tanrei modal dialog and its scrim.
SNK-14	THE snackbar SHALL be at least comp.snackbar.container.min-height tall and as wide as its content between comp.snackbar.container.min-width and comp.snackbar.container.max-width, but never wider than its host less comp.snackbar.container.margin on each side. It SHALL draw comp.snackbar.container.color, or its form's container color (SNK-21, SNK-30), with comp.snackbar.container.elevation and comp.snackbar.container.shape corners, and pad its content by comp.snackbar.container.padding-inline-start before the status glyph or, without one, before the text, by comp.snackbar.container.padding-block below the text and by at least as much above it, where SNK-29 places the first line, and after the text by comp.snackbar.container.padding-inline-end when there is no control or by comp.snackbar.container.padding-inline-end-with-controls after the last control. WHILE the action stands on its own row (SNK-16) and no control follows the text on its row, the text SHALL end comp.snackbar.container.padding-inline-end from the end edge, as in a snackbar without controls, and padding-inline-end-with-controls SHALL be the action row's alone.
SNK-15	THE snackbar SHALL draw the message in comp.snackbar.supporting-text.typescale and comp.snackbar.supporting-text.color, or its form's message color (SNK-21, SNK-30), at the opacity SNK-32 gives a message under a title, followed comp.snackbar.container.gap after the text (the title and the message) by the action, the expand button and the close button, in that order, comp.snackbar.controls.gap apart and centred on the text's first line (SNK-29). The action SHALL be drawn as a tonal button, in its form's action colors: a container of comp.snackbar.action.container.color at least comp.snackbar.controls.height tall (the height of a small Button, so that the action stands as tall as the expand and close buttons in its row), the tonal layer over it (SNK-33), and comp.snackbar.controls.padding-inline around its label in comp.snackbar.controls.label.typescale and comp.snackbar.action.content.color, on comp.snackbar.controls.shape corners. The expand and close buttons SHALL be drawn as SNK-34 says.
SNK-16	WHEN the text (the title and the message) would need more than two lines beside the controls, or the action's label would itself wrap, THE snackbar SHALL move the action onto its own row below the text, comp.snackbar.container.gap below it and aligned to the end, with comp.snackbar.container.padding-inline-end-with-controls between that row and the bar's bottom edge, while the expand and close buttons stay at the end of the first row; the text SHALL wrap, and is cut only as SNK-23 says, and the action's label SHALL never wrap or be truncated.
SNK-17	WHEN a snackbar is shown THE snackbar SHALL rise into place from below the bottom edge of its host by its own height plus its margin while fading in (WHILE placement is bottom; at top-end it descends instead, SNK-36), over comp.snackbar.motion.enter-duration with comp.snackbar.motion.enter-easing; WHEN it closes it SHALL fade out in place over comp.snackbar.motion.exit-duration with comp.snackbar.motion.exit-easing, and the host SHALL show the next one only after that. WHERE motion is reduced it SHALL fade in and out without moving, or appear and disappear at once on a platform whose reduced-motion setting removes every animation (Android's).
SNK-18	WHEN the layout direction is right-to-left THE snackbar SHALL mirror its layout (the status glyph and the text at the right, the controls at the left) without mirroring any glyph, and SHALL grow a ripple from the point of contact as in left-to-right.
SNK-19	WHILE a snackbar is drawn outside a host (a snapshot harness, a documentation page) THE snackbar SHALL draw in place at its resting position, centred across the width it is given as SNK-13 centres it in a host (or, WHILE placement is top-end, at the end of that width as SNK-35 places it, and across the whole of it where that width is narrower than comp.snackbar.breakpoint.medium) and at most as tall as the height it is given, the width and the height it is given standing for the host's area in SNK-25 and SNK-35; it SHALL NOT time out, queue, animate its entrance or announce itself, and SHALL still emit action, dismiss and toggle.
SNK-20	WHILE message is empty THE snackbar SHALL still render and in debug builds report the empty message; WHILE closable is true and closeLabel is empty it SHALL still render the close button and in debug builds report that the button has no accessible name; WHILE status is not default and statusLabel is empty it SHALL still render the status form and in debug builds report that the status is not given in words; WHILE the expand button is drawn and expandLabel is empty it SHALL still render it and in debug builds report that it has no accessible name; WHEN duration is short or long and action is set it SHALL, in debug builds, remind the product that a timed action must also be offered elsewhere.
SNK-21	WHILE status is info, warning, error or success THE snackbar SHALL draw that status form: the bar, the title, the message and the status glyph in the status's container, title, supporting-text and icon colors, and every state of the action from the parts prefixed with the status, and give the expand and close buttons the status's tone (SNK-34). For info, while the snackbar is not drawn inverse (SNK-30), these are comp.snackbar.info.container.color, comp.snackbar.info.title.color, comp.snackbar.info.supporting-text.color, comp.snackbar.info.icon.color, comp.snackbar.info.outline.color for its edge (SNK-31), comp.snackbar.action.info.container.color and comp.snackbar.action.info.content.color; warning, error and success read their own tokens of the same names, and a status form drawn inverse reads the tokens SNK-30 names. Before the text it SHALL draw the status's glyph from the system's icon set (info for info, warning for warning, error for error, check_circle for success) at comp.snackbar.icon.size, in its form's icon color drawn at comp.snackbar.icon.opacity (an opacity of the glyph alone, which fades nothing else), comp.snackbar.icon.gap before the text and centred on the text's first line (SNK-29), 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, never mirrored. The glyph so drawn SHALL keep 3:1 against its bar in every scheme of the default system. The glyph SHALL be hidden from assistive technology, and statusLabel SHALL be exposed as text before the title and the message. WHILE status is default THE snackbar SHALL draw no glyph and read the unprefixed tokens, or drawn inverse the tokens prefixed with inverse (SNK-30).
SNK-22	WHILE title is not empty THE snackbar SHALL draw it above the message in comp.snackbar.title.typescale and comp.snackbar.title.color, or its form's title color (SNK-21, SNK-30), with comp.snackbar.title.gap between the title and the message; WHILE title is empty it SHALL draw the message alone. THE snackbar SHALL set the title's letter-spacing by the script of its text, as every title is set (PRS-20): no negative letter-spacing WHERE its language is Chinese, Japanese or Korean, and none WHERE its script joins its letters or stacks marks on them.
SNK-23	WHILE expanded is false THE snackbar SHALL show at most comp.snackbar.title.max-lines lines of the title and at most comp.snackbar.supporting-text.max-lines lines of the message, each ending with an ellipsis where it is cut, at every text size, and the whole of both SHALL still reach assistive technology. WHILE the title or the message is longer than its collapsed limit THE snackbar SHALL draw the expand button, holding expand_more while collapsed and expand_less while expanded; WHILE both fit within their limits it SHALL NOT draw the expand button, and expanded SHALL have no effect. WHILE expanded is true THE snackbar SHALL show the whole title and message.
SNK-24	WHEN the user activates the expand button by pointer, touch, Enter or Space THE snackbar SHALL toggle expanded, emit toggle with the new value exactly once, keep focus on the expand button and stay open; the bar SHALL grow to its expanded height or shrink back over comp.snackbar.motion.expand-duration with comp.snackbar.motion.expand-easing, keeping its bottom edge in place WHILE placement is bottom and its top edge at top-end (SNK-37), and change at once where motion is reduced. The expand button SHALL expose to assistive technology whether the text is expanded and which text it shows and hides, and SHALL keep expandLabel as its name in both states. WHEN the product sets expanded THE snackbar SHALL change the same way without emitting toggle.
SNK-25	WHILE the snackbar is expanded and its whole content would make it taller than its host's area allows (the area's height less comp.snackbar.container.margin above and below, inside the safe area and above the on-screen keyboard) THE snackbar SHALL take that height and scroll its text inside the bar, keeping the status glyph, the controls and an action on its own row in place; WHILE the text scrolls it SHALL be reachable by keyboard (a focus stop, scrolled by the arrow keys, Page Up and Page Down), named by the title when there is one, and scrolled by wheel, trackpad and touch.
SNK-26	WHILE the system's icon set cannot yet draw a glyph of the snackbar (its font is still loading) — the status glyph, or the glyph it gives the expand or the close button — THE snackbar SHALL draw nothing in that glyph's place, never the glyph's name as text, SHALL keep the glyph's box, and SHALL draw the glyph once the set can; statusLabel, expandLabel and closeLabel SHALL still reach assistive technology.
SNK-27	THE snackbar 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 snackbar is shown THE snackbar SHALL draw itself for the new direction at once, without a motion of its own, keeping its open state, the time left before it closes and its focus.
SNK-28	THE snackbar SHALL lay out its title, its message and its action's label 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 snackbar SHALL still place each and align its lines by the layout direction, not by the text's own, and SHALL cut a title or a message cut by a line limit that does not fit (SNK-23) 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.
SNK-29	THE snackbar SHALL align its content to the top of the bar. It SHALL centre the first line of the text (the title's, or the message's without a title) half of comp.snackbar.container.min-height below the bar's top edge, or lower where comp.snackbar.container.padding-block plus half that line's height is more (enlarged text), and SHALL centre the status glyph and every control of the first row (the action while it is beside the text, the expand button and the close button) on that line; every further line of the text follows below it, an action on its own row (SNK-16) follows the text, and any height the bar has beyond its content SHALL lie below the content, never above it. WHEN the bar expands or collapses (SNK-24), and WHEN its text is cut or shown whole (SNK-23), the status glyph, the first line of the title and of the message, and every control of the first row SHALL keep their distance from the bar's top edge, during the motion and after it; an action on its own row SHALL keep its distance from the bar's bottom edge.
SNK-30	THE snackbar SHALL be drawn inverse WHILE inverse is true, or WHILE inverse is null and comp.snackbar.container.inverse is on; otherwise (inverse false, or null where that choice is off) it SHALL be drawn on a surface of the scheme, from the unprefixed tokens or its status form's (SNK-21). WHILE it is drawn inverse and status is default THE snackbar SHALL draw the bar, the title and the message in comp.snackbar.inverse.container.color, comp.snackbar.inverse.title.color and comp.snackbar.inverse.supporting-text.color, and every state of the action from the parts prefixed with inverse (comp.snackbar.action.inverse.container.color and comp.snackbar.action.inverse.content.color), and give the expand and close buttons that form's tone (SNK-34). WHILE it is drawn inverse and status is info, warning, error or success it SHALL draw that status's inverse form the same way, from the parts prefixed with inverse- and the status: for info comp.snackbar.inverse-info.container.color, comp.snackbar.inverse-info.title.color, comp.snackbar.inverse-info.supporting-text.color, comp.snackbar.inverse-info.icon.color, comp.snackbar.inverse-info.outline.color for its edge (SNK-31), comp.snackbar.action.inverse-info.container.color and comp.snackbar.action.inverse-info.content.color, and for warning, error and success their own tokens of the same names. Under the default system each color of a status's inverse form SHALL be the color the same part of that status's form not drawn inverse has in the scheme of the other theme at the same contrast level (light for dark, light-medium for dark-medium, light-high for dark-high, and each the other way): the bar, the title, the message, the glyph, the edge, the focus indicator, every state of the action and the tone of the expand and close buttons, so that the inverse form of a status in one theme and its form on a surface in the other differ only in what lies around the bar. Being drawn inverse SHALL change colors only: the bar's elevation, corners, sizes and layout, the glyphs, the width and the opacity of a status form's edge, the opacities of the glyph, of a message under a title and of the action's tonal layer, the motion, the timing, the announcement and the keyboard behaviour SHALL be those of the same snackbar not drawn inverse. WHEN inverse or the system's choice changes while the snackbar is shown THE snackbar SHALL draw the other form at once, keeping its open state, the time left before it closes and its focus.
SNK-31	WHILE status is info, warning, error or success THE snackbar SHALL draw its form's edge: a line comp.snackbar.outline.width wide around the bar, outside the bar's bounds and following its corners, where the ring of comp.snackbar.container.elevation lies (the layer of that elevation with no offset, no blur and a positive spread), over that ring and above the elevation's shadows, in the form's outline color drawn at comp.snackbar.outline.opacity: comp.snackbar.info.outline.color for info, comp.snackbar.inverse-info.outline.color for info drawn inverse (SNK-30), and warning's, error's and success's tokens of the same names. The edge SHALL NOT change the bar's size or the place of anything inside or around it, and the focus indicator of a control SHALL be drawn above it. WHILE status is default THE snackbar SHALL draw no edge of its own, drawn inverse or not: the ring of its elevation shows alone, as on every raised surface. WHERE comp.snackbar.outline.opacity is 0 a status form SHALL draw no edge either.
SNK-32	WHILE title is not empty THE snackbar SHALL draw the message at comp.snackbar.supporting-text.under-title.opacity: an opacity of the message's text alone, applied to its form's message color (SNK-15), in every form, collapsed and expanded. WHILE title is empty it SHALL draw the message whole, and it SHALL draw the title whole in every form. The message so drawn SHALL keep 4.5:1 against its bar in every scheme of the default system, and 7:1 in its high-contrast schemes; what assistive technology reads SHALL NOT change with it.
SNK-33	THE snackbar SHALL draw the action's tonal layer in every form and in every state of the action: the action's content color of that form and state, at comp.snackbar.action.tonal-layer.opacity, filling the action's container to its corners, above the container color of that state (SNK-2) and above a ripple that grows on it (SNK-6), and under the label. The layer is the action's alone, SHALL NOT take a press or change the action's size, and SHALL NOT be drawn WHERE comp.snackbar.action.tonal-layer.opacity is 0, where the action is its container alone. The label SHALL keep 4.5:1 against the action as drawn (the container color of the state with the layer over it) in every form, state and scheme of the default system, and 7:1 in its high-contrast schemes.
SNK-34	WHILE closable is true, and WHILE the expand button is drawn (SNK-23), THE snackbar SHALL draw that button, in the place SNK-15, SNK-16 and SNK-29 give it, as an icon-only Button of the small size showing a glyph of the system's icon set (close; expand_more or expand_less, SNK-23) and named by closeLabel or expandLabel, in the variant comp.snackbar.close-button.variant names and in the tone of the snackbar's form (BTN-45): the form's message color — comp.snackbar.supporting-text.color in the default form, and the token of that name under the form's prefix in every other (SNK-21, SNK-30) — with the form's focus-ring color (SNK-3) for its focus indicator, both given through the channel a Button reads from the component that places it, and otherwise unrestyled: it reads Button's own tokens for its size, glyph size, corners and state opacities, answers hover, focus and press as any Button does, and keeps its own minimum target (BTN-5). WHEN the snackbar's form changes while it is shown THE snackbar SHALL give the buttons the new form's tone with the new form's colors (SNK-30). THE snackbar SHALL draw no close or expand mark of its own (no path, shape or character of its own), and the expand button SHALL expose to assistive technology whether the text is expanded and which text it shows and hides (SNK-24).
SNK-35	WHILE placement is top-end THE host SHALL place the snackbar at the top of its area, at its end side (the right in a left-to-right layout and the left in a right-to-left one, taken from where the host is used as SNK-27 says), comp.snackbar.container.margin below the top edge and comp.snackbar.container.margin from the end edge, inside the safe area and below what the frame keeps over the top of the area (a sticky header's present height, APS-17), so that it never covers a top app bar; WHILE the area is narrower than comp.snackbar.breakpoint.medium (a compact window) it SHALL draw the snackbar across the top of the area instead, as wide as the area less comp.snackbar.container.margin on each side, within comp.snackbar.container.max-width. WHEN the product asks for a snackbar without a placement THE host SHALL give it the placement the host itself is given, and bottom where it is given none. The placement SHALL NOT change the snackbar's layer (SNK-13), its other size bounds (SNK-14), its place in the focus order (SNK-11) or its announcement (SNK-10), and the host SHALL still show one snackbar at a time, in order (SNK-12): at the top as at the bottom, a snackbar asked for while another shows waits for it to close, and no two are stacked.
SNK-36	WHILE placement is top-end, WHEN a snackbar is shown THE snackbar SHALL descend into place from above the top edge of its host by its own height plus its margin while fading in, over comp.snackbar.motion.enter-duration with comp.snackbar.motion.enter-easing, as SNK-17 rises at the bottom; WHEN it closes it SHALL fade out in place as SNK-17 says, and WHERE motion is reduced it SHALL fade in and out without moving, or appear and disappear at once where the platform removes every animation.
SNK-37	WHILE placement is top-end, WHEN the bar expands or collapses (SNK-24) THE snackbar SHALL grow downward and shrink back with its top edge in place, so that, its content being aligned to the top (SNK-29), nothing of its first row moves on the screen during the motion or after it; WHILE it is expanded it SHALL be at most as tall as SNK-25 allows, the area's height being measured from below what the frame keeps over its top (SNK-35).

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

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

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-snackbar	TanreiSnackbar	TanreiSnackbar	TanreiSnackbar	Snackbar
message · प्रॉपर्टी	message	message	message	message	message
title · प्रॉपर्टी	headline	title	title	title	title
action · प्रॉपर्टी	action	actionLabel	actionLabel	actionLabel	actionLabel
status · प्रॉपर्टी	status	status	status	status	status
statusLabel · प्रॉपर्टी	statusLabel	statusLabel	statusLabel	statusLabel	statusLabel
inverse · प्रॉपर्टी	inverse	inverse	inverse	inverse	inverse
closable · प्रॉपर्टी	closable	withCloseButton	withDismissAction	showCloseIcon	closable
closeLabel · प्रॉपर्टी	closeLabel	closeLabel	closeLabel	closeIconLabel	closeLabel
expanded · प्रॉपर्टी	expanded	isExpanded	expanded	expanded	expanded
expandLabel · प्रॉपर्टी	expandLabel	expandLabel	expandLabel	expandLabel	expandLabel
duration · प्रॉपर्टी	duration	duration	duration	duration	duration
placement · प्रॉपर्टी	placement	placement	placement	placement	placement
action · इवेंट	action	TanreiSnackbarResult.action	TanreiSnackbarResult.ActionPerformed	TanreiSnackbarClosedReason.action	onAction
dismiss · इवेंट	dismiss	TanreiSnackbarResult.dismissed	TanreiSnackbarResult.Dismissed	TanreiSnackbarClosedReason	onDismiss
toggle · इवेंट	expandedchange	onExpandedChange	onExpandedChange	onExpandedChanged	onExpandedChange
टिप्पणियाँ	title is the headline property and attribute, because HTML's global title attribute would show a tooltip over the whole bar (as the app bar's). closeLabel, statusLabel and expandLabel are the close-label, status-label and expand-label attributes. inverse is a property that is true, false or null (the default); the inverse attribute sets it: absent is null, present (empty or true) is true, and inverse="false" is false, the one way to refuse a system whose choice is on. While it is null the snackbar reads --tanrei-comp-snackbar-container-inverse from the cascade, which carries the choice's name (SNK-30). The opacities of SNK-21, SNK-31, SNK-32 and SNK-33 are applied to the color of the part they name (a mix of that color with transparent), never as an element's opacity, so nothing else fades with it; a status form's edge is a shadow layer of its own before the elevation's, and the tonal layer lies inside the action, under its label. The focus indicator's color is the form's focus-ring-color custom property, handed to the shared focus primitive (SNK-3). The expand and close buttons are <tanrei-button size="small"> elements in the snackbar's shadow root, given the variant --tanrei-comp-snackbar-close-button-variant names and the form's tone through the Button's internal channel (SNK-34); the expand button's expanded state and the text it controls are written on the Button's own native button (aria-expanded, and ariaControlsElements, since an id cannot be named across the Button's shadow root). dismiss is a CustomEvent whose detail.reason is the reason. toggle is the expandedchange CustomEvent, whose detail.expanded is the new value, because a popover element already fires a native toggle when it is shown and hidden. The host (<tanrei-snackbar-host>) queues and places snackbars; show(options) takes title, status, statusLabel, inverse and expandLabel as well; see the accessibility notes. placement is the placement attribute of <tanrei-snackbar> and of <tanrei-snackbar-host>: the host's is the placement of each snackbar whose show() options name none (SNK-35). What the frame keeps over the top of the area is --tanrei-app-shell-scroll-offset on the document's root, which <tanrei-app-shell> sets to its sticky header's height (APS-17) and a product's own frame may set; the safe area is env(safe-area-inset-*). A compact window is one narrower than --tanrei-comp-snackbar-breakpoint-medium, read by the stylesheet itself, with no listener. Snapshot harness: each fixture is a <tanrei-snackbar> rendered outside a host (SNK-19), on a 400 px wide stage; expanded-scrolls on a stage 400 × 240, and top-end and top-end-rtl on a stage 720 wide, wider than a compact window.	Lagging: ships an earlier form of the snackbar: always an inverse bar, with a text action, no status forms, no title, no expansion and no inverse. A host is a @Observable TanreiSnackbarHost attached with .tanreiSnackbarHost(_:) on the view whose bottom edge it uses; await host.show(message:actionLabel:withCloseButton:closeLabel:duration:) returns a TanreiSnackbarResult (.action, or .dismissed(reason)) once the snackbar has closed. It is drawn in an overlay of that view, not in a sheet, which would be modal. Snapshot harness: TanreiSnackbar rendered in place (SNK-19) in a 400-point frame. inverse is a Bool?, nil by default. Not yet: the top-end placement (SNK-35, SNK-36, SNK-37); the expand and close buttons as small Buttons in the form's tone (SNK-34); the title's letter-spacing by the script of its text (SNK-22, PRS-20).	Lagging: ships an earlier form of the snackbar: always an inverse bar, with a text action, no status forms, no title, no expansion and no inverse. Shaped like Material's snackbar API: TanreiSnackbarHost(hostState) is placed in the layout (for example a scaffold's snackbar slot), and hostState.showSnackbar(message, actionLabel, withDismissAction, closeLabel, duration) suspends until the snackbar has closed and returns the result; cancelling the coroutine closes it with the reason host. The recommended timeout is AccessibilityManager.calculateRecommendedTimeoutMillis. Snapshot harness: TanreiSnackbar(message = …) rendered in place (SNK-19) in a 400 dp wide box. inverse is a Boolean?, null by default. Not yet: the top-end placement (SNK-35, SNK-36, SNK-37); the expand and close buttons as small Buttons in the form's tone (SNK-34); the title's letter-spacing by the script of its text (SNK-22, PRS-20).	Lagging: ships an earlier form of the snackbar: always an inverse bar, with a text action, no status forms, no title, no expansion and no inverse. Shaped like Flutter's ScaffoldMessenger: a TanreiSnackbarMessenger placed around the page, inside its route, hosts the queue (so a Tanrei dialog's route covers it and SNK-12's wait applies), and TanreiSnackbarMessenger.of(context).show(TanreiSnackbar(...)) returns a controller whose closed future completes with a TanreiSnackbarClosedReason (action, close, escape, timeout, host). showCloseIcon is Flutter's own name for the close button. A running screen reader is MediaQuery.accessibleNavigation (as Flutter's own SnackBar reads it); Android's recommended timeout needs a platform channel, since Flutter does not expose it. Snapshot harness: a golden of TanreiSnackbar rendered in place (SNK-19) in a 400-wide surface. inverse is a bool?, null by default. Not yet: the top-end placement (SNK-35, SNK-36, SNK-37); the expand and close buttons as small Buttons in the form's tone (SNK-34); the title's letter-spacing by the script of its text (SNK-22, PRS-20).	Lagging: ships an earlier form of the snackbar: always an inverse bar, with a text action, no status forms, no title, no expansion and no inverse. TanreiProvider renders the host in its root overlay layer, not in a Modal (a Modal is modal and takes focus); useSnackbar().show({ message, actionLabel, closable, closeLabel, duration }) returns a promise of the result. A Snackbar element rendered directly is drawn in place (SNK-19). Snapshot harness: Snackbar rendered in place in a 400-wide view. inverse is boolean | null | undefined; both null and undefined take the system's choice. Not yet: the top-end placement (SNK-35, SNK-36, SNK-37); the expand and close buttons as small Buttons in the form's tone (SNK-34); the title's letter-spacing by the script of its text (SNK-22, PRS-20).

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-snackbar-action-container-color	comp.snackbar.container.color	#ffffff
--tanrei-comp-snackbar-action-content-color	comp.snackbar.supporting-text.color	#1b1b1b
--tanrei-comp-snackbar-action-error-container-color	comp.snackbar.error.container.color	#ffedeb
--tanrei-comp-snackbar-action-error-content-color	comp.snackbar.error.supporting-text.color	#3a211f
--tanrei-comp-snackbar-action-error-state-layer-color	comp.snackbar.action.error.content.color	#3a211f
--tanrei-comp-snackbar-action-focused-container-color	—	#e8e8e8
--tanrei-comp-snackbar-action-focused-content-color	—	#1b1b1b
--tanrei-comp-snackbar-action-focused-error-container-color	—	#ebd9d7
--tanrei-comp-snackbar-action-focused-error-content-color	—	#3a211f
--tanrei-comp-snackbar-action-focused-error-state-layer-color	—	#3a211f
--tanrei-comp-snackbar-action-focused-info-container-color	—	#d9dceb
--tanrei-comp-snackbar-action-focused-info-content-color	—	#212839
--tanrei-comp-snackbar-action-focused-info-state-layer-color	—	#212839
--tanrei-comp-snackbar-action-focused-inverse-error-container-color	—	#4a312f
--tanrei-comp-snackbar-action-focused-inverse-error-content-color	—	#ffe1df
--tanrei-comp-snackbar-action-focused-inverse-error-state-layer-color	—	#ffe1df
--tanrei-comp-snackbar-action-focused-inverse-info-container-color	—	#303748
--tanrei-comp-snackbar-action-focused-inverse-info-content-color	—	#e1e8ff
--tanrei-comp-snackbar-action-focused-inverse-info-state-layer-color	—	#e1e8ff
--tanrei-comp-snackbar-action-focused-inverse-success-container-color	—	#2b3b2b
--tanrei-comp-snackbar-action-focused-inverse-success-content-color	—	#daeed6
--tanrei-comp-snackbar-action-focused-inverse-success-state-layer-color	—	#daeed6
--tanrei-comp-snackbar-action-focused-inverse-warning-container-color	—	#47341f
--tanrei-comp-snackbar-action-focused-inverse-warning-content-color	—	#ffe3cb
--tanrei-comp-snackbar-action-focused-inverse-warning-state-layer-color	—	#ffe3cb
--tanrei-comp-snackbar-action-focused-inverse-container-color	—	#343434
--tanrei-comp-snackbar-action-focused-inverse-content-color	—	#f1f1f1
--tanrei-comp-snackbar-action-focused-inverse-state-layer-color	—	#f1f1f1
--tanrei-comp-snackbar-action-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-snackbar-action-focused-success-container-color	—	#cee2cc
--tanrei-comp-snackbar-action-focused-success-content-color	—	#1b2c1c
--tanrei-comp-snackbar-action-focused-success-state-layer-color	—	#1b2c1c
--tanrei-comp-snackbar-action-focused-warning-container-color	—	#ebdacb
--tanrei-comp-snackbar-action-focused-warning-content-color	—	#362410
--tanrei-comp-snackbar-action-focused-warning-state-layer-color	—	#362410
--tanrei-comp-snackbar-action-hovered-container-color	—	#ededed
--tanrei-comp-snackbar-action-hovered-content-color	—	#1b1b1b
--tanrei-comp-snackbar-action-hovered-error-container-color	—	#efdddb
--tanrei-comp-snackbar-action-hovered-error-content-color	—	#3a211f
--tanrei-comp-snackbar-action-hovered-error-state-layer-color	—	#3a211f
--tanrei-comp-snackbar-action-hovered-info-container-color	—	#dde0ef
--tanrei-comp-snackbar-action-hovered-info-content-color	—	#212839
--tanrei-comp-snackbar-action-hovered-info-state-layer-color	—	#212839
--tanrei-comp-snackbar-action-hovered-inverse-error-container-color	—	#462d2b
--tanrei-comp-snackbar-action-hovered-inverse-error-content-color	—	#ffe1df
--tanrei-comp-snackbar-action-hovered-inverse-error-state-layer-color	—	#ffe1df
--tanrei-comp-snackbar-action-hovered-inverse-info-container-color	—	#2c3344
--tanrei-comp-snackbar-action-hovered-inverse-info-content-color	—	#e1e8ff
--tanrei-comp-snackbar-action-hovered-inverse-info-state-layer-color	—	#e1e8ff
--tanrei-comp-snackbar-action-hovered-inverse-success-container-color	—	#273727
--tanrei-comp-snackbar-action-hovered-inverse-success-content-color	—	#daeed6
--tanrei-comp-snackbar-action-hovered-inverse-success-state-layer-color	—	#daeed6
--tanrei-comp-snackbar-action-hovered-inverse-warning-container-color	—	#42301b
--tanrei-comp-snackbar-action-hovered-inverse-warning-content-color	—	#ffe3cb
--tanrei-comp-snackbar-action-hovered-inverse-warning-state-layer-color	—	#ffe3cb
--tanrei-comp-snackbar-action-hovered-inverse-container-color	—	#303030
--tanrei-comp-snackbar-action-hovered-inverse-content-color	—	#f1f1f1
--tanrei-comp-snackbar-action-hovered-inverse-state-layer-color	—	#f1f1f1
--tanrei-comp-snackbar-action-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-snackbar-action-hovered-success-container-color	—	#d2e6cf
--tanrei-comp-snackbar-action-hovered-success-content-color	—	#1b2c1c
--tanrei-comp-snackbar-action-hovered-success-state-layer-color	—	#1b2c1c
--tanrei-comp-snackbar-action-hovered-warning-container-color	—	#efdecf
--tanrei-comp-snackbar-action-hovered-warning-content-color	—	#362410
--tanrei-comp-snackbar-action-hovered-warning-state-layer-color	—	#362410
--tanrei-comp-snackbar-action-info-container-color	comp.snackbar.info.container.color	#edf0ff
--tanrei-comp-snackbar-action-info-content-color	comp.snackbar.info.supporting-text.color	#212839
--tanrei-comp-snackbar-action-info-state-layer-color	comp.snackbar.action.info.content.color	#212839
--tanrei-comp-snackbar-action-inverse-error-container-color	comp.snackbar.inverse-error.container.color	#361d1b
--tanrei-comp-snackbar-action-inverse-error-content-color	comp.snackbar.inverse-error.supporting-text.color	#ffe1df
--tanrei-comp-snackbar-action-inverse-error-state-layer-color	comp.snackbar.action.inverse-error.content.color	#ffe1df
--tanrei-comp-snackbar-action-inverse-info-container-color	comp.snackbar.inverse-info.container.color	#1c2334
--tanrei-comp-snackbar-action-inverse-info-content-color	comp.snackbar.inverse-info.supporting-text.color	#e1e8ff
--tanrei-comp-snackbar-action-inverse-info-state-layer-color	comp.snackbar.action.inverse-info.content.color	#e1e8ff
--tanrei-comp-snackbar-action-inverse-success-container-color	comp.snackbar.inverse-success.container.color	#172718
--tanrei-comp-snackbar-action-inverse-success-content-color	comp.snackbar.inverse-success.supporting-text.color	#daeed6
--tanrei-comp-snackbar-action-inverse-success-state-layer-color	comp.snackbar.action.inverse-success.content.color	#daeed6
--tanrei-comp-snackbar-action-inverse-warning-container-color	comp.snackbar.inverse-warning.container.color	#32200c
--tanrei-comp-snackbar-action-inverse-warning-content-color	comp.snackbar.inverse-warning.supporting-text.color	#ffe3cb
--tanrei-comp-snackbar-action-inverse-warning-state-layer-color	comp.snackbar.action.inverse-warning.content.color	#ffe3cb
--tanrei-comp-snackbar-action-inverse-container-color	comp.snackbar.inverse.container.color	#1f1f1f
--tanrei-comp-snackbar-action-inverse-content-color	comp.snackbar.inverse.supporting-text.color	#f1f1f1
--tanrei-comp-snackbar-action-inverse-state-layer-color	comp.snackbar.action.inverse.content.color	#f1f1f1
--tanrei-comp-snackbar-action-pressed-container-color	—	#e8e8e8
--tanrei-comp-snackbar-action-pressed-content-color	—	#1b1b1b
--tanrei-comp-snackbar-action-pressed-error-container-color	—	#ebd9d7
--tanrei-comp-snackbar-action-pressed-error-content-color	—	#3a211f
--tanrei-comp-snackbar-action-pressed-error-state-layer-color	—	#3a211f
--tanrei-comp-snackbar-action-pressed-info-container-color	—	#d9dceb
--tanrei-comp-snackbar-action-pressed-info-content-color	—	#212839
--tanrei-comp-snackbar-action-pressed-info-state-layer-color	—	#212839
--tanrei-comp-snackbar-action-pressed-inverse-error-container-color	—	#4a312f
--tanrei-comp-snackbar-action-pressed-inverse-error-content-color	—	#ffe1df
--tanrei-comp-snackbar-action-pressed-inverse-error-state-layer-color	—	#ffe1df
--tanrei-comp-snackbar-action-pressed-inverse-info-container-color	—	#303748
--tanrei-comp-snackbar-action-pressed-inverse-info-content-color	—	#e1e8ff
--tanrei-comp-snackbar-action-pressed-inverse-info-state-layer-color	—	#e1e8ff
--tanrei-comp-snackbar-action-pressed-inverse-success-container-color	—	#2b3b2b
--tanrei-comp-snackbar-action-pressed-inverse-success-content-color	—	#daeed6
--tanrei-comp-snackbar-action-pressed-inverse-success-state-layer-color	—	#daeed6
--tanrei-comp-snackbar-action-pressed-inverse-warning-container-color	—	#47341f
--tanrei-comp-snackbar-action-pressed-inverse-warning-content-color	—	#ffe3cb
--tanrei-comp-snackbar-action-pressed-inverse-warning-state-layer-color	—	#ffe3cb
--tanrei-comp-snackbar-action-pressed-inverse-container-color	—	#343434
--tanrei-comp-snackbar-action-pressed-inverse-content-color	—	#f1f1f1
--tanrei-comp-snackbar-action-pressed-inverse-state-layer-color	—	#f1f1f1
--tanrei-comp-snackbar-action-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-snackbar-action-pressed-success-container-color	—	#cee2cc
--tanrei-comp-snackbar-action-pressed-success-content-color	—	#1b2c1c
--tanrei-comp-snackbar-action-pressed-success-state-layer-color	—	#1b2c1c
--tanrei-comp-snackbar-action-pressed-warning-container-color	—	#ebdacb
--tanrei-comp-snackbar-action-pressed-warning-content-color	—	#362410
--tanrei-comp-snackbar-action-pressed-warning-state-layer-color	—	#362410
--tanrei-comp-snackbar-action-state-layer-color	comp.snackbar.action.content.color	#1b1b1b
--tanrei-comp-snackbar-action-success-container-color	comp.snackbar.success.container.color	#e2f6df
--tanrei-comp-snackbar-action-success-content-color	comp.snackbar.success.supporting-text.color	#1b2c1c
--tanrei-comp-snackbar-action-success-state-layer-color	comp.snackbar.action.success.content.color	#1b2c1c
--tanrei-comp-snackbar-action-tonal-layer-opacity	—	0.12
--tanrei-comp-snackbar-action-warning-container-color	comp.snackbar.warning.container.color	#ffeee0
--tanrei-comp-snackbar-action-warning-content-color	comp.snackbar.warning.supporting-text.color	#362410
--tanrei-comp-snackbar-action-warning-state-layer-color	comp.snackbar.action.warning.content.color	#362410
--tanrei-comp-snackbar-breakpoint-medium	sys.breakpoint.medium	600px
--tanrei-comp-snackbar-close-button-variant	—	1
--tanrei-comp-snackbar-container-color	sys.color.surface-bright	#ffffff
--tanrei-comp-snackbar-container-elevation	sys.elevation.level3	0px 0px 0px 1px rgb(0 0 0 / 0.08), 0px 1px 1px 0px rgb(0 0 0 / 0.04), 0px 4px 8px -4px rgb(0 0 0 / 0.04), 0px 16px 24px -8px rgb(0 0 0 / 0.06)
--tanrei-comp-snackbar-container-gap	sys.space.space100	8px
--tanrei-comp-snackbar-container-inverse	—	0
--tanrei-comp-snackbar-container-margin	sys.space.space200	16px
--tanrei-comp-snackbar-container-max-width	—	560px
--tanrei-comp-snackbar-container-min-height	—	48px
--tanrei-comp-snackbar-container-min-width	—	288px
--tanrei-comp-snackbar-container-padding-block	sys.space.space150	12px
--tanrei-comp-snackbar-container-padding-inline-end	sys.space.space200	16px
--tanrei-comp-snackbar-container-padding-inline-end-with-controls	sys.space.space100	8px
--tanrei-comp-snackbar-container-padding-inline-start	sys.space.space200	16px
--tanrei-comp-snackbar-container-shape	sys.shape.corner.medium	8px
--tanrei-comp-snackbar-controls-gap	sys.space.space50	4px
--tanrei-comp-snackbar-controls-height	comp.button.container.height.small	32px
--tanrei-comp-snackbar-controls-padding-inline	sys.space.space175	14px
--tanrei-comp-snackbar-controls-shape	sys.shape.corner.full	9999px
--tanrei-comp-snackbar-error-container-color	sys.color.error-container	#ffedeb
--tanrei-comp-snackbar-error-focus-ring-color	sys.color.on-error-container	#3a211f
--tanrei-comp-snackbar-error-icon-color	sys.color.error	#cd262f
--tanrei-comp-snackbar-error-outline-color	sys.color.error	#cd262f
--tanrei-comp-snackbar-error-supporting-text-color	sys.color.on-error-container	#3a211f
--tanrei-comp-snackbar-error-title-color	comp.snackbar.error.supporting-text.color	#3a211f
--tanrei-comp-snackbar-focus-ring-color	sys.color.focus-ring	#0070ac
--tanrei-comp-snackbar-focused-opacity	—	1
--tanrei-comp-snackbar-hovered-opacity	—	1
--tanrei-comp-snackbar-icon-gap	sys.space.space150	12px
--tanrei-comp-snackbar-icon-opacity	—	0.85
--tanrei-comp-snackbar-icon-size	sys.icon.medium	24px
--tanrei-comp-snackbar-info-container-color	sys.color.info-container	#edf0ff
--tanrei-comp-snackbar-info-focus-ring-color	sys.color.on-info-container	#212839
--tanrei-comp-snackbar-info-icon-color	sys.color.info	#3066cb
--tanrei-comp-snackbar-info-outline-color	sys.color.info	#3066cb
--tanrei-comp-snackbar-info-supporting-text-color	sys.color.on-info-container	#212839
--tanrei-comp-snackbar-info-title-color	comp.snackbar.info.supporting-text.color	#212839
--tanrei-comp-snackbar-inverse-error-container-color	sys.color.on-error-container	#361d1b
--tanrei-comp-snackbar-inverse-error-focus-ring-color	comp.snackbar.inverse-error.supporting-text.color	#ffe1df
--tanrei-comp-snackbar-inverse-error-icon-color	comp.snackbar.inverse-error.supporting-text.color	#ff928c
--tanrei-comp-snackbar-inverse-error-outline-color	sys.color.error	#ff928c
--tanrei-comp-snackbar-inverse-error-supporting-text-color	sys.color.error-container	#ffe1df
--tanrei-comp-snackbar-inverse-error-title-color	comp.snackbar.inverse-error.supporting-text.color	#ffe1df
--tanrei-comp-snackbar-inverse-info-container-color	sys.color.on-info-container	#1c2334
--tanrei-comp-snackbar-inverse-info-focus-ring-color	comp.snackbar.inverse-info.supporting-text.color	#e1e8ff
--tanrei-comp-snackbar-inverse-info-icon-color	comp.snackbar.inverse-info.supporting-text.color	#8eafff
--tanrei-comp-snackbar-inverse-info-outline-color	sys.color.info	#8eafff
--tanrei-comp-snackbar-inverse-info-supporting-text-color	sys.color.info-container	#e1e8ff
--tanrei-comp-snackbar-inverse-info-title-color	comp.snackbar.inverse-info.supporting-text.color	#e1e8ff
--tanrei-comp-snackbar-inverse-success-container-color	sys.color.on-success-container	#172718
--tanrei-comp-snackbar-inverse-success-focus-ring-color	comp.snackbar.inverse-success.supporting-text.color	#daeed6
--tanrei-comp-snackbar-inverse-success-icon-color	comp.snackbar.inverse-success.supporting-text.color	#62c572
--tanrei-comp-snackbar-inverse-success-outline-color	sys.color.success	#62c572
--tanrei-comp-snackbar-inverse-success-supporting-text-color	sys.color.success-container	#daeed6
--tanrei-comp-snackbar-inverse-success-title-color	comp.snackbar.inverse-success.supporting-text.color	#daeed6
--tanrei-comp-snackbar-inverse-warning-container-color	sys.color.on-warning-container	#32200c
--tanrei-comp-snackbar-inverse-warning-focus-ring-color	comp.snackbar.inverse-warning.supporting-text.color	#ffe3cb
--tanrei-comp-snackbar-inverse-warning-icon-color	comp.snackbar.inverse-warning.supporting-text.color	#f39e3a
--tanrei-comp-snackbar-inverse-warning-outline-color	sys.color.warning	#f39e3a
--tanrei-comp-snackbar-inverse-warning-supporting-text-color	sys.color.warning-container	#ffe3cb
--tanrei-comp-snackbar-inverse-warning-title-color	comp.snackbar.inverse-warning.supporting-text.color	#ffe3cb
--tanrei-comp-snackbar-inverse-container-color	sys.color.inverse-surface	#1f1f1f
--tanrei-comp-snackbar-inverse-focus-ring-color	sys.color.inverse-on-surface	#f1f1f1
--tanrei-comp-snackbar-inverse-supporting-text-color	sys.color.inverse-on-surface	#f1f1f1
--tanrei-comp-snackbar-inverse-title-color	comp.snackbar.inverse.supporting-text.color	#f1f1f1
--tanrei-comp-snackbar-motion-enter-duration	sys.motion.role.appear.toast.enter	350ms
--tanrei-comp-snackbar-motion-enter-easing	sys.motion.easing.enter	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-snackbar-motion-exit-duration	sys.motion.role.appear.toast.exit	300ms
--tanrei-comp-snackbar-motion-exit-easing	sys.motion.easing.exit	cubic-bezier(0.3, 0, 1, 1)
--tanrei-comp-snackbar-motion-expand-duration	sys.motion.role.resize.large	400ms
--tanrei-comp-snackbar-motion-expand-easing	sys.motion.easing.spatial	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-snackbar-motion-feedback-duration	sys.motion.role.feedback	450ms
--tanrei-comp-snackbar-motion-state-duration	sys.motion.role.state.default	250ms
--tanrei-comp-snackbar-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-snackbar-outline-opacity	—	0.4
--tanrei-comp-snackbar-outline-width	sys.border.hairline	1px
--tanrei-comp-snackbar-pressed-opacity	—	1
--tanrei-comp-snackbar-success-container-color	sys.color.success-container	#e2f6df
--tanrei-comp-snackbar-success-focus-ring-color	sys.color.on-success-container	#1b2c1c
--tanrei-comp-snackbar-success-icon-color	sys.color.success	#077b32
--tanrei-comp-snackbar-success-outline-color	sys.color.success	#077b32
--tanrei-comp-snackbar-success-supporting-text-color	sys.color.on-success-container	#1b2c1c
--tanrei-comp-snackbar-success-title-color	comp.snackbar.success.supporting-text.color	#1b2c1c
--tanrei-comp-snackbar-supporting-text-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-snackbar-supporting-text-max-lines	—	3
--tanrei-comp-snackbar-supporting-text-under-title-opacity	—	0.8
--tanrei-comp-snackbar-timeout-long	—	10000ms
--tanrei-comp-snackbar-timeout-short	—	4000ms
--tanrei-comp-snackbar-title-color	comp.snackbar.supporting-text.color	#1b1b1b
--tanrei-comp-snackbar-title-gap	sys.space.space50	4px
--tanrei-comp-snackbar-title-max-lines	—	3
--tanrei-comp-snackbar-warning-container-color	sys.color.warning-container	#ffeee0
--tanrei-comp-snackbar-warning-focus-ring-color	sys.color.on-warning-container	#362410
--tanrei-comp-snackbar-warning-icon-color	sys.color.warning	#9b5c00
--tanrei-comp-snackbar-warning-outline-color	sys.color.warning	#9b5c00
--tanrei-comp-snackbar-warning-supporting-text-color	sys.color.on-warning-container	#362410
--tanrei-comp-snackbar-warning-title-color	comp.snackbar.warning.supporting-text.color	#362410
--tanrei-comp-snackbar-controls-label-typescale	sys.typescale.label	500 14px/1.4286
--tanrei-comp-snackbar-supporting-text-typescale	sys.typescale.body	400 14px/1.5714
--tanrei-comp-snackbar-title-typescale	sys.typescale.heading-6	500 14px/1.4286

फ़िक्स्चर

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

message

message: Photo saved

action

message: Conversation archived action: Undo

closable

message: Connected to the office printer closable: true closeLabel: Close

action-closable

message: Conversation archived action: Undo closable: true closeLabel: Close

two-lines

message: Your changes were saved, but the shared… action: Retry

action-own-row

message: Three files could not be uploaded becaus… action: Review files that failed

title

message: The draft was moved to the bin. title: Draft deleted action: Undo

info

message: Restart the app to finish installing it. title: Update ready status: info statusLabel: Information closable: true closeLabel: Close

warning

message: Only 200 MB is left on this device. title: Storage almost full action: Manage status: warning statusLabel: Warning

error

message: Check your connection and try again. title: Message not sent action: Retry status: error statusLabel: Error closable: true closeLabel: Close

success

message: Backup finished status: success statusLabel: Success

collapsed

message: Twelve photos from the trip to Kyoto cou… title: Some photos were not uploaded closable: true closeLabel: Close expandLabel: Show full message

expanded

message: Twelve photos from the trip to Kyoto cou… title: Some photos were not uploaded closable: true closeLabel: Close expanded: true expandLabel: Show full message 400 × 253 की विंडो में अलग से बनाया गया

expanded-scrolls

message: Twelve photos from the trip to Kyoto cou… title: Some photos were not uploaded action: Review status: warning statusLabel: Warning closable: true closeLabel: Close expanded: true expandLabel: Show full message 400 × 241 की विंडो में अलग से बनाया गया

inverse

message: Conversation archived action: Undo inverse: true closable: true closeLabel: Close

inverse-info

message: Restart the app to finish installing it. title: Update ready action: Restart status: info statusLabel: Information inverse: true closable: true closeLabel: Close

inverse-warning

message: Only 200 MB is left on this device. title: Storage almost full action: Manage status: warning statusLabel: Warning inverse: true closable: true closeLabel: Close

inverse-error

message: Check your connection and try again. title: Message not sent action: Retry status: error statusLabel: Error inverse: true closable: true closeLabel: Close

inverse-success

message: Everything on this device is saved. title: Backup finished action: View status: success statusLabel: Success inverse: true closable: true closeLabel: Close

inverse-expanded

message: Twelve photos from the trip to Kyoto cou… title: Some photos were not uploaded inverse: true closable: true closeLabel: Close expanded: true expandLabel: Show full message 400 × 253 की विंडो में अलग से बनाया गया

top-end

message: Report exported to Downloads action: Open closable: true closeLabel: Close placement: top-end

top-end-rtl

message: Report exported to Downloads action: Open closable: true closeLabel: Close placement: top-end direction: rtl

top-end-compact

message: Report exported to Downloads action: Open closable: true closeLabel: Close placement: top-end

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

दिशानिर्देश

link

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

link

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

स्नैकबार बताता है; पूछता नहीं। दो क्रियाओं के बीच का चुनाव, व्यक्ति के काम को रोकने वाली त्रुटि, या ऐसी कोई भी चीज़ जिसे व्यक्ति को स्वीकार करना ज़रूरी है, डायलॉग में या उस चीज़ के पास जाती है जिसके बारे में वह है। त्रुटि वाला रूप उस विफलता के लिए है जिस पर व्यक्ति बाद में लौट सकता है, जैसे “फिर कोशिश करें” के साथ “संदेश नहीं भेजा गया”।

स्नैकबार या डायलॉग

link

दोनों पेज के ऊपर दिखते हैं, पर दोनों के काम एक-दूसरे से उलटे हैं।

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

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

भाग

link

भाग	किससे सेट होता है	टिप्पणी
बार	inverse	डिफ़ॉल्ट रूप से स्कीम की एक उठी हुई सरफ़ेस, या उलटी स्कीम के रंग; सरफ़ेस पर, या इनवर्स देखें।
स्थिति ग्लिफ़	status और statusLabel	वैकल्पिक। स्थिति वाला रूप अपना ग्लिफ़ टेक्स्ट से पहले बनाता है; स्थिति वाले रूप देखें।
शीर्षक	title (वेब पर headline)	वैकल्पिक। संदेश के ऊपर एक छोटी हेडिंग, संदेश के ही साइज़ की भारी स्टाइल में। इसके बिना संदेश अकेला रहता है।
संदेश	message	ज़रूरी। सादा टेक्स्ट, एक या दो छोटे वाक्य, जो पूरा पढ़कर सुनाया जाता है। शीर्षक के साथ यह विवरण है, और शीर्षक से थोड़ा हल्का बनता है।
क्रिया	action (लेबल)	वैकल्पिक: “पहले जैसा करें”, “देखें”, “फिर कोशिश करें”। tonal बटन के रूप में बनती है: एक पिल, जो अपने बार से एक हल्का स्टेप अलग है और जिसका लेबल बार के टेक्स्ट के रंग में है। स्नैकबार इसे अपने टोकन से बनाता है, Button के रूप में नहीं, और इसकी ऊँचाई बग़ल के small Button जितनी रखता है। जब टेक्स्ट को इसके बग़ल में दो से ज़्यादा पंक्तियाँ चाहिए हों, शीर्षक और संदेश की पंक्तियाँ साथ गिनकर, या जब इसका लेबल अगली पंक्ति में जाने लगे, तब यह अपनी अलग पंक्ति में चली जाती है।
फैलाने वाला बटन	expandLabel, expanded	सिर्फ़ आइकन वाला small Button, जो बंद करने वाले बटन की तरह बनता है। सिर्फ़ तब बनता है जब शीर्षक या संदेश तीन पंक्तियों से लंबा हो। expandLabel इसका एक्सेसिबल नाम है, जैसे “पूरा संदेश दिखाएँ”।
बंद करने वाला बटन	closable और closeLabel	वैकल्पिक। सिर्फ़ आइकन वाला small Button। उस संदेश के लिए जो बंद किए जाने तक रहता है, या जिसे लोग शायद जल्दी हटाना चाहें। closeLabel इसका एक्सेसिबल नाम है, आपके प्रॉडक्ट की भाषा में।

क्रिया, फैलाने वाला बटन और बंद करने वाला बटन टेक्स्ट की पहली पंक्ति के बग़ल में रहते हैं, और तीनों एक small Button जितने ऊँचे हैं।

फैलाने वाला और बंद करने वाला बटन

link

फैलाने वाला और बंद करने वाला बटन सिर्फ़ आइकन वाले small Button हैं, जिनमें आइकन सेट के expand_more, expand_less और close ग्लिफ़ हैं। Tanrei के हर बंद करने वाले बटन की तरह ये tonal हैं, और अपना रंग बार से लेते हैं: ग्लिफ़ बार के टेक्स्ट के रंग में होता है, और उसके नीचे उसी रंग को पारदर्शी करके एक गोला बिछा होता है। इसलिए ये हर रूप पर कंट्रोल की तरह पढ़े जाते हैं, चाहे सरफ़ेस हो, किसी स्थिति का टिंट हो या इनवर्स बार, और कभी ऐसा रंग नहीं लाते जो बार में पहले से न हो। इनका होवर, फ़ोकस और दबाना Button का है, उसी रंग के ऊपर, और इनकी फ़ोकस रिंग बार का अपना फ़ोकस रंग है।

कोई प्रॉडक्ट इन्हें सिर्फ़ ग्लिफ़ के रूप में भी बना सकता है। वह यह एक बार, हर स्नैकबार के लिए, अपनी डिज़ाइन सिस्टम लेयर में comp.snackbar.close-button.variant को text variant देकर करता है; Material और Cupertino प्रीसेट ठीक यही करते हैं, ताकि उनके मूल डिज़ाइन का सिर्फ़ ग्लिफ़ वाला रूप बना रहे।

क्रिया

link

क्रिया एक tonal बटन है जो अपने बार पर रहता है। उसका कंटेनर बार का अपना रंग है जिसके ऊपर लेबल के रंग की एक हल्की लेयर है, इसलिए वह हर रूप में बार से वही एक हल्का स्टेप अलग रहता है: सरफ़ेस पर हो या इनवर्स, स्थिति के साथ हो या उसके बिना। लेबल बार के टेक्स्ट के रंग का होता है।

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

इसे कभी filled बटन न बनाएँ। जो क्रिया इतनी महत्वपूर्ण है कि उसके लिए filled बटन ठीक लगे, उसकी जगह स्नैकबार में नहीं है, जो ग़ायब हो जाता है और फ़ोकस के क्रम में सबसे आख़िर में मिलता है। उसे इसकी जगह स्क्रीन की मुख्य क्रिया के पीछे, एक बॉटम शीट में रखें।

कोई प्रॉडक्ट क्रिया को दूसरा रूप दे सकता है। वह ऐसा एक बार, हर स्नैकबार के लिए, अपनी डिज़ाइन सिस्टम लेयर में करता है, क्रिया के रंग वाले टोकन और उसकी tonal लेयर की ओपैसिटी को दूसरे मान देकर; हर स्नैकबार के लिए अलग वेरिएंट नहीं होता। Material और Cupertino प्रीसेट ठीक यही करते हैं, ताकि उनके मूल सिस्टम की text क्रिया बनी रहे।

स्थिति वाले रूप

link

status	ग्लिफ़	कैसे पढ़कर सुनाया जाता है	किसके लिए
default	कोई नहीं	बिना टोके (polite)	ज़्यादातर संदेश: ऐप ने अभी क्या किया।
info	info	बिना टोके	जानने लायक़ कोई बात जो व्यक्ति की क्रिया का नतीजा नहीं है।
success	check_circle	बिना टोके	वह काम जो ठीक से पूरा हुआ, जब व्यक्ति उसका इंतज़ार कर रहा था।
warning	warning	ज़ोर देकर	ऐसी चीज़ जो बिगड़ सकती है अगर व्यक्ति कुछ न करे।
error	error	ज़ोर देकर	वह विफलता जिस पर व्यक्ति बाद में लौट सकता है, ऐसी क्रिया के साथ जो फिर कोशिश करे या कारण बताए।

स्थिति वाले रूप: info, success, warning और error

स्थिति वाला रूप अपने बार को उस स्थिति के हल्के टिंट में बनाता है, उसके चारों ओर स्थिति के रंग की बारीक रेखा वाले किनारे के साथ, और टेक्स्ट से पहले उसी रंग में स्थिति के ग्लिफ़ के साथ। किनारा कोई जगह नहीं लेता। डिफ़ॉल्ट रूप का अपना कोई किनारा नहीं होता, सिर्फ़ वह जो उसका एलिवेशन बनाता है। स्थिति वाला रूप कभी सिर्फ़ रंग से नहीं पहचाना जाता: ग्लिफ़ का आकार रूपों को एक-दूसरे से अलग करता है, और statusLabel स्थिति को शब्दों में देता है, आपके प्रॉडक्ट की भाषा में (“त्रुटि”)। लेबल शीर्षक और संदेश से पहले पढ़ा जाता है। warning और error उस चीज़ को बीच में रोकते हैं जो पढ़ी जा रही है; बाक़ी रूप उसके पूरा होने का इंतज़ार करते हैं।

सरफ़ेस पर, या इनवर्स

link

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

इनवर्स बने हुए: डिफ़ॉल्ट रूप और स्थिति वाले चार रूप

inverse	क्या बनता है
सेट नहीं (null, डिफ़ॉल्ट)	जैसा डिज़ाइन सिस्टम चुने। डिफ़ॉल्ट सिस्टम सरफ़ेस चुनता है; m3-like प्रीसेट इनवर्स चुनता है।
true	इनवर्स।
false	सरफ़ेस पर, उस सिस्टम में भी जिसका चुनाव इनवर्स है।

वेब पर ऐट्रिब्यूट बताता है कि तीनों में से कौन-सा है: छोड़ देने पर वह सेट नहीं है, inverse true है, और inverse="false" false है। show() inverse को एक विकल्प के रूप में लेता है।

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

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

लंबा टेक्स्ट

link

सिमटा हुआ रहने पर शीर्षक और संदेश, दोनों ज़्यादा से ज़्यादा तीन-तीन पंक्तियाँ दिखाते हैं, और जहाँ वे कटते हैं वहाँ एलिप्सिस के साथ ख़त्म होते हैं। तब क्रिया और बंद करने वाले बटन के बीच एक फैलाने वाला बटन दिखता है। उसे सक्रिय करने पर पूरा टेक्स्ट दिखता है, expanded के नए मान के साथ toggle एमिट होता है (वेब पर expandedchange), फ़ोकस बटन पर ही रहता है और स्नैकबार बंद नहीं होता। बार अपने निचले किनारे से ऊपर की ओर बढ़ता है (ऊपर अंतिम छोर पर रखे जाने पर अपने ऊपरी किनारे से नीचे की ओर), और जहाँ मोशन कम किया गया है वहाँ तुरंत। उसका कॉन्टेंट ऊपरी किनारे की सीध में रहता है, इसलिए बार के बढ़ने या घटने पर ग्लिफ़, पहली पंक्ति और उसके बग़ल के कंट्रोल ऊपरी किनारे से अपनी दूरी बनाए रखते हैं, और अपनी अलग पंक्ति वाली क्रिया निचले किनारे से अपनी दूरी बनाए रखती है। आपका कोड भी expanded सेट कर सकता है, जिससे कुछ एमिट नहीं होता।

अगर फैला हुआ टेक्स्ट अब भी उस जगह से ऊँचा है जो होस्ट के पास है, तो बार वही ऊँचाई लेता है और उसका टेक्स्ट उसके भीतर स्क्रॉल होता है, जबकि ग्लिफ़ और कंट्रोल अपनी जगह रहते हैं। सहायक तकनीक को हमेशा पूरा टेक्स्ट मिलता है, चाहे वह कटा हो या नहीं।

स्थान

link

placement	बार कहाँ होता है	किसके लिए
bottom (डिफ़ॉल्ट)	विंडो में सबसे नीचे, बीच में, निचले किनारे से एक मार्जिन ऊपर।	ज़्यादातर प्रॉडक्ट, और फ़ोन पर हर प्रॉडक्ट।
top-end	विंडो में सबसे ऊपर, अंतिम छोर की ओर: ऊपर दाईं ओर, या दाएँ-से-बाएँ लेआउट में ऊपर बाईं ओर। कॉम्पैक्ट विंडो में (डिफ़ॉल्ट सिस्टम में 600 से कम चौड़ी) यह इसके बजाय ऊपर पूरी चौड़ाई में होता है।	किसी बिज़नेस ऐप्लिकेशन की डेस्कटॉप स्क्रीनें, जहाँ स्क्रीन का निचला हिस्सा ही काम की जगह है।

पूरे प्रॉडक्ट के लिए एक जगह चुनें और उसे होस्ट को दें, ताकि लोग सीख सकें कि संदेश कहाँ दिखते हैं: <tanrei-snackbar-host> पर placement उसके दिखाए हर स्नैकबार पर लागू होता है, और जिस स्नैकबार को उसके अपने placement के साथ माँगा गया हो, वह अपना रखता है। फ़ोन पर नीचे ही रखें, जहाँ Material स्नैकबार रखता है और जहाँ अँगूठा होता है। किसी बिज़नेस ऐप्लिकेशन की डेस्कटॉप स्क्रीनों पर, जैसे डैशबोर्ड, एडमिन कंसोल, या ऐसा एडिटर जिसका अपना टूलबार, स्टेटस बार या टेबल का पेजिनेशन नीचे हो, top-end का इस्तेमाल करें, जहाँ Carbon और Fluent अपनी सूचनाएँ रखते हैं।

ऊपर अंतिम छोर पर बार ऊपरी किनारे और अंतिम किनारे से एक मार्जिन छोड़कर, सेफ़ एरिया के भीतर और स्टिकी हेडर के नीचे होता है, ताकि वह ऊपरी ऐप बार को कभी न ढके। वेब पर यह हेडर की ऊँचाई --tanrei-app-shell-scroll-offset से पढ़ता है, जिसे ऐप शेल डॉक्यूमेंट के रूट पर सेट करता है; जिस प्रॉडक्ट का अपना फ़्रेम है, वह इस प्रॉपर्टी को अपने स्टिकी हेडर की ऊँचाई पर सेट करता है। यह नीचे से उठने के बजाय ऊपरी किनारे के ऊपर से उतरकर आता है, और फैला हुआ बार नीचे की ओर बढ़ता है। इसके अलावा कुछ नहीं बदलता: एक समय में फिर भी एक ही स्नैकबार होता है और कभी ढेर नहीं बनता, उसके कंट्रोल फिर भी फ़ोकस क्रम में होस्ट की जगह पर पहुँचे जाते हैं, और उसे उसी तरह पढ़कर सुनाया जाता है।

<!-- यह होस्ट जो भी स्नैकबार दिखाता है, वह ऊपर अंतिम छोर पर होता है। -->
<tanrei-snackbar-host placement="top-end"></tanrei-snackbar-host>

<script type="module">
  const snackbars = document.querySelector('tanrei-snackbar-host');
  snackbars.show({ message: 'Report exported', action: 'Open' });
  // नीचे माँगा गया एक स्नैकबार अपनी जगह रखता है।
  snackbars.show({ message: 'Photo saved', placement: 'bottom' });
</script>

<SnackbarHost ref={snackbars} placement="top-end" />

SwiftUI, Compose, Flutter और React Native में अभी ऊपर अंतिम छोर वाली जगह नहीं है: उनके स्नैकबार नीचे होते हैं।

अवधि

link

duration	यह अपने आप कितनी देर रहता है
auto (डिफ़ॉल्ट)	क्रिया के बिना short। क्रिया के साथ इसका टाइमआउट कभी नहीं होता, इसलिए समय ख़त्म होने से किसी के हाथ से क्रिया नहीं निकलती (WCAG 2.2.1)।
short	छोटे टाइमआउट के बाद बंद होता है (डिफ़ॉल्ट सिस्टम में 4 सेकंड)।
long	लंबे टाइमआउट के बाद बंद होता है (डिफ़ॉल्ट सिस्टम में 10 सेकंड)।
indefinite	तब तक रहता है जब तक व्यक्ति या आपका कोड इसे बंद न करे।

समय वाला स्नैकबार तब रुका रहता है जब पॉइंटर उसके ऊपर हो, जब फ़ोकस उसके भीतर हो, जब वह फैला हुआ हो, जब ऐप छिपा हो या बैकग्राउंड में हो, और जब Tanrei का कोई मोडल डायलॉग उसे ढके हो। इसके बाद वह अपनी पूरी अवधि से फिर शुरू होता है। Android का एक्सेसिबिलिटी टाइमआउट जब ज़्यादा लंबा हो, तो वह इसे लंबा कर देता है, और स्क्रीन रीडर के चलते रहने पर क्रिया वाले स्नैकबार का टाइमआउट कभी नहीं होता। अगर आप क्रिया वाले स्नैकबार पर टाइमआउट लगाते हैं, तो वही क्रिया कहीं और भी दें, जैसे किसी मेन्यू में “पहले जैसा करें”। डीबग बिल्ड आपको याद दिलाते हैं।

दिखना, फ़ोकस और बंद होना

link

स्नैकबार पढ़ा जाने वाला ओवरले है। लोग उसका संदेश पढ़-समझ लेते हैं, इसलिए उसे दिखाने से फ़ोकस कभी नहीं हिलता।

• एक समय में एक। होस्ट स्नैकबार उसी क्रम में दिखाता है जिसमें उनका अनुरोध हुआ था। अगला तब तक इंतज़ार करता है जब तक पिछला फ़ेड होकर चला न जाए। Tanrei के किसी मोडल डायलॉग के खुला रहते माँगा गया स्नैकबार डायलॉग के बंद होने तक इंतज़ार करता है।
• स्थान। नीचे बीच में, निचले किनारे से ऊपर और दोनों ओर से एक मार्जिन छोड़कर, सेफ़ एरिया के भीतर और ऑन-स्क्रीन कीबोर्ड के ऊपर; या placement="top-end" होने पर ऊपर अंतिम छोर पर, स्टिकी हेडर के नीचे (स्थान देखें)। दोनों ही तरह यह अपने क्षेत्र के कॉन्टेंट के ऊपर, और मोडल डायलॉग और उसके स्क्रिम के नीचे बनता है।
• पढ़कर सुनाया जाना। इसके दिखने पर सहायक तकनीक स्थिति लेबल, शीर्षक और संदेश एक बार पढ़ती है, और उसके बाद क्रिया का लेबल: बिना टोके, यानी जो पढ़ा जा रहा है उसके बाद, या warning और error के लिए ज़ोर देकर। कोई भी चीज़ कीबोर्ड या स्क्रीन रीडर का फ़ोकस नहीं लेती।
• फ़ोकस। क्रिया, फैलाने वाले बटन और बंद करने वाले बटन तक Tab से, फ़ोकस के क्रम में होस्ट की जगह पर पहुँचा जाता है, और इसीलिए होस्ट सबसे आख़िर में रखा जाता है। बार ख़ुद Tab स्टॉप नहीं है, सिवाय उसके टेक्स्ट के, जब फैला हुआ बार उसे स्क्रॉल करता है।
• बंद होना। स्नैकबार तब बंद होता है जब उसकी क्रिया सक्रिय की जाती है (action), या उसके बिना (dismiss), इनमें से किसी एक कारण से:

कारण	कब
close	बंद करने वाला बटन सक्रिय किया गया।
escape	फ़ोकस के स्नैकबार के भीतर रहते Escape दबाई गई।
timeout	short या long स्नैकबार का समय ख़त्म हो गया।
host	आपके कोड ने उसे बंद किया या क़तार ख़ाली की।

• फ़ोकस की वापसी। जब स्नैकबार ऐसे समय बंद होता है कि फ़ोकस उसके भीतर है, तो फ़ोकस उस एलिमेंट पर लौटता है जिस पर वह स्नैकबार में आने से पहले था।
• मोशन। यह निचले किनारे के नीचे से उठकर (ऊपर अंतिम छोर पर, ऊपरी किनारे के ऊपर से उतरकर), फ़ेड होते हुए अपनी जगह पर आता है, और अपनी जगह पर ही फ़ेड होकर चला जाता है। जहाँ मोशन कम किया गया है, वहाँ यह बिना खिसके फ़ेड होता है; Android पर, जिसकी सेटिंग हर ऐनिमेशन हटा देती है, यह तुरंत दिखता और ग़ायब होता है।

करें

link

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

न करें

link

• काम को रोकने वाली त्रुटियों या सवालों के लिए स्नैकबार इस्तेमाल न करें। डायलॉग इस्तेमाल करें।
• स्नैकबार में दो क्रियाएँ न रखें। उसमें एक की ही जगह है।
• क्रिया को filled बटन न बनाएँ, और जिस क्रिया के लिए ऐसा बटन ठीक लगे, उसे स्नैकबार में न रखें। मुख्य क्रिया से खुलने वाली बॉटम शीट इस्तेमाल करें।
• रोज़मर्रा की पुष्टियों के लिए warning या error रूप इस्तेमाल न करें। वे स्क्रीन रीडर को बीच में रोकते हैं।
• स्नैकबार को महत्वपूर्ण जताने के लिए उसे इनवर्स न बनाएँ। इनवर्स सिर्फ़ रंग बदलता है; संदेश किस तरह का है, यह स्थिति बताती है।
• जो चीज़ स्क्रीन पहले से साफ़ दिखा रही है, उसके लिए स्नैकबार न दिखाएँ।
• फ़ोकस को स्नैकबार या उसकी क्रिया पर न ले जाएँ। उसे लोगों को उनके काम से दूर नहीं ले जाना चाहिए।

सुलभता

link

रोल

status

लेबलिंग

The snackbar is a live region: polite in the default, info and success forms (the status role on the web) and assertive in the warning and error forms (the alert role on the web). When it appears it announces, once, statusLabel, the title, the whole message and the action's label. The status glyph is hidden from assistive technology; statusLabel gives the status in words. The action's name is its label; the close button's name is closeLabel; the expand button's name is expandLabel, and it exposes whether the text is expanded. The bar itself is not a tab stop; its text is one only while it scrolls.

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

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

कीबोर्ड

कुंजियाँ	क्रिया
Tab	Reaches, at the host's place in the focus order, the text while it scrolls, then the action, the expand button and the close button. Showing a snackbar never moves focus.
Enter / Space	Activates the focused action, expand button or close button.
Arrow keys, Page Up, Page Down	While the expanded text scrolls and has focus, scroll it.
Escape	While focus is inside the snackbar, closes it (dismiss, reason escape).

टिप्पणियाँ

• WCAG 2.2.1 (timing adjustable): by default (auto) a snackbar with an action never times out. A product may time one out (short or long), but then the action must also be available elsewhere (Undo in a menu or a history), because a person who is slow, zoomed-in or using a screen reader may not reach it in time. The timeout pauses while the snackbar is hovered, focused or expanded, and Android's accessibility timeout lengthens it.
• A snackbar reports; it does not ask. A choice between two actions, an error that blocks the person's work, or anything they must acknowledge belongs in a dialog or next to what it is about. The error form is for a failure the person can come back to (a message not sent, with Retry).
• The action is a tonal button so that an undo is seen at once: its label is the strongest thing in it (at least 9.1:1 on the action at rest and 6.9:1 in its weakest state, in every form and scheme of the default system), and the action is one quiet step off its bar, the same step in every form (1.25–1.45:1 against the bar in all ten forms and six schemes), so it never outweighs the message and never weighs more on one status than on another. A button with a visible label needs no boundary contrast (WCAG 1.4.11). An action important enough to seem to want a filled button does not belong in a snackbar: put a Main Action Button in a bottom sheet instead.
• WCAG 2.4.13 and 1.4.11 (focus appearance, non-text contrast): the focus indicator is drawn on the bar, so its color is the form's (SNK-3). On the default form's surface it is the system's focus color, which the build holds against every surface role; on a status bar and on an inverse bar it is that bar's content color, which the build holds against the bar at 4.5:1 or more. The system's focus color alone is held against no status bar and falls under 3:1 on the inverse surface in five of the six schemes.
• Drawn inverse or not, a snackbar is the same message: the role, the announcement, the focus order and the timing do not change with its colors (SNK-30). A product should not use inverse to mean something (an inverse bar for important messages): that is what the status forms and statusLabel are for.
• WCAG 1.4.1 (use of color): a status form is never told by color alone. It draws the status's glyph, a shape of the icon set, and gives statusLabel, the status in words, to assistive technology (SNK-21).
• WCAG 1.4.3 and 1.4.11 (contrast): three parts are drawn at an opacity of their own color, so their contrast is that of the color as drawn, not of the role. In the default system the message under a title keeps at least 7.1:1 on its bar (7.6:1 in the high-contrast schemes) and the status glyph at least 3.6:1, in every form and scheme (SNK-32, SNK-21); a status form's edge is decoration beside the glyph and statusLabel and is held to nothing (SNK-31). A system that changes one of these opacities, or the colors under them, must keep 4.5:1 for the message and 3:1 for the glyph.
• WCAG 1.4.11 (non-text contrast): the expand and close buttons are Buttons in the form's tone (SNK-34): the glyph is the bar's message color, and the circle under it is that color at comp.button.tone.container.opacity over the bar. In the default system the glyph keeps at least 8.0:1 against its circle at rest and 6.2:1 in its weakest states (focused and pressed), in all ten forms and six schemes — well above the 3:1 a glyph without a label needs. A system that changes the tone's opacity, the state-layer opacities or a form's colors must keep 3:1 for the glyph against the circle in every state.
• Text size never hides text for good: a collapsed title or message ends with an ellipsis at its line limit and the expand button shows the rest (SNK-23); the action moves to its own row (SNK-16); an expanded bar taller than the window scrolls inside it (SNK-25).
• Web: `<tanrei-snackbar-host>` is placed by the product, normally as the last element of the page (its place in the focus order). It shows `<tanrei-snackbar>` elements as `popover="manual"`, so they are in the top layer, and exposes `show(options): Promise<{ result: 'action' | 'dismiss', reason? }>` (whose options include `inverse`), `dismissCurrent()` and `clear()`. The live regions are the host's two, which are always in the document, so screen readers register them before the first message is inserted: one with the status role (polite) for the default, info and success forms, one with the alert role (assertive) for warning and error. The expand button carries `aria-expanded` and `aria-controls` naming the text.
• SwiftUI, Compose, Flutter and React Native announce with the platform's own call, at default priority for the polite forms and at high priority for warning and error: AccessibilityNotification.Announcement with the speech announcement priority, a polite or assertive liveRegion, SemanticsService.announce with its assertiveness, and AccessibilityInfo.announceForAccessibility (announceForAccessibilityWithOptions with queue off for assertive on iOS). None of them takes focus. The expand button's state is the platform's expanded/collapsed semantics (Compose's expand and collapse actions, Flutter's expanded flag, React Native's accessibilityState.expanded, and on Apple platforms the expanded and collapsed value VoiceOver reads for a disclosure).
• 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/snackbar.spec.json, tokens/sys/measure.tokens.json

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

link

• स्नैकबार एक लाइव रीजन के ज़रिए पढ़कर सुनाया जाता है: डिफ़ॉल्ट, info और success रूपों के लिए बिना टोके सुनाने वाला रीजन (वेब पर status रोल), और warning और error के लिए ज़ोर देने वाला रीजन (alert रोल)। उसका स्थिति लेबल, शीर्षक और संदेश, फिर उसकी क्रिया का लेबल, उसके दिखने पर एक बार पढ़कर सुनाए जाते हैं, और हमेशा पूरे, तब भी जब टेक्स्ट कटा हो। SwiftUI, Compose, Flutter और React Native पर प्लैटफ़ॉर्म का अपना पढ़कर सुनाना इस्तेमाल होता है, warning और error के लिए ऊँची प्राथमिकता पर, और इनमें से कोई भी फ़ोकस नहीं लेता।
• स्थिति वाला रूप कभी सिर्फ़ रंग से नहीं पहचाना जाता: वह स्थिति का ग्लिफ़ बनाता है और statusLabel को शीर्षक से पहले टेक्स्ट के रूप में देता है। ग्लिफ़ ख़ुद सहायक तकनीक से छिपा रहता है, और फैलाने और बंद करने वाले ग्लिफ़ भी।
• क्रिया का नाम उसका लेबल है, फैलाने वाले बटन का नाम expandLabel और बंद करने वाले बटन का नाम closeLabel। इन सब तक Tab से, फ़ोकस के क्रम में होस्ट की जगह पर पहुँचा जाता है, और इन्हें Enter या Space से सक्रिय किया जाता है।
• फैलाने वाला बटन यह स्टेट देता है कि टेक्स्ट फैला हुआ है या नहीं, और दोनों स्टेट में वही नाम रखता है। जिस फैले हुए बार का टेक्स्ट स्क्रॉल होता है, वह टेक्स्ट को फ़ोकस का एक पड़ाव बना देता है, जिसका नाम शीर्षक है और जो ऐरो कुंजियों से और Page Up और Page Down से स्क्रॉल होता है।
• फ़ोकस के स्नैकबार के भीतर रहते Escape उसे बंद करती है। जब वह फ़ोकस के भीतर रहते बंद होता है, तो फ़ोकस वहीं लौटता है जहाँ वह पहले था।
• बार कहाँ है, इससे और कुछ नहीं बदलता। ऊपर अंतिम छोर पर रखा स्नैकबार भी फ़ोकस क्रम में होस्ट की जगह पर Tab से पहुँचा जाता है, नीचे वाले की तरह ही पढ़कर सुनाया जाता है, और स्टिकी हेडर को कभी नहीं ढकता।
• क्रिया वाले स्नैकबार का डिफ़ॉल्ट रूप से टाइमआउट नहीं होता। समय वाले स्नैकबार होवर, फ़ोकस या फैले हुए रहने के दौरान रुके रहते हैं, Android के एक्सेसिबिलिटी टाइमआउट तक लंबे हो जाते हैं और, क्रिया के साथ, स्क्रीन रीडर के चलते रहने पर उनका टाइमआउट कभी नहीं होता।
• क्रिया अपना बना हुआ साइज़ बदले बिना दोनों अक्षों पर न्यूनतम टार्गेट पूरा करती है, और फैलाने वाला और बंद करने वाला बटन, जो Button हैं, अपना टार्गेट रखते हैं। हर फ़ोकस रिंग सिर्फ़ कीबोर्ड फ़ोकस के लिए दिखती है, स्नैकबार के रूप के एक रंग में, ताकि वह हर तरह के बार पर दिखे: सरफ़ेस, किसी स्थिति का टिंट और इनवर्स बार।
• फैलाने और बंद करने वाले ग्लिफ़ हर स्थिति और हर रूप में अपने गोले के मुक़ाबले कम से कम 3:1 बनाए रखते हैं। डिफ़ॉल्ट सिस्टम में ये आराम की स्थिति में कम से कम 8.0:1, और फ़ोकस होने या दबाए जाने पर 6.2:1 बनाए रखते हैं।
• जो भाग हल्के बनाए जाते हैं, वे डिफ़ॉल्ट सिस्टम की हर स्कीम में बार के मुक़ाबले अपना कंट्रास्ट बनाए रखते हैं: स्थिति ग्लिफ़ कम से कम 3:1, और शीर्षक के नीचे का संदेश कम से कम 4.5:1, या उच्च कंट्रास्ट वाली स्कीम में 7:1। हल्का करना सिर्फ़ रंग का मामला है; सहायक तकनीक जो पढ़ती है वह नहीं बदलता, और स्नैकबार के इनवर्स बनने पर भी नहीं बदलता।
• बड़ा टेक्स्ट कभी टेक्स्ट को हमेशा के लिए नहीं छिपाता: सिमटा हुआ शीर्षक या संदेश तीन पंक्तियों पर एलिप्सिस के साथ ख़त्म होता है और फैलाने वाला बटन बाक़ी दिखाता है, क्रिया अपनी अलग पंक्ति में चली जाती है, और विंडो से ऊँचा फैला हुआ बार स्क्रॉल होता है।
• आइकन फ़ॉन्ट के लोड होने से पहले किसी ग्लिफ़ का नाम कभी टेक्स्ट के रूप में नहीं बनता: ग्लिफ़ की जगह तब तक ख़ाली रहती है जब तक फ़ॉन्ट उसे बना न सके।
• डीबग बिल्ड इनकी रिपोर्ट करते हैं: ख़ाली संदेश, बिना closeLabel का बंद करने वाला बटन, बिना statusLabel का स्थिति वाला रूप, बिना expandLabel का फैलाने वाला बटन, और समय वाला ऐसा स्नैकबार जिसमें क्रिया हो।

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

• Web: ब्राउज़र यह नहीं बताता कि स्क्रीन रीडर चल रहा है या नहीं, और उसमें कोई एक्सेसिबिलिटी टाइमआउट नहीं है, इसलिए दोनों में से कोई भी समय वाले स्नैकबार को लंबा नहीं करता। डिफ़ॉल्ट auto अवधि ही क्रिया को पहुँच में रखती है।
• Web: ऑन-स्क्रीन कीबोर्ड से हटकर रहना अभी किसी ऐसे डिवाइस पर जाँचा नहीं गया है जिसमें वह हो।
• SwiftUI फ़ोकस को उस एलिमेंट पर नहीं लौटा सकता जिस पर वह था: जब स्नैकबार फ़ोकस के भीतर रहते बंद होता है, तो फ़ोकस वहाँ जाता है जहाँ SwiftUI उसे किसी हटाए गए व्यू के बाद ले जाता है। जिस व्यू को आप किसी scene के बाहर होस्ट करते हैं, जैसे आपका अपना NSHostingView, उसके भीतर का होस्ट अपने टाइमआउट कभी नहीं चलाता।
• Compose उस एलिमेंट को पहचान नहीं सकता जिस पर फ़ोकस स्नैकबार में आने से पहले था। जब स्नैकबार फ़ोकस के भीतर रहते बंद होता है, तो फ़ोकस उसी रास्ते बाहर लौटता है जिससे वह आया था: Tab से भीतर आने के बाद, होस्ट से पहले वाले एलिमेंट पर। जब आपका कोड उसे फ़ोकस के भीतर रहते बंद करता है, तो फ़ोकस नहीं हिलता।
• Compose: Android के एक्सेसिबिलिटी टाइमआउट तक लंबा होना और विंडो के छिपे रहने पर रुकना अभी किसी टेस्ट में शामिल नहीं हैं।
• Compose: बिना टोके पढ़कर सुनाना, विंडो के पास फ़ोकस न होने पर रुकना और एक्सेसिबिलिटी टाइमआउट सिर्फ़ Robolectric पर टेस्ट किए गए हैं, अभी किसी डिवाइस पर नहीं।
• Flutter अभी समय वाले स्नैकबार को Android के एक्सेसिबिलिटी टाइमआउट तक लंबा नहीं करता, क्योंकि Flutter वह टाइमआउट उपलब्ध नहीं कराता।
• React Native यह नहीं बता सकता कि फ़ोकस पहले किस एलिमेंट पर था। जब स्नैकबार फ़ोकस के भीतर रहते बंद होता है, तो फ़ोकस वहाँ जाता है जहाँ प्लैटफ़ॉर्म उसे रखता है।
• React Native का अपना कोई सेफ़ एरिया API नहीं है। स्नैकबार सेफ़ एरिया के भीतर तभी रहता है जब आप विंडो के इनसेट TanreiProvider को देते हैं; उनके बिना, होम इंडिकेटर वाले फ़ोन पर वह आंशिक रूप से उसके ऊपर आ सकता है।
• React Native यह फ़ैसला कि क्रिया अपनी अलग पंक्ति में जाएगी, लेआउट हो चुकी पंक्तियों से करता है, इसलिए यह बदलाव लेआउट के पहले पास के बाद होता है।
• React Native: बिना टोके पढ़कर सुनाना, कीबोर्ड के ऊपर रहना, और बैकग्राउंड और पॉइंटर के लिए रुकना अभी किसी डिवाइस पर जाँचे नहीं गए हैं।

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

link

• संदेश को ऐसे सादे टेक्स्ट के रूप में लिखें जो ज़ोर से पढ़े जाने पर अकेले भी समझ आए।
• बंद करने वाले बटन को closeLabel, स्थिति वाले रूप को statusLabel, और जिस स्नैकबार का टेक्स्ट लंबा हो सकता है उसे expandLabel दें, सब अपने प्रॉडक्ट की भाषा में।
• होस्ट को पेज पर सबसे आख़िर में रखें, या Compose पर लेआउट में सबसे आख़िर में।
• React Native पर विंडो के insets TanreiProvider को दें, ताकि स्नैकबार सिस्टम बार से हटकर रहे।
• अगर आप क्रिया वाले स्नैकबार के लिए short या long चुनते हैं, तो वही क्रिया किसी ऐसी जगह भी दें जहाँ टाइमआउट नहीं होता।
• जिस भी चीज़ पर लोगों को कुछ करना ज़रूरी है, उसे स्नैकबार में नहीं, डायलॉग में रखें।