باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

شوێن

ئەم سوودمەندیانەی کورتکراوە بەکاربهێنە بۆ ڕێکخستنی خێرای شوێنی توخمێک.

بەهاکانی پێگە

پۆلەکانی جێگیرکردنی خێرا بەردەستە، هەرچەندە وەڵامدەرەوە نین.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

ڕێکخستنی توخمەکان

بە ئاسانی توخمەکان ڕێکبخە لەگەڵ سوودمەندییەکانی جێگیرکردنی لێوار. فۆرماتەکەی بریتییە لە {property}-{position}.

لە کوێدا موڵک یەکێکە لە:

  • toptop- بۆ شوێنی ڕاست
  • start- بۆ شوێنی ئاسۆیی left(بە LTR)
  • bottombottom- بۆ شوێنی ڕاست
  • end- بۆ شوێنی ئاسۆیی right(بە LTR)

لە کوێ پێگە یەکێکە لە:

  • 0- بۆ 0شوێنی لێوار
  • 50- بۆ 50%شوێنی لێوار
  • 100- بۆ 100%شوێنی لێوار

(دەتوانیت بەهای شوێنی زیاتر زیاد بکەیت بە زیادکردنی نووسراوەکان بۆ $position-valuesگۆڕاوەی نەخشەی Sass).

<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

توخمەکانی ناوەند

جگە لەوەش دەتوانیت توخمەکان بە پۆلی سوودمەندی گۆڕانکاری لە ناوەڕاستدا دابنێیت .translate-middle.

ئەم پۆلە گۆڕانکارییەکان translateX(-50%)و translateY(-50%)بۆ ئەو توخمە بەکاردەهێنێت کە بە تێکەڵکردن لەگەڵ سوودمەندییەکانی جێگیرکردنی لێوار، ڕێگەت پێدەدات توخمێک بە ناوەندێکی ڕەها دابنێیت.

<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle"></div>
  <div class="position-absolute top-0 start-50 translate-middle"></div>
  <div class="position-absolute top-0 start-100 translate-middle"></div>
  <div class="position-absolute top-50 start-0 translate-middle"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 start-100 translate-middle"></div>
  <div class="position-absolute top-100 start-0 translate-middle"></div>
  <div class="position-absolute top-100 start-50 translate-middle"></div>
  <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

بە زیادکردن .translate-middle-xیان .translate-middle-yپۆلەکان، دەتوانرێت توخمەکان تەنها بە ئاراستەی ئاسۆیی یان ڕاست دابنرێت.

<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

نموونە

لێرەدا چەند نموونەیەکی ژیانی ڕاستەقینەی ئەم چینانە دەخەینەڕوو:

<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-dark position-relative">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>

<button type="button" class="btn btn-primary position-relative">
  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>

دەتوانیت ئەم پۆلانە بە پێکهاتەی هەبوو بەکاربهێنیت بۆ دروستکردنی پۆلی نوێ. لەبیرت بێت کە دەتوانیت کاراییەکانی درێژ بکەیتەوە بە زیادکردنی نووسراوەکان بۆ $position-valuesگۆڕاوەکە.

<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

ساس

نەخشەکان

بەهاکانی سوودمەندی شوێنی پێشوەختە لە نەخشەی ساسدا ڕادەگەیەنرێن، پاشان بەکاردەهێنرێن بۆ دروستکردنی سوودمەندیەکانمان.

$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

API ی سوودمەندیەکان

سوودمەندییەکانی شوێن لە APIی خزمەتگوزارییەکانمان لە scss/_utilities.scss. فێربە چۆن API ی سوودمەندیەکان بەکاربهێنیت.

    "position": (
      property: position,
      values: static relative absolute fixed sticky
    ),
    "top": (
      property: top,
      values: $position-values
    ),
    "bottom": (
      property: bottom,
      values: $position-values
    ),
    "start": (
      property: left,
      class: start,
      values: $position-values
    ),
    "end": (
      property: right,
      class: end,
      values: $position-values
    ),
    "translate-middle": (
      property: transform,
      class: translate-middle,
      values: (
        null: translate(-50%, -50%),
        x: translateX(-50%),
        y: translateY(-50%),
      )
    ),