03315db863
- Added dropdown and radio input components to the demo for application settings. - Introduced horizontal layout for display preferences and notification settings. - Implemented checkbox demo with programmatic selection and clear functionality. - Created file upload and quantity selector demos with various states and configurations. - Added comprehensive radio input demo showcasing group behavior and various states. - Developed text input demo with validation states and advanced features like password visibility. - Introduced a new panel component for better content organization in demos.
128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
import { html, css } from '@design.estate/dees-element';
|
|
|
|
export const demoFunc = () => html`
|
|
<dees-demowrapper>
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.settings-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-panel .title=${'Multi-Option Toggle'} .subtitle=${'Select from multiple options with a sliding indicator'}>
|
|
<dees-input-multitoggle
|
|
.label=${'Display Mode'}
|
|
.description=${'Choose how content is displayed'}
|
|
.options=${['List View', 'Grid View', 'Compact']}
|
|
.selectedOption=${'Grid View'}
|
|
></dees-input-multitoggle>
|
|
|
|
<dees-input-multitoggle
|
|
.label=${'T-Shirt Size'}
|
|
.description=${'Select your preferred size'}
|
|
.options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
|
|
.selectedOption=${'M'}
|
|
></dees-input-multitoggle>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Boolean Toggle'} .subtitle=${'Simple on/off switches with custom labels'}>
|
|
<dees-input-multitoggle
|
|
.label=${'Notifications'}
|
|
.description=${'Enable or disable push notifications'}
|
|
.type=${'boolean'}
|
|
.selectedOption=${'true'}
|
|
></dees-input-multitoggle>
|
|
|
|
<dees-input-multitoggle
|
|
.label=${'Theme Mode'}
|
|
.description=${'Switch between light and dark theme'}
|
|
.type=${'boolean'}
|
|
.booleanTrueName=${'Dark'}
|
|
.booleanFalseName=${'Light'}
|
|
.selectedOption=${'Dark'}
|
|
></dees-input-multitoggle>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Settings Panel'} .subtitle=${'Configuration options in a horizontal layout'}>
|
|
<div class="settings-grid">
|
|
<dees-input-multitoggle
|
|
.label=${'Auto-Save'}
|
|
.layoutMode=${'horizontal'}
|
|
.type=${'boolean'}
|
|
.booleanTrueName=${'Enabled'}
|
|
.booleanFalseName=${'Disabled'}
|
|
.selectedOption=${'Enabled'}
|
|
></dees-input-multitoggle>
|
|
|
|
<dees-input-multitoggle
|
|
.label=${'Language'}
|
|
.layoutMode=${'horizontal'}
|
|
.options=${['English', 'German', 'French', 'Spanish']}
|
|
.selectedOption=${'English'}
|
|
></dees-input-multitoggle>
|
|
|
|
<dees-input-multitoggle
|
|
.label=${'Quality'}
|
|
.layoutMode=${'horizontal'}
|
|
.options=${['Low', 'Medium', 'High', 'Ultra']}
|
|
.selectedOption=${'High'}
|
|
></dees-input-multitoggle>
|
|
|
|
<dees-input-multitoggle
|
|
.label=${'Privacy'}
|
|
.layoutMode=${'horizontal'}
|
|
.type=${'boolean'}
|
|
.booleanTrueName=${'Private'}
|
|
.booleanFalseName=${'Public'}
|
|
.selectedOption=${'Private'}
|
|
></dees-input-multitoggle>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'States & Form Integration'} .subtitle=${'Disabled states and form usage'}>
|
|
<dees-input-multitoggle
|
|
.label=${'Account Type'}
|
|
.description=${'This setting is locked'}
|
|
.options=${['Free', 'Pro', 'Enterprise']}
|
|
.selectedOption=${'Enterprise'}
|
|
.disabled=${true}
|
|
></dees-input-multitoggle>
|
|
|
|
<dees-form>
|
|
<dees-input-text .label=${'Project Name'} .required=${true}></dees-input-text>
|
|
<dees-input-multitoggle
|
|
.label=${'Visibility'}
|
|
.type=${'boolean'}
|
|
.booleanTrueName=${'Public'}
|
|
.booleanFalseName=${'Private'}
|
|
.selectedOption=${'Private'}
|
|
></dees-input-multitoggle>
|
|
<dees-input-multitoggle
|
|
.label=${'License'}
|
|
.options=${['MIT', 'Apache 2.0', 'GPL v3', 'Proprietary']}
|
|
.selectedOption=${'MIT'}
|
|
></dees-input-multitoggle>
|
|
</dees-form>
|
|
</dees-panel>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`; |