コンテンツ追加 : MT7 Styleguide

下線だけのシンプルなインプットを実装したい場合、.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 role="img" class="mt-icon--inverse"><title>リンク</title><use xlink:href="../images/sprite.svg#ic_link" /></svg></a></li>
    <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>太字</title><use xlink:href="../images/sprite.svg#ic_bold" /></svg></a></li>
    <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>斜体</title><use xlink:href="../images/sprite.svg#ic_italic" /></svg></a></li>
    <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>順序のないリスト</title><use xlink:href="../images/sprite.svg#ic_list" /></svg></a></li>
    <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>順序のあるリスト</title><use xlink:href="../images/sprite.svg#ic_ol" /></svg></a></li>
    <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>引用</title><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 role="img" class="mt-icon--inverse"><title>左配置</title><use xlink:href="../images/sprite.svg#ic_alignleft" /></svg></button>
      <div class="dropdown-menu" aria-labelledby="alignmentDropdownMenu">
        <ul>
          <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>左配置</title><use xlink:href="../images/sprite.svg#ic_alignleft" /></svg></a></li>
          <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>右配置</title><use xlink:href="../images/sprite.svg#ic_alignright" /></svg></a></li>
          <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>中央配置</title><use xlink:href="../images/sprite.svg#ic_aligncenter" /></svg></a></li>
          <li><a href="#"><svg role="img" class="mt-icon--inverse"><title>配置設定なし</title><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>ラベル</label>
  <div class="mt-collapse--contentblock" id="exampleCollapsePanel">
    <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 role="img" class="mt-icon--secondary"><title>Collapse</title><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 で実装しています。

フォーマット

ヘッダーなどのテキストブロック

コンテンツタイプ

<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>本文</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="formGroupExample2">フォーマット</label>
        <select class="form-control w-50" id="formGroupExample2" 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 role="img" class="mt-icon"><title>移動可能</title><use xlink:href="../images/sprite.svg#ic_move" /></svg></div>
      <div class="col"><svg 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 role="img" class="mt-icon"><title>コンテンツブロック追加</title><use xlink:href="../images/sprite.svg#ic_add" /></svg></a>