Add: Tabs shortcode (inspired by https://rayramble.com/blog/test-tab-group/)

machiav3lli

17.15.2023 20a7d0ddbfcbc7eaab6f3ad47db0483d39b36107

Add: Tabs shortcode (inspired by https://rayramble.com/blog/test-tab-group/)

 assets/sass/_components.sass

@@ -321,3 +321,59 @@
    background-size: 12%
    background-position: 50% 50%
    background-repeat: no-repeat

.tabs
  display: flex
  flex-wrap: wrap
  margin: 2rem 0 2rem 0
  position: relative

  &.tabs-left
    justify-content: flex-start

    label.tab-label
      margin-right: 0.5rem

    .tab-content
      border-radius: 0px 6px 6px 6px

  &.tabs-right
    justify-content: flex-end

    label.tab-label
      margin-left: 0.5rem

    .tab-content
      border-radius: 6px 6px 6px 6px

  input.tab-input
    display: none

  label.tab-label
    background-color: var(--accent) transparent
    border-color: var(--theme)
    border-radius: 6px 6px 0px 0px
    border-style: solid
    border-bottom-style: hidden
    border-width: 2px
    cursor: pointer
    display: inline-block
    order: 1
    padding: 0.3rem 0.6rem
    position: relative
    top: 2px
    user-select: none

  input.tab-input:checked + label.tab-label
    background-color: var(--accent)
    border-color: var(--theme)

  .tab-content
    background-color: var(--accent)
    border-color: var(--theme)
    border-style: solid
    border-width: 2px
    display: none
    order: 2
    padding: 1rem
    width: 100%

 layouts/shortcodes/tab.html

New file
@@ -0,0 +1,17 @@
{{- $name := .Get 0 | default "Name Me!" }}
{{ $group := .Page.Scratch.Get "tabGroupIndex" | default 0 }}
{{ $index := .Page.Scratch.Get "tabElementIndex" | default 0 }}

<style>
  .tabs input#tab-{{ $group }}-{{ $index }}:checked ~ .tab-content-{{ $group }}-{{ $index }} {
    display: block;
  }
</style>

<input type="radio" class="tab-input" name="tab-select-{{ $group }}" id="tab-{{ $group }}-{{ $index }}" {{ if eq $index 0 }}checked{{ end }}/>
<label for="tab-{{ $group }}-{{ $index }}" class="tab-label">{{ $name }}</label>
<div class="tab-content tab-content-{{ $group }}-{{ $index }}">
  {{ markdownify .Inner }}
</div>

{{ .Page.Scratch.Set "tabElementIndex" (add 1 $index) }}

 layouts/shortcodes/tabs.html

New file
@@ -0,0 +1,10 @@
{{ $id := .Get 0 | default "id" }}
{{ $align := .Get "align" | default "left" }}
{{ $group := .Page.Scratch.Get "tabGroupIndex" | default 0 }}
{{ $index := .Page.Scratch.Set "tabElementIndex" 0 }}

<div class="tabs tabs-{{ $align }}">
  {{ .Inner }}
</div>

{{ .Page.Scratch.Set "tabGroupIndex" (add 1 $group) }}