Package Exports

react-3d-nav

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-3d-nav) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-3d-nav

this is a react 3d navigation

图片效果不太好！

横向效果

纵向效果

1, 安装 npm i react-3d-nav --save

2, import

import Nav3d from 'react-3d-nav'

class xxxx extends React.Component {

...

render(){

  return (
      
      ........
      
      <Nav3d 
      
        data = {[
            
            {
                
                name: 'list1',
                
                path: '/month/farm'
                
            }
        ]}
        
      />
      
  )

}


3, api
        <Nav3d 
            data = {[
                {
                    name: '11111eeeeeeeeeee',
                    path: '/month/farm'
                },
                {
                    name: 'list1',
                    path: '/123'
                },
                {
                    name: 'list1',
                    path: '/123'
                },
                {
                    name: 'list1',
                    path: '/123'
                },
                {
                    name: 'list1',
                    path: '/123'
                },
                ]} // name是导航栏显示的文字， path是导航栏的跳转地址 必须项
            interval = {{ 
                            loop: true,  
                            time: 1000
                        }}  //  是否自动旋转， loop 默认为true time是旋转的时间间隔
            innerStyle = {{
                width: 80
            }}  // 导航栏的样式 有默认样式
            orientation = "vertical"  // horizontal   // 排列方式， horizontal 为水平模式 vertical 为竖直模式 默认为水平
            show = {true}  // 初始化加载是否显示导航栏 默认显示
            top =  '-500px'  // 点击消失时导航组件的位置 默认为-400
        />