Ng-list-antd NPM

ng-list-antd

A simplify list of antd.

Demo

Dependencies

ng-zorro-antd ^0.5.0

Usage & Installation

Install ng-list-antd from npm

npm install ng-list-antd --save

Import the NzListModule in to your root AppModule.

import { NzListModule } from 'ng-list-antd';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
    imports: [BrowserModule, NzListModule, NgZorroAntdModule.forRoot()],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Usage

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'demo-basic',
  template: `
    <nz-card>
        <ng-template #title>Basic list</ng-template>
        <ng-template #body>
            <nz-list [nzDataSource]="data" [nzItemLayout]="'horizontal'">
                <ng-template #nzTemplate let-item>
                    <nz-list-item>
                        <nz-list-item-meta
                            [nzTitle]="nzTitle"
                            nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                            nzDescription="Ant Design, a design language for background applications, is refined by Ant UED Team">
                            <ng-template #nzTitle>
                                <a href="https://ng.ant.design">{{item.title}}</a>
                            </ng-template>
                        </nz-list-item-meta>
                    </nz-list-item>
                </ng-template>
            </nz-list>
        </ng-template>
    </nz-card>
`
})
export class DemoBasicComponent {
  data = [
    {
      title: 'Ant Design Title 1'
    },
    {
      title: 'Ant Design Title 2'
    },
    {
      title: 'Ant Design Title 3'
    },
    {
      title: 'Ant Design Title 4'
    }
  ];
}

API

`nz-list`

Name	Type	Default	Summary
nzDataSource	`any[]`		Data record array to be displayed
nzBordered	`boolean`	`false`	Toggles rendering of the border around the list
nzGrid	`NzListGrid`		The grid type of list. You can set grid to something like `{ gutter: 16, span: 6 }`
nzItem	`TemplateRef<any>`		List item renderer
nzHeader	`string, TemplateRef<any>`		List header renderer
nzFooter	`string, TemplateRef<any>`		List footer renderer
nzSize	`default,small,large`	`default`	Size of list
nzItemLayout	`horizontal,vertical`	`horizontal`	The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical`
nzLoading	`boolean`		Shows a loading indicator while the contents of the list are being fetched
nzLoadMore	`TemplateRef<any>`		Shows a load more content
nzPagination	`TemplateRef<any>`		Shows a pagination content
nzSplit	`boolean`		Toggles rendering of the split under the list item

`NzListGrid`

Name	Type	Summary
span	`number`	raster number of cells to occupy, 0 corresponds to `display: none`
gutter	`number`	spacing between grids
xs	`number`	`<768px` and also default setting, could be a `span` value or an object containing above props
sm	`number`	`≥768px`, could be a `span` value or an object containing above props
md	`number`	`≥992px`, could be a `span` value or an object containing above props
lg	`number`	`≥1200px`, could be a `span` value or an object containing above props
xl	`number`	`≥1600px`, could be a `span` value or an object containing above props
xxl	`number`	only supported antd 3.x

`nz-list-item`

Name	Type	Default	Summary
nzContent	`string, TemplateRef<any>`		Content renderer
nzExtra	`string, TemplateRef<any>`		The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right.

`nz-list-item-action`

The actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far right.

`nz-list-item-meta`

Name	Type	Summary
nzAvatar	`string, TemplateRef<any>`	The avatar of list item
nzDescription	`string, TemplateRef<any>`	The description of list item
nzTitle	`string, TemplateRef<any>`	The title of list item

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

Use GitHub Issues board to report bugs and feature requests (not our email address)
Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)

ng-list-antd list antd antd

@infinitebrahmanuniverse/nolb-ng-l @everything-registry/sub-chunk-2274 @zalastax/nolb-ng-l

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago