综合编程

Introducing react-site-nav: a beautiful site navigation bar powered by styled components an…

微信扫一扫,分享到朋友圈

Introducing react-site-nav: a beautiful site navigation bar powered by styled components an…
0

A beautiful site navigation bar to be proud of. Powered by styled components inspired by stripe.com

:tada:

Check out the live preview here (powered by now ).

Your search for the perfect site navigation bar ends here. Finally a world class navigation bar you can use straight out of the box. Why use this package?

  • Beautiful animations
  • Automatic viewport detection and correction so flyouts never get rendered off screen
  • Completely customisable
  • Powered by css grid, css animations and styled components

No more compromises. Welcome to react-site-nav.

Installation

yarn add react-site-nav

Quickstart

import React from 'react';
import {Switch, Link, Route} from 'react-router-dom';
import SiteNav, {ContentGroup} from 'react-site-nav'; // 1. Do this
import Home from './home';
import MyStory from './myStory';

export default () =>
  (
    
{/* 2. Add SiteNav with ContentGroup as children */} {/* 3. You can add anything in a ContentGroup */}
    {/* react router link! */}
  • My Story
  • Another list item
Free text followed by some links.
Email
Github
);

Check the two examples for a fully working spa with react router, server side rendering and hot reload.

Api

SiteNav

The main react component that represents the site nav. The root container is a css grid so most of the props below maps directly to this grid and should be self-explanatory. Place ContentGroup components as children of SiteNav to render the “flyouts”.

    { /* These will render as flyouts */}
    ...
    ...
  

ContentGroup

Each SiteNav contains ContentGroup children components. Each ContentGroup will be rendered as a “flyout” on hover of the root items. It accepts the following props which are self-explanatory:

  {
    /* You can render anything here! */
  }
  
阅读原文...

微信扫一扫,分享到朋友圈

Introducing react-site-nav: a beautiful site navigation bar powered by styled components an…
0
Github

Laravel核心代码学习 -- 外观模式

上一篇

iPhone9基本确定,这次堪称“良心价”,比Ov还便宜?

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Introducing react-site-nav: a beautiful site navigation bar powered by styled components an…

长按储存图像,分享给朋友