mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
Rip out the pager component
This commit is contained in:
parent
d46c7ef565
commit
d5b2dea1a5
@ -11,7 +11,7 @@ Provide pagination links for your site or app with the multi-page pagination com
|
|||||||
* Will be replaced with the ToC, excluding the "Contents" header
|
* Will be replaced with the ToC, excluding the "Contents" header
|
||||||
{:toc}
|
{:toc}
|
||||||
|
|
||||||
## Default pagination
|
## Overview
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
@ -39,7 +39,7 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
|||||||
</nav>
|
</nav>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
### Disabled and active states
|
## Disabled and active states
|
||||||
|
|
||||||
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
|
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
|
||||||
|
|
||||||
@ -49,7 +49,6 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
|
|||||||
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.
|
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 %}
|
{% endcallout %}
|
||||||
|
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="pagination">
|
<ul class="pagination">
|
||||||
@ -93,7 +92,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
|
|||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
|
|
||||||
### Sizing
|
## Sizing
|
||||||
|
|
||||||
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
|
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
|
||||||
|
|
||||||
@ -140,47 +139,3 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
{% endexample %}
|
{% 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 %}
|
|
||||||
<nav>
|
|
||||||
<ul class="pager">
|
|
||||||
<li><a href="#">Previous</a></li>
|
|
||||||
<li><a href="#">Next</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
{% endexample %}
|
|
||||||
|
|
||||||
### Aligned links
|
|
||||||
|
|
||||||
Alternatively, you can align each link to the sides:
|
|
||||||
|
|
||||||
{% example html %}
|
|
||||||
<nav>
|
|
||||||
<ul class="pager">
|
|
||||||
<li class="pager-prev"><a href="#">Older</a></li>
|
|
||||||
<li class="pager-next"><a href="#">Newer</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
{% 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 %}
|
|
||||||
<nav>
|
|
||||||
<ul class="pager">
|
|
||||||
<li class="pager-prev disabled"><a href="#" tabindex="-1">Older</a></li>
|
|
||||||
<li class="pager-next"><a href="#">Newer</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
{% endexample %}
|
|
||||||
|
@ -1,58 +0,0 @@
|
|||||||
.pager {
|
|
||||||
padding-left: 0;
|
|
||||||
margin-top: $spacer-y;
|
|
||||||
margin-bottom: $spacer-y;
|
|
||||||
text-align: center;
|
|
||||||
list-style: none;
|
|
||||||
@include clearfix();
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline;
|
|
||||||
|
|
||||||
> a,
|
|
||||||
> span {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 5px 14px;
|
|
||||||
background-color: $pager-bg;
|
|
||||||
border: $pager-border-width solid $pager-border-color;
|
|
||||||
border-radius: $pager-border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
> a {
|
|
||||||
@include hover-focus {
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: $pager-hover-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled {
|
|
||||||
> a {
|
|
||||||
@include plain-hover-focus {
|
|
||||||
color: $pager-disabled-color;
|
|
||||||
pointer-events: none;
|
|
||||||
cursor: $cursor-disabled;
|
|
||||||
background-color: $pager-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> span {
|
|
||||||
color: $pager-disabled-color;
|
|
||||||
cursor: $cursor-disabled;
|
|
||||||
background-color: $pager-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pager-next {
|
|
||||||
> a,
|
|
||||||
> span {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pager-prev {
|
|
||||||
> a,
|
|
||||||
> span {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
1
scss/bootstrap.scss
vendored
1
scss/bootstrap.scss
vendored
@ -33,7 +33,6 @@
|
|||||||
@import "card";
|
@import "card";
|
||||||
@import "breadcrumb";
|
@import "breadcrumb";
|
||||||
@import "pagination";
|
@import "pagination";
|
||||||
@import "pager";
|
|
||||||
@import "labels";
|
@import "labels";
|
||||||
@import "jumbotron";
|
@import "jumbotron";
|
||||||
@import "alert";
|
@import "alert";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user