@brightspace-ui/core 3.204.0 → 3.204.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.
|
@@ -803,6 +803,245 @@ The example below also includes expand/collapse behavior in order to expand or c
|
|
|
803
803
|
- `d2l-list-item-expand-collapse-toggled`: dispatched when the item's expand/collapse toggle is clicked
|
|
804
804
|
<!-- docs: end hidden content -->
|
|
805
805
|
|
|
806
|
+
## Tile Layout
|
|
807
|
+
|
|
808
|
+
The `d2l-list` component supports displaying items in a tile layout. The built-in rendering will take care of laying out the illustration, selection, secondary actions, and color indicators for each item in either the `list` (default) or `tiles` layout. To display items in a tile layout, set the `d2l-list`'s `layout` property to `tiles`.
|
|
809
|
+
|
|
810
|
+
**Note:** Nested lists, separators, and drag & drop are not supported in the tile layout.
|
|
811
|
+
|
|
812
|
+
<!-- docs: demo code display:block autoSize:false size:large sandboxTitle:'List - Tile Layout'-->
|
|
813
|
+
```html
|
|
814
|
+
<script type="module">
|
|
815
|
+
import '@brightspace-ui/core/components/list/list-item.js';
|
|
816
|
+
import '@brightspace-ui/core/components/list/list-item-content.js';
|
|
817
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
|
|
818
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
|
|
819
|
+
import { listLayouts } from '@brightspace-ui/core/components/list/list.js';
|
|
820
|
+
document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
|
|
821
|
+
document.querySelector('d2l-list').layout = (e.detail.key === 'tiles' ? listLayouts.tiles : listLayouts.list);
|
|
822
|
+
});
|
|
823
|
+
</script>
|
|
824
|
+
<style>
|
|
825
|
+
d2l-view-switcher {
|
|
826
|
+
margin-block-end: 0.9rem;
|
|
827
|
+
}
|
|
828
|
+
img[slot="illustration"] {
|
|
829
|
+
object-fit: cover;
|
|
830
|
+
}
|
|
831
|
+
d2l-list-item[layout="normal"] img[slot="illustration"] {
|
|
832
|
+
height: 500px;
|
|
833
|
+
}
|
|
834
|
+
d2l-list-item[layout="tile"] img[slot="illustration"] {
|
|
835
|
+
height: 5rem;
|
|
836
|
+
}
|
|
837
|
+
</style>
|
|
838
|
+
|
|
839
|
+
<div>
|
|
840
|
+
<d2l-view-switcher label="Layout Options">
|
|
841
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
842
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
843
|
+
</d2l-view-switcher>
|
|
844
|
+
<d2l-list layout="tiles">
|
|
845
|
+
<d2l-list-item>
|
|
846
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
847
|
+
<d2l-list-item-content>
|
|
848
|
+
<div>Earth Sciences</div>
|
|
849
|
+
<div slot="secondary">Secondary information</div>
|
|
850
|
+
<div slot="supporting-info">Supporting information</div>
|
|
851
|
+
</d2l-list-item-content>
|
|
852
|
+
</d2l-list-item>
|
|
853
|
+
<d2l-list-item>
|
|
854
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg">
|
|
855
|
+
<d2l-list-item-content>
|
|
856
|
+
<div>Grade 2</div>
|
|
857
|
+
<div slot="secondary">Secondary information</div>
|
|
858
|
+
<div slot="supporting-info">Supporting information</div>
|
|
859
|
+
</d2l-list-item-content>
|
|
860
|
+
</d2l-list-item>
|
|
861
|
+
</d2l-list>
|
|
862
|
+
</div>
|
|
863
|
+
```
|
|
864
|
+
|
|
865
|
+
Apply the `tile-header` property to the list item when using selection or secondary actions and there isn't a decorative image to render over.
|
|
866
|
+
|
|
867
|
+
<!-- docs: demo code display:block autoSize:false size:large sandboxTitle:'List - Tile Header'-->
|
|
868
|
+
```html
|
|
869
|
+
<script type="module">
|
|
870
|
+
import '@brightspace-ui/core/components/button/button-icon.js';
|
|
871
|
+
import '@brightspace-ui/core/components/list/list-item.js';
|
|
872
|
+
import '@brightspace-ui/core/components/list/list-item-content.js';
|
|
873
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
|
|
874
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
|
|
875
|
+
import { listLayouts } from '@brightspace-ui/core/components/list/list.js';
|
|
876
|
+
document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
|
|
877
|
+
document.querySelector('d2l-list').layout = (e.detail.key === 'tiles' ? listLayouts.tiles : listLayouts.list);
|
|
878
|
+
});
|
|
879
|
+
</script>
|
|
880
|
+
<style>
|
|
881
|
+
d2l-view-switcher {
|
|
882
|
+
margin-block-end: 0.9rem;
|
|
883
|
+
}
|
|
884
|
+
img[slot="illustration"] {
|
|
885
|
+
object-fit: cover;
|
|
886
|
+
}
|
|
887
|
+
d2l-list-item[layout="normal"] img[slot="illustration"] {
|
|
888
|
+
height: 500px;
|
|
889
|
+
}
|
|
890
|
+
d2l-list-item[layout="tile"] img[slot="illustration"] {
|
|
891
|
+
height: 5rem;
|
|
892
|
+
}
|
|
893
|
+
</style>
|
|
894
|
+
|
|
895
|
+
<div>
|
|
896
|
+
<d2l-view-switcher label="Layout Options">
|
|
897
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
898
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
899
|
+
</d2l-view-switcher>
|
|
900
|
+
<d2l-list layout="tiles">
|
|
901
|
+
<d2l-list-item label="Earth Sciences" key="earth" selectable>
|
|
902
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg">
|
|
903
|
+
<d2l-list-item-content>
|
|
904
|
+
<div>Earth Sciences</div>
|
|
905
|
+
<div slot="secondary">Secondary information</div>
|
|
906
|
+
<div slot="supporting-info">Supporting information</div>
|
|
907
|
+
</d2l-list-item-content>
|
|
908
|
+
<div slot="actions">
|
|
909
|
+
<d2l-button-icon text="More" icon="tier1:gear" translucent visible-on-ancestor></d2l-button-icon>
|
|
910
|
+
</div>
|
|
911
|
+
</d2l-list-item>
|
|
912
|
+
<d2l-list-item label="Grade 2" key="grade2" selectable tile-header>
|
|
913
|
+
<d2l-list-item-content>
|
|
914
|
+
<div>Grade 2</div>
|
|
915
|
+
<div slot="secondary">Secondary information</div>
|
|
916
|
+
<div slot="supporting-info">Supporting information</div>
|
|
917
|
+
</d2l-list-item-content>
|
|
918
|
+
<div slot="actions">
|
|
919
|
+
<d2l-button-icon text="More" icon="tier1:gear"></d2l-button-icon>
|
|
920
|
+
</div>
|
|
921
|
+
</d2l-list-item>
|
|
922
|
+
</d2l-list>
|
|
923
|
+
</div>
|
|
924
|
+
```
|
|
925
|
+
|
|
926
|
+
In addition, the list item's `tile-padding-type` property enables consumers to opt out of the default item padding, enabling greater flexibility when rendering custom item layouts. To opt out of the default item padding, set the item's `tile-padding-type` property to `none`. Use the list item's existing CSS variables to apply consistent border and padding properties in the item's custom layout.
|
|
927
|
+
|
|
928
|
+
**Note:** For custom item layouts, consumers are responsible for laying out their content in both the standard `list` and `tiles` layouts if the user can change the layout. Ideally this is accomplished by simply applying slightly different styles.
|
|
929
|
+
|
|
930
|
+
<!-- docs: demo code display:block autoSize:false size:large sandboxTitle:'List - Tile Custom Layout'-->
|
|
931
|
+
```html
|
|
932
|
+
<script type="module">
|
|
933
|
+
import '@brightspace-ui/core/components/button/button.js';
|
|
934
|
+
import '@brightspace-ui/core/components/button/button-icon.js';
|
|
935
|
+
import '@brightspace-ui/core/components/list/list-item.js';
|
|
936
|
+
import '@brightspace-ui/core/components/list/list-item-content.js';
|
|
937
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher.js';
|
|
938
|
+
import '@brightspace-ui/core/components/view-switcher/view-switcher-button.js';
|
|
939
|
+
import { listLayouts } from '@brightspace-ui/core/components/list/list.js';
|
|
940
|
+
document.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
|
|
941
|
+
document.querySelector('d2l-list').layout = (e.detail.key === 'tiles' ? listLayouts.tiles : listLayouts.list);
|
|
942
|
+
});
|
|
943
|
+
</script>
|
|
944
|
+
<style>
|
|
945
|
+
d2l-view-switcher {
|
|
946
|
+
margin-block-end: 0.9rem;
|
|
947
|
+
}
|
|
948
|
+
d2l-list-item > .custom-content {
|
|
949
|
+
display: flex;
|
|
950
|
+
gap: var(--d2l-list-item-padding);
|
|
951
|
+
}
|
|
952
|
+
d2l-list-item > .custom-content > d2l-list-item-content {
|
|
953
|
+
flex: auto;
|
|
954
|
+
}
|
|
955
|
+
d2l-list-item > .custom-content > d2l-icon {
|
|
956
|
+
flex: none;
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
d2l-list-item[layout="normal"] > .custom-content {
|
|
960
|
+
flex-direction: row;
|
|
961
|
+
width: 100%;
|
|
962
|
+
}
|
|
963
|
+
d2l-list-item[layout="normal"] > .custom-content > d2l-icon {
|
|
964
|
+
height: 3rem;
|
|
965
|
+
width: 3rem;
|
|
966
|
+
}
|
|
967
|
+
d2l-list-item[layout="normal"] > .custom-content > img {
|
|
968
|
+
display: none;
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
d2l-list-item[layout="tile"] > .custom-content {
|
|
972
|
+
flex-direction: column;
|
|
973
|
+
height: 100%;
|
|
974
|
+
}
|
|
975
|
+
d2l-list-item[layout="tile"] > .custom-content > img {
|
|
976
|
+
border-bottom: 1px solid var(--d2l-list-item-border-color);
|
|
977
|
+
border-start-end-radius: var(--d2l-list-item-illustration-border-radius);
|
|
978
|
+
border-start-start-radius: var(--d2l-list-item-illustration-border-radius);
|
|
979
|
+
height: 5rem;
|
|
980
|
+
object-fit: cover;
|
|
981
|
+
width: 100%;
|
|
982
|
+
}
|
|
983
|
+
d2l-list-item[layout="tile"] > .custom-content > d2l-icon {
|
|
984
|
+
background-color: white;
|
|
985
|
+
border: 1px solid var(--d2l-list-item-border-color);
|
|
986
|
+
border-radius: var(--d2l-list-item-illustration-border-radius);
|
|
987
|
+
box-sizing: border-box;
|
|
988
|
+
height: 4rem;
|
|
989
|
+
margin-block-start: calc(-1 * var(--d2l-list-item-padding) - 2rem);
|
|
990
|
+
margin-inline: auto;
|
|
991
|
+
padding: var(--d2l-list-item-padding);
|
|
992
|
+
width: 4rem;
|
|
993
|
+
}
|
|
994
|
+
d2l-list-item[layout="tile"] > .custom-content > d2l-list-item-content {
|
|
995
|
+
padding-inline: var(--d2l-list-item-padding);
|
|
996
|
+
}
|
|
997
|
+
d2l-list-item[layout="tile"] > .custom-content > .footer {
|
|
998
|
+
padding: var(--d2l-list-item-padding);
|
|
999
|
+
}
|
|
1000
|
+
</style>
|
|
1001
|
+
|
|
1002
|
+
<div>
|
|
1003
|
+
<d2l-view-switcher label="Layout Options">
|
|
1004
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
1005
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
1006
|
+
</d2l-view-switcher>
|
|
1007
|
+
<d2l-list layout="tiles">
|
|
1008
|
+
<d2l-list-item label="Earth Sciences" key="earth" selectable tile-padding-type="none">
|
|
1009
|
+
<div class="custom-content">
|
|
1010
|
+
<img src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
1011
|
+
<d2l-list-item-content>
|
|
1012
|
+
<div>Identify categories of physical activities</div>
|
|
1013
|
+
<div slot="secondary">Secondary Information</div>
|
|
1014
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
1015
|
+
</d2l-list-item-content>
|
|
1016
|
+
<div class="footer">
|
|
1017
|
+
<d2l-button style="width: 100%;">Shiny Button</d2l-button>
|
|
1018
|
+
</div>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div slot="actions">
|
|
1021
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
|
|
1022
|
+
</div>
|
|
1023
|
+
</d2l-list-item>
|
|
1024
|
+
<d2l-list-item label="Grade 2" key="grade2" selectable tile-padding-type="none">
|
|
1025
|
+
<div class="custom-content">
|
|
1026
|
+
<img src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
1027
|
+
<d2l-icon icon="tier3:home"></d2l-icon>
|
|
1028
|
+
<d2l-list-item-content>
|
|
1029
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
1030
|
+
<div slot="secondary">Secondary Information</div>
|
|
1031
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
1032
|
+
</d2l-list-item-content>
|
|
1033
|
+
<div class="footer">
|
|
1034
|
+
<d2l-button style="width: 100%;">Shiny Button</d2l-button>
|
|
1035
|
+
</div>
|
|
1036
|
+
</div>
|
|
1037
|
+
<div slot="actions">
|
|
1038
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
|
|
1039
|
+
</div>
|
|
1040
|
+
</d2l-list-item>
|
|
1041
|
+
</d2l-list>
|
|
1042
|
+
</div>
|
|
1043
|
+
```
|
|
1044
|
+
|
|
806
1045
|
## ListItemMixin
|
|
807
1046
|
|
|
808
1047
|
Want to maintain consistency with `d2l-list-item` but need more modularity? This mixin is for you! This mixin allows you to make a component into a list item without requiring custom styling. All of the properties and functionality from `d2l-list-item` (listed above) will be added to your new component.
|
|
@@ -8,21 +8,21 @@
|
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../../button/button.js';
|
|
10
10
|
import '../../button/button-icon.js';
|
|
11
|
-
import '../../button/button-subtle.js';
|
|
12
|
-
import '../../button/button-toggle.js';
|
|
13
11
|
import '../../icons/icon.js';
|
|
14
12
|
import '../list-item-button.js';
|
|
15
13
|
import '../list-item-content.js';
|
|
16
14
|
import '../list-item.js';
|
|
17
|
-
import '
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
import '../../view-switcher/view-switcher.js';
|
|
16
|
+
import '../../view-switcher/view-switcher-button.js';
|
|
17
|
+
import { listLayouts } from '../list.js';
|
|
18
|
+
window.wireupViewSwitcher = demo => {
|
|
19
|
+
demo.querySelector('d2l-view-switcher').addEventListener('d2l-view-switcher-select', e => {
|
|
20
|
+
demo.querySelector('d2l-list').layout = (e.detail.key === 'tiles' ? listLayouts.tiles : listLayouts.list);
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
23
|
</script>
|
|
24
24
|
<style>
|
|
25
|
-
d2l-
|
|
25
|
+
d2l-view-switcher {
|
|
26
26
|
margin-block-end: 0.9rem;
|
|
27
27
|
}
|
|
28
28
|
d2l-list-item[layout="normal"] div[slot="illustration"],
|
|
@@ -107,10 +107,10 @@
|
|
|
107
107
|
|
|
108
108
|
<d2l-demo-snippet>
|
|
109
109
|
<template>
|
|
110
|
-
<d2l-
|
|
111
|
-
<d2l-
|
|
112
|
-
<d2l-button
|
|
113
|
-
</d2l-
|
|
110
|
+
<d2l-view-switcher label="Layout Options">
|
|
111
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
112
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
113
|
+
</d2l-view-switcher>
|
|
114
114
|
<d2l-list layout="tiles">
|
|
115
115
|
<d2l-list-item label="item 1">
|
|
116
116
|
<d2l-list-item-content>
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
</d2l-list-item>
|
|
136
136
|
</d2l-list>
|
|
137
137
|
<script data-demo-hide>
|
|
138
|
-
(demo => window.
|
|
138
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
139
139
|
</script>
|
|
140
140
|
</template>
|
|
141
141
|
</d2l-demo-snippet>
|
|
@@ -144,10 +144,10 @@
|
|
|
144
144
|
|
|
145
145
|
<d2l-demo-snippet>
|
|
146
146
|
<template>
|
|
147
|
-
<d2l-
|
|
148
|
-
<d2l-
|
|
149
|
-
<d2l-button
|
|
150
|
-
</d2l-
|
|
147
|
+
<d2l-view-switcher label="Layout Options">
|
|
148
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
149
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
150
|
+
</d2l-view-switcher>
|
|
151
151
|
<d2l-list layout="tiles">
|
|
152
152
|
<d2l-list-item label="item 1">
|
|
153
153
|
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
@@ -191,7 +191,7 @@
|
|
|
191
191
|
</d2l-list-item>
|
|
192
192
|
</d2l-list>
|
|
193
193
|
<script data-demo-hide>
|
|
194
|
-
(demo => window.
|
|
194
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
195
195
|
</script>
|
|
196
196
|
</template>
|
|
197
197
|
</d2l-demo-snippet>
|
|
@@ -200,10 +200,10 @@
|
|
|
200
200
|
|
|
201
201
|
<d2l-demo-snippet>
|
|
202
202
|
<template>
|
|
203
|
-
<d2l-
|
|
204
|
-
<d2l-
|
|
205
|
-
<d2l-button
|
|
206
|
-
</d2l-
|
|
203
|
+
<d2l-view-switcher label="Layout Options">
|
|
204
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
205
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
206
|
+
</d2l-view-switcher>
|
|
207
207
|
<d2l-list layout="tiles">
|
|
208
208
|
<d2l-list-item label="item 1" key="1" selectable tile-header>
|
|
209
209
|
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
@@ -238,7 +238,7 @@
|
|
|
238
238
|
</d2l-list-item>
|
|
239
239
|
</d2l-list>
|
|
240
240
|
<script data-demo-hide>
|
|
241
|
-
(demo => window.
|
|
241
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
242
242
|
</script>
|
|
243
243
|
</template>
|
|
244
244
|
</d2l-demo-snippet>
|
|
@@ -247,10 +247,10 @@
|
|
|
247
247
|
|
|
248
248
|
<d2l-demo-snippet>
|
|
249
249
|
<template>
|
|
250
|
-
<d2l-
|
|
251
|
-
<d2l-
|
|
252
|
-
<d2l-button
|
|
253
|
-
</d2l-
|
|
250
|
+
<d2l-view-switcher label="Layout Options">
|
|
251
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
252
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
253
|
+
</d2l-view-switcher>
|
|
254
254
|
<d2l-list layout="tiles">
|
|
255
255
|
<d2l-list-item label="item 1" key="1" tile-header>
|
|
256
256
|
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
</d2l-list-item>
|
|
299
299
|
</d2l-list>
|
|
300
300
|
<script data-demo-hide>
|
|
301
|
-
(demo => window.
|
|
301
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
302
302
|
</script>
|
|
303
303
|
</template>
|
|
304
304
|
</d2l-demo-snippet>
|
|
@@ -307,10 +307,10 @@
|
|
|
307
307
|
|
|
308
308
|
<d2l-demo-snippet>
|
|
309
309
|
<template>
|
|
310
|
-
<d2l-
|
|
311
|
-
<d2l-
|
|
312
|
-
<d2l-button
|
|
313
|
-
</d2l-
|
|
310
|
+
<d2l-view-switcher label="Layout Options">
|
|
311
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
312
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
313
|
+
</d2l-view-switcher>
|
|
314
314
|
<d2l-list layout="tiles">
|
|
315
315
|
<d2l-list-item label="item 1" href="http://www.d2l.com">
|
|
316
316
|
<d2l-list-item-content>
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
</d2l-list-item>
|
|
336
336
|
</d2l-list>
|
|
337
337
|
<script data-demo-hide>
|
|
338
|
-
(demo => window.
|
|
338
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
339
339
|
</script>
|
|
340
340
|
</template>
|
|
341
341
|
</d2l-demo-snippet>
|
|
@@ -344,10 +344,10 @@
|
|
|
344
344
|
|
|
345
345
|
<d2l-demo-snippet>
|
|
346
346
|
<template>
|
|
347
|
-
<d2l-
|
|
348
|
-
<d2l-
|
|
349
|
-
<d2l-button
|
|
350
|
-
</d2l-
|
|
347
|
+
<d2l-view-switcher label="Layout Options">
|
|
348
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
349
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
350
|
+
</d2l-view-switcher>
|
|
351
351
|
<d2l-list layout="tiles">
|
|
352
352
|
<d2l-list-item-button label="item 1" href="http://www.d2l.com">
|
|
353
353
|
<d2l-list-item-content>
|
|
@@ -372,7 +372,7 @@
|
|
|
372
372
|
</d2l-list-item-button>
|
|
373
373
|
</d2l-list>
|
|
374
374
|
<script data-demo-hide>
|
|
375
|
-
(demo => window.
|
|
375
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
376
376
|
</script>
|
|
377
377
|
</template>
|
|
378
378
|
</d2l-demo-snippet>
|
|
@@ -381,10 +381,10 @@
|
|
|
381
381
|
|
|
382
382
|
<d2l-demo-snippet>
|
|
383
383
|
<template>
|
|
384
|
-
<d2l-
|
|
385
|
-
<d2l-
|
|
386
|
-
<d2l-button
|
|
387
|
-
</d2l-
|
|
384
|
+
<d2l-view-switcher label="Layout Options">
|
|
385
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
386
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
387
|
+
</d2l-view-switcher>
|
|
388
388
|
<d2l-list layout="tiles">
|
|
389
389
|
<d2l-list-item label="item 1" key="1" selectable tile-padding-type="none">
|
|
390
390
|
<div class="custom-content">
|
|
@@ -421,7 +421,7 @@
|
|
|
421
421
|
</d2l-list-item>
|
|
422
422
|
</d2l-list>
|
|
423
423
|
<script data-demo-hide>
|
|
424
|
-
(demo => window.
|
|
424
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
425
425
|
</script>
|
|
426
426
|
</template>
|
|
427
427
|
</d2l-demo-snippet>
|
|
@@ -430,10 +430,10 @@
|
|
|
430
430
|
|
|
431
431
|
<d2l-demo-snippet>
|
|
432
432
|
<template>
|
|
433
|
-
<d2l-
|
|
434
|
-
<d2l-
|
|
435
|
-
<d2l-button
|
|
436
|
-
</d2l-
|
|
433
|
+
<d2l-view-switcher label="Layout Options">
|
|
434
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
435
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
436
|
+
</d2l-view-switcher>
|
|
437
437
|
<d2l-list layout="tiles">
|
|
438
438
|
<d2l-list-item label="item 1" key="1">
|
|
439
439
|
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
@@ -462,7 +462,7 @@
|
|
|
462
462
|
</d2l-list-item>
|
|
463
463
|
</d2l-list>
|
|
464
464
|
<script data-demo-hide>
|
|
465
|
-
(demo => window.
|
|
465
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
466
466
|
</script>
|
|
467
467
|
</template>
|
|
468
468
|
</d2l-demo-snippet>
|
|
@@ -471,10 +471,10 @@
|
|
|
471
471
|
|
|
472
472
|
<d2l-demo-snippet>
|
|
473
473
|
<template>
|
|
474
|
-
<d2l-
|
|
475
|
-
<d2l-
|
|
476
|
-
<d2l-button
|
|
477
|
-
</d2l-
|
|
474
|
+
<d2l-view-switcher label="Layout Options">
|
|
475
|
+
<d2l-view-switcher-button key="list" text="List"></d2l-view-switcher-button>
|
|
476
|
+
<d2l-view-switcher-button selected key="tiles" text="Tiles"></d2l-view-switcher-button>
|
|
477
|
+
</d2l-view-switcher>
|
|
478
478
|
<d2l-list layout="tiles">
|
|
479
479
|
<d2l-list-item label="item 1" key="1" color="#29a6ff" selectable tile-header>
|
|
480
480
|
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
@@ -518,7 +518,7 @@
|
|
|
518
518
|
</d2l-list-item>
|
|
519
519
|
</d2l-list>
|
|
520
520
|
<script data-demo-hide>
|
|
521
|
-
(demo => window.
|
|
521
|
+
(demo => window.window.wireupViewSwitcher(demo))(document.currentScript.parentNode);
|
|
522
522
|
</script>
|
|
523
523
|
</template>
|
|
524
524
|
</d2l-demo-snippet>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.204.
|
|
3
|
+
"version": "3.204.1",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|