丰富表单组件

2019年12月24日

一.button按钮

image.png

二.checkbox多项选择器

三.radio单项选择器

image.png

四.input单行输入框

1.通用搜索框实现

image.png

.wrapper {
  border: 1px solid #ccc;
  width: 90%;
  height: 38px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  border-radius: 30px;
  align-items: center;
  background-color: #fafafa;
}
.search {
  margin-left: 10px;
}

2.通用搜索框（今日头条）

image.png

.bg {
  background-color: #d53c3e;
  height: 40px;
  display: flex;
  flex-direction: row;
}

.name {
  width: 30%;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.search {
  width: 70%;
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
  height: 25px;
  margin-right: 10px;
  background-color: #f6f5f3;
  border-radius: 5px;
  align-items: center;
}

.search image {
  margin-left: 10px;
}

.search input {
  margin-left: 10px;
  font-size: 13px;
}

五.textarea多行输入框

六.label改进表单可用性

image.png

1.没有定义for属性

默认选中第一个组件，不管其有没有隐藏。

2.定义了for属性

七.picker滚动选择器

1.普通选择器

image.png image.png

2.时间选择器

3.日期选择器

image.png

4.嵌入页面滚动选择器（picker-view）

image.png

八.slider滑动选择器

image.png

九.switch开关选择器

image.png

十.form表单

image.png