-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathshell.html
139 lines (131 loc) · 6.85 KB
/
shell.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
<!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</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</code></h1>
<p>Navigate through to access the shell, shell panel, and its contents. Note this is the base, that includes additions for the <code>shell-center-row</code> sample.</p>
<calcite-shell>
<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="Add 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>
<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="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-group>
<calcite-action text="Add" 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 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 bolt 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>