होम कंपोनेंटफ़िगर

फ़िगर

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

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

content_copy

Markdown में देखें

श्रेणी: कंटेनमेंट
टोकन: comp.figure
स्तर: आधार

अवलोकन

Web: tanrei-figure; schedule
SwiftUI: TanreiFigure; radio_button_unchecked
Jetpack Compose: TanreiFigure; radio_button_unchecked
Flutter: TanreiFigure; radio_button_unchecked
React Native: Figure; radio_button_unchecked

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

Outlined, filled और plain

सेव करें

Outlined: एक बारीक रेखा के भीतर सरफ़ेस।

सेव करें

Filled: एक हल्का टोन, और कोई किनारा नहीं।

सेव करें

Plain: जो दिखाया गया है, वही अपना फ़्रेम है।

फ़िगर ऐसी एक चीज़ दिखाता है जो पढ़ी नहीं, देखी जाती है: किसी लेख की तस्वीर, किसी रिपोर्ट का चार्ट, इस बात का प्रीव्यू कि कोई सेटिंग क्या बनाएगी, या कोई नमूना। वह उस चीज़ को अलग रखता है और बताता है कि वह क्या है। इस साइट पर लाइव उदाहरणों के चारों ओर के फ़्रेम फ़िगर हैं।

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

वेब पर यह एक नेटिव <figure> के चारों ओर <tanrei-figure> है। एलिमेंट में कोई शैडो रूट नहीं है, इसलिए फ़िगर और उसका <figcaption> दस्तावेज़ के अपने हैं: वे स्क्रिप्ट के बिना भी पढ़े जाते हैं, क्रॉलर और रीडर मोड भी उन्हें पढ़ते हैं, और नाम उन्हें ब्राउज़र देता है। बाक़ी प्लैटफ़ॉर्म ने इसे अभी इम्प्लीमेंट नहीं किया है।

इस्तेमाल

<link rel="stylesheet" href="@tanrei/web/figure.css" />

<tanrei-figure>
  <figure>
    <div data-part="frame">
      <header>
        <p data-part="title">तिमाही के अनुसार रेवेन्यू</p>
        <div data-part="actions">
          <tanrei-button variant="text" label="नए टैब में खोलें"><span slot="icon">open_in_new</span></tanrei-button>
        </div>
      </header>
      <div data-part="stage">
        <img src="revenue.svg" alt="एक बार चार्ट: रेवेन्यू हर तिमाही में बढ़ता है।" />
      </div>
    </div>
    <figcaption>हर क्षेत्र में रेवेन्यू बढ़ा; उत्तरी क्षेत्र में सबसे तेज़।</figcaption>
  </figure>
</tanrei-figure>

<script type="module">
  import '@tanrei/web/components/figure';
</script>

import { Figure } from '@tanrei/react';
import '@tanrei/web/figure.css';

<Figure variant="plain">
  <figure>
    <img src={photo.src} alt={photo.alt} />
    <figcaption>{photo.caption}</figcaption>
  </figure>
</Figure>

@tanrei/web/figure.css किसी भी स्क्रिप्ट के चलने से पहले पूरा फ़िगर बना देती है, इसलिए फ़िगर वाला पेज स्क्रिप्ट के आने पर नहीं हिलता। एलिमेंट वही स्टाइलशीट पेज में ख़ुद जोड़ता है।

आप क्या लिखते हैं

भाग	वेब पर
फ़्रेम	`<div data-part="frame">`, `<figure>` का पहला चाइल्ड। इसमें हेडर, स्टेज और अटैचमेंट रहते हैं।
शीर्षक	फ़्रेम के `<header>` में `data-part="title"` वाला एलिमेंट: एक `<p>`, या वह हेडिंग जो आपके पेज की आउटलाइन को चाहिए।
क्रियाएँ	`<header>` में `<div data-part="actions">`, आपके अपने कंट्रोल के चारों ओर।
स्टेज	`<div data-part="stage">`, उस चीज़ के चारों ओर जो दिखाई जा रही है।
अटैचमेंट	स्टेज के बाद `data-part="attachment"` वाला कोई भी एलिमेंट: कोड ब्लॉक, टेबल, डिस्क्रिप्शन लिस्ट।
कैप्शन	`<figcaption>`, फ़्रेम के बाद।

स्टेज को छोड़कर हर भाग वैकल्पिक है। अकेला <img>, <picture>, <video>, <svg> या <canvas> स्टेज एलिमेंट की जगह ले सकता है। जिस फ़िगर में फ़्रेम एलिमेंट है ही नहीं, यानी <figure><img …><figcaption>…</figcaption></figure>, जैसा Markdown रेंडरर लिखता है, वह भी बनता है: तब तस्वीर ही अपना फ़्रेम होती है।

वह फ़िगर जिसे एलिमेंट बनाता है

जिस <tanrei-figure> में कोई <figure> नहीं है, उसे एलिमेंट के डिफ़ाइन होने पर एक <figure> दिया जाता है। उसके चाइल्ड स्टेज बन जाते हैं, उन्हें छोड़कर जो slot से किसी भाग का नाम लेते हैं (title, actions, caption, attachment)। headline और caption ऐट्रिब्यूट शीर्षक और कैप्शन के रूप में लिखे जाते हैं।

<tanrei-figure headline="वेरिएंट" caption="एक filled बटन।">
  <tanrei-button variant="filled">सेव करें</tanrei-button>
</tanrei-figure>

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

स्पेक

एक शीर्षक, एक कंट्रोल, एक जुड़ा हुआ ब्लॉक और एक कैप्शन

वेरिएंट

open_in_new

Filled

<tanrei-button variant=“filled”>Filled</tanrei-button>

एक filled बटन और उसका मार्कअप।

पैडिंग के बिना: जो दिखाया गया है, वह फ़्रेम के किनारों तक पहुँचता है

