Skip to content

docs(dropdown): [dropdown] optimite dropdown demos and api docs #774

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 9, 2023
Merged

docs(dropdown): [dropdown] optimite dropdown demos and api docs #774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 17 additions & 8 deletions examples/sites/demos/pc/app/dropdown/disabled-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
<template>
<div>
<tiny-dropdown>
<p>场景1：下拉菜单禁用</p>
<tiny-dropdown disabled>
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
<tiny-dropdown-item>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>

<br />
<br />
<br />

<tiny-dropdown disabled>
<p>场景2：按钮类型禁用</p>
<tiny-dropdown split-button disabled>
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
Expand All @@ -27,6 +24,18 @@
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
<p>场景3：菜单项禁用</p>
<tiny-dropdown>
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
<tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
</div>
</template>

Expand Down
32 changes: 24 additions & 8 deletions examples/sites/demos/pc/app/dropdown/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
<template>
<div>
<tiny-dropdown>
<p>场景1：下拉菜单禁用</p>
<tiny-dropdown disabled>
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
<tiny-dropdown-item>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>

<br />
<br />
<br />

<tiny-dropdown disabled>
<p>场景2：按钮类型禁用</p>
<tiny-dropdown split-button disabled>
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
Expand All @@ -27,6 +24,18 @@
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
<p>场景3：菜单项禁用</p>
<tiny-dropdown>
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>不能选择</tiny-dropdown-item>
<tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
</div>
</template>

Expand All @@ -41,3 +50,10 @@ export default {
}
}
</script>

<style lang="less" scoped>
p {
line-height: 1.5;
font-size: 14px;
}
</style>
75 changes: 59 additions & 16 deletions examples/sites/demos/pc/app/dropdown/events-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,63 @@
<template>
<tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
下拉菜单
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item label="黄金糕"></tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
<div>
<p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>

<tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item
v-for="(item, index) in options"
:key="index"
:label="item.label"
:disabled="item.disabled"
:divided="item.divided"
:icon="item.icon"
:item-data="item"
></tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>

<p>场景2：配置式</p>
<tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
<template #dropdown>
<tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
</div>
</template>

<script setup lang="jsx">
<script setup>
import {
Dropdown as TinyDropdown,
DropdownMenu as TinyDropdownMenu,
DropdownItem as TinyDropdownItem,
Notify
} from '@opentiny/vue'
import { iconStarDisable } from '@opentiny/vue-icon'

const options = [
{
label: '黄金糕'
},
{
label: '狮子头',
disabled: true
},
{
label: '螺蛳粉',
divided: true
},
{
label: '双皮奶',
icon: iconStarDisable()
},
{
label: '蚵仔煎'
}
]

function itemClick(data) {
const itemClick = (data) => {
Notify({
type: 'info',
title: 'itemClick 回调事件',
Expand All @@ -31,14 +67,21 @@ function itemClick(data) {
})
}

function buttonClick() {
const buttonClick = () => {
Notify({ message: '下拉菜单内置按钮点击事件', status: 'info' })
}

function visibleChange(status) {
const visibleChange = (status) => {
Notify({
message: `下拉菜单显隐事件，当前为${status ? '显示' : '隐藏'}`,
status: 'info'
})
}
</script>

<style lang="less" scoped>
p {
line-height: 1.5;
font-size: 14px;
}
</style>
71 changes: 58 additions & 13 deletions examples/sites/demos/pc/app/dropdown/events.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,65 @@
<template>
<tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
下拉菜单
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item label="黄金糕"></tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
<div>
<p>场景1：按钮类型 + 循环 tiny-dropdown-item</p>
<tiny-dropdown split-button @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item
v-for="(item, index) in options"
:key="index"
:label="item.label"
:disabled="item.disabled"
:divided="item.divided"
:icon="item.icon"
:item-data="item"
></tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>

<p>场景2：配置式</p>
<tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
<template #dropdown>
<tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
</template>
</tiny-dropdown>
</div>
</template>

<script lang="jsx">
<script>
import { Dropdown, DropdownMenu, DropdownItem, Notify } from '@opentiny/vue'
import { iconStarDisable } from '@opentiny/vue-icon'

export default {
components: {
TinyDropdown: Dropdown,
TinyDropdownMenu: DropdownMenu,
TinyDropdownItem: DropdownItem
},
data() {
return {
options: [
{
label: '黄金糕'
},
{
label: '狮子头',
disabled: true
},
{
label: '螺蛳粉',
divided: true
},
{
label: '双皮奶',
icon: iconStarDisable()
},
{
label: '蚵仔煎'
}
]
}
},
methods: {
itemClick(data) {
Notify({
Expand All @@ -44,3 +82,10 @@ export default {
}
}
</script>

<style lang="less" scoped>
p {
line-height: 1.5;
font-size: 14px;
}
</style>
32 changes: 21 additions & 11 deletions examples/sites/demos/pc/app/dropdown/hide-on-click-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
<template>
<tiny-dropdown :hide-on-click="false">
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
<div>
<p>点击后不收起菜单弹框:</p>
<tiny-dropdown :hide-on-click="false">
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
</div>
</template>

<script setup>
Expand All @@ -19,3 +22,10 @@ import {
DropdownItem as TinyDropdownItem
} from '@opentiny/vue'
</script>

<style lang="less" scoped>
p {
line-height: 1.5;
font-size: 14px;
}
</style>
32 changes: 21 additions & 11 deletions examples/sites/demos/pc/app/dropdown/hide-on-click.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
<template>
<tiny-dropdown :hide-on-click="false">
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
<div>
<p>点击后不收起菜单弹框:</p>
<tiny-dropdown :hide-on-click="false">
<template #dropdown>
<tiny-dropdown-menu>
<tiny-dropdown-item>黄金糕</tiny-dropdown-item>
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
</div>
</template>

<script>
Expand All @@ -23,3 +26,10 @@ export default {
}
}
</script>

<style lang="less" scoped>
p {
line-height: 1.5;
font-size: 14px;
}
</style>
Loading