本教程的对应的主题是 LuLu UI 的 Edge 主题，Edge 是边缘的意思，因为所有的创新和颠覆都发生在事物边缘。

Edge 主题采用原生 JavaScript 编写，因此不受框架限制，React 和 Vue 项目中均可使用，可以作为跨团队跨项目开发的统一解决方案。

Edge 主题使用了 JavaScript 和 CSS 前沿的新语法和新特性，因此并不支持IE浏览器，如果项目需要兼容IE浏览器，请使用Pure主题

具体兼容性如下表所示：

相比之前的 Pure 主题，Edge 主题最大的优势就是使用更加省心了，不过，由于 Edge 主题的某些设计思路有别于常见UI组件库，大家可能需要在思维上进行一些转换。

起步

新建任意一个空白 HTML 页面，在页面任意位置粘贴下面两行代码，LuLu UI Edge 主题就可以使用了，包含了所有的UI组件库。

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui.css">

<script href="https://unpkg.com/lu2/theme/edge/js/common/all.js"></script>

例如，显示一个弹框：显示弹框

button.addEventListener('click', () => {
    new Dialog().alert('我是弹框~');                
});

你也可以单独使用 LuLu UI 中的任意一个UI组件，例如只想要在项目中使用弹框组件，可以复制下面的代码：

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Button.css">
<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Dialog.css">

<script type="module" href="https://unpkg.com/lu2/theme/edge/js/common/ui/Dialog.js"></script>

当然，LuLu UI 组件库的使用方式不止上面这种，具体使用方法可参见这里：安装

静态控件

在LuLu UI 中，把浏览器内置的标准可交互元素称为控件，常见的控件元素均是表单控件元素。

而这里的“静态控件”，指的是只需要引入CSS就能有对应效果的控件，包括按钮、输入框、文本域、单复选框、开关、进度条等。

例如，想要使用一个主按钮，打开对应的文档页面，复制粘贴如下所示的HTML代码即可：

<button type="primary" is="ui-button">主按钮</button>

实际渲染效果如下：

主按钮

如果只想使用 LuLu UI 的静态控件样式，则可以使用下面的代码片段：

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/form.css">

交互控件

这里的“交互控件”指的是还需要引入JS才能有对应效果的控件，包括下拉框、时间选择器、颜色选择器、范围选择框等。

所有的交互控件都是免初始化的，均采用内置自定义元素（is属性）实现。例如：

<select is="ui-select"><option>默认值</option></select>

默认值

<input type="date" is="ui-datetime">

<input type="color" is="ui-color">

<input class="ui-input" list="dl0" is="ui-datalist">
<datalist id="dl0">
    <option>数据1</option>
    <option>数据2</option>
</datalist>

当控件内容发生变化的时候，会触发原生的change事件，因此，大家就按照原生的控件开发就可以了。

input.addEventListener('change', function () {
    console.log('控件值改变了');                
});

组件

组件往往指的是多个控件组合而成的功能体，例如弹框就是一个典型的组件，需要用到布局、按钮、Loading 等。

LuLu UI 提供了多种常见的 UI 组件，并提供了多种调用方式，以便在各种场景下都能自如使用。

以Drop下拉举例，Drop下拉可以解决任意带有定位需求的1V1交互效果，支持下面 4 种调用方法：

1. <ui-drop> 自定义元素；
2. is-drop 扩展属性；
3. new Drop() 构造方法；
4. element.drop() 扩展方法；

例如使用<ui-drop>自定义元素实现：

点击我

<ui-drop target="img" class="ui-button">点击我</ui-drop>
<img id="img" src="1.png" hidden>

在某些场景下，<ui-drop>会被认为是不合法的，例如在Vue环境中，此时，可以使用is-drop扩展属性实现一致的效果：

点击我

<button class="ui-button" data-target="img" is-drop>点击我</button>

在极少数场景下，HTML 可能无法随意修改，此刻可以使用 new Drop() 构造方法实现同样的效果：

点击我

<button id="b1" class="ui-button">点击我</button>

new Drop('#b1', '#img');

不仅调用方法多样，支持的数据类型也是多变的，可以通过 JS 代码传递参数，也可以直接使用对应的 HTML 元素作为数据源。

例如Drop下拉扩展的list列表方法，可以通过让target指向<datalist>实现列表效果，指向<dialog>元素实现轻面板效果，例如列表效果：

点击我

<ui-drop target="dl0" class="ui-button">点击我</ui-drop>

基本上，LuLu UI 中所有的组件都采用上面的设计风格和思想实现的，这里仅仅是抛砖引玉，大家可以去对应组件的文档页面深入了解每个组件的使用方式。

而这么设计的原因和原理可以参见这里

解决方案

解决方案指的是使用多种组件，解决某一类问题的技术实现方案。

LuLu UI集成了两种解决方案，分别是<table>列表的完整呈现与处理，<form>表单的验证与提交处理。

在本主题中，列表解决方案和表单解决方案均是使用内置自定义元素实现的，例如：

<table is="ui-table"></table>

就会自动按照LuLu UI的列表解决方案执行。

<form is="ui-form"></form>

就会自动按照LuLu UI的表单解决方案执行。

例如下面这个表单，只要设置了 is="ui-form" 就会自动开启表单验证、表单提交以及之后的反馈处理。

相信经过上面的介绍，大家对LuLu UI应该有了大概的了解下，接下来可以访问这里，更加深入了解 LuLu UI Edge 主题的设计思路和使用指南。