Button Mantıne ui

🇮🇷 دکمه‌های Mantıne: رفیق صمیمی رابط کاربری شما 🇮🇷

سلام به رفقای برنامه‌نویس فارسی‌زبان!

امروز می‌خوایم یه گپ دوستانه باهاتون داشته باشیم راجع به دکمه‌های Mantıne، یه ابزار فوق‌العاده برای ساخت دکمه‌های جذاب و کارآمد توی رابط‌های کاربریتون.

دکمه‌ها نقش خیلی مهمی توی رابط کاربری دارن.

اونا به کاربر کمک می‌کنن تا با برنامه یا وب‌سایت شما تعامل داشته باشن و کارهای مختلفی مثل ارسال فرم، ثبت‌نام، دانلود و ... رو انجام بدن.

Mantıne یه سری ویژگی‌های جذاب به شما ارائه می‌کنه که می‌تونید با استفاده از اون‌ها دکمه‌های منحصر به فرد و چشم‌نواز بسازید.

قابلیت‌های اصلی Button در Mantıne:

• انواع مختلف: دکمه‌های Mantıne توی انواع مختلفی مثل دکمه‌های اولیه، ثانویه، مخفی، شبح‌وار و ... ارائه می‌شن.
• رنگ‌ها: می‌تونید رنگ دکمه‌ها رو مطابق با تم و سلیقه خودتون تنظیم کنید.
• اندازه‌ها: دکمه‌ها توی اندازه‌های مختلفی از کوچک تا بزرگ ارائه می‌شن.
• آیکون‌ها: می‌تونید به دکمه‌ها آیکون اضافه کنید تا کارکردشون رو به صورت بصری به کاربر نشون بدید.
• بارگذاری: می‌تونید از دکمه‌های بارگذاری برای نمایش وضعیت انجام یه فرآیند استفاده کنید.
• تنظیمات پیشرفته: Mantıne به شما امکاناتی برای تنظیمات پیشرفته مثل حاشیه، سایه، انیمیشن و ... دکمه‌ها هم ارائه می‌کنه.

کاستومایز کردن Button:

یکی از جذاب‌ترین ویژگی‌های Button در Mantıne، امکان کاستومایز کردن اون هستش.

شما می‌تونید با استفاده از CSS یا Styled Components، ظاهر دکمه‌ها رو مطابق با سلیقه و نیاز خودتون تغییر بدید.

مثال:

JavaScript

const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
  },
  fonts: {
    body: 'Roboto, sans-serif',
  },
  shadows: {
    md: '0 2px 5px rgba(0, 0, 0, 0.1)',
  },
};

// MyButton.js
import { Button } from '@mantine/core';

const MyButton = () => (
  <Button variant=&quotprimary&quot  shadow=&quotmd&quot  theme={theme}>
    ارسال
  </Button>
);

استفاده از آیکون‌های سفارشی:

می‌تونید از آیکون‌های سفارشی توی دکمه‌هاتون استفاده کنید و به رابط کاربریتون یه جلوه بصری جذاب و متمایز بدید.

مراحل استفاده از آیکون‌های سفارشی در Button:

1. ایجاد آیکون‌های سفارشی: می‌تونید از ابزارهای مختلف مثل Iconify یا Font Awesome برای ساخت آیکون‌های سفارشی خودتون استفاده کنید.
2. آپلود آیکون‌ها: آیکون‌های سفارشی خودتون رو توی یه پوشه توی پروژهتون آپلود کنید.
3. استفاده از آیکون‌ها در Button: از prop icon در کامپوننت Button برای استفاده از آیکون‌های سفارشی خودتون استفاده کنید.

مثال:

JavaScript

// theme.css
const theme = {
  icons: {
    myIcon: {
      src: '/path/to/my-icon.svg',
      size: 24,
    },
  },
};

// MyButton.js
import { Button } from '@mantine/core';

const MyButton = () => (
  <Button variant=&quotprimary&quot icon=&quotmyIcon&quot theme={theme}>
    ارسال
  </Button>
);

نکته:

• اگه از Iconify برای ساخت آیکون‌های سفارشی خودتون استفاده می‌کنید، باید یه CDN رو توی پروژهتون ست کنید.
• می‌تونید از CSS برای تنظیمات ظاهری مثل رنگ، اندازه و موقعیت آیکون‌ها در دکمه استفاده کنید.