vue3-uikit

1
<template>
2
  <div class="badge-demo">   
3

4
    <!-- Standard Badge -->
5
    <div class="badge-container">
6
      <span class="badge badge-default">Default Badge</span>
7
      <span class="badge badge-primary">Primary Badge</span>
8
      <span class="badge badge-success">Success Badge</span>
9
      <span class="badge badge-warning">Warning Badge</span>
10
      <span class="badge badge-error">Error Badge</span>
11
    </div>
12

13
    <!-- Rounded Badge -->
14
    <div class="badge-container rounded">
15
      <span class="badge badge-default rounded">Default Badge</span>
16
      <span class="badge badge-primary rounded">Primary Badge</span>
17
      <span class="badge badge-success rounded">Success Badge</span>
18
      <span class="badge badge-warning rounded">Warning Badge</span>
19
      <span class="badge badge-error rounded">Error Badge</span>
20
    </div>
21
  </div>
22
</template>
23

24
<script setup>
25

26
</script>
27

28
<style scoped>
29
.badge-demo {
30
  font-family: Arial, sans-serif;
31
  padding: 20px;
32
}
33

34
h2 {
35
  margin-bottom: 20px;
36
}
37

38
.badge-container {
39
  margin-bottom: 20px;
40
}
41

42
.badge-container .badge {
43
  margin-right: 10px;
44
  display: inline-block;
45
  padding: 5px 10px;
46
  font-size: 12px;
47
  text-align: center;
48
  color: white;
49
}
50

51
.badge-container .badge:last-child {
52
  margin-right: 0;
53
}
54

55
.badge-container.rounded .badge {
56
  border-radius: 50px; 
57
}
58

59
.badge-default {
60
  background-color: #e0e0e0;
61
  color: #333;
62
}
63

64
.badge-primary {
65
  background-color: #6200ea;
66
}
67

68
.badge-success {
69
  background-color: #4caf50;
70
}
71

72
.badge-warning {
73
  background-color: #ff9800;
74
}
75

76
.badge-error {
77
  background-color: #f44336;
78
}
79
</style>
80