# Text Базовый примитив представления текстовых данных. ## Пример использования Конфигурация темы на уровне проекта: ```tsx // src/lib/theme.ts import { configureRootTheme } from '@yandex-lego/components/Theme'; import { theme } from '@yandex-lego/components/Theme/presets/default'; configureRootTheme({ theme }) ``` ## Примеры ### Text • стандартный текст без ограничений по количеству строк Может быть в одну или несколько строк, **maxLines** (количество строк) задается при наличии модификатора **overflow** (обрезание). {{%story::desktop:content-text-desktop--base%}} ### Text • maxLines={1}, модификатор overflow="ellipsis" **ellipsis** хорошо работает с текстовым контентом: попадая на границы пробелов, он остается видимым и легко считывается пользователями. Такой тип обрезания текста не подходит сервисам, поддерживающим IE11, лучше выбрать **overflow="fade"**. {{%story::desktop:content-text-desktop--ellipsis%}} ### Text • maxLines={1}, модификатор overflow="fade" **fade** хорошо работает с текстовым контентом, когда важно сохранить как можно больше информации на экране (только последняя строка в тексте будет обрезана). Оптимальный размер **fade={2em}**, не уменьшайте это значение, при попадании на пробел пользователи могут не понять, что часть контента обрезана. {{%story::desktop:content-text-desktop--fade%}} ### Text • maxLines={1}, модификатора overflow="fadeHorizontal" **fadeHorizontal** хорошо работает с текстовым контентом, когда попадает в блоки, подразумевающие «расхлоп». Оптимальный размер **fadeHorizontal={1em}**, не используйте большие значения, такое обрезание текста не будет видно пользователям. {{%story::desktop:content-text-desktop--fade-horizontal%}} ### Text • align= "start" Выравнивание реализовано модификаторами `start`, `end`, `center`, `justify`. Это нужно для того, чтобы поддержать настройки отображения текста для разных систем письменности (LTR — слева направо, RTL — справа налево). Подробнее можно прочитать в статье RTL Styling 101 — [подробное руководство по RTL-стилизации в CSS](https://medium.com/@hisbvdis/rtl-styling-101-подробное-руководство-по-rtl-стилизации-в-css-d8ef7d884cb6). {{%story::desktop:content-text-desktop--align%}} ### Text • Цвета, доступные обычному тексту {{%story::desktop:content-text-desktop--color%}} ### Text • Цвета, доступные текстам в контролах {{%story::desktop:content-text-desktop--control-color%}} ### Text • Цвета, доступные текстам в ссылках {{%story::desktop:content-text-desktop--link-color%}} ## Свойства | Свойство | Тип | Описание | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | as? | `"symbol" \| "object" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noindex" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" \| "webview" \| "svg" \| "animate" \| "animateMotion" \| "animateTransform" \| "circle" \| "clipPath" \| "defs" \| "desc" \| "ellipse" \| "feBlend" \| "feColorMatrix" \| "feComponentTransfer" \| "feComposite" \| "feConvolveMatrix" \| "feDiffuseLighting" \| "feDisplacementMap" \| "feDistantLight" \| "feDropShadow" \| "feFlood" \| "feFuncA" \| "feFuncB" \| "feFuncG" \| "feFuncR" \| "feGaussianBlur" \| "feImage" \| "feMerge" \| "feMergeNode" \| "feMorphology" \| "feOffset" \| "fePointLight" \| "feSpecularLighting" \| "feSpotLight" \| "feTile" \| "feTurbulence" \| "filter" \| "foreignObject" \| "g" \| "image" \| "line" \| "linearGradient" \| "marker" \| "mask" \| "metadata" \| "mpath" \| "path" \| "pattern" \| "polygon" \| "polyline" \| "radialGradient" \| "rect" \| "stop" \| "switch" \| "text" \| "textPath" \| "tspan" \| "use" \| "view" \| ComponentClass \| FunctionComponent` | Тип элемента для отображения как строка или компонент | | children? | `string \| number \| false \| true \| {} \| ReactElement ReactElement Component)>) \| (new (props: any) => Component)> \| ReactNodeArray \| ReactPortal` | Основной контент | | className? | `string` | Дополнительный класс | | align? | `"start" \| "end" \| "center" \| "justify"` | Задает выравнивание текста в компоненте | | overflow? | `"fade" \| "ellipsis" \| "fade-horizontal"` | Задает отображение переполненного текста | | maxLines? | `number` | Максимальное количество строк текста (работает в связке с overflow) | | style? | `CSSProperties` | Дополнительные стили | | color? | `"link" \| "brand" \| "inverse" \| "primary" \| "promo" \| "secondary" \| "ghost" \| "control-primary" \| "alert" \| "warning" \| "disable" \| "success" \| "control-secondary" \| "control-passive" \| "control-ghost" \| "control-faint" \| "control-disable" \| "control-link" \| "control-error" \| "link-external" \| "link-minor" \| "link-hover"` | Цвет текста | | typography? | `"display-xl" \| "display-l" \| "display-m" \| "display-s" \| "headline-xl" \| "headline-l" \| "headline-s" \| "headline-xs" \| "headline-m" \| "subheader-xl" \| "subheader-l" \| "subheader-m" \| "subheader-s" \| "body-short-xl" \| "body-short-l" \| "body-short-m" \| "body-short-s" \| "body-long-xl" \| "body-long-l" \| "body-long-m" \| "body-long-s" \| "caption-xl" \| "caption-l" \| "caption-m" \| "overline-l" \| "overline-m" \| "overline-s" \| "control-xxs" \| "control-xs" \| "control-s" \| "control-l" \| "control-xl" \| "control-m" \| "control-xxl"` | Задает типографику текста в компоненте | ## Модификаторы ### weight Задает насыщенность текста в компоненте. **Допустимые значения:** `"bold"`, `"light"`, `"medium"`, `"regular"`.