页面标志
一个用于在您的页面上显示标志或图片的列表。
用法
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 属性设置徽标上方的标题。
受到顶级前端团队的信任
<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>
项
您可以通过两种方式显示徽标
- 使用
items属性提供徽标列表。每个项目可以是：
- 一个图标名称（例如，
i-simple-icons-github） - 一个包含图像的
src和alt属性的对象，这些属性将用于UAvatar组件中。
- 使用默认插槽来完全控制内容
受到顶级前端团队的信任
<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>
受到顶级前端团队的信任
<template>
<UPageLogos title="Trusted by the best front-end teams">
<UIcon name="i-simple-icons-github" class="size-10 shrink-0" />
<UIcon name="i-simple-icons-discord" class="size-10 shrink-0" />
<UIcon name="i-simple-icons-x" class="size-10 shrink-0" />
<UIcon name="i-simple-icons-instagram" class="size-10 shrink-0" />
<UIcon name="i-simple-icons-linkedin" class="size-10 shrink-0" />
<UIcon name="i-simple-icons-facebook" class="size-10 shrink-0" />
</UPageLogos>
</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>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
title | string | |
items | PageLogosItem[]
| |
跑马灯 | false | 布尔值 | MarqueeProps
|
ui | { root?: ClassNameValue; title?: ClassNameValue; logos?: ClassNameValue; logo?: ClassNameValue; } |
插槽
| 插槽 | 类型 |
|---|---|
default | {} |
主题
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)]'
}
}
}
}
}
})
]
})