ایجاد Popover، هشدار و نان تست با Blueprint UI در React

عناصر UI ساده و تمیز می توانند طراحی شما را تازه کرده و کیفیتی را به وب سایت یا برنامه شما اضافه کنند.

Blueprint UI یک ابزار محبوب React UI است که مجموعه ای از اجزا و سبک های قابل استفاده مجدد را برای ساخت برنامه های کاربردی وب مدرن ارائه می دهد. یکی از ویژگی های کلیدی Blueprint UI پشتیبانی آن از ایجاد پاپاور، هشدار و نان تست است که اجزای ضروری برای نمایش اطلاعات و بازخورد به کاربران هستند.

نصب Blueprint UI

برای شروع با Blueprint UI، ابتدا باید آن را نصب کنید. شما می توانید این کار را با استفاده از هر بسته مدیری که انتخاب می کنید انجام دهید.

برای نصب آن با استفاده از npm، مدیر بسته جاوا اسکریپت، دستور زیر را در ترمینال خود اجرا کنید:

npm install @blueprintjs/core

پس از نصب Blueprint UI، باید فایل های CSS را از کتابخانه وارد کنید:

@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";

با وارد کردن این فایل‌ها، می‌توانید سبک‌های UI Blueprint را با اجزایی که Blueprint UI ارائه می‌دهد یکپارچه کنید.

ایجاد Popover با استفاده از Blueprint UI

Popover ها راهنمایی های ابزاری هستند که وقتی کاربر روی یک عنصر قرار می گیرد یا روی آن کلیک می کند ظاهر می شوند. آنها اطلاعات یا گزینه های اضافی را در اختیار کاربر قرار می دهند.

برای ایجاد پاپاور در برنامه React خود با استفاده از Blueprint UI، باید جزء Blueprint UI Popover2 را نصب کنید.

برای این کار کد زیر را در ترمینال خود اجرا کنید:

npm install --save @blueprintjs/popover2

مطمئن شوید که صفحه سبک بسته را در فایل CSS خود وارد کنید:

@import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";

پس از وارد کردن شیوه نامه، می توانید از کامپوننت Popover2 برای ایجاد پاپاور در برنامه خود استفاده کنید.

مثلا:

import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";

function App() {
  const popoverContent = (
    <div>
      <h3>Popover Title</h3>
      <p>This is the content inside the popover.</p>
    </div>
  );

  return (
    <div>
      <Popover2 content={popoverContent}>
        <Button intent="success" text="Click Me" />
      </Popover2>
    </div>
  );
}

export default App;

این کد با استفاده از کامپوننت Popover2 یک پاپاور ایجاد می کند. همچنین یک متغیر popoverContent تعریف می کند که حاوی کد JSX برای محتوای popover است.

مؤلفه Popover2، popoverContent را به عنوان ارزش محتوای محتوای خود در نظر می گیرد. Content prop محتوای نمایش داده شده در popover را مشخص می کند. در اینجا، کامپوننت Popover2 یک جزء Button را می پیچد. این باعث می شود با کلیک بر روی دکمه popover نمایش داده شود.

Popover ساده به نظر می رسد، همانطور که در اینجا نشان داده شده است:

می‌توانید محتوای popover را با ارسال یک کلاسName به کد popoverContent JSX استایل دهید:

const popoverContent = (
  <div className='popover'>
    <h3>Popover Title</h3>
    <p>This is the content inside the popover.</p>
  </div>
);

سپس می توانید کلاس CSS را در فایل CSS خود تعریف کنید:

.popover {
  padding: 1rem;
  background-color: #e2e2e2;
  font-family: cursive;
}

حالا popover باید کمی بهتر به نظر برسد:

کامپوننت Popover2 دارای برخی لوازم است که به شما کمک می کند آن را مطابق با نیازهای خود پیکربندی کنید. برخی از این ابزارها عبارتند از popoverClassName، onInteraction، isOpen، minimal و placement.

پایه قرارگیری موقعیت ترجیحی پاپاور را نسبت به عنصر هدف تعیین می کند. مقادیر موجود آن عبارتند از:

• خودکار
• شروع خودکار
• پایان خودکار
• بالا
• شروع بالا
• بالا پایان
• پایین
• از پایین شروع
• انتهای پایین
• درست
• راست شروع
• سمت راست
• ترک کرد
• شروع چپ
• سمت چپ

با popoverClassName می توانید یک نام کلاس CSS برای عنصر popover تعریف کنید. ابتدا یک کلاس CSS در فایل CSS خود برای استفاده از prop ایجاد می کنید.

مثلا:

.custom-popover {
  background-color: #e2e2e2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 12px;
  padding: 1rem;
}

پس از ایجاد کلاس CSS، از popoverClassName prop استفاده کنید تا استایل سفارشی را در مؤلفه Popover2 اعمال کنید:

<Popover2
 content={popoverContent}
 placement="bottom-end"
 popoverClassName="custom-popover"
 minimal={true}
>
 <Button intent="success" text="Click Me" />
