Применяйте стиль в первой строке только во всплывающей подсказке к материалу - PullRequest
Новая
       27

Применяйте стиль в первой строке только во всплывающей подсказке к материалу

0 голосов
/ 06 февраля 2019

Я использую всплывающую подсказку в своем проекте.Я хочу вставить в топик больше 1 предложение и добавить жирный шрифт только к первой строке.

Мой HTML-код: 

 <div fxFlex="100" *ngFor="let data of slider_data" fxLayoutAlign="center" [matTooltip]="slider_data.onHover" matTooltipClass="tooltip">
     <div class="animation-container" fxLayoutGap="10px" fxLayoutAlign="center center">
        <div class="slider-font">{{data.value.toFixed(1)}}%</div>
    </div>
 </div>

Мой код TS: 

slider_data: Array<object> = [
    {
      name: "sold items",
      rate: "32,560",
      value: 0.8,
      onHover: "this is first sentence\n this is the second sentence\n this is the third sentence\n",
    },
    {...}
]

как я могу это сделать?

1 Ответ

0 голосов
/ 06 февраля 2019

Во-первых, в вашем html-шаблоне, я думаю, вы имели в виду [matTooltip]="data.onHover" вместо [matTooltip]="slider_data.onHover"

Что касается настройки всплывающей подсказки, после Angular Material пример и добавления некоторого дополнительного CSS,Вы можете достичь этого с помощью:

Изменение инкапсуляции вида на none: 

import { ViewEncapsulation } from '@angular/core';
@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

Изменить способ обработки пробелов внутри подсказки: 

.tooltip {
  white-space: pre;
}

Делайте все, что вам нужнонужно в первой строке с помощью селектора css ::first-line: 

.tooltip::first-line {
  font-weight: bold;
}
...