کامپوننتها (Components)
کامپوننتها (Components) المانهای قابل استفاده مجدد میسازند. هر instance از طریق propertyها قابل سفارشیسازی است.
قالبها blueprint صفحات خاصاند؛ کامپوننتها blueprint یک المان (مثلاً دکمه) یا مجموعه المانها (مثلاً card) برای reuse و سفارشیسازی per instance در کل سایت.
از هر المان (با همه فرزندان) — دکمه، card، navigation، حتی hero section — کامپوننت بسازید و هر جا reuse کنید.
هر تغییر روی کامپوننت اصلی خودکار روی همه instanceها اعمال میشود.
ساختار و استایل المانهای reusable در کل سایت یکسان میماند.
نتیجه: workflow بسیار یکپارچه، scalable و قابل نگهداری. 🚀
نحوه ساخت کامپوننت
از هر المان بهجز Template و Filter، راستکلیک و Save as component را بزنید.
در popup نام (الزامی)، category (اختیاری) و description (اختیاری) وارد کنید. Create را بزنید.
پس از ساخت، از components library هر جای سایت اضافه کنید.
کتابخانه کامپوننتها (Components Library)
از تب Components کنار تب Elements به کامپوننتها دسترسی دارید.
با drag & drop یا click (مثل هر المان) به canvas یا structure panel اضافه کنید.
آیکونهای بالای تب Components:
- Import: JSON کامپوننت از نصب دیگر.
- Export: همه کامپوننتهای سایت به JSON. برای یک کامپوننت، hover و آیکون export.
- Delete: آیکون delete برای حالت حذف؛ hover روی کامپوننت و delete. قبل از حذف export توصیه میشود.
تعداد instance و محل (صفحه فعلی/سراسری)
زیر نام کامپوننت تعداد instance است. برای «Card» مثلاً «Instances: 3/6» — 3 در صفحه فعلی، 6 در کل سایت.
Hover و آیکون «globe» همه instanceهای «Current page» و فهرست «Other Pages» با تعداد را نشان میدهد.
Instanceها — reuse کامپوننت
هر بار افزودن کامپوننت، یک Instance ساخته میشود.
تغییرات کامپوننت اصلی در همه instanceها در کل سایت منعکس میشود.
قبل از سفارشیسازی instanceها، بیایید ...
ویرایش کامپوننت اصلی
برای ویرایش المانهای کامپوننت اصلی (source of truth)، روی هر instance (بنفش) راستکلیک و Edit component را بزنید.
یا آیکون چرخدنده در header پنل کنترل instance:
اکنون کامپوننت اصلی را ویرایش میکنید — header پنل بنفش است.
هر تغییر روی کامپوننت اصلی روی همه instanceها اعمال میشود.
header کامپوننت اصلی:
- Description (info): نمایش/مخفی description (قابل ویرایش).
- Category (folder): category (قابل ویرایش).
- Properties (box): پنل properties.
- Instance (arrow): خروج از edit mode و بازگشت به instance یا پنل components. ESC هم خارج میکند.
در structure panel همه المانهای کامپوننت را میبینید:
برای تغییر عنوان Card، Heading داخل کامپوننت را انتخاب و متن را به «Just a card» تغییر دهید.
همه instanceها خودکار بهروز میشوند:
برای استفاده یکسان چندباره عالی است؛ قدرت واقعی در سفارشیسازی محتوای هر instance با Properties است.
Properties
Properties کنترلهای سفارشیسازی برای هر instance را expose میکنند.
property بسازیم تا عنوان و تصویر هر Card instance یکتا باشد.
فرایند دو مرحله: (1) ساخت property (2) اتصال property.
NOTE: ساخت و ویرایش properties مجوز Edit component builder permission میخواهد.
1) ساخت property
instance کامپوننت را انتخاب کنید.
آیکون «edit» در پنل properties سمت چپ:
اگر instance روی صفحه نیست، در Components library hover و آیکون edit.
در حالت edit کامپوننت اصلی، آیکون «box» در header پنل:
انواع property
| Property type | Connectable to | Example |
|---|---|---|
| Text | Text/textarea controls | Heading or Basic text |
| Rich text | Rich text controls | Rich text or Accordion content |
| Icon | Icon controls | Icon or Icon Box element |
| Image | Image controls | Image or Logo element |
| Image gallery | Image gallery controls | Image gallery or Carousel element |
| Link | Link controls | Button or Heading link |
| Select (@since 2.0) | Text/select controls | HTML tag, Button style |
| Toggle (@since 2.0) | Toggle controls | Hide element toggle |
| Query loop | Query loop controls | Layout elements |
| Global classes (@since 2.0) | Global classes control | Element global classes |
برای expose heading کارت، نوع Text را انتخاب کنید.
property name الزامیاست — نام توصیفی، مخصوصاً برای کامپوننتهای پیچیده.
property description اختیاری اما برای استفادهکنندگان مفید.
property group اختیاری؛ برای کامپوننتهای با propertyهای زیاد.
default property value اختیاری — برای control متصل؛ خالی = بدون پیشفرض.
2) اتصال property به control
property را به control المان مورد نظر وصل کنید.
پنل properties اگر property متصلنشده باشد پیام نشان میدهد.
propertyهای متصلنشده آیکون «broken link» دارند.
«Card heading» text را به Heading کارت وصل کنیم.
Heading را داخل کامپوننت انتخاب کنید.
آیکون بنفش گرد + کنار text control Heading:
کلیک + فهرست propertyها:
نکته
Workflow boost: با + بالای dropdown «Connect property» property جدید سریع بسازید.
«Card heading» را در dropdown انتخاب کنید.
Heading text control نام property متصل را نشان میدهد:
مقدار پیشفرض «Default Card heading» برای همه headingهای Card استفاده میشود.
اولین property ساخته و متصل شد. 🥳
همین دو مرحله را برای image property تکرار کنید. کامپوننت اکنون:
قطع اتصال property
روی setting property متصل کلیک، hover روی نام property و آیکون «unlink».
سفارشیسازی instance
اکنون همه Cardها محتوای یکسان دارند.
دو property برای عنوان و تصویر ساختیم — instance را انتخاب و مقادیر property در پنل کنترل:
میتوانید متن دکمه را هم با text property expose کنید.
کامپوننتها در loop و داخل loop
با query loop سازگارند — loop روی root کامپوننت یا loop داخل کامپوننت.
Card title از {post_title} و تصویر از {featured_image}.
property type «Query loop» برای سفارشیسازی query داخل کامپوننت per instance.
Variationهای کامپوننت
از Bricks 2.0، با Toggle property المانها را conditionally مخفی کنید.
Variation استایل با property Global classes.
Variation: نمایش/مخفی المان
Bricks 2.0 «Hide element» — آیکون "eye" در header پنل المان یا context menu.
toggle property را به «Builder Hide element» و/یا «Frontend: Hide element» وصل کنید.
«Hide element» با CSS مخفی نمیکند — المان اصلاً در DOM load نمیشود.
Variation: Global classes
Global classes @since 2.0 — variation استایل با global class. مجموعه class پیشفرض/سفارشی per instance:
مثال: property با گزینههای «Small»، «Medium»، «Large» — هر کدام global class متفاوت:
«Heading size» را به global classes control Heading وصل کنید:
روی instance «Large» انتخاب میکند — class prop-text-lg به Heading:
مثال ساده variation استایل — چند global class property per element مجاز است.
Label خالی = نام global class انتخابشده. Label کاربرپسند معمولاً بهتر.
class انتخابشده هر option هر زمان قابل تغییر است.
Variation: Local classes
بدون global classes از «Select» property با گزینههای سفارشی و Attributes control:
«Select» با گزینههای class name:
پس از اتصال به Attributes value، روی instance یک کلیک class color-red به Heading:
«Text» control به Attributes برای class name آزاد هم قابل اتصال است.
Unlink کامپوننت
راستکلیک instance → «Unlink component» زیر «Edit component».
پس از unlink، instance مستقل مثل المان عادی ویرایش میشود.
مبدل Global element به Component
Global elementها از @since 2.0 منسوخاند — «Global element to Component converter» زیر Bricks > Settings > General > Global elements.
Notes & Tips
- کامپوننت دقیقاً یک root element دارد
- از Template یا Query Filter element ساخته نمیشود
- در سازنده با رنگ بنفش شناسایی میشوند
- label هر instance مثل المان عادی قابل تغییر
- description و group property برای setup پیچیده مفیدند