React Site Nav 项目教程

最新推荐文章于 2024-09-10 08:35:13 发布

劳颜甜Hattie

最新推荐文章于 2024-09-10 08:35:13 发布

阅读量369

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00352/article/details/142076342

版权

React Site Nav 项目教程

react-site-navA kick ass site menu powered by styled components inspired by Stripe.项目地址:https://gitcode.com/gh_mirrors/re/react-site-nav

1. 项目介绍

react-site-nav 是一个由 styled-components 驱动的站点导航菜单组件，灵感来源于 Stripe。它提供了美观的动画效果、自动视口检测和修正功能，确保弹出菜单不会被渲染到屏幕外。该组件完全可定制，并且基于 CSS Grid、CSS 动画和 styled-components。

2. 项目快速启动

安装

首先，使用 yarn 或 npm 安装 react-site-nav：

yarn add react-site-nav

或

npm install react-site-nav

快速启动

以下是一个简单的示例，展示如何在你的 React 项目中使用 react-site-nav：

import React from 'react';
import { Switch, Link, Route } from 'react-router-dom';
import SiteNav, { ContentGroup } from 'react-site-nav';

// 导入你的组件
import Home from './home';
import MyStory from './myStory';

export default () => (
  <div>
    {/* 添加 SiteNav 组件，并将其子组件设置为 ContentGroup */}
    <SiteNav>
      <ContentGroup title="About" height="200">
        {/* 你可以在 ContentGroup 中添加任何内容 */}
        <ul>
          <li><Link to="/my-story">My Story</Link></li>
          <li>Another list item</li>
        </ul>
      </ContentGroup>
      <ContentGroup title="Contact" height="200">
        <a href="mailto:yusinto@gmail.com">Email</a>
        <br/>
        <a href="https://github.com/yusinto">Github</a>
      </ContentGroup>
    </SiteNav>

    {/* 路由配置 */}
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/my-story" component={MyStory}/>
    </Switch>
  </div>
);