UNPKG

@empathyco/x-components

Version:

Empathy X Components

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

empathyco/x

80 lines (62 loc) • 4.76 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
--- title: FixedHeaderAndAsidesLayout --- --- title: FixedHeaderAndAsidesLayout --- # FixedHeaderAndAsidesLayout Component for use as Layout to be filled with the rest of the components. ## Props | Name | Description | Type | Default | | -------------------- | --------------------------------------------------------------------------- | -------------------- | ------------- | | <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</code> | Slot that is be used for insert content into the Header. | None | | <code>sub-header</code> | Slot that can be used to insert content into below the header. | None | | <code>toolbar</code> | | None | | <code>main</code> | Slot that is be used for insert content into the Main. | None | | <code>left-aside</code> | Slot that is be used for insert content into the left aside. | None | | <code>right-aside</code> | Slot that is be used for insert content into the right aside. | None | | <code>extra-aside</code> | | None | | <code>scroll-to-top</code> | | None | ## Layout This component has the following layout with fixed headers and collapsible fixed asides: | | header | | | :--------: | :--------: | :-----------: | | left-aside | sub-header | right-aside | | | toolbar | | | | main | | | | | scroll-to-top | Additionally it provides an empty slot `extra-aside` to be customized by the user. ## Design Tokens The component has also the following `Design Tokens` to configure it: | token | default value | | :-----------------------------------------: | :-----------: | | --x-size-height-layout-backdrop | 40vh | | --x-size-width-layout-aside | 300px | | --x-size-min-margin-layout | 20px | | --x-size-max-height-layout-header | auto | | --x-size-max-width-layout | 1440px | | --x-color-background-layout-header-backdrop | white | | --x-color-background-layout-header | transparent | | --x-size-border-color-layout-header | transparent | | --x-size-border-width-layout-header | 0px | | --x-color-background-layout-sub-header | transparent | | --x-size-border-color-layout-sub-header | transparent | | --x-size-border-width-layout-sub-header | 0px | | token | use | | :-----------------------------------------: | :---------------------------------------: | | --x-size-height-layout-backdrop | The height for header gradient backdrop | | --x-size-width-layout-aside | The width of the asides | | --x-size-min-margin-layout | The min horizontal margin for the Layout | | --x-size-max-height-layout-header | The max height for the Layout Header | | --x-size-max-width-layout | The max width for the Layout | | --x-color-background-layout-header-backdrop | The background color of the head backdrop | | --x-color-background-layout-header | The background color of the header | | --x-size-border-color-layout-header | The border color of the header | | --x-size-border-width-layout-header | The border with of the header | | --x-color-background-layout-sub-header | The background color of the sub header | | --x-size-border-color-layout-sub-header | The border color of the sub header | | --x-size-border-width-layout-sub-header | The border with of the sub header |