Skip to content

link.ru.md

Latest commit

 

History

History
309 lines (221 loc) · 9.02 KB

link.ru.md

File metadata and controls

309 lines (221 loc) · 9.02 KB
Raw

link

Используется для создания различных типов ссылок.

Обзор блока

Модификаторы блока

Модификатор Допустимые значения Способы использования Описание
pseudo true BEMJSON Псевдоссылка.
disabled true BEMJSON, JS Неактивное состояние.
focused true BEMJSON, JS Фокус на блоке.
theme islands BEMJSON Стилевое оформление.
size 's', 'm', 'l', 'xl' BEMJSON Размер блока. Используется только с модификатором theme в значении islands.
view 'minor', 'external', 'ghost', 'text', 'strong' BEMJSON Тип визуального выделения ссылки.

Специализированные поля блока

Поле Тип Описание
url String Адрес ссылки.
title String Текст всплывающей подсказки.
target String Поведение ссылки.
tabIndex Number Последовательность перехода между контролами при нажатии на Tab.

Описание блока

Блок link предоставляет возможность изменять состояние ссылок, их поведение и внешний вид.

Модификаторы блока

Модификатор pseudo

Допустимое значение: true.

Способ использования: BEMJSON.

Отличается от обычной ссылки тем, что при клике по ссылке переход на новую страницу не осуществляется.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm', pseudo : true },
    content : 'Показать ответ'
}

Модификатор disabled

Допустимое значение: true.

Способы использования: BEMJSON, JS.

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

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' , disabled : true },
    url : 'https://bem.info/',
    content : 'bem.info'
}

Модификатор focused

Допустимое значение: true

Способы использования: BEMJSON, JS.

Выставляется автоматически при получении блока фокуса.

Отвечает за наличие фокуса на блоке.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' , focused : true },
    url : 'https://bem.info/',
    content : 'bem.info'
}

Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.

Модификатор theme

Допустимое значение: islands.

Способ использования: BEMJSON.

Отвечает за стилевое оформление блока.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

Модификатор size

Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.

Способ использования: BEMJSON.

Необходимо использовать с модификатором theme в значении islands.

s

{
    block : 'link',
    mods : { theme : 'islands', size: 's' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

m

{
    block : 'link',
    mods : { theme : 'islands', size: 'm' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

l

{
    block : 'link',
    mods : { theme : 'islands', size: 'l' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

xl

{
    block : 'link',
    mods : { theme : 'islands', size: 'xl' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

Модификатор view

Допустимые значения: 'minor', 'external', 'ghost', 'text', 'strong'.

Способ использования: BEMJSON.

Второстепенная ссылка (модификатор view в значении minor)

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

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'minor' },
    url : 'https://bem.info/',
    content : 'bem.info'
}
Внешняя ссылка (модификатор view в значении external)

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

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'external' },
    url : 'https://bem.info/',
    content : 'bem.info'
}
Малозаметная ссылка (модификатор view в значении ghost)

Используется при необходимости сделать ссылку менее заметной на странице.

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'ghost' },
    url : 'https://bem.info/',
    content : 'bem.info'
}
Ссылка под цвет текста (модификатор view в значении text)

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

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'text' },
    url : 'https://bem.info/',
    content : 'bem.info'
}
Жирная ссылка (модификатор view в значении strong)

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

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'strong' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

Специализированные поля блока

Поле url

Тип: String.

Определяет адрес, по которому осуществляется переход при нажатии на ссылку.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

Поле title

Тип: String.

Определяет содержание всплывающей подсказки. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm', pseudo : true },
    content : 'Показать ответ',
    title : 'Нажмите на ссылку для получения ответа.'
}

Поле target

Тип: String.

Определяет поведение ссылки. Принимает все допустимые значения HTML-атрибута target: _blank, _self (используется по умолчанию), _parent, _top.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' },
    url : 'https://bem.info/',
    content : 'bem.info',
    target : '_blank'
}

Поле tabIndex

Тип: Number.

Определяет последовательность перехода между контролами при нажатии на Tab.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' },
    url : 'https://bem.info/',
    content : 'bem.info',
    tabIndex : 1
}