Skip to content

Commit 9bf17e2

Browse files
gvreddy04gvreddy04
committed
Blazor Bootstrap Color Utils
1 parent b314d53 commit 9bf17e2

File tree

3 files changed

+456
-26
lines changed

3 files changed

+456
-26
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,14 @@
1313
<CarbonAds />
1414

1515
<SectionHeading Size="HeadingSize.H2" Text="Categorical 6-color" PageUrl="@pageUrl" HashTagName="categorical-6-color" />
16-
<Demo Type="typeof(ColorUtil_Demo_01_CategoricalSixColor)" Tabs="true" />
16+
<div class="mt-4">
17+
<ColorUtil_Demo_01_CategoricalSixColor />
18+
</div>
1719

1820
<SectionHeading Size="HeadingSize.H2" Text="Categorical 12-color" PageUrl="@pageUrl" HashTagName="categorical-12-color" />
19-
<Demo Type="typeof(ColorUtil_Demo_02_CategoricalTwelveColor)" Tabs="true" />
21+
<div class="mt-4">
22+
<ColorUtil_Demo_02_CategoricalTwelveColor />
23+
</div>
2024

2125
@code {
2226
private string pageUrl = "/utils/color-utility";

‎BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtil_Demo_01_CategoricalSixColor.razor

Lines changed: 150 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,152 @@
1-
<div class="container overflow-x-auto">
2-
<div class="d-flex flex-row">
3-
<div class="p-5 m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0];"></div>
4-
<div class="p-5 m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1];"></div>
5-
<div class="p-5 m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2];"></div>
6-
<div class="p-5 m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3];"></div>
7-
<div class="p-5 m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4];"></div>
8-
<div class="p-5 m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5];"></div>
1+
<div class="overflow-x-auto">
2+
<div class="d-flex flex-row m-1">
3+
4+
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[0]</div>
5+
6+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString().ToLowerInvariant()}")">
7+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0];width:48px;height:48px;"></div>
8+
</Tooltip>
9+
10+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
11+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
12+
</Tooltip>
13+
14+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
15+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
16+
</Tooltip>
17+
18+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
19+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
20+
</Tooltip>
21+
22+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
23+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
24+
</Tooltip>
25+
26+
</div>
27+
<div class="d-flex flex-row m-1">
28+
29+
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[1]</div>
30+
31+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString().ToLowerInvariant()}")">
32+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1];width:48px;height:48px;"></div>
33+
</Tooltip>
34+
35+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
36+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
37+
</Tooltip>
38+
39+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
40+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
41+
</Tooltip>
42+
43+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
44+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
45+
</Tooltip>
46+
47+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
48+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
49+
</Tooltip>
50+
51+
</div>
52+
<div class="d-flex flex-row m-1">
53+
54+
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[2]</div>
55+
56+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString().ToLowerInvariant()}")">
57+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2];width:48px;height:48px;"></div>
58+
</Tooltip>
59+
60+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
61+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
62+
</Tooltip>
63+
64+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
65+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
66+
</Tooltip>
67+
68+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
69+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
70+
</Tooltip>
71+
72+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
73+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
74+
</Tooltip>
75+
76+
</div>
77+
<div class="d-flex flex-row m-1">
78+
79+
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[3]</div>
80+
81+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString().ToLowerInvariant()}")">
82+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3];width:48px;height:48px;"></div>
83+
</Tooltip>
84+
85+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
86+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
87+
</Tooltip>
88+
89+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
90+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
91+
</Tooltip>
92+
93+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
94+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
95+
</Tooltip>
96+
97+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
98+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
99+
</Tooltip>
100+
101+
</div>
102+
<div class="d-flex flex-row m-1">
103+
104+
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[4]</div>
105+
106+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbString().ToLowerInvariant()}")">
107+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4];width:48px;height:48px;"></div>
108+
</Tooltip>
109+
110+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
111+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
112+
</Tooltip>
113+
114+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
115+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
116+
</Tooltip>
117+
118+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
119+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
120+
</Tooltip>
121+
122+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
123+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
124+
</Tooltip>
125+
126+
</div>
127+
<div class="d-flex flex-row m-1">
128+
129+
<div class="m-1" style="width:64px;height:48px;">@ColorUtility.CategoricalTwelveColors[5]</div>
130+
131+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbString().ToLowerInvariant()}")">
132+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5];width:48px;height:48px;"></div>
133+
</Tooltip>
134+
135+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.8).ToLowerInvariant()}")">
136+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.8);width:48px;height:48px;"></div>
137+
</Tooltip>
138+
139+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.6).ToLowerInvariant()}")">
140+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.6);width:48px;height:48px;"></div>
141+
</Tooltip>
142+
143+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.4).ToLowerInvariant()}")">
144+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.4);width:48px;height:48px;"></div>
145+
</Tooltip>
146+
147+
<Tooltip IsHtml="true" Color="TooltipColor.Dark" Title="@($"Index: 0 <br /> Color: {@ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.2).ToLowerInvariant()}")">
148+
<div class="m-1" style="background-color: @ColorUtility.CategoricalTwelveColors[5].ToColor().ToRgbaString(0.2);width:48px;height:48px;"></div>
149+
</Tooltip>
150+
9151
</div>
10152
</div>

0 commit comments

Comments
 (0)