ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-15 07:30:53 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

add button

Browse Source
This commit is contained in:
niunai
2017-02-06 10:30:43 +08:00
parent 347dc1751c
commit 4562ca8b19
23 changed files with 616 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/button/CHANGELOG.md Normal file
View File

@@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/button/README.md Normal file
View File

@@ -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)

3
packages/button/index.js Normal file
View File

@@ -0,0 +1,3 @@
import Button from './src/button';
export default Button;

1
packages/button/index.pcss Normal file
View File

@@ -0,0 +1 @@
@import "./src/button.pcss";

10
packages/button/package.json Normal file
View File

@@ -0,0 +1,10 @@
{
"name": "@youzan/o2-button",
"version": "0.0.1",
"description": "button component",
"main": "./lib/index.js",
"author": "niunai",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}

64
packages/button/src/button.pcss Normal file
View File

@@ -0,0 +1,64 @@
@import "../../zenui/src/common/var.pcss";
@component-namespace o2 {
@component button {
position: relative;
display: block;
height: 45px;
border-radius: 4px;
border: 0;
box-sizing: border-box;
font-size: 16px;
text-align: center;
appearance: none;
outline: 0;
overflow: hidden;
&::after {
content: " ";
position: absolute 0 0 0 0;
background-color: #000;
opacity: 0;
}
&:not(.is-disabled):active::after {
opacity: .3;
}
@modifier default {
color: $button-default-color;
background-color: $button-default-background-color;
}
@modifier primary {
color: $button-primary-color;
background-color: $button-primary-background-color;
}
@modifier danger {
color: $button-danger-color;
background-color: $button-danger-background-color;
}
@modifier large {
display: block;
width: 100%;
}
@modifier normal {
display: inline-block;
padding: 0 12px;
}
@modifier small {
display: inline-block;
font-size: 14px;
padding: 0 12px;
height: 33px;
}
@when disabled {
opacity: .6;
}
}
}

73
packages/button/src/button.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<button
:type="nativeType"
:class="[
'o2-button',
'o2-button--' + type,
'o2-button--' + size,
{
'is-disabled': disabled,
'is-loading': loading
}
]"
:disabled="disabled"
@click="handleClick"
>
<i v-if="loading" class="o2-icon-loading"></i>
<span class="o2-button-text"><slot></slot></span>
</button>
</template>
<script>
/**
* o2-header
* @module components/button
* @desc 按钮
* @param {string} [type=default] - 显示类型，接受 default, primary, danger
* @param {boolean} [disabled=false] - 禁用
* @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
* @param {string} [native-type] - 原生 type 属性
* @param {slot} - 显示文本
*
* @example
* <o2-button size="large" type="primary">按钮</o2-button>
*/
export default {
name: 'o2-button',
methods: {
handleClick(e) {
this.$emit('click', e);
}
},
props: {
disabled: Boolean,
loading: Boolean,
nativeType: String,
type: {
type: String,
default: 'default',
validator(value) {
return [
'default',
'danger',
'primary'
].indexOf(value) > -1;
}
},
size: {
type: String,
default: 'normal',
validator(value) {
return [
'mini',
'small',
'normal',
'large'
].indexOf(value) > -1;
}
}
}
};
</script>

0
packages/zenui/README.md Normal file
View File

10
packages/zenui/package.json Normal file
View File

@@ -0,0 +1,10 @@
{
"name": "@youzan/zenui",
"version": "0.0.1",
"description": "wap component style",
"main": "./lib/index.js",
"author": "niunai",
"license": "MIT",
"devDependencies": {},
"dependencies": {}
}

93
packages/zenui/src/common/var.pcss Normal file
View File

@@ -0,0 +1,93 @@
/* UI标准色 */
$c-white: #fff;
$c-black: #333;
$c-green: #06bf04;
$c-green-wx: #4b0;
$c-red: #ed5050;
$c-gray: #c9c9c9;
$c-gray-light: #e5e5e5;
$c-gray-darker: #666;
$c-gray-dark: #999;
$c-yellow: #f09000;
$c-yellow-light: #fcff00;
$c-orange: #f60;
$c-orange-dark: #f15a0c;
$c-blue: #38f;
$c-background: #f8f8f8;
/* 按钮颜色 */
$button-default-color: $c-white;
$button-default-background-color: $c-green-wx;
$button-primary-color: $c-black;
$button-primary-background-color: $c-white;
$button-danger-color: $c-white;
$button-danger-background-color: #f44;
:root{
/* z-index
-------------------------- */
--index-normal: 1;
--index-top: 1000;
--index-popper: 2000;
/* Link
-------------------------- */
--link-color: #475669;
--link-hover-color: var(--color-primary);
/* Border
-------------------------- */
--border-width-base: 1px;
--border-style-base: solid;
--border-color-base: var(--color-grey);
--border-color-hover: #8492a6;
--border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
--border-radius-base: 4px;
--border-radius-small: 2px;
--border-radius-circle: 100%;
--shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
/* Box-shadow
-------------------------- */
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
/* Fill
-------------------------- */
--fill-base: var(--color-white);
/* Font
-------------------------- */
--font-size-base: 14px;
--font-color-base: #1f2d3d;
--font-color-disabled-base: #bbb;
/* Size
-------------------------- */
--size-base: 14px;
/* Disable base
-------------------------- */
--disabled-fill-base: #EFF2F7;
--disabled-color-base: #bbb;
--disabled-border-base: #D3DCE6;
/* Icon
-------------------------- */
--icon-color: #666;
/* Button
-------------------------- */
--button-default-color: #656b79;
--button-default-background-color: #f6f8fa;
--button-default-plain-color: #5a5a5a;
--button-default-box-shadow: 0 0 1px #b8bbbf;
--button-primary-color: #fff;
--button-primary-background-color: #06BF04;
--button-danger-color: #fff;
--button-danger-background-color: #ef4f4f;
}

4
packages/zenui/src/index.pcss Normal file
View File

@@ -0,0 +1,4 @@
/**
css组件库 入口,从各个地方拿css文件，组装成css组件库
*/
@import '../../button/index.pcss';