Got UI Project

Appearance

Icon图标 ​

所有内置Icon ​

<template>
  <div>
    <CircleSuccess /><CircleError /><CircleWarning /><CircleInfo />
    <times /><tick /><plus /><minus /><Square /><SquareCheck /><SquareHalfCheck /><SquareMinus /><SquarePlus /><SquareTick />
    <arrow direction="up" />
    <arrow direction="down" />
    <arrow direction="left" />
    <arrow direction="right" />

    <arrow :double="true" direction="up" />
    <arrow :double="true" direction="down" />
    <arrow :double="true" direction="left" />
    <arrow :double="true" direction="right" />
    <caret direction="up" />
    <caret direction="down" />
    <caret direction="left" />
    <caret direction="right" />
    <Tselect /> <backtop /><Time /> <Theme /><Sun /><Moon /><Sort /><Search />

    <Navicon /><Mobile /><Eye /> <Exclam /><Ellipsis /><Datetime /><Cselect /><Date />
    <div><loading-spin /></div>
    <div><loading-bounce /></div>
  </div>
</template>
<script lang="ts" setup>
import {
  CircleSuccess,
  CircleError,
  CircleWarning,
  CircleInfo,
  Times,
  Tick,
  Plus,
  Minus,
  Square,
  SquareCheck,
  SquareHalfCheck,
  SquareMinus,
  SquarePlus,
  SquareTick,
  Arrow,
  Caret,
  Tselect,
  Time,
  Theme,
  Sun,
  Sort,
  Search,
  Moon,
  Navicon,
  Mobile,
  Eye,
  Exclam,
  Ellipsis,
  Datetime,
  Date,
  Cselect,
  LoadingSpin,
  LoadingBounce
} from '../../../packages/icon'
</script>
<template>
  <div>
    <CircleSuccess /><CircleError /><CircleWarning /><CircleInfo />
    <times /><tick /><plus /><minus /><Square /><SquareCheck /><SquareHalfCheck /><SquareMinus /><SquarePlus /><SquareTick />
    <arrow direction="up" />
    <arrow direction="down" />
    <arrow direction="left" />
    <arrow direction="right" />

    <arrow :double="true" direction="up" />
    <arrow :double="true" direction="down" />
    <arrow :double="true" direction="left" />
    <arrow :double="true" direction="right" />
    <caret direction="up" />
    <caret direction="down" />
    <caret direction="left" />
    <caret direction="right" />
    <Tselect /> <backtop /><Time /> <Theme /><Sun /><Moon /><Sort /><Search />

    <Navicon /><Mobile /><Eye /> <Exclam /><Ellipsis /><Datetime /><Cselect /><Date />
    <div><loading-spin /></div>
    <div><loading-bounce /></div>
  </div>
</template>
<script lang="ts" setup>
import {
  CircleSuccess,
  CircleError,
  CircleWarning,
  CircleInfo,
  Times,
  Tick,
  Plus,
  Minus,
  Square,
  SquareCheck,
  SquareHalfCheck,
  SquareMinus,
  SquarePlus,
  SquareTick,
  Arrow,
  Caret,
  Tselect,
  Time,
  Theme,
  Sun,
  Sort,
  Search,
  Moon,
  Navicon,
  Mobile,
  Eye,
  Exclam,
  Ellipsis,
  Datetime,
  Date,
  Cselect,
  LoadingSpin,
  LoadingBounce
} from '../../../packages/icon'
</script>

操作常用 ​

<template>
  <div>
    <Tselect /> <backtop /><Time /> <Theme /><Sun /><Moon /><Sort /><Search />

    <Navicon /><Mobile /><Eye /> <Exclam /><Ellipsis /><Datetime /><Cselect /><Date />
  </div>
</template>
<script lang="ts" setup>
import {
  Tselect,
  Time,
  Theme,
  Sun,
  Sort,
  Search,
  Moon,
  Navicon,
  Mobile,
  Eye,
  Exclam,
  Ellipsis,
  Datetime,
  Date,
  Cselect
} from '../../../packages/icon'
</script>
<template>
  <div>
    <Tselect /> <backtop /><Time /> <Theme /><Sun /><Moon /><Sort /><Search />

    <Navicon /><Mobile /><Eye /> <Exclam /><Ellipsis /><Datetime /><Cselect /><Date />
  </div>
</template>
<script lang="ts" setup>
import {
  Tselect,
  Time,
  Theme,
  Sun,
  Sort,
  Search,
  Moon,
  Navicon,
  Mobile,
  Eye,
  Exclam,
  Ellipsis,
  Datetime,
  Date,
  Cselect
} from '../../../packages/icon'
</script>

