@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/dropdownDocs.mdx
CHANGED
|
@@ -3,161 +3,45 @@ import DropdownStories from '../src/component/dropdown/Dropdown.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={DropdownStories} />
|
|
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
|
-
</p>
|
|
31
|
-
</div>
|
|
32
|
-
<h3>Примеры кода</h3>
|
|
33
|
-
<p>
|
|
34
|
-
<pre>
|
|
35
|
-
<code>
|
|
36
|
-
<teta-dropdown> <div tetaDropdownHead>Heading 1</div> <div
|
|
37
|
-
tetaDropdownContent> <div class="padding-v-3 padding-h-2">I am the content
|
|
38
|
-
1</div> </div> </teta-dropdown>
|
|
39
|
-
</code>
|
|
40
|
-
</pre>
|
|
41
|
-
</p>
|
|
42
|
-
<div class="column">
|
|
43
|
-
<h3>Свойства</h3>
|
|
44
|
-
<h4>teta-dropdown</h4>
|
|
45
|
-
<table>
|
|
46
|
-
<thead>
|
|
47
|
-
<tr>
|
|
48
|
-
<th>Свойство</th>
|
|
49
|
-
<th>Tип</th>
|
|
50
|
-
<th>Описание</th>
|
|
51
|
-
</tr>
|
|
52
|
-
</thead>
|
|
53
|
-
<tbody>
|
|
54
|
-
<tr>
|
|
55
|
-
<td class="text-align-center">
|
|
56
|
-
<p>align</p>
|
|
57
|
-
</td>
|
|
58
|
-
<td class="text-align-center">
|
|
59
|
-
<code>Align</code>
|
|
60
|
-
</td>
|
|
61
|
-
<td class="text-align-center">
|
|
62
|
-
<p>Позиционирование содержимого дропдауна по горизонтали</p>
|
|
63
|
-
</td>
|
|
64
|
-
</tr>
|
|
65
|
-
<tr>
|
|
66
|
-
<td class="text-align-center">
|
|
67
|
-
<p>verticalAlign</p>
|
|
68
|
-
</td>
|
|
69
|
-
<td class="text-align-center">
|
|
70
|
-
<code>VerticalAlign</code>
|
|
71
|
-
</td>
|
|
72
|
-
<td class="text-align-center">
|
|
73
|
-
<p>Позиционирование содержимого дропдауна по вертикали</p>
|
|
74
|
-
</td>
|
|
75
|
-
</tr>
|
|
76
|
-
<tr>
|
|
77
|
-
<td class="text-align-center">
|
|
78
|
-
<p>open</p>
|
|
79
|
-
</td>
|
|
80
|
-
<td class="text-align-center">
|
|
81
|
-
<code>boolean</code>
|
|
82
|
-
</td>
|
|
83
|
-
<td class="text-align-center">
|
|
84
|
-
<p>Свойство позволяющее управлять состоянием аккордеона</p>
|
|
85
|
-
</td>
|
|
86
|
-
</tr>
|
|
87
|
-
<tr>
|
|
88
|
-
<td class="text-align-center">
|
|
89
|
-
<p>openChange</p>
|
|
90
|
-
</td>
|
|
91
|
-
<td class="text-align-center">
|
|
92
|
-
<code>function</code>
|
|
93
|
-
</td>
|
|
94
|
-
<td class="text-align-center">
|
|
95
|
-
<p>
|
|
96
|
-
Указанная функция выполняется при изменении свойства <code>open</code>. Отдает текущее состояние
|
|
97
|
-
</p>
|
|
98
|
-
</td>
|
|
99
|
-
</tr>
|
|
100
|
-
<tr>
|
|
101
|
-
<td class="text-align-center">
|
|
102
|
-
<p>disabled</p>
|
|
103
|
-
</td>
|
|
104
|
-
<td class="text-align-center">
|
|
105
|
-
<code>boolean</code>
|
|
106
|
-
</td>
|
|
107
|
-
<td class="text-align-center">
|
|
108
|
-
<p>Свойство для отключения аккордеона</p>
|
|
109
|
-
</td>
|
|
110
|
-
</tr>
|
|
111
|
-
<tr>
|
|
112
|
-
<td class="text-align-center">
|
|
113
|
-
<p>appendToBody</p>
|
|
114
|
-
</td>
|
|
115
|
-
<td class="text-align-center">
|
|
116
|
-
<code>boolean</code>
|
|
117
|
-
</td>
|
|
118
|
-
<td class="text-align-center">
|
|
119
|
-
<p>
|
|
120
|
-
Позволяет прикрепить содержимое дропдауна не к элементу с tetaDropdownHead, а к <code>body</code>
|
|
121
|
-
</p>
|
|
122
|
-
</td>
|
|
123
|
-
</tr>
|
|
124
|
-
<tr>
|
|
125
|
-
<td class="text-align-center">
|
|
126
|
-
<p>autoClose</p>
|
|
127
|
-
</td>
|
|
128
|
-
<td class="text-align-center">
|
|
129
|
-
<code>boolean</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>autoCloseIgnore</p>
|
|
138
|
-
</td>
|
|
139
|
-
<td class="text-align-center">
|
|
140
|
-
<code>AutoCloseIgnoreCase[]</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>backdrop</p>
|
|
149
|
-
</td>
|
|
150
|
-
<td class="text-align-center">
|
|
151
|
-
<code>boolean</code>
|
|
152
|
-
</td>
|
|
153
|
-
<td class="text-align-center">
|
|
154
|
-
<p>
|
|
155
|
-
При открытии дропдауна создает поверх <code>div</code>, который не позволяет взаимодействовать с
|
|
156
|
-
элементами вне содержимого дропдауна, пока он открыт
|
|
157
|
-
</p>
|
|
158
|
-
</td>
|
|
159
|
-
</tr>
|
|
160
|
-
</tbody>
|
|
161
|
-
</table>
|
|
6
|
+
# Dropdown
|
|
7
|
+
|
|
8
|
+
Dropdown — элемент, позволяющий выбрать одно из нескольких заранее определённых значений параметра.
|
|
9
|
+
|
|
10
|
+
### Функции
|
|
11
|
+
|
|
12
|
+
Когда дропдаун неактивен, отображается только выбранное значение или их количество. При нажатии на него список раскрывается, отображая все возможные значения. После выбора список возможных значений исчезает.
|
|
13
|
+
|
|
14
|
+
### Как пользоваться компонентом
|
|
15
|
+
|
|
16
|
+
Для начала нужно создать `<teta-dropdown>`, и в него прокинуть элементы с директивой `tetaDropdownHead` и `tetaDropdownContent`.
|
|
17
|
+
|
|
18
|
+
Директива `tetaDropdownHead` отвечает за отображение дочерних элементов в шапке дропдауна.
|
|
19
|
+
|
|
20
|
+
Содержимое блока с директивой `tetaDropdownContent` используется как элементы выпадающего списка.
|
|
21
|
+
|
|
22
|
+
### Примеры кода
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
<teta-dropdown>
|
|
26
|
+
<div tetaDropdownHead>Heading 1</div>
|
|
27
|
+
<div tetaDropdownContent>
|
|
28
|
+
<div class="padding-v-3 padding-h-2">I am the content 1</div>
|
|
162
29
|
</div>
|
|
163
|
-
</
|
|
30
|
+
</teta-dropdown>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Свойства
|
|
34
|
+
|
|
35
|
+
#### teta-dropdown
|
|
36
|
+
|
|
37
|
+
| Свойство | Тип | Описание |
|
|
38
|
+
| --------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
39
|
+
| align | `Align` | Позиционирование содержимого дропдауна по горизонтали |
|
|
40
|
+
| verticalAlign | `VerticalAlign` | Позиционирование содержимого дропдауна по вертикали |
|
|
41
|
+
| open | `boolean` | Свойство позволяющее управлять состоянием аккордеона |
|
|
42
|
+
| openChange | `function` | Указанная функция выполняется при изменении свойства `open`. Отдает текущее состояние |
|
|
43
|
+
| disabled | `boolean` | Свойство для отключения аккордеона |
|
|
44
|
+
| appendToBody | `boolean` | Позволяет прикрепить содержимое дропдауна не к элементу с tetaDropdownHead, а к `body` |
|
|
45
|
+
| autoClose | `boolean` | Свойство, которое включает/отключает закрытие дропдауна автоматически |
|
|
46
|
+
| autoCloseIgnore | `AutoCloseIgnoreCase[]` | Свойство, которое игнорирует указанные причины закрытия дропдауна |
|
|
47
|
+
| backdrop | `boolean` | При открытии дропдауна создает поверх `div`, который не позволяет взаимодействовать с элементами вне содержимого дропдауна, пока он открыт |
|
package/docs/expandCardlDocs.mdx
CHANGED
|
@@ -3,58 +3,21 @@ import ExpandStories from '../src/component/expand-card/expand.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={ExpandStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<table>
|
|
25
|
-
<thead>
|
|
26
|
-
<tr>
|
|
27
|
-
<th>Свойство</th>
|
|
28
|
-
<th>Tип</th>
|
|
29
|
-
<th>Описание</th>
|
|
30
|
-
</tr>
|
|
31
|
-
</thead>
|
|
32
|
-
<tbody>
|
|
33
|
-
<tr>
|
|
34
|
-
<td class="text-align-center">
|
|
35
|
-
<p>open</p>
|
|
36
|
-
</td>
|
|
37
|
-
<td class="text-align-center">
|
|
38
|
-
<code>boolean</code>
|
|
39
|
-
</td>
|
|
40
|
-
<td class="text-align-center">
|
|
41
|
-
<p>Свойство позволяющее управлять его состоянием</p>
|
|
42
|
-
</td>
|
|
43
|
-
</tr>
|
|
44
|
-
<tr>
|
|
45
|
-
<td class="text-align-center">
|
|
46
|
-
<p>openChange</p>
|
|
47
|
-
</td>
|
|
48
|
-
<td class="text-align-center">
|
|
49
|
-
<code>function</code>
|
|
50
|
-
</td>
|
|
51
|
-
<td class="text-align-center">
|
|
52
|
-
<p>
|
|
53
|
-
Указанная функция выполняется при изменении свойства <code>open</code>.Отдает текущее состояние.
|
|
54
|
-
</p>
|
|
55
|
-
</td>
|
|
56
|
-
</tr>
|
|
57
|
-
</tbody>
|
|
58
|
-
</table>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
6
|
+
# ExpandCard
|
|
7
|
+
|
|
8
|
+
ExpandCard обычно используется для создания блока с настройками для чего-либо.
|
|
9
|
+
|
|
10
|
+
### Функции
|
|
11
|
+
|
|
12
|
+
ExpandCard позволяет скрывать содержимое при клике на соответствующую кнопку.
|
|
13
|
+
|
|
14
|
+
### Как пользоваться компонентом
|
|
15
|
+
|
|
16
|
+
Нужно создать `<teta-expand-item>`, внутрь передаем блоки с `ngProjectAs` (текст в шапке) и его содержимое.
|
|
17
|
+
|
|
18
|
+
### Свойства
|
|
19
|
+
|
|
20
|
+
| Свойство | Тип | Описание |
|
|
21
|
+
| ---------- | ---------- | -------------------------------------------------------------------------------------- |
|
|
22
|
+
| open | `boolean` | Свойство позволяющее управлять его состоянием |
|
|
23
|
+
| openChange | `function` | Указанная функция выполняется при изменении свойства `open`. Отдает текущее состояние. |
|
package/docs/expandPanelDocs.mdx
CHANGED
|
@@ -3,115 +3,43 @@ import ExpandPanelStories from '../src/component/expand-panel/ExpandPanel.storie
|
|
|
3
3
|
|
|
4
4
|
<Meta of={ExpandPanelStories} />
|
|
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
|
-
<h3>Свойства</h3>
|
|
47
|
-
<h4>teta-expand-panel</h4>
|
|
48
|
-
<table>
|
|
49
|
-
<thead>
|
|
50
|
-
<tr>
|
|
51
|
-
<th>Свойство</th>
|
|
52
|
-
<th>Tип</th>
|
|
53
|
-
<th>Описание</th>
|
|
54
|
-
</tr>
|
|
55
|
-
</thead>
|
|
56
|
-
<tbody>
|
|
57
|
-
<tr>
|
|
58
|
-
<td class="text-align-center">
|
|
59
|
-
<p>placeholder</p>
|
|
60
|
-
</td>
|
|
61
|
-
<td class="text-align-center">
|
|
62
|
-
<code>string</code>
|
|
63
|
-
</td>
|
|
64
|
-
<td class="text-align-center">
|
|
65
|
-
<p>Текст панели в закрытом состоянии</p>
|
|
66
|
-
</td>
|
|
67
|
-
</tr>
|
|
68
|
-
<tr>
|
|
69
|
-
<td class="text-align-center">
|
|
70
|
-
<p>open</p>
|
|
71
|
-
</td>
|
|
72
|
-
<td class="text-align-center">
|
|
73
|
-
<code>boolean</code>
|
|
74
|
-
</td>
|
|
75
|
-
<td class="text-align-center">
|
|
76
|
-
<p>Свойство позволяющее управлять состоянием панели</p>
|
|
77
|
-
</td>
|
|
78
|
-
</tr>
|
|
79
|
-
<tr>
|
|
80
|
-
<td class="text-align-center">
|
|
81
|
-
<p>openChange</p>
|
|
82
|
-
</td>
|
|
83
|
-
<td class="text-align-center">
|
|
84
|
-
<code>function</code>
|
|
85
|
-
</td>
|
|
86
|
-
<td class="text-align-center">
|
|
87
|
-
<p>
|
|
88
|
-
Указанная функция выполняется при изменении свойства <code>open</code>.Отдает текущее состояние.
|
|
89
|
-
</p>
|
|
90
|
-
</td>
|
|
91
|
-
</tr>
|
|
92
|
-
<tr>
|
|
93
|
-
<td class="text-align-center">
|
|
94
|
-
<p>direction</p>
|
|
95
|
-
</td>
|
|
96
|
-
<td class="text-align-center">
|
|
97
|
-
<code>'left'|'right'</code>
|
|
98
|
-
</td>
|
|
99
|
-
<td class="text-align-center">
|
|
100
|
-
<p>Свойство для выбора направления скрытия панели</p>
|
|
101
|
-
</td>
|
|
102
|
-
</tr>
|
|
103
|
-
<tr>
|
|
104
|
-
<td class="text-align-center">
|
|
105
|
-
<p>cookieName</p>
|
|
106
|
-
</td>
|
|
107
|
-
<td class="text-align-center">
|
|
108
|
-
<code>string</code>
|
|
109
|
-
</td>
|
|
110
|
-
<td class="text-align-center">
|
|
111
|
-
<p>При вводе этого свойства создается кука с указанным именем и с состоянием панели.</p>
|
|
112
|
-
</td>
|
|
113
|
-
</tr>
|
|
114
|
-
</tbody>
|
|
115
|
-
</table>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
6
|
+
# ExpandPanel
|
|
7
|
+
|
|
8
|
+
ExpandPanel обычно используется для фильтров, отображения блоков, которые нужно скрывать, а также при большом количестве элементов в одной строчке.
|
|
9
|
+
|
|
10
|
+
### Функции
|
|
11
|
+
|
|
12
|
+
ExpandPanel позволяет скрывать содержимое при клике на соответствующую кнопку.
|
|
13
|
+
|
|
14
|
+
При скрытии содержимого, название меняет написание на горизонтальное.
|
|
15
|
+
|
|
16
|
+
### Как пользоваться компонентом
|
|
17
|
+
|
|
18
|
+
Создаем `<teta-expand-panel>`, внутрь передаем блоки с директивами `tetaExpandPanelHead` и `tetaExpandPanelContent`.
|
|
19
|
+
|
|
20
|
+
Директива `tetaExpandPanelHead` отвечает за отображение дочерних элементов в шапке элемента.
|
|
21
|
+
|
|
22
|
+
Блок с директивой `tetaExpandPanelContent` используется как содержимое раскрывающейся панели.
|
|
23
|
+
|
|
24
|
+
### Примеры кода
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
<div [tetaIconSprite]="'assets/icons.svg'" class="column bg-global-bgcard font-body-3 padding-3" style="width:fit-content;height: 500px"> <teta-expand-panel placeholder='Фильтры'>
|
|
28
|
+
<ng-template tetaExpandPanelHead>Фильтры</ng-template>
|
|
29
|
+
<ng-template tetaExpandPanelContent>
|
|
30
|
+
<div class="padding-v-3 padding-h-2">Фильтр1</div>
|
|
31
|
+
</ng-template>
|
|
32
|
+
</teta-expand-panel>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Свойства
|
|
36
|
+
|
|
37
|
+
#### teta-expand-panel
|
|
38
|
+
|
|
39
|
+
| Свойство | Тип | Описание |
|
|
40
|
+
| ----------- | ----------------- | -------------------------------------------------------------------------------------- |
|
|
41
|
+
| placeholder | `string` | Текст панели в закрытом состоянии |
|
|
42
|
+
| open | `boolean` | Свойство позволяющее управлять состоянием панели |
|
|
43
|
+
| openChange | `function` | Указанная функция выполняется при изменении свойства `open`. Отдает текущее состояние. |
|
|
44
|
+
| direction | `'left'\|'right'` | Свойство для выбора направления скрытия панели |
|
|
45
|
+
| cookieName | `string` | При вводе этого свойства создается кука с указанным именем и с состоянием панели. |
|
package/docs/fileAreaDocs.mdx
CHANGED
|
@@ -3,77 +3,19 @@ import FileStories from '../src/component/file-upload/File.stories';
|
|
|
3
3
|
|
|
4
4
|
<Meta of={FileStories} />
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<h3>Свойства</h3>
|
|
23
|
-
<table>
|
|
24
|
-
<thead>
|
|
25
|
-
<tr>
|
|
26
|
-
<th>Свойство</th>
|
|
27
|
-
<th>Tип</th>
|
|
28
|
-
<th>Описание</th>
|
|
29
|
-
</tr>
|
|
30
|
-
</thead>
|
|
31
|
-
<tbody>
|
|
32
|
-
<tr>
|
|
33
|
-
<td class="text-align-center">
|
|
34
|
-
<p>upload</p>
|
|
35
|
-
</td>
|
|
36
|
-
<td class="text-align-center">
|
|
37
|
-
<code>function</code>
|
|
38
|
-
</td>
|
|
39
|
-
<td class="text-align-center">
|
|
40
|
-
<p>Функция, которая используется при загрузке файлов и передает в нее загруженные файлы</p>
|
|
41
|
-
</td>
|
|
42
|
-
</tr>
|
|
43
|
-
<tr>
|
|
44
|
-
<td class="text-align-center">
|
|
45
|
-
<p>accept</p>
|
|
46
|
-
</td>
|
|
47
|
-
<td class="text-align-center">
|
|
48
|
-
<code>string[]</code>
|
|
49
|
-
</td>
|
|
50
|
-
<td class="text-align-center">
|
|
51
|
-
<p>Принимаемые типы файлов</p>
|
|
52
|
-
</td>
|
|
53
|
-
</tr>
|
|
54
|
-
<tr>
|
|
55
|
-
<td class="text-align-center">
|
|
56
|
-
<p>multiple</p>
|
|
57
|
-
</td>
|
|
58
|
-
<td class="text-align-center">
|
|
59
|
-
<code>boolean</code>
|
|
60
|
-
</td>
|
|
61
|
-
<td class="text-align-center">
|
|
62
|
-
<p>Возможность выбирать несколько файлов</p>
|
|
63
|
-
</td>
|
|
64
|
-
</tr>
|
|
65
|
-
<tr>
|
|
66
|
-
<td class="text-align-center">
|
|
67
|
-
<p>disabled</p>
|
|
68
|
-
</td>
|
|
69
|
-
<td class="text-align-center">
|
|
70
|
-
<code>boolean</code>
|
|
71
|
-
</td>
|
|
72
|
-
<td class="text-align-center">
|
|
73
|
-
<p>Отключает прием файлов</p>
|
|
74
|
-
</td>
|
|
75
|
-
</tr>
|
|
76
|
-
</tbody>
|
|
77
|
-
</table>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
6
|
+
# FileArea
|
|
7
|
+
|
|
8
|
+
FileArea - область для перетаскивания файлов для загрузки (Drag and Drop). Также можно кликнуть на специальную кнопку, чтобы указать путь к файлу и загрузить его.
|
|
9
|
+
|
|
10
|
+
### Как пользоваться компонентом
|
|
11
|
+
|
|
12
|
+
Создаем `<teta-file-upload-area>`, внутрь передаем элементы, которые будут отображаться в нем.
|
|
13
|
+
|
|
14
|
+
### Свойства
|
|
15
|
+
|
|
16
|
+
| Свойство | Тип | Описание |
|
|
17
|
+
| -------- | ---------- | ------------------------------------------------------------------------------------ |
|
|
18
|
+
| upload | `function` | Функция, которая используется при загрузке файлов и передает в нее загруженные файлы |
|
|
19
|
+
| accept | `string[]` | Принимаемые типы файлов |
|
|
20
|
+
| multiple | `boolean` | Возможность выбирать несколько файлов |
|
|
21
|
+
| disabled | `boolean` | Отключает прием файлов |
|
package/docs/iconDocs.mdx
CHANGED
|
@@ -19,13 +19,13 @@ import IconStories from '../src/component/icon/Icon.stories';
|
|
|
19
19
|
- Кнопки
|
|
20
20
|
- Инпуты
|
|
21
21
|
- Селекты
|
|
22
|
-
-
|
|
22
|
+
- Аккордеоны и т.п.
|
|
23
23
|
|
|
24
24
|
### Как использовать
|
|
25
25
|
|
|
26
|
-
Для
|
|
26
|
+
Для создания иконки используется `teta-icon` и аттрибут `name` для указания названия иконки.
|
|
27
27
|
|
|
28
|
-
Для
|
|
28
|
+
Для того чтобы инконки загрузились в проект, необходимо в родительском компоненте или в корневом элементе добавить
|
|
29
29
|
директиву `tetaIconSprite` с указанием пакета с нужными иконками.
|
|
30
30
|
|
|
31
31
|
На данный момент есть следующие пакеты с иконками:
|
|
@@ -46,47 +46,8 @@ import IconStories from '../src/component/icon/Icon.stories';
|
|
|
46
46
|
|
|
47
47
|
### Свойства
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<th>Описание</th>
|
|
55
|
-
</tr>
|
|
56
|
-
</thead>
|
|
57
|
-
<tbody>
|
|
58
|
-
<tr>
|
|
59
|
-
<td class="text-align-center">
|
|
60
|
-
<p>name</p>
|
|
61
|
-
</td>
|
|
62
|
-
<td class="text-align-center">
|
|
63
|
-
<code>string</code>
|
|
64
|
-
</td>
|
|
65
|
-
<td class="text-align-center">
|
|
66
|
-
<p>Название иконки</p>
|
|
67
|
-
</td>
|
|
68
|
-
</tr>
|
|
69
|
-
<tr>
|
|
70
|
-
<td class="text-align-center">
|
|
71
|
-
<p>size</p>
|
|
72
|
-
</td>
|
|
73
|
-
<td class="text-align-center">
|
|
74
|
-
<code>TetaSize</code>
|
|
75
|
-
</td>
|
|
76
|
-
<td class="text-align-center">
|
|
77
|
-
<p>Размер иконки</p>
|
|
78
|
-
</td>
|
|
79
|
-
</tr>
|
|
80
|
-
<tr>
|
|
81
|
-
<td class="text-align-center">
|
|
82
|
-
<p>palette</p>
|
|
83
|
-
</td>
|
|
84
|
-
<td class="text-align-center">
|
|
85
|
-
<code>string</code>
|
|
86
|
-
</td>
|
|
87
|
-
<td class="text-align-center">
|
|
88
|
-
<p>Принимает название палитры и окращивает в 50-й оттенок этой палитры</p>
|
|
89
|
-
</td>
|
|
90
|
-
</tr>
|
|
91
|
-
</tbody>
|
|
92
|
-
</table>
|
|
49
|
+
| Свойство | Тип | Описание |
|
|
50
|
+
| -------- | ---------- | ------------------------------------------------------------------- |
|
|
51
|
+
| name | `string` | Название иконки |
|
|
52
|
+
| size | `TetaSize` | Размер иконки |
|
|
53
|
+
| palette | `string` | Принимает название палитры и окрашивает в 50-й оттенок этой палитры |
|