配置

CSS 选择器参考

以 Markdown 格式查看

Fern 选择器使用 Tailwind CSS 工具类和 CSS 自定义属性。本页面列出了用于自定义文档站点的所有 .fern-* 选择器。

布局与结构

用于页面布局、背景和标题的选择器。

固定背景图片。

Default CSS
1.fern-background-image {
2  background-attachment: fixed;
3  background-size: cover;
4  background-repeat: no-repeat;
5  background-position-x: center;
6  background-position-y: center;
7}

主页面标题（h1）。

Default CSS
1.fern-page-heading {
2  margin-top: 0;
3  margin-bottom: 0;
4  display: inline-block;
5  leading-tight: 1.25;
6  text-wrap: balance;
7  word-wrap: break-word;
8}

页面布局容器。

Default CSS
1.fern-layout-page {
2  max-width: var(--page-width-padded);
3  padding-left: var(--page-padding);
4  padding-right: var(--page-padding);
5  margin-left: auto;
6  margin-right: auto;
7  min-width: 0;
8  flex: 1 1 0%;
9  min-height: calc(100vh - var(--header-height));
10  display: flex;
11  flex-direction: column;
12}

指南页面布局。

Default CSS
1.fern-layout-guide {
2  padding-left: var(--page-padding);
3  padding-right: var(--page-padding);
4  margin-left: auto;
5  margin-right: auto;
6  margin-bottom: 3rem;
7  min-width: 0;
8  flex-shrink: 1;
9  min-height: calc(100vh - var(--header-height));
10  display: flex;
11  flex-direction: column;
12}

带两列网格的 API Reference 布局。

Default CSS
1.fern-layout-reference {
2  padding-left: var(--page-padding);
3  margin-left: auto;
4  margin-right: auto;
5  min-width: 0;
6  flex-shrink: 1;
7  padding-right: calc(var(--page-padding) + var(--aside-offset));
8  min-height: calc(100vh - var(--header-height));
9  display: flex;
10  flex-direction: column;
11}
12
13.fern-layout-reference-content {
14  margin-top: 1.5rem;
15  margin-bottom: 1.5rem;
16}
17
18@media (min-width: 768px) {
19  .fern-layout-reference-content {
20    display: grid;
21    grid-template-columns: repeat(2, 1fr);
22    gap: 2rem;
23  }
24}
25
26@media (min-width: 1024px) {
27  .fern-layout-reference-content {
28    gap: 3rem;
29  }
30}

概览页面布局。

Default CSS
1.fern-layout-overview {
2  padding-left: var(--page-padding);
3  padding-right: var(--page-padding);
4  margin-left: auto;
5  margin-right: auto;
6  margin-bottom: 3rem;
7  min-width: 0;
8  flex-shrink: 1;
9  min-height: calc(100vh - var(--header-height));
10  display: flex;
11  flex-direction: column;
12}

变更日志页面布局。

Default CSS
1.fern-layout-changelog[data-aside-state="hidden"] {
2  max-width: var(--page-width-padded);
3  padding-left: var(--page-padding);
4  padding-right: var(--page-padding);
5  margin-left: auto;
6  margin-right: auto;
7  min-width: 0;
8}
9
10.fern-layout-changelog[data-aside-state="visible"] {
11  padding-left: var(--page-padding);
12  padding-right: var(--page-padding);
13  margin-left: auto;
14  margin-right: auto;
15  margin-bottom: 3rem;
16  min-width: 0;
17  flex-shrink: 1;
18}

头部组件

用于站点头部、标签页和移动端菜单的选择器。

站点头部容器。

Default CSS
1.fern-header {
2  backdrop-filter: blur(0.5rem);
3  background-color: transparent;
4}

头部导航标签（仅桌面端）。

Default CSS
1.fern-header-tabs {
2  backdrop-filter: blur(0.5rem);
3  background-color: transparent;
4  display: none;
5  max-width: 100%;
6  user-select: none;
7}
8
9@media (min-width: 1024px) {
10  .fern-header-tabs {
11    display: flex;
12    align-items: center;
13    justify-content: space-between;
14  }
15}

头部 Logo 容器。

Default CSS
1.fern-header-logo-container {
2  position: relative;
3  display: flex;
4  height: 100%;
5  min-width: fit-content;
6  flex: 1 1 0%;
7  flex-shrink: 0;
8  gap: 0.5rem;
9  padding-top: 0.25rem;
10  padding-bottom: 0.25rem;
11}

移动端菜单切换按钮。

Default CSS
1.fern-header-mobile-menu-button {
2  display: flex;
3  flex: 1 1 0%;
4  align-items: center;
5  justify-content: flex-end;
6}

侧边栏组件

用于侧边栏导航和标签页的选择器。

侧边栏顶部。

Default CSS
1.fern-sidebar-header {
2  height: var(--header-height);
3  margin-left: 0.75rem;
4  margin-right: 0.75rem;
5  display: none;
6  border-bottom: 1px solid transparent;
7}
8
9@media (min-width: 1024px) {
10  .fern-sidebar-header {
11    display: flex;
12    align-items: center;
13    justify-content: space-between;
14  }
15}

侧边栏分组标题。

Default CSS
1.fern-sidebar-heading {
2  margin-bottom: 0.25rem;
3  display: flex;
4  min-height: 32px;
5  align-items: center;
6  padding-left: 1rem;
7  padding-right: 1rem;
8}
9
10@media (min-width: 1024px) {
11  .fern-sidebar-heading {
12    min-height: 36px;
13    padding-left: 0.5rem;
14    padding-right: 0.5rem;
15  }
16}

