ऐप बार

अवलोकन

link

Web

tanrei-app-bar

schedule

SwiftUI

TanreiAppBar

schedule

Jetpack Compose

TanreiAppBar

schedule

Flutter

TanreiAppBar

schedule

React Native

AppBar

schedule

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

Web और React के उदाहरण मौजूदा स्पेक दिखाते हैं, जिसमें बार के आइटम सिर्फ़ आइकन वाले बटन हैं। SwiftUI, Compose, Flutter और React Native पीछे हैं: वे अभी पिछला संशोधन देते हैं, जिसमें आइकन बटन एक अलग कंपोनेंट है, और जब तक वे बराबरी पर नहीं आते, उनके उदाहरण वही संशोधन दिखाते हैं।

एक small ऐप बार, जिसमें पीछे जाने का बटन और दो क्रियाएँ हैं

arrow_backsearchmore_vert

इस्तेमाल

link

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

इसमें दो तरह के आइटम होते हैं: शुरू में एक navigation आइटम (पीछे, मेन्यू या बंद करना) और अंत में तीन तक action आइटम। दोनों आपके अपने सिर्फ़ आइकन वाले बटन हैं, हर एक अपने लेबल और अपने click के साथ, या जहाँ वह कहीं ले जाता है, वहाँ अपने href के साथ। बार उन्हें लेआउट में रखता है और उनकी स्टाइल कभी नहीं बदलता। हर प्लैटफ़ॉर्म उन्हें अपने स्लॉट में लेता है: वेब पर slot="navigation" और slot="actions" वाले चाइल्ड, SwiftUI पर navigation और actions व्यू बिल्डर, Compose पर navigationIcon और actions लैम्ब्डा, Flutter पर leading और actions:, और React Native पर navigation और actions नोड।

शीर्षक स्क्रीन का नाम और उसकी हेडिंग है। वेब पर यह headline है, क्योंकि HTML का ग्लोबल title ऐट्रिब्यूट पूरे बार पर एक टूलटिप लगा देता।

स्क्रॉल्ड। जब तक कॉन्टेंट बार के नीचे है, बार अपना स्क्रॉल्ड रूप लेता है। स्क्रीन के स्क्रॉल होने वाले व्यू को जोड़ दें, तो बार scrolled ख़ुद सेट करता है: वेब पर scroll-target (डिफ़ॉल्ट रूप से डॉक्यूमेंट), SwiftUI पर .tanreiAppBarScrollSource() (उस .safeAreaInset के बाद लगाया गया जो बार को रखता है), Compose पर Modifier.nestedScroll से जोड़ा गया scrollBehavior, Flutter पर पेज के स्क्रॉल नोटिफ़िकेशन, और React Native पर useAppBarScroll()। जुड़ाव न हो, तो scrolled ख़ुद सेट करें।

सिस्टम बार। बार का रंग अपने ऊपर के स्टेटस बार, कैमरा कटआउट या विंडो कैप्शन के नीचे तक पहुँचता है। उसका कॉन्टेंट उनके नीचे और बग़ल के इनसेट के भीतर रहता है। वेब env(safe-area-inset-*) पढ़ता है, Compose windowInsets लेता है (डिफ़ॉल्ट रूप से स्टेटस बार और आड़ा डिस्प्ले कटआउट), Flutter MediaQuery की पैडिंग पढ़ता है, और SwiftUI बार को .safeAreaInset(edge: .top) से रखता है। React Native में सेफ़ एरिया का कोई API नहीं है, और Tanrei सेफ़ एरिया की कोई डिपेंडेंसी नहीं लेता, इसलिए इनसेट सिर्फ़ प्रॉपर्टी से आते हैं। TanreiProvider को विंडो के insets दें (अगर आप react-native-safe-area-context इस्तेमाल करते हैं, तो उसका useSafeAreaInsets() आगे दे दें)। बार की अपनी insets प्रॉपर्टी में जो ओर दी गई हैं, उनके मान वह बदल देती है, इसलिए जो बार विंडो के सबसे ऊपर नहीं है वह { top: 0 } देता है।

<!-- शीर्षक headline है: HTML का title ऐट्रिब्यूट बार के ऊपर एक टूलटिप दिखा देता। -->
<tanrei-app-bar headline="इनबॉक्स">
  <tanrei-button variant="text" slot="navigation" label="पीछे"><span slot="icon">arrow_back</span></tanrei-button>
  <tanrei-button variant="text" slot="actions" label="खोजें"><span slot="icon">search</span></tanrei-button>
  <tanrei-button variant="text" slot="actions" label="और विकल्प"><span slot="icon">more_vert</span></tanrei-button>
</tanrei-app-bar>

<!-- एक large शीर्षक जो #inbox के स्क्रॉल होने पर सिमटता है। जब तक heading-level कुछ और न कहे, शीर्षक एक h1 है। -->
<div style="display: flex; flex-direction: column; block-size: 100dvh">
  <tanrei-app-bar size="large" headline="इनबॉक्स" scroll-target="inbox">
    <tanrei-button variant="text" slot="navigation" label="मेन्यू"><span slot="icon">menu</span></tanrei-button>
  </tanrei-app-bar>
  <main id="inbox" style="flex: 1; overflow: auto">…</main>
</div>

<!-- जो बटन किसी पेज पर ले जाता है, वह लिंक है: उसे href दें। खोज भी एक क्रिया हो सकती है: उसका आइकन ट्रिगर। -->
<tanrei-app-bar headline="टैब">
  <tanrei-button variant="text" slot="navigation" href="/components/" label="सभी कंपोनेंट"><span slot="icon">arrow_back</span></tanrei-button>
  <tanrei-search slot="actions" bar="icon" presentation="dialog" label="दस्तावेज़ों में खोजें" placeholder="खोजें"
    clear-label="खोज मिटाएँ" back-label="पीछे"></tanrei-search>
</tanrei-app-bar>

<script type="module">
  import '@tanrei/web/components/app-bar';
  import '@tanrei/web/components/button';
  import '@tanrei/web/components/search';
  // बटन आपके हैं: बार अपना कोई इवेंट नहीं जोड़ता।
  document.querySelector('[label="पीछे"]').addEventListener('click', () => history.back());
</script>

import { AppBar, Button, Search } from '@tanrei/react';

<AppBar headline="इनबॉक्स">
  <Button variant="text" slot="navigation" label="पीछे" onClick={goBack}><span slot="icon">arrow_back</span></Button>
  <Button variant="text" slot="actions" label="खोजें" onClick={search}><span slot="icon">search</span></Button>
  <Button variant="text" slot="actions" label="और विकल्प" onClick={openMore}><span slot="icon">more_vert</span></Button>
</AppBar>

// जो बटन किसी पेज पर ले जाता है, वह लिंक है: उसे href दें। खोज भी एक क्रिया हो सकती है: उसका आइकन ट्रिगर।
<AppBar headline="टैब">
  <Button variant="text" slot="navigation" href="/components/" label="सभी कंपोनेंट"><span slot="icon">arrow_back</span></Button>
  <Search slot="actions" bar="icon" presentation="dialog" label="दस्तावेज़ों में खोजें" placeholder="खोजें" clearLabel="खोज मिटाएँ" backLabel="पीछे" />
</AppBar>

