Toggle Tab: Tabs

No notes defined.

<nav>
    <ul class="sds-toggleTab list-unstyled nav" id="" role="tablist">

        <li class="nav-item" role="presentation">
            <button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive active" id="" data-toggle="tab" data-target="#ordres-a-valider" role="tab" aria-controls="ordres-a-valider" aria-selected="true">

                <span class="sds-btn__text">Ordres de virement</span>

                <div class="sds-badge badge sds-btn__badge -primary100 -small">

                    99+
                </div>

            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn" id="" data-toggle="tab" data-target="#ordres-valides" role="tab" aria-controls="ordres-valides" aria-selected="false">

                <span class="sds-btn__text">Ordres permanents</span>

            </button>
        </li>

        </li>
    </ul>
</nav>
<nav>
	<ul class="{{ namespace }}toggleTab list-unstyled nav{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="{{ id }}" role="tablist">
		{% for key, item in toggleTabItems %}
			{% if item.active %}
				{% set classes = [namespace+"toggleTab__btn", "-isActive", "active"] %}
				{% else %}
				{% set classes = [namespace+"toggleTab__btn"] %}
			{% endif %}
		<li class="nav-item" role="presentation">
			{% render "@btn-secondary--small",{
				text: item.text,
				classes: classes,
				attrs: {
					"id": item.id,
					"data-toggle":"tab",
					"data-target": "#"+item.target,
					"role": "tab",
					"aria-controls": item.target,
					"aria-selected": item.selection
				},
				badge: item.badge
			},true %}
		</li>
		{% endfor %}
		</li>
	</ul>
</nav>
  • Content:
    export default class ToggleTab {
    
    	constructor() {
    		this.toggleClasses();
    	}
    
    	toggleClasses () {
    
    		$(".sds-toggleTab").find(".sds-toggleTab__btn").on("click", (e) => {
    			$(".sds-toggleTab__btn").removeClass("-isActive");
    			$(e.currentTarget).each(function( index, elt ) {
    				$(elt).addClass("-isActive");
    			});
    		})
    
    	}
    
    }
    
  • URL: /components/raw/toggle-tab/ToggleTab.js
  • Filesystem Path: components/base-components/molecules/toggle-tab/ToggleTab.js
  • Size: 330 Bytes
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}toggleTab {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	@include custom-prop-fallback("background-color","sys-color-elevation-surface-sunken");
    	border-radius: map-deep-get($token-radius-map, "32");
    	display: inline-flex;
    	@include spacer-component-inset("xs");
    
    	/* Pseudo Elements */
    
    	&::before {
    	}
    
    	&::after {
    	}
    
    	/*
    	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    	(e.g: keyframes)
    	*/
    	@at-root {
    	}
    
    
    	/* children - write selector in full in comments in order to facilitate search */
    
    	// toggleTab__childElement
    	&__btn#{$self}__btn {
    
    		// follows same logic as parent
    		background-color: transparent ;
    		//min-height: map-deep-get($token-spacer);
    
    		&.active,
    		&.-isActive {
    			@include custom-prop-fallback("background-color","comp-button-secondary-hovered-background-color");
    		}
    
    		INPUT:checked + & {
    
    			@include custom-prop-fallback("background-color", "comp-button-secondary-hovered-background-color");
    
    		}
    
    		INPUT:checked:focus-visible + & {
    
    			outline-style: solid !important;
    			outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width") !important;
    
    		}
    
    	}
    
    
    	/* modifiers */
    
    	// toggleTab -fullWidth
    	&.-fullWidth {
    
    		// follows same logic as base element
    
    		width: 100%;
    		
    		> * {
    			
    			flex-grow: 1;
    			
    		}
    		
    		#{$self}__btn {
    			width: 100%;
    		}
    
    	}
    
    	&.-light {
    
    		@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/toggle-tab/_toggle-tab.scss
  • Filesystem Path: components/base-components/molecules/toggle-tab/_toggle-tab.scss
  • Size: 1.9 KB