zee.athena v2.2.0

Athena

Knowledge center component for Zee.Dog projects

Motivation

Nós da Zee.Dog desenvolvemos esse componente com o intuito de usa-lo em diferentes projetos da Zee.Dog ou até mesmo em projetos a parte, pois ele também pode ser customizável para poder usar outros botões além dos padrões da Zee.Dog.

Installing / Getting started

NPM: npm install --save zee.athena
Yarn: yarn add zee.athena

Developing

Built With

Usage

// ES6 Modules or TypeScript
import Athena from 'zee.athena';
Athena.init();

// CommonJS
const Athena = require('zee.athena');
Athena.init();

Examples

Default buttons

Starting component

OBS: Por padrão ele inicia o componente em inglês e com todos os botões padrões incluídos.

Athena.init();

Customizing

Para alterar a linguagem do componente para português é preciso usar o seguindo trecho de código:

Athena.init({ language: 'pt-br' });

Para customizar o botão inicial de ajuda que faz abrir a lista de botões, passar um objeto onde irão conter as propriedades que customizam o botão principal:

Athena.init({ mainButtonStyle: {
 title: 'Help',
 icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.3 12.8"><path d="M1.4.038c-.2 0-.4.1-.6.1l7.7 7.8c.4.4.9.4 1.3 0l7.8-7.8c-.2-.1-.4-.1-.6-.1H1.4zm16.8.7l-5.8 5.9 5.8 5.4c.1-.2.1-.4.1-.6v-10.1c0-.2 0-.4-.1-.6zM.1.738c-.1.2-.1.4-.1.6v10.1c0 .2 0 .4.1.6l5.8-5.4L.1.738zm11.6 6.6l-1.3 1.3c-.7.7-1.9.7-2.6 0l-1.3-1.3-5.8 5.4c.2.1.4.1.6.1h15.6c.2 0 .4 0 .6-.1l-5.8-5.4z"></path></svg>',
 configStyleButton: {
   backgroundColor: 'black',
   backgroundColorHover: 'black',
   fontColor: 'white',
   colorIcon: 'white'
 },
} });

Se você não quiser usar os botões padrão já inseridos pelo componente e usar outros a sua escolha, é só usar o seguinte trecho de código, você pode usar true ou false, onde true mostram todos e false não mostra nenhum:

Athena.init({ showAllButtons: false }); //Não mostra nenhum dos botões padrão.
Athena.init({ showAllButtons: true }); //Mostra todos botões padrão.

Para customizar os botões padrão, você pode retirar alguns botões padrão, ou customiza-los, passando um array com as configurações de cada um em um objeto: