Добавление и оформление текста и списков во Flow Builder

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

Настройка текстовых стилей

Панель Styles содержит готовые текстовые стили: H1, H2, H3, Button Label, Body, Caption и Small Label. Нажмите на любой стиль, чтобы изменить гарнитуру, начертание, размер, выравнивание, оформление и другие параметры.

При добавлении текстового элемента вы можете выбрать один из настроенных здесь стилей.

Изменения стиля применяются ко всем текстовым элементам, которые его используют, на всех экранах.

Чтобы создать новый стиль:

  1. Нажмите Palette, чтобы открыть панель Styles.
  2. На вкладке Text нажмите Create style.
Новый стиль текста
  1. Введите название и настройте типографику:
  • Font family: выберите шрифт. Подробнее о работе с пользовательскими шрифтами — в гайде.
  • Weight и size: задайте насыщенность и размер шрифта.
  • Color: задайте цвет текста.
  • Line height: задайте межстрочный интервал или оставьте Auto.
  • Alignment: задайте горизонтальное (по левому краю, по центру, по правому краю) и вертикальное (сверху, по центру, снизу) выравнивание.
  • Decoration: примените подчёркивание или зачёркивание.
  • Truncate: ограничивает количество отображаемых строк. Текст, выходящий за это ограничение, обрезается. Удобно, когда длина содержимого варьируется из-за динамических переменных или локализации.
  1. Нажмите Create.

SF Pro недоступен для кросс-платформенного использования. Рекомендуем Inter как близкую альтернативу.

Параметры настройки стиля текста

Добавить текст

Чтобы добавить текстовый элемент:

  1. Нажмите + в верхнем левом углу. Выберите Text. Выберите один из стилей текста, настроенных заранее или вами.
New text
  1. Нажмите на новый элемент и отредактируйте его содержимое в разделе Content на панели Design справа.
  2. При необходимости настройте типографику на панели Design. Или выделите текст в превью, чтобы открыть всплывающую подсказку для быстрой настройки стиля.
  3. Опционально, на панелях Design и Interaction можно применить любые другие настройки, доступные для компонентов флоу. Подробнее см. в разделе Стилизация элементов.

Если вам нужно использовать один и тот же текстовый элемент на нескольких экранах, скопируйте и вставьте его: выделите элемент, нажмите Ctrl+C (или ⌘+C на Mac), перейдите на другой экран и нажмите Ctrl+V (или ⌘+V на Mac) для вставки.

Настройки текстового элемента

Изменение стиля для отдельных частей текста

Чтобы изменить стиль только для части текстового элемента:

  1. Выделите нужный фрагмент текстового элемента в разделе Content.
  2. В появившемся тултипе измените цвет текста, примените жирное начертание, подчёркивание, курсив или зачёркивание, либо добавьте URL.

Предпросмотр обновляется мгновенно.

Редактирование части текста

Флоу поддерживают два способа сделать текст кликабельным. Выбор зависит от роли текста:

  • Встроенная ссылка — для URL внутри обычного текста, например ссылка «Подробнее» в параграфе. Всегда открывается во встроенном браузере.
  • Действие Open URL — для отдельных нажимаемых элементов, например кнопки «Условия использования». Может открываться как во встроенном, так и во внешнем браузере.

Чтобы превратить часть текстового элемента в ссылку:

  1. Выделите текст в разделе Content.
  2. В подсказке форматирования нажмите на иконку ссылки.
  3. Вставьте нужный URL в появившееся поле.
Подсказка форматирования с выделенной кнопкой ссылки

Действие «Открыть URL»

Основная статья: Действия

Чтобы превратить кнопку целиком в ссылку:

  1. Добавьте Button — или используйте пресет Links: готовая строка с кнопками Restore / Terms of Service / Privacy Policy.

    The Links preset on canvas with Terms of use, Restore, and Privacy policy buttons

  2. Выберите кнопку на панели Layers и откройте вкладку Interactions на правой панели.

  3. Укажите адрес для действия Open URL.

    Пустое действие Open URL блокирует предпросмотр и публикацию.

    Настройка действия Open URL в панели Interactions

Добавление условного текста

Условный текст меняет содержимое текстового элемента в зависимости от условия. Например, заголовок может показывать одно сообщение, когда пользователь выбирает годовой план, и другое — для ежемесячного плана. Условный текст работает так же, как условная видимость, но вместо того чтобы скрывать или показывать элемент, он подменяет его содержимое.

Чтобы настроить условный текст:

  1. Выберите текстовый элемент на холсте.
  2. На панели Design, в разделе Content, выберите Conditional.
Контент с параметром Conditional в панели Design
  1. Настройте условие if. Выберите свойство на вкладке Custom, Products или Elements, задайте оператор и укажите значение для сравнения. Подробнее о типах свойств см. в разделе Условная видимость.
  2. В поле then введите текст, который будет отображаться при выполнении условия. Форматирование rich text работает так же, как для обычного текста. Чтобы вставить переменную, нажмите { } Add variable.
  3. В поле else введите запасной текст, который будет отображаться, если ни одно из условий не выполнено.
  4. (Опционально) Нажмите + Add else/if, чтобы добавить дополнительные условия, каждое со своим текстом.

Чтобы изменить условный текст для другого языка, переключите активную локаль в нижней части редактора. Сначала добавьте языки в панели Localizations — см. Добавление локали во Flow Builder.

Настройка условного текста с ветками if, then и else

Добавление списков

Элементы списка — это контейнеры, состоящие из отдельных компонентов-пунктов. Для простых маркированных или нумерованных списков внутри текста используйте текстовый элемент и задайте нужное форматирование на панели Design.

  1. Нажмите + в верхнем левом углу. Выберите List и один из шаблонов списка.

  2. Откройте панель Design справа, чтобы редактировать пункты списка или загрузить изображение в качестве маркера.

Add list element