Footer 页脚
Footer Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| links | Array | [] | 链接列表。name 表示链接名称， url 表示跳转链接，target 表示跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同。TS 类型：Array<LinkObj> interface LinkObj { name: string; url?: string; target?: string}。详细类型定义 | N |
| logo | Object | - | 图标配置。logo.icon 表示图标链接地址，logo.title 表示标题文本，logo.url 表示链接跳转地址，logo.target 表示跳转方式。TS 类型：FooterLogo interface FooterLogo { icon: string; title?: string; url?: string; target?: string; }。详细类型定义 | N |
| text | String | '' | 版权信息 | N |
CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --td-footer-link-color | @brand-color | - |
| --td-footer-link-dividing-line-color | @font-gray-3 | - |
| --td-footer-link-dividing-line-padding | @spacer-1 | - |
| --td-footer-link-font-size | @font-size-s | - |
| --td-footer-link-line-height | 20px | - |
| --td-footer-logo-icon-height | 24px | - |
| --td-footer-logo-icon-margin-right | @spacer | - |
| --td-footer-logo-icon-width | 24px | - |
| --td-footer-logo-title-font-size | @font-size-m | - |
| --td-footer-logo-title-line-height | 24px | - |
| --td-footer-logo-title-url-width | 128px | - |
| --td-footer-text-color | @font-gray-3 | - |
| --td-footer-text-font-size | @font-size-s | - |
| --td-footer-text-line-height | 20px | - |
| --td-footer-text-margin-top | 4px | - |
何时使用
当页面底部需要放置一些补充信息和链接时使用。
与页面布局相关
页脚通常位于网站每个页面底部或主体内容下方的区域。
常见用法
用于承载版权、隐私政策和使用条款等信息，它们是法律保护所需的。
用于承载网站、产品的联系方式，便于用户在页脚查找联系信息或查找获得客户支持的方式。
用于承载网站导航。
用于承载相关公司/品牌列表，让用户能认知合作或者旗下的品牌/公司，并提供找到他们的方式。
