Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

form helpers, input mask, tables, typography

Browse Source
This commit is contained in:
Martyna
2020-03-24 20:29:25 +01:00
parent a58ba1ea25
commit ac322b8d8d
4 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/_docs/form-helpers.md
View File

@@ -1,10 +1,13 @@
---
title: Form helpers
description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear.
---
## Input help
Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.
{% capture code %}
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
{% endcapture %}

3
pages/_docs/input-mask.md
View File

@@ -1,10 +1,13 @@
---
title: Input mask
description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
---
## Default markup
Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
{% capture code %}
<label class="form-label">Telephone mask</label>
{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}

8
pages/_docs/tables.md
View File

@@ -1,13 +1,14 @@
---
title: Tables
menu: docs.tables
description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
bootstrap-link: content/tables/
---
## Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.
The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.
The `.table` class adds basic styling to a table:
@@ -17,10 +18,9 @@ The `.table` class adds basic styling to a table:
{% include example.html code=code %}
## Responsive tables
Across each breakpoint, use `.table-responsive` class for horizontal scrolling tables. Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a specific breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
{% capture code %}
<table class="table table-responsive">
@@ -48,7 +48,7 @@ Across each breakpoint, use `.table-responsive` class for horizontal scrolling t
## No wrap
Prevents table cell content from wrapping to another line.
If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
{% capture code %}
{% include ui/table.html nowrap=true responsive=true %}

28
pages/_docs/typography.md
View File

@@ -1,13 +1,15 @@
---
title: Typography
menu: docs.typography
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
bootstrap-link: content/typography/
---
## Headings
Use HTML headings to organize content on your website and make the structure clear and user-friendly.
{% capture code %}
{% for i in (1..6) %}<h{{ i }}>H{{ i }} Heading</h{{ i }}>
{% endfor %}
@@ -17,6 +19,8 @@ bootstrap-link: content/typography/
## Paragraphs
Organize longer pieces of text into paragraphs using the `p` tag.
{% capture code %}
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
@@ -26,6 +30,8 @@ bootstrap-link: content/typography/
## Semantic text elements
Use a variety of semantic text elements, depending of how you want to display particular fragments of content.
{% capture code %}
<abbr title="Internationalization">I18N</abbr>{% hide %} <code class="ml-2">abbr</code><br/>{% endhide %}
<strong>Bold</strong>{% hide %} <code class="ml-2">strong</code> <code>b</code><br/>{% endhide %}
@@ -50,6 +56,8 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
## Horizontal rules
Use the `hr` tag to represent a thematic break between paragraphs within one section.
{% capture code %}
<hr>
{% endcapture %}
@@ -58,6 +66,8 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
## Horizontal rules with label
You can also add a label to a horizontal rule and align it as you see fit.
{% capture code %}
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
@@ -86,7 +96,7 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
## Optimized for different alphabets
Tabler has been optimized to correctly display content in any language. The Tabler supports most Asian, African and Middle Eastern languages.
Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
{% capture code %}
<h5>Chinese</h5>
@@ -124,7 +134,7 @@ Tabler has been optimized to correctly display content in any language. The Tabl
## Text transform
Transform text in components with text capitalization classes.
Transform the content of components with text capitalization classes.
{% capture code %}
<p class="text-lowercase">Lowercased text.</p>
@@ -136,7 +146,7 @@ Transform text in components with text capitalization classes.
## Letter spacing
Utilities for controlling the tracking (letter spacing) of an element.
Control the tracking (letter spacing) of an element and make it tight, wide or normal.
{% capture code %}
<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
@@ -146,9 +156,9 @@ Utilities for controlling the tracking (letter spacing) of an element.
{% include example.html code=code %}
## Line Height
## Line height
Utilities for controlling the leading (line height) of an element.
Control the leading (line height) of an element.
{% capture code %}
<p class="lh-1">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
@@ -161,9 +171,9 @@ Utilities for controlling the leading (line height) of an element.
## Antialiasing
Utilities for controlling the font smoothing of an element.
Control the font smoothing of an element.
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` render without antialiasing.
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
{% capture code %}
<div class="antialiased">Text with antialiasing</div>
@@ -174,7 +184,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
## Markdown elements
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It can handle almost any HTML tag.
{% capture code %}
<div class="markdown">