cc7cc4eda6
As per our browser compat policy, we only claim support for latest versions of Opera on desktop. Current Opera is version 34. From testing, IE11 does support `pointer-events:none` just fine now.
5.9 KiB
| layout | title | group |
|---|---|---|
| docs | Pagination | components |
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
Contents
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
Default pagination
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
{% example html %}
{% endexample %}Disabled and active states
Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
{% callout warning %}
Link functionality caveat
The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
{% endcallout %}
{% example html %}
{% endexample %}You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
{% example html %}
- Previous
- 1 (current)
Sizing
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
{% example html %}
{% endexample %}{% example html %}
{% endexample %}Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
Default example
By default, the pager centers links.
{% example html %}
{% endexample %}Aligned links
Alternatively, you can align each link to the sides:
{% example html %}
{% endexample %}Optional disabled state
Pager links also support the .disabled class (though note that the same advice about keyboard focus as for the default pagination applies here as well).
{% example html %}
{% endexample %}