VGR Styleguide

Standard Pagination 

<p id="" class="vgr-visually-hidden"></p>
<ol class="vgr-pagination" aria-labelledby="">

    <li class="pagination__item">
        <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
            <input name="index" type="hidden" value="0">
            <button aria-label="Föregående sida" class="vgr-button vgr-button--subtle" type="submit" disabled="">Föregående</button>
        </form>
    </li>

    <li class="pagination__item pagination__item--num">
        <form action="/ftv-webbtidsbokning/AvailableAppointments/" class="display-flex pagination__form" method="get">
            <label for="pagination_numinput" class="pagination__text">Sida</label>
            <input id="pagination_numinput" name="index" class="vgr-form__input pagination__numinput" type="number" min="1" max="17" value="1">
            <button aria-label="Gå till vald sida" class="vgr-button vgr-button--subtle" type="submit">Gå</button>
            <div class="pagination__text">
                av <i>17</i>
            </div>
        </form>
    </li>

    <li class="pagination__item">
        <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
            <input name="index" type="hidden" value="2">
            <button aria-label="Nästa sida" class="vgr-button vgr-button--subtle" type="submit">Nästa</button>
        </form>
    </li>

</ol>
 
<p id="{{ labelId }}" class="vgr-visually-hidden">{{ title }}</p>
<ol class="vgr-pagination" aria-labelledby="{{ labelId }}">

    <li class="pagination__item">
        <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
            <input name="index" type="hidden" value="0">
            <button aria-label="Föregående sida" class="vgr-button vgr-button--subtle" type="submit" disabled="">Föregående</button>
        </form>
    </li>

    <li class="pagination__item pagination__item--num">
        <form action="/ftv-webbtidsbokning/AvailableAppointments/" class="display-flex pagination__form" method="get">
            <label for="pagination_numinput" class="pagination__text">Sida</label>
            <input id="pagination_numinput" name="index" class="vgr-form__input pagination__numinput" type="number" min="1" max="17" value="1">
            <button aria-label="Gå till vald sida" class="vgr-button vgr-button--subtle" type="submit">Gå</button>
            <div class="pagination__text">
                av <i>17</i>
            </div>
        </form>
    </li>

    <li class="pagination__item">
        <form action="/ftv-webbtidsbokning/AvailableAppointments/" method="get">
            <input name="index" type="hidden" value="2">
            <button aria-label="Nästa sida" class="vgr-button vgr-button--subtle" type="submit">Nästa</button>
        </form>
    </li>

</ol>
 
{
  "items": [
    {
      "done": true,
      "label": "Sök tid",
      "url": "/"
    },
    {
      "active": true,
      "label": "Välj tid",
      "url": "/"
    },
    {
      "label": "Personuppgifter",
      "url": "/"
    },
    {
      "label": "Kontrollera",
      "url": "/"
    },
    {
      "label": "Bekräftelse",
      "url": "/"
    }
  ]
}
  • Content: 
    .vgr-pagination {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  @media (max-width: 444px) {
    justify-content: center;
  }

  &__item {
    @media (max-width: 444px) {
      margin: 0 5px 10px;
    }

    &--num {
      @media (max-width: 444px) {
        order: 1;
      }
    }

    &--active {
      > a {
        box-shadow: inset 0 -2px 0 #FF9400;
      }
    }
  }

  &__form {
    align-items: center;
  }

  &__numinput {
    align-self: stretch;
    width: 4.5rem;
  }

  &__text {
    margin: 0 5px;
    flex-shrink: 0;
    font-size: .8rem;
  }
}
  • URL: /components/raw/standard-pagination/_standard-pagination.scss
  • Filesystem Path: components/navigation/pagination/standard-pagination/_standard-pagination.scss
  • Size: 656 Bytes
  • Handle: @standard-pagination
  • Preview:
  • Filesystem Path: components/navigation/pagination/standard-pagination/standard-pagination.html
  • Referenced by (1): @hitta

There are no notes for this item.