自作プラグイン/flex

2022-07-31 (日) 12:36:08

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

flexbox.jpg

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

flex.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.3
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2022-07-31

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

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

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

ダウンロード

最新: GitHub

日付バージョン備考
2022-07-311.3
  • マルチラインプラグインの入れ子に対応
  • コードを整理して公開
2022-04-131.2
  • クラスを追加する機能を実装
  • 要素の幅の指定方法を拡張
2021-07-111.1
  • menuの画像切り抜きを廃止
  • 画像を切り抜く機能はmenu-squareとして分離
2021-07-031.0
  • 初版作成

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

  • menu, menu-square, auto

セットアップ

  • ダウンロードした「plugin-flex」の中身 (skinフォルダとpluginフォルダ) をPukiWikiのディレクトリに放り込む。

プラグイン設定

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

使用方法

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

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

オプション

要素の整列方法

CSSの "justify-content" 準拠。デフォルトはcenter。

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

その他

<数字>[px, %, em, etc...]
要素の幅を固定する。単位がない場合はpx扱いになる
nowrap
要素を折り返さない。"flex-wrap: nowrap"に該当
nogap
要素間の余白を無くす。整列方法がspace-...系だとページ幅によっては自動的に余白が生まれる
border
要素を枠で囲う
menu
アイコンメニュー用の装飾を施す
menu-square
menuの画像切り抜き有りバージョン。1:1で切り抜く
auto
要素の区切りをタグではなく、マルチライン部分の記述に依存させる。styleプラグインとの置き換え用

使用例

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

全て開く

整列方法の違い

要素の幅を固定する

要素を折り返さない

要素間の余白をなくす

要素を枠で囲う

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

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

追加したい機能

  • 特になし

コメント

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

  • はじめまして。色々なプラグインを公開していただいてありがとうございます。
    こちらのプラグインは今後公開予定はございますでしょうか? -- 2022-07-30 (土) 15:38:17
    • コメントありがとうございます。
      基本的にクラスやスタイルを追加するだけのプラグインやデザインが主体のプラグインは公開しない方針なのですが、本プラグインは機能面 (表示を分割する) で需要もありそうなので (それと公開用の手直しが簡単だったので) 公開することにしました。GitHubのプラグイン置き場からダウンロード可能です。 -- kanateko 2022-07-31 (日) 12:39:19
      • ありがとうございます!問題なく動作いたしました👍 -- 2022-07-31 (日) 17:28:11