import Tanrei

// बार उस NavigationStack के ऊपरी सेफ़ एरिया इनसेट में रहता है जिसका सिस्टम बार छिपा है।
// isScrolled को nil छोड़ने पर वह .tanreiAppBarScrollSource() से चिह्नित स्क्रॉल व्यू के अनुसार चलता है।
NavigationStack {
    ScrollView { InboxRows() }
        .safeAreaInset(edge: .top, spacing: 0) {
            TanreiAppBar("इनबॉक्स", size: .large) {
                TanreiIconButton("मेन्यू", action: openMenu) { Image(systemName: "line.3.horizontal") }
            } actions: {
                TanreiIconButton("खोजें", action: search) { Image(systemName: "magnifyingglass") }
            }
        }
        // बार को रखने वाले इनसेट के बाद: उसके भीतर लगाया गया मॉडिफ़ायर बार तक नहीं पहुँच सकता।
        .tanreiAppBarScrollSource()
        .toolbar(.hidden, for: .navigationBar)
}

import io.github.chnotchy.tanrei.components.TanreiAppBar
import io.github.chnotchy.tanrei.components.TanreiAppBarDefaults
import io.github.chnotchy.tanrei.components.TanreiIconButton
import io.github.chnotchy.tanrei.primitives.TanreiText
import io.github.chnotchy.tanrei.tokens.TanreiAppBarSize

// एक small बार। scrollBehavior के बिना यह सपाट रहता है।
TanreiAppBar(
    title = "इनबॉक्स",
    navigationIcon = { TanreiIconButton(onClick = onBack, contentDescription = "पीछे") { TanreiText("arrow_back") } },
    actions = {
        TanreiIconButton(onClick = onSearch, contentDescription = "खोजें") { TanreiText("search") }
        TanreiIconButton(onClick = onMore, contentDescription = "और विकल्प") { TanreiText("more_vert") }
    },
)

// एक large बार जो लिस्ट के स्क्रॉल होने पर सिमटता है: behavior को स्क्रॉल होने वाले व्यू के किसी पैरेंट पर जोड़ें।
// pinnedScrollBehavior() small बार का है: वह कभी नहीं सिमटता, और जब तक कॉन्टेंट उसके नीचे है तब तक scrolled रहता है।
val scrollBehavior = TanreiAppBarDefaults.collapseScrollBehavior()
Column(Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)) {
    TanreiAppBar(title = "इनबॉक्स", size = TanreiAppBarSize.Large, scrollBehavior = scrollBehavior)
    LazyColumn { /* स्क्रीन का कॉन्टेंट */ }
}

import 'package:tanrei/tanrei.dart';

// एक small बार, किसी scaffold के ऐप बार स्लॉट में या किसी Column में सबसे पहले।
// scrolledUnder को null छोड़ने पर वह सबसे पास के ScrollNotificationObserver के अनुसार चलता है, जैसे AppBar करता है।
TanreiAppBar(
  leading: TanreiIconButton(onPressed: () => Navigator.of(context).maybePop(), icon: const Icon(AppSymbols.arrowBack), semanticLabel: 'पीछे'),
  title: 'इनबॉक्स',
  actions: <Widget>[
    TanreiIconButton(onPressed: search, icon: const Icon(AppSymbols.search), semanticLabel: 'खोजें'),
    TanreiIconButton(onPressed: openMore, icon: const Icon(AppSymbols.moreVert), semanticLabel: 'और विकल्प'),
  ],
),

// जो large बार अपने कॉन्टेंट के साथ सिमटता है, वह एक sliver है, जो अपने CustomScrollView में सबसे ऊपर पिन किया गया है।
CustomScrollView(
  slivers: <Widget>[
    TanreiSliverAppBar(title: 'इनबॉक्स', size: TanreiAppBarSize.large, leading: menuButton),
    SliverList.list(children: messages),
  ],
),

import { useState } from 'react';
import { ScrollView, View } from 'react-native';
import { AppBar, IconButton, useAppBarScroll } from '@tanrei/react-native';

// इनसेट TanreiProvider की insets प्रॉपर्टी से आते हैं, या बार की अपनी प्रॉपर्टी से।
<AppBar
  title="इनबॉक्स"
  navigation={<IconButton accessibilityLabel="पीछे" onPress={goBack}>arrow_back</IconButton>}
  actions={
    <>
      <IconButton accessibilityLabel="खोजें" onPress={search}>search</IconButton>
      <IconButton accessibilityLabel="और विकल्प" onPress={openMore}>more_vert</IconButton>
    </>
  }
/>

// एक large बार जो सिमटता है: स्क्रॉल व्यू को जोड़ें, बार को उसके ऊपर रखें, और कॉन्टेंट को बार की ऊँचाई जितनी पैडिंग दें।
const scroll = useAppBarScroll();
const [barHeight, setBarHeight] = useState(0);
<View style={{ flex: 1 }}>
  <ScrollView onScroll={scroll.onScroll} scrollEventThrottle={16} contentContainerStyle={{ paddingTop: barHeight }}>
    {messages}
  </ScrollView>
  <View style={{ position: 'absolute', top: 0, left: 0, right: 0 }} onLayout={(e) => setBarHeight((h) => Math.max(h, e.nativeEvent.layout.height))}>
    <AppBar size="large" title="इनबॉक्स" scrollState={scroll.state} navigation={menuButton} />
  </View>
</View>

स्पेक

link

उपशीर्षक वाला एक large बार, और बीच में रखा शीर्षक

menusearchaccount_circlearrow_backsearch

एक नेविगेशन बटन जो लिंक है, और क्रियाओं के बीच एक खोज ट्रिगर

arrow_backmore_vert

संरचना

भाग	विवरण
1 container	The bar across the top of the screen. Its color reaches under the system inset above it (status bar, camera cutout, window caption).
2 navigation · वैकल्पिक	The navigation item: one icon-only Button at the start (back, menu or close). The product's icon-only Button, not restyled by the bar.
3 brand · वैकल्पिक	The product's brand: one link to its first page (or one image), after the navigation item, in a cell as large as an icon button's. It draws one image, the symbol alone, the wordmark alone, the symbol and the wordmark side by side (lockup), or one of the two by the window's width (responsive).
4 context · वैकल्पिक	The product's context: one control after the brand (a workspace, a project, a design system), the product's own Button, not restyled by the bar.
5 title	The screen's name. In the top row for a small bar; under the top row for an expanded large bar, moving into the top row as it collapses.
6 subtitle · वैकल्पिक	One line under the title: context for it (an account, a status, when it was edited).
7 actions · वैकल्पिक	The action items: up to three icon-only Buttons at the end. The product's icon-only Buttons, not restyled by the bar.
8 outline	The bar's bottom edge. In the default system it is drawn at rest and while content is under the bar; dividerVisibility scroll draws it only once content has scrolled under the bar.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
size	small | large	"small"	Small puts the title in the one row the bar has; large gives the title a larger row of its own under the top row, which collapses into the top row as the content scrolls. One product uses small on most screens and large on its top-level ones. A design system may add values.
title	string	""	The screen's name, and the heading of the screen for assistive technology.
subtitle	string	""	One line under the title. Empty draws none.
titleAlignment	start | center	"start"	Where the title sits in the top row: after the navigation button, or centered on the bar. An expanded large bar's own title row always starts at the start.
brandHref	string	""	The address of the product's first page: the brand is a link to it. Empty draws the brand as an image that is not a link.
brandLabel	string	""	The product's name: the brand's one accessible name, whichever of its images is shown. Required wherever the bar has a brand.
brandLayout	lockup | responsive	"lockup"	How the brand's symbol and wordmark stand when the product gives both (APB-21): lockup sets them side by side, comp.app-bar.brand.lockup.gap apart and aligned as comp.app-bar.brand.lockup.alignment says; responsive shows the wordmark while the window is medium or wider and the symbol while it is compact, never both. One image, a symbol alone or a wordmark alone is shown as it is, at every width, under either value.
scrolled	boolean	false	Whether content lies under the bar. A scrolling view connected to the bar sets it (see platforms); a product without one sets it itself. It selects the bar's scrolled condition, and a large bar is drawn collapsed while it is true.
dividerVisibility	auto | always | scroll	"auto"	When the bar's bottom edge is drawn. always: at rest and while content is under the bar, so that the edge of the screen's header stands still (an app shell's header, a screen whose content starts right under the bar). scroll: only while content lies under the bar, so that the line itself says the content has moved (the scrolled condition's edge alone). auto takes comp.app-bar.outline.visibility, the design system's answer (always in the default system). The bar's color and elevation follow scrolled under either choice.

