cell component

docs/examples/cell.md

@@ -1,15 +1,26 @@
 ## Cell 组件
 
+### 基础用法
+
+:::demo 样例代码
+```html
+<o2-cell title="单元格" value="单元格标题"></o2-cell>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| className | 自定义额外类名 | string  | ''          | ''          |
+| icon | 左侧图标 | string  | ''          | ''          |
+| title | 左侧标题 | string  | ''          | ''          |
+| value | 右侧内容 | string  | ''          | ''          |
+| isLink | 是否为链接，链接会在右侧出现箭头 | string  | ''          | ''          |
 
 ### Slot
 
 | name       | 描述      |
 |-----------|-----------|
 | - | 自定义显示内容 |
-| icon |  |
+| icon | 自定义icon |
-| name |  |
+| title | 自定义title |

packages/cell/src/cell.vue

@@ -1,19 +1,20 @@
 <template>
-  <div class="o2-cell">
+  <a class="o2-cell" :href="url">
     <div class="o2-cell-title">
       <slot name="icon">
         <i v-if="icon" class="o2-icon" :class="'o2-icon-' + icon"></i>
       </slot>
       <slot name="title">
+        <span class="o2-cell-text" v-text="title"></span>
       </slot>
     </div>
     <div class="o2-cell-value">
       <slot>
-
+        <span v-text="value"></span>
       </slot>
+      <i class="o2-cell-arrow-right" v-if="isLink"></i>
     </div>
-    <i class="o2-cell-arrow-right"></i>
+  </a>
-  </div>
 </template>
 
 <script>
@@ -22,7 +23,26 @@ export default {
 
   props: {
     icon: String,
-    title: String
+    title: String,
+    value: String,
+    url: String,
+    isLink: Boolean
   }
 };
 </script>
+
+<style>
+@component-namespace o2 {
+  @component cell {
+    display: block;
+
+    @descendent title {
+      float: left;
+    }
+
+    @descendent value {
+      float: right;
+    }
+  }
+}
+</style>

src/index.js

@@ -4,6 +4,7 @@ import Switch from '../packages/switch/index.js';
 import Field from '../packages/field/index.js';
 import Radio from '../packages/radio/index.js';
 import Cell from '../packages/cell/index.js';
+import Icon from '../packages/icon/index.js';
 // zenui
 import '../packages/zenui/src/index.pcss';
 
@@ -16,6 +17,7 @@ const install = function(Vue) {
   Vue.component(Field.name, Field);
   Vue.component(Radio.name, Radio);
   Vue.component(Cell.name, Cell);
+  Vue.component(Icon.name, Icon);
 };
 
 // auto install
@@ -31,5 +33,6 @@ module.exports = {
   Switch,
   Field,
   Radio,
-  Cell
+  Cell,
+  Icon
 };