Skip to content
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

Jump to bottom

docs(collapse): update doc and demo #461

Merged
merged 2 commits into from
Nov 7, 2022
Merged

docs(collapse): update doc and demo #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd6b6b5
docs(collapse): update doc and demo
yuanmeda Nov 3, 2022
0f1f086
fix(collapse): update snap
yuanmeda Nov 3, 2022
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
104 changes: 99 additions & 5 deletions src/collapse/__test__/__snapshots__/demo.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,53 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
>


<div
class="t-collapse-panel t-collapse-panel--active"
data-v-3a4dbde0=""
style="height: 0px;"
>
<div
class="t-collapse-panel__header"
>
<div
class="t-collapse-panel__title"
>

折叠面板标题

</div>
<div
class="t-collapse-panel__header-right"
>
<!--v-if-->
<svg
class="t-icon t-icon-chevron-down t-collapse-panel__header-icon"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</div>
</div>
<div
class="t-collapse-panel__body"
>

<div
class="content"
data-v-3a4dbde0=""
>
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
</div>

</div>
</div>
<div
class="t-collapse-panel"
data-v-3a4dbde0=""
Expand Down Expand Up @@ -107,7 +154,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
</div>
</div>
<div
class="t-collapse-panel"
class="t-collapse-panel t-collapse-panel--disabled"
data-v-3a4dbde0=""
style="height: 0px;"
>
Expand Down Expand Up @@ -181,7 +228,7 @@ exports[`Collapse > Collapse actionVue demo works fine 1`] = `
class="t-collapse-panel__title"
>

1
折叠面板标题

</div>
<div
Expand Down Expand Up @@ -301,7 +348,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
<p
class="summary"
>
在折叠面板中放入内容，点击面板的标题可以展开或收缩其内容。
用于对复杂区域进行分组和隐藏 常用于订单信息展示等
</p>
<div
class="tdesign-mobile-demo-block"
Expand Down Expand Up @@ -406,7 +453,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
class="t-collapse-panel__title"
>

1
折叠面板标题

</div>
<div
Expand Down Expand Up @@ -473,6 +520,53 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
>


<div
class="t-collapse-panel t-collapse-panel--active"
data-v-3a4dbde0=""
style="height: 0px;"
>
<div
class="t-collapse-panel__header"
>
<div
class="t-collapse-panel__title"
>

折叠面板标题

</div>
<div
class="t-collapse-panel__header-right"
>
<!--v-if-->
<svg
class="t-icon t-icon-chevron-down t-collapse-panel__header-icon"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M3.54 6.46l.92-.92L8 9.08l3.54-3.54.92.92L8 10.92 3.54 6.46z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</div>
</div>
<div
class="t-collapse-panel__body"
>

<div
class="content"
data-v-3a4dbde0=""
>
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
</div>

</div>
</div>
<div
class="t-collapse-panel"
data-v-3a4dbde0=""
Expand Down Expand Up @@ -568,7 +662,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
</div>
</div>
<div
class="t-collapse-panel"
class="t-collapse-panel t-collapse-panel--disabled"
data-v-3a4dbde0=""
style="height: 0px;"
>
Expand Down
11 changes: 9 additions & 2 deletions src/collapse/demos/accordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
<template>
<div class="accordion-demo">
<t-collapse title="手风琴模式" expand-mutex>
<t-collapse-panel v-for="i in 3" :key="i" :value="i" header="折叠面板标题">
<t-collapse title="手风琴模式" expand-mutex :value="values" @change="handleChange">
<t-collapse-panel v-for="i in 4" :key="i" :value="i" header="折叠面板标题" :disabled="i === 4">
<div class="content">
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
</div>
</t-collapse-panel>
</t-collapse>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const values = ref([1]);
const handleChange = (val: number[]) => {
values.value = val;
};
</script>
<style scoped lang="less">
.content {
padding: 16px 0;
Expand Down
2 changes: 1 addition & 1 deletion src/collapse/demos/action.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="accordion-demo">
<t-collapse :value="values" @change="handleChange">
<t-collapse-panel :value="0" header="1" :header-right-content="values.includes(0) ? '收起' : '展开'">
<t-collapse-panel :value="0" header="折叠面板标题" :header-right-content="values.includes(0) ? '收起' : '展开'">
<div class="content">
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
</div>
Expand Down
78 changes: 2 additions & 76 deletions src/collapse/demos/mobile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="tdesign-mobile-demo">
<h1 class="title">Collapse 折叠面板</h1>
<p class="summary">在折叠面板中放入内容，点击面板的标题可以展开或收缩其内容。</p>
<p class="summary">用于对复杂区域进行分组和隐藏 常用于订单信息展示等</p>
<tdesign-demo-block header="01 类型" summary="基础折叠面板">
<baseVue />
</tdesign-demo-block>
Expand All @@ -14,82 +14,8 @@
</div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent } from 'vue';
<script lang="ts" setup>
import baseVue from './base.vue';
import accordionVue from './accordion.vue';
import actionVue from './action.vue';

export default defineComponent({
components: {
baseVue,
accordionVue,
actionVue,
},
setup() {
const panels = [
{
header: '基础面板',
name: '0',
content:
'一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字',
},
{
header: '内容列表',
name: '1',
content: ['一段很长很长的内容文字', '一段很长很长的内容文字', '一段很长很长的内容文字'],
},
{
header: '内容带标签',
extra: '预设文本',
content: [
{ label: '标题1', content: '预设文本' },
{ label: '类目标题2', content: '预设文本' },
{
label: '很长很长很长的内容标题',
content: '一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字',
},
],
},
{
header: '内容带标签 - 宽度固定',
extra: '预设文本',
labelWidth: 80,
content: [
{ label: '标题1', content: '预设文本' },
{
label: '很长很长很长的内容标题',
content: '一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字',
},
],
},
];
const panelOthers = [
{
header: '仅点击右侧按钮展开',
name: 'demoOnlyIconClicable',
headerClickable: false,
content: '点击面板右侧按钮展开/折叠',
},
{
header: '禁用项',
name: 'demoDisabled',
disabled: true,
content: '预设文本',
},
{
header: '内容默认slot',
name: 'slotContent',
},
];
const state = reactive({
valueBase: ['0', 3],
panels,
panelOthers,
});
return {
...toRefs(state),
};
},
});
</script>