@eduzz/apps-toolbar

Eduzz Toolbar

Instalação

v4.x.x ou > uso exclusivo para React.

yarn add @eduzz/apps-toolbar

Implementação

<Toolbar {...params}>
  // ações customizadas
  <Toolbar.Action icon={<AvatarOutline />} />
  <Toolbar.Action icon={<NotificationOutline />} />

  // ações padrões
  <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: '[e-mail]'
    }
  };

  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.

// menu
interface IEduzzToolbarUserMenu {
  content: React.ReactNode;
  icon?: React.ReactNode;
  onClick?: (user: IEduzzToolbarUser, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  disabled?: boolean;
  hidden?: boolean;
  divider?: boolean;
}