फ़्रेम अपने भीतर की चीज़ को अपने कोनों पर काट देता है।

अपने स्टेज से चौड़ा: वह वहीं स्क्रॉल होता है, और स्टेज फ़ोकस का एक पड़ाव है

Filled

Tonal

Elevated

Outlined

Text

ऐसी पंक्ति में पाँच बटन जो रैप नहीं होती।

ग्रिड, बिंदु, बीच की ओर मिटती ग्रिड, और चेकरबोर्ड

सेव करें

grid: हर 24 पर रेखाएँ।

सेव करें

dots: उसी दूरी पर बिंदु।

सेव करें

grid-fade: ग्रिड, जिसका बीच ख़ाली रहता है।

सेव करें

checkerboard: जहाँ तस्वीर पारदर्शी हो सकती है।

संरचना

भाग	विवरण
1 `container`	The frame: the shape that holds the header, the stage and the attachment, with a card's corners. Filled with the surface and edged in the outlined look, filled with a quiet tone in the filled look, and neither filled nor edged in the plain look. It carries no state: nothing about it answers a pointer, a press or focus.
2 `outline` · वैकल्पिक	The outlined look's edge: one hairline inside the frame.
3 `header` · वैकल्पिक	The row at the top of the frame that holds the title and the actions. Drawn only where the figure has one of them.
4 `title` · वैकल्पिक	A short line that names what is shown, at the start of the header. Text, never a heading by itself.
5 `actions` · वैकल्पिक	The product's own controls at the end of the header (which variant, which theme, open it elsewhere). The figure lays them out and nothing else.
6 `stage`	Where the thing shown stands: the product's content, padded inside the frame or reaching its edges, scaled down where it can shrink and scrolled sideways inside the stage where it cannot.
7 `pattern` · वैकल्पिक	The ground pattern behind what is shown, where the product asks for one: grid lines, a dot grid, a grid that fades toward the centre, or a checkerboard, drawn across the stage's box over the frame's fill and under the content. Decoration only.
8 `attachment` · वैकल्पिक	The product's block joined under the stage, inside the frame: the code an example was made from, the data of a chart, the facts about a specimen.
9 `divider` · वैकल्पिक	The line between the header and the stage and between the stage and the attachment, while the separation is a divider and the look has a frame.
10 `caption` · वैकल्पिक	The text below the frame that says what is shown, in secondary text on the surface the figure sits on.
11 `focus-ring` · वैकल्पिक	The system's focus indicator inside the stage's edge, drawn only while the stage scrolls and has keyboard focus.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`title`	`string`	`""`	The title: a short line above the stage that names what is shown ("Variants", "Revenue by quarter"). Plain text, never a heading; the title slot takes the product's own content in its place. It is the figure's accessible name where it is given.
`caption`	`string`	`""`	The caption: the text below the frame that says what is shown. The caption slot takes the product's own content in its place (a caption with a link, inline code or a tag). It is the figure's accessible name where there is no title, and its description where there is one.
`label`	`string`	`""`	The accessible name of a figure that draws neither a title nor a caption, in the product's language. Never drawn. Ignored where a title or a caption is given.
`variant`	`outlined` \| `filled` \| `plain`	`"outlined"`	How the stage is set apart. outlined: the surface inside one hairline, the default. filled: a quiet tone and no edge, where one more line would crowd the page. plain: no fill, no edge, no padding and no line, for a picture that is its own frame. A design system may add values.
`inset`	`boolean`	`true`	Whether the stage is padded inside the frame. True for a specimen or a live example, which needs room around it; false for a picture, a chart or a map that should reach the frame's edges and be clipped by its corners. The plain look has no frame to be inset from and is never padded.
`separation`	`auto` \| `divider` \| `gap`	`"auto"`	How the parts inside the frame are told apart. auto takes comp.figure.separation, which follows the system's choice. divider draws a line between the header and the stage and between the stage and the attachment, the attachment flush with the frame. gap draws no line and stands the attachment inside the frame with its own shape. The plain look has no frame and draws neither.
`pattern`	`none` \| `grid` \| `dots` \| `grid-fade` \| `checkerboard`	`"none"`	The ground pattern drawn behind what is shown, across the stage. none: the plain fill, the default. grid: lines in both directions, the ground of a layout or a design canvas. dots: a dot at every crossing of that grid, a quieter ground for a drawing or a diagram. grid-fade: the grid, clear around the centre and growing toward the edges, so that a specimen at the centre stands on the plain fill and the grid frames it. checkerboard: small squares, the ground that shows where a picture is transparent. Decoration only: it says nothing to assistive technology, and the plain look and forced colors draw none.

स्लॉट

स्लॉट	विवरण
`default`	What is shown, in the stage: a picture, a video, a chart, a diagram, a specimen, a live example of the product's own components. The figure does not style, crop, mirror or operate it.
`title`	The product's own title content in place of the title prop: text with inline content, or a heading of the level the page's outline needs. The figure draws it in the title's style and changes neither its role nor its level.
`actions`	The controls at the end of the header: the product's own icon-only Buttons, tabs, a select or links. The figure lays them out in a row and does nothing else to them.
`caption`	The product's own caption content in place of the caption prop: text with links, inline code, a keyboard shortcut or a tag.
`attachment`	The block joined under the stage, inside the frame: a code block, a table, a description of the specimen. It is the product's component and keeps its own styles.

स्टेट

व्यवहार

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

