Skip to content

Commit f01cecc

Browse files
Carl-HugoCarl-Hugo
committed
Add Themed page
1 parent 36f60be commit f01cecc

File tree

2 files changed

+128
-0
lines changed

2 files changed

+128
-0
lines changed

‎samples/razor-pages/Pages/Themed.cshtml

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
@page
2+
@{
3+
ViewData["Title"] = "Themed";
4+
}
5+
6+
<div class="container">
7+
<div class="row">
8+
<div class="col">
9+
<div class="jumbotron jumbotron-fluid my-5">
10+
<div class="container">
11+
<h1 class="display-4">Themed components</h1>
12+
<p class="lead">The elements of this page, like the `.navbar-themed` are changing between dark and
13+
light depending on the
14+
current theme.</p>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
<div class="row bg-secondary p-5">
20+
<div class="col">
21+
<div class="text-themed bg-themed">
22+
.bg-themed<br>
23+
.text-themed
24+
</div>
25+
</div>
26+
<div class="col">
27+
<div class="bg-themed">
28+
.bg-themed
29+
</div>
30+
</div>
31+
<div class="col">
32+
<div class="text-themed">
33+
.text-themed
34+
</div>
35+
</div>
36+
<div class="col">
37+
<div class="text-themed-inverted bg-themed-inverted">
38+
.bg-themed-inverted<br>
39+
.text-themed-inverted
40+
</div>
41+
</div>
42+
<div class="col">
43+
<div class="bg-themed-inverted">
44+
.bg-themed-inverted
45+
</div>
46+
</div>
47+
<div class="col">
48+
<div class="text-themed-inverted">
49+
.text-themed-inverted
50+
</div>
51+
</div>
52+
</div>
53+
<div class="row my-5">
54+
<div class="col">
55+
<div class="card text-themed bg-themed mb-2 d-inline-block" style="max-width: 18rem;">
56+
<div class="card-header">Header</div>
57+
<div class="card-body">
58+
<h4 class="card-title">text-themed + bg-themed</h4>
59+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
60+
card's content.</p>
61+
</div>
62+
</div>
63+
</div>
64+
<div class="col">
65+
<div class="card text-themed-inverted bg-themed-inverted mb-2 d-inline-block" style="max-width: 18rem;">
66+
<div class="card-header">Header</div>
67+
<div class="card-body">
68+
<h4 class="card-title">text-themed-inverted + bg-themed-inverted</h4>
69+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
70+
card's content.</p>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<div class="col">
76+
<div class="card text-dark bg-light mb-2 d-inline-block" style="max-width: 18rem;">
77+
<div class="card-header">Header</div>
78+
<div class="card-body">
79+
<h4 class="card-title">text-dark + bg-light</h4>
80+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
81+
card's content.</p>
82+
</div>
83+
</div>
84+
</div>
85+
<div class="col">
86+
<div class="card text-light bg-dark mb-2 d-inline-block" style="max-width: 18rem;">
87+
<div class="card-header">Header</div>
88+
<div class="card-body">
89+
<h4 class="card-title">text-light + bg-dark</h4>
90+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
91+
card's content.</p>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
97+
<div class="row">
98+
<div class="col">
99+
<h2>Progress bar: .bg-themed</h2>
100+
<div class="progress">
101+
<div class="progress-bar bg-themed" role="progressbar" style="width: 25%" aria-valuenow="25"
102+
aria-valuemin="0" aria-valuemax="100"></div>
103+
</div>
104+
</div>
105+
<div class="col">
106+
<h2>Progress bar striped: .bg-themed</h2>
107+
<div class="progress">
108+
<div class="progress-bar progress-bar-striped bg-themed" role="progressbar" style="width: 25%"
109+
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
110+
</div>
111+
</div>
112+
</div>
113+
<div class="row my-5">
114+
<div class="col">
115+
<div class="alert alert-themed">
116+
A simple alert-themed alert—check it out!
117+
</div>
118+
</div>
119+
<div class="col">
120+
<div class="alert alert-themed-inverted">
121+
A simple alert-themed-inverted alert—check it out!
122+
</div>
123+
</div>
124+
</div>
125+
</div>

‎samples/razor-pages/Pages/_Layout.cshtml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@
107107
<li class="nav-item">
108108
<a class="nav-link" asp-page="toasts" asp-route-default-theme="@defaultTheme">Toasts</a>
109109
</li>
110+
<li class="nav-item">
111+
<a class="nav-link" asp-page="themed" asp-route-default-theme="@defaultTheme">Themed</a>
112+
</li>
110113
<li class="nav-item">
111114
<a class="nav-link disabled" href="#!">Disabled</a>
112115
</li>

0 commit comments

Comments
 (0)