نام کاربری

انواع المان های ورودی عمومی

توضیحاتی در مورد ورودی در صورت لزوم 
<input type="text" class="form-control" placeholder="...">
<small class="form-text text-muted">...</small>
<input type="password" class="form-control">
<input type="number" class="form-control input-number-rtl">
<input type="number" class="form-control text-right">
<textarea class="form-control" row="3"></textarea>
<div class="form-checkbox">
  <input type="checkbox">
  <label class="label-text">
<div>
<div class="form-radio">
  <input type="radio">
  <label class="label-text">
<div>
<input type="file" class="form-control-file">

منوی کشویی

در تمام موارد که نیاز به منوی کشوی یا انتخابی است باید از پلاگین select2 استفاده شود؛ برای استفاده از این پلاگین، فایل های مربوطه به صورت زیر فراخوانی شود.

<script type="text/javascript" src="src/js/plugins/Select2/select2.js"></script>
<link rel="stylesheet" href="src/js/plugins/Select2/select2-bootstrap4.css"></script>
<select class="form-control" id="selectId">
  <option>Option1</option>
  <option>Option2</option>
  <option>Option3</option>
</select>

$("#selectId").select2({
  minimumResultsForSearch:'Infinity'
});
$("#selectId").select2();
$("#selectId").val('').select2({
  minimumResultsForSearch:'Infinity',
  placeholder:'placeholder...',
  allowClear:true
});
$("#selectId").select2();

برای مطالعه بیشتر در مورد نحوه استفاده از این پلاگین به سند Select2 مراجعه کنید.

انتخاب تاریخ

برای استفاده از پلاگین انتخاب تاریخ فارسی، فایل های مربوطه به صورت زیر فراخوانی شود.

<script type="text/javascript" src="src/js/plugins/persianDate/persian-date.js"></script>
<script type="text/javascript" src="src/js/plugins/persianDate/persian-datepicker.js"></script>
<link rel="stylesheet" href="src/js/plugins/persianDate/persian-datepicker.css"></script>
<input type="text" class="form-control" id="inputId">

$("#inputId").persianDatepicker({
  format:'YYYY/MM/DD',
  autoClose:'true',
  onSelect: function(){ //Do something on select date...},
});

برای مطالعه بیشتر در مورد نحوه استفاده از این پلاگین به سند Persian Date Picker مراجعه کنید.

ورودی های گروهی

ریال
$
.00
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-envelope-o"></i></span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">...</span>
  </div>
</div>

نمونه های پر کاربرد:

<div class="input-group">
  <input type="text" class="form-control" placeholder="search...">
  <div class="input-group-append">
    <button type="button" class="btn btn-primary btn-square"><i class="fa fa-search"></i></button>
  </div>
</div>
<div class="input-group">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-primary" style="width:25px"><i class="fa fa-chevron-right"></i></button>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-primary" style="width:25px"><i class="fa fa-chevron-left"></i></button>
  </div>
</div>

ورودی های ویژه

دکمه دو حالته:

از این دکمه برای فعال یا غیر فعال کردن استفاده می شود.

<div class="toggle">
  <label>
    <input type="checkbox"><span class="button-indecator"></span>
  </label>
</div>
دکمه دو حالته چرخان:

نوشته روی دکمه قابل تعیین است.

<div class="toggle-flip">
  <label>
    <input type="checkbox"><span class="flip-indecator" data-toggle-on="ON" data-toggle-off="OFF"></span>
  </label>
</div>

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

<div class="animated-radio-button">
  <label>
    <input type="radio"><span class="label-text">Label</span>
  </label>
</div>

<div class="animated-checkbox">
  <label>
    <input type="checkbox"><span class="label-text">Label</span>
  </label>
</div>