侧边栏标题文本。

Default CSS
1.fern-sidebar-heading-content {
2  margin: 0;
3  font-size: 1rem;
4  font-weight: 600;
5  line-height: 1.5rem;
6}
7
8@media (min-width: 1024px) {
9  .fern-sidebar-heading-content {
10    font-size: 0.875rem;
11    line-height: 1.25rem;
12  }
13}

分组的侧边栏项目。

Default CSS
1.fern-sidebar-group {
2  list-style: none;
3  margin-left: -1rem;
4  margin-right: -1rem;
5}
6
7@media (min-width: 1024px) {
8  .fern-sidebar-group {
9    margin-left: 0;
10    margin-right: 0;
11  }
12}
13
14.fern-sidebar-group .fern-sidebar-group {
15  margin-left: 0;
16  margin-right: 0;
17}

侧边栏标签导航。

Default CSS
1.fern-sidebar-tabs {
2  margin-top: 1.25rem;
3  margin-bottom: 1.5rem;
4  display: flex;
5  flex-direction: column;
6  list-style: none;
7}

导航组件

用于面包屑导航的选择器。

面包屑导航。

Default CSS
1.fern-breadcrumb {
2  display: inline-flex;
3  height: fit-content;
4  max-width: 100%;
5  flex-wrap: wrap;
6  align-items: baseline;
7  font-weight: 500;
8}

面包屑链接或文本。

Default CSS
1.fern-breadcrumb-item {
2  color: var(--accent-a11);
3  min-width: 0;
4  flex-shrink: 1;
5  font-size: 0.875rem;
6}

面包屑分隔符。

Default CSS
1.fern-breadcrumb-arrow {
2  color: var(--grayscale-a9);
3  margin-left: 0.125rem;
4  margin-right: 0.125rem;
5  width: 1rem;
6  height: 1rem;
7  align-self: center;
8}

按钮组件

用于按钮的选择器。

带变体的按钮。

Default CSS
1.fern-button {
2  transition-property: color, background-color;
3  display: inline-flex;
4  align-items: center;
5  justify-content: center;
6  border-radius: var(--radius-2);
7  height: 2.5rem;
8  padding: 0.25rem 0.75rem;
9  font-size: 0.875rem;
10  cursor: pointer;
11}
12
13@media (min-width: 640px) {
14  .fern-button {
15    height: 2rem;
16  }
17}
18
19.fern-button:hover {
20  transition: none;
21}

变体：

  • .minimal - 透明背景，悬停时有轻微样式
  • .filled - 实心背景色
  • .outlined - 带边框，背景透明
  • .primary - 强调色变体
  • .success - 绿色变体
  • .warning - 琥珀色变体
  • .danger - 红色变体

尺寸修饰符：

  • .small - 较小的按钮（桌面端 1.75rem 高，移动端 1.5rem 高）
  • .large - 较大的按钮（桌面端 2.75rem 高，移动端 2.5rem 高）
  • .square - 等宽等高的方形按钮

按钮内容包装器。

Default CSS
1.fern-button-content {
2  display: inline-flex;
3  min-width: 0;
4  flex-shrink: 1;
5  align-items: center;
6  height: 1.5rem;
7  gap: 0.375rem;
8}

按钮文本。

Default CSS
1.fern-button-text {
2  min-width: 0;
3  flex-shrink: 1;
4  font-weight: 500;
5}
6
7.fern-button:not(.multiline) .fern-button-text {
8  overflow: hidden;
9  text-overflow: ellipsis;
10  white-space: nowrap;
11}

按钮组。

Default CSS
1.fern-button-group {
2  display: inline-flex;
3  align-items: center;
4}
5
6.fern-button-group > .fern-button:has(+ .fern-button.outlined, + .fern-button.filled),
7.fern-button-group > .fern-button.outlined:has(+ .fern-button.minimal),
8.fern-button-group > .fern-button.filled:has(+ .fern-button.minimal) {
9  margin-right: 0.5rem;
10}

代码块 的复制按钮。

Default CSS
1.fern-copy-button {
2  width: fit-content;
3  height: fit-content;
4  backdrop-filter: blur(8px);
5}

设置 maxLines 的代码块 的展开按钮。

Default CSS
1.fern-expand-button {
2  width: fit-content;
3  height: fit-content;
4  backdrop-filter: blur(8px);
5}

页面操作按钮（编辑、反馈、分享）。

Default CSS
1.fern-page-actions {
2  display: flex;
3  border-radius: var(--radius-2);
4  border: 1px solid var(--border-default);
5}
6
7.fern-page-actions > *:not(:last-child) {
8  border-right: 1px solid var(--border-default);
9  margin-right: -1px;
10}

变体：

  • .fern-toolbar - 移除边框样式，呈现工具栏式外观

卡片组件

用于卡片的选择器。

卡片容器。

Default CSS
1.fern-card {
2  color: var(--text-body);
3  background-color: var(--card-background);
4  border: 1px solid var(--border-default);
5  box-shadow: 0 2px 4px var(--grayscale-a3);
6  transition-property: all;
7}
8
9.fern-card:hover {
10  color: var(--text-body);
11  transition: none;
12}
13
14.fern-card.interactive:hover {
15  box-shadow: 0 4px 8px var(--grayscale-a4);
16  border-color: var(--accent-a9);
17}
18
19.fern-card.elevated {
20  border-color: var(--accent-a9);
21  box-shadow: 0 4px 12px var(--accent-a4);
22}

