角材料将图像放在 <mat-select> 的选定值上. [英] Angular material put image on selected value of <mat-select>
本文介绍了角材料将图像放在 <mat-select> 的选定值上.的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在 angular 2 项目中使用了 angular 材料.我想在 mat-select 的选定值中放置一个静态图像(html 元素).但我没有找到解决办法.
有人可以帮我吗?
I am using angular material in an angular 2 project.
I want to put a static image (html element) in the selected value of mat-select.
But i didn't find a solution.
Can someone help me?
推荐答案
只需在
中添加 标签即可.对于选定的选项,使用
ngClass
将图像设置为背景.您必须按选项使用一个类:
By simply adding <img>
tag inside <mat-option>
. For the selected option use ngClass
to set the image as background. You must use one class by option:
HTML
<mat-select [(value)]="selected" [ngClass]="selected">
<mat-option>None</mat-option>
<mat-option value="option1">Option 1
<img with="10" height="10" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">
</mat-option>
<mat-option value="option2">Option 2
<img with="10" height="10" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg">
</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
CSS:
.option1{
background: url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg") center / contain no-repeat;
white-space: nowrap
}
.option2{
background: url("https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg") center / contain no-repeat;
white-space: nowrap;
display:inline
}
这篇关于角材料将图像放在 <mat-select> 的选定值上.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文