Skip to content

Commit

Permalink
docs(color): add docs,demo for color
Browse files Browse the repository at this point in the history
  • Loading branch information
@cinderyx
cinderyx committed Sep 21, 2018
1 parent f5455cd commit 19fdda2
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 95 deletions.
35 changes: 35 additions & 0 deletions examples/view/demos/color/demo-1.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<div>
<div class="color-demo blue"></div>
<div class="color-demo green"></div>
<div class="color-demo red"></div>
<div class="color-demo black-dark"></div>
<div class="color-demo generate-green-level-3"></div>
</div>
</template>

<style lang="scss" scoped>
@import 'daoColor';
.color-demo {
width: 15px;
height: 15px;
display: inline-block;
}
.blue {
background-color: $blue;
}
.green {
background-color: $green;
}
.red {
background-color: $red;
}
.black-dark {
background-color: $black-dark;
}
.generate-green-level-3 {
background-color: generate-color($green, -3);
}
</style>

242 changes: 148 additions & 94 deletions examples/view/page/components/color/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,116 @@
<template>
<div style="padding:0 50px;">
<h1 class="color-category">Color</h1>
<div :ref="'aaa'" v-if="true"></div>
<div class="color-demo-block" v-for="color in colors" ref="colors">
<span class="color-block" :class="color.name"></span>
<div class="info-block">
<p class="color-info">SCSS: ${{ color.name }}</p>
<p class="hex-info"><span class="name">HEX</span><span class="value">{{ color.hex }}</span></p>
<p class="rgb-info"><span class="name">RGB</span><span class="value">{{ color.rgb }}</span></p>
</div>
</div>
<h1 class="color-category">Grey</h1>
<div class="color-demo-block" v-for="color in greys">
<span class="color-block" :class="color"></span>
<div class="info-block">
<p class="color-info">SCSS: ${{ color }}</p>
<p class="hex-info"><span class="name">HEX</span><span class="value"></span></p>
<p class="rgb-info"><span class="name">RGB</span><span class="value"></span></p>
</div>
</div>
<div class="docs-color">
<docs-title :name="$t('color')" desc="dao-style 色彩库"></docs-title>
<docs-section>
<template slot="title">默认用法</template>
<template slot="content">
<demo-code>
<demo1 slot="demo"></demo1>
<code-reader slot="code" file="color/demo-1.vue"></code-reader>
<md-reader slot="desc">
`dao-color`是 dao-style 的色彩库，将 `dao-color.scss` 文件引入，你就可以轻松使用 `dao-color` scss 变量，还可以通过 `generate-color` scss 方法，生成更深或者更浅的颜色。
</md-reader>
</demo-code>
</template>
</docs-section>
<docs-section>
<template slot="title">
<docs-title
name="所有颜色"
desc="点击 SCSS 变量文字可以直接复制代码"
size="sm">
</docs-title>
</template>
<template slot="content">
<div>
<h1 class="color-category">Color</h1>
<div class="clearfix">
<div class="color-demo-block" v-for="color in colors">
<span class="color-block" :class="color"></span>
<div class="info-block">
<p class="color-info">
<span class="scss-color"
is="dao-clipboard"
v-dao-select-all
:content="`$${color}`">${{ color }}</span>
</p>
<p class="hex-info"><span class="name">HEX</span><span class="value"></span></p>
<p class="rgb-info"><span class="name">RGB</span><span class="value"></span></p>
</div>
</div>
</div>
<h1 class="color-category">Grey</h1>
<div class="clearfix">
<div class="color-demo-block" v-for="color in greys">
<span class="color-block" :class="color"></span>
<div class="info-block">
<p class="color-info">
<span class="scss-color"
is="dao-clipboard"
v-dao-select-all
:content="`$${color}`">${{ color }}</span>
</p>
<p class="hex-info"><span class="name">HEX</span><span class="value"></span></p>
<p class="rgb-info"><span class="name">RGB</span><span class="value"></span></p>
</div>
</div>
</div>

