JGuang

页脚

Footer · Ant Design Mobile

交互预览
npm install antd-mobile@5.43.0

页脚 Footer

何时使用

安装

npm install antd-mobile@5.43.0

antd-mobile 是移动网页组件库,不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot,否则 Toast、Dialog 等命令式 API 无法渲染;深色模式通过 <html data-prefers-color-scheme="dark"> 切换。

示例来自 Ant Design Mobile 官方仓库(MIT),固定在 npm 5.43.0 对应的提交;示例中的 DemoBlock 等展示辅助组件由 JGuang 重写,不属于 antd-mobile 的 API。

何时使用

适用于页面底部信息描述。

示例

属性

属性说明类型默认值
label带分割线的顶部内容string | ReactNode-
links链接内容LinkItem[]-
content普通的内容部分string | ReactNode-
chips底部标签ChipItem[]-
onChipClick点击底部标签触发,仅在标签 type 为 link 生效(item: ChipItem, index: number) => void-
onLinkClick点击链接触发事件,拦截 a 标签的 href 跳转(item: LinkItem, index: number) => void-

ChipItem

属性说明类型默认值
text标签内容string | ReactNode-
type标签类型,plain 为纯展示,link 为可点击'plain' | 'link''plain'

LinkItem

属性说明类型默认值
text链接的文字string-
href链接的 hrefstring-

CSS 变量

属性说明默认值
--background-color背景色var(--adm-color-background)