Vue ಟ್ಯುಟೋರಿಯಲ್

ನೀವು ಏನನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ

ಒಂದು ಸಣ್ಣ ಸಂಪರ್ಕ ಫಾರ್ಮ್ — ಲೇಬಲ್ ಇರುವ ಇನ್‌ಪುಟ್, ಸಲ್ಲಿಸು ಬಟನ್, v-model ಬೈಂಡಿಂಗ್, ನಿಜವಾದ ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸ್ಕ್ರೀನ್-ರೀಡರ್ ವರ್ತನೆ — ಮೊದಲು ಬೆತ್ತಲೆ, ನಂತರ ಶೈಲೀಕೃತ, ಸುಮಾರು 10 ನಿಮಿಷಗಳಲ್ಲಿ.

ಆರಂಭಿಸುವ ಮೊದಲು

ನಿಮಗೆ git, Node 22 ಅಥವಾ ನಂತರದ್ದು, ಮತ್ತು pnpm 10 ಅಥವಾ ನಂತರದ್ದು ಬೇಕು. ಯಾವುದೇ Vue 3 ಯೋಜನೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ — Nuxt, Vite, ಅಥವಾ ಸರಳ Vue.

ಹಂತ 1 — ಕೋಡ್ ಪಡೆಯಿರಿ

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-headless
pnpm install
pnpm test        # vitest + @testing-library/vue
pnpm run storybook   # browse all 571 components

ಘಟಕಗಳು ಇಲ್ಲಿ ಸಮತಟ್ಟಾದ ಫೈಲ್‌ಗಳಾಗಿವೆ components/ — Button.vue, TextInput.vue — ಪ್ರತಿಯೊಂದರ ಪಕ್ಕದಲ್ಲಿ ಅದರ ಪರೀಕ್ಷೆ, story ಮತ್ತು ದಾಖಲೆಗಳು. ನಿಮಗೆ ಬೇಕಾದ ಫೈಲ್‌ಗಳನ್ನು ನಕಲಿಸಿ, ಅಥವಾ ರೆಪೊವನ್ನು ವೆಂಡರ್ ಮಾಡಿ.

ಹಂತ 2 — ನಿಮ್ಮ ಮೊದಲ ಘಟಕ

<script setup>
import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<template>
  <Button @click="save">Save</Button>
</template>

ರೆಂಡರ್ ಮಾಡುತ್ತದೆ <button class="button" type="button">. ಪ್ರಾಪ್‌ಗಳು ಇತರ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಿಗೆ ಹೊಂದುತ್ತವೆ: type, disabled, pressed, label, ಜೊತೆಗೆ ಉಳಿದೆಲ್ಲದಕ್ಕೂ ಆಟ್ರಿಬ್ಯೂಟ್ ಫಾಲ್-ಥ್ರೂ.

ಹಂತ 3 — ಸಣ್ಣ ಫಾರ್ಮ್ ಸಂಯೋಜಿಸಿ

<script setup>
import { ref } from "vue";
import Form from ".../components/Form.vue";
import Field from ".../components/Field.vue";
import TextInput from ".../components/TextInput.vue";
import Button from ".../components/Button.vue";

const name = ref("");
</script>

<template>
  <Form @submit="handleSubmit">
    <Field label="Full name" required>
      <TextInput id="name" label="Full name" v-model="name" required />
    </Field>
    <Button type="submit">Save</Button>
  </Form>
</template>

Field ಗೋಚರ label ತನ್ನದೇ ಪ್ರಾಪ್ ಆಗಿ, ನೆಸ್ಟ್ ಮಾಡಿದ ಲೇಬಲ್ ಘಟಕವಾಗಿ ಅಲ್ಲ — ಅದನ್ನು ಒಮ್ಮೆ ಕೊಡಿ, Field, ಮತ್ತು TextInputನಲ್ಲಿ label ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರನ್ನು ಒದಗಿಸುತ್ತದೆ.

TextInput ಬಳಸುತ್ತದೆ defineModel, ಹೀಗಾಗಿ ಸರಳ v-model ಪೆಟ್ಟಿಗೆಯಿಂದಲೇ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಹಂತ 4 — ಶೈಲೀಕರಿಸಿ

ಕ್ಲಾಸ್ ಹುಕ್‌ಗಳನ್ನು ಶೈಲೀಕರಿಸಿ — .button, .text-input, .label, .field — ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ, ಅಥವಾ ಸಿದ್ಧ ಥೀಮ್ ಅನ್ನು ಇದರಲ್ಲಿ ಲಿಂಕ್ ಮಾಡಿ index.html / nuxt.config:

<link rel="stylesheet" href="/themes/nord.css" />

ಹಂತ 5 — ಎಲ್ಲವೂ ಕೆಲಸ ಮಾಡುವುದನ್ನು ನೋಡಿ

Nuxt ಉದಾಹರಣೆ ಅಪ್ಲಿಕೇಶನ್ Playwright e2e ಮತ್ತು axe-core ಮೂಲರೇಖೆಯೊಂದಿಗೆ ಶೈಲೀಕೃತ ಮತ್ತು ಪ್ರದರ್ಶಿತ ಪೂರ್ಣ ಕ್ಯಾಟಲಾಗ್:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-nuxt-examples
pnpm install && pnpm run dev

ಮುಂದಿನ ಹಂತಗಳು

• ಥೀಮಿಂಗ್ — Vue theme-picker ಸಹಾಯಕದೊಂದಿಗೆ ರನ್‌ಟೈಮ್ ಬದಲಾವಣೆ.
• ಆದ್ಯತೆ ಸಹಾಯಕಗಳು — ಭಾಷೆ ಮತ್ತು ಪಠ್ಯ ಗಾತ್ರ.
• ಘಟಕ ಕ್ಯಾಟಲಾಗ್ — ಪ್ರತಿ ಘಟಕಕ್ಕೆ ಪ್ರಾಪ್‌ಗಳು, ARIA, ಮತ್ತು ಕೀಬೋರ್ಡ್.

ದಾರಿಯಲ್ಲಿ ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳಿಂದ ತುಂಬಿದೆ — ಮತ್ತು ಯಾವುದೇ ಹಂತ ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ ಮತ್ತು ನಾವು ಸಂತೋಷದಿಂದ ಟ್ಯುಟೋರಿಯಲ್ ಸುಧಾರಿಸುತ್ತೇವೆ.