如何使用 primeNG for Angular 8 逐步添加图像？

Question

我试过了

import {StepsModule} from 'primeng/steps';
import {MenuItem} from 'primeng/api';

<p-steps [model]="items"></p-steps>

export class MenuDemo {

    items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label: 'Step 1',icon : pi pi-fw postajob-icon},
            {label: 'Step 2'},
            {label: 'Step 3'}
        ];
    }
}

但是没用我想要步骤号下面的图片。

Answer 1

查看文档，目前无法在步骤组件中包含图像/图标。

但是，您可以用不同的方式实现它（有点 hacky 的方式！！）

第 1 步：确保您的资产文件夹中有正确的图像文件.svg or .png。如果愿意，您也可以直接从 CDN 或在线加载。

第 2 步： 在您的 component.scss 或 .css 文件中

注意： :host::ng-deep 用于覆盖样式。

:host::ng-deep {
    .ui-steps.ui-steps-readonly .ui-steps-item {
        background-image: url('./../../../assets/android.svg'); //my img file 
        background-repeat: no-repeat;
        background-size: 30px, 30px, contain;
        background-position: center 80px;
    }
    .ui-steps .ui-steps-item .ui-menuitem-link {
        padding-bottom: 55px; //to display properly. Adjust it if needed 
    }
    body .ui-steps:before {
        top: 31%;  // to display the line properly 
    }
}

输出：

PS：您可以调整css 属性以显示您喜欢的图像。

另外，为了您的方便，我在 stackblitz 中创建了功能示例

https://stackblitz.com/edit/angular-dbcxxv

希望这对您有所帮助。

如何使用 primeNG for Angular 8 逐步添加图像？

How to add images in steps using primeNG for Angular8?

primeng