ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
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}.

ንብረት ሓደ ካብ ዝኾነሉ ፤

  • top- ንቐጥታዊ topኣቀማምጣ
  • start- ንኣግማድ leftኣቀማምጣ (ብLTR)
  • bottom- ንቐጥታዊ bottomኣቀማምጣ
  • end- ንኣግማድ rightኣቀማምጣ (ብLTR)

ኣበይ መርገጺ ሓደ ካብ፤

  • 0- 0ንወሰን ኣቀማምጣ
  • 50- 50%ንወሰን ኣቀማምጣ
  • 100- 100%ንወሰን ኣቀማምጣ

$position-values(ኣብቲ ናይ ሳስ ካርታ ተለዋዋጢ ኣታዊታት ብምውሳኽ ተወሳኺ ናይ ቦታ ክብርታት ክትውስኽ ትኽእል ኢኻ ።)

<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>

ማእከላይ ባእታታት

ብተወሳኺ፡ ነቶም ባእታታት ብtransform utility class ውን ከተማእከሎም ትኽእል ኢኻ .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%
);

ዩቲሊቲስ ኤፒኣይ

ፖዚሽን ዩቲሊቲታት ኣብ ዩቲሊቲታትና ኤፒኣይ ኣብ scss/_utilities.scss. ከመይ ጌርካ ናይ ዩቲሊቲስ ኤፒኣይ ከም እትጥቀመሉ ተማሃር።

    "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%),
      )
    ),