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

jade/page-contents/select_content.html
392 строки14 KB
Alvin Wang
Fix syntax in js init doc examples
03 май 2018, 01:40
03 май 2018, 01:401f5a935
<div class="container">
  <div class="row">

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

      <div id="introduction" class="section scrollspy">
        <p> Select allows user input through specified options. Make sure you wrap it in a
          <code class="language-markup">.input-field</code> for proper alignment with other text fields. Remember that this is a jQuery plugin so make sure you
          <a href="#initialization">initialize</a> this in your document ready. </p>
        <div class="row">
          <form class="col s12">
            <div class="row">
              <div class="input-field col s12 m6">
                <select>
                  <option value="" disabled selected>Choose your option</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
                <label>Materialize Select</label>
              </div>
              <div class="col s12">
                <br>
                <p>You can add the property
                  <code class="language-markup">multiple</code> to get the multiple select and select several options.</p>
              </div>
              <div class="input-field col s12 m6">
                <select multiple>
                  <option value="" disabled selected>Choose your option</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
                <label>Materialize Multiple Select</label>
              </div>
              <div class="col s12">
                <br>
                <p>We also support optgroups in our selects.</p>
              </div>
              <div class="input-field col s12 m6">
                <select>
                  <optgroup label="team 1">
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                  </optgroup>
                  <optgroup label="team 2">
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                  </optgroup>
                </select>
                <label>Optgroups</label>
              </div>
              <div class="col s12">
                <br>
                <p>You can add icons to your options in any type of select. In the option you add the image source with the
                  <code class="language-markup">data-icon</code> attribute.</p>
              </div>
              <div class="input-field col s12 m6">
                <select class="icons">
                  <option value="" disabled selected>Choose your option</option>
                  <option value="" data-icon="images/sample-1.jpg">example 1</option>
                  <option value="" data-icon="images/office.jpg">example 2</option>
                  <option value="" data-icon="images/yuna.jpg">example 3</option>
                </select>
                <label>Images in select</label>
              </div>
              <div class="input-field col s12 m6">
                <select class="icons">
                  <option value="" disabled selected>Choose your option</option>
                  <option value="" data-icon="images/sample-1.jpg" class="left">example 1</option>
                  <option value="" data-icon="images/office.jpg" class="left">example 2</option>
                  <option value="" data-icon="images/yuna.jpg" class="left">example 3</option>
                </select>
                <label>Images in select</label>
              </div>
              <div class="col s12">
                <br>
                <p>You can add the class
                  <code class="language-markup">browser-default</code> to get the browser default.</p>
              </div>
              <div class="col s12 m6">
                <label>Browser Select</label>
                <select class="browser-default">
                  <option value="" disabled selected>Choose your option</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
              </div>
            </div>
          </form>
          <div class="col s12">
            <pre><code class="language-markup">
  &lt;div class="input-field col s12">
    &lt;select>
      &lt;option value="" disabled selected>Choose your option&lt;/option>
      &lt;option value="1">Option 1&lt;/option>
      &lt;option value="2">Option 2&lt;/option>
      &lt;option value="3">Option 3&lt;/option>
    &lt;/select>
    &lt;label>Materialize Select&lt;/label>
  &lt;/div>

  &lt;div class="input-field col s12">
    &lt;select multiple>
      &lt;option value="" disabled selected>Choose your option&lt;/option>
      &lt;option value="1">Option 1&lt;/option>
      &lt;option value="2">Option 2&lt;/option>
      &lt;option value="3">Option 3&lt;/option>
    &lt;/select>
    &lt;label>Materialize Multiple Select&lt;/label>
  &lt;/div>

  &lt;div class="input-field col s12">
    &lt;select>
      &lt;optgroup label="team 1">
        &lt;option value="1">Option 1&lt;/option>
        &lt;option value="2">Option 2&lt;/option>
      &lt;/optgroup>
      &lt;optgroup label="team 2">
        &lt;option value="3">Option 3&lt;/option>
        &lt;option value="4">Option 4&lt;/option>
      &lt;/optgroup>
    &lt;/select>
    &lt;label>Optgroups&lt;/label>
  &lt;/div>

  &lt;div class="input-field col s12 m6">
    &lt;select class="icons">
      &lt;option value="" disabled selected>Choose your option&lt;/option>
      &lt;option value="" data-icon="images/sample-1.jpg">example 1&lt;/option>
      &lt;option value="" data-icon="images/office.jpg">example 2&lt;/option>
      &lt;option value="" data-icon="images/yuna.jpg">example 3&lt;/option>
    &lt;/select>
    &lt;label>Images in select&lt;/label>
  &lt;/div>
  &lt;div class="input-field col s12 m6">
    &lt;select class="icons">
      &lt;option value="" disabled selected>Choose your option&lt;/option>
      &lt;option value="" data-icon="images/sample-1.jpg" class="left">example 1&lt;/option>
      &lt;option value="" data-icon="images/office.jpg" class="left">example 2&lt;/option>
      &lt;option value="" data-icon="images/yuna.jpg" class="left">example 3&lt;/option>
    &lt;/select>
    &lt;label>Images in select&lt;/label>
  &lt;/div>

  &lt;label>Browser Select&lt;/label>
  &lt;select class="browser-default">
    &lt;option value="" disabled selected>Choose your option&lt;/option>
    &lt;option value="1">Option 1&lt;/option>
    &lt;option value="2">Option 2&lt;/option>
    &lt;option value="3">Option 3&lt;/option>
  &lt;/select>
            </code></pre>
          </div>
        </div>
      </div>

      <div id="initialization" class="scrollspy section">
        <h3 class="header">Initialization</h3>
        <p>You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically
          generated select elements your page generates.</p>

        <pre><code class="language-javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });
        </code></pre>
        <br>
      </div>

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

          <tbody>
            <tr>
              <td>classes</td>
              <td>String</td>
              <td>''</td>
              <td>Classes to be added to the select wrapper element.</td>
            </tr>
            <tr>
              <td>dropdownOptions</td>
              <td>Object</td>
              <td>{}</td>
              <td>Pass options object to select dropdown initialization.</td>
            </tr>
          </tbody>
        </table>
        <br>
      </div>

      <div id="methods" class="scrollspy section">
        <h3 class="header">Methods</h3>
        <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.FormSelect.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.

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

        <h5 class="method-header">
          .getSelectedValues();
        </h5>
        <p>Get selected values in an array.</p>
        <h6>Return Value</h6>
        <p>
          <b>Array:</b> Array of selected values.</p>
        <pre><code class="language-javascript col s12">
