自作プラグイン/flex

2024-08-25 (日) 14:30:11

カテゴリ:プラグイン 自作 追加

flexbox.jpg

flexboxレイアウト化プラグイン

flex.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.5.0
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2023-08-21

指定した範囲をタグで区切って横並びに表示するプラグイン。要素がページ幅を超える場合は自動的に折り返して表示する。名前の通りCSS3から導入されたFlexible Box Layout Moduleを利用する。

もともとstyleプラグインを使って"flex"クラスを付与することでこのようなレイアウトを実現していたが、その機能を1つのプラグインとして独立させたものになる。

このプラグインでできること
  • 指定した範囲を区切って横並びに表示する
  • 要素の並べ方を色々と指定可能
  • その他見た目を変えるオプションあり

ダウンロード

最新: GitHub

日付バージョン備考
2024-08-211.5.0
  • align-itemsを指定するオプションを追加
  • 各アイテムのmax-widthとmin-widthを指定するオプションを追加
  • gapを指定するオプションを追加
2023-03-171.4.0
  • scrollオプションを追加
2022-07-311.3.0
  • マルチラインプラグインの入れ子に対応
  • コードを整理して公開
2022-04-131.2.0
  • クラスを追加する機能を実装
  • 要素の幅の指定方法を拡張
2021-07-111.1.0
  • menuの画像切り抜きを廃止
  • 画像を切り抜く機能はmenu-squareとして分離
2021-07-031.0.0
  • 初版作成

※配布版に以下の機能は含まれない。

  • menu, menu-square, auto

セットアップ

  1. ダウンロードした「plugin-flex」の中身 (skinフォルダとpluginフォルダ) をPukiWikiのディレクトリに放り込む。
  2. PukiWikiの設定でマルチラインプラグインを許可する。
    pukiwiki.ini.phpの56行目
     define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
    

プラグイン設定

(PluginFlexクラス) SPLIT_TAG
要素を分割するためのタグ。デフォルトは"#-"

使用方法

#flex([オプション]){{
要素1
#-
要素2
#-
︙
}}

要素は "#-" で区切る。

オプション

要素の整列方法

CSSの "justify-content" 準拠。デフォルトはcenter。
justify=で明示的に指定も可能。 (例:justify = left)

flex-start, start, left
要素を左に寄せる
flex-end, end, right
要素を右に寄せる
center
要素を中央に寄せる
space-around
要素同士の間を均等に取り、両端には余白を持たせない
space-between
要素同士の間を均等に取り、両端にはその半分の余白を持たせる
space-evenly
要素同士の幅を均等に取り、両端にも同じだけの余白を持たせる

その他

nowrap
要素を折り返さない。"flex-wrap: nowrap"に該当
border
要素を枠で囲う
menu
アイコンメニュー用の装飾を施す
menu-square
menuの画像切り抜き有りバージョン。1:1で切り抜く
auto
要素の区切りをタグではなく、マルチライン部分の記述に依存させる。styleプラグインとの置き換え用
class =
指定したクラスを追加する
align =
align-items (垂直方向の配置) を指定する。対応する値はjustifyと基本的に同じ
nogap
要素間の余白を無くす。整列方法がspace-...系だとページ幅によっては自動的に余白が生まれる。gap = 0と同じ
gap=<数字>[px, %, em, etc...]
要素間の余白の幅を指定する。単位がない場合はpx扱いになる
<数字>[px, %, em, etc...]
要素の幅を固定する。単位がない場合はpx扱いになる。width =でも指定可能
min-width =<数字>[px, %, em, etc...]
要素の最小幅を指定する。単位がない場合はpx扱いになる
max-width =<数字>[px, %, em, etc...]
要素の最大幅を指定する。単位がない場合はpx扱いになる

使用例

わかりやすいようにすべてborderを付けている。

全て開く

整列方法の違い

要素の幅を固定する

要素を折り返さない

横スクロールを可能にする

要素間の余白をなくす

要素を枠で囲う

アイコンメニュー用の装飾

要素の区切りを自動で判別する

追加したい機能

  • 特になし

コメント

最新の10件を表示しています。 コメントページを参照

  • はじめまして。色々なプラグインを公開していただいてありがとうございます。
    こちらのプラグインは今後公開予定はございますでしょうか? -- 2022-07-30 (土) 15:38:17
    • コメントありがとうございます。
      基本的にクラスやスタイルを追加するだけのプラグインやデザインが主体のプラグインは公開しない方針なのですが、本プラグインは機能面 (表示を分割する) で需要もありそうなので (それと公開用の手直しが簡単だったので) 公開することにしました。GitHubのプラグイン置き場からダウンロード可能です。 -- kanateko 2022-07-31 (日) 12:39:19
      • ありがとうございます!問題なく動作いたしました👍 -- 2022-07-31 (日) 17:28:11
  • Githubから手順通りに導入してみましたが、PukiWiki 1.5.4では動作しませんでした。 -- 2023-02-23 (木) 01:23:21
    • ご報告ありがとうございます。詳細がわからないため憶測になりますが、おそらくpukiwiki.iniからマルチラインプラグインを有効化すれば動作するのではないでしょうか。このあたりの手順をセットアップの項に記載し忘れていたため、追記しておきました。 -- kanateko 2023-02-23 (木) 01:57:15
      • ありがとうございます。動作しました。 -- 2023-02-23 (木) 13:09:14
  • 不具合を見つけましたので報告いたします。
    #flex(left,border,300){{
    &attachref();
    #-
    &attachref();
    }}
    &attachref();
    例えば、このようにflexの中にattachrefを入れていて、flexの外にもattachrefを入れている場合、flexの外のattachrefに画像を添付した場合、flexの中のattachrefの位置に添付した画像が表示されてしまうようです。 -- 2024-03-22 (金) 16:41:40
    • ご報告ありがとうございます。他のプラグイン (ac) でも同様の報告がありましたが、この問題に関してはマルチラインプラグインの仕様上、解決することが難しいように思われます。解決するとなれば、attachref側の処理方法を見直す必要があるかもしれません。 -- kanateko 2024-03-23 (土) 18:01:05
  • もしできれば、下マージンを0にするオプションがあるとうれしいです。
    イメージとしては、#flex(no-margin-bottom){{ ... で、.plugin-flex の margin-bottom が0に設定されるような感じです。
    背景としては、こちらのflexプラグインを含めた番号なしリストを使おうとしたのですが、そうすると下のリストと余白が空きすぎてしまう感じになり、もう少し下のリストとの余白を狭めたい・・・という気持ちからです。 -- 2024-07-06 (土) 13:58:33
    • ページに記載し忘れていたのですが (現在は追記済) 、classオプションを指定すれば実現可能です。margin-bottom:0を指定したクラスを作成しておき、プラグインをオプションでclass=<クラス名>で指定すれば、そのクラスを適用することが出来ます。 -- kanateko 2024-07-06 (土) 14:38:03