PageLogos

GitHub
要在页面上显示的徽标或图像的列表。

用法

PageLogos组件提供了一种灵活的方式来显示页面中的徽标或图像列表。

<template>
  <UPageLogos
    :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>

标题

使用title道具将标题设置在徽标上方。

Trusted by the best front-end teams

<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 prop提供一个徽标列表。每个项目可以是：
  • 图标名称（例如i-simple-icons-github）
  • 包含src和alt图像属性的对象，将在UAvatar组件中使用
  1. 使用默认插槽对内容进行完全控制

Trusted by the best front-end teams

<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

使用marquee道具为徽标启用选框效果。

Trusted by the best front-end teams

<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模式时，你可以通过传递props来定制它的行为。更多信息，请查看Marquee组件。

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

title
string
items
PageLogosItem[]
marquee
false
boolean | MarqueeProps
ui
{ root?: SlotClass; title?: SlotClass; logos?: SlotClass; logo?: SlotClass; }

Slots

Slot Type
default
{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    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({
      ui: {
        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)]'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

PageList

A vertical list layout for displaying content in a stacked format.

PageSection

A responsive section for your pages.