ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

පාවෙන

අපගේ ප්‍රතිචාරාත්මක පාවෙන උපයෝගිතා භාවිතා කරමින් ඕනෑම කඩඉමක් හරහා ඕනෑම මූලද්‍රව්‍යයක් මත පාවෙන ටොගල් කරන්න.

දළ විශ්ලේෂණය

මෙම උපයෝගිතා පන්ති CSS floatගුණය භාවිතා කරමින් වත්මන් දර්ශන ප්‍රමාණය මත පදනම්ව මූලද්‍රව්‍යයක් වමට හෝ දකුණට පාවී යයි, නැතහොත් පාවෙන අබල කරයි . !importantවිශේෂිත ගැටළු මඟහරවා ගැනීම සඳහා ඇතුළත් කර ඇත. මේවා අපගේ ජාල පද්ධතියට සමාන දර්ශන තල බිඳුම් ලක්ෂ්‍ය භාවිතා කරයි. ෆ්ලෙක්ස් අයිතම කෙරෙහි පාවෙන උපයෝගිතා කිසිදු බලපෑමක් නොකරන බව කරුණාවෙන් සලකන්න.

සියලුම දර්ශන ප්‍රමාණයන්හි පාවෙන ආරම්භය

සියලුම දර්ශන ප්‍රමාණයන් මත Float end

සියලුම viewport ප්‍රමාණයන් මත පාවෙන්න එපා
html
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

ප්රතිචාරාත්මක

floatඑක් එක් අගය සඳහා ප්‍රතිචාරාත්මක වෙනස්කම් ද පවතී .

SM (කුඩා) හෝ ඊට වඩා පළල දර්ශන තොටුපල මත පාවෙන ආරම්භය

MD (මධ්‍යම) හෝ ඊට වඩා පළල දර්ශන තොටුපල මත පාවෙන ආරම්භය

LG ප්‍රමාණයේ (විශාල) හෝ ඊට වඩා පළල් නැරඹුම් තොටුපලවල පාවෙන ආරම්භය

XL ප්‍රමාණයේ (අතිරේක-විශාල) හෝ ඊට වඩා පළල දර්ශන තොටුපලවල පාවෙන ආරම්භය

html
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

මෙන්න සියලුම උපකාරක පන්ති:

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none

සාස්

උපයෝගිතා API

පාවෙන උපයෝගිතා අපගේ උපයෝගිතා API හි ප්‍රකාශ කර ඇත scss/_utilities.scss. උපයෝගිතා API භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),