@brightspace-ui/labs 2.29.0 → 2.30.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/package.json
CHANGED
|
@@ -1,19 +1,53 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Accordion
|
|
2
2
|
|
|
3
3
|
A Lit-based widget that displays a list of collapsible components. When a collapsible component is clicked, it expands or collapses the associated content.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Accordion [d2l-labs-accordion]
|
|
6
6
|
|
|
7
|
+
The accordion panel to manage multiple accordions.
|
|
8
|
+
|
|
9
|
+
<!-- docs: demo code display:block autoSize:false size:medium -->
|
|
7
10
|
```html
|
|
8
11
|
<script type="module">
|
|
9
|
-
|
|
10
|
-
|
|
12
|
+
import '@brightspace-ui/labs/components/accordion.js';
|
|
13
|
+
import '@brightspace-ui/labs/components/accordion-collapse.js';
|
|
11
14
|
</script>
|
|
15
|
+
<d2l-labs-accordion auto-close>
|
|
16
|
+
<d2l-labs-accordion-collapse label="AutoClose">
|
|
17
|
+
<d2l-labs-accordion-collapse label="Child 1">Demo</d2l-labs-accordion-collapse>
|
|
18
|
+
<d2l-labs-accordion-collapse label="Child 2">Demo</d2l-labs-accordion-collapse>
|
|
19
|
+
</d2l-labs-accordion-collapse>
|
|
20
|
+
</d2l-labs-accordion>
|
|
12
21
|
<d2l-labs-accordion>
|
|
13
|
-
|
|
22
|
+
<d2l-labs-accordion-collapse label="No AutoClose">
|
|
23
|
+
<d2l-labs-accordion-collapse label="- Child 1">Demo</d2l-labs-accordion-collapse>
|
|
24
|
+
<d2l-labs-accordion-collapse label="- Child 2">Demo </d2l-labs-accordion-collapse>
|
|
25
|
+
</d2l-labs-accordion-collapse>
|
|
14
26
|
</d2l-labs-accordion>
|
|
15
27
|
```
|
|
16
28
|
|
|
29
|
+
## Accordion Collapse [d2l-labs-accordion-collapse]
|
|
30
|
+
|
|
31
|
+
The accordion component that expands or collapses the content.
|
|
32
|
+
|
|
33
|
+
<!-- docs: demo code display:block autoSize:false size:medium -->
|
|
34
|
+
```html
|
|
35
|
+
<script type="module">
|
|
36
|
+
import '@brightspace-ui/labs/components/accordion-collapse.js';
|
|
37
|
+
</script>
|
|
38
|
+
<d2l-labs-accordion-collapse label="Summary" flex>
|
|
39
|
+
<ul slot="summary" style="list-style-type: none; padding-left: 0;">
|
|
40
|
+
<li>Availability starts 4/13/2020 and ends 4/23/2020</li>
|
|
41
|
+
<li>One release condition</li>
|
|
42
|
+
<li>Special access</li>
|
|
43
|
+
</ul>
|
|
44
|
+
<p>More info here!</p>
|
|
45
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lectus erat, dignissim quis efficitur non, iaculis nec ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fringilla eu orci sed tristique. Aliquam pellentesque turpis ut vehicula volutpat. Quisque euismod felis nec dolor scelerisque, ullamcorper gravida ante suscipit. Nam eget libero vel mauris tincidunt molestie. Maecenas tortor purus, sodales vel lacus vel, molestie tempor tellus.</p>
|
|
46
|
+
</d2l-labs-accordion-collapse>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
<!-- docs: start hidden content -->
|
|
50
|
+
|
|
17
51
|
## Lit components:
|
|
18
52
|
### **d2l-labs-accordion** - accordion panel.
|
|
19
53
|
#### Attributes:
|
|
@@ -106,4 +140,6 @@ Example 6:
|
|
|
106
140
|
<a href="https://www.d2l.com/">D2L</a>
|
|
107
141
|
</span>
|
|
108
142
|
</d2l-labs-accordion-collapse>
|
|
109
|
-
```
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
<!-- docs: end hidden content -->
|
|
@@ -1,16 +1,32 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Pagination
|
|
2
2
|
|
|
3
|
-
A component to indicate the existence of and provide navigation for multiple pages of content.
|
|
3
|
+
A numeric paging component to indicate the existence of and provide navigation for multiple pages of content. For Load More Paging, see the [`core` component](https://daylight.d2l.dev/components/paging/).
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Numeric Pager [d2l-labs-pager-numeric]
|
|
6
6
|
|
|
7
|
+
<!-- docs: demo code -->
|
|
7
8
|
```html
|
|
8
9
|
<script type="module">
|
|
9
|
-
|
|
10
|
+
import '@brightspace-ui/labs/components/pager-numeric.js';
|
|
11
|
+
// <!-- docs: start hidden content -->
|
|
12
|
+
requestAnimationFrame(() => {
|
|
13
|
+
const pager = document.querySelector('d2l-labs-pager-numeric');
|
|
14
|
+
pager.addEventListener('d2l-labs-pager-numeric-page-change', (e) => {
|
|
15
|
+
e.target.pageNumber = e.detail.page;
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
// <!-- docs: end hidden content -->
|
|
10
19
|
</script>
|
|
11
|
-
<d2l-labs-pager-numeric
|
|
20
|
+
<d2l-labs-pager-numeric
|
|
21
|
+
max-page-number="5"
|
|
22
|
+
show-page-size-selector
|
|
23
|
+
page-sizes="[1,10,20,100,250,1000]"
|
|
24
|
+
page-size="10">
|
|
25
|
+
</d2l-labs-pager-numeric>
|
|
12
26
|
```
|
|
13
27
|
|
|
28
|
+
<!-- docs: start hidden content -->
|
|
29
|
+
|
|
14
30
|
## Properties
|
|
15
31
|
|
|
16
32
|
| Property | Type | Description |
|
|
@@ -27,3 +43,5 @@ A component to indicate the existence of and provide navigation for multiple pag
|
|
|
27
43
|
* `page`: the new page number value
|
|
28
44
|
* `d2l-labs-pager-numeric-page-size-change`: dispatched when the item count selector's value is changed. Event `detail` includes:
|
|
29
45
|
* `itemCount`: the value the item count selector was just set to
|
|
46
|
+
|
|
47
|
+
<!-- docs: end hidden content -->
|