rc-footer
TypeScript icon, indicating that this package has built-in type declarations

0.6.8 • Public • Published

rc-footer 🐾

NPM version npm download dumi build status Codecov Dependencies DevDependencies bundle size

Pretty Footer react component used in ant.design and antv.vision.

Live Demo

https://react-component.github.io/footer/

Install

rc-footer

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 start

License

rc-footer is released under the MIT license.

Package Sidebar

Install

npm i rc-footer

Weekly Downloads

25,060

Version

0.6.8

License

MIT

Unpacked Size

25.1 kB

Total Files

13

Last publish

Collaborators

  • afc163