变体：

  • .interactive - 添加悬停效果
  • .elevated - 突出外观，带强调色边框
  • .active - 激活状态样式

表单组件

用于表单输入和控件的选择器。

文本输入框。

Default CSS
1.fern-input {
2  width: 100%;
3  border: none;
4  background-color: transparent;
5  outline: none;
6  caret-color: var(--accent);
7  padding: 0.5rem 0.625rem;
8  font-size: 0.875rem;
9}
10
11@media (max-width: 640px) {
12  .fern-input {
13    font-size: 1rem;
14  }
15}
16
17input.fern-input::-webkit-outer-spin-button,
18input.fern-input::-webkit-inner-spin-button {
19  appearance: none;
20  margin: 0;
21}
22
23input.fern-input[type="number"] {
24  appearance: textfield;
25}

带聚焦边框的输入容器。

Default CSS
1.fern-input-group {
2  display: flex;
3  align-items: center;
4  overflow: hidden;
5  border-radius: var(--radius-2);
6  background-color: white;
7  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8  border: 1px solid var(--border-default);
9  height: 2.5rem;
10}
11
12@media (prefers-color-scheme: dark) {
13  .fern-input-group {
14    background-color: var(--grayscale-a2);
15  }
16}
17
18@media (min-width: 640px) {
19  .fern-input-group {
20    height: 2rem;
21  }
22}
23
24.fern-input-group:focus-within {
25  outline: none;
26  border-color: var(--accent-a5);
27  box-shadow: 0 0 0 2px var(--accent-a5);
28}
29
30.fern-input-group.error {
31  background: rgba(252, 100, 100, 0.63);
32}

输入框图标。

Default CSS
1.fern-input-icon {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  height: 100%;
6  width: 2rem;
7  flex-shrink: 0;
8}
9
10.fern-input-icon + .fern-input {
11  margin-left: -2rem;
12  padding-left: 2rem;
13}

输入框右侧元素。

Default CSS
1.fern-input-right-element {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  margin-left: -0.5rem;
6  height: 100%;
7  min-width: 2rem;
8  flex-shrink: 0;
9  padding-left: 0;
10  padding-right: 0;
11}

输入框清除按钮。

Default CSS
1.fern-input-clear-button {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  color: var(--grayscale-a9);
6  width: 1.5rem;
7  height: 1.5rem;
8  flex-shrink: 0;
9  margin-right: 0.25rem;
10  cursor: pointer;
11  border: none;
12  background-color: transparent;
13  transition: color 0.15s;
14}
15
16.fern-input-clear-button:hover {
17  color: var(--grayscale-a11);
18}

多行文本输入框。

Default CSS
1.fern-textarea {
2  width: 100%;
3  resize: none;
4  border: none;
5  background-color: transparent;
6  outline: none;
7  caret-color: var(--accent);
8  padding: 0.5rem 0.625rem;
9  font-size: 0.875rem;
10}
11
12@media (max-width: 640px) {
13  .fern-textarea {
14    font-size: 1rem;
15  }
16}

文本域容器。

Default CSS
1.fern-textarea-group {
2  display: flex;
3  align-items: center;
4  overflow: hidden;
5  border-radius: var(--radius-2);
6  background-color: white;
7  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8  border: 1px solid var(--border-default);
9}
10
11@media (prefers-color-scheme: dark) {
12  .fern-textarea-group {
13    background-color: var(--grayscale-a2);
14  }
15}
16
17.fern-textarea-group:focus-within {
18  outline: none;
19  border-color: var(--accent-a5);
20  box-shadow: 0 0 0 2px var(--accent-a5);
21}

复选框标签。

Default CSS
1.fern-checkbox-label {
2  display: flex;
3  cursor: pointer;
4}

复选框输入。

Default CSS
1.fern-checkbox-item {
2  border-radius: var(--radius-1);
3  position: relative;
4  margin-top: 0.125rem;
5  display: inline-block;
6  width: 1rem;
7  height: 1rem;
8  border: 1px solid var(--border-default);
9}
10
11.fern-checkbox-item:hover {
12  background-color: var(--accent-a3);
13}
14
15.fern-checkbox-item:focus {
16  outline: 4px solid var(--accent-a3);
17  outline-offset: 0;
18}

选中指示符。

Default CSS
1.fern-checkbox-indicator {
2  background-color: var(--accent);
3  color: var(--accent-contrast);
4  border-radius: var(--radius-1);
5  display: flex;
6  width: 1rem;
7  height: 1rem;
8  align-items: center;
9  justify-content: center;
10}

单选按钮组。

Default CSS
1.fern-radio-group {
2  display: flex;
3  flex-direction: column;
4  gap: 1rem;
5}
6
7.fern-radio-group.compact {
8  gap: 0.5rem;
9  font-size: 0.875rem;
10}

单选按钮标签。

Default CSS
1.fern-radio-label {
2  display: flex;
3  cursor: pointer;
4}

单选按钮输入。

Default CSS
1.fern-radio-item {
2  border: 1px solid var(--border-default);
3  position: relative;
4  margin-top: 0.125rem;
5  display: inline-block;
6  width: 1rem;
7  height: 1rem;
8  border-radius: 9999px;
9}
10
11.fern-radio-item:hover {
12  background-color: var(--accent-a3);
13}
14
15.fern-radio-item:focus {
16  outline: 4px solid var(--accent-a3);
17  outline-offset: 0;
18}

选中指示符。

Default CSS
1.fern-radio-indicator {
2  background-color: var(--accent);
3  display: flex;
4  width: 1rem;
5  height: 1rem;
6  align-items: center;
7  justify-content: center;
8  border-radius: 9999px;
9}
10
11.fern-radio-indicator::after {
12  background-color: var(--background);
13  position: absolute;
14  width: 0.5rem;
15  height: 0.5rem;
16  border-radius: 9999px;
17  content: "";
18}

分段切换控件。

Default CSS
1.fern-segmented-control {
2  border-radius: var(--radius-3/2);
3  height: 2.25rem;
4  background-color: white;
5  display: flex;
6  align-items: center;
7  gap: 1px;
8  padding: 0.125rem;
9  border: 1px solid var(--border-default);
10}
11
12@media (prefers-color-scheme: dark) {
13  .fern-segmented-control {
14    background-color: rgba(255, 255, 255, 0.05);
15  }
16}
17
18.fern-segmented-control .fern-button {
19  border-radius: var(--radius-1);
20  min-width: 0;
21  flex-shrink: 1;
22}

带步进按钮的数字输入框。

Default CSS
1.fern-numeric-input-group {
2  display: flex;
3  align-items: center;
4  overflow: hidden;
5  border-radius: var(--radius-2);
6  background-color: white;
7  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8  border: 1px solid var(--border-default);
9  height: 2.5rem;
10}
11
12@media (min-width: 640px) {
13  .fern-numeric-input-group {
14    height: 2rem;
15  }
16}
17
18.fern-numeric-input-group:focus-within {
19  outline: none;
20  border-color: var(--accent-a5);
21  box-shadow: 0 0 0 2px var(--accent-a5);
22}

数字输入框的步进按钮。

Default CSS
1.fern-numeric-input-group .fern-numeric-input-step {
2  border-color: var(--border-default);
3  height: 100%;
4  border-radius: 0;
5}
6
7.fern-numeric-input-group .fern-numeric-input-step:first-child {
8  border-top-left-radius: var(--radius-3/2);
9  border-bottom-left-radius: var(--radius-3/2);
10  border-right: 1px solid;
11}
12
13.fern-numeric-input-group .fern-numeric-input-step:last-child {
14  border-top-right-radius: var(--radius-3/2);
15  border-bottom-right-radius: var(--radius-3/2);
16  border-left: 1px solid;
17}
18
19.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled) {
20  color: var(--accent-a11);
21  border-color: var(--accent-a5);
22}
23
24.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled):hover {
25  color: var(--accent-a11);
26  background-color: var(--accent-a3);
27}

下拉菜单与选择器组件

用于下拉菜单和产品选择器的选择器。

下拉菜单容器。

Default CSS
1.fern-dropdown {
2  position: relative;
3  z-index: 50;
4  animation: popover-in 150ms ease-out;
5  min-width: var(--radix-dropdown-menu-trigger-width);
6  background-color: var(--background);
7  border: 1px solid var(--border-default);
8  border-radius: var(--radius-2);
9  display: flex;
10  max-height: 300px;
11  flex-direction: column;
12  backdrop-filter: blur(8px);
13  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
14}

下拉菜单项。

Default CSS
1.fern-dropdown-item {
2  border-radius: var(--radius-1);
3  display: flex;
4  width: 100%;
5  cursor: default;
6  align-items: center;
7  justify-content: flex-start;
8  padding: 0.25rem 0.5rem;
9  text-align: left;
10  font-size: 0.875rem;
11}
12
13.fern-dropdown-item[data-highlighted] {
14  color: var(--accent-contrast);
15  background-color: var(--accent);
16}

下拉菜单选中指示符。

Default CSS
1.fern-dropdown-item-indicator {
2  margin-right: 0.25rem;
3  display: flex;
4  height: 100%;
5  width: 1rem;
6  flex: none;
7  align-items: center;
8  justify-content: center;
9}

选择项。

Default CSS
1.fern-selection-item {
2  border-radius: var(--radius-3/2);
3  display: flex;
4  flex: 1 1 0%;
5  cursor: pointer;
6  align-items: center;
7  justify-content: space-between;
8  gap: 0.5rem;
9  border: 1px solid transparent;
10  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
11  width: 100%;
12  text-align: left;
13  transition: all 200ms ease-in-out;
14}
15
16.fern-selection-item:hover {
17  color: var(--accent);
18  background-color: var(--grayscale-a3);
19}

选择项图标。

Default CSS
1.fern-selection-item-icon {
2  border-radius: var(--radius-2);
3  color: var(--grayscale-a11);
4  margin: 0.25rem;
5  display: flex;
6  height: 56px;
7  width: 56px;
8  flex-shrink: 0;
9  align-items: center;
10  justify-content: center;
11  overflow: hidden;
12}
13
14.fern-selection-item-icon.use-icon {
15  border: 1px solid var(--grayscale-a5);
16  padding: 0.25rem;
17}
18
19.fern-selection-item-icon svg,
20.fern-selection-item-icon .fern-file-icon {
21  display: block;
22  height: 50%;
23  width: 50%;
24  transition: all 300ms ease-in-out;
25}
26
27.fern-selection-item:hover .fern-selection-item-icon svg,
28.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
29  transform: scale(1.2);
30}
31
32.fern-selection-item.dense .fern-selection-item-icon {
33  margin: 0.125rem;
34  height: 36px;
35  width: 36px;
36  padding: 0.125rem;
37}

