paw.Paw 默认支持响应式布局,宽屏情况下,默认一行显示 2 个控件,窄屏情况下一行只显示 1 个控件;
你现在可以改变浏览器窗口大小试试看下面的 Form 会怎么变化!
paw.Form{
Method: http.MethodGet, //不填写时,默认使用 http.MethodPost
Multipart: true, //当这个 form 需要提交文件时,Multipart 需要设置为 true
Url: "/action",
Body: paw.List{
paw.Input{
Name: "name",
Label: "input text",
Value: "tom",
},
paw.Input{
Name: "name",
Label: "input password",
Type: "password",
Value: "******",
},
paw.Textarea{
Name: "name",
Label: "textarea",
Value: "textarea",
Height: 200,
},
paw.Select{
Name: "name",
Label: "select",
Options: []paw.SelectOption{
{
Name: "Option 1",
Value: "1",
},
{
Name: "Option 2, Disabled",
Value: "2",
Disabled: true,
},
{
Name: "Option 3",
Value: "3",
},
},
},
},
SubmitBtnText: "提交 Form",
},
下面是一些常见类型 input,关于 input 有哪些可能的 type 详见 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
paw.Input{
Name: "Name0",
Label: "普通文本输入框",
Value: "abc",
},
paw.Input{
Name: "Name1",
Label: "Readonly 的样子",
Value: "abc",
Readonly: true,
},
paw.Input{
Name: "Name2",
Type: "password",
Label: "密码",
Value: "abc",
},
paw.Input{
Name: "Name2",
Type: "datetime-local",
Label: "时间",
Value: time.Now().Format(paw.TimeFormat),
},
paw.Input{
Name: "Name3",
Type: "number",
Label: "整数",
Value: "1",
},
paw.Input{
Name: "Name3",
Type: "number",
Label: "浮点",
Value: "1.00",
Step: 0.01, //可以按照需要设置精度
},
这是 Paw 最核心的功能!
你可以使用类似 GORM 的方式,通过一个 struct 来生成对应的 Form 控件:
//这个 struct 同时也可以用来定义 GORM 中的 Model
type User struct {
Name string `paw:"" pawLabel:"姓名"` //凡带有 paw:"" 则会自动生成 UI
Age int `paw:"" pawLabel:"年龄"` // pawLabel 可以设置控制显示的名称
Gender string `paw:"select" pawLabel:"性别"`
Height float64 `paw:"" pawLabel:"身高"`
Note string `paw:"textarea" pawLabel:"备注"`
Password string `paw:"password" pawLabel:"密码"`
Birthday time.Time `paw:"" pawLabel:"生日"`
Id string `paw:"hidden"`
}
// user 对象每个字段的值都会自动生成到控件的 value 中
user := &User{
Name: "degas",
Age: 3,
Gender: "男",
Height: 175,
Note: "😊",
Password: "123",
Birthday: time.Now().Add(-time.Hour * 24 * 365 * 30),
Id: "123",
}
//调用 paw.Gen 即可生成控件,随后可以通过 SelectOptions 设置 select 的 options
paw.Gen(user).SelectOptions(map[string][]paw.SelectOption{
"Gender": {
{Name: "男", Value: "男"},
{Name: "女", Value: "女"},
},
})
😊
//只需要链式调用 Readonly 即可让所有生成的表单控件只读,方便展示信息 paw.Gen(user).Readonly()
Paw 目前支持的 struct 字段类型为:
string, int, int64, float64, time.Time
Paw 支持 Golang 的 Type Embedding https://go.dev/doc/effective_go#embedding
type Item struct {
Id string `paw: ""`
Name string `paw:""`
}
type editRequest struct {
Item `paw:""` //embedding
EditNote string `paw:"textarea" pawLabel:"修改备注"`
}
type Model struct {
Config1 string `paw:"textarea"`
Config2 string `paw:"textarea:100"` // ":100" will set the height of the textarea to 100px
}