BrutxUI

预览

Preview

安装

pnpm dlx brutx-vue@latest add footer-section

用法

vue

<script setup>
import FooterSection from '@/components/ui/footer-section/FooterSection.vue'

const linkGroups = [
    {
        title: 'Product',
        links: [
            { label: 'Features', href: '#features' },
            { label: 'Pricing', href: '#pricing' },
        ],
    },
    {
        title: 'Company',
        links: [
            { label: 'About', href: '/about' },
            { label: 'Blog', href: '/blog' },
        ],
    },
    {
        title: 'Support',
        links: [
            { label: 'Help Center', href: '/help' },
            { label: 'Contact', href: '/contact' },
        ],
    },
]

function handleLinkClick({ groupIndex, linkIndex }) {
    console.log('Link clicked:', linkGroups[groupIndex].links[linkIndex].label)
}
</script>

<template>
    <FooterSection
        logo-text="MyApp"
        description="Build bold interfaces faster."
        :link-groups="linkGroups"
        copyright="© 2026 MyApp. All rights reserved."
        @link-click="handleLinkClick"
    />
</template>

数据类型

interface FooterLinkGroup {
    title: string
    links: FooterLink[]
}

interface FooterLink {
    label: string
    href?: string
}

Props

属性	类型	默认值	说明
`logoText`	`string`	locale: `footerSection.defaultLogoText`	Logo 文本
`description`	`string`	locale: `footerSection.defaultDescription`	描述文本
`linkGroups`	`FooterLinkGroup[]`	`[]`	链接组数据
`copyright`	`string`	locale: `footerSection.defaultCopyright`	版权声明文本
`class`	`string`	—	自定义类名

事件

事件	参数	说明
`link-click`	`{ groupIndex: number; linkIndex: number }`	链接被点击时触发

插槽

插槽	作用域	说明
`header`	—	替换 Logo 和描述区域
`default`	—	替换链接组区域
`footer`	—	替换版权声明区域

可访问性

使用语义化 <footer> 元素作为根节点，便于屏幕阅读器识别为页脚地标区域
每个链接分组使用 <h3> 标题，便于辅助设备按组导航
链接组内使用 <ul>/<li> 列表结构，正确表达项目之间的并列关系
外链渲染为原生 <a> 元素，内部操作渲染为 <Button>，键盘与焦点行为均符合各自规范

Footer Section 底部信息栏 ​

预览 ​

安装 ​

用法 ​

数据类型 ​

Props ​

事件 ​

插槽 ​

可访问性 ​

Footer Section 底部信息栏

预览

安装

用法

数据类型

Props

事件

插槽

可访问性