按钮

优质

小牛编辑

124浏览

2023-12-01

如果你使用Bootstrap，那么你会觉得SUI用起来非常的顺手，而且几乎所有的UI框架都是这种设计思路。

按钮

SUI默认的按钮是空心的，有多个按钮的风格可供选择，用户不同的状态中，比如提交表单就用绿色的按钮，执行删除等重要的操作，就用红色的按钮。

<header class="bar bar-nav">
  <h1 class='title'>按钮</h1>
</header>
<div class="content">
  <div class="content-block">
    <p><a href="#" class="button">Usual Button 1</a></p>
    <p><a href="#" class="button button-light">light button</a></p>
    <p><a href="#" class="button button-dark">dark button</a></p>
    <p><a href="#" class="button button-success">success button</a></p>
    <p><a href="#" class="button button-danger">danger button</a></p>
    <p><a href="#" class="button button-warning">warning button</a></p>
    <p><a href="#" class="button disabled">disabled button</a></p>
  </div>
  <div class="content-block">
    <p><a href="#" class="button button-round">Round Button 1</a></p>
  </div>
  <div class="content-block">
    <p><a href="#" class="button button-big">Big Button </a></p>
    <p><a href="#" class="button button-big button-round">Big Round Button </a></p>
  </div>
</div>

按钮组

<header class="bar bar-nav">
  <h1 class='title'>按钮组</h1>
</header>
<div class="content">
  <div class="content-block">
    <p class="buttons-row"><a href="#" class="button">Button 1</a><a href="#" class="button">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button active">Button 1</a><a href="#" class="button">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button">Button 1</a><a href="#" class="button active">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button button-round">Button 1</a><a href="#" class="button button-round">Button 2</a></p>
    <p class="buttons-row"><a href="#" class="button button-round">Button 1</a><a href="#" class="button button-round active">Button 2</a></p>
  </div>
</div>

填充按钮

<header class="bar bar-nav">
  <h1 class='title'>填充按钮</h1>
</header>
<div class="content">
  <div class="content-block">
    <p><a href="#" class="button button-fill">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-success">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-danger">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-warning">Fill Button </a></p>
  </div>
</div>

使用列表和栅格

使用列表和栅格来进行按钮的布局，这样我们一排可以放置多个按钮

<header class="bar bar-nav">
  <h1 class='title'>列表和栅格布局按钮</h1>
</header>
<div class="content">
  <div class="content-block-title">List block buttons</div>
  <div class="list-block">
    <ul>
      <li><a href="#" class="item-link list-button">List Button 1</a></li>
      <li><a href="#" class="item-link list-button">List Button 2</a></li>
      <li><a href="#" class="item-link list-button">List Button 3</a></li>
    </ul>
  </div>
  <div class="content-block-title">Inset list block buttons</div>
  <div class="list-block inset">
    <ul>
      <li><a href="#" class="item-link list-button">List Button 1</a></li>
      <li><a href="#" class="item-link list-button">List Button 2</a></li>
      <li><a href="#" class="item-link list-button">List Button 3</a></li>
    </ul>
  </div>
  <div class="content-block-title">Using Grid</div>
  <div class="content-block">
    <div class="row">
      <div class="col-50"><a href="#" class="button button-big button-fill button-danger">Cancel</a></div>
      <div class="col-50"><a href="#" class="button button-big button-fill button-success">Submit</a></div>
    </div>
  </div>
</div>