ember resize text下載 - ember resize text源代碼下載

下載

Ember-Resize-Text

利用Ember-Text-Measorer的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來顯示要顯示的文本，並且this.element.clientWidth （除非containerElement指定了不同的元素）以確定可用寬度。

只需將文本包裹在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中的最大字體尺寸
容器	元素	容器元參數允許指定可選的DOM元素，該`clientWidth`將用於確定可用空間。當應該調整大小的DOM元素不是塊元素時，這特別有用。例如，應調整鏈接的文本，但除非需要，否則不應佔據全部寬度。