ख़ाली स्टेट
वह चीज़ जो उस कॉन्टेंट की जगह रहती है जो वहाँ नहीं है, जैसे बिना नतीजों वाली खोज, वह लिस्ट जिसमें अभी किसी ने कुछ नहीं जोड़ा, या पहला आइटम आने से पहले का पेज। वह बताती है कि क्या नहीं है, क्यों नहीं है या क्या करना है, और वह क्रिया देती है जो यह काम करती है।
- श्रेणी
- कम्युनिकेशन
- टोकन
comp.empty-state- स्तर
- आधार
- Web
tanrei-empty-stateschedule - SwiftUI
TanreiEmptyStateradio_button_unchecked - Jetpack Compose
TanreiEmptyStateradio_button_unchecked - Flutter
TanreiEmptyStateradio_button_unchecked - React Native
EmptyStateradio_button_unchecked
इससे जनरेट किया गया: docs/status/status.json, specs/empty-state.spec.json
वह लिस्ट जिसमें अभी किसी ने कुछ नहीं जोड़ा, और वह खोज जिसे कुछ नहीं मिला
ख़ाली स्टेट वहाँ रहता है जहाँ कॉन्टेंट होता, पर है नहीं: वह लिस्ट, पंक्तियों या नतीजों की जगह लेता है। वह कुछ शब्दों में बताता है कि क्या नहीं है, एक वाक्य में बताता है कि क्यों नहीं है या क्या करना है, और वह कंट्रोल देता है जो यह काम करता है। वह हल्का और सपाट है, न फ़िल, न किनारा, और वह कॉन्टेंट है, जो वहीं पढ़ा जाता है जहाँ वह है: वह फ़ोकस नहीं लेता और उसका कोई स्टेट नहीं होता।
वेब पर यह <tanrei-empty-state> है। बाक़ी प्लैटफ़ॉर्म ने इसे अभी इम्प्लीमेंट नहीं किया है।
विवरण एलिमेंट का अपना कॉन्टेंट है। शीर्षक headline ऐट्रिब्यूट है, जो level के दिए स्तर की हेडिंग के रूप में दिखाया जाता है, या title स्लॉट, जहाँ वह आपकी अपनी हेडिंग या कोई और कॉन्टेंट हो। आइकन सेट का कोई ग्लिफ़, या आपकी अपनी कोई तस्वीर, media स्लॉट में जाती है, और आपके अपने बटन या लिंक actions स्लॉट में। हर शब्द आपका है: कंपोनेंट का अपना कोई शब्द नहीं है।
<!-- किसी व्यू के भीतर का रीजन: एक ग्लिफ़, एक शीर्षक, एक वाक्य, क्रिया। -->
<tanrei-empty-state headline="अभी कोई प्रोजेक्ट नहीं है">
<span slot="media">folder_open</span>
प्रोजेक्ट एक डिज़ाइन सिस्टम की लेयर, एक्सपोर्ट और लोगों को एक साथ रखता है।
<tanrei-button slot="actions">नया प्रोजेक्ट</tanrei-button>
<tanrei-button slot="actions" variant="text">लेयर इंपोर्ट करें</tanrei-button>
</tanrei-empty-state>
<!-- वह पेज जो पूरा का पूरा ख़ाली है: large, और उसका शीर्षक पेज की हेडिंग है। -->
<tanrei-empty-state size="large">
<h1 slot="title">यह पेज मौजूद नहीं है</h1>
हो सकता है पता ग़लत टाइप हुआ हो, या पेज कहीं और चला गया हो।
<a slot="actions" class="tanrei-link" href="/">शुरुआती पेज पर जाएँ</a>
</tanrei-empty-state>
<!-- साइड पैनल में: शुरुआती किनारे पर, जहाँ से लिस्ट शुरू होती। -->
<tanrei-empty-state align="start" headline="अभी आधार से कुछ अलग नहीं है">
बाईं ओर कोई मान बदलें, तो वह यहाँ दिखेगा।
</tanrei-empty-state>
<!-- किसी फ़िल्टर के जवाब में: दिखाए जाने पर एक बार, बिना टोके, पढ़कर सुनाया जाता है। -->
<tanrei-empty-state id="no-rows" live hidden headline="इन फ़िल्टर से कोई एंट्री मेल नहीं खाती">
तीन फ़िल्टर चालू हैं। एक हटाने पर ज़्यादा एंट्री दिखेंगी।
<tanrei-button slot="actions" variant="outlined">फ़िल्टर हटाएँ</tanrei-button>
</tanrei-empty-state>
<script type="module">
import '@tanrei/web/components/empty-state';
import '@tanrei/web/empty-state.css'; // वह जगह जो सर्वर पर रेंडर हुआ ख़ाली स्टेट एलिमेंट के डिफ़ाइन होने से पहले रखता है
</script>import { Button, EmptyState } from '@tanrei/react';
{rows.length === 0 && (
<EmptyState live headline="इन फ़िल्टर से कोई एंट्री मेल नहीं खाती">
तीन फ़िल्टर चालू हैं। एक हटाने पर ज़्यादा एंट्री दिखेंगी।
<Button slot="actions" variant="outlined" onClick={clearFilters}>फ़िल्टर हटाएँ</Button>
</EmptyState>
)}भाग, एक-एक करके जोड़े गए
शुरुआती किनारे पर, और large साइज़
संरचना
संरचना
title बनाता है, उसी के ऊपर बनाया गया।| भाग | विवरण |
|---|---|
1 container | The block that holds the message, as wide as the region it stands in and as tall as its content and its padding, with no fill, no edge and no elevation: it is drawn on the surface of the region whose content is missing. It carries no state. |
2 media · वैकल्पिक | What pictures the empty place, above the title: a glyph of the system's icon set, in a quiet color, or a picture of the product's own. Decorative: the title says it. |
3 title | What is missing, in a few words ("No results", "No projects yet"). The one part at the surface's full text color. Plain text unless the product gives a heading; it wraps and is never cut. |
4 description · वैकल्पिक | Why the place is empty, or what the person can do about it, in a sentence or two, in a quiet color. The product's content: text, with links where it needs them. |
5 actions · वैकल्पिक | One or two of the product's own Buttons or links that fill the place or change what was asked for ("New project", "Clear the filter"), in a row below the text. |
माप
माप
| लंबाई | टोकन | मान (px) |
|---|---|---|
container padding-inline | tanrei.comp.empty-state.container.padding-inline | 16 |
title बनाता है, उसी के ऊपर बनाया गया।प्रॉपर्टी
| प्रॉपर्टी | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
title | string | "" | What is missing, in a few words, in the product's language ("No results for tokne"). Exposed as a heading of the level `level` gives, since it is drawn as one. The title slot takes its place where the product needs inline content or a heading element of its own. |
level | number | 2 | The level of the heading the title prop is exposed as, 1 to 6, so that the empty state takes its place in the outline of the page around it: 2, the default, for the main region of a view under the page's own title; deeper inside a section, a card or a panel that has a heading of its own. Ignored where the title slot holds the product's own content, whose role and level are the product's. |
size | medium | large | "medium" | Medium is for an empty region inside a view: a list, a table's body, a card, a panel, a search's results. Large is for a view that is empty as a whole: the main region of a page before its first item, a page that was not found. It changes the room above and below, the glyph's size and the text styles. A design system may add values. |
align | center | start | "center" | Where the parts stand on the inline axis. Center, the default, is for a region that is otherwise blank. Start puts every part at the region's start edge with its text aligned there, for a narrow column, a list in a side panel or a table whose header stays in view, where the content would have begun at that edge. |
live | boolean | false | Whether the empty state is announced. False, the default, is for a place that is empty when its view is presented: it is read where it stands. True is for one that appears in answer to what the person did (a search that found nothing, a filter that matches no row, the last item removed): it is a live region, announced once, politely, when it is shown and when its text changes. It is never announced assertively and never takes focus: an empty place is not an error. It changes nothing that is drawn. |
स्लॉट
| स्लॉट | विवरण |
|---|---|
default | The description: text, with the product's own links and inline content. Empty draws the title alone. |
media | A glyph of the system's icon set, by name, drawn through the platform's icon helper at the media size; or a picture of the product's own (an illustration), which keeps its own size and colors. |
title | The product's own title content in place of the title prop: a heading of the level the page's outline needs, or text with inline content. The empty state draws it in the title's style and changes neither its role nor its level. |
actions | The actions: the product's own Buttons or links, one or two, the main one first. The empty state lays them out below the text and does nothing else to them. |
स्टेट
व्यवहार
EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।
| ID | आवश्यकता |
|---|---|
EMP-1 | THE empty state SHALL lay itself out as a block that takes the whole inline size of the region it is placed in and is as tall as its content and its padding: it SHALL lay out in one column, in this order, its media, its title, its description and its actions, those it has, padded above the first and below the last by the block padding of its size (comp.empty-state.container.padding-block.medium for medium, comp.empty-state.container.padding-block.large for large) and at the start and the end by comp.empty-state.container.padding-inline. THE empty state SHALL draw no fill, no edge and no elevation, SHALL bring no outer space of its own, SHALL set no height of its own and SHALL NOT scroll: where the region is taller, placing the block in it is the region's. |
EMP-2 | WHILE align is center THE empty state SHALL centre every part on the inline axis of its container and centre the lines of its title and its description; WHILE align is start THE empty state SHALL place every part at the container's start edge, inside the inline padding, and align the lines of its text to the start. In both THE empty state SHALL keep its title and its description no wider than comp.empty-state.content.measure times the description's font size, and no wider than the container less its inline padding. |
EMP-3 | WHERE the media slot holds a glyph THE empty state SHALL draw it first, in a box of the media size of its size (comp.empty-state.media.size.medium for medium, comp.empty-state.media.size.large for large), in comp.empty-state.media.color, with sys.icon.family.unselected and sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, and SHALL begin the title comp.empty-state.media.gap below it. WHERE the slot holds a picture or a view of the product's own THE empty state SHALL draw it in the same place at its own size, never wider than the container less its inline padding and with its proportions kept, and SHALL NOT color, clip or mirror it. THE empty state SHALL keep the media from assistive technology, and SHALL draw no media the product did not give. |
EMP-4 | THE empty state SHALL draw its title in the text style of its size (comp.empty-state.title.typescale.medium for medium, comp.empty-state.title.typescale.large for large) and in comp.empty-state.title.color; the title SHALL wrap and SHALL never be cut. THE empty state SHALL expose a title given as text as a heading — of the level the level prop gives on a platform whose headings have levels, and with the platform's heading trait on one whose headings have none — because it is drawn larger and heavier than what follows it, and a text drawn as a heading and not exposed as one tells by its look alone what its structure is. IF level is not a whole number from 1 to 6 THE empty state SHALL use 2 and report it in debug builds. WHERE the title slot holds content THE empty state SHALL draw that content in the title's place, style and color instead of the title prop, and SHALL change neither its role nor its level: a title the product gives as a heading stays a heading of the level the product gave it, and inline content the product gives stays what it is. THE empty state 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. |
EMP-5 | WHERE the default slot holds content THE empty state SHALL draw it as the description, comp.empty-state.title.gap below the title, in the text style of its size (comp.empty-state.description.typescale.medium for medium, comp.empty-state.description.typescale.large for large) and in comp.empty-state.description.color; the description SHALL wrap and SHALL never be cut or limited to a number of lines. A link in the description is the product's own and is drawn by its own spec, in its own color and underlined. |
EMP-6 | WHERE the actions slot holds content THE empty state SHALL lay it out in one row comp.empty-state.actions.gap below the text, in the order given from the start, comp.empty-state.actions.item-gap apart, centred or at the start as align says (EMP-2); WHERE the row does not fit the container THE empty state SHALL wrap it, comp.empty-state.actions.item-gap between its lines, and SHALL never cut or shrink an action below its own minimum. THE empty state SHALL NOT restyle, resize, reorder or rename the actions, and SHALL emit no event of its own: an action's press is that control's. |
EMP-7 | THE empty state SHALL NOT take pointer, touch or keyboard input, SHALL NOT take focus or be a stop in the focus order, and SHALL NOT change anything it draws under a pointer, a press or focus: it has no hovered, focused, pressed, selected or disabled state and draws no state layer and no focus indicator. What the product places in it — a link in the description, a Button in the actions — takes input and focus by its own spec, in the order the parts are drawn, and text in the title and the description SHALL remain selectable where the platform lets text be selected. |
EMP-8 | WHILE live is false THE empty state SHALL be exposed to assistive technology as plain content, read where it stands in reading order: its title as a heading (of the level level gives, or the product's own content in the title slot as the product gave it), then its description, then its actions as the controls they are. It SHALL have no role and no name of its own, SHALL NOT be announced when it is shown or when its text changes, SHALL NOT move focus, and SHALL NOT be exposed as an alert, a status, a dialog or a note: an empty place is content, not a message. |
EMP-9 | WHILE live is true THE empty state SHALL be a polite live region. WHEN it is shown after its page or view was first presented, and WHEN its title or its description changes while it is shown, THE empty state SHALL have assistive technology announce it once, after what is being read: the title, then the description, and not the names of its actions. It SHALL never announce assertively and SHALL NOT move keyboard or screen-reader focus. A live empty state that is drawn with the first presentation of its page or view SHALL NOT announce itself then. live SHALL change nothing that is drawn. |
EMP-10 | WHEN title, the title slot's content, the description, the media or the actions change THE empty state SHALL draw and expose the new value at once, without a motion, and SHALL announce it only as EMP-9 says. THE empty state SHALL neither show nor hide itself: whether the place is empty is the product's to know, and the product puts the empty state there and takes it away. |
EMP-11 | WHILE the text size is enlarged THE empty state SHALL grow its title and its description, and the measure with them, keep its paddings and gaps, wrap, and grow in height; it SHALL keep a glyph's box at the media size of its size, SHALL cut nothing and set no fixed height, SHALL lose no content when the reader raises line height, paragraph spacing, letter spacing or word spacing, and SHALL need no horizontal scrolling at a width of 320 points with text at 200 %, its actions then each on a line of their own where two do not fit side by side. |
EMP-12 | WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE empty state SHALL draw its glyph, its title and its description in the platform's text color, and leave links, Buttons and a picture of the product's own to their own specs and colors; nothing the empty state draws relies on a fill. |
EMP-13 | WHERE the layout direction is right-to-left THE empty state SHALL apply its paddings by logical start and end and mirror the order of its actions, so that the first action is at the right; WHILE align is start it SHALL place every part at the right edge and align its text to the right; WHILE align is center the column stays centred. |
EMP-14 | THE empty state 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 empty state is shown THE empty state SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows. |
EMP-15 | WHERE the layout direction is right-to-left THE empty state SHALL draw the glyph of its media slot mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order EMP-13 gives. THE empty state SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as a picture or a view of its own rather than by a glyph's name. |
EMP-16 | THE empty state SHALL lay out a title given as text as text of its own direction, isolated from the text around it: it takes the base direction of its first strong character, or the layout direction where it has none, so that a title that quotes what the person typed, a file's name or a number keeps its own order in a right-to-left layout; THE empty state SHALL still place the title and align its lines by the layout direction and by align, not by the text's own. The description's direction is its content's. |
EMP-17 | WHEN size names a value that the active design system does not have, or align names a value this spec does not have, THE empty state SHALL render with the default value, and in debug builds report the unknown value. |
EMP-18 | IF the title, the title slot and the description are all empty THE empty state SHALL draw nothing, take no space and expose nothing, and in debug builds report that an empty state says nothing: a glyph or actions alone do not tell a person what is missing. IF the description is given and the title and the title slot are empty THE empty state SHALL still render and in debug builds report that an empty state has no title. |
प्लैटफ़ॉर्म के अनुसार नामों का मिलान
पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।
| स्पेक | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| कंपोनेंट | tanrei-empty-state | TanreiEmptyState | TanreiEmptyState | TanreiEmptyState | EmptyState |
title · प्रॉपर्टी | headline | title | title | title | title |
level · प्रॉपर्टी | level | headingLevel | headingLevel | headingLevel | headingLevel |
size · प्रॉपर्टी | size | size | size | size | size |
align · प्रॉपर्टी | align | alignment | alignment | alignment | align |
live · प्रॉपर्टी | live | isLive | live | live | live |
| टिप्पणियाँ | It is the form the callout takes. <tanrei-empty-state> with the description as light-DOM children, the glyph or the picture in the media slot, the title in the title slot (<p slot="title">, or <h2 slot="title"> where it is a heading) or the headline attribute (HTML's global title attribute would show a tooltip over the whole block, as on the callout), which the shadow root draws as an element with role="heading" and aria-level from level (a number property and attribute, 2 by default), and Buttons or links in the actions slot. Everything the product writes stays in the document: the title where it is slotted, the description, the links and the Buttons are light-DOM content, read by a crawler and by a page without script. **Before the element is defined** the stylesheet of @tanrei/web gives tanrei-empty-state:not(:defined) display: block, the block and inline padding of its size, the description's text style and color, and text-align by its align, so the content is readable in its place and the block keeps most of its height; a headline attribute does not show until the element is defined, which is why a page that must read without script gives the title in the slot. The host has no role, no tabindex and no listeners; the glyph is aria-hidden. With live the announcement is made through a visually hidden role="status" region in the shadow root that exists from the element's first render and is filled, with the title and the description's text, only when the element is connected or changed after the document's first presentation (EMP-9); the host itself gets no live role, so slotted content is not read twice. The text block's width is max-inline-size: calc(var(--tanrei-comp-empty-state-content-measure) * 1em) on the element that carries the description's font size (EMP-2). The description takes its color and text style through inherited color and font, so text placed directly in the element is styled. In a table the element goes in one <td colspan> of a body row, or directly after the table, which keeps its caption and its header row (the Table spec says nothing of an empty body); in a list it takes the list's place rather than being an item. Nothing changes under forced-colors: active but the colors the mode sets (EMP-12). | TanreiEmptyState(_ title: String, size:, alignment:, isLive:, media:, actions:) { description }, the glyph given by name through icon: or a view through media:; a heading title is the title: view builder with the header trait set by the product. Not the platform's own unavailable-content view, whose sizes and colors are the platform's: the same structure drawn from Tanrei's tokens. isLive posts one announcement with the title and the description when the view appears after its screen did. Not built on this platform yet: EMP-4's title given as text exposed as a heading, and level. | TanreiEmptyState(title, size, alignment, live, media, actions) { description }, the glyph given by name through icon or a composable through media. With live the text column has liveRegion = LiveRegionMode.Polite, set only after the first composition of its screen. Not built on this platform yet: EMP-4's title given as text exposed as a heading, and level. | TanreiEmptyState(title: …, size:, alignment:, live:, icon:, media:, actions: […], child: description); titleWidget: takes a heading of the product's own. With live the text is wrapped in Semantics(liveRegion: true) after the first frame of its route, and announced through SemanticsService.announce with polite assertiveness where the platform does not read live regions. Not built on this platform yet: EMP-4's title given as text exposed as a heading, and level. | <EmptyState title="No projects yet" icon="folder_open" actions={…}>description</EmptyState>; media takes an element of the product's own. With live, accessibilityLiveRegion="polite" on Android and one AccessibilityInfo.announceForAccessibility call on iOS when it mounts after its screen. Follows the app's direction where an ancestor's is not known. Not built on this platform yet: EMP-4's title given as text exposed as a heading, and level. |
टोकन
| टोकन | किसका एलियास | रिज़ॉल्व किया गया मान (लाइट) |
|---|---|---|
--tanrei-comp-empty-state-actions-gap | sys.space.space200 | 16px |
--tanrei-comp-empty-state-actions-item-gap | sys.space.space100 | 8px |
--tanrei-comp-empty-state-container-padding-block-large | sys.space.space800 | 64px |
--tanrei-comp-empty-state-container-padding-block-medium | sys.space.space400 | 32px |
--tanrei-comp-empty-state-container-padding-inline | sys.space.space200 | 16px |
--tanrei-comp-empty-state-content-measure | — | 30 |
--tanrei-comp-empty-state-description-color | sys.color.on-surface-variant | |
--tanrei-comp-empty-state-media-color | sys.color.on-surface-variant | |
--tanrei-comp-empty-state-media-gap | sys.space.space200 | 16px |
--tanrei-comp-empty-state-media-size-large | — | 48px |
--tanrei-comp-empty-state-media-size-medium | sys.icon.large | 32px |
--tanrei-comp-empty-state-title-color | sys.color.on-surface | |
--tanrei-comp-empty-state-title-gap | sys.space.space50 | 4px |
--tanrei-comp-empty-state-description-typescale-large | sys.typescale.body-large | 400 16px/1.625 |
--tanrei-comp-empty-state-description-typescale-medium | sys.typescale.body | 400 14px/1.5714 |
--tanrei-comp-empty-state-title-typescale-large | sys.typescale.heading-3 | 500 20px/1.4 |
--tanrei-comp-empty-state-title-typescale-medium | sys.typescale.heading-5 | 500 16px/1.5 |
फ़िक्स्चर
मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।
size: medium (12)
title
title: No projects yet description
title: No projects yet media
title: No projects yet slots: media actions
title: No projects yet slots: media, actions start
title: No projects yet align: start slots: media, actions search-no-results
title: No results for “tokne” live: true slots: media, actions table-no-rows
title: No entries match these filters slots: actions list-no-items
title: Nothing differs from the base yet align: start long-text
title: No results for “the contrast of a status… slots: media, actions actions-rtl
title: لا توجد مشاريع بعد direction: rtl slots: media, actions start-rtl
title: لا توجد مشاريع بعد align: start direction: rtl slots: media, actions search-no-results-rtl
title: لا نتائج عن “tokne” live: true direction: rtl slots: media, actions size: large (4)
large
title: No projects yet size: large slots: media, actions large-title
title: This page does not exist size: large large-start
title: This page does not exist size: large align: start slots: actions title-slot
size: large slots: title, actions इससे जनरेट किया गया: specs/empty-state.spec.json, tokens/comp/empty-state.tokens.json, design/tokens/
| कंपोनेंट | यह क्या है | यह कहाँ रहता है |
|---|---|---|
| ख़ाली स्टेट | उस कॉन्टेंट की जगह जो वहाँ नहीं है। | जहाँ लिस्ट, पंक्तियाँ या नतीजे होते। |
| कॉलआउट | उस कॉन्टेंट के बारे में सूचना जो वहाँ है। | उस कॉन्टेंट के बग़ल में, फ़्लो में। |
| स्नैकबार | अभी-अभी हुई किसी बात का नतीजा। | कॉन्टेंट के ऊपर, थोड़ी देर के लिए। |
| खोज की स्थिति का टेक्स्ट | जो मिला उसकी गिनती (“tokne के लिए कोई नतीजा नहीं मिला”)। | खोज की अपनी स्थिति वाली पंक्ति में। |
ख़ाली जगह कोई त्रुटि नहीं है। जो कॉन्टेंट लोड नहीं हो सका, वह उसी जगह त्रुटि की स्थिति वाला कॉलआउट है, और जो कॉन्टेंट अभी लोड हो रहा है, वह लोडिंग इंडिकेटर है। किसी रीजन के तीन स्टेट हैं: लोड हो रहा, ख़ाली और विफल। इनके बीच बदलना उस रीजन का काम है; ख़ाली स्टेट ख़ुद को न दिखाता है, न छिपाता है।
size |
ऊपर और नीचे | ग्लिफ़ | शीर्षक | विवरण | किसके लिए |
|---|---|---|---|---|---|
medium (डिफ़ॉल्ट) |
32 | 32 | 16 | 14 | किसी व्यू के भीतर का रीजन: लिस्ट, टेबल की बॉडी, कार्ड, पैनल, खोज के नतीजे। |
large |
64 | 48 | 20 | 16 | वह व्यू जो पूरा का पूरा ख़ाली है: पहला आइटम आने से पहले का पेज, वह पेज जो नहीं मिला। |
ब्लॉक उतना चौड़ा होता है जितना उसका रीजन, और उतना ऊँचा जितना उसका कॉन्टेंट और पैडिंग। जहाँ रीजन इससे ऊँचा है, वहाँ ब्लॉक को उसमें रखना, यानी उसे बीच में रखना या टेबल की न्यूनतम ऊँचाई बनाए रखना, रीजन का काम है। टेक्स्ट एक पंक्ति में लगभग 60 लैटिन अक्षरों तक रखा जाता है (विवरण के साइज़ का 30 गुना), ताकि चौड़ी टेबल के बीच का कोई वाक्य एक किनारे से दूसरे किनारे तक न फैले।
align का center (डिफ़ॉल्ट) उस रीजन के लिए है जिसमें और कुछ नहीं है, और start सँकरे कॉलम, साइड पैनल की लिस्ट, या उस टेबल के लिए जिसका हेडर नज़र में रहता है: तब संदेश वहाँ से शुरू होता है जहाँ से कॉन्टेंट शुरू होता।
headline हेडिंग के रूप में दिखाया जाता है, क्योंकि वह हेडिंग की तरह बनाया जाता है: डिफ़ॉल्ट रूप से स्तर 2 का, पेज के अपने शीर्षक के नीचे किसी व्यू के मुख्य रीजन के लिए। level को उस स्तर पर सेट करें जो आपके पेज की आउटलाइन को चाहिए: जिस सेक्शन, कार्ड या पैनल की अपनी हेडिंग है, उसके भीतर ज़्यादा गहरा। title स्लॉट का शीर्षक किसी भी शीर्षक की तरह बनता है, और ख़ाली स्टेट न उसका रोल बदलता है, न स्तर: वहाँ अपना हेडिंग एलिमेंट दें, या टेक्स्ट, जहाँ शीर्षक हेडिंग नहीं होना चाहिए।
जो पेज सर्वर पर रेंडर होता है, उसमें शीर्षक title स्लॉट में दें: headline ऐट्रिब्यूट को एलिमेंट बनाता है, इसलिए वह एलिमेंट के डिफ़ाइन होने से पहले नहीं दिखता।
ग्लिफ़ उसके नाम से दिया जाता है, एक एलिमेंट में: <span slot="media">folder_open</span>। वह मीडिया के साइज़ पर, हल्के रंग में बनता है। स्लॉट की बाक़ी हर चीज़, जैसे कोई <img>, कोई <svg> या आपका अपना कोई एलिमेंट, एक तस्वीर है: वह अपना साइज़ और अपने रंग रखती है, ब्लॉक से चौड़ी कभी नहीं होती, और कभी मिरर नहीं होती। मीडिया सजावटी है और सहायक तकनीक से छिपा रहता है, इसलिए आगे बढ़ने का अकेला रास्ता तस्वीर में न रखें। Tanrei के साथ कोई इलस्ट्रेशन नहीं आता।
क्रियाएँ आपके अपने बटन या लिंक हैं, एक या दो, मुख्य वाला पहले। ख़ाली स्टेट उन्हें ऐसी पंक्ति में रखता है जो अगली पंक्ति में जा सकती है, और उनके साथ और कुछ नहीं करता। जिस क्रिया का लेबल अपनी पंक्ति से लंबा है, उसे पूरी पंक्ति दी जाती है: तब बटन अपने लेबल को रैप करता है, इसलिए न कुछ कटता है और न कुछ ब्लॉक से बाहर जाता है।
सँकरे कॉलम में हर क्रिया अपनी अलग पंक्ति लेती है, और लंबा लेबल रैप होता है
live उस ख़ाली स्टेट के लिए है जो उसका नतीजा है जो व्यक्ति ने अभी-अभी किया: वह फ़िल्टर जिससे कोई पंक्ति मेल नहीं खाती, या आख़िरी आइटम का हटाया जाना। वह एक बार, बिना टोके (polite), पढ़कर सुनाया जाता है, पहले शीर्षक, फिर विवरण, और क्रियाएँ नहीं, जब वह दिखाया जाता है और जब उसका टेक्स्ट बदलता है। उसे hidden के साथ पेज में रखें, या जब वह लागू हो तब जोड़ें।
लाइव ख़ाली स्टेट, जो दबाने के जवाब में दिखता है
जो ख़ाली स्टेट पेज के मार्कअप में है और पेज लोड होते समय दिखता है, वह उस समय पढ़कर नहीं सुनाया जाता। वेब पर, वह लाइव ख़ाली स्टेट पढ़कर सुनाया जाता है जिसे आपकी स्क्रिप्ट पेज के लोड हो जाने के बाद उसमें जोड़ती है; एलिमेंट यह फ़र्क़ नहीं कर सकता कि वह किसी बात के जवाब में जोड़ा गया है या सिंगल-पेज ऐप्लिकेशन के नए व्यू के साथ, इसलिए जो ख़ाली स्टेट बस नए व्यू का हिस्सा है, उस पर live न लगाएँ।
खोज में नतीजों की गिनती खोज की अपनी स्थिति का टेक्स्ट है, जो पहले से पढ़कर सुनाया जाता है। जहाँ आप खोज के व्यू में ख़ाली स्टेट भी दिखाते हैं, वहाँ उस पर live न लगाएँ, वरना वही शब्द दो बार पढ़े जाते हैं।
बिना पंक्तियों की टेबल अपना कैप्शन और अपनी हेडर पंक्ति रखती है; ख़ाली स्टेट वहाँ रहता है जहाँ बॉडी की पंक्तियाँ होतीं, यानी सभी कॉलम में फैले एक सेल में, या टेबल के ठीक बाद। बिना आइटम की लिस्ट एक आइटम की लिस्ट नहीं है: ख़ाली स्टेट लिस्ट की जगह लेता है।
विवरण, title स्लॉट और क्रियाएँ एलिमेंट के अपने चाइल्ड हैं, इसलिए वे दस्तावेज़ में हैं: पेज में खोजने पर मिलते हैं, अनुवाद होते हैं, चुने जा सकते हैं, और स्क्रिप्ट के बिना पढ़े जाते हैं। @tanrei/web/empty-state.css उस ख़ाली स्टेट को, जो अभी डिफ़ाइन नहीं हुआ है, उसकी पैडिंग, उसके टेक्स्ट स्टाइल और उसका अलाइनमेंट देती है, इसलिए शब्द वहीं पढ़े जा सकते हैं जहाँ वे बाद में रहेंगे। तब तक वह अपने ग्लिफ़ के बिना दिखता है।
- शीर्षक में सीधे-सादे शब्दों में बताएँ कि क्या नहीं है, और विवरण में बताएँ कि क्या करना है।
- वह क्रिया दें जो उस जगह को भरती है, या जो माँगा गया था उसे बदलती है।
- बिना नतीजों वाली खोज के शीर्षक में वह उद्धृत करें जो व्यक्ति ने टाइप किया था।
- इसे स्थिति का कोई रंग या अलर्ट का रोल न दें। ख़ाली जगह कॉन्टेंट के बारे में एक तथ्य है।
- जो जगह अपना व्यू खुलते समय ही ख़ाली है, उसके लिए
liveइस्तेमाल न करें। - बीच में रखा स्लेटी वाक्य हाथ से न बनाएँ, और न ऐसी एक आइटम की लिस्ट जिसका आइटम असल में आइटम नहीं है।
- इसे किसी कंट्रोल के भीतर की एक पंक्ति के “यहाँ कुछ नहीं है” के लिए इस्तेमाल न करें, जैसे बिना विकल्पों वाला मेन्यू: वह उस कंट्रोल का अपना टेक्स्ट है।
- रोल
none- लेबलिंग
- An empty state that is not live has no role and no name: it is content, read where it stands — the title (a heading of the level level gives, or the product's own content in the title slot as the product gave it), the description, then the actions, which are the product's own controls with their own names. A live empty state is a polite live region instead (the status role on the web), announced once when it is shown after its view was presented and when its text changes. The glyph or the picture is hidden.
- न्यूनतम टार्गेट
- दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px
कीबोर्ड
| कुंजियाँ | क्रिया |
|---|
टिप्पणियाँ
- Not interactive: the empty state takes no input and no focus (EMP-7), so there is no target of its own to size and minimumTarget holds trivially. Its actions meet the minimum target by their own specs.
- Never an alert. An empty place is a fact about the content, not something that went wrong: it is announced only when it results from what the person just did (live), and then politely (EMP-9). A failure to load is a different thing and is said by a callout with the error status in the same place.
- It replaces content, so it must not hide that the container is still there. A table that has no rows keeps its caption and its header; the empty state stands where the body's rows would be (on the web, outside the table element or in one cell that spans the columns, as the product's table allows). A list with no items is not exposed as a list of one item: the empty state stands in the list's place.
- In a search, the count of results is the search's own status text, which is already a live region (SRC-48). Where the product also shows an empty state in the search's view, only one of the two is live, or the same words are announced twice: leave the empty state's live false there and let the status text speak.
- The title is a heading (EMP-4) because it looks like one (WCAG 1.3.1). Its level is the product's to fit the page's outline: 2 by default, for the main region of a view under the page's title; deeper inside a section, a card or a panel that has a heading of its own. A product whose title must not be a heading gives it as inline content in the title slot.
- Contrast in the default system: the title is on-surface and the description and the glyph are on-surface-variant, each held to 4.5:1 on every surface tone by the token invariants, so the empty state can stand on a page, in a card or in a panel. The glyph is decorative.
- Say what to do, not only what is missing: a description and an action are what make an empty place a way forward. Do not put the only way forward in the picture.
- Text size, text spacing and reflow: EMP-11.
इससे जनरेट किया गया: specs/empty-state.spec.json, tokens/sys/measure.tokens.json
- यह सादा कॉन्टेंट है, जिसका न कोई रोल है, न नाम: शीर्षक, विवरण, फिर क्रियाएँ, जो वहीं पढ़े जाते हैं जहाँ वे हैं।
liveके साथ यह अपने ही एक स्थिति वाले रीजन के ज़रिए एक बार, बिना टोके (polite), पढ़कर सुनाया जाता है: जब यह पेज के पेश हो जाने के बाद दिखाया जाता है, और जब इसका शीर्षक या विवरण बदलता है। यह कभी ज़ोर देकर नहीं सुनाया जाता।- ग्लिफ़ या तस्वीर सहायक तकनीक से छिपी रहती है।
- टेक्स्ट के रूप में दिया गया शीर्षक
levelके दिए स्तर की हेडिंग है।titleस्लॉट में आप जो देते हैं, वह अपना रोल और स्तर बनाए रखता है। - यह फ़ोकस के क्रम का कोई पड़ाव नहीं है और फ़ोकस को कभी कहीं और नहीं ले जाता। Tab विवरण के लिंक पर पहुँचती है, फिर क्रियाओं पर।
- बड़े किए गए टेक्स्ट के साथ सब कुछ रैप होता है और बढ़ता है; 320 की चौड़ाई पर, 200% टेक्स्ट के साथ, कुछ भी आड़ा स्क्रॉल नहीं होता और हर क्रिया अपनी अलग पंक्ति में रहती है।
- फ़ोर्स्ड कलर्स में ग्लिफ़, शीर्षक और विवरण टेक्स्ट के रंग में बनते हैं। कुछ भी किसी फ़िल पर निर्भर नहीं है।
- दाएँ से बाएँ वाले लेआउट में शुरुआत दायाँ किनारा है और पहली क्रिया दाईं ओर रहती है, जिस ग्लिफ़ को आइकन सेट चिह्नित करता है वह मिरर होता है, और जिस शीर्षक में बाएँ से दाएँ वाली क्वेरी लिखी है, उसमें क्वेरी का अपना क्रम बना रहता है।
- अनजान साइज़ या अलाइनमेंट, बिना शीर्षक और बिना विवरण का ख़ाली स्टेट, और विवरण वाला पर बिना शीर्षक का ख़ाली स्टेट डीबग बिल्ड में रिपोर्ट किए जाते हैं।
- हर शब्द पेज की भाषा में लिखें। कंपोनेंट कोई शब्द नहीं देता।
levelको अपने पेज की आउटलाइन के हिसाब से सेट करें, याtitleस्लॉट में अपनी हेडिंग या टेक्स्ट दें।liveसिर्फ़ उस ख़ाली स्टेट के लिए इस्तेमाल करें जो किसी बात के जवाब में दिखता है, और किसी ऐसे दूसरे लाइव रीजन के बग़ल में कभी नहीं जो वही बात कहता है।mediaस्लॉट में कोई कंट्रोल न रखें: वह सहायक तकनीक से छिपा रहता है।- क्रिया को ऐसा लेबल दें जो समा जाए। जहाँ पंक्ति बहुत छोटी है वहाँ लेबल रैप होता है, पर पंक्ति से लंबा अकेला शब्द रैप नहीं हो सकता।