Главная страница>Связанные с программированием>Сторонние компоненты
Скачать

❧ реагировать типсетинг ☙

Реактируйте компоненты для создания красивых дизайнов набора.

Демо!

️ Этот проект очень экспериментальный. Используйте свой собственный риск!

Оглавление

  • Компоненты
    • TightEntext
      • Реквизит
    • Предотвратить
      • Реквизит
    • Оправдывать
      • Реквизит
    • Fontobserver
      • Реквизит
    • Fontobserver.provider
      • Реквизит
    • TypeTting.provider
      • Реквизит

Компоненты

TightEntext 

 import { TightenText } from 'react-typesetting' ;

Зажигает word-spacing , letter-spacing и font-size (в таком порядке) на минимальную сумму, необходимую для обеспечения минимального количества оберщенных линий и переполнения.

Алгоритм начинается с установления минимума всех значений (определяется репутациями с minWordSpacing , minLetterSpacing и репутациями minFontSize ), чтобы определить, приведет ли их корректировка к меньшему количеству оберщенных линий или меньше переполнений. Если это так, то проводится бинарный поиск (с максимальными maxIterations ), чтобы найти наилучшее соответствие.

По умолчанию элемент изменения, которые могут потребовать переработки текста, автоматически обнаруживаются. Указав опору reflowKey , вы можете вместо этого взять ручное управление, изменив опору, когда вы хотите обновить компонент.

Обратите внимание, что в отличие от типичного оправданного текста, корректировки соответствия должны применяться ко всем линиям текста, а не только на линии, которые необходимо затянуть, потому что нет способа нацелиться на отдельные оберщенные линии. Таким образом, этот компонент лучше всего используется экономно для типографически важных коротких прогонов текста, таких как названия или метки.

Реквизит

Имя Тип По умолчанию Описание
классное имя Нить

Класс, чтобы применить к внешнему промежуточному span , созданному этим компонентом.

стиль Объект

Дополнительные свойства стиля, чтобы добавить к внешнему промежуточному span , созданному этим компонентом.

дети Узел

Содержание для рендеринга.

Minword Spacing Число -0.02

Минимальное расстояние между словами в EMS. Установите это на 0, если интервал между словами не следует отрегулировать.

Минлетерсбайк Число -0.02

Минимальное расстояние между буквами в EMS. Установите это на 0, если интервал между словами не следует отрегулировать.

minfontsize Число 0,97

Минимальный font-size в EMS. Установите это на 1, если размер шрифта не должен быть отрегулирован.

макситерации Число 5

При выполнении бинарного поиска для поиска оптимального значения каждого свойства CSS это устанавливает максимальное количество итераций для работы, прежде чем установить значение.

сбоя Один из…
Число
Нить

Если указано, отключите автоматическое рефлектор, чтобы вы могли запустить его вручную, изменяя это значение. Сама опора ничего не делает, но изменение ее заставит реагировать на обновление компонента.

Sufflowtimeout Число

Дебаун перерабатывает, чтобы они происходили не более того, часто в миллисекундах (в конце данной продолжительности). Если не указано, рефтова вычисляется каждый раз, когда компонент отображается.

неполноценный Логический

Следует ли полностью отключить переоборудование текста. Любые корректировки соответствия, которые уже были применены в предыдущем рендеринге, будут сохранены.

Onreflow Функция

Функция для вызова, когда макет был перечислен, и текст выполняется переоборудовано.

предустановка Нить

Название предустановленного определения во внешнем Typesetting.Provider Компонент. Если он существует, значения по умолчанию для всех других реквизитов будут исходить из указанной предустановки.

Предотвратить 

 import { PreventWidows } from 'react-typesetting' ;

Предотвращает вдов, измеряя ширину последней строки текста, отображаемой детьми компонента. Пространства будут преобразованы в не разрушающие пространства до тех пор, пока не будет достигнуто заданная минимальная ширина или максимальное количество замен.

