@tetacom/ng-components 1.6.5 → 1.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/accordionDocs.mdx +17 -85
- package/docs/avatarDocs.mdx +28 -100
- package/docs/badgeDocs.mdx +2 -2
- package/docs/buttonDocs.mdx +8 -80
- package/docs/checkboxDocs.mdx +8 -80
- package/docs/datePickerDocs.mdx +33 -178
- package/docs/dateRangeDocs.mdx +31 -166
- package/docs/delimiterDocs.mdx +20 -91
- package/docs/dropdownDocs.mdx +41 -157
- package/docs/expandCardlDocs.mdx +18 -55
- package/docs/expandPanelDocs.mdx +40 -112
- package/docs/fileAreaDocs.mdx +16 -74
- package/docs/iconDocs.mdx +8 -47
- package/docs/inputDocs.mdx +26 -90
- package/docs/listDocs.mdx +11 -18
- package/docs/messageDocs.mdx +52 -77
- package/docs/modalDocs.mdx +0 -1
- package/docs/progressBarDocs.mdx +26 -83
- package/docs/radioDocs.mdx +36 -113
- package/docs/resizePanelDocs.mdx +25 -93
- package/docs/selectDocs.mdx +72 -277
- package/docs/switchDocs.mdx +42 -111
- package/docs/tableDocs.mdx +7 -205
- package/docs/tabsDocs.mdx +12 -94
- package/docs/tagDocs.mdx +11 -20
- package/docs/toggleDocs.mdx +20 -55
- package/docs/toolbarDocs.mdx +9 -17
- package/docs/treeDocs.mdx +39 -121
- package/fesm2022/tetacom-ng-components.mjs +12 -12
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
package/docs/inputDocs.mdx
CHANGED
|
@@ -3,93 +3,29 @@ import InputStories from '../src/component/input/Input.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={InputStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<th>Tип</th>
|
|
33
|
-
<th>Описание</th>
|
|
34
|
-
</tr>
|
|
35
|
-
</thead>
|
|
36
|
-
<tbody>
|
|
37
|
-
<tr>
|
|
38
|
-
<td class="text-align-center">
|
|
39
|
-
<p>viewType</p>
|
|
40
|
-
</td>
|
|
41
|
-
<td class="text-align-center">
|
|
42
|
-
<code>'rounded'|'circle'|'brick'</code>
|
|
43
|
-
</td>
|
|
44
|
-
<td class="text-align-center">
|
|
45
|
-
<p>Свойство округления компонента.</p>
|
|
46
|
-
</td>
|
|
47
|
-
</tr>
|
|
48
|
-
<tr>
|
|
49
|
-
<td class="text-align-center">
|
|
50
|
-
<p>size</p>
|
|
51
|
-
</td>
|
|
52
|
-
<td class="text-align-center">
|
|
53
|
-
<code>'24' | '28' | '32' | '44' | '64' | '128' | '200'</code>
|
|
54
|
-
</td>
|
|
55
|
-
<td class="text-align-center">
|
|
56
|
-
<p>Размер компонента</p>
|
|
57
|
-
</td>
|
|
58
|
-
</tr>
|
|
59
|
-
<tr>
|
|
60
|
-
<td class="text-align-center">
|
|
61
|
-
<p>photo</p>
|
|
62
|
-
</td>
|
|
63
|
-
<td class="text-align-center">
|
|
64
|
-
<code>'string | ArrayBuffer'</code>
|
|
65
|
-
</td>
|
|
66
|
-
<td class="text-align-center">
|
|
67
|
-
<p>Изображение для фона компонента</p>
|
|
68
|
-
</td>
|
|
69
|
-
</tr>
|
|
70
|
-
<tr>
|
|
71
|
-
<td class="text-align-center">
|
|
72
|
-
<p>id</p>
|
|
73
|
-
</td>
|
|
74
|
-
<td class="text-align-center">
|
|
75
|
-
<code>'number'</code>
|
|
76
|
-
</td>
|
|
77
|
-
<td class="text-align-center">
|
|
78
|
-
<p>Свойство, которое отвечает за цвет фона компонента</p>
|
|
79
|
-
</td>
|
|
80
|
-
</tr>
|
|
81
|
-
<tr>
|
|
82
|
-
<td class="text-align-center">
|
|
83
|
-
<p>name</p>
|
|
84
|
-
</td>
|
|
85
|
-
<td class="text-align-center">
|
|
86
|
-
<code>'string'</code>
|
|
87
|
-
</td>
|
|
88
|
-
<td class="text-align-center">
|
|
89
|
-
<p>Отображаемый текст</p>
|
|
90
|
-
</td>
|
|
91
|
-
</tr>
|
|
92
|
-
</tbody>
|
|
93
|
-
</table>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
6
|
+
# Инпут
|
|
7
|
+
|
|
8
|
+
Input (поле ввода) — компонент, который позволяет указать значение с помощью клавиатуры.
|
|
9
|
+
|
|
10
|
+
В библиотеке существует два вида иконок: цветные и без заливки
|
|
11
|
+
|
|
12
|
+
### Как использовать
|
|
13
|
+
|
|
14
|
+
Иконки нужны для быстрого восприятия информации и помогают пользователю быстро и легко узнать о теме функции или категории, не используя текст.
|
|
15
|
+
|
|
16
|
+
Используются в различных компонентах:
|
|
17
|
+
|
|
18
|
+
- Кнопки
|
|
19
|
+
- Инпуты
|
|
20
|
+
- Селекты
|
|
21
|
+
- Аккордеонах и т.п.
|
|
22
|
+
|
|
23
|
+
### Свойства
|
|
24
|
+
|
|
25
|
+
| Свойство | Тип | Описание |
|
|
26
|
+
| -------- | -------------------------------------------------------- | -------------------------------------------------- |
|
|
27
|
+
| viewType | `'rounded'\|'circle'\|'brick'` | Свойство округления компонента |
|
|
28
|
+
| size | `'24' \| '28' \| '32' \| '44' \| '64' \| '128' \| '200'` | Размер компонента |
|
|
29
|
+
| photo | `string \| ArrayBuffer` | Изображение для фона компонента |
|
|
30
|
+
| id | `number` | Свойство, которое отвечает за цвет фона компонента |
|
|
31
|
+
| name | `string` | Отображаемый текст |
|
package/docs/listDocs.mdx
CHANGED
|
@@ -3,21 +3,14 @@ import ListStories from '../src/component/list/List.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={ListStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
</p>
|
|
18
|
-
<p>
|
|
19
|
-
Если нужно чтобы список элементов был интерактивным, элементам списка необходимо дополнительно добавить класс{' '}
|
|
20
|
-
<code>list-item_interactive</code>
|
|
21
|
-
</p>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
6
|
+
# Лист
|
|
7
|
+
|
|
8
|
+
Лист - список элементов идущих подряд.
|
|
9
|
+
|
|
10
|
+
Лист обычно используется в дропдаунах, селектах и в деревьях
|
|
11
|
+
|
|
12
|
+
### Как использовать
|
|
13
|
+
|
|
14
|
+
Сначала необходимо создать блок с классом `list` внутрь передать несколько элементов с классом `list-item`
|
|
15
|
+
|
|
16
|
+
Если нужно чтобы список элементов был интерактивным, элементам списка необходимо дополнительно добавить класс `list-item_interactive`
|
package/docs/messageDocs.mdx
CHANGED
|
@@ -3,80 +3,55 @@ import MessageStories from '../src/component/message/Message.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={MessageStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</div>
|
|
59
|
-
<h3>Виды тостов</h3>
|
|
60
|
-
<div>
|
|
61
|
-
<p>Есть несколько видов тостов. Они различаются своими State Lines.</p>
|
|
62
|
-
<ul>
|
|
63
|
-
<li>Default (Серый)</li>
|
|
64
|
-
<li>Success (Зеленый)</li>
|
|
65
|
-
<li>Error (Красный)</li>
|
|
66
|
-
<li>Warning (Жельтый)</li>
|
|
67
|
-
</ul>
|
|
68
|
-
</div>
|
|
69
|
-
<h3>Пример кода</h3>
|
|
70
|
-
<div>
|
|
71
|
-
<p>
|
|
72
|
-
<pre>
|
|
73
|
-
<code>
|
|
74
|
-
addMessage(){ this.messageService.add( new Message({
|
|
75
|
-
name:'example', title:'Ошибка',
|
|
76
|
-
text:'Перелогиньтесь', palette: 'red',
|
|
77
|
-
duration: 5000, }); ) }
|
|
78
|
-
</code>
|
|
79
|
-
</pre>
|
|
80
|
-
</p>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
6
|
+
# Тост
|
|
7
|
+
|
|
8
|
+
Toast (тост) — короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
|
|
9
|
+
|
|
10
|
+
### Функции
|
|
11
|
+
|
|
12
|
+
Используйте тост, если нет возможности сообщить обратную связь. В проектах выпрыгивает из правого нижнего угла.
|
|
13
|
+
|
|
14
|
+
Тост может показываться несколько секунд или бесконечно. Этот компонент так же может содержать кнопки, чтобы закрыть или же перейти к объекту, к которому применима обратная связь.
|
|
15
|
+
|
|
16
|
+
### Виды тостов
|
|
17
|
+
|
|
18
|
+
Есть несколько видов тостов. Они различаются своими State Lines:
|
|
19
|
+
|
|
20
|
+
- Default (Серый)
|
|
21
|
+
- Success (Зеленый)
|
|
22
|
+
- Error (Красный)
|
|
23
|
+
- Warning (Желтый)
|
|
24
|
+
|
|
25
|
+
### Как использовать
|
|
26
|
+
|
|
27
|
+
Для того чтобы воспользоваться данным компонентом, нужно внедрить в компонент сервис `messageService` и использовать метод `add`.
|
|
28
|
+
|
|
29
|
+
Этот метод ждет объект типа `Message`, который содержит следующие свойства:
|
|
30
|
+
|
|
31
|
+
- `name` - индификатор для тоста, который используется для его скрытия
|
|
32
|
+
- `title` - текст в заголовке тоста
|
|
33
|
+
- `text` - текст в теле тоста
|
|
34
|
+
- `duration` - длительность отобращения тоста в миллисекундах
|
|
35
|
+
- `infinite` - бесконечная длительность отображения тоста
|
|
36
|
+
- `className` - дополнительные классы для тоста
|
|
37
|
+
- `palette` - цвет левой границы
|
|
38
|
+
- `template` - возможность указать свой шаблон тела тоста
|
|
39
|
+
- `viewType` - округление тоста
|
|
40
|
+
|
|
41
|
+
Также есть возможность скрыть тост методом `clearMessages`
|
|
42
|
+
|
|
43
|
+
### Пример кода
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
addMessage() {
|
|
47
|
+
this.messageService.add(
|
|
48
|
+
new Message({
|
|
49
|
+
name:'example',
|
|
50
|
+
title:'Ошибка',
|
|
51
|
+
text:'Перелогиньтесь',
|
|
52
|
+
palette: 'red',
|
|
53
|
+
duration: 5000,
|
|
54
|
+
});
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
```
|
package/docs/modalDocs.mdx
CHANGED
package/docs/progressBarDocs.mdx
CHANGED
|
@@ -3,86 +3,29 @@ import ProgressBarStories from '../src/component/progress-bar/ProgressBar.storie
|
|
|
3
3
|
|
|
4
4
|
<Meta of={ProgressBarStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<li>Вы можете настроить шаг, с которым изменяется значение при перемещении бегунка слайдера.</li>
|
|
33
|
-
</ul>
|
|
34
|
-
</div>
|
|
35
|
-
<h3>Как использовать</h3>
|
|
36
|
-
<div class="column">
|
|
37
|
-
<p>
|
|
38
|
-
Для создания слайдера существует компонент <code>teta-progress-bar</code>. Для передачи данных в него нужно
|
|
39
|
-
использовать <code>ngModel</code>
|
|
40
|
-
</p>
|
|
41
|
-
<p>Также в слайдере есть возможность настройки "шага". Это происходит с помощью передачи в него свойства step</p>
|
|
42
|
-
</div>
|
|
43
|
-
<h3>Свойства</h3>
|
|
44
|
-
<table>
|
|
45
|
-
<thead>
|
|
46
|
-
<tr>
|
|
47
|
-
<th>Свойство</th>
|
|
48
|
-
<th>Tип</th>
|
|
49
|
-
<th>Описание</th>
|
|
50
|
-
</tr>
|
|
51
|
-
</thead>
|
|
52
|
-
<tbody>
|
|
53
|
-
<tr>
|
|
54
|
-
<td class="text-align-center">
|
|
55
|
-
<p>step</p>
|
|
56
|
-
</td>
|
|
57
|
-
<td class="text-align-center">
|
|
58
|
-
<code>number</code>
|
|
59
|
-
</td>
|
|
60
|
-
<td class="text-align-center">
|
|
61
|
-
<p>Выбор значения, на которое ползунок сдвигается при его перемещении</p>
|
|
62
|
-
</td>
|
|
63
|
-
</tr>
|
|
64
|
-
<tr>
|
|
65
|
-
<td class="text-align-center">
|
|
66
|
-
<p>min</p>
|
|
67
|
-
</td>
|
|
68
|
-
<td class="text-align-center">
|
|
69
|
-
<code>number</code>
|
|
70
|
-
</td>
|
|
71
|
-
<td class="text-align-center">
|
|
72
|
-
<p>Минимальное значение слайдера</p>
|
|
73
|
-
</td>
|
|
74
|
-
</tr>
|
|
75
|
-
<tr>
|
|
76
|
-
<td class="text-align-center">
|
|
77
|
-
<p>max</p>
|
|
78
|
-
</td>
|
|
79
|
-
<td class="text-align-center">
|
|
80
|
-
<code>number</code>
|
|
81
|
-
</td>
|
|
82
|
-
<td class="text-align-center">
|
|
83
|
-
<p>Максимальное значение слайдера</p>
|
|
84
|
-
</td>
|
|
85
|
-
</tr>
|
|
86
|
-
</tbody>
|
|
87
|
-
</table>
|
|
88
|
-
</div>
|
|
6
|
+
# Слайдер
|
|
7
|
+
|
|
8
|
+
Progress bars (Слайдер) — это элемент управления страницей, который позволяет пользователю выбирать значение из определенного диапазона. Он представляет собой горизонтальную полосу, которую можно перемещать влево или вправо, чтобы выбрать значение в заданном диапазоне. Слайдеры часто используются для настройки параметров, выбора числовых значений (например, громкости, времени или яркости) или фильтрации данных.
|
|
9
|
+
|
|
10
|
+
### Функции
|
|
11
|
+
|
|
12
|
+
Slider выполняет следующие основные функции:
|
|
13
|
+
|
|
14
|
+
- Выбор значения в заданном диапазоне: Слайдер позволяет пользователю выбирать значение из определенного числового диапазона.
|
|
15
|
+
- Отображение текущего значения: Слайдер отображает текущее выбранное значение, что позволяет пользователям видеть, какое значение они выбрали
|
|
16
|
+
- Изменение значения в реальном времени: Когда пользователь перемещает бегунок слайдера, значение обновляется в реальном времени, что делает процесс выбора более наглядным и удобным.
|
|
17
|
+
- Вы можете настроить шаг, с которым изменяется значение при перемещении бегунка слайдера.
|
|
18
|
+
|
|
19
|
+
### Как использовать
|
|
20
|
+
|
|
21
|
+
Для создания слайдера существует компонент `teta-progress-bar`. Для передачи данных в него нужно использовать `ngModel`
|
|
22
|
+
|
|
23
|
+
Также в слайдере есть возможность настройки "шага". Это происходит с помощью передачи в него свойства step
|
|
24
|
+
|
|
25
|
+
### Свойства
|
|
26
|
+
|
|
27
|
+
| Свойство | Тип | Описание |
|
|
28
|
+
| -------- | -------- | ------------------------------------------------------------------ |
|
|
29
|
+
| step | `number` | Выбор значения, на которое ползунок сдвигается при его перемещении |
|
|
30
|
+
| min | `number` | Минимальное значение слайдера |
|
|
31
|
+
| max | `number` | Максимальное значение слайдера |
|
package/docs/radioDocs.mdx
CHANGED
|
@@ -3,116 +3,39 @@ import RadioStories from '../src/component/radio/Radio.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={RadioStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<tr>
|
|
43
|
-
<th>Свойство</th>
|
|
44
|
-
<th>Tип</th>
|
|
45
|
-
<th>Описание</th>
|
|
46
|
-
</tr>
|
|
47
|
-
</thead>
|
|
48
|
-
<tbody>
|
|
49
|
-
<tr>
|
|
50
|
-
<td class="text-align-center">
|
|
51
|
-
<p>inline</p>
|
|
52
|
-
</td>
|
|
53
|
-
<td class="text-align-center">
|
|
54
|
-
<code>boolean</code>
|
|
55
|
-
</td>
|
|
56
|
-
<td class="text-align-center">
|
|
57
|
-
<p>Выстраивает радиокнопки в линию</p>
|
|
58
|
-
</td>
|
|
59
|
-
</tr>
|
|
60
|
-
<tr>
|
|
61
|
-
<td class="text-align-center">
|
|
62
|
-
<p>disabled</p>
|
|
63
|
-
</td>
|
|
64
|
-
<td class="text-align-center">
|
|
65
|
-
<code>boolean</code>
|
|
66
|
-
</td>
|
|
67
|
-
<td class="text-align-center">
|
|
68
|
-
<p>Отключает взаимодействие со всем листом радиокнопок</p>
|
|
69
|
-
</td>
|
|
70
|
-
</tr>
|
|
71
|
-
<tr>
|
|
72
|
-
<td class="text-align-center">
|
|
73
|
-
<p>value</p>
|
|
74
|
-
</td>
|
|
75
|
-
<td class="text-align-center">
|
|
76
|
-
<code>number</code>
|
|
77
|
-
</td>
|
|
78
|
-
<td class="text-align-center">
|
|
79
|
-
<p>Свойство для взаимодействия с листом радиокнопок (аналог ngModel)</p>
|
|
80
|
-
</td>
|
|
81
|
-
</tr>
|
|
82
|
-
</tbody>
|
|
83
|
-
</table>
|
|
84
|
-
<h4>teta-radio-button</h4>
|
|
85
|
-
<table>
|
|
86
|
-
<thead>
|
|
87
|
-
<tr>
|
|
88
|
-
<th>Свойство</th>
|
|
89
|
-
<th>Tип</th>
|
|
90
|
-
<th>Описание</th>
|
|
91
|
-
</tr>
|
|
92
|
-
</thead>
|
|
93
|
-
<tbody>
|
|
94
|
-
<tr>
|
|
95
|
-
<td class="text-align-center">
|
|
96
|
-
<p>value</p>
|
|
97
|
-
</td>
|
|
98
|
-
<td class="text-align-center">
|
|
99
|
-
<code>number</code>
|
|
100
|
-
</td>
|
|
101
|
-
<td class="text-align-center">
|
|
102
|
-
<p>Свойство, которое является id радиокнопки. Испорльзуется при выборе радиокнопки.</p>
|
|
103
|
-
</td>
|
|
104
|
-
</tr>
|
|
105
|
-
<tr>
|
|
106
|
-
<td class="text-align-center">
|
|
107
|
-
<p>disabled</p>
|
|
108
|
-
</td>
|
|
109
|
-
<td class="text-align-center">
|
|
110
|
-
<code>boolean</code>
|
|
111
|
-
</td>
|
|
112
|
-
<td class="text-align-center">
|
|
113
|
-
<p>Отключает взаимодействие с радиокнопкой</p>
|
|
114
|
-
</td>
|
|
115
|
-
</tr>
|
|
116
|
-
</tbody>
|
|
117
|
-
</table>
|
|
118
|
-
</div>
|
|
6
|
+
# Радиокнопка
|
|
7
|
+
|
|
8
|
+
Radiobutton (радиокнопка) — компонент, который используется для выбора одного значения из нескольких.
|
|
9
|
+
|
|
10
|
+
### Функции
|
|
11
|
+
|
|
12
|
+
Радиокнопку используют, когда вариантов выбора немного и стараются не задавать им два значения. Разрешено использовать не более трех радиокнопок.
|
|
13
|
+
|
|
14
|
+
В качестве навигации их использовать не стоит, так как для этого лучше подходят табы, навигационные панели и группу выбора.
|
|
15
|
+
|
|
16
|
+
При клике пользователь переводит радиокнопку из состояния False в Active.
|
|
17
|
+
|
|
18
|
+
### Как использовать
|
|
19
|
+
|
|
20
|
+
Создаем обертку для наших радиокнопок при помощи `teta-radio`. Радиокнопки, которые лежат внутри, будут объединены в лист радиокнопок, т.е. среди них может быть выделен только один.
|
|
21
|
+
|
|
22
|
+
Для создания радиокнопки нужно использовать `teta-radio-button`. Свойство `value` - своеобразный id для листа с радиокнопками.
|
|
23
|
+
|
|
24
|
+
Для взаимодействия с листом радиокнопок, нужно передавать в компонент `teta-radio` свойство `ngModel` со значением свойства `value` выбранного `teta-radio-button`.
|
|
25
|
+
|
|
26
|
+
### Свойства
|
|
27
|
+
|
|
28
|
+
#### teta-radio
|
|
29
|
+
|
|
30
|
+
| Свойство | Тип | Описание |
|
|
31
|
+
| -------- | --------- | ----------------------------------------------------------------- |
|
|
32
|
+
| inline | `boolean` | Выстраивает радиокнопки в линию |
|
|
33
|
+
| disabled | `boolean` | Отключает взаимодействие со всем листом радиокнопок |
|
|
34
|
+
| value | `number` | Свойство для взаимодействия с листом радиокнопок (аналог ngModel) |
|
|
35
|
+
|
|
36
|
+
#### teta-radio-button
|
|
37
|
+
|
|
38
|
+
| Свойство | Тип | Описание |
|
|
39
|
+
| -------- | --------- | ------------------------------------------------------------------------------- |
|
|
40
|
+
| value | `number` | Свойство, которое является id радиокнопки. Используется при выборе радиокнопки. |
|
|
41
|
+
| disabled | `boolean` | Отключает взаимодействие с радиокнопкой |
|