gos-ui
v0.0.8
Published
A Component Library for Vue3.0 By TypeScript
Downloads
3
Maintainers
Readme
A UI Component Library for Vue3.0 based on TypeScript.
English | 简体中文
Install
npm install gos-ui -S
Quick Start
// Global introduction
import { createApp } from 'vue'
import GosUi from 'gos-ui';
import 'gos-ui/lib/theme/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(GosUi)
app.mount('#app')
Use some components
import { createApp } from 'vue'
import { GosButton, GosSelect } from 'gos-ui';
import App from './App.vue';
// If you want to use the .scss style file, you need to import the base.scss file.
// import 'gos-ui/packages/theme/src/base.scss'
const app = createApp(App)
app.component(GosButton.name, GosButton);
app.component(GosSelect.name, GosSelect);
/* or
* app.use(GosButton)
* app.use(GosSelect)
*/
app.mount('#app')
Use all components
import { createApp } from 'vue'
import App from './App.vue';
// If you want to use the .scss style file, you need to import the base.scss file.
// import 'gos-ui/packages/theme/src/base.scss'
import {
GosAlert,
GosAside,
GosAutocomplete,
GosAvatar,
GosBacktop,
GosBadge,
GosBreadcrumb,
GosBreadcrumbItem,
GosButton,
GosButtonGroup,
GosCalendar,
GosCard,
GosCarousel,
GosCarouselItem,
GosCascader,
GosCascaderPanel,
GosCheckbox,
GosCheckboxButton,
GosCheckboxGroup,
GosCol,
GosCollapse,
GosCollapseItem,
GosCollapseTransition,
GosColorPicker,
GosContainer,
GosDatePicker,
GosDialog,
GosDivider,
GosDrawer,
GosDropdown,
GosDropdownItem,
GosDropdownMenu,
GosFooter,
GosForm,
GosFormItem,
GosHeader,
GosIcon,
GosImage,
GosInput,
GosInputNumber,
GosLink,
GosMain,
GosMenu,
GosMenuItem,
GosMenuItemGroup,
GosOption,
GosOptionGroup,
GosPageHeader,
GosPagination,
GosPopconfirm,
GosPopover,
GosPopper,
GosProgress,
GosRadio,
GosRadioButton,
GosRadioGroup,
GosRate,
GosRow,
GosScrollbar,
GosSelect,
GosSlider,
GosStep,
GosSteps,
GosSubmenu,
GosSwitch,
GosTabPane,
GosTable,
GosTableColumn,
GosTabs,
GosTag,
GosTimePicker,
GosTimeSelect,
GosTimeline,
GosTimelineItem,
GosTooltip,
GosTransfer,
GosTree,
GosUpload,
GosInfiniteScroll,
GosLoading,
GosMessage,
GosMessageBox,
GosNotification,
} from 'gos-ui';
const components = [
GosAlert,
GosAside,
GosAutocomplete,
GosAvatar,
GosBacktop,
GosBadge,
GosBreadcrumb,
GosBreadcrumbItem,
GosButton,
GosButtonGroup,
GosCalendar,
GosCard,
GosCarousel,
GosCarouselItem,
GosCascader,
GosCascaderPanel,
GosCheckbox,
GosCheckboxButton,
GosCheckboxGroup,
GosCol,
GosCollapse,
GosCollapseItem,
GosCollapseTransition,
GosColorPicker,
GosContainer,
GosDatePicker,
GosDialog,
GosDivider,
GosDrawer,
GosDropdown,
GosDropdownItem,
GosDropdownMenu,
GosFooter,
GosForm,
GosFormItem,
GosHeader,
GosIcon,
GosImage,
GosInput,
GosInputNumber,
GosLink,
GosMain,
GosMenu,
GosMenuItem,
GosMenuItemGroup,
GosOption,
GosOptionGroup,
GosPageHeader,
GosPagination,
GosPopconfirm,
GosPopover,
GosPopper,
GosProgress,
GosRadio,
GosRadioButton,
GosRadioGroup,
GosRate,
GosRow,
GosScrollbar,
GosSelect,
GosSlider,
GosStep,
GosSteps,
GosSubmenu,
GosSwitch,
GosTabPane,
GosTable,
GosTableColumn,
GosTabs,
GosTag,
GosTimePicker,
GosTimeSelect,
GosTimeline,
GosTimelineItem,
GosTooltip,
GosTransfer,
GosTree,
GosUpload,
]
const plugins = [
GosInfiniteScroll,
GosLoading,
GosMessage,
GosMessageBox,
GosNotification,
]
const app = createApp(App)
components.forEach(component => {
app.component(component.name, component)
})
plugins.forEach(plugin => {
app.use(plugin)
})
Links
- Homepage and documentation