Skip to content

feat(accordion): 实现 Accordion 手风琴组件 #38

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

Open
skiyee wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(accordion): 实现 Accordion 手风琴组件 #38

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
22 changes: 22 additions & 0 deletions examples/uni/src/pages-navigation/accordion/accordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script setup lang="ts">
import { ref } from 'vue'

const activeName = ref<string>('1')
</script>

<template>
<SkAccordion v-model="activeName" accordion>
<SkAccordionItem name="1" title="功能特性">
组件库提供丰富的 UI 组件，满足各种业务场景需求。
</SkAccordionItem>
<SkAccordionItem name="2" title="设计系统">
采用统一的设计语言，提供一致的用户体验。
</SkAccordionItem>
<SkAccordionItem name="3" title="主题定制">
支持深色模式和自定义主题颜色。
</SkAccordionItem>
<SkAccordionItem name="4" title="性能优化">
针对移动端进行优化，提供流畅的交互体验。
</SkAccordionItem>
</SkAccordion>
</template>
19 changes: 19 additions & 0 deletions examples/uni/src/pages-navigation/accordion/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref<string[]>(['1'])
</script>

<template>
<SkAccordion v-model="activeNames">
<SkAccordionItem name="1" title="什么是 Skiyee UI？">
Skiyee UI 是一个基于 uni-app 的跨平台 UI 组件库，支持 H5、小程序、APP 等多个平台。
</SkAccordionItem>
<SkAccordionItem name="2" title="如何安装？">
使用 npm 或 pnpm 安装：pnpm add @skiyee/uni-ui
</SkAccordionItem>
<SkAccordionItem name="3" title="支持哪些平台？">
支持 H5、微信小程序、支付宝小程序、APP 等 uni-app 支持的所有平台。
</SkAccordionItem>
</SkAccordion>
</template>
38 changes: 38 additions & 0 deletions examples/uni/src/pages-navigation/accordion/bordered.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<script setup lang="ts">
import { ref } from 'vue'

const activeNames1 = ref<string[]>(['1'])
const activeNames2 = ref<string[]>(['1'])
</script>

<template>
<view class="text-body-medium text-secondary sk-unit:mb-12">
有边框（默认）
</view>
<SkAccordion v-model="activeNames1" :border="true">
<SkAccordionItem name="1" title="标题 1">
有边框的手风琴，所有项被包裹在一个带边框的容器中。
</SkAccordionItem>
<SkAccordionItem name="2" title="标题 2">
项与项之间有分隔线。
</SkAccordionItem>
<SkAccordionItem name="3" title="标题 3">
整体更加紧凑和统一。
</SkAccordionItem>
</SkAccordion>

<view class="text-body-medium text-secondary sk-unit:(mt-24 mb-12)">
无边框
</view>
<SkAccordion v-model="activeNames2" :border="false">
<SkAccordionItem name="1" title="标题 1">
无边框的手风琴，每个项独立显示。
</SkAccordionItem>
<SkAccordionItem name="2" title="标题 2">
项与项之间有间距。
</SkAccordionItem>
<SkAccordionItem name="3" title="标题 3">
视觉上更加轻量和分散。
</SkAccordionItem>
</SkAccordion>
</template>
56 changes: 56 additions & 0 deletions examples/uni/src/pages-navigation/accordion/controlled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref<string[]>(['1'])

function expandAll() {
activeNames.value = ['1', '2', '3', '4']
}

function collapseAll() {
activeNames.value = []
}

function toggleFirst() {
const index = activeNames.value.indexOf('1')
if (index > -1) {
activeNames.value.splice(index, 1)
}
else {
activeNames.value.push('1')
}
}
</script>

<template>
<view class="flex sk-unit:(gap-12 mb-16)">
<SkButton size="small" @click="expandAll">
全部展开
</SkButton>
<SkButton size="small" @click="collapseAll">
全部收起
</SkButton>
<SkButton size="small" @click="toggleFirst">
切换第一项
</SkButton>
</view>

<SkAccordion v-model="activeNames">
<SkAccordionItem name="1" title="React 框架">
React 是一个用于构建用户界面的 JavaScript 库。
</SkAccordionItem>
<SkAccordionItem name="2" title="Vue 框架">
Vue 是一套用于构建用户界面的渐进式框架。
</SkAccordionItem>
<SkAccordionItem name="3" title="Angular 框架">
Angular 是一个应用设计框架与开发平台。
</SkAccordionItem>
<SkAccordionItem name="4" title="Svelte 框架">
Svelte 是一种全新的构建用户界面的方法。
</SkAccordionItem>
</SkAccordion>

<view class="text-body-small text-tertiary sk-unit:mt-16">
当前展开项：{{ activeNames.length > 0 ? activeNames.join(', ') : '无' }}
</view>
</template>
68 changes: 68 additions & 0 deletions examples/uni/src/pages-navigation/accordion/custom.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref<string[]>(['1'])
</script>

