H5W3
当前位置:H5W3 > CSS3 > 正文

(Angular7 ng-Zorro UI框架)Tooltip文字提示的样式设置

(Angular7 ng-Zorro UI框架)Tooltip文字提示的样式设置

之前遇到这种问题 网上查找了很多相关信息 最后总结了一下 

我的代码 是将这个输入框和对应的文字提示 写成了一个组件

科普

首先 我们要观察提示气泡 UI组件的内部结构   nzMouseLeaveDelay=”20″ (延迟提示消失时间) 使用这个属性 可以观测到 

nzPlacement=”bottom” (提示文字框中间的箭头指向)

nzOverlayClassName=”” 添加自定义样式类

在我这里有个奇怪现象 不设置nzMouseLeaveDelay属性  nzPlacement属性就不生效 因为延迟消失时间默认是0.1秒 我这里给它设置成0.2秒

我用的pre标签保留文本格式  你们可以不用这个标签哈

酱 代码奉上

import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChange } from ‘@angular/core’;
import { NzToolTipModule } from ‘ng-zorro-antd/tooltip’;

@Component({
    selector:’nz-tootip-template’,
    template:`
    <textarea placeholder=”IP范围” nz-input [(ngModel)]=”inputValue” nzPlacement=”bottom” nzMouseLeaveDelay=”0.2″ nz-tooltip [nzTitle]=”titleTemte” nzOverlayClassName=”tooltip-pree” ></textarea>
      <ng-template #titleTemte>
<pre>
IP查询范围支持的方式如下:
 1.IPv4:
  单线IP节点,如192.168.1.1
  通配符查询,如192.168.1.*,192.168.*.1
  IP范围查询,如10.0.0.1-10或10.1.1-10.2
  IP网段查询,如192.168.1.1/18
  匹配混合模式,如192.168.1-10.*,192.168-169.*.*
 2.IPv6:
  范围查询,如abcd::eeee-abcd::ffff
  单节点查询,如abcd::eeee
多个IP之间用英文逗号/空格或者换行分离
</pre>
      </ng-template>
    `,
    styles:[
      `
     ::ng-deep .tooltip-pree {
        min-width:330px !important;
        div {
          min-width:330px !important;
          div {
            &:first-child {
              width:330px !important;
            }
            &:last-child {
              min-width:330px !important;
              pre {
                width:100%;
                font-size:12px;
                color:#efefef;
              }
            }
          }
        }
      }
     
      `
    ]
  })
  export class NzTootipTemplateComponent{
    @Output() tooltipmsg: any = new EventEmitter<any>();
    inputValue:any;
  
    ngOnInit(){
      this.tooltipmsg = this.inputValue
    }
  
  }

页面效果图 奉上 酱

(Angular7 ng-Zorro UI框架)Tooltip文字提示的样式设置

style 里改变了对应的提示框宽度

tooltip-pree 是自定义属性 

改变提示文字的重点 在于覆盖掉原UI组件的对应的样式  也就是style

然后参照对应的文字提示层级目录 设置想要的宽度 这样就大功告成啦

希望这篇文章可以帮到需要的宝宝们^_^

未经允许不得转载:H5W3 » (Angular7 ng-Zorro UI框架)Tooltip文字提示的样式设置

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址