स्लॉट

स्लॉट	विवरण
navigation	Holds the navigation item: one icon-only Button at the start.
brand	The brand as one image: a product's single logo file, drawn comp.app-bar.brand.image.height high. Takes the place of brand-symbol and brand-wordmark where both are given.
brand-symbol	The brand's symbol: comp.app-bar.brand.symbol.size high alone, or while the window is compact under brandLayout responsive; comp.app-bar.brand.lockup.symbol.size high (the wordmark's height) beside the wordmark in a lockup.
brand-wordmark	The brand's wordmark, drawn comp.app-bar.brand.wordmark.height high: alone at every width, after the symbol in a lockup, or while the window is medium or wider under brandLayout responsive.
context	Holds one control of the product's context after the brand: a Button, or a Button that opens a Menu, that says and changes the workspace, the project or the design system the screen is in. The product's own control, not restyled by the bar.
actions	Holds the action items, up to three icon-only Buttons at the end, in reading order; more belong in an overflow menu the product provides.

आइटम

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

navigation

The one icon-only Button at the start of the top row (back, menu or close): a Button of the text variant and the medium size with an icon and no label, unless the product sets otherwise, placed in the navigation slot, which the bar lays out and does not restyle.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
label	string	""	Its accessible name ("Back"), as the Button's label. Required.

स्लॉट	विवरण
icon	Its glyph, as the Button's icon slot. A fixture item's content is this glyph.

इवेंट	विवरण
click	The button was activated, as the Button's click.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	tanrei-button	TanreiButton	TanreiButton	TanreiButton	Button
label · प्रॉपर्टी	label	label	contentDescription	semanticLabel	accessibilityLabel
click · इवेंट	click	action	onClick	onPressed	onPress
टिप्पणियाँ	An icon-only <tanrei-button> child with slot="navigation"; the glyph is its content.	An icon-only TanreiButton in the navigation view builder.	An icon-only TanreiButton in the navigationIcon lambda.	An icon-only TanreiButton given as leading.	An icon-only Button element passed as navigation.

action

An icon-only Button at the end of the top row, up to three in reading order: a Button of the text variant and the medium size with an icon and no label, unless the product sets otherwise, placed in the actions slot, which the bar lays out and does not restyle.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
label	string	""	Its accessible name ("Search"), as the Button's label. Required.

स्लॉट	विवरण
icon	Its glyph, as the Button's icon slot. A fixture item's content is this glyph.

इवेंट	विवरण
click	The button was activated, as the Button's click.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	tanrei-button	TanreiButton	TanreiButton	TanreiButton	Button
label · प्रॉपर्टी	label	label	contentDescription	semanticLabel	accessibilityLabel
click · इवेंट	click	action	onClick	onPressed	onPress
टिप्पणियाँ	An icon-only <tanrei-button> child with slot="actions"; the glyph is its content.	An icon-only TanreiButton in the actions view builder.	An icon-only TanreiButton in the actions lambda.	An icon-only TanreiButton in the bar's actions: list.	An icon-only Button element among the actions nodes.

स्टेट

व्यवहार

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

