This is the documentation for , which is no longer actively maintained.View latest version
A form component that provides a structured way to collect user input. It supports various form items like text input, password, email, phone, date picker, date range picker, checkbox, and switch. The form can be displayed in both standard and inline layouts.
Example
Loading...
<dy-form style=${"width: 100%;"} @change=${(evt) => {Object.keys(evt.detail).forEach(key => evt.target.querySelector(`[name=${key}]`).value = evt.detail[key])}}>
<dy-form-item name="name" label="Name" multiple></dy-form-item>
<dy-form-item name="password" label="Password" type="password"></dy-form-item>
<dy-form-item name="email" label="Email" autofocus></dy-form-item>
<dy-form-item name="phone" label="Phone"></dy-form-item>
<dy-form-item name="date" label="Date" type="date-time"></dy-form-item>
<dy-form-item name="range" label="Date Range" type="date-range"></dy-form-item>
<dy-form-item name="agree" label="Agree terms" type="checkbox"></dy-form-item>
<dy-form-item name="notifications" label="Enable notifications" type="switch"></dy-form-item>
</dy-form>
Loading...
<dy-form
style=${"width: 100%;"}
.inline=${true}
@change=${(evt) => {Object.keys(evt.detail).forEach(key => evt.target.querySelector(`[name=${key}]`).value = evt.detail[key])}}>
<dy-form-item name="name" label="Name" multiple></dy-form-item>
<dy-form-item name="email" label="Email"></dy-form-item>
<dy-form-item name="phone" label="Phone"></dy-form-item>
<dy-form-item name="agree" label="Agree" type="checkbox"></dy-form-item>
<dy-form-item name="notifications" label="Notifications" type="switch"></dy-form-item>
</dy-form>
Extends GemElement
| Property(Attribute) |
Reactive |
Type |
Description |
inline(inline) |
Yes |
boolean |
|
change |
|
Emitter<Data> |
event order: change, itemchange |
get items |
|
DuoyunFormItemElement[] |
|
get elements |
|
Record<string, DuoyunFormItemElement | undefined> |
|
get data |
|
Data |
|
| Method |
Type |
valid |
() => Promise<boolean> |
clearInvalidMessage |
() => void |
Shadow DOM; Extends GemElement
| Property(Attribute) |
Reactive |
Type |
Description |
type(type) |
Yes |
| 'text' | 'password' | 'date' | 'date-time' | 'date-range' | 'number' | 'checkbox' | 'checkbox-group' // value is array | 'switch' | 'picker' | 'radio-group' | 'select' | 'textarea' | 'slot' |
|
multiple(multiple) |
Yes |
boolean |
|
name(name) |
Yes |
string |
|
label(label) |
Yes |
string |
|
placeholder(placeholder) |
Yes |
string |
|
required(required) |
Yes |
boolean |
|
checked(checked) |
Yes |
boolean |
|
autofocus(autofocus) |
Yes |
boolean |
|
disabled(disabled) |
Yes |
boolean |
|
searchable(searchable) |
Yes |
boolean |
|
clearable(clearable) |
Yes |
boolean |
|
loading(loading) |
Yes |
boolean |
|
value |
Yes |
number | string | any[] | any |
|
renderLabel |
Yes |
(e: SelectOption) => string | TemplateResult |
|
rules |
Yes |
FormItemRule[] |
|
rows(rows) |
Yes |
number |
|
step(step) |
Yes |
number |
|
min(min) |
Yes |
number |
|
max(max) |
Yes |
number |
|
dataList |
Yes |
DataList | PickerOption[] | SelectOption[] |
@deprecated |
options |
Yes |
DataList | PickerOption[] | SelectOption[] |
|
adder |
Yes |
Adder |
|
itemchange |
|
Emitter<{ name: string; value: number | string | any[] | any }> |
|
search |
|
Emitter<string> |
|
get data |
|
any |
|
| Method |
Type |
focus |
() => void |
clearInvalidMessage |
() => void |
valid |
() => Promise<boolean> |
| Type |
Value |
| Event |
itemchange, search |
| Part |
label, tip, input, add |
| CSS State |
invalid |
