Skip to content

Commit c42af1b

Browse files
author
Gela
committed
Merge pull request #676 from bem/issues/#632@v2
link block english description
2 parents 1cbeca7 + 417b563 commit c42af1b

File tree

2 files changed

+189
-2
lines changed

2 files changed

+189
-2
lines changed

common.blocks/link/link.en.md

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
# link
2+
3+
A `link` block is used for a various types of links creation. It allows to manage state, behaviour and appearance of a links.
4+
5+
## link use cases
6+
7+
The block is used for creation of following link types:
8+
9+
<table>
10+
<tr>
11+
<th>Type</th>
12+
<th>Description</th>
13+
<th>Example</th>
14+
</tr>
15+
<tr>
16+
<td>Basic link</td>
17+
<td>Is used to set up various kinds of links. A default type.</td>
18+
<td>
19+
<pre><code>
20+
{
21+
block : 'link',
22+
url : ' #',
23+
content : 'link'
24+
}
25+
</code></pre>
26+
</td>
27+
</tr>
28+
<tr>
29+
<td>Pseudo link</td>
30+
<td>The variation of link that will not be followed by a browser on click. Used mainly for scripts invocation.
31+
</td>
32+
<td>
33+
<pre><code>
34+
{
35+
block : 'link',
36+
mods : { pseudo : true, theme: 'normal' },
37+
content : 'pseudo'
38+
}
39+
</code></pre>
40+
</td>
41+
</tr>
42+
</table>
43+
44+
45+
## Valid block's attributes
46+
47+
Valid block's attributes can be specified in the corresponding fields of block's BEMJSON declaration:
48+
49+
<table>
50+
<tr>
51+
<th align="center">Attributes</th>
52+
<th align="center">Type</th>
53+
<th align="center">Description</th>
54+
</tr>
55+
<tr>
56+
<td>url</td>
57+
<td><code>String|BEMJSON</code></td>
58+
<td>Link's URL. If presented an <code>url</code> value, will renders to <code>href</code> HTML attribute. Is mandatory for a normal link. If BEMJSON is passed as the value, it will be processed and will return the string.</td>
59+
</tr>
60+
<tr>
61+
<td>title</td>
62+
<td><code>String</code></td>
63+
<td>Popup label's text.</td>
64+
</tr>
65+
<tr>
66+
<td>target</td>
67+
<td><code>String</code></td>
68+
<td>Target window. Mainly used with a <code>_blank</code> value to open the link in new window.</td>
69+
</tr>
70+
<tr>
71+
<td>tabIndex</td>
72+
<td><code>Number</code></td>
73+
<td>Index to define an order of links focusing on <code>Tab</code> key press. Will be rendered to native <code>tabindex</code> HTML attribute.</td>
74+
</tr>
75+
</table>
76+
77+
78+
## Block's modifiers
79+
80+
### The themes `_theme`
81+
82+
* simple
83+
* normal
84+
85+
If a `_theme` modifier is not set, the browser defaults (`default`) will be applied to the block.
86+
87+
For example:
88+
89+
#### default
90+
```bemjson
91+
{
92+
block : 'link',
93+
url : '#',
94+
content : 'link'
95+
}
96+
```
97+
98+
99+
#### simple
100+
101+
```bemjson
102+
{
103+
block : 'link',
104+
mods : { theme : 'simple' },
105+
url : '#',
106+
content : 'link'
107+
}
108+
```
109+
110+
111+
#### normal
112+
113+
```bemjson
114+
{
115+
block : 'link',
116+
mods : { theme : 'normal' },
117+
url : '#',
118+
content : 'link'
119+
}
120+
```
121+
122+
123+
### Pseudo link `_pseudo`
124+
125+
```bemjson
126+
{
127+
block : 'link',
128+
mods : {
129+
theme : 'normal',
130+
pseudo : true
131+
},
132+
title : 'pseudo mod are toggled',
133+
content : 'link'
134+
}
135+
```
136+
137+
138+
### Link's states
139+
140+
#### In focus `_focused`
141+
142+
A `_focused` modifier is automaticly toggles to the block when it is in focus. For example, on mouse click or by `Tab` key press. Focused link can be followed by Enter key press.
143+
144+
Available for all block themes.
145+
146+
```
147+
{
148+
block : 'link',
149+
mods : {
150+
theme : 'normal',
151+
focused : true
152+
},
153+
url : '#',
154+
content : '_focused'
155+
}
156+
```
157+
158+
### Inactive `_disabled`
159+
160+
A `_disabled` modifier helps to create an inactive link. Inactive link is displayed but not available for user actions.
161+
162+
For such a link will not be performed:
163+
164+
* `_focused` state modifier toggling, when in focus;
165+
* redirection to the link address if an `url` attribute is provided;
166+
* `click` BEM event emiting.
167+
168+
Available for all block themes.
169+
170+
```bemjson
171+
{
172+
block : 'link',
173+
mods : {
174+
theme : 'normal',
175+
disabled : true
176+
},
177+
url : '#',
178+
content : '_disabled'
179+
}
180+
```
181+
182+
## Dependencies
183+
184+
The block depends on:
185+
186+
* `base-control`
187+
* `i-bem__dom`

common.blocks/link/link.ru.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</tr>
2929
<tr>
3030
<td>Псевдоссылка</td>
31-
<td>Разновидность ссылки, при нажатии по которой в браузере не осуществляется переход. Применяется для вызова сценариев.
31+
<td>Разновидность ссылки, для которой не производится переход на новую страницу по щелчку мыши. Применяется для вызова сценариев.
3232
</td>
3333
<td>
3434
<pre><code>
@@ -183,5 +183,5 @@
183183

184184
Блок `link` зависит от следующего набора блоков и элементов:
185185

186-
* `control`
186+
* `base-control`
187187
* `i-bem__dom`

0 commit comments

Comments
 (0)