in English

Offcanvas

Цөөн хэдэн анги, манай JavaScript залгаасыг ашиглан навигаци хийх, дэлгүүр хэсэх тэрэг болон бусад зүйлд зориулсан далд хажуугийн самбаруудыг бүтээгээрэй.

Энэ хуудсан дээр

Хэрхэн ажилладаг

Offcanvas нь JavaScript-ээр сольж, харах цонхны зүүн, баруун, дээд эсвэл доод ирмэгээс гарч ирэх боломжтой хажуугийн хэсэг юм. Товчлуур эсвэл зангууг таны сэлгэх тодорхой элементүүдэд хавсаргасан гох болгон ашигладаг бөгөөд dataатрибутууд нь манай JavaScript-г дуудахад ашиглагддаг.

Offcanvas нь модальтай ижил JavaScript кодыг хуваалцдаг. Үзэл баримтлалын хувьд тэдгээр нь нэлээд төстэй боловч тусдаа залгаасууд юм.
Үүний нэгэн адил, offcanvas-ийн загвар болон хэмжээсийн зарим эх сурвалжийн Sass хувьсагч нь модаль хувьсагчдаас өвлөгддөг.
Харуулсан үед offcanvas нь өгөгдмөл backdrop-г агуулж байгаа бөгөөд үүнийг товшиж, гадуурх зургийг нуух боломжтой.
Модальтай адилаар нэг удаад зөвхөн нэг гадуур зураг харуулах боломжтой.

Анхаараарай! CSS нь хөдөлгөөнт дүрсийг хэрхэн зохицуулдгийг харгалзан тухайн элемент дээр marginэсвэл ашиглах боломжгүй. Харин оронд нь ангиудыг бие даасан боодлын элемент болгон ашигла.translate.offcanvas

Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

Жишээ

Offcanvas бүрэлдэхүүн хэсгүүд

Доорх нь өгөгдмөлөөр харуулсан offcanvas жишээ юм (-ээр дамжуулан .show) .offcanvas. Offcanvas нь хаах товчлуур бүхий толгой хэсгийг дэмжих, зарим эхэнд нэмэлт үндсэн ангиллыг агуулдаг padding. Бид танд аль болох хэрэгсэхгүй болгох үйлдлүүдтэй offcanvas толгой хэсгийг оруулах эсвэл хэрэгсэхгүй болгох үйлдлийг тодорхой зааж өгөхийг санал болгож байна.

Offcanvas-ийн контент энд байна. Та бараг ямар ч Bootstrap бүрэлдэхүүн хэсэг эсвэл захиалгат элементүүдийг энд байрлуулж болно.

html

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Шууд демо

.showДоорх товчлууруудыг ашиглан ангитай элемент дээрх ангийг сэлгэх боломжтой offcanvas элементийг JavaScript-ээр харуулах, нуухыг ашиглана уу .offcanvas.

.offcanvasагуулгыг нуух (өгөгдмөл)
.offcanvas.showагуулгыг харуулдаг

Та hrefатрибут бүхий холбоос эсвэл шинж чанар бүхий товчлуурыг ашиглаж болно data-bs-target. Аль ч тохиолдолд data-bs-toggle="offcanvas"шаардлагатай.

href-тэй холбох

Зарим текстийг орлуулагч болгон. Бодит амьдрал дээр та өөрийн сонгосон элементүүдтэй байж болно. Текст, зураг, жагсаалт гэх мэт.

html

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Биеийг гүйлгэх

<body>Гадуур зураг болон түүний дэвсгэр харагдах үед элементийг гүйлгэх нь идэвхгүй болно. data-bs-scrollГүйлгэхийг идэвхжүүлэхийн тулд атрибутыг ашиглана уу <body>.

Энэ сонголтыг хэрхэн ажиллаж байгааг харахын тулд хуудасны үлдсэн хэсгийг гүйлгэж үзнэ үү.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Биеийн гүйлгэх болон дэвсгэр

Та мөн <body>харагдахуйц дэвсгэрээр гүйлгэхийг идэвхжүүлж болно.

Энэ сонголтыг хэрхэн ажиллаж байгааг харахын тулд хуудасны үлдсэн хэсгийг гүйлгэж үзнэ үү.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Статик дэвсгэр

Backdrop-г статикаар тохируулсан бол гадна талд нь дарахад гаднах зураг хаагдахгүй.

Миний гадна талд дарвал би хаахгүй.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Харанхуй даавуу

5.2.0 хувилбар дээр нэмсэн

