पिछला और अगला लिंक
पेजों के क्रम में उस पेज से पहले का और उसके बाद का पेज, जिस पर व्यक्ति अभी है। दो लिंक, जिनमें से हर एक का नाम एक दिशा और उस जगह के शीर्षक से बनता है जहाँ वह ले जाता है।
- श्रेणी
- नेविगेशन
- टोकन
comp.previous-next-links- स्तर
- आधार
- Web
tanrei-previous-next-linksschedule - SwiftUI
TanreiPreviousNextLinksradio_button_unchecked - Jetpack Compose
TanreiPreviousNextLinksradio_button_unchecked - Flutter
TanreiPreviousNextLinksradio_button_unchecked - React Native
PreviousNextLinksradio_button_unchecked
इससे जनरेट किया गया: docs/status/status.json, specs/previous-next-links.spec.json
पिछला और अगला
इस पेज के अंत में दिखने वाले पिछला और अगला लिंक यही कंपोनेंट हैं।
ये उस क्रम में आगे-पीछे ले जाते हैं जिसके पेजों के शीर्षक होते हैं: किसी गाइड के अध्याय, किसी सीरीज़ के लेख, किसी ब्लॉग की पोस्ट। एक ही सूची के पेज नंबर से बदलना (खोज नतीजों के पेज, किसी टेबल की पंक्तियाँ) पेजिनेशन है, जो अपने आप में एक अलग कंपोनेंट है: पेज नंबर नहीं बताता कि वह कहाँ ले जाता है, शीर्षक बताता है।
वेब पर पिछला और अगला लिंक कोई एलिमेंट नहीं, आपके अपने nav और ऐंकर पर लगी क्लास हैं। ऐंकर दस्तावेज़ में ही हैं, इसलिए वे किसी स्क्रिप्ट के चलने से पहले ही लिंक हैं, और क्रॉलर और पेज के ऐंकर पर काम करने वाला राउटर, दोनों उन्हें पा लेते हैं। अकेली स्टाइलशीट पूरा कंपोनेंट बना देती है।
SwiftUI, Compose, Flutter और React Native नियोजित हैं: इस पेज के शुरू में हर प्लैटफ़ॉर्म के साथ दिए गए नाम वे हैं जो स्पेक उन्हें देता है, और वहाँ अभी कुछ उपलब्ध नहीं है। React में भी अभी PreviousNextLinks कंपोनेंट नहीं है, इसलिए क्लास वाला मार्कअप इस्तेमाल करें।
<link rel="stylesheet" href="@tanrei/web/tokens.css" />
<link rel="stylesheet" href="@tanrei/web/icons.css" />
<link rel="stylesheet" href="@tanrei/web/previous-next-links.css" />
<nav class="tanrei-previous-next-links" aria-label="पेज">
<a class="tanrei-previous-next-links-item" data-direction="previous" rel="prev" href="https://example.com/guide/installation/">
<span class="tanrei-previous-next-links-label">पिछला</span>
<span class="tanrei-previous-next-links-title">इंस्टॉलेशन</span>
</a>
<a class="tanrei-previous-next-links-item" data-direction="next" rel="next" href="https://example.com/guide/design-tokens/">
<span class="tanrei-previous-next-links-label">अगला</span>
<span class="tanrei-previous-next-links-title">डिज़ाइन टोकन</span>
</a>
</nav>
<!-- पहला पेज: पिछला आइटम href के बिना लिखें, या उसे छोड़ दें। अगला आइटम अपनी जगह रहता है। -->
<nav class="tanrei-previous-next-links" aria-label="पेज">
<a class="tanrei-previous-next-links-item" data-direction="previous"></a>
<a class="tanrei-previous-next-links-item" data-direction="next" rel="next" href="https://example.com/guide/installation/">
<span class="tanrei-previous-next-links-label">अगला</span>
<span class="tanrei-previous-next-links-title">इंस्टॉलेशन</span>
</a>
</nav>
<script type="module">
// वैकल्पिक: रिपल और dim फ़ीडबैक, अगला आइटम पहले लिखे जाने पर आइटम का क्रम, और डीबग रिपोर्ट। `@tanrei/web` भी इसे लोड करता है।
import '@tanrei/web/previous-next-links';
</script>import '@tanrei/web/previous-next-links.css';
import '@tanrei/web/previous-next-links';
import { Link as RouterLink } from 'react-router-dom';
<nav className="tanrei-previous-next-links" aria-label="पेज">
{/* राउटर का लिंक अपना ऐंकर ख़ुद रेंडर करता है: उसे क्लास दें। */}
<RouterLink className="tanrei-previous-next-links-item" data-direction="next" rel="next" to="/guide/design-tokens/">
<span className="tanrei-previous-next-links-label">अगला</span>
<span className="tanrei-previous-next-links-title">डिज़ाइन टोकन</span>
</RouterLink>
</nav>| प्रॉपर्टी | वेब पर |
|---|---|
label |
nav पर aria-label |
| आइटम | <a class="tanrei-previous-next-links-item"> |
direction |
data-direction="previous" या "next", rel="prev" या rel="next" के साथ |
आइटम का label |
<span class="tanrei-previous-next-links-label"> |
title |
<span class="tanrei-previous-next-links-title">, लेबल के बाद |
href |
href |
click |
ऐंकर का अपना click |
अकेला अगला आइटम अपनी जगह रहता है; सिर्फ़ लेबल
सँकरे कॉलम में आइटम एक के ऊपर एक आते हैं
- एक आइटम एक लिंक है, जो पूरा का पूरा दबाया जाता है और आउटलाइन वाले कंटेनर के रूप में बनता है: वही एक बारीक रेखा, कोई फ़िल नहीं, और शीर्षक टेक्स्ट के रंग में। उस पर अंडरलाइन नहीं होती, क्योंकि उसका किनारा, उसका ऐरो और उसकी जगह उसे आसपास के टेक्स्ट से अलग दिखाते हैं।
- ऐरो कंपोनेंट के अपने हैं: पिछले आइटम के शुरुआती किनारे पर
arrow_back, और अगले आइटम के अंतिम किनारे परarrow_forward। इनके लिएicons.cssचाहिए। - दो बराबर कॉलम। पहले पेज पर शुरुआती कॉलम ख़ाली रहता है, और अगला आइटम ठीक वहीं होता है जहाँ वह हर दूसरे पेज पर होता है।
- एक के ऊपर एक आना। जहाँ पिछला और अगला लिंक को आइटम की दो न्यूनतम चौड़ाइयों और गैप से कम जगह मिलती है (डिफ़ॉल्ट सिस्टम में 496), वहाँ आइटम एक के ऊपर एक आते हैं, पिछला ऊपर और अगला नीचे। यह कंपोनेंट की अपनी चौड़ाई से तय होता है, विंडो की चौड़ाई से नहीं।
- शीर्षक रैप होता है और कभी काटा नहीं जाता। एक पंक्ति के दोनों आइटम उनमें से ज़्यादा ऊँचे आइटम की ऊँचाई लेते हैं। शीर्षक के बिना आइटम सिर्फ़ अपनी दिशा दिखाता है, शीर्षक के स्टाइल में।
- दाएँ से बाएँ वाले लेआउट में पिछला आइटम दाईं ओर रहता है, दाईं ओर इशारा करते ऐरो के साथ, और अगला बाईं ओर, बाईं ओर इशारा करते ऐरो के साथ। पढ़ने और फ़ोकस का क्रम वही रहता है: पहले पिछला, फिर अगला।
संरचना
| भाग | विवरण |
|---|---|
1 root | The navigation landmark: one row with a place for the previous item at its start and a place for the next item at its end. It draws nothing of its own. |
2 container | An item's shape: the whole of it is one link. It has no fill at rest and is where hover, focus and press are drawn. |
3 outline | An item's edge: the one hairline, which bounds what is pressed. |
4 icon | The arrow the previous and next links draw in an item: arrow_back at the start edge of the previous item, arrow_forward at the end edge of the next. Decorative; mirrored in a right-to-left layout by the icon helper. |
5 label | The direction in a word of the product's ("Previous", "Next"), above the title. |
6 title · वैकल्पिक | The title of the page the item leads to. It wraps and is never cut. |
7 focus-ring | The indicator shown for keyboard focus, around an item's container. |
प्रॉपर्टी
| प्रॉपर्टी | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
label | string | "" | The accessible name of the landmark ("Pages", "Chapter navigation"), in the product's language. Tanrei ships no words of its own. It tells this landmark from the page's other navigation, so it is required. |
आइटम
वे आइटम के प्रकार जिन्हें कंपोनेंट दोहराता है। फ़िक्स्चर अपने आइटम क्रम से सूचीबद्ध करता है; हर प्लैटफ़ॉर्म हर प्रकार को अपने तरीक़े से नाम देता है।
item
One neighbouring page of the sequence: a link to it, named by a direction and its title.
| प्रॉपर्टी | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
direction | previous | next | "next" | Which neighbour the item leads to. previous: the page before, placed at the start with the arrow arrow_back. next: the page after, placed at the end with the arrow arrow_forward. A pair of previous and next links holds at most one item of each. |
label | string | "" | The direction in the product's words ("Previous", "Next"; "Newer", "Older"). It is drawn above the title and begins the item's accessible name. |
title | string | "" | The title of the page the item leads to ("Installation"). Empty, the item shows its direction alone (PNL-7). |
href | string | "" | The destination: an address as the platform's links take one. Empty, there is no page on that side and the item is not drawn (PNL-3), so a product can always give both items and leave one without a destination on the first and the last page. |
| इवेंट | विवरण |
|---|---|
click | The item was activated by pointer, touch, Enter or assistive technology. It is emitted before the destination opens; a product that takes the navigation itself (a client-side router) cancels it (PNL-14). |
| स्पेक | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| आइटम | tanrei-previous-next-links-item | TanreiPreviousNextLinksItem | TanreiPreviousNextLinksItem | TanreiPreviousNextLinksItem | PreviousNextLinksItem |
direction · प्रॉपर्टी | data-direction | direction | direction | direction | direction |
label · प्रॉपर्टी | tanrei-previous-next-links-label | label | label | label | label |
title · प्रॉपर्टी | tanrei-previous-next-links-title | title | title | title | title |
href · प्रॉपर्टी | href | destination | href | href | href |
click · इवेंट | click | action | onClick | onPressed | onPress |
| टिप्पणियाँ | A class on the product's own anchor. data-direction is previous or next; the anchor also carries rel="prev" or rel="next". The label and the title are two spans with their classes, in that order. | TanreiPreviousNextLinksItem(.next, label: "Next", title: "Design tokens", destination: url, action:); destination is an optional URL, and nil is the empty href. | A data class; href is nullable. onClick returns false to keep the address closed; otherwise LocalUriHandler.current opens it. | A value class; href is nullable. onPressed returns false to keep the address closed; otherwise the opener the app provides opens it. | An object of the previous or the next prop. onPress receives an event whose preventDefault() keeps the address closed; otherwise Linking.openURL(href). |
स्टेट
व्यवहार
EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।
| ID | आवश्यकता |
|---|---|
PNL-1 | THE previous and next links SHALL be one navigation landmark named by label that holds its items in reading order — the previous item, then the next item, whatever order the product gave them in — and nothing else; WHILE label is empty THE previous and next links SHALL still render, and in debug builds report that the landmark has no accessible name. |
PNL-2 | WHILE an item's href is a destination THE previous and next links SHALL draw that item as the platform's own link to it (the web's anchor element in the document itself, not in a shadow root; SwiftUI's Link; on Compose, Flutter and React Native an element with the platform's link semantics whose address is opened by the platform's opener), so that whatever the platform gives a link — on the web its context menu, opening in a new tab or window, copying and dragging its address, the address shown before it is followed, a crawler that reads it, and a link that works before any script has run — is the platform's, and not the previous and next links's to draw or to take over; it SHALL expose the link role, named by the item's label followed by its title, with the arrow hidden from assistive technology, and WHERE the platform's links can say how a destination relates to the page (the web's rel) SHALL say previous for the previous item and next for the next. |
PNL-3 | IF an item's href is empty or only white space THE previous and next links SHALL draw nothing for that item and expose nothing for it, because the sequence has no page on that side; IF it names a script to run rather than a place to go (the web's javascript: scheme) or cannot be read as an address by the platform, or direction names a value the previous and next links do not have, or a second item has the direction of an earlier one, THE previous and next links SHALL likewise draw nothing for that item and in debug builds report it. WHILE no item has a destination THE previous and next links SHALL draw nothing, take no room and expose no landmark. |
PNL-4 | THE previous and next links SHALL lay its row out in two columns of equal width, comp.previous-next-links.gap apart, with the previous item in the column at the start and the next item in the column at the end, each as wide as its column and both as high as the taller of the two; an item that is not drawn SHALL leave its column empty, so that the next item stands at the same place and has the same width on every page of the sequence. |
PNL-5 | WHERE the layout gives the previous and next links less width than two times comp.previous-next-links.container.min-width plus comp.previous-next-links.gap THE previous and next links SHALL stack its items instead: each drawn item as wide as the previous and next links, the previous item above the next, comp.previous-next-links.gap between them, and no room kept for an item that is not drawn. It SHALL decide this by the width it is given, not by the window's. |
PNL-6 | THE previous and next links SHALL draw each item as a container with corners comp.previous-next-links.container.shape and an edge comp.previous-next-links.outline.width wide inside it, its content comp.previous-next-links.container.padding from the edge on every side: the arrow in a box comp.previous-next-links.icon.size large — arrow_back at the start edge of the previous item, arrow_forward at the end edge of the next — centred on the item's height, comp.previous-next-links.container.gap from the text, and the text filling the rest of the width, its lines aligned to the start in the previous item and to the end in the next, so that each item's text stands beside its arrow. |
PNL-7 | THE previous and next links SHALL set an item's label in comp.previous-next-links.label.typescale and, comp.previous-next-links.label.gap under it, its title in comp.previous-next-links.title.typescale; it SHALL wrap both where their language allows a break and, for a run with no such place that is longer than the line, inside the run, and SHALL NOT cut them, draw an ellipsis or scroll. WHILE an item's title is empty THE previous and next links SHALL draw its label alone, in the title's text style and color. WHILE an item's label is empty THE previous and next links SHALL draw its title alone and in debug builds report that the item does not say its direction in words. |
PNL-8 | WHILE an item is hovered, keyboard-focused or pressed THE previous and next links SHALL render its container, outline, label, title, arrow and opacity from the component tokens of the highest-precedence active state, with precedence pressed over focused over hovered (comp.previous-next-links.item.container.color, comp.previous-next-links.item.outline.color, comp.previous-next-links.item.label.color, comp.previous-next-links.item.title.color and comp.previous-next-links.item.icon.color at rest); focus gained by pointer or touch SHALL NOT select the focused state. |
PNL-9 | WHEN an item receives keyboard focus THE previous and next links SHALL show the focus ring around that item's container without animation — the system's focus indicator, sys.focus.offset from the container, sys.focus.outer-width wide in the focus-ring color, with the inner stroke of sys.focus.inner-width where the system has one; focus gained by pointer or touch SHALL NOT show it. |
PNL-10 | WHEN an item is pressed by pointer, touch or Enter THE previous and next links SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner. |
PNL-11 | WHILE pressed THE previous and next links SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; label, title, icon, outline, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.previous-next-links.motion.feedback-duration with motion.state-easing, fades over motion.state-duration with motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced. |
PNL-12 | THE previous and next links SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README. |
PNL-13 | THE previous and next links SHALL change an item between its states over comp.previous-next-links.motion.state-duration with comp.previous-next-links.motion.state-easing, and at once where motion is reduced. |
PNL-14 | WHEN the user activates an item by pointer, touch or Enter THE previous and next links SHALL emit that item's click exactly once and then open its href where the person is, unless the product cancelled that click, in which case it SHALL open nothing: the product's own router has taken the navigation. It SHALL NOT hold the navigation back for sys.motion.duration.press-hold. THE previous and next links SHALL NOT activate an item on Space, which on the web scrolls the page as it does on any link, and SHALL NOT show the pressed state for it; WHERE the platform gives its links other keys or gestures (on the web a modified or a middle click that opens a new tab, on Apple platforms a long press that previews) THE previous and next links SHALL leave them to the platform. |
PNL-15 | WHERE the visual size of an item is below the minimum target THE previous and next links SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size; a platform that cannot tell the input type SHALL use sys.target.touch. |
PNL-16 | THE previous and next links SHALL open a destination in the context the person is in and in no other, SHALL draw no mark for a new context and SHALL draw no state for a destination already visited: the pages of one sequence replace one another, and an item's colors say what it is and what state it is in. |
PNL-17 | THE previous and next links SHALL draw each arrow through the platform's icon helper, as a glyph of the system's icon set, in the icon color of its state, 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; it SHALL take no glyph from the product and SHALL draw no path of its own. |
PNL-18 | 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 previous and next links SHALL draw each item's edge, label, title and arrow in the platform's link color, keeping the edge comp.previous-next-links.outline.width wide so that what is pressed stays bounded, and SHALL draw the focus ring in the platform's highlight color. |
PNL-19 | WHILE the text size is enlarged THE previous and next links SHALL grow each item with its text — both items of a row to the height of the taller — keeping comp.previous-next-links.container.padding, comp.previous-next-links.container.gap, comp.previous-next-links.label.gap, comp.previous-next-links.gap and the arrow at comp.previous-next-links.icon.size, and SHALL still stack by the width it is given (PNL-5). |
PNL-20 | THE previous and next links 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 previous and next links are shown THE previous and next links SHALL draw itself for the new direction at once, without a motion of its own, keeping its focus. |
PNL-21 | WHERE the layout direction is right-to-left THE previous and next links SHALL mirror its row and each item's content by logical start and end, so that the previous item stands at the right with its arrow at its right edge and the next item at the left with its arrow at its left edge, and SHALL draw both arrows mirrored left to right, so that the previous item's points to the right and the next item's to the left: the icon helper mirrors them inside their own boxes because the system's icon set marks arrow_back and arrow_forward as mirrored. THE previous and next links SHALL NOT mirror a glyph itself, and the reading and focus order SHALL stay previous, then next. |
PNL-22 | THE previous and next links SHALL lay out each label and each title 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 left-to-right name, a number with its sign or unit and a version keep their own order in a right-to-left layout and reorder nothing beside them; THE previous and next links SHALL still place the text and align its lines by the layout direction and the item's side (PNL-6), not by the text's own. |
प्लैटफ़ॉर्म के अनुसार नामों का मिलान
पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।
| स्पेक | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| कंपोनेंट | tanrei-previous-next-links | TanreiPreviousNextLinks | TanreiPreviousNextLinks | TanreiPreviousNextLinks | PreviousNextLinks |
label · प्रॉपर्टी | aria-label | label | contentDescription | semanticLabel | accessibilityLabel |
| टिप्पणियाँ | Classes on the product's own elements, as Link is: <nav class="tanrei-previous-next-links" aria-label="Pages"><a class="tanrei-previous-next-links-item" data-direction="previous" rel="prev" href="…"><span class="tanrei-previous-next-links-label">Previous</span><span class="tanrei-previous-next-links-title">Installation</span></a><a class="tanrei-previous-next-links-item" data-direction="next" rel="next" href="…">…</a></nav>, styled by a stylesheet of the package. The anchors are in the document, so they are links before any script runs and for whatever reads the page as built (PNL-2). The stylesheet alone gives the whole component: the two columns are a grid in which each item takes the column of its data-direction, whatever its place in the markup, and an anchor without href is not displayed (PNL-3); stacking is a container query on the nav (PNL-5); the arrows are the items' ::before and ::after in the icon font, mirrored under :dir(rtl); the states and the press-hold are the stylesheet's as they are Link's. The package's script, where it is loaded, adds through its one listener on the document what a stylesheet cannot: the shared press primitive (ripple and dim, PNL-11), the reordering of items given next-first so that the focus order is right, and every debug report. The web is not a custom element here, so packages/tools/src/conventions.js needs an entry for where the implementation lives, as prose has. React: PreviousNextLinks renders the same markup and takes a render prop for a router's link. | TanreiPreviousNextLinks(label:previous:next:), each item optional. Each item is built on SwiftUI's Link; action runs before the address opens and returns whether the link should still open it (the environment's OpenURLAction does the opening). The container has the navigation landmark through an accessibility container with label. The row stacks with ViewThatFits measured against the proposed width. | TanreiPreviousNextLinks(previous, next, contentDescription, modifier). Compose has no navigation landmark and no link role for a clickable element: the row is a semantics group named by contentDescription, and its README says what is not exposed. Stacking reads the incoming constraints (BoxWithConstraints). | TanreiPreviousNextLinks(previous: …, next: …, semanticLabel: …). Semantics(container: true, label:) around the row; each item Semantics(link: true), with linkUrl where the engine has it. Stacking reads the incoming constraints (LayoutBuilder). | <PreviousNextLinks accessibilityLabel="Pages" previous={{ label, title, href }} next={…} />. Each item is a Pressable with accessibilityRole="link"; the row has accessibilityRole="navigation" where the platform maps it (the web target) and is a labelled group elsewhere. Stacking reads onLayout. Follows the app's direction where an ancestor's is not known. |
टोकन
| टोकन | किसका एलियास | रिज़ॉल्व किया गया मान (लाइट) |
|---|---|---|
--tanrei-comp-previous-next-links-container-gap | sys.space.space150 | 12px |
--tanrei-comp-previous-next-links-container-min-width | — | 240px |
--tanrei-comp-previous-next-links-container-padding | sys.space.space200 | 16px |
--tanrei-comp-previous-next-links-container-shape | sys.shape.corner.medium | 8px |
--tanrei-comp-previous-next-links-focused-container-shape | — | 8px |
--tanrei-comp-previous-next-links-focused-opacity | — | 1 |
--tanrei-comp-previous-next-links-gap | sys.space.space200 | 16px |
--tanrei-comp-previous-next-links-hovered-container-shape | — | 8px |
--tanrei-comp-previous-next-links-hovered-opacity | — | 1 |
--tanrei-comp-previous-next-links-icon-size | sys.icon.small | 20px |
--tanrei-comp-previous-next-links-item-container-color | — | |
--tanrei-comp-previous-next-links-item-focused-container-color | — | |
--tanrei-comp-previous-next-links-item-focused-icon-color | — | |
--tanrei-comp-previous-next-links-item-focused-label-color | — | |
--tanrei-comp-previous-next-links-item-focused-outline-color | — | |
--tanrei-comp-previous-next-links-item-focused-state-layer-color | — | |
--tanrei-comp-previous-next-links-item-focused-title-color | — | |
--tanrei-comp-previous-next-links-item-hovered-container-color | — | |
--tanrei-comp-previous-next-links-item-hovered-icon-color | — | |
--tanrei-comp-previous-next-links-item-hovered-label-color | — | |
--tanrei-comp-previous-next-links-item-hovered-outline-color | — | |
--tanrei-comp-previous-next-links-item-hovered-state-layer-color | — | |
--tanrei-comp-previous-next-links-item-hovered-title-color | — | |
--tanrei-comp-previous-next-links-item-icon-color | sys.color.on-surface-variant | |
--tanrei-comp-previous-next-links-item-label-color | sys.color.on-surface-variant | |
--tanrei-comp-previous-next-links-item-outline-color | sys.color.outline-variant | |
--tanrei-comp-previous-next-links-item-pressed-container-color | — | |
--tanrei-comp-previous-next-links-item-pressed-icon-color | — | |
--tanrei-comp-previous-next-links-item-pressed-label-color | — | |
--tanrei-comp-previous-next-links-item-pressed-outline-color | — | |
--tanrei-comp-previous-next-links-item-pressed-state-layer-color | — | |
--tanrei-comp-previous-next-links-item-pressed-title-color | — | |
--tanrei-comp-previous-next-links-item-state-layer-color | comp.previous-next-links.item.title.color | |
--tanrei-comp-previous-next-links-item-title-color | sys.color.on-surface | |
--tanrei-comp-previous-next-links-label-gap | sys.space.space25 | 2px |
--tanrei-comp-previous-next-links-motion-feedback-duration | sys.motion.role.feedback | 450ms |
--tanrei-comp-previous-next-links-motion-state-duration | sys.motion.role.state.large | 250ms |
--tanrei-comp-previous-next-links-motion-state-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-previous-next-links-outline-width | sys.border.hairline | 1px |
--tanrei-comp-previous-next-links-pressed-container-shape | — | 8px |
--tanrei-comp-previous-next-links-pressed-opacity | — | 1 |
--tanrei-comp-previous-next-links-label-typescale | sys.typescale.label-small | 500 12px/1.3333 |
--tanrei-comp-previous-next-links-title-typescale | sys.typescale.body-large | 400 16px/1.625 |
फ़िक्स्चर
मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।
both
label: Pages items: 2 next-only
label: Pages items: 2 previous-only
label: Pages items: 1 long-titles
label: Pages items: 2 labels-only
label: Posts items: 2 both-rtl
label: الصفحات direction: rtl items: 2 next-only-rtl
label: الصفحات direction: rtl items: 1 long-titles-rtl
label: الصفحات direction: rtl items: 2 ltr-title-rtl
label: الصفحات direction: rtl items: 2 इससे जनरेट किया गया: specs/previous-next-links.spec.json, tokens/comp/previous-next-links.tokens.json, design/tokens/
- एक के ऊपर एक वाला रूप ग्रिड के अपने कॉलम की गिनती से बनता है, उस चौड़ाई से जो
navके पास है। इसमें न कोई कंटेनर क्वेरी शामिल है, न कोई मीडिया क्वेरी। - पैकेज की स्क्रिप्ट के बिना स्टाइलशीट हर स्टेट बनाती है, और दबाने पर फ़ीडबैक ओवरले होता है। जिन आइटम में अगला पहले लिखा गया है, वे सही क्रम में बनते हैं, पर फ़ोकस के क्रम में अगला ही पहले रहता है। पिछला आइटम पहले लिखें।
- स्टाइलशीट दाएँ से बाएँ वाले लेआउट में दोनों ऐरो मिरर करती है। जिस डिज़ाइन सिस्टम का आइकन सेट दोनों में से किसी भी नाम को मिरर होने वाला नहीं बताता, उसमें स्क्रिप्ट मिरर करना हटा देती है; स्क्रिप्ट के बिना, आइटम पर
data-mirror="never"लिखें। - पिछला और अगला लिंक को
.tanrei-proseके बाहर रखें, याtanrei-not-proseसे चिह्नित हिस्से के भीतर: प्रोज़ अपने ऐंकर को टेक्स्ट लिंक के रूप में बनाता है।
- इन्हें कॉन्टेंट के बाद रखें, हर पेज पर एक बार।
- हर पेज पर दोनों आइटम दें, और जिसका कोई गंतव्य नहीं है उसे
hrefके बिना छोड़ दें। वह दिखाया नहीं जाता। - दिशा अपने प्रॉडक्ट के शब्दों में लिखें: “पिछला” और “अगला”, या “नई पोस्ट” और “पुरानी पोस्ट”।
- इन्हें उन बटनों के लिए इस्तेमाल न करें जो बिना किसी पते के, दिखाई जा रही चीज़ को बदलते हैं। आइटम एक लिंक है।
- इन्हें किसी सूची या टेबल के पेज नंबर से बदलने के लिए इस्तेमाल न करें: वह पेजिनेशन का काम है।
- पड़ोसी पेज को नए टैब में न खोलें। एक क्रम के पेज एक-दूसरे की जगह लेते हैं।
- आइटम को अपने ग्लिफ़ न दें।
- रोल
navigation- लेबलिंग
- The landmark is named by label, which is required: a page has other navigation, and the name tells this one apart. Each item is a link named by its label and then its title ("Next Design tokens"), both of which are drawn, so the name a person hears holds the words a person sees; the arrow is decorative. Nothing is added to the name.
- न्यूनतम टार्गेट
- दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px
कीबोर्ड
| कुंजियाँ | क्रिया |
|---|---|
| Tab | Moves focus to the previous item, then to the next: each drawn item is a tab stop, as the links of a navigation region are. |
| Enter | Follows the focused item. Space does what it does on any link (on the web it scrolls the page). |
टिप्पणियाँ
- An item is a link and never a button: it has a destination, and without one it is not drawn. Paging by number — the pages of a list or a result set, with or without an address for each — is Pagination, a component of its own: these links say where they lead by its title, a page number says nothing of the sort.
- An item is pressed as a whole, so its title is not a second link and is not underlined. A text link is underlined because nothing else tells it from the text beside it; an item is told by its edge, its arrow and its place, none of which is a color. In forced colors the edge and the text take the platform's link color (PNL-18).
- The reading and focus order is previous, then next, in both layout directions and when the items stack; the visual order follows it (WCAG 1.3.2, 2.4.3).
- The direction is said in words by label. The arrow repeats it for sighted people and is hidden from assistive technology; an item with an empty label is reported in debug builds.
- The next item keeps its place when there is no previous page (PNL-4): a person who pages through a sequence finds it where it was.
- Text must remain readable at 200% text size: titles wrap and are never cut, the items grow, and the row stacks by the width it has (PNL-5, PNL-19).
- Contrast in the default system: the title is on-surface and the label and the arrow on-surface-variant, both held to 4.5:1 (7:1 in the high-contrast schemes) on every surface by the token invariants. The edge is outline-variant, the one hairline: it is not held to 3:1, and it does not need to be, because the label, the title and the arrow identify the item without it (WCAG 1.4.11 asks 3:1 of what is required to identify a control). The focus ring is held to 3:1 against every surface.
- How a state looks is a value decision of the active design system (a state-layer mix in Tanrei, a dim or no hover at all elsewhere). The previous and next links read the state's tokens and never computes the effect itself.
- A pair of previous and next links belongs after the content it pages, once per page. A product that prints its pages hides it in print.
इससे जनरेट किया गया: specs/previous-next-links.spec.json, tokens/sys/measure.tokens.json
- हर आइटम ब्राउज़र का अपना लिंक है, जिसका नाम उसके लेबल और फिर उसके शीर्षक से बनता है (“अगला डिज़ाइन टोकन”), और ये दोनों दिखाए जाते हैं।
- ऐरो सजावटी हैं और सहायक तकनीक से छिपे रहते हैं।
- दिखने का क्रम पढ़ने के क्रम के साथ चलता है: पहले पिछला, फिर अगला, दोनों दिशाओं में, और तब भी जब आइटम एक के ऊपर एक हों।
- कीबोर्ड की फ़ोकस रिंग आइटम के चारों ओर बनती है। शीर्षक रैप होते हैं, और आइटम पाठक के टेक्स्ट साइज़ के साथ बढ़ते हैं।
- लैंडमार्क को
aria-labelसे नाम दें, अपने प्रॉडक्ट की भाषा में। पेज पर दूसरे नेविगेशन भी होते हैं, और यह नाम इसे उनसे अलग पहचान देता है। Tanrei अपना कोई शब्द साथ नहीं देता। - ऐंकर पर
rel="prev"औरrel="next"लिखें। - पिछला आइटम अगले आइटम से पहले लिखें।