其它主题色

为了满足不同场景的需求,按钮设计了五种不同的主题色：default、primary、success、warning、error。

每种主题色都有其独特的背景色、边框色和字体色,以及鼠标悬停时的视觉效果。

1// 默认按钮
2.b-button--default {
3    background-color: #fff;
4    border-color: #e3e5f1;
5    color: #4d5059;
6    &:hover {
7        background-color: #f5f6fa;
8    }
9}
10
11// 主要按钮
12.b-button--primary {
13    background-color: #3069ff;
14    border-color: #3069ff;
15    color: #fff;
16    &:hover {
17        background-color: #6e96ff;
18        border-color: #6e96ff;
19    }
20}
21
22// 成功按钮
23.b-button--success {
24    background-color: #14cd70;
25    border-color: #14cd70;
26    color: #fff;
27    &:hover {
28        background-color: #5adc9b;
29        border-color: #5adc9b;
30    }
31}
32
33// 警告按钮
34.b-button--warning {
35    background-color: #ffa81a;
36    border-color: #ffa81a;
37    color: #fff;
38    &:hover {
39        background-color: #ffc25e;
40        border-color: #ffc25e;
41    }
42}
43
44// 错误按钮
45.b-button--error {
46    background-color: #ff4a5b;
47    border-color: #ff4a5b;
48    color: #fff;
49    &:hover {
50        background-color: #ff808c;
51        border-color: #ff808c;
52    }
53}

1<script lang="ts" setup>
2import { useNamespace } from "@better-ui/hooks";
3const ns = useNamespace("button");
4
5defineOptions({
6  name: "BButton",
7});
8
9const props = defineProps({
10  type: {
11    type: String,
12    default: "default", // 默认值
13  },
14});
15</script>
16
17<template>
18  <button :class="[ns.b(), ns.m(type)]">
19    <span>
20      <slot v-if="$slots.default"></slot>
21    </span>
22  </button>
23</template>

1<template>
2  <div>
3    <b-button>默认</b-button>
4    <b-button type="primary">主要</b-button>
5    <b-button type="success">成功</b-button>
6    <b-button type="warning">警告</b-button>
7    <b-button type="error">错误</b-button>
8  </div>
9</template>

:::

其它主题色#

其它主题色