You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

Menu

Criar & modelar componentes personalizados

Assim como na maioria dos desenvolvimentos, há muitas maneiras de abordar suas personalizações no Flex. Essas diretrizes se baseiam em nossa experiência na criação de Flex Plugins.

Componentes personalizados

Ao criar um novo componente, recomendamos seguir as convenções descritas pelo Criador de plugins. Crie um diretório no /src/components e um trio de arquivos para representar o conteúdo e os estilos do componente.

src
├── components
│   └── MyComponent
│   │   └── MyComponent.jsx
│   │   └── MyComponent.Container.js
│   │   └── MyComponent.Styles.js

Neste exemplo:

  • O MyComponent.jsx retornará um componente React que poderia ser adicionado por uma das APIs Content.add() do Flex.
  • O MyComponent.Container.js conecta o componente apresentacional (MyComponent.jsx) ao armazenamento do Redux
  • O MyComponent.Styles.js gerencia os estilos que você aplicará ao seu componente e seus filhos

Usar o Twilio Paste

Disponível somente em 2.0

Nem todos os componentes criados precisam começar do zero. As bibliotecas de componentes React existentes podem ajudá‐lo a usar componentes que já foram criados com compatibilidade de navegador, tamanhos de tela responsivos e acessibilidade em mente. Internamente, o flex-ui utiliza o Paste para muitos componentes. Você também pode usar o Paste para criar componentes que começam com um estilo semelhante ao layout existente do Flex.

Embora o Paste já seja uma dependência do flex-ui, recomendamos incluir isso como uma dependência explícita no seu package.json do projeto de plugin. Você adicionaria isso em suas dependencies:

// package.json

"dependencies": {
    ...
    "@twilio-paste/core": "^10.20.0",
},

Componentes de estilo

Descobrimos que é mais fácil gerenciar o desenvolvimento de plugins quando seus estilos e seu código são agrupados como parte de seu plugin. Recomendamos o uso de Emoção para gerenciar os estilos de seus componentes personalizados. Se você optar por usar Emoção, certifique‐se de incluí‐la com suas dependências package.json.

Estrutura

Sugerimos a definição de um wrapper de estilo no nível do componente para cada um de seus componentes. No entanto, se os mesmos estilos forem aplicados no mesmo tipo de elemento ou se você quiser fazer um estilo dinâmico, crie componentes de estilo separados para uma melhor capacidade de reutilização.

Seguindo a estrutura de arquivos acima, recomendamos que você mantenha seus estilos ao lado de seus componentes em arquivos como MyComponent.Styles.js.

Uso de emoção

Há muitas maneiras de usar Emoção para modelar seus componentes. Sugerimos usar styled para definir um wrapper de estilo no nível do componente. Este componente styled incluirá todos os estilos para seu componente principal e seus filhos.

// Panel.ts
import React from 'react';
import { PanelStyles } from './Panel.Styles';

const Panel = () => {
 return (
   <PanelStyles>
     <ul>
       <li className="first-item">A</li>
       <li className="second-item">B</li>
       <li className="third-item">C</li>
     </ul>
   </PanelStyles>
 );
};

export default Panel;

// Panel.Styles.ts
import styled from 'react-emotion';

export const PanelStyles = styled('div')`
   text-align: center;
   background: #D8BFD8;
   color: #fff;
   height: 100%;

   ul {
       Padding-top: 10px;
   }
   .first-item {
       font-size: 30px;
   }
   .second-item {
       font-size: 40px;
   }
   .third-item {
       font-size: 50px;
   }
`;

Essa abordagem também introduz convenções úteis:

  • O uso de nomes de classe em elementos com estilo individual favorece o uso de elementos HTML cuja semântica é mais clara e familiar para os desenvolvedores
  • Quando um elemento tem um nome de classe, é fácil inferir que ele só tem estilo com CSS e que não há funcionalidade personalizada.

Aplicação de estilos dinâmicos

O styled também pode ser usado para implementar estilos dinâmicos com base em adereços. O tema Flex é automaticamente acessível nos componentes styled através de props.theme porque o Flex UI (IU do Flex) envolve todos os componentes em um ThemeProvider. Você também pode usar essa abordagem para transmitir adereços personalizados, como bgColor no exemplo abaixo.

