Added Tabs demo, and made them work since this is usually overlooked in other demos.

master
Zed A. Shaw 3 years ago
parent 70c0d85015
commit 611a3b92f4
  1. 2
      public/build/bundle.css
  2. 2200
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 3
      public/code/Panels.css
  5. 41
      public/code/Tabs.css
  6. 31
      public/code/Tabs.html
  7. 3
      src/demos/Panels.svelte
  8. 96
      src/demos/Tabs.svelte
  9. 7
      src/demos/index.svelte
  10. 2
      src/routes.js
  11. 3
      src/thumbs/Panels.svelte
  12. 91
      src/thumbs/Tabs.svelte

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -25,9 +25,6 @@ panel middle {
justify-content: flex-start; justify-content: flex-start;
} }
panel middle h4 {
}
panel bottom { panel bottom {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;

@ -0,0 +1,41 @@
content {
display: flex;
flex-direction: column;
}
tabs {
margin-top: 1em;
/* added so you can see it in the display */
display: flex;
justify-content: space-evenly;
border-bottom: var(--color-accent);
}
tabs a {
text-decoration: none;
color: var(--color-text);
border-bottom: 1px solid var(--color-accent);
border-width: thin;
width: 100%;
text-align: center;
padding: 2rem 0rem 0.5rem;
}
tabs a:hover {
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
tabs a.active {
background-color: var(--color-bg-secondary);
}
panel {
display: none;
}
panel.active {
border: 1px solid var(--color-accent);
display: flex;
flex-direction: column;
padding: 1em;
}

@ -0,0 +1,31 @@
<h1>Basic Tabs</h1>
<tabs>
<a class="active">Tab1</a>
<a>Tab2</a>
<a>Tab3</a>
</tabs>
<h1>Interactive Demo</h1>
<tabs>
{#each panels as panel, i}
<a class:active={ panel.active} on:click={ () => activate(i) }>{panel.title}</a>
{/each}
</tabs>
<panels>
{#each panels as panel, i}
<panel class:active={panel.active}>
<h1>{ panel.title }</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</panel>
{/each}
</panels>

@ -30,9 +30,6 @@
justify-content: flex-start; justify-content: flex-start;
} }
panel middle h4 {
}
panel bottom { panel bottom {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;

@ -0,0 +1,96 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
let panels = [
{title: 'Panel 1', active: true},
{title: 'Panel 2', active: false},
{title: 'Panel 3', active: false},
];
const activate = (index) => {
panels.forEach((panel, i) => panel.active = index == i);
panels = panels; // for the svelte update
}
</script>
<style>
content {
display: flex;
flex-direction: column;
}
tabs {
margin-top: 1em;
/* added so you can see it in the display */
display: flex;
justify-content: space-evenly;
border-bottom: var(--color-accent);
}
tabs a {
text-decoration: none;
color: var(--color-text);
border-bottom: 1px solid var(--color-accent);
border-width: thin;
width: 100%;
text-align: center;
padding: 2rem 0rem 0.5rem;
}
tabs a:hover {
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
tabs a.active {
background-color: var(--color-bg-secondary);
}
panel {
display: none;
}
panel.active {
border: 1px solid var(--color-accent);
display: flex;
flex-direction: column;
padding: 1em;
}
</style>
<content>
<h1>Basic Tabs</h1>
<tabs>
<a class="active">Tab1</a>
<a>Tab2</a>
<a>Tab3</a>
</tabs>
<h1>Interactive Demo</h1>
<tabs>
{#each panels as panel, i}
<a class:active={ panel.active} on:click={ () => activate(i) }>{panel.title}</a>
{/each}
</tabs>
<panels>
{#each panels as panel, i}
<panel class:active={panel.active}>
<h1>{ panel.title }</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</panel>
{/each}
</panels>
</content>
<CodeView source="/code/Tabs" />

@ -9,6 +9,7 @@
import Cards from '../thumbs/Cards.svelte'; import Cards from '../thumbs/Cards.svelte';
import Panels from '../thumbs/Panels.svelte'; import Panels from '../thumbs/Panels.svelte';
import NavBar from '../thumbs/NavBar.svelte'; import NavBar from '../thumbs/NavBar.svelte';
import Tabs from '../thumbs/Tabs.svelte';
import {push} from 'svelte-spa-router'; import {push} from 'svelte-spa-router';
import { holder } from '../../lib/imgholder.js'; import { holder } from '../../lib/imgholder.js';
@ -106,9 +107,9 @@
<figcaption>Panels</figcaption> <figcaption>Panels</figcaption>
</figure> </figure>
<figure on:click={ () => push('/demos/navbar') }> <figure on:click={ () => push('/demos/tabs') }>
<NavBar /> <Tabs />
<figcaption>Nav Bar</figcaption> <figcaption>Tabs</figcaption>
</figure> </figure>
</images> </images>

@ -15,6 +15,7 @@ import Cards from "./demos/Cards.svelte";
import Panels from "./demos/Panels.svelte"; import Panels from "./demos/Panels.svelte";
import Modal from "./demos/Modal.svelte"; import Modal from "./demos/Modal.svelte";
import NavBar from "./demos/NavBar.svelte"; import NavBar from "./demos/NavBar.svelte";
import Tabs from "./demos/Tabs.svelte";
export default { export default {
"/": Home, "/": Home,
@ -31,6 +32,7 @@ export default {
"/demos/instagram": Instagram, "/demos/instagram": Instagram,
"/demos/pinterest": Pinterest, "/demos/pinterest": Pinterest,
"/demos/navbar": NavBar, "/demos/navbar": NavBar,
"/demos/tabs": Tabs,
"/demos/xoracademy": XorAcademy, "/demos/xoracademy": XorAcademy,
"/demos/xoracademy/watch": XorAcademyWatch, "/demos/xoracademy/watch": XorAcademyWatch,
"*": NotFound, "*": NotFound,

@ -29,9 +29,6 @@
justify-content: flex-start; justify-content: flex-start;
} }
panel middle h4 {
}
panel bottom { panel bottom {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;

@ -0,0 +1,91 @@
<script>
let panels = [
{title: 'Panel 1', active: true},
{title: 'Panel 2', active: false},
{title: 'Panel 3', active: false},
];
const activate = (index) => {
panels.forEach((panel, i) => panel.active = index == i);
panels = panels; // for the svelte update
}
</script>
<style>
content {
display: flex;
flex-direction: column;
}
tabs {
margin-top: 1em;
/* added so you can see it in the display */
display: flex;
justify-content: space-evenly;
border-bottom: var(--color-accent);
}
tabs a {
text-decoration: none;
color: var(--color-text);
border-bottom: 1px solid var(--color-accent);
border-width: thin;
width: 100%;
text-align: center;
padding: 2rem 0rem 0.5rem;
}
tabs a:hover {
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
tabs a.active {
background-color: var(--color-bg-secondary);
}
panel {
display: none;
}
panel.active {
border: 1px solid var(--color-accent);
display: flex;
flex-direction: column;
padding: 1em;
}
</style>
<content>
<h1>Basic Tabs</h1>
<tabs>
<a class="active">Tab1</a>
<a>Tab2</a>
<a>Tab3</a>
</tabs>
<h1>Interactive Demo</h1>
<tabs>
{#each panels as panel, i}
<a class:active={ panel.active} on:click={ () => activate(i) }>{panel.title}</a>
{/each}
</tabs>
<panels>
{#each panels as panel, i}
<panel class:active={panel.active}>
<h1>{ panel.title }</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</panel>
{/each}
</panels>
</content>
Loading…
Cancel
Save