No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Pagination
 
Svelte Pagination - Bootstrap 4 & Material Design
 
Svelte Bootstrap pagination is a component used to indicate existance of a series of related content across
    multiple
    pages and enables navigation across them.
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all
    while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the
    number of available links. We use a wrapping <nav> element to identify it as a navigation
    section to screen readers and other assistive technologies.
  
Basic Example
   
 
 
<script>

  import {MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow} from "mdbsvelte";

</script>
<MDBRow>
  <MDBCol>
    <MDBPagination>
      <MDBPageItem>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          1
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>2</MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>3</MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">Next</span>
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>
  </MDBCol>
</MDBRow>

 
Working with icons
 
Looking to use an icon or symbol in place of text for some pagination links?
  
 
 
<script>

  import {MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow} from "mdbsvelte";

</script>
<MDBRow>
  <MDBCol>
    <MDBPagination>
      <MDBPageItem>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          1
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>2</MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>3</MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&raquo;</span>
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>
  </MDBCol>
</MDBRow>

 
Disabled and active states
 
Pagination links are customizable for different circumstances. Use disabled prop for links that
    appear un-clickable and active to indicate the current page.
  
Bootstrap MDBPagination
 
 
 
<script>

  import {MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow} from "mdbsvelte";

</script>
<MDBRow>
  <MDBCol>
    <h4 class="title my-5 text-left">Bootstrap MDBPagination</h4>
    <MDBPagination circle>
      <MDBPageItem disabled>
        <MDBPageNav class="page-link">
          <span>First</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem disabled>
        <MDBPageNav class="page-link" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav class="page-link">
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav class="page-link">
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav class="page-link">
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav class="page-link">
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav class="page-link">
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav class="page-link">
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav class="page-link">
          Last
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>
  </MDBCol>
</MDBRow>


 
Sizing
 
Fancy larger or smaller pagination? Add lg prop or sm for additional sizes.
  
 
 
<script>
  import {MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow} from "mdbsvelte";
</script>
<MDBRow>
  <MDBCol>
    <MDBPagination size="lg">
      <MDBPageItem>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>
  </MDBCol>
</MDBRow>

 
Shape
 
The way pagination 'feels' can be easily altered by changing its style from rectangular to circular.
Simply add circle prop to the  component.
  
 
 
<script>
  import {MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow} from "mdbsvelte";
</script>
<MDBRow>
  <MDBCol>
    <MDBPagination size="lg">
      <MDBPageItem>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>
  </MDBCol>
</MDBRow>

 
Colors
   
MDBPagination color
        
 
 
<script>

  import {MDBPagination, MDBPageItem, MDBPageNav, MDBCol, MDBRow} from "mdbsvelte";

</script>
<MDBRow>
  <MDBCol>
    <h4 class="title my-5 text-left">MDBPagination color</h4>
    <MDBPagination color="blue">
      <MDBPageItem disabled>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>

    <MDBPagination color="red">
      <MDBPageItem disabled>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>

    <MDBPagination color="teal">
      <MDBPageItem disabled>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>

    <MDBPagination color="dark">
      <MDBPageItem disabled>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>

    <MDBPagination color="bluegrey">
      <MDBPageItem disabled>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>

    <MDBPagination color="amber">
      <MDBPageItem disabled>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>

    <MDBPagination color="purple">
      <MDBPageItem disabled>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>

    <MDBPagination color="darkgrey">
      <MDBPageItem disabled>
        <MDBPageNav aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem active>
        <MDBPageNav>
          1 <span class="sr-only">(current)</span>
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          2
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          3
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          4
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          5
        </MDBPageNav>
      </MDBPageItem>
      <MDBPageItem>
        <MDBPageNav>
          &raquo;
        </MDBPageNav>
      </MDBPageItem>
    </MDBPagination>
  </MDBCol>
</MDBRow>