List_level_1

Раскрывающийся список

<div class="demo-ml-list">
    <div class="ml-list-lvl1">
        <div class="ml-list-lvl1__head" data-list-head>
            <div class="ml-list-lvl1__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>
            <div class="ml-list-lvl1__head-inner">
                <i class="ml-list-lvl1__icon">
                    <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>
                <span class="ml-list-lvl1__title">Item list</span>
            </div>
        </div>
        <div class="ml-list-lvl1__body">
            body
        </div>
    </div>
</div>

List_level_2/2

Элемент второго уровня раскрывающегося списка

<div class="demo-ml-list">
    <a href="#" class="ml-list-lvl2">
        <div class="ml-list-lvl2__head">
            <div class="ml-list-lvl2__head-inner">
                <span class="ml-list-lvl2__title">Revealed list</span>
            </div>
        </div>
    </a>
</div>

List_level_2/3

Элемент второго уровня раскрывающегося списка с возможностью раскрытия списка до третьего уровня

<div class="demo-ml-list">
    <div class="ml-list-lvl2">
        <div class="ml-list-lvl2__head" data-list-head>
            <div class="ml-list-lvl2__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>
            <div class="ml-list-lvl2__head-inner">
                <span class="ml-list-lvl2__title">Revealed list</span>
            </div>
        </div>
        <div class="ml-list-lvl2__body">
            body
        </div>
    </div>
</div>

List_level_3

Элемент списка третьего уровня

<div class="ml-list">
    <a href="#" class="ml-list-lvl3">
        <div class="ml-list-lvl3__head">
            <div class="ml-list-lvl3__head-inner">
                <span class="ml-list-lvl3__title">Item one</span>
            </div>
        </div>
    </a>
</div>

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

Атрибут data-list-head обязателен для уровней с вложением

npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-list] (https://www.npmjs.com/package/@megalabs/ml-list)

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

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