ID	आवश्यकता
`FIG-1`	THE figure SHALL draw, from top to bottom, a frame that holds its header where it has one (FIG-7), its stage and its attachment where it has one (FIG-11), and below the frame its caption where it has one (FIG-10); the frame SHALL have corners comp.figure.container.shape eased by sys.shape.corner-smoothing, SHALL clip what it holds to those corners, SHALL be exactly as tall as what it holds, with no height and no minimum height of its own, and SHALL draw no elevation.
`FIG-2`	WHILE variant is outlined THE figure SHALL fill its frame with comp.figure.outlined.container.color and draw an edge comp.figure.outline.width wide in comp.figure.outline.color inside the frame's size, following its corners, without changing the frame's size or the place of what it holds; WHILE variant is filled it SHALL fill the frame with comp.figure.filled.container.color and draw no edge; WHILE variant is plain it SHALL draw no fill (comp.figure.plain.container.color), no edge, no padding and no line, so that what is shown is its own frame, and SHALL still clip the stage to comp.figure.container.shape.
`FIG-3`	THE figure SHALL place the content of its default slot in the stage and draw nothing of its own there, between the frame's fill and that content or over it, but the ground pattern the product asks for (FIG-26), under the content. WHILE inset is true and variant is not plain THE stage SHALL be padded by comp.figure.stage.padding-block above and below and comp.figure.stage.padding-inline before and after; WHILE inset is false or variant is plain THE stage SHALL have no padding, so that the content reaches the frame's edges. WHILE variant is outlined or filled THE figure SHALL hand the content comp.figure.content.color as the platform's inherited foreground and SHALL place content narrower or shorter than the stage at the stage's centre; WHILE variant is plain it SHALL hand no color and SHALL place content narrower than the stage at the stage's start edge, in line with the text around the figure. Several pieces of content SHALL be stacked in the order given with no space of the figure's between them: how several specimens are arranged is the product's layout.
`FIG-4`	WHEN content that has proportions of its own and can shrink — a picture, a video, a drawing — is wider than the stage's inner width THE figure SHALL scale it down to that width with its proportions kept (PRS-15), and SHALL NOT scale any content above its own size, crop it or stretch it: an aspect ratio and how a picture fills a box are the content's own.
`FIG-5`	WHEN content that cannot shrink is wider than the stage's inner width THE stage SHALL scroll it sideways inside its own box, beginning at the start edge and with that content placed at the start edge rather than at the centre, the stage's inline padding scrolling with the content so that its last part can be brought clear of the frame's edge; the header, the attachment and the caption SHALL NOT scroll with it, the figure SHALL never be wider than its layout and SHALL never make what holds it scroll sideways, and THE stage SHALL NOT scroll up and down: it is as tall as its content.
`FIG-6`	WHILE the stage scrolls (FIG-5) THE stage SHALL be one stop in the focus order, before anything inside it that takes focus, exposed as a group that carries the figure's name (FIG-16); WHILE it has keyboard focus it SHALL draw the system's focus indicator inside its edge — sys.focus.outer-width wide in the color role focus-ring, set in from the edge by sys.focus.offset so that nothing clips it, following the frame's corners where the stage meets them, and never animated — and the left and right arrow keys, Home and End SHALL scroll it as the platform scrolls a region, the arrow keys moving the view left and right in either layout direction; focus gained by pointer or touch SHALL NOT show the indicator; WHILE the stage does not scroll it SHALL NOT be a stop in the focus order and SHALL expose no group of its own.
`FIG-7`	WHERE the figure has a title (FIG-8) or content in its actions slot THE figure SHALL draw a header at the top of the frame: one row with the title at the start and the actions at the end, comp.figure.header.gap apart, padded by comp.figure.header.padding-block above and below, by comp.figure.header.padding-inline at the start, and at the end by comp.figure.header.padding-inline-end-with-actions where it holds actions and by comp.figure.header.padding-inline where it does not; the title SHALL take the room the actions leave and wrap inside it, the actions SHALL keep their own sizes, and WHEN the actions and one word of the title no longer fit in one row THE actions SHALL move to a row of their own below the title, at the start edge, comp.figure.header.gap below it. WHERE the figure has neither THE figure SHALL draw no header, no space for one and no line under one.
`FIG-8`	THE figure SHALL draw its title — the content of the title slot where it holds any, and the title prop otherwise — in comp.figure.title.typescale and comp.figure.title.color, wrapping and never cut; the title prop SHALL be exposed as plain text and never as a heading, and content given in the title slot SHALL keep the role and the level the product gave it (a heading stays the heading it is) while it is drawn in the title's style. IF both the prop and the slot are given THE slot SHALL be drawn and the prop ignored. THE figure 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.
`FIG-9`	THE figure SHALL lay out the content of its actions slot in one row at the end of the header, in the order given, comp.figure.header.gap apart, each centred on the height of that row, and SHALL do nothing else to it: the controls keep their own sizes, colors, states, focus indicators, targets and names, the figure listens to none of their events, and what they change in the stage — its theme, its direction, the variant on show — is the product's own doing.
`FIG-10`	WHERE the figure has a caption — the content of the caption slot where it holds any, and the caption prop otherwise — THE figure SHALL draw it below the frame, comp.figure.caption.gap from it, at the figure's start edge, in comp.figure.caption.typescale and comp.figure.caption.color, wrapping inside the figure's inline size and never cut or limited to a number of lines; inline content the product gives in the slot (inline code, a keyboard shortcut, a tag) SHALL sit on the caption's baseline and keep its own styles, and a link in it SHALL be underlined at rest (PRS-17). IF both the prop and the slot are given THE slot SHALL be drawn and the prop ignored. THE caption SHALL be below the frame in every look and SHALL have no other place: text above the stage is the title.
`FIG-11`	WHERE the attachment slot holds content THE figure SHALL place it inside the frame, below the stage, across the frame's whole inline size, with no padding of the figure's around it, clipped by the frame's lower corners, and joined to the stage as the separation names (FIG-13); THE figure SHALL add no style to anything inside it: a block there that has a frame of its own (a code block, a table) is the product's to give in the form that suits the join.
`FIG-12`	THE figure SHALL tell the parts inside its frame apart as its separation names: WHILE separation is auto, as comp.figure.separation names, which follows sys.behavior.separation unless a design system sets it apart; WHILE separation is divider or gap, as that value names, whatever the tokens say. WHEN separation, or the token it follows, changes THE figure SHALL draw the other form at once, without animation, keeping the stage's scroll position; WHEN separation names a value the figure does not define THE figure 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, divider, and state that in its README.
`FIG-13`	WHILE the separation is divider and variant is not plain THE figure SHALL draw a line comp.figure.divider.thickness thick in comp.figure.divider.color across the frame's whole inline size between the header and the stage and between the stage and the attachment, wherever both parts of a pair are present, and SHALL place the attachment flush against that line and the frame's edges; WHILE the separation is gap and variant is not plain THE figure SHALL draw no line, SHALL leave the header's own padding as the only space between the header and the stage, and SHALL set the attachment in by comp.figure.attachment.gap from the stage above it and from the frame's inline and lower edges, where the attachment keeps the shape it has by itself.
`FIG-14`	WHILE variant is plain THE figure SHALL draw no line whatever the separation is, SHALL draw the header without inline padding so that the title begins at the figure's start edge, comp.figure.caption.gap above the stage, and SHALL place the attachment comp.figure.attachment.gap below the stage across the figure's whole inline size, where it keeps the shape it has by itself.
`FIG-15`	THE figure SHALL NOT take pointer, touch or keyboard input of its own, apart from the scrolling of FIG-5 and FIG-6, and SHALL NOT change anything it draws under a pointer, a press or focus: its frame, header, title and caption have no hovered, focused, pressed, selected or disabled state, it draws no state layer and no ripple, and it emits no event. Input over the stage, the actions and the attachment SHALL reach the content placed there, which stays as operable, as focusable and in the same focus order — the actions, then the stage's content, then the attachment's, then anything in the caption — as it would be outside a figure.
`FIG-16`	THE figure SHALL be exposed to assistive technology as a figure, or as a named group where the platform has no such role, whose name is its title where it has one, its caption where it has a caption and no title, and label otherwise; WHERE it has both a title and a caption THE caption SHALL be exposed as the figure's description and still be read as text in its place; THE figure SHALL NOT draw label. Everything in the header, the stage, the attachment and the caption SHALL stay exposed in that reading order, and THE figure SHALL neither supply nor replace the text alternative of a picture placed in the stage: that is the picture's own. IF title, caption and label are all empty THE figure SHALL be exposed without a name and in debug builds report that a figure has no name.
`FIG-17`	WHEN the title, the caption, the look, inset or the content of a slot changes THE figure SHALL draw and expose the new value at once, without a motion, keeping the stage's scroll position where the content still reaches it, and SHALL NOT announce the change by itself.
`FIG-18`	THE figure SHALL lay itself out as a block in the flow of its container: it SHALL take the whole inline size the container gives it — a page, a column of prose, a cell of the product's grid, a card, a tab's panel alike — with its start edge on the start edge of the text around it; it SHALL bring no outer space of its own (PRS-15: the space between it and its neighbours is its container's), SHALL never be wider than its container, and SHALL have no minimum width, no maximum width and no measure of its own. THE figure SHALL NOT float beside the text, stick to an edge while the content scrolls or raise itself above the page: where it stands, and how several figures are arranged side by side, is the product's layout.
`FIG-19`	WHILE the text size is enlarged THE figure SHALL grow its title and its caption with it, keep its paddings, gaps and lines, wrap, and grow in height; it 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 sideways scrolling of what holds it at a width of 320 points with text at 200 %: the actions move below the title (FIG-7) and content that cannot shrink scrolls inside the stage (FIG-5).
`FIG-20`	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 figure SHALL draw an edge comp.figure.outline.width wide in the platform's text color inside its frame in the outlined and the filled looks, so that a look whose fill the mode removes is still a bounded stage, and no edge in the plain look, which has none to lose; it SHALL draw the lines of FIG-13 in that text color, its title and caption in that text color, links in the platform's link color and still underlined, and the focus indicator of FIG-6 in the platform's own color for focus, and no ground pattern (FIG-26) in any look, so that nothing but the person's own background stands behind the content; what is shown in the stage is the content's own to adapt.
`FIG-21`	WHERE the layout direction is right-to-left THE figure SHALL mirror the order of its header and apply its paddings by logical start and end, so that the title is at the right and the actions are at the left; SHALL draw the caption from the right edge; SHALL begin the stage's sideways scroll (FIG-5) at the right edge; and SHALL place a plain figure's narrow content (FIG-3) at the right edge. Top and bottom SHALL NOT change. THE figure SHALL NOT mirror, reorder or realign what is shown in the stage or in the attachment: a picture is never mirrored, and the direction of a live example is its own.
`FIG-22`	THE figure 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 figure is shown THE figure SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows. A direction the product sets on the stage's content alone (a live example drawn right-to-left inside a left-to-right page) SHALL change that content and nothing of the figure's.
`FIG-23`	THE figure SHALL lay out its title and its caption as text of their own direction, each isolated from the other and from the text around the figure: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right name, an identifier, a number with its unit, a version and a date keep their own order in a right-to-left layout; THE figure SHALL still place each by the layout direction, not by the text's own, and SHALL wrap them, never cut them.
`FIG-24`	WHEN variant names a value that the active design system does not have THE figure SHALL render with the default variant's tokens, and in debug builds report the unknown value.
`FIG-25`	IF the default slot holds nothing THE figure SHALL draw nothing, take no space and expose nothing, and in debug builds report that a figure shows nothing: a title, a caption or an attachment alone is not a figure. IF label is not empty while a title or a caption is given THE figure SHALL ignore label.
`FIG-26`	WHILE pattern is not none and variant is not plain THE figure SHALL draw a ground pattern in comp.figure.pattern.color across the stage's whole box, over the frame's fill and under the stage's content, centred on the stage and still while the content scrolls (FIG-5): WHILE pattern is grid, lines comp.figure.pattern.line-thickness wide every comp.figure.pattern.spacing across and down; WHILE pattern is dots, dots comp.figure.pattern.dot-size across at the same spacing; WHILE pattern is grid-fade, that grid, clear from the stage's centre to comp.figure.pattern.clear-extent of the way to its edges and growing from there to full strength at its corners; WHILE pattern is checkerboard, squares of side comp.figure.pattern.checkerboard-size, alternately the frame's fill and comp.figure.pattern.color. The pattern SHALL be decoration: it SHALL take no input, be exposed to no assistive technology, be the same in either layout direction, and be covered by the content wherever the content is opaque. WHILE variant is plain THE figure SHALL draw no pattern, because the plain look has no stage to draw one on. IF pattern names a value the figure does not define THE figure SHALL draw none, and in debug builds report the unknown value.

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

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

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	`tanrei-figure`	`TanreiFigure`	`TanreiFigure`	`TanreiFigure`	`Figure`
`title` · प्रॉपर्टी	`headline`	`title`	`title`	`title`	`title`
`caption` · प्रॉपर्टी	`caption`	`caption`	`caption`	`caption`	`caption`
`label` · प्रॉपर्टी	`label`	`accessibilityLabel`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`variant` · प्रॉपर्टी	`variant`	`variant`	`variant`	`variant`	`variant`
`inset` · प्रॉपर्टी	`inset`	`isInset`	`inset`	`inset`	`inset`
`separation` · प्रॉपर्टी	`separation`	`separation`	`separation`	`separation`	`separation`
`pattern` · प्रॉपर्टी	`pattern`	`pattern`	`pattern`	`pattern`	`pattern`
टिप्पणियाँ	Form: `<tanrei-figure>` is a custom element with no shadow root, wrapped around a native `<figure>` that stays in the light DOM, so that the figure and its caption are the document's own — read without script, by a crawler, by reader modes and by a screen reader as a figure with its `<figcaption>` (once the element is defined it names the figure by that caption itself, `aria-labelledby`, unless the product gave the `<figure>` an `aria-label`: one engine does not take the name from the caption): `<tanrei-figure><figure><div data-part="frame"><header><p data-part="title">…</p><div data-part="actions">…</div></header><div data-part="stage">…</div><div data-part="attachment">…</div></div><figcaption>…</figcaption></figure></tanrei-figure>`; every part but the stage is optional, and a lone `<img>`, `<picture>`, `<video>`, `<svg>` or `<canvas>` in place of the stage element is its own stage. Everything drawn comes from one stylesheet, `@tanrei/web/figure.css`, whose selectors start at `tanrei-figure` and are wrapped in `:where()`; it styles the page before the element is defined and without script, so a page of figures does not move when the script arrives, and the element adopts the same sheet into the root it is connected to. Props are attributes of the wrapper: `variant`, `separation`, `pattern`, `label`; `inset` is a boolean property that defaults to true and its attribute is the inverse `flush`, as the card's (an HTML boolean attribute cannot default to true). The title is the `headline` attribute (HTML's global `title` would show a tooltip over the whole figure, as on the callout); `headline` and `caption` are conveniences for a figure built by script or by the React wrapper, for which the element writes the parts above itself around its children. What the element adds once defined: `aria-labelledby` on the native figure naming the title where there are both a title and a caption, and `aria-describedby` naming the caption; `aria-label` from `label`; `tabindex="0"`, `role="group"` and the same name on the stage while it scrolls sideways, removed when it does not (FIG-6); the resolved separation as a `data-separation` attribute where a container style query cannot be used; and the debug reports. A native `<figure>` with one `<figcaption>` and no title needs none of that. The ground pattern (FIG-26) is the stage's own `background-image`, a set of CSS gradients of the `--tanrei-comp-figure-pattern-*` tokens over a `background-color` of the look's fill, so it takes no element, no input and no place in the accessibility tree, stays in place while the stage scrolls, and stands behind a transparent lone picture too; the fading grid is the grid under a radial gradient of the fill. Under `forced-colors: active` the frame takes a `CanvasText` border in the outlined and filled looks, and the stage draws no pattern (FIG-20). Pictures take `max-inline-size: 100%` and `block-size: auto` (FIG-4).	`TanreiFigure(title:caption:variant:isInset:separation:pattern:) { content } actions: { … } attachment: { … }`, with `titleContent:` and `captionContent:` view builders for the two slots. The stage is a horizontal `ScrollView` only while its content is wider than it. SwiftUI has no figure trait: the view is an accessibility container (`accessibilityElement(children: .contain)`) whose label is the title, or the caption, or `accessibilityLabel`, with the caption as its hint where there is a title. The content's foreground is set with `foregroundStyle` in the outlined and filled looks. The ground pattern (FIG-26) is to be drawn with a `Canvas` behind the stage's content; not yet written.	`TanreiFigure(title, caption, contentDescription, variant, inset, separation, pattern, actions = { … }, attachment = { … }) { content }`, with `titleContent` and `captionContent` lambdas for the two slots. No `clickable`. The stage takes `horizontalScroll` only while its content is wider than it. A traversal group (`semantics { isTraversalGroup = true }`) with the name as its content description; Compose has no figure role. The content color is provided through `LocalContentColor` in the outlined and filled looks. The ground pattern (FIG-26) is to be drawn with `Modifier.drawBehind` on the stage; not yet written.	`TanreiFigure(title:, caption:, semanticLabel:, variant:, inset:, separation:, pattern:, actions:, attachment:, child:)`, with `titleWidget:` and `captionWidget:` for the two slots. One `Semantics(container: true, label:)` around the parts, which stay in the tree. The stage is a horizontal `SingleChildScrollView` only while its child is wider than it. The content's default text and icon styles are set in the outlined and filled looks. The ground pattern (FIG-26) is to be a `CustomPaint` painter behind the stage's child; not yet written.	`<Figure title="Variants" caption="…" actions={…} attachment={…}>…</Figure>`; `title` and `caption` take a string or a node (the two slots). A `View` that is not itself `accessible`, so its children stay reachable, with `accessibilityLabel` on a wrapping group where the platform exposes one. The stage is a horizontal `ScrollView` only while its content is wider than it. Follows the app's direction where an ancestor's is not known. The content color is given through Tanrei's text context in the outlined and filled looks. `pattern` takes the same five values; the ground pattern (FIG-26) is to be drawn with an SVG pattern behind the stage's content; not yet written.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
`--tanrei-comp-figure-attachment-gap`	`sys.space.space100`	8px
`--tanrei-comp-figure-caption-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-figure-caption-gap`	`sys.space.space100`	8px
`--tanrei-comp-figure-container-shape`	`sys.shape.corner.medium`	8px
`--tanrei-comp-figure-content-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-figure-divider-color`	`sys.color.outline-variant`	#000000 · 8%
`--tanrei-comp-figure-divider-thickness`	`sys.border.hairline`	1px
`--tanrei-comp-figure-filled-container-color`	`sys.color.surface-container`	#f6f6f6
`--tanrei-comp-figure-header-gap`	`sys.space.space100`	8px
`--tanrei-comp-figure-header-padding-block`	`sys.space.space100`	8px
`--tanrei-comp-figure-header-padding-inline`	`sys.space.space200`	16px
`--tanrei-comp-figure-header-padding-inline-end-with-actions`	`sys.space.space100`	8px
`--tanrei-comp-figure-outline-color`	`sys.color.outline-variant`	#000000 · 8%
`--tanrei-comp-figure-outline-width`	`sys.border.hairline`	1px
`--tanrei-comp-figure-outlined-container-color`	`sys.color.surface`	#ffffff
`--tanrei-comp-figure-pattern-checkerboard-size`	`sys.space.space100`	8px
`--tanrei-comp-figure-pattern-clear-extent`	—	0.3
`--tanrei-comp-figure-pattern-color`	`sys.color.surface-container-highest`	#eeeeee
`--tanrei-comp-figure-pattern-dot-size`	—	3px
`--tanrei-comp-figure-pattern-line-thickness`	`sys.border.hairline`	1px
`--tanrei-comp-figure-pattern-spacing`	`sys.space.space300`	24px
`--tanrei-comp-figure-plain-container-color`	—	#000000 · 0%
`--tanrei-comp-figure-separation`	`sys.behavior.separation`	0
`--tanrei-comp-figure-stage-padding-block`	`sys.space.space400`	32px
`--tanrei-comp-figure-stage-padding-inline`	`sys.space.space300`	24px
`--tanrei-comp-figure-title-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-figure-caption-typescale`	`sys.typescale.body-small`	400 13px/1.5385
`--tanrei-comp-figure-title-typescale`	`sys.typescale.heading-6`	500 14px/1.4286

फ़िक्स्चर

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

`variant: outlined` (27)

outlined

label: A specimen

caption

caption: The medium corner, on a card.

title

title: Variants

title-caption

title: Revenue by quarter caption: Every region grew; the north grew fastes…

title-slot

slots: title

caption-slot

slots: caption

actions

title: Variants slots: actions

actions-only

label: A specimen slots: actions

flush

caption: The harbour at low tide. inset: false

title-flush

title: Harbour caption: The harbour at low tide. inset: false

attachment

title: Variants slots: attachment

separation-divider

title: Variants caption: A filled button and its markup. separation: divider slots: actions, attachment

separation-gap

title: Variants caption: A filled button and its markup. separation: gap slots: actions, attachment

long-caption

caption: Measured on the default system at standa…

long-title-actions

title: Every variant of the button at each of i… slots: actions

actions-rtl

title: الأشكال caption: زرّ ممتلئ وزرّ محدَّد. direction: rtl slots: actions

ltr-title-rtl

title: tanrei-button v0.1 caption: comp.button.container.height.medium: 40p… direction: rtl

attachment-rtl

title: الأشكال separation: divider direction: rtl slots: attachment

pattern-grid

label: A specimen pattern: grid

pattern-dots

label: A specimen pattern: dots

pattern-grid-fade

label: A specimen pattern: grid-fade

pattern-checkerboard

label: A specimen pattern: checkerboard

title-pattern-grid-fade

title: Variants caption: A filled button and its markup. pattern: grid-fade slots: actions, attachment

pattern-dots-rtl

title: الأشكال pattern: dots direction: rtl

docs-demo

title: Variants, sizes and disabled pattern: grid-fade slots: actions

docs-demo-code

title: Variants separation: divider pattern: grid-fade slots: actions, attachment

docs-demo-system

title: Single choice, with glyphs, glyphs alone caption: Drawn under m3-like, a system that ships… pattern: grid-fade

`variant: filled` (8)

filled

label: A specimen variant: filled

filled-caption

caption: The medium corner, on a card. variant: filled

filled-title-caption

title: Revenue by quarter caption: Every region grew; the north grew fastes… variant: filled

filled-flush

caption: The harbour at low tide. variant: filled inset: false

filled-attachment

caption: A filled button and its markup. variant: filled slots: attachment

filled-separation-gap

title: Variants variant: filled separation: gap slots: attachment

filled-pattern-grid

label: A specimen variant: filled pattern: grid

filled-pattern-dots

label: A specimen variant: filled pattern: dots

`variant: plain` (7)

plain

label: A specimen variant: plain

plain-caption

caption: The medium corner, on a card. variant: plain

plain-title-attachment

title: Variants caption: A filled button and its markup. variant: plain slots: attachment

plain-caption-rtl

caption: الميناء عند الجزر. variant: plain direction: rtl

plain-pattern-grid

caption: The plain look draws no pattern. variant: plain pattern: grid

docs-specimen

caption: medium · 8px variant: plain

docs-picture

caption: The review gallery, with one component's… variant: plain

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

दिशानिर्देश

तीन रूप

`variant`	क्या बनाता है	किसके लिए
`outlined` (डिफ़ॉल्ट)	एक बारीक रेखा के भीतर सरफ़ेस।	नमूना, लाइव उदाहरण, डायग्राम।
`filled`	एक हल्का टोन, और कोई किनारा नहीं।	वह पेज जिसमें पहले से बहुत-सी रेखाएँ हैं; शैडो वाली चीज़ों के लिए बैकग्राउंड।
`plain`	न फ़िल, न किनारा, न पैडिंग, न रेखा।	वह तस्वीर जो ख़ुद अपना फ़्रेम है; ग्रिड में रखा नमूना।

outlined रूप सरफ़ेस के रंग से भरा होता है, ख़ाली नहीं छोड़ा जाता। फ़िगर चाहे जिस पैनल में रखा जाए, आपके अपने कंपोनेंट वह कंट्रास्ट बनाए रखते हैं जिस पर उनके टोकन परखे गए थे।

शीर्षक ऊपर, कैप्शन नीचे

title (वेब पर headline ऐट्रिब्यूट) फ़्रेम के भीतर, हेडर में एक छोटी पंक्ति है। वह दिखाई गई चीज़ को नाम देता है।
caption फ़्रेम के नीचे होता है, शुरुआती किनारे पर, गौण टेक्स्ट में। वह रैप होता है और कभी काटा नहीं जाता।
जगह की कोई सेटिंग नहीं है। स्टेज के ऊपर का टेक्स्ट शीर्षक है। कैप्शन की एक ही जगह है।
शीर्षक सादा टेक्स्ट है, हेडिंग नहीं। जहाँ आपके पेज की आउटलाइन को उस जगह हेडिंग चाहिए, वहाँ data-part="title" के साथ एक हेडिंग लिखें: फ़िगर उसे शीर्षक के स्टाइल में बनाता है और उसका रोल और स्तर बनाए रखता है।

कंट्रोल और जुड़ा हुआ ब्लॉक

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

`separation`	क्या बनाता है
`auto` (डिफ़ॉल्ट)	जो डिज़ाइन सिस्टम ने चुना है: डिफ़ॉल्ट सिस्टम में रेखाएँ।
`divider`	हेडर के नीचे और अटैचमेंट के ऊपर एक रेखा। अटैचमेंट फ़्रेम से सटा रहता है।
`gap`	कोई रेखा नहीं। अटैचमेंट फ़्रेम के भीतर, 8 अंदर हटकर, अपने शेप के साथ रहता है।

स्टेज

inset (डिफ़ॉल्ट true) स्टेज को ऊपर और नीचे 32 की और दोनों बग़ल 24 की पैडिंग देता है। वेब पर flush यह पैडिंग हटा देता है, इसलिए तस्वीर, चार्ट या नक़्शा फ़्रेम के किनारों तक पहुँचता है और उसके कोनों पर कटता है।
तस्वीर अपना अनुपात बनाए रखते हुए छोटी होती है, बड़ी कभी नहीं।
जो कॉन्टेंट सिकुड़ नहीं सकता, वह स्टेज के भीतर आड़ा स्क्रॉल होता है। फ़िगर कभी अपने कंटेनर से चौड़ा नहीं होता।
जो कॉन्टेंट फ़्रेम वाले स्टेज से सँकरा है, वह बीच में रखा जाता है। plain रूप में वह टेक्स्ट के किनारे से शुरू होता है।
स्टेज उतना ही ऊँचा होता है जितना उसका कॉन्टेंट। उसमें कई उदाहरण कैसे रखे जाएँ, यह आपका लेआउट है।

दिखाई गई चीज़ के पीछे की ज़मीन

`pattern`	क्या बनाता है	किसके लिए
`none` (डिफ़ॉल्ट)	सिर्फ़ रूप का भराव।	ज़्यादातर फ़िगर; स्टेज को भरने वाली तस्वीर।
`grid`	आड़ी और खड़ी, हर 24 पर एक बारीक रेखा।	ग्रिड के सामने दिखाया गया कंपोनेंट या लेआउट।
`dots`	उस ग्रिड के हर कटान पर एक बिंदु।	ज़्यादा शांत ज़मीन पर कोई ड्रॉइंग या आरेख।
`grid-fade`	ग्रिड, जो बीच के आसपास ख़ाली रहती है और कोनों की ओर गहरी होती जाती है।	बड़े स्टेज के बीच में रखा नमूना। इस साइट के लाइव उदाहरण इसी का इस्तेमाल करते हैं।
`checkerboard`	8 के वर्ग, बारी-बारी से भराव और पैटर्न के रंग में।	ऐसी तस्वीर या आइकन जो पारदर्शी हो सकता है।

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

पेज में

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

करें

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

न करें

संबंधित कॉन्टेंट और क्रियाओं को एक साथ रखने के लिए फ़िगर इस्तेमाल न करें। वह कार्ड है।
फ़िगर को दबाने लायक़ न बनाएँ। जो तस्वीर कुछ खोलती है, वह तस्वीर के चारों ओर का एक लिंक है।
कोई उदाहरण सही है या ग़लत, यह बताने के लिए फ़्रेम को रंग न दें। फ़िगर की कोई स्थिति नहीं होती।

सुलभता

रोल: figure
लेबलिंग: The figure is named by its title, or by its caption where it has no title, or by label where it draws neither. With both a title and a caption, the title is the name and the caption the description. A picture in the stage has its own text alternative, given by the product; the caption does not replace it. While the stage scrolls, it is a group with the figure's name, so that a person who reaches it by keyboard hears what scrolls.
न्यूनतम टार्गेट: दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
`Tab`	Moves through the product's controls in the header, then to the stage where it scrolls, then through what the stage, the attachment and the caption hold. The figure adds no stop of its own unless its stage scrolls.
`ArrowLeft / ArrowRight / Home / End`	While the scrolling stage has focus: scroll it sideways, as the platform scrolls a region.

Not interactive: the figure itself takes no press, so it has no target to size and minimumTarget holds trivially. The controls in its actions slot and anything operable in its stage are other components, each with its own target.
A caption is not a text alternative. The caption says what the figure is for a reader who sees it ("Revenue grew in every region"); the picture's own alternative says what the picture shows to a reader who does not. Where the caption already says everything the picture does, the product marks the picture as decorative rather than repeat the caption.
A live example in the stage stays fully operable and is read as what it is: the figure hides nothing from assistive technology and does not turn its content into an image. A purely decorative specimen (a swatch, a shape) is the product's to hide and to describe in the caption.
A figure with neither a title nor a caption needs label; the component reports a figure without any name in debug builds (FIG-16) and cannot tell whether a name is a good one.
A status such as do and don't is never given by a color on the frame: the figure has no status. A product that marks a figure as an example to follow or to avoid puts a tag with its glyph and its word at the start of the caption, where it is read as part of the figure's name or description.
The scrolling stage is a focus stop (FIG-6) so that a keyboard user can bring every part of wide content into view (WCAG 2.1.1); it is named, and it shows the system's focus indicator, which is held at 3:1 against every surface role, the two fills of this component among them.
Contrast in the default system: the title is on-surface on surface or surface-container and the caption is on-surface-variant on the surface the figure sits on, both role pairs held at 4.5:1 by the token invariants. The outlined look's edge and the dividers are decorative: the stage is told apart by its position and its caption, not by the line.
The ground pattern (FIG-26) is decoration (WCAG 1.1.1): it is not exposed and carries nothing the content and the caption do not. It is drawn in surface-container-highest, a surface role against which on-surface text and the focus indicator are held by the token invariants, so text standing on a line or a dot keeps its contrast; and a raised contrast level does not make it louder. Forced colors remove it (FIG-20).
Forced colors (FIG-20): the filled look loses its fill and gains an edge in the text color. The plain look stays unframed. No look draws a ground pattern.

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

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

नेटिव फ़िगर एक फ़िगर ही रहता है। उसका नाम उसके शीर्षक से आता है, या जहाँ शीर्षक नहीं है वहाँ उसके कैप्शन से। दोनों हों तो शीर्षक नाम है और कैप्शन विवरण, और कैप्शन तब भी अपनी जगह पर पढ़ा जाता है।
label उस फ़िगर को नाम देता है जो इन दोनों में से कुछ नहीं दिखाता। वह ख़ुद कभी दिखाया नहीं जाता, और जहाँ शीर्षक या कैप्शन दिया गया है वहाँ उसे अनदेखा किया जाता है।
जब तक स्टेज आड़ा स्क्रॉल होता है, वह फ़ोकस के क्रम में एक पड़ाव है, अपने भीतर की किसी भी चीज़ से पहले, और फ़िगर के नाम वाला एक ग्रुप। ऐरो कुंजियाँ उसे स्क्रॉल करती हैं, और Home और End उसे किसी एक सिरे पर ले जाती हैं। जो स्टेज स्क्रॉल नहीं होता, वह कोई पड़ाव नहीं जोड़ता।
फ़ोकस रिंग स्टेज के किनारे के भीतर बनती है, इसलिए कुछ भी उसे नहीं काटता।
हेडर, स्टेज, अटैचमेंट और कैप्शन की हर चीज़ चलाने लायक़ रहती है और फ़ोकस के क्रम में अपनी जगह बनाए रखती है।
200% टेक्स्ट पर शीर्षक और कैप्शन बढ़ते हैं और रैप होते हैं, और क्रियाएँ शीर्षक के नीचे चली जाती हैं।
दाएँ से बाएँ वाले लेआउट में हेडर मिरर होता है और कैप्शन दाईं ओर से शुरू होता है। स्टेज में जो दिखाया गया है, वह कभी मिरर नहीं होता।
फ़ोर्स्ड कलर्स में outlined और filled रूपों का किनारा टेक्स्ट के रंग का होता है। plain रूप में कोई किनारा नहीं होता, और कोई भी रूप पैटर्न नहीं बनाता।
बिना नाम का फ़िगर, ख़ाली स्टेज वाला फ़िगर, और अनजान वेरिएंट, separation या pattern डीबग बिल्ड में रिपोर्ट किए जाते हैं।

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

हर फ़िगर को एक शीर्षक, एक कैप्शन या एक label दें।
स्टेज की तस्वीर को उसका अपना alt दें। जहाँ कैप्शन पहले से वह सब कहता है जो तस्वीर कहती है, वहाँ तस्वीर को सजावटी के रूप में चिह्नित करें (alt="")।
लाइव उदाहरण को चलाने लायक़ रखें। फ़िगर अपना कॉन्टेंट न छिपाता है, न उसे इमेज में बदलता है।

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

फ़िगर

अवलोकन

इस्तेमाल

आप क्या लिखते हैं

वह फ़िगर जिसे एलिमेंट बनाता है

स्पेक

संरचना

प्रॉपर्टी

स्लॉट

स्टेट

व्यवहार

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

टोकन

फ़िक्स्चर

variant: outlined (27)

variant: filled (8)

variant: plain (7)

दिशानिर्देश

तीन रूप

शीर्षक ऊपर, कैप्शन नीचे

कंट्रोल और जुड़ा हुआ ब्लॉक

स्टेज

दिखाई गई चीज़ के पीछे की ज़मीन

पेज में

करें

न करें

सुलभता

कीबोर्ड

टिप्पणियाँ

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

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

`variant: outlined` (27)

`variant: filled` (8)

`variant: plain` (7)