Skip to content

Commit a4743c0

Browse files
xidedixxidedix
committed
feat: placeholders view
1 parent a8b814d commit a4743c0

File tree

2 files changed

+160
-4
lines changed

2 files changed

+160
-4
lines changed

‎src/app/views/base/placeholders/placeholders.component.html

Lines changed: 160 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,160 @@
1-
<p cPlaceholder cPlaceholderColor="danger" cPlaceholderSize="lg" cCol xs="6">placeholders works!</p>
2-
<p cPlaceholder animation="glow">
3-
<span cPlaceholder cPlaceholderColor="success" cPlaceholderSize="lg" cCol xs="6" ></span>
4-
</p>
1+
<c-row>
2+
<c-col xs="12">
3+
<app-docs-callout href="components/placeholder" name="Placeholder"></app-docs-callout>
4+
</c-col>
5+
<c-col xs="12">
6+
<c-card class="mb-4">
7+
<c-card-header>
8+
<strong>Angular Placeholder</strong>
9+
</c-card-header>
10+
<c-card-body>
11+
<p class="text-medium-emphasis small">
12+
In the example below, we take a typical card component and recreate it with
13+
placeholders applied to create a &#34;loading card&#34;. Size and proportions are the
14+
same between the two.
15+
</p>
16+
<app-docs-example href="components/placeholder">
17+
<div class="d-flex justify-content-around p-3">
18+
<c-card style="width: 18rem;">
19+
<img cCardImg="top" loading="lazy" src="./assets/images/angular.jpg" />
20+
<c-card-body>
21+
<h5 cCardTitle>Card title</h5>
22+
<p cCardText>
23+
Some quick example text to build on the card title and make up the bulk of the
24+
card&#39;s content.
25+
</p>
26+
<a cButton cCol="7" routerLink="./">Go somewhere</a>
27+
</c-card-body>
28+
</c-card>
29+
<c-card style="width: 18rem;">
30+
<svg aria-label="Placeholder"
31+
cCardImg="top"
32+
focusable="false"
33+
height="162"
34+
preserveAspectRatio="xMidYMid slice"
35+
role="img"
36+
width="100%"
37+
xmlns="http://www.w3.org/2000/svg"
38+
>
39+
<title>Placeholder</title>
40+
<rect fill="#868e96" height="100%" width="100%"></rect>
41+
</svg>
42+
<c-card-body>
43+
<h5 cCardTitle cPlaceholderAnimation="glow">
44+
<span cCol="6" cPlaceholder></span>
45+
</h5>
46+
<p cCardText cPlaceholderAnimation="glow">
47+
<span cCol xs="7" cPlaceholder class="me-1"></span>
48+
<span cCol="4" cPlaceholder class="me-1"></span>
49+
<span cCol="4" cPlaceholder class="me-1"></span>
50+
<span cCol="6" cPlaceholder class="me-1"></span>
51+
<span cCol="8" cPlaceholder class="me-1"></span>
52+
</p>
53+
<p cPlaceholderAnimation="glow">
54+
<a cButton cCol="7" cPlaceholder color="primary" disabled routerLink="./"></a>
55+
</p>
56+
</c-card-body>
57+
</c-card>
58+
</div>
59+
</app-docs-example>
60+
</c-card-body>
61+
</c-card>
62+
<c-card class="mb-4">
63+
<c-card-header>
64+
<strong>Angular Placeholder</strong>
65+
</c-card-header>
66+
<c-card-body>
67+
<p class="text-medium-emphasis small">
68+
Create placeholders with the <code>cPlaceholder</code> directive and a grid
69+
column cCol directive (e.g., <code>cCol="6"</code>) to set the <code>width</code>. They can
70+
replace the text inside an element or be added as a modifier to an existing
71+
component.
72+
</p>
73+
<app-docs-example href="components/placeholder">
74+
<p aria-hidden="true">
75+
<span cCol="6" cPlaceholder></span>
76+
</p>
77+
<button cButton cCol="4" cPlaceholder disabled></button>
78+
</app-docs-example>
79+
</c-card-body>
80+
</c-card>
81+
<c-card class="mb-4">
82+
<c-card-header>
83+
<strong>Angular Placeholder</strong> <small> Width</small>
84+
</c-card-header>
85+
<c-card-body>
86+
<p class="text-medium-emphasis small">
87+
You can change the <code>width</code> through grid column classes, width utilities, or
88+
inline styles.
89+
</p>
90+
<app-docs-example href="components/placeholder#width">
91+
<span cCol="6" cPlaceholder></span>
92+
<span cPlaceholder class="w-75"></span>
93+
<span cPlaceholder style="width: 30%;"></span>
94+
</app-docs-example>
95+
</c-card-body>
96+
</c-card>
97+
<c-card class="mb-4">
98+
<c-card-header>
99+
<strong>Angular Placeholder</strong> <small> Color</small>
100+
</c-card-header>
101+
<c-card-body>
102+
<p class="text-medium-emphasis small">
103+
By default, the <code>cPlaceholder</code> uses <code>currentColor</code>. This
104+
can be overridden with a custom color or utility class.
105+
</p>
106+
<app-docs-example href="components/placeholder#color">
107+
<span cCol="12" cPlaceholder></span>
108+
109+
<span cBgColor="primary" cCol="12" cPlaceholder></span>
110+
<span cBgColor="secondary" cCol="12" cPlaceholder></span>
111+
<span cBgColor="success" cCol="12" cPlaceholder></span>
112+
<span cBgColor="danger" cCol="12" cPlaceholder></span>
113+
<span cBgColor="warning" cCol="12" cPlaceholder></span>
114+
<span cBgColor="info" cCol="12" cPlaceholder></span>
115+
<span cBgColor="light" cCol="12" cPlaceholder></span>
116+
<span cBgColor="dark" cCol="12" cPlaceholder></span>
117+
</app-docs-example>
118+
</c-card-body>
119+
</c-card>
120+
<c-card class="mb-4">
121+
<c-card-header>
122+
<strong>Angular Placeholder</strong> <small> Sizing</small>
123+
</c-card-header>
124+
<c-card-body>
125+
<p class="text-medium-emphasis small">
126+
The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of
127+
the parent element. Customize them with <code>size</code> prop: <code>lg</code>
128+
<code>sm</code>, or <code>xs</code>.
129+
</p>
130+
<app-docs-example href="components/placeholder#sizing">
131+
<span cCol="12" cPlaceholder cPlaceholderSize="lg"></span>
132+
<span cCol="12" cPlaceholder></span>
133+
<span cCol="12" cPlaceholder cPlaceholderSize="sm"></span>
134+
<span cCol="12" cPlaceholder cPlaceholderSize="xs"></span>
135+
</app-docs-example>
136+
</c-card-body>
137+
</c-card>
138+
<c-card class="mb-4">
139+
<c-card-header>
140+
<strong>Angular Placeholder</strong> <small> Animation</small>
141+
</c-card-header>
142+
<c-card-body>
143+
<p class="text-medium-emphasis small">
144+
Animate placeholders with <code>cPlaceholderAnimation=&#34;glow&#34;</code> or
145+
<code>cPlaceholderAnimation=&#34;wave&#34;</code> to better convey the perception of something
146+
being <em>actively</em> loaded.
147+
</p>
148+
<app-docs-example href="components/placeholder#animation">
149+
<p cPlaceholderAnimation="glow">
150+
<span cCol="12" cPlaceholder></span>
151+
</p>
152+
153+
<p cPlaceholderAnimation="wave">
154+
<span cCol="12" cPlaceholder></span>
155+
</p>
156+
</app-docs-example>
157+
</c-card-body>
158+
</c-card>
159+
</c-col>
160+
</c-row>

‎src/assets/images/angular.jpg

165 KB
Loading

0 commit comments

Comments
 (0)