// MyView.Styles.ts
import styled from 'react-emotion'

export const SubHeader = styled('div')<{ bgColor: string }>`
    color: ${props => props.theme.colors.base1};
    background-color: ${props => props.bgColor};
    font-weight: bold;
    text-transform: uppercase;
`;

// MyView.tsx
render() {
    return (
        <div>
            <SubHeader bgColor="red">This font color should be red.</SubHeader>
            <SubHeader bgColor="blue">A cor da fonte deve ser azul.</SubHeader>
        </div>
    );
}

Estilos globais

Para adicionar estilos globais ao seu plugin, use injectGlobal da Emoção. Sugerimos manter um arquivo separado para seus estilos globais e importá-lo em seu plugin de nível superior.

// GlobalStyles.ts
import { injectGlobal } from 'react-emotion';

injectGlobal`
   .block {
       display: block;
   }
   .inline-block {
       display: inline-block;
   }
`;

// MyPlugin.tsx
import '../common/GlobalStyles.ts

Uso de um arquivo CSS com seu plugin

Você também pode declarar seus estilos em um arquivo CSS e importá‐lo em um arquivo JS para seus estilos globais.

// GlobalStyles.js
import { injectGlobal } from 'react-emotion';
import global from './global.css';
injectGlobal`
  ${global}
`;
/* global.css */
.Twilio-SidePanel-Custom-Container {
  height: 100%;
  border: 1px blue;
}

Em seguida, você pode usar displayName para carregar um componente Flex de estoque (como o SidePanel) e definir dinamicamente seu nome de classe CSS com base na string que você definiu.


<Container>
   <StyledSidePanel
        displayName="Custom"
        themeOverride={theme && theme.OutboundDialerPanel}
        handleCloseClick={handleClose}
        title={title}
   >
      <ListContainer
          itemList={itemList}
          itemType={itemType}
      />
   </StyledSidePanel>
</Container>     

Neste exemplo, os estilos declarados em .Twilio-SidePanel-Custom-Container em seu arquivo CSS serão aplicados.

Estilos externos

Nem sempre é prático definir seus estilos ao lado de cada componente. Talvez você esteja usando folhas de estilo compartilhadas em um conjunto de aplicativos. Ou talvez você esteja invalidando vários plugins que devem compartilhar um ativo CSS central.

Os métodos loadCSS e loadJS do flex-plugin podem ser usados nessas situações para carregar recursos externos ao inicializar seu plugin.

import { FlexPlugin, loadCSS, loadJS } from 'flex-plugin';

export default class AdminPlugin extends FlexPlugin {
   constructor() {
       super('AdminPlugin');
   }

   public init(flex, manager) {
       loadCSS('https://dancing-owl-1234.twil.io/assets/test.css');
       loadJS('https://dancing-owl-1234.twil.io/assets/test.js');
  }
}

Uma dificuldade com essa abordagem é garantir que seus URLs externos possam ser usados em qualquer ambiente em que você esteja implantando seu plugin. Por exemplo, você não desejaria recriar seu plugin se os estilos dependerem de URLs com controle de versão ou se os ativos forem diferentes em seu ambiente de desenvolvimento versus produção.

Uma abordagem é usar a API de configuração do Flex para armazenar os URLs como atributos e, em seguida, fazer referência a esses atributos a partir de seu plugin.

curl https://flex-api.twilio.com/v1/Configuration -X POST -u ACxxx:auth_token \
    -H 'Content-Type: application/json' \
    -d '{
        "account_sid": "ACxxx",
        "attributes": {
            "stylesheet_url": "https://my-external-site.com/styles.css"
        }
    }'
public init(flex, manager) {
   loadCSS(manager.serviceConfiguration.attributes.stylesheet_url);
}

Classifique esta página:

Precisa de ajuda?

Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.

Obrigado pelo seu feedback!

Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

Enviando seu feedback...
🎉 Obrigado pelo seu feedback!
Algo deu errado. Tente novamente.

Obrigado pelo seu feedback!

thanks-feedback-gif