पेजिनेशन

अवलोकन

link

Web

tanrei-pagination

clock_loader_40

SwiftUI

TanreiPagination

radio_button_unchecked

Jetpack Compose

TanreiPagination

radio_button_unchecked

Flutter

TanreiPagination

radio_button_unchecked

React Native

Pagination

radio_button_unchecked

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

नंबर वाला, और पहला और आख़िरी के साथ

पेजिनेशन एक सूची के पेज नंबर से बदलता है: खोज नतीजे, किसी ब्लॉग की पोस्ट, किसी टेबल की पंक्तियाँ। शीर्षक वाले पेजों के किसी क्रम में, जैसे किसी गाइड के अध्यायों में, पिछला और अगला पेज पिछला और अगला लिंक हैं: शीर्षक बताता है कि वह कहाँ ले जाता है, पेज नंबर नहीं बताता।

इस्तेमाल

link

मौजूदा पेज दें, और यह कि कुल कितने पेज हैं। कौन-से नंबर दिखाने हैं, यह पेजिनेशन ख़ुद तय करता है। href होने पर हर पेज अपने पते का लिंक होता है। उसके बिना पेज बटन होते हैं, और पेज बदलने पर दिखाई जा रही चीज़ आप बदलते हैं।

<!-- लिंक: हर पेज का एक पता है जिसे बुकमार्क, शेयर या नए टैब में खोला जा सकता है। {page} में उसका नंबर भरा जाता है। -->
<tanrei-pagination label="खोज नतीजों के पेज" page="3" count="12" href="/results/?page={page}"
  previous-label="पिछला पेज" next-label="अगला पेज" page-label="पेज {page}"></tanrei-pagination>

<!-- बटन: पेज अपनी जगह पर बदलता है। एलिमेंट पहले अपना page बदलता है, फिर change भेजता है; उसे रद्द करें तो पेज वही रहता है। -->
<tanrei-pagination id="pages" label="पेज" page="1" count="10"
  previous-label="पिछला पेज" next-label="अगला पेज" page-label="पेज {page}"></tanrei-pagination>

<script type="module">
  import '@tanrei/web/components/pagination';
  document.querySelector('#pages').addEventListener('change', (e) => showPage(e.detail.page));
</script>

import { Pagination } from '@tanrei/react';

<Pagination label="पेज" page={page} count={10}
  previousLabel="पिछला पेज" nextLabel="अगला पेज" pageLabel="पेज {page}"
  onChange={(e) => setPage(e.detail.page)} />

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

शब्द आपके हैं: Tanrei अपना कोई शब्द साथ नहीं देता। उन्हें हर एलिमेंट पर दें, या पूरे प्रॉडक्ट के लिए एक बार setWords() से दें (previousPageLabel, nextPageLabel, firstPageLabel, lastPageLabel, pageLabel, pageCountText)।

स्पेक

link

छोटा रूप, और छोटा साइज़

पतले कॉलम में नंबर वाला रूप छोटा रूप बन जाता है

• कौन-से नंबर दिखते हैं। पहला और आख़िरी पेज (boundaries, डिफ़ॉल्ट 1), मौजूदा पेज और उसके दोनों ओर एक-एक पेज (siblings, डिफ़ॉल्ट 1)। इनके बीच छोड़े गए पेज एक एलिप्सिस बन जाते हैं। किसी छोर के पास दूसरी ओर ज़्यादा पेज दिखते हैं, ताकि हर पेज पर पंक्ति में जगहों की गिनती एक ही रहे और उसकी चौड़ाई न बदले।
• मौजूदा पेज भरे हुए रंग से बनता है और मौजूदा पेज के रूप में बताया जाता है। उसे दबाने से कुछ नहीं होता।
• पिछला और अगला सिर्फ़ आइकन हैं। पहले और आख़िरी पेज पर वे डिसेबल होते हैं, और अपनी जगह बनाए रखते हैं। first-last के साथ उनके दोनों ओर पहला और आख़िरी बनते हैं।
• छोटा रूप (variant="compact") पिछला और अगला के बीच आपका वाक्य, “10 में से पेज 3”, दिखाता है। वाक्य न हो तो वह दोनों नंबर स्लैश के साथ, “3 / 10”, दिखाता है, और डेवलपमेंट बिल्ड बताता है कि शब्द नहीं दिए गए। नंबर वाला रूप, मिली हुई चौड़ाई में न समाने पर, ख़ुद छोटा रूप बन जाता है।
• दो साइज़: medium (40) और small (32), भीड़ वाली जगह के लिए, जैसे किसी टेबल की स्थिति पंक्ति।
• दाएँ से बाएँ में पंक्ति दाईं ओर से लगती है और ऐरो मिरर होते हैं। नंबर पेज की भाषा के अंकों में लिखे जाते हैं।

