ساختن برنامه React خود با جعبه ابزار Blueprint UI

از کتابخانه Blueprint استفاده کنید و دیگر هرگز برای ایجاد یک وب سایت جذاب و قابل دسترس تلاش نخواهید کرد.

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

با اصول اولیه Blueprint UI Toolkit و نحوه استفاده از آن برای ساخت یک برنامه ساده React آشنا شوید.

Blueprint UI Toolkit چیست؟

Blueprint UI Toolkit یک کتابخانه مؤلفه React UI است. این شامل مجموعه ای از اجزای از پیش ساخته شده است که به راحتی قابل استفاده و سفارشی هستند. می توانید از این اجزای از پیش طراحی شده خارج از جعبه استفاده کنید یا آنها را متناسب با نیازهای خاص خود تغییر دهید.

اجزای Blueprint UI Toolkit شامل دکمه‌ها، فرم‌ها، مدال‌ها، ناوبری و جداول است. استفاده از این قطعات می تواند در زمان و تلاش شما صرفه جویی کند زیرا نیازی نیست که هر جزء را از ابتدا طراحی و بسازید.

شروع کار با Blueprint UI Toolkit

برای شروع کار با Blueprint UI Toolkit، باید یک برنامه React ایجاد کنید.

هنگامی که پروژه شما راه اندازی شد، می توانید Blueprint UI Toolkit را با استفاده از نصب کننده بسته Node که انتخاب می کنید نصب کنید. برای نصب Blueprint UI Toolkit با استفاده از npm، دستور زیر را در ترمینال خود اجرا کنید:

npm install @blueprintjs/core

برای استفاده از yarn به جای آن، این دستور را اجرا کنید:

yarn add @blueprintjs/core

هنگامی که Blueprint UI Toolkit را نصب کردید، می توانید از مؤلفه های انتخابی خود در برنامه React خود استفاده کنید.

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

قبل از استفاده از مؤلفه‌ها، فایل‌های CSS را از Blueprint UI Toolkit اضافه کنید:

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

افزودن بلوک کد بالا به فایل CSS، سبک‌های رابط کاربری Blueprint را در اجزای آن اعمال می‌کند.

به عنوان مثال، برای افزودن یک دکمه به برنامه خود، از مؤلفه Button از Blueprint UI Toolkit استفاده کنید:

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

function App() {
  return (
    <div>
      <Button intent="success" text="Click Me" icon="refresh" small={true}/>
    </div>
  );
}

export default App;

این بلوک کد با استفاده از مولفه Button یک دکمه به برنامه شما اضافه می کند. مولفه Button از مواردی مانند intent، متن، نماد، کوچک و بزرگ استفاده می کند.

Intent prop ماهیت دکمه را مشخص می کند که در رنگ پس زمینه آن منعکس می شود. در این مثال، دکمه یک هدف موفقیت آمیز دارد که به آن رنگ پس زمینه سبز می دهد. Blueprint UI چندین هدف اصلی از جمله اولیه (آبی)، موفقیت (سبز)، هشدار (نارنجی) و خطر (قرمز) را ارائه می دهد.

می‌توانید متنی را که در داخل دکمه ظاهر می‌شود با پیش‌نمایش متن مشخص کنید. همچنین می توانید آیکون ها را با استفاده از پایه آیکون به دکمه اضافه کنید. در کنار پایه آیکون پایه راست آیکن قرار دارد که آیکون را به سمت راست دکمه اضافه می کند.

در نهایت، پایه های بولی بزرگ و کوچک اندازه دکمه را مشخص می کنند. پایه بزرگ دکمه را بزرگتر می کند، در حالی که پایه کوچک آن را کوچکتر می کند.

بلوک کد قبلی دکمه ای به شکل زیر ایجاد می کند:

همچنین می توانید از کامپوننت AnchorButton برای ایجاد یک دکمه در برنامه خود استفاده کنید. کامپوننت AnchorButton یک نسخه تخصصی از مولفه Button است که به صراحت برای استفاده به عنوان پیوند طراحی شده است.

این کامپوننت بسیاری از موارد مشابه مولفه Button را می پذیرد، از جمله متن، بزرگ، کوچک، قصد و نماد. پروپ های href و target را نیز می پذیرد.

