介绍
Wood UI是一款原生Javascript打造的UI插件库，她小巧、简洁，体积不到 50KB
她可以被用来构建你的静态页面，目前为止共包含组件16个，可以实现快速的页面搭建。现在，仍在持续开发中
本页面是Wood UI的文档和使用说明，这里是源代码地址
无论你是拿来使用还是拿来二次开发，都非常欢迎！
安装
目前， Wood UI 只提供了外部文件引入的方式，后期，等稳定版本开发完成就会推出模块化的引入方式
首先需要下载两个文件，点击这里
使用
Wood UI会自动挂载到全局变量中
首先需要在html中定义好元素，然后加上相应的组件的类名，接着给出自定义属性
示例
下面给出一个完整的示例，共分为 4 个步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1. 引入 CSS 样式文件 -->
<link rel="stylesheet" href="./dist/woodui.css">
<!-- 2. 引入 js 脚本 -->
<script src="./dist/woodui.js"></script>
<script>
</script>
</head>
<body>
<div>
<div class="wdu-box">
<!-- 3. 在 html 中定义 wdu 元素 -->
<button class="wdu-button" type="normal" >确认</button>
</div>
</div>
</body>
</html>
等分布局
用法： 主要用于将容器宽度均分，使用类名 w-col- 后接范围为1~12的数字即可实现为元素指定等比例的宽度
示例：
<div class="w-col-6"> </div>
盒子
用法：使用 wdu-box 来创建一个盒子，用作外围容器来包裹其中的子元素
属性： hover（鼠标悬浮效果）: true（开启）、false（关闭，默认值）
示例：
<div class="wdu-box" hover="true"> 这是一个用于包裹元素的盒子</div>
按钮
类名：wdu-button
用法： 定义一个 button 元素，按钮的类型使用 type 来指定，按钮的尺寸使用 size 来指定
属性： type 按钮类型：primary（常规按钮）、important（提示性按钮）、danger（危险按钮）、disabeled（禁用按钮）。size 按钮尺寸：small（小）、normal（中）、large（大）
示例：
<button class="wdu-button" type="normal">确认</button>
文字
用法： w-large-text（大号）、w-normal-text（中号）、w-small-text（小号）、w-title-text（标题文本）、w-content-text（文本段落）
输入框
类名：wdu-input
用法： 定义一个 div 元素，尺寸通过 size 属性指定，说明文字定义在 wdu-input 标签内，输入框类型通过 type 指定，输入框提示文字通过 tips 属性指定
属性：size 输入框大小: small（小）、normal（常规）、large（大）
示例：
<div class="wdu-input" size="large" type="password" tips="请输入密码" > 密码 </ div>
开关
类名：wdu-switch
用法： 开关的说明文字写在开关的div内，开关的状态通过 on 来指定，默认为关闭状态;若有disabled属性，则表示禁用
属性：on 取值：true/false
回调事件： 先获取 Switch 组件实例，然后通过 click 属性来指定切换事件回调，回调函数的第一个参数为开关状态
示例：
<div class="wdu-switch" on="true" > 是否开启夜间模式 </ div>
单选按钮
类名: wdu-radio
用法： 定义一个 input 标签，通过 label 属性传入按钮的说明文字。其余用法与原生保持一致
示例：
<input class="wdu-radio" label="输入用户名" > </input>
复选框
类名: wdu-checkbox
用法： 定义一个 input 标签，通过 label 属性传入说明文字。其余用法与原生保持一致
示例：
<input id="c1" class="wdu-checkbox" label="选项1"/>
下拉选择
类名：wdu-select
用法：定义一个原生 select 元素
属性：label：下拉选择的标签文字
示例：
<select class="wdu-select" label="地区">
<option value="1">北京</option>
<option value="2">湖南</option>
<option value="3">贵州</option>
<option value="4">新疆</option>
</select>
文本域
类名：wdu-textarea
用法：定义一个 textarea 标签，加上类名即可
属性：label（标签文字），resize（是否启动文本域的大小调整）: 布尔值
示例：
<textarea id="mytext" class="wdu-textarea"
label="你的建议" resize="false">
</textarea>
表单
类名：wdu-form
用法：定义一个 form 元素，加上类名，表单的每一项使用一个类名为 item 的 div 元素来包裹，内部会自动补全类名，wdu-form-item 中放入表单的控件
属性：作用于 wdu-form 元素上的，reset（是否指定重置按钮，默认为false）;作用于 wdu-form-item 上的，label（表单控件的标签文字）
示例：
<form action="" class="wdu-form" reset="true">
<div class="item" label="你的学历">
<input type="text"/>
</div>
</form>
壁纸
类名：wdu-paper
用法： Paper 壁纸是一个装饰性的组件，提供几个预设的CSS背景样式，用作元素的背景图像。定义一个 div 元素
属性：theme 样式： rey、raft、muscle、carbon、grid、tablecloth、bamboo
示例：
< div class="wdu-paper" theme="raft"> </div>
grey 灰色
raft 木筏
muscle 肌肉
carbon 碳纤维
grid 网格
tablecloth 桌布
bamboo 竹子
标记
类名：wdu-mark
用法：Mark组件用于高亮一段重要的文本，可以起到强调作用，还兼具超链接的功能
属性：url：需要跳转的目标地址。type：标记类型，预设值为important（重要）、remind（提示）、light（亮点）
示例：
<span class="wdu-mark" url="#btn" type="important" > </span>
所有人，尤其是年轻人都会犯错，他们不以犯错为耻，而且还羞于改正错误。殊不知，勇于承认错误，克服自身的缺点，オ会让别人认为你是个聪明人。
所有人，尤其是年轻人都会犯错，他们不以犯错为耻，而且还羞于改正错误。殊不知，勇于承认错误，克服自身的缺点，オ会让别人认为你是个聪明人。
所有人，尤其是年轻人都会犯错，他们不以犯错为耻，而且还羞于改正错误。殊不知，勇于承认错误，克服自身的缺点，オ会让别人认为你是个聪明人。
所有人，尤其是年轻人都会犯错，他们不以犯错为耻，而且还羞于改正错误。殊不知，勇于承认错误，克服自身的缺点，オ会让别人认为你是个聪明人。
导航菜单
类名： wdu-nav
用法： 导航菜单常用于页面顶部，适合子页面比较多的网页，可以方便的提供导航到特定网页。在 wdu-nav 标签上可以通过 fixed 属性来指定Nav是否固定在页面顶部
属性： current：true（在当前页面打开链接），false（默认值，在新标签页打开链接）。 url：链接地址
示例：
<div class="wdu-nav">
<div class="wdu-nav-menu" title="菜单一">
<div class="wdu-nav-item" url="http://www.bing.com" current="true" >必应</div>
<div class="wdu-nav-item" url="http://www.baidu.com" current="false" >百度</div>
</div>
折叠面板
类名：
wdu-collapse 折叠面板容器、 wdu-collapse-menu 折叠菜单项 、
wdu-collapse-item 菜单子选项
用法： 折叠面板用于便捷的在当前页面内实现局部内容的跳转或刷新
属性：
title：定义在折叠菜单项的标签上，指定菜单名称
url：定义在菜单子选项的标签上，指定点击后的页内跳转目标
示例：
<div class="wdu-collapse-menu" title="跳转">
<div class="wdu-collapse-item" url="#btn">跳转到 Button 按钮组件</div>
</div>
选项卡
类名：wdu-tab 选项卡容器、 wdu-tab-block 选项卡元素
用法： 定义一个 div 元素，类名为 wdu-tab 。tab切换按钮超出显示区域时，可用 Shift+鼠标滚轮左右滑动
属性：title：指定选项卡要显示的标题，元素内部则填充要显示的内容
示例：
<div class="wdu-tab">
<div class="wdu-tab-block" text="选项卡1" >
我们经过平交道，穿越铁轨，来到后车站。横须贺线的铁路沿线都开满了白色的花朵，每次看到这派景象
</div>
</div>
轮播
类名：wdu-carousel
用法： 定义一个 div 元素，，轮播元素就是 wdu-caroussel 的直接子元素，需手动编写
属性： width / height（轮播组件宽高）、time（轮播间隔时间）, 默认值为 5 ，表示5s、auto（是否自动轮播）：取值为true或false
示例：
<div class="wdu-carousel" width="400px" height="280px" time="5" auto="false" >
<img src="../src/assets/img/1.jpg">
<img src="../src/assets/img/2.jpg">
<img src="../src/assets/img/3.jpg">
<img src="../src/assets/img/4.jpg">
</div>
卡片
类名：wdu-card
用法： Card卡片用于便捷的展示一组信息（图片、标题、介绍文字），定义一个 div 元素
属性：size（卡片大小）: small（小）、normal（常规）、large（大）、img（图片url）、title（卡片标题）、info（文字内容）
示例：
< div class="wdu-card"
siz=:"large", "img":"/src/img/01.png", "title":"珠穆朗玛峰", "info": "海拔8848.86米"}'
>< /div>
消息弹窗
用法： Message用于在页面上弹出一条消息，提示用户，调用方式为 wdu.Message()，接受一个对象 config 作为参数，其中有四个属性
autoClose（自动关闭的时间）：传入数值，不传值则不自动关闭、title（标题文字）、content（内容文字）、event（需要添加的回调函数）
示例：
wdu.Message({
autoClose: 3,
title: '重要提示'
content: '一些文本内容或其他内容'
event: ()=>{alert('执行回调函数')})
})
文字提示
类名： wdu-tips
用法：
type（文字提示的类型）：normal 普通、important 重要、danger 紧急
text（文字提示的内容）
示例：
<div class="wdu-tips" type="normal" text="普通普通">
这是一段表示普通的文字
</div>