New Tabs Component added.

example/src/pages/tabs/Tabs.svelte

@@ -0,0 +1,120 @@
+<DemoPanel>
+	<div style="flex:1; padding:0 10px; background:#eee; background: var(--bg-panel); width:100%;">
+		<Tabs tabNames={['Tab 1', 'Tab 2', 'Tab 3']}>
+			<Tab>
+				<div class="tabcontent">Content 1...</div>
+			</Tab>
+
+			<Tab>
+				<div class="tabcontent">Content 2...</div>
+			</Tab>
+
+			<Tab>
+				<div class="tabcontent">Content 3...</div>
+			</Tab>			
+		</Tabs>
+
+        <Tabs tabNames={tabs} activeTab={activetab} on:change={(e)=>{ tabChange(e) }} style="margin-top:36px">
+		{#each tabs as tab, i (tab)}
+			<Tab>
+				<div class="tabcontent">
+					<div>{tab} content</div>
+					<Button color='primary' outlined on:click={()=> {remove(tab)} } style="margin-top:24px">Remove Tab</Button>
+				</div>
+			</Tab>
+		{/each}
+        </Tabs>
+
+		<div class="tabpropchange">
+			<Button color='primary' outlined on:click={()=> {add('Tab ' + ++tabCounter)} } style="margin:24px 0">Add Tab</Button>
+
+			<div>Change active tab</div>
+			<input type="text" bind:value={activetab} style="width:113px" />
+		</div>
+	</div>
+
+	<div slot="code">
+		<div>
+			{@html code}
+		</div>
+	</div>
+</DemoPanel>
+
+<Description>
+	{@html doc}
+</Description>
+
+<Properties data={properties} />
+
+<Properties data={custom}>
+	<h4 slot="name">CSS custom properties</h4>
+</Properties>
+
+<script>
+	import { Tabs, Tab } from '/../../src';
+	import { Button } from '/../../src';
+	import { DemoPanel, Play, Description, Properties } from '/components/demo';
+
+	import code from './code.md';
+	import doc from './doc.md';
+	import properties from './props';
+	import custom from './custom';
+
+	let label = 'Label';
+	let required = true;
+	let value = '';
+	let error = '';
+	let message = 'help message';
+	let messagePersist = false;
+	let outlined = false;
+	let filled = false;
+	let readonly = false;
+	let disabled = false;
+
+	let type = 'default';
+
+	let tabCounter = 5;
+	let activetab = 0;
+
+	let tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];
+
+	$: outlined = type === 'outlined';
+	$: filled = type === 'filled';
+
+	function remove(tabName) {
+		tabs = tabs.filter(tab => tab !== tabName);
+	}
+
+	function add(tabName) {
+		tabs = [...tabs, tabName];
+	}	
+
+	function tabChange (e) {
+		//console.log(e.detail.activeTab);
+	}
+</script>
+
+<style>
+	input {
+		width: 100%;
+		font-family: inherit;
+		font-size: 16px !important;
+		color: var(--color);
+		background: var(--bg-color);
+		padding: 6px;
+		margin: 4px 0 4px 0;
+		border: 1px solid var(--divider);
+		border-radius: 2px;
+	}
+
+	.tabcontent {
+		padding: 16px;
+		border: 1px solid #ddd;
+	}
+
+	.tabpropchange {
+		align-items:center;
+		display:flex;
+		flex-flow:column
+	}
+</style>

example/src/pages/tabs/code.md