href prop URL را مشخص می کند که دکمه به آن پیوند دارد و هدف prop پنجره یا قاب هدف پیوند را مشخص می کند:

import React from "react";
import { AnchorButton } from "@blueprintjs/core";

function App() {
  return (
    <div>
      <AnchorButton
        href="https://example.com/"
        intent="primary"
        text="Click Me"
        target="_blank"
      />
    </div>
  );
}

export default App;

این بلوک کد بالا یک جزء AnchorButton را ارائه می دهد. مقدار href prop کامپوننت “https://example.com/” و مقدار prop هدف “_blank” است که به این معنی است که پیوند در برگه یا پنجره مرورگر دیگری باز می شود.

یکی دیگر از اجزای ضروری Blueprint UI Toolkit، جزء کارت است. این یک جزء قابل استفاده مجدد است که اطلاعات را به شیوه ای بصری جذاب نمایش می دهد.

مولفه کارت دو پایه تعاملی و ارتفاعی دارد. پایه elevation عمق سایه کارت را کنترل می کند و مقادیر بالاتر جلوه سایه برجسته تری را ایجاد می کند.

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

مثلا:

import React from "react";
import { Card, Elevation } from "@blueprintjs/core";

function App() {
  return (
    <div>
      <Card interactive={true} elevation={Elevation.TWO}>
        <h2>This is a Card</h2>
        <p>This is some content in my card</p>
      </Card>
    </div>
  );
}

export default App;

در این مثال، کامپوننت Card یک عنوان و مقداری محتوا دارد. پایه تعاملی روی true تنظیم شده است.

شما همچنین مولفه Elevation را از @blueprintjs/core وارد می‌کنید. مولفه Elevation یک عدد است که مجموعه ای از مقادیر از پیش تعریف شده را تعریف می کند که می توانید از آنها برای تنظیم عمق سایه یک جزء استفاده کنید.

در اینجا مقادیر موجود Elevation enum آمده است:

1. Elevation.ZERO: این مقدار عمق سایه را روی 0 تنظیم می کند و نشان می دهد که مؤلفه هیچ سایه اعمالی ندارد.
2. Elevation.ONE: این مقدار عمق سایه را روی ۱ قرار می دهد.
3. Elevation.TWO: این مقدار عمق سایه را روی 2 تنظیم می کند.
4. Elevation.THREE: این مقدار عمق سایه را روی 3 تنظیم می کند.
5. Elevation.FOUR: این مقدار عمق سایه را روی 4 قرار می دهد.
6. Elevation.FIVE: این مقدار عمق سایه را روی 5 تنظیم می کند.

با رندر کردن بلوک کد بالا، تصویری به شکل زیر در صفحه نمایش شما نمایش داده می شود:

سفارشی کردن اجزای جعبه ابزار Blueprint UI

سفارشی سازی اجزای Blueprint UI Toolkit آسان است. شما می توانید از CSS سنتی برای تغییر ظاهر اجزاء استفاده کنید، یا می توانید از ابزارهای ارائه شده برای تغییر رفتار آنها استفاده کنید.

برای مثال، می‌توانید ظاهر یک دکمه را با ارسال یک کلاسName prop سفارشی کنید:

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

function App() {
  return (
    <div>
      <Button text="Click Me" className='my-button'/>
    </div>
  );
}

export default App;

بلوک کد بالا یک کلاس سفارشی را به دکمه اعمال می کند و به شما امکان می دهد ظاهر آن را با استفاده از CSS تغییر دهید:

.my-button{
   border-radius: 10px;
   padding: 0.4rem 0.8rem;
}

اعمال این سبک ها باعث می شود که دکمه شما کمی شبیه به این شود:

رابط کاربری Blueprint چیزهای بیشتری دارد

Blueprint UI اجزای بیشتری از آنچه در بالا ذکر شد ارائه می دهد، مانند Alert، Popover، toast و غیره. با این حال، با اطلاعات ارائه شده، می توانید یک برنامه ساده React با استفاده از Blueprint UI بسازید.

می توانید با استفاده از روش های مختلف به برنامه React خود استایل دهید. می‌توانید از CSS سنتی، SASS/SCSS، Tailwind CSS و CSS در کتابخانه‌های JS مانند احساسات، کامپوننت‌های استایل‌دار و غیره استفاده کنید.

منبع مقاله