Eduzz Toolbar
Instalação
v4.x.x ou >
uso exclusivo para React.
$ yarn add @eduzz/apps-toolbar
Implementação
<Toolbar {...params}>
<Toolbar.Action icon={<AvatarOutline />} />
<Toolbar.Action icon={<NotificationOutline />} />
<Toolbar.Apps />
<Toolbar.User menu={...} />
</Toolbar>
Teste local
No arquivo src/index.tsx
implemente o código abaixo.
function DevApp() {
const params: IEduzzToolbarSetupParams = {
application: 'blinket',
disableChat: true,
user: {
id: 1,
name: 'John Doe',
email: 'eduzz@eduzz.com'
}
};
const menu: IEduzzToolbarUserMenu[] = [
{
content: 'Minhas compras',
onClick: () => console.log('mysales'),
icon: <CartOutline />
},
{
content: 'Dados cadastrais',
disabled: true,
icon: <CameraFrontOutline />
},
{
content: 'Sair',
divider: true,
icon: <Exit />
}
];
return (
<Toolbar {...params}>
<Toolbar.Action icon={<AvatarOutline />} />
<Toolbar.Action icon={<NotificationOutline />} />
<Toolbar.Apps />
<Toolbar.User menu={menu} />
</Toolbar>
);
}
ReactDOM.render(<DevApp />, document.getElementById('root'));
Props
Toolbar
props.
interface IEduzzToolbarSetupParams {
application?: typeEduzzToolbarApplications;
user?: IEduzzToolbarUser;
disableChat?: boolean;
}
Toolbar.Action
props.
interface IEduzzToolbarAction {
active?: boolean;
icon?: React.ReactNode;
label?: React.ReactNode;
onClick?: (element?: React.MouseEvent<HTMLDivElement>) => void;
}
Toolbar.User
props.
interface IEduzzToolbarUserMenu {
content: React.ReactNode;
icon?: React.ReactNode;
onClick?: (user: IEduzzToolbarUser, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
disabled?: boolean;
hidden?: boolean;
divider?: boolean;
}