آموزش ساخت ساز اعلان (Toast Builder) با Vue 3 و TypeScript - آخرین آپدیت

سرفصل ها و درس ها

مرور کلی پروژه: چه چیزی خواهیم ساخت Project Overview: What We'll Build

• مرور کلی پروژه: چه چیزی خواهیم ساخت Project Overview: What We'll Build

پایه‌های پروژه: راه‌اندازی Vite و معماری CSS Project Foundations: Setting Up Vite and the CSS Architecture

• راه‌اندازی پروژه Vite و محیط توسعه Vite Project Setup and Development Environment

• استایل‌های سراسری و متغیرهای CSS Global Styles and CSS Variables

مدیریت انواع اعلان‌ها Managing Notification Types

• ایجاد انواع اعلان‌ها (موفقیت، هشدار، خطا و اطلاع‌رسانی) Creating Notification Types (Success, Warning, Error, and Info)

• طراحی دسته‌بندی‌های Toast و تخصیص رنگ‌ها Designing Toast Categories and Assigning Colors

• مدیریت وضعیت با Pinia: شخصی‌سازی انواع Toast State Management with Pinia: Customizing Toast Types

• مدیریت پویا پس‌زمینه: به‌روزرسانی UI بر اساس نوع انتخاب شده Dynamic Background Management: Updating the UI Based on the Selected Type

مدیریت عنوان‌ها و متن‌های Toast Managing Toast Titles and Messages

• مدیریت عنوان‌ها و متن‌های Toast Managing Toast Titles and Messages

• طراحی عنوان‌ها و متن‌های Toast Designing Toast Titles and Messages

مدیریت مدت زمان نمایش Toast Managing Toast Duration

• منطق مدت زمان Toast و یکپارچه‌سازی با Pinia Toast Duration Logic and Pinia Integration

• استایل‌دهی به ورودی مدت زمان Styling the Duration Input

• اعلان‌های ماندگار: منطق IsPersistent و تایمر شرطی Persistent Notifications: IsPersistent Logic and Conditional Timer

مدیریت جایگاه نمایش Toast Managing Toast Position

• جای‌گذاری در صفحه: مدیریت پویای موقعیت Toast Screen Placement: Dynamic Toast Position Management

• استایل‌دهی CSS برای موقعیت‌های Toast CSS Styling for Toast Positions

مدیریت پیشرفته رنگ‌ها Advanced Color Management

• مدیریت پیشرفته رنگ‌ها: شخصی‌سازی رنگ پس‌زمینه و متن Advanced Color Management: Customizing Background and Text Colors

• افزودن استایل‌های CSS برای شخصی‌سازی رنگ متن و پس‌زمینه Adding CSS Styling for Background and Text Color Customization

کامپوننت‌های قابل شخصی‌سازی Customizable Components

• کامپوننت‌های قابل شخصی‌سازی: نمایش دکمه بستن و گزینه‌های اضافی Customizable Components: ShowClose and Additional Options

• طراحی بخش تنظیمات (Options) Designing the Options Section

مدیریت انیمیشن‌های Toast Managing Toast Animations

• جریان بصری و انیمیشن‌ها: افکت‌های ورود و خروج Visual Flow and Animations: Entrance and Exit Effects

• استایل‌دهی CSS برای بخش انیمیشن‌ها CSS Styling for the Animations Section

اجرای اعلان‌ها و پیش‌نمایش زنده Triggering Notifications and Live Preview

• محرک اعلان و ناحیه پیش‌نمایش زنده Notification Trigger and Live Preview Area

• ساخت یک دکمه Trigger شیک Building a Stylish Trigger Button

• طراحی کارت پیش‌نمایش زنده Toast Designing the Live Toast Preview Card

• ارتباط والد و فرزند: جای‌گذاری کانتینر Toast در صفحه Parent-Child Communication: Positioning the Toast Container on the Screen

• اجرای پویای اعلان‌های Toast Triggering Toast Notifications Dynamically

• رندر کردن اعلان‌های Toast روی صفحه Rendering Toast Notifications on the Screen

• استایل‌دهی به Toaster با CSS Styling the Toaster with CSS

ایجاد و مدیریت پیش‌تنظیم‌ها (Presets) Creating and Managing Presets

• مدیریت پیش‌تنظیم‌ها: ساخت لیست پیش‌تنظیم‌های ذخیره شده Preset Management: Building the Saved Presets List

• طراحی کتابخانه پیش‌تنظیم‌ها: استایل‌دهی به کارت‌های Preset Preset Library Design: Styling Preset Cards

• ذخیره تنظیمات فعلی به عنوان یک Preset Saving Current Settings as a Preset

• رندر کردن پیش‌تنظیم‌های ذخیره شده در UI Rendering Saved Presets in the UI

• استایل‌دهی CSS برای لیست پیش‌تنظیم‌ها CSS Styling for the Preset List

• حذف پیش‌تنظیم‌های ذخیره شده و به‌روزرسانی Store Deleting Saved Presets and Updating the Store

• اعمال یک پیش‌تنظیم ذخیره شده و بارگذاری تنظیمات آن Applying a Saved Preset and Loading Its Settings

کامپوننت بلوک کد Code Block Component

• تبدیل تنظیمات به بلوک‌های کد قابل استفاده Converting Settings into Usable Code Blocks

• قابلیت کپی کد با یک کلیک One-Click Code Copy Functionality

• طراحی بلوک کد Designing the Code Block

مدیریت تم Theme Management

• حالت پویا تاریک/روشن (Dark/Light Mode) Dynamic Dark/Light Mode

• جای‌گذاری دکمه تغییر تم Positioning the Theme Toggle Button

بونوس (پاداش) Bonus

• بونوس (پاداش) Bonus