سویچ ها

مثال های بوت استرپ

سویچ‌ها، المان های اینپوت هستند که میتوانند برای تغییر محتوا یا تغییر وضعیت در اینپوت ها استفاده شوند. سویچ ها تحت تأثیر ویژگی checked قرار میگیرند، دقیقاً مانند یک چک باکس.
اول از همه، اجازه دهید سویچ های اصلی موجود را به شما نشان دهیم. ما از سویچ های سبک iOS و اندروید استفاده میکنیم. بیایید ساختار آنها را توضیح دهیم، و سپس میتوانیم به موارد استفاده پیچیده تری برای آنها برسیم.

html

<div
  class="d-flex no-effect"
  data-trigger-switch="toggle-id-1"
  data-bs-toggle="collapse"
  href="#collapseExample1"
  role="button"
  aria-expanded="false"
  aria-controls="collapseExample1">
  <div class="pt-1">
    <h5 class="font-600">Toggle Trigger</h5>
  </div>
  <div class="ms-auto me-4 pe-2">
    <div class="custom-control BRAND-switch">
      <input type="checkbox" class="BRAND-input" id="toggle-id-1" />
      <label class="custom-control-label" for="toggle-id-1"></label>
    </div>
  </div>
</div>
<div class="collapse" id="collapseExample1">
  <!-- 

    -->
</div>

اولاً، سویچ هایی که در این مثال استفاده کردیم، با استفاده از فلکس‌ باکس‌ تراز شده‌اند، که میتوانید با دنبال کردن مستندات رسمی بوت استرپ درباره آنها اطلاعات بیشتری کسب کنید.

توجه کنید که عنوان با استفاده از:
data-trigger-switch="toggle-id-1" | id="toggle-id-1" | for="toggle-id-1"
به سویچ متصل شده است. شما میتوانید تعداد بی نهایت سویچ ایجاد کنید و آنها را به یک دکمه جداگانه روی صفحه متصل کنید تا زمانی که ویژگی های بالا با یکدیگر مطابقت داشته باشند آنها را فعال میکند.

• خط 2 یک فلکس باکس برای سویچ ایجاد میکند تا آیکون و متن به درستی تراز شوند.
• خط 3 هنگام کلیک کردن روی هر نقطه از سویچ، آیکون تغییر میکند، این اتفاق میافتد زیرا data-trigger-switch="toggle-id-1" با آی دی اینپوت و در خطوط 14 و 15 یکسان است. شما میتوانید هر تعداد سویچ که میخواهید ایجاد کنید، اما این آی دی ها باید برای هر سویچ منحصر به فرد باشند.
• خط 4(اختیاری) زمانی استفاده میشود که میخواهید محتوا را در خط 19 تغییر دهید. این کلاس باید با کلاس خط 19 یکسان باشد.
• خط 5(اختیاری) آی دی منحصر به فردی است که در خط 19 نیز استفاده میشود. هنگام کلیک کردن روی سویچ، محتوای خط 19 نمایش یا پنهان میشود.
• خط 6 باعث میشود کل خط یک افکت اشاره گر داشته باشد. باعث تشخیص آسانتر هنگام کار روی دسکتاپ و ویرایش صفحه.
• خط 7 مشخص میکند که آیا محتوای جمع شده باید به طور پیشفرض قابل مشاهده باشد یا خیر. اگر این را روی true تنظیم کنید، مطمئن شوید که checked را نیز به خط 14 اضافه کنید تا کلید اینپوت به صورت فعال نشان داده شود.
• خط 8 تعریف میکند که این سویچ، المان موجود در خط 19 را کنترل میکند.
• خط 9 تا 11 متن کلید در ابتدای سویچ است.
• خط 12 تا 17 اینپوت ها هستند. میتوانید با جایگزین کردن BRAND-input با ios-input یا android-input، آن را به‌ عنوان ios یا اندروید استایل‌ بندی کنید. مطمئن شوید که آی دی اینپوت با خط 3 مطابقت دارد و برای هر سوییچ که ایجاد میکنید منحصر به فرد است.
• خطوط 19 تا 23 محتوایی است که اگر نکته پایین و خطوط ذکر شده در آن را دنبال کنید تا مطمئن شوید که برای هر گروه سویچ دارای آی دی های منحصربه‌فرد هستند، نشان داده یا پنهان میشوند. حتماً component-toggles.html یا component-switches.html را بررسی کنید (نام فایل‌ها ممکن است متفاوت باشد)

نکته

اگر میخواهید از این دکمه برای تغییر محتوا استفاده کنید، محتوا اینجا قرار میگیرد. در غیر این صورت، خطوط 19 تا 23 را به طور کامل حذف کنید و خط 4، خط 7 و خط 8 را نیز حذف کنید. همچنین، href="#collapseExample1" را با href="#" جایگزین کنید. پس از انجام این کار، دکمه مانند یک چک باکس معمولی عمل خواهد کرد.

برای ایجاد یک سوئیچ نوع اندروید یا نوع آیفون، BRAND-switch یا BRAND-input را در خط 13 و 14 جایگزین ios-switch یا ios-input یا android-switch یا android-input کنید.

استفاده با کدنویسی

برای ویرایش مقدار چک شده یک سویچ، باید از Input Checkbox check property استفاده کنید