naive-ui/demo/documentation/components/button/zhCN/debug.md

Debug

列出所有的按钮用来 debug。

<div class="debug-zone"
  n-light-theme-background-color-hint="#ececec"
  n-dark-theme-background-color-hint="transparent"
>
  <n-button
    type="default"
    icon="md-save"
    round
  >
    Default
  </n-button>
  <n-button
    type="primary"
    icon="md-save"
    disabled
  >
    Primary
  </n-button>
  <n-button
    type="info"
    icon="md-save"
    icon-position="right"
  >
    Info
  </n-button>
  <n-button
    type="warning"
    icon="md-save"
  >
    Warning
  </n-button>
  <n-button
    type="success"
    icon="md-save"
  >
    Success
  </n-button>
  <n-button
    type="error"
    icon="md-save"
  >
    Error
  </n-button>
  <n-button
    type="default"
    icon="md-save"
    ghost
  >
    Default
  </n-button>
  <n-button
    type="primary"
    icon="md-save"
    ghost
    round
  >
    Primary
  </n-button>
  <n-button
    type="info"
    icon="md-save"
    ghost
    disabled
  >
    Info
  </n-button>
  <n-button
    type="warning"
    icon="md-save"
    ghost
    icon-position="right"
  >
    Warning
  </n-button>
  <n-button
    type="success"
    icon="md-save"
    ghost
  >
    Success
  </n-button>
  <n-button
    type="error"
    icon="md-save"
    ghost
  >
    Error
  </n-button>
  <n-button
    type="default"
    icon="md-save"
    loading
  >
    Default
  </n-button>
  <n-button
    type="primary"
    icon="md-save"
    loading
  >
    Primary
  </n-button>
  <n-button
    type="info"
    icon="md-save"
    loading
    round
  >
    Info
  </n-button>
  <n-button
    type="warning"
    icon="md-save"
    loading
    disabled
  >
    Warning
  </n-button>
  <n-button
    type="success"
    icon="md-save"
    loading
    icon-position="right"
  >
    Success
  </n-button>
  <n-button
    type="error"
    icon="md-save"
    loading
  >
    Error
  </n-button>
  <n-button
    type="default"
    icon="md-save"
    ghost
    loading
  >
    Default
  </n-button>
  <n-button
    type="primary"
    icon="md-save"
    ghost
    loading
  >
    Primary
  </n-button>
  <n-button
    type="info"
    icon="md-save"
    ghost
    loading
  >
    Info
  </n-button>
  <n-button
    type="warning"
    icon="md-save"
    ghost
    loading
    round
  >
    Warning
  </n-button>
  <n-button
    type="success"
    icon="md-save"
    ghost
    loading
    disabled
  >
    Success
  </n-button>
  <n-button
    type="error"
    icon="md-save"
    ghost
    loading
    icon-position="right"
  >
    Error
  </n-button>
  <n-button
    type="default"
    icon="md-save"
    round
    block
  >
    Default
  </n-button>
  <n-button
    type="primary"
    icon="md-save"
    disabled
    block
    size="small"
  >
    Primary
  </n-button>
  <n-button
    type="info"
    icon="md-save"
    icon-position="right"
    block
    size="large"
  >
    Info
  </n-button>
  <n-button
    type="warning"
    icon="md-save"
    block
    ghost
  >
    Warning
  </n-button>
  <n-button
    type="success"
    icon="md-save"
    block
    loading
  >
    Success
  </n-button>
  <n-button
    type="error"
    icon="md-save"
    block
  >
    Error
  </n-button>
  <n-button
    type="primary"
    icon="md-save"
    disabled
    circle
    size="small"
  >
    Primary
  </n-button>
  <n-button
    type="info"
    icon="md-save"
    icon-position="right"
    circle
    size="large"
  >
    Info
  </n-button>
  <n-button
    type="warning"
    icon="md-save"
    circle
    ghost
  >
    Warning
  </n-button>
  <n-button
    type="success"
    icon="md-save"
    circle
    loading
  >
    Success
  </n-button>
  <n-button
    type="error"
    icon="md-save"
    circle
  >
    Error
  </n-button>
  <n-button
    type="error"
    icon="md-save"
  >
    Error
  </n-button>
  <n-button
    type="error"
    icon="md-save"
    size="large"
  />
  <n-button
    type="error"
    round
    icon="md-save"
    size="large"
  />
  <n-button-group>
    <n-button
      type="default"
      icon="md-save"
      round
    >
      Default
    </n-button>
    <n-button
      type="primary"
      icon="md-save"
      disabled
    >
      Primary
    </n-button>
    <n-button
      type="info"
      icon="md-save"
      icon-position="right"
    >
      Info
    </n-button>
    <n-button
      type="warning"
      icon="md-save"
    >
      Warning
    </n-button>
  </n-button-group>
  <n-button-group vertical>
    <n-button
      type="default"
      icon="md-save"
      round
    >
      Default
    </n-button>
    <n-button
      type="primary"
      icon="md-save"
      disabled
    >
      Primary
    </n-button>
    <n-button
      type="info"
      icon="md-save"
      icon-position="right"
    >
      Info
    </n-button>
    <n-button
      type="warning"
      icon="md-save"
    >
      Warning
    </n-button>
  </n-button-group>
</div>

export default {

}

.n-button {
  margin-right: 12px;
  margin-bottom: 8px;
}
.debug-zone {
  border-radius: 4px;
  background-color: transparent;
  transition: background-color .3s ease-in-out;
}
.n-light-theme {
  .debug-zone {
    border-radius: 4px;
    background-color: #ececec;
  }
}