پرش به محتویات

Block

المان Block یکی از چهار المان چیدمان در Bricks (نسخه 1.5+) است.

همراه با المان‌های Section و Div معرفی شد و همان کنترل‌های چیدمان قدرتمند Container را ارائه می‌دهد، اما به‌جای عرض ثابت 1100px Container از عرض پیش‌فرض 100% استفاده می‌کند.

این آن را به گزینه ایده‌آل برای استفاده داخل Container تبدیل می‌کند (مثلاً چیدمان ستونی/ردیفی)، یا هر جا که نیاز به پوشش کل عرض موجود دارید، به‌علاوه دسترسی سریع به تنظیمات direction و alignment. چون المان Block به‌طور پیش‌فرض از flex استفاده می‌کند.

از Block برای ایجاد چیدمان‌های چندستونه، sidebar یا هر چیدمانی که رفتار flexbox تمام‌عرض بدون محدودیت عرض Container می‌خواهید استفاده کنید. اگر می‌خواهید المان چیدمانتان فقط فضای محتوایش را اشغال کند، از المان Div استفاده کنید.

نکته: Block ها برای ایجاد چیدمان‌های ستونی ایده‌آل‌اند. وقتی به چند ستون با عرض مساوی نیاز دارید، Block ها را داخل یک Container قرار دهید و direction را به horizontal تنظیم کنید — به‌طور خودکار فضای موجود را به تساوی توزیع می‌کنند.

تنظیمات

  • Grid column (text) - span ستون CSS grid وقتی parent از grid layout استفاده می‌کند. ویژگی grid-column را کنترل می‌کند.

  • Grid row (text) - span ردیف CSS grid وقتی parent از grid layout استفاده می‌کند. ویژگی grid-row را کنترل می‌کند.

  • Query loop - قابلیت query loop برای محتوای پویا. برای المان‌های Container، Block، Div و Section در دسترس است.

  • Link (link) - تنظیمات لینک هنگام استفاده از anchor tag. وقتی HTML tag روی a تنظیم شده لازم است.

  • HTML tag (select) - تگ HTML برای المان Block. گزینه‌ها: div، section، a [Link]، article، nav، ol، ul، li، aside، address، figure، custom. پیش‌فرض: div.

  • Custom tag (text) - تگ HTML سفارشی وقتی «custom» انتخاب شده. بدون attribute. وقتی HTML tag برابر custom است لازم است.

  • Display (select) - ویژگی CSS display. گزینه‌ها: flex، grid، block، inline-block، inline، none. پیش‌فرض: flex.

Grid Layout (وقتی Display برابر grid است)

  • Gap (number with units) - فاصله بین آیتم‌های grid. ویژگی grid-gap را کنترل می‌کند.

  • Grid template columns (text) - ستون‌های template CSS grid. از dynamic data و variables پشتیبانی می‌کند.

  • Grid template rows (text) - ردیف‌های template CSS grid. از dynamic data و variables پشتیبانی می‌کند.

  • Grid auto columns (text) - اندازه auto columns. از dynamic data و variables پشتیبانی می‌کند.

  • Grid auto rows (text) - اندازه auto rows. از dynamic data و variables پشتیبانی می‌کند.

  • Grid auto flow (select) - جهت auto flow. گزینه‌ها: row، column، dense.

  • Justify items (justify-content) - تراز justify items در grid.

  • Align items (align-items) - تراز align items در grid.

  • Justify content (justify-content) - تراز justify content در grid.

  • Align content (align-items) - تراز align content در grid.

Flex Layout (وقتی Display برابر flex است)

  • Flex wrap (select) - رفتار wrap در flexbox. گزینه‌ها: No wrap، Wrap، Wrap reverse.

  • Direction (direction) - جهت flexbox (ردیف/ستون). ویژگی flex-direction را کنترل می‌کند.

  • Align self (align-items) - align-self برای این flex item. ویژگی align-self را با !important کنترل می‌کند.

  • Align main axis (justify-content) - تراز محور اصلی. ویژگی justify-content را کنترل می‌کند.

  • Align cross axis (align-items) - تراز محور متقاطع. ویژگی align-items را کنترل می‌کند.

  • Column gap (number with units) - فاصله بین ستون‌های flex. ویژگی column-gap را کنترل می‌کند.

  • Row gap (number with units) - فاصله بین ردیف‌های flex. ویژگی row-gap را کنترل می‌کند.

  • Flex grow (number) - ضریب flex grow. حداقل: 0. ویژگی flex-grow را کنترل می‌کند. پیش‌فرض: 0.

  • Flex shrink (number) - ضریب flex shrink. حداقل: 0. ویژگی flex-shrink را کنترل می‌کند. پیش‌فرض: 1.

  • Flex basis (text) - مقدار flex basis. از dynamic data و variables پشتیبانی می‌کند. ویژگی flex-basis را کنترل می‌کند. پیش‌فرض: auto.

ترتیب (Order)

  • Order (number) - ترتیب flexbox. حداقل: -999. ویژگی order را کنترل می‌کند. پیش‌فرض: 0. وقتی display برابر none نیست در دسترس است.

استایل (Style)

این کنترل‌ها در تب Style تنظیمات المان در دسترس‌اند.

Masonry

  • Masonry layout (checkbox) - چیدمان masonry برای المان‌های فرزند.
  • Columns (number) - تعداد ستون‌های masonry. پیش‌فرض: 3. ویژگی --columns CSS را کنترل می‌کند.
  • Spacing (number with units) - فاصله بین آیتم‌های masonry. پیش‌فرض: 10px. ویژگی --gutter CSS را کنترل می‌کند.
  • Horizontal order (checkbox) - ترتیب افقی در چیدمان masonry.
  • Transition: Duration (number with units) - مدت انیمیشن برای transition های masonry. پیش‌فرض: 0.4s. برای غیرفعال‌کردن انیمیشن‌های پیش‌فرض «0» بگذارید.
  • Reveal animation (select) - نوع انیمیشن برای آیتم‌های masonry. گزینه‌ها: Scale، Fade، Slide from left، Slide from right، Skew. پیش‌فرض: Scale. فقط روی آیتم‌های جدید اضافه‌شده به DOM اعمال می‌شود.

استایل تم: المان – Block

می‌توانید تنظیمات پیش‌فرض Block را در theme styles زیر «Element – Block» تغییر دهید:

  • width
  • min-width
  • max-width
  • margin
  • padding

مرجع توسعه‌دهنده

برای JSON schema کامل به Block Schema مراجعه کنید.