Download ember resize text ember resize text

ember resize text

Schriftarten herunterladen

1.0.0

Herunterladen

Ember-Riesize-Text

Ember Addon, das Ember-Text-Measurer verwendet, um die Größe einer einzelnen Textzeile effizient zu ändern, um es passen zu lassen.

Installation

ember install ember-resize-text

Demo

Schauen Sie sich die Demo -Seite an

Verwendung

Seit Version 1.1.0 wird Ember-Resize-Text als Mixin in Ember-Komponenten verwendet. Eine Komponente ist immer noch zur einfachen Verwendung und zur Aufrechterhaltung der Kompatibilität nach hinten enthalten.

Mischen

Fügen Sie einfach das Mixin einer Komponente hinzu und die Schriftgröße der Komponenten wird automatisch eingestellt.

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

export default Component.extend(ResizeText, {

  minSize: 12,
  maxSize: 18

});

HINWEIS : containerElement Mixin this.element.clientWidth this.element.innerText .

Komponente

Wickeln Sie Ihren Text einfach in den Blockstil resize-text Komponenten.

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

Hinweis : Sie können die Komponente durch Überschreiben von Attributen wie tagName oder Standard -Hooks anpassen.

Beachten Sie bei der Größenänderung des Fensters

Dieses Addon registriert automatisch Event -Hörer in der Windows -Größe, um sicherzustellen, dass der Text nach der Größe des Fensters immer noch passt. Wenn Sie möchten, dass der Text die Schriftgröße erhöht, wenn das Fenster geändert wird, veröffentlichen Sie die add-On resize-text . Betrachten Sie beispielsweise dieses Markup:

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

und das folgende CSS:

 nav {
  width: 100%;
  display: flex
}

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

Die Größe der Schrift wird nicht erhöht, wenn das Element mit resize-text Klasse seine Breite in Abhängigkeit von der Breite des Elternteils nicht erhöhen kann. Dies ist nicht in das Addon eingebaut, da dies von dem Kontext abhängt, in dem das Addon verwendet wird.

Parameter

Parameter	Typ	Beschreibung
minsize	Nummer	minimale Schriftgröße in PX
Maxsize	Nummer	Maximale Schriftgröße in PX
Behälterelement	Element	Mit dem Parameter Contacelement -Parameter können ein optionales DOM -Element angegeben, das die `clientWidth` -Eigenschaft zur Bestimmung des verfügbaren Speicherplatzes verwendet wird. Dies ist besonders nützlich, wenn das DOM -Element, das geändert werden sollte, kein Blockelement ist. Zum Beispiel sollte der Text eines Links geändert werden, aber nicht die volle Breite einnehmen, es sei denn, es ist erforderlich.