#author("2023-07-21T08:52:17+09:00","default:kanateko","kanateko")
#author("2023-07-21T09:01:03+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);


CENTER:#ref(tab.jpg,center,wrap,400x0)

#contentsx

*タブ切り替え表示プラグイン [#x4043488]
#infobox(plugin){{
name=tab
ver=2.0.1
pukiwiki=1.5.4
update=2023-07-21
}}

指定した領域をタブで表示切り替えできるようにするプラグイン。

-このプラグインでできること
--ページを任意の範囲で分割してタブ化
--タブのラベルは自由に設定可能
--分割用のキーワードを変更可能 (デフォルト: #split or #-)
#clear

*ダウンロード[#nc904a0b]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

※現在の配布バージョンは1.3.0

|~日付|~バージョン|~備考|h
|2023-07-21|2.0.1|#ul(入れ子のプラグインを探す際の正規表現を修正)|
|2023-07-20|2.0.0|#ul(コードを全体的に改善,class指定オプションの追加,マルチラインプラグインの入れ子に対応)|
|2022-02-08|1.3.0|#ul(別タイプの書式を追加)|
|~|1.2.0|#ul(コードを整理,ラベルの数が足りない場合のエラーを追加)|
|2020-10-16|1.1.0|#ul(タブの最大数を3つ -> 無制限に変更)|
|~|1.0.0|#ul(全体的に手直しをして公開)|
|2019-06-30|0.1.0|#ul(タブの個数が最大で3つのプロトタイプを作成)|

*セットアップ [#ma9d057e]
+ダウンロードした「tab.inc.php」をpluginフォルダに入れる。
+skin/pukiwiki.cssに以下の記述を追加。
#prism(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;
}
}}

**使用方法 [#gf4f575f]
 #tab{{
 #:1個目のタブの表示名
 1個目のタブに表示する内容
 #:2個目のタブの表示名
 2個目のタブに表示する内容
 #:3個目のタブの表示名
 3個目のタブに表示する内容
 ︙
 }}


もしくは

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

*使用例 [#me8eb03d]
#tab{{{
#:表示
includexプラグインと組み合わせ (新書式)
#tab{{
#:expand.inc.php
#includex(自作プラグイン/expand,section=(num=1),num=12:,permalink=>>expand.inc.php)
#:slideshow.inc.php
#includex(自作プラグイン/slideshow,section=(num=1),num=9:,permalink=>>slideshow.inc.php)
#:twitter.inc.php
#includex(自作プラグイン/twitter,section=(num=1),num=8:,permalink=>>twitter.inc.php)
#:youtube.inc.php
#includex(自作プラグイン/youtube,section=(num=1),num=8:,permalink=>>youtube.inc.php)
}}
#:ソース
includexプラグインと組み合わせ (新書式)
 includexプラグインと組み合わせ (新書式)
 #tab{{
 #:expand.inc.php
 #includex(自作プラグイン/expand,section=(num=1),num=12:,permalink=>>expand.inc.php)
 #:slideshow.inc.php
 #includex(自作プラグイン/slideshow,section=(num=1),num=9:,permalink=>>slideshow.inc.php)
 #:twitter.inc.php
 #includex(自作プラグイン/twitter,section=(num=1),num=8:,permalink=>>twitter.inc.php)
 #:youtube.inc.php
 #includex(自作プラグイン/youtube,section=(num=1),num=8:,permalink=>>youtube.inc.php)
 }}
}}}

**旧書式を使用した場合 [#seb52406]
 #tab(expand.inc.php,slideshow.inc.php,twitter.inc.php,youtube.inc.php){{
 #includex(自作プラグイン/expand,section=(num=1),num=2:,permalink=>>expand.inc.php)
 #-
 #includex(自作プラグイン/slideshow,section=(num=1),num=2:,permalink=>>slideshow.inc.php)
 #-
 #includex(自作プラグイン/twitter,section=(num=1),num=2:,permalink=>>twitter.inc.php)
 #-
 #includex(自作プラグイン/youtube,section=(num=1),num=2:,permalink=>>youtube.inc.php)
 }}

*追加したい機能 [#rc557fc6]
-特になし

*備考 [#u664f1f3]
-新書式はラベルとコンテンツの関連性がよりわかりやすくなることを期待して追加した。
-v2.0.0は動作にPHP8以降が必要なため、配布は一旦保留。


*コメント [#n8472dd2]
#pcomment(reply)