@aurodesignsystem-dev/auro-backtotop 0.0.0-pr67.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/CHANGELOG.md +207 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +142 -0
- package/custom-elements.json +532 -0
- package/demo/api.html +57 -0
- package/demo/api.js +1 -0
- package/demo/api.md +172 -0
- package/demo/api.min.js +3 -0
- package/demo/auro-backtotop.min.js +497 -0
- package/demo/index.html +57 -0
- package/demo/index.js +4 -0
- package/demo/index.md +102 -0
- package/demo/index.min.js +4 -0
- package/dist/auro-backtotop-CeT9HfoH.js +99 -0
- package/dist/index.d.ts +106 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +88 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-backtotop
|
|
5
|
+
|
|
6
|
+
The auro-backtotop element provides users a way to quickly return to page top.
|
|
7
|
+
|
|
8
|
+
### Properties & Attributes
|
|
9
|
+
|
|
10
|
+
| Properties | Attributes | Type | Default | Description |
|
|
11
|
+
| ---------- | ---------- | ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------ |
|
|
12
|
+
| disabled | disabled | boolean | | Render the trigger inline, will always be visible. |
|
|
13
|
+
| variant | variant | 'primary' \| 'secondary' \| String | "primary" | The variant attribute allows for rendering the button using the primary (default) or secondary styles. |
|
|
14
|
+
|
|
15
|
+
### Methods
|
|
16
|
+
|
|
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
|
|
22
|
+
|
|
23
|
+
| Name | Description |
|
|
24
|
+
| --------- | -------------------------------------------------------- |
|
|
25
|
+
| (default) | Default slot for the text of the button. |
|
|
26
|
+
| ariaLabel | Use this slot to pass an aria-label to the HTML5 button. |
|
|
27
|
+
|
|
28
|
+
### CSS Shadow Parts
|
|
29
|
+
|
|
30
|
+
| Name | Description |
|
|
31
|
+
| ------ | --------------------------- |
|
|
32
|
+
| button | Apply CSS to HTML5 button. |
|
|
33
|
+
| icon | Apply CSS to arrow up icon. |
|
|
34
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
35
|
+
|
|
36
|
+
## API Examples
|
|
37
|
+
|
|
38
|
+
### Basic
|
|
39
|
+
|
|
40
|
+
<div class="exampleWrapper">
|
|
41
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
42
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
43
|
+
<auro-backtotop>Back to top</auro-backtotop>
|
|
44
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
45
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
|
|
46
|
+
<!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
|
|
47
|
+
<auro-button
|
|
48
|
+
aria-label="arrow-up"
|
|
49
|
+
shape="pill"
|
|
50
|
+
size="lg">
|
|
51
|
+
Back to top
|
|
52
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
53
|
+
</auro-button>
|
|
54
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
|
+
</div>
|
|
56
|
+
<auro-accordion alignRight>
|
|
57
|
+
<span slot="trigger">See code</span>
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
59
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<auro-backtotop>Back to top</auro-backtotop>
|
|
63
|
+
```
|
|
64
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
65
|
+
</auro-accordion>
|
|
66
|
+
|
|
67
|
+
### Attribute Examples
|
|
68
|
+
|
|
69
|
+
#### disabled
|
|
70
|
+
|
|
71
|
+
This example demonstrates auro-backtotop in its disabled state.
|
|
72
|
+
|
|
73
|
+
<div class="exampleWrapper">
|
|
74
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledButtonOnly.html) -->
|
|
75
|
+
<!-- The below content is automatically added from ./../apiExamples/disabledButtonOnly.html -->
|
|
76
|
+
<auro-button
|
|
77
|
+
aria-label="arrow-up"
|
|
78
|
+
disabled
|
|
79
|
+
shape="pill"
|
|
80
|
+
size="lg">
|
|
81
|
+
Back to top
|
|
82
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
83
|
+
</auro-button>
|
|
84
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
85
|
+
</div>
|
|
86
|
+
<auro-accordion alignRight>
|
|
87
|
+
<span slot="trigger">See code</span>
|
|
88
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
89
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<auro-backtotop disabled>Back to top</auro-backtotop>
|
|
93
|
+
```
|
|
94
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
95
|
+
</auro-accordion>
|
|
96
|
+
|
|
97
|
+
#### variant
|
|
98
|
+
|
|
99
|
+
The `variant` attribute allows for rendering the button using the `primary` (default) or `secondary` styles.
|
|
100
|
+
|
|
101
|
+
<div class="exampleWrapper">
|
|
102
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/secondaryButtonOnly.html) -->
|
|
103
|
+
<!-- The below content is automatically added from ./../apiExamples/secondaryButtonOnly.html -->
|
|
104
|
+
<auro-button
|
|
105
|
+
variant="secondary"
|
|
106
|
+
shape="pill"
|
|
107
|
+
size="lg">
|
|
108
|
+
Back to top
|
|
109
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
110
|
+
</auro-button>
|
|
111
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
112
|
+
</div>
|
|
113
|
+
<auro-accordion alignRight>
|
|
114
|
+
<span slot="trigger">See code</span>
|
|
115
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/secondary.html) -->
|
|
116
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/secondary.html -->
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<auro-backtotop variant="secondary">Back to top</auro-backtotop>
|
|
120
|
+
```
|
|
121
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
122
|
+
</auro-accordion>
|
|
123
|
+
|
|
124
|
+
### Slot Examples
|
|
125
|
+
|
|
126
|
+
#### default
|
|
127
|
+
|
|
128
|
+
The default slot defines the content of the button.
|
|
129
|
+
|
|
130
|
+
<div class="exampleWrapper">
|
|
131
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
|
|
132
|
+
<!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
|
|
133
|
+
<auro-button
|
|
134
|
+
aria-label="arrow-up"
|
|
135
|
+
shape="pill"
|
|
136
|
+
size="lg">
|
|
137
|
+
Back to top
|
|
138
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
139
|
+
</auro-button>
|
|
140
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
141
|
+
</div>
|
|
142
|
+
<auro-accordion alignRight>
|
|
143
|
+
<span slot="trigger">See code</span>
|
|
144
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
145
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<auro-backtotop>Back to top</auro-backtotop>
|
|
149
|
+
```
|
|
150
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
151
|
+
</auro-accordion>
|
|
152
|
+
|
|
153
|
+
## Page Content For Demo
|
|
154
|
+
|
|
155
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pageContent.html) -->
|
|
156
|
+
<!-- The below content is automatically added from ./../apiExamples/pageContent.html -->
|
|
157
|
+
<p>
|
|
158
|
+
This component requires page content that is taller than the window. Below is `lorem ipsum` content to force a large document. A `back to top` button will appear when you begin to scroll down the page.
|
|
159
|
+
</p>
|
|
160
|
+
<i>
|
|
161
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
162
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
163
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
164
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
165
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
166
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
167
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
168
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
169
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
170
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
171
|
+
</i>
|
|
172
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
package/demo/api.min.js
ADDED