ENG / RUS

Muilessium-UI - это стандартный набор компонентов интерфейса для Muilessium.

<link rel="stylesheet" href="https://unpkg.com/muilessium/dist/muilessium-ui.min.css">
<script src="https://unpkg.com/muilessium/dist/muilessium-ui.min.js"></script>

Не забудьте подключить сам Muilessium!

Простая страница

В этом примере показана базовая структура страницы с шапкой, подвалом, логотипом и навигацией.

See the Pen Muilessium 1.0 - Basic layout by Ivan Bogachev (@sfi0zy) on CodePen.

Валидация формы

В этом примере вы увидите, как работать с компонентами Muilessium-UI в скриптах.

See the Pen Muilessium 1.0 - Form validation by Ivan Bogachev (@sfi0zy) on CodePen.

/src/muilessium-ui/components/grid/style.less

Muilessium-UI использует классическую сетку из 12 колонок. Брейкпоинты по умолчанию - 400, 600 и 1200px. Сетка похожа на известную сетку с flexboxgrid.com, но использует методологию RSCSS для названий классов.

-s1
-s11
-s3
-s9
-s6 -m4 -l6
-s6 -m8 -l6
-m6 -l2
-m6 -l10
<div class="mui-row">
     <div class="mui-column -s1">-s1</div>
    <div class="mui-column -s11">-s11</div>
</div>
<div class="mui-row">
    <div class="mui-column -s3">-s3</div>
    <div class="mui-column -s9">-s9</div>
</div>
<div class="mui-row">
    <div class="mui-column -s6 -m4 -l6">-s6 -m4 -l6</div>
    <div class="mui-column -s6 -m8 -l6">-s6 -m8 -l6</div>
</div>
<div class="mui-row">
    <div class="mui-column -m6 -l2">-m6 -l2</div>
    <div class="mui-column -m6 -l10">-m6 -l10</div>
</div>

Стандартный скелет страницы включает в себя компоненты scroll-fix, page-header, page-container и page-footer. Это самый простой вариант сделать прилипающий к низу подвал страницы.

<div class="mui-scroll-fix"></div>
<header class="mui-page-header">header</header>
<div class="mui-page-container">...</div>
<footer class="mui-page-footer">footer</footer>

Muilessium использует Hammer.js, в связи с этим рекомендуется использовать следующие настройки:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
/src/muilessium-ui/fonts.less
/src/muilessium-ui/helpers.less

Используется адаптивная типографика, построенная на стандартных системных шрифтах и классах-утилитах _bigger-* и _smaller-*.

Они имеют разное поведение на разных размерах экранов.

H1 Heading (+5)
H2 Heading (+4)
H3 Heading (+3)
H4 Heading (+2)
H5 Heading (+1)
H6 Heading (+0)
Normal text
Text (-1)
Text (-2)
Text (-3)
Text (-4)
Text (-5)
/src/muilessium-ui/colors.less
/src/muilessium-ui/color-scheme.less

Эти классы сделаны для быстрого раскрашивания элементов. Всего их четыре типа:

  • -color-[ 1 | 2 | 3 | 4 | 5 ] - задают цвет и заливку (fill) для элемента. например "-orange-4"
  • -color-[ 1 | 2 | 3 | 4 | 5 ]-bg - задают фон для элемента. Например "-blue-1-bg"
  • -f-color-[ 1 | 2 | 3 | 4 | 5 ] - задают цвет и заливку для состояний :hover и :focus
  • -f-color-[ 1 | 2 | 3 | 4 | 5 ]-bg - задают фон для состояний :hover и :focus
White
FFFFFF
Grey
#fafafa
#eeeeee
#9e9e9e
#424242
#212121
Black
000000
Brown
#efebe9
#bcaaa4
#795548
#4e342e
#3e2723
Orange
#fff3e0
#ffcc80
#ff9800
#ef6c00
#e65100
Yellow
#fffde7
#fff59d
#ffeb3b
#f9a825
#f57f17
Red
#ffebee
#ef9a9a
#f44336
#c62828
#b71c1c
Pink
#fce4ec
#f48fb1
#e91e63
#ad1457
#880e4f
Violet
#ede7f6
#b39ddb
#673ab7
#4527a0
#311b92
Blue
#e3f2fd
#90caf9
#2196f3
#1565c0
#0d47a1
Cyan
#e0f7fa
#80deea
#00bcd4
#00838f
#006064
Green
#e8f5e9
#a5d6a7
#4caf50
#2e7d32
#1b5e20
/src/muilessium-ui/helpers.less

У Muilessium-UI есть много классов-хелперов. Вы можете заглянуть в исходники, чтобы посмотреть на все.

Только классы-утилиты и классы для раскрашивания могут использовать "!important".

  • Работа с текстом
    • _text-[ left | center | right | justify ]
    • _[ upper | lower ]case
    • _capitalize
    • _bigger-[ 0 | 1 | 2 | 3 | 4 | 5 ]
    • _smaller-[ 0 | 1 | 2 | 3 | 4 | 5 ]
    • _line-[ 1r | 1-25 | 1-50 | 1-75 | 2r | 3r | 4r | 5r ]
  • Выравнивание
    • _left
    • _right
  • Вертикальный ритм
    • _separate-[ 1 | 2 | 3 | 4 | 5 ]
  • Тени
    • _shadow-[ 1 | 2 | 3 | 4 | 5 ]
  • Pointer events
    • _disabled
    • _disable-pointer-events
    • _disable-pointer-events-hard
  • Разное
    • _no-overflow
    • _no-decoration
    • _truncate-line
    • _no-break
    • _allow-empty
    • _hidden
    • _clearfix
    • _object-fit-cover
/src/muilessium-ui/components/svg-icon/style.less

Muilessium-UI по умолчанию использует иконки от Ionicons.

Вы должны поместить этот спрайт вниз страницы. Вы можете заменять символы в этом SVG своими иконками.

<div class="mui-svg-sprite">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--check"><path d="M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--close"><path d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--arrow-down"><path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--arrow-right"><path d="M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.701H85v42.75z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--arrow-left"><path d="M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.701H427v-42.75z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--arrow-up"><path d="M277.375 427V167.296l119.702 119.702L427 256 256 85 85 256l29.924 29.922 119.701-118.626V427h42.75z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--hamburger"><path d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--spinner"><path d="M256 48c-75.033 0-144.531 40.658-181.373 106.107l-1.963 3.485 20.915 11.771 1.962-3.485C128.138 107.973 189.621 72 256 72c101.458 0 184 82.542 184 184a185.48 185.48 0 0 1-3.749 37.147l-.803 3.918 23.511 4.819.804-3.919A209.53 209.53 0 0 0 464 256c0-114.691-93.309-208-208-208zM416.459 346.119C383.862 404.027 322.379 440 256 440c-101.458 0-184-82.542-184-184 0-12.512 1.262-25.011 3.75-37.15l.803-3.918-23.511-4.819-.804 3.918A209.445 209.445 0 0 0 48 256c0 114.691 93.309 208 208 208 75.033 0 144.531-40.658 181.373-106.109l1.963-3.485-20.915-11.771-1.962 3.484z"></path><path d="M384 256l64 64 64-64zM0 256l64-64 64 64z"></path></symbol>
        <symbol viewBox="0 0 512 512" id="mui-svg-icon--tags"><path d="M472 239.2s-.1 0 0 0L282.1 48.1l-1.4-1.4h-.5c-7.5-7.2-16.1-10.9-27.1-11.1l-89.9-3.3-3.9-.1c-10.1.1-20 4.1-27.7 11.8l-27.1 27.2c7.4-6.6 16.6-10 26-10.1l3.8.1 89.8 3.3c11 .2 19.7 3.9 27.2 11.1h.5l1.4 1.4L443 268.1c10 10.8 10.7 28.2 0 38.9l29-28.9c10.6-10.7 10-28.1 0-38.9z"></path><path d="M428 282.5h.3L238.6 91.4l-1.3-1.4h-.3c-7.5-7.2-15.9-10.9-26.9-11.1L120 75.6l-4-.1c-9.2.1-18.2 3.4-25.6 9.8-.3.3-.7.6-1 .9l-1.2 1.2-44.3 44.5C35.8 140 32 150.8 32 161.4v.1l.1 3.8 5.9 87.9v1.9c1 7.9 4.2 15.6 9.6 22l5.1 4.9L239 470.4l2.8 2.8c10.7 9.4 27.1 9 37.3-1.3l13.1-13.2c.5-.4.9-.8 1.4-1.3l26.9-27c-.2.1-.3.2-.5.4l108.3-109.3c10.6-10.7 10.7-28.2-.3-39zm-317.4-143c6.6-4 14.3-6.3 22.6-6.3 23.9 0 43.4 19.4 43.4 43.4 0 8.3-2.3 16-6.3 22.6-7.6 12.5-21.3 20.8-37 20.8-23.9 0-43.4-19.4-43.4-43.4-.1-15.8 8.2-29.5 20.7-37.1z"></path></symbol>
    </svg>
