Skip to content

Commit

Permalink
调整官网 demo 展示样式 (merge request !832)
Browse files Browse the repository at this point in the history 
Squash merge branch 'feat/site/upgrade' into 'develop'

* feat: 优化radio input input-number demo
* feat: 优化radio input input-number demo
* feat: 优化demo
* Merge branch 'develop' into feat/site/upgrade
* feat: 优化官网 demo
* feat: 调整list demo
* Merge branch 'feat/site/upgrade' of tdesign-web-vue into feat/site/upgrade
* feat: 调整demo 样式
* chore: adjust dropdown demo
* feat: 调整 demo 样式
* feat: 优化tree文档
* feat: 调整 tabs demo 展示
  • Loading branch information
@honkinglin @xiaosansiji
honkinglin authored and xiaosansiji committed Oct 28, 2021
1 parent 698689e commit c76aac3
Show file tree
Hide file tree
Showing 83 changed files with 6,606 additions and 6,874 deletions.
59 changes: 5 additions & 54 deletions examples/button/demos/base.vue
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,8 @@
<template>
<div>
<div class="tdesign-demo-block">
<t-button theme="default" variant="base">填充按钮</t-button>
<t-button theme="default" variant="outline">描边按钮</t-button>
<t-button theme="default" variant="dashed">虚框按钮</t-button>
<t-button theme="default" variant="text">文字按钮</t-button>
<t-button theme="default" variant="base" loading>加载中</t-button>
</div>
<div class="tdesign-demo-block">
<t-button theme="primary" variant="base">填充按钮</t-button>
<t-button theme="primary" variant="outline">描边按钮</t-button>
<t-button theme="primary" variant="dashed">虚框按钮</t-button>
<t-button theme="primary" variant="text">文字按钮</t-button>
<t-button theme="primary" variant="base" loading>加载中</t-button>
</div>
<div class="tdesign-demo-block">
<t-button theme="success" variant="base">填充按钮</t-button>
<t-button theme="success" variant="outline">描边按钮</t-button>
<t-button theme="success" variant="dashed">虚框按钮</t-button>
<t-button theme="success" variant="text">文字按钮</t-button>
<t-button theme="success" variant="base" loading>加载中</t-button>
</div>
<div class="tdesign-demo-block">
<t-button theme="warning" variant="base">填充按钮</t-button>
<t-button theme="warning" variant="outline">描边按钮</t-button>
<t-button theme="warning" variant="dashed">虚框按钮</t-button>
<t-button theme="warning" variant="text">文字按钮</t-button>
<t-button theme="warning" variant="base" loading>加载中</t-button>
</div>
<div class="tdesign-demo-block">
<t-button theme="danger" variant="base">填充按钮</t-button>
<t-button theme="danger" variant="outline">描边按钮</t-button>
<t-button theme="danger" variant="dashed">虚框按钮</t-button>
<t-button theme="danger" variant="text">文字按钮</t-button>
<t-button theme="danger" variant="base" loading>加载中</t-button>
</div>
<div class="tdesign-demo-block-row">
<t-button theme="default" variant="base">填充按钮</t-button>
<t-button theme="default" variant="outline">描边按钮</t-button>
<t-button theme="default" variant="dashed">虚框按钮</t-button>
<t-button theme="default" variant="text">文字按钮</t-button>
</div>
</template>

<style lang="less" scoped>
.tdesign-demo-item__body {
.t-button + .t-button {
margin-left: 32px;
}
.tdesign-demo-block {
margin-top: 16px;
}
}
.tdesign-wrap {
display: inline-block;
background-color: #bbbbbb;
padding: 10px;
margin-right: 10px;
}
</style>
21 changes: 2 additions & 19 deletions examples/button/demos/block.vue
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,10 @@
<template>
<div class="demo-button-row">
<div class="demo-button-col">
<div class="tdesign-demo-block-row" style="justify-content: center;">
<div class="tdesign-demo-block-column" style="min-width: 320px; max-width: 640px;">
<t-button block theme="primary" variant="base">填充按钮</t-button>
<t-button block variant="outline">描边按钮</t-button>
<t-button block variant="dashed">虚框按钮</t-button>
<t-button block variant="text">文字按钮</t-button>
</div>
</div>
</template>

