#author("2022-02-13T12:34:58+09:00","","")
#author("2022-02-13T12:37:04+09:00","","")
** tab.inc.php [#r42239bc]
|RIGHT:100|LEFT:360|c
|~サマリ|指定範囲を区切ってタブで表示切り替えできるようにする|
|~リビジョン|1.2|
|~対応バージョン|1.4.7|
|~対応バージョン|1.5.3|
|~投稿者|[[kanateko]]|
|~投稿日|&new{2022-02-13 (日) 12:34:07};|
マルチライン部分を任意の位置で区切ってタブを作成し、ラベルを選択して表示を切り替えられるようにします。

**ダウンロード [#s370178e]
-[[github.com:kanateko/pukiwiki-plugin/raw/master/tab.inc.php]]
-実際の動作や見た目はこちらを参照:https://jpngamerswiki.com/?21026aa838

**インストール [#pb22b714]
-上記URLの内容を「tab.inc.php」の名前で保存してpluginフォルダに入れる
-以下の内容をskin/pukiwiki.cssに追加する
 .plugin-tab {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 15px 5px;
 }
 
 .tab-label {
   font-weight: bold;
   min-width: 100px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(98, 98, 98, 0.3);
   border-bottom-color: rgba(98, 98, 98, 1);
   border-radius: 4px 4px 0 0;
   padding: 10px 5px;
   margin-bottom: 10px;
   order: -1;
   flex: 1;
   text-align: center;
 }
 
 .tab-content {
   width: 100%;
   display: none;
 }
 
 .tab-switch {
   display: none;
 }
 .tab-switch:checked + .tab-label {
   background: transparent;
   border: 1px solid rgba(98, 98, 98, 1);
   border-bottom: none;
 }
 .tab-switch:checked + .tab-label + .tab-content {
   display: block;
 }

**プラグインの設定 [#k74adcff]
:TAB_SPLIT_TAG|タブの区切りを判別するための文字列。デフォルトは"#split"

**使用方法 [#p506d0cf]
2通りの書式があります。

 #tab(1個目のタブの表示名,2個目のタブの表示名,3個目のタブの表示名,...){{
 1個目のタブに表示する内容
 #split
 2個目のタブに表示する内容
 #split
 3個目のタブに表示する内容
 #split
 ︙
 }}

もしくは

 #tab{{
 #:1個目のタブの表示名
 1個目のタブに表示する内容
 #:2個目のタブの表示名
 2個目のタブに表示する内容
 #:3個目のタブの表示名
 3個目のタブに表示する内容
 ︙
 }}

使用例と実際の動作はダウンロードの項に記載してあるリンク先で確認してください。

**ライセンス [#pcb0279d]
GPL v3

**コメント [#h0731b69]
#pcomment

トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Site admin: PukiWiki Development Team

PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.041 sec.

OSDN