-
Notifications
You must be signed in to change notification settings - Fork 1
/
shell-center-row.html
163 lines (149 loc) · 7.92 KB
/
shell-center-row.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>shell-center-row</title>
<script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.css" />
<style>
h1 {
margin-bottom: 1rem;
}
h2 {
margin-bottom: 3rem;
}
body {
font-family: var(--calcite-sans-family);
font-size: var(--calcite-font-size-0);
color: var(--calcite-ui-text-1);
max-width: 1024px;
min-width: 280px;
width: 70vw;
padding: 0 var(--calcite-spacing-double);
margin: 0 auto;
background-color: var(--calcite-ui-background);
}
/* Theme Switcher */
#theme-label {
position: fixed;
top: 20px;
right: 20px;
z-index: 2;
background-color: var(--calcite-ui-background);
border: 1px solid;
border-color: var(--calcite-ui-border-1);
border-radius: var(--calcite-border-radius);
margin: 0;
padding: 10px;
}
#theme-label label {
margin: 0;
}
calcite-shell {
top: 10rem;
height: calc(100vh - 10rem);
}
</style>
</head>
<body>
<main>
<!-- calcite-switch -->
<div id="theme-label">
<calcite-label layout="inline">
Toggle theme
<calcite-switch id="theme-switch"></calcite-switch>
</calcite-label>
</div>
<h1><code>shell-center-row</code></h1>
<p>Similar to <code>shell</code>, but includes content in between the panels in the center.</p>
<calcite-shell>
<!-- Primary panel (left) -->
<calcite-shell-panel slot="primary-panel" position="start" detached>
<calcite-action-bar slot="action-bar">
<calcite-action-group>
<calcite-action text="Add action" icon="plus" label="Add action, for display purposes only"></calcite-action>
<calcite-action text="Save action, disabled" disabled icon="save" label="Disabled save action, for display purposes only"></calcite-action>
<calcite-action text="Layers action, Indicator on" active indicator icon="layers" label="Layers action, for display purposes only"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-block collapsible heading="Navigate through the action bar" summary="Enabling items in the menu will have no action unless selecting the Collapse/Expand action. However, can all content be accessed?" heading-level="2">
<calcite-block-content>
<calcite-action text="Item 1, Plus icon, and Indicator on" text-enabled indicator icon="plus" label="Plus action, for display purposes only">
</calcite-action>
<calcite-action text="Item 2, Save icon" text-enabled icon="save" label="Save action, for display purposes only"></calcite-action>
<calcite-action text="Item 3, Banana icon" text-enabled icon="banana" label="Banana action, for display purposes only"></calcite-action>
</calcite-block-content>
</calcite-block>
<calcite-block collapsible heading="Additional Block example" summary="Can this block content be accessed?" heading-level="2">
<calcite-block-content>
<p>Supporting text content in block.</p>
</calcite-block-content>
</calcite-block>
</calcite-shell-panel>
<!-- Center Row -->
<calcite-shell-center-row slot="center-row" detached id="center-row">
<calcite-panel heading="Shell Center Row example" summary="Content for the center row.">
<calcite-block heading="Shell center row example" summary="Expand to learn more" collapsible>
<calcite-notice active>
<div slot="message">Shell center row displays content in the middle of the page.</div>
</calcite-notice>
</calcite-block>
</calcite-panel>
<calcite-action-bar slot="action-bar">
<calcite-action-group slot="bottom-actions">
<calcite-action icon="lightbulb" text="Tips" id="tip-manager-button" label="Tips action, for display purposes only"></calcite-action>
<calcite-action icon="mega-phone" text="Feedback" id="tip-manager-button-2" label="Feedback action, for display purposes only"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
</calcite-shell-center-row>
<!-- Contextual panel (right) -->
<calcite-shell-panel slot="contextual-panel" position="end" detached height-scale="s">
<calcite-action-bar slot="action-bar">
<calcite-action-group>
<calcite-action text="Add" active icon="plus" label="Add action, for display purposes only"></calcite-action>
<calcite-action text="Save" disabled icon="save" label="Save action, for display purposes only"></calcite-action>
<calcite-action text="Layers" icon="layers" label="Layers action, for display purposes only"></calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action text="Add" icon="plus" label="Add action, for display purposes only"></calcite-action>
<calcite-action text="Save" disabled icon="save" label="Disabled save action, for display purposes only"></calcite-action>
<calcite-action text="Layers" icon="layers" label="Layers action, for display purposes only"></calcite-action>
</calcite-action-group>
<calcite-action slot="bottom-actions" text="Tips" icon="lightbulb" label="Tips action, for display purposes only"></calcite-action>
</calcite-action-bar>
<calcite-flow>
<calcite-panel heading="Value List Example">
<calcite-block collapsible open heading="A filter-enabled value list" summary="An itemized list with supporting icons." heading-level="2">
<calcite-value-list multiple>
<calcite-value-list-item label="Item 1"
description="Lightning bolt" value="lightning">
<calcite-action slot="actions-end" icon="camera-flash-on" text="Lightning bolt" label="Lightning action, for display purposes only">
</calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Item 2"
description="Banana" value="banana">
<calcite-action slot="actions-end" icon="banana" text="Banana" label="Banana action, for display purposes only"></calcite-action>
</calcite-value-list-item>
<calcite-value-list-item label="Item 3"
description="Human" value="human">
<calcite-action slot="actions-end" icon="person2" text="Person" label="Person action, for display purposes only"></calcite-action>
</calcite-value-list-item>
</calcite-value-list>
</calcite-block>
</calcite-panel>
</calcite-flow>
</calcite-shell-panel>
</calcite-shell>
</main>
</body>
<script>
window.onload = () => {
// Theme Switcher
const themeSwitch = document.getElementById("theme-switch");
themeSwitch.addEventListener("calciteSwitchChange", () => {
document.body.classList.toggle("calcite-theme-dark");
});
};
</script>
</html>