Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@XboxYan
XboxYan committed Jul 3, 2019
1 parent 9b73f0b commit 5700a1c
Show file tree
Hide file tree
Showing 5 changed files with 326 additions and 6 deletions.
51 changes: 51 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,56 @@

将`components`和`iconfont`文件夹放入项目当中。

## 依赖

部分组件使用需要依赖其他组件，依赖关系如下

|组件|依赖项|描述|
|---|---|---|
|`xy-button`|`xy-icon`、`xy-loading`|按钮。组件使用了`icon`和`loading`属性。|
|`xy-icon`|无|图标。|
|`xy-slider`|`xy-tips`|滑动条。组件使用了`showtips`属性。|
|`xy-select`|`xy-button`|下拉选择器。组件内部使用`xy-button`组合而成。|
|`xy-tab`|`xy-button`|标签页。组件导航按钮使用了`xy-button`。|
|`xy-loading`|无|加载。|
|`xy-switch`|无|开关。|
|`xy-checkbox`|无|多选。|
|`xy-radio`|无|单选。|
|`xy-tips`|无|提示。|
|`xy-message`|`xy-icon`|全局提示。提示信息图标使用`xy-icon`。|
|`xy-dialog`|`xy-icon`、`xy-button`、`xy-loading`|弹窗提示。提示信息图标使用`xy-icon`，确认取消按钮使用了`xy-button`。组件使用了`loading`属性。|
|`xy-layout`|无|布局。|
|`xy-input`|`xy-icon`、`xy-button`、`xy-tips`|输入框。组件使用了`icon`属性，同时有`xy-button`交互，表单验证使用了`xy-tips`信息提示。|
|`xy-textarea`|同上|多行输入框。同上。|

无依赖组件直接引入单独`js`即可，有依赖组件需要引入相关`js`。

如需单独使用`xy-tips`组件，仅需引用`xy-input.js`。

```js
// .
// └── project
// ├── components
// | └── xy-tips.js
// └── index.html
import './components/xy-tips.js';
```

如需单独使用`xy-input`组件，需引用`xy-input.js`、`xy-button.js`、`xy-icon.js`、`xy-tips.js`。

```js
// └── project
// ├── components
// | ├── xy-input.js
// | ├── xy-button.js
// | ├── xy-icon.js
// | └── xy-tips.js
// └── index.html
import './components/xy-input.js';
```

> 大部分情况下全部引用即可
## 引用

### html引用
Expand All @@ -99,6 +149,7 @@ ReactDOM.render(<xy-button>button</xy-button>, document.body);

与原生类似，暂无研究。


## 使用

使用一个组件有以下几种方式：
Expand Down
89 changes: 86 additions & 3 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,50 @@
* 无依赖。纯原生，无需任何预处理器编译。
* 无障碍。支持键盘访问。

## 原则

在实现组件功能时，遵循`CSS`为主，`JavaScript`为辅的思路，能够使用`CSS`完成的绝不用`JavaScript`，`UI`和业务逻辑分离，使得代码结构上更加简约。

比如`xy-button`有一个点击扩散的水波纹效果，就是采用`CSS`来实现，`JavaScript`只是辅助完成鼠标位置的获取

```css
.btn::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: var(--x,0);
top: var(--y,0);
pointer-events: none;
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: translate(-50%,-50%) scale(10);
opacity: 0;
transition: transform .3s, opacity .8s;
}
.btn:not([disabled]):active::after {
transform: translate(-50%,-50%) scale(0);
opacity: .3;
transition: 0s;
}
```

详细可查看源码。大部分组件都是类似的设计。

## 兼容性

现代浏览器。

包括移动端，不支持`IE`。

