繁体   English   中英

如何在angular primeng中设置p-listbox的宽度?

[英]how to set width for p-listbox in angular primeng?

我正在尝试将 p-listbox 组件宽度设置为 10 REM,但是我的更改无法做到。 请在这里提出建议。 我正在尝试在 css 类上应用宽度。 但是,它不适用。 但是,当我在 chrome 开发工具中使用类 .ui-listbox-list-wrapper 在 div 上应用时,它应用得很好。

仪表板.component.ts

import { Component, OnInit } from '@angular/core';  
import { SocialLoginModule, AuthServiceConfig, AuthService } from 'angular-6-social-login';  
import { Router } from '@angular/router';  
import { SocialUsers } from '../../model/social-users';
class City {
  name:string;
  code:string;
}


@Component({  
  selector: 'app-dashboard',  
  templateUrl: './dashboard.component.html',  
  styleUrls: ['./dashboard.component.css']  
})  


export class DashboardComponent implements OnInit {  
  socialusers = new SocialUsers();  

  cities1: City[];
  selectedCity1:string;



  constructor(public OAuth: AuthService,    private router: Router) { 

    this.cities1 = [
      {name: 'New York', code: 'NY'},
      {name: 'Rome', code: 'RM'},
      {name: 'London', code: 'LDN'},
      {name: 'Istanbul', code: 'IST'},
      {name: 'Paris', code: 'PRS'}
  ];
  }  
  ngOnInit() {  
    this.socialusers = JSON.parse(localStorage.getItem('socialusers'));  
    console.log(this.socialusers);  
  }  
  logout() {  
    this.OAuth.signOut().then(data => {  
      debugger;  
      this.router.navigate(['login']);  
    });  
  }  
}

仪表板.component.html

<p-listbox id="listId" [options] ="cities1" [(ngModel)] ="selectedCity1" optionLabel = "name">

</p-listbox>

selected city={{selectedCity1?.name}}

仪表板.组件.css

.ui-listbox-list-wrapper {
    width: 20REM;
}

在此处输入图片说明

您不能直接从另一个组件更改组件的样式。 你需要使用 ::ng-deep

仪表板.组件.css

:host ::ng-deep p-listbox .ui-listbox-list{
    width: 20rem;
}

另一种选择:primeng 提供了一种通过提供自定义类来更改任何组件样式的方法 🎉

<p-listbox styleClass="listbox-20rem" [options]="cities1" [(ngModel)] ="selectedCity1" optionLabel="name">
</p-listbox>

在全局样式文件中

样式文件

.listbox-20rem .ui-listbox-list {
  width: 20rem;
}

检查这个👉演示🚀🚀

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM