PageLogos专业版

GitHub
在页面上展示标志或图片的列表。

用法

PageLogos 组件提供了一种灵活的方式，用于在页面上展示标志或图片的列表。

标题

使用 title 属性设置标志上方的标题。

深受优秀前端团队的信赖

<template>
  <UPageLogos
    title="Trusted by the best front-end teams"
    :items="[
      'i-simple-icons-github',
      'i-simple-icons-discord',
      'i-simple-icons-x',
      'i-simple-icons-instagram',
      'i-simple-icons-linkedin',
      'i-simple-icons-facebook'
    ]"
  />
</template>

项目

您可以通过两种方式展示标志：

  1. 使用 items 属性提供标志列表。每个项目可以是以下任一类型：
  • 一个图标名称（例如，i-simple-icons-github）
  • 一个包含图片 src 和 alt 属性的对象，它将在 UAvatar 组件中使用
  1. 使用默认插槽完全控制内容

深受优秀前端团队的信赖

<script setup lang="ts">
const items = [
  'i-simple-icons-github',
  'i-simple-icons-discord',
  'i-simple-icons-x',
  'i-simple-icons-instagram',
  'i-simple-icons-linkedin',
  'i-simple-icons-facebook'
]
</script>

<template>
  <UPageLogos title="Trusted by the best front-end teams" :items="items" />
</template>

跑马灯

使用 marquee 属性为标志启用跑马灯效果。

深受优秀前端团队的信赖

<template>
  <UPageLogos
    title="Trusted by the best front-end teams"
    marquee
    :items="[
      'i-simple-icons-github',
      'i-simple-icons-discord',
      'i-simple-icons-x',
      'i-simple-icons-instagram',
      'i-simple-icons-linkedin',
      'i-simple-icons-facebook'
    ]"
  />
</template>
当您使用 marquee 模式时，您可以通过传递属性来自定义其行为。更多信息，请查看 PageMarquee 组件。

API

属性 (Props)

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

marquee

false

boolean | PageMarqueeProps

items

PageLogosItem[]

title

string

ui

{ root?: ClassNameValue; title?: ClassNameValue; logos?: ClassNameValue; logo?: ClassNameValue; }

插槽 (Slots)

插槽类型
default

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    pageLogos: {
      slots: {
        root: 'relative overflow-hidden',
        title: 'text-lg text-center font-semibold text-highlighted',
        logos: 'mt-10',
        logo: 'size-10 shrink-0'
      },
      variants: {
        marquee: {
          false: {
            logos: 'flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]'
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        pageLogos: {
          slots: {
            root: 'relative overflow-hidden',
            title: 'text-lg text-center font-semibold text-highlighted',
            logos: 'mt-10',
            logo: 'size-10 shrink-0'
          },
          variants: {
            marquee: {
              false: {
                logos: 'flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]'
              }
            }
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        pageLogos: {
          slots: {
            root: 'relative overflow-hidden',
            title: 'text-lg text-center font-semibold text-highlighted',
            logos: 'mt-10',
            logo: 'size-10 shrink-0'
          },
          variants: {
            marquee: {
              false: {
                logos: 'flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]'
              }
            }
          }
        }
      }
    })
  ]
})

PageList

一种垂直列表布局，用于以堆叠格式展示内容。

PageMarquee

一个用于创建无限滚动内容的组件。