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

chore(collapse): split demo #2793

Merged
merged 1 commit into from
Dec 23, 2023
Merged

chore(collapse): split demo #2793

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
14 changes: 14 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/collapse/accordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<nut-collapse v-model="val" accordion @change="change">
<nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
<nut-collapse-item name="name3" title="Title 3"> Content 3 </nut-collapse-item>
</nut-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const val = ref(['name2', 'name3']);
const change = (modelValue: string[], name: string, status: boolean) => {
console.log(modelValue, name, status);
};
</script>
11 changes: 11 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/collapse/basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<nut-collapse>
<nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2" value="Description"> Content 2 </nut-collapse-item>
<nut-collapse-item name="name3">
<template #title> Title 3 </template>
<template #value> Description </template>
Content 3
</nut-collapse-item>
</nut-collapse>
</template>
12 changes: 12 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/collapse/custom.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<template>
<nut-collapse>
<nut-collapse-item name="name1" title="Title 1">
<template #icon> <Notice /> </template>
Content 1
</nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2" :icon="Follow"> Content 2 </nut-collapse-item>
</nut-collapse>
</template>
<script setup lang="ts">
import { Notice, Follow } from '@nutui/icons-vue-taro';
</script>
14 changes: 14 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/collapse/data.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<nut-collapse v-model="val" @change="change">
<nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
<nut-collapse-item name="name3" title="Title 3"> Content 3 </nut-collapse-item>
</nut-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const val = ref(['name2', 'name3']);
const change = (modelValue: string[], name: string, status: boolean) => {
console.log(modelValue, name, status);
};
</script>
7 changes: 7 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/collapse/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<nut-collapse>
<nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2" disabled> Content 2 </nut-collapse-item>
<nut-collapse-item name="name3" title="Title 3" disabled> Content 3 </nut-collapse-item>
</nut-collapse>
</template>
9 changes: 9 additions & 0 deletions packages/nutui-taro-demo/src/exhibition/pages/collapse/extra.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<template>
<nut-collapse>
<nut-collapse-item name="name1" title="Title 1">
<template #extra> Extra Content </template>
Content 1
</nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
</nut-collapse>
</template>
96 changes: 42 additions & 54 deletions packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,49 @@
<template>
<Demo class="full">
<h2>基础用法</h2>
<nut-collapse v-model="data.active1" @change="change">
<nut-collapse-item :title="data.title1" :name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</nut-collapse-item>
<nut-collapse-item :title="data.title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
<nut-collapse-item :title="data.title3" :name="3" disabled> </nut-collapse-item>
</nut-collapse>
<h2>手风琴</h2>
<nut-collapse v-model="data.active2" :accordion="true">
<nut-collapse-item :title="data.title1" :name="1">
<template #value> 文本测试 </template>
华为终端操作系统EMUI 11发布，9月11日正式开启
</nut-collapse-item>
<nut-collapse-item :title="data.title2" :name="2" :value="data.subTitle">
中国服务机器人市场已占全球市场超1/4
</nut-collapse-item>
<nut-collapse-item :title="data.title3" :name="3">
QuestMobile：90后互联网用户规模超越80后达3.62亿
</nut-collapse-item>
</nut-collapse>
<h2>自定义折叠图标</h2>
<nut-collapse v-model="data.active3" :accordion="true">
<nut-collapse-item :title="data.title1" :name="1" :icon="Notice"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
<nut-collapse-item :title="data.title2" :name="2" value="文本内容" :icon="Follow">
世界制造业大会开幕，阿里巴巴与安徽合作再升级
</nut-collapse-item>
</nut-collapse>
<h2>设置固定内容（不折叠部分）</h2>
<nut-collapse v-model="data.active6" :accordion="true">
<nut-collapse-item :title="data.title1" :name="1">
<template #extra>固定内容</template>
NutUI是一套拥有京东风格的轻量级的 Vue 组件库
</nut-collapse-item>
<nut-collapse-item :title="data.title2" :name="2">
在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
</nut-collapse-item>
</nut-collapse>
<h2>{{ t('basic') }}</h2>
<Basic />