ID	आवश्यकता
APB-1	WHILE scrolled is false THE app bar SHALL fill its container with comp.app-bar.flat.container.color, raise it by comp.app-bar.flat.container.elevation and draw its bottom edge comp.app-bar.outline.width thick: in comp.app-bar.scrolled.outline.color WHILE its divider visibility (APB-18) is always, so that the edge stands still whether or not content lies under the bar, and in comp.app-bar.flat.outline.color WHILE it is scroll.
APB-2	WHILE scrolled is true THE app bar SHALL fill its container with comp.app-bar.scrolled.container.color, raise it by comp.app-bar.scrolled.container.elevation and draw its bottom edge comp.app-bar.outline.width thick in comp.app-bar.scrolled.outline.color, under either divider visibility (APB-18).
APB-3	WHEN scrolled changes THE app bar SHALL change its container color, elevation and bottom edge over comp.app-bar.motion.condition-duration with comp.app-bar.motion.condition-easing, and at once where motion is reduced; WHILE its divider visibility (APB-18) is always the bottom edge SHALL NOT change.
APB-4	THE app bar SHALL span the full width of its parent and lay out a top row at least comp.app-bar.container.height.small high: the navigation item comp.app-bar.container.padding-inline from the start edge, the title block, and the action items comp.app-bar.container.padding-inline from the end edge, with comp.app-bar.container.gap between them and comp.app-bar.actions.gap between two actions, each vertically centered in the row; a navigation item SHALL go to the start and action items to the end wherever they stand among the items; WHILE there is no navigation item the title block SHALL start comp.app-bar.title.inset from the start edge, and WHILE there are no action items it SHALL end comp.app-bar.title.inset from the end edge. Right-to-left layouts SHALL mirror the order.
APB-5	THE app bar SHALL draw a title in the top row on one line in comp.app-bar.title.typescale.small and comp.app-bar.title.color, and WHILE subtitle is not empty the subtitle on one line below it in comp.app-bar.subtitle.typescale.small and comp.app-bar.subtitle.color, the two vertically centered as a block; each SHALL be truncated at the end with an ellipsis when it does not fit. THE app bar SHALL set the title's letter-spacing, in every size, 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.
APB-6	WHILE titleAlignment is center THE app bar SHALL center the top row's title block on the bar's full width and narrow it equally on both sides, truncating its text, so that it never overlaps the navigation or actions slots, and SHALL center its text; WHILE titleAlignment is start THE app bar SHALL start the title block after the navigation slot (or at comp.app-bar.title.inset) with its text start-aligned.
APB-7	WHILE size is large and the bar is expanded THE app bar SHALL be at least comp.app-bar.container.height.large high, SHALL draw no title in its top row, and SHALL draw below the top row the title in comp.app-bar.title.typescale.large and, WHILE subtitle is not empty, the subtitle in comp.app-bar.subtitle.typescale.large, both starting comp.app-bar.title.inset from the start edge, each on one line truncated at the end, the block ending comp.app-bar.container.padding-block-end above the bar's bottom edge.
APB-8	WHILE size is large and a scrolling view is connected THE app bar SHALL shrink by the distance the content has scrolled from its top, one for one, from its expanded height to comp.app-bar.container.height.small, the expanded title block moving up with the bar's bottom edge and clipped under the top row; the top row's title SHALL be invisible while the expanded title is wholly visible, fully visible once the bar has collapsed, and in between fade in linearly with the part of the expanded title that is covered. WHEN the content scrolls back toward its top THE app bar SHALL expand the same way.
APB-9	WHERE a scrolling view is connected THE app bar SHALL take scrolled from it: true while any content lies under the bar (for a large bar, only once it has fully collapsed) and false when the content is at its top. WHILE size is large and scrolled is true THE app bar SHALL be drawn fully collapsed; WHERE nothing is connected and scrolled is false a large app bar SHALL stay expanded.
APB-10	THE app bar SHALL extend its container under the top system inset (status bar, camera cutout, window caption) and SHALL place its content below that inset and inside the left and right insets, so that its color reaches the screen's top edge while no content sits under a system bar or cutout.
APB-11	THE app bar SHALL NOT restyle its navigation and action items: each SHALL render as the icon-only Button it is, from its own tokens, and keep its own semantics, and the app bar SHALL NOT be focusable itself, so that focus moves from the navigation item to the action items in reading order. A glyph of an item that the system's icon set marks as mirrored (a navigation item's arrow_back) SHALL be mirrored in a right-to-left layout by the item's own icon helper (BTN-19): that is the icon's own behaviour, not a restyling by the app bar.
APB-12	THE app bar SHALL expose title as a heading and subtitle as text read after it, and SHALL expose the title only once WHILE size is large: the expanded title while any of it is visible, the top row's title once the bar has collapsed.
APB-13	WHILE title is empty THE app bar SHALL draw no title block (an expanded large bar then has an empty title row) and SHALL expose no heading; IF the app bar holds more than three action items or more than one navigation item THE app bar SHALL still render them, and in debug builds report that the extra actions belong in an overflow menu or that a bar has one navigation button.
APB-14	WHEN size names a value that the active design system does not have THE app bar SHALL render with the default value's tokens, and in debug builds report the unknown value.
APB-15	WHILE the text size is enlarged THE app bar SHALL grow its rows to hold the title and subtitle lines (its heights are minimums), SHALL keep each on one line truncated at the end, and SHALL NOT scale the navigation and action items it holds.
APB-16	THE app bar 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 app bar is shown THE app bar SHALL draw itself for the new direction at once, without a motion of its own, keeping its size and the scroll state it follows.
APB-17	THE app bar SHALL lay out its title and its subtitle 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 app bar 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 subtitle that does not fit (APB-5, APB-7) 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.
APB-18	THE app bar SHALL draw its bottom edge (APB-1, APB-2) as its dividerVisibility names: WHILE dividerVisibility is auto, as comp.app-bar.outline.visibility names, which follows sys.behavior.divider-visibility unless a design system sets the app bar apart; WHILE dividerVisibility is always or scroll, as that value names, whatever the tokens say. WHEN dividerVisibility, or the token it follows, changes THE app bar SHALL draw the other form at once, moving no part and keeping the scroll position and focus; WHEN dividerVisibility names a value the app bar does not define THE app bar SHALL treat it as auto and in debug builds report the unknown value. A platform that cannot draw a choice SHALL fall back to the first value, always, and state that in its README.
APB-19	WHERE the product gives the app bar a brand (an image in brand, brand-symbol or brand-wordmark) THE app bar SHALL place it at the start of the top row, after the navigation item at comp.app-bar.actions.gap from it, or comp.app-bar.container.padding-inline from the start edge WHILE no navigation item is drawn, with the title block after it at comp.app-bar.container.gap; the brand SHALL take a cell at least the minimum target high and wide, padded at its start and end by half the minimum target less comp.app-bar.brand.symbol.size, its images centred on the row's centre line, so that a symbol stands where an icon button's icon stands and a wordmark keeps that inset from the cell's edges. Right-to-left layouts SHALL mirror the order.
APB-20	THE app bar SHALL draw the image in brand comp.app-bar.brand.image.height high, the symbol comp.app-bar.brand.symbol.size high and the wordmark comp.app-bar.brand.wordmark.height high, each as wide as its own proportions make it, and SHALL give the brand comp.app-bar.brand.color, which an image drawn in the current color takes and an image of its own colors keeps. WHILE the brand is a lockup THE app bar SHALL draw the symbol and then the wordmark in one row, comp.app-bar.brand.lockup.gap apart, aligned in the row's block axis as comp.app-bar.brand.lockup.alignment names (center, start or end).
APB-21	WHERE the brand holds one image, a symbol alone or a wordmark alone THE app bar SHALL show it at every window width. WHERE it holds both a symbol and a wordmark, WHILE brandLayout is lockup THE app bar SHALL show both as a lockup (APB-20), and WHILE brandLayout is responsive THE app bar SHALL show the wordmark WHILE the window class is medium or expanded and the symbol WHILE it is compact, never both: the window class of the app shell the bar stands in, or, outside one, the window's width against sys.breakpoint.medium. WHEN the window class changes THE app bar SHALL show the other at once, without a motion of its own, the brand's link and its focus unchanged.
APB-22	THE app bar SHALL expose the brand as one link to brandHref named by brandLabel — or, WHILE brandHref is empty, as one image named by brandLabel — between the navigation item and the action items in reading order, and SHALL hide the brand's images from assistive technology, so that the product's name is read once whichever arrangement is shown. THE brand's link SHALL be a stop in the tab order and SHALL draw the focus indicator around its cell, in the shape comp.app-bar.brand.shape.
APB-23	IF brandLayout names a value the app bar does not define THE app bar SHALL treat it as lockup and in debug builds report it; IF brand holds an image together with brand-symbol or brand-wordmark THE app bar SHALL show the image in brand alone and in debug builds report the others; IF the bar has a brand and brandLabel is empty, or a brand slot holds more than one image, THE app bar SHALL still draw what it holds and in debug builds report what is missing or extra.
APB-24	WHILE the brand is a lockup THE app bar SHALL draw the symbol comp.app-bar.brand.lockup.symbol.size high, which is the wordmark's height (comp.app-bar.brand.wordmark.height) unless a design system sets it apart, so that the symbol and the wordmark stand at one height; a symbol shown alone keeps comp.app-bar.brand.symbol.size.
APB-25	WHERE the product puts a control in context THE app bar SHALL place it at the start of the top row after the brand, at comp.app-bar.actions.gap from the brand's cell (from the navigation item WHILE no brand is drawn, and comp.app-bar.container.padding-inline from the start edge WHILE neither is), vertically centred in the row, with the title block after it at comp.app-bar.container.gap; SHALL NOT restyle it, as APB-11 says of the navigation and action items; and SHALL keep it in reading order after the brand and before the title block and the action items. Right-to-left layouts SHALL mirror the order.

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

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

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-app-bar	TanreiAppBar	TanreiAppBar	TanreiAppBar	AppBar
size · प्रॉपर्टी	size	size	size	size	size
title · प्रॉपर्टी	headline	title	title	title	title
subtitle · प्रॉपर्टी	subtitle	subtitle	subtitle	subtitle	subtitle
titleAlignment · प्रॉपर्टी	titleAlignment	titleAlignment	titleAlignment	centerTitle	titleAlignment
brandHref · प्रॉपर्टी	brandHref	brandHref	brandHref	brandHref	brandHref
brandLabel · प्रॉपर्टी	brandLabel	brandLabel	brandLabel	brandLabel	brandLabel
brandLayout · प्रॉपर्टी	brandLayout	brandLayout	brandLayout	brandLayout	brandLayout
scrolled · प्रॉपर्टी	scrolled	isScrolled	scrollBehavior	scrolledUnder	scrolled
dividerVisibility · प्रॉपर्टी	dividerVisibility	dividerVisibility	dividerVisibility	dividerVisibility	dividerVisibility
टिप्पणियाँ	title is the headline property and attribute, because HTML's global title attribute would show a tooltip over the whole bar. titleAlignment is the title-alignment attribute. The slots are navigation, context and actions. A web-only scroll-target attribute names the id of the scrolling element to connect (default: the document's scrolling element; none connects nothing), from which the bar sets scrolled itself. A web-only heading-level (default 1) sets the title's heading level. Insets are env(safe-area-inset-top|left|right). dividerVisibility is the divider-visibility attribute (auto, always, scroll); auto reads --tanrei-comp-app-bar-outline-visibility from the cascade with a style query, and where the browser has none the bar writes the name it read on its container when it renders. The brand: brand-href, brand-label and brand-layout (lockup | responsive); its images are children with slot="brand", slot="brand-symbol" or slot="brand-wordmark" (an <img> or an inline <svg>), which the bar sizes from its tokens, marks aria-hidden and draws inside its own link (part="brand"). The link is the bar's: a router that follows links by their clicks reads it from the click's composed path. The window class is the enclosing <tanrei-app-shell>'s, else matchMedia against sys.breakpoint.medium.	TanreiAppBar(_ title:, subtitle:, size:, titleAlignment:, isScrolled: Bool? = nil) { navigation } actions: { … }, placed with .safeAreaInset(edge: .top) in a NavigationStack whose system bar is hidden; the system bar's heights, title font and edge cannot be set from the tokens. Hiding it must not lose the interactive back swipe: the implementation keeps it working. The connected scroll view is the one marked .tanreiAppBarScrollSource(), applied after the .safeAreaInset that holds the bar (the inset's content sees only the environment where the inset is applied); it connects on iOS 18 and macOS 15 and later. isScrolled: nil follows it, a value overrides it. Not yet: the title's letter-spacing by the script of its text (APB-5, PRS-20). Not built on this platform yet: dividerVisibility (auto, always, scroll; APB-18) — the bar still draws its bottom edge from its condition's outline color, as scroll does. Not built on this platform yet: the brand (brandHref, brandLabel, brandLayout and its slots, APB-19 to APB-24). Not built on this platform yet: the context slot (APB-25).	Compose idiom (as TopAppBar): TanreiAppBar(title, navigationIcon = { … }, actions = { … }, subtitle, size, titleAlignment, scrollBehavior, windowInsets). scrollBehavior (TanreiAppBarDefaults.pinnedScrollBehavior() for small, .collapseScrollBehavior() for large) is connected with Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), and its state carries scrolled and the collapse; without one the bar is flat and expanded, and a state created with a given offset draws the scrolled fixtures. windowInsets defaults to the status bars plus the horizontal display cutout. Not yet: the title's letter-spacing by the script of its text (APB-5, PRS-20). Not built on this platform yet: dividerVisibility (auto, always, scroll; APB-18) — the bar still draws its bottom edge from its condition's outline color, as scroll does. Not built on this platform yet: the brand (brandHref, brandLabel, brandLayout and its slots, APB-19 to APB-24). Not built on this platform yet: the context slot (APB-25).	Flutter idiom (as AppBar and SliverAppBar.large): TanreiAppBar is a PreferredSizeWidget for Scaffold.appBar, with leading, actions, title (a String), subtitle, size and centerTitle (true for center). scrolledUnder: null follows the ScrollNotifications of the scaffold's body, as AppBar's scrolled-under state does; a bool overrides it. A large bar that collapses is TanreiSliverAppBar inside a CustomScrollView. Insets through SafeArea/MediaQuery.padding. Not yet: the title's letter-spacing by the script of its text (APB-5, PRS-20). Not built on this platform yet: dividerVisibility (auto, always, scroll; APB-18) — the bar still draws its bottom edge from its condition's outline color, as scroll does. Not built on this platform yet: the brand (brandHref, brandLabel, brandLayout and its slots, APB-19 to APB-24). Not built on this platform yet: the context slot (APB-25).	navigation and actions are React nodes (an icon-only Button, and a fragment of up to three). The scroll connection is a hook: const scroll = useAppBarScroll() gives scroll.onScroll for a ScrollView or FlatList and scroll.state for the bar's scrollState prop, which sets scrolled and the collapse; without it the bar draws what scrolled says. Insets come from the bar's own insets prop, side by side, falling back to TanreiProvider's insets; the package takes no safe-area dependency, and a product that uses react-native-safe-area-context passes its useSafeAreaInsets() to either. Not yet: the title's letter-spacing by the script of its text (APB-5, PRS-20). Not built on this platform yet: dividerVisibility (auto, always, scroll; APB-18) — the bar still draws its bottom edge from its condition's outline color, as scroll does. Not built on this platform yet: the brand (brandHref, brandLabel, brandLayout and its slots, APB-19 to APB-24). Not built on this platform yet: the context slot (APB-25).

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-app-bar-actions-gap	sys.target.spacing	8px
--tanrei-comp-app-bar-brand-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-app-bar-brand-image-height	comp.app-bar.brand.wordmark.height	40px
--tanrei-comp-app-bar-brand-lockup-alignment	—	0
--tanrei-comp-app-bar-brand-lockup-gap	sys.space.space100	8px
--tanrei-comp-app-bar-brand-lockup-symbol-size	comp.app-bar.brand.wordmark.height	40px
--tanrei-comp-app-bar-brand-shape	sys.shape.corner.full	9999px
--tanrei-comp-app-bar-brand-symbol-size	sys.icon.medium	24px
--tanrei-comp-app-bar-brand-wordmark-height	—	40px
--tanrei-comp-app-bar-container-gap	sys.space.space100	8px
--tanrei-comp-app-bar-container-height-large	—	120px
--tanrei-comp-app-bar-container-height-small	—	64px
--tanrei-comp-app-bar-container-padding-block-end	sys.space.space150	12px
--tanrei-comp-app-bar-container-padding-inline	sys.space.space50	4px
--tanrei-comp-app-bar-flat-container-color	sys.color.surface	#ffffff
--tanrei-comp-app-bar-flat-container-elevation	sys.elevation.level0
--tanrei-comp-app-bar-flat-outline-color	—	#000000 · 0%
--tanrei-comp-app-bar-motion-condition-duration	sys.motion.role.state.large	250ms
--tanrei-comp-app-bar-motion-condition-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-app-bar-outline-visibility	sys.behavior.divider-visibility	0
--tanrei-comp-app-bar-outline-width	sys.border.hairline	1px
--tanrei-comp-app-bar-scrolled-container-color	sys.color.surface	#ffffff
--tanrei-comp-app-bar-scrolled-container-elevation	sys.elevation.level0
--tanrei-comp-app-bar-scrolled-outline-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-app-bar-subtitle-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-app-bar-title-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-app-bar-title-inset	sys.space.space200	16px
--tanrei-comp-app-bar-subtitle-typescale-large	sys.typescale.body	400 14px/1.5714
--tanrei-comp-app-bar-subtitle-typescale-small	sys.typescale.body-small	400 13px/1.5385
--tanrei-comp-app-bar-title-typescale-large	sys.typescale.heading-1	500 32px/1.25
--tanrei-comp-app-bar-title-typescale-small	sys.typescale.heading-4	500 18px/1.4444

