Icon

概述[图标]

<Icon /> 是图标组件，其提供了部分 Flutter 中支持的图标。

示例代码

import cooApp, { basicWidgets } from 'coolink'

const { Container, Icon } = basicWidgets

export default class Loading extends cooApp.Widget {
  render () {
    return {
      <Container>
      	<Icon type="loading" />
      </Container>
    }
  }
}

组件属性

属性名	类型	说明
type	string	图标类型
color	number	图标大小
size	Function	图标颜色

---

样例 1

export default class HomePage extends Widget<any, any> {
  icons: any[] = [
    'loading',
    'apps',
    'arrow_back',
    'arrow_back_ios',
    'arrow_downward',
    'arrow_drop_down',
    'arrow_drop_up',
    'arrow_forward',
    'arrow_forward_ios',
    'arrow_left',
    'arrow_right',
    'arrow_upward',
    'check',
    'check_circle',
    'check_circle_outline',
    'add',
    'add_circle',
    'add_circle_outline',
    'close',
    'cancel',
    'create',
    'chevron_left',
    'chevron_right',
    'aexpand_lesspps',
    'expand_more',
    'refresh',
    'fullscreen',
    'fullscreen_exit',
    'more_horiz',
    'more_vert',
    'unfold_less',
    'unfold_more',
    'control_point',
    'crop',
    'adjust',
    'camera',
    'camera_alt',
    'image',
    'broken_image',
    'phone_iphone',
    'phone_android',
    'watch',
    'tv',
    'headset',
    'computer',
    'cloud_done',
    'cloud_download',
    'cloud_upload',
    'cloud_off',
    'folder',
    'title',
    'insert_link',
    'insert_chart',
    'format_quote',
    'format_list_bulleted',
    'format_list_numbered',
    'attach_file',
    'attach_money',
    'access_alarms',
    'account_box',
    'account_circle',
    'bookmark',
    'bookmark_border',
    'fingerprint',
    'gif',
    'home',
    'info',
    'info_outline'
  ];

  render() {
    return (
      <Page appBar={<AppBar title="Icon 图标组件" />}>
        <ScrollView>
          <Container row wrap width={ui.screenWidth}>
            {this.icons.map((icon) => (
              <Container
                justifyContent="center"
                alignItems="center"
                padding={ui.rpx(20)}
                width={ui.screenWidth / 3}
              >
                <Icon type={icon} size={ui.rpx(40)} />
                <Text size={ui.rpx(20)} margin={{ top: ui.rpx(10) }}>
                  {icon}
                </Text>
              </Container>
            ))}
          </Container>
          <Container height={ui.bottomBarHeight} />
        </ScrollView>
      </Page>
    );
  }
}

上述例子的效果图：