模板讨论:切换显示按钮

添加新参数

@AnnAngela，サンムル有没有可能给这个按钮模板加@on和@off参数？这样可以在按钮激活时显示一些文字，未激活时显示另一些文字。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月18日 (一) 17:29 (CST)

Done. 文档已更新。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年5月18日 (一) 23:28 (CST)

@亘古轮回，忘了说，我只更新了示例部分，用法部分还需要你跟进。（示例也只加在第一个按钮上，需要的话可以多加几个【另外，字符串代号只有末尾是@on或@off时才会被视为开关文本，@带其他字符都会被视为代号整体（如asd@asd就是一个整体，asd@on就是asd的on状态）】）——From AnnAngela the Temporary Bureaucrat (Talk) 2020年5月19日 (二) 17:41 (CST)

刚刚已经弄好了，我看到更新就会更新文档的。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月19日 (二) 18:09 (CST)

申请添加新样式参数

@AnnAngela请问是否可以添加新的样式用来调整复选框的对勾背景色和单选框圆点的颜色？——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月28日 (四) 21:19 (CST)

Done. 在{{切换显示按钮样式}}中追加新参数【字符串代号】@input用以指定复选框/单选框样式，已经更新在Template:切换显示/doc/示例的第七段话处，请协助完善文档。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年5月29日 (五) 15:02 (CST)

谢谢，麻烦你了。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月29日 (五) 22:55 (CST)

@AnnAngela我想问一下对勾和圆点的颜色该怎么改？我看了一下widget的样式，里面没有相关代码，这个是用的默认样式吗？——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月30日 (六) 11:01 (CST)

你可能需要appearance:none;（因为此类输入框的样式基本上都被浏览器锁定，所以你需要解除这种锁定，但同样的，你会几乎无法体现出单选框/复选框是否被勾选）——From AnnAngela the Temporary Bureaucrat (Talk) 2020年5月30日 (六) 16:38 (CST)

明白了。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月30日 (六) 18:27 (CST)

@AnnAngela您好，有人反映说在周五那天加了@input以后夸克浏览器和魅族浏览器显示不了这个模板了（即使模板里没这个参数）。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月31日 (日) 12:31 (CST)

@亘古轮回 可能因为缓存问题，请等待缓存更新。或者在预览后复制当前标签到新的标签（大部分浏览器都支持这个功能）有大概率能看到效果。--サンムル（讨论） 2020年5月31日 (日) 12:50 (CST)

不知道咋回事，他们还没有回应。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月31日 (日) 17:29 (CST)

@亘古轮回 请让出现问题的同学打开 https://annangela.moe/moegirlpedia/browserinfo.html 并复制里面的信息发在这里我看看。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年5月31日 (日) 15:11 (CST)

已经和他们说了，麻烦你稍等一下。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年5月31日 (日) 17:29 (CST)

@AnnAngela

浏览器信息
UserAgent: Mozilla/5.0 (Linux; U; Android 6.0.1; zh-CN; M3X Build/MMB29U) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 Quark/4.1.2.133 Mobile Safari/537.36 屏幕高度: 640px 宽度: 360px 缩放: 浏览器不支持 visualViewport / 3x(该数值已考虑系统的缩放值) 可见高度: 浏览器不支持 visualViewport 可见宽度: 浏览器不支持 visualViewport 方向: 竖屏模式 (0°)

——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年6月1日 (一) 11:42 (CST)

浏览器版本过于老旧，建议使用现代浏览器访问（Chrome57就有点离谱）——From AnnAngela the Temporary Bureaucrat (Talk) 2020年6月1日 (一) 15:09 (CST)

已经说了，魅族浏览器这么落后是我没想到的。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年6月1日 (一) 16:34 (CST)

问题反馈：Mobileonly选择器与“文本切换显示按钮”模板不兼容

@AnnAngela示例

<div class="mobileonly">
{{文本切换显示按钮|noir@off=精彩片段（素敵なセグメント）|noir@on=内容已全部展开（内容はすべて展開されました）|@default=noir|@reverse=yes}}
</div>

，这样写的后果是无论在手机版视图下还是在电脑版视图下都不会显示按钮。

手机版视图下可以看到（[1]），请检查（顺便请记得签名）。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年6月3日 (三) 22:37 (CST)

谢谢，找见问题在哪里了。如果我把带nomobile选择器的div放在带mobileonly选择器的div上，那用手机版看的结果就是什么也没有。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年6月4日 (四) 10:32 (CST)

