Merge pull request #130 from wadellg/feature/el-card

Feature/el card

packages/omi-element-ui/src/card.js

@@ -0,0 +1,5 @@
+import { render } from 'omi'
+import './assets/index.css'
+import './elements/card'
+
+render(<my-app />, '#root')

packages/omi-element-ui/src/elements/card/_index.css

@@ -0,0 +1,41 @@
+
+.box-card { 
+  width: 480px;
+}
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.time {
+  font-size: 13px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.button {
+  padding: 0;
+  float: right;
+}
+
+.image {
+  width: 100%;
+  height: 160px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both
+}

packages/omi-element-ui/src/elements/card/index.js

@@ -0,0 +1,84 @@
+import { tag, WeElement } from 'omi'
+import style from './_index.css'
+import '../../omi-element-ui/el-card'
+import '../../omi-element-ui/el-button'
+
+@tag('my-app')
+class MyApp extends WeElement {
+
+  css() {
+    return style
+  }
+
+  render(props, data) {
+    let list = [1, 2, 3, 4];
+    return (
+      <div>
+        <div style="margin: 10px;">
+          <p> 基础用法：包含标题，内容和操作</p>
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>卡片名称</span>
+              <el-button style="float: right; height: 20px; padding: 3px 0" type="text">操作按钮</el-button>
+            </div>
+            { 
+              list.map((item, key) => {
+                return (
+                  <div key={key} class="text item">
+                      {'列表内容 '+ item}
+                  </div>
+                )
+              }) 
+              }
+          </el-card>
+        </div>
+        <div style="margin: 10px;">
+          <p> 简单卡片：卡片可以只有内容区域。</p>
+          <el-card class="box-card">
+            { 
+              list.map((item, key) => {
+                return (
+                  <div key={key} class="text item">
+                      {'列表内容 '+ item}
+                  </div>
+                )
+              }) 
+            }
+          </el-card>
+        </div>
+        <div style="margin: 10px;">
+          <p> 带图片：可配置定义更丰富的内容展示</p>
+          <el-card class="box-card" body-style={{padding: '0px'}}>
+            <img src="/static/images/hamburger.png" class="image" />
+            <div style="padding: 14px;">
+              <span>好吃的汉堡</span>
+              <div class="bottom clearfix">
+                <time class="time">{ new Date().toLocaleDateString() }</time>
+                <el-button type="text" class="button">操作按钮</el-button>
+              </div>
+            </div>
+          </el-card>
+      
+        </div>
+        <div style="margin: 10px;">
+          <p> 卡片阴影</p>
+          <div style="margin: 10px;">
+            <el-card class="box-card" shadow="always">
+              总是显示
+            </el-card>
+          </div>
+          <div style="margin: 10px;">
+            <el-card class="box-card" shadow="hover">
+              鼠标悬浮时显示
+            </el-card>
+          </div>
+          <div style="margin: 10px;">
+            <el-card class="box-card" shadow="never">
+              从不显示
+            </el-card>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

packages/omi-element-ui/src/omi-element-ui/el-card/index.js

@@ -0,0 +1,43 @@
+import { WeElement, tag, getHost } from 'omi'
+import style from '../style/_card.scss'
+
+@tag('el-card', true)
+class ElCard extends WeElement {
+  
+    css() {
+        let pCss = getHost(this).css
+        
+        return style + '  ' + pCss()
+    }
+
+    install(){
+        if (!this.data.header) {
+          let dom = Array.prototype.slice.call(this.children)
+          dom.map((item)=>{
+              if (item.getAttribute('slot') === 'header'){
+                  this.data.header = item
+                  return 
+              }
+          })
+        }
+
+    }
+
+    render(props, data) {
+        let { style, shadow, bodyStyle } = props
+        let { header } = data
+        let classStr = 'el-card ' + (this.props.class ? this.props.class : '')
+        return (
+            <div class={shadow ? classStr + ' is-' + shadow + '-shadow' : classStr + ' is-always-shadow'}>
+                {
+                    header && (<div class="el-card__header">
+                                  <slot name="header">{ header }</slot>
+                               </div>)
+                }
+                <div class="el-card__body" style={bodyStyle}>
+                    <slot></slot>
+                </div>
+            </div>
+        )
+    }
+}

packages/omi-element-ui/src/omi-element-ui/style/_card.scss

@@ -0,0 +1,32 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(card) {
+  border-radius: $--card-border-radius;
+  border: 1px solid $--card-border-color;
+  background-color: $--color-white;
+  overflow: hidden;
+  color: $--color-text-primary;
+  transition: 0.3s;
+
+  @include when(always-shadow) {
+    box-shadow: $--box-shadow-light;
+  }
+
+  @include when(hover-shadow) {
+    &:hover,
+    &:focus {
+      box-shadow: $--box-shadow-light;
+    }
+  }
+
+  @include e(header) {
+    padding: #{$--card-padding - 2 $--card-padding};
+    border-bottom: 1px solid $--card-border-color;
+    box-sizing: border-box;
+  }
+
+  @include e(body) {
+    padding: $--card-padding;
+  }
+}