เริ่มใช้งานด่วน

นำเข้าไลบรารี

ก่อนอื่น นำเข้าไลบรารีและสไตล์ จากนั้นใช้เป็นปลั๊กอินในแอป Vue ของคุณ:

import SproutDesignSystem from 'design-system-next'; 

import 'design-system-next/style.css'; // นำเข้าสไตล์ของไลบรารี
import App from './App.vue';

const app = createApp(App);

app.use(SproutDesignSystem); // ลงทะเบียนปลั๊กอินระบบการออกแบบ
app.mount('#app');

คำนำหน้าคอมโพเนนต์เริ่มต้น

โดยค่าเริ่มต้น คอมโพเนนต์ทั้งหมดจะมีคำนำหน้า spr- ตัวอย่างเช่น คอมโพเนนต์ปุ่มจะใช้เป็น <spr-button />

ตัวเลือกการใช้งาน

มีสองวิธีในการใช้คอมโพเนนต์จาก Design System:

1. การลงทะเบียนส่วนกลาง (แนะนำสำหรับแอปส่วนใหญ่)

หลังจากใช้ app.use(SproutDesignSystem) คอมโพเนนต์ทั้งหมดจะพร้อมใช้งานส่วนกลางโดยอัตโนมัติด้วยคำนำหน้า spr-:

<template>
  <spr-button>คลิกฉัน</spr-button>
  <spr-input v-model="value" />
</template>

2. นำเข้าที่เลือกได้ (สำหรับบัณฑลที่ปรับให้เหมาะสม)

นำเข้าคอมโพเนนต์เฉพาะที่คุณต้องการเพื่อลดขนาดบัณฑล:

import { Button, Input } from 'design-system-next';

<template>
  <Button>คลิกฉัน</Button>
  <Input v-model="value" />
</template>

<script setup>
import { Button, Input } from 'design-system-next';
import { ref } from 'vue';

const value = ref('');
</script>

รองรับ TypeScript: คุณยังสามารถนำเข้าประเภท TypeScript สำหรับคอมโพเนนต์:

import { Button, ButtonPropTypes, ButtonEmitTypes } from 'design-system-next';
import type { InputPropTypes, AvatarPropTypes } from 'design-system-next';

TIP

ใช้การนำเข้าที่เลือกได้เมื่อขนาดบัณฑลเป็นสิ่งสำคัญ หรือใช้การลงทะเบียนส่วนกลางเพื่อความสะดวก