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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
Модификатор 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Модификатор 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 's'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 's'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'l'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'xl'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
deps
Модификатор 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'minor'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'minor'
}
}
]
deps
Внешняя ссылка (модификатор 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'external'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'external'
}
}
]
deps
Малозаметная ссылка (модификатор 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'ghost'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'ghost'
}
}
]
deps
Ссылка под цвет текста (модификатор 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'text'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'text'
}
}
]
deps
Жирная ссылка (модификатор 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'strong'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'strong'
}
}
]
deps
Специализированные поля блока
Поле 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
pseudo: true
},
content: 'Показать ответ',
title: 'Нажмите на ссылку для получения ответа.'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
pseudo: true
}
}
]
deps
Поле 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info',
target: '_blank'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info',
tabIndex: 1
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps