@megalabs/ml-tabs v0.0.9

Desktop_Tabs

Вкладки

<div class="ml-tabs" data-tab>
    <div class="ml-tabs__nav">
        <a href="#taba1" class="ml-tabs__item is-active" data-tab-link>Item One</a>
        <a href="#taba2" class="ml-tabs__item" data-tab-link>Item Two</a>
        <a href="#taba3" class="ml-tabs__item" data-tab-link>Item Three</a>
        <a href="#taba4" class="ml-tabs__item" data-tab-link>Item Four</a>
    </div>
    <div data-tab-box class="ml-tabs__box is-active" id="taba1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto iste minima minus odit possimus tempora unde vero? Accusantium ad beatae corporis eligendi neque, non officia quia, quis repudiandae sunt, voluptatibus.
    </div>
    <div data-tab-box class="ml-tabs__box" id="taba2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, esse magni maiores maxime nisi nobis nulla odio suscipit! Accusamus, accusantium aperiam dolores ex illo maiores numquam quas quibusdam rerum vero.
    </div>
    <div data-tab-box class="ml-tabs__box" id="taba3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur laboriosam nam nulla quas ratione temporibus veniam. Amet doloribus ipsa reprehenderit rerum totam voluptatem. Animi asperiores corporis debitis natus quae!
    </div>
    <div data-tab-box class="ml-tabs__box" id="taba4">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet at culpa et eum excepturi facere harum illum, minus odit officia provident qui quis ratione ullam voluptate voluptates. Aspernatur, est.
    </div>
</div>

Расширенные настройки

• data-tab - атрибут для инициализации табов
• data-tab-link - атрибут для ссылок навигации
• data-tab-box - атрибут контейнеров контента
• is-active - класс делает активным выбранный пункт

у каждой вкладки должен быть уникальный id совпадающий с href="#id" ссылки навигации data-tab-link

Desktop_Tabs_Icons

Вкладки с иконками

<div class="ml-tabs-icons" data-tab>
    <div class="ml-tabs-icons__nav">
        <a href="#tabb1" class="ml-tabs-icons__item is-active" data-tab-link>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M9.0062 17.5007c.8281 0 1.4995-.6715 1.4995-1.5 0-.8284-.6714-1.5-1.4995-1.5-.8282 0-1.4996.6716-1.4996 1.5 0 .8285.6714 1.5 1.4996 1.5zm7.9176-5.5c-1.8099-3.1357-5.4996-4.6645-8.996-3.7274C4.4312 9.2105 2 12.38 2 16.0007c0 3.6209 2.4313 6.7903 5.9277 7.7274 3.4965.9372 7.1862-.5916 8.9961-3.7274H30v-4.41l-3.589-3.59h-9.4872zm11.0768 6H15.6942l-.27.57c-1.2016 2.5358-3.9998 3.8997-6.7368 3.2837-2.737-.616-4.6815-3.0474-4.6815-5.8537 0-2.8062 1.9445-5.2376 4.6815-5.8536 2.737-.616 5.5352.7479 6.7369 3.2836l.2699.57h9.897l2.4094 2.41v1.59z"></path>
                </svg>
            </i>
            Item One
        </a>
        <a href="#tabb2" class="ml-tabs-icons__item" data-tab-link>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M24 8.499c.008-1.9124-1.1989-3.619-3.0047-4.2489-1.8058-.6297-3.8123-.0437-4.9953 1.459-1.5096-1.8463-4.1992-2.1902-6.1248-.7832C7.9496 6.333 7.4599 8.9997 8.76 10.999H4v8h2v9h20v-9h2v-8h-4.76a4.47 4.47 0 0 0 .76-2.5zm-7 0c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5H17v-2.5zm-4.5-2.5c1.3807 0 2.5 1.1193 2.5 2.5v2.5h-2.5c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5zm2.5 20H8v-7h7v7zm9 0h-7v-7h7v7zm2-13v4H6v-4h20z"></path>
                </svg>
            </i>
            Item Two
        </a>
        <a href="#tabb3" class="ml-tabs-icons__item" data-tab-link>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M16 4C9.3726 4 4 9.3726 4 16s5.3726 12 12 12 12-5.3726 12-12S22.6274 4 16 4zM8.53 9.38l1 .52c1 .5 1.9 1.82 1.55 2.66l-2 4.06A2.47 2.47 0 0 1 7 18h-.8a10 10 0 0 1 2.33-8.62zM6.84 20H7a4.45 4.45 0 0 0 3.89-2.55l2-4.06c.84-2-.61-4.34-2.47-5.28l-.34-.17C14.0888 5.0007 19.648 5.4522 23.13 9H20a3 3 0 0 0-2.95 1.68l-1 2.92c-.8003 1.8365-.2526 3.9818 1.33 5.21.14.1.31.2.49.31.6.37 1.1.7 1.1 1.07v5.34C14.1085 27.0436 8.8858 24.6626 6.84 20zM21 24.64v-4.46c0-1.52-1.3-2.3-2.07-2.77l-.36-.23a2.41 2.41 0 0 1-.64-2.87l1-2.92c.1-.23.54-.39 1.08-.39h4.65c2.7477 4.7783 1.1107 10.879-3.66 13.64z"></path>
                </svg>
            </i>
            Item Three
        </a>
        <a href="#tabb4" class="ml-tabs-icons__item" data-tab-link>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                    <path d="M20.54 8l-2-3h-5.08l-2 3H4v19h24V8h-7.46zm-6-1h2.93l.67 1h-4.27l.67-1zM6 10h20v4h-5.62l-2 4h-4.77l-2-4H6v-4zm0 15v-9h4.34l2 4h7.23l2-4H26v9H6z"></path>
                </svg>
            </i>
            Item Four
        </a>
    </div>

    <div data-tab-box class="ml-tabs__box is-active" id="tabb1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto iste minima minus odit possimus tempora unde vero? Accusantium ad beatae corporis eligendi neque, non officia quia, quis repudiandae sunt, voluptatibus.
    </div>
    <div data-tab-box class="ml-tabs__box" id="tabb2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, esse magni maiores maxime nisi nobis nulla odio suscipit! Accusamus, accusantium aperiam dolores ex illo maiores numquam quas quibusdam rerum vero.
    </div>
    <div data-tab-box class="ml-tabs__box" id="tabb3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur laboriosam nam nulla quas ratione temporibus veniam. Amet doloribus ipsa reprehenderit rerum totam voluptatem. Animi asperiores corporis debitis natus quae!
    </div>
    <div data-tab-box class="ml-tabs__box" id="tabb4">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet at culpa et eum excepturi facere harum illum, minus odit officia provident qui quis ratione ullam voluptate voluptates. Aspernatur, est.
    </div>
