mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-27 05:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity
2255178d56
naive-ui/demo/documentation/components/button/zhCN/group.demo.md
Jiwen Bai 6453b90043 Vite doc with vue3 (#315) 
* feat(vite-doc): add vite md plugin

* fixed(site-vite): merge conflicts

* fix(vite-doc): some bug in vue rerender,use key to advoid

* feat(vite-doc): finished doc

* fix(vite-doc): import path should be same as normal

* chore(vite-doc): remove useless code

Co-authored-by: Lecong Zhang <50313260+tskirby@users.noreply.github.com>
2020-10-26 15:03:02 +08:00

2.0 KiB
Raw Blame History

按钮组

可以把几个按钮结合成按钮组。

<n-space>
  <n-button-group vertical>
    <n-button
      round
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      活着
    </n-button>
    <n-button
      ghost
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      不多
    </n-button>
    <n-button>
      <template v-slot:icon>
        <log-in-icon />
      </template>
      不少
    </n-button>
  </n-button-group>
  <n-button-group vertical size="large">
    <n-button>
      <template v-slot:icon>
        <log-in-icon />
      </template>
      幸福
    </n-button>
    <n-button>
      <template v-slot:icon>
        <log-in-icon />
      </template>
      刚好
    </n-button>
    <n-button
      ghost
      round
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      够用
    </n-button>
  </n-button-group>
  <n-button-group size="small">
    <n-button
      type="default"
      round
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      活着
    </n-button>
    <n-button
      type="default"
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      其实
    </n-button>
    <n-button
      type="default"
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      很好
    </n-button>
  </n-button-group>
  <n-button-group>
    <n-button
      ghost
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      再吃
    </n-button>
    <n-button
      ghost
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      一颗
    </n-button>
    <n-button
      round
    >
      <template v-slot:icon>
        <log-in-icon />
      </template>
      苹果
    </n-button>
  </n-button-group>
</n-space>

import LogInIcon from 'naive-ui/lib/icons/log-in-outline.vue'

export default {
  components: {
    LogInIcon
  }
}