</div>
/src/muilessium-ui/utils/animations.js
/src/muilessium-ui/animations.less

Есть два варианта использования анимаций. Первый:

<div class="-js-animation [ -hidden-by-default ]
    [ -fade-in
    | -fade-in-left
    | -fade-in-right
    | -fade-in-up
    | -fade-in-down
    | -fade-out
    | -fade-out-left
    | -fade-out-right
    | -fade-out-up
    | -fade-out-down ]"></div>
<script>
    Muilessium.UTILS.activateAnimation(document.querySelector("div"));
</script>

И второй:

<script>Muilessium.UTILS.animateElement(element, "fade-in")</script>

В обоих случаях анимации имеют одинаковые названия и принцип работы.

Первый способ удобен, если элемент должен анимироваться только один раз, а второй - если нужно его анимировать много раз.

/src/muilessium-ui/components/**/*
/src/muilessium-ui/components/index.js
/src/muilessium-ui/components/index.less

Muilessium-UI включает в себя компоненты, перечисленные ниже. Разметка компонентов должна использоваться как есть, без изменений, поскольку на ней базируется инициализация компонентов.

/src/muilessium-ui/components/accordion/style.less

...

(!) Accordion - Используйте Muilessium.get('Accordion', id), чтобы обратиться к компоненту.
  • foldItem(index)  - сворачивает элемент с заданным индексом
  • foldAllItems()  - сворачивает все элементы
  • unfoldItem(index) - разворачивает элемент с заданным индексом
  • unfoldAllItems()  - разворачивает все элементы
  • toggleItem(index) - разворачивает элемент, если он свернут, с сворачивает, если он развернут
Зависит от svg-icon
  •  Lorem
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
  •  Lorem
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
Исходный код (Pug)
ul.mui-accordion#docs-only-id--accordion
    li.item
        .title
            .indicator
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--arrow-right')
            span &nbsp;Lorem
        .content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
    li.item
        .title
            .indicator
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--arrow-right')
            span &nbsp;Lorem
        .content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!
Исходный код (HTML)
<ul class="mui-accordion" id="docs-only-id--accordion">
  <li class="item">
    <div class="title">
      <div class="indicator">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--arrow-right"></use>
        </svg>
      </div><span>&nbsp;Lorem</span>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!</div>
  </li>
  <li class="item">
    <div class="title">
      <div class="indicator">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--arrow-right"></use>
        </svg>
      </div><span>&nbsp;Lorem</span>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, quaerat!</div>
  </li>
</ul>
/src/muilessium-ui/components/badge/style.less

Может быть использован в компонентах Button и Collection.

5555
Исходный код (Pug)
span.mui-badge 5
span.mui-badge.-rounded 5
span.mui-badge.-new 5
span.mui-badge.-new.-rounded 5
Исходный код (HTML)
<span class="mui-badge">5</span><span class="mui-badge -rounded">5</span><span class="mui-badge -new">5</span><span class="mui-badge -new -rounded">5</span>
/src/muilessium-ui/components/blockquote/style.less

...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, fugit?John Doe
Исходный код (Pug)
blockquote.mui-blockquote
   span.text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, fugit?
   span.author John Doe
Исходный код (HTML)
<blockquote class="mui-blockquote"><span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, fugit?</span><span class="author">John Doe</span></blockquote>
/src/muilessium-ui/components/breadcrumb/style.less

...

Вариант: -slash-delimiter
Исходный код (Pug)
div.mui-breadcrumb
   a.link(href='') category
   a.link(href='') subcategory
   a.link(href='') title
Исходный код (HTML)
<div class="mui-breadcrumb"><a class="link" href="">category</a><a class="link" href="">subcategory</a><a class="link" href="">title</a></div>
/src/muilessium-ui/components/button/style.less

...

(!) Button - Используйте Muilessium.get('Button', id), чтобы обратиться к компоненту.
Событие: click - Используйте Button.addEventListener('click', (state) => { /* . . . */ }), чтобы повесить обработчик.
Вариант: -small
Вариант: -big
Вариант: -dangerous
Вариант: -ghost
Вариант: -light-ghost
Исходный код (Pug)
a.mui-button button
Исходный код (HTML)
<a class="mui-button">button</a>
/src/muilessium-ui/components/button/style.less

...

(!) Button - Используйте Muilessium.get('Button', id), чтобы обратиться к компоненту.
Событие: click - Используйте Button.addEventListener('click', (state) => { /* . . . */ }), чтобы повесить обработчик.
Исходный код (Pug)
a.mui-button
   svg.mui-svg-icon
       use(xlink:href='#mui-svg-icon--check')
   span &nbsp;button
a.mui-button.-icon
   svg.mui-svg-icon
       use(xlink:href='#mui-svg-icon--check')
Исходный код (HTML)
<a class="mui-button">
  <svg class="mui-svg-icon">
    <use xlink:href="#mui-svg-icon--check"></use>
  </svg><span>&nbsp;button</span></a><a class="mui-button -icon">
  <svg class="mui-svg-icon">
    <use xlink:href="#mui-svg-icon--check"></use>
  </svg></a>
/src/muilessium-ui/components/button/style.less

...

(!) Button - Используйте Muilessium.get('Button', id), чтобы обратиться к компоненту.
Событие: click - Используйте Button.addEventListener('click', (state) => { /* . . . */ }), чтобы повесить обработчик.
Вариант: -badge-on-top
Исходный код (Pug)
a.mui-button
   span button&nbsp;
   span.mui-badge.-rounded 5
Исходный код (HTML)
<a class="mui-button"><span>button&nbsp;</span><span class="mui-badge -rounded">5</span></a>
/src/muilessium-ui/components/button-dropdown/style.less

...

(!) ButtonDropdown - Используйте Muilessium.get('ButtonDropdown', id), чтобы обратиться к компоненту.
  • openDropdown()  - открывает выпадающее меню
  • closeDropdown()  - закрывает выпадающее меню
  • toggleDropdown() - открывает меню, если оно закрыто, и закрывает, если оно открыто
Зависит от button
Зависит от dropdown-options
Зависит от shadow-toggle
Зависит от svg-icon
dropdown button 
Option 1
Option 2
Option 3
Option 4
Option 5
Исходный код (Pug)
.mui-button-dropdown#docs-only-id--button-dropdown
   a.mui-button
       span dropdown button
       span &nbsp;
       svg.mui-svg-icon
           use(xlink:href='#mui-svg-icon--arrow-down')
   .mui-dropdown-options
       .wrapper
           .option Option 1
           .option Option 2
           .option Option 3
           .option Option 4
           .option Option 5
   .mui-shadow-toggle
Исходный код (HTML)
<div class="mui-button-dropdown" id="docs-only-id--button-dropdown"><a class="mui-button"><span>dropdown button</span><span>&nbsp;</span>
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--arrow-down"></use>
    </svg></a>
  <div class="mui-dropdown-options">
    <div class="wrapper">
      <div class="option">Option 1</div>
      <div class="option">Option 2</div>
      <div class="option">Option 3</div>
      <div class="option">Option 4</div>
      <div class="option">Option 5</div>
    </div>
  </div>
  <div class="mui-shadow-toggle"></div>
</div>
/src/muilessium-ui/components/button-group/style.less

Используется для группировки компонентов Button.

Зависит от button
Вариант: -vertical
Вариант: -or
Исходный код (Pug)
.mui-button-group
   button.mui-button first
   button.mui-button second
   button.mui-button third
Исходный код (HTML)
<div class="mui-button-group">
  <button class="mui-button">first</button>
  <button class="mui-button">second</button>
  <button class="mui-button">third</button>
