0
0
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:
Mark Otto 2016-01-06 14:47:33 -08:00
parent d46c7ef565
commit d5b2dea1a5
3 changed files with 3 additions and 107 deletions

View File

@ -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 %}

View File

@ -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
View File

@ -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";