<style scoped>
.demo-button-row {
display: flex;
width: 100%;
justify-content: center;
}
.demo-button-col {
width: 50%;
}
.demo-button-col + .demo-button-col {
margin-left: 32px;
}
.t-button + .t-button {
margin-top: 16px;
}
</style>
18 changes: 6 additions & 12 deletions examples/button/demos/ghost.vue
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,30 @@
<template>
<div>
<div class="tdesign-demo-block" style="margin-bottom: 10px;">
<div class="tdesign-demo-block-column">
<div class="tdesign-demo-block-row">
<t-button variant="outline" ghost>幽灵按钮</t-button>
<t-button variant="dashed" ghost>幽灵按钮</t-button>
<t-button variant="text" ghost>幽灵按钮</t-button>
</div>
<div class="tdesign-demo-block" style="margin-bottom: 10px;">
<div class="tdesign-demo-block-row">
<t-button variant="outline" theme="primary" ghost>幽灵按钮</t-button>
<t-button variant="dashed" theme="primary" ghost>幽灵按钮</t-button>
<t-button variant="text" theme="primary" ghost>幽灵按钮</t-button>
</div>
<div class="tdesign-demo-block" style="margin-bottom: 10px;">
<div class="tdesign-demo-block-row">
<t-button variant="outline" theme="success" ghost>幽灵按钮</t-button>
<t-button variant="dashed" theme="success" ghost>幽灵按钮</t-button>
<t-button variant="text" theme="success" ghost>幽灵按钮</t-button>
</div>
<div class="tdesign-demo-block" style="margin-bottom: 10px;">
<div class="tdesign-demo-block-row">
<t-button variant="outline" theme="warning" ghost>幽灵按钮</t-button>
<t-button variant="dashed" theme="warning" ghost>幽灵按钮</t-button>
<t-button variant="text" theme="warning" ghost>幽灵按钮</t-button>
</div>
<div class="tdesign-demo-block" style="margin-bottom: 10px;">
<div class="tdesign-demo-block-row">
<t-button variant="outline" theme="danger" ghost>幽灵按钮</t-button>
<t-button variant="dashed" theme="danger" ghost>幽灵按钮</t-button>
<t-button variant="text" theme="danger" ghost>幽灵按钮</t-button>
</div>
</div>

</template>

<style scoped>
.t-button + .t-button {
margin-left: 16px;
}
</style>
61 changes: 18 additions & 43 deletions examples/button/demos/icon.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,22 @@
<template>
<div class="demo-button-icon">
<div class="demo-button-row">
<div class="demo-button-col">
<t-button theme="primary">
<t-icon-add slot="icon"/>
新建
</t-button>
<t-button variant="outline">
<t-icon-cloud-upload slot="icon"/>
上传文件
</t-button>
</div>
<div class="demo-button-col">
<t-button shape="circle" theme="primary">
<t-icon-discount slot="icon"/>
</t-button>
<t-button shape="circle" theme="primary">
<t-icon-cloud-download slot="icon"/>
</t-button>
</div>
<!-- 使用 function 的形式定义 icon -->
<div class="demo-button-col">
<t-button
variant="outline"
:icon="renderIcon"
>
Function Icon
</t-button>
</div>

</div>
<div class="tdesign-demo-block-row">
<t-button theme="primary">
<t-icon-add slot="icon"/>
新建
</t-button>
<t-button variant="outline">
<t-icon-cloud-upload slot="icon"/>
上传文件
</t-button>
<t-button shape="circle" theme="primary">
<t-icon-discount slot="icon"/>
</t-button>
<t-button shape="circle" theme="primary">
<t-icon-cloud-download slot="icon"/>
</t-button>
<t-button variant="outline" :icon="renderIcon">
搜索
</t-button>
</div>
</template>
<script>
Expand All @@ -53,15 +40,3 @@ export default {
},
};
</script>

<style scoped>
.demo-button-row {
display: flex;
}
.demo-button-col {
margin-right: 32px;
}
.t-button + .t-button {
margin-left: 16px;
}
</style>
24 changes: 5 additions & 19 deletions examples/button/demos/shape.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
<template>
<div class="tdesign-demo-shape">
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-column">
<div class="tdesign-demo-block-row">
<div class="item"><t-button theme="primary" shape="rectangle" variant="base">填充按钮</t-button></div>
<div class="item"><t-button theme="primary" shape="square" variant="base"><t-icon-calendar slot="icon"/></t-button></div>
<div class="item"><t-button theme="primary" shape="round" variant="base">填充按钮</t-button></div>
<div class="item">
<t-button theme="primary" shape="circle" variant="base"><t-icon-calendar slot="icon"/></t-button>
</div>
</div>
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-row">
<div class="item"><t-button shape="rectangle" variant="outline">描边按钮</t-button></div>
<div class="item"><t-button shape="square" variant="outline"><t-icon-calendar slot="icon"/></t-button></div>
<div class="item"><t-button shape="round" variant="outline">描边按钮</t-button></div>
<div class="item"><t-button shape="circle" variant="outline"><t-icon-calendar slot="icon"/></t-button></div>
</div>
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-row">
<div class="item"><t-button shape="rectangle" variant="dashed">虚框按钮</t-button></div>
<div class="item"><t-button shape="square" variant="dashed"><t-icon-calendar slot="icon"/></t-button></div>
<div class="item"><t-button shape="round" variant="dashed">虚框按钮</t-button></div>
<div class="item"><t-button shape="circle" variant="dashed"><t-icon-calendar slot="icon"/></t-button></div>
</div>
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-row">
<div class="item"><t-button shape="rectangle" variant="text">文字按钮</t-button></div>
<div class="item"><t-button shape="square" variant="text"><t-icon-calendar slot="icon"/></t-button></div>
<div class="item"><t-button shape="round" variant="text">文字按钮</t-button></div>
Expand All @@ -37,17 +37,3 @@ export default {
},
};
</script>
<style lang="less" scoped>
.tdesign-demo-shape {
.t-button + .t-button {
margin-left: 32px;
}
.tdesign-demo-block {
margin-top: 16px;
display: flex;
.item {
width: 150px;
}
}
}
</style>
21 changes: 4 additions & 17 deletions examples/button/demos/size.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,22 @@
<template>
<div style="width: 600px;">
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-column">
<div class="tdesign-demo-block-row">
<div class="item"><t-button theme="primary" size="small" variant="base">填充按钮</t-button></div>
<div class="item"><t-button size="small" variant="outline">描边按钮</t-button></div>
<div class="item"><t-button size="small" variant="dashed">虚框按钮</t-button></div>
<div class="item"><t-button size="small" variant="text">文字按钮</t-button></div>
</div>
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-row">
<div class="item"><t-button theme="primary" size="medium" variant="base">填充按钮</t-button></div>
<div class="item"><t-button size="medium" variant="outline">描边按钮</t-button></div>
<div class="item"><t-button size="medium" variant="dashed">虚框按钮</t-button></div>
<div class="item"><t-button size="medium" variant="text">文字按钮</t-button></div>
</div>
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-row">
<div class="item"><t-button theme="primary" size="large" variant="base">填充按钮</t-button></div>
<div class="item"><t-button size="large" variant="outline">描边按钮</t-button></div>
<div class="item"><t-button size="large" variant="dashed">虚框按钮</t-button></div>
<div class="item"><t-button size="large" variant="text">文字按钮</t-button></div>
</div>
</div>
</template>