> `IE`不支持原生`customElements`，[webcomponentsjs](https://github.com/webcomponents/webcomponentsjs)可以实现对`IE`的兼容，不过很多`CSS`特性仍然无效，所以放弃
## 安装

目前还没有托管`npm`，可以在`github`上获取最新文件。

[update](update.md)

目录如下：

```text
Expand All @@ -41,6 +73,56 @@

将`components`和`iconfont`文件夹放入项目当中。

## 依赖

部分组件使用需要依赖其他组件，依赖关系如下

|组件|依赖项|描述|
|---|---|---|
|`xy-button`|`xy-icon`、`xy-loading`|按钮。组件使用了`icon`和`loading`属性。|
|`xy-icon`|无|图标。|
|`xy-slider`|`xy-tips`|滑动条。组件使用了`showtips`属性。|
|`xy-select`|`xy-button`|下拉选择器。组件内部使用`xy-button`组合而成。|
|`xy-tab`|`xy-button`|标签页。组件导航按钮使用了`xy-button`。|
|`xy-loading`|无|加载。|
|`xy-switch`|无|开关。|
|`xy-checkbox`|无|多选。|
|`xy-radio`|无|单选。|
|`xy-tips`|无|提示。|
|`xy-message`|`xy-icon`|全局提示。提示信息图标使用`xy-icon`。|
|`xy-dialog`|`xy-icon`、`xy-button`、`xy-loading`|弹窗提示。提示信息图标使用`xy-icon`，确认取消按钮使用了`xy-button`。组件使用了`loading`属性。|
|`xy-layout`|无|布局。|
|`xy-input`|`xy-icon`、`xy-button`、`xy-tips`|输入框。组件使用了`icon`属性，同时有`xy-button`交互，表单验证使用了`xy-tips`信息提示。|
|`xy-textarea`|同上|多行输入框。同上。|

无依赖组件直接引入单独`js`即可，有依赖组件需要引入相关`js`。

如需单独使用`xy-tips`组件，仅需引用`xy-input.js`。

```js
// .
// └── project
// ├── components
// | └── xy-tips.js
// └── index.html
import './components/xy-tips.js';
```

如需单独使用`xy-input`组件，需引用`xy-input.js`、`xy-button.js`、`xy-icon.js`、`xy-tips.js`。

```js
// └── project
// ├── components
// | ├── xy-input.js
// | ├── xy-button.js
// | ├── xy-icon.js
// | └── xy-tips.js
// └── index.html
import './components/xy-input.js';
```

> 大部分情况下全部引用即可
## 引用

### html引用
Expand All @@ -67,6 +149,7 @@ ReactDOM.render(<xy-button>button</xy-button>, document.body);

与原生类似，暂无研究。


## 使用

使用一个组件有以下几种方式：
Expand Down Expand Up @@ -135,7 +218,7 @@ const tab3 = document.getElementById('tab3');
tab3.parentNode;//xy-tab
```

组件的布尔类型的属性也遵从原生规范，比如
组件的布尔类型的属性也遵从原生规范（添加和移除属性），比如

```html
<xy-dialog show></xy-dialog> <!-- 显示 -->
Expand Down
5 changes: 3 additions & 2 deletions docs/sidebar.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
* [Home](../README.md)
* [Home](README.md)
* [themeColor](themeColor.md)
* [update](update.md)
* **Component**
* [xy-button](xy-button.md)
* [xy-icon](xy-icon.md)
* [xy-slider](xy-slider.md)
* [xy-slider](xy-slider.md)
* [xy-select](xy-select.md)
2 changes: 1 addition & 1 deletion docs/xy-button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ btn.setAttribute('disabled','');
btn.removeAttribute('disabled');
```

!> 所有组件关于属性的获取和设置均相同，如下
!> 所有组件关于属性的获取和设置均类似，如下

```js
com.props;//获取
Expand Down
185 changes: 185 additions & 0 deletions docs/xy-select.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
# xy-select

下拉选择器。用于替代原生`select`。

-- 最后更新于2019-07-03 22：34 --

## 使用方式

```html
<!-- 引入 -->
<script type="module">
import '../components/xy-select.js';
</script>
<!-- 使用 -->
<xy-select></xy-select>
```

`xy-select`实现依赖于`xy-button`，如需单独使用`xy-select`组件，需要准备`xy-button.js`。

不过使用时只需引用`xy-select`

```js
import '../components/xy-select.js';
```

## 初始值`defaultvalue`

设置或返回滑块条的默认值（默认为0）。

<xy-slider></xy-slider>
<xy-slider defaultvalue="30"></xy-slider>
<xy-slider defaultvalue="50"></xy-slider>

```html
<xy-slider></xy-slider>
<xy-slider defaultvalue="30"></xy-slider>
<xy-slider defaultvalue="50"></xy-slider>
```

## 禁用`disabled`

通过`disabled`可以禁用滑动条。

<xy-slider defaultvalue="50" disabled></xy-slider>

```html
<xy-slider defaultvalue="50" disabled></xy-slider>
```

JavaScript操作

```js
slider.disabled; //获取
slider.disabled = false;
slider.disabled = true;
//原生属性操作
slider.setAttribute('disabled','');
slider.removeAttribute('disabled');
```

## 最小值`min`、最大值`max`

设置或返回滑块条的`min`和`max`属性值。默认值分别为`0`和`100`。


<xy-slider defaultvalue="100" min="0" max="300"></xy-slider>
<xy-slider defaultvalue="30" min="-100" max="100"></xy-slider>

```html
<xy-slider defaultvalue="100" min="0" max="300"></xy-slider>
<xy-slider defaultvalue="30" min="-100" max="100"></xy-slider>
```

JavaScript操作

```js
slider.min; //获取
slider.min = 50;
//原生属性操作
slider.setAttribute('min',50);
```

## 步长`step`

设置或返回滑块条的`step`属性值。默认值为`1`。

<xy-slider defaultvalue="30" min="0" max="100" step="5"></xy-slider>
<xy-slider defaultvalue="50" min="0" max="100" step="10"></xy-slider>

```html
<xy-slider defaultvalue="30" min="0" max="100" step="5"></xy-slider>
<xy-slider defaultvalue="50" min="0" max="100" step="10"></xy-slider>
```

JavaScript操作

```js
slider.step; //获取
slider.step = 10;
//原生属性操作
slider.setAttribute('step',10);
```

## 提示`showtips`

可以添加`showtips`属性，可以在滑动时显示`value`值。

<xy-slider defaultvalue="50" showtips></xy-slider>

```html
<xy-slider defaultvalue="50" showtips></xy-slider>
```

JavaScript操作

```js
slider.showtips = false;
slider.showtips = true;
//原生属性操作
slider.setAttribute('showtips','');
slider.removeAttribute('showtips');
```

## 值`value`

设置或返回滑块条的`value`属性值。
该属性值在`html`标签上不可见。

JavaScript操作

```js
slider.value; //获取
slider.value = 50;
//原生属性操作
slider.setAttribute('value',50);
```

## 事件

该组件暴露了常见的回调事件

### change

滑动条在滑动完成时触发。

```html
<xy-slider onchange="fn(event)"></xy-slider>
```

```js
slider.onchange = function(ev){
//获取value的几种方式
console.log(this.value);
console.log(ev.target.value);
console.log(ev.detail.value);
}

slider.addEventListener('change',function(ev){
console.log(this.value);
console.log(ev.target.value);
console.log(ev.detail.value);
})
```

### input

滑动条在滑动时触发。

```html
<xy-slider oninput="fn(event)"></xy-slider>
```

```js
slider.oninput = function(ev){
console.log(this.value);
console.log(ev.target.value);
console.log(ev.detail.value);
}

slider.addEventListener('input',function(ev){
console.log(this.value);
console.log(ev.target.value);
console.log(ev.detail.value);
})
```

0 comments on commit 5700a1c

Please sign in to comment.