小程序icon、progress、rich-text、text、表单组件

118 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第3天,点击查看活动详情

icon

图标组件

image.png
代码示例

image.png

progress

进度条。组件属性的长度单位默认为px。从2.4.0开始支持rpx。
属性:

image.png

image.png
示例代码:

image.png

rich-text

富文本。(不能编辑。可以写HTML)
属性: image.png

  • nodes:现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点。
    元素节点:type=node

image.png
文本节点:type=text

image.png
代码示例

image.png image.png image.png

text

文本

image.png

表单组件

button

image.png

image.png

image.png

image.png

image.png

image.png

CheckBox

checkbox-group

image.png

image.png

image.png

editor

富文本编辑器,可以对图片、文字进行编辑。
富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖,需要注意的是,在其他组件或环境中使用富文本组件导出的html时,需要额外引入一个文件样式

image.png
属性

image.png

form

表单。将组件内用户输入的Switch、input、CheckBox、slider、radio、picker提交。
当点击form表单中form-type为submit的button组件时,会将表单组件中的value值进行提交,需要在表单组件上加上name来作为key。主要功能不是发送到服务器,而是得到表单项中的数据。
属性:

image.png
示例代码:

image.png

image.png

image.png

image.png

input

输入框。该组件是原生组件,使用时请注意相关限制。

keyboard-accessory

设置input/textarea聚焦时键盘上方cover-view/cover-image工具栏视图。

image.png

label

用来改进表单组件的可用性。
使用for属性找到对应的id,或者将控件放在该标签下,点击时,就会触发对应的空间,for优先级高于内部控件,内部有多个控件的时候默认触发第一个空间。目前可以绑定的空间有button、CheckBox、radio、Switch

image.png

picker

从底部弹起的滚动选择器

image.png

image.png
如果mode不同,对应的属性也不同

image.png

image.png

image.png

image.png

image.png

image.png
实例代码

image.png

image.png

image.png

image.png
日期示例:

image.png

image.png

image.png
三级联动示例:

image.png

image.png

picker-view

嵌入页面的滚动选择器。其中只可放置 [picker-view-column]组件,其它节点不会显示。
属性:

image.png

image.png
示例代码:

image.png

image.png

image.png

image.png
效果:

image.png

picker-view-column

滚动选择器子项。仅可放置于[picker-view]中,其孩子节点的高度会自动设置成与[picker-view]的选中框的高度一致

radio

单选项目

image.png

# radio-group

单项选择器,内部由多个radio组成

image.png

slider

滑动选择器

image.png

Switch

开关选择器

image.png

image.png

textarea

多行输入框。该组件是原生组件,使用时请注意相关限制。

image.png

image.png

image.png

image.png
示例代码:

image.png

image.png