संरचना

भाग	विवरण
1 root	The navigation landmark: as wide as its layout gives it, holding one row of items at its start edge. It draws nothing of its own.
2 item	One place of the row that can be pressed: a page, or one of the controls first, previous, next and last. As high as its size, at least as wide, and where hover, focus and press are drawn.
3 label	A page's number, in the digits of the language of where the pagination is used.
4 icon	The arrow of a control, from the system's icon set: first_page, chevron_left, chevron_right and last_page. Decorative; mirrored in a right-to-left layout by the icon helper.
5 ellipsis · वैकल्पिक	The mark that stands for the pages left out, in a place as wide as an item. It is not a control and is hidden from assistive technology.
6 count · वैकल्पिक	The short form's sentence, between previous and next: which page of how many ("Page 3 of 10").
7 focus-ring	The indicator shown for keyboard focus, around an item.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
label	string	""	The accessible name of the landmark ("Pages", "Search results pages"), 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.
page	number	1	The current page, counted from 1. Activating another page sets it (PGN-7).
count	number	1	How many pages there are. Below 1 the pagination draws nothing (PGN-3).
siblings	number	1	How many pages are shown on each side of the current page in the numbered form (PGN-2).
boundaries	number	1	How many pages are always shown at the start and at the end of the numbered form (PGN-2).
variant	numbered | compact	"numbered"	numbered: the page numbers, with the controls on either side; it draws the compact form where its row does not fit (PGN-11). compact: the controls and the sentence that says which page of how many, never the numbers — for a narrow place, a table's status line, or a list whose pages are not reached by number.
size	small | medium	"medium"	An item's height (32 / 40 under the default system). small is for a dense place, such as the status line of a compact table. The hit area always meets the minimum target. A design system may add sizes.
firstLast	boolean	false	Draws first and last on either side of previous and next, for a list long enough that its ends are worth a control of their own.
href	string	""	The address of a page, with the place {page}, which the pagination fills with the page's number ("/results/?page={page}"). Not empty, every page and every control is a link to its page's address (PGN-6). Empty, they are buttons, and the product changes what is shown when the page changes (PGN-7).
previousLabel	string	""	The previous control's accessible name ("Previous page"). Empty reads the product's words. Required.
nextLabel	string	""	The next control's accessible name ("Next page"). Empty reads the product's words. Required.
firstLabel	string	""	The first control's accessible name ("First page"). Empty reads the product's words. Required while firstLast is true.
lastLabel	string	""	The last control's accessible name ("Last page"). Empty reads the product's words. Required while firstLast is true.
pageLabel	string	""	A page's accessible name, with the place {page}, which the pagination fills with the page's number as it draws it ("Page {page}", "{page}ページ"). Empty reads the product's words; where neither gives one, a page is named by its number alone.
countText	string	""	The short form's sentence, which the product writes whole in its own language with two places the pagination fills: {page} with the current page and {count} with the number of pages ("Page {page} of {count}", "{count}ページ中{page}ページ"). Empty reads the product's words; where neither gives one, the short form draws the two numbers with a slash between them ("3 / 10"), and a debug build reports it.

इवेंट

