Text

Компонент, предоставляющий типографику по гайду.

Использование

Небезопасные стили

При необходимости (например, чтобы переключить выравнивание) вы можете передать правила стилевой разметки в хост компонента через атрибут styles. Внимание!!! Это небезопасно!

Классическая обрезка с многоточием

Если вы хотите обрезать с многоточием текст который распологается в одной строке - используйте number-проп width чтобы указать максимальную ширину такого элемента. Будет добавлен набор правил для "классического многоточия" (оно работает более точно, но только для одной строки), если вы передали width="100":

.text--width {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

Современная обрезка с многоточием

Если текст должен должен занимать всю предоставленную ширину, но "обрезаться с многоточием", "если он занимает больше некоторого количества строк, начиная от двух" - используйте number-проп overflow. Внимание, проп width в таком случае будет проигнорирован!

Если вы, напрмиер, передали overflow="3", будет добавлен следующий набор правил:

.text--overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Слишком длинные слова

Если при включите логический атрибут long, это добавит в стили элемента следующий набор правил CSS:

.text--long {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

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

HTML, Angular, Vue

<ds-text
  styles="text-align: center;"
  token="primo"
  color="troy"
  value="Vue JS - самый прогрессивный, удобный и эффективный фреймворк для фронтенда!"
></ds-text>

React

import { Text } from '@rir/ds-library';

function Component() {
  return (
    <>
      <Text
        token="primo"
        color="troy"
        value="Vue JS - самый прогрессивный, удобный и эффективный фреймворк для фронтенда!"
      ></Text>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
token	enum Fonts	Токен типографики	'mascarpone'
color	enum Colors	Токен палитры	'harakiri'
value	String	Текст	''
width	Number	Максимальная ширина текстового контента, при ее превышении - он будет "обрезан с многоточием" по ней	0
overflow	Number	Максимальное количество строк, при превышении - контент будет "обрезан с многоточием" по этому значению, проп width при этом будет проигнорирован	0
long	Boolean	Позволяет включить "защиту от слишком длинных слов в небольших текстовых блоках", слова не помещающиеся в имеющую ширину будут разрываться и переносится	''
styles	String	"Небезопастная" строка для передачи правил CSS в компонент	''

Примеры проектов

React

Angular

Vue