TableView

展现形式如表格一般, 用来组织数据, 显示链接的集合, 或一系列的控件。

  • 使用时如果需要跳转功能可通过添加href属性并赋予正确的url(任何标签)。
  • 可搭配其他组件一起使用, 如徽章组件Badge, 开关组件Switch等。

示例:

    <TableView>
        <a href="https://github.com/future-team/phoenix-ui">Item 1</a>
        <a>Item 2 <Badge>2</Badge></a>
        <a>Item 3 <Switch /></a>
    </TableView>

方法

属性

事件

Extends Component
Defined in: src/TableView.js:6
Module: 布局组件

Available since 0.1.0

Constructor

TableView

TableView ()

Defined in src/TableView.js:6

Available since 0.1.0

Example:

import React, { Component } from 'react';
import {TableView,Badge,Switch} from 'phoenix-ui';
import Code from "./code/code";

export default class tableview extends Component{

    constructor(props,context){
        super(props,context);
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">TableView</h2>
                <h3 className="comp-type">仿表格组件</h3>
                <div className="contents">
                    <h3 className="comp-tip">子元素设置href属性(设置href属性增加右箭头)</h3>
                    <TableView>
                        <a href="http://www.baidu.com">Item 1</a>
                    </TableView>
                </div>
                <Code target="table-view-href" />

                <div className="contents">
                    <h3 className="comp-tip">配合其他组件使用</h3>
                    <TableView>
                        <a>Item 2 <Badge>2</Badge></a>
                        <a href="###">Item 3 <Badge>5</Badge></a>
                        <a>Item 4 <Switch /></a>
                    </TableView>
                </div>
                <Code target="table-view-other-component" />
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/TableView.js:32

样式前缀

Default:

'table-view'

componentTag

String

Defined in src/TableView.js:39

标签tagName