PageLogos

GitHub à
Une liste de logos ou d

Utilisation

Le composant PageLogos fournit un moyen flexible d'afficher une liste de logos ou d'images dans vos pages.

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

Titre

Utilisez le prop title pour placer le titre au-dessus des logos.

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>

Éléments

Vous pouvez afficher les logos de deux manières:

  1. Utiliser la prop items pour fournir une liste de logos. Chaque élément peut être:
  • Un nom d'icône (par exemple, i-simple-icons-github)
  • Un objet contenant les propriétés src et alt pour les images, qui sera utilisé dans un composant UAvatar
  1. Utiliser l'emplacement par défaut pour avoir un contrôle complet sur le contenu

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>

marqueur

Utilisez le prop marquee pour activer un effet de marquise pour les logos.

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>
Lorsque vous utilisez le mode marquee, vous pouvez personnaliser son comportement en passant des props. Pour plus d'informations, consultez le composant Marquee.

API

Props équipement

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

Thème

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.