28 lines
1.5 KiB
YAML
28 lines
1.5 KiB
YAML
id: pagination-explicit
|
|
name: Pagination - Explicit
|
|
sections:
|
|
- name: Migration Guide
|
|
description: |
|
|
### New Textfield markup
|
|
Pagination(Explicit) now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information. You must add `.spectrum-Pagination-textfield` modifier to the outer element `div.spectrum-Textfield`.
|
|
examples:
|
|
- id: pagination-explicit
|
|
name: Standard
|
|
markup: |
|
|
<nav class="spectrum-Pagination spectrum-Pagination--explicit">
|
|
<a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-prevButton">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronLeft100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100"></use>
|
|
</svg>
|
|
</a>
|
|
<div class="spectrum-Textfield spectrum-Pagination-textfield">
|
|
<input type="text" name="field" value="2" class="spectrum-Textfield-input">
|
|
</div>
|
|
<span class="spectrum-Body--secondary spectrum-Pagination-counter">of 89 pages</span>
|
|
<a href="#" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-nextButton">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100"></use>
|
|
</svg>
|
|
</a>
|
|
</nav>
|