Got UI Project

Appearance

Tag标签 ​

用于标记和选择。

基本类型 ​

由 type 属性来选择 tag 的类型。 也可以通过 color 属性来自定义背景色。

primary
success
info
error
warning
default
<template>
  <g-tag type="primary" :style="{ marginRight: '10px' }">primary</g-tag>
  <g-tag type="success" :style="{ marginRight: '10px' }">success</g-tag>
  <g-tag type="info" :style="{ marginRight: '10px' }">info</g-tag>
  <g-tag type="error" :style="{ marginRight: '10px' }">error</g-tag>
  <g-tag type="warning" :style="{ marginRight: '10px' }">warning</g-tag>
  <g-tag type="default" :style="{ marginRight: '10px' }">default</g-tag>
</template>
<template>
  <g-tag type="primary" :style="{ marginRight: '10px' }">primary</g-tag>
  <g-tag type="success" :style="{ marginRight: '10px' }">success</g-tag>
  <g-tag type="info" :style="{ marginRight: '10px' }">info</g-tag>
  <g-tag type="error" :style="{ marginRight: '10px' }">error</g-tag>
  <g-tag type="warning" :style="{ marginRight: '10px' }">warning</g-tag>
  <g-tag type="default" :style="{ marginRight: '10px' }">default</g-tag>
</template>

主题 ​

Tag 组件提供了三个不同的主题：dark、light

light
dark
light+outline
dark+outline
<template>
  <g-tag type="light" :style="{ marginRight: '10px' }">light</g-tag>
  <g-tag type="dark" :style="{ marginRight: '10px' }">dark</g-tag>
  <g-tag type="light" :outline="true" :style="{ marginRight: '10px' }">light+outline</g-tag>
  <g-tag type="dark" :outline="true" :style="{ marginRight: '10px' }">dark+outline</g-tag>
</template>
<template>
  <g-tag type="light" :style="{ marginRight: '10px' }">light</g-tag>
  <g-tag type="dark" :style="{ marginRight: '10px' }">dark</g-tag>
  <g-tag type="light" :outline="true" :style="{ marginRight: '10px' }">light+outline</g-tag>
  <g-tag type="dark" :outline="true" :style="{ marginRight: '10px' }">dark+outline</g-tag>
</template>

圆形标签 ​

primary
success
info
error
warning
default
light
dark
light+outline
dark+outline
<template>
  <g-tag type="primary" round :style="{ marginRight: '10px' }">primary</g-tag>
  <g-tag type="success" round :style="{ marginRight: '10px' }">success</g-tag>
  <g-tag type="info" round :style="{ marginRight: '10px' }">info</g-tag>
  <g-tag type="error" round :style="{ marginRight: '10px' }">error</g-tag>
  <g-tag type="warning" round :style="{ marginRight: '10px' }">warning</g-tag>
  <g-tag type="default" round :style="{ marginRight: '10px' }">default</g-tag>
  <g-tag type="light" round :style="{ marginRight: '10px' }">light</g-tag>
  <g-tag type="dark" round :style="{ marginRight: '10px' }">dark</g-tag>
  <g-tag type="light" round :outline="true" :style="{ marginRight: '10px' }">light+outline</g-tag>
  <g-tag type="dark" round :outline="true" :style="{ marginRight: '10px' }">dark+outline</g-tag>
</template>
<template>
  <g-tag type="primary" round :style="{ marginRight: '10px' }">primary</g-tag>
  <g-tag type="success" round :style="{ marginRight: '10px' }">success</g-tag>
  <g-tag type="info" round :style="{ marginRight: '10px' }">info</g-tag>
  <g-tag type="error" round :style="{ marginRight: '10px' }">error</g-tag>
  <g-tag type="warning" round :style="{ marginRight: '10px' }">warning</g-tag>
  <g-tag type="default" round :style="{ marginRight: '10px' }">default</g-tag>
  <g-tag type="light" round :style="{ marginRight: '10px' }">light</g-tag>
  <g-tag type="dark" round :style="{ marginRight: '10px' }">dark</g-tag>
  <g-tag type="light" round :outline="true" :style="{ marginRight: '10px' }">light+outline</g-tag>
  <g-tag type="dark" round :outline="true" :style="{ marginRight: '10px' }">dark+outline</g-tag>
</template>