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.
80 lines
2.6 KiB
TypeScript
80 lines
2.6 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;
|
|
}
|
|
|
|
.horizontal-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
|
|
<dees-input-phone
|
|
.label=${'Phone Number'}
|
|
.description=${'Enter your phone number with country code'}
|
|
.value=${'5551234567'}
|
|
></dees-input-phone>
|
|
|
|
<dees-input-phone
|
|
.label=${'Contact Phone'}
|
|
.description=${'Required for account verification'}
|
|
.required=${true}
|
|
.placeholder=${'+1 (555) 000-0000'}
|
|
></dees-input-phone>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
|
|
<div class="horizontal-group">
|
|
<dees-input-phone
|
|
.label=${'Mobile'}
|
|
.layoutMode=${'horizontal'}
|
|
.value=${'4155551234'}
|
|
></dees-input-phone>
|
|
|
|
<dees-input-phone
|
|
.label=${'Office'}
|
|
.layoutMode=${'horizontal'}
|
|
.placeholder=${'+1 (800) 555-0000'}
|
|
></dees-input-phone>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
|
|
<dees-input-phone
|
|
.label=${'International Contact'}
|
|
.description=${'Automatically formats international numbers'}
|
|
.value=${'441234567890'}
|
|
></dees-input-phone>
|
|
|
|
<dees-input-phone
|
|
.label=${'Emergency Contact'}
|
|
.value=${'911'}
|
|
.disabled=${true}
|
|
></dees-input-phone>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
|
|
<dees-form>
|
|
<dees-input-text .label=${'Full Name'} .required=${true}></dees-input-text>
|
|
<dees-input-phone .label=${'Phone Number'} .required=${true}></dees-input-phone>
|
|
<dees-input-text .label=${'Email'} .inputType=${'email'}></dees-input-text>
|
|
</dees-form>
|
|
</dees-panel>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`; |