78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import { html, css } from '@design.estate/dees-element';
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
${css`
|
|
h3 {
|
|
margin-top: 32px;
|
|
margin-bottom: 16px;
|
|
color: #333;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
h3 {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
|
|
.form-demo {
|
|
background: #f5f5f5;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.form-demo {
|
|
background: #1a1a1a;
|
|
}
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin: 20px 0;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<h3>Button Types</h3>
|
|
<dees-button>This is a slotted Text</dees-button>
|
|
<p>
|
|
<dees-button text="Highlighted: This text shows" type="highlighted">Highlighted</dees-button>
|
|
</p>
|
|
<p><dees-button type="discreet">This is discreete button</dees-button></p>
|
|
<p><dees-button disabled>This is a disabled button</dees-button></p>
|
|
<p><dees-button type="big">This is a slotted Text</dees-button></p>
|
|
|
|
<h3>Button States</h3>
|
|
<p><dees-button status="normal">Normal Status</dees-button></p>
|
|
<p><dees-button disabled status="pending">Pending Status</dees-button></p>
|
|
<p><dees-button disabled status="success">Success Status</dees-button></p>
|
|
<p><dees-button disabled status="error">Error Status</dees-button></p>
|
|
|
|
<h3>Buttons in Forms (Auto-spacing)</h3>
|
|
<div class="form-demo">
|
|
<dees-form>
|
|
<dees-input-text label="Name" key="name"></dees-input-text>
|
|
<dees-input-text label="Email" key="email"></dees-input-text>
|
|
<dees-button>Save Draft</dees-button>
|
|
<dees-button type="highlighted">Save and Continue</dees-button>
|
|
<dees-form-submit>Submit Form</dees-form-submit>
|
|
</dees-form>
|
|
</div>
|
|
|
|
<h3>Buttons Outside Forms (No auto-spacing)</h3>
|
|
<div class="button-group">
|
|
<dees-button>Button 1</dees-button>
|
|
<dees-button>Button 2</dees-button>
|
|
<dees-button>Button 3</dees-button>
|
|
</div>
|
|
|
|
<h3>Manual Form Spacing</h3>
|
|
<div>
|
|
<dees-button inside-form="true">Manually spaced button 1</dees-button>
|
|
<dees-button inside-form="true">Manually spaced button 2</dees-button>
|
|
</div>
|
|
`;
|