List列表

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

规则

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

代码演示

基本用法

import { Component } from '@angular/core';
@Component({
  selector: 'demo-list-basic',
  template: `
    <List [className]="'my-list'" [renderHeader]="renderHeader">
      <ListItem [extra]="'extra content'">Title</ListItem>
    </List>
    <List [className]="'my-list'" [renderHeader]="renderHeader1">
      <ListItem multipleLine [arrow]="'horizontal'" (onClick)="onClick()">
        Title
        <Brief>subtitle</Brief>
      </ListItem>
      <ListItem multipleLine [arrow]="'horizontal'" [platform]="'android'" (onClick)="onClick()">
        ListItem （Android）
        <Brief>
          There may have water ripple effect of
          <br />
          material if you set the onClick event.
        </Brief>
      </ListItem>
      <ListItem
        [arrow]="'horizontal'"
        [thumb]="'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png'"
        multipleLine
        (onClick)="onClick()"
      >
        Title
        <Brief>subtitle</Brief>
      </ListItem>
    </List>
    <List [className]="'my-list'" [renderHeader]="renderHeader2">
      <ListItem>Title</ListItem>
      <ListItem [arrow]="'horizontal'" (onClick)="onClick()">Title</ListItem>
      <ListItem [extra]="'extra content'" [arrow]="'horizontal'" (onClick)="onClick()">Title</ListItem>
      <ListItem
        [extra]="'10:30'"
        [align]="'top'"
        [thumb]="'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png'"
        multipleLine
      >
        Title
        <Brief>subtitle</Brief>
      </ListItem>
    </List>
    <List [className]="'my-list'" [renderHeader]="renderHeader3">
      <ListItem multipleLine [extra]="'extra content'">
        Title
        <Brief>subtitle</Brief>
      </ListItem>
    </List>
    <List [renderHeader]="renderHeader4">
      <ListItem
        [thumb]="'https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png'"
        [arrow]="'horizontal'"
        (onClick)="onClick()"
      >
        My wallet
      </ListItem>
      <ListItem
        [thumb]="'https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png'"
        (onClick)="onClick()"
        [arrow]="'horizontal'"
      >
        My Cost Ratio
      </ListItem>
    </List>
    <List [className]="'my-list'" [renderHeader]="renderHeader5">
      <ListItem data-seed="logId">Single line，long text will be hidden with ellipsis；</ListItem>
      <ListItem wrap>
        Multiple line，long text will wrap；Long Text Long Text Long Text Long Text Long Text Long Text
      </ListItem>
      <ListItem [extra]="'extra content'" multipleLine [align]="'top'" wrap>
        Multiple line and long text will wrap. Long Text Long Text Long Text
      </ListItem>
      <ListItem [extra]="'no arrow'" [arrow]="'empty'" [className]="'spe'" wrap>
        In rare cases, the text of right side will wrap in the single line with long text. long text long text long text
      </ListItem>
    </List>
    <List [className]="'my-list'" [renderHeader]="renderHeader6">
      <ListItem [disabled]="disabled" [extra]="" (click)="onDisableClick()">Click to disable</ListItem>
      <ListItem>
        <select>
          <option [value]="'1'">Html select element</option>
          <option [value]="'2'" disabled>Unable to select</option>
          <option [value]="'3'">option 3</option>
        </select>
      </ListItem>
    </List>
  `,
  styles: [
    `
      /deep/ .my-list .spe .am-list-extra {
        flex-basis: initial;
      }
    `
  ]
})
export class DemoListBasicComponent {
  disabled: boolean = false;
  renderFooter: Function;
  constructor() {}
  renderHeader() {
    return 'Basic Style';
  }
  renderHeader1() {
    return 'Subtitle';
  }
  renderHeader2() {
    return 'Customized Right Side（Empty Content / Text / Image）';
  }
  renderHeader3() {
    return 'Align Vertical Center';
  }
  renderHeader4() {
    return 'Icon in the left';
  }
  renderHeader5() {
    return 'Text Wrapping';
  }
  renderHeader6() {
    return 'Other';
  }
  onClick() {
    console.log('click');
  }
  switchCheck(value) {
    console.log('switch status:', value);
  }
  onDisableClick() {
    console.log('click', this.disabled);
    this.disabled = true;
  }
}

