README

ftc-nav-react

The nav component being used by FTC. It is the react version.

Install

cd yourProject
npm install "@ftchinese/ftc-nav-react" --save

Usage

Example:

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

import Nav from '@ftchinese/ftc-nav-react';

const channelData = [
  {
    "name": "首页",
    "order":0,
    "subs":[
      {
        "name":"特别报道",
        "order":0
      },
      {
        "name":"热门文章",
        "order":1
      }
    ]  
  },
  {
    "name": "中国",
    "order":1,
    "subs":[
      {
        "name":"政经",
        "order":0
      },
      {
        "name":"商业",
        "order":1
      }
    ]
  },
  {
    "name": "全球",
    "order":2
  },
  {
    "name": "经济",
    "order":3
  },
  {
    "name": "金融市场",
    "order":4
  },
  {
    "name": "商业",
    "order":5
  },
  {
    "name": "创新经济",
    "order":6
  }
];

class App extends React.Component {
  render() {
    return (
      <Nav channels={channelData} dynamicnav={true} />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Props of Nav

You can know about it by the proptypes:

static propTypes = {
    channels: PropTypes.arrayOf(
        PropTypes.shape({
            name: PropTypes.string.isRequired,
            order: PropTypes.number.isRequired,
            url: PropTypes.string,
            subs: PropTypes.arrayOf(
                PropTypes.shape({
                    name: PropTypes.string.isRequired,
                    order: PropTypes.number.isRequired,
                    url: PropTypes.string
                })
            )

        })
    ),
    dynamicnav: PropTypes.bool,
    defaultSelectedTopChannelOrder: PropTypes.number,
    defaultSelectedSubChannelOrder: PropTypes.number,
    sticky: PropTypes.oneOf(['top','sub','all','none'])
}

channels

Type Array.The data provided for nav, which is an array and each item of which is an object with required property name and order, and the optional property url and subs.

You should provide the url for each item when the dynamicnav is false.

And the subs is the data of sub channel of each main channel, which follows the same format of main channel.

dynamicnav

Type Bool. Default false. The signal deciding which type of Nav component you will use. If it is true, the nav is dynamic and you can get different data when clicking the different channel tabs on one single page. And if it is false, the nav is static and you may navigate to another page which depends on the value of url of one channel item.

defaultSelectedTopChannelOrder

Type Number. Default 0. The order of the default selected channel. It can be 0, 1, 2...

defaultSelectedSubChannelOrder

Type Number. Default -1. The order of the default selected sub channel. It can be 0, 1, 2...and can also be -1, which means there is no sub channel selected.

sticky

Type String, one of 'top','sub','all','none'. This is the new prop in this version. With it you can set which part of the nav to be sticky on the top of page when scrolling.

Usage no npm install needed!