PageLogos

GitLab
Uma lista de logos ou imagens para exibir nas suas páginas.

Uso

O componente PageLogos oferece uma maneira flexível de exibir uma lista de logos ou imagens nas suas páginas.

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

Título

Use a prop title para definir o título acima dos logos.

Trusted by the best front-end teams

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

Itens

Você pode exibir os logos de duas maneiras:

  1. Usando a prop items para fornecer uma lista de logos. Cada item pode ser:
  • An icon name (e.g., i-simple-icons-github)
  • An object containing src and alt properties for images, which will be utilized in a UAvatar component
  1. Usando o slot padrão para ter controle total sobre o conteúdo

Com a confiança das melhores equipes de front-end

Marquee

Use a prop marquee para habilitar um efeito de marquee para os logos.

Trusted by the best front-end teams

<template>
  <NPageLogos
    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>
Ao usar o modo marquee, você pode personalizar o comportamento dele passando props. Para mais informações, confira o componente Marquee.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

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

Slots

Slot Type
default{}

Tema

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 '@nitro/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

Um layout de lista vertical para exibir conteúdo em formato empilhado.

PageSection

Uma seção responsiva para as suas páginas.