Passion UI

Appearance

Return to top
On this page

Button

基础

按钮的 type 分别为 default、tertiary、primary、info、success、warning 和 error。

TIP

目前没有判断type的值是否为一个可用值，如果你乱传那么可能会样式错乱

show me the code
<template>
  <div class="basic">
    <p-button @click="toggle">
      default
    </p-button>
    <p-button type="tertiary">
      tertiary
    </p-button>
    <p-button type="primary">
      Primary
    </p-button>
    <p-button type="success">
      Success
    </p-button>
    <p-button type="info">
      Info
    </p-button>
    <p-button type="warning">
      Warning
    </p-button>
    <p-button type="error">
      Error
    </p-button>
  </div>
</template>
<script setup lang='ts'>
import { PButton, useColorModeControl } from 'passion-ui'
const { toggle } = useColorModeControl()

</script>
<style scoped>
.basic {
  display: flex;
  gap:10px
}
</style>

尺寸

按钮的 size 为 mini, tiny, small, medium, large, huge

TIP

(⊙o⊙)… 目前先这么弄着吧

show me the code
<template>
  <div class="basic">
    <p-button size="mini" @click="toggle">
      default
    </p-button>
    <p-button size="tiny" type="tertiary">
      tertiary
    </p-button>
    <p-button size="small" type="primary">
      Primary
    </p-button>
    <p-button type="success" size="small">
      Success
    </p-button>
    <p-button size="medium" type="info">
      Info
    </p-button>
    <p-button size="large" type="warning">
      Warning
    </p-button>
    <p-button size="huge" type="error">
      Error
    </p-button>
  </div>
</template>
<script setup lang='ts'>
import { PButton, useColorModeControl } from 'passion-ui'
const { toggle } = useColorModeControl()

</script>
<style scoped>
.basic {
  display: flex;
  gap:10px
}
</style>

幽灵按钮

ghost属性控制按钮的背景是否透明

show me the code
<template>
  <div class=" flex gap-3">
    <p-button ghost @click="toggle">
      default
    </p-button>
    <p-button type="tertiary" ghost>
      tertiary
    </p-button>
    <p-button type="primary" ghost>
      Primary
    </p-button>
    <p-button type="success" ghost>
      Success
    </p-button>
    <p-button type="info" ghost>
      Info
    </p-button>
    <p-button type="warning" ghost>
      Warning
    </p-button>
    <p-button type="error" ghost>
      Error
    </p-button>
  </div>
</template>
<script setup lang='ts'>
import { PButton, useColorModeControl } from 'passion-ui'
const { toggle } = useColorModeControl()

</script>

虚线按钮

dashed属性控制按钮边框样式 注意当开启dashed的时候会自动开启幽灵按钮

show me the code
<template>
  <div class=" flex gap-3">
    <p-button dashed @click="toggle">
      default
    </p-button>
    <p-button type="tertiary" dashed>
      tertiary
    </p-button>
    <p-button type="primary" dashed>
      Primary
    </p-button>
    <p-button type="success" dashed>
      Success
    </p-button>
    <p-button type="info" dashed>
      Info
    </p-button>
    <p-button type="warning" dashed>
      Warning
    </p-button>
    <p-button type="error" dashed>
      Error
    </p-button>
  </div>
</template>
<script setup lang='ts'>
import { PButton, useColorModeControl } from 'passion-ui'
const { toggle } = useColorModeControl()

</script>

禁用按钮

disabled 禁用当前按钮

show me the code
<template>
  <div class=" flex gap-3">
    <p-button disabled @click="toggle">
      default
    </p-button>
    <p-button type="tertiary" disabled>
      tertiary
    </p-button>
    <p-button type="primary" ghost disabled>
      Primary
    </p-button>
    <p-button type="success" disabled>
      Info
    </p-button>
    <p-button type="info" disabled>
      Info
    </p-button>
    <p-button type="warning" disabled>
      Warning
    </p-button>
    <p-button type="error" disabled>
      Error
    </p-button>
  </div>
</template>
<script setup lang='ts'>
import { PButton, useColorModeControl } from 'passion-ui'
const { toggle } = useColorModeControl()

</script>

文本按钮

text 像文本一样的按钮

show me the code
<template>
  <div class=" flex gap-3">
    <p-button text @click="toggle">
      default
    </p-button>
    <p-button type="tertiary" text>
      tertiary
    </p-button>
    <p-button type="primary" text>
      Primary
    </p-button>
    <p-button type="info" text>
      Info
    </p-button>
    <p-button type="success" text>
      Success
    </p-button>
    <p-button type="warning" text>
      Warning
    </p-button>
    <p-button type="error" text>
      Error
    </p-button>
  </div>
</template>
<script setup lang='ts'>
import { PButton, useColorModeControl } from 'passion-ui'
const { toggle } = useColorModeControl()

</script>

按钮形状

round 胶囊一样的按钮 circle 圆形按钮

方形按钮

默认情况下是方形按钮最小宽度不会低于高度

DANGER

当使用了text 属性的时候 形状不会生效

show me the code
<template>
  <div class=" flex gap-3">
    <p-button round @click="toggle">
      default
    </p-button>
    <p-button type="tertiary" text round>
      tertiary
    </p-button>
    <p-button type="primary" disabled round>
      Primary
    </p-button>
    <p-button type="success" ghost round>
      Success
    </p-button>
    <p-button type="info">
      方
    </p-button>
    <p-button type="warning" size="small" round>
      Warning
    </p-button>
    <p-button type="error" circle>
      123
    </p-button>
  </div>
</template>
<script setup lang='ts'>
import { PButton, useColorModeControl } from 'passion-ui'
const { toggle } = useColorModeControl()

</script>