英文:
How to add text into PrimeNG speeddial option buttons?
问题
我想在我的快速拨号组件选项中打印文本而不是图标。
我想要这样。
提前感谢。
英文:
I want to print a text instead of icons in the options of my sppeddial component.
I want this.
Thanks in advance
答案1
得分: 2
要实现这一点，您可以按照以下步骤进行：
- 在组件的 TypeScript 文件 (
component.ts) 中定义您的模型列表：
this.items = [
{
icon: 'one',
command: () => {
this.messageService.add({
severity: 'info',
summary: 'Add',
detail: 'Data Added',
});
},
},
{
icon: 'two',
command: () => {
this.messageService.add({
severity: 'success',
summary: 'Update',
detail: 'Data Updated',
});
},
},
{
icon: 'pi pi-trash',
command: () => {
this.messageService.add({
severity: 'error',
summary: 'Delete',
detail: 'Data Deleted',
});
},
},
{
icon: 'pi pi-upload',
},
{
icon: 'pi pi-external-link',
url: 'http://angular.io',
},
];
随意更改图标属性的名称，因为它将在底层创建与图标名称对应的类的 span 元素。这个类将被用作选择器来指定您的项。
- 在组件的 HTML 文件 (
component.html) 中使用p-speedDial组件：
<p-speedDial [model]="items" direction="up"></p-speedDial>
- 在组件的 SCSS 文件 (
component.scss) 中，选择 spans 并更改其内容：
:host ::ng-deep .p-speeddial-action-icon.one::before {
content: '1' !important;
}
:host ::ng-deep .p-speeddial-action-icon.two::before {
content: '2' !important;
}
这些样式将把前两个按钮的图标内容分别更改为 '1' 和 '2'。
英文:
To achieve this, you can follow these steps:
- Define your model list in the component's TypeScript file (
component.ts):
this.items = [
{
icon: 'one',
command: () => {
this.messageService.add({
severity: 'info',
summary: 'Add',
detail: 'Data Added',
});
},
},
{
icon: 'two',
command: () => {
this.messageService.add({
severity: 'success',
summary: 'Update',
detail: 'Data Updated',
});
},
},
{
icon: 'pi pi-trash',
command: () => {
this.messageService.add({
severity: 'error',
summary: 'Delete',
detail: 'Data Deleted',
});
},
},
{
icon: 'pi pi-upload',
},
{
icon: 'pi pi-external-link',
url: 'http://angular.io',
},
];
Feel free to change the icon property to any name you desire, as it will create a span element with a class corresponding to the icon name under the hood. This class will be used as a selector to specify your item.
- Use the
p-speedDialcomponent in your component's HTML file (component.html):
<p-speedDial [model]="items" direction="up"></p-speedDial>
- In the component's SCSS file (
component.scss), select the spans and change their content:
:host ::ng-deep .p-speeddial-action-icon.one::before {
content: '1' !important;
}
:host ::ng-deep .p-speeddial-action-icon.two::before {
content: '2' !important;
}
These styles will change the icon content of the first two buttons to '1' and '2' respectively.
> it's a workaround but it works
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论