mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-02 21:04:13 +03:00
bs4 docs sync
This commit is contained in:
parent
d54249d778
commit
12d1ea3e71
|
@ -125,7 +125,7 @@ Below is a complete list of the specific from controls supported by Bootstrap an
|
|||
Textual inputs
|
||||
</td>
|
||||
<td>
|
||||
{% markdown %}`text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %}
|
||||
{% markdown %}`text`, `password`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
@ -348,6 +348,14 @@ Activates a tab element and content container. Tab should have either a `data-ta
|
|||
</script>
|
||||
{% endhighlight %}
|
||||
|
||||
#### .tab('show')
|
||||
|
||||
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
|
||||
|
||||
{% highlight js %}
|
||||
$('#someTab').tab('show')
|
||||
{% endhighlight %}
|
||||
|
||||
### Events
|
||||
|
||||
When showing a new tab, the events fire in the following order:
|
||||
|
|
|
@ -22,7 +22,7 @@ Provide pagination links for your site or app with the multi-page pagination com
|
|||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Default pagination
|
||||
## Overview
|
||||
|
||||
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
|
||||
|
||||
|
@ -50,7 +50,7 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
|||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Disabled and active states
|
||||
## Disabled and active states
|
||||
|
||||
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
|
||||
|
||||
|
@ -60,7 +60,6 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
|
|||
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
|
@ -104,7 +103,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
|
|||
{% endexample %}
|
||||
|
||||
|
||||
### Sizing
|
||||
## Sizing
|
||||
|
||||
Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
|
||||
|
||||
|
@ -151,47 +150,3 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
|||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
## Pager
|
||||
|
||||
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
|
||||
|
||||
### Default example
|
||||
|
||||
By default, the pager centers links.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li><a href="#">Previous</a></li>
|
||||
<li><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Aligned links
|
||||
|
||||
Alternatively, you can align each link to the sides:
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="pager-prev"><a href="#">Older</a></li>
|
||||
<li class="pager-next"><a href="#">Newer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Optional disabled state
|
||||
|
||||
Pager links also support the `.disabled` class (though note that the same advice about keyboard focus as for the default pagination applies here as well).
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="pager-prev disabled"><a href="#" tabindex="-1">Older</a></li>
|
||||
<li class="pager-next"><a href="#">Newer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
|
|
@ -236,7 +236,7 @@ These changes, and more, are demonstrated below.
|
|||
|
||||
<p>
|
||||
<label for="time">Example temporal</label>
|
||||
<input type="datetime" id="time">
|
||||
<input type="datetime-local" id="time">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
Loading…
Reference in New Issue
Block a user