86 lines
2.6 KiB
TypeScript
86 lines
2.6 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;
|
|
}
|
|
.layout-container {
|
|
border: 1px solid var(--dees-border);
|
|
border-radius: var(--dees-radius);
|
|
overflow: hidden;
|
|
height: 400px;
|
|
}
|
|
.demo-content {
|
|
padding: 1rem;
|
|
}
|
|
.demo-card {
|
|
background: var(--dees-card);
|
|
border: 1px solid var(--dees-border);
|
|
border-radius: var(--dees-radius);
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.demo-note {
|
|
font-size: 0.875rem;
|
|
color: var(--dees-muted-foreground);
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-section">
|
|
<h3>App Layout with Navigation</h3>
|
|
<div class="layout-container">
|
|
<dees-mobile-applayout>
|
|
<dees-mobile-header title="My App">
|
|
<dees-mobile-button slot="actions" icon variant="ghost">
|
|
<dees-mobile-icon icon="bell" size="20"></dees-mobile-icon>
|
|
</dees-mobile-button>
|
|
</dees-mobile-header>
|
|
|
|
<div class="demo-content">
|
|
<div class="demo-card">
|
|
<h4 style="margin: 0 0 0.5rem 0;">Welcome</h4>
|
|
<p style="margin: 0; color: var(--dees-muted-foreground);">
|
|
This is a demo of the app layout component with header and bottom navigation.
|
|
</p>
|
|
</div>
|
|
<div class="demo-card">
|
|
<h4 style="margin: 0 0 0.5rem 0;">Features</h4>
|
|
<ul style="margin: 0; padding-left: 1.25rem; color: var(--dees-muted-foreground);">
|
|
<li>iOS keyboard handling</li>
|
|
<li>View transitions</li>
|
|
<li>Safe area support</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<dees-mobile-navigation
|
|
slot="navigation"
|
|
activeTab="home"
|
|
.tabs=${[
|
|
{ id: 'home', icon: 'home', label: 'Home' },
|
|
{ id: 'explore', icon: 'compass', label: 'Explore' },
|
|
{ id: 'settings', icon: 'settings', label: 'Settings' }
|
|
]}
|
|
></dees-mobile-navigation>
|
|
</dees-mobile-applayout>
|
|
</div>
|
|
<p class="demo-note">
|
|
The app layout provides a grid structure with content area and bottom navigation.
|
|
It automatically hides navigation when keyboard is visible on mobile.
|
|
</p>
|
|
</div>
|
|
`;
|
|
};
|