開閉コントロール

任意で情報を表示したいときに利用する UI。

  • 特定の情報を、画面内ですぐに表示させたい場合に利用します。
  • 情報をとして優先度が低い、又は常に表示させておく必要がないものに実装します。
  • 開閉させたいコンテンツの id , aria-controls, data-targetの値は同じにしてください。
  • たくさんの情報を要する場合は、別画面へリンクさせることを考慮してください。
  • コンテンツ追加で利用する開閉コントロールは、コンテンツ追加ドキュメンテーションに記載してあります。

ボタン

Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。

<p><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample0" aria-expanded="false" aria-controls="collapseExample0">Movable Type とは</button></p>
<div class="collapse" id="collapseExample0">
  <p>Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。</p>
</div>

リンク

リンクの場合は、aria-controls だけでなく、href も 開閉したいコンテンツの id の値と同じにしてください。

Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。

<p><a class="btn btn-link" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">Link with href</a></p>
<div class="collapse" id="collapseExample1">
  <p> ... </p>
</div>

チェックボックス

Bootstrap のコードを基に開閉できますが、イベントの扱い方が特殊なため、クリックしてもチェックできない仕様になっています。そこで、Check イベントを JavaScript で記述する必要があります。

Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。

<div class="form-group">
<label class="custom-control custom-checkbox">
  <input type="checkbox" role="button" class="custom-control-input" id="thisCheckbox" data-target="#collapseExample2" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample2">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Movable Type とは</span>
</label>
</div>
<div class="collapse" id="collapseExample2">
<p>Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。</p>
</div>

// チェックイベントのコード例
<script>
$('#thisCheckbox').on('show.bs.collapse', function() {
$(this).attr('checked', 'checked');
})
.on('hide.bs.collapse', function() {
$(this).attr('checked', '');
});
</script>

パネル型

枠線があるコンテンツボックスを開閉させたい場合に使う UI です。この際、.mt-collapse__container、mt-collapse__content という 2 つの入れ子を必要とします。
.mt-collapse__contentの中にレイアウト構造を組み込むこともできます。

Movable Type とは

Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。

<div class="mt-collapse">
  <div class="mt-collapse__container">
    <div class="col">Movable Type とは</div>
    <div class="col-auto"><a data-toggle="collapse" href="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3"><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" id="collapseExample3">
    <div class="row">
      <div class="col">
        <p> ... </p>
      </div>
    </div>
  </div>
</div>

ドラッグハンドル

コンテンツフィールドの追加など、ドラッグ要素を開閉コントロール両方が必要な際に利用します。ドラッグ要素なので .mt-draggable をつかってマークアップしますが、構造は他の開閉パネルと同じです。隠しておきたいコンテンツを collapse mt-collapse__content クラスが記述された要素の中に追加します。

移動可能
複数行インプット

Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。

<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_multiline" /></svg>複数行インプット</div>
  <div class="col-auto"><a data-toggle="collapse" href="#collapseExample09" aria-expanded="false" aria-controls="collapseExample09"><svg role="img" class="mt-icon--secondary"><title>Collapse</title><use xlink:href="../images/sprite.svg#ic_collapse" /></svg></a></div>
  <div class="collapse mt-collapse__content" id="collapseExample09">
    <div class="row">
      <div class="col"><p>...</p></div>
    </div>
  </div>
</div>

ドラッグハンドル＋画像

開閉しなくても画像が見れるタイプ。わざわざ開閉の操作をしなくても、どんな画像か見当がつくように配慮したいときに使います。

実装上は大きな画像を入れることはできますが、高さは 80px かそれ以下を推奨します。

移動可能

Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。

<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">
    <img src="../images/toph-md.png" width="80" height="80" alt="">
  </div>
  <div class="col-auto"><a data-toggle="collapse" href="#collapseExample10" aria-expanded="false" aria-controls="collapseExample10"><svg role="img" class="mt-icon--secondary"><title>Collapse</title><use xlink:href="../images/sprite.svg#ic_collapse" /></svg></a></div>
  <div class="collapse mt-collapse__content" id="collapseExample10">
    <div class="row">
      <div class="col"><p>...</p></div>
    </div>
  </div>