Харанхуй навигац гэх мэт өөр өөр контекстэд илүү нийцүүлэхийн тулд гаднах зурагны харагдах байдлыг хэрэгслүүдээр өөрчил. Харанхуй даавуугаар зөв загвар гаргахын .text-bg-darkтулд бид энд .offcanvasболон дээр нэмдэг. Хэрэв танд унадаг цэснүүд байгаа бол -д нэмэх талаар бодож үзээрэй ..btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Канвас агуулгыг энд байрлуул.

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Хариуцлагатай

5.2.0 хувилбар дээр нэмсэн

Хариуцлагатай offcanvas ангиуд нь харагдацын гаднах агуулгыг заасан цэгээс доош нуудаг. Энэ таслах цэгээс дээш байвал доторх контентууд ердийнхөөрөө ажиллах болно. Жишээлбэл, завсарлагааны .offcanvas-lgцэгийн доор агуулгыг нуух lg, харин завсарлагаан дээрх агуулгыг харуулна lg.

Хөтчийнхөө хэмжээг өөрчилнө үү.

Энэ нь доторх агуулга юм .offcanvas-lg.

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Хариуцлагатай offcanvas ангиудыг таслах цэг бүрт ашиглах боломжтой.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

Байршил

Offcanvas бүрэлдэхүүн хэсгүүдийн өгөгдмөл байршил байхгүй тул та доорх өөрчилсөн ангиудын аль нэгийг нэмэх шаардлагатай.

.offcanvas-startхарагдах цонхны зүүн талд offcanvas байрлуулна (дээр харуулсан)
.offcanvas-endoffcanvas-ийг харах цонхны баруун талд байрлуулна
.offcanvas-topхарах цонхны дээд талд offcanvas байрлуулна
.offcanvas-bottomхарагдацын доод талд offcanvas байрлуулна

Доорх дээд, баруун, доод жишээг үзээрэй.

...

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Хүртээмжтэй байдал

Offcanvas самбар нь концепцын хувьд модаль харилцах цонх aria-labelledby="..."тул --д offcanvas гарчгийг лавлах-ыг нэмэхээ мартуузай .offcanvas. role="dialog"Бид үүнийг JavaScript-ээр нэмсэн тул та нэмэх шаардлагагүй гэдгийг анхаарна уу .

CSS

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн аргын нэг хэсэг болгон offcanvas одоо .offcanvasбодит цагийн сайжруулсан тохиргоонд зориулж локал CSS хувьсагчдыг ашиглаж байна. CSS хувьсагчийн утгыг Sass-ээр тохируулдаг тул Sass-н тохиргоог дэмжсэн хэвээр байна.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass хувьсагч

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Хэрэглээ

Offcanvas залгаас нь хүнд ачааг даах хэд хэдэн анги, шинж чанарыг ашигладаг:

.offcanvasагуулгыг нуудаг
.offcanvas.showагуулгыг харуулж байна
.offcanvas-startзүүн талд байгаа даавууг нуудаг
.offcanvas-endбаруун талд байгаа даавууг нуудаг
.offcanvas-topдээд талд байгаа даавууг нуудаг
.offcanvas-bottomДоод талд байгаа даавууг нуудаг

data-bs-dismiss="offcanvas"JavaScript функцийг идэвхжүүлдэг атрибут бүхий хаах товчийг нэмнэ үү . <button>Бүх төхөөрөмжид зөв ажиллахын тулд элементийг ашиглахаа мартуузай .

Өгөгдлийн шинж чанаруудаар дамжуулан

Сэлгэх

Нэг offcanvas элементийн хяналтыг автоматаар оноохын тулд элемент дээр нэмэх data-bs-toggle="offcanvas"ба a data-bs-targetэсвэл . hrefАттрибут нь data-bs-targetoffcanvas-г ашиглах CSS сонгогчийг хүлээн зөвшөөрдөг. offcanvasOffcanvas элементэд анги нэмэхээ мартуузай. Хэрэв та үүнийг анхдагчаар нээхийг хүсвэл нэмэлт анги нэмнэ үү show.

Хаах

Доор үзүүлсэн зураг dataдээрх товчлуур дээрх шинж чанарыг ашиглан ажлаас халах боломжтой .

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

эсвэл доор үзүүлсэн шиг зургийн гадна талын товчлуур дээр:data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

Гаднаас гадуурх зургийг хаах хоёр арга хоёулаа дэмжигддэг ч гадна зурагнаас хасах нь ARIA Authoring Practices Guide харилцах цонхны (модал) загвартай таарахгүй гэдгийг санаарай . Үүнийг эрсдэлд оруулаарай.

JavaScript-ээр дамжуулан

Гараар идэвхжүүлэх:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Сонголтууд

Сонголтуудыг өгөгдлийн атрибутууд эсвэл JavaScript-ээр дамжуулж болох тул та -д сонголтын нэрийг нэмж data-bs-болно data-bs-animation="{value}". Өгөгдлийн шинж чанараар сонголтуудыг дамжуулахдаа сонголтын нэрийн төрлийг " camelCase "-ээс " kebab-case " болгон өөрчлөхөө мартуузай . Жишээлбэл, data-bs-custom-class="beautifier"оронд нь хэрэглэнэ data-bs-customClass="beautifier".

