githubmirror/Semantic-UI

examples/components/button.html
222 строки7 KB
jlukic
Add body padding to examples
01 июн 2015, 21:30
01 июн 2015, 21:30699aeed
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>Theming - Semantic</title>

  <!--- Site CSS -->
  <link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">

  <!--- Component CSS -->
  <link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/icon.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/card.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/image.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/button.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/segment.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/divider.css">
  <link rel="stylesheet" type="text/css" href="../../dist/components/transition.css">

  <!--- Example Libs -->
  <link rel="stylesheet" type="text/css" href="../../dist/components/popup.css">
  <script src="../assets/library/jquery.min.js"></script>
  <script src="../assets/library/iframe-content.js"></script>
  <script src="../assets/show-examples.js"></script>
  <script type="text/javascript" src="../../dist/components/popup.js"></script>

  <!--- Component JS -->
  <script type="text/javascript" src="../../dist/components/transition.js"></script>
  <script type="text/javascript" src="../../dist/components/dropdown.js"></script>

  <!--- Example CSS -->
  <style>
  body {
    padding: 1em;
  }
  .spaced > .button {
    margin-bottom: 1em;
  }
  </style>

  <!--- Example Javascript -->
  <script>
  $(document)
    .ready(function() {
      $('.ui.dropdown').dropdown();

      $('.ui.buttons .dropdown.button').dropdown({
        action: 'combo'
      });
    })
  ;
  </script>
</head>

<body>

<div class="ui stackable equal width grid">
  <div class="column">
    <button class="ui button">Default</button>
    <button class="ui primary button">Primary</button>
    <button class="ui secondary button">Secondary</button>
    <button class="ui basic button">Basic</button>
    <button class="ui compact button">
      Compact
    </button>

    <div class="ui divider"></div>
    <button class="ui icon button">
      <i class="heart icon"></i>
    </button>
    <button class="ui labeled icon button">
      <i class="heart icon"></i>
      Labeled
    </button>
    <button class="ui right labeled icon button">
      <i class="heart icon"></i>
      Labeled
    </button>

    <div class="ui divider"></div>

    <div class="ui buttons">
      <button class="ui button">Combo</button>
      <div class="ui floating dropdown icon button">
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>

    <div class="ui floating search dropdown button">
      <span class="text">Search Dropdown</span>
      <div class="menu">
        <div class="item">Arabic</div>
        <div class="item">Chinese</div>
        <div class="item">Danish</div>
        <div class="item">Dutch</div>
        <div class="item">English</div>
        <div class="item">French</div>
        <div class="item">German</div>
        <div class="item">Greek</div>
        <div class="item">Hungarian</div>
        <div class="item">Italian</div>
        <div class="item">Japanese</div>
        <div class="item">Korean</div>
        <div class="item">Lithuanian</div>
        <div class="item">Persian</div>
        <div class="item">Polish</div>
        <div class="item">Portuguese</div>
        <div class="item">Russian</div>
        <div class="item">Spanish</div>
        <div class="item">Swedish</div>
        <div class="item">Turkish</div>
        <div class="item">Vietnamese</div>
      </div>
    </div>

    <div class="ui divider"></div>

    <div class="ui animated button" tabindex="0">
      <div class="visible content">Horizontal</div>
      <div class="hidden content">
        Hidden
      </div>
    </div>
    <div class="ui vertical animated button" tabindex="0">
      <div class="visible content">Vertical</div>
      <div class="hidden content">
        Hidden
      </div>
    </div>
    <div class="ui animated fade button" tabindex="0">
      <div class="visible content">Fade In</div>
      <div class="hidden content">
        Hidden
      </div>
    </div>

    <div class="ui divider"></div>
    <button class="ui disabled button">Disabled</button>
    <button class="ui loading button">Loading</button>

    <div class="ui divider"></div>

    <div class="ui buttons">
      <button class="ui button">1</button>
      <button class="ui button">2</button>
      <button class="ui button">3</button>
    </div>

    <div class="ui icon buttons">
      <button class="ui button"><i class="align left icon"></i></button>
      <button class="ui button"><i class="align center icon"></i></button>
      <button class="ui button"><i class="align right icon"></i></button>
      <button class="ui button"><i class="align justify icon"></i></button>
    </div>

    <div class="ui buttons">
      <button class="ui button">1</button>
      <div class="or"></div>
      <button class="ui button">2</button>
    </div>

    <div class="ui divider"></div>

    <div class="ui two top attached buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
    </div>
    <div class="ui attached segment">
      <img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image">
    </div>
    <div class="ui two bottom attached buttons">
      <div class="ui button">One</div>
      <div class="ui button">Two</div>
    </div>

  </div>
  <div class="column">
    <button class="ui mini button">Mini</button>
    <button class="ui tiny button">Tiny</button>
    <button class="ui small button">Small</button>
    <button class="ui large button">Large</button>
    <button class="ui big button">Big</button>
    <button class="ui huge button">Huge</button>
    <button class="ui massive button">Massive</button>
    <div class="ui divider"></div>
    <div class="spaced">
      <button class="yellow ui button">Yellow</button>
      <button class="orange ui button">Orange</button>
      <button class="green ui button">Green</button>
      <button class="teal ui button">Teal</button>
      <button class="blue ui button">Blue</button>
      <button class="purple ui button">Purple</button>
      <button class="pink ui button">Pink</button>
      <button class="red ui button">Red</button>
      <button class="black ui button">Black</button>
    </div>


    <div class="ui divider"></div>

    <div class="ui inverted segment">
      <button class="ui inverted button">Inverted</button>
      <button class="ui inverted basic button">Basic</button>
      <button class="ui inverted blue button">Colored</button>
      <button class="ui inverted blue basic button">Basic Colored</button>
    </div>

  </div>
</div>

</body>
</html>