Guide

OGA UI is a frontend UI component library built on Vue 3 and Element Plus.

Dependencies

"vue": "^3.5.25"
"element-plus": "^2.13.2"
"@wangeditor/editor": "^5.1.23"
"@wangeditor/editor-for-vue": "^5.1.12"

Install

npm i oga-ui
npm i @wangeditor/editor
npm i @wangeditor/editor-for-vue@next

How to use

in main.ts

import "oga-ui/index.css"
import ogaUI from 'oga-ui'

app.use(ogaUI)

What's new

Input
InputNumber
Mention
DatePicker
TimePicker
Cascader
Select
SelectV2
TreeSelect
Tag
Table
Page
PageSection
PageLayout
RichTextEditor
IconFont
Avatar
ImageUpload(Multiple upload)

Update

Table

ColumnList
album: true

ImageState {
    title: string;
    url: string;
}

Filed value: List<ImageState>

<el-image
    :src="url"
    :preview-src-list="srcList"
/>

numberFormat: 'breve',
532
1.2K
12.5K
12.2M
2.5B
885.3T

numberFormat: 'thousand',
000,000,000

className: 'stop',
Stop row click event

IconFont

How to use

name: icon name
<oga-icon name="package"></oga-icon>

ICON List

const icons = [
    "avatar",
    "group",
    "customer",
    "user",
    "video",
    "cs",
    "brightness",
    "contrast",
    "face",
    "link",
    "flash",
    "key",
    "voice",
    "safe",
    "code",
    "info",
    "task",
    "graphics",
    "add-list",
    "save",
    "label",
    "pin",
    "cancel",
    "list",
    "wallet",
    "bill-empty",
    "bill-new",
    "bill-complete",
    "sign-in",
    "car",
    "truck",
    "pack",
    "shop",
    "logout",
    "personal",
    "print",
    "edit",
    "laptop",
    "copy",
    "lock",
    "vs",
    "bag",
    "gift",
    "en",
    "theme",
    "wand",
    "diamond",
    "cn",
    "help",
    "tiers",
    "navigate",
    "correct",
    "android",
    "incorrect",
    "table",
    "about",
    "plus",
    "equal",
    "minus",
    "switch",
    "refresh",
    "disable",
    "setting",
    "scan",
    "home",
    "delete",
    "frame",
    "more",
    "app",
    "full-screen",
    "shield",
    "currency-flow",
    "loan",
    "calculator",
    "finance",
    "dollar",
    "cny",
    "cancel-bill",
    "bank-card",
    "praise",
    "tread",
    "smile",
    "grow",
    "message",
    "sad",
    "share",
    "collect",
    "wang",
    "favorite",
    "calendar",
    "tree",
    "polyline",
    "cloud",
    "upload",
    "download",
    "pie",
    "columnar",
    "package",
    "package-collection",
    "package-move",
    "location",
    "earth",
    "sorting",
    "service",
    "cart",
    "customs",
    "msg",
    "news",
    "email",
    "notice",
    "eye",
    "eye-close",
    "search"
]