List列表

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。eg：联系人列表。

规则

  • 一般由主要信息、主要操作、次要信息、次要操作组成。
  • 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。

代码演示

基本用法 

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-list-basic',
  5.   template: `
  6.     <List [className]="'my-list'" [renderHeader]=(renderHeader)>
  7.       <ListItem [extra]="'extra content'">Title</ListItem>
  8.     </List>
  9.     <List [className]="'my-list'" [renderHeader]=(renderHeader1)>
  10.       <ListItem multipleLine [arrow]="'horizontal'" (onClick)="onClick()">
  11.         Title
  12.         <Brief>subtitle</Brief>
  13.       </ListItem>
  14.       <ListItem multipleLine
  15.                 [arrow]="'horizontal'"
  16.                 [platform]="'android'"
  17.                 (onClick)="onClick()"
  18.       >
  19.         ListItem （Android）
  20.         <Brief>There may have water ripple effect of <br/> material if you set the onClick event.</Brief>
  21.       </ListItem>
  22.       <ListItem [arrow]="'horizontal'"
  23.                 [thumb]="'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png'"
  24.                 multipleLine
  25.                 (onClick)="onClick()"
  26.       >Title
  27.         <Brief>subtitle</Brief>
  28.       </ListItem>
  29.     </List>
  30.     <List [className]="'my-list'" [renderHeader]=(renderHeader2)>
  31.       <ListItem>Title</ListItem>
  32.       <ListItem [arrow]="'horizontal'" (onClick)="onClick()">Title</ListItem>
  33.       <ListItem [extra]="'extra content'" [arrow]="'horizontal'" (onClick)="onClick()">Title</ListItem>
  34.       <ListItem [extra]="'10:30'" [align]="'top'" [thumb]="'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png'" multipleLine>
  35.         Title
  36.         <Brief>subtitle</Brief>
  37.       </ListItem>
  38.     </List>
  39.     <List [className]="'my-list'" [renderHeader]=(renderHeader3)>
  40.       <ListItem multipleLine [extra]="'extra content'">
  41.         Title
  42.         <Brief>subtitle</Brief>
  43.       </ListItem>
  44.     </List>
  45.     <List [renderHeader]=(renderHeader4)>
  46.       <ListItem [thumb]="'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png'"
  47.                 [arrow]="'horizontal'"
  48.                 (onClick)="onClick()"
  49.       >My wallet
  50.       </ListItem>
  51.       <ListItem [thumb]="'https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png'"
  52.                 (onClick)="onClick()"
  53.                 [arrow]="'horizontal'"
  54.       >
  55.         My Cost Ratio
  56.       </ListItem>
  57.     </List>
  58.     <List [className]="'my-list'" [renderHeader]=(renderHeader5)>
  59.       <ListItem data-seed="logId">Single line，long text will be hidden with ellipsis；</ListItem>
  60.       <ListItem wrap>Multiple line，long text will wrap；Long Text Long Text Long Text Long Text Long Text Long Text</ListItem>
  61.       <ListItem [extra]="'extra content'" multipleLine [align]="'top'" wrap>
  62.         Multiple line and long text will wrap. Long Text Long Text Long Text
  63.       </ListItem>
  64.       <ListItem [extra]="'no arrow'" [arrow]="'empty'" [className]="'spe'" wrap>
  65.         In rare cases, the text of right side will wrap in the single line with long text. long text long text long text
  66.       </ListItem>
  67.     </List>
  68.     <List [className]="'my-list'" [renderHeader]=(renderHeader6)>
  69.       <ListItem [disabled]="disabled" [extra]="" (click)="onDisableClick()">Click to disable</ListItem>
  70.       <ListItem>
  71.         <select>
  72.           <option [value]="'1'">Html select element</option>
  73.           <option [value]="'2'" disabled>Unable to select</option>
  74.           <option [value]="'3'">option 3</option>
  75.         </select>
  76.       </ListItem>
  77.     </List>
  78.   `,
  79.   styles: [
  80.     `
  81.       /deep/ .my-list .spe .am-list-extra {
  82.         flex-basis: initial;
  83.       }
  84.     `
  85.   ]
  86. })
  87. export class DemoListBasicComponent {
  88.   disabled: boolean = false;
  89.   renderFooter: Function;
  91.   constructor() {}
  93.   renderHeader() {
  94.     return 'Basic Style';
  95.   }
  97.   renderHeader1() {
  98.     return 'Subtitle';
  99.   }
  101.   renderHeader2() {
  102.     return 'Customized Right Side（Empty Content / Text / Image）';
  103.   }
  105.   renderHeader3() {
  106.     return 'Align Vertical Center';
  107.   }
  109.   renderHeader4() {
  110.     return 'Icon in the left';
  111.   }
  113.   renderHeader5() {
  114.     return 'Text Wrapping';
  115.   }
  117.   renderHeader6() {
  118.     return 'Other';
  119.   }
  121.   onClick() {
  122.     console.log('click');
  123.   }
  125.   switchCheck(value) {
  126.     console.log('switch status:', value);
  127.   }
  129.   onDisableClick() {
  130.     console.log('click', this.disabled);
  131.     this.disabled = true;
  132.   }
  133. }