</div>
/src/muilessium-ui/components/card/style.less

Рекомендуется использовать теги h2-h6 для заголовков у карточек.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.

Исходный код (Pug)
.mui-card._shadow-1
   .header
       h5 Lorem ipsum
   .content
       p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.
Исходный код (HTML)
<div class="mui-card _shadow-1">
  <div class="header">
    <h5>Lorem ipsum</h5>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.</p>
  </div>
</div>
/src/muilessium-ui/components/card/style.less

Вариант карточки с картинкой вместо заголовка. Если картинка используется в декоративных целях, то role='presentation' следует добавить вручную.

Card header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.

Исходный код (Pug)
.mui-card.-with-image._shadow-1
   .header
       img.mui-image.-js-lazy-load(data-src='https://placehold.it/800x600/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Card header')
       noscript
           img.mui-image(src='https://placehold.it/800x600/4caf50/2e7d32' alt='Card header')
   .content
       p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.
Исходный код (HTML)
<div class="mui-card -with-image _shadow-1">
  <div class="header"><img class="mui-image -js-lazy-load" data-src="https://placehold.it/800x600/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Card header"/>
    <noscript><img class="mui-image" src="https://placehold.it/800x600/4caf50/2e7d32" alt="Card header"/></noscript>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, magni.</p>
  </div>
</div>
/src/muilessium-ui/components/carousel/style.less

Следует использовать 3 или больше слайдов. Интервал в секундах задается через data-атрибут. Есть вариант -rounded со скругленными углами.

(!) Carousel - Используйте Muilessium.get('Carousel', id), чтобы обратиться к компоненту.
  • startRotation() - запускает вращение
  • stopRotation()  - останавливает вращение
  • rotateNext()  - переходит к следующему слайду
  • rotatePrev()  - переходит к предыдущему слайду
  • rotate(index)  - переходит к слайду с указанным индексом
Зависит от image
Зависит от svg-icon
Исходный код (Pug)
.mui-carousel.-rounded#docs-only-id--carousel(data-interval='4s')
    ul.mui-slides
        li.mui-slide
            img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1024x768/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Slide 1')
            noscript
                img.mui-image.background(src='https://placehold.it/1024x768/4caf50/2e7d32/', alt='Slide 1')
            .mui-slide-content.-center
                .title 1. Lorem ipsum dolor.
                .text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ipsa.
        li.mui-slide
            img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='')
            noscript
                img.mui-image.background(src='https://placehold.it/1200x800/4caf50/2e7d32', alt='Slide 2')
            .mui-slide-content.-content-left
                .title 2. Lorem ipsum dolor sit amet.
                .text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illo.
        li.mui-slide
            img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1200x800/2e7d32/1b5e20' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='')
            noscript
                img.mui-image.background(src='https://placehold.it/1200x800/2e7d32/1b5e20', alt='Slide 3')
            .mui-slide-content.-content-right
                .title 3. Lorem ipsum dolor sit.
                .text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aliquam.
    .mui-carousel-controls
        .prev
            svg.mui-svg-icon.-white
               use(xlink:href='#mui-svg-icon--arrow-left')
        .next
            svg.mui-svg-icon.-white
                use(xlink:href='#mui-svg-icon--arrow-right')
    ul.mui-carousel-indicators
        li.indicator
        li.indicator
        li.indicator
Исходный код (HTML)
<div class="mui-carousel -rounded" id="docs-only-id--carousel" data-interval="4s">
  <ul class="mui-slides">
    <li class="mui-slide"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1024x768/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Slide 1"/>
      <noscript><img class="mui-image background" src="https://placehold.it/1024x768/4caf50/2e7d32/" alt="Slide 1"/></noscript>
      <div class="mui-slide-content -center">
        <div class="title">1. Lorem ipsum dolor.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ipsa.</div>
      </div>
    </li>
    <li class="mui-slide"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1200x800/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt=""/>
      <noscript><img class="mui-image background" src="https://placehold.it/1200x800/4caf50/2e7d32" alt="Slide 2"/></noscript>
      <div class="mui-slide-content -content-left">
        <div class="title">2. Lorem ipsum dolor sit amet.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illo.</div>
      </div>
    </li>
    <li class="mui-slide"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1200x800/2e7d32/1b5e20" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt=""/>
      <noscript><img class="mui-image background" src="https://placehold.it/1200x800/2e7d32/1b5e20" alt="Slide 3"/></noscript>
      <div class="mui-slide-content -content-right">
        <div class="title">3. Lorem ipsum dolor sit.</div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aliquam.</div>
      </div>
    </li>
  </ul>
  <div class="mui-carousel-controls">
    <div class="prev">
      <svg class="mui-svg-icon -white">
        <use xlink:href="#mui-svg-icon--arrow-left"></use>
      </svg>
    </div>
    <div class="next">
      <svg class="mui-svg-icon -white">
        <use xlink:href="#mui-svg-icon--arrow-right"></use>
      </svg>
    </div>
  </div>
  <ul class="mui-carousel-indicators">
    <li class="indicator"></li>
    <li class="indicator"></li>
    <li class="indicator"></li>
  </ul>
</div>
/src/muilessium-ui/components/checkbox/style.less

...

(!) Checkbox - Используйте Muilessium.get('Checkbox', id), чтобы обратиться к компоненту.
  • setCheckbox()  - отмечает чекбокс
  • unsetCheckbox()  - убирает отметку
  • toggleCheckbox() - отмечает чекбокс, если он не отмечен, и снимает отметку, если отмечен
  • getState()  - возвращает true, если чекбокс отмечен, и false, если нет
Событие: update-state - Используйте Checkbox.addEventListener('update-state', (state) => { /* . . . */ }), чтобы повесить обработчик.
Зависит от svg-icon
Исходный код (Pug)
.mui-checkbox#docs-only-id--checkbox
   input(type='checkbox' checked)
   label
       span.icon
           span.symbol
               svg.mui-svg-icon
                   use(xlink:href="#mui-svg-icon--check")
       span.text Lorem ipsum.
Исходный код (HTML)
<div class="mui-checkbox" id="docs-only-id--checkbox">
  <input type="checkbox" checked="checked"/>
  <label><span class="icon"><span class="symbol">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--check"></use>
        </svg></span></span><span class="text">Lorem ipsum.</span></label>
</div>
/src/muilessium-ui/components/collection/style.less

Может включать компонент Badge.

Зависит от badge*
  • Lorem ipsum dolor sit amet.
    1024
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    64
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Исходный код (Pug)
ul.mui-collection
    li.item
        .content Lorem ipsum dolor sit amet.
        .badge
            span.mui-badge.-rounded 1024
    li.item
        .content Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        .badge
            span.mui-badge.-rounded 64
    li.item
        .content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Исходный код (HTML)
<ul class="mui-collection">
  <li class="item">
    <div class="content">Lorem ipsum dolor sit amet.</div>
    <div class="badge"><span class="mui-badge -rounded">1024</span></div>
  </li>
  <li class="item">
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="badge"><span class="mui-badge -rounded">64</span></div>
  </li>
  <li class="item">
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </li>
</ul>
/src/muilessium-ui/components/containers/style.less

Контейнер для контента с ограниченной шириной. Имеет две опции: -no-limit-width (убирает ограничение) и -with-gutter (добавляет отступы).

Исходный код (Pug)
.mui-content-container
Исходный код (HTML)
<div class="mui-content-container"></div>
/src/muilessium-ui/components/containers/style.less

Этот контейнер используется для создания липкого подвала, в него следует обернуть содержимое страницы до подвала.

Исходный код (Pug)
.mui-page-container
Исходный код (HTML)
<div class="mui-page-container"></div>
/src/muilessium-ui/components/content-section/style.less

Секция с опциональным фоном в виде картинки.

Зависит от image*
Background
...
...
...
...
...
...
...
...
...
Исходный код (Pug)
section.mui-content-section
   img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Background')
   noscript
       img.mui-image.background(src='https://placehold.it/1200x800/4caf50/2e7d32' alt='Background')
   .content
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
       span ...
       br
Исходный код (HTML)
<section class="mui-content-section"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1200x800/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Background"/>
  <noscript><img class="mui-image background" src="https://placehold.it/1200x800/4caf50/2e7d32" alt="Background"/></noscript>
  <div class="content"><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/><span>...</span><br/></div>