<template>
<SkAccordion v-model="activeNames">
<SkAccordionItem name="1" title="自定义标题插槽">
<template #title>
<view class="flex items-center sk-unit:gap-8">
<SkIcon name="i-lucide:rocket" class="text-brand" />
<text class="font-bold text-brand">
自定义标题样式
</text>
</view>
</template>
使用 title 插槽可以完全自定义标题区域的内容和样式。
</SkAccordionItem>

<SkAccordionItem name="2" title="自定义图标插槽">
<template #icon>
<SkIcon name="i-lucide:settings" class="text-warning" />
</template>
使用 icon 插槽可以自定义图标的内容。
</SkAccordionItem>

<SkAccordionItem name="3" title="丰富的内容">
<view class="flex flex-col sk-unit:gap-12">
<view class="text-body-medium text-primary">
内容区域支持任意复杂的布局：
</view>
<view class="flex flex-col sk-unit:gap-8">
<view class="flex items-center sk-unit:gap-8">
<SkIcon name="i-lucide:check" class="text-success" />
<text>支持文本</text>
</view>
<view class="flex items-center sk-unit:gap-8">
<SkIcon name="i-lucide:check" class="text-success" />
<text>支持图标</text>
</view>
<view class="flex items-center sk-unit:gap-8">
<SkIcon name="i-lucide:check" class="text-success" />
<text>支持按钮等交互组件</text>
</view>
</view>
<SkButton size="small" class="self-start">
了解更多
</SkButton>
</view>
</SkAccordionItem>

<SkAccordionItem name="4">
<template #title>
<view class="flex items-center justify-between w-full sk-unit:pr-8">
<view class="flex items-center sk-unit:gap-8">
<SkBadge content="NEW" color="danger" size="small" />
<text>带徽章的标题</text>
</view>
<text class="text-body-small text-tertiary">
2024-01-01
</text>
</view>
</template>
完全自定义的标题可以包含任何你想要的内容。
</SkAccordionItem>
</SkAccordion>
</template>
22 changes: 22 additions & 0 deletions examples/uni/src/pages-navigation/accordion/disabled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref<string[]>(['1'])
</script>

<template>
<SkAccordion v-model="activeNames">
<SkAccordionItem name="1" title="正常项目">
这是一个正常的手风琴项，可以正常展开和收起。
</SkAccordionItem>
<SkAccordionItem name="2" title="禁用的项目" disabled>
这个项目被禁用了，无法点击展开。
</SkAccordionItem>
<SkAccordionItem name="3" title="另一个正常项">
这也是一个正常的手风琴项。
</SkAccordionItem>
<SkAccordionItem name="4" title="第二个禁用项" disabled>
这也是一个被禁用的项目。
</SkAccordionItem>
</SkAccordion>
</template>
39 changes: 39 additions & 0 deletions examples/uni/src/pages-navigation/accordion/icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref<string[]>(['1'])
</script>

<template>
<SkAccordion
v-model="activeNames"
expand-icon="i-lucide:chevron-up"
collapse-icon="i-lucide:chevron-down"
>
<SkAccordionItem name="1" title="使用默认图标">
使用 Accordion 组件的 expand-icon 和 collapse-icon 属性设置图标。
</SkAccordionItem>
<SkAccordionItem name="2" title="左侧显示图标" icon="i-lucide:star">
可以为单个 AccordionItem 设置自定义图标。
</SkAccordionItem>
<SkAccordionItem name="3" title="右侧显示图标" icon="i-lucide:heart">
图标会覆盖默认的展开/收起图标。
</SkAccordionItem>
</SkAccordion>

<view class="sk-unit:mt-24" />

<SkAccordion
v-model="activeNames"
icon-position="left"
expand-icon="i-lucide:minus"
collapse-icon="i-lucide:plus"
>
<SkAccordionItem name="4" title="图标在左侧">
通过 icon-position 属性设置图标位置为左侧。
</SkAccordionItem>
<SkAccordionItem name="5" title="加减号图标">
使用加减号作为展开/收起的图标。
</SkAccordionItem>
</SkAccordion>
</template>
22 changes: 22 additions & 0 deletions examples/uni/src/pages-navigation/accordion/multiple.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script setup lang="ts">
import { ref } from 'vue'

const activeNames = ref<string[]>(['1', '3'])
</script>

<template>
<SkAccordion v-model="activeNames">
<SkAccordionItem name="1" title="基础组件">
包括按钮、图标、徽章等基础 UI 组件。
</SkAccordionItem>
<SkAccordionItem name="2" title="表单组件">
包括输入框、复选框、单选框、开关等表单组件。
</SkAccordionItem>
<SkAccordionItem name="3" title="反馈组件">
包括对话框、提示框、加载动画等反馈组件。
</SkAccordionItem>
<SkAccordionItem name="4" title="导航组件">
包括标签页、手风琴、下拉菜单等导航组件。
</SkAccordionItem>
</SkAccordion>
</template>
Loading