@tetacom/ng-components 1.6.6 → 1.6.8
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/component/filter/enum/filter-type.enum.d.ts +2 -1
- package/component/table/default/color-cell/color-cell.component.d.ts +20 -0
- package/component/table/public-api.d.ts +1 -0
- package/component/table/util/color-util.d.ts +3 -0
- package/component/table/util/public-api.d.ts +1 -0
- 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 +80 -9
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
package/docs/resizePanelDocs.mdx
CHANGED
|
@@ -3,96 +3,28 @@ import ResizeStories from '../src/component/resize-panel/Resize.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={ResizeStories} />
|
|
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
|
-
</ul>
|
|
32
|
-
</div>
|
|
33
|
-
<h3>Как использовать</h3>
|
|
34
|
-
<div class="column">
|
|
35
|
-
<p>
|
|
36
|
-
<code>teta-resize-panel</code> - компонент для создания панели изменения размера.
|
|
37
|
-
</p>
|
|
38
|
-
<p>
|
|
39
|
-
Панель может расрываться горизонтально и вертикально. За это отвечает свойство <code>direction</code>
|
|
40
|
-
</p>
|
|
41
|
-
</div>
|
|
42
|
-
<h3>Свойства</h3>
|
|
43
|
-
<table>
|
|
44
|
-
<thead>
|
|
45
|
-
<tr>
|
|
46
|
-
<th>Свойство</th>
|
|
47
|
-
<th>Tип</th>
|
|
48
|
-
<th>Описание</th>
|
|
49
|
-
</tr>
|
|
50
|
-
</thead>
|
|
51
|
-
<tbody>
|
|
52
|
-
<tr>
|
|
53
|
-
<td class="text-align-center">
|
|
54
|
-
<p>direction</p>
|
|
55
|
-
</td>
|
|
56
|
-
<td class="text-align-center">
|
|
57
|
-
<code>'vertical' | 'horizontal'</code>
|
|
58
|
-
</td>
|
|
59
|
-
<td class="text-align-center">
|
|
60
|
-
<p>Направления раскрытия панели</p>
|
|
61
|
-
</td>
|
|
62
|
-
</tr>
|
|
63
|
-
<tr>
|
|
64
|
-
<td class="text-align-center">
|
|
65
|
-
<p>minSize</p>
|
|
66
|
-
</td>
|
|
67
|
-
<td class="text-align-center">
|
|
68
|
-
<code>number</code>
|
|
69
|
-
</td>
|
|
70
|
-
<td class="text-align-center">
|
|
71
|
-
<p>Минимальный размер панели</p>
|
|
72
|
-
</td>
|
|
73
|
-
</tr>
|
|
74
|
-
<tr>
|
|
75
|
-
<td class="text-align-center">
|
|
76
|
-
<p>maxSize</p>
|
|
77
|
-
</td>
|
|
78
|
-
<td class="text-align-center">
|
|
79
|
-
<code>number</code>
|
|
80
|
-
</td>
|
|
81
|
-
<td class="text-align-center">
|
|
82
|
-
<p>Максимальный размер панели</p>
|
|
83
|
-
</td>
|
|
84
|
-
</tr>
|
|
85
|
-
<tr>
|
|
86
|
-
<td class="text-align-center">
|
|
87
|
-
<p>grabPosition</p>
|
|
88
|
-
</td>
|
|
89
|
-
<td class="text-align-center">
|
|
90
|
-
<code>'top' | 'bottom' | 'right' | 'left'</code>
|
|
91
|
-
</td>
|
|
92
|
-
<td class="text-align-center">
|
|
93
|
-
<p>Позиция иконки для изменения размера.</p>
|
|
94
|
-
</td>
|
|
95
|
-
</tr>
|
|
96
|
-
</tbody>
|
|
97
|
-
</table>
|
|
98
|
-
</div>
|
|
6
|
+
# Панель изменения размера
|
|
7
|
+
|
|
8
|
+
Resizing panel (Панель изменения размера) — это элемент интерфейса, который обычно используется для изменения размера окна, панели или другого элемента на экране. Это может быть полезным для пользователей, чтобы они могли настроить размер элементов под свои потребности или предпочтения.
|
|
9
|
+
|
|
10
|
+
### Функции
|
|
11
|
+
|
|
12
|
+
Функции resizing panel зависят от контекста, в котором она используется. Вот несколько общих функций, которые она может выполнять:
|
|
13
|
+
|
|
14
|
+
- **Изменение размера элементов**: Основная функция resizing panel - это позволить пользователю изменять размер элементов интерфейса. Это может быть окон, панелей, изображений, виджетов и т. д.
|
|
15
|
+
- **Размещение элементов**: Некоторые resizing panel также могут помогать пользователю выравнивать и располагать элементы на экране. Например, они могут предоставлять сетку или направляющие линии для более точного позиционирования.
|
|
16
|
+
|
|
17
|
+
### Как использовать
|
|
18
|
+
|
|
19
|
+
`teta-resize-panel` - компонент для создания панели изменения размера.
|
|
20
|
+
|
|
21
|
+
Панель может расрываться горизонтально и вертикально. За это отвечает свойство `direction`.
|
|
22
|
+
|
|
23
|
+
### Свойства
|
|
24
|
+
|
|
25
|
+
| Свойство | Тип | Описание |
|
|
26
|
+
| ------------ | ---------------------------------------- | --------------------------------------- |
|
|
27
|
+
| direction | `'vertical' \| 'horizontal'` | Направление раскрытия панели |
|
|
28
|
+
| minSize | `number` | Минимальный размер панели (в пикселях) |
|
|
29
|
+
| maxSize | `number` | Максимальный размер панели (в пикселях) |
|
|
30
|
+
| grabPosition | `'top' \| 'bottom' \| 'right' \| 'left'` | Позиция иконки для изменения размера |
|
package/docs/selectDocs.mdx
CHANGED
|
@@ -3,280 +3,75 @@ import SelectStories from '../src/component/select/Select.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={SelectStories} />
|
|
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
|
-
<p>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<p>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
</pre>
|
|
79
|
-
</p>
|
|
80
|
-
<h3>Свойства</h3>
|
|
81
|
-
<h4>teta-select</h4>
|
|
82
|
-
<table>
|
|
83
|
-
<thead>
|
|
84
|
-
<tr>
|
|
85
|
-
<th>Свойство</th>
|
|
86
|
-
<th>Tип</th>
|
|
87
|
-
<th>Описание</th>
|
|
88
|
-
</tr>
|
|
89
|
-
</thead>
|
|
90
|
-
<tbody>
|
|
91
|
-
<tr>
|
|
92
|
-
<td class="text-align-center">
|
|
93
|
-
<p>viewType</p>
|
|
94
|
-
</td>
|
|
95
|
-
<td class="text-align-center">
|
|
96
|
-
<code>'rounded'|'circle'|'brick'</code>
|
|
97
|
-
</td>
|
|
98
|
-
<td class="text-align-center">
|
|
99
|
-
<p>Свойство округления компонента.</p>
|
|
100
|
-
</td>
|
|
101
|
-
</tr>
|
|
102
|
-
<tr>
|
|
103
|
-
<td class="text-align-center">
|
|
104
|
-
<p>options</p>
|
|
105
|
-
</td>
|
|
106
|
-
<td class="text-align-center">
|
|
107
|
-
<code>IIdName[] </code>
|
|
108
|
-
</td>
|
|
109
|
-
<td class="text-align-center">
|
|
110
|
-
<p>Массив выбираемых элементов селекта</p>
|
|
111
|
-
</td>
|
|
112
|
-
</tr>
|
|
113
|
-
<tr>
|
|
114
|
-
<td class="text-align-center">
|
|
115
|
-
<p>textRef</p>
|
|
116
|
-
</td>
|
|
117
|
-
<td class="text-align-center">
|
|
118
|
-
<code>string</code>
|
|
119
|
-
</td>
|
|
120
|
-
<td class="text-align-center">
|
|
121
|
-
<p>Наименование свойства для использования в качестве текста для выбираемых элементов селекта</p>
|
|
122
|
-
</td>
|
|
123
|
-
</tr>
|
|
124
|
-
<tr>
|
|
125
|
-
<td class="text-align-center">
|
|
126
|
-
<p>valueRef</p>
|
|
127
|
-
</td>
|
|
128
|
-
<td class="text-align-center">
|
|
129
|
-
<code>string</code>
|
|
130
|
-
</td>
|
|
131
|
-
<td class="text-align-center">
|
|
132
|
-
<p>Наименование свойства для использования в качестве идентификатора для выбираемых элементов</p>
|
|
133
|
-
</td>
|
|
134
|
-
</tr>
|
|
135
|
-
<tr>
|
|
136
|
-
<td class="text-align-center">
|
|
137
|
-
<p>multiple</p>
|
|
138
|
-
</td>
|
|
139
|
-
<td class="text-align-center">
|
|
140
|
-
<code>boolean</code>
|
|
141
|
-
</td>
|
|
142
|
-
<td class="text-align-center">
|
|
143
|
-
<p>Возможность выбора нескольких элементов</p>
|
|
144
|
-
</td>
|
|
145
|
-
</tr>
|
|
146
|
-
<tr>
|
|
147
|
-
<td class="text-align-center">
|
|
148
|
-
<p>disabled</p>
|
|
149
|
-
</td>
|
|
150
|
-
<td class="text-align-center">
|
|
151
|
-
<code>boolean</code>
|
|
152
|
-
</td>
|
|
153
|
-
<td class="text-align-center">
|
|
154
|
-
<p>Отключает реакцию компонента на клик пользователя</p>
|
|
155
|
-
</td>
|
|
156
|
-
</tr>
|
|
157
|
-
<tr>
|
|
158
|
-
<td class="text-align-center">
|
|
159
|
-
<p>allowNull</p>
|
|
160
|
-
</td>
|
|
161
|
-
<td class="text-align-center">
|
|
162
|
-
<code>boolean</code>
|
|
163
|
-
</td>
|
|
164
|
-
<td class="text-align-center">
|
|
165
|
-
<p>Свойство, которое добавляет в селект пункт "не выбрано"</p>
|
|
166
|
-
</td>
|
|
167
|
-
</tr>
|
|
168
|
-
<tr>
|
|
169
|
-
<td class="text-align-center">
|
|
170
|
-
<p>searchRef</p>
|
|
171
|
-
</td>
|
|
172
|
-
<td class="text-align-center">
|
|
173
|
-
<code>string</code>
|
|
174
|
-
</td>
|
|
175
|
-
<td class="text-align-center">
|
|
176
|
-
<p>Добавляет поиск в select и ищет совпадения по указанному свойству.</p>
|
|
177
|
-
</td>
|
|
178
|
-
</tr>
|
|
179
|
-
<tr>
|
|
180
|
-
<td class="text-align-center">
|
|
181
|
-
<p>notFoundText</p>
|
|
182
|
-
</td>
|
|
183
|
-
<td class="text-align-center">
|
|
184
|
-
<code>string</code>
|
|
185
|
-
</td>
|
|
186
|
-
<td class="text-align-center">
|
|
187
|
-
<p>Меняет стандартный текст, который появляется при отсутствии соответствий в поиске</p>
|
|
188
|
-
</td>
|
|
189
|
-
</tr>
|
|
190
|
-
<tr>
|
|
191
|
-
<td class="text-align-center">
|
|
192
|
-
<p>placeholder</p>
|
|
193
|
-
</td>
|
|
194
|
-
<td class="text-align-center">
|
|
195
|
-
<code>string</code>
|
|
196
|
-
</td>
|
|
197
|
-
<td class="text-align-center">
|
|
198
|
-
<p>Указанный текст отображается при отсутствии выбранных элементов</p>
|
|
199
|
-
</td>
|
|
200
|
-
</tr>
|
|
201
|
-
<tr>
|
|
202
|
-
<td class="text-align-center">
|
|
203
|
-
<p>invalid</p>
|
|
204
|
-
</td>
|
|
205
|
-
<td class="text-align-center">
|
|
206
|
-
<code>boolean</code>
|
|
207
|
-
</td>
|
|
208
|
-
<td class="text-align-center">
|
|
209
|
-
<p>Добавляет состояние error для селекта</p>
|
|
210
|
-
</td>
|
|
211
|
-
</tr>
|
|
212
|
-
<tr>
|
|
213
|
-
<td class="text-align-center">
|
|
214
|
-
<p>verticalAlign</p>
|
|
215
|
-
</td>
|
|
216
|
-
<td class="text-align-center">
|
|
217
|
-
<code>VerticalAlign</code>
|
|
218
|
-
</td>
|
|
219
|
-
<td class="text-align-center">
|
|
220
|
-
<p>Позиция выпадающего списка по вертикали</p>
|
|
221
|
-
</td>
|
|
222
|
-
</tr>
|
|
223
|
-
<tr>
|
|
224
|
-
<td class="text-align-center">
|
|
225
|
-
<p>align</p>
|
|
226
|
-
</td>
|
|
227
|
-
<td class="text-align-center">
|
|
228
|
-
<code>align</code>
|
|
229
|
-
</td>
|
|
230
|
-
<td class="text-align-center">
|
|
231
|
-
<p>Позиция выпадающего списка по горизонтали</p>
|
|
232
|
-
</td>
|
|
233
|
-
</tr>
|
|
234
|
-
<tr>
|
|
235
|
-
<td class="text-align-center">
|
|
236
|
-
<p>icon</p>
|
|
237
|
-
</td>
|
|
238
|
-
<td class="text-align-center">
|
|
239
|
-
<code>name</code>
|
|
240
|
-
</td>
|
|
241
|
-
<td class="text-align-center">
|
|
242
|
-
<p>Принимает название иконки, которое будет отображаться в поле селекта, слева от текста в шапке селекта</p>
|
|
243
|
-
</td>
|
|
244
|
-
</tr>
|
|
245
|
-
<tr>
|
|
246
|
-
<td class="text-align-center">
|
|
247
|
-
<p>autoClose</p>
|
|
248
|
-
</td>
|
|
249
|
-
<td class="text-align-center">
|
|
250
|
-
<code>boolean</code>
|
|
251
|
-
</td>
|
|
252
|
-
<td class="text-align-center">
|
|
253
|
-
<p>Свойство, которое включает/отключает закрытие селекта автоматически.</p>
|
|
254
|
-
</td>
|
|
255
|
-
</tr>
|
|
256
|
-
<tr>
|
|
257
|
-
<td class="text-align-center">
|
|
258
|
-
<p>autoCloseIgnore</p>
|
|
259
|
-
</td>
|
|
260
|
-
<td class="text-align-center">
|
|
261
|
-
<code>AutoCloseIgnoreCase[]</code>
|
|
262
|
-
</td>
|
|
263
|
-
<td class="text-align-center">
|
|
264
|
-
<p>Свойство, которое игнорирует указанные причины закрытия селекта</p>
|
|
265
|
-
</td>
|
|
266
|
-
</tr>
|
|
267
|
-
<tr>
|
|
268
|
-
<td class="text-align-center">
|
|
269
|
-
<p>appendToBody</p>
|
|
270
|
-
</td>
|
|
271
|
-
<td class="text-align-center">
|
|
272
|
-
<code>boolean</code>
|
|
273
|
-
</td>
|
|
274
|
-
<td class="text-align-center">
|
|
275
|
-
<p>
|
|
276
|
-
Позволяет прикрепить содержимое селекта не к шапке, а к <code>body</code>
|
|
277
|
-
</p>
|
|
278
|
-
</td>
|
|
279
|
-
</tr>
|
|
280
|
-
</tbody>
|
|
281
|
-
</table>
|
|
282
|
-
</div>
|
|
6
|
+
# Поле выбора
|
|
7
|
+
|
|
8
|
+
Select (поле выбора) — компонент, который позволяет выбрать значение с помощью выпадающего списка или же написать
|
|
9
|
+
с помощью клавиатуры.
|
|
10
|
+
|
|
11
|
+
### Функции
|
|
12
|
+
|
|
13
|
+
Функции resizing panel зависят от контекста, в котором она используется. Вот несколько общих функций, которые она
|
|
14
|
+
может выполнять:
|
|
15
|
+
|
|
16
|
+
- Выбор одного варианта: Вы можете использовать его для создания меню с выбором одного элемента из списка. Например, это
|
|
17
|
+
может быть полезно при заполнении формы, где пользователю нужно выбрать свой пол, страну, штат или другой единственный
|
|
18
|
+
вариант.
|
|
19
|
+
- Множественный выбор: Вы также можете использовать селект со свойством <code>multiple</code>, чтобы позволить
|
|
20
|
+
пользователю выбирать несколько вариантов из списка. Это полезно, например, при выборе нескольких категорий или
|
|
21
|
+
характеристик товаров.
|
|
22
|
+
- Выбор даты и времени: Выпадающие списки также могут использоваться для выбора даты и времени. В зависимости от
|
|
23
|
+
конкретных потребностей, вы можете создать несколько выпадающих списков для выбора года, месяца, дня, часа и минут.
|
|
24
|
+
- Фильтрация и сортировка данных: В некоторых случаях селект может быть использован для фильтрации или сортировки данных
|
|
25
|
+
на веб-странице. Например, можно предоставить пользователю возможность выбрать категорию или сортировать список
|
|
26
|
+
товаров по цене или рейтингу.
|
|
27
|
+
- Навигация по веб-сайту: Выпадающие списки также могут использоваться в навигации по веб-сайту, чтобы позволить
|
|
28
|
+
пользователям выбирать разделы, страницы или фильтры
|
|
29
|
+
|
|
30
|
+
### Как использовать
|
|
31
|
+
|
|
32
|
+
За создание селекта отвечает компонент `teta-select`
|
|
33
|
+
|
|
34
|
+
У селекта есть свойство `options`, которое по дефолту ждет массив объектов со свойствами id,name. Эти
|
|
35
|
+
значения будут использоваться в качестве вариантов выбора в селекте.
|
|
36
|
+
|
|
37
|
+
Если необхдимо чтобы использовались другие свойства передаваемого объекта, то можно указать свойство
|
|
38
|
+
`valueRef` и `textRef` для выбора необходимых свойств.
|
|
39
|
+
|
|
40
|
+
Также в компоненте есть возможность сделать кастомное отображение выбираемых элементов и текста в шапке селекта.
|
|
41
|
+
Для этого нужно внутрь передать `ng-template` с директивами `tetaSelectValue` (текст в шапке)
|
|
42
|
+
и `tetaSelectOption` (элементы списка)
|
|
43
|
+
|
|
44
|
+
### Пример кода
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
<teta-select [(ngModel)]="selected" valueRef='number' textRef='pseudonym' [options]="[{number:1,pseudonym:'Дима'},{number:2,pseudonym:'Михаил'}]">
|
|
48
|
+
<ng-template tetaSelectValue let-value>
|
|
49
|
+
<p style="color:red">{{value?.pseudonym}}</p>
|
|
50
|
+
</ng-template>
|
|
51
|
+
<ng-template tetaSelectOption let-option>
|
|
52
|
+
<p style="color:blue">{{option?.pseudonym}}</p>
|
|
53
|
+
</ng-template>
|
|
54
|
+
</teta-select>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Свойства
|
|
58
|
+
|
|
59
|
+
| Свойство | Тип | Описание |
|
|
60
|
+
| ----------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------ |
|
|
61
|
+
| `viewType` | `'rounded' \| 'circle' \| 'brick'` | Свойство округления компонента. |
|
|
62
|
+
| `options` | `IIdName[]` | Массив выбираемых элементов селекта. |
|
|
63
|
+
| `textRef` | `string` | Наименование свойства для использования в качестве текста для выбираемых элементов селекта. |
|
|
64
|
+
| `valueRef` | `string` | Наименование свойства для использования в качестве идентификатора для выбираемых элементов. |
|
|
65
|
+
| `multiple` | `boolean` | Возможность выбора нескольких элементов. |
|
|
66
|
+
| `disabled` | `boolean` | Отключает реакцию компонента на клик пользователя. |
|
|
67
|
+
| `allowNull` | `boolean` | Свойство, которое добавляет в селект пункт "не выбрано". |
|
|
68
|
+
| `searchRef` | `string` | Добавляет поиск в select и ищет совпадения по указанному свойству. |
|
|
69
|
+
| `notFoundText` | `string` | Меняет стандартный текст, который появляется при отсутствии соответствий в поиске. |
|
|
70
|
+
| `placeholder` | `string` | Указанный текст отображается при отсутствии выбранных элементов. |
|
|
71
|
+
| `invalid` | `boolean` | Добавляет состояние error для селекта. |
|
|
72
|
+
| `verticalAlign` | `VerticalAlign` | Позиция выпадающего списка по вертикали. |
|
|
73
|
+
| `align` | `align` | Позиция выпадающего списка по горизонтали. |
|
|
74
|
+
| `icon` | `name` | Принимает название иконки, которое будет отображаться в поле селекта, слева от текста в шапке селекта. |
|
|
75
|
+
| `autoClose` | `boolean` | Свойство, которое включает/отключает закрытие селекта автоматически. |
|
|
76
|
+
| `autoCloseIgnore` | `AutoCloseIgnoreCase[]` | Свойство, которое игнорирует указанные причины закрытия селекта. |
|
|
77
|
+
| `appendToBody` | `boolean` | Позволяет прикрепить содержимое селекта не к шапке, а к `body`. |
|
package/docs/switchDocs.mdx
CHANGED
|
@@ -3,114 +3,45 @@ import SwitchStories from '../src/component/switch/Switch.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={SwitchStories} />
|
|
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
|
-
<tr>
|
|
49
|
-
<th>Свойство</th>
|
|
50
|
-
<th>Tип</th>
|
|
51
|
-
<th>Описание</th>
|
|
52
|
-
</tr>
|
|
53
|
-
</thead>
|
|
54
|
-
<tbody>
|
|
55
|
-
<tr>
|
|
56
|
-
<td class="text-align-center">
|
|
57
|
-
<p>viewType</p>
|
|
58
|
-
</td>
|
|
59
|
-
<td class="text-align-center">
|
|
60
|
-
<code>'rounded'|'circle'|'brick'</code>
|
|
61
|
-
</td>
|
|
62
|
-
<td class="text-align-center">
|
|
63
|
-
<p>Свойство округления компонента.</p>
|
|
64
|
-
</td>
|
|
65
|
-
</tr>
|
|
66
|
-
<tr>
|
|
67
|
-
<td class="text-align-center">
|
|
68
|
-
<p>disabled</p>
|
|
69
|
-
</td>
|
|
70
|
-
<td class="text-align-center">
|
|
71
|
-
<code>boolean</code>
|
|
72
|
-
</td>
|
|
73
|
-
<td class="text-align-center">
|
|
74
|
-
<p>Отключает реакцию компонента на клик пользователя</p>
|
|
75
|
-
</td>
|
|
76
|
-
</tr>
|
|
77
|
-
</tbody>
|
|
78
|
-
</table>
|
|
79
|
-
<h4>teta-switch-button</h4>
|
|
80
|
-
<table>
|
|
81
|
-
<thead>
|
|
82
|
-
<tr>
|
|
83
|
-
<th>Свойство</th>
|
|
84
|
-
<th>Tип</th>
|
|
85
|
-
<th>Описание</th>
|
|
86
|
-
</tr>
|
|
87
|
-
</thead>
|
|
88
|
-
<tbody>
|
|
89
|
-
<tr>
|
|
90
|
-
<td class="text-align-center">
|
|
91
|
-
<p>size</p>
|
|
92
|
-
</td>
|
|
93
|
-
<td class="text-align-center">
|
|
94
|
-
<code>'m' |'l'</code>
|
|
95
|
-
</td>
|
|
96
|
-
<td class="text-align-center">
|
|
97
|
-
<p>Размер кнопки</p>
|
|
98
|
-
</td>
|
|
99
|
-
</tr>
|
|
100
|
-
<tr>
|
|
101
|
-
<td class="text-align-center">
|
|
102
|
-
<p>palette</p>
|
|
103
|
-
</td>
|
|
104
|
-
<td class="text-align-center">
|
|
105
|
-
<code>string</code>
|
|
106
|
-
</td>
|
|
107
|
-
<td class="text-align-center">
|
|
108
|
-
<p>
|
|
109
|
-
Отвечает за цвет фона кнопки. Принимает в себя название палитры и указывает 50-й оттенок (Пример: вводим
|
|
110
|
-
yellow- цвет будет color-yellow-50)."
|
|
111
|
-
</p>
|
|
112
|
-
</td>
|
|
113
|
-
</tr>
|
|
114
|
-
</tbody>
|
|
115
|
-
</table>
|
|
116
|
-
</div>
|
|
6
|
+
# Switch
|
|
7
|
+
|
|
8
|
+
Switch — компонент, которые совмещает в себе несколько элементов навигации по странице. Занимает много места, но упрощает переходы по разделам.
|
|
9
|
+
|
|
10
|
+
### Правила применения
|
|
11
|
+
|
|
12
|
+
Основные правила применения этого элемента:
|
|
13
|
+
|
|
14
|
+
- Не использовать более восьми кнопок в группе выбора.
|
|
15
|
+
- Не использовать для навигации верхнего уровня в шапке сайта.
|
|
16
|
+
- Согласовывать текст на кнопках с заголовком (если есть).
|
|
17
|
+
|
|
18
|
+
### Как использовать
|
|
19
|
+
|
|
20
|
+
В данной библиотеке этот компонент называется `teta-switch`. Для управления состоянием используется `ngModel`.
|
|
21
|
+
|
|
22
|
+
Внутрь `teta-switch` необходимо передать специальные кнопки `teta-switch-button`, у которых есть свойство `value` являющееся идентификатором для их выбора
|
|
23
|
+
|
|
24
|
+
### Пример кода
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
<teta-switch [(ngModel)]="selected">
|
|
28
|
+
<teta-switch-button value="1">1</teta-switch-button>
|
|
29
|
+
<teta-switch-button value="2">2</teta-switch-button>
|
|
30
|
+
</teta-switch>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Свойства
|
|
34
|
+
|
|
35
|
+
#### teta-switch
|
|
36
|
+
|
|
37
|
+
| Свойство | Тип | Описание |
|
|
38
|
+
| -------- | ------------------------------ | ------------------------------------------------- |
|
|
39
|
+
| viewType | `'rounded'\|'circle'\|'brick'` | Свойство округления компонента. |
|
|
40
|
+
| disabled | `boolean` | Отключает реакцию компонента на клик пользователя |
|
|
41
|
+
|
|
42
|
+
#### teta-switch-button
|
|
43
|
+
|
|
44
|
+
| Свойство | Тип | Описание |
|
|
45
|
+
| -------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
46
|
+
| size | `'m' \| 'l'` | Размер кнопки |
|
|
47
|
+
| palette | `string` | Отвечает за цвет фона кнопки. Принимает в себя название палитры и указывает 50-й оттенок (Пример: вводим yellow- цвет будет color-yellow-50). |
|