View Shadcn UI

Appearance

介绍 ​


本文档主要用于描述 ShadcnGlobalFooter 组件的特性和用法。

用法 ​

查看代码
vue
<template>
  <ShadcnGlobalFooter :links="links" :socials="socials"/>
</template>

<script setup lang="ts">
const links = [
  {
    title: 'Link Group',
    links: [
      { label: 'Router link', href: '/features' },
      { label: 'External link', href: '/pricing', external: true },
      { label: 'External target link', href: '/docs', external: true, target: '_blank' }
    ]
  },
  {
    title: 'Link Group 2',
    links: [
      { label: 'Link icon', href: '/about', icon: 'User' }
    ]
  },
  {
    title: 'Resources',
    links: [
      { label: 'Support', href: '/support' },
      { label: 'Terms of Service', href: '/terms' },
      { label: 'Privacy Policy', href: '/privacy' }
    ]
  }
]
const socials = [
  { icon: 'Github', href: 'https://github.com/devlive-community', label: 'GitHub' }
]
</script>

液态玻璃效果 (glass) ​

查看代码
vue
<template>
    <div class="p-8 rounded-lg bg-gradient-to-r from-blue-400 to-indigo-400">
        <div class="rounded-lg overflow-hidden bg-white/50">
            <ShadcnGlobalFooter
                glass
                company="Your Company"
                description="为开发者提供优质的组件库和工具"
                :links="footerLinks"
                :socials="footerSocials"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
const footerLinks = [
  {
    title: '产品',
    links: [
      { label: '功能', href: '#', icon: 'lucide:sparkles' },
      { label: '定价', href: '#', icon: 'lucide:dollar-sign' },
      { label: '更新日志', href: '#', icon: 'lucide:history' }
    ]
  },
  {
    title: '资源',
    links: [
      { label: '文档', href: '#', icon: 'lucide:book-open' },
      { label: 'API', href: '#', icon: 'lucide:code' },
      { label: '博客', href: '#', icon: 'lucide:newspaper' }
    ]
  },
  {
    title: '社区',
    links: [
      { label: 'GitHub', href: 'https://github.com', icon: 'lucide:github', external: true },
      { label: 'Discord', href: '#', icon: 'lucide:message-circle' },
      { label: '论坛', href: '#', icon: 'lucide:users' }
    ]
  }
]

const footerSocials = [
  { label: 'GitHub', href: 'https://github.com', icon: 'lucide:github' },
  { label: 'Twitter', href: 'https://twitter.com', icon: 'lucide:twitter' },
  { label: 'Discord', href: '#', icon: 'lucide:message-circle' }
]
</script>