表格操作单元格容器

@aligov/components-table-actions

表格操作单元格容器。

用于表格的操作列内容渲染，直接写内容，容器给内部的元素添加空白间隔。

从 2.0.0 版本开始，添加了超过指定数量后将收起放到「更多」下拉菜单里的功能。下拉菜单默认和触发元素右对齐，可根据实际场景来做调整。

用法

<TableActions>
  <Button type="primary" text={true}>Button型文字</Button>
  <Button type="primary">按钮</Button>
  <a href="//taobao.com">链接</a>
  <span>普通文本</span>
</TableActions>

API

参数名 说明 必填 类型 默认值 备注
moreThreshold 子元素超过该数量后，将出现下拉菜单 N number 3 自 2.0.0 版本起
moreText 下拉菜单展示文案 N string "更多" 自 2.0.0 版本起
moreProps 下拉菜单 props，详见 MenuButton N object {} 自 2.0.0 版本起
popupProps 下拉弹层 props，详见 Overlay N object {} 自 2.0.0 版本起

DEMO 列表

简单用法

import { Button, Card } from '@alifd/next';
import TableActions from '@aligov/components-table-actions';
import * as PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <Card title="通常用法" contentHeight="auto">
        <TableActions>
          <Action1/>
          <Action2/>
          <Action3/>
          <LinkAction/>
          <LinkClickAction/>
        </TableActions>
        <hr/>
        <TableActions>
          <Action1/>
          <Action2/>
          <Action3/>
        </TableActions>
        <hr/>
        <TableActions>
          <Action1/>
        </TableActions>
        <p>注意：实际场景中链接可能使用 React-Router 的 Link 来包裹 Button 的实现</p>
      </Card>

      <Card title="自定义触发更多的阈值" contentHeight="auto">
        <TableActions moreThreshold={4}>
          <Action1/>
          <Action2/>
          <Action3/>
          <LinkAction/>
          <LinkClickAction/>
        </TableActions>
        <p>阈值默认是 3，超过 3 个就放到更多更多下拉里，这里自定义为 4</p>
      </Card>

      <Card title="全部展示" contentHeight="auto">
        <TableActions moreThreshold={0}>
          <Action1/>
          <Action2/>
          <Action3/>
          <LinkAction/>
          <LinkClickAction/>
        </TableActions>
      </Card>

      <Card title="自定义更多文案" contentHeight="auto">
        <TableActions moreText="More">
          <Action1/>
          <Action2/>
          <Action3/>
          <LinkAction/>
          <LinkClickAction/>
        </TableActions>
      </Card>

      <Card title="下拉菜单改为左对齐" contentHeight="auto">
        <TableActions popupProps={{align: 'tl bl'}}>
          <Action1/>
          <Action2/>
          <Action3/>
          <LinkAction/>
          <LinkClickAction/>
        </TableActions>
        <p>默认右对齐，因为主要是用于表格操作列，一般在最右边</p>
      </Card>

      <Card title="空间不够横排的情况" contentHeight="auto">
        <div style={{width: 80, border: '1px solid #ccc', padding: 8}}>
          <TableActions>
            <Action1/>
            <Action2/>
            <Action3/>
            <LinkAction/>
            <LinkClickAction/>
          </TableActions>
        </div>
        <p>默认右对齐，因为主要是用于表格操作列，一般在最右边</p>
      </Card>
    </div>
  );
}

function Action1() {
  return <Button type="primary" text={true} onClick={() => { alert('Action 1'); }}>操作一</Button>
}

function Action2() {
  return <Button type="primary" text={true} onClick={() => { alert('Action 2'); }}>操作二</Button>
}

function Action3() {
  return <Button type="primary" text={true} onClick={() => { alert('Action 3'); }}>操作三</Button>
}

function LinkAction() {
  return <Button type="primary" text={true} component="a" href="//taobao.com">链接</Button>
}

function LinkClickAction() {
  return <Button type="primary" text={true} onClick={() => {
    alert('click');
  }}>点击事件</Button>
}

ReactDOM.render((
  <App/>
), mountNode);
.next-card {
    margin-bottom: 20px;
}