mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
39 lines
No EOL
42 KiB
HTML
39 lines
No EOL
42 KiB
HTML
<!DOCTYPE html><html lang="en"><head>
|
||
<meta charset="utf-8">
|
||
<link rel="icon" href="/carbon-components-svelte/favicon.ico">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pagination</title>
|
||
<link rel="stylesheet" href="/carbon-components-svelte/assets/style.cdc12fd8.css">
|
||
<style>.action-link.svelte-1viyq4q{text-align:center;align-items:center;vertical-align:middle;justify-content:center;padding-top:10px}.bx--col>h1{font-size:var(--cds-productive-heading-07-font-size);font-weight:var(--cds-productive-heading-07-font-weight);letter-spacing:var(--cds-productive-heading-07-letter-spacing);line-height:var(--cds-productive-heading-07-line-height);margin-bottom:var(--cds-layout-01)}.big-paragraph{font-size:1.5rem;font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height);margin-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-05)}.bx--col>.big-paragraph>code{font-size:var(--cds-productive-heading-03-font-size);font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height)}.big-link{font-size:1.5rem;font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height)}.bx--col>p>code{font-size:var(--cds-code-02-font-size);font-weight:var(--cds-code-02-font-weight);line-height:var(--cds-code-02-line-height);letter-spacing:var(--cds-code-02-letter-spacing);background-color:var(--cds-ui-03);border-radius:.25rem;padding:0 var(--cds-spacing-02)}.bx--col>h2{font-size:var(--cds-productive-heading-06-font-size);font-weight:var(--cds-productive-heading-06-font-weight);letter-spacing:var(--cds-productive-heading-06-letter-spacing);line-height:var(--cds-productive-heading-06-line-height);padding-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-01)}.bx--col>h3{font-size:var(--cds-productive-heading-04-font-size);font-weight:var(--cds-productive-heading-04-font-weight);letter-spacing:var(--cds-productive-heading-04-letter-spacing);line-height:var(--cds-productive-heading-04-line-height);padding-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-02)}.bx--col>h4{font-size:var(--cds-productive-heading-02-font-size);font-weight:var(--cds-productive-heading-02-font-weight);letter-spacing:var(--cds-productive-heading-02-letter-spacing);line-height:var(--cds-productive-heading-02-line-height);padding-top:var(--cds-layout-04);margin-bottom:var(--cds-layout-01)}.bx--col>p{max-width:44rem;margin-bottom:var(--cds-layout-02)}.bx--content{background:0 0}@media(max-width:1056px){.bx--side-nav~.bx--content{margin-left:0;padding-left:1rem;padding-right:1rem}.bx--side-nav--expanded~.bx--content{white-space:nowrap;min-width:28rem}}.platform-name{display:flex;align-items:baseline}.platform-name code{margin-left:var(--cds-spacing-02);font-size:var(--cds-code-01-font-size);font-weight:var(--cds-code-01-font-weight);letter-spacing:var(--cds-code-01-letter-spacing);line-height:var(--cds-code-01-line-height);color:#c6c6c6}@media(max-width:580px){.platform-name code{display:none}}@media(min-width:1057px){.bx--side-nav__navigation{z-index:1}}.bx--side-nav__submenu[aria-expanded=true]+.bx--side-nav__menu{max-height:120rem}</style><style></style><meta name="title" content="Pagination" data-origin="routify"><meta property="og:title" content="Pagination" data-origin="routify"></head>
|
||
<body style="">
|
||
<div id="app" style=""> <header role="banner" aria-label="Navigation" class="bx--header"><div slot="skip-to-content"><a href="#main-content" tabindex="0" class="bx--skip-to-content">Skip to main content</a></div> <a href="/" aria-label="Navigation" class="bx--header__name"> <span slot="platform" class="platform-name">Carbon Components Svelte <code>v0.15.0</code></span></a> <div class="bx--header__global"><a target="_blank" rel="noopener" href="https://github.com/IBM/carbon-components-svelte" class="bx--header__action action-link svelte-1viyq4q"><svg data-carbon-icon="LogoGithub20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg></a> <div><button type="button" class="bx--header__action svelte-19vx6se"><svg data-carbon-icon="AppSwitcher20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path></svg> </button> </div></div></header> <nav class="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--expanded"><ul class="bx--side-nav__items"><li class="bx--side-nav__item"><button type="button" aria-expanded="true" class="bx--side-nav__submenu"> <span class="bx--side-nav__submenu-title">Components</span> <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"><svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" preserveAspectRatio="xMidYMid meet" role="img" focusable="true" tabindex="0"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path><title>Open Menu</title></svg></div></button> <ul role="menu" class="bx--side-nav__menu"><li class="bx--side-nav__menu-item"><a href="/components/Accordion" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Accordion</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Breadcrumb" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Breadcrumb</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Button" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Button</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ButtonSet" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ButtonSet</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Checkbox" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Checkbox</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ClickableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ClickableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/CodeSnippet" class="bx--side-nav__link"><span class="bx--side-nav__link-text">CodeSnippet</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ComboBox" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ComboBox</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ComposedModal" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ComposedModal</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ContentSwitcher" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ContentSwitcher</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/CopyButton" class="bx--side-nav__link"><span class="bx--side-nav__link-text">CopyButton</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/DataTable" class="bx--side-nav__link"><span class="bx--side-nav__link-text">DataTable</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/DatePicker" class="bx--side-nav__link"><span class="bx--side-nav__link-text">DatePicker</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Dropdown" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Dropdown</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ExpandableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ExpandableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/FileUploader" class="bx--side-nav__link"><span class="bx--side-nav__link-text">FileUploader</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/FluidForm" class="bx--side-nav__link"><span class="bx--side-nav__link-text">FluidForm</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Form" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Form</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Grid" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Grid</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Icon" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Icon</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/InlineLoading" class="bx--side-nav__link"><span class="bx--side-nav__link-text">InlineLoading</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/InlineNotification" class="bx--side-nav__link"><span class="bx--side-nav__link-text">InlineNotification</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Link" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Link</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Loading" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Loading</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Modal" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Modal</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/MultiSelect" class="bx--side-nav__link"><span class="bx--side-nav__link-text">MultiSelect</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/NumberInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">NumberInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/OrderedList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">OrderedList</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/OverflowMenu" class="bx--side-nav__link"><span class="bx--side-nav__link-text">OverflowMenu</span></a></li><li class="bx--side-nav__menu-item"><a aria-current="page" href="/components/Pagination" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Pagination</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/PaginationNav" class="bx--side-nav__link"><span class="bx--side-nav__link-text">PaginationNav</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/PasswordInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">PasswordInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ProgressIndicator" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ProgressIndicator</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/RadioButton" class="bx--side-nav__link"><span class="bx--side-nav__link-text">RadioButton</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/RadioTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">RadioTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Search" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Search</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Select" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Select</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SelectableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SelectableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SkeletonPlaceholder" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SkeletonPlaceholder</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SkeletonText" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SkeletonText</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Slider" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Slider</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/StructuredList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">StructuredList</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tabs" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tabs</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tag" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tag</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TextArea" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TextArea</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TextInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TextInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TimePicker" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TimePicker</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ToastNotification" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ToastNotification</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Toggle" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Toggle</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ToggleSmall" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ToggleSmall</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tooltip" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tooltip</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TooltipDefinition" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TooltipDefinition</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TooltipIcon" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TooltipIcon</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/UIShell" class="bx--side-nav__link"><span class="bx--side-nav__link-text">UIShell</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/UnorderedList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">UnorderedList</span></a></li></ul></li></ul></nav> <main id="main-content" data-components="true" class="bx--content"><div class="bx--grid"><div class="bx--row"><div class="bx--col"><h1>Pagination</h1> <div class="bar"><div class="bx--form-item"><div class="bx--select bx--select--inline"><label for="select-theme" class="bx--label">Theme</label> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="select-theme" class="bx--select-input"><option value="white" class="bx--select-option">White</option> <option value="g10" class="bx--select-option">Gray 10</option> <option value="g90" class="bx--select-option">Gray 90</option> <option value="g100" class="bx--select-option">Gray 100</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <a role="button" tabindex="0" disabled="false" href="https://github.com/IBM/carbon-components-svelte/tree/master/src/Pagination/Pagination.svelte" target="_blank" class="bx--btn bx--btn--field bx--btn--ghost"> Source code <svg data-carbon-icon="Code16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M31 16L24 23 22.59 21.59 28.17 16 22.59 10.41 24 9 31 16zM1 16L8 9 9.41 10.41 3.83 16 9.41 21.59 8 23 1 16z"></path><path d="M5.91 15H26.080000000000002V17H5.91z" transform="rotate(-75 15.996 16)"></path></svg></a></div></div></div> <div class="bx--row"><div class="prose bx--col"><div class="toc mobile"><h5>Table of Contents</h5> <div slot="aside"><ul class="bx--list--unordered"><li class="bx--list__item"><a class="bx--link" href="#usage">Usage</a> <ul class="bx--list--unordered bx--list--nested"><li class="bx--list__item"><a class="bx--link" href="#default">Default</a></li> <li class="bx--list__item"><a class="bx--link" href="#current-page">Current page</a></li> <li class="bx--list__item"><a class="bx--link" href="#custom-page-sizes">Custom page sizes</a></li> <li class="bx--list__item"><a class="bx--link" href="#hidden-page-input">Hidden page input</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton">Skeleton</a></li></ul></li></ul></div></div> <h2 id="usage">Usage</h2> <h3 id="default">Default</h3> <div class="preview"> <div class="preview-viewer"> <div id="ccs-0.8w8agve5c6p" class="bx--pagination"><div class="bx--pagination__left"><label id="bx--pagination-select-ccs-0.8w8agve5c6p-count-label" for="bx--pagination-select-ccs-0.8w8agve5c6p" class="bx--pagination__text">Items per page:</label> <div class="bx--select__item-count bx--form-item"><div class="bx--select bx--select--inline"> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="bx--pagination-select-ccs-0.8w8agve5c6p" class="bx--select-input"><option value="10" class="bx--select-option">10</option><option value="15" class="bx--select-option">15</option><option value="20" class="bx--select-option">20</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <span class="bx--pagination__text">1–10 of 102 items</span></div> <div class="bx--pagination__right"><div class="bx--select__page-number bx--form-item"><div class="bx--select bx--select--inline"><label for="bx--pagination-select-ccs-0.8w8agve5c6p2" class="bx--label bx--visually-hidden">Page number, of 11 pages</label> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="bx--pagination-select-ccs-0.8w8agve5c6p2" class="bx--select-input"><option value="1" class="bx--select-option">1</option><option value="2" class="bx--select-option">2</option><option value="3" class="bx--select-option">3</option><option value="4" class="bx--select-option">4</option><option value="5" class="bx--select-option">5</option><option value="6" class="bx--select-option">6</option><option value="7" class="bx--select-option">7</option><option value="8" class="bx--select-option">8</option><option value="9" class="bx--select-option">9</option><option value="10" class="bx--select-option">10</option><option value="11" class="bx--select-option">11</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <span class="bx--pagination__text">of 11 pages</span> <button role="button" type="button" tabindex="0" disabled="" class="bx--btn bx--btn--ghost bx--btn--disabled bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-center bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"><span class="bx--assistive-text">Previous page</span> <svg data-carbon-icon="CaretLeft16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-label="Previous page" role="img" focusable="false"><path d="M20 24L10 16 20 8z"></path></svg></button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--ghost bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-end bx--pagination__button bx--pagination__button--forward "><span class="bx--assistive-text">Next page</span> <svg data-carbon-icon="CaretRight16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-label="Next page" role="img" focusable="false"><path d="M12 8L22 16 12 24z"></path></svg></button></div></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Pagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Pagination</span> <span class="token attr-name">totalItems=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">102</span><span class="token punctuation">}</span></span> <span class="token attr-name">pageSizes=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="current-page">Current page</h3> <div class="preview"> <div class="preview-viewer"> <div id="ccs-0.ia7qw601d" class="bx--pagination"><div class="bx--pagination__left"><label id="bx--pagination-select-ccs-0.ia7qw601d-count-label" for="bx--pagination-select-ccs-0.ia7qw601d" class="bx--pagination__text">Items per page:</label> <div class="bx--select__item-count bx--form-item"><div class="bx--select bx--select--inline"> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="bx--pagination-select-ccs-0.ia7qw601d" class="bx--select-input"><option value="10" class="bx--select-option">10</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <span class="bx--pagination__text">31–40 of 102 items</span></div> <div class="bx--pagination__right"><div class="bx--select__page-number bx--form-item"><div class="bx--select bx--select--inline"><label for="bx--pagination-select-ccs-0.ia7qw601d2" class="bx--label bx--visually-hidden">Page number, of 11 pages</label> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="bx--pagination-select-ccs-0.ia7qw601d2" class="bx--select-input"><option value="1" class="bx--select-option">1</option><option value="2" class="bx--select-option">2</option><option value="3" class="bx--select-option">3</option><option value="4" class="bx--select-option">4</option><option value="5" class="bx--select-option">5</option><option value="6" class="bx--select-option">6</option><option value="7" class="bx--select-option">7</option><option value="8" class="bx--select-option">8</option><option value="9" class="bx--select-option">9</option><option value="10" class="bx--select-option">10</option><option value="11" class="bx--select-option">11</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <span class="bx--pagination__text">of 11 pages</span> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--ghost bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-center bx--pagination__button bx--pagination__button--backward "><span class="bx--assistive-text">Previous page</span> <svg data-carbon-icon="CaretLeft16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-label="Previous page" role="img" focusable="false"><path d="M20 24L10 16 20 8z"></path></svg></button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--ghost bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-end bx--pagination__button bx--pagination__button--forward "><span class="bx--assistive-text">Next page</span> <svg data-carbon-icon="CaretRight16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-label="Next page" role="img" focusable="false"><path d="M12 8L22 16 12 24z"></path></svg></button></div></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Pagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Pagination</span> <span class="token attr-name">totalItems=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">102</span><span class="token punctuation">}</span></span> <span class="token attr-name">page=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="custom-page-sizes">Custom page sizes</h3> <div class="preview"> <div class="preview-viewer"> <div id="ccs-0.uhy587fops" class="bx--pagination"><div class="bx--pagination__left"><label id="bx--pagination-select-ccs-0.uhy587fops-count-label" for="bx--pagination-select-ccs-0.uhy587fops" class="bx--pagination__text">Items per page:</label> <div class="bx--select__item-count bx--form-item"><div class="bx--select bx--select--inline"> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="bx--pagination-select-ccs-0.uhy587fops" class="bx--select-input"><option value="16" class="bx--select-option">16</option><option value="36" class="bx--select-option">36</option><option value="99" class="bx--select-option">99</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <span class="bx--pagination__text">1–36 of 102 items</span></div> <div class="bx--pagination__right"><div class="bx--select__page-number bx--form-item"><div class="bx--select bx--select--inline"><label for="bx--pagination-select-ccs-0.uhy587fops2" class="bx--label bx--visually-hidden">Page number, of 3 pages</label> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="bx--pagination-select-ccs-0.uhy587fops2" class="bx--select-input"><option value="1" class="bx--select-option">1</option><option value="2" class="bx--select-option">2</option><option value="3" class="bx--select-option">3</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <span class="bx--pagination__text">of 3 pages</span> <button role="button" type="button" tabindex="0" disabled="" class="bx--btn bx--btn--ghost bx--btn--disabled bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-center bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"><span class="bx--assistive-text">Previous page</span> <svg data-carbon-icon="CaretLeft16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-label="Previous page" role="img" focusable="false"><path d="M20 24L10 16 20 8z"></path></svg></button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--ghost bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-end bx--pagination__button bx--pagination__button--forward "><span class="bx--assistive-text">Next page</span> <svg data-carbon-icon="CaretRight16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-label="Next page" role="img" focusable="false"><path d="M12 8L22 16 12 24z"></path></svg></button></div></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Pagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Pagination</span> <span class="token attr-name">totalItems=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">102</span><span class="token punctuation">}</span></span> <span class="token attr-name">pageSizes=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">99</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">pageSize=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">36</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="hidden-page-input">Hidden page input</h3> <div class="preview"> <div class="preview-viewer"> <div id="ccs-0.wz6c79of9e" class="bx--pagination"><div class="bx--pagination__left"><label id="bx--pagination-select-ccs-0.wz6c79of9e-count-label" for="bx--pagination-select-ccs-0.wz6c79of9e" class="bx--pagination__text">Items per page:</label> <div class="bx--select__item-count bx--form-item"><div class="bx--select bx--select--inline"> <div class="bx--select-input--inline__wrapper"><div class="bx--select-input__wrapper"><select id="bx--pagination-select-ccs-0.wz6c79of9e" class="bx--select-input"><option value="10" class="bx--select-option">10</option></select> <svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" class="bx--select__arrow" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg> </div> </div> </div></div> <span class="bx--pagination__text">1–10 of 102 items</span></div> <div class="bx--pagination__right"> <button role="button" type="button" tabindex="0" disabled="" class="bx--btn bx--btn--ghost bx--btn--disabled bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-center bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"><span class="bx--assistive-text">Previous page</span> <svg data-carbon-icon="CaretLeft16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-label="Previous page" role="img" focusable="false"><path d="M20 24L10 16 20 8z"></path></svg></button> <button role="button" type="button" tabindex="0" class="bx--btn bx--btn--ghost bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--top bx--tooltip--align-end bx--pagination__button bx--pagination__button--forward "><span class="bx--assistive-text">Next page</span> <svg data-carbon-icon="CaretRight16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--btn__icon" preserveAspectRatio="xMidYMid meet" aria-label="Next page" role="img" focusable="false"><path d="M12 8L22 16 12 24z"></path></svg></button></div></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> Pagination <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Pagination</span> <span class="token attr-name">totalItems=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">102</span><span class="token punctuation">}</span></span> <span class="token attr-name">pageInputDisabled</span> <span class="token punctuation">/></span></span>
|
||
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <h3 id="skeleton">Skeleton</h3> <div class="preview"> <div class="preview-viewer"> <div class="bx--pagination bx--skeleton"><div class="bx--pagination__left"><p class="bx--skeleton__text" style="width: 70px;"></p> <p class="bx--skeleton__text" style="width: 35px;"></p> <p class="bx--skeleton__text" style="width: 105px;"></p></div> <div class="bx--pagination__right bx--pagination--inline"><p class="bx--skeleton__text" style="width: 70px;"></p></div></div></div> <div class="code-override"><div class="bx--snippet--multi undefined bx--snippet"><div aria-label="code-snippet" class="bx--snippet-container"><code><pre><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> PaginationSkeleton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"carbon-components-svelte"</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>PaginationSkeleton</span> <span class="token punctuation">/></span></span>
|
||
</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> </div></div></div> <div class="table bx--col-lg-5 bx--col-xlg-4"><div class="toc"><h5>Table of Contents</h5> <div slot="aside"><ul class="bx--list--unordered"><li class="bx--list__item"><a class="bx--link" href="#usage">Usage</a> <ul class="bx--list--unordered bx--list--nested"><li class="bx--list__item"><a class="bx--link" href="#default">Default</a></li> <li class="bx--list__item"><a class="bx--link" href="#current-page">Current page</a></li> <li class="bx--list__item"><a class="bx--link" href="#custom-page-sizes">Custom page sizes</a></li> <li class="bx--list__item"><a class="bx--link" href="#hidden-page-input">Hidden page input</a></li> <li class="bx--list__item"><a class="bx--link" href="#skeleton">Skeleton</a></li></ul></li></ul></div></div></div></main> </div>
|
||
|
||
<script type="module" src="/carbon-components-svelte/assets/index.c2c9d961.js"></script>
|
||
|
||
|
||
</body></html> |