UNPKG

@vcl/vcl

Version:

The whole VCL in one package

55 lines (37 loc) • 1.47 kB
1
2
3
4
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
# [VCL](https://vcl.github.io/vcl/) process-nav Navigate within a process consisting of steps. ## Features The process navigation can be used for step-by-step user guidance. The supported steps are: disabled, current and completed. The user may be allowed to jump into arbitrary steps or can be restricted to only use certain steps by disabling others. The width of a step is automatically laid out according to the width of its label. The whole component containing all steps always occupies 100% width. The component has responsive features in that the step labels are cut with an ellipsis if there is not enough room to show it. For narrow viewports, a specialization of the [toolbar component](https://github.com/vcl/toolbar) component is used. ## Usage Basic. [normal example](/demo/example-normal.html) For narrow viewports, a sensible option is to show only the current item along with directional navigation controls. For this, the `toolbar` is used. [narrow example](/demo/example-narrow.html) ## Classes - `process-nav` ## Modifiers - `process-nav-arrows`: Items appear as arrows. ## Variables - `$process-nav-arrow-border-width` - `$process-nav-arrow-border-color` - `$process-nav-item-bg-color` - `$process-nav-item-color` - `$process-nav-item-hover-color` - `$process-nav-disabled-bg-color` - `$process-nav-disabled-color` - `$process-nav-selected-item-color` - `$process-nav-selected-item-bg-color` - `$process-nav-completed-item-bg-color`