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

TIL about empty cells

TIL about empty cells

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; }