Biblioteca de barra lateral de reação personalizável e responsiva com menus suspensos

Blog

Biblioteca de barra lateral de reação personalizável e responsiva com menus suspensos

Barra lateral do React Pro

Biblioteca da barra lateral de reação personalizável e responsiva com menus suspensos e número ilimitado de submenus aninhados



Demo

Visualização ao vivo

Captura de tela

react-pro-sidebar



melhores temas de cores vscode

Instalação

fio

yarn add react-pro-sidebar

acima do nível do mar

npm install react-pro-sidebar

Uso

import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar'; import 'react-pro-sidebar/dist/css/styles.css'; Dashboard Component 1 Component 2 ;

Se você estiver usando o sass, poderá importar o arquivo styles.scss diretamente em seu arquivo scss

@import '~react-pro-sidebar/dist/scss/styles.scss';

Layout da barra lateral

Você pode tirar proveito dos componentes de layout da barra lateral para organizar o conteúdo de sua barra lateral

import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from 'react-pro-sidebar'; {/** * You can add a header for the sidebar ex: logo */} {/** * You can add the content of the sidebar ex: menu, profile details, ... */} {/** * You can add a footer for the sidebar ex: copyright */} ;

Estilo Personalizado

Existem conjuntos de variáveis ​​sass disponíveis que você pode substituir para definir seus próprios estilos

embaralhar um array python

Você precisa incluir suas variáveis ​​de substituição antes de importar o arquivo scss

Seu custom.scss o arquivo deve ser parecido com este

// Your variable overrides $sidebar-bg-color: #1d1d1d; @import '~react-pro-sidebar/dist/scss/styles.scss';

Variáveis ​​scss disponíveis

$sidebar-bg-color: #1d1d1d !default; $sidebar-color: #adadad !default; $sidebar-width: 270px !default; $sidebar-collapsed-width: 80px !default; $highlight-color: #d8d8d8 !default; $submenu-bg-color: #2b2b2b !default; $submenu-bg-color-collapsed: #2b2b2b !default; $icon-bg-color: #2b2b2b !default; $icon-size: 35px !default; $breakpoint-xs: 480px !default; $breakpoint-sm: 576px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 992px !default; $breakpoint-xl: 1200px !default;

Usando submenus aninhados

Você pode ter quantos itens de menu e submenus aninhados desejar, e a sintaxe é muito simples

Component 1 {/* you can have more nested submenus ... */}

Usando React Router Dom

Aqui está um exemplo de como usar Reagir roteador dom no item do menu

import { Link } from 'react-router-dom'; Dashboard ;

INCÊNDIO

Componente Suporte Modelo Descrição Predefinição
ProSidebar desabou boleano status recolhido da barra lateral false
rtl boleano Direção RTL false
alternado fragmento Alternar o status da barra lateral quando o ponto de interrupção estiver habilitado false
onToggle (value:boolean)=>{} Função de retorno de chamada chamada quando o status alternado muda, acontece quando a sobreposição é clicada -
ponto de interrupção xs sm md lg
largura número fragmento Largura da barra lateral 270px
imagem fragmento Url da imagem a ser usada no plano de fundo da barra lateral -
Cardápio iconShape 'square' 'round' 'circle'
popperArrow boleano se true, uma seta será exibida quando a barra lateral recolhida para apontar para o invólucro do submenu false
Item do menu ícone ReactNode Ícone para o item de menu -
ativo boleano Definir itens de menu ativos false
prefixo ReactNode Adicione um prefixo ao menuItem -
sufixo ReactNode Adicione um sufixo ao menuItem -
SubMenu título fragmento ReactNode Título para o submenu
ícone ReactNode Ícone para submenu -
defaultOpen boleano Defina se o submenu está aberto por padrão false
abrir boleano Defina o valor aberto se quiser controlar o estado -
prefixo ReactNode Adicione um prefixo ao submenu -
sufixo ReactNode Adicione um sufixo ao submenu -

Detalhes do download:

Autor: azouaoui-med

Demonstração ao vivo: https://azouaoui-med.github.io/react-pro-sidebar/

GitHub: https://github.com/azouaoui-med/react-pro-sidebar

#react #javascript #reactjs

onde comprar um pitbull