</div>

Расширенные настройки

• data-tab - атрибут для инициализации табов
• data-tab-link - атрибут для ссылок навигации
• data-tab-box - атрибут контейнеров контента
• is-active - класс делает активным выбранный пункт

у каждой вкладки должен быть уникальный id совпадающий с href="#id" ссылки навигации data-tab-link

Desktop_Tabs_Lines

Вкладки с иконками и блоками текста

<div class="ml-tabs-lines" data-tab>
    <div class="ml-tabs-lines__nav">
        <a href="#tab1" class="ml-tabs-lines__item is-active" data-tab-link>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M9.0062 17.5007c.8281 0 1.4995-.6715 1.4995-1.5 0-.8284-.6714-1.5-1.4995-1.5-.8282 0-1.4996.6716-1.4996 1.5 0 .8285.6714 1.5 1.4996 1.5zm7.9176-5.5c-1.8099-3.1357-5.4996-4.6645-8.996-3.7274C4.4312 9.2105 2 12.38 2 16.0007c0 3.6209 2.4313 6.7903 5.9277 7.7274 3.4965.9372 7.1862-.5916 8.9961-3.7274H30v-4.41l-3.589-3.59h-9.4872zm11.0768 6H15.6942l-.27.57c-1.2016 2.5358-3.9998 3.8997-6.7368 3.2837-2.737-.616-4.6815-3.0474-4.6815-5.8537 0-2.8062 1.9445-5.2376 4.6815-5.8536 2.737-.616 5.5352.7479 6.7369 3.2836l.2699.57h9.897l2.4094 2.41v1.59z"></path>
                </svg>
            </i>
            Item One
        </a>
        <a href="#tab2" class="ml-tabs-lines__item" data-tab-link>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M24 8.499c.008-1.9124-1.1989-3.619-3.0047-4.2489-1.8058-.6297-3.8123-.0437-4.9953 1.459-1.5096-1.8463-4.1992-2.1902-6.1248-.7832C7.9496 6.333 7.4599 8.9997 8.76 10.999H4v8h2v9h20v-9h2v-8h-4.76a4.47 4.47 0 0 0 .76-2.5zm-7 0c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5H17v-2.5zm-4.5-2.5c1.3807 0 2.5 1.1193 2.5 2.5v2.5h-2.5c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5zm2.5 20H8v-7h7v7zm9 0h-7v-7h7v7zm2-13v4H6v-4h20z"></path>
                </svg>
            </i>
            Item Two
        </a>
        <a href="#tab3" class="ml-tabs-lines__item" data-tab-link>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M16 4C9.3726 4 4 9.3726 4 16s5.3726 12 12 12 12-5.3726 12-12S22.6274 4 16 4zM8.53 9.38l1 .52c1 .5 1.9 1.82 1.55 2.66l-2 4.06A2.47 2.47 0 0 1 7 18h-.8a10 10 0 0 1 2.33-8.62zM6.84 20H7a4.45 4.45 0 0 0 3.89-2.55l2-4.06c.84-2-.61-4.34-2.47-5.28l-.34-.17C14.0888 5.0007 19.648 5.4522 23.13 9H20a3 3 0 0 0-2.95 1.68l-1 2.92c-.8003 1.8365-.2526 3.9818 1.33 5.21.14.1.31.2.49.31.6.37 1.1.7 1.1 1.07v5.34C14.1085 27.0436 8.8858 24.6626 6.84 20zM21 24.64v-4.46c0-1.52-1.3-2.3-2.07-2.77l-.36-.23a2.41 2.41 0 0 1-.64-2.87l1-2.92c.1-.23.54-.39 1.08-.39h4.65c2.7477 4.7783 1.1107 10.879-3.66 13.64z"></path>
                </svg>
            </i>
            Item Three
        </a>
        <a href="#tab4" class="ml-tabs-lines__item" data-tab-link>
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                    <path d="M20.54 8l-2-3h-5.08l-2 3H4v19h24V8h-7.46zm-6-1h2.93l.67 1h-4.27l.67-1zM6 10h20v4h-5.62l-2 4h-4.77l-2-4H6v-4zm0 15v-9h4.34l2 4h7.23l2-4H26v9H6z"></path>
                </svg>
            </i>
            Item Four
        </a>
    </div>


    <a href="#tab1" class="ml-tabs-lines__item ml-tabs-lines__item--mobile is-first is-active" data-tab-link>
        <div class="ml-tabs-lines__item-title">
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M9.0062 17.5007c.8281 0 1.4995-.6715 1.4995-1.5 0-.8284-.6714-1.5-1.4995-1.5-.8282 0-1.4996.6716-1.4996 1.5 0 .8285.6714 1.5 1.4996 1.5zm7.9176-5.5c-1.8099-3.1357-5.4996-4.6645-8.996-3.7274C4.4312 9.2105 2 12.38 2 16.0007c0 3.6209 2.4313 6.7903 5.9277 7.7274 3.4965.9372 7.1862-.5916 8.9961-3.7274H30v-4.41l-3.589-3.59h-9.4872zm11.0768 6H15.6942l-.27.57c-1.2016 2.5358-3.9998 3.8997-6.7368 3.2837-2.737-.616-4.6815-3.0474-4.6815-5.8537 0-2.8062 1.9445-5.2376 4.6815-5.8536 2.737-.616 5.5352.7479 6.7369 3.2836l.2699.57h9.897l2.4094 2.41v1.59z"></path>
                </svg>
            </i>
            Item One
        </div>
        <div class="ml-tabs-lines__item-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
            </svg>
        </div>
    </a>
    <div class="ml-tabs-lines__box is-active" id="tab1" data-tab-box>
        <h4>Text 1</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dicta impedit nihil quidem rem. Architecto consectetur dolorum ex in laborum natus odio officiis praesentium quo, quos saepe tempora tempore vero.</p>
        <p class="last">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dicta impedit nihil quidem rem. Architecto consectetur dolorum ex in laborum natus odio officiis praesentium quo, quos saepe tempora tempore vero.</p>
    </div>

    <a href="#tab2" class="ml-tabs-lines__item ml-tabs-lines__item--mobile" data-tab-link>
        <div class="ml-tabs-lines__item-title">
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M24 8.499c.008-1.9124-1.1989-3.619-3.0047-4.2489-1.8058-.6297-3.8123-.0437-4.9953 1.459-1.5096-1.8463-4.1992-2.1902-6.1248-.7832C7.9496 6.333 7.4599 8.9997 8.76 10.999H4v8h2v9h20v-9h2v-8h-4.76a4.47 4.47 0 0 0 .76-2.5zm-7 0c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5H17v-2.5zm-4.5-2.5c1.3807 0 2.5 1.1193 2.5 2.5v2.5h-2.5c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5zm2.5 20H8v-7h7v7zm9 0h-7v-7h7v7zm2-13v4H6v-4h20z"></path>
                </svg>
            </i>
            Item Two
        </div>
        <div class="ml-tabs-lines__item-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
            </svg>
        </div>
    </a>
    <div class="ml-tabs-lines__box" id="tab2" data-tab-box>
        <h4>Text 2</h4>
        <p class="last">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dicta impedit nihil quidem rem. Architecto consectetur dolorum ex in laborum natus odio officiis praesentium quo, quos saepe tempora tempore vero.</p>
    </div>

    <a href="#tab3" class="ml-tabs-lines__item ml-tabs-lines__item--mobile" data-tab-link>
        <div class="ml-tabs-lines__item-title">
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M16 4C9.3726 4 4 9.3726 4 16s5.3726 12 12 12 12-5.3726 12-12S22.6274 4 16 4zM8.53 9.38l1 .52c1 .5 1.9 1.82 1.55 2.66l-2 4.06A2.47 2.47 0 0 1 7 18h-.8a10 10 0 0 1 2.33-8.62zM6.84 20H7a4.45 4.45 0 0 0 3.89-2.55l2-4.06c.84-2-.61-4.34-2.47-5.28l-.34-.17C14.0888 5.0007 19.648 5.4522 23.13 9H20a3 3 0 0 0-2.95 1.68l-1 2.92c-.8003 1.8365-.2526 3.9818 1.33 5.21.14.1.31.2.49.31.6.37 1.1.7 1.1 1.07v5.34C14.1085 27.0436 8.8858 24.6626 6.84 20zM21 24.64v-4.46c0-1.52-1.3-2.3-2.07-2.77l-.36-.23a2.41 2.41 0 0 1-.64-2.87l1-2.92c.1-.23.54-.39 1.08-.39h4.65c2.7477 4.7783 1.1107 10.879-3.66 13.64z"></path>
                </svg>
            </i>
            Item Three
        </div>
        <div class="ml-tabs-lines__item-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
            </svg>
        </div>
    </a>
    <div class="ml-tabs-lines__box" id="tab3" data-tab-box>
        <h4>Text 3</h4>
        <p class="last">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dicta impedit nihil quidem rem. Architecto consectetur dolorum ex in laborum natus odio officiis praesentium quo, quos saepe tempora tempore vero.</p>
    </div>

    <a href="#tab4" class="ml-tabs-lines__item ml-tabs-lines__item--mobile" data-tab-link>
        <div class="ml-tabs-lines__item-title">
            <i>
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                    <path d="M20.54 8l-2-3h-5.08l-2 3H4v19h24V8h-7.46zm-6-1h2.93l.67 1h-4.27l.67-1zM6 10h20v4h-5.62l-2 4h-4.77l-2-4H6v-4zm0 15v-9h4.34l2 4h7.23l2-4H26v9H6z"></path>
                </svg>
            </i>
            Item Four
        </div>
        <div class="ml-tabs-lines__item-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                <path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
            </svg>
        </div>
    </a>
    <div class="ml-tabs-lines__box" id="tab4" data-tab-box>
        <h4>Text 4</h4>
        <p class="last">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dicta impedit nihil quidem rem. Architecto consectetur dolorum ex in laborum natus odio officiis praesentium quo, quos saepe tempora tempore vero.</p>
    </div>
</div>

Расширенные настройки

• data-tab - атрибут для инициализации табов
• data-tab-link - атрибут для ссылок навигации
• data-tab-box - атрибут контейнеров контента
• is-active - класс делает активным выбранный пункт

у каждой вкладки должен быть уникальный id совпадающий с href="#id" ссылки навигации data-tab-link npm репозиторий - https://www.npmjs.com/package/@megalabs/ml-tabs

Для установки пакета

• npm i @megalabs/ml-tabs
• затем в папке @megalabs/ml-tabs запускаем npm install
• npm start