diff options
Add more Docs content
1 files changed, 60 insertions, 34 deletions
| -rw-r--r-- | docs/elements.html | 94 |
diff --git a/docs/elements.html b/docs/elements.html index d141b5e..f552950 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -564,41 +564,10 @@ <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p> </div> - <div class="docs-note"> - <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for a disabled button.</p> - </div> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn disabled" tabindex="-1">default disabled</button> - <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button> - <button class="btn btn-link" disabled tabindex="-1">link disabled</button> - </div> - </div> - - <div class="docs-note"> - <p>A button with the <code>loading</code> class can show loading indicator.</p> - </div> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn loading">default button</button> - <button class="btn btn-primary loading">primary button</button> - <button class="btn btn-link loading">link button</button> - </div> - </div> - <!-- buttons example --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>primary button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> - -<span class="com"><!-- buttons with disabled state --></span> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> - -<span class="com"><!-- a button with loading state --></span> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </code></pre> <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4> @@ -653,13 +622,70 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> </code></pre> + <h4 id="buttons-states" class="s-subtitle">Button states</h4> + + <div class="docs-note"> + <p>Add the <code>active</code> class for active button state style.</p> + </div> + + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn active">default active</button> + <button class="btn btn-primary active">primary active</button> + <button class="btn btn-link active">link active</button> + </div> + </div> + +<!-- buttons example --> +<pre class="code" data-lang="HTML"><code> +<span class="com"><!-- buttons with disabled state --></span> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> +</code></pre> + + <div class="docs-note"> + <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p> + </div> + + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn disabled" tabindex="-1">default disabled</button> + <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button> + <button class="btn btn-link" disabled tabindex="-1">link disabled</button> + </div> + </div> + +<!-- buttons example --> +<pre class="code" data-lang="HTML"><code> +<span class="com"><!-- buttons with disabled state --></span> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> +</code></pre> + + <div class="docs-note"> + <p>A button with the <code>loading</code> class can show loading indicator.</p> + </div> + + <div class="columns"> + <div class="column col-xs-12"> + <button class="btn loading">default button</button> + <button class="btn btn-primary loading">primary button</button> + <button class="btn btn-link loading">link button</button> + </div> + </div> + +<!-- buttons example --> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- a button with loading state --></span> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> +</code></pre> + <h4 id="buttons-groups" class="s-subtitle">Button groups</h4> <div class="columns"> <div class="column col-md-12"> <div class="btn-group"> - <button class="btn tooltip" data-tooltip="Tooltip text">first button</button> - <button class="btn tooltip" data-tooltip="Tooltip text">second button</button> - <button class="btn tooltip" data-tooltip="Tooltip text">third button</button> + <button class="btn">first button</button> + <button class="btn">second button</button> + <button class="btn">third button</button> </div> </div> <div class="column col-md-12"> |