फ़िक्स्चर

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

size: small (10)

small

title: Inbox items: 3

small-scrolled

title: Inbox scrolled: true items: 3

small-center

title: Inbox titleAlignment: center items: 3

small-subtitle

title: Quarterly report subtitle: Edited 5 minutes ago items: 2

small-title-only

title: Settings

small-brand

brandHref: / brandLabel: Tanrei items: 2 slots: brand

small-brand-symbol

title: Inbox brandHref: / brandLabel: Tanrei items: 2 slots: brand-symbol

small-brand-wordmark

brandHref: / brandLabel: Tanrei items: 2 slots: brand-wordmark

small-brand-lockup

brandHref: / brandLabel: Tanrei items: 2 slots: brand-symbol, brand-wordmark

small-brand-responsive

brandHref: / brandLabel: Tanrei brandLayout: responsive items: 2 slots: brand-symbol, brand-wordmark

size: large (3)

large

size: large title: Inbox items: 3

large-subtitle

size: large title: Inbox subtitle: [email protected] items: 3

large-scrolled

size: large title: Inbox scrolled: true items: 3

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

दिशानिर्देश

link

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

link

ऐप बार को स्क्रीन के सबसे ऊपर इस्तेमाल करें: यह बताने के लिए कि व्यक्ति कहाँ है, उसे पीछे ले जाने या मेन्यू खोलने के लिए, और उन कुछ क्रियाओं तक पहुँचने के लिए जो पूरी स्क्रीन की हैं: खोज, शेयर, खाता। एक स्क्रीन में एक ही ऐप बार होता है।

