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"
    round
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Default
  </n-button>
  <n-button
    type="primary"
    disabled
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Primary
  </n-button>
  <n-button
    type="info"
    icon-position="right"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Info
  </n-button>
  <n-button
    type="warning"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Warning
  </n-button>
  <n-button
    type="success"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Success
  </n-button>
  <n-button
    type="error"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Error
  </n-button>
  <n-button
    type="default"
    ghost
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Default
  </n-button>
  <n-button
    type="primary"
    ghost
    round
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Primary
  </n-button>
  <n-button
    type="info"
    ghost
    disabled
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Info
  </n-button>
  <n-button
    type="warning"
    ghost
    icon-position="right"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Warning
  </n-button>
  <n-button
    type="success"
    ghost
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Success
  </n-button>
  <n-button
    type="error"
    ghost
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Error
  </n-button>
  <n-button
    type="default"
    loading
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Default
  </n-button>
  <n-button
    type="primary"
    loading
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Primary
  </n-button>
  <n-button
    type="info"
    loading
    round
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Info
  </n-button>
  <n-button
    type="warning"
    loading
    disabled
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Warning
  </n-button>
  <n-button
    type="success"
    loading
    icon-position="right"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Success
  </n-button>
  <n-button
    type="error"
    loading
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Error
  </n-button>
  <n-button
    type="default"
    ghost
    loading
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Default
  </n-button>
  <n-button
    type="primary"
    ghost
    loading
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Primary
  </n-button>
  <n-button
    type="info"
    ghost
    loading
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Info
  </n-button>
  <n-button
    type="warning"
    ghost
    loading
    round
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Warning
  </n-button>
  <n-button
    type="success"
    ghost
    loading
    disabled
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Success
  </n-button>
  <n-button
    type="error"
    ghost
    loading
    icon-position="right"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Error
  </n-button>
  <n-button
    type="default"
    round
    block
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Default
  </n-button>
  <n-button
    type="primary"
    disabled
    block
    size="small"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Primary
  </n-button>
  <n-button
    type="info"
    icon-position="right"
    block
    size="large"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Info
  </n-button>
  <n-button
    type="warning"
    block
    ghost
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Warning
  </n-button>
  <n-button
    type="success"
    block
    loading
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Success
  </n-button>
  <n-button
    type="error"
    block
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Error
  </n-button>
  <n-button
    type="primary"
    disabled
    circle
    size="small"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Primary
  </n-button>
  <n-button
    type="info"
    icon-position="right"
    circle
    size="large"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Info
  </n-button>
  <n-button
    type="warning"
    circle
    ghost
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Warning
  </n-button>
  <n-button
    type="success"
    circle
    loading
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Success
  </n-button>
  <n-button
    type="error"
    circle
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Error
  </n-button>
  <n-button
    type="error"
  >
    <template v-slot:icon>
      <md-save />
    </template>
    Error
  </n-button>
  <n-button
    type="error"
    size="large"
  >
    <template v-slot:icon>
      <md-save />
    </template>
  </n-button>
  <n-button
    type="error"
    round
    size="large"
  >
    <template v-slot:icon>
      <md-save />
    </template>
  </n-button>
  <n-button-group>
    <n-button
      type="default"
      round
    >
      <template v-slot:icon>
        <md-save />
      </template>
      Default
    </n-button>
    <n-button
      type="primary"
      disabled
    >
      <template v-slot:icon>
        <md-save />
      </template>
      Primary
    </n-button>
    <n-button
      type="info"
      icon-position="right"
    >
      <template v-slot:icon>
        <md-save />
      </template>
      Info
    </n-button>
    <n-button
      type="warning"
    >
      <template v-slot:icon>
        <md-save />
      </template>
      Warning
    </n-button>
  </n-button-group>
  <n-button-group vertical>
    <n-button
      type="default"
      round
    >
      <template v-slot:icon>
        <md-save />
      </template>
      Default
    </n-button>
    <n-button
      type="primary"
      disabled
    >
      <template v-slot:icon>
        <md-save />
      </template>
      Primary
    </n-button>
    <n-button
      type="info"
      icon-position="right"
    >
      <template v-slot:icon>
        <md-save />
      </template>
      Info
    </n-button>
    <n-button
      type="warning"
    >
      <template v-slot:icon>
        <md-save />
      </template>
      Warning
    </n-button>
  </n-button-group>
</div>

import mdSave from 'naive-ui/lib/icons/md-save'

export default {
  components: {
    mdSave
  },
  mounted () {
    console.log(this)
  }
}

.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;
  }
}