@linkdesign/screen
Version:
屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏
139 lines (133 loc) • 3.39 kB
Markdown
---
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
sliderOptions={{
slidesToShow: 6,
// autoplay: true,
}}
// header={{
// textStyle: {
// color: '#d3e2ff',
// },
// }}
column={[{
key: 'area',
alias: '地区',
widthRate: 20,
// textStyle: {
// color: '#d3e2ff',
// },
}, {
key: 'pv',
alias: '流量(pv)',
widthRate: 20,
// textStyle: {
// color: '#d3e2ff',
// },
}, {
key: 'attribute',
alias: '用户行为特征',
widthRate: 60,
// align: 'right'
// textStyle: {
// color: '#d3e2ff',
// },
}]}
dataSource={[
{
"area": "中国",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "美国",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "俄罗斯",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "德国",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "吉尔吉斯斯坦",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "英国",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "日本",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "南非",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "巴西",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "印度",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "新加坡",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "加拿大",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "澳大利亚",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "阿根廷",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
{
"area": "西班牙",
"pv": 688,
"attribute": "xxxxxxxxxxxxxxxxxxx",
},
]}
/>
</DemoWrapper>
);
}
}
ReactDOM.render((
<App />
), mountNode);
```