ऐप के सबसे ऊपरी स्तर के गंतव्यों के बीच जाने के लिए नेविगेशन बार या ड्रॉअर इस्तेमाल करें। ऐप बार का मेन्यू बटन एक मोडल नेविगेशन ड्रॉअर खोल सकता है। Tanrei में कोई बॉटम ऐप बार नहीं है: कॉम्पैक्ट स्क्रीन के नीचे की क्रियाएँ टूलबार का काम हैं।

साइज़ और शीर्षक की जगह चुनना

link

चुनाव	क्या करता है	किसके लिए
Small (डिफ़ॉल्ट)	एक पंक्ति: नेविगेशन बटन, शीर्षक और क्रियाएँ।	ज़्यादातर स्क्रीन, और हर वह स्क्रीन जिस पर व्यक्ति किसी दूसरी स्क्रीन से पहुँचता है।
Large	ऊपरी पंक्ति के नीचे अपनी अलग पंक्ति में एक बड़ा शीर्षक। कॉन्टेंट के स्क्रॉल होने पर वह ऊपरी पंक्ति में सिमट जाता है, ठीक उतना जितना स्क्रॉल हुआ, और ऊपरी पंक्ति का शीर्षक फ़ेड होकर आता है। कॉन्टेंट के अपने ऊपरी सिरे पर लौटने पर वह फिर फैल जाता है।	प्रॉडक्ट की सबसे ऊपरी स्तर की स्क्रीन, जहाँ शीर्षक स्क्रीन की पहचान भी है।
titleAlignment start (डिफ़ॉल्ट)	शीर्षक नेविगेशन बटन के बाद आता है।	ज़्यादातर बार।
titleAlignment center	शीर्षक पूरे बार के बीच में रहता है और दोनों ओर से बराबर सँकरा किया जाता है, इसलिए वह कभी बटनों के नीचे नहीं जाता।	वे प्रॉडक्ट जो iOS की तरह शीर्षक बीच में रखते हैं। फैला हुआ large शीर्षक हमेशा शुरू की ओर से शुरू होता है।

कोई डिज़ाइन सिस्टम साइज़ जोड़ सकता है। SwiftUI, Compose, Flutter और React Native पर small से ऊँचे साइज़ को शीर्षक की अपनी पंक्ति मिलती है, जैसे large को। वेब पर डिज़ाइन सिस्टम का जोड़ा हुआ हर साइज़ यह पंक्ति पाता है। m3-like प्रीसेट में अभी Material का medium साइज़ नहीं है।

स्क्रॉल करना

link

• निचला किनारा बना रहता है। डिफ़ॉल्ट सिस्टम में बार आराम की हालत में भी और कॉन्टेंट के अपने नीचे होने पर भी निचले किनारे पर एक बारीक रेखा बनाता है। बार एक ऐसे हिस्से का किनारा है जो अपनी जगह रहता है, जैसे ऐप शेल का हेडर, इसलिए उसकी रेखा स्क्रॉल के साथ आती-जाती नहीं।
• या वह स्क्रॉल के साथ चलता है। dividerVisibility को scroll पर सेट करें (वेब पर divider-visibility) ताकि किनारा तभी बने जब कॉन्टेंट बार के नीचे हो, और रेखा ख़ुद बताए कि कॉन्टेंट खिसका है। कोई डिज़ाइन सिस्टम यह चुनाव हर बार, शीट और डायलॉग के लिए sys.behavior.divider-visibility से करता है, या सिर्फ़ बार के लिए comp.app-bar.outline.visibility से। cupertino और m3-like अपने मूल रूपों की तरह scroll चुनते हैं।
• सपाट और स्क्रॉल्ड। जब तक कॉन्टेंट अपने ऊपरी सिरे पर है, बार सपाट रहता है। जैसे ही कॉन्टेंट उसके नीचे आता है, बार अपना स्क्रॉल्ड रूप लेता है: m3-like में टिंट वाला कंटेनर, cupertino में भरा हुआ कंटेनर। यह बदलाव बार के कंडीशन मोशन की अवधि में ईज़ होता है, और जहाँ मोशन कम किया गया है वहाँ तुरंत होता है।
• large बार तभी स्क्रॉल्ड होता है जब वह पूरी तरह सिमट चुका हो। तब तक सिमटना ही दिखाता है कि कॉन्टेंट हिला है।
• बार अपनी जगह रहता है। कॉन्टेंट के नीचे स्क्रॉल होने पर वह छिपता नहीं। वह स्क्रीन का स्क्रॉल व्यवहार है, बार का नहीं।

आइटम

link

