-
Notifications
You must be signed in to change notification settings - Fork 448
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: affix & anchor & dropdown & pagination & tabs demo space (#1604)
* docs(affix): affix demo space * docs(anchor): anchor demo space * docs(dropdown): dropdown demo space * docs(pagination): pagination demo space * docs(tabs): tabs demo space * test: snap update
- Loading branch information
1 parent
7efcdf3
commit 675821a
Showing
37 changed files
with
4,459 additions
and
4,482 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
<template> | ||
<div class="affix-base"> | ||
<t-space> | ||
<t-affix ref="affix" :offset-top="140" :offset-bottom="20"> | ||
<t-button>固钉</t-button> | ||
</t-affix> | ||
</div> | ||
</t-space> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,47 +1,28 @@ | ||
<template> | ||
<div class="tdesign-demo-dropdown"> | ||
<t-space> | ||
<t-dropdown :options="options" :min-column-width="112" @click="clickHandler"> | ||
<div class="tdesign-demo-dropdown-trigger"> | ||
<t-space> | ||
<t-button variant="text"> | ||
<span class="tdesign-demo-dropdown__text"> 下拉菜单 <t-icon name="chevron-down" size="16" /> </span> | ||
<t-space :size="0"> | ||
下拉菜单 | ||
<t-icon name="chevron-down" size="16" /> | ||
</t-space> | ||
</t-button> | ||
</div> | ||
</t-space> | ||
</t-dropdown> | ||
</div> | ||
</t-space> | ||
</template> | ||
<script setup> | ||
import { MessagePlugin } from 'tdesign-vue-next'; | ||
const options = [ | ||
{ | ||
content: '操作一', | ||
value: 1, | ||
}, | ||
{ | ||
content: '操作二', | ||
value: 2, | ||
}, | ||
{ | ||
content: '操作三', | ||
value: 3, | ||
}, | ||
{ | ||
content: '操作四', | ||
value: 4, | ||
}, | ||
{ content: '操作一', value: 1 }, | ||
{ content: '操作二', value: 2 }, | ||
{ content: '操作三', value: 3 }, | ||
{ content: '操作四', value: 4 }, | ||
]; | ||
const clickHandler = (data) => { | ||
MessagePlugin.success(`选中【${data.content}】`); | ||
}; | ||
</script> | ||
<style lang="less" scoped> | ||
.tdesign-demo-dropdown { | ||
&__text { | ||
display: inline-flex; | ||
.t-icon { | ||
margin-left: 8px; | ||
} | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,37 +1,20 @@ | ||
<template> | ||
<div> | ||
<t-space> | ||
<t-dropdown :options="options" @click="clickHandler"> | ||
<t-button theme="default" variant="outline"> 下拉菜单 </t-button> | ||
<t-button theme="default" variant="outline">下拉菜单</t-button> | ||
</t-dropdown> | ||
</div> | ||
</t-space> | ||
</template> | ||
<script setup> | ||
import { MessagePlugin } from 'tdesign-vue-next'; | ||
const options = [ | ||
{ | ||
content: '操作一', | ||
value: 1, | ||
}, | ||
{ | ||
content: '操作二', | ||
value: 2, | ||
}, | ||
{ | ||
content: '操作三', | ||
value: 3, | ||
}, | ||
{ | ||
content: '操作四', | ||
value: 4, | ||
}, | ||
{ content: '操作一', value: 1 }, | ||
{ content: '操作二', value: 2 }, | ||
{ content: '操作三', value: 3 }, | ||
{ content: '操作四', value: 4 }, | ||
]; | ||
const clickHandler = (data) => { | ||
MessagePlugin.success(`选中【${data.content}】`); | ||
}; | ||
</script> | ||
<style scoped> | ||
.t-button { | ||
margin-right: 20px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,41 +1,22 @@ | ||
<template> | ||
<div class="tdesign-demo-dropdown"> | ||
<t-space> | ||
<t-dropdown :options="options" :min-column-width="112"> | ||
<t-button variant="text"> | ||
<span class="tdesign-demo-dropdown__text"> | ||
<t-space :size="0"> | ||
下拉菜单 | ||
<chevron-down-icon size="16" /> | ||
</span> | ||
</t-space> | ||
</t-button> | ||
</t-dropdown> | ||
</div> | ||
</t-space> | ||
</template> | ||
<script setup> | ||
import { ChevronDownIcon } from 'tdesign-icons-vue-next'; | ||
const options = [ | ||
{ | ||
content: '选项一', | ||
value: 1, | ||
}, | ||
{ | ||
content: '选项二', | ||
value: 2, | ||
}, | ||
{ | ||
content: '选项三', | ||
value: 3, | ||
disabled: true, | ||
}, | ||
{ | ||
content: '选项四', | ||
value: 4, | ||
disabled: true, | ||
}, | ||
{ content: '选项一', value: 1 }, | ||
{ content: '选项二', value: 2 }, | ||
{ content: '选项三', value: 3, disabled: true }, | ||
{ content: '选项四', value: 4, disabled: true }, | ||
]; | ||
</script> | ||
<style scoped> | ||
.t-button { | ||
margin-right: 20px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,13 @@ | ||
<template> | ||
<div> | ||
<t-space> | ||
<t-dropdown :options="options" :max-height="400" :min-column-width="88"> | ||
<t-button variant="text"> 下拉菜单 </t-button> | ||
<t-button variant="text">下拉菜单</t-button> | ||
</t-dropdown> | ||
</div> | ||
</t-space> | ||
</template> | ||
<script setup lang="ts"> | ||
const options = Array.from({ length: 20 }).map((v, k) => ({ | ||
const options = Array.from({ length: 20 }).map((_, k) => ({ | ||
content: `选项${k + 1}`, | ||
value: k + 1, | ||
})); | ||
</script> | ||
<style scoped> | ||
.t-button { | ||
margin-right: 20px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.