GDL - Global Design Language

Tab 

<div class="c-tab">
    <ul class="u-flex u-justify-between u-wrap u-list-none u-m-none u-p-none">

        <li class="c-tab__item u-relative">
            <label for="form-radio-walking" class="u-flex u-items-center u-justify-center o-link-text u-cursor-pointer u-gap-small u-p-base">
                <span class="u-label-04  u-mt-xxsmall">walking</span>

                <svg class="o-icon o-icon--md o-icon--fill">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-walking"></use>
                </svg>

            </label>
        </li>

        <li class="c-tab__item u-relative">
            <label for="form-radio-bicycle" class="u-flex u-items-center u-justify-center o-link-text u-cursor-pointer u-gap-small u-p-base">
                <span class="u-label-04  u-mt-xxsmall">bicycle</span>

                <svg class="o-icon o-icon--md o-icon--fill">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bicycle"></use>
                </svg>

            </label>
        </li>

        <li class="c-tab__item u-relative">
            <label for="form-radio-car" class="u-flex u-items-center u-justify-center o-link-text u-cursor-pointer u-gap-small u-p-base">
                <span class="u-label-04  u-mt-xxsmall">car</span>

                <svg class="o-icon o-icon--md o-icon--fill">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-car"></use>
                </svg>

            </label>
        </li>

    </ul>

    <input type="radio" id="form-radio-walking" class="u-none u-absoute u-left u-top usize-full" name="c-tabs__choice">
    <div class="c-tab__content u-size-full u-p-base">
        <p>walking</p>
    </div>

    <input type="radio" id="form-radio-bicycle" class="u-none u-absoute u-left u-top usize-full" name="c-tabs__choice">
    <div class="c-tab__content u-size-full u-p-base">
        <p>bicycle</p>
    </div>

    <input type="radio" id="form-radio-car" class="u-none u-absoute u-left u-top usize-full" name="c-tabs__choice">
    <div class="c-tab__content u-size-full u-p-base">
        <p>car</p>
    </div>

</div>
 
<div class="c-tab">
  <ul class="u-flex u-justify-between u-wrap u-list-none u-m-none u-p-none">
    {% for item in items %}
      <li class="c-tab__item u-relative">
        <label 
          for="form-radio-{{item.val}}" 
          class="u-flex u-items-center u-justify-center o-link-text u-cursor-pointer u-gap-small u-p-base">
          <span class="u-label-04  u-mt-xxsmall">{{item.val}}</span>
          {% if item.icon %}
          <svg class="o-icon o-icon--md o-icon--fill">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{item.icon}}"></use>
          </svg>
          {% endif %}
        </label>
      </li>
    {% endfor %}  
  </ul>

  {% for item in items %}
    <input 
      type="radio" 
      id="form-radio-{{item.val}}"  
      class="u-none u-absoute u-left u-top usize-full" 
      name="c-tabs__choice">
    <div class="c-tab__content u-size-full u-p-base">
      <p>{{item.val}}</p>
    </div>
  {% endfor %}
</div>
 
{
  "items": [
    {
      "item": null,
      "icon": "walking",
      "val": "walking"
    },
    {
      "item": null,
      "icon": "bicycle",
      "val": "bicycle"
    },
    {
      "item": null,
      "icon": "car",
      "val": "car"
    }
  ]
}
  • Content: 
    // Name:            Tab
// Description:     Tab of website
//
// Component:       `c-tab`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/colors.light`
//                  `settings/v7/colors.dark`
//
// ========================================================================

// Variables
// ========================================================================

.c-tab {

  &__item {
    flex-grow: 1;
    order: 1;
    border-top: 4px solid var(--divider-color);
    border-right: 1px solid var(--divider-color);
    border-bottom: 1px solid var(--divider-color);
    background-color: var(--background-color);  
    
    &:first-child {
      border-left: 1px solid var(--divider-color);
    }

    &.is-active,
    &:hover,
    &:active {
      border-top: 4px solid var(--theme-color);
      background-color: var(--background-color-gray);
      transition: background-color .3s ease-in-out, border-top .3s ease-in-out;
      border-bottom: none;
    }

    &.active {
      border-top: 4px solid var(--theme-color);
      border-bottom: none;
    }
  }

  &__container {
    border-top-width: 0;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-color: var(--divider-color);
    
  }
  
  &__content {
    display: none;
    &:first-of-type:not(:has(~input:checked)) {
      display: block;
    } 
    &.c-tab--edged {
      border-top-width: 0;
      border-left-width: 1px;
      border-bottom-width: 1px;
      border-right-width: 1px;
      border-style: solid;
      border-color: var(--divider-color);
    }
  
  }  

  input:checked {	
		+ .c-tab__content {
			display: block;
			height: auto;
		}
	}
   
}
  • URL: /components/raw/tab/_tab.scss
  • Filesystem Path: src/lib/components/tab/_tab.scss
  • Size: 1.8 KB

No notes defined.