Pagination Bar

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<nav class="paginationBar" aria-label="pagination">

    <ul class="paginationBar-list">

        <li class="paginationBar-item" data-direction="previous">
            <span>Vorherige Seite</span>
        </li>

        <li class="paginationBar-item">
            <a href="#" title="1">1</a>
        </li>
        <li class="paginationBar-item" aria-current="page">
            <a href="#" title="2">2</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="3">3</a>
        </li>
        <li class="paginationBar-item">
            <span>…</span>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="150">150</a>
        </li>

        <li class="paginationBar-item" data-direction="next">
            <a href="#" title="Nächste Seite">Nächste Seite</a>
        </li>

    </ul>

</nav>


        
            <!-- With Title -->
<nav class="paginationBar" aria-label="pagination">

    <div class="paginationBar-title">
        <strong>Seite:</strong>
    </div>

    <ul class="paginationBar-list">

        <li class="paginationBar-item" data-direction="previous">
            <span>Vorherige Seite</span>
        </li>

        <li class="paginationBar-item">
            <a href="#" title="1">1</a>
        </li>
        <li class="paginationBar-item" aria-current="page">
            <a href="#" title="2">2</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="3">3</a>
        </li>
        <li class="paginationBar-item">
            <span>…</span>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="150">150</a>
        </li>

        <li class="paginationBar-item" data-direction="next">
            <a href="#" title="Nächste Seite">Nächste Seite</a>
        </li>

    </ul>

</nav>


        
            <!-- Maximum Size -->
<nav class="paginationBar" aria-label="pagination">

    <ul class="paginationBar-list">

        <li class="paginationBar-item" data-direction="previous">
            <span>Vorherige Seite</span>
        </li>

        <li class="paginationBar-item">
            <a href="#" title="23">23</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="24">24</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="25">25</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="26">26</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="27">27</a>
        </li>
        <li class="paginationBar-item" aria-current="page">
            <a href="#" title="28">28</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="29">29</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="30">30</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="31">31</a>
        </li>
        <li class="paginationBar-item">
            <a href="#" title="32">32</a>
        </li>

        <li class="paginationBar-item" data-direction="next">
            <a href="#" title="Nächste Seite">Nächste Seite</a>
        </li>

    </ul>

</nav>