可输入列表 

  1. import { Component, OnInit } from '@angular/core';
  2. import { FormGroup, Validators, FormControl } from '@angular/forms';
  4. @Component({
  5.   selector: 'demo-list-form',
  6.   template: `
  7.     <form [formGroup]="registerForm">
  8.       <List [renderHeader]=(renderHeader) [renderFooter]=(renderFooter)>
  9.         <InputItem [placeholder]="'please input account'"
  10.                    [error]="isError"
  11.                    [focus]="onFocus"
  12.                    [value]="formData.username"
  13.                    [clear]="true" formControlName="username" id="username"
  14.                    (onErrorClick)="inputErrorClick($event)"
  15.                    (onChange)="inputChange($event)"
  16.         >
  17.           Account
  18.         </InputItem>
  19.         <InputItem id="password"
  20.                    formControlName="password"
  21.                    [placeholder]="'please input password'"
  22.                    [type]="'password'"
  23.                    [(ngModel)]="formData.password"
  24.                    [value]="formData.password"
  25.         >
  26.           Password
  27.         </InputItem>
  28.         <ListItem [extra]="_switch">Confirm Infomation</ListItem>
  29.         <ListItem>
  30.           <Range style="padding: 7px"
  31.                  [defaultValue]=[20,80]
  32.                  [min]=0
  33.                  [max]=100
  34.                  (onAfterChange)="afterChange($event)"
  35.           ></Range>
  36.         </ListItem>
  37.         <ListItem [extra]="_stepper">Number of Subscribers</ListItem>
  38.         <ListItem>
  39.           <a Button [type]="'primary'"
  40.                     [size]="'small'"
  41.                     [inline]="true"
  42.                     (onClick)="onSubmit()"
  43.           >
  44.             Submit
  45.           </a>
  46.           <a Button
  47.              style="margin-left: 2.5px;"
  48.              [size]="'small'"
  49.              [inline]="true"
  50.              (onClick)="onReset()"
  51.           >
  52.             Reset
  53.           </a>
  54.         </ListItem>
  55.       </List>
  56.     </form>
  57.     <ng-template #_switch>
  58.       <Switch class='oneui-mobile' [checked] = "true" (onChange)='switchCheck($event)'></Switch>
  59.     </ng-template>
  60.     <ng-template #_stepper>
  61.       <Stepper [value]="stepper_value"
  62.                [min]="1"
  63.                [showNumber]="true"
  64.                (onChange)="setpperChange($event)"
  65.       ></Stepper>
  66.     </ng-template>
  67.   `,
  68.   styles: [
  69.     `
  70.       /deep/ .my-list .spe .am-list-extra {
  71.         flex-basis: initial;
  72.       }
  73.     `
  74.   ]
  75. })
  76. export class DemoListFormComponent implements OnInit {
  77.   renderFooter: Function;
  78.   registerForm: FormGroup;
  79.   stepper_value: number = 20;
  80.   isError: boolean = false;
  82.   onFocus: object = {
  83.     focus: false
  84.   };
  86.   formErrors: any = {
  87.     username: '',
  88.     password: ''
  89.   };
  91.   formData: any = {
  92.     username: '',
  93.     password: ''
  94.   };
  96.   validationMessage: any = {
  97.     username: {
  98.       minlength: 'At least four characters for account',
  99.       maxlength: 'At most ten characters for account',
  100.       required: 'username requied'
  101.     },
  102.     password: {}
  103.   };
  105.   constructor() {}
  107.   renderHeader() {
  108.     return 'Form Validation';
  109.   }
  111.   bindRenderFooter() {
  112.     return (this.formErrors && this.formErrors['username']) || '';
  113.   }
  115.   onClick() {
  116.     console.log('click');
  117.   }
  119.   buildForm(): void {
  120.     this.registerForm = new FormGroup({
  121.       username: new FormControl(this.formData.username, [
  122.         Validators.required,
  123.         Validators.maxLength(10),
  124.         Validators.minLength(5)
  125.       ]),
  126.       password: new FormControl(this.formData.password, [])
  127.     });
  129.     this.registerForm.valueChanges.subscribe(data => this.onValueChanged(data));
  131.     this.onValueChanged();
  132.   }
  134.   onValueChanged(data?: any) {
  135.     if (!this.registerForm) {
  136.       return;
  137.     }
  138.     const form = this.registerForm;
  140.     for (const field in this.formErrors) {
  141.       this.formErrors[field] = '';
  142.       const control = form.get(field);
  143.       if (control && control.dirty && !control.valid) {
  144.         const messages = this.validationMessage[field];
  145.         for (const key in control.errors) {
  146.           this.formErrors[field] += messages[key] + '\n';
  147.         }
  148.       }
  149.     }
  150.   }
  152.   beforeSubmit() {
  153.     const form = this.registerForm;
  154.     for (const field in this.formErrors) {
  155.       this.formErrors[field] = '';
  156.       const control = form.get(field);
  158.       if (control && !control.valid) {
  159.         const messages = this.validationMessage[field];
  160.         for (const key in control.errors) {
  161.           this.formErrors[field] += messages[key] + '\n';
  162.           if (field === 'username') {
  163.             this.onFocus = {
  164.               focus: true
  165.             };
  166.           }
  167.         }
  168.         return false;
  169.       } else {
  170.         return true;
  171.       }
  172.     }
  173.   }
  175.   switchCheck(value) {
  176.     console.log('switch status:', value);
  177.   }
  179.   onSubmit() {
  180.     if (this.beforeSubmit()) {
  181.       console.log(this.registerForm.value);
  182.       this.onReset();
  183.     } else {
  184.       alert('Validation failed');
  185.     }
  186.   }
  188.   onReset() {
  189.     this.registerForm.reset();
  190.     this.formData = {
  191.       ...{
  192.         username: '',
  193.         password: ''
  194.       }
  195.     };
  196.     this.isError = false;
  197.   }
  199.   afterChange(event) {
  200.     console.log(event, 'afterChange');
  201.   }
  203.   inputErrorClick(e) {
  204.     alert('At least four charactors for account');
  205.   }
  207.   inputChange(e) {
  208.     if (e.replace(/\s/g, '').length < 5 && e.replace(/\s/g, '').length > 0) {
  209.       this.isError = true;
  210.     } else {
  211.       this.isError = false;
  212.     }
  213.     this.formData.username = e;
  214.   }
  216.   setpperChange($event) {
  217.     console.log($event, 'change');
  218.   }
  220.   ngOnInit() {
  221.     this.buildForm();
  222.     this.renderFooter = this.bindRenderFooter.bind(this);
  223.   }
  224. }

List 列表 - 图1

API

List

属性说明类型默认值
renderHeaderlist hederString/TemplateRef/Function无
renderFooterlist footerString/TemplateRef/Function无

List.Item

属性说明类型默认值
thumb缩略图(当为 string 类型时作为 img src)String/TemplateRef无
extra右边内容String/TemplateRef无
arrow箭头方向(右,上,下), 可选horizontal,up,down,empty，如果是empty则存在对应的dom,但是不显示String无
align子元素垂直对齐，可选top,middle,bottomStringmiddle
onClick点击事件的回调函数(): void无
error报错样式,右侧文字颜色变成橙色Booleanfalse
multipleLine多行Booleanfalse
wrap是否换行，默认情况下，文字超长会被隐藏，Booleanfalse
platform设定组件的平台特有样式, 可选值为 android, ios， 默认为 cross， 即组件会自动检测设备 UA 应用不同平台的样式String'cross'

List.Item.Brief

辅助说明