Úvod:stylizované plátno

Jako velký fanoušek stylových komponent jsem ve svých projektech vždy potřeboval Off-Canvas nebo Burger-Menu.

Při práci se stylizovanými komponentami je nepříjemné používat jednu z jednoduchých nabídek založených na CSS. Musíte importovat .css soubory, pravděpodobně budete muset přepsat nějaký styl, váš styl je rozdělen do „dvou světů“:prosté CSS a stylové komponenty. Tak jsem napsal styled-off-canvas.

Ukázka

Ano, existuje DEMO

Komponenty

styled-off-canvas se dodává se třemi komponenty:<StyledOffCanvas /> ,<Menu /> a <Overlay /> .

<StyledOffCanvas /> je komponenta balení, která poskytuje všechna nastavení/vlastnosti.

<Menu /> je samotné menu mimo plátno. Jako děti můžete předat cokoli, co chcete (např. stylizovaný seznam odkazů reagujícího směrovače)

<Overlay /> je volitelná součást, která vykresluje poloprůhlednou vrstvu nad obsahem vaší aplikace.

Implementace

Toto je jednoduchý příklad, jak použít stylizované plátno. Zde můžete také najít příklad kódu.

import React, { useState } from 'react'
import { StyledOffCanvas, Menu, Overlay } from 'styled-off-canvas'

const App = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <StyledOffCanvas
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
    >

      <button onClick={() => setIsOpen(!isOpen)}>Toggle menu</button>

      <Menu>
        <ul>
          <li>
            <a onClick={() => setIsOpen(false)}>close</a>
          </li>
          <li>
            <a href='/about'>About</a>
          </li>
          <li>
            <a href='/contact'>Contact</a>
          </li>
        </ul>
      </Menu>

      <Overlay />

      <div>this is some nice content!</div>
    </StyledOffCanvas>
  )
}

export default App

Přizpůsobení

Existuje mnoho vlastností pro přizpůsobení nabídky, jako například:barvy, pozice, velikost nebo doba trvání přechodu.
Navíc můžete použít stylizované komponenty css vlastnost na každé komponentě.

Plány do budoucna

stylizované plátno by mělo zůstat lehké a jednoduché. Nechci tedy stovky možností a možností. Momentálně přemýšlím o přidání nějakého přechodu do obsahu stránky.

Návrhy nebo zpětná vazba

Pokud máte jakoukoli zpětnou vazbu, návrhy nebo nápady - neváhejte! Napište komentář pod tento článek nebo fork/klon z GitHubu. Vždy je prostor pro zlepšení!