ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
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( Sass map විචල්‍යයට ඇතුළත් කිරීම් එකතු කිරීමෙන් ඔබට තවත් ස්ථාන අගයන් එකතු කළ හැක .)

html
<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%)මූලද්‍රව්‍යයට අදාළ වන අතර එමඟින් දාර ස්ථානගත කිරීමේ උපයෝගිතා සමඟ ඒකාබද්ධව මූලද්‍රව්‍යයක් නිරපේක්ෂ කේන්ද්‍රගත කිරීමට ඔබට ඉඩ සලසයි.

html
<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පන්ති මගින් මූලද්රව්ය ස්ථානගත කළ හැක්කේ තිරස් හෝ සිරස් දිශාවට පමණි.

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

උදාහරණ

මෙම පන්තිවල සැබෑ ජීවිතයේ උදාහරණ කිහිපයක් මෙන්න:

html
<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" 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විචල්‍යයට ඇතුළත් කිරීම් එකතු කිරීමෙන් ඔබට එහි ක්‍රියාකාරිත්වය දිගු කළ හැකි බව මතක තබා ගන්න .

html
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" aria-label="Progress" 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>

සාස්

සිතියම්

පෙරනිමි පිහිටුම් උපයෝගිතා අගයන් Sass සිතියමක ප්‍රකාශ කර, පසුව අපගේ උපයෝගිතා උත්පාදනය කිරීමට භාවිතා කරයි.

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