Handle: @paginationbar
Variants (3): Default , With Title , Maximum Size
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/paginationBar/paginationBar.html
Referenced by (18): @teaserlist, @teaserlist--with-teaserinsets, @teaserlist--with-teaserinsets--full-width, @teaserlist--with-teaserinsets-with-linklist, @teaserlist--with-downloaditems-large, @teaserlist--with-downloaditems, @teaserlist--with-downloaditems-small, @teaserlist--with-newsteaser, @teaserlist--with-eventteasers, @teaserlist--with-pagination, @topicfinder, @topicfinder--with-dropdowns, @topicfinder--with-pagination, @topicfinder--with-tags, @topicfinder--with-highlights, @topicfinder--with-hidden-highlights, @topicfinder--with-eventteasers, @topicfinder--toplink


        <nav class="paginationBar{{#modifier}} {{.}}{{/modifier}}" aria-label="pagination">

        {{#title}}
    <div class="paginationBar-title">
        <strong>{{{.}}}</strong>
    </div>
        {{/title}}

    <ul class="paginationBar-list">

            {{#prev}}
        <li class="paginationBar-item" data-direction="previous">
            {{#if url}}<a href="{{url}}" title="{{label}}">{{else}}<span>{{/if}}{{{label}}}{{#if url}}</a>{{else}}</span>{{/if}}
        </li>
            {{/prev}}

            {{#items}}
        <li class="paginationBar-item"{{#if is-current}} aria-current="page"{{/if}}>
            {{#if url}}<a href="{{url}}" title="{{label}}">{{else}}<span>{{/if}}{{{label}}}{{#if url}}</a>{{else}}</span>{{/if}}
        </li>
            {{/items}}

            {{#next}}
        <li class="paginationBar-item" data-direction="next">
            {{#if url}}<a href="{{url}}" title="{{label}}">{{else}}<span>{{/if}}{{{label}}}{{#if url}}</a>{{else}}</span>{{/if}}
        </li>
            {{/next}}

    </ul>

</nav>


        
        
            /* Default */
{
  "prev": {
    "label": "Vorherige Seite"
  },
  "next": {
    "label": "Nächste Seite",
    "url": "#"
  },
  "items": [
    {
      "label": 1,
      "url": "#"
    },
    {
      "label": 2,
      "url": "#",
      "is-current": true
    },
    {
      "label": 3,
      "url": "#"
    },
    {
      "label": "…"
    },
    {
      "label": 150,
      "url": "#"
    }
  ]
}


        
            /* With Title */
{
  "prev": {
    "label": "Vorherige Seite"
  },
  "next": {
    "label": "Nächste Seite",
    "url": "#"
  },
  "items": [
    {
      "label": 1,
      "url": "#"
    },
    {
      "label": 2,
      "url": "#",
      "is-current": true
    },
    {
      "label": 3,
      "url": "#"
    },
    {
      "label": "…"
    },
    {
      "label": 150,
      "url": "#"
    }
  ],
  "title": "Seite:"
}


        
            /* Maximum Size */
{
  "prev": {
    "label": "Vorherige Seite"
  },
  "next": {
    "label": "Nächste Seite",
    "url": "#"
  },
  "items": [
    {
      "label": 23,
      "url": "#"
    },
    {
      "label": 24,
      "url": "#"
    },
    {
      "label": 25,
      "url": "#"
    },
    {
      "label": 26,
      "url": "#"
    },
    {
      "label": 27,
      "url": "#"
    },
    {
      "label": 28,
      "url": "#",
      "is-current": true
    },
    {
      "label": 29,
      "url": "#"
    },
    {
      "label": 30,
      "url": "#"
    },
    {
      "label": 31,
      "url": "#"
    },
    {
      "label": 32,
      "url": "#"
    }
  ]
}

File:

Content:


                                $paginationBar_gap: var(--bw-large) !default;

$paginationBar_link_styles: (
    background-color: $_backdrop-color,
    border-radius: var(--br-small),
    transition: $_transition-duration,
    transition-property: (background-color, color),
) !default;

$paginationBar_link_states: (
    default: $paginationBar_link_styles,
    hover: (
        background-color: $_action-background-color--hover,
        color: $_action-foreground-color--hover,
        transition-duration: $_transition-duration--in,
    ),
    focus: $_focus_styles,
    active: (
        background-color: $_action-background-color--active,
        color: $_action-foreground-color--active,
    ),
    current: (
        background-color: $_action-background-color--hover,
        color: $_action-foreground-color--hover,
    ),
    disabled: (
        color: $_disabled-color,
    ),
) !default;

$paginationBar_marker_icon_stroke-width: 2 !default;
$paginationBar_marker_icon: '<svg width="32" height="32" viewBox="0 0 32 32" stroke="{{color}}" stroke-width="#{$paginationBar_marker_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 22.5L19.5 16L12.5 9.5"/></svg>' !default;

@import "_paginationBar.settings";
@import "_paginationBar.styles";

URL: /components/raw/paginationbar/_paginationBar.scss
Filesystem Path: components/03-fragments/paginationBar/_paginationBar.scss
Size: 1.3 KB

Content:


                                $paginationBar_padding-inline: var(--bp-small) !default;
$paginationBar_padding-block: calc(.5 * var(--bp-small)) !default;

$paginationBar_gap: var(--bw) !default;

$paginationBar_link_styles: (
    background-color: $_backdrop-color,
    transition: $_transition-duration,
    transition-property: (background-color, color),
) !default;

$paginationBar_link_states: (
    default: $paginationBar_link_styles,
    hover: (
        background-color: $_action-background-color--hover,
        color: $_action-foreground-color--hover,
        transition-duration: $_transition-duration--in,
    ),
    focus: $_focus_styles,
    active: (
        background-color: $_action-background-color--active,
        color: $_action-foreground-color--active,
    ),
    current: (
        font-weight: bold,
    ),
    disabled: (
        color: $_disabled-color,
    ),
) !default;

$paginationBar_link_styles--mobile: (
    text-size: small,
) !default;

$paginationBar_marker_icon_stroke-width: 2 !default;
$paginationBar_marker_icon: '<svg width="32" height="32" viewBox="0 0 32 32" stroke="{{color}}" stroke-width="#{$paginationBar_marker_icon_stroke-width}" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 22.5L19.5 16L12.5 9.5"/></svg>' !default;

URL: /components/raw/paginationbar/_paginationBar.settings.scss
Filesystem Path: components/03-fragments/paginationBar/_paginationBar.settings.scss
Size: 1.3 KB

Content:


                                %paginationBar {
    @include stack-spacing(component);

    display: flex;
    column-gap: .5em;
    align-items: baseline;

    &-list {
        @include stack-spacing(0);

        list-style: none;
        padding: 0;

        display: flex;
        column-gap: $paginationBar_gap;
        row-gap: $paginationBar_gap;
        flex-wrap: wrap;

        > * {
            white-space: nowrap;
            min-width: calc(1lh + 2 * #{$paginationBar_padding-block});
        }

    }

    &-item {
        display: flex;
        align-items: center;
        text-align: center;

        position: relative;

        > * {
            display: block;
            width: 100%;

            padding: $paginationBar_padding-block $paginationBar_padding-inline;

            color: inherit;
            text-decoration: none;

            @include styles($paginationBar_link_styles);
        }

        &[aria-current="page"] > * {
            pointer-events: none;
            @include state-styles($paginationBar_link_states, current);
        }

        &:not([aria-current="page"]) a {
            @include action-states($paginationBar_link_states);
        }

    }

    &-item--direction {
        width: 0;
        position: relative;

        > * {
            text-indent: calc(100% + 2 *  #{$paginationBar_padding-block});
            white-space: nowrap;
            overflow: hidden;

            &::before {
                content: "\2192";

                position: absolute;
                left: 0;
                right: 0;

                text-indent: 0;

                @supports (mask-image: url()) {
                    content: "";

                    background-color: currentcolor;
                    top: 0;
                    bottom: 0;

                    mask-image: svg-url($paginationBar_marker_icon, black);
                    mask-repeat: no-repeat;
                    mask-position: center center;
                }

            }

        }

        span {
            @include state-styles($paginationBar_link_states, disabled);
        }

    }

    &-item--direction--previous {
        transform: scaleX(-1);
    }

    &-item--direction--next {
    }

    &-item[data-direction] {
        @extend %paginationBar-item--direction;
    }

    &-item[data-direction="previous"] {
        @extend %paginationBar-item--direction--previous;
    }

    &-item[data-direction="next"] {
        @extend %paginationBar-item--direction--next;
    }

    @include not-on-desktop(){

        &-item {
            @include styles($paginationBar_link_styles--mobile);
        }

    }

}

.paginationBar {
    @extend %paginationBar;

    &-list {
        @extend %paginationBar-list;
    }

    &-item {
        @extend %paginationBar-item;
    }

}

URL: /components/raw/paginationbar/_paginationBar.styles.scss
Filesystem Path: components/03-fragments/paginationBar/_paginationBar.styles.scss
Size: 2.8 KB