Skip to content

fix(drawer): [drawer] modify drawer demo of design #2385

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
Oct 25, 2024
Merged

fix(drawer): [drawer] modify drawer demo of design #2385

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
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/confirm-event.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@update:visible="visible = $event"
@confirm="confirm"
>
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
1 change: 0 additions & 1 deletion examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,5 @@ const drag = ({ width, height }) => {
<style scoped>
.content {
height: 300px;
padding: 16px 0;
}
</style>
1 change: 0 additions & 1 deletion examples/sites/demos/pc/app/drawer/dragable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,5 @@ export default {
<style scoped>
.content {
height: 300px;
padding: 16px 0;
}
</style>
8 changes: 1 addition & 7 deletions examples/sites/demos/pc/app/drawer/events-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@close="onClose"
@confirm="onConfirm"
>
<div class="content">
<div>
<span>内容区域</span>
</div>
</tiny-drawer>
Expand All @@ -37,9 +37,3 @@ const onConfirm = () => {
Modal.message({ message: '确定事件', status: 'info' })
}
</script>

<style scoped>
.content {
padding: 20px 0;
}
</style>
9 changes: 1 addition & 8 deletions examples/sites/demos/pc/app/drawer/events.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<template>
<div class="demo-drawer">
<tiny-button type="primary" @click="showDrawer"> 点击打开抽屉 </tiny-button>
<p>{{ visible }}</p>
<tiny-drawer
title="事件示例"
:show-footer="true"
Expand All @@ -11,7 +10,7 @@
@close="onClose"
@confirm="onConfirm"
>
<div class="content">
<div>
<span>内容区域</span>
</div>
</tiny-drawer>
Expand Down Expand Up @@ -47,9 +46,3 @@ export default {
}
}
</script>

<style scoped>
.content {
padding: 20px 0;
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<span>自定义头部右侧</span>
</div>
</template>
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/header-right-slot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<span>自定义头部右侧</span>
</div>
</template>
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
14 changes: 12 additions & 2 deletions examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,17 @@ function openDrawer() {

<style scoped>
.my-header {
padding: 0 32px;
border-bottom: 1px solid #ccc;
padding: 32px 32px 24px;
}

.my-header h3 {
font-size: 16px;
font-weight: bold;
line-height: 1.7;
}

.my-header p {
font-size: 12px;
line-height: 1.5;
}
</style>
3 changes: 1 addition & 2 deletions examples/sites/demos/pc/app/drawer/header-slot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@ export default {

<style scoped>
.my-header {
padding: 0 32px;
border-bottom: 1px solid #ccc;
padding: 32px 32px 24px;
}

.my-header h3 {
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/mask-closable-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
<tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
<div style="padding: 32px">单击遮罩层, 不关闭抽屉</div>
<div>单击遮罩层, 不关闭抽屉</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/mask-closable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
<tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
<div style="padding: 32px">单击遮罩层, 不关闭抽屉</div>
<div>单击遮罩层, 不关闭抽屉</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/mask-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 关闭遮罩层 </tiny-button>
<tiny-drawer title="标题" :visible="visible" :mask="false" @update:visible="visible = $event">
<div style="padding: 32px">左侧遮罩层已隐藏</div>
<div>左侧遮罩层已隐藏</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/mask.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 关闭遮罩层 </tiny-button>
<tiny-drawer title="标题" :visible="visible" :mask="false" @update:visible="visible = $event">
<div style="padding: 32px">左侧遮罩层已隐藏</div>
<div>左侧遮罩层已隐藏</div>
</tiny-drawer>
</div>
</template>
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/drawer/placement-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
:placement="placement"
v-model:visible="visible"
>
<div style="padding: 32px">left或者right内容区域</div>
<div>left或者right内容区域</div>
Copy link

@coderabbitai coderabbitai bot Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider adding semantic content structure.

While removing the padding styles aligns with the PR objectives, consider enhancing the content structure for better accessibility and maintainability:

-      <div>left或者right内容区域</div>
+      <div role="region" aria-label="Drawer Content">
+        <section class="drawer-content">
+          left或者right内容区域
+        </section>
+      </div>

Similar structure should be applied to the top/bottom drawer content as well.

Also applies to: 24-24

</tiny-drawer>

<tiny-drawer
Expand All @@ -21,7 +21,7 @@
v-model:visible="visible"
height="400px"
>
<div style="padding: 32px">top或者bottom区域</div>
<div>top或者bottom区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/drawer/placement.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
:placement="placement"
v-model:visible="visible"
>
<div style="padding: 32px">left或者right内容区域</div>
<div>left或者right内容区域</div>
</tiny-drawer>

<tiny-drawer
Expand All @@ -20,7 +20,7 @@
v-model:visible="visible"
height="400px"
>
<div style="padding: 32px">top或者bottom区域</div>
<div>top或者bottom区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/show-close-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 隐藏关闭图标 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/show-close.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 隐藏关闭图标 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/show-header-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 隐藏头部 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-header="false">
<div style="padding: 32px">内容区域</div>
<div style="margin-top: 32px">内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/show-header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 隐藏头部 </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-header="false">
<div style="padding: 32px">内容区域</div>
<div style="margin-top: 32px">内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
8 changes: 1 addition & 7 deletions examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const config = ref({
// 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
customSlots: {
// 使用 h 函数
default: (h) => h('p', { class: 'drawer-content' }, '抽屉主体内容。'),
default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
// 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
headerRight: () => <IconHelp></IconHelp>,
// 直接赋值 VNode
Expand All @@ -45,9 +45,3 @@ const showDrawer = () => {
drawerInstance = Drawer.service(config.value)
}
</script>

<style scope>
.drawer-content {
padding: 20px 0;
}
</style>
8 changes: 1 addition & 7 deletions examples/sites/demos/pc/app/drawer/use-through-method.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default {
// 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
customSlots: {
// 使用 h 函数
default: (h) => h('p', { class: 'drawer-content' }, '抽屉主体内容。'),
default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
// 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
headerRight: () => <IconHelp></IconHelp>,
// 直接赋值 VNode
Expand All @@ -52,9 +52,3 @@ export default {
}
}
</script>

<style scope>
.drawer-content {
padding: 20px 0;
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/width-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<tiny-button @click="openDrawer2" plain> 宽度改为80% </tiny-button>

<tiny-drawer title="标题" :width="width" :visible="visible" @update:visible="visible = $event">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/width.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<tiny-button @click="openDrawer2" plain> 宽度改为80% </tiny-button>

<tiny-drawer title="标题" :width="width" :visible="visible" @update:visible="visible = $event">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/z-index-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 自定义 z-index </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/drawer/z-index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<tiny-button @click="openDrawer" type="primary"> 自定义 z-index </tiny-button>
<tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
<div style="padding: 32px">内容区域</div>
<div>内容区域</div>
</tiny-drawer>
</div>
</template>
Expand Down
Loading