PageGrid

Uso

O componente PageGrid oferece um layout de grade responsivo para exibir componentes PageCard ou quaisquer outros elementos, ajustando-se automaticamente de 1 a 3 colunas com base no tamanho da tela.

Você também pode usá-lo para exibir uma lista de cards em um layout estilo bento usando as classes utilitárias col-span-* e row-span-*.

Theme

Aprenda a personalizar os componentes do Nitro UI usando Tailwind CSS.

Fontes

O Nitro UI se integra ao Nuxt Fonts para oferecer otimização de fontes plug-and-play.

Modo de cor

O Nitro UI se integra ao Nuxt Color Mode para alternar entre claro e escuro.

Ícones

O Nitro UI se integra ao Nuxt Icon para acessar mais de 200.000 ícones do Iconify.

Expandir código

API

Props

Slots

Tema

export default defineAppConfig({
  ui: {
    pageGrid: {
      base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
    }
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageGrid: {
          base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
        }
      }
    })
  ]
})

Changelog