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

Div

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

همراه با المان‌های Section و Block معرفی شد و ایجاد چیدمان‌های انعطاف‌پذیر در کمترین زمان را ممکن می‌کند. المان Div در Bricks یک div ساده و بدون استایل است و عمومی‌ترین المان برای گروه‌بندی و چیدمان محتوا است.

در حالی که از Container برای «نگه داشتن» سایر المان‌ها در عرض از پیش تعریف‌شده 1100px و از Block با عرض 100% استفاده می‌کنید، المان Div هیچ preset ای ندارد.

این آن را برای استفاده داخل سایر المان‌های چیدمان ایده‌آل می‌کند — چون بر اساس محتوایش رشد و کوچک می‌شود — یا برای ساخت چیدمان‌های مبتنی بر class با استفاده از Div. از المان Div برای گروه‌بندی محتوا، ایجاد چیدمان‌های سفارشی یا وقتی به کنترل کامل استایل بدون ویژگی‌های از پیش تعریف‌شده نیاز دارید استفاده کنید.

نکته: تنظیم HTML tag المان Div به شما امکان می‌دهد آن را به هر المان HTML معنایی (article، nav، ul، li، a (link) و غیره) تبدیل کنید در حالی که تمام کنترل‌های چیدمان و استایل قدرتمند را حفظ می‌کنید. این انعطاف‌پذیری آن را به بلوک ساختاری همه‌کاره‌ای تبدیل می‌کند که می‌تواند با ساختارهای محتوا و الزامات معنایی مختلف تطبیق یابد.

تنظیمات

  • 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 برای المان Div. گزینه‌ها: 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. پیش‌فرض: block.

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 پشتیبانی می‌کند. ویژگی 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 اعمال می‌شود.

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

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

  • display
  • flex-direction (اگر display روی «flex» تنظیم شده)
  • justify-content (اگر display روی «flex» تنظیم شده)
  • align-items (اگر display روی «flex» تنظیم شده)
  • width
  • min-width
  • max-width
  • margin
  • padding

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

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