Angular Material工具提示中是否可能有一个列表? [英] Is it possible to have a list inside of an Angular Material Tooltip?

问题描述

基本上，我想在工具提示中添加一个ul元素.

Basically I would like to have a ul element inside of my Tooltip.

我正在使用Angular 5，以及与Angular 5兼容的Material.

I'm using Angular 5, and the compatible Material for Angular 5.

推荐答案

Pavel Agarkov的评论朝着正确的方向发展.为了使事情变得容易，创建一个自定义管道以自动将文本转换为项目符号列表项.管道负责添加将由CSS类格式化的项目符号和换行符:

The comment by Pavel Agarkov is in the right direction. To make things easy, create a custom pipe to automate converting your text into bulleted list items. The pipe is responsible for adding the bullets and the line feeds which will be formatted by the CSS class:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'tooltipList' })

export class TooltipListPipe implements PipeTransform {

  transform(lines: string[]): string {

    let list: string = '';

    lines.forEach(line => {
      list += '• ' + line + '\n'; 
    });

    return list;
  }
}

按照Pavel的建议定义CSS-并记住将其添加到全局样式表中:

Define the CSS as Pavel suggested - and remember to add this to your global style sheet:

.tooltip-list {
  white-space: pre;
}

然后使用自定义管道将代表您的列表项的字符串数组传递给MatToolip，然后将该类应用于工具提示:

And pass an array of strings representing your list items to the MatToolip using the custom pipe, and apply the class to the tooltip:

<span
    [matTooltip]="['Wash car','Get a haircut','Buy milk'] | tooltipList" 
    matTooltipClass="tooltip-list">
  TODO List (hover)
</span>

这里是在StackBlitz上: https://stackblitz.com/edit/angular-o9sfai?file = styles.css

Here it is on StackBlitz: https://stackblitz.com/edit/angular-o9sfai?file=styles.css

这篇关于Angular Material工具提示中是否可能有一个列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！