Footer

页面页脚组件，支持链接、部分和居中布局。

导入

import { Footer } from 'asterui'

示例

基础页脚

带水平链接的简单左对齐页脚。

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

带部分的页脚

带列中标题部分的页脚。

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

居中页脚

带居中内容的页脚。

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`

属性	描述	类型	默认值
`children`	页脚内容	`React.ReactNode`	-
`center`	居中页脚内容	`boolean`	`false`
`horizontal`	水平显示列	`boolean`	`false`
`vertical`	垂直显示列（默认）	`boolean`	`false`
`className`	额外的 CSS 类名	`string`	-

`Footer.Title`

属性	描述	类型	默认值
`children`	标题文本	`React.ReactNode`	-
`className`	额外的 CSS 类名	`string`	-