Skip to content

Commit fb34ca6

Browse files
Updated docs
1 parent aa68e38 commit fb34ca6

File tree

1 file changed

+29
-29
lines changed

1 file changed

+29
-29
lines changed

src/documentation/sections/subSections/ColorsProp.vue

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,19 @@
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 <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.
2129
</v-col>
2230

2331
<v-col cols="12">
@@ -28,12 +36,10 @@
2836
</v-col>
2937

3038
<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.
3743
</v-col>
3844

3945
<v-col cols="12">
@@ -80,44 +86,38 @@ const codeBlockSettings = computed(() => props.codeBlockOptions);
8086
8187
const colorsProp = {
8288
colors: {
83-
default: {
84-
base: 'primary',
85-
bg: 'primary',
86-
border: 'primary',
87-
text: 'on-primary',
88-
},
8989
footer: {
90-
bg: '--v-theme-surface',
91-
text: '--v-theme-on-surface',
90+
background: '--v-theme-surface',
91+
color: '--v-theme-on-surface',
9292
},
9393
header: {
94-
bg: 'primary',
95-
text: 'on-primary',
94+
background: 'primary',
95+
color: 'on-primary',
9696
},
9797
percentageChange: 25,
9898
percentageDirection: 'desc',
99+
table: {
100+
bottomBorder: 'primary',
101+
},
99102
}
100103
};
101104
102105
const tableSettings = ref({ ...tableDefaults, ...{ colors: colorsProp } });
103106
104107
const colorsPropCode = `colors: {
105-
default: {
106-
base: 'primary',
107-
bg: 'primary',
108-
border: 'primary',
109-
text: 'on-primary',
110-
},
111108
footer: {
112-
bg: '--v-theme-surface',
109+
background: '--v-theme-surface',
113110
text: '--v-theme-on-surface',
114111
},
115112
header: {
116-
bg: 'primary',
113+
background: 'primary',
117114
text: 'on-primary',
118115
},
119116
percentageChange: 25,
120117
percentageDirection: 'desc',
118+
table: {
119+
bottomBorder: 'primary',
120+
},
121121
}`;
122122
123123
</script>

0 commit comments

Comments
 (0)