چرا کتابخانه Ant Design در ری اکت انقدر خفنه ؟! کتابخانه Antd در ریکت رو یاد بگیریم!
کتابخانه Ant Design در ری اکت یکی از بهترین و مشهورترین کتابخانه هایی هست که به ما در زمینه پیاده سازی UI وبسایت های ری اکتی کمک میکنه. ما میدونیم که کتابخانه های خیلی زیادی در این زمینه به ما کمک میکنن، اما بدون شک کتابخانه Antd در ری اکت یکی از بهترین های اونهاست!
میپرسید چرا ؟
با فِرانت اِندی همراه باشید تا ببینیم فرق کتابخانه Ant Design با رقبای خودش چیه که باعث شده اخیرا انقدر محبوب بشه 🙂
بیش از 1 میلیون دانلود هفتگی در npm !
کتابخانه Ant Design در ری اکت چیست ؟
کتابخانه Ant Design در ری اکت دومین کتابخانه مشهور و پر استفاده ری اکتی جهت پیاده سازی UI هست. در حقیقت Ant Design یک دیزاین سیستم متن باز ( open source ) هست که بیش از 75 کامپوننت آماده و طرح از پیش ساخته شده در اختیار ما میزاره.
همچنین کمپانی های مشهور خیلی زیادی از جمله علی بابا در سطح جهانی از کتابخانه Ant Design در ریکت استفاده میکنن.
درصورتیکه از کتابخانه Ant Design در React استفاده کنیم، میتونیم به کامپوننت های مختلفی از جمله فرم، جدول، منو ، دکمه و .. دسترسی داشته باشیم. البته این کل مزیت Ant Design نیست!
اگه میخواید تو کمترین زمان ممکن به کتابخانه Ant Design مسلط بشید، پیشنهاد میکنم سری به آموزش کتابخانه Ant Design بزنید :
نصب کتابخانه Ant Design در ریکت
نصب کتابخانه Antd خیلی سادس! ما به کمک npm یا yarn میتونیم این کتابخانه رو نصب کنیم.
برای نصب Ant Design با npm باید دستور زیر رو داخل ترمینال وارد کنیم :
npm install antd
و یا برای نصب با yarn از دستور زیر استفاده کنیم :
yarn add antd
خب عالیه! به همین راحتی کتابخانه Antd برای ما نصب شد و حالا میتونیم ازش استفاده کنیم.
آیکن های کتابخانه Ant Design در ری اکت
کتابخانه Ant Design در ری اکت صدها آیکن کاربردی و جذاب رو در اختیار ما میگذاره که میتونیم با فراخوانی کردن هر آیکن، ازش توی کامپوننت و صفحات خودمون استفاده کنیم.
البته اگه قصد استفاده از آیکنهای Ant Design رو داریم، باید به کمک دستور زیر نصبش کنیم :
npm install --save @ant-design/icons
حالا که آیکن های Antd رو نصب کردیم، میتونیم بصورت زیر آیکن دلخواه خودمون رو فراخوانی و ازش استفاده کنیم:
import { HomeOutlined } from '@ant-design/icons'
const App = () => {
return <HomeOutlined/>
}
حالا شاید این سوال برامون پیش بیاد که چطور میشه به لیست آیکنهای کتابخانه Ant Design در ری اکت دسترسی داشت؟
با مراجعه به این لینک میتونیم لیست آیکنهای کتابخانه Ant Design در ری اکت رو ببینیم و با کلیک روی هر آیکن کپیش کنیم.
چیدمان عناصر با Layout !
کتابخانه Ant Design در ری اکت برای مدیریت و چینش اِلِمان ها، Layout اختصاصی خودش رو ارائه کرده. دیگه نیازی نیست از div استفاده کنیم و با flex کنترلشون کنیم.
ما میتونیم از کامپوننت Row و Col برای ایجاد سطر و ستون استفاده کنیم. ( البته اینکه از flex استفاده کنیم یا Layout بستگی به خودمون داره و هیچ اجباری بر استفاده از هیچکدوم نیست )
اگه به یاد داشته باشیم، ما به کمک Flex میتونستیم سطر و ستون بسازیم و چینش اِلِمان های خودمون رو تنظیم کنیم. ما همین کار رو به کمک Ant Design میتونیم بصورت زیر انجام بدیم :
<Row> // سطر
<Col span={12}>col-12</Col> // ستون
<Col span={12}>col-12</Col> // ستون
</Row>
پیاده سازی خیلی از طرح های Layout واقعا پییچده و زمانبره!
بطور مثال فرض کنید میخوایم یک داشبورد بسازیم که علاوه بر نمایش محتوای اصلی، منوی سایدبار، منوی هدر، ویژگی BreadCrumbs ، هدر و فوتر داشته باشه!
پیاده سازی چنین طرحی قطعا زمانبر هست اما به کمک Ant Design میتونیم صرفا با کپی کردن کد زیر به همین طرح دسترسی داشته باشیم :
خدا برسه به دادت
کامپوننت های کاربردی کتابخانه Antd در ریکت !
ما گفتیم که کتابخانه Ant Design در ری اکت یک عالمه کامپوننت آماده و از پیش ساخته شده در اختیار ما میزاره، اما این کامپوننت ها دقیقا چی هستن ؟
اگه بخوایم کامپوننت های Ant Design رو معرفی کنیم میتونیم به لیست زیر اشاره کنیم :
Divider
Typography
Icon
FlatButton
Button
Anchor
Space
Layout
Grid
Flex
Steps
Pagination
Menu
Dropdown
Breadcrumb
DatePicker
ColorPicker
Checkbox
Cascader
AutoComplete
Mentions
Radio
ImputNumber
Input
Form
TimePicker
Switch
Slider
Rate
Select
Badge
Avatar
Upload
TreeSelect
Transfer
Descriptions
Collapse
Carousel
Card
Calendar
QRCode
Popover
List
Image
Empty
Tag
Tabs
Table
Statistic
Segmented
Alert
Tree
Tour
Tooltip
Timeline
Popconfirm
Notification
Modal
Message
Drawer
Watermark
Spin
Skelton
Result
Progress
PropForm
PopLayout
ConfigProvider
App
Affix
PropTable
EditablePropTable
PropList
PropDescription
و …
لیست بالا شامل 75 مورد از کامپوننت های پرکاربرد و پراستفاده کتابخانه Antd هست.
اما اجازه بدید چند مورد از این کامپوننت هارو بررسی کنیم …
کامپوننت Input
به کمک این کامپوننت ما میتونیم از کاربر ورودی متنی دریافت کنیم. این یکی از پراستفاده ترین کامپوننت های کتابخانه Ant Design در ری اکت هست.
خود این Input شامل چندین نوع مختلف هست که با توجه به نیازمون میتونیم از هرکدوم استفاده کنیم. چند نمونه از این Input هارو میتونید توی تصویر زیر ببینید :
استفاده از کامپوننت Input خیلی آسونه. کافیه بصورت زیر عمل کنیم :
<Input
size="large"
value={this.state.inputVal}
placeholder="large size"
onChange={(e) => this.setState({ inputVal: e.target.value })}
prefix={<UserOutlined />} // prefixes the user image at the beginning
/>
کامپوننت Checkbox
اگه چندین گزینه دارید و میخواید کاربر چند تا از این موارد رو انتخاب کنه، کامپوننت Checkbox انتخاب خوبیه!
مثلا اگه میخوایم علایق کاربر رو بدونیم …
کتابخانه Antd در React به ما اجازه میده که از کامپوننت Checkbox استفاده کنیم.
تو تصویر زیر میتونید چند نمونه از کامپوننت های Checkbox رو ببینید :
برای استفاده از کامپوننت Checkbox باید بصورت زیر عمل کنیم :
onChange = e => {
this.setState({
checked: e.target.checked,
});
};
// checkbox component
<Checkbox
checked={this.state.checked}
disabled={this.state.disabled} // can be managed via state independently
onChange={this.onChange}
>
{label}
</Checkbox>
کامپوننت Radio Buttons
این کامپوننت برای انتخاب های 2 گزینه ای مناسبه ( مثل انتخاب جنسیت ) چون فقط 2 گزینه برای انتخاب داریم. به کمک کتابخانه Ant Design میتونیم Radio Buttons های حرفه ای و زیبا داشته باشیم 🙂
تو تصویر زیر میتونیم چند نمونه Radio Buttons ببینیم :
برای داشتن یک Radio Buttons زیبا کافیه بصورت زیر عمل کنیم :
onChange = e => {
this.setState({
value: e.target.value,
});
};
// radio component, manage the ‘disabled’ boolean separately
<>
<Radio value={1} disabled={this.state.disabled}>
Value 1
</Radio>
<br />
<Radio value={2} disabled={this.state.disabled}>
Value 2
</Radio>
</>
کامپوننت Slider
به کمک کامپوننت Slider میتونیم یک مقدار عددی رو به کاربر نمایش بدیم یا دریافت کنیم. بطور مثال اگر نیاز داشته باشیم سن کاربر رو دریافت کنیم میتونیم از کامپوننت Slider استفاده کنیم.
همچنین میتونیم به کمک این کامپوننت یک رنج و بازه عددی از کاربر بگیریم ( مثل بازه سنی 18 تا 24 )
تو تصویر زیر میشه چند نمونه از کامپوننت Slider دید :
برای استفاده از کامپوننت Slider کافیه بصورت زیر عمل کنیم :
onChange = value => {
this.setState({
inputValue: value,
});
};
// slider component
<Slider
min={1} // define a range
max={20}
disabled={this.state.disabled} // manage ‘disabled’ separately
onChange={this.onChange}
value={typeof inputValue === 'number' ? inputValue : 0}
/>
طرح های آماده در کتابخانه Antd
جدای از کامپوننت هایی که کتابخانه Ant Design در ری اکت به ما میده، ما میتونیم از یکسری طرح آماده و از پیش ساخته شده استفاده کنیم. ( مثل طرح کامنت، هدر، فوتر و .. )
بریم تا چند نمونه از این طرح های آماده و از پیش ساخته شده رو ببینیم …
کامپونت Comment ( کامنت یا همون نظرات )
به کمک کامپوننت Comment میتونیم نظرات کاربران خودمون رو نمایش بدیم. خروجی این کامپوننت رو میشه تو تصویر زیر دید :
برای استفاده از این کامپوننت کافیه از تیکه کد زیر استفاده کنیم :
<Comment
actions={actions} // the action button settings
author={<a>Han Solo</a>} // the name of comment author
avatar={
<Avatar src="source_for_avatar.png" alt="Han Solo"/>
}
content={// content here} // main comment
/>
کامپوننت Card
به کمک کامپوننت Card در antd میتونیم اطلاعات محصول یا خدمات خودمون رو نمایش بدیم. بطور مثال توی صفحه محصولات، میتونیم لیست محصولات فروشگاه خودمون رو نمایش بدیم.
یا حتی در صفحه وبلاگ، هر مقاله خودمون رو به کمک Card نمایش بدیم. کامپوننت Card میتونه شامل عنوان، تصویر، توضیحات، دکمه، لینک و .. باشه.
تو تصویر زیر میشه چند نمونه از کامپوننت Card دید :
برای استفاده از کامپوننت Card ، باید بصورت زیر عمل کنیم :
<div className="site-card-border-less-wrapper"> // the css class
<Card title="Card title" bordered={false} style={{ width: 300 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</div>
جمع بندی
کتابخانه Antd در ری اکت بیش از 75 کامپوننت آماده و طرح از پیش ساخته شده در اختیار ما میزاره و کمک میکنه که سرعت توسعه پذیری اپیکیشن ما افزایش پیدا کنه.
استفاده از کتابخانه Ant Design در ریکت کمک میکنه که پروژه ما استاندارد باشه.
کامپوننت های Ant Design کاملا ریسپانسیو و بهینه هستن و قابلیت شخصی سازی دارن ( میتونیم بر حسب سلیقه خودمون استایلشون رو عوض کنیم )
ساختن برخی کامپوننت ها خیلی زمانبر و حوصله سر بر هست اما به کمک کتابخانه Ant Design در React میتونیم تو چند لحظه ازشون استفاده کنیم.
کتابخانه Ant Design در ری اکت با در اختیار گذاشتن بیش از 75 کامپوننت و طرح از پیش ساخته شده و آماده به ما در پیاده سازی کامپوننت ها و طرح های UI ری اکتی کمک میکنه.
بله.
ما میتونیم کامپوننت های آماده Ant Design رو بر حسب سلیقه خودمون تغییر بدیم ( از رنگ و سایز گرفته تا افکت و .. )
بله.
کامپوننت های Antd نسبت به سایر رقبای خودش بهینه هستن.
به عنوان توصیه ی شخصی کتابخانه ی Ant Design رو توصیه میکنم.
بله، این کتابخانه بیش از 1.3 میلیون دانلود هفتگی در npm داره.
دیدگاهتان را بنویسید