RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update

Browse Source
This commit is contained in:
sairaj mote 2021-07-19 01:05:00 +05:30
parent 558ca2f0c0
commit c51d69c2ac
5 changed files with 5174 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5152
components/components.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
components/dist/tabs.js vendored
View File

@ -152,7 +152,6 @@ customElements.define('sm-tab-header', class extends HTMLElement {
}
handlePanelChange(e) {
console.log(this.allTabs)
this.changeTab(this.allTabs[e.detail.index])
}

2
components/dist/tabs.min.js vendored
View File

File diff suppressed because one or more lines are too long

56
components/index.html
View File

@ -1433,6 +1433,23 @@
<p>
This component can be used sub-page navigation.
</p>
<h2>Interactive demo</h2>
<sm-tab-header target="tab1">
<sm-tab>Audio</sm-tab>
<sm-tab>Video</sm-tab>
</sm-tab-header>
<sm-tab-panels id="tab1">
<section>
<h3>Audio</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
</section>
<section>
<h3>Video</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
</section>
</sm-tab-panels>
<h2>Usage</h2>
<pre>
<code>
@ -1493,23 +1510,6 @@
</p>
</div>
</section>
<h2>Interactive demo</h2>
<sm-tab-header target="tab1">
<sm-tab>Audio</sm-tab>
<sm-tab>Video</sm-tab>
</sm-tab-header>
<sm-tab-panels id="tab1">
<section>
<h3>Audio</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
</section>
<section>
<h3>Video</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
</section>
</sm-tab-panels>
<h2>Variants</h2>
<p><span class="highlight">tab</span> is the only other variant than default style.</p>
<sm-tab-header variant="tab" target="tab2">
@ -1923,27 +1923,7 @@
</sm-checkbox>
</template>
<script src="assets/prism.js"></script>
<script src="dist/button.js"></script>
<script src="dist/carousel.js"></script>
<script src="dist/checkbox.js"></script>
<script src="dist/copy.js"></script>
<script src="dist/file-input.js"></script>
<script src="dist/form.js"></script>
<script src="dist/hamburger-menu.js"></script>
<script src="dist/input.js"></script>
<script src="dist/menu.js"></script>
<script src="dist/notifications.js"></script>
<script src="dist/popup.js"></script>
<script src="dist/radio.js"></script>
<script src="dist/select.js"></script>
<script src="dist/spinner.js"></script>
<script src="dist/strip-select.js"></script>
<script src="dist/switch.js"></script>
<script src="dist/tabs.js"></script>
<script src="dist/tags-input.js"></script>
<script src="dist/textarea.js"></script>
<script src="dist/text-field.js"></script>
<script src="dist/theme-toggle.js"></script>
<script src="components.js"></script>
<script id="default_ui_library">
const domRefs = {};

6
components/index.min.html
View File

@ -214,7 +214,7 @@
})
&lt;/script&gt;
</code>
</pre></section><section id="tabs_page" class="page hide-completely"><h1 class="page__title">Tabs</h1><p>This component can be used sub-page navigation.</p><h2>Usage</h2><pre>
</pre></section><section id="tabs_page" class="page hide-completely"><h1 class="page__title">Tabs</h1><p>This component can be used sub-page navigation.</p><h2>Interactive demo</h2><sm-tab-header target="tab1"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab1"><section><h3>Audio</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section><section><h3>Video</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section></sm-tab-panels><h2>Usage</h2><pre>
<code>
&lt;sm-tab-header target="tab1"&gt;
&lt;sm-tab&gt;
@ -240,7 +240,7 @@
&lt;sm-tab&gt;Video&lt;/sm-tab&gt;
&lt;/sm-tab-header&gt;
</code>
</pre><h2>Supported attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">variant</span> ( string )</div><p>Specifies variant of sm-tab-header. Only value can be <span class="highlight">tab</span></p></div><div class="tr"><div><span class="highlight">target</span> ( string )</div><p>Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header communicates with sm-tab-panel on which tab or panel should be displayed.</p></div></section><h2>Interactive demo</h2><sm-tab-header target="tab1"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab1"><section><h3>Audio</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section><section><h3>Video</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section></sm-tab-panels><h2>Variants</h2><p><span class="highlight">tab</span> is the only other variant than default style.</p><sm-tab-header variant="tab" target="tab2"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab2"><section><h3>Audio</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section><section><h3>Video</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section></sm-tab-panels><pre>
</pre><h2>Supported attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">variant</span> ( string )</div><p>Specifies variant of sm-tab-header. Only value can be <span class="highlight">tab</span></p></div><div class="tr"><div><span class="highlight">target</span> ( string )</div><p>Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header communicates with sm-tab-panel on which tab or panel should be displayed.</p></div></section><h2>Variants</h2><p><span class="highlight">tab</span> is the only other variant than default style.</p><sm-tab-header variant="tab" target="tab2"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab2"><section><h3>Audio</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section><section><h3>Video</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section></sm-tab-panels><pre>
<code>
&lt;sm-tab-header variant="tab" target="tab2"&gt;
&lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
@ -330,7 +330,7 @@
})
&lt;/script&gt;
</code>
</pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js"></script><script src="dist/button.js"></script><script src="dist/carousel.js"></script><script src="dist/checkbox.js"></script><script src="dist/copy.js"></script><script src="dist/file-input.js"></script><script src="dist/form.js"></script><script src="dist/hamburger-menu.js"></script><script src="dist/input.js"></script><script src="dist/menu.js"></script><script src="dist/notifications.js"></script><script src="dist/popup.js"></script><script src="dist/radio.js"></script><script src="dist/select.js"></script><script src="dist/spinner.js"></script><script src="dist/strip-select.js"></script><script src="dist/switch.js"></script><script src="dist/tabs.js"></script><script src="dist/tags-input.js"></script><script src="dist/textarea.js"></script><script src="dist/text-field.js"></script><script src="dist/theme-toggle.js"></script><script id="default_ui_library">const domRefs = {};
</pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js"></script><script src="components.js"></script><script id="default_ui_library">const domRefs = {};
function getRef(elementId) {
if (!domRefs.hasOwnProperty(elementId)) {