Footer

Componente de rodapé de página com suporte para links, seções e layouts centralizados.

Importação

import { Footer } from 'asterui'

Exemplos

Footer Básico

Rodapé simples alinhado à esquerda com links horizontais.

import { Footer } from 'asterui'

function App() {
  return (
      <Footer horizontal className="bg-base-200 p-4">
        <a href="#" className="link link-hover">About</a>
        <a href="#" className="link link-hover">Contact</a>
        <a href="#" className="link link-hover">Privacy</a>
        <a href="#" className="link link-hover">Terms</a>
      </Footer>
    )
}

export default App

Footer com Seções

Rodapé com seções tituladas em colunas.

import { Footer } from 'asterui'

function App() {
  return (
      <Footer horizontal className="bg-base-200 p-10">
        <nav>
          <Footer.Title>Services</Footer.Title>
          <a href="#" className="link link-hover">Branding</a>
          <a href="#" className="link link-hover">Design</a>
          <a href="#" className="link link-hover">Marketing</a>
        </nav>
        <nav>
          <Footer.Title>Company</Footer.Title>
          <a href="#" className="link link-hover">About us</a>
          <a href="#" className="link link-hover">Contact</a>
          <a href="#" className="link link-hover">Jobs</a>
        </nav>
        <nav>
          <Footer.Title>Legal</Footer.Title>
          <a href="#" className="link link-hover">Terms of use</a>
          <a href="#" className="link link-hover">Privacy policy</a>
          <a href="#" className="link link-hover">Cookie policy</a>
        </nav>
      </Footer>
    )
}

export default App

Footer Centralizado

Rodapé com conteúdo centralizado.

import { Footer } from 'asterui'

function App() {
  return (
      <Footer center horizontal className="bg-base-200 p-4">
        <nav className="flex gap-4">
          <a href="#" className="link link-hover">About</a>
          <a href="#" className="link link-hover">Contact</a>
          <a href="#" className="link link-hover">Privacy</a>
          <a href="#" className="link link-hover">Terms</a>
        </nav>
        <aside>
          <p>© 2024 Company Name. All rights reserved.</p>
        </aside>
      </Footer>
    )
}

export default App

API

`Footer`

Propriedade	Descrição	Tipo	Padrão
`children`	Conteúdo do rodapé	`React.ReactNode`	-
`center`	Centralizar o conteúdo do rodapé	`boolean`	`false`
`horizontal`	Exibir colunas horizontalmente	`boolean`	`false`
`vertical`	Exibir colunas verticalmente (padrão)	`boolean`	`false`
`className`	Classes CSS adicionais	`string`	-

`Footer.Title`

Propriedade	Descrição	Tipo	Padrão
`children`	Texto do título	`React.ReactNode`	-
`className`	Classes CSS adicionais	`string`	-