Net7 UI Kit

tab: Borderless 

<a href="#" class="n7-tab is-tab  transition-all n7-tab--borderless flex p-2 md:p-3 text-sm md:text-base n7-content-01 hover:n7-background-02 transition-all
    n7-tab--default flex p-2 md:p-3 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-02
">

    <span>tab label</span>

</a>
 
{% extends '@tab' %}
{% block classes %} n7-tab--borderless flex p-2 md:p-3 text-sm md:text-base n7-content-01 hover:n7-background-02{% if ariaSelected %} aria-selected:{{bgActiveColor}}{% endif %} transition-all
{%- if classes %}
    {{ classes }}
{% endif -%}
{% endblock %}
 
{
  "label": "tab label",
  "href": "#",
  "borderColor": "n7-border-gray-04",
  "classes": "n7-tab--default flex p-2 md:p-3 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-02",
  "bgColor": "n7-background-01",
  "bgActiveColor": "n7-background-02"
}
  • Content: 
    /**
 * TAB
 * 
 *
*/

/* BASE */
@layer components {
    .n7-tab--default.is-active {
       @apply n7-border-gray-04; 
    }

    .n7-tab--borderless.is-active {
        @apply n7-background-03;
    }

    /* FILLED */
    /* .n7-tab--filled {
        @apply py-2 px-3 n7-background-02 rounded-md n7-content-01 text-lg hover:shadow-md focus:bg-white active:text-white active:n7-background-05 aria-selected:text-white aria-selected:n7-background-05;
    } */
/* 
    .n7-tab--filled.is-active {
        @apply text-white n7-background-05;
    } */

}
  • URL: /components/raw/tab/tab.css
  • Filesystem Path: components/03-molecules/tab/tab.css
  • Size: 550 Bytes

Tab element. Configuration:

  • label: tab label
  • href: use url or hash if element is link, else it will be button
  • classes: value - when you need extra classes - for style overriding etc
  • roleTab: true - if element is in included in tablist (needs role tab)
  • ariaSelected: true - if element is included in tablist (needs role tab)
  • ariaControls: value - if element is included in tablist, id of related tab panel
  • ariaCurrent: value - if attribute aria-current is needed (page, step, location, date, time, true)
  • id: tabId
  • tabIndex: true
  • iconLeft: true - if has left icon
  • iconRight: true - if has right icon
  • borderColor: value - for border active state
  • bgColor: value - for background
  • bgActiveColor: value - for background active state
  • isActive: true - if has is-active class (is active state)

Blocks:

  • classes: for class overridings in variant templates, if needed