-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
200 lines (193 loc) · 9.76 KB
/
index.html
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="components/demo/styles.css" type="text/css">
<script type="module">
import './components/colors/colors.js';
import './components/typography/typography.js';
import './index.js';
</script>
<title>core-ui</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
body {
padding: 0 30px;
}
</style>
</head>
<body class="d2l-typography">
<h1 class="d2l-heading-2">Demos</h1>
<d2l-build-info></d2l-build-info>
<h2 class="d2l-heading-3">Components</h2>
<ul>
<li>
Alerts
<ul>
<li><a href="components/alert/demo/alert.html">d2l-alert</a></li>
<li><a href="components/alert/demo/alert-toast.html">d2l-alert-toast</a></li>
</ul>
</li>
<li><a href="components/backdrop/demo/backdrop.html">d2l-backdrop</a></li>
<li><a href="components/breadcrumbs/demo/breadcrumbs.html">d2l-breadcrumbs</a></li>
<li>
Buttons
<ul>
<li><a href="components/button/demo/button.html">d2l-button</a></li>
<li><a href="components/button/demo/button-add.html">d2l-button-add</a></li>
<li><a href="components/button/demo/button-icon.html">d2l-button-icon</a></li>
<li><a href="components/button/demo/button-subtle.html">d2l-button-subtle</a></li>
<li><a href="components/button/demo/button-toggle.html">d2l-button-toggle</a></li>
<li><a href="components/button/demo/floating-buttons.html">d2l-floating-buttons</a></li>
<li><a href="components/button/demo/floating-buttons-in-tabs.html">d2l-floating-buttons in tabs</a></li>
<li><a href="components/button/demo/floating-buttons-in-frame.html">d2l-floating-buttons in frame</a></li>
</ul>
</li>
<li><a href="components/calendar/demo/calendar.html">d2l-calendar</a></li>
<li><a href="components/card/demo/card.html">d2l-card</a></li>
<li>
Count Badges
<ul>
<li><a href="components/count-badge/demo/count-badge.html">d2l-count-badge</a></li>
<li><a href="components/count-badge/demo/count-badge-icon.html">d2l-count-badge-icon</a></li>
</ul>
</li>
<li><a href="components/collapsible-panel/demo/collapsible-panel.html">d2l-collapsible-panel</a></li>
<li><a href="components/colors/demo/colors.html">d2l-colors</a></li>
<li><a href="components/demo/demo/demo-snippet.html">d2l-demo-snippet</a></li>
<li><a href="components/description-list/demo/description-list.html">d2l-description-list</a></li>
<li>
Dialogs
<ul>
<li><a href="components/dialog/demo/dialog.html">d2l-dialog</a></li>
<li><a href="components/dialog/demo/dialog-nested.html">d2l-dialog (Nested)</a></li>
<li><a href="components/dialog/demo/dialog-confirm.html">d2l-dialog-confirm</a></li>
<li><a href="components/dialog/demo/dialog-fullscreen.html">d2l-dialog-fullscreen</a></li>
</ul>
</li>
<li>
Dropdowns
<ul>
<li><a href="components/dropdown/demo/dropdown.html">d2l-dropdown</a></li>
<li><a href="components/dropdown/demo/dropdown-button.html">d2l-dropdown-button</a></li>
<li><a href="components/dropdown/demo/dropdown-context-menu.html">d2l-dropdown-context-menu</a></li>
<li><a href="components/dropdown/demo/dropdown-menu.html">d2l-dropdown-menu</a></li>
<li><a href="components/dropdown/demo/dropdown-more.html">d2l-dropdown-more</a></li>
<li><a href="components/dropdown/demo/dropdown-tabs.html">d2l-dropdown-tabs</a></li>
</ul>
</li>
<li><a href="components/empty-state/demo/empty-state.html">d2l-empty-state</a></li>
<li><a href="components/expand-collapse/demo/expand-collapse-content.html">d2l-expand-collapse-content</a></li>
<li>
Filters
<ul>
<li><a href="components/filter/demo/filter.html">d2l-filter</a></li>
<li><a href="components/filter/demo/filter-overflow-group.html">d2l-filter-overflow-group</a></li>
<li><a href="components/filter/demo/filter-tags.html">d2l-filter-tags</a></li>
</ul>
</li>
<li><a href="components/focus-trap/demo/focus-trap.html">d2l-focus-trap</a></li>
<li>
Forms
<ul>
<li><a href="components/form/demo/form.html">d2l-form</a></li>
<li><a href="components/form/demo/form-native.html">d2l-form-native</a></li>
</ul>
</li>
<li><a href="components/hierarchical-view/demo/hierarchical-view.html">d2l-hierarchical-view</a></li>
<li>
HtmlBlock
<ul>
<li><a href="components/html-block/demo/html-block.html?latex=false">d2l-html-block</a></li>
<li><a href="components/html-block/demo/html-block.html">d2l-html-block (with LaTeX rendering)</a></li>
<li><a href="components/html-block/demo/html-block-code.html">d2l-html-block (code samples)</a></li>
</ul>
</li>
<li><a href="components/icons/demo/icon.html">d2l-icon</a></li>
<li>
Inputs
<ul>
<li><a href="components/inputs/demo/input-checkbox.html">d2l-input-checkbox</a></li>
<li><a href="components/inputs/demo/input-color.html">d2l-input-color</a></li>
<li><a href="components/inputs/demo/input-date.html">d2l-input-date</a></li>
<li><a href="components/inputs/demo/input-date-range.html">d2l-input-date-range</a></li>
<li><a href="components/inputs/demo/input-date-time.html">d2l-input-date-time</a></li>
<li><a href="components/inputs/demo/input-date-time-range.html">d2l-input-date-time-range</a></li>
<li><a href="components/inputs/demo/input-number.html">d2l-input-number</li>
<li><a href="components/inputs/demo/input-percent.html">d2l-input-percent</li>
<li><a href="components/inputs/demo/input-radio.html">d2l-input-radio</a></li>
<li><a href="components/inputs/demo/input-search.html">d2l-input-search</a></li>
<li><a href="components/inputs/demo/input-select.html">d2l-input-select</a></li>
<li><a href="components/inputs/demo/input-text.html">d2l-input-text</a></li>
<li><a href="components/inputs/demo/input-textarea.html">d2l-input-textarea</a></li>
<li><a href="components/inputs/demo/input-time.html">d2l-input-time</a></li>
<li><a href="components/inputs/demo/input-time-range.html">d2l-input-time-range</a></li>
</ul>
</li>
<li><a href="components/link/demo/link.html">d2l-link</a></li>
<li>
List
<ul>
<li><a href="components/list/demo/list.html">d2l-list</a></li>
<li><a href="components/list/demo/list-color.html">d2l-list (color)</a></li>
<li><a href="components/list/demo/list-drag-and-drop.html">d2l-list (drag & drop)</a></li>
<li><a href="components/list/demo/list-nested.html">d2l-list (nested)</a></li>
<li><a href="components/list/demo/list-expand-collapse.html">d2l-list (expand-collapse)</a></li>
<li><a href="components/list/demo/list-item-actions.html">d2l-list-item (actions)</a></li>
<li><a href="components/list/demo/list-item-layouts.html">d2l-list-item (layouts)</a></li>
<li><a href="components/list/demo/list-item-scroll.html">d2l-list-item (scrolling)</a></li>
</ul>
</li>
<li><a href="components/loading-spinner/demo/loading-spinner.html">d2l-loading-spinner</a></li>
<li>
Menus
<ul>
<li><a href="components/menu/demo/menu.html">d2l-menu</a></li>
<li><a href="components/menu/demo/checkbox-menu.html">d2l-menu (checkbox)</a></li>
<li><a href="components/menu/demo/radio-menu.html">d2l-menu (radio)</a></li>
</ul>
</li>
<li><a href="components/meter/demo/meter.html">d2l-meter</a></li>
<li><a href="components/more-less/demo/more-less.html">d2l-more-less</a></li>
<li><a href="components/object-property-list/demo/object-property-list.html">d2l-object-property-list</a></li>
<li><a href="components/offscreen/demo/offscreen.html">d2l-offscreen</a></li>
<li><a href="components/overflow-group/demo/overflow-group.html">d2l-overflow-group</a></li>
<li><a href="components/paging/demo/pager-load-more.html">d2l-pager-load-more</a></li>
<li><a href="components/selection/demo/selection.html">d2l-selection</a></li>
<li><a href="components/scroll-wrapper/demo/scroll-wrapper.html">d2l-scroll-wrapper</a></li>
<li><a href="components/status-indicator/demo/status-indicator.html">d2l-status-indicator</a></li>
<li><a href="components/switch/demo/switch.html">d2l-switch</a></li>
<li><a href="components/table/demo/table.html">d2l-table</a></li>
<li><a href="components/tabs/demo/tabs.html">d2l-tabs</a></li>
<li><a href="components/tag-list/demo/tag-list.html">d2l-tag-list</a></li>
<li><a href="components/tooltip/demo/tooltip.html">d2l-tooltip</a></li>
<li><a href="components/typography/demo/typography.html">d2l-typography</a></li>
</ul>
<h2 class="d2l-heading-3">Directives</h2>
<ul>
<li><a href="directives/animate/demo/">animate</a></li>
</ul>
<h2 class="d2l-heading-3">Helpers</h2>
<ul>
<li><a href="helpers/demo/announce.html">announce</a></li>
<li><a href="helpers/demo/dismissible.html">dismissible</a></li>
<li><a href="helpers/demo/gestures.html">gestures</a></li>
<li><a href="helpers/demo/prism.html">prism</a></li>
</ul>
<h2 class="d2l-heading-3">Mixins</h2>
<ul>
<li><a href="mixins/arrow-keys/demo/arrow-keys-mixin.html">arrow-keys-mixin</a></li>
<li><a href="mixins/async-container/demo/async-container.html">async-container-mixin</a></li>
<li><a href="mixins/labelled/demo/labelled-mixin.html">labelled-mixin</a></li>
<li><a href="mixins/localize/demo/localize-mixin.html">localize-mixin</a></li>
<li><a href="components/skeleton/demo/skeleton-mixin.html">skeleton-mixin</a></li>
</ul>
<h2 class="d2l-heading-3">Templates</h2>
<ul>
<li><a href="templates/primary-secondary/demo/index.html">Primary Secondary Template (fullscreen width)</a></li>
<li><a href="templates/primary-secondary/demo/width-type-normal.html">Primary Secondary Template (normal width)</a></li>
<li><a href="templates/primary-secondary/demo/overflow-hidden.html">Primary Secondary Template (hidden primary overflow)</a></li>
<li><a href="templates/primary-secondary/demo/integration.html">Primary Secondary Template (integration with other components)</a></li>
</ul>
</body>
</html>