</section>
/src/muilessium-ui/components/dropdown-options/style.less

Этот компонент используется как часть более сложных компонентов - Button dropdown и Select dropdown.

Option 1
Option 2
Option 3
Option 4
Option 5
Исходный код (Pug)
.mui-dropdown-options
    .wrapper
        .option Option 1
        .option Option 2
        .option Option 3
        .option Option 4
        .option Option 5
Исходный код (HTML)
<div class="mui-dropdown-options">
  <div class="wrapper">
    <div class="option">Option 1</div>
    <div class="option">Option 2</div>
    <div class="option">Option 3</div>
    <div class="option">Option 4</div>
    <div class="option">Option 5</div>
  </div>
</div>
/src/muilessium-ui/components/header-logo/style.less

Используется внутри компонента Page header.

Исходный код (Pug)
.mui-page-header
    .mui-header-logo
        a.link(href='')
            h1 Logo
Исходный код (HTML)
<div class="mui-page-header">
  <div class="mui-header-logo"><a class="link" href="">
      <h1>Logo</h1></a></div>
</div>
/src/muilessium-ui/components/header-navigation/style.less

Используется внутри компонента Page header.

(!) HeaderNavigation - Используйте Muilessium.get('HeaderNavigation', id), чтобы обратиться к компоненту.
  • openNavigation()  - открывает мобильное меню
  • closeNavigation()  - закрывает мобильное меню
  • toggleNavigation()  - открывает меню, если оно закрыто, и закрывает, если оно открыто
  • transformToMobile()  - трансформирует навигацию в мобильную
  • transformToDesktop() - трансформирует навигацию в десктопный вариант
Событие: open-navigation - Используйте HeaderNavigation.addEventListener('open-navigation', (state) => { /* . . . */ }), чтобы повесить обработчик.
Событие: close-navigation - Используйте HeaderNavigation.addEventListener('close-navigation', (state) => { /* . . . */ }), чтобы повесить обработчик.
Зависит от shadow-toggle
Исходный код (Pug)
.mui-page-header
    nav.mui-header-navigation.-mobile-version#docs-only-id--header-navigation
        .mui-navigation-toggle.-hamburger
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--hamburger')
        ul.linkslist
            li.item
                a.link(href='')
                    span home
                    span.mui-badge(aria-label='5 news') 5
            li.item
                a.link(href='') about
            li.item
                a.link(href='') contacts
        .mui-shadow-toggle
Исходный код (HTML)
<div class="mui-page-header">
  <nav class="mui-header-navigation -mobile-version" id="docs-only-id--header-navigation">
    <div class="mui-navigation-toggle -hamburger">
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--hamburger"></use>
      </svg>
    </div>
    <ul class="linkslist">
      <li class="item"><a class="link" href=""><span>home</span><span class="mui-badge" aria-label="5 news">5</span></a></li>
      <li class="item"><a class="link" href="">about</a></li>
      <li class="item"><a class="link" href="">contacts</a></li>
    </ul>
    <div class="mui-shadow-toggle"></div>
  </nav>
</div>
/src/muilessium-ui/components/hero-header/style.less

Опция -full-height задает компоненту высоту в 100vh.

Зависит от image
Зависит от svg-icon
Background

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, excepturi!

