تعرّف على منصة الذكاء الاصطناعي أهور

مقدمة

منصة الذكاء الاصطناعي أهور هي وحدة تقدّم مجموعة من مكوّنات Vue والدوال المساعدة باستخدام Tailwind CSS و Headless UI، لمساعدتك في بناء واجهات مستخدم جميلة وسهلة الوصول.

الهدف من هذه الوحدة هو توفير كل ما يتعلق بواجهة المستخدم أثناء بناء تطبيق Nuxt. يشمل ذلك المكوّنات والأيقونات والألوان والوضع الليلي، وكذلك اختصارات لوحة المفاتيح.

✨ ميزات رائعة

• مبنية باستخدام Headless UI و Tailwind CSS
• دعم HMR عبر Nuxt App Config
• دعم الوضع الليلي
• دعم اتجاهي LTR و RTL
• اختصارات لوحة المفاتيح
• أيقونات مضمّنة
• مكتوبة بأنواع كاملة
• طاقم Figma

😌 تثبيت سهل وسريع

الإعداد

1. أضف الوحدة @nuxt/ui إلى مشروعك:

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

2. أضفها إلى قسم modules في nuxt.config الخاص بك:

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

هذا كل شيء! يمكنك الآن استخدام جميع المكوّنات والدوال المساعدة في تطبيق Nuxt الخاص بك 🤩

وحدات تُثبَّت تلقائيًا

يثبّت Nuxt UI لك تلقائيًا وحدات @nuxtjs/tailwindcss و @nuxtjs/color-mode و nuxt-icon.

...وكل ذلك في Typescript!

كُتبت هذه الوحدة بـ TypeScript وتوفّر الأنواع لجميع المكوّنات والدوال المساعدة.

يمكنك استخدام هذه الأنواع في مكوّناتك عبر استيرادها من #ui/types، على سبيل المثال عند تعريف مكوّنات wrapper:

<template>
  <UBreadcrumb :links="links">
    <template #icon="{ link }">
      <UIcon :name="link.icon" />
    </template>
  </UBreadcrumb>
</template>

<script setup lang="ts">
import type { BreadcrumbLink } from '#ui/types'

export interface Props {
  links: BreadcrumbLink[]
}

defineProps<Props>()
</script>

قوة IntelliSense

إذا كنت تستخدم VSCode، يمكنك تثبيت إضافة Tailwind CSS IntelliSense للحصول على الإكمال التلقائي للأصناف.

يمكنك قراءة المزيد عن كيفية إعدادها في توثيق وحدة @nuxtjs/tailwindcss.

خيارات متعددة

هيّئ الخيارات في nuxt.config.ts بهذا الشكل:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    global: true,
    icons: ['mdi', 'simple-icons']
  }
})

🎨 التنسيق والمظهر

الألوان

التهيئة

تعتمد المكوّنات على اللونين primary و gray. يمكنك تغييرهما في app.config.ts الخاص بك.

export default defineAppConfig({
  ui: {
    primary: 'blue',
    gray: 'slate'
  }
})

بما أن هذه الوحدة تستخدم Tailwind CSS، يمكنك استخدام أي من ألوان Tailwind CSS أو ألوانك المخصّصة. افتراضيًا، اللون primary هو blue واللون gray هو slate.

عند استخدام ألوان مخصّصة أو إضافة ألوان إضافية عبر المفتاح extend في tailwind.config.ts، تأكد من تعريف جميع الدرجات من 50 إلى 950، لأن معظمها مستخدم في تهيئة المكوّنات المعرّفة في ui.config.ts. ويمكنك توليد ألوانك بأدوات مثل https://uicolors.app/ على سبيل المثال.

المكوّنات

app.config.ts

المكوّنات منسّقة بـ Tailwind CSS، لكن جميع الأصناف معرّفة في الملف الافتراضي ui.config.ts. يمكنك تجاوزها في app.config.ts الخاص بك.

export default defineAppConfig({
  ui: {
    container: {
      constrained: 'max-w-5xl'
    }
  }
})

بفضل tailwind-merge، يُدمج app.config.ts بذكاء مع التهيئة الافتراضية. أي أنك لست بحاجة إلى إعادة تعريف كل شيء.

الخاصية ui

يمتلك كل مكوّن خاصية ui تتيح لك تخصيص كل شيء بشكل دقيق.

<template>
  <UContainer :ui="{ constrained: 'max-w-2xl' }">
    <slot />
  </UContainer>
</template>

الوضع الليلي

جميع المكوّنات منسّقة مع أخذ الوضع الليلي في الحسبان.

الأيقونات

يمكنك استخدام أي أيقونة (أكثر من 100,000) من Iconify.

تمتلك بعض المكوّنات خاصية icon تتيح لك إضافة أيقونة إلى المكوّن.

<template>
  <UButton icon="i-heroicons-magnifying-glass" />
</template>

في ما يلي بعض المكوّنات التي يمكنك استخدامها... وهناك الكثير غيرها!

الخاتمة

Nuxt UI هي مكتبة واجهة المستخدم الكاملة والمرنة والقابلة للتخصيص لبناء المواقع في Nuxt. تتيح لك إنشاء موقع جميل بمكوّنات رائعة (أكثر من 45 مكوّنًا!). إضافة إلى ذلك، تتيح لك نسخة Pro توسيع نطاق المكوّنات، وهي مجموعة من مكوّنات Vue المتميزة المبنية على Nuxt UI لإنشاء تطبيقات Nuxt جميلة ومتجاوبة في دقائق. تشمل جميع الأساسيات اللازمة لبناء صفحات الهبوط والتوثيق والمدوّنات ولوحات المعلومات أو منتجات SaaS كاملة.