സ്ഥാനം

ഒരു മൂലകത്തിന്റെ സ്ഥാനം വേഗത്തിൽ ക്രമീകരിക്കുന്നതിന് ഈ ഷോർട്ട്ഹാൻഡ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.

ഈ പേജിൽ

സ്ഥാന മൂല്യങ്ങൾ

ദ്രുത പൊസിഷനിംഗ് ക്ലാസുകൾ ലഭ്യമാണ്, അവ പ്രതികരിക്കുന്നില്ലെങ്കിലും.

<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 മാപ്പ് വേരിയബിളിലേക്ക് എൻട്രികൾ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് കൂടുതൽ സ്ഥാന മൂല്യങ്ങൾ ചേർക്കാൻ കഴിയും .)

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>

സാസ്

മാപ്പുകൾ

ഡിഫോൾട്ട് പൊസിഷൻ യൂട്ടിലിറ്റി മൂല്യങ്ങൾ ഒരു സാസ് മാപ്പിൽ പ്രഖ്യാപിച്ചു, തുടർന്ന് ഞങ്ങളുടെ യൂട്ടിലിറ്റികൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്നു.

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