آشنایی با پلتفرم هوش مصنوعی اهور

مقدمه

پلتفرم هوش مصنوعی اهور یک ماژول است که مجموعه‌ای از کامپوننت‌های Vue و توابع کمکی را با استفاده از Tailwind CSS و Headless UI ارائه می‌دهد تا به شما در ساخت رابط‌های کاربری زیبا و قابل دسترس کمک کند.

هدف این ماژول ارائه تمام موارد مربوط به رابط کاربری هنگام ساخت اپلیکیشن Nuxt است. این شامل کامپوننت‌ها، آیکون‌ها، رنگ‌ها، حالت تاریک و همچنین میان‌برهای کیبورد می‌شود.

✨ ویژگی‌های فوق‌العاده

• ساخته شده با Headless UI و Tailwind CSS
• پشتیبانی از HMR از طریق Nuxt App Config
• پشتیبانی از حالت تاریک
• پشتیبانی از زبان‌های LTR و RTL
• میان‌برهای کیبورد
• آیکون‌های بسته‌بندی شده
• کاملاً تایپ شده
• کیت Figma

😌 نصب آسان و سریع

راه‌اندازی

۱. ماژول @nuxt/ui را به پروژه خود اضافه کنید:

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

۲. آن را در بخش 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](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) یا رنگ‌های سفارشی خود استفاده کنید. به طور پیش‌فرض، رنگ `primary` `blue` و رنگ `gray` `slate` است.

هنگام [استفاده از رنگ‌های سفارشی](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) یا [افزودن رنگ‌های اضافی](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) از طریق کلید `extend` در `tailwind.config.ts` خود، باید مطمئن شوید که تمام سایه‌ها از `50` تا `950` را تعریف کنید زیرا اکثر آن‌ها در کامپوننت کانفیگ تعریف شده در [`ui.config.ts`](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts) استفاده می‌شوند. شما می‌توانید [رنگ‌های خود را تولید کنید](https://tailwindcss.com/docs/customizing-colors#generating-colors) با استفاده از ابزارهایی مانند https://uicolors.app/ برای مثال.

### کامپوننت‌ها

#### `app.config.ts`

کامپوننت‌ها با Tailwind CSS استایل شده‌اند اما تمام کلاس‌ها در فایل پیش‌فرض [ui.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts) تعریف شده‌اند. شما می‌توانید آن‌ها را در `app.config.ts` خود بازنویسی کنید.

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    container: {
      constrained: 'max-w-5xl'
    }
  }
})

با تشکر از tailwind-merge، app.config.ts به صورت هوشمند با کانفیگ پیش‌فرض ادغام می‌شود. این بدان معناست که شما نیازی به بازنویسی همه چیز ندارید.

ui prop

هر کامپوننت یک ui prop دارد که به شما امکان می‌دهد همه چیز را به صورت خاص سفارشی کنید.

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

حالت تاریک

تمام کامپوننت‌ها با حالت تاریک در نظر استایل شده‌اند.

آیکون‌ها

شما می‌توانید از هر آیکونی (100,000+) از Iconify استفاده کنید.

برخی از کامپوننت‌ها یک icon prop دارند که به شما امکان می‌دهد یک آیکون به کامپوننت اضافه کنید.

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

در اینجا برخی از کامپوننت‌هایی که می‌توانید استفاده کنید آمده است... اما بسیاری دیگر نیز وجود دارد!

نتیجه‌گیری

Nuxt UI کتابخانه رابط کاربری کامل، ماژولار و قابل سفارشی برای ایجاد وب‌سایت‌ها در Nuxt است. این به شما امکان می‌دهد یک وب‌سایت زیبا با کامپوننت‌های فوق‌العاده (بیش از 45 کامپوننت!) ایجاد کنید. علاوه بر این، نسخه Pro به شما امکان می‌دهد محدوده کامپوننت‌ها را گسترش دهید، این مجموعه‌ای از کامپوننت‌های Vue پریمیوم است که بر روی Nuxt UI ساخته شده تا برنامه‌های Nuxt زیبا و واکنش‌گرا را در چند دقیقه ایجاد کند. این شامل تمام اصول اولیه برای ساخت صفحات فرود، مستندات، وبلاگ‌ها، داشبوردها یا کل محصولات SaaS است.