Скачать ember resize text - ember resize text исходный код скачать

ember resize text

Загрузка шрифта

1.0.0

Скачать

Ember-Resize-Text

Ember Addon, который использует Ember-Text-Seasurer для эффективного изменения размера шрифта одной линии текста, чтобы сделать его подходящим.

Установка

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 или Standard Hooks.

Обратите внимание на изменение размера окна

Этот аддон автоматически регистрирует слушателей событий на событии Windows Resize, чтобы убедиться, что текст по -прежнему подходит после изменения окна. Если вы хотите, чтобы текст увеличивал размер шрифта всякий раз, когда окно будет изменен, обязательно добавьте соответствующий стиль в класс CSS с resize-text . Например, рассмотрим эту разметку:

 <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 не сможет увеличить свою ширину в зависимости от ширины родителя. Это не встроено в аддон, так как это зависит от контекста, в котором используется аддон.

Параметры

Парам	тип	описание
MinSize	число	Минимальный размер шрифта в PX
MAXSIZE	число	максимальный размер шрифта в PX
Контейнерирование	элемент	Параметр CantieRelement позволяет указать необязательный элемент DOM, который будет использоваться свойство `clientWidth` для определения доступного пространства. Это особенно полезно, когда элемент DOM, который следует изменять размер, не является блок -элементом. Например, текст ссылки должен быть изменен, но не должен занимать полную ширину, если это необходимо.