bootstrap-select.html

Home / themes / src / main / node_modules / rcue / tests / bootstrap-select.html
214 lines | 9.692 kB Blame History Raw Download
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
  <head>
    <title>Bootstrap-Select - Red Hat&reg; Common User Experience</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/img/favicon.ico">
    <!-- iPad retina icon -->
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/img/apple-touch-icon-precomposed-152.png">
    <!-- iPad retina icon (iOS < 7) -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/apple-touch-icon-precomposed-144.png">
    <!-- iPad non-retina icon -->
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/img/apple-touch-icon-precomposed-76.png">
    <!-- iPad non-retina icon (iOS < 7) -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/apple-touch-icon-precomposed-72.png">
    <!-- iPhone 6 Plus icon -->
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/img/apple-touch-icon-precomposed-180.png">
    <!-- iPhone retina icon (iOS < 7) -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/apple-touch-icon-precomposed-114.png">
    <!-- iPhone non-retina icon (iOS < 7) -->
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/img/apple-touch-icon-precomposed-57.png">
    <link rel="stylesheet" href="../dist/css/rcue.min.css" >
    <link rel="stylesheet" href="../dist/css/rcue-additions.min.css" >
      <link href="tests.css" rel="stylesheet" media="screen, print">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <script src="../components/patternfly/dist/js/patternfly.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="page-header">
        <h1>Bootstrap-Select</h1>
      </div>
      <div class="alert alert-warning">
        <span class="pficon pficon-warning-triangle-o"></span>
        These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://silviomoreto.github.io/bootstrap-select/">http://silviomoreto.github.io/bootstrap-select/</a>.
      </div>
      <hr>
      <h3>Single-Select Dropdown</h3>
      <div class="form-group">
        <select class="selectpicker form-control">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
      </div>
      <h3>Disabled</h3>
      <div class="form-group">
        <select class="selectpicker form-control" disabled>
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
      </div>
      <h3>Option Groups</h3>
      <div class="form-group">
        <select class="selectpicker form-control">
          <optgroup label="Picnic">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
            <option>Onions</option>
            <option>Mushrooms</option>
            <option>Pickles</option>
            <option>Mayonnaise</option>
            <option data-subtext="Hot">Tabasco</option>
            <option data-subtext="Hotter" disabled>Sriracha</option>
            <option data-subtext="Hottest">Wasabi</option>
          </optgroup>
          <optgroup label="Camping">
            <option>Tent</option>
            <option>Flashlight</option>
            <option>Toilet Paper</option>
            <option>Sleeping Bag</option>
          </optgroup>
      </select>
      </div>
      <h3>Multiple Select</h3>
      <div class="form-group">
        <select class="selectpicker form-control" multiple data-selected-text-format="count>3">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
      </div>
      <h3>Data Live Search</h3>
      <div class="form-group">
        <select class="selectpicker form-control" data-live-search="true">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
      </div>
      <h3>Icons</h3>
      <div class="form-group">
        <select class="selectpicker form-control">
          <option data-icon="glyphicon-headphones">Mustard</option>
          <option data-icon="glyphicon-tint">Ketchup</option>
          <option data-icon="glyphicon-tree-conifer">Relish</option>
        </select>
      </div>
      <h3>With Help Text</h3>
      <div class="form-group">
        <label class="control-label" for="bootstrap-selectHelp">Bootstrap-Select with help text</label>
        <select class="selectpicker form-control" id="bootstrap-selectHelp">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
      <h3>Validation States</h3>
      <div class="form-group has-success">
        <label class="control-label" for="bootstrap-selectSuccess">Bootstrap-Select with success</label>
        <select class="selectpicker form-control" id="bootstrap-selectSuccess">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="bootstrap-selectWarning">Bootstrap-Select with warning</label>
        <select class="selectpicker form-control" id="bootstrap-selectWarning">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
      <div class="form-group has-error">
        <label class="control-label" for="bootstrap-selectError">Bootstrap-Select with error</label>
        <select class="selectpicker form-control" id="bootstrap-selectError">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>

    </div><!-- /container -->
  </body>
</html>