a-blog cms テーブルユニットに任意の項目を追加したい

a-blog cms

a-blog cmsのユニットでテーブルユニットというテーブル用の便利ユニットがあります。
今回はテーブルユニットの装飾項目を増やす場合の手順を紹介します。

装飾項目はJavaScriptで追加可能です。
全体で読み込んでいるJSファイルに次の形で追加します。

追加方法

.push()で項目の追加 [ ]で項目の再定義が可能です。

//セルの装飾項目
ACMS.Config.aTableSelector.push({
  "label": "ラベル名",
  "value": "クラス名"
})
ACMS.Config.aTableSelector = []

 //テーブルの装飾項目
ACMS.Config.aTableOption.push()
ACMS.Config.aTableOption =  []

labelは表示される項目名です。
valueはクラス名です。複数指定したい場合は半角スペースの後に続けて記入します。

使用例

ACMS.Ready(function() {})の中に記述します。

ACMS.Ready(function() {

//セルの装飾項目

ACMS.Config.aTableSelector.push({
       "label": "改行させない",
       "value": "is-nowrap"
 });

 //テーブルの装飾項目

  ACMS.Config.aTableOption = [
    {
      label: "テーブル",
      value: "table"
    },
    {
      label: "縦線なし",
      value: "table is-table-borderless"
    },
    {
      label: "SP時ブロック",
      value: "table is-table-sp-block"
    },
    {
      label: "SP時スクロール",
      value: "table is-table-scrollable acms-table-scrollable "
    }
  ];
})

});

画像のように項目が増えたと思います。

JavaScriptのオプション追加で設定を変更できるのはうれしいですね。
テーブルユニットの項目を追加したい場合は参考にしてみてください。

テーブルユニットについて詳しくはマニュアルをご覧ください。
テーブルユニット

前の記事 次の記事

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートすることができます。

ご連絡おまちしています!

ましじめのノウハウが書籍になりました!!

タイトルは『現場のプロから学ぶ CSSコーディングバイブル』 CSSとSassの基本と設計、
実装テクニックまで実際に制作する流れに沿った内容となっています。
絶賛発売中です!

購入はこちら