vendomele-tabs v1.0.1

vendomele-tabs

Composant onglet pour Svelte

Installation

npm i vendomele-tabs

Utilisation

fichier: App.svelte

<script>
	import { Tabs, Tab } from 'vendomele-tabs';
</script>

<main>
	<Tabs>
		<Tab caption="Tab 01" selected>
			<h2>Content tab 01</h2>
		</Tab>
		<Tab caption="Tab 02">
			<h2>Content tab 02</h2>
		</Tab>
		<Tab caption="Tab 03">
			<h2>Content tab 03</h2>
		</Tab>
	</Tabs>
</main>

fichier: global.css

.tab-btn {
	margin-bottom: 0;
	background: none;
	border: none;
	color: #ccc;
	cursor: pointer;
}

.tab-btn-selected {
	color: #333;
	border-bottom: 2px solid;
}

Résultat

Propriétés du composant Tab

• caption: intitulé s'affichant dans l'entête de l'onglet
• selected: définir l'onglet à sélectionner par défaut
• index: définir l'ordre des onglets

Exemple d'utilisation de la propriété index

fichier: App.svelte

<script>
	import { Tabs, Tab } from 'vendomele-tabs';
	let checked = false;
</script>

<main>
	<input type="checkbox" bind:checked>
	<Tabs>
		<Tab caption="Tab 01" selected>
			<h2>Content tab 01</h2>
		</Tab>
		{#if checked}
		<Tab caption="Tab 02" index=1>
			<h2>Content tab 02</h2>
		</Tab>
		{/if}
		<Tab caption="Tab 03">
			<h2>Content tab 03</h2>
		</Tab>
	</Tabs>
</main>

Résultat

Les classes CSS

Afin d'appliquer des styles, définir dans un fichier CSS les classes suivantes:

• Contrôleur onglets: tabs
• Conteneur d'onglet: tabs-panel
• La zone contenant les entêtes: tab-captions
• Entête: tab-btn, tab-btn-selected

  Exemple

  fichier: global.css

  .tabs {
  	border: 1px solid black;
  	width: 30%;
  	margin: 0 auto;
  }

.tabs-panel { background-color: #99999961; border-top: 1px solid black; }

.tab-captions { background: wheat; display: flex; }

.tab-btn { margin-bottom: 0; background: none; width: 100px; border: none; color: #ccc; cursor: pointer; }

.tab-btn-selected { color: #333; border-bottom: 2px solid; }

### Résultat
[![vendomele-tabs-003.png](https://i.postimg.cc/mhxD0JMz/vendomele-tabs-003.png)](https://postimg.cc/jnXtf8Mt)