<h1>Color Palette</h1>
<table class="color-palette">
<tr class="color-block" :class="color.name" v-for="color in colors">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="pure-color-line">
<td colspan="7"></td>
</tr>
<tr class="transparent-color-line">
<td colspan="7"></td>
</tr>
</table>
<pre class="scss">@function generate-color($base-color, $level) {
@if $level == -3 {
@return desaturate(lighten($base-color, 36), 15);
} @else if $level == -2 {
@return desaturate(lighten($base-color, 25), 25);
} @else if $level == -1 {
@return lighten($base-color, 4);
} @else if $level == 1 {
@return desaturate(darken($base-color, 7), 11);
} @else if $level == 2 {
@return desaturate(darken($base-color, 13), 7);
} @else if $level == 3 {
@return desaturate(darken($base-color, 19), 9);
} @else {
@return $base-color;
}
}</pre>
</div>
<h1>Color Palette</h1>
<div class="color-category-desc">点击颜色块可以直接复制代码</div>
<table class="color-palette">
<tr class="color-block" :class="color" v-for="color in colors">
<td v-for="num in [-3, -2, -1, 0, 1, 2, 3]">
<div class="color-palette-clipboard"
is="dao-clipboard"
v-dao-select-all
:content="getColorPaletteCopyContent(color, num)"></div>
</td>
</tr>
<tr class="pure-color-line">
<td colspan="7"></td>
</tr>
<tr class="transparent-color-line">
<td colspan="7"></td>
</tr>
</table>
<pre class="scss">
@function generate-color($base-color, $level) {
@if $level == -3 {
@return desaturate(lighten($base-color, 36), 15);
} @else if $level == -2 {
@return desaturate(lighten($base-color, 25), 25);
} @else if $level == -1 {
@return lighten($base-color, 4);
} @else if $level == 1 {
@return desaturate(darken($base-color, 7), 11);
} @else if $level == 2 {
@return desaturate(darken($base-color, 13), 7);
} @else if $level == 3 {
@return desaturate(darken($base-color, 19), 9);
} @else {
@return $base-color;
}
}</pre>
</div>
</template>
</docs-section>
</div>
</template>

<script>
import Demo1 from '@demos/color/demo-1';
export default {
name: 'DaoColorDemo',
name: 'DocsColor',
data() {
const colors = [
{
name: 'blue',
hex: '',
rgb: '',
},
{
name: 'green',
hex: '',
rgb: '',
},
{
name: 'yellow',
hex: '',
rgb: '',
},
{
name: 'orange',
hex: '',
rgb: '',
},
{
name: 'red',
hex: '',
rgb: '',
},
{
name: 'purple',
hex: '',
rgb: '',
},
'blue',
'green',
'yellow',
'orange',
'red',
'purple',
];
const greys = [
'black-dark',
Expand All @@ -112,16 +129,25 @@ export default {
greys,
};
},
methods: {
getColorPaletteCopyContent(color, level) {
return `generate-color($${color}, ${level})`;
},
},
components: {
Demo1,
},
};
</script>

<style lang="scss">
<style scoped lang="scss">
@import 'daoColor';
@function getColor($value) {
@return 'rgb('+red($value)+', '+green($value)+', '+blue($value)+')';
}
@mixin hover-card($generate-color) {
background-color: $generate-color;
$content: 'HEX: '+$generate-color + ' RGB: '+getColor($generate-color);
Expand All @@ -138,19 +164,39 @@ export default {
white-space: pre;
}
}
// @import './mixins.scss';
$colors: ( 'blue': $blue, 'green': $green, 'yellow': $yellow, 'orange': $orange, 'red': $red, 'purple': $purple, );
$greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light': $black-light, 'grey-dark': $grey-dark, 'grey-light': $grey-light, 'white-dark': $white-dark, 'white-dark-lighter': $white-dark-lighter, 'white-light': $white-light, 'white-lighter': $white-lighter, 'white': $white, );
$greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light': $black-light, 'grey-dark': $grey-dark, 'grey-light': $grey-light, 'white-dark': $white-dark, 'white-dark-lighter': $white-dark-lighter, 'white-light': $white-light, 'white-lighter': $white-lighter, 'white': $white );
.clearfix {
&:before,
&:after {
content: " ";
display: table;
clear: both;
}
}
.color-category {
font-size: 30px;
font-weight: 400;
color: $black-dark;
padding-bottom: 10px;
}
.color-category-desc {
font-size: 14px;
font-weight: 400;
color: $grey-dark;
padding-bottom: 10px;
}
.color-demo-block {
margin-bottom: 45px;
margin-bottom: 30px;
float: left;
width: 180px;
.color-block {
display: inline-block;
display: block;
width: 60px;
height: 60px;
border-radius: 4px;
Expand All @@ -168,19 +214,23 @@ $greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light
@at-root &+.info-block .rgb-info .name:after {
content: getColor($value);
padding-left: 10px;
user-select: text!important;
}
}
}
}
}
.info-block {
display: inline-block;
display: block;
font-size: 14px;
line-height: 1;
margin-left: 30px;
margin-top: 10px;
vertical-align: top;
.color-info {
margin: 0 0 12px;
.scss-color:before {
content: 'SCSS: ';
}
}
.hex-info,
.rgb-info {
Expand All @@ -202,6 +252,10 @@ $greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light
width: 60px;
height: 50px;
}
.color-palette-clipboard {
width: 100%;
height: 100%;
}
@each $key,
$value in $colors {
&.#{$key} td {
Expand Down
2 changes: 1 addition & 1 deletion examples/view/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,7 @@ const components = [
path: 'color',
meta: {
available: true,
docs: false,
docs: true,
test: false,
},
},
Expand Down

0 comments on commit 19fdda2

Please sign in to comment.