@tetacom/ng-components 1.2.10 → 1.3.0
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/assets/icons.svg +476 -542
- package/component/button/button/button.component.d.ts +3 -5
- package/component/public-api.d.ts +1 -0
- package/component/stepper/public-api.d.ts +1 -0
- package/component/stepper/stepper/stepper.component.d.ts +10 -0
- package/docs/checkboxDocs.mdx +108 -106
- package/docs/iconDocs.mdx +92 -89
- package/docs/modalDocs.mdx +63 -63
- package/docs/stepperDocs.mdx +34 -0
- package/esm2022/common/enum/teta-size.enum.mjs +1 -1
- package/esm2022/component/button/button/button.component.mjs +19 -12
- package/esm2022/component/icon/icon/icon.component.mjs +20 -3
- package/esm2022/component/public-api.mjs +3 -1
- package/esm2022/component/stepper/public-api.mjs +2 -0
- package/esm2022/component/stepper/stepper/stepper.component.mjs +16 -0
- package/fesm2022/tetacom-ng-components.mjs +50 -13
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/style/checkbox.scss +6 -7
- package/style/icon.scss +28 -4
- package/style/modal.scss +4 -4
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
2
1
|
import { viewType } from '../../../common/model/view-type.model';
|
|
2
|
+
import { TetaSize } from "../../../common/enum/teta-size.enum";
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export type ButtonViewType = 'primary' | 'outline' | 'ghost';
|
|
5
|
-
export declare class ButtonComponent
|
|
5
|
+
export declare class ButtonComponent {
|
|
6
6
|
palette: string;
|
|
7
7
|
class: any;
|
|
8
8
|
view: ButtonViewType;
|
|
9
9
|
square: boolean;
|
|
10
10
|
viewType: viewType;
|
|
11
|
-
size:
|
|
11
|
+
size: TetaSize;
|
|
12
12
|
private get getClass();
|
|
13
|
-
constructor();
|
|
14
|
-
ngOnInit(): void;
|
|
15
13
|
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
|
|
16
14
|
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[teta-button], teta-button", never, { "palette": { "alias": "palette"; "required": false; }; "class": { "alias": "class"; "required": false; }; "view": { "alias": "view"; "required": false; }; "square": { "alias": "square"; "required": false; }; "viewType": { "alias": "viewType"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
17
15
|
}
|
|
@@ -30,6 +30,7 @@ export * from './theme-switch/public-api';
|
|
|
30
30
|
export * from './toggle/public-api';
|
|
31
31
|
export * from './toolbar/public-api';
|
|
32
32
|
export * from './tree/public-api';
|
|
33
|
+
export * from './stepper/public-api';
|
|
33
34
|
export * from './chart-3d/public-api';
|
|
34
35
|
export * from './divider/public-api';
|
|
35
36
|
export * from './resize-panel/public-api';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './stepper/stepper.component';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Signal } from '@angular/core';
|
|
2
|
+
import { IIdName } from '../../../common/contract/i-id-name';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class StepperComponent {
|
|
5
|
+
steps: import("@angular/core").InputSignal<IIdName<number>[]>;
|
|
6
|
+
currentStepId: import("@angular/core").InputSignal<number>;
|
|
7
|
+
currentIndex: Signal<number>;
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
|
|
9
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "app-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "currentStepId": { "alias": "currentStepId"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
10
|
+
}
|
package/docs/checkboxDocs.mdx
CHANGED
|
@@ -1,108 +1,110 @@
|
|
|
1
|
-
import {Meta} from
|
|
2
|
-
import checkboxStories from
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import checkboxStories from '../src/component/checkbox/Checkbox.stories';
|
|
3
3
|
|
|
4
|
-
<Meta of={checkboxStories}/>
|
|
4
|
+
<Meta of={checkboxStories} />
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
</
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
</
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
</
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
</
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
</
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
</
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
</
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
</
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
</
|
|
93
|
-
</
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
</
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
</
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
</
|
|
6
|
+
# Чекбоксы
|
|
7
|
+
|
|
8
|
+
Checkbox (чекбокс) — компонент, который позволяет пользователю выбрать опцию и может находится в состояниях «выбран»
|
|
9
|
+
(True) и «не выбран» (False).
|
|
10
|
+
|
|
11
|
+
Основной призыв к действию. Предназначены для выполнения какого-либо действия в системе.
|
|
12
|
+
|
|
13
|
+
### Как использовать
|
|
14
|
+
|
|
15
|
+
Чекбоксы используются когда на странице есть список опций, из которых пользователь может выбрать любое количество. В
|
|
16
|
+
основном, чекбоксы не зависят друг от друга.
|
|
17
|
+
|
|
18
|
+
Не путать с Toggle, так как если нужно переключить режим, выбрать тему или же сделать какое-то внушительное изменение
|
|
19
|
+
в интерфейсе, лучше использовать его.
|
|
20
|
+
|
|
21
|
+
### Состояние выбора чекбоксов
|
|
22
|
+
|
|
23
|
+
При клике пользователь переводит чекбокс из состояния False в Active. Undefined — неопределенное состояние и
|
|
24
|
+
используется только у родительских чекбоксов.
|
|
25
|
+
|
|
26
|
+
По дефолту включены состояния чекбокса `true` и `false`. Для включения состояния undefined нужно
|
|
27
|
+
передать свойства `binary` и `allowNull` со значением `true`
|
|
28
|
+
|
|
29
|
+
### Свойства
|
|
30
|
+
|
|
31
|
+
<table>
|
|
32
|
+
<thead>
|
|
33
|
+
<tr>
|
|
34
|
+
<th>Свойство</th>
|
|
35
|
+
<th>Tип</th>
|
|
36
|
+
<th>Описание</th>
|
|
37
|
+
</tr>
|
|
38
|
+
</thead>
|
|
39
|
+
<tbody>
|
|
40
|
+
<tr>
|
|
41
|
+
<td class="text-align-center">
|
|
42
|
+
<p>viewType</p>
|
|
43
|
+
</td>
|
|
44
|
+
<td class="text-align-center">
|
|
45
|
+
<code>'rounded'|'circle'|'brick'</code>
|
|
46
|
+
</td>
|
|
47
|
+
<td class="text-align-center">
|
|
48
|
+
<p>Свойство округления компонента.</p>
|
|
49
|
+
</td>
|
|
50
|
+
</tr>
|
|
51
|
+
<tr>
|
|
52
|
+
<td class="text-align-center">
|
|
53
|
+
<p>disabled</p>
|
|
54
|
+
</td>
|
|
55
|
+
<td class="text-align-center">
|
|
56
|
+
<code>boolean</code>
|
|
57
|
+
</td>
|
|
58
|
+
<td class="text-align-center">
|
|
59
|
+
<p>Отключает реакцию компонента на клик пользователя</p>
|
|
60
|
+
</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td class="text-align-center">
|
|
64
|
+
<p>noLabel</p>
|
|
65
|
+
</td>
|
|
66
|
+
<td class="text-align-center">
|
|
67
|
+
<code>boolean</code>
|
|
68
|
+
</td>
|
|
69
|
+
<td class="text-align-center">
|
|
70
|
+
<p>Свойство, которое отображает/скрывает блок текста в чекбоксе</p>
|
|
71
|
+
</td>
|
|
72
|
+
</tr>
|
|
73
|
+
<tr>
|
|
74
|
+
<td class="text-align-center">
|
|
75
|
+
<p>labelPosition</p>
|
|
76
|
+
</td>
|
|
77
|
+
<td class="text-align-center">
|
|
78
|
+
<code>'left' | 'right'</code>
|
|
79
|
+
</td>
|
|
80
|
+
<td class="text-align-center">
|
|
81
|
+
<p>Позиция блока текста относительно чекбокса</p>
|
|
82
|
+
</td>
|
|
83
|
+
</tr>
|
|
84
|
+
<tr>
|
|
85
|
+
<td class="text-align-center">
|
|
86
|
+
<p>allowNull</p>
|
|
87
|
+
</td>
|
|
88
|
+
<td class="text-align-center">
|
|
89
|
+
<code>boolean</code>
|
|
90
|
+
</td>
|
|
91
|
+
<td class="text-align-center">
|
|
92
|
+
<p>Свойство отвечающее за реагирование на null</p>
|
|
93
|
+
</td>
|
|
94
|
+
</tr>
|
|
95
|
+
<tr>
|
|
96
|
+
<td class="text-align-center">
|
|
97
|
+
<p>binary</p>
|
|
98
|
+
</td>
|
|
99
|
+
<td class="text-align-center">
|
|
100
|
+
<code>boolean</code>
|
|
101
|
+
</td>
|
|
102
|
+
<td class="text-align-center">
|
|
103
|
+
<p>
|
|
104
|
+
Свойство отвечающее за тип вводимых данных. Если <code>boolean</code>, то свойство должно быть
|
|
105
|
+
<code>true</code>
|
|
106
|
+
</p>
|
|
107
|
+
</td>
|
|
108
|
+
</tr>
|
|
109
|
+
</tbody>
|
|
110
|
+
</table>
|
package/docs/iconDocs.mdx
CHANGED
|
@@ -1,89 +1,92 @@
|
|
|
1
|
-
import {Meta} from
|
|
2
|
-
import IconStories from
|
|
3
|
-
|
|
4
|
-
<Meta of={IconStories}/>
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
</
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
</
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import IconStories from '../src/component/icon/Icon.stories';
|
|
3
|
+
|
|
4
|
+
<Meta of={IconStories} />
|
|
5
|
+
|
|
6
|
+
# Иконки
|
|
7
|
+
|
|
8
|
+
Иконка — элемент графического интерфейса, небольшая картинка, обозначающая приложение, файл, каталог и т. п
|
|
9
|
+
|
|
10
|
+
В библиотеке существует два вида иконок: цветные и без заливки
|
|
11
|
+
|
|
12
|
+
### Функции
|
|
13
|
+
|
|
14
|
+
Иконки нужны для быстрого восприятия информации и помогают пользователю быстро и легко узнать о теме функции или
|
|
15
|
+
категории, не используя текст.
|
|
16
|
+
|
|
17
|
+
Используются в различных компонентах:
|
|
18
|
+
|
|
19
|
+
- Кнопки
|
|
20
|
+
- Инпуты
|
|
21
|
+
- Селекты
|
|
22
|
+
- Аккордеонах и т.п.
|
|
23
|
+
|
|
24
|
+
### Как использовать
|
|
25
|
+
|
|
26
|
+
Для создание иконки используется `teta-icon` и аттрибут `name` для указания названия иконки.
|
|
27
|
+
|
|
28
|
+
Для того, чтобы инконки загрузились в проект, необходимо в родительском компоненте или в корневом элементе добавить
|
|
29
|
+
директиву `tetaIconSprite` с указанием пакета с нужными иконками.
|
|
30
|
+
|
|
31
|
+
На данный момент есть следующие пакеты с иконками:
|
|
32
|
+
|
|
33
|
+
- 'assets/icons.svg'- обычые иконки без заливки
|
|
34
|
+
- 'assets/color-icons.svg'- цветные иконки
|
|
35
|
+
- 'assets/file-icons.svg'- иконки с типами файлов
|
|
36
|
+
- 'assets/lithotype-icons.svg'- иконки литотипов
|
|
37
|
+
|
|
38
|
+
### Пример кода
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
<div [tetaIconSprite]="'assets/icons.svg'" class="column bg-global-bgcard font-body-3 padding-3">
|
|
42
|
+
<teta-icon name='edit'>
|
|
43
|
+
</teta-icon>
|
|
44
|
+
</div>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Свойства
|
|
48
|
+
|
|
49
|
+
<table>
|
|
50
|
+
<thead>
|
|
51
|
+
<tr>
|
|
52
|
+
<th>Свойство</th>
|
|
53
|
+
<th>Tип</th>
|
|
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>
|
package/docs/modalDocs.mdx
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
import {Meta} from
|
|
2
|
-
import ModalStories from
|
|
3
|
-
|
|
4
|
-
<Meta of={ModalStories}/>
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import ModalStories from '../src/component/modal/Modal.stories';
|
|
3
|
+
|
|
4
|
+
<Meta of={ModalStories} />
|
|
5
|
+
|
|
6
|
+
# Модальное окно
|
|
7
|
+
|
|
8
|
+
Modal Window или Pop Up (модальное окно) — это эмуляция диалогового окна браузера, появляющегося поверх страницы
|
|
9
|
+
в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.
|
|
10
|
+
|
|
11
|
+
### Функции
|
|
12
|
+
|
|
13
|
+
Используйте модальное окно для второстепенного содержимого страниц, которое требуется только в некоторых случаях,
|
|
14
|
+
или для того, чтобы сосредоточить внимание пользователя на совершаемом действии. Как правило, это настройки,
|
|
15
|
+
создание новых документов, заполнение небольших форм.
|
|
16
|
+
|
|
17
|
+
Не используйте модальное окно для больших форм. Большие формы — это формы которые не помещаются в два экрана монитора.
|
|
18
|
+
|
|
19
|
+
### Как использовать
|
|
20
|
+
|
|
21
|
+
Для того чтобы воспользоваться данным компонентом, нужно внедрить в компонент сервис `modalService` и использовать
|
|
22
|
+
метод `create`, передав компонент, который будет помещен в модалку и необходимые свойсва.
|
|
23
|
+
|
|
24
|
+
Этот метод вернет объект со свойствами: `close` - функция, которая принимает причину закрытия модалки и закрывает ее,
|
|
25
|
+
`onClose` - поток, который срабатывает при закрытии модалки и отдает объект с причиной закрытия модалки и данными,
|
|
26
|
+
которые мы вернули из модалки
|
|
27
|
+
|
|
28
|
+
Внутри компонента модалки мы привязываем события для закрытия модалки (допустим при нажатии на кнопку). Для этого
|
|
29
|
+
нужно внедрить сервис `CurrentModal` и вызвать метод `close` и передать в него объект со свойствами:
|
|
30
|
+
|
|
31
|
+
- `reason` - принимает номер причины закрытия модалки (ModalCloseReason)
|
|
32
|
+
- `data` - данные, которые нужно вывести из модалки
|
|
33
|
+
|
|
34
|
+
Также есть возможность скрыть все открытые модалки медотом `closeAll` из `modalService`
|
|
35
|
+
|
|
36
|
+
### Пример кода
|
|
37
|
+
|
|
38
|
+
#### Создание модалки
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
createModal(name:string,description:string){
|
|
42
|
+
const modal=this.modalService.create(Component,{name,description})
|
|
43
|
+
modal.onClose.pipe(
|
|
44
|
+
takeWhile(()=>this.alive),
|
|
45
|
+
filter((data)=>data.reason===ModalCloseReason.resolve),
|
|
46
|
+
tap((data)=>{console.log(data.data.description)})
|
|
47
|
+
).subscribe()
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
#### Закрытие модалки
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
closeModal(description:string){
|
|
56
|
+
this.currentModal.close(
|
|
57
|
+
{
|
|
58
|
+
reason:ModalCloseReason.resolve,
|
|
59
|
+
data:{description},
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
}
|
|
63
|
+
```
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import StepperStories from '../src/component/stepper/stepper.stories';
|
|
3
|
+
|
|
4
|
+
<Meta of={StepperStories} />
|
|
5
|
+
|
|
6
|
+
# Степпер
|
|
7
|
+
|
|
8
|
+
Компонент "Степпер" используется для отображения текущего шага в последовательности шагов. Он является простым индикатором, который визуально представляет, на каком этапе процесса находится пользователь.
|
|
9
|
+
|
|
10
|
+
### Основные свойства:
|
|
11
|
+
|
|
12
|
+
- Список шагов `steps` с типом `{ id: number; name: string }`
|
|
13
|
+
- ID текущего шага `currentStepId`
|
|
14
|
+
|
|
15
|
+
### Типичные сценарии использования:
|
|
16
|
+
|
|
17
|
+
- Заполнение форм, состоящих из нескольких шагов.
|
|
18
|
+
- Процессы регистрации или вступления.
|
|
19
|
+
- Последовательные инструкции или руководства.
|
|
20
|
+
|
|
21
|
+
Этот компонент максимально упрощен и не включает функциональности по переходу между шагами или управлению навигацией. Его основная цель — отображение текущего шага в процессе для улучшения пользовательского опыта.
|
|
22
|
+
|
|
23
|
+
### Пример использования
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
<app-stepper
|
|
27
|
+
[steps]="[
|
|
28
|
+
{ id: 1, name: 'Настройки' },
|
|
29
|
+
{ id: 2, name: 'Предпросмотр' },
|
|
30
|
+
{ id: 3, name: 'Загрузка' }
|
|
31
|
+
]"
|
|
32
|
+
[currentStepId]="2"
|
|
33
|
+
></app-stepper>
|
|
34
|
+
```
|