По умолчанию элементы изменяются, которые могут потребовать, чтобы ширина линии пересекания автоматически обнаруживается. Указав опору reflowKey , вы можете вместо этого взять ручное управление, изменив опору, когда вы хотите обновить компонент.

Реквизит

Имя Тип По умолчанию Описание
классное имя Нить

Класс, чтобы применить к внешнему промежуточному span , созданному этим компонентом.

стиль Объект

Дополнительные свойства стиля, чтобы добавить к внешнему промежуточному span , созданному этим компонентом.

дети Узел

Содержание для рендеринга.

maxsubstitutions Число 3

Максимальное количество пробелов для замены.

Minlinewidth Один из…
Число
Нить
Функция		 15%

Минимальная ширина последней строки, ниже которой будут вставлены неразрывные места до тех пор, пока минимум не будет выполнен.

  • Числа указывают на абсолютную ширину пикселей.
  • Строки указывают значение width CSS, которое будет рассчитано путем временного введения элемента в контейнер и определения его ширины.
  • Функции будут вызваны соответствующими данными для определения динамического числа или строкового значения для возврата. Это может быть использовано, например, для того, чтобы иметь разные правила в разных точках останова - как медиа -запрос.
nbspchar Один из…
Нить
Реагировать элемент
Функция		 u00A0

Символ или элемент для использования при замене пространства. По умолчанию стандартный неразрывной космический персонаж, с которым вы почти наверняка должны придерживаться, если вы не хотите визуализировать, где вставлены неразрывные пространства в целях отладки, или отрегулировать их ширину.

  • Значения строки будут вставлены непосредственно в существующий текстовый узел, содержащий пространство.
  • Значения элементов реагирования будут отображаться в узел «инкубатора» в памяти, а затем пересажены в DOM, разделяя текстовый узел, в котором было найдено пространство.
  • Значения функций должны создавать строку, текстовый узел, узл элемента или элемент реагирования для вставки.
сбоя Один из…
Число
Нить

Если указано, отключите автоматическое рефлектор, чтобы вы могли запустить его вручную, изменяя это значение. Сама опора ничего не делает, но изменение ее заставит реагировать на обновление компонента.

Sufflowtimeout Число

Дебаун перерабатывает, чтобы они происходили не более того, часто в миллисекундах (в конце данной продолжительности). Если не указано, рефтова вычисляется каждый раз, когда компонент отображается.

неполноценный Логический

Чтобы полностью отключить профилактику вдовы.

Onreflow Функция

Функция для вызова, когда макет был перечислен и замена пространства выполняется.

предустановка Нить

Название предустановленного определения во внешнем Typesetting.Provider Компонент. Если он существует, значения по умолчанию для всех других реквизитов будут исходить из указанной предустановки.

Оправдывать 

 import { Justify } from 'react-typesetting' ;

Несмотря на то, что это может включать более продвинутые функции оправдания в будущем, в настоящее время он очень прост: условно применяет text-align: justify его элемент контейнера (по <p> ) в зависимости от того, достаточно ли места, чтобы избежать больших, нерешенных разрывов слов. Минимальная ширина определяется minWidth и по умолчанию до 16 EMS.

Вы также можете выполнить это с помощью медиа -запросов, но этот компонент может определить точную ширину, доступную для элемента контейнера, а не только на всю страницу.

Реквизит

Имя Тип По умолчанию Описание
классное имя Нить

Класс для применения к элементу внешней обертки, созданного этим компонентом.

стиль Объект

Дополнительные свойства стиля, чтобы добавить к внешнему элементу обертки, созданному этим компонентом.

дети Узел

Содержание для рендеринга.

как Один из…
Нить
Функция
Объект		 п

Тип элемента, в котором можно представить поставленных детей. Это должен быть элемент уровня блока, например, p или div , поскольку text-align не влияет на встроенные элементы. Это также может быть пользовательский компонент React, если он использует forwardRef .

