Skip to content

Commit

Permalink
docs(dao-tooltip): add demo1
Browse files Browse the repository at this point in the history
  • Loading branch information
@yunyu950908
yunyu950908 committed Sep 9, 2018
1 parent bf39fe9 commit 98fc51f
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 115 deletions.
81 changes: 81 additions & 0 deletions examples/view/demos/tooltip/demo-1.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<template>
<div class="docs-tooltip-container">
<div class="docs-tooltip-top">
<dao-tooltip content="Top Left 提示文字" placement="top-start">
<button class="dao-btn ghost">上左</button>
</dao-tooltip>
<dao-tooltip content="Top Center 提示文字" placement="top">
<button class="dao-btn ghost">上边</button>
</dao-tooltip>
<dao-tooltip content="Top Right 提示文字" placement="top-end">
<button class="dao-btn ghost">上右</button>
</dao-tooltip>
</div>
<div class="docs-tooltip-left">
<dao-tooltip content="Left Top 提示文字" placement="left-start">
<button class="dao-btn ghost">左上</button>
</dao-tooltip>
<br><br>
<dao-tooltip content="Left Center 提示文字" placement="left">
<button class="dao-btn ghost">左边</button>
</dao-tooltip>
<br><br>
<dao-tooltip content="Left Bottom 提示文字" placement="left-end">
<button class="dao-btn ghost">左下</button>
</dao-tooltip>
</div>
<div class="docs-tooltip-right">
<dao-tooltip content="Right Top 提示文字" placement="right-start">
<button class="dao-btn ghost">右上</button>
</dao-tooltip>
<br><br>
<dao-tooltip content="Right Center 提示文字" placement="right">
<button class="dao-btn ghost">右边</button>
</dao-tooltip>
<br><br>
<dao-tooltip content="Right Bottom 提示文字" placement="right-end">
<button class="dao-btn ghost">右下</button>
</dao-tooltip>
</div>
<div class="docs-tooltip-bottom">
<dao-tooltip content="Bottom Left 提示文字" placement="bottom-start">
<button class="dao-btn ghost">下左</button>
</dao-tooltip>
<dao-tooltip content="Bottom Center 提示文字" placement="bottom">
<button class="dao-btn ghost">下边</button>
</dao-tooltip>
<dao-tooltip content="Bottom Right 提示文字" placement="bottom-end">
<button class="dao-btn ghost">下右</button>
</dao-tooltip>
</div>
</div>
</template>

<style lang="scss" scoped>
.docs-tooltip-container {
width: 344px;
.docs-tooltip-top {
text-align: center;
}
.docs-tooltip-left {
float: left;
}
.docs-tooltip-right {
float: right;
}
.docs-tooltip-bottom {
clear: both;
text-align: center;
}
.docs-tooltip-top, .docs-tooltip-bottom {
.dao-tooltip {
margin: 0 4px;
}
}
}
</style>
136 changes: 21 additions & 115 deletions examples/view/page/components/tooltip/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,30 @@
<template>
<div>
<div class="demo-container">
<div class="top">
<dao-tooltip
content="Top Left 文字提示"
placement="top-start"
:delay="delay">
<button class="dao-btn ghost">上左 & delay 1000 ms</button>
</dao-tooltip>
<dao-tooltip content="Top Center 文字提示" placement="top">
<button class="dao-btn ghost">上边</button>
</dao-tooltip>
<dao-tooltip content="Top Right 文字提示" placement="top-end">
<button class="dao-btn ghost">上右</button>
</dao-tooltip>
</div>
<div class="left">
<dao-tooltip content="Left Top 文字提示" placement="left-start">
<button class="dao-btn ghost">左上</button>
</dao-tooltip><br><br>
<dao-tooltip content="Left Center 文字提示" placement="left">
<button class="dao-btn ghost">左边</button>
</dao-tooltip><br><br>
<dao-tooltip content="Left Bottom 文字提示" placement="left-end">
<button class="dao-btn ghost">左下</button>
</dao-tooltip>
</div>
<div class="right">
<dao-tooltip content="Right Top 文字提示asdfasd;fasj;dkfjas;djf;asd;asd;fjas;dfj;asd" placement="right-start">
<button class="dao-btn ghost">右上</button>
</dao-tooltip><br><br>
<dao-tooltip content="Right Center 文字提示" placement="right">
<button class="dao-btn ghost">右边</button>
</dao-tooltip><br><br>
<dao-tooltip content="Right Bottom 文字提示" placement="right-end" :append-to-body="false">
<button class="dao-btn ghost">右下</button>
</dao-tooltip>
</div>
<div class="bottom">
<dao-tooltip content="Bottom Left 文字提示" placement="bottom-start">
<button class="dao-btn ghost">下左</button>
</dao-tooltip>
<dao-tooltip content="Bottom Center 文字提示" placement="bottom">
<button class="dao-btn ghost">下边</button>
</dao-tooltip>
<dao-tooltip content="Bottom Right 文字提示" placement="bottom-end">
<button class="dao-btn ghost">下右</button>
</dao-tooltip>
</div>
</div>
<div class="demo-container">
<!-- <dao-tooltip
content="delay 1000ms"
placement="top-start"
:delay="delay">
<button class="dao-btn ghost">delay 1000ms</button>
</dao-tooltip> -->
<table>
<tr>
<td style="border:1px solid black;overflow:hidden;">
<dao-tooltip
content="test">
<button class="dao-btn ghost">test</button>
</dao-tooltip>
</td>
</tr>
</table>
</div>
<div>
<div class="dao-btn-group">
<dao-tooltip content="this is a test button group" placement="top">
<button class="dao-btn blue">with tooltip</button>
</dao-tooltip>
<button class="dao-btn green">without</button>
<dao-tooltip content="this is a test button group" placement="top">
<button class="dao-btn yellow">with</button>
</dao-tooltip>
<button class="dao-btn red">with</button>
</div>
</div>
<br>
<div class="dao-btn-group">
<dao-tooltip content="this is a test button group" placement="top">
<button class="dao-btn ghost">with tooltip</button>
</dao-tooltip>
<button class="dao-btn ghost">without</button>
<dao-tooltip content="this is a test button group" placement="top">
<button class="dao-btn ghost">with</button>
</dao-tooltip>
<button class="dao-btn ghost">with</button>
</div>
</div>
<div class="docs-tooltip">
<docs-title :name="$t('tooltip')" desc="tooltip 是一个提示文字的组件"></docs-title>
<docs-section>
<template slot="title">基础用法</template>
<template slot="content">
<demo-code>
<demo1 slot="demo"></demo1>
<code-reader slot="code" file="tooltip/demo-1.vue"></code-reader>
<md-reader slot="desc">
在这里我们提供 9 种不同方向的展示方式，可以通过以上完整示例来理解，选择你要的效果。
</md-reader>
</demo-code>
</template>
</docs-section>
</div>
</template>
<script>
import Demo1 from '@demos/tooltip/demo-1';
export default {
components: {
Demo1,
},
data() {
return {
delay: 1000,
};
return {};
},
};
</script>
<style lang="scss" scoped>
.demo-container {
width: 500px;
}
.top {
text-align: center;
}
.left {
float: left;
width: 60px;
}
.right {
float: right;
width: 60px;
}
.bottom {
clear: both;
text-align: center;
}
</style>
<style lang="scss" scoped></style>

0 comments on commit 98fc51f

Please sign in to comment.