ng-devui icon indicating copy to clipboard operation
ng-devui copied to clipboard

d-accordion 组件内嵌 d-badge 时 d-badge 样式异常

Open 95sunny opened this issue 3 years ago • 1 comments

angular: 13.1.0 ng-devui: 13.3.0

<d-accordion [itemTemplate]="itemTemplate"></d-accordion>
<ng-template #itemTemplate let-item="item">
    {{ item.title }}
    <d-badge [count]="100" [maxCount]="99" status="success"></d-badge>
</ng-template>

d-accordion 组件的 itemTemplate 模板中嵌套使用 d-badge 的时候,d-badge 内文字的样式会被意外的赋予一个 text-indent: 20px; 属性,导致 d-badge 徽标组件的样式异常

image

该属性是从外层元素继承进来的

image image image

95sunny avatar Jul 28 '22 09:07 95sunny

badge的display为inline-block,继承到了accordion上层级的text-indent,可以给badge增加样式 text-indent: initial防止继承

Simplelegant avatar Jul 29 '22 02:07 Simplelegant