CSS: page-layout ​

div[class~="instui-page-layout"] — Սովորական երեք սյունանոց էջային դասավորություն՝ վերնագրով, կողային տողով և հիմնական բովանդակությամբ.

✅ Օգտագործել Page-Layout երբ՝

  • Ձեզ պետք է դասական էջի կառուցվածք՝ նավիգացիայով և բովանդակային շրջաններով

  • Էջը ունի պարզ կառուցված հիմնական բովանդակության տարածքով, որի կողքին կան լրացուցիչ շրջաններ

  • Դուք ուզում եք layout-ի նկատմամբ համաչափ արանքավորում և ուղղորդում 🚫 Դ չօգտագործեք Page-Layout երբ՝

  • Սահմանում եք միասյուն էջ — փոխարենը օգտագործեք ավելի պարզ դասավորություն

  • Կողային տողը մրցակցում է հիմնական բովանդակության հետ համանման կարևորության համար

Մուտքականություն ​

  • Նշեք հիմնական բովանդակության տարածքը որպես <main> լենդմարկ
  • Կողային տողին տվեք role="navigation" կամ role="complementary" ըստ անհրաժեշտության
  • Բացահայտեք, որ լենդմարկ շրջանները ունեն տարբեր aria-լեյբելներ

Օգտագործում ​

css
@import "@pantoken/plugin-layouts/layouts.css";

Մասեր ​

ՄասՆկարագիր
.instui-bodyՄիշտայն մարմին՝ ներառյալ կողային տողը և բովանդակությունը.
.instui-footerՆերքեւի ոտնագիր (footer) հատված.
.instui-headerՎերի՛ւ վերնագրի հատված.
.instui-mainԿենտրոնական բովանդակային տարածք.
.instui-sidebarՃառագայթային նավիգացիոն կամ աջակցության սյուն.

Փոփոխական վիճակներ ​

ՎիճակՆկարագիր
:optional—

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--instui-color-border——
--instui-color-footer-background——
--instui-color-footer-text——
--instui-color-header-background——
--instui-color-sidebar-background——
--instui-font-size-small<length>—
--instui-space-medium——

Ավելին կապված ​