HWUI帮助文档
适用于版本为：Preview 1.3.1的HWUI
前言
欢迎您使用HWUI，这里是HWUI的帮助文档。HWUI全称为HiSuperWan UI，通常适用于网站(Web)中。本项目为开源项目，请自觉遵守开源协议，您的配合会让开源社区更好！改帮助文档为最新版本。
注意
您可以修改css当中":root"中的变量用于设置主题颜色，修改js当中动画逻辑等。但不允许修改js文件中的load函数 (内包含了创作者的信息)，谢谢您的配合！
按钮(Button)
基础的一个组件，最常用的组件。
您可以使用<hw-button>来添加此元素
基础用法
普通的按钮
通过设置color属性来更改样式
normal(默认)
red
green
blue
yellow
开关(Switch)
基础的一个组件，在设置中最常见。
您可以使用<hw-switch>来添加此元素
基础用法
在JS中您可以使用hw-switch.active获取开关状态
获取active
输入框(Input)
基础的一个组件，人机交互的基础。
您可以使用<hw-input>来添加此元素
基础用法
一个普通的输入框
设置type实现不同类型的输入方式
text
password
number
在JS中您可以使用hw-input.value获取开关状态
测试输入框
获取value
多选框(Checkbox)
一组选项中进行多选
您可以使用<hw-checkbox>来添加此元素
基础用法
测试多选框
干扰多选框
在JS中您可以使用hw-checkbox.active获取开关状态或设置属性
以下代码针对于测试多选框
更改多选状态
获取多选状态
列表(List)
可以互动的列表，例如上下开开关关～
您可以使用<hw-list>来添加此元素
基础用法
藏起来的小元素一号awa
藏起来的小元素二号qwq
藏起来的小元素三号LoL
在JS中您可以使用hw-list.active获取开关状态或设置属性。
更改列表开关
获取列表开关
气泡卡片(Popover)
通常可以对一个元素进行描述或者展开一些更高级的东西
举个栗子
这
a
提交数据
卡片(Card)
正如您所见，这就是一个卡片。
您可以使用<hw-card>来添加此元素(甚至可以无限套娃)
看到了吗？这就是不知道多少个card的套娃，似乎有点美感！
信息提示(Message)
使用JS触发，使用户被动阅读提示。
语法
HWMessage(
提示内容
,
类型
,
icon
,
显示时间
)
举个栗子
(normal)普通的信息提示
(success)成功的信息提示
(info)信息的信息提示
(warning)警告的信息提示
(danger)错误的信息提示
信息弹窗(MessageBox)
使用JS触发，用于打断用户操作，使用户阅读弹窗内容或做出选择。
语法
HWMessageBox.alert("主体内容","标题内容","按钮内容",function(result){}); //第四参数为回调函数，当用户完成当前对话时执行 //result返回用户点击的元素:如果点击普通按钮为"button",关闭按钮为"close"
举个栗子
文字弹窗（无标题）
文字弹窗（带标题）
激活HTML弹窗 (+回调展示)
请输入您要查找的用户
用户名
关闭
查找
对话框(Dialog)
适用于需要深度定制的场景，例如表单填写。
举个栗子
打开dialog
使用步骤
1.HTML中在body内（头部或尾部）新建一个<hw-dialog>并定义一个id，然后在标签夹层插入其他标签。
<hw-dialog id="test-dialog"> <hw-button>点我</hw-button> </hw-dialog>
2.使用JS调用，HWDialog.open(
元素
)来显示这个dialog，或者HWDialog.close(
元素
)来关闭这个dialog。
//打开dialog HWDialog.open(document.getElementById(test)); //关闭dialog HWDialog.close(document.getElementById(test));
开发人员
HiSuperWan
十方