ETR Component Library

button-group: Tabs 

<div class="button-group inline-flex relative">
    <input class="button-group__radio" type="radio" id="option_1" value="option_1" name="options" checked="checked">
    <label class="button-group__item" for="option_1">Option 1</label>
    <input class="button-group__radio" type="radio" id="option_2" value="option_2" name="options">
    <label class="button-group__item" for="option_2">Option 2</label>
    <input class="button-group__radio" type="radio" id="option_3" value="option_3" name="options">
    <label class="button-group__item" for="option_3">Option 3</label>
</div>
 
<div class="button-group inline-flex relative">
  <input class="button-group__radio" type="radio" id="option_1" value="option_1" name="options" checked="checked">
  <label class="button-group__item" for="option_1">{{tab-1}}</label>
  <input class="button-group__radio" type="radio" id="option_2" value="option_2" name="options">
  <label class="button-group__item" for="option_2">{{tab-2}}</label>
  <input class="button-group__radio" type="radio" id="option_3" value="option_3" name="options">
  <label class="button-group__item" for="option_3">{{tab-3}}</label>
</div>
 
{
  "modifier": "default",
  "tab-1": "Option 1",
  "tab-2": "Option 2",
  "tab-3": "Option 3",
  "tab-4": "Option 4",
  "tab-5": "Option 5",
  "tab-6": "Option 6"
}
  • Content: 
    .button-group {
  @apply .text-gray-darkest .bg-transparent ;
  &__radio {
    clip: rect(0 0 0 0);
    overflow: hidden;
    height: 1px;
    margin: -1px;
    position: absolute;
    width: 1px;
      }
  &__item {
    @apply .py-4 .w-32 .text-center;

  }
}

.button-group__radio:checked + .button-group__item{
  @apply .border-b-4 .border-teal .font-bold;
}
  • URL: /components/raw/button-group/button-group.scss
  • Filesystem Path: components/05-layout-components/button-group/button-group.scss
  • Size: 363 Bytes

There are no notes for this item.