那确实的，前者是在移动端上必定被移动端插件从服务器直接削除。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年6月4日 (四) 10:50 (CST)

但是不应该啊，我又没有把它们套在一起，分隔开的两个div应该互不影响才对，但实际情况就是前后顺序会对显示有影响。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年6月4日 (四) 21:02 (CST)

那么能否来一段能复现问题的代码？——From AnnAngela the Temporary Bureaucrat (Talk) 2020年6月4日 (四) 21:03 (CST)

示例——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年6月5日 (五) 12:32 (CST)

懂了，这波啊，这波是widget和移动端插件配合的不是很好，前面nomobile里的模板引用过一次widget，然后widget以为已经加载过了，所以后面mobileonly里的模板再引用时就不会加载了，但是最后输出成html时移动端插件把前面的nomobile直接削除，导致加载好的widget无了，后面mobileonly里的又不加载，所以出现了啥都没有的情况。

只能说建议在最前面套个按钮随便写点啥都行先把widget加载出来再说。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年6月5日 (五) 21:18 (CST)

谢谢。——我是亘古轮回Colby，2 0 5 3 / 0 8 2 3 / 2 9 7 0 / 2 7 9 9 / 5 0 4 2 /。 2020年6月5日 (五) 22:24 (CST)

能否完全改掉按钮的原始样式，比如用一张图片来替换？

RT。如果不行，那也没有类似功能的模板？--Fetton_论（✉战双帕弥什专题编辑组求人中...），留言于: 2020年12月10日 (四) 13:14 (CST)

你想要啥效果？——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月10日 (四) 21:03 (CST)

用其他的东西，比如一张图片、一段文字或者自己写的样式来完全替代按钮原本的样式。--Fetton_论（✉战双帕弥什专题编辑组求人中...），留言于: 2020年12月10日 (四) 21:44 (CST)

补充一下，如果可以实现的话，可能还会有以下附加优点：1. 自动繁简转换；2. 使用MW解析器自带的CSS sanitizer，杜绝隐患。

在未修改的现在硬要做也能做，就是曲折一点，参见{{styleToggle/switch}}和WannaCry娘。结合templatestyles的话大概会稍轻松一点，参见{{Oregairu top blue}}。

顺便@一下可能会感兴趣的大佬。——移动版用户 Bhsd（讨论） 2020年12月11日 (五) 00:46 (CST)

理论上应该可以。私用户页的遮罩是这么写的，外面套一层position: relative的元素，里面写上想要显示的内容，然后用{{切换显示按钮样式}}指定position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: none; cursor: pointer; opacity: 0;，在后面做一层“假的”按钮这样。--EnMGP编辑者乐然 ✉ HH新曲《水洼上的轮舞》发布！ 2020年12月11日 (五) 07:24 (CST)

应该是可以写的，我明天早上处理一下。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月11日 (五) 18:21 (CST)

@Fetton，Leranjun加好了。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月13日 (日) 10:20 (CST)

第一段话：{{切换显示|啦啦啦|111}}

第二段话：{{切换显示|bla|222}}

第三段话：{{切换显示|bla|333}}

{{切换显示样式|啦啦啦=color: red; font-weight: 700;}}

{{切换显示按钮
|@default=啦啦啦
|啦啦啦=显示第一段话
|bla=[[File:Moegirl is watching you.jpg|100px]]显示第二、三段话
}}

第一段话：111

第二段话：222

第三段话：333

显示第一段话显示第一段话显示第二、三段话显示第二、三段话

 赞 安の速度Orz--EnMGP编辑者乐然 ✉ HH新曲《水洼上的轮舞》发布！ 2020年12月13日 (日) 10:35 (CST)

肥肠感谢！--Fetton_论（✉战双帕弥什专题编辑组求人中...），留言于: 2020年12月13日 (日) 12:48 (CST)

@AnnAngela radio的表现存在异常，现在点击同一个选项2次会取消选择，而且此时点击input和点击label的效果还不一样。——移动版用户 Bhsd（讨论） 2020年12月13日 (日) 11:37 (CST)

前者是feature，后者已修复。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月13日 (日) 13:19 (CST)

@AnnAngela 这个新feature会造成以前设计的{{配音表}}等模板出现问题，能否添加参数控制？——移动版用户 Bhsd（讨论） 2020年12月13日 (日) 13:37 (CST)

已回调，请按照新的DOM重新调整样式。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月13日 (日) 15:33 (CST)