इवेंट	विवरण
change	The user asked for another page, by a page or by first, previous, next or last; carries the page asked for. It is emitted before the page changes and before a link opens its address; a product that cancels it keeps the page as it was and opens nothing — its own router has taken the navigation (PGN-7).

स्टेट

व्यवहार

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

ID	आवश्यकता
PGN-1	THE pagination SHALL be one navigation landmark named by label that holds its items as one list in reading order — first, previous, the pages and ellipses, next, last; in the compact form first, previous, the count sentence, next, last — and nothing else; WHILE label is empty THE pagination SHALL still render, and in debug builds report that the landmark has no accessible name.
PGN-2	THE numbered form SHALL show the pages 1 to boundaries, the pages count − boundaries + 1 to count, and the current page with siblings pages on each side of it, and SHALL draw an ellipsis in place of the pages left out between two of these runs; WHERE the ellipsis would stand for one page only THE numbered form SHALL draw that page instead. WHILE the current page is near an end THE numbered form SHALL show more pages on the other side of it, so that the row holds the same number of places — 2 × boundaries + 2 × siblings + 3 — on every page whenever count is at least that many, and the row keeps its width from page to page.
PGN-3	THE pagination SHALL read count as a whole number, and WHILE it is below 1 or cannot be read SHALL draw nothing, take no room and expose no landmark; it SHALL read page as a whole number held between 1 and count, and siblings and boundaries as whole numbers of 0 or more (boundaries 0 shows no end pages, so that an ellipsis stands at an end), and in debug builds report each value it had to change.
PGN-4	THE pagination SHALL draw the current page from the current tokens (comp.pagination.current.container.color, comp.pagination.current.label.color and so on) and every other page and every control from the item tokens, and SHALL expose the current page as the current one (on the web aria-current="page") while keeping it the same kind of element as the other pages: a link to its own address while href is given, a button otherwise. WHEN the current page is activated THE pagination SHALL emit no change; a current page that is a link still opens its own address, as any link does.
PGN-5	WHILE the current page is 1 THE pagination SHALL draw first and previous disabled, and WHILE it is count, next and last disabled: drawn from the disabled state's tokens, exposed as disabled, out of the focus order and not activatable, and in their places, so that the row keeps its width; a disabled control of a pagination with href SHALL have no address.
PGN-6	WHILE href is not empty THE pagination SHALL draw every page and every enabled control as the platform's own link to href with {page} filled with the page it leads to, written as a whole number in Western digits whatever the language, so that whatever the platform gives a link — on the web its context menu, opening in a new tab, copying its address, the address shown before it is followed — is the platform's; it SHALL expose the link role and WHERE the platform's links can say how a destination relates to the page (the web's rel) SHALL say prev for previous and next for next. IF href does not hold the place {page}, or names a script to run (the web's javascript: scheme), THE pagination SHALL draw buttons as if href were empty and in debug builds report it.
PGN-7	WHEN the user activates a page other than the current one, or an enabled control, by pointer, touch, Enter, Space on a button or assistive technology THE pagination SHALL emit change exactly once with the page it leads to — first 1, previous page − 1, next page + 1, last count — and then, unless the product cancelled it, SHALL make that page the current one and, while href is given, open the link's address where the person is; WHEN the product cancels change THE pagination SHALL keep the page it had and open nothing. A link SHALL NOT be activated by Space, which scrolls the page as it does on any link.
PGN-8	THE pagination SHALL draw previous, next, first and last as icons only — chevron_left, chevron_right, first_page and last_page of the system's icon set, through the platform's icon helper, in a box of comp.pagination.icon.size, in the icon color of their 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 — and SHALL name them by previousLabel, nextLabel, firstLabel and lastLabel, taking each from the product's words WHILE it is empty; WHILE a control's name is empty in both THE pagination SHALL still draw it and in debug builds report that it has no accessible name. It SHALL take no glyph from the product and SHALL draw no path of its own.
PGN-9	THE pagination SHALL draw a page's number in comp.pagination.label.typescale, in the digits the platform's number formatting gives for the language where it is used, without grouping separators (1205, not 1,205), and in figures of one width, and SHALL name the page by pageLabel with {page} filled by the number as it is drawn, taking pageLabel from the product's words WHILE it is empty and naming the page by its number alone WHILE neither gives one; the number drawn SHALL stay part of the name, so that a person who says what they see can activate the page.
PGN-10	THE pagination SHALL draw an ellipsis as the character … in comp.pagination.label.typescale and comp.pagination.ellipsis.color, centred in a place as wide as an item is high (comp.pagination.container.height.medium for medium, and so on), hidden from assistive technology, out of the focus order and with no state: the pages left out are said by the numbers on either side of it.
PGN-11	WHILE variant is compact, or variant is numbered and the width the layout gives the pagination is less than its numbered row needs, THE pagination SHALL draw the compact form: first and previous, then countText with {page} and {count} filled, comp.pagination.count.padding-inline on each side, in comp.pagination.count.typescale and comp.pagination.count.color, then next and last; WHILE countText is empty in both the prop and the product's words THE compact form SHALL draw the two numbers with a slash between them ("3 / 10") and in debug builds report it. It SHALL decide this by the width it is given, not by the window's, and the width it asks of a layout that sizes it by its content SHALL be the width of its numbered row, so that it draws the numbered form again where the room comes back. The sentence is text, not a control and not a live region: the product says what changed where the content changes.
PGN-12	THE pagination SHALL lay its items out in one row at the start edge of its box, comp.pagination.gap apart, each item the container height of its size high (comp.pagination.container.height.medium for medium, and so on) and at least as wide, a page's number centred in it with comp.pagination.container.padding-inline on each side where the number is wider than the square, and each control's arrow centred in its square; it SHALL NOT wrap the row.
PGN-13	WHILE an item is hovered, keyboard-focused, pressed or disabled THE pagination SHALL render its container, label, arrow and opacity from the component tokens of the highest-precedence active state of its part (item or current), with precedence disabled over pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state.
PGN-14	WHEN an item receives keyboard focus THE pagination SHALL show the focus ring around that item 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.
PGN-15	WHEN an enabled item is pressed by pointer, touch, Enter or, on a button, Space THE pagination 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; it SHALL NOT hold the change or the navigation back for press-hold.
PGN-16	WHILE pressed THE pagination 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 item 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, icon, 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.pagination.motion.feedback-duration with comp.pagination.motion.state-easing, fades over comp.pagination.motion.state-duration with comp.pagination.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
PGN-17	THE pagination SHALL ease its item 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.
PGN-18	THE pagination SHALL change an item between its states over comp.pagination.motion.state-duration with comp.pagination.motion.state-easing, and at once where motion is reduced; WHEN the current page changes THE pagination SHALL change the item that was current and the item that becomes current between their states as it changes any item's, and SHALL draw at once the items whose page numbers or places change.
PGN-19	THE pagination SHALL make each enabled item one stop of the focus order, in the order of PGN-1, as the links and buttons of a navigation region are, and SHALL take no arrow key: Tab and Shift+Tab move between items. WHEN the current page changes by an item the person activated THE pagination SHALL keep focus on an item: on the page now current where the person activated a page, and on the control they activated where it is still enabled, otherwise on the page now current — and in the compact form, which draws no pages, on the nearest enabled control (previous after next or last, next after previous or first).
PGN-20	WHERE the visual size of an item is below the minimum target THE pagination 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 and without overlapping the hit area of its neighbour beyond the gap between them; a platform that cannot tell the input type SHALL use sys.target.touch.
PGN-21	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 pagination SHALL draw the numbers, the arrows and the count sentence in the platform's text or link color, the current page in the platform's highlight colors, a disabled control in the platform's disabled text color, and the focus ring in the platform's highlight color.
PGN-22	WHILE the text size is enlarged THE pagination SHALL grow each item with its number, never below the container height of its size (comp.pagination.container.height.medium for medium, and so on), keeping comp.pagination.gap and the arrows at comp.pagination.icon.size, and SHALL draw the compact form where the grown row no longer fits (PGN-11).
PGN-23	THE pagination 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; WHERE that direction is right-to-left THE pagination SHALL lay its row from the right — first at the right edge, last at the left — keeping the reading and focus order of PGN-1, and SHALL draw the arrows mirrored where the system's icon set marks them as mirrored; THE pagination SHALL NOT mirror a glyph itself. WHEN the direction changes while the pagination is shown THE pagination SHALL draw itself for the new direction at once, keeping its focus.
PGN-24	THE pagination SHALL lay out the count sentence as text of its own direction, isolated from the text around it, and each number as a number that keeps its own order in a right-to-left layout, so that "3 / 10" reads 3 then 10 in either direction.
PGN-25	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE pagination SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on its navigation landmark (PGN-1) — an id reference by the elements it names in the host's tree or a tree around it, a description after its own. WHILE label is not empty it is the landmark's name, over a name given so; WHILE label is empty, a name given so is the landmark's name and SHALL NOT be reported as having none in debug builds. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE pagination SHALL take it off that element.

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

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

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-pagination	TanreiPagination	TanreiPagination	TanreiPagination	Pagination
label · प्रॉपर्टी	label	label	contentDescription	semanticLabel	accessibilityLabel
page · प्रॉपर्टी	page	page	page	page	page
count · प्रॉपर्टी	count	count	count	count	count
siblings · प्रॉपर्टी	siblings	siblings	siblings	siblings	siblings
boundaries · प्रॉपर्टी	boundaries	boundaries	boundaries	boundaries	boundaries
variant · प्रॉपर्टी	variant	variant	variant	variant	variant
size · प्रॉपर्टी	size	size	size	size	size
firstLast · प्रॉपर्टी	firstLast	showsFirstLast	showFirstLast	showFirstLast	showFirstLast
href · प्रॉपर्टी	href	destination	hrefFor	hrefFor	hrefFor
previousLabel · प्रॉपर्टी	previousLabel	previousLabel	previousLabel	previousLabel	previousLabel
nextLabel · प्रॉपर्टी	nextLabel	nextLabel	nextLabel	nextLabel	nextLabel
firstLabel · प्रॉपर्टी	firstLabel	firstLabel	firstLabel	firstLabel	firstLabel
lastLabel · प्रॉपर्टी	lastLabel	lastLabel	lastLabel	lastLabel	lastLabel
pageLabel · प्रॉपर्टी	pageLabel	pageLabel	pageLabel	pageLabel	pageLabel
countText · प्रॉपर्टी	countText	countText	countText	countText	countText
change · इवेंट	change	onChange	onPageChange	onPageChanged	onPageChange
टिप्पणियाँ	<tanrei-pagination label="Pages" page="3" count="10" previous-label="Previous page" next-label="Next page" page-label="Page {page}">; the attributes are the props in kebab case (first-last, count-text). The element draws a nav with aria-label around one ol in its shadow root; each page and control is an a (with href) or a button, the current page with aria-current="page", a disabled link an a without href and with aria-disabled="true" and role="link". change is a cancelable CustomEvent whose detail is { page }, fired before page changes and, for a link, before the browser follows it. The narrow form is decided by a ResizeObserver on the element against its numbered row, which is kept in the layout at no height so that the element asks for its width. React: the generated Pagination wrapper, with onChange.	TanreiPagination(label:page: $page, count:, destination: { page in URL? }): page is a Binding<Int>; destination is a closure from a page to an optional URL, the idiom for the href with its place; with one, each item is a Link. onChange returns whether to take the page. The narrow form is a ViewThatFits of the numbered row and the compact one.	TanreiPagination(page, count, onPageChange = { page -> true }, contentDescription = …); hrefFor: ((Int) -> String)? opens through LocalUriHandler. Compose has no navigation landmark and no link role for a clickable element: the row is a semantics group named by contentDescription, the current page selected, and its README says what is not exposed. The narrow form reads the incoming constraints (SubcomposeLayout).	TanreiPagination(page: 3, count: 10, onPageChanged: (page) => true, semanticLabel: …); hrefFor: String Function(int)? makes each item Semantics(link: true) with linkUrl, opened by the opener the app provides. The narrow form reads the incoming constraints (LayoutBuilder).	<Pagination accessibilityLabel="Pages" page={3} count={10} onPageChange={(event) => …} />; onPageChange receives an event with page whose preventDefault() keeps the page. Each item is a Pressable with accessibilityRole="link" (with hrefFor) or "button", the current page accessibilityState={{ selected: true }}. The narrow form reads onLayout.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-pagination-container-height-medium	—	40px
--tanrei-comp-pagination-container-height-small	—	32px
--tanrei-comp-pagination-container-padding-inline	sys.space.space100	8px
--tanrei-comp-pagination-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-pagination-count-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-pagination-count-padding-inline	sys.space.space100	8px
--tanrei-comp-pagination-current-container-color	sys.color.secondary-container	#eeeeee
--tanrei-comp-pagination-current-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-pagination-current-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-pagination-current-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-pagination-current-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-pagination-current-focused-container-color	—	#dadada
--tanrei-comp-pagination-current-focused-icon-color	—	#262626
--tanrei-comp-pagination-current-focused-label-color	—	#262626
--tanrei-comp-pagination-current-focused-state-layer-color	—	#262626
--tanrei-comp-pagination-current-hovered-container-color	—	#dedede
--tanrei-comp-pagination-current-hovered-icon-color	—	#262626
--tanrei-comp-pagination-current-hovered-label-color	—	#262626
--tanrei-comp-pagination-current-hovered-state-layer-color	—	#262626
--tanrei-comp-pagination-current-icon-color	sys.color.on-secondary-container	#262626
--tanrei-comp-pagination-current-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-pagination-current-pressed-container-color	—	#dadada
--tanrei-comp-pagination-current-pressed-icon-color	—	#262626
--tanrei-comp-pagination-current-pressed-label-color	—	#262626
--tanrei-comp-pagination-current-pressed-state-layer-color	—	#262626
--tanrei-comp-pagination-current-state-layer-color	comp.pagination.current.label.color	#262626
--tanrei-comp-pagination-disabled-container-shape	—	9999px
--tanrei-comp-pagination-disabled-opacity	—	1
--tanrei-comp-pagination-ellipsis-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-pagination-focused-container-shape	—	9999px
--tanrei-comp-pagination-focused-opacity	—	1
--tanrei-comp-pagination-gap	sys.space.space50	4px
--tanrei-comp-pagination-hovered-container-shape	—	9999px
--tanrei-comp-pagination-hovered-opacity	—	1
--tanrei-comp-pagination-icon-size	sys.icon.small	20px
--tanrei-comp-pagination-item-container-color	—	#000000 · 0%
--tanrei-comp-pagination-item-disabled-container-color	—	#000000 · 0%
--tanrei-comp-pagination-item-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-pagination-item-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-pagination-item-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-pagination-item-focused-container-color	—	#1b1b1b · 10%
--tanrei-comp-pagination-item-focused-icon-color	—	#1b1b1b
--tanrei-comp-pagination-item-focused-label-color	—	#1b1b1b
--tanrei-comp-pagination-item-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-pagination-item-hovered-container-color	—	#1b1b1b · 8%
--tanrei-comp-pagination-item-hovered-icon-color	—	#1b1b1b
--tanrei-comp-pagination-item-hovered-label-color	—	#1b1b1b
--tanrei-comp-pagination-item-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-pagination-item-icon-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-pagination-item-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-pagination-item-pressed-container-color	—	#1b1b1b · 10%
--tanrei-comp-pagination-item-pressed-icon-color	—	#1b1b1b
--tanrei-comp-pagination-item-pressed-label-color	—	#1b1b1b
--tanrei-comp-pagination-item-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-pagination-item-state-layer-color	comp.pagination.item.label.color	#1b1b1b
--tanrei-comp-pagination-motion-feedback-duration	sys.motion.role.feedback	450ms
--tanrei-comp-pagination-motion-state-duration	sys.motion.role.state.compact	200ms
--tanrei-comp-pagination-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-pagination-pressed-container-shape	—	9999px
--tanrei-comp-pagination-pressed-opacity	—	1
--tanrei-comp-pagination-count-typescale	sys.typescale.body	400 14px/1.5714
--tanrei-comp-pagination-label-typescale	sys.typescale.label	500 14px/1.4286

फ़िक्स्चर

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

size: small (2)

small

label: Table pages page: 4 count: 8 size: small previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

compact-first-last

label: Table pages page: 1 count: 25 variant: compact size: small firstLast: true previousLabel: Previous page nextLabel: Next page firstLabel: First page lastLabel: Last page countText: Page {page} of {count}

size: medium (14)

default

label: Pages page: 1 count: 10 previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

middle

label: Pages page: 5 count: 10 previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

last-page

label: Pages page: 10 count: 10 previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

few-pages

label: Pages page: 2 count: 5 previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

single-page

label: Pages page: 1 count: 1 previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

first-last

label: Pages page: 12 count: 40 firstLast: true previousLabel: Previous page nextLabel: Next page firstLabel: First page lastLabel: Last page pageLabel: Page {page}

wide-neighbourhood

label: Pages page: 10 count: 30 siblings: 2 boundaries: 2 previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

large-numbers

label: Pages page: 1205 count: 2480 previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

links

label: Search results pages page: 3 count: 12 href: /results/?page={page} previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

links-first

label: Posts pages page: 1 count: 12 href: /blog/page/{page}/ previousLabel: Previous page nextLabel: Next page pageLabel: Page {page}

compact

label: Pages page: 3 count: 10 variant: compact previousLabel: Previous page nextLabel: Next page countText: Page {page} of {count}

compact-numbers

label: Pages page: 3 count: 10 variant: compact previousLabel: Previous page nextLabel: Next page

rtl

label: الصفحات page: 3 count: 10 firstLast: true previousLabel: الصفحة السابقة nextLabel: الصفحة التالية firstLabel: الصفحة الأولى lastLabel: الصفحة الأخيرة pageLabel: الصفحة {page} direction: rtl

rtl-compact

label: الصفحات page: 3 count: 10 variant: compact previousLabel: الصفحة السابقة nextLabel: الصفحة التالية countText: الصفحة {page} من {count} direction: rtl

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

दिशानिर्देश

link

करें

link

• इसे उस सूची के बाद रखें जिसके पेज यह बदलता है, और सूची लंबी हो तो उससे पहले भी।
• जब हर पेज का अपना पता हो तो लिंक (href) इस्तेमाल करें, और जब पेज अपनी जगह पर बदले तो बटन।
• किसी टेबल के नीचे, स्थिति पंक्ति में small साइज़ का छोटा रूप रखें, और जहाँ लोग हर पेज की पंक्तियाँ चुनते हैं वहाँ उसके बगल में उसके लिए एक सिलेक्ट रखें। दिखाई जा रही पंक्तियों की रेंज (“248 में से 1–10”) टेबल का स्थिति टेक्स्ट है।
• पेज बदलने पर, जहाँ कॉन्टेंट बदलता है वहाँ बताएँ कि क्या बदला: कोई हेडिंग, या टेबल का स्थिति टेक्स्ट। पेजिनेशन ख़ुद कुछ नहीं बताता।

न करें

link

• शीर्षक वाले पेजों के किसी क्रम में पिछले और अगले पेज के लिए इसे इस्तेमाल न करें। वह पिछला और अगला लिंक है।
• एक ही पेज वाली सूची के लिए इसे न दिखाएँ।
• पहले और आख़िरी पेज पर पिछला और अगला न छिपाएँ। वे डिसेबल होते हैं और अपनी जगह बनाए रखते हैं।

सुलभता

link

रोल

navigation

लेबलिंग

The landmark is named by label, which is required: a page has other navigation, and the name tells this one apart. Each page is named by pageLabel with its number ("Page 3"), which holds the number a person sees; the current page is exposed as the current one (aria-current="page"), so the name says nothing of it. The controls are icon-only and named by previousLabel, nextLabel, firstLabel and lastLabel. The arrows and the ellipsis are hidden from assistive technology.

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

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

कीबोर्ड

कुंजियाँ	क्रिया
Tab / Shift+Tab	Moves focus through the enabled items in reading order: each page and each enabled control is a tab stop, as the links of a navigation region are. The current page is a stop too; a disabled control is not.
Enter	Activates the focused item: goes to its page.
Space	Activates the focused item where the items are buttons. Where they are links it scrolls the page, as on any link.

टिप्पणियाँ

• A pagination pages one list by number. The page before and after in a sequence of titled pages — the chapters of a guide, the articles of a series — is Previous and next links, which say by title where they lead.
• Links or buttons: a page with an address of its own (a result page a person can bookmark, share or open in a tab) is a link; a list whose page changes in place (the rows of a table, a dialog's list) is a button. href decides.
• The current page is marked by its fill and by aria-current, never by color alone: its fill differs from the rest in lightness, and forced colors draw it in the highlight colors (PGN-21).
• Disabled controls keep their places, so a person who pages through a list finds next where it was (PGN-5). They are out of the focus order: there is nothing to go to.
• The ellipsis is not a control. A person reaches a page it stands for by moving towards it, or by the product's own way to jump to a page; a pagination does not draw a field to type a page into.
• How many rows a page holds, and the range of rows shown ("1–10 of 248"), are the list's and not the pagination's: a table says them in its status line, where the pagination stands beside a Select for the rows per page.
• The short form is text: when the page changes, the product says what changed where the content changes (a heading, a status). The pagination announces nothing.
• Contrast in the default system: the numbers and arrows are on-surface, held to 4.5:1 (7:1 in the high-contrast schemes) by the token invariants, and the current page's number on-secondary-container on its fill. 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 pagination reads the state's tokens and never computes the effect itself.
• A pagination belongs after the list it pages, and where the list is long, before it too; both name the same landmark by different labels.

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

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

link

• एक सूची के चारों ओर एक नेविगेशन लैंडमार्क। हर पेज और हर एनेबल कंट्रोल एक लिंक या बटन है, और फ़ोकस क्रम का एक पड़ाव।
• मौजूदा पेज aria-current="page" से बताया जाता है, और सिर्फ़ दूसरे रंग से नहीं, भरे हुए रंग से बनता है।
• डिसेबल कंट्रोल फ़ोकस क्रम से बाहर रहते हैं। ऐरो और एलिप्सिस सहायक तकनीक से छिपे रहते हैं।
• किसी पेज के नाम में वह नंबर होता है जो दिखता है, इसलिए जो व्यक्ति दिखने वाली चीज़ बोलकर काम करता है, वह भी उसे दबा सकता है।

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

link

• लैंडमार्क को label से नाम दें, अपने प्रॉडक्ट की भाषा में। पेज पर दूसरे नेविगेशन भी होते हैं, और यह नाम इसे उनसे अलग पहचान देता है।
• कंट्रोल को नाम दें (previous-label, next-label, और first-last के साथ first-label और last-label), और हर पेज को page-label से। Tanrei अपना कोई शब्द साथ नहीं देता।
• सूची बदलने पर बताएँ कि क्या बदला। पेजिनेशन फ़ोकस अपने किसी एक आइटम पर बनाए रखता है: दबाया गया कंट्रोल, या, अगर वह कंट्रोल डिसेबल हो गया हो, तो नया मौजूदा पेज।