diff options
Update Docs examples
4 files changed, 74 insertions, 8 deletions
| -rw-r--r-- | docs/elements/code.html | 9 | ||||
| -rw-r--r-- | docs/elements/forms.html | 6 | ||||
| -rw-r--r-- | docs/elements/labels.html | 1 | ||||
| -rw-r--r-- | docs/elements/tables.html | 66 |
diff --git a/docs/elements/code.html b/docs/elements/code.html index 40988a3..fe9ec24 100644 --- a/docs/elements/code.html +++ b/docs/elements/code.html @@ -202,8 +202,13 @@ </div> </div> <p>Code is used for styling inline and multiline code snippets.</p> - <p>For inline code, you can use the <code> element. - For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. + <h4 class="s-subtitle" id="code-inline">Inline code<a class="anchor" href="#code-inline" aria-hidden="true">#</a></h4> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- inline code --></span> +<span class="hljs-tag"><<span class="hljs-name">code</span>></span>code<span class="hljs-tag"></<span class="hljs-name">code</span>></span> +</code></pre> + <p>For inline code, you can use the <code> element. </p> + <h4 class="s-subtitle" id="code-snippet">Code snippet<a class="anchor" href="#code-snippet" aria-hidden="true">#</a></h4> + <p>For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right. </p> <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- code snippets --></span> diff --git a/docs/elements/forms.html b/docs/elements/forms.html index 2af7197..08543d3 100644 --- a/docs/elements/forms.html +++ b/docs/elements/forms.html @@ -202,6 +202,7 @@ </div> </div> <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p> + <h4 class="s-subtitle" id="forms-input">Form input<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -220,6 +221,7 @@ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <h4 class="s-subtitle" id="forms-textarea">Form textarea<a class="anchor" href="#forms-textarea" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -234,6 +236,7 @@ <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <h4 class="s-subtitle" id="forms-select">Form select<a class="anchor" href="#forms-select" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -264,6 +267,7 @@ <span class="hljs-tag"></<span class="hljs-name">select</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <h4 class="s-subtitle" id="forms-radio">Form radio<a class="anchor" href="#forms-radio" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <form> @@ -292,6 +296,7 @@ <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <h4 class="s-subtitle" id="forms-switch">Form switch<a class="anchor" href="#forms-switch" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -314,6 +319,7 @@ <span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <h4 class="s-subtitle" id="forms-checkbox">Form checkbox<a class="anchor" href="#forms-checkbox" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> diff --git a/docs/elements/labels.html b/docs/elements/labels.html index 11dc596..7cbcab0 100644 --- a/docs/elements/labels.html +++ b/docs/elements/labels.html @@ -212,6 +212,7 @@ <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span>default label<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>></span>primary label<span class="hljs-tag"></<span class="hljs-name">span</span>></span> </code></pre> + <h4 class="s-subtitle" id="labels-rounded">Rounded labels<a class="anchor" href="#labels-rounded" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div> </div> diff --git a/docs/elements/tables.html b/docs/elements/tables.html index 4458116..b49a6c5 100644 --- a/docs/elements/tables.html +++ b/docs/elements/tables.html @@ -204,7 +204,7 @@ <p>Tables include default styles for tables and data sets.</p> <div class="docs-demo columns"> <div class="column col-12"> - <table class="table table-striped"> + <table class="table"> <thead> <tr> <th>Name</th> @@ -238,8 +238,62 @@ </div> </div> <p>Add the <code>table</code> class to any <table> element. - The class will add padding, border and emphasized table header. - Use the <code>table-striped</code> class to <table> to add zebra striped style. + The class will add padding, border and emphasized table header. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">thead</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>name<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>genre<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>release date<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"></<span class="hljs-name">thead</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>The Shawshank Redemption<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Crime, Drama<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>14 October 1994<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span> +<span class="hljs-tag"></<span class="hljs-name">table</span>></span> +</code></pre> + <h4 class="s-subtitle" id="tables-striped">Striped tables<a class="anchor" href="#tables-striped" aria-hidden="true">#</a></h4> + <div class="docs-demo columns"> + <div class="column col-12"> + <table class="table table-striped table-hover"> + <thead> + <tr> + <th>Name</th> + <th>Genre</th> + <th>Release date</th> + </tr> + </thead> + <tbody> + <tr> + <td>The Shawshank Redemption</td> + <td>Crime, Drama</td> + <td>14 October 1994</td> + </tr> + <tr class="active"> + <td>The Godfather</td> + <td>Crime, Drama</td> + <td>24 March 1972</td> + </tr> + <tr> + <td>Schindler's List</td> + <td>Biography, Drama, History</td> + <td>4 February 1994</td> + </tr> + <tr> + <td>Se7en</td> + <td>Crime, Drama, Mystery</td> + <td>22 September 1995</td> + </tr> + </tbody> + </table> + </div> + </div> + <p>Use the <code>table-striped</code> class to <table> to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. </p> <p>Use the <code>active</code> class to make <tr> element highlighted.</p> @@ -259,11 +313,11 @@ <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span> <span class="hljs-tag"></<span class="hljs-name">table</span>></span> - </code></pre> + <h4 class="s-subtitle" id="tables-scroll">Scrollable tables<a class="anchor" href="#tables-scroll" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-12"> - <table class="table table-striped table-scroll"> + <table class="table table-scroll"> <thead> <tr> <th>Name</th> @@ -312,7 +366,7 @@ </div> </div> <p>Add the <code>table-scroll</code> class to <table> to have a horizontally scrollable table.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-striped table-scroll"</span>></span> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-scroll"</span>></span> ... <span class="hljs-tag"></<span class="hljs-name">table</span>></span> </code></pre> |