mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-30 09:09:50 +02:00
Code Issues Releases Wiki Activity

feat: Previous next buttons

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-22 08:28:39 +07:00
parent e62dfdc670
commit 59036baa87
7 changed files with 93 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
contents/_includes/covers/previous-next-buttons.njk Normal file
View File

@@ -0,0 +1,8 @@
<div class="previous-next-buttons">
<div class="previous-next-buttons__nav">
<div class="previous-next-buttons__button previous-next-buttons__button--l"></div>
</div>
<div class="previous-next-buttons__nav">
<div class="previous-next-buttons__button previous-next-buttons__button--r"></div>
</div>
</div>

1
contents/index.njk
View File

@@ -131,6 +131,7 @@ eleventyExcludeFromCollections: true
{% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %}
{% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %}
{% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %}
{% pattern "Previous next buttons" %}{% include "covers/previous-next-buttons.njk" %}{% endpattern %}
{% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %}
{% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %}
</div>

36
contents/previous-next-buttons.md Normal file
View File

@@ -0,0 +1,36 @@
---
layout: layouts/post.njk
title: Previous next buttons
description: Create previous and next buttons with CSS flexbox
keywords: css flexbox, css pagination
---
## HTML
```html
<div class="previous-next-buttons">
<!-- Previous link sticks to the left -->
<div class="previous-next-buttons__nav">
<a class="previous-next-buttons__button previous-next-buttons__button--l"></a>
</div>
<!-- Next link sticks to the right -->
<div class="previous-next-buttons__nav">
<a class="previous-next-buttons__button previous-next-buttons__button--r"></a>
</div>
</div>
```
## CSS
```css
.previous-next-buttons {
align-items: center;
display: flex;
justify-content: space-between;
}
```
You can use the [arrow buttons](/arrow-buttons/) to create the previous and next buttons.
{% demo %}{% include "covers/previous-next-buttons.njk" %}{% enddemo %}