Description
I wanted to be able to support caption hiding in the VueUiCarouselTable component and wanted the contents of the tbody to be hidden beyond its own height when I set all the background colors of the table to be transparent, rather than hidden beyond the entire componen.
This is my configuration item:
const config = ref<VueUiCarouselTableConfig>({ "responsiveBreakpoint": 400, "userOptions": { "show": false }, "animation": { "use": true, "speedMs": 1000, "pauseOnHover": true }, "style": { "backgroundColor": "#FFFFFF00", "color": "#FFFFFF00", "fontFamily": "inherit" }, "border": { "size": 0, "color": "#2D353C" }, "caption": { "padding": { "top": 12, "right": 12, "bottom": 12, "left": 12 }, "style": { "backgroundColor": "#FFFFFF00", "color": "#1A1A1A", "fontSize": "16px", "fontWeight": "bold", "textAlign": "left" } }, "thead": { "style": { "verticalAlign": "middle" }, "tr": { "height": 32, "border": { "size": 0, "color": "#2D353C" }, "style": { "backgroundColor": "#FFFFFF00", "color": "#1A1A1A", "boxShadow": "0px 6px 12px -6px #1A1A1A50" }, "th": { "border": { "size": 0, "color": "#2D353C" }, "padding": { "top": 0, "right": 12, "bottom": 0, "left": 0 }, "style": { "borderSpacing": 0, "border": "none", "textAlign": "center", "fontVariantNumeric": "tabular-nums" } } } }, "tbody": { "tr": { "visible": 5, "height": 32, "border": { "size": 0, "color": "#2D353C" }, "style": { "backgroundColor": "#FFFFFF00", "color": "#1A1A1A" }, "td": { "alternateColor": true, "alternateOpacity": 0.5, "border": { "size": 0, "color": "#2D353C" }, "padding": { "top": 0, "right": 12, "bottom": 0, "left": 0 }, "style": { "fontVariantNumeric": "tabular-nums", "textAlign": "center", "backgroundColor": "#FFFFFF00" } } } } });