PageLogos 페이지로고

Github (GitHub)
페이지에 표시할 로고 또는 이미지 목록입니다.

Usage

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 Prop을 사용하여 로고 위에 제목을 설정합니다.

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>

Items 파일

로고는 다음 두 가지 방법으로 표시할 수 있습니다.

  1. xitems prop을 사용하여 로고 목록을 제공합니다. 각 항목은 다음 중 하나일 수 있습니다.
  • An 아이콘 이름 (예: i-simple-icons-github)
  • xxUAvatar 구성 요소에서 사용되는 이미지에 대한 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

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)]'
              }
            }
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

PageList

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

PageSection

A responsive section for your pages.