metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
302 lines (273 loc) • 14.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="Enhancement for standard HTML input[type=text] to tag input - managing tags. Excellent to create the element for pin enter. The most popular HTML, CSS, and JS library in Metro style.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Tag input - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Tag input</a></li>
<li class="toc-entry"><a href="#_input_about">About</a></li>
<li class="toc-entry"><a href="#_input_init_values">Init value</a></li>
<li class="toc-entry"><a href="#_input_tag_trigger">Tag trigger</a></li>
<li class="toc-entry"><a href="#_input_max_tags">Max tags</a></li>
<li class="toc-entry"><a href="#_input_random_color">Ransom colors</a></li>
<li class="toc-entry"><a href="#_input_options">Options</a></li>
<li class="toc-entry"><a href="#_input_events">Events</a></li>
<li class="toc-entry"><a href="#_input_methods">Methods</a></li>
<li class="toc-entry"><a href="#_input_customize">Customize</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Tag input</h1>
<p class="text-leader">
Enhancement for standard HTML input[type=text] to tag input - managing tags.
</p>
<!-- ads-html -->
<h3 id="_input_about">About</h3>
<p>
To create <code>tag input</code>, add attribute <code>data-role="taginput"</code> to HTML input element.
You must assign role <code>input</code> to text input <code>input type="text"</code>.
Enter tag name and press <kbd>Enter</kbd> or <kbd>,</kbd>
</p>
<div class="example">
<input type="text" data-role="taginput">
</div>
<pre><code>
<input type="text" data-role="taginput">
</code></pre>
<h3 id="_input_init_values">Init values</h3>
<p>
You can preset values for <code>tag-input</code>.
To preset values use attribute <code>value</code>.
Values can be separated with symbol, defined with attribute <code>data-tag-separator</code>.
</p>
<div class="example">
<input type="text" data-role="taginput" value="css3,javascript,html5,Metro 4">
</div>
<pre><code>
<input type="text" data-role="taginput" value="css3,javascript,html5,Metro 4">
</code></pre>
<h3 id="_input_tag_trigger">Tag trigger</h3>
<p>
To set trigger for creating tags, use attribute <code>data-tag-trigger</code>.
By default this attribute have a next value <code>13, 188</code> - <kbd>Enter</kbd>, <kbd>,</kbd>.
You can set your own trigger with this attribute.
</p>
<div class="example">
<input type="text" data-role="taginput" data-tag-trigger="32">
<p class="text-small">Use <kbd>Space</kbd> to add tags</p>
</div>
<pre><code>
<input type="text" data-role="taginput" data-tag-trigger="32">
</code></pre>
<h3 id="_input_max_tags">Max tags</h3>
<p>
You can set a maximum count of tag, who can be created. To set maximum, use attribute <code>data-max-tags</code>.
</p>
<div class="example">
<input type="text" data-role="taginput" data-max-tags="5">
<p class="text-small">You can add 5 tags</p>
</div>
<pre><code>
<input type="text" data-role="taginput" data-max-tags="5">
</code></pre>
<h3 id="_input_random_color">Random colors for tags</h3>
<p>
With attribute <code>data-random-color="true"</code>, you can set special mode for component when tag have random colors.
</p>
<div class="example">
<input type="text" data-role="taginput" data-random-color="true">
<p class="text-small">Tags have a random color</p>
</div>
<pre><code>
<input type="text" data-role="taginput" data-random-color="true">
</code></pre>
<!-- ads-html -->
<h3 id="_input_options">Options</h3>
<table class="table cell-border table-border options-table mt-4">
<thead>
<tr>
<th>Option</th>
<th>Data-*</th>
<th>Default</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>randomColor</code></td>
<td><code>data-random-color</code></td>
<td>false</td>
<td>User random color for tags</td>
</tr>
<tr>
<td><code>maxTags</code></td>
<td><code>data-max-tags</code></td>
<td>0</td>
<td>If value more then 0, user can't create tags more then this value</td>
</tr>
<tr>
<td><code>tagSeparator</code></td>
<td><code>data-tag-separator</code></td>
<td>,</td>
<td>Default - comma, tags separator for result value</td>
</tr>
<tr>
<td><code>tagTrigger</code></td>
<td><code>data-tag-trigger</code></td>
<td>13, 188</td>
<td>Key codes for triggering tags creating, Default - <kbd>Enter</kbd>, <kbd>,</kbd></td>
</tr>
</tbody>
</table>
<h3 id="_input_events">Events</h3>
<table class="table cell-border table-border options-table mt-4">
<thead>
<tr>
<th>Event</th>
<th>Data-*</th>
<th>Context</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>onBeforeTagAdd(val, values)</code></td>
<td><code>data-on-before-tag-add</code></td>
<td>input</td>
<td>If this function return false, tag can't be added</td>
</tr>
<tr>
<td><code>onTagAdd(tag, val, values)</code></td>
<td><code>data-on-tag-add</code></td>
<td>input</td>
<td></td>
</tr>
<tr>
<td><code>onBeforeTagRemove(tag, val, values)</code></td>
<td><code>data-on-before-tag-remove</code></td>
<td>input</td>
<td>If this function return false, tag can't be removed</td>
</tr>
<tr>
<td><code>onTagRemove(tag, val, values)</code></td>
<td><code>data-on-tag-remove</code></td>
<td>input</td>
<td></td>
</tr>
<tr>
<td><code>onTag(tag, val, values)</code></td>
<td><code>data-on-tag</code></td>
<td>input</td>
<td></td>
</tr>
<tr>
<td><code>onTagInputCreate(input)</code></td>
<td><code>data-on-tag-input-create</code></td>
<td>input</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="_input_methods">Methods</h3>
<p>
You can use methods to interact with input component:
<code>tags()</code>,
<code>clear()</code>,
<code>val()</code>,
<code>val(values_array)</code>.
</p>
<pre><code>
var input = $(el).data('taginput');
input.clear();
</code></pre>
<h3 id="_input_customize">Customize</h3>
<p>
You can customize your input with special attributes:
</p>
<table class="table cell-border table-border options-table mt-4">
<thead>
<tr>
<th>Option</th>
<th>Data-*</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>clsTag</code></td>
<td><code>data-cls-tag</code></td>
<td>Additional classes for tag.</td>
</tr>
<tr>
<td><code>clsTagTitle</code></td>
<td><code>data-cls-tag-title</code></td>
<td>Additional classes for tag title.</td>
</tr>
<tr>
<td><code>clsTagRemover</code></td>
<td><code>data-cls-tag-remover</code></td>
<td>Additional classes for tag remove button.</td>
</tr>
</tbody>
</table>
<div class="example">
<input type="text" data-role="taginput" data-cls-tag-title="text-bold fg-white" data-cls-tag="bg-olive" data-cls-tag-remover="bg-darkOlive fg-white" value="css, javascript, html, Metro 4">
</div>
<pre><code>
<input type="text"
data-role="taginput"
data-cls-tag-title="text-bold fg-white"
data-cls-tag="bg-olive"
data-cls-tag-remover="bg-darkOlive fg-white"
value="css, javascript, html, Metro 4">
</code></pre>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>