Ml Topbar Apps

Propriedades

Properties

| Propriedades | Atributos | Descrição | Tipo | Default | | ------------------- | -------------------- | ----------- | --------- | ----------- | | iconsColor | icons-color | | string | '#000' | | showApps | show-apps | | boolean | true | | showNotifications | show-notifications | | boolean | true | | showUser | show-user | | boolean | true | | user | -- | | IUser | undefined |

Como usar esse componente

React

• Instalar o pacote no seu projeto. Ex: yarn add @ml/topbar-apps
• Se o seu projeto foi criado utilizando o create-react-app você precisará executar a função defineCustomElements() no seu index.js. Caso a sua aplicação necessite ser executada no IE é necessário executar o applyPolyfills() também. Veja o exemplo abaixo.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { applyPolyfills, defineCustomElements } from '@ml/topbar-apps/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements();
});

• Para o correto funcionamento é necessário encapsular o componente dentro de um componente React como o exemplo abaixo:

import React, { useRef, useEffect } from 'react'

const TopbarApps = ({ user, className, iconsColor, ...props }) => {
  const elementRef = useRef()

  useEffect(() => {
    elementRef.current.user = user
    elementRef.current.iconsColor = iconsColor
  }, [user, iconsColor])

  return <ml-topbar-apps class={className} ref={elementRef} {...props}></ml-topbar-apps>
}

export default TopbarApps