@linkdesign/screen/demo/Text_CarouselTable3/usage.md

屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏

---
title: 组件示例
order: 2
---

## 基础用法

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DemoWrapper, CarouselTable, config } from '@linkdesign/screen';

const { _cssPrefix } = config;

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-CarouselTable">
      <CarouselTable
        global={{
          textStyle: {
            paddingLeft: 5,
          }
        }}
        universalStyle={{
          width: 450,
        }}
        sliderOptions={{
          slidesToShow: 5,
          autoplay: false,
        }}
        headerOptions={{
          universalStyle: {
            backgroundColor: 'transparent',
          },
          textStyle: {
            borderTop: '1px solid #D3E2FF',
            borderBottom: '1px solid #D3E2FF',
          },
        }}
        rowOptions={{
          oddBackgroundColor: '#transparent',
          evenBackgroundColor: 'transparent',
        }}
        column={[{
          key: 'status',
          alias: '状态',
          widthRate: 20,
          align: 'left',
          cell: (val) => <div style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
          }}>
            <span style={{
              display: "inline-block",
              marginRight: "10px",
              width: "8px",
              height: "8px",
              borderRadius: "50%",
              backgroundColor: "#f00",
            }} />
            {val}
          </div>,
        }, {
          key: 'pv',
          alias: '设备名称',
          widthRate: 30,
        }, {
          key: 'attribute',
          alias: '设备ID',
          widthRate: 50,
        }]}
        dataSource={[
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
          {
            "status": "故障",
            "pv": '摄像头',
            "attribute": "xxxxxxxxxxxxxxxxxxx",
          },
        ]}
      />
    
      </DemoWrapper>
    );
  }
}

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