Summary Files Commits Branches @commit @diff @stats
path: root / docs / components.html
diff options
context:
space:
mode:
1 files changed, 81 insertions, 55 deletions
-rw-r--r--docs/components.html136
diff --git a/docs/components.html b/docs/components.html
index ef5f18d..ec965a1 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -412,28 +412,24 @@
<div class="form-group">
<div class="form-autocomplete">
<div class="form-autocomplete-input form-input">
- <label class="chip">
+ <span class="chip">
Bruce Banner
- <button class="btn btn-clear"></button>
- </label>
- <label class="chip">
+ </span>
+ <span class="chip">
<img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar" />
Thor Odinson
- <button class="btn btn-clear"></button>
- </label>
- <label class="chip">
+ </span>
+ <span class="chip">
<img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar" />
Steve Rogers
- <button class="btn btn-clear"></button>
- </label>
- <label class="chip">
+ </span>
+ <span class="chip">
+ <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
Tony Stark
- <button class="btn btn-clear"></button>
- </label>
- <label class="chip active">
+ </span>
+ <span class="chip active">
Natasha Romanoff
- <button class="btn btn-clear"></button>
- </label>
+ </span>
<input class="form-input" type="text" placeholder="" />
</div>
</div>
@@ -443,15 +439,15 @@
<div class="form-group">
<div class="form-autocomplete">
<div class="form-autocomplete-input form-input is-focused">
- <label class="chip">
+ <span class="chip">
Bruce Banner
- <button class="btn btn-clear"></button>
- </label>
- <label class="chip">
+ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+ </span>
+ <span class="chip">
<img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
Thor Odinson
- <button class="btn btn-clear"></button>
- </label>
+ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+ </span>
<div class="has-icon-left">
<input class="form-input" type="text" placeholder="" value="S" />
<i class="form-icon loading"></i>
@@ -501,7 +497,7 @@
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span> /&gt;
Thor Odinson
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/label</span>&gt;
<span class="com">&lt;!-- autocomplete real input box --&gt;</span>
@@ -536,20 +532,20 @@
</div>
<div class="columns">
<div class="column col-6 col-xs-12">
- <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
- <img src="img/avatar-1.png" alt="Avatar" />
+ <figure class="avatar avatar-xl">
+ <img src="img/avatar-1.png" alt="Avatar XL" />
</figure>
- <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;">
- <img src="img/avatar-2.png" alt="Avatar" />
+ <figure class="avatar avatar-lg">
+ <img src="img/avatar-2.png" alt="Avatar LG" />
</figure>
- <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;">
+ <figure class="avatar">
<img src="img/avatar-3.png" alt="Avatar" />
</figure>
- <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;">
- <img src="img/avatar-4.png" alt="Avatar" />
+ <figure class="avatar avatar-sm">
+ <img src="img/avatar-4.png" alt="Avatar SM" />
</figure>
- <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;">
- <img src="img/avatar-5.png" alt="Avatar" />
+ <figure class="avatar avatar-xs">
+ <img src="img/avatar-5.png" alt="Avatar XS" />
</figure>
</div>
<div class="column col-6 col-xs-12">
@@ -608,6 +604,36 @@
&lt;<span class="tag">/figure</span>&gt;
</code></pre>
+ <div class="columns">
+ <div class="column col-6 col-xs-12">
+ <figure class="avatar avatar-xl" data-initial="YZ">
+ <i class="avatar-presence online"></i>
+ </figure>
+ <figure class="avatar avatar-lg" data-initial="YZ">
+ <i class="avatar-presence busy"></i>
+ </figure>
+ <figure class="avatar" data-initial="YZ">
+ <i class="avatar-presence away"></i>
+ </figure>
+ <figure class="avatar avatar-sm" data-initial="YZ">
+ <i class="avatar-presence offline"></i>
+ </figure>
+ <figure class="avatar avatar-xs" data-initial="YZ">
+ <i class="avatar-presence online"></i>
+ </figure>
+ </div>
+ </div>
+ <div class="docs-note">
+ <p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p>
+ </div>
+
+<!-- avatars example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
+ &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
+ &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-presence online&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+&lt;<span class="tag">/figure</span>&gt;
+</code></pre>
+
</div>
<div id="badges" class="container">
@@ -998,36 +1024,36 @@
</div>
<div class="columns">
<div class="column col-12">
- <label class="chip">
+ <span class="chip">
Crime
- <button class="btn btn-clear"></button>
- </label>
- <label class="chip">
+ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+ </span>
+ <span class="chip">
Drama
- <button class="btn btn-clear"></button>
- </label>
- <label class="chip">
+ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+ </span>
+ <span class="chip">
Biography
- <button class="btn btn-clear"></button>
- </label>
- <label class="chip">
+ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+ </span>
+ <span class="chip">
Mystery
- <button class="btn btn-clear"></button>
- </label>
+ <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+ </span>
</div>
<div class="column col-12">
- <label class="chip">
+ <span class="chip">
<figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
Tony Stark
- </label>
- <label class="chip">
+ </span>
+ <span class="chip">
<img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
Thor Odinson
- </label>
- <label class="chip">
+ </span>
+ <span class="chip">
<img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" />
Steve Rogers
- </label>
+ </span>
</div>
</div>
<div class="docs-note">
@@ -1035,16 +1061,16 @@
</div>
<!-- chips example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
Crime
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/label</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">/span</span>&gt;
-&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> /&gt;
Yan Zhu
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/label</span>&gt;</code>
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
+&lt;<span class="tag">/span</span>&gt;</code>
</pre>
</div>
generated by cgit v1.3.1-23-gd82d (git 2.54.0) at 2026-11-08 17:00:29 +0000