ember resize text

texte de résistance à l'emploi

Addon Ember qui utilise le mesur de texte Ember-Text pour redimensionner efficacement la police d'une seule ligne de texte pour la rendre.

Installation

ember install ember-resize-text

Démo

Consultez la page de démonstration

Usage

Étant donné que la version 1.1.0 Ember-Resize-Text est un mélange à utiliser dans les composants Ember. Un composant est toujours inclus pour une utilisation facile et pour maintenir la compatibilité en arrière.

Mélanger

Il suffit d'ajouter le mélange à un composant et la taille de la police des composants sera ajustée automatiquement.

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

export default Component.extend(ResizeText, {

  minSize: 12,
  maxSize: 18

});

Remarque : Le mixin utilise this.element.innerText pour afficher le texte et this.element.clientWidth (sauf si containerElement spécifie un élément différent) pour déterminer la largeur disponible.

Composant

Enveloppez simplement votre texte dans le style de bloc du composant resize-text .

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

Remarque : vous pouvez personnaliser le composant en remplaçant des attributs comme tagName ou des crochets standard.

Remarquez sur le redimensionnement de la fenêtre

Cet addon enregistre automatiquement les écouteurs d'événements sur l'événement de redimensionnement de Windows pour s'assurer que le texte s'adapte toujours après la redimension de la fenêtre. Si vous souhaitez que le texte augmente sa taille de police chaque fois que la fenêtre est redimensionnée, assurez-vous d'ajouter le style approprié à la classe CSS resize-text Ad-Ones. Par exemple, considérez ce balisage:

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

et le CSS suivant:

 nav {
  width: 100%;
  display: flex
}

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

La taille de la police ne sera pas augmentée si l'élément avec la classe resize-text ne sera pas en mesure d'augmenter sa largeur en dépendance à la largeur du parent. Ceci n'est pas intégré à l'addon car cela dépend du contexte dans lequel l'addon est utilisé.

Paramètres

Paramètre	taper	description
mini-taille	nombre	Taille minimale de la police dans PX
maxsize	nombre	taille maximale de la police dans PX
contenant	élément	Le paramètre ContainerElement permet de spécifier un élément DOM en option qui, la propriété clientWidth , sera utilisé pour déterminer l'espace disponible. Ceci est particulièrement utile lorsque l'élément DOM qui doit être redimensionné n'est pas un élément de bloc. Par exemple, le texte d'un lien doit être redimensionné, mais ne doit pas occuper toute la largeur, sauf si nécessaire.

Contribuer

Contributif

Voir le guide contributeur pour plus de détails.

Licence