Navigation Side Bar実装

12014 ワード
上のコード React Sidebar navigation はんのう WeCode テキストリンク

Navigation Side Bar



説明:

  • Stateを使用してHandleSideBarOpenを作成します.
  • firstとsecond Navで3つの演算子を使用してacitveを作成するときと時々.
  • onClickを使用すると、クリック時にイベントが発生します.
  • scssを使用して、アクティブ化時に表示される画面を設定します.
  • Nav.scssでは、~を使用して、アクティブ化時に一緒に移動する他の領域を含む.(~を使用しないとNavは移動するが、中間divとfooterは移動しない)

    • に感銘を与える


    初めて勉強したpropsを使って、概念をもっとよく理解させました.SideBarを作成する過程で、Stateをpropsとして使用する方法、x軸切り替え画面を使用する方法、および~を使用して他の領域を組み合わせる方法について、次の作業でさらに改善します.

    Nav.js

    

const [isSideBarOpen, setIsSideBarOpen] = useState(false);

  const handleSideBarOpen = () => {
    setIsSideBarOpen(!isSideBarOpen);
  };

<NavSidebar 
 handleSideBarOpen={handleSideBarOpen}
 isSideBarOpen={isSideBarOpen} 
/>

<div className={`firstNav ${isSideBarOpen ? 'active' : ''}`}>

<header className={`secondNav ${isSideBarOpen ? 'active' : ''}`}>

<div className="secondNavLeftBox" onClick={handleSideBarOpen}>

<FontAwesomeIcon icon={faSearch} onClick={handleSearchOpen} />

    Nav.scss

    

.firstNav {
transform: translateX(0px);
transition: transform 0.5s ease;

  &.active,
  &.active ~ div,
  &.active ~ header,
  &.active ~ footer {
    transform: translateX(320px);
    opacity: 0.2;
    transition: transform 0.5s ease-in-out;
  }

    NavSidebar.js

    

export default function NavSidebar({ handleSideBarOpen
, isSideBarOpen })

<div className={`containerWrapper ${isSideBarOpen ? 'active' : ''}`}>

<div className="sideTopRight" onClick={handleSideBarOpen}>
	<strong>Close</strong>
	<FontAwesomeIcon icon={faTimes} />
</div>

    NavSidebar.scss

    

.containerWrapper {
  position: absolute;
  top: 0;
  height: 100%;
  transform: translateX(-320px);
  transition: transform 0.5s ease;
  &.active {
    transform: translateX(0px);
  }
    [Python]ベース#3-プライマリ演算子
    SynologyのNASでrep2のImageCache2を動作させる際のTips