0.0.7 • Published 2 years ago
sv-menu-teste v0.0.7
SV- Menu (v0.1.0) (BETA)
SV-menu é um componente para ambiente de menu, com sidebar e navbar com o objetivo de ser altamente customizável (EM BETA).
Para começar a usar o SV-Menu
Instale o sv-menu:
yarn add sv-menu
-ou-
npm install sv-menu
Em seguida, instale usando npm ou yarn as dependências do sv-menu:
yarn add styled-components @types/styled-components react-icons
-ou-
npm install styled-components @types/styled-components react-icons
Exemplo básico
import Menu from 'sv-menu'
import { AiFillHome } from 'react-icons/ai'function App() {
return (
<Menu
menuList={
[
{
icon: <BiCodeAlt />,
text: "Item",
onClick: () => alert("Clicado!")
},
]
}
/>
);
}
Parâmetros
Menu
Parâmetro | Tipo | Descrição |
---|---|---|
menuList | object[] | Lista de menu que apareçerão no sidebar |
menuList.item text | string | Texto do menuItem. |
menuList.item icon | React.Child | Icone menuItem |
menuList.item active? | boolean | Deternimar se o menuItem estará em modo active. |
menuList.item onClick | function() {} | Função que será ativa quando clicar no menuItem |
isMinificated | boolean | Permitir função de minificar/expandir o sidebar, o padrão é true . |
navbarStyle? | React.CSSProperties | Estilização customizada para o navbar. |
sidebarStyle? | React.CSSProperties | Estilização customizada para o sidebar. |
wrapperStyle? | React.CSSProperties | Estilização customizada para o wrapper |
typeMenu? | "side-navbar", "only-sidebar", "only-navbar" | Escolha entre exibir tanto o sidebar quando o navbar, exibir apenas o sidebar ou exibir apenas o navbar. |
menuItemHoverType? | "default", "line-left" | Escolha o tipo de hover para o seu menuListItens |
menuItemOptions | { styles: {} } | Opções de definição, configuração e estilização geral em relação aos menuItem do sidebar. |