لوگو لوگوی تاریک
کامپوننت ها

کنترل های پیشرفته

مثال و دستورالعمل های استفاده برای چک باکس و رادیو با سبک سفارشی.

چک باکس و رادیو تصویر

برای ایجاد چک باکس و رادیو سفارشی با تصویر، از کلاس image-control با custom-control استفاده کنید و تگ <img> را داخل تگ <label> قرار دهید.

با چک باکس
پیش فرض
علامت دار
غیرفعال
علامت دار غیرفعال
با رادیو
پیش فرض
علامت دار
غیرفعال
علامت دار غیرفعال
مثال کد
<div class="custom-control custom-checkbox image-control">
    <input type="checkbox" class="custom-control-input" id="imageCheck1">
    <label class="custom-control-label" for="imageCheck1"><img src="./images/stock/sq/a.jpg" alt=""></label>
</div>
مثال کد
<div class="custom-control custom-radio image-control">
    <input type="radio" class="custom-control-input" id="imageRadio1">
    <label class="custom-control-label" for="imageRadio1"><img src="./images/stock/sq/d.jpg" alt=""></label>
</div>

چک باکس گروه بندی شده

برای چک باکس گروه بندی شده از کلاس custom-control-pro با custom-control استفاده کنید همچنین اگر می خواهید کنترل را پنهان کنید، از کلاس no-control با آن استفاده کنید.
برای گروه از ul.custom-control-group > li > .custom-control استفاده کنید، اگر می خواهید آن ها را عمودی کنید از .custom-control-vertical در ul استفاده کنید.

حالت پیش فرض
حالت بدون کنترل
با آیکون
فقط آیکون
مثال کد
<ul class="custom-control-group">
    <li>
        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
            <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl1">
            <label class="custom-control-label" for="btnCheckControl1">برچسب گزینه</label>
        </div>
    </li>
    <li>
        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
            <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl5" checked>
            <label class="custom-control-label" for="btnCheckControl5">گزینه علامت دار</label>
        </div>
    </li>
    <li>
        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
            <input type="checkbox" class="custom-control-input" name="btnCheckControl" id="btnCheckControl6" disabled>
            <label class="custom-control-label" for="btnCheckControl6">گزینه غیرفعال</label>
        </div>
    </li>
</ul>

رادیو گروه بندی شده

برای رادیو گروه بندی شده از کلاس custom-control-pro با custom-control استفاده کنید همچنین اگر می خواهید کنترل را پنهان کنید، از کلاس no-control با آن استفاده کنید.
برای گروه از ul.custom-control-group > li > .custom-control استفاده کنید، اگر می خواهید آن ها را عمودی کنید از .custom-control-vertical در ul استفاده کنید.

حالت پیش فرض
حالت بدون کنترل
با آیکون
فقط آیکون
انتخاب رنگ
مثال کد
<ul class="custom-control-group">
    <li>
        <div class="custom-control custom-control-sm custom-radio custom-control-pro">
            <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio1">
            <label class="custom-control-label" for="btnRadio1">برچسب گزینه</label>
        </div>
    </li>
    <li>
        <div class="custom-control custom-control-sm custom-radio custom-control-pro">
            <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio5" checked>
            <label class="custom-control-label" for="btnRadio5">گزینه علامت دار</label>
        </div>
    </li>
    <li>
        <div class="custom-control custom-control-sm custom-radio custom-control-pro">
            <input type="radio" class="custom-control-input" name="btnRadio" id="btnRadio6" disabled>
            <label class="custom-control-label" for="btnRadio6">گزینه غیرفعال</label>
        </div>
    </li>
</ul>

با محتوای سفارشی

می توانید چک باکس یا رادیو را با هر عنصر سبک دهی شده، درست مانند شکل زیر ایجاد کنید. فقط کلاس .custom-control-pro را به .custom-control اضافه کنید سپس آن عنصر سبک دهی شده را در تگ <label> قرار دهید. مثالی با کارت کاربر برای هدف نمایش نشان داده شده است.
توجه: نباید از هیچ عنصر سطح بلاک در تگ برچسب استفاده کنید.

انتخاب کاربر
انتخاب کاربر
روش پرداخت
مثال کد
<ul class="custom-control-group custom-control-vertical w-100">
    <li>
        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
            <input type="checkbox" class="custom-control-input" id="user-selection-s1" name="user-selection">
            <label class="custom-control-label" for="user-selection-s1">
                <span class="user-card">
                    <span class="user-avatar sq">
                        <img src="./images/avatar/c-sm.jpg" alt="">
                    </span>
                    <span class="user-info">
                        <span class="lead-text">مینا نجفی</span>
                        <span class="sub-text">توسعه دهنده ارشد</span>
                    </span>
                </span>
            </label>
        </div>
    </li>
    <li>
        <div class="custom-control custom-control-sm custom-checkbox custom-control-pro">
            <input type="checkbox" class="custom-control-input" id="user-selection-s2" name="user-selection">
            <label class="custom-control-label" for="user-selection-s2">
                <span class="user-card">
                    <span class="user-avatar sm bg-pink">
                        <span>ف‌ت</span>
                    </span>
                    <span class="user-info">
                        <span class="lead-text">فرشید ترنیان</span>
                        <span class="sub-text">توسعه دهنده ارشد</span>
                    </span>
                </span>
            </label>
        </div>
    </li>
</ul>
مثال کد
<ul class="custom-control-group custom-control-vertical custom-control-stacked w-100">
    <li>
        <div class="custom-control custom-control-sm custom-radio custom-control-pro">
            <input type="radio" class="custom-control-input" id="user-choose-s1" name="user-choose">
            <label class="custom-control-label" for="user-choose-s1">
                <span class="user-card">
                    <span class="user-avatar sm">
                        <img src="./images/avatar/c-sm.jpg" alt="">
                    </span>
                    <span class="user-name">مینا نجفی</span>
                </span>
            </label>
        </div>
    </li>
    <li>
        <div class="custom-control custom-control-sm custom-radio custom-control-pro">
            <input type="radio" class="custom-control-input" id="user-choose-s2" name="user-choose">
            <label class="custom-control-label" for="user-choose-s2">
                <span class="user-card">
                    <span class="user-avatar sm bg-pink">
                        <span>ف‌ت</span>
                    </span>
                    <span class="user-name">فرشید ترنیان</span>
                </span>
            </label>
        </div>
    </li>
</ul>
مثال کد
<ul class="custom-control-group custom-control-vertical w-100">
    <li>
        <div class="custom-control custom-control-sm custom-radio custom-control-pro">
            <input type="radio" class="custom-control-input" name="paymentCheck" id="paymentCheck1">
            <label class="custom-control-label" for="paymentCheck1">
                <em class="icon icon-lg ni ni-cc-paypal"></em><span>درگاه پرداخت بانک زرین پال</span>
            </label>
        </div>
    </li>
    <li>
        <div class="custom-control custom-control-sm custom-radio custom-control-pro">
            <input type="radio" class="custom-control-input" name="paymentCheck" id="paymentCheck2">
            <label class="custom-control-label" for="paymentCheck2">
                <em class="icon icon-lg ni ni-cc-mc"></em><span>درگاه پرداخت بانک ملت</span>
            </label>
        </div>
    </li>
</ul>
© تمام حقوق محفوظ است. فارسی و راستچین سازی شده توسط فرشید ترنیان