ember resize text

Texto da brasa

A Addon Ember que faz uso do me-mediador de texto de brasa para redimensionar com eficiência a fonte de uma única linha de texto para ajustá-la.

Instalação

ember install ember-resize-text

Demonstração

Confira a página de demonstração

Uso

Desde a versão 1.1.0 o texto de resistência é um mixin para usar nos componentes da Ember. Um componente ainda está incluído para facilitar o uso e manter a compatibilidade com versões anteriores.

Mixin

Basta adicionar o mixin a um componente e o tamanho da fonte dos componentes será ajustado automaticamente.

 import ResizeText from 'ember-resize-text/mixins/resize-text';

export default Component.extend(ResizeText, {

  minSize: 12,
  maxSize: 18

});

NOTA : O Mixin faz uso this.element.innerText para obter o texto para exibir e this.element.clientWidth (a menos que containerElement especifique um elemento diferente) para determinar a largura disponível.

Componente

Basta envolver seu texto no estilo de bloco de componentes resize-text .

 {{#resize-text minSize=12 maxSize=20}}
  Please resize me!
{{/resize-text}}

Nota : Você pode personalizar o componente, substituindo atributos como tagName ou ganchos padrão.

Observe o redimensionamento da janela

Este Addon registra automaticamente os ouvintes de eventos no evento de redimensionamento do Windows para garantir que o texto ainda se encaixe depois que a janela é redimensionada. Se você deseja que o texto aumente o tamanho da fonte sempre que a janela for redimensionada, adicione o estilo apropriado aos complementos da classe CSS resize-text . Por exemplo, considere esta marcação:

 <nav>
  <span>first</span>
  {{#resize-text}}
    second
  {{/resize-text}}
</nav>

e o seguinte CSS:

 nav {
  width: 100%;
  display: flex
}

.resize-text {
  flex-grow: 1; /* allow the resize-text elements to increase its size */
}

O tamanho da fonte não será aumentado se o elemento com a classe resize-text não for capaz de aumentar sua largura na dependência da largura dos pais. Isso não está incorporado ao addon, pois depende do contexto em que o complemento é usado.

Parâmetros

Paramter	tipo	descrição
MinSize	número	tamanho mínimo da fonte em px
MaxSize	número	Tamanho máximo da fonte em px
Contaierelement	elemento	O parâmetro de contêinerelement permite especificar um elemento DOM opcional que a propriedade clientWidth será usada para determinar o espaço disponível. Isso é particularmente útil quando o elemento DOM que deve ser redimensionado não é um elemento de bloco. Por exemplo, o texto de um link deve ser redimensionado, mas não deve ocupar toda a largura, a menos que seja necessário.

Contribuir

Contribuindo

Veja o guia contribuinte para obter detalhes.

Licença