From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/components/badges.html | 267 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 267 insertions(+) create mode 100644 docs/components/badges.html (limited to 'docs/components/badges.html') diff --git a/docs/components/badges.html b/docs/components/badges.html new file mode 100644 index 0000000..7ceed32 --- /dev/null +++ b/docs/components/badges.html @@ -0,0 +1,267 @@ + + + + Badges - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Badges

+
+
+ + + +
+
+ + +
+
+

Badges are often used as unread number indicators.

+
+
Notifications
+
Notifications
+
Notifications
+
Notifications
+
+

Add the badge class to non self closing elements. + And add the data-badge attribute to define the content of a badge. + The badge will appear in the top-right direction of the element. +

+

If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

+
+
+ + +
+
+ + +
+
+
YZ
+
YZ
+
YZ
+
+
+

Badges support button and avatars elements as well.

+ 
<span class="badge">
+  Notifications
+</span>
+
+<span class="badge" data-badge="8">
+  Notifications
+</span>
+
+<button class="btn badge" data-badge="8">
+  Button
+</button>
+
+<figure class="avatar badge" data-badge="8" data-initial="YZ">
+  <img src="img/avatar-3.png" alt="YZ">
+</figure>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d