图片分页组件
注意
此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。
未经组件作者或工作人员允许，请勿修改此页的内容。
（示例页面摘自 Harmacy 制作的 龙在我的后院中）
该组件用于以漫画风格的分页形式显示一连串图片。
若需使用，请添加以下代码：
[[include :scp-wiki:component:image-pager |css=-- |alt=alt
|p1=-- |img1=（这里填链接） |alt-text1=图片 1 的替代文本。
|capt1=可选的图片 1 说明文本。
|p2=-- |img2=（这里填链接） |alt-text2=图片 2 的替代文本。
|capt2=可选的图片 2 说明文本。
|p3=-- |img3=（这里填链接） |alt-text3=图片 3 的替代文本。
|capt3=可选的图片 1 说明文本。
]]
如果一个页面要用到多个分页组件，请在后面的组件 [[include]] 里去掉 |css=--。参数 |alt=alt 将启用将替代文本插入到图片中的功能。
该组件同样支持从右至左翻阅的模式：
[[include :scp-wiki:component:image-pager |direction=rtl
目前，图片分页组件一次至多只能显示 20 页。
div.page-flipper { font-family: Inter, 'Nanum Gothic', system-ui, BlinkMacFontSystem, Arial, sans-serif; direction: ltr; margin-block: 1.5rem; --_p-height: calc(100svh - 3.25rem); --_p-shadow: 0 0 .25rem rgb(0 0 0/.175); --_b-size: 2.125rem; --_b-forward: "→"; --_b-backward: "←"; --_b-color: rgb(12 12 12); --_b-background: rgb(252 252 252); --_b-color-hover: var(--_b-color); --_b-background-hover: rgb(230 230 230); --_b-color-selected: var(--_b-color); --_b-background-selected: var(--_b-background-hover); --_b-border: rgb(230 230 230); } div.page-flipper.dir-rtl { direction: rtl; --_b-forward: "←"; --_b-backward: "→"; } #page-content div.page-flipper .yui-navset { display: flex; flex-direction: column; justify-content: center; gap: .875rem; position: relative; margin: auto; width: fit-content; z-index: unset; isolation: isolate; } div.page-flipper .yui-navset .yui-content { padding: 0; margin: 0; border: none; background: transparent; box-shadow: none; display: grid; grid-template-areas: "page"; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); place-items: center; order: -1; z-index: -1; } div.page-flipper .yui-content > div { grid-area: page; display: flex!important; align-items: center; justify-content: center; flex-direction: column; max-width: 100%; position: relative; } div.page-flipper .yui-content > div[style*="none"] { visibility: hidden; } div.page-flipper .yui-content > div > img { max-height: var(--_p-height); box-shadow: var(--_p-shadow); } .page-flipper .page-capt { position: absolute; inset-block-end: 0; width: 100%; color: var(--_b-color); background-color: var(--_b-background); font-size: .775em; text-align: center; padding: .125em 1em; box-sizing: border-box; } .page-flipper [class*="$capt"].page-capt { display: none; } .page-flipper .page-capt p { margin-block: .625em; } /*---------------------------------------*/ /*----- Carousel Navigation Layout -----*/ /*---------------------------------------*/ div.page-flipper .yui-navset ul.yui-nav { background: unset; border: unset; clip-path: unset; position: static; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; font-size: .875em; } div.page-flipper .yui-navset.yui-navset-top ul.yui-nav li { display: contents; } div.page-flipper .yui-navset.yui-navset-top ul.yui-nav li::before, div.page-flipper .yui-navset.yui-navset-top ul.yui-nav li::after { all: unset; } div.page-flipper .yui-navset ul.yui-nav li a { --_color: var(--_b-color); --_background-color: var(--_b-background); all: unset; position: static; text-align: center; padding: .325em; box-sizing: border-box; flex-basis: 2.5em; color: var(--_color)!important; background: var(--_background-color)!important; border: solid 0.1rem var(--_b-border); } div.page-flipper .yui-navset ul.yui-nav li a em { color: inherit; padding: 0; border: unset; } div.page-flipper .yui-navset ul.yui-nav li a:is(:hover,:focus) { --_color: var(--_b-color-hover); --_background-color: var(--_b-background-hover); } div.page-flipper .yui-navset ul.yui-nav li.selected a { --_color: var(--_b-color-selected); --_background-color: var(--_b-background-selected); } div.page-flipper .yui-navset ul.yui-nav li a::before, div.page-flipper .yui-navset ul.yui-nav li a::after { all: unset; display: grid; align-items: center; justify-content: center; width: var(--_b-size); height: var(--_b-size); box-sizing: border-box; font-size: calc(var(--_b-size)*.75); line-height: 0; color: inherit; background: inherit!important; border: solid 0.1rem var(--_b-border); position: absolute; inset-block-start: min(calc((var(--_p-height) - var(--_b-size))/2), calc(50% - var(--_b-size) - .75rem)); visibility: hidden; } div.page-flipper .yui-navset ul.yui-nav li a::before { content: var(--_b-backward); inset-inline-start: calc(var(--_b-size)*-.425); } div.page-flipper .yui-navset ul.yui-nav li a::after { content: var(--_b-forward); inset-inline-end: calc(var(--_b-size)*-.425); } /*---------------------------------------*/ /*----- Carousel Navigation Logic -----*/ /*---------------------------------------*/ /* if browser doesn't support :has - this should eventually be removed */ @supports not selector(li:has(+ .selected)) { div.page-flipper .yui-navset ul.yui-nav li a::before, div.page-flipper .yui-navset ul.yui-nav li.selected + li a::after { visibility: visible; } div.page-flipper .yui-navset ul.yui-nav li.selected ~ li a::before, div.page-flipper .yui-navset ul.yui-nav li.selected a::before { visibility: hidden; } } /* if browser supports :has */ @supports selector(li:has(+ .selected)) { div.page-flipper .yui-navset ul.yui-nav li:has(+ .selected) a::before, div.page-flipper .yui-navset ul.yui-nav li.selected + li a::after { visibility: visible; } }
[[tabview]]
[[/tabview]]
页面版本: 1, 最后编辑于: 19 Feb 2024 06:52