自定义选项

注意：

本页面为段落页。

段落页是本站文章使用的内部页面，通常为制作迭代创建。段落页不应被直接展示，而是被其父页面引用，即上方链接。

自定义选项

隐藏迭代名称

鼠标悬停在相应迭代上时，组件默认显示该迭代的名称（即标题），你可以用以下代码来让名称不显示：

[[include :backrooms-wiki-cn:component:offset-timeline
|title=false
]]

更多CSS自定义选项

以下是可以使用CSS进行的自定义，你可以将代码放进[[module css]]，也可以将代码加到版式的代码中。[[module css]]要放在本组件的[[include]]外面，具体而言，需要放在[[include]]下面，或者页面的顶部。
将以下代码加入页面/版式，你就可以编辑所有的颜色：

[[module css]]
.offset-timeline {
  /* 颜色 */
  /* 时间轴那条线的颜色 */
  --timeline-line-color: var(--swatch-primary-darkest, 128,128,128);
  /* 组件左上角文字（也就是默认情况下的“迭代”两个字）的颜色 */
  --timeline-title-color: var(--link-color, 128,128,128);
  /* 迭代按钮的边框颜色 */
  --timeline-border-color: var(--swatch-primary-darkest, var(--button-border-color));
  /* 迭代按钮的背景颜色 */
  --timeline-background-color: var(--swatch-secondary-color, var(--button-background-color));
  /* 迭代按钮中文字的颜色 */
  --timeline-text-color: var(--ui-button-txt, var(--button-text-color));
  /* 鼠标放在迭代按钮上时迭代按钮的背景颜色 */
  --timeline-hover-background-color: var(--swatch-primary, var(--button-hover-background-color));
  /* 鼠标放在迭代按钮上时迭代按钮的边框颜色 */
  --timeline-hover-border-color: var(--swatch-primary, var(--button-hover-border-color));
  /* 鼠标放在迭代按钮上时迭代按钮中文字的颜色 */
  --timeline-hover-text-color: var(--ui-button-hover-txt, var(--button-hover-text-color));
 
  /* 字体 */
  /* 组件左上角文字（也就是默认情况下的“迭代”两个字）的字体 */
  --timeline-title-font: var(--UI-font);
  /* 迭代按钮中文字的字体 */
  --timeline-content-font: var(--UI-font);
 
  /* 其他自定义选项，除非你知道自己在做什么，否则不要弄乱它们 */
  /* 计算黑色标记笔版式页面的内容宽度，用于计算字号calculates the width of the page contents in bhl themes; used to calculate font sizes */
  --timeline-relative-width-bhl: min(90vw,var(--body-width-on-desktop));
  /* 计算基岩版式页面的内容宽度，用于计算字号 */
  --timeline-relative-width-bedrock: min(calc(100vw - var(--main-content-side-margin) *2), var(--main-content-width));
}
[[/module]]

你可以使用页面顶部的时间轴，或者点击这里前往下一个迭代，了解其他自定义选项需要的CSS代码。