Исходный код (Pug)
.mui-hero-header
    img.mui-image.background.-js-lazy-load(data-src='https://placehold.it/1200x800/2e7d32/1b5e20' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Background')
    noscript
        img.mui-image.background(src='https://placehold.it/1200x800/2e7d32/1b5e20' alt='Background')
    .effects
    .content
        h2 Lorem ipsum dolor sit amet.
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, excepturi!
    .scrollicon
        svg.mui-svg-icon
            use(xlink:href='#mui-svg-icon--arrow-down')
Исходный код (HTML)
<div class="mui-hero-header"><img class="mui-image background -js-lazy-load" data-src="https://placehold.it/1200x800/2e7d32/1b5e20" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Background"/>
  <noscript><img class="mui-image background" src="https://placehold.it/1200x800/2e7d32/1b5e20" alt="Background"/></noscript>
  <div class="effects"></div>
  <div class="content">
    <h2>Lorem ipsum dolor sit amet.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, excepturi!</p>
  </div>
  <div class="scrollicon">
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--arrow-down"></use>
    </svg>
  </div>
</div>
/src/muilessium-ui/components/image/style.less

...

Example
Вариант: -rounded
Example
Вариант: -circle
Example
Исходный код (Pug)
img.mui-image.-js-lazy-load(data-src='https://placehold.it/250x250/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Example')
noscript
    img.mui-image(src='https://placehold.it/250x250/4caf50/2e7d32' alt='Example')
Исходный код (HTML)
<img class="mui-image -js-lazy-load" data-src="https://placehold.it/250x250/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Example"/>
<noscript><img class="mui-image" src="https://placehold.it/250x250/4caf50/2e7d32" alt="Example"/></noscript>
/src/muilessium-ui/components/input/style.less

Имеет два параметра: regexp (/^(?:)$/ по умолчанию) и validation-delay (300ms по умолчанию). Опция -js-no-validation отключает валидацию.

(!) Input - Используйте Muilessium.get('Input', id), чтобы обратиться к компоненту.
  • validate() - запускает валидацию
  • isValid()  - возвращает true, если значение валидно, и false, если нет
  • getValue() - возвращает введенное значение
  • setValue(value) - заменяет значение новым
Событие: update-state - Используйте Input.addEventListener('update-state', (state) => { /* . . . */ }), чтобы повесить обработчик.
Username (min 3 characters, only letters allowed)
Исходный код (Pug)
.mui-input-wrapper
    label.mui-input-label Username
    .mui-input-hint
        span Username (min 3 characters, only letters allowed)
        span.mui-input-indicator
            span.validicon
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--check')
            span.invalidicon
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--close')
    .mui-input#docs-only-id--input(data-regexp='^[a-zA-Z]{3,}$' data-validation-delay='1000')
        input(type='text' placeholder='Your username')
Исходный код (HTML)
<div class="mui-input-wrapper">
  <label class="mui-input-label">Username</label>
  <div class="mui-input-hint"><span>Username (min 3 characters, only letters allowed)</span><span class="mui-input-indicator"><span class="validicon">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--check"></use>
        </svg></span><span class="invalidicon">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--close"></use>
        </svg></span></span></div>
  <div class="mui-input" id="docs-only-id--input" data-regexp="^[a-zA-Z]{3,}$" data-validation-delay="1000">
    <input type="text" placeholder="Your username"/>
  </div>
</div>
/src/muilessium-ui/components/list/style.less

Опция -no-bullets убирает точки.

  • list item
  • list item
  • list item
    1. list item
    2. list item
    3. list item
  • list item
  • list item
    • list item
    • list item
      • list item
      • list item
      • list item
Исходный код (Pug)
ul.mui-list._separate-1
    li.item list item
    li.item list item
    li.item list item
    ol.mui-list._separate-1
        li.item list item
        li.item list item
        li.item list item
ul.mui-list._separate-1
    li.item list item
    li.item list item
    ul.mui-list
        li.item list item
        li.item list item
        ul.mui-list._separate-1
            li.item list item
            li.item list item
            li.item list item
Исходный код (HTML)
<ul class="mui-list _separate-1">
  <li class="item">list item</li>
  <li class="item">list item</li>
  <li class="item">list item</li>
  <ol class="mui-list _separate-1">
    <li class="item">list item</li>
    <li class="item">list item</li>
    <li class="item">list item</li>
  </ol>
</ul>
<ul class="mui-list _separate-1">
  <li class="item">list item</li>
  <li class="item">list item</li>
  <ul class="mui-list">
    <li class="item">list item</li>
    <li class="item">list item</li>
    <ul class="mui-list _separate-1">
      <li class="item">list item</li>
      <li class="item">list item</li>
      <li class="item">list item</li>
    </ul>
  </ul>
</ul>
/src/muilessium-ui/components/marker/style.less

...

lorem ipsum
Исходный код (Pug)
span.mui-marker lorem ipsum
Исходный код (HTML)
<span class="mui-marker">lorem ipsum</span>
/src/muilessium-ui/components/media-view/style.less

Опция -full-width делает ширину в 100% вместо 90% по умолчанию.

Зависит от image
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ea.
Исходный код (Pug)
.mui-media-view
    img.mui-image.-rounded.-js-lazy-load(data-src='https://placehold.it/1200x800/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Lorem ipsum')
    noscript
        img.mui-image(src='https://placehold.it/1200x800/4caf50/2e7d32' alt='Lorem ipsum')
    .description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ea.
Исходный код (HTML)
<div class="mui-media-view"><img class="mui-image -rounded -js-lazy-load" data-src="https://placehold.it/1200x800/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Lorem ipsum"/>
  <noscript><img class="mui-image" src="https://placehold.it/1200x800/4caf50/2e7d32" alt="Lorem ipsum"/></noscript>
  <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ea.</div>
</div>
/src/muilessium-ui/components/modal-window/style.less

Используется для картинок. Не следует использовать для интерактивного контента.

(!) ModalWindow - Используйте Muilessium.get('ModalWindow', id), чтобы обратиться к компоненту.
  • openModal()  - открывает модальное окно
  • closeModal() - закрывает модальное окно
Событие: open-modal - Используйте ModalWindow.addEventListener('open-modal', (state) => { /* . . . */ }), чтобы повесить обработчик.
Событие: close-modal - Используйте ModalWindow.addEventListener('close-modal', (state) => { /* . . . */ }), чтобы повесить обработчик.
Зависит от shadow-toggle
Зависит от image
Зависит от svg-icon
Show big image
Image description
Исходный код (Pug)
.mui-button(data-modal-opener='docs-only-id--modal-window') Show big image
.mui-modal-window#docs-only-id--modal-window
    .window._shadow-3
        .content.-image
            img.mui-image.-js-lazy-load(data-src='https://placehold.it/800x600/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Image description')
            noscript
                img.mui-image(src='https://placehold.it/800x600/4caf50/2e7d32' alt='Image description')
        .closeicon
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--close')
    .mui-shadow-toggle
Исходный код (HTML)
<div class="mui-button" data-modal-opener="docs-only-id--modal-window">Show big image</div>
<div class="mui-modal-window" id="docs-only-id--modal-window">
  <div class="window _shadow-3">
    <div class="content -image"><img class="mui-image -js-lazy-load" data-src="https://placehold.it/800x600/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Image description"/>
      <noscript><img class="mui-image" src="https://placehold.it/800x600/4caf50/2e7d32" alt="Image description"/></noscript>
    </div>
    <div class="closeicon">
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--close"></use>
      </svg>
    </div>
  </div>
  <div class="mui-shadow-toggle"></div>
</div>
/src/muilessium-ui/components/notification/style.less

Есть два вида уведомлений - banner и message. Баннер используется для статических уведомлений для всех пользователей вверху страницы, а сообщения используются как всплывающие уведомления. По умолчанию они скрыты и следует использовать Muilessium.UTILS.animateElement и анимации fade-in-*, чтобы их показать.

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Исходный код (Pug)
.mui-notification.-message.-left._shadow-3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
.mui-notification.-message.-right._shadow-3 Lorem ipsum dolor sit amet consectetur adipisicing elit.
.mui-notification.-banner Lorem ipsum dolor sit amet consectetur adipisicing elit.
Исходный код (HTML)
<div class="mui-notification -message -left _shadow-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="mui-notification -message -right _shadow-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="mui-notification -banner">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
/src/muilessium-ui/components/page-footer/style.less

Используется в паре с Page container для создания липкого подвала.

Copyright © ...
Исходный код (Pug)
footer.mui-page-footer Copyright &copy; ...
Исходный код (HTML)
<footer class="mui-page-footer">Copyright &copy; ...</footer>
/src/muilessium-ui/components/page-header/style.less

...

Зависит от header-logo
Зависит от header-navigation
Исходный код (Pug)
header.mui-page-header
    .mui-header-logo._left
        a.link(href='')
            h1 Logo
    nav.mui-header-navigation.-mobile-version._right
        .mui-navigation-toggle.-hamburger
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--hamburger')
        ul.linkslist
            li.item
                a.link(href='')
                    span home
                    span.mui-badge 5
            li.item
                a.link(href='') about
        .mui-navigation-toggle.mui-shadow-toggle
Исходный код (HTML)
<header class="mui-page-header">
  <div class="mui-header-logo _left"><a class="link" href="">
      <h1>Logo</h1></a></div>
  <nav class="mui-header-navigation -mobile-version _right">
    <div class="mui-navigation-toggle -hamburger">
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--hamburger"></use>
      </svg>
    </div>
    <ul class="linkslist">
      <li class="item"><a class="link" href=""><span>home</span><span class="mui-badge">5</span></a></li>
      <li class="item"><a class="link" href="">about</a></li>
    </ul>
    <div class="mui-navigation-toggle mui-shadow-toggle"></div>
  </nav>
</header>
/src/muilessium-ui/components/pagination/style.less

...

Зависит от svg-icon
Исходный код (Pug)
.mui-pagination
    button.mui-button
        svg.mui-svg-icon
            use(xlink:href='#mui-svg-icon--arrow-left')
    button.mui-button 1
    button.mui-button 2
    button.mui-button 3
    button.mui-button 4
    button.mui-button
        svg.mui-svg-icon
            use(xlink:href='#mui-svg-icon--arrow-right')
Исходный код (HTML)
<div class="mui-pagination">
  <button class="mui-button">
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--arrow-left"></use>
    </svg>
  </button>
  <button class="mui-button">1</button>
  <button class="mui-button">2</button>
  <button class="mui-button">3</button>
  <button class="mui-button">4</button>
  <button class="mui-button">
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--arrow-right"></use>
    </svg>
  </button>
</div>
/src/muilessium-ui/components/paragraph/style.less

...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, excepturi sequi quibusdam iusto, repellendus veritatis quaerat maxime repudiandae, voluptate saepe tempora beatae rerum consectetur odio amet possimus est quam, accusamus vitae officiis minima provident doloribus eveniet dolore. Possimus maxime nulla, et nisi eveniet nam corporis architecto corrupti vero voluptate. Architecto.

Исходный код (Pug)
p.mui-p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, excepturi sequi quibusdam iusto, repellendus veritatis quaerat maxime repudiandae, voluptate saepe tempora beatae rerum consectetur odio amet possimus est quam, accusamus vitae officiis minima provident doloribus eveniet dolore. Possimus maxime nulla, et nisi eveniet nam corporis architecto corrupti vero voluptate. Architecto.
Исходный код (HTML)
<p class="mui-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, excepturi sequi quibusdam iusto, repellendus veritatis quaerat maxime repudiandae, voluptate saepe tempora beatae rerum consectetur odio amet possimus est quam, accusamus vitae officiis minima provident doloribus eveniet dolore. Possimus maxime nulla, et nisi eveniet nam corporis architecto corrupti vero voluptate. Architecto.</p>
/src/muilessium-ui/components/post/style.less

Этот набор компонентов используется как единое целое для создания постов.

Зависит от button
Зависит от tags-list
Published onSeptember 29, 2018
Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda laboriosam esse unde explicabo molestiae laborum consequuntur placeat perspiciatis sit omnis, aperiam molestias delectus repellendus, illo mollitia doloremque libero quod reprehenderit.

read more
Исходный код (Pug)
article.mui-post._shadow-1
    header.mui-post-header
        .title
            a.link(href='')
                h4 Lorem ipsum dolor
        .information.-grey-4
            span Published on
            span.date September 29, 2018
    .mui-post-content
        img.mui-image.-rounded.-js-lazy-load(data-src='https://placehold.it/800x400/4caf50/2e7d32' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Example')
        noscript
            img.mui-image(src='https://placehold.it/800x400/4caf50/2e7d32' alt='Example')
        p.mui-p._separate-1
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda laboriosam esse unde explicabo molestiae laborum consequuntur placeat perspiciatis sit omnis, aperiam molestias delectus repellendus, illo mollitia doloremque libero quod reprehenderit.
        a.mui-button.-ghost._separate-top-1(href='')
            span read more
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--arrow-right')
    footer.mui-post-footer
        .mui-tags-list(aria-label='Tags list')
            .mui-tag-wrapper.-icon(role='presentation')
                svg.mui-svg-icon
                    use(xlink:href='#mui-svg-icon--tags')
            .mui-tag-wrapper
                a.mui-tag(href='') html
            .mui-tag-wrapper
                a.mui-tag(href='') css
            .mui-tag-wrapper
                a.mui-tag(href='') javascript
            .mui-tag-wrapper
                a.mui-tag(href='') gulp
            .mui-tag-wrapper
                a.mui-tag(href='') webpack
Исходный код (HTML)
<article class="mui-post _shadow-1">
  <header class="mui-post-header">
    <div class="title"><a class="link" href="">
        <h4>Lorem ipsum dolor</h4></a></div>
    <div class="information -grey-4"><span>Published on</span><span class="date">September 29, 2018</span></div>
  </header>
  <div class="mui-post-content"><img class="mui-image -rounded -js-lazy-load" data-src="https://placehold.it/800x400/4caf50/2e7d32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Example"/>
    <noscript><img class="mui-image" src="https://placehold.it/800x400/4caf50/2e7d32" alt="Example"/></noscript>
    <p class="mui-p _separate-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda laboriosam esse unde explicabo molestiae laborum consequuntur placeat perspiciatis sit omnis, aperiam molestias delectus repellendus, illo mollitia doloremque libero quod reprehenderit.</p><a class="mui-button -ghost _separate-top-1" href=""><span>read more</span>
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--arrow-right"></use>
      </svg></a>
  </div>
  <footer class="mui-post-footer">
    <div class="mui-tags-list" aria-label="Tags list">
      <div class="mui-tag-wrapper -icon" role="presentation">
        <svg class="mui-svg-icon">
          <use xlink:href="#mui-svg-icon--tags"></use>
        </svg>
      </div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">html</a></div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">css</a></div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">javascript</a></div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">gulp</a></div>
      <div class="mui-tag-wrapper"><a class="mui-tag" href="">webpack</a></div>
    </div>
  </footer>
</article>
/src/muilessium-ui/components/progress-bar/style.less

...

(!) ProgressBar - Используйте Muilessium.get('ProgressBar', id), чтобы обратиться к компоненту.
  • setValue(newValue) - задает новое значение
  • getValue()  - возвращает текущее значение
Исходный код (Pug)
.mui-progress-bar#docs-only-id--progress-bar(data-value='60')
    .indicator
    .value
Исходный код (HTML)
<div class="mui-progress-bar" id="docs-only-id--progress-bar" data-value="60">
  <div class="indicator"></div>
  <div class="value"></div>
</div>
/src/muilessium-ui/components/progress-bar/style.less

Опция -align-center выравнивает элемент по центру по горизонтали.

(!) ProgressBar - Используйте Muilessium.get('ProgressBar', id), чтобы обратиться к компоненту.
  • setValue(newValue) - задает новое значение
  • getValue()  - возвращает текущее значение
Исходный код (Pug)
.mui-progress-bar.-radial#docs-only-id--radial-progress-bar(data-value='60')
    svg.indicator(viewbox='0 0 100 100')
        circle.background(cx='50' cy='50' r='34')
        circle.progress(cx='50' cy='50' r='34')
    .value
Исходный код (HTML)
<div class="mui-progress-bar -radial" id="docs-only-id--radial-progress-bar" data-value="60">
  <svg class="indicator" viewbox="0 0 100 100">
    <circle class="background" cx="50" cy="50" r="34"></circle>
    <circle class="progress" cx="50" cy="50" r="34"></circle>
  </svg>
  <div class="value"></div>
</div>
/src/muilessium-ui/components/radio/style.less

...

(!) Radio - Используйте Muilessium.get('Radio', id), чтобы обратиться к компоненту.
  • updateState(index) - выбирает пункт с заданным индексом
  • getState()  - возвращает индекс выбранного пункта
Событие: update-state - Используйте Radio.addEventListener('update-state', (state) => { /* . . . */ }), чтобы повесить обработчик.
Зависит от input
Left or right?
Исходный код (Pug)
.mui-input-wrapper
    .mui-input-label Left or right?
    .mui-radio#docs-only-id--radio(data-name='docs-only-name--radio')
        input(value='left', checked='')
        label
            span.icon
            span.text Left
        input(value='right')
        label
            span.icon
            span.text Right
Исходный код (HTML)
<div class="mui-input-wrapper">
  <div class="mui-input-label">Left or right?</div>
  <div class="mui-radio" id="docs-only-id--radio" data-name="docs-only-name--radio">
    <input value="left" checked=""/>
    <label><span class="icon"></span><span class="text">Left</span></label>
    <input value="right"/>
    <label><span class="icon"></span><span class="text">Right</span></label>
  </div>
</div>
/src/muilessium-ui/components/ribbon/style.less

Ленточки следует использовать внутри их стандартных оберток или других элементов с position=relative.

Исходный код (Pug)
.mui-ribbon-wrapper
    .mui-ribbon.-classic.-top.-left(aria-hidden='true') new
    .mui-ribbon.-classic.-top.-right(aria-hidden='true') new
    .mui-ribbon.-classic.-bottom.-left(aria-hidden='true') new
    .mui-ribbon.-classic.-bottom.-right(aria-hidden='true') new
.mui-ribbon-wrapper
    .mui-ribbon.-bookmark.-left(aria-hidden='true') new
    .mui-ribbon.-bookmark.-right(aria-hidden='true') new
Исходный код (HTML)
<div class="mui-ribbon-wrapper">
  <div class="mui-ribbon -classic -top -left" aria-hidden="true">new</div>
  <div class="mui-ribbon -classic -top -right" aria-hidden="true">new</div>
  <div class="mui-ribbon -classic -bottom -left" aria-hidden="true">new</div>
  <div class="mui-ribbon -classic -bottom -right" aria-hidden="true">new</div>
</div>
<div class="mui-ribbon-wrapper">
  <div class="mui-ribbon -bookmark -left" aria-hidden="true">new</div>
  <div class="mui-ribbon -bookmark -right" aria-hidden="true">new</div>
</div>
/src/muilessium-ui/components/scroll-fix/style.less

Внутренний компонент.

/src/muilessium-ui/components/select-dropdown/style.less

Атрибут data-id может быть использован, чтобы задать id скрытому настоящему селекту.

(!) SelectDropdown - Используйте Muilessium.get('SelectDropdown', id), чтобы обратиться к компоненту.
  • getSelectedIndex()  - возвращает индекс выбранного пункта
  • openDropdown()  - открывает выпадающее меню
  • closeDropdown()  - закрывает выпадающее меню
  • toggleDropdown()  - открывает меню, если оно закрыто, и закрывает, если открыто
  • updateState(newIndex = 0) - выбирает пункт с заданным индексом
  • getState()  - возвращает индекс выбранного пункта
Событие: update-state - Используйте SelectDropdown.addEventListener('update-state', (state) => { /* . . . */ }), чтобы повесить обработчик.
Зависит от input
Зависит от dropdown-options
Зависит от shadow-toggle
Зависит от svg-icon
Red
Green
Blue
Orange
Исходный код (Pug)
.mui-input-wrapper
    label.mui-input-label Select color
    .mui-select-dropdown#docs-only-id--select-dropdown
        .select
            .state
            .mui-dropdown-options._shadow-1
                .wrapper
                    .option.-selected(data-value='red') Red
                    .option(data-value='green') Green
                    .option(data-value='blue') Blue
                    .option(data-value='orange') Orange
        .mui-shadow-toggle
        .icon
            svg.mui-svg-icon
                use(xlink:href='#mui-svg-icon--arrow-down')
Исходный код (HTML)
<div class="mui-input-wrapper">
  <label class="mui-input-label">Select color</label>
  <div class="mui-select-dropdown" id="docs-only-id--select-dropdown">
    <div class="select">
      <div class="state"></div>
      <div class="mui-dropdown-options _shadow-1">
        <div class="wrapper">
          <div class="option -selected" data-value="red">Red</div>
          <div class="option" data-value="green">Green</div>
          <div class="option" data-value="blue">Blue</div>
          <div class="option" data-value="orange">Orange</div>
        </div>
      </div>
    </div>
    <div class="mui-shadow-toggle"></div>
    <div class="icon">
      <svg class="mui-svg-icon">
        <use xlink:href="#mui-svg-icon--arrow-down"></use>
      </svg>
    </div>
  </div>
</div>
/src/muilessium-ui/components/shadow-toggle/style.less

Этот компонент используется как часть более крупных компонентов - Select dropdown и Header navigation.

/src/muilessium-ui/components/spinner/style.less

...

Зависит от svg-icon
Исходный код (Pug)
.mui-spinner(role='presentation')
    svg.mui-svg-icon
        use(xlink:href='#mui-svg-icon--spinner')
Исходный код (HTML)
<div class="mui-spinner" role="presentation">
  <svg class="mui-svg-icon">
    <use xlink:href="#mui-svg-icon--spinner"></use>
  </svg>
</div>
/src/muilessium-ui/components/spoiler/style.less

...

(!) Spoiler - Используйте Muilessium.get('Spoiler', id), чтобы обратиться к компоненту.
  • open()  - разворачивает спойлер
  • close()  - сворачивает спойлер
  • toggle() - разворачивает спойлер, если он свернут, и сворачивает, если развернут
spoiler

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, necessitatibus. Facilis in eum deserunt nam odit labore mollitia nesciunt vitae eaque aperiam ut ratione, possimus nulla iste iusto! Molestiae aliquam obcaecati ex corrupti incidunt impedit veniam consequatur accusantium quaerat id aperiam odit illo, deleniti vitae rerum! Odio voluptatum vitae impedit deleniti voluptate, architecto recusandae facilis, optio ut, natus qui consectetur ab cumque reprehenderit eveniet corrupti exercitationem eos accusamus enim. Porro, deleniti vitae doloremque blanditiis dicta, tenetur non odit accusamus quo, aperiam accusantium adipisci. Accusamus deserunt est consequatur, aut perferendis nisi, quibusdam cumque magni, commodi exercitationem velit minima. Culpa quaerat harum animi provident facere blanditiis corrupti. Totam, magnam sit possimus, laudantium quidem minus corporis, placeat facere maxime nostrum reiciendis vel officiis. Ipsum temporibus voluptates dolor assumenda, at inventore vero earum necessitatibus nulla! Est suscipit magnam rem, mollitia praesentium enim deserunt autem quibusdam quis voluptate esse ipsum? Quidem at commodi qui ex repellat ab necessitatibus unde cum ipsa esse quam, quasi animi, fugit dolor aut eaque laudantium. Veritatis eum pariatur ea fugiat exercitationem similique impedit praesentium vitae, voluptas quos tenetur animi quo placeat quaerat necessitatibus molestiae minus quasi perspiciatis modi voluptatem, quas labore illo quod. Incidunt ipsam voluptas quis voluptatem at, adipisci, laborum, corrupti doloremque exercitationem necessitatibus eaque? Iste fuga esse doloribus itaque veritatis, eius delectus iure labore natus nesciunt dolorem quasi animi amet sit, asperiores accusantium quos distinctio repellendus. Necessitatibus itaque cum quibusdam. Pariatur quis ipsa adipisci soluta minus? Quam vitae, ducimus corrupti rerum nam, cum voluptatibus, earum nihil est impedit exercitationem ut aliquid accusamus nisi doloremque! Temporibus deserunt accusantium exercitationem voluptatum amet beatae velit eum voluptatem? Omnis veniam sapiente dolorem minus aliquid ad itaque illum, iusto consequatur quia? Iusto fugit doloremque magni molestias corporis quaerat asperiores obcaecati? Quos recusandae esse excepturi quo quibusdam non neque dolorum quas, laudantium consequatur doloremque.

Исходный код (Pug)
.mui-spoiler#docs-only-id--spoiler
    .title spoiler
    .content
        p.mui-p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, necessitatibus. Facilis in eum deserunt nam odit labore mollitia nesciunt vitae eaque aperiam ut ratione, possimus nulla iste iusto! Molestiae aliquam obcaecati ex corrupti incidunt impedit veniam consequatur accusantium quaerat id aperiam odit illo, deleniti vitae rerum! Odio voluptatum vitae impedit deleniti voluptate, architecto recusandae facilis, optio ut, natus qui consectetur ab cumque reprehenderit eveniet corrupti exercitationem eos accusamus enim. Porro, deleniti vitae doloremque blanditiis dicta, tenetur non odit accusamus quo, aperiam accusantium adipisci. Accusamus deserunt est consequatur, aut perferendis nisi, quibusdam cumque magni, commodi exercitationem velit minima. Culpa quaerat harum animi provident facere blanditiis corrupti. Totam, magnam sit possimus, laudantium quidem minus corporis, placeat facere maxime nostrum reiciendis vel officiis. Ipsum temporibus voluptates dolor assumenda, at inventore vero earum necessitatibus nulla! Est suscipit magnam rem, mollitia praesentium enim deserunt autem quibusdam quis voluptate esse ipsum? Quidem at commodi qui ex repellat ab necessitatibus unde cum ipsa esse quam, quasi animi, fugit dolor aut eaque laudantium. Veritatis eum pariatur ea fugiat exercitationem similique impedit praesentium vitae, voluptas quos tenetur animi quo placeat quaerat necessitatibus molestiae minus quasi perspiciatis modi voluptatem, quas labore illo quod. Incidunt ipsam voluptas quis voluptatem at, adipisci, laborum, corrupti doloremque exercitationem necessitatibus eaque? Iste fuga esse doloribus itaque veritatis, eius delectus iure labore natus nesciunt dolorem quasi animi amet sit, asperiores accusantium quos distinctio repellendus. Necessitatibus itaque cum quibusdam. Pariatur quis ipsa adipisci soluta minus? Quam vitae, ducimus corrupti rerum nam, cum voluptatibus, earum nihil est impedit exercitationem ut aliquid accusamus nisi doloremque! Temporibus deserunt accusantium exercitationem voluptatum amet beatae velit eum voluptatem? Omnis veniam sapiente dolorem minus aliquid ad itaque illum, iusto consequatur quia? Iusto fugit doloremque magni molestias corporis quaerat asperiores obcaecati? Quos recusandae esse excepturi quo quibusdam non neque dolorum quas, laudantium consequatur doloremque.
Исходный код (HTML)
<div class="mui-spoiler" id="docs-only-id--spoiler">
  <div class="title">spoiler</div>
  <div class="content">
    <p class="mui-p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, necessitatibus. Facilis in eum deserunt nam odit labore mollitia nesciunt vitae eaque aperiam ut ratione, possimus nulla iste iusto! Molestiae aliquam obcaecati ex corrupti incidunt impedit veniam consequatur accusantium quaerat id aperiam odit illo, deleniti vitae rerum! Odio voluptatum vitae impedit deleniti voluptate, architecto recusandae facilis, optio ut, natus qui consectetur ab cumque reprehenderit eveniet corrupti exercitationem eos accusamus enim. Porro, deleniti vitae doloremque blanditiis dicta, tenetur non odit accusamus quo, aperiam accusantium adipisci. Accusamus deserunt est consequatur, aut perferendis nisi, quibusdam cumque magni, commodi exercitationem velit minima. Culpa quaerat harum animi provident facere blanditiis corrupti. Totam, magnam sit possimus, laudantium quidem minus corporis, placeat facere maxime nostrum reiciendis vel officiis. Ipsum temporibus voluptates dolor assumenda, at inventore vero earum necessitatibus nulla! Est suscipit magnam rem, mollitia praesentium enim deserunt autem quibusdam quis voluptate esse ipsum? Quidem at commodi qui ex repellat ab necessitatibus unde cum ipsa esse quam, quasi animi, fugit dolor aut eaque laudantium. Veritatis eum pariatur ea fugiat exercitationem similique impedit praesentium vitae, voluptas quos tenetur animi quo placeat quaerat necessitatibus molestiae minus quasi perspiciatis modi voluptatem, quas labore illo quod. Incidunt ipsam voluptas quis voluptatem at, adipisci, laborum, corrupti doloremque exercitationem necessitatibus eaque? Iste fuga esse doloribus itaque veritatis, eius delectus iure labore natus nesciunt dolorem quasi animi amet sit, asperiores accusantium quos distinctio repellendus. Necessitatibus itaque cum quibusdam. Pariatur quis ipsa adipisci soluta minus? Quam vitae, ducimus corrupti rerum nam, cum voluptatibus, earum nihil est impedit exercitationem ut aliquid accusamus nisi doloremque! Temporibus deserunt accusantium exercitationem voluptatum amet beatae velit eum voluptatem? Omnis veniam sapiente dolorem minus aliquid ad itaque illum, iusto consequatur quia? Iusto fugit doloremque magni molestias corporis quaerat asperiores obcaecati? Quos recusandae esse excepturi quo quibusdam non neque dolorum quas, laudantium consequatur doloremque.</p>
  </div>
</div>
/src/muilessium-ui/components/svg-icon/style.less

...

Зависит от svg-sprite
Исходный код (Pug)
svg.mui-svg-icon
    use(xlink:href='#mui-svg-icon--check')
Исходный код (HTML)
<svg class="mui-svg-icon">
  <use xlink:href="#mui-svg-icon--check"></use>
</svg>
/src/muilessium-ui/components/svg-sprite/style.less

...

Исходный код (Pug)
.mui-svg-sprite
    // svg
    //     symbol ...
Исходный код (HTML)
<div class="mui-svg-sprite">
  <!-- svg-->
  <!--     symbol ...-->
</div>
/src/muilessium-ui/components/table/style.less

...

Table Header
lorem ipsum lorem ipsum dolor sit
lorem ipsum lorem ipsum dolor sit
Вариант: -striped
Table Header
lorem ipsum lorem ipsum dolor sit
lorem ipsum lorem ipsum dolor sit
Исходный код (Pug)
table.mui-table
    tbody
        tr.header
            th Table
            th Header
        tr
            td lorem ipsum
            td lorem ipsum dolor sit
        tr
            td lorem ipsum
            td lorem ipsum dolor sit
Исходный код (HTML)
<table class="mui-table">
  <tbody>
    <tr class="header">
      <th>Table</th>
      <th>Header</th>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum dolor sit</td>
    </tr>
    <tr>
      <td>lorem ipsum</td>
      <td>lorem ipsum dolor sit</td>
    </tr>
  </tbody>
</table>
/src/muilessium-ui/components/tabs/style.less

...

(!) Tabs - Используйте Muilessium.get('Tabs', id), чтобы обратиться к компоненту.
  • goToPreviousTab() - переходит к предыдущей вкладке
  • goToNextTab()  - переходит к следующей вкладке
Tab 1 Lorem ipsum dolor sit amet
Tab 2 Lorem ipsum dolor
Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, iste ipsa, deleniti perferendis nam commodi et odit, voluptates illum accusamus, nesciunt voluptatem id aliquid tempora. Quas at blanditiis expedita, placeat!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptas dolor a nam delectus est suscipit? Officiis, similique eos blanditiis debitis nisi placeat ad error perferendis vero omnis quae sit delectus quos et? Magnam eum ullam commodi debitis, numquam libero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam et minus explicabo consectetur reprehenderit dolor dolorem quaerat necessitatibus optio aut, quas cum ex eveniet, quidem. Sunt ad eligendi numquam cupiditate asperiores quod, aspernatur delectus labore est? Nisi sapiente, doloremque cupiditate vel eos numquam aliquam possimus? Ex officia debitis facere recusandae, reiciendis ullam praesentium ratione dolor eveniet nesciunt natus tempora, blanditiis obcaecati at impedit cupiditate adipisci corporis. Blanditiis nam facere impedit necessitatibus, assumenda quis. Eveniet veniam odio ducimus, debitis reprehenderit? Quasi, perferendis culpa magni deleniti dolorum sit voluptatem fugiat distinctio odio ipsa nemo qui, beatae aperiam! A harum tempora cupiditate consectetur.
Исходный код (Pug)
.mui-tabs#docs-only-id--tabs
    .labels
        .label Tab 1 Lorem ipsum dolor sit amet
        .label Tab 2 Lorem ipsum dolor
        .label Tab 3
    .tabs
        .tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, iste ipsa, deleniti perferendis nam commodi et odit, voluptates illum accusamus, nesciunt voluptatem id aliquid tempora. Quas at blanditiis expedita, placeat!
        .tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptas dolor a nam delectus est suscipit? Officiis, similique eos blanditiis debitis nisi placeat ad error perferendis vero omnis quae sit delectus quos et? Magnam eum ullam commodi debitis, numquam libero!
        .tab Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam et minus explicabo consectetur reprehenderit dolor dolorem quaerat necessitatibus optio aut, quas cum ex eveniet, quidem. Sunt ad eligendi numquam cupiditate asperiores quod, aspernatur delectus labore est? Nisi sapiente, doloremque cupiditate vel eos numquam aliquam possimus? Ex officia debitis facere recusandae, reiciendis ullam praesentium ratione dolor eveniet nesciunt natus tempora, blanditiis obcaecati at impedit cupiditate adipisci corporis. Blanditiis nam facere impedit necessitatibus, assumenda quis. Eveniet veniam odio ducimus, debitis reprehenderit? Quasi, perferendis culpa magni deleniti dolorum sit voluptatem fugiat distinctio odio ipsa nemo qui, beatae aperiam! A harum tempora cupiditate consectetur.
Исходный код (HTML)
<div class="mui-tabs" id="docs-only-id--tabs">
  <div class="labels">
    <div class="label">Tab 1 Lorem ipsum dolor sit amet</div>
    <div class="label">Tab 2 Lorem ipsum dolor</div>
    <div class="label">Tab 3</div>
  </div>
  <div class="tabs">
    <div class="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, iste ipsa, deleniti perferendis nam commodi et odit, voluptates illum accusamus, nesciunt voluptatem id aliquid tempora. Quas at blanditiis expedita, placeat!</div>
    <div class="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptas dolor a nam delectus est suscipit? Officiis, similique eos blanditiis debitis nisi placeat ad error perferendis vero omnis quae sit delectus quos et? Magnam eum ullam commodi debitis, numquam libero!</div>
    <div class="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam et minus explicabo consectetur reprehenderit dolor dolorem quaerat necessitatibus optio aut, quas cum ex eveniet, quidem. Sunt ad eligendi numquam cupiditate asperiores quod, aspernatur delectus labore est? Nisi sapiente, doloremque cupiditate vel eos numquam aliquam possimus? Ex officia debitis facere recusandae, reiciendis ullam praesentium ratione dolor eveniet nesciunt natus tempora, blanditiis obcaecati at impedit cupiditate adipisci corporis. Blanditiis nam facere impedit necessitatibus, assumenda quis. Eveniet veniam odio ducimus, debitis reprehenderit? Quasi, perferendis culpa magni deleniti dolorum sit voluptatem fugiat distinctio odio ipsa nemo qui, beatae aperiam! A harum tempora cupiditate consectetur.</div>
  </div>
</div>
/src/muilessium-ui/components/tags-list/style.less

...

Зависит от svg-icon
Исходный код (Pug)
.mui-tags-list(aria-label='Tags list')
    .mui-tag-wrapper.-icon(role='presentation')
        svg.mui-svg-icon
            use(xlink:href='#mui-svg-icon--tags')
    .mui-tag-wrapper
        a.mui-tag(href='') html
    .mui-tag-wrapper
        a.mui-tag(href='') css
    .mui-tag-wrapper
        a.mui-tag(href='') javascript
    .mui-tag-wrapper
        a.mui-tag(href='') gulp
    .mui-tag-wrapper
        a.mui-tag(href='') webpack
Исходный код (HTML)
<div class="mui-tags-list" aria-label="Tags list">
  <div class="mui-tag-wrapper -icon" role="presentation">
    <svg class="mui-svg-icon">
      <use xlink:href="#mui-svg-icon--tags"></use>
    </svg>
  </div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">html</a></div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">css</a></div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">javascript</a></div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">gulp</a></div>
  <div class="mui-tag-wrapper"><a class="mui-tag" href="">webpack</a></div>
</div>
/src/muilessium-ui/components/textarea/style.less

...

(!) Textarea - Используйте Muilessium.get('Textarea', id), чтобы обратиться к компоненту.
  • getValue() - возвращает введенное значение
  • setValue(value) - заменяет значение новым
Событие: update-state - Используйте Textarea.addEventListener('update-state', (state) => { /* . . . */ }), чтобы повесить обработчик.
Зависит от input
Исходный код (Pug)
.mui-input-wrapper
    label.mui-input-label Your message
    .mui-textarea#docs-only-id--textarea
        textarea(placeholder='Print your message here')
Исходный код (HTML)
<div class="mui-input-wrapper">
  <label class="mui-input-label">Your message</label>
  <div class="mui-textarea" id="docs-only-id--textarea">
    <textarea placeholder="Print your message here"></textarea>
  </div>
</div>