---
title: Simple Usage
order: 1
---

本 Demo 演示一行文字的用法。

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import '@alifd/next/reset.scss';
import '@alifd/next/lib/table/index.scss';
import '@alifd/next/lib/pagination/index.scss';
import '@alifd/next/lib/date-picker/index.scss';
import {
  Button,
  Icon
 } from '@alifd/next';
import {
  List,
  Table,
  Pagination,
  Filter,
  Layout,
  Search,
  Clear,
  createListActions,
  ListLifeCycleTypes,
  Consumer,
  FormSlot
} from '@aligov/gov-alist';
const STATUS = [
  { label: '在用', value: 'ENABLED' },
  { label: '失效', value: 'DISENABLED' },
];

/** mock数据 */
const mockData = {
  list: [
    {
      id: 100306660940,
      title: 'Quotation for 1PCS Nano 3.0 controller',
      status: '已生效',
      time1: '2020-05-28 11:40:26',
      time2: '2020-05-29 16:28:40',
    }
  ],
  total: 100,
  current: 1,
  pageSize: 10,
  totalPages: 10
}

/** 服务器请求数据 */
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(mockData), 500)
  })
}


/** alist query方法*/
const alistQuery = async params => {
  const {
      currentPage, // 当前页
      pageSize, // 每页数量
      filterData  // Filter数据
  } = params;
  try {
    const res = await fetchData({
      ...filterData,
      pageNum: currentPage,
      pageSize
    });
    if (res && res.list) {
      const {
        list: dataList = [],
        totalPages,
        total
      } = res;
      return {
        total,
        dataList,
        currentPage,
        pageSize,
        totalPages
      }
    }
  } catch(e) {console.log(e)}
}


/** Filter配置 */
const formGroup = [
  {
    title: '组件状态：',
    name: 'status',
    type: 'string',
    'x-component': 'Select',
    'x-component-props': {
      dataSource: STATUS,
      style: {
        width: '100%'
      }
    },
    'x-props': {placeholder: '请输入名称'}
  },
  {
    title: '组件标题：',
    name: 'title',
    type: 'string',
    'x-component': 'Input',
    'x-props': {placeholder: '请输入名称'}
  },
];

/** Table配置 */
const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '标题',
    dataIndex: 'title'
  },
  {
    title: '状态',
    dataIndex: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'time1'
  },
  {
    title: '修改时间',
    dataIndex: 'time2'
  }
];



const actions = createListActions();
const App =  props => {
  
  return (
      <List
          actions={actions}
          query={alistQuery}
      >
        <Filter>
            <Layout labelAlign="left">
              {
                formGroup.map(formItem => (
                  <Filter.Item key={formItem.title} {...formItem} />
                ))
              }
              <FormSlot>
                <Layout.ButtonGroup>
                  <Search>查询</Search>
                  <Clear>重置</Clear>
                </Layout.ButtonGroup>
              </FormSlot>
            </Layout>
        </Filter>
        <Consumer
            style={{ paddingTop: 20 }}
            selector={[ListLifeCycleTypes.ON_LIST_FILTER_ITEM_CHANGE]}
        >
            {list => {
                return (
                  <Button
                    onClick={() => {}}
                    type="primary"
                  >
                    <Icon type="add" />新建公告
                  </Button>
                );
            }}
        </Consumer>
        <Table>
            {
                columns.map(col => (
                    <Table.Column key={col.title} {...col} />
                ))
            }
        </Table>
      <Pagination />
    </List>
  );
}

ReactDOM.render((
  <App />
), mountNode);
````