Как поставить интервал при сворачивании и разворачивании боковой панели в React - PullRequest
Новая
       116

Как поставить интервал при сворачивании и разворачивании боковой панели в React

0 голосов
/ 11 июля 2020

Я пытаюсь добиться, когда боковая панель сворачивается, тело освобождает место для боковой панели, а когда она разворачивается

Вот как это выглядит, когда боковая панель разворачивается

введите описание изображения здесь

и вот как оно выглядит, когда боковая панель свернута

введите описание изображения здесь 

import React from 'react';
import SideNav, {
  Toggle,
  Nav,
  NavItem,
  NavIcon,
  NavText,
} from '@trendmicro/react-sidenav';
import '@trendmicro/react-sidenav/dist/react-sidenav.css';

export const SideBar = () => {
  return (
    <>
      <SideNav
        onSelect={(selected) => {
          // Add your code here
        }}
      >
        <SideNav.Toggle />
        <SideNav.Nav defaultSelected='home'>
          <NavItem eventKey='home'>
            <NavIcon>
              <i className='fa fa-fw fa-home' style={{ fontSize: '1.75em' }} />
            </NavIcon>
            <NavText>Home</NavText>
          </NavItem>
          <NavItem eventKey='charts'>
            <NavIcon>
              <i
                className='fa fa-fw fa-line-chart'
                style={{ fontSize: '1.75em' }}
              />
            </NavIcon>
            <NavText>Charts</NavText>
            <NavItem eventKey='charts/linechart'>
              <NavText>Line Chart</NavText>
            </NavItem>
            <NavItem eventKey='charts/barchart'>
              <NavText>Bar Chart</NavText>
            </NavItem>
          </NavItem>
        </SideNav.Nav>
      </SideNav>
    </>
  );
};

export default SideBar;

и это в приложении. js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Nav from './components/NavBar';
import Home from './screens/Home';
import Login from './screens/Login';
import Register from './screens/Register';
import SideBar from './components/SideBar';
import { GlobalProvider } from './context/GlobalState';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <GlobalProvider>
      <Router>
          <Nav />
          <SideBar />

          <Switch>
            <Route path='/' component={Home} exact />
            {/* <Route path='/login' component={Login} exact /> */}
            <Route path='/login' component={Login} exact />
            <Route path='/register' component={Register} exact />
          </Switch>
      </Router>
    </GlobalProvider>
  );
}

export default App;

Я попытался добавить поля в теле, но он выглядит красиво, когда вы разворачиваете, потому что все еще больше пространства. Извините, если это не так

Я хочу что-то вроде этого введите описание изображения здесь

Я новичок и был бы очень признателен, если бы вы могли мне помочь Заранее спасибо !!!

1 Ответ

1 голос
/ 13 августа 2020

Если вы посмотрите на демонстрационную страницу Trend Micro , они добавляют поля к содержимому. Это один из подходов, который уже рекомендован модулем. Вы можете добавить свойство перехода CSS, чтобы оно было таким же плавным, как при расширении / сворачивании боковой панели. Просто добавьте дополнительные поля, если боковая панель развернута. Используйте событие onToggle на боковой панели, чтобы установить нужное состояние.

Приложение. js

const [sideNavExpanded, setSideNavExpanded] = React.useState(false);

const contentStyle = {
    marginLeft: sideNavExpanded ? "250px" : "70px", // arbitrary values
    transition: "margin 0.2s ease"
};

return (
    <div>
        <SideBar
            setSideNavExpanded={setSideNavExpanded}
            sideNavExpanded={sideNavExpanded}
        />
        <div style={contentStyle}>Some Content</div>
    </div>
)

Боковая панель. js

export const SideBar = ({ sideNavExpanded, setSideNavExpanded }) => {
  return (
    <>
      <SideNav
        onToggle={() => {
          setSideNavExpanded(!sideNavExpanded);
        }}
      >
      ...

CodeSandBox: https://codesandbox.io/s/so-trend-micro-sidebar-fjo9r?file= / src / App. js

...