</Popover2>

مینیمال پایه استایل پاپاور را کنترل می کند. prop یک مقدار بولی را می پذیرد. اگر روی true تنظیم شود، پاپاور دارای حداقل استایل، بدون فلش و ظاهر جعبه ساده خواهد بود.

ایجاد هشدارها

هشدارها اعلان‌هایی هستند که روی صفحه نمایش داده می‌شوند تا کاربر را از اطلاعات یا اقدامات مهم مطلع کنند. آنها معمولا برای نمایش پیام های خطا، پیام های موفقیت یا هشدار استفاده می شوند.

ایجاد هشدار در Blueprint UI مشابه ایجاد هشدار با استفاده از Chakra UI است. شما از مؤلفه Alert برای ایجاد هشدار در برنامه React خود با استفاده از Blueprint UI استفاده خواهید کرد.

در اینجا یک مثال است:

import React from "react";
import { Alert, Button } from "@blueprintjs/core";

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Close">
        <p>This is an alert message</p>
      </Alert>

      <Button text="Click Me" intent="success" onClick={handleOpen} />
    </div>
  );
}

export default App;

این مثال نشان می دهد که چگونه باید مؤلفه Alert را از بسته @blueprintjs/core وارد کنید. مؤلفه Alert یک پیام هشدار را روی صفحه نمایش ارائه می دهد. همچنین سه ویژگی دارد: isOpen، onClose، و confirmButtonText.

پایه isOpen تعیین می کند که آیا هشدار قابل مشاهده است یا خیر. برای نمایش هشدار آن را روی true و برای مخفی کردن آن false قرار دهید. پشتیبانی onClose یک تابع تماس است که زمانی که کاربر هشدار را می بندد اجرا می شود.

در نهایت، prop confirmButtonText متن نمایش داده شده روی دکمه تایید را تعیین می کند.

اعلان هشدار در این مثال به شکل زیر خواهد بود:

ایجاد نان تست با رابط کاربری Blueprint

نان تست ها اعلان هایی هستند که روی صفحه نمایش داده می شوند تا کاربر را از اطلاعات یا رویدادهای مهم مطلع کنند. آنها شبیه هشدارها هستند اما معمولاً کمتر مزاحم هستند و به سرعت ناپدید می شوند.

برای ایجاد یک نان تست در برنامه React خود با استفاده از Blueprint UI، از مؤلفه OverlayToaster استفاده کنید. مؤلفه OverlayToaster یک نمونه Toaster ایجاد می کند که سپس برای ایجاد نان تست های جداگانه استفاده می شود.

مثلا:

import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";

const toasterInstance = OverlayToaster.create({ position: "top-right" });

function App() {
  const showToast = () => {
    toasterInstance.show({
      message: "This is a toast",
      intent: "primary",
      timeout: 3000,
      isCloseButtonShown: false,
      icon: "bookmark",
    });
  };

  return (
    <div>
      <Button text="Click Me" intent="success" onClick={showToast} />
    </div>
  );
}

export default App;

بلوک کد بالا از روش OverlayToaster.create برای تولید نمونه توستر استفاده می کند و موقعیت آن را با استفاده از موقعیت prop تعیین می کند.

همچنین تابع showToast را تعریف می کند. این تابع از روش نشان دادن toasterInstance برای نمایش نان تست هنگام فراخوانی استفاده می کند. متد show یک شی را با پیام، intent، timeout، isCloseButtonShown و آیکون می گیرد.

پیام prop محتوای متن نان تست را مشخص می کند، در حالی که prop intent نوع نان تست را مشخص می کند. سبک نان تست بر اساس ارزش آن متفاوت خواهد بود.

می‌توانید مدت زمان نمایش اعلان نان تست را با استفاده از پایه زمان‌بندی کنترل کنید. نماد نماد یک عنصر نماد را برای نمایش در نان تست مشخص می کند. با پایه isCloseButtonShown، می توانید کنترل کنید که آیا دکمه بستن در نان تست نمایش داده می شود.

همانطور که در تصویر زیر مشاهده می کنید، بلوک کد بالا با کلیک بر روی دکمه، یک نان تست زیبا ایجاد می کند.

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

با این حال، اگر روی یک پروژه کوچک کار می‌کنید که به همه ویژگی‌های Blueprint UI نیاز ندارد، React Toastify یک جایگزین سبک وزن برای ایجاد اعلان‌های زیبا است.

افزایش تجربه کاربر با نان تست، پاپاور و هشدار

شما یاد گرفته اید که چگونه با استفاده از Blueprint UI در برنامه React خود پاپاور، هشدار و نان تست ایجاد کنید. این اجزا برای ارائه اطلاعات و بازخورد به کاربران ضروری هستند و می توانند تجربه کاربری اپلیکیشن شما را به میزان قابل توجهی افزایش دهند. شما به راحتی می توانید این اجزا را با استفاده از اطلاعاتی که به دست آورده اید با حداقل تلاش و سفارشی سازی ایجاد کنید.

منبع مقاله