gpt4 book ai didi

css - 如何设置 mat-option 文本的样式以在悬停在每个 mat-option 文本上时在 mat-select 面板外获取文本

转载 作者:太空宇宙 更新时间:2023-11-04 00:34:45 27 4
gpt4 key购买 nike

我想在每个 mat-option 文本上设置悬停样式,我希望文本显示在 mat-option 之外。为了实现这一点,我应用了非常高的 z-index 值,但没有任何改变。我尝试将 z-index 添加到更高的值,但这没有成功。

我受到以下启发 stackblitz link

这是当前的行为

enter image description here

这是我需要的 enter image description here

这是代码片段

template.html

<mat-form-field [style.cursor]="pointer"  [style.width.px]=450 >
<input id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">

<mat-autocomplete style="left:775px;" #auto="matAutocomplete" [displayWith] = "displayFn" >
<mat-option (onSelectionChange)="onCustomerChange(customer)" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'">
<span>{{customerName}}</span>
<span id="para2">{{customerName}}</span>
</mat-option>
</mat-autocomplete>

template.ts

  customer:Array<any>;
filteredOptions: Observable<any[]>;
customerFilterControl = new FormControl();
customer =[
{
AccountID :1,
AccountName:"account1"
},
{
AccountID:2,
AccountName:"account2"
},
{
AccountID:3,
AccountName:"Earliest_Creation_Date_Ent_Tests_id7 (Earliest_Creation_Date_Ent_Tests_id7accountName)"
}

displayFn(subject) {
return subject ? subject : undefined;
}


onCustomerChange(customer) {
this.filteredOptions = this.customerFilterControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}


_filter(value:any):any[] {

const filterValue = value;
return this.customers.filter(function (option) {
if(option.AccountID.includes(filterValue) | option.AccountName.includes(filterValue)) {
return option;
}
});
}

模板.scss

#para2 {
display:none;
}
.mat-option:hover {
background-color: white !important;
z-index:500000 !important;
width:440px !important;
word-break: break-all !important;
}


.mat-option-text {
padding-left: 60px !important;
overflow: auto !important;
text-overflow: unset !important;
}


.mat-option {

&:hover {
white-space: unset!important;
overflow: unset !important;
background-color: #FFFFFF;


#para2
{

z-index:500000 !important;
width:400px !important;
word-break: break-all !important;
display: block;
position: relative !important;
overflow: visible !important;
text-align: left;
top:0px;
right:50px !important;
background-color: #232F34;
color:#FFFFFF;
border: 5px !important;
font-size:11px;


}
}
}

最佳答案

当悬停在每个选项上方时,您是否考虑过为每个垫选项使用 matTooltip?

添加一个

matTooltip="{{state.name}} | Population: {{state.population}}"

在 mat-option 上, Angular Material 完成剩下的工作。

检查工作示例 here

关于css - 如何设置 mat-option 文本的样式以在悬停在每个 mat-option 文本上时在 mat-select 面板外获取文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59718260/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com