@zym-com/table-carousel
v0.0.1
Published
轮播表格
Downloads
1
Readme
Install
npm install @zym-com/@zym-com/table-carouselor
yarn add @zym-com/@zym-com/table-carouselImport
import TableCarousel from "@zym-com/table-carousel";
import "@zym-com/table-carousel/dist/style.css";Basic Usage
import TableCarousel from "@zym-com/table-carousel";
import "@zym-com/table-carousel/dist/style.css";
function App() {
const options = {
"configuration": {
"switchState": false,
"waitTime": 2000,
"carousel": "single",
"hoverPause": true,
"defalutImageShow": true,
"headerShow": true,
"headerHeight": 38,
"headerStyleType": "default",
"headertextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 14,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"fontStyle": "normal"
},
"headerbgColorSelect": "BgImage",
"headersolidBgColor": "rgba(0,186,255,1)",
"headerAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"headerImage": "",
"headerBGSize": {
"headerBGSizeW": 100,
"headerBGSizeH": 100
},
"headerBGPosition": {
"headerBGPositionW": 50,
"headerBGPositionH": 50
},
"headerborderRadius": 0,
"rowNum": 5,
"rowStyleType": "default",
"rowBgColorSelect": "BgImage",
"oddRowBgsolidBgColor": "rgba(0,59,81,1)",
"evenRowBgsolidBgColor": "rgba(10,39,50,1)",
"rowBgsolidBgColorHover": "rgba(255,255,255,0.5)",
"oddRrowBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"evenRrowBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"rowBgAnamorphismHover": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"oddRowBgImage": "",
"evenRowBgImage": "",
"rowBgImageHover": "",
"rowBgBGSize": {
"rowBgBGSizeW": 100,
"rowBgBGSizeH": 80
},
"rowBgBGPosition": {
"rowBgBGPositionW": 50,
"rowBgBGPositionH": 50
},
"borderRadiusName": 0,
"rowOpacity": 1,
"indexHeader": "序号",
"indexcolumnWidth": 120,
"indexalignselect": "center",
"indexTextWidth": "80%",
"indexTextHeight": "50%",
"indextextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 14,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"indexOpacity": 1,
"indexBorderWidth": 0,
"indexBorderType": "solid",
"indexBorderColor": "rgba(0,59,81,1)",
"indexPadding": {
"top": 0,
"bottom": 0,
"right": 0,
"left": 0
},
"indexBorderRadius": 0,
"indexceilPrefixStyleSelect": "image",
"indexceilPrefixImage": "",
"indexceilPrefixWH": {
"indexceilPrefixW": "10px",
"indexceilPrefixH": "10px"
},
"indexceilPrefixborderRadius": 0,
"indexceilPrefixinput": "$",
"indexceilPrefixTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 14,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"indexceilPrefixMR": 5,
"indexceilSuffixStyleSelect": "image",
"indexceilSuffixImage": "",
"indexceilSuffixWH": {
"indexceilSuffixW": "10px",
"indexceilSuffixH": "10px"
},
"indexceilSuffixborderRadius": 0,
"indexceilSuffixinput": "$",
"indexceilSuffixTextStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 14,
"color": "rgba(255,255,255,1)",
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 0,
"fontStyle": "normal"
},
"indexceilSuffixML": 5,
"indexBgColorSelect": "solidBgColor",
"indexBgsolidBgColor": "rgba(0,59,81,1)",
"indexBgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"indexBgImage": "",
"indexBgBGSize": {
"indexBgBGSizeW": 100,
"indexBgBGSizeH": 80
},
"indexBgBGPosition": {
"indexBgBGPositionW": 50,
"indexBgBGPositionH": 50
},
"headerStyleSeries": [],
"rowStyleSeries": [],
"ceilSeries": [],
"indexStyle": false,
"indexceilPrefixStyle": false,
"indexceilSuffixStyle": false,
"indexBgStyle": false
},
"base": {
"width": 400,
"height": 240
},
"dataSource": [
{
"id": "1",
"name": "张三",
"age": "18",
"value": 100
},
{
"id": "2",
"name": "李四",
"age": "20",
"value": 200
},
{
"id": "3",
"name": "王五",
"age": "60",
"value": 500
},
{
"id": "4",
"name": "赵六",
"age": "18",
"value": 100
},
{
"id": "5",
"name": "孙七",
"age": "20",
"value": 200
},
{
"id": "6",
"name": "钱八",
"age": "60",
"value": 500
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<TableCarousel {...options} />
</>
);
}
export default App;