何时使用
安装
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 | 链接的 href | string | - |
CSS 变量
| 属性 | 说明 | 默认值 |
|---|
| --background-color | 背景色 | var(--adm-color-background) |