ページロゴ

サイトマップ
ページに表示するロゴや画像のリスト。

使用法

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

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>

アイテム

ロゴは2つの方法で表示できます。

  1. itemsプロパティを使用してロゴのリストを提供します。各項目は以下のいずれかになります
  • アイコン名（例：i-simple-icons-github）
  • UAvatarコンポーネントで利用される画像のsrcおよびaltプロパティを含むオブジェクト。
  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プロパティを使用して、ロゴのマーキー効果を有効にします。

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; }

スロット

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.