import("https://esm.sh/duoyun-ui/patterns/form?bundle").then(({ createForm }) => {
createForm({
type: "modal",
data: { firstName: "First Name", lastName: "Last Name", github: "https://github.com/mantou132" },
header: `Create User`,
formItems: [
[{
type: "text",
field: "firstName",
label: "First Name",
},{
type: "text",
field: "lastName",
label: "Last Name",
}],{
type: "text",
field: "github",
label: "Github",
}
],
});
});
字段支持的 type: text password date date-time date-range number checkbox checkbox-group picker radio-group select textarea slot
其中 slot 是用来自定义的,比如:
{
type: "slot",
slot: new HTMLInputElement(),
field: "github",
label: "Github",
}
模式可以直接创建一个 CRUD 应用: https://duoyun-ui.gemjs.org/zh/blog/crud