Pretty Footer react component used in ant.design and antv.vision.
https://react-component.github.io/footer/
import Footer from 'rc-footer';
import 'rc-footer/assets/index.css'; // import 'rc-footer/asssets/index.less';
import { render } from 'react-dom';
render(
<Footer
columns={[
{
icon: (
<img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" />
),
title: '语雀',
url: 'https://yuque.com',
description: '知识创作与分享工具',
openExternal: true,
},
]}
bottom="Made with ❤️ by AFX"
/>,
mountNode,
);| Property | Type | Default | Description |
|---|---|---|---|
| prefixCls | string | rc-footer | |
| className | string | '' | additional class name of footer |
| style | React.CSSProperties | style properties of footer | |
| columns | Column Array | [] | columns data inside footer |
| bottom | ReactNode | extra bottom area beneath footer columns | |
| theme | 'light' | 'dark' | 'dark' | preset theme of footer |
| backgroundColor | string | '#000' | background color of footer |
| columnLayout | 'space-around' | 'space-between' | 'space-around' | justify-content value of columns element |
| maxColumnsPerRow | number | - | max count of columns for each row |
| Property | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | icon that before column title | |
| title | ReactNode | title of column | |
| items | Item Array | [] | items data inside each column |
| className | string | '' | additional class name of footer |
| style | React.CSSProperties | style properties of footer |
| Property | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | icon that before column title | |
| title | ReactNode | title of column | |
| description | ReactNode | description of column, come after title | |
| url | string | link url of item title | |
| openExternal | boolean | false | link target would be _blank if openExternal is ture |
| className | string | '' | additional class name of footer |
| style | React.CSSProperties | style properties of footer | |
| LinkComponent | React.ReactType | 'a' | the link element to render item |
npm install
npm start
rc-footer is released under the MIT license.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent