react-component
rc-footer 🐾
Pretty Footer react component used in ant.design and antv.vision.
Live Demo
https://react-component.github.io/footer/
Install
Usage
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,
);API
| 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 |
Column
| 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 |
Column Item
| 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 |
Development
npm install
npm startLicense
rc-footer is released under the MIT license.