Изменить шрифт кнопок предлагаемых действий в элементе управления чатом - PullRequest
Новая
       15

Изменить шрифт кнопок предлагаемых действий в элементе управления чатом

0 голосов
/ 07 июля 2019

Я пытаюсь изменить шрифт кнопки «предлагаемые действия» аналогично тому, как это показано в этом примере для изменения шрифта пузырькового текста: https://github.com/Microsoft/BotFramework-WebChat/blob/master/SAMPLES.md

В этом примере они изменяют fontFamily элемента "textContent".

Я пытался передать что-то вроде этого: 

styleSet.suggestedAction= {
   ...styleSet.suggestedAction,
   "> button.fontFamily": "'Xy font', sans-serif"
};

Но я не герой CSS, поэтому любая помощь приветствуется

1 Ответ

0 голосов
/ 08 июля 2019

Вам доступны два варианта.То, что вы выберете, зависит от того, насколько гранулярным вы хотите быть в ваших изменениях.

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

. Это рекомендуемый метод команды BotFramework-WebChat, поскольку он значительно снижает вероятность прорыва изменений для разработчиков.Также поддерживаются другие значения по умолчанию, означающие, что изменяются только измененные вами свойства.

Обратите внимание, что этот параметр изменит шрифт глобально для веб-чата. 

const styleOptions = {
  primaryFont: "'Arial', sans-serif"
}

[...]

window.WebChat.renderWebChat( {
  directLine: [...],
  styleOptions
});

enter image description here

Второй вариант - создать новый набор стилей и указать там необходимые изменения.Однако, поскольку вы непосредственно указываете элемент и свойство DOM, хотя и через веб-чат, если какой-либо аспект веб-чата получает обновление, которое изменяет используемый элемент или свойство, это может привести к серьезным изменениям для вас.Кроме того, вам нужно будет передать все значения свойств, необходимые, поскольку это удаляет все значения по умолчанию из веб-чата.

Вы по-прежнему можете передавать значения, используя свойства styleSet по умолчанию, включая primaryFont.Но для истинных настроек вы бы добавили их через styleSet.suggestedAction.Вы можете найти значения по умолчанию здесь в репозитории BotFramework-WebChat, если вам нужно сослаться на них. 

const styleSet = createStyleSet ( {
  bubbleBackground: 'blue',
  bubbleFromUserBackground: 'red',

  bubbleBorderRadius: 18,
  bubbleFromUserBorderRadius: 18,
} );

styleSet.suggestedAction = {
  ...styleSet.suggestAction,
  '& > button': {
    fontFamily: "'Arial', sans-serif"
}

window.WebChat.renderWebChat( {
  directLine: [...],
  styleSet
});

enter image description here

Надеюсь на помощь!

...