ウィジェット

類似情報や機能をひとつにまとめるために使うコンポーネントです。Movable Type ではダッシュボードや、プラグインの UI として用います。

  • ウィジェットは .mt-widget で囲ってマークアップします。
  • タイトル部分 .mt-widget__title は、ヘッダー要素の大きさに依存せず、必ず同じ文字の大きさになります。
  • ウィジェットの閉じるボタン .close の表示は任意です。
  • ウィジェットのコンテンツ .mt-widget__content の中には文字情報だけでなくボタンも実装できます。
  • ダッシュボードウィジェットのレイアウトに関してはレイアウトのドキュメンテーションを参考にしてください。

基本形

Movable Type とは

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

最新の投稿 

<div class="mt-widget">
  <h2 class="mt-widget__title">
    Movable Type とは
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </h2>
  <div class="mt-widget__content">
    <p>Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。</p>
  </div>
</div>
  
// リストコンテンツとの組み合わせ
<div class="mt-widget">
  <h2 class="mt-widget__title">
    最新の投稿
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </h2>
  <div class="mt-widget__content">
    <ul class="list-unstyled">
      <li class="row"><span class="col-2">Oct 5, 2017</span><span class="col"><a href="#">タグだけでセキュアなサイトを構築</a></span></li>
      <li class="row"><span class="col-2">Sep 5, 2017</span><span class="col"><a href="#">CMSと公開サイトのパスを分離可能</a></span></li>
      <li class="row"><span class="col-2">Aug 30, 2017</span><span class="col"><a href="#">細かな権限設定で役割を明確に</a></span></li>
    </ul>
  </div>
</div>

ウィジェット（パネル）

ウィジェットを右側のダッシュボードパネルに配置する場合は .mt-widget--panelと記述してください。

Movable Type とは

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

<div class="mt-widget--panel">
  <h2 class="mt-widget__title">
    Movable Type とは
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </h2>
  <div class="mt-widget__content">
    <p>Movable Type はブログだけではなく、ウェブサイト単位でのウェブページや、ファイルの管理、更新履歴の保存など CMS（コンテンツ管理システム）としての基盤を進化させたパブリッシングプラットフォームです。</p>
  </div>
</div>

リスト

.mt-widget__list をリストタグに記述すると、Movable Type 独自のリスト表示 UI になります。なお、クラス名を入れないol、ul を使うこともできます。
.mt-widget、.mt-widget--panel 両方で利用することができます。

Movable Type とは 

<div class="mt-widget__content">
  <ul class="mt-widget__list">
    <li><a href="#">タグだけでセキュアなサイトを構築</a></li>
    <li>
      <span class="mt-widget__info d-inline-block mr-2">Oct 7, 2017</span>
      <a href="#">CMSと公開サイトのパスを分離可能</a>
    </li>
    <li>
      <span class="mt-widget__info d-block">Oct 7, 2017</span>
      <span class="mt-widget__info d-block">Movable Type</span>
      <a href="#">細かな権限設定で役割を明確に</a>
    </li>
  </ul>
</div>

サイトリスト

.mt-widget の中に .mt-widget--site という新たな入れ子を作成し、以下のようなマークアップを実装します。
サイトリストはウィジェットの右上にボタンが入ることから、高さが若干変わります。そこで、タイトルに .mt-widget__sitelist というモディファイアを追記することで、見た目の調整をします。

サイトリスト

ウェブサイト A

https://www.sixapart.jp/

Articles
一覧
作成
Pages
一覧
作成
Events
一覧
作成

最新の投稿

ウェブサイト B

https://www.sixapart.jp/movabletype

Articles
一覧
作成
Pages
一覧
作成
Events
一覧
作成
Entries
一覧
作成

最新の投稿

<div class="mt-widget">
  <h2 class="mt-widget__title">
    <span class="mt-widget__sitelist">サイトリスト</span>
    <button type="button" class="btn btn-primary float-right">サイト作成</button>
  </h2>
  <div class="mt-widget--site">
    <div class="row">
      <div class="col">
        <h3 class="mt-widget__sitename">ウェブサイト A</h3>
        <p class="mt-widget__url"><a href="">https://www.sixapart.jp/</a></p>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default">デザイン</button>
          <button type="button" class="btn btn-default">設定</button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="row mt-widget__contenttype">
          <div class="col-8">Articles</div>
          <div class="col"><a href="#">一覧</a></div>
          <div class="col"><a href="#"><svg role="img" class="mt-icon--primary"><use xlink:href="../images/sprite.svg#ic_add" /></svg>
作成</a></div>
        </div>
        <div class="row mt-widget__contenttype">
          <div class="col-8">Pages</div>
          <div class="col"><a href="#">一覧</a></div>
          <div class="col"><a href="#"><svg role="img" class="mt-icon--primary"><use xlink:href="../images/sprite.svg#ic_add" /></svg>
作成</a></div>
        </div>
        <div class="row mt-widget__contenttype">
          <div class="col-8">Events</div>
          <div class="col"><a href="#">一覧</a></div>
          <div class="col"><a href="#"><svg role="img" class="mt-icon--primary"><use xlink:href="../images/sprite.svg#ic_add" /></svg>
作成</a></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <h4 class="mt-widget__latest">最新の投稿</h4>
        <ul class="list-unstyled">
          <li class="row"><span class="col-2">Oct 5, 2017</span><span class="col"><a href="#">タグだけでセキュアなサイトを構築</a></span></li>
          <li class="row"><span class="col-2">Sep 5, 2017</span><span class="col"><a href="#">CMSと公開サイトのパスを分離可能</a></span></li>
          <li class="row"><span class="col-2">Aug 30, 2017</span><span class="col"><a href="#">細かな権限設定で役割を明確に</a></span></li>
        </ul>
      </div>
    </div>
  </div>
</div>

システム情報

.mt-widget__contentの中に、.mt-widget__data という入れ子を加えてコンテンツを加えていきます。グリッドレイアウトで構成されているので、横幅が許す限り情報を横に並べることができます。

システム情報

ユーザー
101
サイト
3
コンテンツタイプ
66
サーバーモデル
mod_perl
バージョン
7.0.1
<div class="mt-widget">
  <h2 class="mt-widget__title">
    システム情報
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </h2>
  <div class="mt-widget__content row">
    <div class="mt-widget__data">ユーザー<br><strong class="number">101</strong></div>
    <div class="mt-widget__data">サイト<br><strong class="number">3</strong></div>
    <div class="mt-widget__data">コンテンツタイプ<br><strong class="number">66</strong></div>
    <div class="mt-widget__data">サーバーモデル<br><strong>mod_perl</strong></div>
    <div class="mt-widget__data">バージョン<br><strong class="number">7.0.1</strong></div>
  </div>
</div>