选择项标题。

Default CSS
1.fern-selection-item-title {
2  color: var(--grayscale-a12);
3  font-weight: 700;
4  line-height: 1.25;
5}
6
7@media (min-width: 1024px) {
8  .fern-selection-item-title {
9    font-size: 0.875rem;
10  }
11}

选择项末端图标。

Default CSS
1.fern-selection-item-end-icon {
2  color: var(--grayscale-a11);
3}

产品选择器。示例参见 styles.css。

Default CSS
1.fern-product-selector {
2  width: 100%;
3}
4
5@media (min-width: 1024px) {
6  .fern-product-selector {
7    width: auto;
8  }
9}

产品选择器单选按钮组。示例参见 styles.css。

手风琴组件

用于手风琴组件的选择器。

手风琴容器。

Default CSS
1.fern-accordion {
2  border-radius: var(--radius-3);
3  border-top: 1px solid var(--border-default);
4}
5
6.fern-accordion li {
7  list-style-position: outside;
8}

手风琴项。

Default CSS
1.fern-accordion-item {
2  overflow: hidden;
3}
4
5.fern-accordion-item:first-child {
6  border-top-left-radius: inherit;
7  border-top-right-radius: inherit;
8}
9
10.fern-accordion-item:last-child {
11  border-bottom-left-radius: inherit;
12  border-bottom-right-radius: inherit;
13}

展开/折叠触发器。

Default CSS
1.fern-accordion-trigger {
2  display: flex;
3  cursor: pointer;
4  align-items: center;
5  gap: 0.75rem;
6  border-radius: inherit;
7  padding: 1rem;
8  transition-property: background-color;
9  list-style: none;
10  overflow: auto;
11}
12
13.fern-accordion-trigger:hover {
14  background-color: var(--grayscale-a2);
15  transition: none;
16}
17
18.fern-accordion-trigger[data-state="open"] {
19  border-bottom-left-radius: 0;
20  border-bottom-right-radius: 0;
21}
22
23.fern-accordion-trigger::-webkit-details-marker {
24  display: none;
25}

展开/折叠箭头。

Default CSS
1.fern-accordion-trigger-arrow {
2  color: var(--grayscale-a11);
3  width: 1rem;
4  height: 1rem;
5  flex-shrink: 0;
6  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
7}
8
9.fern-accordion-trigger[data-state="open"] .fern-accordion-trigger-arrow {
10  transform: rotate(90deg);
11}

手风琴触发器标题。

Default CSS
1.fern-accordion-trigger-title {
2  color: var(--text-body);
3  margin: 0;
4  margin-bottom: -1px;
5  display: flex;
6  max-width: max-content;
7  text-align: left;
8  font-size: 1rem;
9  line-height: 1.5rem;
10}
11
12.fern-accordion-trigger-title p {
13  margin: 0 !important;
14  padding: 0 !important;
15  line-height: inherit !important;
16}

滚动区域组件

用于可滚动区域的选择器。

可滚动区域容器。

Default CSS
1.fern-scroll-area {
2  z-index: 0;
3  display: flex;
4  height: 100%;
5  width: 100%;
6  flex-direction: column;
7  overflow: hidden;
8}

滚动视口。

Default CSS
1.fern-scroll-area-viewport {
2  display: flex;
3  height: 100%;
4  min-height: 0;
5  width: 100%;
6  flex-shrink: 1;
7  flex-direction: column;
8  border-radius: inherit;
9}
10
11.fern-scroll-area-viewport:has(.fern-scroll-area-scrollbar[data-orientation="horizontal"]) {
12  overscroll-behavior-x: contain;
13}
14
15.fern-scroll-area-viewport > div {
16  display: block !important;
17  flex-grow: 1;
18}
19
20.fern-scroll-area-viewport[data-scrollbars="vertical"] > div {
21  max-width: 100%;
22}

滚动条。

Default CSS
1.fern-scroll-area-scrollbar {
2  z-index: 10;
3  margin: 0.25rem;
4  display: flex;
5  touch-action: none;
6  user-select: none;
7  border-radius: 9999px;
8  transition: all 150ms ease-out;
9  background-color: var(--grayscale-a3);
10}
11
12.fern-scroll-area-scrollbar[data-state="hidden"] {
13  opacity: 0;
14}
15
16.fern-scroll-area-scrollbar[data-orientation="vertical"] {
17  margin-top: 5px;
18  margin-bottom: 5px;
19  width: 4px;
20}
21
22.fern-scroll-area-scrollbar[data-orientation="vertical"]:hover {
23  width: 6px;
24}
25
26.fern-scroll-area-scrollbar[data-orientation="horizontal"] {
27  margin-left: 5px;
28  margin-right: 5px;
29  height: 4px;
30  flex-direction: column;
31}
32
33.fern-scroll-area-scrollbar[data-orientation="horizontal"]:hover {
34  height: 6px;
35}

滚动条滑块。

