英文:
Angular Material 15: How can I apply the panelClass property to `<mat-select>` using ngx-formly?
问题
我想要为Angular Material的<mat-select>
下拉面板设置特定宽度。我们在项目中使用formly来生成表单。
这是一个选择字段示例配置的样子:
form: new FormGroup({}),
options: {} as FormlyFormOptions,
fields: [
{
key: 'actionSelect',
type: 'select',
props: {
attributes: {
panelClass: 'example-panel-class',
},
translate: true,
required: true,
options: [
{ value: 'exampleValue-1', label: 'exampleLabel-1' },
{ value: 'exampleValue-2', label: 'exampleLabel-2' },
{ value: 'exampleValue-3', label: 'exampleLabel-3' },
],
},
},
]
我尝试通过上述的attributes
属性来添加Angular Material的panelClass
,但它并没有产生预期的效果,即未将CSS类example-panel-class
添加到下拉面板。
英文:
I'd like to style the dropdown panel of Angular Material <mat-select>
with a specific width.
We're using formly to generate forms in the project.
This is how an example configuration of a select field looks like:
form: new FormGroup({}),
options: {} as FormlyFormOptions,
fields: [
{
key: 'actionSelect',
type: 'select',
props: {
attributes: {
panelClass: 'example-panel-class',
},
translate: true,
required: true,
options: [
{ value: 'exampleValue-1', label: 'exampleLabel-1' },
{ value: 'exampleValue-2', label: 'exampleLabel-2' },
{ value: 'exampleValue-3', label: 'exampleLabel-3' },
],
},
},
]
I tried to add Angular Material panelClass
via the attributes
property, as seen above but it does not lead to the expected behaviour of adding the css class example-panel-class
to the dropdown panel.
答案1
得分: 1
你可以直接在 FormlyFieldConfig 中像下面这样添加 panelClass 属性 -
{
key: 'select',
type: 'select',
props: {
label: 'Select',
placeholder: 'Select placeholder',
required: true,
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
],
panelClass: 'test-class',
},
}
英文:
May be I am late to the party, but for those who are still looking for answers -
You can add panelClass prop directly in the FormlyFieldConfig like given below -
{
key: 'select',
type: 'select',
props: {
label: 'Select',
placeholder: 'Select placeholder',
required: true,
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
],
panelClass: 'test-class',
},
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论