Skip to content

Commit

Permalink
fixed radio description
Browse files Browse the repository at this point in the history
  • Loading branch information
Murdalay committed Jul 10, 2014
1 parent d75d701 commit 76b105b
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 58 deletions.
68 changes: 34 additions & 34 deletions common.blocks/radio/_radio.en.md
@@ -1,20 +1,20 @@
# radio

A `radio` block used for a single radio switch creating. A switch can be represented by the radio switch or by the button. The `radio` block allows to manage state, content and type of a radio switches.
A `radio` block is used for creating of a single radio switch. A switch can be represented by the radio switch or by the button. The `radio` block allows to manage state, content and type of a radio switches.

The `radio` blocks is used inside a `radio-group` block, as a group elements.
The `radio` blocks are used inside a `radio-group` block as a group elements.

As a result of BEMHTML transformations, block will be rendered to a `<label>` HTML element, with following set of nested items:
As a result of block's template application, it will be rendered to a `<label>` HTML element, with following set of nested items:

* a `radio__box` element, with hidden nested `input` HTML element (a `__control` element);
* a `radio__box` element with hidden nested `input` HTML element (a `__control` element);
* a radio switch label, if the `text` BEMJSON attribute is passed.

Block's implementation use the logic of a native `input` HTML element with set `radio` control type: `<input name="name" type="radio">`. The `input` element is hidden by default if a `_theme` modifier is set.
Block's implementation use the logic of a native `input` HTML element with set `radio` control type: `<input name="name" type="radio">`. If a `theme` modifier is set, the `input` element is hidden by default.


## Valid block's attributes

Valid block's attributes can be specified in the corresponding fields of the block BEMJSON declaration:
Valid block's attributes can be specified in the corresponding fields of block's BEMJSON declaration:

<table>
<tr>
Expand All @@ -35,20 +35,20 @@ Valid block's attributes can be specified in the corresponding fields of the blo
<tr>
<td><code>val</code></td>
<td><code>String|Number</code></td>
<td>A value, which the selected radio switch will return. Renders to a nested <code>input</code> block's <code>value</code> HTML attribute.</td>
<td>A value which the selected radio switch will return. Renders to a nested <code>input</code> block's <code>value</code> HTML attribute.</td>
</tr>
</table>

## Block's modifiers

### The themes `_theme`
### The themes `theme`

* simple
* normal

If a `_theme` modifier is not set, the browser defaults (`default`) will be applied to the block.
If a `theme` modifier is not set, the browser defaults (`default`) will be applied to the block.

Following example demonstrates this:
For example:

**default**

