Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIL about empty cells

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

TIL about empty cells

Avatar for Gunnar Bittersmann

Gunnar Bittersmann

March 29, 2021
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript

  1. <ol :class="$style.pagerList"> <li v-if="!firstPage" :class="$style.pagerFirst"> <a href="…">erste Seite"</a> "</li> <li

    v-if="!firstPage" :class="$style.pagerPrevious"> <a href="…"> <span class="visually-hidden">vorige Seite"</span> <svg aria-hidden="true">…"</svg> "</a> "</li> <li v-for="index in neighbors" :class="$style.pagerNeighbor"> <a href="…"> <span class="visually-hidden">Seite"</span> {{ index }} "</a> "</li> <li v-if="!lastPage" :class="$style.pagerNext"> <a href="…">
  2. <ol :class="$style.pagerList"> <li :class="$style.pagerFirst"> <a :href="!firstPage ? "…" : "">erste

    Seite"</a> "</li> <li:class="$style.pagerPrevious"> <a :href="!firstPage ? "…" : ""> <span class="visually-hidden">vorige Seite"</span> <svg aria-hidden="true">…"</svg> "</a> "</li> <li v-for="index in neighbors" :class="$style.pagerNeighbor"> <a href="…"> <span class="visually-hidden">Seite"</span> {{ index }} "</a> "</li> <li :class="$style.pagerNext"> <a :href="!lastPage ? "…" : "">
  3. .pager"__list { display: inline-grid; grid-template-columns: auto repeat(var("--items, 5), 1fr) auto;

    grid-template-rows: auto auto; } .pager"__neighbor:first-child { grid-column: 2; }
  4. .pager"__list { display: inline-grid; grid-template-columns: 1fr repeat(var("--items, 5), 1fr) 1fr;

    grid-template-rows: auto auto; } .pager"__neighbor:first-child { grid-column: 2; }