81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
|
import { html, css, cssManager } from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
export const demoFunc = () => html`
|
||
|
|
<style>
|
||
|
|
${css`
|
||
|
|
.demo-background {
|
||
|
|
padding: 24px;
|
||
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#0a0a0a')};
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-layout {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.grid-layout {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-background">
|
||
|
|
<div class="demo-container">
|
||
|
|
<dees-panel .title=${'Panel Component'}>
|
||
|
|
<p>The panel component automatically follows the theme and provides consistent styling for grouped content.</p>
|
||
|
|
<p>It's perfect for creating sections in your application with proper spacing and borders.</p>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel .title=${'Panel with Subtitle'} .subtitle=${'Additional context information'}>
|
||
|
|
<p>Panels can have both a title and subtitle to provide more context.</p>
|
||
|
|
<p>The subtitle appears in a smaller, muted text below the title.</p>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<div class="grid-layout">
|
||
|
|
<dees-panel .title=${'Feature 1'}>
|
||
|
|
<p>Grid layouts work great with panels for creating dashboards and feature sections.</p>
|
||
|
|
<dees-button>Action</dees-button>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel .title=${'Feature 2'}>
|
||
|
|
<p>Each panel maintains consistent spacing and styling.</p>
|
||
|
|
<dees-button>Another Action</dees-button>
|
||
|
|
</dees-panel>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<dees-panel .title=${'Complex Content'}>
|
||
|
|
<h4>Nested Elements</h4>
|
||
|
|
<p>Panels can contain any type of content:</p>
|
||
|
|
<ul>
|
||
|
|
<li>Text and paragraphs</li>
|
||
|
|
<li>Lists and tables</li>
|
||
|
|
<li>Form inputs</li>
|
||
|
|
<li>Other components</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<dees-input-text .label=${'Example Input'} .description=${'Input inside a panel'}></dees-input-text>
|
||
|
|
|
||
|
|
<div style="margin-top: 16px;">
|
||
|
|
<dees-button>Submit</dees-button>
|
||
|
|
</div>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel>
|
||
|
|
<p>Panels work great even without a title for simple content grouping.</p>
|
||
|
|
<p>They provide visual separation and consistent padding.</p>
|
||
|
|
</dees-panel>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|