Materiel
Tabs
Materiel Design
Template
Html
Integration Tabs
Dashboard
Tabs Materiel Design optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Tabs Materiel 2026 23040043 | AngularForAll</title>
<!-- Material Web Components (Google) -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Material Web -->
<script type="importmap">
{
"imports": {
"@material/web/": "https://esm.run/@material/web/"
}
}
</script>
<script type="module">
import '@material/web/all.js';
import { styles as typescaleStyles } from '@material/web/typography/md-typescale-styles.js';
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
min-height: 100vh;
padding: 2rem 1.5rem;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* En-tête Material */
.header {
margin-bottom: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.header h1 {
font-size: 3rem;
font-weight: 400;
color: #1a1a1a;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 12px;
}
.material-chip {
background: #1a1a1a;
color: white;
padding: 0.5rem 1.5rem;
border-radius: 40px;
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Sections */
.section-title {
font-size: 1.8rem;
font-weight: 400;
margin: 3rem 0 1.5rem 0;
color: #1a1a1a;
display: flex;
align-items: center;
gap: 1rem;
}
.section-title material-icon {
font-size: 2rem;
color: #6750a4;
}
/* Grille de cartes Material */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1.5rem;
}
/* Cartes Material Design (élévation) */
.material-card {
background: #fff;
border-radius: 28px;
padding: 1.5rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
transition: box-shadow 0.2s, transform 0.2s;
}
.material-card:hover {
box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03);
transform: translateY(-2px);
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.card-header h3 {
font-size: 1.4rem;
font-weight: 500;
color: #1a1a1a;
}
/* Conteneurs de contenu pour tabs */
.tab-content-panel {
margin-top: 20px;
padding: 16px;
background: #f8f9fa;
border-radius: 20px;
min-height: 120px;
color: #444;
}
/* Styles personnalisés pour les variantes Material */
.elevated-tabs {
background: #f3f0fc;
padding: 8px;
border-radius: 60px;
}
.vertical-container {
display: flex;
gap: 20px;
}
/* Adaptation responsive */
@media (max-width: 600px) {
body { padding: 1rem; }
.header h1 { font-size: 2rem; }
.card-grid { grid-template-columns: 1fr; }
.vertical-container { flex-direction: column; }
}
</style>
</head>
<body>
<div class="container">
<!-- En-tête Material -->
<div class="header">
<h1>
<material-icon style="font-size: 2.5rem; color: #6750a4;">tab</material-icon>
10 Tabs Material
</h1>
<div class="material-chip">
<material-icon style="font-size: 1rem; margin-right: 6px; vertical-align: middle;">auto_awesome</material-icon>
Google Material Web
</div>
</div>
<!-- ========== HORIZONTAL TABS (5) ========== -->
<div class="section-title">
<material-icon>horizontal_split</material-icon>
Tabs horizontaux
</div>
<div class="card-grid">
<!-- 1. Tabs primaires Material (style par défaut) -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #6750a4;">looks_one</material-icon>
<h3>Tabs primaires</h3>
</div>
<md-tabs>
<md-primary-tab selected>
<material-icon slot="icon">home</material-icon>
Accueil
</md-primary-tab>
<md-primary-tab>
<material-icon slot="icon">person</material-icon>
Profil
</md-primary-tab>
<md-primary-tab>
<material-icon slot="icon">settings</material-icon>
Paramètres
</md-primary-tab>
</md-tabs>
<div class="tab-content-panel">
<div style="font-weight: 500; margin-bottom: 8px;">🏠 Accueil</div>
<p>Bienvenue sur votre tableau de bord. Retrouvez ici l'essentiel de vos activités.</p>
</div>
</div>
<!-- 2. Tabs secondaires avec icônes -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #b3261e;">looks_two</material-icon>
<h3>Tabs secondaires</h3>
</div>
<md-tabs>
<md-secondary-tab selected>
<material-icon slot="icon">dashboard</material-icon>
Dashboard
</md-secondary-tab>
<md-secondary-tab>
<material-icon slot="icon">group</material-icon>
Équipe
</md-secondary-tab>
<md-secondary-tab>
<material-icon slot="icon">folder</material-icon>
Projets
</md-secondary-tab>
</md-tabs>
<div class="tab-content-panel">
<div style="font-weight: 500; margin-bottom: 8px;">📊 Dashboard</div>
<p>Vue d'ensemble de vos statistiques et métriques importantes.</p>
</div>
</div>
<!-- 3. Tabs avec badges et compteurs -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #006e26;">looks_3</material-icon>
<h3>Avec badges</h3>
</div>
<style>
.badge-tab {
display: flex;
align-items: center;
gap: 8px;
}
.md-badge {
background: #6750a4;
color: white;
border-radius: 100px;
padding: 2px 8px;
font-size: 0.7rem;
font-weight: 500;
margin-left: 4px;
}
</style>
<md-tabs>
<md-primary-tab selected>
<div class="badge-tab">
<material-icon>inbox</material-icon>
Messages
<span class="md-badge">14</span>
</div>
</md-primary-tab>
<md-primary-tab>
<div class="badge-tab">
<material-icon>notifications</material-icon>
Notifications
<span class="md-badge" style="background: #b3261e;">7</span>
</div>
</md-primary-tab>
<md-primary-tab>
<div class="badge-tab">
<material-icon>archive</material-icon>
Archives
</div>
</md-primary-tab>
</md-tabs>
<div class="tab-content-panel">
<div style="font-weight: 500; margin-bottom: 8px;">📨 Messages (14 non lus)</div>
<p>Vous avez 14 nouveaux messages dans votre boîte de réception.</p>
</div>
</div>
<!-- 4. Tabs avec indicateur de progression -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #9c4040;">looks_4</material-icon>
<h3>Avec progression</h3>
</div>
<md-tabs>
<md-primary-tab selected>
<material-icon>task</material-icon>
À faire (3/5)
</md-primary-tab>
<md-primary-tab>
<material-icon>pending</material-icon>
En cours (2/4)
</md-primary-tab>
<md-primary-tab>
<material-icon>check_circle</material-icon>
Terminé (8)
</md-primary-tab>
</md-tabs>
<div class="tab-content-panel">
<div style="font-weight: 500; margin-bottom: 8px;">✅ Tâches à faire</div>
<md-linear-progress value="0.6" style="margin: 12px 0; width: 100%;"></md-linear-progress>
<p>3 tâches complétées sur 5. Continuez votre progression !</p>
</div>
</div>
<!-- 5. Tabs avec icônes personnalisées (Material Symbols Outlined) -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #006398;">looks_5</material-icon>
<h3>Material Symbols</h3>
</div>
<md-tabs>
<md-secondary-tab selected>
<span class="material-symbols-outlined" style="font-size: 20px; margin-right: 8px;">calendar_month</span>
Calendrier
</md-secondary-tab>
<md-secondary-tab>
<span class="material-symbols-outlined" style="font-size: 20px; margin-right: 8px;">analytics</span>
Statistiques
</md-secondary-tab>
<md-secondary-tab>
<span class="material-symbols-outlined" style="font-size: 20px; margin-right: 8px;">favorite</span>
Favoris
</md-secondary-tab>
</md-tabs>
<div class="tab-content-panel">
<div style="font-weight: 500; margin-bottom: 8px;">📅 Calendrier</div>
<p>Vos événements et rendez-vous à venir cette semaine.</p>
</div>
</div>
</div>
<!-- ========== VERTICAL TABS (5) ========== -->
<div class="section-title" style="margin-top: 4rem;">
<material-icon>vertical_split</material-icon>
Tabs verticaux
</div>
<div class="card-grid">
<!-- 6. Tabs verticaux avec navigation à gauche -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #6750a4;">looks_6</material-icon>
<h3>Vertical gauche</h3>
</div>
<div class="vertical-container">
<md-tabs style="flex-direction: column; width: 160px; --md-tabs-container-height: auto;">
<md-primary-tab selected style="justify-content: flex-start;">
<material-icon slot="icon">info</material-icon>
Infos
</md-primary-tab>
<md-primary-tab style="justify-content: flex-start;">
<material-icon slot="icon">security</material-icon>
Sécurité
</md-primary-tab>
<md-primary-tab style="justify-content: flex-start;">
<material-icon slot="icon">palette</material-icon>
Apparence
</md-primary-tab>
</md-tabs>
<div class="tab-content-panel" style="flex: 1; margin-top: 0;">
<div style="font-weight: 500; margin-bottom: 8px;">ℹ️ Informations</div>
<p>Informations générales du compte et préférences utilisateur.</p>
</div>
</div>
</div>
<!-- 7. Tabs verticaux avec navigation à droite -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #b3261e;">looks_7</material-icon>
<h3>Vertical droite</h3>
</div>
<div class="vertical-container" style="flex-direction: row-reverse;">
<md-tabs style="flex-direction: column; width: 160px; --md-tabs-container-height: auto;">
<md-secondary-tab selected style="justify-content: flex-start;">
<material-icon slot="icon">drafts</material-icon>
Brouillons
</md-secondary-tab>
<md-secondary-tab style="justify-content: flex-start;">
<material-icon slot="icon">send</material-icon>
Envoyés
</md-secondary-tab>
<md-secondary-tab style="justify-content: flex-start;">
<material-icon slot="icon">delete</material-icon>
Corbeille
</md-secondary-tab>
</md-tabs>
<div class="tab-content-panel" style="flex: 1; margin-top: 0;">
<div style="font-weight: 500; margin-bottom: 8px;">📝 Brouillons</div>
<p>Messages en cours d'écriture. 3 brouillons sauvegardés.</p>
</div>
</div>
</div>
<!-- 8. Tabs verticaux avec navigation en liste -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #006e26;">looks_8</material-icon>
<h3>Style navigation</h3>
</div>
<div class="vertical-container">
<md-list style="width: 180px; background: #f3f0fc; border-radius: 20px; padding: 8px;">
<md-list-item type="button" selected style="border-radius: 16px; margin-bottom: 4px;">
<material-icon slot="start">home</material-icon>
Accueil
</md-list-item>
<md-list-item type="button" style="border-radius: 16px; margin-bottom: 4px;">
<material-icon slot="start">explore</material-icon>
Explorer
</md-list-item>
<md-list-item type="button" style="border-radius: 16px;">
<material-icon slot="start">bookmark</material-icon>
Sauvegardés
</md-list-item>
</md-list>
<div class="tab-content-panel" style="flex: 1; margin-top: 0;">
<div style="font-weight: 500; margin-bottom: 8px;">🏠 Accueil</div>
<p>Fil d'actualité personnalisé selon vos centres d'intérêt.</p>
</div>
</div>
</div>
<!-- 9. Tabs verticaux avec contenu riche (élévation) -->
<div class="material-card">
<div class="card-header">
<material-icon style="color: #9c4040;">looks_9</material-icon>
<h3>Contenu enrichi</h3>
</div>
<div class="vertical-container">
<div style="display: flex; flex-direction: column; gap: 8px; width: 180px;">
<md-elevated-button selected style="--md-elevated-button-container-height: 48px; justify-content: flex-start;">
<material-icon slot="icon">trophy</material-icon>
Niveau 1
</md-elevated-button>
<md-elevated-button style="--md-elevated-button-container-height: 48px; justify-content: flex-start;">
<material-icon slot="icon">diamond</material-icon>
Niveau 2
</md-elevated-button>
<md-elevated-button style="--md-elevated-button-container-height: 48px; justify-content: flex-start;">
<material-icon slot="icon">stars</material-icon>
Premium
</md-elevated-button>
</div>
<div class="tab-content-panel" style="flex: 1; margin-top: 0; background: linear-gradient(135deg, #f3f0fc, #fff);">
<div style="font-weight: 500; margin-bottom: 12px;">🏆 Niveau 1</div>
<p>Accès aux fonctionnalités de base. Débloquez plus d'options avec les niveaux supérieurs.</p>
<md-linear-progress value="0.33" style="margin-top: 16px;"></md-linear-progress>
</div>
</div>
</div>
<!-- 10. Tabs verticaux avec chips et filtres -->
<div class="material-card" style="grid-column: span 1;">
<div class="card-header">
<material-icon style="color: #006398;">filter_alt</material-icon>
<h3>Avec chips et filtres</h3>
</div>
<div class="vertical-container">
<div style="display: flex; flex-direction: column; gap: 12px; width: 200px;">
<md-tabs style="flex-direction: column; --md-tabs-container-height: auto;">
<md-primary-tab selected style="justify-content: space-between;">
<span style="display: flex; align-items: center;">
<material-icon slot="icon">inbox</material-icon>
Tous
</span>
<span class="md-badge" style="background: #6750a4;">24</span>
</md-primary-tab>
<md-primary-tab style="justify-content: space-between;">
<span style="display: flex; align-items: center;">
<material-icon slot="icon">label_important</material-icon>
Importants
</span>
<span class="md-badge" style="background: #b3261e;">7</span>
</md-primary-tab>
<md-primary-tab style="justify-content: space-between;">
<span style="display: flex; align-items: center;">
<material-icon slot="icon">schedule</material-icon>
En attente
</span>
<span class="md-badge" style="background: #006e26;">5</span>
</md-primary-tab>
</md-tabs>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;">
<md-filter-chip label="Projets" selected></md-filter-chip>
<md-filter-chip label="Équipe"></md-filter-chip>
<md-filter-chip label="Clients"></md-filter-chip>
<md-filter-chip label="Archives"></md-filter-chip>
</div>
</div>
<div class="tab-content-panel" style="flex: 1; margin-top: 0;">
<div style="font-weight: 500; margin-bottom: 12px;">📋 Tous les éléments (24)</div>
<p>Vue d'ensemble de tous vos éléments, projets et conversations.</p>
<div style="display: flex; gap: 8px; margin-top: 16px;">
<md-filled-button>Nouveau</md-filled-button>
<md-outlined-button>Filtrer</md-outlined-button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div style="margin-top: 4rem; padding-top: 2rem; text-align: center; color: #5e5e5e; border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px;">
<material-icon style="font-size: 1.2rem;">auto_awesome</material-icon>
10 exemples d'onglets Material Design · Google Material Web Components · Chaque design unique
<material-icon style="font-size: 1.2rem;">auto_awesome</material-icon>
</div>
</div>
<!-- Script pour la gestion dynamique du contenu des tabs -->
<script type="module">
import '@material/web/all.js';
// Simuler le changement de contenu pour la démo (car Material Tabs gère l'UI mais pas le contenu)
// Dans une vraie application, utilisez des événements ou un routeur.
document.querySelectorAll('md-tabs').forEach((tabs, index) => {
tabs.addEventListener('change', (e) => {
const selectedIndex = e.detail.index;
const card = tabs.closest('.material-card');
if (!card) return;
const panel = card.querySelector('.tab-content-panel');
if (!panel) return;
const tabTitles = [
// Tabs 1-5 (horizontaux)
[
{ title: '🏠 Accueil', content: 'Bienvenue sur votre tableau de bord. Retrouvez ici l\'essentiel de vos activités.' },
{ title: '👤 Profil', content: 'Gérez vos informations personnelles et préférences.' },
{ title: '⚙️ Paramètres', content: 'Configurez les paramètres de votre compte.' }
],
[
{ title: '📊 Dashboard', content: 'Vue d\'ensemble de vos statistiques et métriques importantes.' },
{ title: '👥 Équipe', content: 'Gérez les membres de votre équipe et leurs permissions.' },
{ title: '📁 Projets', content: 'Liste et suivi de vos projets en cours.' }
],
[
{ title: '📨 Messages (14 non lus)', content: 'Vous avez 14 nouveaux messages dans votre boîte de réception.' },
{ title: '🔔 Notifications (7)', content: '7 notifications importantes requièrent votre attention.' },
{ title: '📦 Archives', content: 'Consultez vos messages et fichiers archivés.' }
],
[
{ title: '✅ Tâches à faire', content: '3 tâches complétées sur 5. Continuez votre progression !', progress: 0.6 },
{ title: '⏳ En cours', content: '2 tâches en cours de traitement sur 4.', progress: 0.5 },
{ title: '🎉 Terminé', content: '8 tâches terminées avec succès.', progress: 1.0 }
],
[
{ title: '📅 Calendrier', content: 'Vos événements et rendez-vous à venir cette semaine.' },
{ title: '📈 Statistiques', content: 'Analyse détaillée de vos performances.' },
{ title: '⭐ Favoris', content: 'Vos éléments et pages mis en favoris.' }
],
// Tabs 6-10 (verticaux)
[
{ title: 'ℹ️ Informations', content: 'Informations générales du compte et préférences utilisateur.' },
{ title: '🔒 Sécurité', content: 'Paramètres de sécurité et authentification à deux facteurs.' },
{ title: '🎨 Apparence', content: 'Personnalisez l\'apparence de l\'interface.' }
],
[
{ title: '📝 Brouillons', content: 'Messages en cours d\'écriture. 3 brouillons sauvegardés.' },
{ title: '📤 Envoyés', content: 'Historique des messages envoyés récemment.' },
{ title: '🗑️ Corbeille', content: 'Éléments supprimés. Récupération possible sous 30 jours.' }
],
[
{ title: '🏠 Accueil', content: 'Fil d\'actualité personnalisé selon vos centres d\'intérêt.' },
{ title: '🔍 Explorer', content: 'Découvrez de nouveaux contenus et tendances.' },
{ title: '🔖 Sauvegardés', content: 'Vos articles et contenus sauvegardés pour plus tard.' }
],
[
{ title: '🏆 Niveau 1', content: 'Accès aux fonctionnalités de base. Débloquez plus d\'options avec les niveaux supérieurs.' },
{ title: '💎 Niveau 2', content: 'Fonctionnalités avancées et analyses détaillées.' },
{ title: '✨ Premium', content: 'Accès illimité à toutes les fonctionnalités et support prioritaire.' }
],
[
{ title: '📋 Tous les éléments (24)', content: 'Vue d\'ensemble de tous vos éléments, projets et conversations.' },
{ title: '⭐ Importants (7)', content: 'Éléments marqués comme importants nécessitant une attention.' },
{ title: '⏰ En attente (5)', content: 'Éléments en attente de traitement ou de réponse.' }
]
];
const data = tabTitles[index]?.[selectedIndex];
if (data) {
panel.innerHTML = `
<div style="font-weight: 500; margin-bottom: 8px;">${data.title}</div>
<p>${data.content}</p>
${data.progress !== undefined ? `<md-linear-progress value="${data.progress}" style="margin-top: 16px;"></md-linear-progress>` : ''}
`;
}
});
});
// Gérer les list-items comme tabs (exemple 8)
document.querySelectorAll('md-list-item[type="button"]').forEach((item, idx) => {
item.addEventListener('click', () => {
const parent = item.closest('.vertical-container');
const panel = parent?.querySelector('.tab-content-panel');
const items = parent?.querySelectorAll('md-list-item');
items?.forEach(i => i.removeAttribute('selected'));
item.setAttribute('selected', '');
if (panel) {
const titles = ['🏠 Accueil', '🔍 Explorer', '🔖 Sauvegardés'];
const contents = [
'Fil d\'actualité personnalisé selon vos centres d\'intérêt.',
'Découvrez de nouveaux contenus et tendances.',
'Vos articles et contenus sauvegardés pour plus tard.'
];
panel.innerHTML = `
<div style="font-weight: 500; margin-bottom: 8px;">${titles[idx]}</div>
<p>${contents[idx]}</p>
`;
}
});
});
// Gérer les elevated-buttons comme tabs (exemple 9)
document.querySelectorAll('.material-card .vertical-container md-elevated-button').forEach((btn, idx) => {
btn.addEventListener('click', () => {
const parent = btn.closest('.vertical-container');
const panel = parent?.querySelector('.tab-content-panel');
const buttons = parent?.querySelectorAll('md-elevated-button');
buttons?.forEach(b => b.removeAttribute('selected'));
btn.setAttribute('selected', '');
if (panel) {
const titles = ['🏆 Niveau 1', '💎 Niveau 2', '✨ Premium'];
const contents = [
'Accès aux fonctionnalités de base. Débloquez plus d\'options avec les niveaux supérieurs.',
'Fonctionnalités avancées et analyses détaillées.',
'Accès illimité à toutes les fonctionnalités et support prioritaire.'
];
const progressValues = [0.33, 0.66, 1.0];
panel.innerHTML = `
<div style="font-weight: 500; margin-bottom: 12px;">${titles[idx]}</div>
<p>${contents[idx]}</p>
<md-linear-progress value="${progressValues[idx]}" style="margin-top: 16px;"></md-linear-progress>
`;
}
});
});
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur