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

اسپینرها

دش‌لایت شامل چندین سبک دکمه از پیش تعریف شده است، که هر کدام هدف معنایی خود را انجام می دهند و برای کنترل بیشتر، چند مورد اضافی به کار می روند.

مثال کد
<div class="spinner-border" role="status">
    <span class="visually-hidden">در حال بارگذاری...</span>
</div>
رنگ ها

اسپینر خط حاشیه از currentColor برای border-color خود استفاده می کند، به این معنی که می توانید رنگ را با ابزارهای رنگ متن سفارشی سازی کنید. شما می توانید از هر یک از ابزارهای رنگ متن ما در اسپینر استاندارد استفاده کنید.

مثال کد
<ul class="preview-list g-1">
  <li class="preview-item">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-border text-secondary" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-border text-success" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-border text-danger" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-border text-warning" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-border text-info" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-border text-light" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-border text-dark" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
</ul>
اسپینر در حال رشد

اگر به اسپینر خط حاشیه علاقه ندارید، به اسپینر رشد سوئیچ کنید. در حالی که از نظر فنی نمی چرخد، بارها و بارها رشد می کند!

مثال کد
<div class="spinner-grow" role="status">
  <span class="visually-hidden">در حال بارگذاری...</span>
</div>
مثال کد
<ul class="preview-list g-1">
  <li class="preview-item">
    <div class="spinner-grow text-primary" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-grow text-secondary" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-grow text-success" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-grow text-danger" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-grow text-warning" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-grow text-info" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-grow text-light" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
  <li class="preview-item">
    <div class="spinner-grow text-dark" role="status">
      <span class="visually-hidden">در حال بارگذاری...</span>
    </div>
  </li>
</ul>
ترازبندی

اسپینرها در بوت استرپ با rem ها، currentColor و display: inline-flex ساخته می شوند. این بدان معناست که می توان آن ها را به راحتی تغییر اندازه داد، رنگ آن ها را تغییر داد و به سرعت آن ها را ترازبندی کرد.

مثال کد
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">در حال بارگذاری...</span>
</div>
مثال کد
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">در حال بارگذاری...</span>
  </div>
</div>
در حال بارگذاری...
مثال کد
<div class="d-flex align-items-center">
  <strong>در حال بارگذاری...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
مثال کد
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">در حال بارگذاری...</span>
  </div>
</div>
اندازه

.spinner-border-sm و .spinner-grow-sm را اضافه کنید تا اسپینر کوچکتری بسازید که بتواند به سرعت در کامپوننت های دیگر استفاده شود.

مثال کد
<ul class="preview-list g-1">
    <li class="preview-item">
        <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">در حال بارگذاری...</span>
        </div>
      </li>
      <li class="preview-item">
        <div class="spinner-grow spinner-grow-sm" role="status">
            <span class="visually-hidden">در حال بارگذاری...</span>
        </div>
    </li>
</ul>
مثال کد
<ul class="preview-list g-1">
    <li class="preview-item">
          <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">در حال بارگذاری...</span>
          </div>
      </li>
      <li class="preview-item">
          <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">در حال بارگذاری...</span>
        </div>
    </li>
</ul>
دکمه ها

از اسپینرهای درون دکمه ها برای نشان دادن یک عمل در حال پردازش یا انجام استفاده کنید. همچنین می توانید متن را از عنصر اسپینر خارج کرده و در صورت نیاز از متن دکمه استفاده کنید.

مثال کد
<ul class="preview-list g-1">
    <li class="preview-item">
        <button class="btn btn-primary" type="button" disabled>
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span class="visually-hidden">در حال بارگذاری...</span>
        </button>
    </li>
    <li class="preview-item">
        <button class="btn btn-primary" type="button" disabled>
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span>در حال بارگذاری...</span>
        </button>
    </li>
</ul>
مثال کد
<ul class="preview-list g-1">
    <li class="preview-item">
        <button class="btn btn-primary" type="button" disabled>
            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            <span class="visually-hidden">در حال بارگذاری...</span>
        </button>
    </li>
    <li class="preview-item">
        <button class="btn btn-primary" type="button" disabled>
            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            <span>در حال بارگذاری...</span>
        </button>
    </li>
</ul>
© تمام حقوق محفوظ است. فارسی و راستچین سازی شده توسط فرشید ترنیان