ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(tabs): add demo for nested tabs

Browse source
This commit is contained in:
Thomas Allmer 2020-09-30 15:38:07 +02:00 committed by Thomas Allmer
parent bef7d961a7
commit 4c33c0bd1c
1 changed files with 29 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/tabs/README.md
View file

@ -84,6 +84,35 @@ export const slotsOrder = () => html`
`; `;
``` ```
### Nesting tabs
You can include tabs within tabs
```js preview-story
export const nestedTabs = () => html`
<lion-tabs>
<button slot="tab">Movies</button>
<button slot="tab">Work</button>
<div slot="panel">
<p>Find some more info about our favorite movies:</p>
<lion-tabs>
<button slot="tab">Info about Cars</button>
<button slot="tab">Info about Toy Story</button>
<p slot="panel">
Cars is a 2006 American computer-animated comedy film produced by Pixar Animation Studios
and released by Walt Disney Pictures.
</p>
<p slot="panel">
The feature film directorial debut of John Lasseter, it was the first entirely
computer-animated feature film, as well as the first feature film from Pixar.
</p>
</lion-tabs>
</div>
<p slot="panel">Work page that showcases our work.</p>
</lion-tabs>
`;
```
### Distribute New Elements ### Distribute New Elements
Below, we demonstrate on how you could dynamically add new tab + panels. Below, we demonstrate on how you could dynamically add new tab + panels.