</div>

アーカイブマッピング

アーカイブマッピングの UI は独特なため、.mt-archivemapping というクラスで見た目を調整します。
優先されているアーカイブパスはには .mt-archivemapping--priority が追記されます。

アーカイブマップのパネルを開いたときは、パスの種類、アーカイブパスなどの設定ができるコンテンツが表示されます。

Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。

優先 Collapse 
<div class="mt-archivemapping">
  <div class="mt-collapse__container align-items-center">
    <div class="col"><label for="archivePath">アーカイブパス</label><input type="text" class="form-control-plaintext" id="archivePath" value="category/sub-category/index.html" readonly></div>
    <div class="col-auto"><label for="archiveKind">種類</label><input type="text" class="form-control-plaintext" id="archiveKind" value="記事" readonly></div>
    <div class="col-auto">
      <span class="custom-control-description mr-2 invisible">優先</span><input type="checkbox" class="mt-switch" id="exampleSwitch" /><label for="exampleSwitch">優先</label>
      <a data-toggle="collapse" href="#collapseExample4" aria-expanded="false" aria-controls="collapseExample4"><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" id="collapseExample4">
    <div class="row">
      <div class="col">
        <p> ... </p>
      </div>
    </div>
  </div>
</div>

// 優先＋パネルを開いた状態
<div class="mt-archivemapping mt-archivemapping--priority">
  <div class="mt-collapse__container align-items-center">
    <div class="col"><label for="archivePath2">パスの種類</label>
      <select class="custom-select form-control">
        <option selected>カスタム</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto"><label for="archiveKind2">種類</label><input type="text" class="form-control-plaintext" id="archiveKind2" value="記事" readonly></div>
    <div class="col-auto">
      <span class="custom-control-description mr-2">優先</span><input type="checkbox" class="mt-switch" id="exampleSwitch" /><label for="exampleSwitch">優先</label>
      <a data-toggle="collapse" href="#collapseExample4" aria-expanded="true" aria-controls="collapseExample4"><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 show" id="collapseExample4">
    <div class="row">
      <div class="col">
        <p> ... </p>
      </div>
    </div>
  </div>
</div>

プラグイン

プラグインはアーカイブマッピングとほぼ同じ UI ですが、.mt-pluginpanel というクラスで見た目を調整します。タブと組み合わせて実装します。

プラグインが有効になっていない場合は、.custom-control-description に .invisible が追記されていますが、有効状態の際に削除します。

1
2
3
有効
1
2
3
<div class="mt-pluginpanel">
  <div class="mt-collapse__container align-items-center">
    <div class="col"><svg role="img" class="mt-icon--secondary mt-pluginpanel__icon"><use xlink:href="../images/sprite.svg#ic_plugin" /></svg><label>プラグイン名</label></div>
    <div class="col-auto">
      <span class="custom-control-description mr-2 invisible">優先</span><input type="checkbox" class="mt-switch" id="exampleSwitch3" /><label for="exampleSwitch3">優先</label>
      <a data-toggle="collapse" href="#collapseExample6" aria-expanded="false" aria-controls="collapseExample6"><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" id="collapseExample6">
    <div class="row pb-2">
      <div class="col">
        <ul class="nav mt-tabs" id="myTab" role="tablist">
          <li class="nav-item"><a class="nav-link active" href="#tabContent1">アクティブ</a></li>
          <li class="nav-item"><a class="nav-link" href="#tabContent2">リンク</a></li>
          <li class="nav-item"><a class="nav-link" href="#tabContent3">リンク</a></li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane show active" role="tabpanel" id="tabContent1" aria-labelledby="myTabContent-tab">1</div>
          <div class="tab-pane" role="tabpanel" id="tabContent2" aria-labelledby="tabContent2-tab">2</div>
          <div class="tab-pane" role="tabpanel" id="tabContent3" aria-labelledby="tabContent3-tab">3</div>
        </div>
      </div>
    </div>
  </div>
</div>