Hero

创建具有英雄横幅和背景的引人注目的着陆页部分。

导入

import { Hero } from 'asterui'

示例

基础 Hero

带标题和副标题的简单英雄部分。

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero } from 'asterui'

function App() {
  return (
      <Hero contentClassName="text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Hello there</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
        </div>
      </Hero>
    )
}

export default App

带 CTA 按钮的 Hero

带行动召唤按钮的英雄部分。

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero contentClassName="text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Hello there</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

带图形的 Hero

带侧边图片或图形元素的 Hero。

Box Office News!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero contentClassName="flex-col lg:flex-row-reverse">
        <img
          src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
          alt="Hero"
          className="max-w-sm rounded-lg shadow-2xl"
        />
        <div>
          <h1 className="text-5xl font-bold">Box Office News!</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

带背景遮罩的 Hero

带背景图片和遮罩效果的 Hero。

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero
        overlay
        contentClassName="text-center text-neutral-content"
        style={{
          backgroundImage: "url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
        }}
      >
        <div className="max-w-md">
          <h1 className="mb-5 text-5xl font-bold">Hello there</h1>
          <p className="mb-5">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

API

属性	描述	类型	默认值
`children`	Hero 内容	`React.ReactNode`	-
`overlay`	显示遮罩效果（用于背景图片）	`boolean`	`false`
`contentClassName`	内容包装器的 CSS 类名	`string`	-
`className`	额外的 CSS 类名	`string`	-
`style`	内联样式（对背景图片有用）	`React.CSSProperties`	-

无障碍

为 hero 标题使用语义标题元素（h1、h2）
确保文本和背景之间有足够的颜色对比度
为 hero 图片提供替代文本
使 CTA 按钮支持键盘访问