デザインコンポーネントについて

インストール手順

  1. alter.jsのダウンロード ZIP を開きます。
  2. /design-components ディレクトリに含まれている mfc-base.css および mfc-layout.css および iconsサブディレクトリをコピーします。
  3. link タグを追加し、mfc-base.cssおよびmfc-layout.css への参照を追加します。
    <link rel="stylesheet" href="/mfc-1.2.0/mfc-base.css">
    <link rel="stylesheet" href="/mfc-1.2.0/mfc-layout.css">
  1. 各デザインコンポーネントの説明ページにある HTML スニペットをコピーし、利用するページへコードを貼り付けます。

CSS プレフィックス

mfc-をclassプレフィックスとしています。

メタ情報

リストコンポーネントには、以下のメタ情報を追加できます。
なお、1つの項目につき、設定可能な個数には上限があります。

名前HTML書式上限説明
カテゴリ<p class="mfc-category">プレスリリース</p>1カテゴリ分類を表すテキストです。
タグ<p class="mfc-tag">10% OFF</p>3タグ分類を表すテキストです。
フラグ<p class="mfc-flag">NEW</p>3フラグを表すテキストです。
日付<time class="mfc-date">2019.08.26</time>1日付や時刻を表すテキストです。
カスタム<p class="mfc-custom">NEW</p>3カスタム項目を表すテキストです。
リンクテキスト<p class="mfc-linktext">詳細を見る</p>1見出し・文章とは別のリンク文字列を表すテキストです。

メタ情報ブロック

メタ情報は以下のdivブロックとして表現します。
配置可能な位置は、コンポーネントごとに定義されています。

<div>
    <p class="mfc-category">カテゴリ</p>
    <p class="mfc-tag">タグ1</p>
    <p class="mfc-tag">タグ2</p>
    <p class="mfc-tag">タグ3</p>
    <p class="mfc-flag">フラグ1</p>
    <p class="mfc-flag">フラグ2</p>
    <p class="mfc-flag">フラグ3</p>
</div>
<div>
    <time class="mfc-date">日付</time>
    <p class="mfc-custom">カスタム項目1</p>
    <p class="mfc-custom">カスタム項目2</p>
    <p class="mfc-custom">カスタム項目3</p>
</div>
<div>
    <p class="mfc-linktext">リンクテキスト</p>
</div>