• बार को ज़्यादा से ज़्यादा एक नेविगेशन बटन दें: जिस स्क्रीन पर व्यक्ति दूसरी स्क्रीन से पहुँचा उस पर पीछे, सबसे ऊपरी स्तर की स्क्रीन पर मेन्यू, फ़ुल-स्क्रीन काम पर बंद करना।
• तीन क्रियाओं तक सीमित रहें। बाक़ी को ओवरफ़्लो मेन्यू में रखें: “और विकल्प” का एक आइकन बटन जो Tanrei का मेन्यू खोलता है। चौथी क्रिया और दूसरा नेविगेशन बटन डीबग बिल्ड में रिपोर्ट किए जाते हैं, और फिर भी बनाए जाते हैं।
• बटन वैसे ही दिखते हैं जैसे कहीं और। बार उन्हें लेआउट में रखता है और उनका रंग कभी नहीं बदलता।
• जो बटन कहीं ले जाता है, वह लिंक है: उसे href दें। तब पैरेंट पेज पर ले जाने वाला पीछे का बटन, या कोई पेज खोलने वाली सहायता की क्रिया, एक असली लिंक है, जो उसी बटन के रूप में बनता है। जो पीछे का बटन हिस्ट्री से होकर लौटता है, वह बटन ही रहता है।
• वेब पर खोज अपने आइकन ट्रिगर के रूप में क्रियाओं में से एक हो सकती है (bar को icon पर सेट करके): सिर्फ़ आइकन वाला बटन जो खोज का डायलॉग या फ़ुल-स्क्रीन व्यू खोलता है।

ब्रांड

link

कोई प्रोडक्ट अपना लोगो बार में अपने पहले पेज के लिंक के रूप में रख सकता है। बार को पता (brandHref, वेब पर brand-href) और प्रोडक्ट का नाम (brandLabel) दें: बार आपकी दी हुई इमेज के चारों ओर एक लिंक बनाता है, उसे उस नाम से नाम देता है, और इमेज को सहायक तकनीक से छिपाता है, ताकि नाम एक ही बार पढ़ा जाए। बार ब्रांड को नेविगेशन बटन के बाद, आइकन बटन जितने बड़े सेल में रखता है, और जब तक आपकी इमेज के अपने रंग न हों, उसे comp.app-bar.brand.color देता है।

• एक इमेज। एक लोगो फ़ाइल slot="brand" में, comp.app-bar.brand.image.height ऊँची।
• सिर्फ़ सिंबल। slot="brand-symbol" में, comp.app-bar.brand.symbol.size ऊँचा, वहाँ जहाँ आइकन बटन का आइकन होता है।
• सिर्फ़ वर्डमार्क। slot="brand-wordmark" में, comp.app-bar.brand.wordmark.height ऊँचा।
• सिंबल और वर्डमार्क साथ में। दोनों दें। डिफ़ॉल्ट रूप से (brandLayout lockup) वे साथ-साथ खड़े होते हैं, comp.app-bar.brand.lockup.gap की दूरी पर, comp.app-bar.brand.lockup.alignment के अनुसार संरेखित। तब सिंबल वर्डमार्क जितना ऊँचा होता है (comp.app-bar.brand.lockup.symbol.size)।
• विंडो की चौड़ाई के अनुसार। दोनों दें और brandLayout को responsive पर सेट करें (वेब पर brand-layout): विंडो medium या उससे चौड़ी हो तो बार वर्डमार्क दिखाता है, compact हो तो सिंबल, दोनों कभी एक साथ नहीं। ऐप शेल के अंदर यह शेल की विंडो क्लास का पालन करता है।

बार हर इमेज का आकार तय करता है और उसके अनुपात बनाए रखता है। प्रोडक्ट के नाम के लिए शीर्षक का इस्तेमाल न करें: शीर्षक स्क्रीन का नाम है। SwiftUI, Compose, Flutter और React Native अभी ब्रांड नहीं बनाते।

इस साइट का हेडर हर चौड़ाई पर सिर्फ़ Tanrei का वर्डमार्क दिखाता है।

करें

link

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

न करें

link

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

सुलभता

link

रोल

none

लेबलिंग