Bootstrap 5.2.0 хувилбарын хувьд бүх бүрэлдэхүүн хэсгүүд нь энгийн бүрэлдэхүүн хэсгийн тохиргоог JSON стринг болгон байрлуулах боломжтой туршилтын нөөцлөгдсөн өгөгдлийн шинж чанарыг дэмждэг. data-bs-configЭлемент data-bs-config='{"delay":0, "title":123}'болон data-bs-title="456"шинж чанаруудтай бол эцсийн titleутга нь байх 456ба тусдаа өгөгдлийн шинж чанарууд нь дээр өгөгдсөн утгыг дарна data-bs-config. Нэмж дурдахад, одоо байгаа өгөгдлийн атрибутууд нь JSON утгыг хадгалах боломжтой data-bs-delay='{"show":0,"hide":150}'.

Нэр	Төрөл	Өгөгдмөл	Тодорхойлолт
`backdrop`	логик эсвэл мөр`static`	`true`	Offcanvas нээлттэй байхад биеийн дэвсгэр дээр дэвсгэр түрхээрэй. Эсвэл `static`товших үед зурагны гаднах хэсгийг хаадаггүй арын дэвсгэрийг зааж өгнө үү.
`keyboard`	логик	`true`	Escape товчлуурыг дарах үед гаднах зургийг хаадаг.
`scroll`	логик	`false`	Offcanvas нээлттэй үед биеийг гүйлгэхийг зөвшөөрнө үү.

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү .

Таны агуулгыг гадуурх элемент болгон идэвхжүүлдэг. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object.

Та бүтээгчээр offcanvas жишээ үүсгэж болно, жишээлбэл:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Арга	Тодорхойлолт
`getInstance`	DOM элементтэй холбоотой offcanvas жишээг авах боломжийг олгодог статик арга.
`getOrCreateInstance`	DOM элементтэй холбоотой offcanvas жишээг авах эсвэл эхлүүлээгүй тохиолдолд шинээр үүсгэх боломжийг олгодог статик арга.
`hide`	Offcanvas элементийг нууна. Offcanvas элементийг нуухаас өмнө (өөрөөр хэлбэл `hidden.bs.offcanvas`үйл явдал болохоос өмнө) дуудагч руу буцна.
`show`	Offcanvas элементийг харуулж байна. Offcanvas элементийг харуулахаас өмнө (өөрөөр хэлбэл `shown.bs.offcanvas`үйл явдал болохоос өмнө) дуудагч руу буцна.
`toggle`	Offcanvas элементийг харуулах эсвэл нуух горимд шилжүүлдэг. Offcanvas элементийг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл `shown.bs.offcanvas`эсвэл `hidden.bs.offcanvas`үйл явдал болохоос өмнө) дуудагч руу буцна.

Үйл явдал

Bootstrap-ийн offcanvas анги нь offcanvas функцэд холбогдох хэд хэдэн үйл явдлыг харуулж байна.

Үйл явдлын төрөл	Тодорхойлолт
`hide.bs.offcanvas`	`hide`Арга дуудагдсан үед энэ үйл явдал шууд идэвхждэг .
`hidden.bs.offcanvas`	Offcanvas элементийг хэрэглэгчээс нуусан үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
`hidePrevented.bs.offcanvas`	Энэ үйл явдал нь канвасыг харуулж, арын дэвсгэрийг нь харуулж, `static`гадна талд товшилт хийх үед идэвхждэг. Мөн escape товчлуурыг дарж, `keyboard`сонголтыг тохируулсан үед үйл явдал идэвхждэг `false`.
`show.bs.offcanvas`	`show`Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
`shown.bs.offcanvas`	Offcanvas элементийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas

Хэрхэн ажилладаг

Жишээ

Offcanvas бүрэлдэхүүн хэсгүүд

Offcanvas

Шууд демо

Offcanvas

Биеийг гүйлгэх

Их биетэй гүйлгэх зурагтай

Биеийн гүйлгэх болон дэвсгэр

Гүйлгэх онцлогтой дэвсгэр

Статик дэвсгэр

Offcanvas

Харанхуй даавуу

Offcanvas

Хариуцлагатай

Хүсэлттэй зураг

Байршил

Гадуур даавуун дээд

Offcanvas зөв

Доод талын даавуу

Хүртээмжтэй байдал

CSS

Хувьсагч

Sass хувьсагч

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

Сэлгэх

Хаах

JavaScript-ээр дамжуулан

Сонголтууд

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Үйл явдал