Footer

Composant de pied de page avec prise en charge des liens, sections et mises en page centrées.

Importation

import { Footer } from 'asterui'

Exemples

Footer de base

Pied de page simple aligné à gauche avec liens horizontaux.

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

Pied de page avec sections titrées en colonnes.

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

Pied de page avec contenu centré.

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`

Propriété	Description	Type	Défaut
`children`	Contenu du pied de page	`React.ReactNode`	-
`center`	Centrer le contenu du pied de page	`boolean`	`false`
`horizontal`	Afficher les colonnes horizontalement	`boolean`	`false`
`vertical`	Afficher les colonnes verticalement (par défaut)	`boolean`	`false`
`className`	Classes CSS supplémentaires	`string`	-

`Footer.Title`

Propriété	Description	Type	Défaut
`children`	Texte du titre	`React.ReactNode`	-
`className`	Classes CSS supplémentaires	`string`	-