<h2>{{ t('data') }}</h2>
<Data />

<h2>{{ t('accordion') }}</h2>
<Accordion />

<h2>{{ t('custom') }}</h2>
<Custom />

<h2>{{ t('disabled') }}</h2>
<Disabled />

<h2>{{ t('extra') }}</h2>
<Extra />
</Demo>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { Notice, Follow } from '@nutui/icons-vue-taro';
const data = reactive({
active1: [1, '2'],
active2: 1,
active3: 1,
active4: 1,
active5: 1,
active6: 1,
title1: '标题1',
title2: '标题2',
title3: '标题3',
subTitle: '副标题'
import { useTranslate } from '../../../utils';
import Basic from './basic.vue';
import Data from './data.vue';
import Accordion from './accordion.vue';
import Custom from './custom.vue';
import Disabled from './disabled.vue';
import Extra from './extra.vue';

const t = useTranslate({
'zh-CN': {
basic: '基础用法',
data: '绑定数据与事件',
accordion: '手风琴',
custom: '自定义折叠图标',
disabled: '禁用状态',
extra: '设置固定内容（不折叠）'
},
'en-US': {
basic: 'Basic Usage',
data: 'v-model & onChange',
accordion: 'Accordion',
custom: 'Custom Icon',
disabled: 'Disabled CollapseItem',
extra: 'Set fixed content (do not collapse)'
}
});
const change = (name: string) => {
console.log(`点击了name是${name}的面板`);
};
</script>
143 changes: 0 additions & 143 deletions src/packages/__VUE/collapse/demo.vue
View file
Open in desktop

This file was deleted.

14 changes: 14 additions & 0 deletions src/packages/__VUE/collapse/demo/accordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<nut-collapse v-model="val" accordion @change="change">
<nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
<nut-collapse-item name="name3" title="Title 3"> Content 3 </nut-collapse-item>
</nut-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const val = ref(['name2', 'name3']);
const change = (modelValue: string[], name: string, status: boolean) => {
console.log(modelValue, name, status);
};
</script>
11 changes: 11 additions & 0 deletions src/packages/__VUE/collapse/demo/basic.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<nut-collapse>
<nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2" value="Description"> Content 2 </nut-collapse-item>
<nut-collapse-item name="name3">
<template #title> Title 3 </template>
<template #value> Description </template>
Content 3
</nut-collapse-item>
</nut-collapse>
</template>
12 changes: 12 additions & 0 deletions src/packages/__VUE/collapse/demo/custom.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<template>
<nut-collapse>
<nut-collapse-item name="name1" title="Title 1">
<template #icon> <Notice /> </template>
Content 1
</nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2" :icon="Follow"> Content 2 </nut-collapse-item>
</nut-collapse>
</template>
<script setup lang="ts">
import { Notice, Follow } from '@nutui/icons-vue';
</script>
14 changes: 14 additions & 0 deletions src/packages/__VUE/collapse/demo/data.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>
<nut-collapse v-model="val" @change="change">
<nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
<nut-collapse-item name="name3" title="Title 3"> Content 3 </nut-collapse-item>
</nut-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const val = ref(['name2', 'name3']);
const change = (modelValue: string[], name: string, status: boolean) => {
console.log(modelValue, name, status);
};
</script>
7 changes: 7 additions & 0 deletions src/packages/__VUE/collapse/demo/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<nut-collapse>
<nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2" disabled> Content 2 </nut-collapse-item>
<nut-collapse-item name="name3" title="Title 3" disabled> Content 3 </nut-collapse-item>
</nut-collapse>
</template>
9 changes: 9 additions & 0 deletions src/packages/__VUE/collapse/demo/extra.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<template>
<nut-collapse>
<nut-collapse-item name="name1" title="Title 1">
<template #extra> Extra Content </template>
Content 1
</nut-collapse-item>
<nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
</nut-collapse>
</template>
Loading