Skip to main content

分页导航(Pagination Nav)

标准样式#


<nav class="pagination-nav">
<div class="pagination-nav__item">
<a class="pagination-nav__link" href="#url">
<div class="pagination-nav__sublabel">Previous</div>
<div class="pagination-nav__label">« Installation</div>
</a>
</div>
<div class="pagination-nav__item pagination-nav__item--next">
<a class="pagination-nav__link" href="#url">
<div class="pagination-nav__sublabel">Next</div>
<div class="pagination-nav__label">Getting Started »</div>
</a>
</div>
</nav>

超长的标题会折到下一行。


<nav class="pagination-nav">
<div class="pagination-nav__item">
<a class="pagination-nav__link" href="#url">
<div class="pagination-nav__sublabel">Previous</div>
<div class="pagination-nav__label">
« Some Extremely Long Long Long Long Title
</div>
</a>
</div>
<div class="pagination-nav__item pagination-nav__item--next">
<a class="pagination-nav__link" href="#url">
<div class="pagination-nav__sublabel">Next</div>
<div class="pagination-nav__label">
AnotherExtremelyLongTitleWithoutBreaksProbablyAComponent »
</div>
</a>
</div>
</nav>

只有 Previous 链接#


<nav class="pagination-nav">
<div class="pagination-nav__item">
<a class="pagination-nav__link" href="#url">
<div class="pagination-nav__sublabel">Previous</div>
<div class="pagination-nav__label">« Installation</div>
</a>
</div>
</nav>

只有 Next 链接#


<nav class="pagination-nav">
<div class="pagination-nav__item"> </div>
<div class="pagination-nav__item pagination-nav__item--next">
<a class="pagination-nav__link" href="#url">
<div class="pagination-nav__sublabel">Next</div>
<div class="pagination-nav__label">
AnotherExtremelyLongTitleWithoutBreaksProbablyAComponent »
</div>
</a>
</div>
</nav>