Expand Down Expand Up @@ -82,12 +82,12 @@ Following example demonstrates this:
}
```

### The sizes `_size`
### The sizes `size`

Mandatory modifier. Available for *normal* theme only.
Provides the size value to all types of radio switches.
Provides all types of radio switches with the size value.

The set of available sizes depends on a `_type` modifier's value. Following sizes are available:
The set of available sizes depends on a `type` modifier's value. Following sizes are available:

<table>
<tr>
Expand Down Expand Up @@ -116,13 +116,13 @@ The set of available sizes depends on a `_type` modifier's value. Following size
<td>+</td>
</table>

### Radio switch type `_type`
### Radio switch type `type`

A `_type` modifier can be set to a `_button` state for creating a button radio switch – the `button` block with a `_togglable_radio` modifier set.
A `type` modifier can be set to a `button` state for creating a button radio switch – the `button` block with a `button_togglable_radio` modifier set.

The `radio` block is mixing up to the `button` block with nested `radio__control` element.
The `radio` block is mixed up to the `button` block with nested `radio__control` element.

In addition, a `role="button"` HTML attribute is set for the block.
In addition a `role="button"` HTML attribute is set for the block.

<table>
<tr>
Expand Down Expand Up @@ -163,16 +163,16 @@ In addition, a `role="button"` HTML attribute is set for the block.

### Block's states

#### Inactive `_disabled`
#### Inactive `disabled`

A `_disabled` modifier is used for an inactive radio switch creation. An inactive radio switch is displayed, but not available for user actions.
A `disabled` modifier is used for an inactive radio switch creation. An inactive radio switch is displayed but not available for user actions.

Inactive radio switch will not obtain focus (a `_focused` modifier toggle) on mouse click or by `Tab` key press.
Inactive radio switch will not obtain focus (a `focused` modifier toggle) on mouse click or by `Tab` key press.

For such a inactive block will not be performed:

* `_hovered`, `_pressed` and `_focused` state modifier toggling;
* `_checked` modifier value changing.
* `hovered`, `pressed` and `focused` state modifier toggling;
* `checked` modifier value changing.

```bemjson
{
Expand All @@ -184,9 +184,9 @@ For such a inactive block will not be performed:
```


#### In focus `_focused`
#### In focus `focused`

A `_focused` modifier is automaticly toggles to the block when it is in focus. For example, on mouse click or by `Tab` key press.
A `focused` modifier is automatically toggled to the block when it is in focus. For example, on mouse click or by `Tab` key press.

Available for all block themes.

Expand All @@ -204,15 +204,15 @@ Available for all block themes.
```


#### Selected radio switch `_checked`
#### Selected radio switch `checked`

Modifier is defines the selected radio switch.
Modifier defines the selected radio switch.

The modifier is toggling on:

* mouse click (on re-clicking modifier state remains);
* `Enter` and `Space` key press (an option of `Enter` usage depends on a browser), if radio switch is in focus (a `_focused` modifier is toggled);
* arrow key press, if one of the neighbor `radio` switches is in focus. Neighbor switch can be either a part of the same radio group or independent switch nested in the same block.
* `Enter` and `Space` key press (an option of `Enter` usage depends on a browser), if radio switch is in focus (a `focused` modifier is toggled);
* arrow key press, if one of the neighbour `radio` switches is in focus. Neighbour switch can be either a part of the same radio group or independent switch nested in the same block.

```bemjson
{
Expand All @@ -227,12 +227,12 @@ The modifier is toggling on:
```


#### States, available with a `_type_button` modifier
#### States available with a `radio_type_button` modifier

If a `_type_button` modifier is set, a `radio` block is mixing up to a `button` block. As a result, for the `radio` block with the `_type_button` modifier are available following `button` block's states:
If a `radio_type_button` modifier is set, a `radio` block is mixed up to a `button` block. As a result, for the `radio` block with the `radio_type_button` modifier are available following `button` block's states:

* `_hovered` – mouse pointer over the block;
* `_pressed` – button is pressed.
* `hovered` – mouse pointer over the block;
* `pressed` – button is pressed.


## Block's elements
Expand All @@ -243,11 +243,11 @@ A `__box` element is used in basic block's implementation as a container with ne

### `__control`

A `__control` element is a radio switch controller. It renders to an `<input>` HTML element with the `type="radio"` attribute is set. In all block themes it is hidden by default. Block use only the control's logic.
A `__control` element is a radio switch controller. It renders to an `<input>` HTML element with the `type="radio"` attribute is set. In all block themes it is hidden by default. Block uses only the control's logic.

## Dependencies

The `radio` block depends on:
The block depends on:

* `i-bem__dom`
* `base-control`
Expand Down
48 changes: 24 additions & 24 deletions common.blocks/radio/_radio.ru.md
Expand Up @@ -2,9 +2,9 @@

Блок `radio` – «радиопереключатель», «радиокнопка». Используется для создания одиночных радиобоксов.

В реализации блока используется функциональность нативного контрола `input` с атрибутом `type="radio"``<input name="name" type="radio">`, который скрывается при использовании модификатора `_theme`.
В реализации блока используется функциональность нативного контрола `input` с атрибутом `type="radio"``<input name="name" type="radio">`, который скрывается при использовании модификатора `theme`.

Блок `radio` в результате BEMHTML-преобразований на странице отображается как HTML-тег `<label>` – контейнер, содержащий:
В результате применения шаблонов блок `radio` отображается на странице как HTML-тег `<label>` – контейнер, содержащий:

* элемент `radio__box`, содержащий скрытый контрол `input` (элемент `__control`);
* подпись к радиокнопке, если задан BEMJSON-параметр `text`.
Expand Down Expand Up @@ -39,7 +39,7 @@

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

### Темы `_theme`
### Темы `theme`

Блок представлен в следующих темах:

Expand Down Expand Up @@ -82,19 +82,19 @@
}
```

### Размеры радиопереключателя `_size`
### Размеры радиопереключателя `size`

Задает размер всем типам радиопереключателей. Обязательный модификатор.
Обязательный модификатор. Задает размер всем типам радиопереключателей.

Реализован только в теме *normal*.

В зависимости от значения модификатора `_type`, доступны следующие размеры реализации блока:
В зависимости от значения модификатора `type` доступны следующие размеры реализации блока:

<table>
<tr>
<th>Размер</th>
<th>Обычный радиопереключатель</th>
<th>Кнопочный радиопереключатель (<code>_type_button</code>)</th>
<th>Кнопочный радиопереключатель (<code>radio_type_button</code>)</th>
</tr>
<tr>
<th>s</th>
Expand All @@ -118,13 +118,13 @@
</table>


### Тип радиопереключателя `_type`
### Тип радиопереключателя `type`

Модификатор `_type` со значением `_button` используется для создания кнопочного радиопереключателя – кнопки (блок `button`) с установленным модификатором `_togglable_radio`.
Модификатор `type` со значением `button` используется для создания кнопочного радиопереключателя – кнопки (блок `button`) с установленным модификатором `button_togglable_radio`.

При этом к блоку `button` примешивается блок `radio`, а контентом кнопки становится `radio__control`.

Кроме того, при установленном модификаторе `_type_button` для блока задается HTML-атрибут `role="button"`.
Кроме того, при установленном модификаторе `radio_type_button` для блока задается HTML-атрибут `role="button"`.

<table>
<tr>
Expand Down Expand Up @@ -163,16 +163,16 @@
</table>


### Неактивен `_disabled`
### Неактивен `disabled`

В состоянии «неактивен» радиопереключатель отображается, но недоступен для действий пользователя.

Такой радиопереключатель не будет получать фокус (модификатор `_focused`).
Такой радиопереключатель не будет получать фокус (модификатор `focused`).

При установке модификатора `_disabled` для радиопереключателя не будут:
При установке модификатора `disabled` для радиопереключателя не будут:

* устанавливаться модификаторы состояния `_hovered`, `_pressed` и `_focused`;
* изменяться значение модификатора `_checked`.
* устанавливаться модификаторы состояния `hovered`, `pressed` и `focused`;
* изменяться значение модификатора `checked`.

```bemjson
{
Expand All @@ -185,9 +185,9 @@

### Состояния

#### В фокусе `_focused`
#### В фокусе `focused`

Модификатор `_focused` в значении `true` автоматически выставляется блоку в момент, когда он находится в фокусе. Например, по нажатию клавиши `Tab` или при щелчке мышью.
Модификатор `focused` в значении `true` автоматически выставляется блоку в момент, когда он находится в фокусе. Например, по нажатию клавиши `Tab` или при щелчке мышью.

```bemjson
{
Expand All @@ -202,14 +202,14 @@
}
```

#### Выбран `_checked`
#### Выбран `checked`

Модификатор `_checked` указывает на то, что радиопереключатель выбран (отмечен).
Модификатор `checked` указывает на то, что радиопереключатель выбран (отмечен).

Модификатор устанавливается по:

* щелчку мыши по блоку (при повторных щелчках модификатор сохраняется);
* нажатию клавиш `Enter` или `Space` (возможность использования клавиши `Enter` зависит от браузера), если радиопереключатель находится в фокусе (модификатор `_focused`);
* нажатию клавиш `Enter` или `Space` (возможность использования клавиши `Enter` зависит от браузера), если радиопереключатель находится в фокусе (модификатор `focused`);
* нажатию клавиш стрелок, если фокус установлен на соседний радиопереключатель в радиогруппе или в блоке, содержащем несколько блоков `radio`.

```bemjson
Expand All @@ -221,12 +221,12 @@
}
```

#### Состояния, доступные с модификатором `_type_button`
#### Состояния, доступные с модификатором `radio_type_button`

При установленном модификаторе `_type_button` к блоку `button` примешивается блок `radio`. Как следствие, для блока с модификатором `_type_button` доступны состояния блока `button`:
При установленном модификаторе `radio_type_button` к блоку `button` примешивается блок `radio`. Как следствие, для блока с модификатором `radio_type_button` доступны состояния блока `button`:

* `_hovered` – под курсором;
* `_pressed` – кнопка нажата.
* `hovered` – под курсором;
* `pressed` – кнопка нажата.


## Элементы
Expand Down

0 comments on commit 76b105b

Please sign in to comment.