• 下線だけのシンプルなインプットを実装したい場合、.mt-form-input を記述します。
  • この形状のフォームを実装する場合はラベルを置くスペースがありませんが、スクリーンリーダー向けに <label class="sr-only">タイトル</label> を記述します。
  • ラベルとインプットは .input-group でグループ化しますが、間隔をもたせるために .mb-4 を追加してください。

インラインエディタ

.mt-editor が記述された入れ子の中に下記のマークアップで実装可能です。プルダウンメニューも含めて、アイテムの増減は自由です。アイコンの title 属性に必ず値を記述してください。

<div class="mt-editor">
  <ul class="mt-editor__list">
    <li>
      <button class="btn btn-link dropdown-toggle" type="button"  data-toggle="dropdown" id="textDropdownMenu" aria-haspopup="true" aria-expanded="false">本文</button>
      <div class="dropdown-menu" aria-labelledby="textDropdownMenu">
        <ul>
          <li><a href="#">見出し1</a></li>
          <li><a href="#">見出し2</a></li>
          <li><a href="#">見出し3</a></li>
          <li><a href="#">本文</a></li>
          <li><a href="#">キャプション</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#"><svg title="リンク" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_link" /></svg></a></li>
    <li><a href="#"><svg title="太字" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_bold" /></svg></a></li>
    <li><a href="#"><svg title="斜体" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_italic" /></svg></a></li>
    <li><a href="#"><svg title="順序のないリスト" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_list" /></svg></a></li>
    <li><a href="#"><svg title="順序のあるリスト" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_ol" /></svg></a></li>
    <li><a href="#"><svg title="引用" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_quotation" /></svg></a></li>
    <li>
      <button class="btn btn-link dropdown-toggle" type="button"  data-toggle="dropdown" id="alignmentDropdownMenu" aria-haspopup="true" aria-expanded="false"><svg title="左配置" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_alignleft" /></svg></button>
      <div class="dropdown-menu" aria-labelledby="alignmentDropdownMenu">
        <ul>
          <li><a href="#"><svg title="左配置" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_alignleft" /></svg></a></li>
          <li><a href="#"><svg title="右配置" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_alignright" /></svg></a></li>
          <li><a href="#"><svg title="中央配置" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_aligncenter" /></svg></a></li>
          <li><a href="#"><svg title="配置設定なし" role="img" class="mt-icon--inverse"><use xlink:href="../images/sprite.svg#ic_alignnone" /></svg></a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

開閉パネル付コンテンツブロック

.mt-collapseを拡張した.mt-collapse--contentblockを使って実装します。非表示になっているコンテンツエリアのマークアップは開閉コントロールで紹介されているやり方と同じです。

ヘルプテキストはここに入れることができます
<div class="form-group">
  <label for="examlpeCollapsePanel">ラベル</label>
  <div class="mt-collapse--contentblock" id="examlpeCollapsePanel">
    <div class="mt-collapse__container no-gutters">
      <div class="col">
        <div class="form-group mb-3">
          <label for="formGroupExample">サブラベル</label>
          <input type="text" class="form-control w-50" id="formGroupExample">
        </div>
      </div>
      <div class="col-auto"><a data-toggle="collapse" href="#collapseExampleForm" aria-expanded="false" aria-controls="collapseExampleForm"><svg title="Collapse" role="img" class="mt-icon--secondary"><use xlink:href="../images/sprite.svg#ic_collapse" /></svg></a></div>
    </div>
    <div class="collapse mt-collapse__content px-0" id="collapseExampleForm">
      <div class="row">
        <div class="col">
          <textarea class="form-control"></textarea>
        </div>
      </div>
    </div>
  </div>
  <small id="formatHelp" class="form-text text-muted">ヘルプテキストはここに入れることができます。</small>
</div>

コンテンツブロック(本文)

.mt-contentblock が記述された入れ子を用意して実装します。中にはテキストエリア(.mt-contentblock__textarea)、モーダル上で内容を編集する(.mt-contentblock__block)、コンテンツタイプ(.mt-draggable)を利用することができます。

.mt-contentblock__block を操作するためのメニューは Bootstrap の Popover で実装しています。

ヘッダーなどのテキストブロック
Toph
コンテンツタイプ

<div class="form-group">
   <div class="row no-gutters align-items-center">
    <div class="col">
      <ul class="nav nav-tabs d-flex mb-3" role="tablist">
        <li class="mr-auto"><label for="contentblock1">本文</label></li>
        <li class="nav-item"><a class="nav-link active" href="#">プレビュー</a></li>
        <li class="nav-item"><a class="nav-link" href="#">並び替え</a></li>
      </ul>
    </div>
  </div>
  <div class="row no-gutters">
    <div class="col">
      <div class="form-group mb-4">
        <label for="formGroupExample">フォーマット</label>
        <select class="form-control w-50" id="formGroupExample" aria-describedby="formatHelp">
          <option selected>None</option>
          <option value="1">Markdown</option>
          <option value="2">Rich Text</option>
          <option value="3">Textile 2</option>
        </select>
      </div>
    </div>
  </div>
  <div class="mt-contentblock" id="contentblock1">
    // テキストエリアの場合
    <textarea class="mt-contentblock__textarea">
      ...
    </textarea>
    // モーダルで編集するタイプ
    <div class="mt-contentblock__block" data-toggle="popover1" data-placement="top" data-html="true" data-content="<ul class='mt-contentblock__popover'><li><a href='#'>削除</a></li><li><a href='#'>編集</a></li></ul>">
      ...
    </div>
    // コードの埋め込み
    <div class="mt-contentblock__block w-100">
      <input type="text" class="form-control mt-contentblock__embed" value="<iframe src="https://www.youtube.com" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>">
    </div>
    // コンテンツタイプ
    <div class="mt-draggable" draggable="true" aria-grabbed="false">
      <div class="col-auto"><svg title="移動可能" role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_move" /></svg></div>
      <div class="col"><svg title="" role="img" class="mt-icon--secondary"><use xlink:href="../images/sprite.svg#ic_contentstype" /></svg>コンテンツタイプ</div>
    </div>
  </div>
</div>

コンテンツブロック追加

.mt-contentblock__add が記述されたリンクで実装します。

<a href="#" class="mt-contentblock__add"><svg title="コンテンツブロック追加" role="img" class="mt-icon"><use xlink:href="../images/sprite.svg#ic_add" /></svg></a>