jade/page-contents/chips_content.html - v1-dev - githubmirror/materialize

jade/page-contents/chips_content.html
322 строки9 KB
Chang Alan
changed carbon ad code
25 май 2018, 00:33
25 май 2018, 00:33c72138e
<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"></div>
          <br>
          <p class="caption">Set initial tags.</p>
          <div class="chips chips-initial"></div>
          <br>
          <p class="caption">Use placeholders and override hint texts.</p>
          <div class="chips chips-placeholder"></div>
          <br>
          <p class="caption">Use autocomplete with chips.</p>
          <div class="chips chips-autocomplete"></div>
      </div>

      <div id="options" class="section scrollspy">
        <pre><code class="language-markup">
  &lt;!-- Default with no input (automatically generated)  -->
  &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>

  &lt;!-- Customizable input  -->
  &lt;div class="chips">
    &lt;input class="custom-class">
  &lt;/div>
        </code></pre>
        <h3 class="header">Initialization</h3>
        <pre><code class="language-javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.chips');
    var instances = M.Chips.init(elems, 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
  };
        </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.Chips.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.

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

        <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.addChip({
    tag: 'chip content',
    image: '', // optional
  });
        </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.deleteChip(3); // Delete 3rd chip.
        </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.selectChip(2); // Select 2nd chip
        </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>
            <tr>
              <td>autocomplete</td>
              <td>Object</td>
              <td>
                <a href="autocomplete.html">Autocomplete</a> instance, if any.</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?serve=CKYIK27J&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="#options">Options</a>
            </li>
            <li>
              <a href="#methods">Methods</a>
            </li>
            <li>
              <a href="#properties">Properties</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>