The title is the screen's heading (a level 1 heading on the web unless the product sets another level). The subtitle is read after it. The navigation and action items, and the control in context, are named by their own labels. The brand is one link to the product's first page named by brandLabel (the product's name), whichever of its images is shown; its images are hidden from assistive technology.

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

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

कीबोर्ड

कुंजियाँ	क्रिया
Tab	Moves focus to the navigation item, then to the brand's link, then to the control in context, then through the action items; the bar itself is not a tab stop.

टिप्पणियाँ

• The app bar has no role of its own and takes no input: its buttons are the product's icon-only Buttons, which meet the minimum target themselves (BTN-5). The bar is not a landmark, because only the product knows whether it is its page's banner; a product that wants one wraps the bar in its own header element.
• The title is truncated rather than wrapped even at 200% text size: the bar's rows grow with the text, but a bar of several lines would push the screen's content away. The full title stays available to assistive technology.
• Where both titles of a large bar are partly visible, only the expanded one is exposed, so the heading is never read twice.

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

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

link

• बार का अपना कोई रोल नहीं है और उस पर कभी फ़ोकस नहीं जा सकता। Tab नेविगेशन बटन से क्रियाओं तक जाती है, पढ़ने के क्रम में। हर बटन अपना रोल, नाम और न्यूनतम टार्गेट रखता है, और href वाला बटन सहायक तकनीक को लिंक के रूप में मिलता है।
• शीर्षक स्क्रीन की हेडिंग के रूप में दिया जाता है, वेब पर स्तर 1 की हेडिंग, जब तक heading-level कुछ और न कहे। उपशीर्षक उसके बाद पढ़ा जाता है। ख़ाली शीर्षक कुछ नहीं बनाता और कोई हेडिंग नहीं देता।
• large बार सिमटते समय दो शीर्षक बनाता है, पर सहायक तकनीक को सिर्फ़ एक देता है: जब तक फैले हुए शीर्षक का कोई भी हिस्सा दिख रहा है तब तक वही, और बार के सिमट जाने पर ऊपरी पंक्ति का। हेडिंग कभी दो बार नहीं पढ़ी जाती।
• बार कोई लैंडमार्क नहीं है। सिर्फ़ आप जानते हैं कि वह पेज का बैनर है या नहीं।
• बड़ा टेक्स्ट बार की पंक्तियों को बढ़ाता है, जिनकी ऊँचाई सिर्फ़ न्यूनतम तय है। शीर्षक और उपशीर्षक एक ही पंक्ति में रहते हैं और अगली पंक्ति में जाने के बजाय काटे जाते हैं, 200% पर भी, इसलिए बार कभी कॉन्टेंट को दूर नहीं धकेलता। पूरा शीर्षक सहायक तकनीक के लिए उपलब्ध रहता है। आइकन बटन स्केल नहीं किए जाते।
• बार अपनी दिशा वहाँ से लेता है जहाँ वह इस्तेमाल होता है। दाएँ से बाएँ वाले लेआउट में वह मिरर होता है: नेविगेशन बटन दाईं ओर होता है और क्रियाएँ बाईं ओर। जिस ग्लिफ़ को आइकन सेट मिरर होने वाला बताता है, जैसे पीछे का ऐरो, उसे उसका अपना बटन मिरर करता है, बार नहीं।
• शीर्षक और उपशीर्षक अपनी दिशा वाले टेक्स्ट के रूप में रखे जाते हैं, आसपास के टेक्स्ट से अलग। दाएँ से बाएँ वाले लेआउट में बाएँ से दाएँ लिखा नाम अपना क्रम रखता है, और अपने अंत पर काटा जाता है, शुरुआत पर कभी नहीं।
• तीन से ज़्यादा क्रियाएँ, एक से ज़्यादा नेविगेशन बटन, और ऐसा साइज़ जो डिज़ाइन सिस्टम में नहीं है, डीबग बिल्ड में रिपोर्ट किए जाते हैं।

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

• SwiftUI, Compose, Flutter और React Native: dividerVisibility इन प्लैटफ़ॉर्म के बराबरी पर आने का इंतज़ार कर रहा है। ये scroll की तरह निचला किनारा तभी बनाते हैं जब कॉन्टेंट बार के नीचे हो।
• SwiftUI, Compose, Flutter और React Native: दाएँ से बाएँ वाले नियम (जहाँ आइकन सेट बताता है वहाँ मिरर किया गया ग्लिफ़, अपनी दिशा में रखा गया शीर्षक) इन प्लैटफ़ॉर्म के बराबरी पर आने का इंतज़ार कर रहे हैं, और href वाला बटन भी।
• Web: हर साइज़ rem के अनुसार चलता है, इसलिए ब्राउज़र का बड़ा टेक्स्ट साइज़ आइकन बटनों को टेक्स्ट के साथ बढ़ाता है। अकेले Tanrei के टाइप को बड़ा करने से ऐसा नहीं होता।
• Web: जो large बार डॉक्यूमेंट के अपने स्क्रॉल के अनुसार चलता है और डॉक्यूमेंट के फ़्लो में position: sticky रहता है, वह कॉन्टेंट को स्क्रॉल के साथ-साथ अपने सिमटने से भी खिसकाता है, इसलिए बार के सिमटते समय कॉन्टेंट दुगुनी तेज़ी से चलता है। सिमटने वाले बार को किसी स्क्रॉल होने वाले एलिमेंट के ऊपर (scroll-target) या किसी फ़िक्स्ड हेडर में रखें।
• Web: हर आइकन बटन इस्तेमाल हो रहे पॉइंटर के न्यूनतम टार्गेट जितने सेल में रहता है, जो माउस के लिए 44 है, इसलिए दो क्रियाएँ केंद्र से केंद्र तक 52 की दूरी पर होती हैं, जबकि Compose और Flutter, जो 48 का टच टार्गेट नापते हैं, उन्हें 56 की दूरी पर बनाते हैं।
• SwiftUI: बार अपने स्क्रॉल व्यू के अनुसार सिर्फ़ iOS 18 और macOS 15 से चलता है। उससे पहले कुछ नहीं जुड़ता, और बार वही बनाता है जो isScrolled कहता है।
• SwiftUI: जुड़े हुए large बार पर isScrolled: true उसे सिमटा हुआ बनाता है पर लेआउट में उसकी फैली हुई ऊँचाई रखता है, इसलिए जब तक कॉन्टेंट अपने ऊपरी सिरे पर है, उसके ऊपर एक गैप दिखता है।
• SwiftUI: सिस्टम बार छिपा होने पर बार नेविगेशन कंट्रोलर के pop-gesture delegate को बदलकर किनारे से स्वाइप करके पीछे जाना चालू रखता है। यह सिर्फ़ iOS 26.5 पर जाँचा गया है। large बार एक समय में एक ही शीर्षक देता है, यह अभी VoiceOver से जाँचा नहीं गया है।
• Flutter: large TanreiAppBar अपने कॉन्टेंट के साथ नहीं सिमटता, क्योंकि बॉक्स विजेट अपने नीचे के स्क्रॉल व्यू के साथ सिकुड़ नहीं सकता। वह स्क्रॉल नोटिफ़िकेशन को अनदेखा करता है, फैला रहता है और सिर्फ़ तब सिमटा हुआ बनता है जब scrolledUnder true हो। सिमटने वाले बार के लिए TanreiSliverAppBar इस्तेमाल करें।
• Flutter: preferredSize असीमित ऊँचाई बताता है, क्योंकि वह थीम नहीं पढ़ सकता। scaffold बार को अपना साइज़ ख़ुद तय करने देता है, पर आपका अपना लेआउट उस संख्या का इस्तेमाल नहीं कर सकता।
• Compose: सिमटना वहीं रुकता है जहाँ स्क्रॉल रुकता है, इसलिए large बार आधा सिमटा हुआ रह सकता है। वह फ़्लिंग के बाद Material की तरह झटके से खुलता या बंद नहीं होता। स्पेक ऐसा स्नैप नहीं माँगता।
• React Native: large बार अपने कॉन्टेंट के साथ ठीक उतना ही सिमटे, इसके लिए आप बार को स्क्रॉल व्यू के ऊपर रखते हैं और कॉन्टेंट को बार की ऊँचाई जितनी पैडिंग देते हैं, जैसा ऊपर का उदाहरण करता है। सिमटना, इनसेट और स्क्रीन रीडर जो पढ़कर सुनाते हैं, ये अभी किसी डिवाइस पर जाँचे नहीं गए हैं।
• हर प्लैटफ़ॉर्म: cupertino में 44 पॉइंट की ऊपरी पंक्ति आइकन बटन रखने पर 48 की हो जाती है, क्योंकि उनका टच टार्गेट 48 है और न्यूनतम टार्गेट को तरजीह मिलती है। वेब पर वह सिर्फ़ मोटे पॉइंटर के साथ बढ़ती है, क्योंकि माउस का टार्गेट 44 है। large बार की फैली हुई पंक्ति भी cupertino की कंटेनर ऊँचाई से 1 पॉइंट ऊँची है।
• हर प्लैटफ़ॉर्म: उपशीर्षक होने पर फैला हुआ शीर्षक बार के पूरी तरह सिमटने से पहले ही ढक जाता है। स्पेक अभी यह नहीं बताता कि बीच में कौन-सा शीर्षक दिया जाता है। हर प्लैटफ़ॉर्म फैले हुए शीर्षक के ढकते ही हेडिंग को ऊपरी पंक्ति में ले जाता है।

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

link

• हर बार को एक शीर्षक दें। वह स्क्रीन की हेडिंग है।
• हर आइकन बटन को एक लेबल दें, जैसे “पीछे” या “खोजें”।
• वेब पर, जब पेज में पहले से स्तर 1 की हेडिंग हो तो heading-level सेट करें, और जब बार पेज का बैनर हो तो उसे <header> में रखें।
• स्क्रीन के स्क्रॉल होने वाले व्यू को जोड़ें, या scrolled ख़ुद सेट करें, ताकि बार दिखाए कि कॉन्टेंट उसके नीचे है।
• React Native पर विंडो के इनसेट TanreiProvider को दें। React Native और Compose पर जो बार विंडो के सबसे ऊपर नहीं है, वह अलग इनसेट लेता है (insets={{ top: 0 }}, या आपके अपने windowInsets)।
• शीर्षक छोटे रखें। एलिप्सिस के साथ कटा हुआ शीर्षक अब भी पूरा पढ़ा जाता है, पर देखने वाले लोग सिर्फ़ उसकी शुरुआत देखते हैं।