Просмотр БЭМ на вкладке Alipay

внешний интерфейс Icon спецификация кода Alipay CSS

Прежде всего, что означает БЭМ?
БЭМ означает блок, элемент, модификатор, что является методологией именования внешнего интерфейса, предложенной командой Яндекса, и соглашением об именах CSS.

Давайте посмотрим на примерzfbui-tabbar__item
Из этого имени мы можем расшифровать Интерфейс Alipay Панель вкладок  пункт
Затем вы также можете прочитать соответствующую структуру между ними

  • Именование придает им больше смысла и отражает их отношения.
    -----> Это просто делает ваш код более дружественным и простым в обслуживании.
  • Кроме того, после того, как имя становится длиннее, его имя становится одновременно более особенным, более устойчивым в контексте и не будет мешать стилям других компонентов. То есть улучшается независимость компонентов.
  • И вы можете напрямую найти имя класса при написании стилей CSS.

Вот подробное введение в БЭМ

B (blcok): То есть концепция блоков, которые также можно назвать компонентами и модулями.

Страница склеена несколькими компонентами, которые не зависят друг от друга и не мешают друг другу. в современном развитии
Большинство проектов состоят из общих компонентов.

E (элемент): элемент

Его роль в блоке (уникальное имя) — это не просто отношения родитель-ребенок.
Например: zfbui-tabbar__item_on   Обратите внимание, что здесь есть два символа подчеркивания__

М (модификатор): Модификатор

То есть изменение состояния. Его нельзя использовать отдельно, он должен зависеть от блока или элемента.
Например: __item_on (подчеркивание)

Разберем интерфейс TarBar Alipay

Очевидно, что эта вкладка представляет собой блок, в ней четко выделяются 5 элементов, и можно обнаружить, что каждый элемент состоит из трех элементов.
Поэтому мы можем сначала дать им независимые имена:
 предмет     предмет
значок   значок    
 этикетка    этикетка
  маленькая красная точка    значок

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

На картинке выше мы можем ясно видеть их структуру Итак, мы можем построить древовидную диаграмму БЭМ:

В это время, после их стандартизации с помощью БЭМ:
   zfbui-tabbar__item
   zfbui-tabbar__icon
   zfbui-tabbar__label
   zfbui-бейдж (поскольку этот бейдж не используется в других компонентах страницы и является специальным, его можно упростить)

  • Когда элемент выбран, мы обнаруживаем, что он синий В отличие от других элементов, в спецификации БЭМ для модификации состояния элемента мы можем использоватьzfbui-tabbar__item_onЧтобы изменить, это реальная сцена с помощью модификатора.

После создания их структуры и именования с помощью BEM вы должны иметь четкое представление о структуре панели вкладок Alipay.

Хорошо. Теперь давайте начнем создавать компонент панели вкладок самостоятельно.

  1. Во-первых, давайте завершим структуру HTML.
   <!-- BEM命名规范 -->
    <!-- tabbar模块 Block 
      tabbar__item子元素两个下划线  -->
    <div class="zfbui-tabbar">
        <a href="#" class="zfbui-tabbar__item zfbui-tabbar__item_on">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-rectangle390"></use>
                          </svg>
                <span class="zfbui-badge">8</span>
            </span>
            <p class="zfbui-tabbar__label">首页</p>
        </a>
        <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-yiban"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label">财富</p>
        </a>
        <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-tansuoa"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label">口碑</p>
        </a>
        <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-shejiao"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label">朋友</p>
        </a>
        <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-wode"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label">我的</p>
        </a>
    </div>
  1. Измерьте длину и цвет Обратите внимание, что все длины здесь должны быть уменьшены вдвое для реального использования!

3. Добавьте структуру CSS

*{
    margin: 0;
    padding: 0;
}

a:link {
    color: #a2a2a2;
}
a:vistied{
    color: #a2a2a2;
}
a:hover {
    color: #509ff1;
}
a:active {
    color: #509ff1;
}

.zfbui-tabbar {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 500;
    background-color: #ffffff;
    border-top: 1px solid #dddddd;
}
.zfbui-tabbar__item {
    flex: 1;                         /*子元素flex设置为等比例1:1:1*/
    text-align: center;             /*快速让水平内容居中*/
    padding: 8.5px 6px 6px ;               /*顺时针，上右下左，缺少一个即 上 左右 下*/
    font-size: 0;
    color: #a2a2a2;
    text-decoration: none;
}
.zfbui-tabbar__item > span {
    display: inline-block;
    position: relative;                        /*方便badge进行绝对定位*/
}
.zfbui-tabbar__icon {
    display: inline-block;                    /*行内元素是不能设置宽高 设置为inline-block以便设置宽高*/
    width: 22px;
    height: 22px;
    fill: currentColor;
    overflow: hidden;
    margin-bottom: 3.5px;
}
.zfbui-badge {
    position: absolute;
    top: -2px;
    right: -13px;
    min-width: 8px;
    display: inline-block;
    padding: .15em .4em;                        /* 上下.15  左右.4*/
    font-size: 12px;
    line-height: 12px;
    background-color: #F43539;
    border-radius: 18px;                        /*盒子圆角，超出盒子长宽的的话，就会变成圆形*/
    color: white;
}
.zfbui-tabbar__label {
    font-size: 10px;
    text-align: center;
    line-height: 10px;                          
    
}
  • конечный результат:

Дополнение: Иконки выше взяты из библиотеки иконок Али:www.iconfont.cn/

какссылка на символ:
Это более рекомендуемое использование, оно поддерживает многоцветные значки и больше не ограничено одним цветом.
С помощью некоторых трюков поддерживается настройка стиля с помощью размера шрифта и цвета шрифтов.

Категории