Default CSS
1.fern-scroll-area-thumb {
2  position: relative;
3  z-index: auto;
4  display: flex;
5  background-color: var(--accent-track);
6  flex: 1 1 0%;
7  border-radius: 9999px;
8}
9
10.fern-scroll-area-thumb::before {
11  content: "";
12  position: absolute;
13  top: 50%;
14  left: 50%;
15  transform: translate(-50%, -50%);
16  width: 100%;
17  height: 100%;
18  min-width: 28px;
19  min-height: 28px;
20}

滚动条角落。

Default CSS
1.fern-scroll-area-corner {
2  background-color: transparent;
3}

徽章组件

用于徽章和 HTTP 方法标签的选择器。

用于标签、状态和 HTTP 方法的徽章。

Default CSS
1.fern-docs-badge {
2  align-items: center;
3  display: inline-flex;
4  gap: 0.25rem;
5  justify-content: center;
6  line-height: 1rem;
7  box-sizing: border-box;
8  font-weight: 600;
9  white-space: nowrap;
10}
11
12.fern-docs-badge.small {
13  border-radius: var(--radius-1);
14  font-size: 0.75rem;
15  height: 1.25rem;
16  padding: 0 0.375rem;
17}
18
19.fern-docs-badge.large {
20  border-radius: var(--radius-3/2);
21  font-size: 0.875rem;
22  height: 1.5rem;
23  padding: 0.25rem 0.5rem;
24}
25
26.fern-docs-badge.rounded {
27  border-radius: 9999px !important;
28}
29
30.fern-docs-badge:disabled {
31  opacity: 0.5;
32  cursor: not-allowed;
33}
34
35.fern-docs-badge[data-badge-type="http-method"],
36.fern-docs-badge[data-badge-type="status-code"] {
37  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
38  font-variant-numeric: slashed-zero;
39  text-transform: uppercase;
40}

MDX 内容组件

用于链接、提示框、步骤组件和表格的选择器。

标注，颜色与 intent 相匹配。

Default CSS
1.fern-callout {
2  border-radius: var(--radius-3);
3  margin-bottom: 1.5rem;
4  margin-top: 1rem;
5  border: 1px solid;
6  padding: 1rem;
7}
8
9.fern-callout:first-child {
10  margin-top: 0;
11}

Intent 变体：

  • [data-intent="info"] - 灰色/中性（默认）
  • [data-intent="warning"] - 琥珀色/黄色
  • [data-intent="success"] - 绿色
  • [data-intent="error"] - 红色
  • [data-intent="note"] - 蓝色
  • [data-intent="launch"] - 强调色
  • [data-intent="tip"] - 绿色
  • [data-intent="check"] - 绿色

带垂直引导线的缩进组件。

Default CSS
1.fern-indent {
2  position: relative;
3  margin-left: 1rem;
4  padding-left: 1rem;
5}
6
7.fern-indent > * + * {
8  margin-top: 0.25rem;
9}
10
11.fern-indent::before {
12  content: '';
13  position: absolute;
14  left: 0;
15  top: 0.5rem;
16  bottom: 0.5rem;
17  border-left: 1px solid transparent;
18}

步骤组件的容器。

Default CSS
1.fern-steps {
2  border-left: 1px solid var(--border-default);
3  margin-bottom: 3rem;
4  margin-left: 0.75rem;
5  margin-top: 1rem;
6  padding-left: 1.75rem;
7}

单个步骤。

Default CSS
1.fern-step > .fern-anchor {
2  position: absolute;
3  margin-left: -40px;
4  margin-top: 0.25rem;
5}

用于深度链接的锚点组件。

Default CSS
1a.fern-anchor {
2  border-radius: var(--radius-3/2);
3  position: relative;
4  display: flex;
5  width: 1.5rem;
6  height: 1.5rem;
7  align-items: center;
8  border: 0;
9}
10
11.fern-anchor-icon {
12  border-radius: var(--radius-3/2);
13  position: absolute;
14  left: 0;
15  display: flex;
16  width: 1.5rem;
17  height: 1.5rem;
18  align-items: center;
19  justify-content: center;
20}
21
22.fern-anchor-icon:not(.copied) {
23  color: var(--grayscale-a11);
24  background-color: var(--card-background);
25  border: 1px solid var(--card-border);
26  backdrop-filter: blur(8px);
27}
28
29.fern-anchor-icon.copied {
30  background-color: var(--accent-a3);
31  border: 1px solid var(--accent-a5);
32  backdrop-filter: blur(8px);
33}
34
35.fern-anchor-icon.copied > svg {
36  color: var(--accent-a11);
37}
38
39.fern-anchor-icon > svg {
40  width: 1rem;
41  height: 1rem;
42}

表格容器。

Default CSS
1.fern-table-root {
2  border: 1px solid var(--card-border);
3  border-radius: var(--radius-3/2);
4  background-color: var(--card-background);
5  overflow: hidden;
6  font-size: 0.875rem;
7  backdrop-filter: blur(32px);
8  display: flex;
9  flex-direction: column;
10}

支持 .sticky 类的表格，可启用粘性表头。

Default CSS
1.fern-table {
2  width: 100%;
3}
4
5.fern-table thead tr th {
6  background-color: var(--grayscale-a2);
7}
8
9.fern-table td,
10.fern-table th {
11  height: 2.25rem;
12  padding: 0.5rem;
13  text-align: left;
14  border-bottom: 1px solid var(--card-border);
15}
16
17.fern-table tbody > tr:last-child > td {
18  border-bottom: 0;
19}
20
21.fern-table.sticky {
22  font-size: 0.875rem;
23}
24
25.fern-table.sticky thead {
26  position: sticky;
27  top: var(--header-height, var(--spacing-header-height-real));
28}
29
30.fern-table.sticky thead tr th {
31  background-color: var(--grayscale-2);
32}
33
34.fern-table.sticky td,
35.fern-table.sticky th {
36  max-width: 0;
37}