instance.getSelectedValues();
      </code></pre>
        <br>

        <h5 class="method-header">
          .destroy();
        </h5>
        <p>Destroy plugin instance and teardown</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>isMultiple</td>
              <td>Boolean</td>
              <td>If this is a multiple select.</td>
            </tr>
            <tr>
              <td>wrapper</td>
              <td>Element</td>
              <td>The select wrapper element.</td>
            </tr>
            <tr>
              <td>dropdownOptions</td>
              <td>Element</td>
              <td>Dropdown UL element.</td>
            </tr>
            <tr>
              <td>input</td>
              <td>Element</td>
              <td>Text input that shows current selected option.</td>
            </tr>
            <tr>
              <td>dropdown</td>
              <td>Dropdown</td>
              <td>Instance of the dropdown plugin for this select.</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div id="disabled" class="section scrollspy">
        <div class="row">
          <div class="col s12">
            <br>
            <br>
            <h3 class="header">Disabled Styles</h3>
            <p>You can also add
              <code class="language-markup">disabled</code> to the select element to make the whole thing disabled. Or if you add
              <code class="language-markup">disabled</code> to the options, the individual options will be unselectable. </p>
          </div>
          <form class="col s12 m6">
            <div class="row">
              <div class="col s12 input-field">
                <select disabled>
                  <option value="" disabled selected>Choose your option</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
                <label>Materialize Disabled</label>
              </div>
            </div>
            <div class="row">
              <div class="col s12">
                <label>Browser Disabled</label>
                <select class="browser-default" disabled>
                  <option value="" disabled selected>Choose your option</option>
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </select>
              </div>
            </div>
          </form>
          <div class="col s12">
            <pre><code class="language-markup">
  &lt;div class="input-field">
    &lt;select disabled>
      &lt;option value="" disabled selected>Choose your option&lt;/option>
      &lt;option value="1">Option 1&lt;/option>
      &lt;option value="2">Option 2&lt;/option>
      &lt;option value="3">Option 3&lt;/option>
    &lt;/select>
    &lt;label>Materialize Disabled&lt;/label>
  &lt;/div>

  &lt;label>Browser Disabled&lt;/label>
  &lt;select class="browser-default" disabled>
    &lt;option value="" disabled selected>Choose your option&lt;/option>
    &lt;option value="1">Option 1&lt;/option>
    &lt;option value="2">Option 2&lt;/option>
    &lt;option value="3">Option 3&lt;/option>
  &lt;/select>
            </code></pre>
          </div>
        </div>
      </div>


    </div>
    <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="#introduction">Introduction</a>
            </li>
            <li>
              <a href="#initialization">Initialization</a>
            </li>
            <li>
              <a href="#options">Options</a>
            </li>
            <li>
              <a href="#methods">Methods</a>
            </li>
            <li>
              <a href="#properties">Properties</a>
            </li>
            <li>
              <a href="#disabled">Disabled Styles</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>