![](/img/trans.png)
[英]How to replace next button with mat-chip in Angular Material stepper?
[英]Using angular2/4 material, How to use mat-chip with text next to chips on each row?
使用angular2 / 4,我想使用mat-chip( https://material.angular.io/components/chips/overview )並在單個芯片旁邊添加文本,並占用每個“入口”的整個寬度( div中的一行)。 其他條目應像正在運行的聊天一樣顯示在彼此下方。 現在我有:
我當前的代碼如下,但是看起來並沒有達到預期的結果...
<div class="rectanglebox" style="width:300px;height:500px;">
<div style="float:left">
<mat-chip-list>
<mat-chip>A</mat-chip>
</mat-chip-list>
</div>
<div style="float:left">Text for A that is really long and may overflow. If it does, the chip should remain to the left side and not move all the text to a new dedicated line.</div>
</div>
</div>
<div style="float:left">
<mat-chip-list>
<mat-chip>B</mat-chip>
</mat-chip-list>
</div>
<div style="float:left">Text for B</div>
</div>
<div style="float:left">
<mat-chip-list>
<mat-chip>C</mat-chip>
</mat-chip-list>
</div>
<div style="float:left">Text for C</div>
</div>
用示例顯示,如果顯示的太長而不是環繞在文本上方,那么所有文本將如何“顯示在”芯片下方: https ://stackblitz.com/edit/angular-ijhhz3-fn56yj?file=app/chips-overview -example.html
您可以為要顯示的div使用style="display: inline-block"
,我已經修改了HTML(可以在此處檢查),以固定div,您需要使用css的postion屬性。 我曾經使用過的position: absolute
可以了解更多信息,您可以在這里查看
<div class="rectanglebox" style="width:300px;height:500px;">
<div style="display: inline-block;position: absolute;">
<mat-chip-list>
<mat-chip>A</mat-chip>
</mat-chip-list>
</div>
<div style="display: inline-block;margin-left: 45px;">Text for A where something is super long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd Text for A where something is super long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd Text for C long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd margin-left: 45px;</div>
<div>
<div style="display: inline-block;position: absolute;">
<mat-chip-list aria-orientation="vertical">
<mat-chip>B</mat-chip>
</mat-chip-list>
</div>
<div style="display: inline-block;margin-left: 45px;">Text for B Text for A where something is super long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd margin-left: 45px;</div>
</div>
<div style="display: inline-block;position: absolute;">
<mat-chip-list>
<mat-chip>C</mat-chip>
</mat-chip-list>
</div>
<div style="display: inline-block;margin-left: 45px;" >Text for C long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd margin-left: 45px;</div>
</div>
在這里看看
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.