是否可以在 Angular Material Tooltip 中有一个列表? [英] 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 的兼容材料.

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 Tooltip 中有一个列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！