HWUI帮助文档
适用于版本为：Preview 1.4.5的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获取开关状态或设置属性
以下代码针对于测试多选框
更改多选状态
获取多选状态
选择器(Select)
一个，两个，三个，四个，五个...哎呀，不数了 : (
您可以使用<hw-select>和<hw-option>搭配来添加此元素
基础用法
一只平凡的选择器
蓝天新世界
HiSuperWan
在<hw-select>中嵌套<hw-option value="{{value}}">
通过hw-select.value获取当前值
标签页(Tabs)
让内容井井有条 分类明确
你可以使用<hw-tabs>和<hw-tab-pane>和<hw-tab-page>来添加此元素组合
基础用法
首页
想不到藏了一个按钮
想不又藏了一个按钮
想不还藏了一个按钮
联系人
特性
<hw-tabs active={{title}}></hw-tabs>可以使你更改或获取打开的页面（同理可在js中修改或获取Attribute） 修改具有实时性，立刻生效。
打开首页
打开联系人
获取当前打开页
列表(List)
可以互动的列表，例如上下开开关关～
您可以使用<hw-list>来添加此元素
基础用法
藏起来的小元素一号awa
藏起来的小元素二号qwq
藏起来的小元素三号LoL
在JS中您可以使用hw-list.active获取开关状态或设置属性。
更改列表开关
获取列表开关
关闭按钮(CloseButton)
一个无用的按钮，但却少不了
您可以使用<hw-closeButton>来添加此元素
看似美丽，实则无用，只是一个按钮。你可以添加你想要的任何事件if you like
轮播图(Carousel)
一个可以自动播放的图片墙
您可以使用<hw-carousel>来添加此元素
举个栗子
注：此轮播图添加了圆角，直接添加不自带～
功能
使用hw-carousel.value来获取进度（从0开始）
获取进度
若您需要添加图片：请使用appendChild并调用ReloadHWCarousel({{hw-carousel}})来重载
添加一张图片并重载
进度条(Process)
卡99%的真凶
您可以使用<hw-process>来添加此元素
举个栗子
value为50的进度条
hw-process的进度会自适应(value = 80)
正在重复变换的hw-process
使用hw-process.value = {{num}}（num = 0~100）来调节进度
document.getElementById("process-test2").value = 100;
气泡卡片(Popover)
通常可以对一个元素进行描述或者展开一些更高级的东西
举个栗子
卡片(Card)
正如您所见，这就是一个卡片。
您可以使用<hw-card>来添加此元素(甚至可以无限套娃)
看到了吗？This is hw-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
十方
