88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
import { injectCssVariables } from '../../00variables.js';
|
|
|
|
export const demoFunc = () => {
|
|
injectCssVariables();
|
|
return html`
|
|
<style>
|
|
.demo-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
.demo-section h3 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 0.875rem;
|
|
color: var(--dees-muted-foreground);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.nav-container {
|
|
border: 1px solid var(--dees-border);
|
|
border-radius: var(--dees-radius);
|
|
overflow: hidden;
|
|
}
|
|
.demo-note {
|
|
font-size: 0.875rem;
|
|
color: var(--dees-muted-foreground);
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-section">
|
|
<h3>Bottom Navigation</h3>
|
|
<div class="nav-container">
|
|
<dees-mobile-navigation
|
|
activeTab="home"
|
|
.tabs=${[
|
|
{ id: 'home', icon: 'home', label: 'Home' },
|
|
{ id: 'search', icon: 'search', label: 'Search' },
|
|
{ id: 'favorites', icon: 'heart', label: 'Favorites' },
|
|
{ id: 'profile', icon: 'user', label: 'Profile' }
|
|
]}
|
|
@tab-change=${(e: CustomEvent) => {
|
|
const nav = e.target as any;
|
|
nav.activeTab = e.detail.tab;
|
|
}}
|
|
></dees-mobile-navigation>
|
|
</div>
|
|
<p class="demo-note">Click tabs to switch between them.</p>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Navigation with Badges</h3>
|
|
<div class="nav-container">
|
|
<dees-mobile-navigation
|
|
activeTab="inbox"
|
|
.tabs=${[
|
|
{ id: 'inbox', icon: 'inbox', label: 'Inbox', badge: 3 },
|
|
{ id: 'sent', icon: 'send', label: 'Sent' },
|
|
{ id: 'drafts', icon: 'file-text', label: 'Drafts', badge: 1 },
|
|
{ id: 'trash', icon: 'trash-2', label: 'Trash' }
|
|
]}
|
|
@tab-change=${(e: CustomEvent) => {
|
|
const nav = e.target as any;
|
|
nav.activeTab = e.detail.tab;
|
|
}}
|
|
></dees-mobile-navigation>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Three Tab Navigation</h3>
|
|
<div class="nav-container">
|
|
<dees-mobile-navigation
|
|
activeTab="lists"
|
|
.tabs=${[
|
|
{ id: 'lists', icon: 'list', label: 'Lists' },
|
|
{ id: 'coupons', icon: 'ticket', label: 'Coupons' },
|
|
{ id: 'settings', icon: 'settings', label: 'Settings' }
|
|
]}
|
|
@tab-change=${(e: CustomEvent) => {
|
|
const nav = e.target as any;
|
|
nav.activeTab = e.detail.tab;
|
|
}}
|
|
></dees-mobile-navigation>
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|