@aurodesignsystem-dev/auro-sidenav 0.0.0-pr72.0 → 0.0.0-pr72.1
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/custom-elements.json +2677 -0
- package/demo/api.md +87 -67
- package/demo/auro-sidenavsection.min.js +492 -3113
- package/dist/auro-sidenavsection-D8s_3-Vr.js +248 -0
- package/dist/index.d.ts +154 -51
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +11 -8
- package/dist/auro-sidenavsection-CYdzk1Q4.js +0 -145
package/demo/api.md
CHANGED
|
@@ -6,89 +6,109 @@
|
|
|
6
6
|
The auro-sidenav element provides users a way to create navigational interfaces on the left-hand
|
|
7
7
|
side of a page to navigate to separate pages or different sections within the same page.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
### Properties & Attributes
|
|
10
10
|
|
|
11
|
-
|
|
|
12
|
-
|
|
13
|
-
|
|
|
11
|
+
| Properties | Attributes | Type | Default | Description |
|
|
12
|
+
| --- | --- | --- | --- | --- |
|
|
13
|
+
static | static | boolean | | When applied the sidenav will expand to an open state and can't be collapsed.
|
|
14
|
+
|
|
15
|
+
### Methods
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
| Name | Parameters | Return | Description |
|
|
18
|
+
| --- | --- | --- | --- |
|
|
19
|
+
register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser.
|
|
20
|
+
|
|
21
|
+
### Slots
|
|
16
22
|
|
|
17
|
-
| Name
|
|
18
|
-
|
|
19
|
-
|
|
|
20
|
-
|
|
23
|
+
| Name | Description |
|
|
24
|
+
| --- | --- |
|
|
25
|
+
heading | Defines what to use as the header of the sidenav.
|
|
26
|
+
(default) | Default slot of the sidenav. Please construct using auro-sidenavitems and auro-sidenavsections.
|
|
27
|
+
|
|
28
|
+
---
|
|
21
29
|
|
|
22
30
|
# auro-sidenavitem
|
|
23
31
|
|
|
24
32
|
The auro-sidenavitem element is the default child element of auro-sidenav.
|
|
25
33
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
| Part | Description |
|
|
45
|
-
|--------------|--------------------------------------------------|
|
|
46
|
-
| [link](#link) | Allows styling to be applied to the `a` element. |
|
|
47
|
-
| [targetIcon](#targetIcon) | Allows styling to be applied to the icon that appears next to the hyperlink. |
|
|
34
|
+
### Properties & Attributes
|
|
35
|
+
|
|
36
|
+
| Properties | Attributes | Type | Default | Description |
|
|
37
|
+
| --- | --- | --- | --- | --- |
|
|
38
|
+
role | | String | | Defines ARIA roles; currently supports `button` for extended experiences.
|
|
39
|
+
safeUri | | | | Returns a safe URI based on the provided `href` and `relative` parameters.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string.
|
|
40
|
+
includesDomain | | | | Checks whether the provided URI (if available) includes the 'http' protocol.<br>If the URI is truthy, it examines whether it contains 'http'.<br>Otherwise, it returns false.
|
|
41
|
+
appearance | appearance | string | 'default' | Defines whether the component will be on lighter or darker backgrounds.
|
|
42
|
+
download | download | boolean | false | If true, the linked resource will be downloaded when the hyperlink is clicked.
|
|
43
|
+
relative | relative | boolean | false | If true, the auto URL re-write feature will be disabled.
|
|
44
|
+
ondark | ondark | boolean | false | DEPRECATED - use `appearance` instead.
|
|
45
|
+
variant | variant | string | "primary" | Sets button variant option.
|
|
46
|
+
href | href | string | | Defines the URL of the linked page.
|
|
47
|
+
rel | rel | string | | Defines the relationship between the current document and the linked document.
|
|
48
|
+
target | target | string | | Defines where to open the linked document.
|
|
49
|
+
type | type | string | | Defines the type of hyperlink; accepts `nav` or `cta`.
|
|
50
|
+
fluid | fluid | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI.
|
|
51
|
+
referrerpolicy | referrerpolicy | boolean | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.
|
|
48
52
|
|
|
49
|
-
|
|
53
|
+
### Methods
|
|
50
54
|
|
|
51
|
-
|
|
55
|
+
| Name | Parameters | Return | Description |
|
|
56
|
+
| --- | --- | --- | --- |
|
|
57
|
+
register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser.
|
|
52
58
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
| Property | Attribute | Type | Default | Description |
|
|
56
|
-
|--------------|--------------|-----------|---------|--------------------------------------------------|
|
|
57
|
-
| [alignRight](#alignRight) | `alignRight` | `Boolean` | | If set, the trigger content will align right. |
|
|
58
|
-
| [chevron](#chevron) | `chevron` | `String` | | Sets chevron variant option. Possible values are: `none`, `right`. |
|
|
59
|
-
| [disabled](#disabled) | `disabled` | `Boolean` | | If set, the accordion is disabled and have reduced opacity. |
|
|
60
|
-
| [emphasis](#emphasis) | `emphasis` | `Boolean` | | If set, emphasis styles will be applied to the auro-accordions. |
|
|
61
|
-
| [expanded](#expanded) | `expanded` | `Boolean` | false | If set, the accordion is expanded. |
|
|
62
|
-
| [grouped](#grouped) | `grouped` | `Boolean` | | Attribute will be set on accordion when it appears in an accordion group. |
|
|
63
|
-
| [variant](#variant) | `variant` | `String` | | Sets accordion variant option. Possible values are: `sm`, `lg`. |
|
|
64
|
-
|
|
65
|
-
## Methods
|
|
66
|
-
|
|
67
|
-
| Method | Type | Description |
|
|
68
|
-
|----------|------------|--------------------------------------------------|
|
|
69
|
-
| [toggle](#toggle) | `(): void` | Toggles the visibility of the accordion content. |
|
|
70
|
-
|
|
71
|
-
## Events
|
|
59
|
+
### CSS Shadow Parts
|
|
72
60
|
|
|
73
|
-
|
|
|
74
|
-
|
|
75
|
-
|
|
61
|
+
| Name | Description |
|
|
62
|
+
| --- | --- |
|
|
63
|
+
link | Allows styling to be applied to the `a` element.
|
|
64
|
+
targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink.
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
# auro-sidenavsection
|
|
76
69
|
|
|
77
|
-
|
|
70
|
+
The auro-sidenavsection element can be used to create an accordion of auro-sidenavitems within the auro-sidenav.
|
|
71
|
+
|
|
72
|
+
### Properties & Attributes
|
|
73
|
+
|
|
74
|
+
| Properties | Attributes | Type | Default | Description |
|
|
75
|
+
| --- | --- | --- | --- | --- |
|
|
76
|
+
expanded | expanded | boolean | false | If set, the accordion is expanded.
|
|
77
|
+
alignRight | alignRight | boolean | | If set, the trigger content will align right.
|
|
78
|
+
emphasis | emphasis | boolean | | If set, emphasis styles will be applied to the auro-accordions.
|
|
79
|
+
grouped | grouped | boolean | | Attribute will be set on accordion when it appears in an accordion group.
|
|
80
|
+
chevron | chevron | string | | Sets chevron variant option. Possible values are: `none`, `right`.
|
|
81
|
+
variant | variant | string | | Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
82
|
+
disabled | disabled | boolean | | If set, the accordion is disabled and have reduced opacity.
|
|
83
|
+
|
|
84
|
+
### Methods
|
|
78
85
|
|
|
79
|
-
| Name
|
|
80
|
-
|
|
81
|
-
|
|
|
82
|
-
|
|
|
86
|
+
| Name | Parameters | Return | Description |
|
|
87
|
+
| --- | --- | --- | --- |
|
|
88
|
+
register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser.
|
|
89
|
+
toggle | None | | Toggles the visibility of the accordion content.
|
|
90
|
+
|
|
91
|
+
### Events
|
|
83
92
|
|
|
84
|
-
|
|
93
|
+
| Name | Description |
|
|
94
|
+
| --- | --- |
|
|
95
|
+
toggleExpanded | Notifies that the accordion has been expanded or closed.
|
|
96
|
+
|
|
97
|
+
### Slots
|
|
85
98
|
|
|
86
|
-
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
99
|
+
| Name | Description |
|
|
100
|
+
| --- | --- |
|
|
101
|
+
(default) | Default slot for the accordion content.
|
|
102
|
+
trigger | Defines the content of the trigger element.
|
|
103
|
+
|
|
104
|
+
### CSS Shadow Parts
|
|
105
|
+
|
|
106
|
+
| Name | Description |
|
|
107
|
+
| --- | --- |
|
|
108
|
+
accordion | Apply CSS to Accordion wrapper.
|
|
109
|
+
trigger | Apply CSS to trigger element.
|
|
110
|
+
chevron | Apply CSS to chevron icon.
|
|
111
|
+
content | Apply CSS to the accordion content.
|
|
92
112
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
113
|
|
|
94
114
|
## API Examples
|