<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"></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"></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.