PrimeNG:将列表框和面板彼此对齐
PrimeNG: Align listbox and panel next to each other
我使用集成在我的 Angular 2 应用程序中的 PrimeNG Beta 17。
在我的模板中,我想在面板旁边放置一个列表框,而列表框应显示在面板的左侧。
<p-listbox [options]="modelTypes" [(ngModel)]="selectedModelType"
[style]="{'width':'150px','max-height':'150px'}"></p-listbox>
<p-panel header="Model description" [toggleable]="true" [collapsed]="true" >
Lorem ipsum dolor sit
</p-panel>
知道如何完成这个吗?
我知道 CSS 中的 "float" 技术,但是我想知道 PrimeNG 中是否有任何内置支持来简化布局。
要实现这一点,请尝试使用网格。
所以你只需要做这样的事情:
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-6 ui-g-nopad">
Content1
</div>
<div class="ui-g-6 ui-g-nopad">
Content2
</div>
</div>
我使用集成在我的 Angular 2 应用程序中的 PrimeNG Beta 17。 在我的模板中,我想在面板旁边放置一个列表框,而列表框应显示在面板的左侧。
<p-listbox [options]="modelTypes" [(ngModel)]="selectedModelType"
[style]="{'width':'150px','max-height':'150px'}"></p-listbox>
<p-panel header="Model description" [toggleable]="true" [collapsed]="true" >
Lorem ipsum dolor sit
</p-panel>
知道如何完成这个吗? 我知道 CSS 中的 "float" 技术,但是我想知道 PrimeNG 中是否有任何内置支持来简化布局。
要实现这一点,请尝试使用网格。 所以你只需要做这样的事情:
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-6 ui-g-nopad">
Content1
</div>
<div class="ui-g-6 ui-g-nopad">
Content2
</div>
</div>