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元素不是块元素时，这特别有用。例如，应调整链接的文本，但除非需要，否则不应占据全部宽度。