Mantine ui (Menu, Drawer, Modal)

عناصر رابط کاربری جذاب در Mantini: راهنمای جامع

سلام رفیق! آمادهای تا با سه عنصر قدرتمند Mantini برای ساخت رابطهای کاربری جذاب آشنا بشی؟

در این مقاله، به دنیای Menu، Drawer و Modal در Mantini سفر خواهیم کرد و به طور کامل با پراپها، نحوه استفاده و استایلدهی آنها آشنا میشویم.

1. Menu: منوی کشویی دوستداشتنی

پراپها:

• children: محتوای منوی شما را در خود جای میدهد.
• variant: نوع منوی کشویی را مشخص میکند (مانند popover, dropdown, context).
• trigger: نحوه نمایش منو را تعیین میکند (مانند click, hover).
• placement: جهت نمایش منو را مشخص میکند (مانند top, bottom, left, right).
• items: لیستی از آیتمهای منو را شامل میشود.
• defaultActiveItem: آیتم پیشفرض فعال را مشخص میکند.
• onClose: تابعی که هنگام بسته شدن منو اجرا میشود.

مثال:

JavaScript

import { Menu } from '@mantine/core';

const items = [
  { label: 'خانه', icon: 'Home' },
  { label: 'درباره ما', icon: 'Info' },
  { label: 'تماس با ما', icon: 'At' },
];

const MyMenu = () => {
  return (
    <Menu variant=&quotpopover&quot trigger=&quotclick&quot>
      <Menu.Trigger>
        <Button>منو</Button>
      </Menu.Trigger>
      <Menu.Content>
        {items.map((item) => (
          <Menu.Item key={item.label}>
            <Menu.ItemLabel>{item.label}</Menu.ItemLabel>
            <Menu.ItemIcon icon={item.icon} />
          </Menu.Item>
        ))}
      </Menu.Content>
    </Menu>
  );
};

تغییر استایل:

میتوانید با استفاده از theme Mantini، ظاهر منوی خود را به طور کامل شخصیسازی کنید. به عنوان مثال، برای تغییر رنگ پسزمینه منو، میتوانید از کد زیر استفاده کنید:

JavaScript

const theme = {
  colors: {
    menu: {
      background: '#f0f0f0',
    },
  },
};

2. Drawer: کشوی جانبی جادویی

پراپها:

• children: محتوای کشوی شما را در خود جای میدهد.
• opened: وضعیت کشو را مشخص میکند (باز یا بسته).
• onClose: تابعی که هنگام بسته شدن کشو اجرا میشود.
• size: عرض کشو را تعیین میکند.
• position: موقعیت کشو را مشخص میکند (مانند left, right).
• variant: نوع کشو را مشخص میکند (مانند permanent, temporary).
• shadow: سایه کشو را فعال یا غیرفعال میکند.

مثال:

JavaScript

import { Drawer } from '@mantine/core';

const MyDrawer = () => {
  const [opened, setOpen] = useState(false);

  return (
    <>
      <Button ={() => setOpen(true)}>باز کردن کشو</Button>
      <Drawer
        opened={opened}
        ={() => setOpen(false)}
        size={300}
        position=&quotleft&quot
        variant=&quottemporary&quot
        shadow
      >
        <Drawer.Header>عنوان کشو</Drawer.Header>
        <Drawer.Body>
          <p>محتوای کشو</p>
        </Drawer.Body>
      </Drawer>
    </>
  );
};

تغییر استایل:

مانند Menu، میتوانید از theme Mantini برای استایلدهی کشوی خود استفاده کنید. به عنوان مثال، برای تغییر رنگ عنوان کشو، میتوانید از کد زیر استفاده کنید:

JavaScript

const theme = {
  colors: {
    drawer: {
      header: {
        background: '#e0e0e0',
        color: '#333',
      },
    },
  },
};

3. Modal: پنجرههای پاپآپ جذاب

پراپها:

• children: محتوای پنجره پاپآپ شما را در خود جای میدهد.
• opened: وضعیت پنجره پاپآپ را مشخص میکند (باز یا بسته).
• onClose: تابعی که هنگام بسته شدن پنجره پاپآپ اجرا میشود.
• title: عنوان پنجره پاپآپ را نمایش میدهد.
• overlay: نوع پوشش روی صفحه را مشخص میکند (مانند dimmed, transparent).
• withOverlay: پوشش روی صفحه را فعال یا غیرفعال میکند.
• size: اندازه پنجره پاپآپ را تعیین میکند (مانند xs, sm, md, lg, xl).
• centered: پنجره پاپآپ را در مرکز صفحه قرار میدهد.

مثال:

JavaScript

import { Modal } from '@mantine/core';

const MyModal = () => {
  const [opened, setOpen] = useState(false);

  return (
    <>
      <Button ={() => setOpen(true)}>باز کردن Modal</Button>
      <Modal
        opened={opened}
        ={() => setOpen(false)}
        title=&quotعنوان Modal&quot
        overlay=&quotdimmed&quot
        size=&quotmd&quot
        centered
      >
        <p>محتوای Modal</p>
      </Modal>
    </>
  );
};

تغییر استایل:

مانند Menu و Drawer، میتوانید از theme Mantini برای استایلدهی پنجره پاپآپ خود استفاده کنید. به عنوان مثال، برای تغییر رنگ عنوان Modal، میتوانید از کد زیر استفاده کنید:

JavaScript

const theme = {
  colors: {
    modal: {
      title: {
        background: '#f5f5f5',
        color: '#666',
      },
    },
  },
};

نکات تکمیلی:

• برای مشاهده لیست کامل پراپها و نمونههای کد هر عنصر، به مستندات رسمی Mantini مراجعه کنید:
• از قدرت theme Mantini برای شخصیسازی کامل ظاهر عناصر خود استفاده کنید.
• خلاق باشید و از این عناصر قدرتمند برای ساخت رابطهای کاربری جذاب و کاربرپسند استفاده کنید!

امیدوارم این مقاله برای شما مفید بوده باشد!

اگر سوالی دارید، در بخش نظرات مطرح کنید.