Status状态Icon ​

<template>
  <div>
    <CircleSuccess /><CircleError /><CircleWarning /><CircleInfo />
    <backtop />
  </div>
</template>
<script lang="ts" setup>
import { CircleSuccess, CircleError, CircleWarning, CircleInfo } from '../../../packages/icon'
</script>
<template>
  <div>
    <CircleSuccess /><CircleError /><CircleWarning /><CircleInfo />
    <backtop />
  </div>
</template>
<script lang="ts" setup>
import { CircleSuccess, CircleError, CircleWarning, CircleInfo } from '../../../packages/icon'
</script>

Loading加载 Icon ​

<template>
  <div>
    <div><loading-spin /></div>
    <div><loading-bounce /></div>
  </div>
</template>
<script lang="ts" setup>
import { LoadingSpin, LoadingBounce } from '../../../packages/icon'
</script>
<template>
  <div>
    <div><loading-spin /></div>
    <div><loading-bounce /></div>
  </div>
</template>
<script lang="ts" setup>
import { LoadingSpin, LoadingBounce } from '../../../packages/icon'
</script>

方向Icon ​

<template>
  <div>
    <arrow direction="up" />
    <arrow direction="down" />
    <arrow direction="left" />
    <arrow direction="right" />

    <arrow :double="true" direction="up" />
    <arrow :double="true" direction="down" />
    <arrow :double="true" direction="left" />
    <arrow :double="true" direction="right" />
  </div>
  <div>
    <caret direction="up" />
    <caret direction="down" />
    <caret direction="left" />
    <caret direction="right" />
  </div>
</template>
<script lang="ts" setup>
import { Arrow, Caret } from '../../../packages/icon'
</script>
<template>
  <div>
    <arrow direction="up" />
    <arrow direction="down" />
    <arrow direction="left" />
    <arrow direction="right" />

    <arrow :double="true" direction="up" />
    <arrow :double="true" direction="down" />
    <arrow :double="true" direction="left" />
    <arrow :double="true" direction="right" />
  </div>
  <div>
    <caret direction="up" />
    <caret direction="down" />
    <caret direction="left" />
    <caret direction="right" />
  </div>
</template>
<script lang="ts" setup>
import { Arrow, Caret } from '../../../packages/icon'
</script>

计算Icon ​

<template>
  <div><times /><tick /><plus /><minus /></div>
</template>
<script lang="ts" setup>
import { Times, Tick, Plus, Minus } from '../../../packages/icon'
</script>
<template>
  <div><times /><tick /><plus /><minus /></div>
</template>
<script lang="ts" setup>
import { Times, Tick, Plus, Minus } from '../../../packages/icon'
</script>

方形Icon ​

<template>
  <div><Square /><SquareCheck /><SquareHalfCheck /><SquareMinus /><SquarePlus /><SquareTick /></div>
</template>
<script lang="ts" setup>
import {
  Square,
  SquareCheck,
  SquareHalfCheck,
  SquareMinus,
  SquarePlus,
  SquareTick
} from '../../../packages/icon'
</script>
<template>
  <div><Square /><SquareCheck /><SquareHalfCheck /><SquareMinus /><SquarePlus /><SquareTick /></div>
</template>
<script lang="ts" setup>
import {
  Square,
  SquareCheck,
  SquareHalfCheck,
  SquareMinus,
  SquarePlus,
  SquareTick
} from '../../../packages/icon'
</script>

自定义Icon ​

  • step1.项目中以任何方式引入font-awesome.css
  • step2.在main.js配置如下代码
js
import GotUi from '@aojiaodemeng/got-ui'
GotUi.config({
  icon: {
    cname: 'fa', //自定义字体的font-family
    prefix: 'fa-' //自定义字体的前缀
  }
})
import GotUi from '@aojiaodemeng/got-ui'
GotUi.config({
  icon: {
    cname: 'fa', //自定义字体的font-family
    prefix: 'fa-' //自定义字体的前缀
  }
})
  • step3.使用
js
<template>
<!-- 全局配置cname ,prefix -->
<custom-icon name="chrome"/>
<custom-icon name="firefox"/>
<custom-icon name="safari"/>
<!-- 行内配置cname ,prefix -->
<custom-icon cname="fa" prefix="fa-" name="opera"/>
</template>
<template>
<!-- 全局配置cname ,prefix -->
<custom-icon name="chrome"/>
<custom-icon name="firefox"/>
<custom-icon name="safari"/>
<!-- 行内配置cname ,prefix -->
<custom-icon cname="fa" prefix="fa-" name="opera"/>
</template>