变更日志筛选器组件

用于变更日志筛选 UI 的选择器。仅在带有标签的变更日志页面上出现。

筛选器下拉菜单触发按钮。

Default CSS
1.fern-filter-dropdown-button {
2  /* Inherits from .fern-button with variant="outlined" */
3}
Example: Customize the filter button appearance
1/* Style the filter dropdown button */
2.fern-filter-dropdown-button {
3  border-color: var(--accent-a7);
4  background-color: var(--accent-a2);
5}
6
7.fern-filter-dropdown-button:hover {
8  border-color: var(--accent-a9);
9  background-color: var(--accent-a3);
10}

筛选器按钮文本。

Default CSS
1.fern-filter-dropdown-button-text {
2  /* Inherits text styles from parent button */
3}
Example: Visually replace the default label text
1/* Replace "Select filters" with custom text using CSS */
2.fern-filter-dropdown-button-text {
3  font-size: 0;
4}
5
6.fern-filter-dropdown-button-text::after {
7  content: "Select product";
8  font-size: 0.875rem;
9}

筛选器按钮的尖角图标。

Default CSS
1.fern-filter-dropdown-button-icon {
2  width: 1rem;
3  height: 1rem;
4}
Example: Customize the chevron icon
1/* Change the chevron color */
2.fern-filter-dropdown-button-icon {
3  color: var(--accent-a11);
4}

筛选器下拉项。

Default CSS
1.fern-filter-dropdown-item {
2  /* Inherits from .fern-dropdown-item */
3}
Example: Style filter dropdown items
1/* Customize filter dropdown items */
2.fern-filter-dropdown-item {
3  padding: 0.5rem 0.75rem;
4}
5
6.fern-filter-dropdown-item[data-highlighted] {
7  background-color: var(--accent-a4);
8  color: var(--accent-a12);
9}

筛选徽章基类。

Default CSS
1.fern-filter-badge {
2  display: inline;
3  max-width: 100%;
4  cursor: pointer;
5  overflow: hidden;
6  text-overflow: ellipsis;
7}

已选中的筛选徽章。

Default CSS
1.fern-filter-badge-selected {
2  /* Inherits from .fern-docs-badge with variant="outlined" */
3}
Example: Style selected filter badges with your brand color
1/* Make selected badges use your accent color */
2.fern-filter-badge.fern-filter-badge-selected {
3  background-color: var(--accent-a9);
4  color: var(--accent-contrast);
5  border-color: var(--accent-a9);
6}

未选中的筛选徽章。

Default CSS
1.fern-filter-badge-unselected {
2  /* Inherits from .fern-docs-badge with variant="outlined-subtle" */
3}
Example: Mute unselected filter badges
1/* Style unselected badges with muted appearance */
2.fern-filter-badge.fern-filter-badge-unselected {
3  background-color: transparent;
4  color: var(--grayscale-a10);
5  border-color: var(--grayscale-a6);
6}

筛选器下拉勾选标记。

Default CSS
1.fern-dropdown-checkmark {
2  width: 1rem;
3  height: 1rem;
4}
Example: Customize the checkmark color
1/* Change the checkmark color to match your brand */
2.fern-dropdown-checkmark {
3  color: var(--accent-a11);
4}
5
6/* Or target only changelog filter checkmarks */
7.fern-filter-dropdown-item .fern-dropdown-checkmark {
8  color: var(--accent-a11);
9}

API Reference 组件

用于 API Reference 组件的选择器。

API 属性容器。

Default CSS
1.fern-api-property {
2  display: flex;
3  flex-direction: column;
4  gap: 1rem;
5  padding-top: 1rem;
6  padding-bottom: 1rem;
7}
8
9.fern-api-property p:last-child {
10  margin-bottom: 0;
11}

API 属性头部。

Default CSS
1.fern-api-property-header {
2  display: flex;
3  align-items: baseline;
4  gap: 0.5rem;
5}

API 属性名。

Default CSS
1.fern-api-property-key {
2  color: var(--text-body);
3  font-family: var(--font-mono);
4  font-size: 0.875rem;
5  font-weight: 600;
6}

API 属性元数据（类型、是否必填）。

Default CSS
1.fern-api-property-meta {
2  color: var(--grayscale-a11);
3  display: inline-flex;
4  align-items: baseline;
5  gap: 0.5rem;
6  font-size: 0.75rem;
7}

API 属性约束。

Default CSS
1.fern-api-property-constraint {
2  display: inline-block;
3  max-width: 100%;
4  min-width: 0;
5}

工具组件

用于图标、工具提示和其他元素的选择器。

高亮文本。

Default CSS
1.fern-highlight {
2  color: var(--accent-a12);
3  background-color: transparent;
4  font-weight: 700;
5}

行内图标（自适应主题）。

Default CSS
1.fern-mdx-icon {
2  color: var(--grayscale-a11);
3  display: inline-block;
4  vertical-align: baseline;
5}
6
7@variant dark {
8  .fern-mdx-icon {
9    color: var(--fa-icon-dark, var(--grayscale-a11));
10  }
11}

