UNPKG

@empathyco/x-components

Version:

Empathy X Components

github.com/empathyco/x/tree/main/packages/x-components

empathyco/x

166 lines (149 loc) • 12.8 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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
--- title: MultiColumnMaxWidthLayout --- --- title: MultiColumnMaxWidthLayout --- # MultiColumnMaxWidthLayout Component for use as Layout to be filled with the rest of the Components. ## Props | Name | Description | Type | Default | | --------------------------- | --------------------------------------------------------------------------- | -------------------------- | ------------------------------- | | <code>asideAnimation</code> | The animation used for the Main Aside. | <code>AnimationProp</code> | <code>() => AnimateWidth</code> | | <code>devMode</code> | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code> | <code></code> | ## Slots | Name | Description | Bindings<br />(name - type - description) | | -------------------------- | --------------------------------------------------------------------------- | ----------------------------------------- | | <code>header-start</code> | Slot that can be used to insert content into the left part of the header. | None | | <code>header-middle</code> | Slot that can be used to insert content into the center part of the header. | None | | <code>header-end</code> | Slot that can be used to insert content into the right part of the header. | None | | <code>sub-header</code> | Slot that can be used to insert content into below the header. | None | | <code>toolbar-aside</code> | | None | | <code>toolbar-body</code> | Slot that can be used to insert content above the body. | None | | <code>main-aside</code> | Slot that can be used to insert content into the left side bar. | None | | <code>main-body</code> | Slot that can be used to insert the body content. | None | | <code>scroll-to-top</code> | | None | ## Layout This component has the following layout with fixed headers and collapsible fixed asides: | header-start | header-middle | header-end | | :-----------: | :-----------: | :-----------: | | sub-header | | | | toolbar-aside | toolbar | | | main-aside | main | | | | | scroll-to-top | ## Design Tokens The component has also the following `Design Tokens` to configure it: | token | default value | | :-------------------------------------------------: | :-----------: | | --x-size-column-gap-layout-columns | 20px | | --x-size-padding-top-layout-columns-header | 0px | | --x-size-padding-bottom-layout-columns-header | 0px | | --x-size-margin-top-layout-columns-header | 0px | | --x-size-margin-bottom-layout-columns-header | 0px | | --x-color-background-layout-columns-header | transparent | | --x-color-border-layout-columns-header | transparent | | --x-size-border-width-layout-columns-header | 0px | | --x-flow-layout-columns-header-start | row nowrap | | --x-size-justify-layout-columns-header-start | flex-start | | --x-size-align-layout-columns-header-start | flex-start | | --x-flow-layout-columns-header-middle | row nowrap | | --x-size-justify-layout-columns-header-middle | center | | --x-size-align-layout-columns-header-middle | flex-start | | --x-flow-layout-columns-header-end | row nowrap | | --x-size-justify-layout-columns-header-end | flex-end | | --x-size-align-layout-columns-header-end | flex-end | | --x-size-padding-top-layout-columns-sub-header | 0px | | --x-size-padding-bottom-layout-columns-sub-header | 0px | | --x-size-margin-top-layout-columns-sub-header | 0px | | --x-size-margin-bottom-layout-columns-sub-header | 0px | | --x-color-background-layout-columns-sub-header | transparent | | --x-color-border-layout-columns-sub-header | transparent | | --x-size-border-width-layout-columns-sub-header | 0px | | --x-flow-layout-columns-sub-header | row nowrap | | --x-size-justify-layout-columns-sub-header | flex-start | | --x-size-align-layout-columns-sub-header | flex-start | | --x-size-padding-top-layout-columns-toolbar | 0px | | --x-size-padding-bottom-layout-columns-toolbar | 0px | | --x-size-margin-top-layout-columns-toolbar | 0px | | --x-size-margin-bottom-layout-columns-toolbar | 0px | | --x-color-background-layout-columns-toolbar | transparent | | --x-color-border-layout-columns-sub-toolbar | transparent | | --x-size-border-width-layout-columns-toolbar | 0px | | --x-flow-layout-columns-toolbar-aside | row nowrap | | --x-size-justify-layout-columns-toolbar-aside | flex-start | | --x-size-align-layout-columns-toolbar-aside | center | | --x-flow-layout-columns-toolbar-body | row nowrap | | --x-size-justify-layout-columns-toolbar-body | flex-start | | --x-size-align-layout-columns-toolbar-body | center | | --x-size-padding-top-layout-columns-main | 0px | | --x-size-padding-bottom-layout-columns-main | 0px | | --x-size-margin-top-layout-columns-main | 0px | | --x-size-margin-bottom-layout-columns-main | 0px | | --x-color-background-layout-columns-main | transparent | | --x-color-border-layout-columns-sub-main | transparent | | --x-size-border-width-layout-columns-main | 0px | | --x-color-background-layout-columns-main-aside | transparent | | --x-color-border-layout-columns-sub-main-aside | transparent | | --x-size-border-width-layout-columns-main-aside | 0px | | --x-color-background-layout-columns-main-body | transparent | | --x-color-border-layout-columns-sub-main-body | transparent | | --x-size-border-width-layout-columns-main-body | 0px | | --x-size-margin-bottom-layout-columns-scroll-to-top | 10px | | --x-size-margin-left-layout-columns-scroll-to-top | 10px | | token | use | | :-------------------------------------------------: | :--------------------------------------: | | --x-size-column-gap-layout-columns | The gap between columns | | --x-size-padding-top-layout-columns-header | The padding top of the header | | --x-size-padding-bottom-layout-columns-header | The padding bottom of the header | | --x-size-margin-top-layout-columns-header | The margin top of the header | | --x-size-margin-bottom-layout-columns-header | The margin bottom of the header | | --x-color-background-layout-columns-header | The background color of the header | | --x-color-border-layout-columns-header | The border color of the header | | --x-size-border-width-layout-columns-header | The border width of the header | | --x-flow-layout-columns-header-start | The flex flow of the start header | | --x-size-justify-layout-columns-header-start | The justify content of the start header | | --x-size-align-layout-columns-header-start | The align items of the start header | | --x-flow-layout-columns-header-middle | The flex flow of the middle header | | --x-size-justify-layout-columns-header-middle | The justify content of the middle header | | --x-size-align-layout-columns-header-middle | The align items of the middle header | | --x-flow-layout-columns-header-end | The flex flow of the end header | | --x-size-justify-layout-columns-header-end | The justify content of the end header | | --x-size-align-layout-columns-header-end | The align items of the end header | | --x-size-padding-top-layout-columns-sub-header | The padding bottom of the sub header | | --x-size-padding-bottom-layout-columns-sub-header | The padding top of the sub header | | --x-size-margin-top-layout-columns-sub-header | The margin bottom of the sub header | | --x-size-margin-bottom-layout-columns-sub-header | The margin top of the sub header | | --x-color-background-layout-columns-sub-header | The background color of the sub header | | --x-color-border-layout-columns-sub-header | The border color of the sub header | | --x-size-border-width-layout-columns-sub-header | The border width of the sub header | | --x-flow-layout-columns-sub-header | The flex flow of the sub header | | --x-size-justify-layout-columns-sub-header | The justify content of the sub header | | --x-size-align-layout-columns-sub-header | The align items of the sub header | | --x-size-padding-top-layout-columns-toolbar | The padding top of the toolbar | | --x-size-padding-bottom-layout-columns-toolbar | The padding bottom of the toolbar | | --x-size-margin-top-layout-columns-toolbar | The margin top of the toolbar | | --x-size-margin-bottom-layout-columns-toolbar | The margin bottom of the toolbar | | --x-color-background-layout-columns-toolbar | The background color of the toolbar | | --x-color-border-layout-columns-sub-toolbar | The border color of the toolbar | | --x-size-border-width-layout-columns-toolbar | The border width of the toolbar | | --x-flow-layout-columns-toolbar-aside | The flex flow of the toolbar aside | | --x-size-justify-layout-columns-toolbar-aside | The justify content of the toolbar aside | | --x-size-align-layout-columns-toolbar-aside | The align items of the toolbar aside | | --x-flow-layout-columns-toolbar-body | The flex flow of the end toolbar body | | --x-size-justify-layout-columns-toolbar-body | Justify content of the end toolbar body | | --x-size-align-layout-columns-toolbar-body | The align items of the toolbar body | | --x-size-padding-top-layout-columns-main | The padding top of the main | | --x-size-padding-bottom-layout-columns-main | The padding bottom of the main | | --x-size-margin-top-layout-columns-main | The margin top of the main | | --x-size-margin-bottom-layout-columns-main | The margin bottom of the main | | --x-color-background-layout-columns-main | The background color of the main | | --x-color-border-layout-columns-main | The border color of the main | | --x-size-border-width-layout-columns-main | The border width of the main | | --x-color-background-layout-columns-main-aside | The background color of the main aside | | --x-color-border-layout-columns-main-aside | The border color of the main aside | | --x-size-border-width-layout-columns-main-aside | The border width of the sub main aside | | --x-color-background-layout-columns-main-body | The background color of the main body | | --x-color-border-layout-columns-main-body | The border color of the main body | | --x-size-border-width-layout-columns-main-body | The border width of the sub main body | | --x-size-margin-bottom-layout-columns-scroll-to-top | The margin bottom of the scroll to top | | --x-size-margin-left-layout-columns-scroll-to-top | The margin left of the scroll to top |