Skip to Content
@anker-in/headless-ui 2.0 is released 🎉
组织组件HeroBanner

主横幅

用于展示网站主要内容区域,支持倒计时、视频播放、多按钮配置和响应式设计。

基本用法

HeroBanner 组件的基本用法示例

Hero Banner Desktop Image

Experience the Future of Smart Technology

Discover innovative solutions that power your everyday life with cutting-edge technology and seamless design.

11

:

22

小时
:

45

分钟
:

52

Shop Now
Innovation Icon
Quality Icon
Support Icon
Advanced Technology
User-Friendly Design
Seamless Integration
24/7 Support

语义化 ClassNames 参数

HeroBanner 组件支持语义化的 classNames 属性,允许你为组件的不同部分自定义样式:

参数名描述使用说明
root组件根容器用于自定义整个 HeroBanner 组件的外层样式
title主标题元素用于自定义主标题的样式,如字体大小、颜色等
subtitle副标题元素用于自定义副标题的样式
buttonGroup按钮组容器用于自定义按钮组的布局和间距
primaryButton主要按钮用于自定义主要按钮的样式
secondaryButton次要按钮用于自定义次要按钮的样式
captionGroup底部产品列表容器用于自定义底部产品列表的布局样式
Last updated on