@@ -0,0 +1,68 @@
+```xml
+<Tabs tabNames={['Tab 1', 'Tab 2', 'Tab 3']}>
+	<Tab>
+		<div class="tabcontent">Content 1...</div>
+	</Tab>
+
+	<Tab>
+		<div class="tabcontent">Content 2...</div>
+	</Tab>
+
+	<Tab>
+		<div class="tabcontent">Content 3...</div>
+	</Tab>			
+</Tabs>
+
+<Tabs tabNames={tabs} activeTab={activetab} on:change={(e)=>{ tabChange(e) }} style="margin-top:36px">
+	{#each tabs as tab, i (tab)}
+		<Tab>
+			<div class="tabcontent">
+				<div>{tab} content</div>
+				<Button color='primary' on:click={()=> {remove(tab)} } style="margin-top:24px">Remove Tab</Button>
+			</div>
+		</Tab>
+	{/each}
+</Tabs>
+
+<div class="tabpropchange">
+	<Button color='primary' on:click={()=> {add('Tab ' + ++tabCounter)} } style="margin:24px 0">Add Tab</Button>
+
+	<div>Change active tab</div>
+	<input type="text" bind:value={activetab} style="width:100px" />
+</div>
+
+
+<script>
+	import { Tabs, Tab, Button } from 'svelte-mui';
+
+	let tabCounter = 5;
+	let activetab = 0;
+
+	let tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];
+
+	function remove(tabName) {
+		tabs = tabs.filter(tab => tab !== tabName);
+	}
+
+	function add(tabName) {
+		tabs = [...tabs, tabName];
+	}	
+
+	function tabChange (e) {
+		console.log(e.detail.activeTab);
+	}
+</script>
+
+<style>
+	.tabcontent {
+		padding: 16px;
+		border: 1px solid #ddd;
+	}
+
+	.tabpropchange {
+		align-items:center;
+		display:flex;
+		flex-flow:column
+	}
+</style>
+```

example/src/pages/tabs/custom.js

@@ -0,0 +1,12 @@
+export default [
+	{
+		name: '--color',
+		def: '#333',
+		desc: '.tabbutton color, hover background',
+	},
+	{
+		name: '--primary',
+		def: '#1976d2',
+		desc: '.tabbuttonactive, hover background, .tabindicator',
+	},
+];

example/src/pages/tabs/doc.md

@@ -0,0 +1,16 @@
+Tabs specifiy grouped content on same level chosen one by one.
+There are two components. The wrapper **Tabs** component and the individual **Tab** component.
+
+If the number of tabs overflow its wrapper, the tab names will have swipe/drag capability enabled.
+
+#### HTMLElement attributes
+
+You can use HTMLElement attributes, like
+
+`id`, `style`, `data-*` and so on
+
+#### Events
+`change` - When a tab is clicked, it despatches the custom event **change**. 
+event.detail.activeTab has the current active tab number.
+
+Any HTMLElement events

example/src/pages/tabs/index.js

@@ -0,0 +1,3 @@
+import Tabs from './Tabs.svelte';
+
+export default Tabs;

example/src/pages/tabs/props.js

@@ -0,0 +1,20 @@
+export default [
+	{
+		name: 'tabNames',
+		def: "''",
+		type: 'Array of strings',
+		desc: 'Array of names for each tab',
+	},
+	{
+		name: 'activeTab',
+		def: '0',
+		type: 'number',
+		desc: 'Optional active tab number for Tabs component.',
+	},
+	{
+		name: 'class',
+		def: "''",
+		type: 'string',
+		desc: 'Custom global CSS class name',
+	}
+];

example/src/sitenav.js

@@ -14,6 +14,7 @@ import Ripple from '/pages/ripple';
 import Sidepanel from '/pages/sidepanel';
 import Snackbar from '/pages/snackbar';
 import Textfield from '/pages/textfield';
+import Tabs from '/pages/tabs';
 import { NotFound } from '/pages/errors';
 
 let routes = [
@@ -96,6 +97,11 @@ let routes = [
 		component: Textfield,
 		name: 'Textfield',
 	},
+	{
+		path: '/tabs',
+		component: Tabs,
+		name: 'Tabs',
+	},	
 	{
 		path: '*',
 		component: NotFound,

src/Tab.svelte

@@ -0,0 +1,31 @@
+<div class="tabcontent-page {className}" {style} {...attrs} use:events>
+	<slot></slot>
+</div>
+
+<script>
+	import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
+	import { current_component } from 'svelte/internal';
+	import { getEventsAction } from './lib/events';
+
+	const events = getEventsAction(current_component);
+
+	export { className as class, style };
+
+	let className = '';
+	let style = null;
+
+    let attrs = {};
+
+	$: {
+		/* eslint-disable no-unused-vars */
+		const {	style, ...other	} = $$props;
+		attrs = other;
+	}
+</script>
+
+<style>
+    .tabcontent-page {
+        width: 100%;
+        flex: 1 0 100%;
+    }
+</style>