带下划线的工具提示触发器。

Default CSS
1.fern-mdx-tooltip-trigger {
2  --tooltip-underline-color: var(--grayscale-a10);
3  --tooltip-underline-hover-color: var(--grayscale-12);
4  --tooltip-underline-thickness: 1px;
5  --tooltip-underline-offset: 1px;
6  --tooltip-transition-duration: 0.15s;
7
8  display: inline-block;
9  cursor: help;
10  text-decoration: underline dashed var(--tooltip-underline-color) var(--tooltip-underline-thickness);
11  text-underline-position: under;
12  text-underline-offset: var(--tooltip-underline-offset);
13  transition: text-decoration-color var(--tooltip-transition-duration) ease;
14}
15
16.fern-mdx-tooltip-trigger:hover {
17  text-decoration-color: var(--tooltip-underline-hover-color);
18}

工具提示内容。

Default CSS
1.fern-mdx-tooltip-content {
2  --tooltip-padding-x: 0.75rem;
3
4  padding-left: var(--tooltip-padding-x) !important;
5  padding-right: var(--tooltip-padding-x) !important;
6}

文件类型图标。

Default CSS
1.fern-selection-item-icon .fern-file-icon {
2  display: block;
3  height: 50%;
4  width: 50%;
5  transition: all 300ms ease-in-out;
6}
7
8.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
9  transform: scale(1.2);
10}

可折叠子元素。

Default CSS
1.fern-collapsible[data-state="open"] .fern-collapsible-child {
2  animation: slide-down 0.18s var(--ease-collapse) none;
3  width: var(--radix-collapsible-content-width);
4}
5
6.fern-collapsible[data-state="closed"] .fern-collapsible-child {
7  animation: slide-up 0.18s var(--ease-collapse) none;
8  width: var(--radix-collapsible-content-width);
9}
10
11@keyframes slide-down {
12  0% {
13    transform: translateY(-100%);
14  }
15  100% {
16    transform: translateY(0);
17  }
18}
19
20@keyframes slide-up {
21  0% {
22    transform: translateY(0);
23  }
24  100% {
25    transform: translateY(-100%);
26  }
27}

可运行端点。

Default CSS
1.fern-runnable-endpoint ul {
2  padding-left: 0 !important;
3  margin-top: 0 !important;
4}
5
6.fern-runnable-endpoint button {
7  margin-top: 0 !important;
8}
9
10.fern-runnable-endpoint .fern-input:disabled,
11.fern-runnable-endpoint .fern-textarea:disabled {
12  cursor: not-allowed;
13  opacity: 0.6;
14}
15
16.fern-runnable-endpoint .fern-input-group:has(.fern-input:disabled),
17.fern-runnable-endpoint .fern-textarea-group:has(.fern-textarea:disabled),
18.fern-runnable-endpoint .fern-numeric-input-group:has(.fern-input:disabled) {
19  opacity: 0.6;
20  cursor: not-allowed;
21  background-color: var(--grayscale-a2);
22  pointer-events: none;
23}

RSS 订阅按钮。

Default CSS
1.fern-rss-feed-button .fern-button-content {
2  gap: 0.5rem;
3}

变更日志组件

用于变更日志页面的选择器。

变更日志页面容器。

Default CSS
1.fern-changelog {
2  display: flex;
3  justify-content: space-between;
4  padding-left: 1rem;
5  padding-right: 1rem;
6}
7
8@media (min-width: 768px) {
9  .fern-changelog {
10    padding-left: 1.5rem;
11    padding-right: 1.5rem;
12  }
13}
14
15@media (min-width: 1024px) {
16  .fern-changelog {
17    padding-left: 2rem;
18    padding-right: 2rem;
19  }
20}
21
22.fern-changelog > main {
23  margin-left: auto;
24  margin-right: auto;
25  width: 100%;
26  max-width: 1024px;
27  word-wrap: break-word;
28}

变体：

  • .full-width - 全宽布局，日期显示于侧边栏

变更日志条目。

Default CSS
1.fern-changelog-entry {
2  display: flex;
3  align-items: stretch;
4}
5
6.fern-changelog-entry:is(article) {
7  padding-top: 2rem;
8  padding-bottom: 2rem;
9}
10
11@media (min-width: 1024px) {
12  .fern-changelog-entry:is(article) {
13    padding-top: 4rem;
14    padding-bottom: 4rem;
15  }
16}

变更日志日期。

Default CSS
1.fern-changelog-date {
2  color: var(--grayscale-a11);
3  font-size: 1rem;
4  margin-bottom: 2rem;
5}
6
7@media (min-width: 1024px) {
8  .fern-changelog.full-width .fern-changelog-entry > aside .fern-changelog-date {
9    position: sticky;
10    top: calc(var(--header-height) + 1rem);
11  }
12}

变更日志内容区域。

Default CSS
1.fern-changelog-content {
2  position: relative;
3  margin-left: auto;
4  margin-right: auto;
5  display: grid;
6  width: 100%;
7  max-width: var(--content-wide-width);
8  grid-template-columns: 1fr;
9  gap: 1rem;
10}

变更日志条目标签。

Default CSS
1.fern-changelog-label {
2  display: flex;
3  width: 100%;
4  flex-direction: row;
5  gap: 0.5rem;
6}
7
8@media (min-width: 1280px) {
9  .fern-changelog-label {
10    flex-direction: column;
11  }
12}