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.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Open in a new window<a class="link link_theme_islands link_size_m link_disabled link__control i-bem" data-bem='{"link":{"url":"https://bem.info/"}}' role="link" aria-disabled="true">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Модификатор 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.
Отвечает за стилевое оформление блока.
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Модификатор size
Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.
Способ использования: BEMJSON.
Необходимо использовать с модификатором theme в значении islands.
s
Open in a new window<a class="link link_theme_islands link_size_s link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 's'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<a class="link link_theme_islands link_size_l link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'l'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<a class="link link_theme_islands link_size_xl link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'xl'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
Модификатор view
Допустимые значения: 'minor', 'external', 'ghost', 'text', 'strong'.
Способ использования: BEMJSON.
Второстепенная ссылка (модификатор view в значении minor)
Используется для визуального выделения второстепенных ссылок на странице.
Open in a new window<a class="link link_theme_islands link_size_m link_view_minor link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'minor'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'minor'
}
}
]
Внешняя ссылка (модификатор view в значении external)
Используется для визуального выделения ссылок, которые ведут на внешние ресурсы.
Open in a new window<a class="link link_theme_islands link_size_m link_view_external link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'external'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'external'
}
}
]
Малозаметная ссылка (модификатор view в значении ghost)
Используется при необходимости сделать ссылку менее заметной на странице.
Open in a new window<a class="link link_theme_islands link_size_m link_view_ghost link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'ghost'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'ghost'
}
}
]
Ссылка под цвет текста (модификатор view в значении text)
Используется при необходимости сделать ссылку под цвет текста.
Open in a new window<a class="link link_theme_islands link_size_m link_view_text link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'text'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'text'
}
}
]
Жирная ссылка (модификатор view в значении strong)
Используется для визуального выделения важных ссылок на странице.
Open in a new window<a class="link link_theme_islands link_size_m link_view_strong link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'strong'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'strong'
}
}
]
Специализированные поля блока
Поле url
Тип: String.
Определяет адрес, по которому осуществляется переход при нажатии на ссылку.
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле title
Тип: String.
Определяет содержание всплывающей подсказки. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.
Open in a new window<span class="link link_theme_islands link_size_m link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0" title="Нажмите на ссылку для получения ответа.">Показать ответ</span>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
pseudo: true
},
content: 'Показать ответ',
title: 'Нажмите на ссылку для получения ответа.'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
pseudo: true
}
}
]
Поле target
Тип: String.
Определяет поведение ссылки. Принимает все допустимые значения HTML-атрибута target: _blank, _self (используется по умолчанию), _parent, _top.
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/" target="_blank">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info',
target: '_blank'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле tabIndex
Тип: Number.
Определяет последовательность перехода между контролами при нажатии на Tab.
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/" tabindex="1">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info',
tabIndex: 1
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]