import {OrderList} from 'primeng/primeng';
OrderList requires an array as its value and a template for its content. Template should contain a wrapper li element having ui-orderlist-item style class. Each item in the array can be accessed inside the template using a local template variable.
<p-orderList [value]="cars">
<template #car>
<li class="ui-orderlist-item ui-helper-clearfix">
Content of an item
</li>
</template>
</p-orderList>
export class MyComponent {
cars: Car[];
ngOnInit() {
this.cars = //initialize cars
}
}
In responsive mode, orderlist adjusts its controls based on screen size. To activate this mode, set responsive as true.
<p-orderList [value]="cars" [responsive]="true">
Name | Type | Default | Description |
---|---|---|---|
value | array | null | An array of objects to reorder. |
header | string | null | Text for the caption |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
listStyle | string | null | Inline style of the list element. |
responsive | boolean | false | When enabled orderlist adjusts its controls based on screen size. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-orderlist | Container element. |
ui-orderlist-list | List container. |
ui-orderlist-item | An item in the list. |
Native component that only requires css of PrimeUI OrderList.
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-6">
<p-orderList [value]="cars" listStyle="height:250px" [responsive]="true" header="Responsive Cars">
<template #car>
<li class="ui-orderlist-item ui-helper-clearfix">
<img src="showcase/resources/demo/images/car/{{car.brand}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
</li>
</template>
</p-orderList>
</div>
<div class="ui-grid-col-6">
<ul>
<li *ngFor="#car of cars" style="list-style-type:none">{{car.brand}} - {{car.year}} - {{car.color}}</li>
</ul>
</div>
</div>
</div>
export class OrderListDemo {
cars: Car[];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
}