card component
This commit is contained in:
cookfront
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Card from './src/card';
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="z-card">
|
||||
<img :src="thumb" alt="" class="z-card__img">
|
||||
<div class="z-card__content" :class="{'is-center': !this.$slots.footer}">
|
||||
<div class="z-card__info">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="z-card__title"></h4>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<p v-if="desc" v-text="desc" class="z-card__title"></p>
|
||||
</slot>
|
||||
<slot name="tags"></slot>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-card',
|
||||
props: {
|
||||
thumb: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: String,
|
||||
desc: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Panel from './src/panel';
|
||||
|
||||
export default Panel;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/z-panel",
|
||||
"version": "0.0.1",
|
||||
"description": "picker component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="z-panel">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'z-panel',
|
||||
props: []
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<z-cell
|
||||
<div
|
||||
class="z-radio"
|
||||
:class="{
|
||||
'is-disabled': disabled
|
||||
@@ -11,19 +11,13 @@
|
||||
<span class="z-radio__label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</z-cell>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zCell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'z-radio',
|
||||
|
||||
components: {
|
||||
zCell
|
||||
},
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: {},
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace z {
|
||||
@b button {
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
@import "./mixins/ellipsis.css";
|
||||
|
||||
@component-namespace z {
|
||||
@b card {
|
||||
padding: 5px 15px;
|
||||
background: #FAFAFA;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
|
||||
@e img {
|
||||
float: left;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@e content {
|
||||
margin-left: 100px;
|
||||
display: table;
|
||||
|
||||
@when center {
|
||||
display: table;
|
||||
height: 90px;
|
||||
|
||||
.z-card__info {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e row {
|
||||
overflow: hidden;
|
||||
padding-right: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@e title {
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
max-height: 40px;
|
||||
margin-bottom: 5px;
|
||||
@mixin multi-ellipsis 2;
|
||||
}
|
||||
|
||||
@e desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@e price {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 5px;
|
||||
|
||||
.z-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@b cell-group {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@b dialog-wrapper {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import "./common/var.pcss";
|
||||
@import "./mixins/border_retina.pcss";
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
|
||||
@component-namespace z {
|
||||
@b field {
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
@import './button.css';
|
||||
@import './button_group.css';
|
||||
@import './cell.css';
|
||||
@import './card.css';
|
||||
@import './dialog.css';
|
||||
@import './field.css';
|
||||
@import './icon.css';
|
||||
@@ -12,3 +13,4 @@
|
||||
@import './popup.css';
|
||||
@import './radio.css';
|
||||
@import './switch.css';
|
||||
@import './panel.css';
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
@define-mixin multi-ellipsis $lines {
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@component-namespace z {
|
||||
@b panel {
|
||||
padding: 5px 15px;
|
||||
background: #D8D8D8;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user