可输入列表

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
  selector: 'demo-list-form',
  template: `
    <form [formGroup]="registerForm">
      <List [renderHeader]="renderHeader" [renderFooter]="renderFooter">
        <InputItem
          [placeholder]="'please input account'"
          [error]="isError"
          [focus]="onFocus"
          [value]="formData.username"
          [clear]="true"
          [content]="'Account'"
          formControlName="username"
          id="username"
          (onErrorClick)="inputErrorClick($event)"
          (onChange)="inputChange($event)"
        >
        </InputItem>
        <InputItem
          id="password"
          formControlName="password"
          [placeholder]="'please input password'"
          [type]="'password'"
          [(ngModel)]="formData.password"
          [value]="formData.password"
          [content]="'Password'"
        >
        </InputItem>
        <ListItem [extra]="_switch">Confirm Infomation</ListItem>
        <ListItem>
          <Range
            style="padding: 7px"
            [defaultValue]="[20, 80]"
            [min]="0"
            [max]="100"
            (onAfterChange)="afterChange($event)"
          ></Range>
        </ListItem>
        <ListItem [extra]="_stepper">Number of Subscribers</ListItem>
        <ListItem>
          <a Button [type]="'primary'" [size]="'small'" [inline]="true" (onClick)="onSubmit()">
            Submit
          </a>
          <a Button style="margin-left: 2.5px;" [size]="'small'" [inline]="true" (onClick)="onReset()">
            Reset
          </a>
        </ListItem>
      </List>
    </form>
    <ng-template #_switch>
      <Switch class="oneui-mobile" [checked]="true" (onChange)="switchCheck($event)"></Switch>
    </ng-template>
    <ng-template #_stepper>
      <Stepper [value]="stepper_value" [min]="1" [showNumber]="true" (onChange)="setpperChange($event)"></Stepper>
    </ng-template>
  `,
  styles: [
    `
      /deep/ .my-list .spe .am-list-extra {
        flex-basis: initial;
      }
    `
  ]
})
export class DemoListFormComponent implements OnInit {
  renderFooter: Function;
  registerForm: FormGroup;
  stepper_value: number = 20;
  isError: boolean = false;
  onFocus: object = {
    focus: false
  };
  formErrors: any = {
    username: '',
    password: ''
  };
  formData: any = {
    username: '',
    password: ''
  };
  validationMessage: any = {
    username: {
      minlength: 'At least four characters for account',
      maxlength: 'At most ten characters for account',
      required: 'username requied'
    },
    password: {}
  };
  constructor() {}
  renderHeader() {
    return 'Form Validation';
  }
  bindRenderFooter() {
    return (this.formErrors && this.formErrors['username']) || '';
  }
  onClick() {
    console.log('click');
  }
  buildForm(): void {
    this.registerForm = new FormGroup({
      username: new FormControl(this.formData.username, [
        Validators.required,
        Validators.maxLength(10),
        Validators.minLength(5)
      ]),
      password: new FormControl(this.formData.password, [])
    });
    this.registerForm.valueChanges.subscribe(data => this.onValueChanged(data));
    this.onValueChanged();
  }
  onValueChanged(data?: any) {
    if (!this.registerForm) {
      return;
    }
    const form = this.registerForm;
    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessage[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + '\n';
        }
      }
    }
  }
  beforeSubmit() {
    const form = this.registerForm;
    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && !control.valid) {
        const messages = this.validationMessage[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + '\n';
          if (field === 'username') {
            this.onFocus = {
              focus: true
            };
          }
        }
        return false;
      } else {
        return true;
      }
    }
  }
  switchCheck(value) {
    console.log('switch status:', value);
  }
  onSubmit() {
    if (this.beforeSubmit()) {
      console.log(this.registerForm.value);
      this.onReset();
    } else {
      alert('Validation failed');
    }
  }
  onReset() {
    this.registerForm.reset();
    this.formData = {
      ...{
        username: '',
        password: ''
      }
    };
    this.isError = false;
  }
  afterChange(event) {
    console.log(event, 'afterChange');
  }
  inputErrorClick(e) {
    alert('At least four charactors for account');
  }
  inputChange(e) {
    if (e.replace(/\s/g, '').length < 5 && e.replace(/\s/g, '').length > 0) {
      this.isError = true;
    } else {
      this.isError = false;
    }
    this.formData.username = e;
  }
  setpperChange($event) {
    console.log($event, 'change');
  }
  ngOnInit() {
    this.buildForm();
    this.renderFooter = this.bindRenderFooter.bind(this);
  }
}

API

List

ListItem

Brief

辅助说明.