A simple bullet-style pagination
- Read more about SUIT CSS's design principles.
$ npm install factorial-components-pagination
- Inherits color
.Pagination
: The core container.Pagination-bullet
: Individual items.Pagination-bullet.is-active
: Item active state.Pagination--vertical
: Modifier for vertical alignment.Pagination--clickable
: Modifier for clickable bullet points
property | default |
---|---|
--Pagination-margin | .25rem |
--Pagination-bullet-size | .5rem |
--Pagination-border-width | .0625rem |
--Pagination-border-style | solid |
NB: Make sure you don't render white space between bullets as they are rendered
using inline-block
.
<nav class="Pagination">
<a class="Pagination-bullet is-active">Go to slide 1</a><a
class="Pagination-bullet">Go to slide 2</a><a
class="Pagination-bullet">Go to slide 3</a>
</nav>
$ npm install
npm run ... |
Description |
---|---|
build | Compile and bundle all CSS and JS files. |
build:css | Compile and bundle all CSS files to build/index.css . |
build:js | Compile and bundle all JS files to build/index.js . |
build:test | Copy and preprocess idiomatic test files to build . |
deploy | Deploy gh-pages branch. |
start | Start a development server at http://localhost:8080 . |
test | Run all tests. |
test:browser | Run all browser tests. |
test:lint-css | Lint all CSS files. |
test:lint-js | Lint all JS files. |
watch | Watch for file changes in lib and trigger a new build. |