• List列表
    • 规则
  • 代码演示
  • API
    • List
    • List.Item
    • List.Item.Brief

    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

    辅助说明