# vue3-test-ui

**Repository Path**: zhizous/vue3-test-ui

## Basic Information

- **Project Name**: vue3-test-ui
- **Description**: vue3-test-ui
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://vue3-test-ui.zhizous.cn/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-03-14
- **Last Updated**: 2023-08-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



### 安装
``` bash
  $ pnpm install vue3-test-ui 
  $ or
  $ yarn i vue3-test-ui
```

### 案例演示
``` vue
<script setup lang="ts">
  import { Grid, GridItem } from "vue3-test-ui";
</script>
<template>
  <Grid cols="4" x-gap="10px" y-gap="10px">
    <GridItem class="btn">1</GridItem>
    <GridItem class="btn">2</GridItem>
    <GridItem class="btn">3</GridItem>
    <GridItem class="btn">+</GridItem>
    <GridItem class="btn">4</GridItem>
    <GridItem class="btn">5</GridItem>
    <GridItem class="btn">6</GridItem>
    <GridItem class="btn">-</GridItem>
    <GridItem class="btn">7</GridItem>
    <GridItem class="btn">8</GridItem>
    <GridItem class="btn">9</GridItem>
    <GridItem class="btn">/</GridItem>
    <GridItem colspan="3" class="btn">0</GridItem>
    <GridItem class="btn">=</GridItem>
  </Grid>
</template>
<style lang="scss">
.btn {
  color: white;
  padding: 12px;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #1890ff;
  background-color: #1890ff;
  font-weight: bold;
  font-size: 18px;
  &:active {
    opacity: 0.8;
  }
}
</style>
```