chips.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
    <title>Chips - Materialize</title>
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
    <!--  Android 5 Chrome Color-->
    <meta name="theme-color" content="#EE6E73">
    <!-- CSS-->
    <link href="css/prism.css" rel="stylesheet">
    <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script>
      window.liveSettings = {
        api_key: "a0b49b34b93844c38eaee15690d86413",
        picker: "bottom-right",
        detectlang: true,
        dynamic: true,
        autocollect: true
      };
    </script>
    <script src="//cdn.transifex.com/live.js"></script>
  </head>
  <body class="rtl">
    <header>
      <nav class="top-nav">
        <div class="container">
          <div class="nav-wrapper">
            <div class="row">
              <div class="col s12 m10 offset-m1">
                <h1 class="header">Chips</h1>
              </div>
            </div>
          </div>
        </div>
      </nav>
      <div class="container"><a href="#" data-target="nav-mobile" class="button-collapse top-nav sidenav-trigger full hide-on-large-only"><i class="material-icons">menu</i></a></div>
      <ul id="nav-mobile" class="sidenav sidenav-fixed">
        <li class="logo"><a id="logo-container" href="/" class="brand-logo">
            <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
        <li class="search">
          <div class="search-wrapper">
            <input id="search" placeholder="Search"><i class="material-icons">search</i>
            <div class="search-results"></div>
          </div>
        </li>
        <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
        <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
        <li class="no-padding">
          <ul class="collapsible collapsible-accordion">
            <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="color.html">Color</a></li>
                  <li><a href="grid.html">Grid</a></li>
                  <li><a href="helpers.html">Helpers</a></li>
                  <li><a href="media-css.html">Media</a></li>
                  <li><a href="pulse.html">Pulse</a></li>
                  <li><a href="sass.html">Sass</a></li>
                  <li><a href="shadow.html">Shadow</a></li>
                  <li><a href="table.html">Table</a></li>
                  <li><a href="css-transitions.html">Transitions</a></li>
                  <li><a href="typography.html">Typography</a></li>
                </ul>
              </div>
            </li>
            <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="badges.html">Badges</a></li>
                  <li><a href="buttons.html">Buttons</a></li>
                  <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
                  <li><a href="cards.html">Cards</a></li>
                  <li><a href="collections.html">Collections</a></li>
                  <li><a href="footer.html">Footer</a></li>
                  <li><a href="icons.html">Icons</a></li>
                  <li><a href="navbar.html">Navbar</a></li>
                  <li><a href="pagination.html">Pagination</a></li>
                  <li><a href="preloader.html">Preloader</a></li>
                </ul>
              </div>
            </li>
            <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="carousel.html">Carousel</a></li>
                  <li><a href="collapsible.html">Collapsible</a></li>
                  <li><a href="dropdown.html">Dropdown</a></li>
                  <li><a href="feature-discovery.html">FeatureDiscovery</a></li>
                  <li><a href="media.html">Media</a></li>
                  <li><a href="modals.html">Modals</a></li>
                  <li><a href="parallax.html">Parallax</a></li>
                  <li><a href="pushpin.html">Pushpin</a></li>
                  <li><a href="scrollspy.html">Scrollspy</a></li>
                  <li><a href="sidenav.html">Sidenav</a></li>
                  <li><a href="tabs.html">Tabs</a></li>
                  <li><a href="toasts.html">Toasts</a></li>
                  <li><a href="tooltips.html">Tooltips</a></li>
                  <li><a href="waves.html">Waves</a></li>
                </ul>
              </div>
            </li>
            <li class="bold active"><a class="collapsible-header waves-effect waves-teal">Forms</a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="autocomplete.html">Autocomplete</a></li>
                  <li><a href="checkboxes.html">Checkboxes</a></li>
                  <li class="active"><a href="chips.html">Chips</a></li>
                  <li><a href="pickers.html">Pickers</a></li>
                  <li><a href="radio-buttons.html">Radio Buttons</a></li>
                  <li><a href="range.html">Range</a></li>
                  <li><a href="select.html">Select</a></li>
                  <li><a href="switches.html">Switches</a></li>
                  <li><a href="text-inputs.html">Text Inputs</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </li>
        <li class="bold"><a href="mobile.html" class="waves-effect waves-teal">Mobile</a></li>
        <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
        <li class="bold"><a href="themes.html" class="waves-effect waves-teal">Themes<span class="new badge"></span></a></li>
      </ul>
      <div class="patreon-ad"><a href="https://www.patreon.com/materialize" target="_blank" class="waves-effect">Become a Patron</a></div>
    </header>
    <main><div class="container">
  <div class="row">

    <div class="col s12 m8 offset-m1 xl7 offset-xl1">

      <div id="introduction" class="section scrollspy">
        <p class="caption">
          Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
        </p>
        <div class="chip">
          <img src="images/yuna.jpg" alt="Contact Person">
          Jane Doe
        </div>
        <div class="chip">
          Tag
          <i class="close material-icons">close</i>
        </div>
      </div>

      <div id="contact" class="section scrollspy">
        <h3 class="header">Contacts</h3>
         <p class="caption">
          To create a contact chip just add an img inside.
        </p>
        <pre><code class="language-markup">
  &lt;div class="chip">
    &lt;img src="images/yuna.jpg" alt="Contact Person">
    Jane Doe
  &lt;/div>
        </code></pre>
      </div>

      <div id="tag" class="section scrollspy">
        <h3 class="header">Tags</h3>
         <p class="caption">
          To create a tag chip just add a close icon inside with the class <code class="language-markup">close</code>.
        </p>
        <pre><code class="language-markup">
  &lt;div class="chip">
    Tag
    &lt;i class="close material-icons">close&lt;/i>
  &lt;/div>
        </code></pre>
      </div>

      <div id="basic" class="section scrollspy">
        <h3 class="header">Javascript Plugin</h4>
        <p class="caption">To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by using your delete button.</p>
        <div class="chips"><input></div>
        <br>
        <p class="caption">Set initial tags.</p>
        <div class="chips chips-initial"><input></div>
        <br>
        <p class="caption">Use placeholders and override hint texts.</p>
        <div class="chips chips-placeholder"><input></div>
        <br>
        <p class="caption">Use autocomplete with chips.</p>
        <div class="chips chips-autocomplete"><input></div>
      </div>

      <div id="properties" class="section scrollspy">
        <pre><code class="language-markup">
  &lt;div class="chips">&lt;/div>
  &lt;div class="chips chips-initial">&lt;/div>
  &lt;div class="chips chips-placeholder">&lt;/div>
  &lt;div class="chips chips-autocomplete">&lt;/div>
        </code></pre>
        <h3 class="header">Initialization</h3>
        <pre><code class="language-javascript">
  var elem = document.querySelector('.chips');
  var instance = new M.Chips(elem, options);

  // Or with jQuery

  $('.chips').chips();
  $('.chips-initial').chips({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });
  $('.chips-placeholder').chips({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
  });
  $('.chips-autocomplete').chips({
    autocompleteOptions: {
      data: {
        'Apple': null,
        'Microsoft': null,
        'Google': null
      },
      limit: Infinity,
      minLength: 1
    }
  });
        </code></pre>
        <p class="caption">Chip data object</p>
        <pre><code class="language-javascript">
  var chip = {
    tag: 'chip content',
    image: '', //optional
    id: 1, //optional
  };
        </code></pre>

        <br>
        <h3 class="header">Options</h3>
        <table class="table highlight">
          <thead>
            <tr>
              <th>Name</th>
              <th>Type</th>
              <th>Default</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>data</td>
              <td>Array</td>
              <td>[]</td>
              <td>Set the chip data (look at the Chip data object)</td>
            </tr>
            <tr>
              <td>placeholder</td>
              <td>String</td>
              <td>''</td>
              <td>Set first placeholder when there are no tags.</td>
            </tr>
            <tr>
              <td>secondaryPlaceholder</td>
              <td>String</td>
              <td>''</td>
              <td>Set second placeholder when adding additional tags.</td>
            </tr>
            <tr>
              <td>autocompleteOptions</td>
              <td>Object</td>
              <td>{}</td>
              <td>Set autocomplete options.</td>
            </tr>
            <tr>
              <td>limit</td>
              <td>Integer</td>
              <td>Infinity</td>
              <td>Set chips limit.</td>
            </tr>
            <tr>
              <td>onChipAdd</td>
              <td>Function</td>
              <td>null</td>
              <td>Callback for chip add.</td>
            </tr>
            <tr>
              <td>onChipSelect</td>
              <td>Function</td>
              <td>null</td>
              <td>Callback for chip select.</td>
            </tr>
            <tr>
              <td>onChipDelete</td>
              <td>Function</td>
              <td>null</td>
              <td>Callback for chip delete.</td>
            </tr>
            <tr>
          </tbody>
        </table>
      </div>

      <div id="methods" class="section scrollspy">
        <h3 class="header">Methods</h3>
        <p class="caption">
          Use these methods to interact with chips.
        </p>

        <blockquote>
          <p>Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this: </p>
          <pre><code class="language-javascript col s12">
    var instance = M.Carousel.getInstance(elem);

    /* jQuery Method Calls
      You can still use the old jQuery plugin method calls.
      But you won't be able to access instance properties.

      $('.carousel').carousel('methodName');
      $('.carousel').carousel('methodName', paramName);
    */
          </code></pre>
        </blockquote>

        <h5 class="method-header">
  .next();
        </h5>
        <p>Move carousel to next slide or go forward a given amount of slides.</p>
        <h6>Arguments</h6>
        <p><b>Integer (optional):</b> How many times the carousel slides.</p>
        <pre><code class="language-javascript col s12">
  instance.next();
  instance.next(3); // Move next n times.
        </code></pre>
        <br>

        <h5 class="method-header">
  .addChip();
        </h5>
        <p>Add chip to input.</p>
        <h6>Arguments</h6>
        <p><b>Chip:</b> Chip data object.</p>
        <pre><code class="language-javascript col s12">
  instance.prev();
  instance.prev(3); // Move previous n times.
        </code></pre>
        <br>

        <h5 class="method-header">
  .deleteChip();
        </h5>
        <p>Delete nth chip.</p>
        <h6>Arguments</h6>
        <p><b>Integer:</b> Index of chip.</p>
        <pre><code class="language-javascript col s12">
  instance.set();
  instance.set(3); // Set to nth slide.
        </code></pre>
        <br>

        <h5 class="method-header">
  .selectChip();
        </h5>
        <p>Select nth chip.</p>
        <h6>Arguments</h6>
        <p><b>Integer:</b> Index of chip.</p>
        <pre><code class="language-javascript col s12">
  instance.destroy();
        </code></pre>

      </div>

      <div id="properties" class="scrollspy section">
        <h3 class="header">Properties</h3>
        <table class="striped">
          <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Description</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>el</td>
              <td>Element</td>
              <td>The DOM element the plugin was initialized with.</td>
            </tr>
            <tr>
              <td>options</td>
              <td>Object</td>
              <td>The options the instance was initialized with.</td>
            </tr>
            <tr>
              <td>chipsData</td>
              <td>Array</td>
              <td>Array of the current chips data.</td>
            </tr>
            <tr>
              <td>hasAutocomplete</td>
              <td>Boolean</td>
              <td>If the chips has autocomplete enabled.</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>

    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 xl3 offset-xl1">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#contact">Contacts</a></li>
            <li><a href="#tag">Tags</a></li>
            <li><a href="#basic">Plugin</a></li>
            <li><a href="#properties">Options</a></li>
            <li><a href="#events">Events</a></li>
            <li><a href="#methods">Methods</a></li>
            <li><a href="#properties">Properties</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

    </main>    <footer class="page-footer docs-footer">
      <div class="container">
        <div class="row" style="margin-bottom: 0;">
          <div class="col s12 m10 offset-m1">
            <div class="row">
              <div class="col l4 s12">
                <h5>Help Materialize Grow</h5>
                <p class="grey-text text-darken-2">We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.</p>
                <a class="btn waves-effect waves-light red lighten-2" href="/support-us.html">Support Us</a>

              </div>
              <div class="col l4 s12">
                <h5>Join the Discussion</h5>
                <p class="grey-text text-darken-2">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
                <a class="btn waves-effect waves-light red lighten-2" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
              </div>
              <div class="col l4 s12" style="overflow: hidden;">
                <h5>Connect</h5>
                <iframe src="https://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
                <br>
                <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
                <br>
                <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
              </div>
            </div>
            <div class="footer-copyright">
              © 2014-2017 Materialize, All rights reserved.
              <a class="grey-text text-darken-1 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <!--  Scripts-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>if (!window.jQuery) { document.write('<script src="bin/jquery-3.2.1.min.js"><\/script>'); }
    </script>
    <script src="js/jquery.timeago.min.js"></script>
    <script src="js/prism.js"></script>
    <script src="jade/lunr.min.js"></script>
    <script src="jade/search.js"></script>
    <script src="bin/materialize.js"></script>
    <script src="js/init.js"></script>
    <!-- Twitter Button -->
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

    <!-- Google Plus Button-->
    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <!--  Google Analytics  -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-56218128-1', 'auto');
    ga('require', 'displayfeatures');
    ga('send', 'pageview');
    </script>

  </body>
</html>