تست Nuxt UI

مقدمه

Nuxt UI یک ماژول است که مجموعه‌ای از کامپوننت‌های 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: 'green',
    gray: 'cool'
  }
})

از آنجایی که این ماژول از Tailwind CSS استفاده می‌کند، می‌توانید از هر یک از رنگ‌های Tailwind CSS یا رنگ‌های سفارشی خود استفاده کنید. به طور پیش‌فرض، رنگ primary green و رنگ gray cool است.

هنگام استفاده از رنگ‌های سفارشی یا افزودن رنگ‌های اضافی از طریق کلید 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>

حالت تاریک

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

آیکون‌ها

شما می‌توانید از هر آیکونی (بیش از ۱۰۰,۰۰۰) از Iconify استفاده کنید.

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

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

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

نتیجه‌گیری

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