88 :class =" classes.headerA"
99 href =" #props-colors"
1010 >#</a >
11- Colors Prop
11+ Color Props
1212 </h3 >
1313 </v-col >
1414
1515 <v-col cols =" 12"
16- To make things easier for the user to distinguish the different levels of a table, there is the
17- <a href =" #props-all-colors" code class =" inline-code" code ></a > prop. While the main
18- <a href =" #examples" a > are a base configuration with no colors, it is suggested to add the colors to the
19- table to make it easier on the end user's readability.
16+ To make things easier for the user to distinguish the different levels of a table, there are a few color props that
17+ can be utilized. While the main <a href =" #examples" a > are a base configuration with no colors, it is
18+ suggested to add the colors to the table to make it easier on the end user's readability.
2019 </v-col >
2120
2221 <v-col cols =" 12"
23- With these settings you can adjust the percentage change of the header row <code class =" inline-code" code >
24- as you drilldown to deeper levels. This helps each level to stand out from the previous level. You can also set the
25- percentage change to 0 to keep the same color for each level. Each level has the capability to have it's own <code
26- class =" inline-code"
27- >colors</code > settings as well, you just have to adjust the settings being passed into the specific level inside of
28- the <code class =" inline-code" code > object of the item being drilled down into.
22+ With these settings you can adjust the percentage change of the header and footer row colors, as well as the bottom
23+ border color as you drilldown to deeper levels. This helps each level to stand out from the previous level. You can
24+ also set the percentage change to 0 to keep the same color for each level. Each level has the capability to have it's
25+ own <code class =" inline-code" code > settings as well, you just have to adjust the settings being passed into
26+ the specific level inside of the <code class =" inline-code" code > object of the item being drilled down into.
2927 </v-col >
3028
3129 <v-col cols =" 12"
3634 </v-col >
3735
3836 <v-col cols =" 12"
39- If you opt not to utilize the <a href =" #props-all-colors" code class =" inline-code" code ></a > prop but still
40- wish to customize the table's appearance, you can take advantage of various CSS classes embedded within the tables.
41- These classes are designed with different levels, allowing you to selectively target specific elements within the
42- tables for styling purposes.
37+ If you opt not to utilize the color props but still wish to customize the table's appearance, you can take advantage
38+ of various CSS classes embedded within the tables. These classes are designed with different levels, allowing you to
39+ selectively target specific elements within the tables for styling purposes.
4340 </v-col >
4441
4542 <v-col cols =" 12"
4643 Each of the color settings accept Vuetify theme color names or variables, HEX, RGB, HSL, and CSS color names.
4744 </v-col >
4845
4946 <v-col cols =" 12"
50- The follow settings are the recommended settings to start with:
47+ The following < code class = " ic " >default-colors</ code > prop setting is recommended to start with:
5148 </v-col >
5249
5350 <v-col cols =" 12"
6057 />
6158 </v-col >
6259
63- <ClientTable
64- :colors =" colorsProp"
65- section-id =" props-colors-example"
66- :settings =" tableSettings"
67- title =" Table with Colors Example"
68- />
60+ <v-col
61+ id =" props-colors-example"
62+ cols =" 12"
63+ >
64+ <h3 :class =" classes.h3"
65+ <a
66+ :class =" classes.headerA"
67+ href =" #props-colors-example"
68+ >#</a >
69+ Table with Colors Example
70+ </h3 >
71+ </v-col >
72+
73+ <v-col cols =" 12"
74+ <v-btn-toggle
75+ v-model =" selectedColor"
76+ density =" compact"
77+ >
78+ <v-btn
79+ v-for =" color in colors"
80+ :key =" color"
81+ :active =" headerBackgroundColor === color"
82+ :color =" headerBackgroundColor === color ? color : ''"
83+ size =" small"
84+ :value =" color"
85+ @click =" updateColor(color)"
86+ >
87+ {{ color }}
88+ </v-btn >
89+ </v-btn-toggle >
90+ </v-col >
91+
92+ <ClientTable :settings =" tableSettings"
6993</template >
7094
7195
@@ -83,41 +107,33 @@ const props = defineProps({
83107
84108const classes = inject (' classes'
85109const codeBlockSettings = computed (() => props .codeBlockOptions );
86-
87- const colorsProp = {
88- colors: {
89- footer: {
90- background: ' --v-theme-surface'
91- color: ' --v-theme-on-surface'
92- },
93- header: {
94- background: ' primary'
95- color: ' on-primary'
96- },
97- percentageChange: 25 ,
98- percentageDirection: ' desc'
99- table: {
100- bottomBorder: ' primary'
101- },
102- }
110+ const colors = ref ([' primary' ' secondary' ' success' ' info' ' warning' ' error'
111+ const headerBackgroundColor = ref (' primary'
112+ const selectedColor = ref (' primary'
113+
114+ const defaultColors = {
115+ background: ' primary'
116+ border: ' primary'
117+ color: ' on-primary'
103118};
104119
105- const tableSettings = ref ({ ... tableDefaults, ... { colors: colorsProp } });
106-
107- const colorsPropCode = ` colors: {
108- footer: {
109- background: '--v-theme-surface',
110- text: '--v-theme-on-surface',
111- },
112- header: {
113- background: 'primary',
114- text: 'on-primary',
115- },
116- percentageChange: 25,
117- percentageDirection: 'desc',
118- table: {
119- bottomBorder: 'primary',
120- },
121- }` ;
120+ const tableSettings = ref ({ ... tableDefaults, ... { defaultColors } });
121+
122+ const colorsPropCode = ` {
123+ background: 'primary',
124+ border: 'primary',
125+ color: 'on-primary',
126+ }"` ;
127+
128+ function updateColor (val ) {
129+ tableSettings .value .defaultColors .color = val;
130+
131+ if (val) {
132+ tableSettings .value .defaultColors .color = ` on-${ val} `
133+ }
122134
135+ headerBackgroundColor .value = val;
136+ tableSettings .value .defaultColors .background = val;
137+ tableSettings .value .defaultColors .border = val ?? ' accent'
138+ }
123139< / script>
0 commit comments