更新文档
parent
8f1548e52b
commit
8d059678fc
|
|
@ -0,0 +1,136 @@
|
|||
## WC-ICON 图标
|
||||
精心绘制了`84`个常用小图标。
|
||||
|
||||
|
||||
<style>
|
||||
.flex,.flex-free { display:flex;align-items:center;flex-wrap:wrap }
|
||||
.flex > *,.flex-free > *{margin:0 16px}
|
||||
.flex-free > div {display:flex;flex-direction:column;align-items:center;width:96px;height:72px;--size:28px;margin:16px;padding:12px 4px;border:1px solid var(--color-plain-1);border-radius:3px}
|
||||
.flex-free > div:hover {box-shadow:0 0 10px rgba(0,0,0,.1)}
|
||||
.flex-free > div h3 {margin:auto;line-height:1.5;font-size:12px;font-weight:normal}
|
||||
.flex > *{flex:1}
|
||||
</style>
|
||||
|
||||
### 使用
|
||||
|
||||
```html
|
||||
<wc-icon name="home"></wc-icon>
|
||||
```
|
||||
|
||||
<section class="flex-free">
|
||||
<wc-icon name="home"></wc-icon>
|
||||
</section>
|
||||
|
||||
### 尺寸
|
||||
`size="xxxl"`, `size="xxl"`, `size="xl"`, `size="l"`, `size="m"`, `size="s"`, 连同默认尺寸在内, 5种预设规格。
|
||||
如果需要其他的尺寸的图片, 可自行通过css设置`--size: #{你想要的大小}`即可, 也可以直接设置`width, height`。
|
||||
|
||||
<wc-sandbox>
|
||||
<wc-lang slot="javascript">
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/icon/index.js'
|
||||
</wc-lang>
|
||||
<wc-lang slot="html">
|
||||
<wc-space>
|
||||
<wc-icon size="xxxl" name="android"></wc-icon>
|
||||
<wc-icon size="xxl" name="android"></wc-icon>
|
||||
<wc-icon size="xl" name="android"></wc-icon>
|
||||
<wc-icon size="l" name="android"></wc-icon>
|
||||
<wc-icon size="m" name="android"></wc-icon>
|
||||
<wc-icon size="s" name="android"></wc-icon>
|
||||
</wc-space>
|
||||
</wc-lang>
|
||||
</wc-sandbox>
|
||||
|
||||
|
||||
|
||||
|
||||
### 全部图标列表
|
||||
|
||||
<section class="flex-free">
|
||||
<div><wc-icon name="android"></wc-icon><h3>android</h3></div>
|
||||
<div><wc-icon name="app"></wc-icon><h3>app</h3></div>
|
||||
<div><wc-icon name="apple"></wc-icon><h3>apple</h3></div>
|
||||
<div><wc-icon name="at"></wc-icon><h3>at</h3></div>
|
||||
<div><wc-icon name="attach"></wc-icon><h3>attach</h3></div>
|
||||
<div><wc-icon name="backward"></wc-icon><h3>backward</h3></div>
|
||||
<div><wc-icon name="bell"></wc-icon><h3>bell</h3></div>
|
||||
<div><wc-icon name="calendar"></wc-icon><h3>calendar</h3></div>
|
||||
<div><wc-icon name="camera"></wc-icon><h3>camera</h3></div>
|
||||
<div><wc-icon name="chart"></wc-icon><h3>chart</h3></div>
|
||||
<div><wc-icon name="checkbox-on"></wc-icon><h3>checkbox-on</h3></div>
|
||||
<div><wc-icon name="checkbox-off"></wc-icon><h3>checkbox-off</h3></div>
|
||||
<div><wc-icon name="client"></wc-icon><h3>client</h3></div>
|
||||
<div><wc-icon name="close"></wc-icon><h3>close</h3></div>
|
||||
<div><wc-icon name="color"></wc-icon><h3>color</h3></div>
|
||||
<div><wc-icon name="dbl-left"></wc-icon><h3>dbl-left</h3></div>
|
||||
<div><wc-icon name="dbl-right"></wc-icon><h3>dbl-right</h3></div>
|
||||
<div><wc-icon name="deny"></wc-icon><h3>deny</h3></div>
|
||||
<div><wc-icon name="doc"></wc-icon><h3>doc</h3></div>
|
||||
<div><wc-icon name="download"></wc-icon><h3>download</h3></div>
|
||||
<div><wc-icon name="edit"></wc-icon><h3>edit</h3></div>
|
||||
<div><wc-icon name="eye"></wc-icon><h3>eye</h3></div>
|
||||
<div><wc-icon name="eye-off"></wc-icon><h3>eye-off</h3></div>
|
||||
<div><wc-icon name="face"></wc-icon><h3>face</h3></div>
|
||||
<div><wc-icon name="finger-print"></wc-icon><h3>finger-print</h3></div>
|
||||
<div><wc-icon name="fire"></wc-icon><h3>fire</h3></div>
|
||||
<div><wc-icon name="first"></wc-icon><h3>first</h3></div>
|
||||
<div><wc-icon name="floppy"></wc-icon><h3>floppy</h3></div>
|
||||
<div><wc-icon name="fly"></wc-icon><h3>fly</h3></div>
|
||||
<div><wc-icon name="folder-open"></wc-icon><h3>folder-open</h3></div>
|
||||
<div><wc-icon name="folder-close"></wc-icon><h3>folder-close</h3></div>
|
||||
<div><wc-icon name="get"></wc-icon><h3>get</h3></div>
|
||||
<div><wc-icon name="happy"></wc-icon><h3>happy</h3></div>
|
||||
<div><wc-icon name="headset"></wc-icon><h3>headset</h3></div>
|
||||
<div><wc-icon name="home"></wc-icon><h3>home</h3></div>
|
||||
<div><wc-icon name="image"></wc-icon><h3>image</h3></div>
|
||||
<div><wc-icon name="info"></wc-icon><h3>info</h3></div>
|
||||
<div><wc-icon name="key"></wc-icon><h3>key</h3></div>
|
||||
<div><wc-icon name="layout"></wc-icon><h3>layout</h3></div>
|
||||
<div><wc-icon name="left"></wc-icon><h3>left</h3></div>
|
||||
<div><wc-icon name="linux"></wc-icon><h3>linux</h3></div>
|
||||
<div><wc-icon name="live"></wc-icon><h3>live</h3></div>
|
||||
<div><wc-icon name="load"></wc-icon><h3>load</h3></div>
|
||||
<div><wc-icon name="loading"></wc-icon><h3>loading</h3></div>
|
||||
<div><wc-icon name="location"></wc-icon><h3>location</h3></div>
|
||||
<div><wc-icon name="lock"></wc-icon><h3>lock</h3></div>
|
||||
<div><wc-icon name="mail"></wc-icon><h3>mail</h3></div>
|
||||
<div><wc-icon name="menu"></wc-icon><h3>menu</h3></div>
|
||||
<div><wc-icon name="menu-dot"></wc-icon><h3>menu-dot</h3></div>
|
||||
<div><wc-icon name="mute"></wc-icon><h3>mute</h3></div>
|
||||
<div><wc-icon name="option"></wc-icon><h3>option</h3></div>
|
||||
<div><wc-icon name="phone"></wc-icon><h3>phone</h3></div>
|
||||
<div><wc-icon name="pie"></wc-icon><h3>pie</h3></div>
|
||||
<div><wc-icon name="pin"></wc-icon><h3>pin</h3></div>
|
||||
<div><wc-icon name="plus"></wc-icon><h3>plus</h3></div>
|
||||
<div><wc-icon name="post"></wc-icon><h3>post</h3></div>
|
||||
<div><wc-icon name="qr"></wc-icon><h3>qr</h3></div>
|
||||
<div><wc-icon name="quote"></wc-icon><h3>quote</h3></div>
|
||||
<div><wc-icon name="radio-on"></wc-icon><h3>radio-on</h3></div>
|
||||
<div><wc-icon name="radio-off"></wc-icon><h3>radio-off</h3></div>
|
||||
<div><wc-icon name="right"></wc-icon><h3>right</h3></div>
|
||||
<div><wc-icon name="sad"></wc-icon><h3>sad</h3></div>
|
||||
<div><wc-icon name="search"></wc-icon><h3>search</h3></div>
|
||||
<div><wc-icon name="second"></wc-icon><h3>second</h3></div>
|
||||
<div><wc-icon name="setting"></wc-icon><h3>setting</h3></div>
|
||||
<div><wc-icon name="share"></wc-icon><h3>share</h3></div>
|
||||
<div><wc-icon name="star"></wc-icon><h3>star</h3></div>
|
||||
<div><wc-icon name="star-half"></wc-icon><h3>star-half</h3></div>
|
||||
<div><wc-icon name="star-full"></wc-icon><h3>star-full</h3></div>
|
||||
<div><wc-icon name="switch"></wc-icon><h3>switch</h3></div>
|
||||
<div><wc-icon name="tag"></wc-icon><h3>tag</h3></div>
|
||||
<div><wc-icon name="talk"></wc-icon><h3>talk</h3></div>
|
||||
<div><wc-icon name="third"></wc-icon><h3>third</h3></div>
|
||||
<div><wc-icon name="time"></wc-icon><h3>time</h3></div>
|
||||
<div><wc-icon name="track"></wc-icon><h3>track</h3></div>
|
||||
<div><wc-icon name="trash"></wc-icon><h3>trash</h3></div>
|
||||
<div><wc-icon name="trigon-down"></wc-icon><h3>trigon-down</h3></div>
|
||||
<div><wc-icon name="trigon-up"></wc-icon><h3>trigon-up</h3></div>
|
||||
<div><wc-icon name="unmute"></wc-icon><h3>unmute</h3></div>
|
||||
<div><wc-icon name="upload"></wc-icon><h3>upload</h3></div>
|
||||
<div><wc-icon name="user"></wc-icon><h3>user</h3></div>
|
||||
<div><wc-icon name="vip"></wc-icon><h3>vip</h3></div>
|
||||
<div><wc-icon name="warn"></wc-icon><h3>warn</h3></div>
|
||||
<div><wc-icon name="wallet"></wc-icon><h3>wallet</h3></div>
|
||||
<div><wc-icon name="windows"></wc-icon><h3>windows</h3></div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
## 安装
|
||||
|
||||
本项目无需安装, 全程cdn引入即可。
|
||||
|
||||
|
||||
### 示例
|
||||
cdn地址, 可以使用我们提供的地址,这个地址的版本将永远保持为最新版
|
||||
|
||||
如果想固定使用某个版本, 可以使用npm的cdn地址。
|
||||
|
||||
1. `//jscdn.ink/@bd/ui/latest/` 直接使用最新版
|
||||
2. `//jscdn.ink/@bd/ui/1.0.0/` 指定版本
|
||||
|
||||
|
||||
```html
|
||||
<!-- 引入css基础样式 -->
|
||||
<link href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css" rel="stylesheet">
|
||||
|
||||
<script type="module">
|
||||
// 引入全部
|
||||
import '//jscdn.ink/@bd/ui/latest/index.js'
|
||||
|
||||
// 或只引入表单组件
|
||||
import '//jscdn.ink/@bd/ui/latest/form/index.js'
|
||||
|
||||
// 或者 你所需要的任意组件即可
|
||||
import '//jscdn.ink/@bd/ui/latest/form/button.js'
|
||||
</script>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<style>
|
||||
.flex,.flex-free { display:flex;align-items:center;margin-top:16px }
|
||||
.flex > *,.flex-free > *{margin:0 16px}
|
||||
.flex > *{flex:1}
|
||||
</style>
|
||||
|
||||
## WC-BUTTON
|
||||
> 常用的按钮组件。
|
||||
|
||||
|
||||
### 基础用法
|
||||
|
||||
<section class="flex">
|
||||
<wc-button type="primary">Primary Button</wc-button>
|
||||
<wc-button type="info">Info Button</wc-button>
|
||||
<wc-button type="success">Success Button</wc-button>
|
||||
<wc-button type="warning">Warning Button</wc-button>
|
||||
</section>
|
||||
<section class="flex">
|
||||
<wc-button>Normal Button</wc-button>
|
||||
<wc-button type="help">Help Button</wc-button>
|
||||
<wc-button type="secondary">Secondary Button</wc-button>
|
||||
<wc-button type="danger">Danger Button</wc-button>
|
||||
</section>
|
||||
|
||||
|
||||
### 尺寸大小
|
||||
|
||||
5种尺寸规则的按钮, 如果不满足自己的需求, 可以自行设置`width`和`height`。
|
||||
|
||||
```html
|
||||
<wc-button size="xxxl">xxxl Size</wc-button>
|
||||
<wc-button size="xxl">xxl Size</wc-button>
|
||||
<wc-button size="xl">xl Size</wc-button>
|
||||
<wc-button>Deault Size</wc-button>
|
||||
<wc-button size="m">Medium Size</wc-button>
|
||||
<wc-button size="s">small Size</wc-button>
|
||||
```
|
||||
|
||||
<section class="flex">
|
||||
<wc-button size="xxxl">xxxl Size</wc-button>
|
||||
<wc-button size="xxl">xxl Size</wc-button>
|
||||
<wc-button size="xl">xl Size</wc-button>
|
||||
<wc-button>Deault Size</wc-button>
|
||||
<wc-button size="m">Medium Size</wc-button>
|
||||
<wc-button size="s">small Size</wc-button>
|
||||
</section>
|
||||
|
||||
### 状态
|
||||
按钮有2种状态, `loading` 和 `disabled`, 这2种状态下, 都不能点击, 也无法获取焦点。
|
||||
|
||||
```html
|
||||
<wc-button loading>Loading Status</wc-button>
|
||||
<wc-button disabled>Disabled Status</wc-button>
|
||||
<wc-button type="info" loading>Loading Status</wc-button>
|
||||
<wc-button type="info" disabled>Disabled Status</wc-button>
|
||||
```
|
||||
|
||||
|
||||
<section class="flex">
|
||||
<wc-button loading>Loading Status</wc-button>
|
||||
<wc-button disabled>Disabled Status</wc-button>
|
||||
<wc-button type="info" loading>Loading Status</wc-button>
|
||||
<wc-button type="info" disabled>Disabled Status</wc-button>
|
||||
</section>
|
||||
|
||||
|
||||
### 图标
|
||||
按钮可通过`icon`属性, 增加前置图标, 图标的名字, 参考前面的章节。
|
||||
|
||||
```html
|
||||
<wc-button icon="edit">编辑</wc-button>
|
||||
<wc-button type="danger" icon="trash">删除</wc-button>
|
||||
<wc-button type="info" icon="load">静态菊花图标</wc-button>
|
||||
<wc-button type="success" icon="loading">动态加载图标</wc-button>
|
||||
<wc-button type="success" icon="fly">提交</wc-button>
|
||||
```
|
||||
|
||||
<section class="flex">
|
||||
<wc-button icon="edit">编辑</wc-button>
|
||||
<wc-button type="danger" icon="trash">删除</wc-button>
|
||||
<wc-button type="info" icon="load">静态菊花图标</wc-button>
|
||||
<wc-button type="success" icon="loading">动态加载图标</wc-button>
|
||||
<wc-button type="success" icon="fly">提交</wc-button>
|
||||
</section>
|
||||
|
||||
### 特殊属性
|
||||
有2个特殊属性`round`和`circle`, 可以控制按钮的圆角半径, 如果有其他半径需求, 可以直接通过css设置`border-radius`。
|
||||
|
||||
`注:` circle属性会让移除掉按钮内文字, 只能用图标
|
||||
|
||||
```html
|
||||
<wc-button type="info" size="xxl" round>圆角矩形</wc-button>
|
||||
<wc-button type="info" size="xl" round>圆角矩形</wc-button>
|
||||
<wc-button type="info" round>圆角矩形</wc-button>
|
||||
<wc-button type="danger" size="xxl" circle icon="trash"></wc-button>
|
||||
<wc-button type="info" size="xl" circle icon="plus"></wc-button>
|
||||
<wc-button type="secondary" circle icon="edit"></wc-button>
|
||||
```
|
||||
|
||||
<section class="flex-free">
|
||||
<wc-button type="info" size="xxl" round>圆角矩形</wc-button>
|
||||
<wc-button type="info" size="xl" round>圆角矩形</wc-button>
|
||||
<wc-button type="info" round>圆角矩形</wc-button>
|
||||
<wc-button type="danger" size="xxl" circle icon="trash"></wc-button>
|
||||
<wc-button type="info" size="xl" circle icon="plus"></wc-button>
|
||||
<wc-button type="secondary" circle icon="edit"></wc-button>
|
||||
</section>
|
||||
|
||||
|
||||
### 完整APIs
|
||||
|
||||
| 属性 | 值类型 | 默认值 | 描述 |
|
||||
| :-: | :-: | :-: | - |
|
||||
| type | String | 无 | 按钮类型, 仅能决定按钮的颜色, 无额外作用, 可选值有: primary、info、success、warning、default、inverse、danger |
|
||||
| size | String | default | 按钮尺寸, 可选值有: large、medium、small、mini |
|
||||
| loading | Boolean | false | 按钮的加载状态, 为true时, 按钮会呈现loading动画, 且按钮点击事件无效 |
|
||||
| disbaled | Boolean | false | 按钮的禁用状态, 为true时, 按钮点击事件无效 |
|
||||
| icon | String | 无 | 为按钮设置前置图标 |
|
||||
| round | 无 | 无 | 为按钮设置大圆角半径。 不需要赋值 |
|
||||
| circle | 无 | 无 | 设置为正圆按钮, 且会让文字失效。 不需要赋值 |
|
||||
| autofocus | 无 | 无 | 让按钮自动获得焦点。 不需要赋值 |
|
||||
| lazy | Number | 0 | 为按钮设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发点击事件 |
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Topbar nav="docs" />
|
||||
<main class="body">
|
||||
<Menu />
|
||||
<Menu :nav="nav" />
|
||||
<wc-scroll class="content" ref="detail">
|
||||
<wc-markd class="detail" :code="docset"></wc-markd>
|
||||
</wc-scroll>
|
||||
|
|
@ -21,12 +21,14 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
nav: 'logs',
|
||||
docset: ''
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let key = location.search.slice(1)
|
||||
this.nav = key
|
||||
|
||||
fetch(`/docset/ui/${key}.md`)
|
||||
.then(r => r.text())
|
||||
|
|
@ -59,6 +61,7 @@ a {
|
|||
|
||||
<style scoped>
|
||||
.body {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -67,8 +70,8 @@ a {
|
|||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.detail {
|
||||
width: calc(100vw - 284px);
|
||||
margin: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<dt class="title">
|
||||
<a
|
||||
v-for="it in menu.base"
|
||||
:class="{ a: id === it.id }"
|
||||
:class="{ a: nav === it.id }"
|
||||
:href="'?' + it.id"
|
||||
>
|
||||
<span>{{ it.name }}</span>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<a
|
||||
class="text-ell"
|
||||
v-for="it in menu.form"
|
||||
:class="{ a: id === it.id }"
|
||||
:class="{ a: nav === it.id }"
|
||||
:href="'?' + it.id"
|
||||
>
|
||||
<span>{{ it.name }}</span>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<a
|
||||
class="text-ell"
|
||||
v-for="it in menu.data"
|
||||
:class="{ a: id === it.id }"
|
||||
:class="{ a: nav === it.id }"
|
||||
:href="'?' + it.id"
|
||||
>
|
||||
<span>{{ it.name }}</span>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<a
|
||||
class="text-ell"
|
||||
v-for="it in menu.other"
|
||||
:class="{ a: id === it.id }"
|
||||
:class="{ a: nav === it.id }"
|
||||
:href="'?' + it.id"
|
||||
>
|
||||
<span>{{ it.name }}</span>
|
||||
|
|
@ -53,9 +53,11 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
nav: { type: String, default: 'logs' }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: 'logs',
|
||||
menu: {
|
||||
base: [
|
||||
{ id: 'logs', name: '更新日志' },
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './app.vue'
|
||||
|
||||
import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
|
||||
// import '//jscdn.ink/@bd/ui/latest/form/index.js'
|
||||
import '//127.0.0.1:8090/dist/form/index.js'
|
||||
import '//127.0.0.1:8090/dist/markd/index.js'
|
||||
import '//127.0.0.1:8090/dist/sandbox/index.js'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue