|
13 | 13 | </v-col>
|
14 | 14 |
|
15 | 15 | <v-col cols="12">
|
16 |
| - To make things easier for the user to distinguish the different levels of a table, there is the <a |
17 |
| - href="#props-all-colors" |
18 |
| - ><code class="inline-code">colors</code></a> prop. While the main <a href="#examples">examples</a> are a base |
19 |
| - configuration with no colors, it is suggested to add the colors to the table to make it easier on the end user's |
20 |
| - readability. |
| 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">colors</code></a> prop. While the main |
| 18 | + <a href="#examples">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. |
| 20 | + </v-col> |
| 21 | + |
| 22 | + <v-col cols="12"> |
| 23 | + With these settings you can adjust the percentage change of the header row <code class="inline-code">colors</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">child</code> object of the item being drilled down into. |
21 | 29 | </v-col>
|
22 | 30 |
|
23 | 31 | <v-col cols="12">
|
|
28 | 36 | </v-col>
|
29 | 37 |
|
30 | 38 | <v-col cols="12">
|
31 |
| - With these settings you can adjust the percentage change of the header row <code class="inline-code">colors</code> |
32 |
| - as you drilldown to deeper levels. This helps each level to stand out from the previous level. You can also set the |
33 |
| - percentage change to 0 to keep the same color for each level. Each level has the capability to have it's own <code |
34 |
| - class="inline-code" |
35 |
| - >colors</code> settings as well, you just have to adjust the settings being passed into the specific level inside of |
36 |
| - the <code class="inline-code">child</code> object of the item being drilled down into. |
| 39 | + If you opt not to utilize the <a href="#props-all-colors"><code class="inline-code">colors</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 | 43 | </v-col>
|
38 | 44 |
|
39 | 45 | <v-col cols="12">
|
@@ -80,44 +86,38 @@ const codeBlockSettings = computed(() => props.codeBlockOptions);
|
80 | 86 |
|
81 | 87 | const colorsProp = {
|
82 | 88 | colors: {
|
83 |
| - default: { |
84 |
| - base: 'primary', |
85 |
| - bg: 'primary', |
86 |
| - border: 'primary', |
87 |
| - text: 'on-primary', |
88 |
| - }, |
89 | 89 | footer: {
|
90 |
| - bg: '--v-theme-surface', |
91 |
| - text: '--v-theme-on-surface', |
| 90 | + background: '--v-theme-surface', |
| 91 | + color: '--v-theme-on-surface', |
92 | 92 | },
|
93 | 93 | header: {
|
94 |
| - bg: 'primary', |
95 |
| - text: 'on-primary', |
| 94 | + background: 'primary', |
| 95 | + color: 'on-primary', |
96 | 96 | },
|
97 | 97 | percentageChange: 25,
|
98 | 98 | percentageDirection: 'desc',
|
| 99 | + table: { |
| 100 | + bottomBorder: 'primary', |
| 101 | + }, |
99 | 102 | }
|
100 | 103 | };
|
101 | 104 |
|
102 | 105 | const tableSettings = ref({ ...tableDefaults, ...{ colors: colorsProp } });
|
103 | 106 |
|
104 | 107 | const colorsPropCode = `colors: {
|
105 |
| - default: { |
106 |
| - base: 'primary', |
107 |
| - bg: 'primary', |
108 |
| - border: 'primary', |
109 |
| - text: 'on-primary', |
110 |
| - }, |
111 | 108 | footer: {
|
112 |
| - bg: '--v-theme-surface', |
| 109 | + background: '--v-theme-surface', |
113 | 110 | text: '--v-theme-on-surface',
|
114 | 111 | },
|
115 | 112 | header: {
|
116 |
| - bg: 'primary', |
| 113 | + background: 'primary', |
117 | 114 | text: 'on-primary',
|
118 | 115 | },
|
119 | 116 | percentageChange: 25,
|
120 | 117 | percentageDirection: 'desc',
|
| 118 | + table: { |
| 119 | + bottomBorder: 'primary', |
| 120 | + }, |
121 | 121 | }`;
|
122 | 122 |
|
123 | 123 | </script>
|
0 commit comments