Native UI
HTML5 Native UI
充分利用html5的原生属性和方法,通过css3实现原生html5元素的UI展示。
自适应:
参考
设备
分辨率
字体大小
主按钮大小
笔记本电脑:laptop-screen
< 1380px
12px
28px
小型显示器:pc-screen
1380px ~ 1600px
14px
32px
大显示器:big-screen
>1600px
16px
36px
Fork
Button: <button> / input [type="button"]
default:
确定
Type:
主题
警告
危险
渐变
Size:
mini
small
default
big
large
Disabled:
确定
Switch: input [type="checkbox" role="switch"]
Disabled:
Size:
FileUpload: input[type="file"]
选择文件:
Range: input[type="range"]
Checkbox: input [type="checkbox"]
Size:
Radio: input [type="radio"]
Disabled:
Size:
input [type="text"]
Text:
Password:
Disabled:
Form: required/pattern/:valid/:invalid
用户名:
密 码:
手机号:
邮箱:
URL:
重置
提交
input [type="number"]
Select: input[list]
选择:
DatePicker: input[type="date"]
选择日期:
DatePicker: input[type="time"]
选择时间:
Color: input[type="color"]
颜色:
Progress: meter
60%
60%
dialog:
打开
Greetings, one and all!
关闭
Material Design |
Fluent Design
|
Fluent UI
|
Fluent Web
|
Fast.design
|
web-components
|
uplabs
https://m3.material.io/ https://github.com/material-components