@dafcoe/vue-collapsible-panel (英语)

方便使用,可自定义相撞面板/手风琴库使用Vue3所建.
见它的行动 演示 页 次.

安装

使用此软件包安装为项目依赖 yarn 或者说 npm数字 :

$ yarn add @dafcoe/vue-collapsible-panel

--- or ---

$ npm install --save @dafcoe/vue-collapsible-panel

使用量

导入 VueCollapsiblePanelGroup 财务报告和审定财务报表 VueCollapsiblePanel 组件,或全局(在您主.js / 主.ts文件中),或本地(在您的组件上):

// Globally
import VueCollapsiblePanel from '@dafcoe/vue-collapsible-panel'
const app = createApp(App)
app.use(VueCollapsiblePanel).mount('#app')

// Locally
import {
  VueCollapsiblePanelGroup,
  VueCollapsiblePanel,
} from '@dafcoe/vue-collapsible-panel'

导入默认样式( 可选的 - 您可以定义自己的样式) :

import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'

在模板中使用如下:

<vue-collapsible-panel-group>
    <vue-collapsible-panel>
        <template #title>
            Panel A Title
        </template>
        <template #content>
            Panel A Content
        </template>
    </vue-collapsible-panel>
    <vue-collapsible-panel>
        <template #title>
            Panel B Title
        </template>
        <template #content>
            Panel B Content
        </template>
    </vue-collapsible-panel>
    ...
</vue-collapsible-panel-group>

选项

手风琴

默认情况下,手风琴行为不使用. 要使用它,请添加 accordion 打开 vue-collapsible-panel-group数字 :

<vue-collapsible-panel-group accordion>
    ...
</vue-collapsible-panel-group>

已扩展

默认情况下,所有面板都会被扩充. 为了防止这种情况,添加 :expanded="false" 打开 vue-collapsible-panel数字 :

<vue-collapsible-panel-group>
    <vue-collapsible-panel :expanded="false">
        <template #title>
            Panel A Title
        </template>
        <template #content>
            Panel A Content
        </template>
    </vue-collapsible-panel>
    ...
</vue-collapsible-panel-group>

颜色

默认基色为 #333。要修改此内容,请添加 base-color="#<color>" 打开 vue-collpasible-panel-group数字 :

<vue-collapsible-panel-group base-color="#0035a0">
    ...
</vue-collapsible-panel-group>

对于颗粒控制颜色,以下 Css 变量可以被覆盖:

--base-color
--border-color
--bg-color-header
--bg-color-header-hover
--bg-color-header-active
--bg-color-body

许可证

MIT 许可证 © 达夫球