ember resize text

Ember-Resize-Text

Ember-Text-Measurerを使用して、単一のテキストのフォントを効率的にサイズ化してフィットするEmber Addon。

インストール

ember install ember-resize-text

デモ

デモページをご覧ください

使用法

バージョン1.1.0 Ember-Resize-Textは、Emberコンポーネント内で使用するミックスインとして提供されるためです。コンポーネントは、簡単に使用し、後方互換性を維持するためにまだ含まれています。

ミックスイン

ミックスをコンポーネントに追加するだけで、コンポーネントフォントサイズが自動的に調整されます。

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

export default Component.extend(ResizeText, {

  minSize: 12,
  maxSize: 18

});

注：Mixinは、 this.element.innerTextを使用しcontainerElementテキストthis.element.clientWidth表示するようにします。

成分

resize-textコンポーネントブロックスタイル内にテキストをラップするだけです。

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

注： tagNameや標準フックなどの属性をオーバーライドすることにより、コンポーネントをカスタマイズできます。

ウィンドウのサイズを変更することに注意してください

このアドオンは、Windowsのサイズ変更イベントでイベントリスナーを自動的に登録して、ウィンドウがサイズ変更された後もテキストがまだ適合することを確認します。ウィンドウがサイズ変更されるたびにテキストをフォントサイズを増やしたい場合は、アドオンのresize-text CSSクラスに適切なスタイリングを追加してください。たとえば、このマークアップを考慮してください。

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

と次のCSS：

 nav {
  width: 100%;
  display: flex
}

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

resize-textクラスの要素が親の幅に依存してその幅を増加させることができない場合、フォントのサイズは増加しません。これは、アドオンが使用されるコンテキストに依存するため、アドオンには組み込まれていません。

パラメーター

パラメーター	タイプ	説明
ミンサイズ	番号	PXの最小フォントサイズ
マックスサイズ	番号	PXの最大フォントサイズ
containerelement	要素	ContainerElementパラメーターを使用すると、利用可能なスペースを決定するためにclientWidthプロパティを使用するオプションのDOM要素を指定できます。これは、サイズ変更されるべきDOM要素がブロック要素ではない場合に特に役立ちます。たとえば、リンクのテキストはサイズを変更する必要がありますが、必要でない限り全幅を占めるべきではありません。

貢献する

貢献

詳細については、寄稿ガイドを参照してください。

ライセンス