MinWeidth Один из…
Число
Нить		 16

Минимальная ширина, при которой можно разрешить оправданный текст. Числа указывают на абсолютную ширину пикселей. Строки будут применены к CSS элемента, чтобы выполнить расчет ширины.

Первоначальный Логический истинный

Независимо от того, изначально ли установить text-align: justify до определения доступной ширины.

сбоя Один из…
Число
Нить

Если указано, отключите автоматическое рефлектор, чтобы вы могли запустить его вручную, изменяя это значение. Сама опора ничего не делает, но изменение ее заставит реагировать на обновление компонента.

Sufflowtimeout Число

Дебаун перерабатывает, чтобы они происходили не более того, часто в миллисекундах (в конце данной продолжительности). Если не указано, рефтова вычисляется каждый раз, когда компонент отображается.

неполноценный Логический

Чтобы полностью отключить обнаружение оправдания. Последнее выравнивание, которое было применено, будет сохранено.

Onreflow Функция

Функция для вызова, когда макет был перечислен, и оправдание было применено или не применено.

предустановка Нить

Название предустановленного определения во внешнем Typesetting.Provider Компонент. Если он существует, значения по умолчанию для всех других реквизитов будут исходить из указанной предустановки.

Fontobserver 

 import { FontObserver } from 'react-typesetting' ;

Компонент для наблюдения за шрифтами, указанными в компоненте FontObserver.Provider .

Реквизит

Имя Тип По умолчанию Описание
дети Функция

Функция, которая будет получать текущее состояние наблюдаемых шрифтов. Аргумент будет объектом с этими свойствами:

  • fonts : массив шрифтов, переданных в FontObserver.Provider , каждый со свойством loaded и error .
  • loaded ли все наблюдаемые шрифты выполняются погрузкой.
  • error : если какие -либо шрифты не загрузились, это будет заполнено первой ошибкой.

Fontobserver.provider 

 import { FontObserver } from 'react-typesetting' ;

Поставщик контекста для указания, какие шрифты наблюдать.

Реквизит

Имя Тип По умолчанию Описание
шрифты Массив…
Один из…
Нить
Объект 1

Шрифты для загрузки и наблюдения. Сами файлы шрифтов уже должны быть указаны где -то (в CSS), этот компонент просто использует FontFaceObserver , чтобы заставить их загружать (при необходимости) и наблюдать, когда они готовы.

Каждый предмет в массиве указывает family шрифтов, weight , style и stretch , причем требуется только family . Кроме того, каждый элемент может содержать пользовательское testString и timeout для этого шрифта, если он должен отличаться от по умолчанию. Если нужна только фамилия, элемент массива может быть просто строкой.

1 объект
семья Нить
масса Один из…
Число
Нить
стиль Нить
потягиваться Нить
Тестовая стринг Нить
тайм -аут Число
Тестовая стринг Нить

Пользовательская тестовая строка для перемещения метода load FontFaceObserver , которая будет использоваться для всех шрифтов, которые не указывают их собственное testString .

тайм -аут Число

Пользовательский тайм -аут в миллисекундах для перехода к методу load FontFaceObserver , который будет использоваться для всех шрифтов, которые не указывают их собственный timeout .

дети Узел

Контент, который будет иметь доступ к статусу загрузки шрифтов через контекст.

TypeTting.provider 

 import { Typesetting } from 'react-typesetting' ;

Поставщик контекста для определения пресетов для всех других компонентов react-typesetting для использования.

Реквизит

Имя Тип По умолчанию Описание
предустановка Объект {}

Сопоставление объекта предустановленные имена по умолчанию. Например, учитывая значение: 

 { myPreset : { minFontSize : 1 , maxIterations : 3 } }

… Компонент TightenText может использовать эту предустановку, указав preset опору: 

 < TightenText preset = "myPreset" />
дети Узел

Контент, который будет иметь доступ к определенным пресетам через контекст.
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все