[style] bulma change to ant-design

lynzz · Dec 24, 2016 · 30b23e4 · 30b23e4
1 parent 88b6598
commit 30b23e4
Show file tree

Hide file tree

Showing 112 changed files with 4,605 additions and 3,556 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # vue-pandora
 
-> vue pandora ui, base on [bulma](http://bulma.io), **still in development**
+> vue pandora ui, base on [ant-design](http://ant.design), **still in development**
 
 ## Build Setup
 

diff --git a/examples/app.vue b/examples/app.vue
@@ -14,7 +14,7 @@
     name: 'app'
   }
 </script>
-<style lang="sass">
+<style lang="less">
 
 @import '../node_modules/highlight.js/styles/color-brewer.css';
 
@@ -224,6 +224,28 @@ ul, li {
   animation: xRightMatrix .5s ease-out;
 }
 
+.table {
+  font-size: 13px;
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 100%;
+  margin: 16px 0;
+
+  th {
+    background: #F7F7F7;
+    white-space: nowrap;
+    color: #5C6B77;
+    font-weight: 600;
+  }
+  th, td {
+    border: 1px solid #e9e9e9;
+    padding: 8px 16px;
+    text-align: left;
+  }
+}
+
 @keyframes xRightMatrix {
   0% {
     opacity: 0;

diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
@@ -12,12 +12,29 @@
   </div>
 </template>
 
-<style lang="sass">
+<style lang="less">
   .demo-block {
     border: solid 1px #eaeefb;
     border-radius: 4px;
     transition: .2s;
 
+    .ant-row > div {
+      text-align: center;
+      min-height: 30px;
+      margin-top: 8px;
+      margin-bottom: 8px;
+      color: #fff;
+      padding: 16px 0;
+    }
+
+    .ant-row > div:not(.gutter-row):nth-child(2n+1),
+    .ant-row-flex >div:not(.gutter-row):nth-child(2n+1){
+      background: rgba(0, 160, 233, 0.7);
+    }
+    .ant-row > div:not(.gutter-row),
+    .ant-row-flex >div:not(.gutter-row){
+      background: #00A0E9
+    }
     &.hover {
       box-shadow: 0 6px 18px 0 rgba(232, 237, 250, .5);
     }

diff --git a/examples/docs/button.md b/examples/docs/button.md
@@ -23,50 +23,38 @@
 
 基础的按钮用法。
 
-:::demo Button 组件有5种常用主题，由`type`属性来定义，默认为`default`。
+:::demo 按钮有四种类型：主按钮、次按钮、幽灵按钮、虚线按钮。通过设置 `type` 为 `primary` `ghost` `dashed`可分别创建主按钮、幽灵按钮、虚线按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。主按钮和次按钮可独立使用，幽灵按钮用于和主按钮组合。需要强引导用主按钮，切记主按钮在同一个操作区域最多出现一次。
 
 ```html
-<p class="control">
-  <p-button>default</p-button>
-  <p-button type="white">white</p-button>
-  <p-button type="light">light</p-button>
-  <p-button type="dark">dark</p-button>
-  <p-button type="black">black</p-button>
-  <p-button type="link">link</p-button>
-</p>
-<p class="control">
-  <p-button type="primary">primary</p-button>
-  <p-button type="danger">danger</p-button>
-  <p-button type="info">info</p-button>
-  <p-button type="success">success</p-button>
-  <p-button type="warning">warning</p-button>
-</p>
+<p-button>default</p-button>
+<p-button type="primary">primary</p-button>
+<p-button type="ghost">ghost</p-button>
+<p-button type="dashed">dashed</p-button>
+
 ```
 :::
 
 ### sharp 形状
 
-可设置 outlined 或 inverted"
+可设置 `circle`
 
 :::demo
 
 ```html
-<p-button type="primary" shape="outlined">outlined</p-button>
-<p-button type="primary" shape="inverted">inverted</p-button>
+<p-button type="primary" shape="circle" icon="search"></p-button>
 ```
 :::
 
 ### 不同大小
 
-按钮的大小，由属性 size 定义，值有 `small`, `medium`,`large`, 默认是 `normal`
+按钮的大小，由属性 size 定义，值有 `small`, `normal`,`large`, 默认是 `normal`
 
 :::demo
 
 ```html
-<p-button size="small">small</p-button>
+<p-button size="sm">small</p-button>
 <p-button>normal</p-button>
-<p-button size="medium">medium</p-button>
-<p-button size="large">large</p-button>
+<p-button size="lg">large</p-button>
 ```
 :::
 
@@ -86,15 +74,13 @@
 
 ### 带有图标的按钮
 
-图标用[Font Awesome](http://fortawesome.github.io/Font-Awesome/)
-
 :::demo
 
 ```html
 <p-button icon="user">用户</p-button>
 <p-button icon="lock" type="primary">锁定</p-button>
-<p-button icon="lock" type="primary" size="large">变大</p-button>
-<p-button icon="lock" type="primary" size="small">变小</p-button>
+<p-button icon="lock" type="primary" size="lg">变大</p-button>
+<p-button icon="lock" type="primary" size="sm">变小</p-button>
 ```
 :::
 
@@ -109,9 +95,9 @@
 ### 属性
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | 尺寸   | string  |   large,medium,small            |    normal     |
-| type     | 类型   | string    |   primary,success,warning,danger,info,white,link,dark,black |     —    |
-| sharp     | 按钮形状   | string    | outlined,inverted | —   |
+| size     | 尺寸   | string  |   lg,sm            |    normal     |
+| type     | 类型   | string    |   primary,default,ghost,dashed |     —    |
+| sharp     | 按钮形状   | string    | circle | —   |
 | disabled  | 禁用    | boolean   | true, false   | false   |
 | icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
 | loading | 加载状态的按钮 | true,false | — | — |

diff --git a/examples/docs/form.md b/examples/docs/form.md
@@ -128,3 +128,29 @@
 </p-form>
 ```
 :::
+
+### Form Attributes
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| model   | 表单数据对象 | object      |                  —                |  — |
+| rules    | 表单验证规则 | object | — | — |
+| inline    | 行内表单模式 | boolean | — | false |
+| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
+
+### Form Methods
+
+| 方法名      | 说明          |
+|---------- |-------------- |
+| validate(cb) | 对整个表单进行校验的方法 |
+| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
+| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
+
+### Form-Item Attributes
+
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| prop    | 表单域 model 字段 | string    | 传入 Form 组件的 `model` 中的字段 | — |
+| label | 标签文本 | string | — | — |
+| label-width | 表单域标签的的宽度，例如 '50px' | string |       —       | — |
+| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
diff --git a/examples/docs/getting-started.md b/examples/docs/getting-started.md
@@ -1 +1,13 @@
 # 开始
+
+### 样式
+
+UI 基于 ant-design
+
+### 相关开源项目
+
+`pandora-ui` 部分组件参考了以下项目
+
+- [Element](http://element.eleme.io/#/component/alert)
+- [Ant Design](http://ant.design/)
+- [vue-antd](https://github.com/okoala/vue-antd)
diff --git a/examples/docs/icon.md b/examples/docs/icon.md
@@ -1,19 +1,20 @@
 ## Icon
 ---
-图标用[Font Awesome](http://fortawesome.github.io/Font-Awesome/)
+语义化的矢量图形。
 
 ### 用法
 
 属性 `type` 定义 icon 类型，**注** 为加载时 `type` 设为 `loading`
 
+### 方向性图标
 :::demo
 ```html
 <p-row :gapless="true">
-  <p-col><p-icon type="user"></p-icon></p-col>
-  <p-col><p-icon type="bell"></p-icon></p-col>
-  <p-col><p-icon type="bolt"></p-icon></p-col>
-  <p-col><p-icon type="bars"></p-icon></p-col>
-  <p-col><p-icon type="loading"></p-icon></p-col>
+  <p-col><p-icon type="step-backward"></p-icon></p-col>
+  <p-col><p-icon type="step-forward"></p-icon></p-col>
+  <p-col><p-icon type="fast-backward"></p-icon></p-col>
+  <p-col><p-icon type="fast-forward"></p-icon></p-col>
+  <p-col><p-icon type="shrink"></p-icon></p-col>
 </p-row>
 
 ```

diff --git a/examples/docs/input.md b/examples/docs/input.md
@@ -14,7 +14,10 @@
 
 :::demo
 ```html
-<p-input placeholder="写点什么吧"></p-input>
+<p-row>
+  <p-input placeholder="写点什么吧"></p-input>
+</p-row>
+
 <p-input type="textarea" placeholder="写点什么吧"></p-input>
 ```
 :::
@@ -32,59 +35,43 @@
 :::demo
 ```html
 <p-input placeholder="写点什么吧" v-model="input" :readonly="true"></p-input>
-```
-:::
 
-### 反馈状态
-
-:::demo
-```html
-<p-input placeholder="写点什么吧" theme="success" icon="check"></p-input>
-<p-input placeholder="写点什么吧" theme="danger" icon="warning"></p-input>
 ```
 :::
 
-### 复合型
+
+### 前置/后置组合
 
 :::demo
 ```html
-<p-input placeholder="关键字">
-  <template slot="append"><p-button icon="search" type="primary">搜索</p-button></template>
-</p-input>
-<p-input placeholder="url">
-  <div class="input-prepend" slot="prepend">http://</div>
+<p-input placeholder="请输入内容">
+  <template slot="before">
+    http://
+  </template>
 </p-input>
-<p-input placeholder="输入金额">
-  <div class="input-prepend" slot="prepend">￥</div>
-  <template slot="append"><p-button type="primary">确定</p-button></template>
+<br>
+<p-input placeholder="关键字">
+  <template slot="after">
+    <p-icon type="search"></p-icon>
+  </template>
 </p-input>
-```
-:::
-
-### 带有图标
 
-:::demo
-```html
-<p-input placeholder="时间" icon="calendar"></p-input>
-<p-input placeholder="用户名" :icon-right="false" icon="user"></p-input>
-```
-:::
-
-### 加载状态
-
-:::demo
-```html
-<p-input placeholder="验证中..." :loading="true"></p-input>
 ```
 :::
 
 ### 不同大小
 
 :::demo
 ```html
-<p-input placeholder="small input" size="small"></p-input>
-<p-input placeholder="normal input"></p-input>
-<p-input placeholder="medium input" size="medium"></p-input>
-<p-input placeholder="large input" size="large"></p-input>
+<p-row>
+  <p-input placeholder="small input" size="sm"></p-input>
+</p-row>
+<p-row>
+  <p-input placeholder="normal input"></p-input>
+</p-row>
+<p-row>
+  <p-input placeholder="large input" size="lg"></p-input>
+</p-row>
+
 ```
 :::