AdminLTELogo

リボンコンポーネント

リボンコンポーネントは、あらゆるコンテンツの上に情報を表示する簡単な方法です。 .ribbon-warpper は position:relative; を持つ要素内に存在する必要があります。このドキュメントページではデモの目的でリボンを常に <div class="position-relative p-3 bg-gray" style="height: 180px"></div> 内に配置していますが、カード、テーブルの行、その他にも配置できます。

リボンには、より多くのテキストを表示したり、より大きなフォントサイズを使用したりするための 3 つのサイズがあります（既定（.ribbon-wrapper のみの）、大（.ribbon-wrapper と .ribbon-lg）、特大（.ribbon-wrapper と .ribbon-xl））。

マークアップの例
リボン
既定のリボン
.ribbon-wrapper.ribbon-lg .ribbon 
<div class="ribbon-wrapper">
  <div class="ribbon bg-primary">
    Ribbon
  </div>
</div>
リボンのサイズバリエーション
リボン
既定のリボン
.ribbon-wrapper.ribbon-lg .ribbon
大きなリボン
大きなリボン
.ribbon-wrapper.ribbon-lg .ribbon
特大のリボン
特大のリボン
.ribbon-wrapper.ribbon-xl .ribbon 
  <div class="ribbon-wrapper">
    <div class="ribbon bg-primary">
      Ribbon
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-lg">
    <div class="ribbon bg-info">
      Ribbon Large
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-xl">
    <div class="ribbon bg-secondary">
      Ribbon Extra Large
    </div>
  </div>
テキストサイズのバリエーション
リボン
大きなリボン
大きいテキスト
.ribbon-wrapper.ribbon-lg .ribbon.text-lg
リボン
特大のリボン
大きいテキスト
.ribbon-wrapper.ribbon-xl .ribbon.text-lg
リボン
特大のリボン
特大のテキスト
.ribbon-wrapper.ribbon-xl .ribbon.text-xl 
<div class="ribbon-wrapper ribbon-lg">
  <div class="ribbon bg-success text-lg">
    Ribbon
  </div>
</div>

<div class="ribbon-wrapper ribbon-xl">
  <div class="ribbon bg-warning text-lg">
    Ribbon
  </div>
</div>

<div class="ribbon-wrapper ribbon-xl">
  <div class="ribbon bg-danger text-xl">
    Ribbon
  </div>
</div>
画像のサンプルコード
<div class="position-relative">
  <img src="../../dist/img/photo1.png" alt="Photo 1" class="img-fluid">
  <div class="ribbon-wrapper ribbon-lg">
    <div class="ribbon bg-success text-lg">
      Ribbon
    </div>
  </div>
</div>