Skip to content

Commit 1ec9ae9

Browse files
bmarkovbmarkov
committed
updates
1 parent 9315600 commit 1ec9ae9

File tree

534 files changed

+55203
-47929
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

534 files changed

+55203
-47929
lines changed

‎demos/accordion/overview/index.htm‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>Accordion Overview Demo</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
8+
<link rel="stylesheet" type="text/css" href="../../../source/styles/smart.base.css" />
9+
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
10+
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
11+
12+
<script type="text/javascript" src="../../scripts/common.js"></script>
13+
<script type="text/javascript" src="../../../source/smart.element.js"></script>
14+
<script type="text/javascript" src="../../../source/smart.elements.js"></script>
15+
<script src="index.js"></script>
16+
<link rel="stylesheet" type="text/css" href="styles.css" />
17+
</head>
18+
<body class="viewport">
19+
<div class="smart-demo-container">
20+
<section>
21+
<div>
22+
<h2>Smart.Accordion element represents a custom element with expandable items. It is a lightweight container that may either stand alone or be connected to a larger surface.</h2>
23+
<div class="module">
24+
<p>Each accordion item contains header and content part. Click on the header toggles the content part.</p>
25+
<p>smartAccordion may be used for a variety of tasks, such as:</p>
26+
<ul>
27+
<li>To edit a setting</li>
28+
<li>To create a tool for ad campaigns</li>
29+
</ul>
30+
</div>
31+
<div class="module">
32+
<h3>Usage</h3><p>
33+
Editing<br>
34+
Creating flows
35+
</p><h3>Behavior</h3><p>
36+
Expand<br>
37+
Collapse<br>
38+
Focus
39+
</p>
40+
</div>
41+
42+
</div>
43+
</section>
44+
45+
<section>
46+
<h2>Usage</h2>
47+
<div class="module ">
48+
<p><strong>Editing </strong></p>
49+
<p>Accordions are best used for lightweight editing of an element, such as selecting a value for a setting.</p>
50+
<p>For example, an app that contains tables may use accordion to adjust settings on table elements.</p>
51+
<p><strong>Creation flows </strong></p>
52+
<p>Accordion items may be displayed in a sequence to form creation flows.</p>
53+
<p>This is an example of a tool for creating ad campaigns.</p>
54+
</div>
55+
<div class="module module-large">
56+
57+
<smart-accordion expand-mode="toggle" class="animation material" id="accordionUsage">
58+
<smart-accordion-item index="0" label="Trip name <span class='description'>Carribean cruise</span>" expanded>Carribean cruise</smart-accordion-item>
59+
<smart-accordion-item index="1" label="Location <span class='description'>Barbados</span>">Barbados</smart-accordion-item>
60+
<smart-accordion-item index="2" label="Start and end dates <span class='description'><span class='date'>Start date:</span> Feb 29, 2016 <span class='date'>End date:</span> Not set</span>">Start date:Feb 29, 2016 End date: Not set</smart-accordion-item>
61+
<smart-accordion-item index="3" label="Carrier <span class='description'>The best cruise line</span>">The best cruise line</smart-accordion-item>
62+
<smart-accordion-item index="4" label="Meal preferences <span class='description'>Vegetarian</span>">Vegetarian</smart-accordion-item>
63+
</smart-accordion>
64+
</div>
65+
<div class="module">
66+
</div>
67+
</section>
68+
69+
<section>
70+
<h2>Behavior</h2>
71+
<div class="module">
72+
<h2>Collapsed accordion item</h2>
73+
<p>Displays summary information. Upon selecting the collapsed panel, it expands to display the full expansion panel.</p>
74+
<h2>Expanded accordion item</h2>
75+
<p>Upon selection, a collapsed panel expands, allowing users to add or edit information.</p>
76+
<p>Helper text may be added to the panel to assist the user.</p>
77+
<h2>Focus state</h2>
78+
<p>An expansion panel may use a focus state (by using a grey background on the list item) to provide focus to individual list items.</p>
79+
<p>On a keyboard, users may traverse through list items by using the Tab key.</p>
80+
</div>
81+
<div class="module module-large">
82+
<smart-accordion expand-mode="toggle" class="animation material" id="accordionBehavior">
83+
<smart-accordion-item index="0" label="Personal data <span class='description'>Type your name and age</span>" expanded>
84+
<br/><br/>
85+
<smart-text-box class="material" label="First name"></smart-text-box>
86+
<br/><br/>
87+
<smart-text-box class="material" label="Age"></smart-text-box>
88+
</smart-accordion-item>
89+
<smart-accordion-item index="1" label="Self aware panel <span class='description'>Currently I am closed</span>">I'm visible because I am open</smart-accordion-item>
90+
</smart-accordion>
91+
</div>
92+
</section>
93+
</div>
94+
</body>
95+
</html>

‎demos/accordion/overview/index.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
window.onload = function () {
2+
var accordionBehavior = document.getElementById('accordionBehavior');
3+
4+
accordionBehavior.addEventListener('expanded', function (event) {
5+
var index = event.detail.index;
6+
7+
if (index === 1) {
8+
accordionBehavior.update(1, { label: 'Self aware panel <span class=\'description\'>Currently I am open</span>' });
9+
}
10+
});
11+
12+
accordionBehavior.addEventListener('collapsed', function (event) {
13+
var index = event.detail.index;
14+
15+
if (index===1) {
16+
accordionBehavior.update(1, { label: 'Self aware panel <span class=\'description\'>Currently I am closed</span>' });
17+
}
18+
});
19+
}

‎demos/accordion/overview/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
smart-accordion{
2+
width: 350px;
3+
height:auto;
4+
}

0 commit comments

Comments
 (0)