<style lang="less" scoped>
.t-button + .t-button {
margin-left: 32px;
}
.tdesign-demo-block {
margin-top: 16px;
display: flex;
.item {
width: 150px;
}
}
</style>
6 changes: 6 additions & 0 deletions examples/button/demos/status.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<template>
<div class="tdesign-demo-block-row">
<t-button disabled>填充按钮</t-button>
<t-button loading>加载中</t-button>
</div>
</template>
24 changes: 21 additions & 3 deletions examples/button/demos/theme.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,34 @@
<template>
<div>
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-column">
<div class="tdesign-demo-block-row">
<t-button theme="default">填充按钮</t-button>
<t-button variant="outline" theme="default">描边按钮</t-button>
<t-button variant="dashed" theme="default">虚框按钮</t-button>
<t-button variant="text" theme="default">文字按钮</t-button>
</div>
<div class="tdesign-demo-block-row">
<t-button theme="primary">填充按钮</t-button>
<t-button variant="outline" theme="primary">描边按钮</t-button>
<t-button variant="dashed" theme="primary">虚框按钮</t-button>
<t-button variant="text" theme="primary">文字按钮</t-button>
</div>
<div class="tdesign-demo-block">
<div class="tdesign-demo-block-row">
<t-button theme="danger">填充按钮</t-button>
<t-button variant="outline" theme="danger">描边按钮</t-button>
<t-button variant="dashed" theme="danger">虚框按钮</t-button>
<t-button variant="text" theme="danger">文字按钮</t-button>
</div>
<div class="tdesign-demo-block-row">
<t-button theme="warning">填充按钮</t-button>
<t-button variant="outline" theme="warning">描边按钮</t-button>
<t-button variant="dashed" theme="warning">虚框按钮</t-button>
<t-button variant="text" theme="warning">文字按钮</t-button>
</div>
<div class="tdesign-demo-block-row">
<t-button theme="success">填充按钮</t-button>
<t-button variant="outline" theme="success">描边按钮</t-button>
<t-button variant="dashed" theme="success">虚框按钮</t-button>
<t-button variant="text" theme="success">文字按钮</t-button>
</div>
</div>
</template>
19 changes: 6 additions & 13 deletions examples/calendar/demos/card.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
<template>
<div>
<div style="margin: 12px 0">
<div class="tdesign-demo-block-column-large">
<div>
<label>请选择风格：</label>
<t-select v-model="theme"
class="demo-select-base">
<t-option v-for="item in options"
:key="item.value"
:value="item.value"
:label="item.label" />
<t-select v-model="theme" class="demo-select-base">
<t-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" />
</t-select>
<t-button theme="primary"
@click="toCurrent()">今天（当前高亮日期）</t-button>
<t-button theme="primary" @click="toCurrent()">今天（当前高亮日期）</t-button>
</div>
<t-calendar ref="myCalendar"
:theme="theme"
:isShowWeekendDefault="isShowWeekendDefault"></t-calendar>
<t-calendar ref="myCalendar" :theme="theme" :isShowWeekendDefault="isShowWeekendDefault"></t-calendar>
</div>
</template>

Expand Down
4 changes: 2 additions & 2 deletions examples/calendar/demos/events.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<div style="margin: 12px 0">
<div class="tdesign-demo-block-column-large">
<div>
<label>禁用单元格右键菜单：</label>
<t-switch v-model="preventCellContextmenu"></t-switch>
</div>
Expand Down
Loading

0 comments on commit c76aac3

Please sign in to comment.