69 lines
2.0 KiB
TypeScript
69 lines
2.0 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;
|
||
|
|
}
|
||
|
|
.header-container {
|
||
|
|
border: 1px solid var(--dees-border);
|
||
|
|
border-radius: var(--dees-radius);
|
||
|
|
overflow: hidden;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Basic Header</h3>
|
||
|
|
<div class="header-container">
|
||
|
|
<dees-mobile-header title="Page Title"></dees-mobile-header>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Header with Subtitle</h3>
|
||
|
|
<div class="header-container">
|
||
|
|
<dees-mobile-header title="Settings" subtitle="Manage your preferences"></dees-mobile-header>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Header with Back Action</h3>
|
||
|
|
<div class="header-container">
|
||
|
|
<dees-mobile-header title="Item Details">
|
||
|
|
<dees-mobile-button slot="left-action" icon variant="ghost">
|
||
|
|
<dees-mobile-icon icon="arrow-left" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-button>
|
||
|
|
</dees-mobile-header>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Header with Actions</h3>
|
||
|
|
<div class="header-container">
|
||
|
|
<dees-mobile-header title="Shopping List">
|
||
|
|
<dees-mobile-button slot="left-action" icon variant="ghost">
|
||
|
|
<dees-mobile-icon icon="menu" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-button>
|
||
|
|
<dees-mobile-button slot="actions" icon variant="ghost">
|
||
|
|
<dees-mobile-icon icon="search" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-button>
|
||
|
|
<dees-mobile-button slot="actions" icon variant="ghost">
|
||
|
|
<dees-mobile-icon icon="plus" size="20"></dees-mobile-icon>
|
||
|
|
</dees-mobile-button>
|
||
|
|
</dees-mobile-header>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
};
|