CSS 选择器参考 | Fern Documentation

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

布局与结构

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

.fern-background-image

固定背景图片。

Default CSS

.fern-background-image {
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

.fern-page-heading

主页面标题（h1）。

Default CSS

.fern-page-heading {
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
  leading-tight: 1.25;
  text-wrap: balance;
  word-wrap: break-word;
}

.fern-layout-page

页面布局容器。

Default CSS

.fern-layout-page {
  max-width: var(--page-width-padded);
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  flex: 1 1 0%;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

.fern-layout-guide

指南页面布局。

Default CSS

.fern-layout-guide {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  min-width: 0;
  flex-shrink: 1;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

.fern-layout-reference

带两列网格的 API Reference 布局。

Default CSS

.fern-layout-reference {
  padding-left: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  flex-shrink: 1;
  padding-right: calc(var(--page-padding) + var(--aside-offset));
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}
.fern-layout-reference-content {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .fern-layout-reference-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (min-width: 1024px) {
  .fern-layout-reference-content {
    gap: 3rem;
  }
}

.fern-layout-overview

概览页面布局。

Default CSS

.fern-layout-overview {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  min-width: 0;
  flex-shrink: 1;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
}

.fern-layout-changelog

变更日志页面布局。

Default CSS

.fern-layout-changelog[data-aside-state="hidden"] {
  max-width: var(--page-width-padded);
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}
.fern-layout-changelog[data-aside-state="visible"] {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  min-width: 0;
  flex-shrink: 1;
}

头部组件

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

.fern-header

站点头部容器。

Default CSS

.fern-header {
  backdrop-filter: blur(0.5rem);
  background-color: transparent;
}

.fern-header-tabs

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

Default CSS

.fern-header-tabs {
  backdrop-filter: blur(0.5rem);
  background-color: transparent;
  display: none;
  max-width: 100%;
  user-select: none;
}
@media (min-width: 1024px) {
  .fern-header-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.fern-header-search-bar

头部搜索输入框（仅桌面端）。

Default CSS

.fern-header-search-bar {
  display: none;
  width: 100%;
  min-width: 0;
  flex-shrink: 1;
}
@media (min-width: 1024px) {
  .fern-header-search-bar {
    display: inline-flex;
  }
}

侧边栏组件

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

.fern-sidebar-heading-content

侧边栏标题文本。

Default CSS

.fern-sidebar-heading-content {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}
@media (min-width: 1024px) {
  .fern-sidebar-heading-content {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.fern-sidebar-link

侧边栏链接。

Default CSS

.fern-sidebar-link {
  color: var(--grayscale-a11);
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.25;
  transition-property: color, background-color;
}
@media (min-width: 1024px) {
  .fern-sidebar-link {
    border-radius: var(--radius-2);
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}
.fern-sidebar-link:hover {
  color: var(--grayscale-a12);
  background-color: var(--grayscale-a3);
  transition: none;
}
.fern-sidebar-link[data-state="active"] {
  color: var(--accent-a11);
  background-color: var(--accent-a3);
  font-weight: 500;
}

导航组件

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

按钮组件

用于按钮的选择器。

.fern-button

带变体的按钮。

Default CSS

.fern-button {
  transition-property: color, background-color;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-2);
  height: 2.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}
@media (min-width: 640px) {
  .fern-button {
    height: 2rem;
  }
}
.fern-button:hover {
  transition: none;
}

变体：

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

尺寸修饰符：

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

.fern-button-content

按钮内容包装器。

Default CSS

.fern-button-content {
  display: inline-flex;
  min-width: 0;
  flex-shrink: 1;
  align-items: center;
  height: 1.5rem;
  gap: 0.375rem;
}

.fern-button-text

按钮文本。

Default CSS

.fern-button-text {
  min-width: 0;
  flex-shrink: 1;
  font-weight: 500;
}
.fern-button:not(.multiline) .fern-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fern-button-group

按钮组。

Default CSS

.fern-button-group {
  display: inline-flex;
  align-items: center;
}
.fern-button-group > .fern-button:has(+ .fern-button.outlined, + .fern-button.filled),
.fern-button-group > .fern-button.outlined:has(+ .fern-button.minimal),
.fern-button-group > .fern-button.filled:has(+ .fern-button.minimal) {
  margin-right: 0.5rem;
}

.fern-copy-button

代码块的复制按钮。

Default CSS

.fern-copy-button {
  width: fit-content;
  height: fit-content;
  backdrop-filter: blur(8px);
}

.fern-expand-button

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

Default CSS

.fern-expand-button {
  width: fit-content;
  height: fit-content;
  backdrop-filter: blur(8px);
}

.fern-page-actions

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

Default CSS

.fern-page-actions {
  display: flex;
  border-radius: var(--radius-2);
  border: 1px solid var(--border-default);
}
.fern-page-actions > *:not(:last-child) {
  border-right: 1px solid var(--border-default);
  margin-right: -1px;
}

变体：

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

卡片组件

用于卡片的选择器。

.fern-card

卡片容器。

Default CSS

.fern-card {
  color: var(--text-body);
  background-color: var(--card-background);
  border: 1px solid var(--border-default);
  box-shadow: 0 2px 4px var(--grayscale-a3);
  transition-property: all;
}
.fern-card:hover {
  color: var(--text-body);
  transition: none;
}
.fern-card.interactive:hover {
  box-shadow: 0 4px 8px var(--grayscale-a4);
  border-color: var(--accent-a9);
}
.fern-card.elevated {
  border-color: var(--accent-a9);
  box-shadow: 0 4px 12px var(--accent-a4);
}

变体：

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

表单组件

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

.fern-input

文本输入框。

Default CSS

.fern-input {
  width: 100%;
  border: none;
  background-color: transparent;
  outline: none;
  caret-color: var(--accent);
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
}
@media (max-width: 640px) {
  .fern-input {
    font-size: 1rem;
  }
}
input.fern-input::-webkit-outer-spin-button,
input.fern-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
input.fern-input[type="number"] {
  appearance: textfield;
}

.fern-input-group

带聚焦边框的输入容器。

Default CSS

.fern-input-group {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-2);
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-default);
  height: 2.5rem;
}
@media (prefers-color-scheme: dark) {
  .fern-input-group {
    background-color: var(--grayscale-a2);
  }
}
@media (min-width: 640px) {
  .fern-input-group {
    height: 2rem;
  }
}
.fern-input-group:focus-within {
  outline: none;
  border-color: var(--accent-a5);
  box-shadow: 0 0 0 2px var(--accent-a5);
}
.fern-input-group.error {
  background: rgba(252, 100, 100, 0.63);
}

.fern-input-icon

输入框图标。

Default CSS

.fern-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 2rem;
  flex-shrink: 0;
}
.fern-input-icon + .fern-input {
  margin-left: -2rem;
  padding-left: 2rem;
}

.fern-input-right-element

输入框右侧元素。

Default CSS

.fern-input-right-element {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -0.5rem;
  height: 100%;
  min-width: 2rem;
  flex-shrink: 0;
  padding-left: 0;
  padding-right: 0;
}

.fern-input-clear-button

输入框清除按钮。

Default CSS

.fern-input-clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grayscale-a9);
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-right: 0.25rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  transition: color 0.15s;
}
.fern-input-clear-button:hover {
  color: var(--grayscale-a11);
}

.fern-textarea

多行文本输入框。

Default CSS

.fern-textarea {
  width: 100%;
  resize: none;
  border: none;
  background-color: transparent;
  outline: none;
  caret-color: var(--accent);
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
}
@media (max-width: 640px) {
  .fern-textarea {
    font-size: 1rem;
  }
}

.fern-textarea-group

文本域容器。

Default CSS

.fern-textarea-group {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-2);
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-default);
}
@media (prefers-color-scheme: dark) {
  .fern-textarea-group {
    background-color: var(--grayscale-a2);
  }
}
.fern-textarea-group:focus-within {
  outline: none;
  border-color: var(--accent-a5);
  box-shadow: 0 0 0 2px var(--accent-a5);
}

.fern-checkbox-label

复选框标签。

Default CSS

.fern-checkbox-label {
  display: flex;
  cursor: pointer;
}

.fern-checkbox-item

复选框输入。

Default CSS

.fern-checkbox-item {
  border-radius: var(--radius-1);
  position: relative;
  margin-top: 0.125rem;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--border-default);
}
.fern-checkbox-item:hover {
  background-color: var(--accent-a3);
}
.fern-checkbox-item:focus {
  outline: 4px solid var(--accent-a3);
  outline-offset: 0;
}

.fern-checkbox-indicator

选中指示符。

Default CSS

.fern-checkbox-indicator {
  background-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-1);
  display: flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
}

.fern-radio-group

单选按钮组。

Default CSS

.fern-radio-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fern-radio-group.compact {
  gap: 0.5rem;
  font-size: 0.875rem;
}

.fern-radio-label

单选按钮标签。

Default CSS

.fern-radio-label {
  display: flex;
  cursor: pointer;
}

.fern-radio-item

单选按钮输入。

Default CSS

.fern-radio-item {
  border: 1px solid var(--border-default);
  position: relative;
  margin-top: 0.125rem;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
}
.fern-radio-item:hover {
  background-color: var(--accent-a3);
}
.fern-radio-item:focus {
  outline: 4px solid var(--accent-a3);
  outline-offset: 0;
}

.fern-radio-indicator

选中指示符。

Default CSS

.fern-radio-indicator {
  background-color: var(--accent);
  display: flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}
.fern-radio-indicator::after {
  background-color: var(--background);
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  content: "";
}

.fern-segmented-control

分段切换控件。

Default CSS

.fern-segmented-control {
  border-radius: var(--radius-3/2);
  height: 2.25rem;
  background-color: white;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0.125rem;
  border: 1px solid var(--border-default);
}
@media (prefers-color-scheme: dark) {
  .fern-segmented-control {
    background-color: rgba(255, 255, 255, 0.05);
  }
}
.fern-segmented-control .fern-button {
  border-radius: var(--radius-1);
  min-width: 0;
  flex-shrink: 1;
}

.fern-numeric-input-group

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

Default CSS

.fern-numeric-input-group {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-2);
  background-color: white;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-default);
  height: 2.5rem;
}
@media (min-width: 640px) {
  .fern-numeric-input-group {
    height: 2rem;
  }
}
.fern-numeric-input-group:focus-within {
  outline: none;
  border-color: var(--accent-a5);
  box-shadow: 0 0 0 2px var(--accent-a5);
}

.fern-numeric-input-step

数字输入框的步进按钮。

Default CSS

.fern-numeric-input-group .fern-numeric-input-step {
  border-color: var(--border-default);
  height: 100%;
  border-radius: 0;
}
.fern-numeric-input-group .fern-numeric-input-step:first-child {
  border-top-left-radius: var(--radius-3/2);
  border-bottom-left-radius: var(--radius-3/2);
  border-right: 1px solid;
}
.fern-numeric-input-group .fern-numeric-input-step:last-child {
  border-top-right-radius: var(--radius-3/2);
  border-bottom-right-radius: var(--radius-3/2);
  border-left: 1px solid;
}
.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled) {
  color: var(--accent-a11);
  border-color: var(--accent-a5);
}
.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled):hover {
  color: var(--accent-a11);
  background-color: var(--accent-a3);
}

下拉菜单与选择器组件

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

.fern-selection-item

选择项。

Default CSS

.fern-selection-item {
  border-radius: var(--radius-3/2);
  display: flex;
  flex: 1 1 0%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid transparent;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  width: 100%;
  text-align: left;
  transition: all 200ms ease-in-out;
}
.fern-selection-item:hover {
  color: var(--accent);
  background-color: var(--grayscale-a3);
}

.fern-selection-item-icon

选择项图标。

Default CSS

.fern-selection-item-icon {
  border-radius: var(--radius-2);
  color: var(--grayscale-a11);
  margin: 0.25rem;
  display: flex;
  height: 56px;
  width: 56px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fern-selection-item-icon.use-icon {
  border: 1px solid var(--grayscale-a5);
  padding: 0.25rem;
}
.fern-selection-item-icon svg,
.fern-selection-item-icon .fern-file-icon {
  display: block;
  height: 50%;
  width: 50%;
  transition: all 300ms ease-in-out;
}
.fern-selection-item:hover .fern-selection-item-icon svg,
.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
  transform: scale(1.2);
}
.fern-selection-item.dense .fern-selection-item-icon {
  margin: 0.125rem;
  height: 36px;
  width: 36px;
  padding: 0.125rem;
}

.fern-selection-item-title

选择项标题。

Default CSS

.fern-selection-item-title {
  color: var(--grayscale-a12);
  font-weight: 700;
  line-height: 1.25;
}
@media (min-width: 1024px) {
  .fern-selection-item-title {
    font-size: 0.875rem;
  }
}

.fern-selection-item-end-icon

选择项末端图标。

Default CSS

.fern-selection-item-end-icon {
  color: var(--grayscale-a11);
}

.fern-product-selector

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

Default CSS

.fern-product-selector {
  width: 100%;
}
@media (min-width: 1024px) {
  .fern-product-selector {
    width: auto;
  }
}

.fern-product-selector-radio-group

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

手风琴组件

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

.fern-accordion

手风琴容器。

Default CSS

.fern-accordion {
  border-radius: var(--radius-3);
  border-top: 1px solid var(--border-default);
}
.fern-accordion li {
  list-style-position: outside;
}

.fern-accordion-item

手风琴项。

Default CSS

.fern-accordion-item {
  overflow: hidden;
}
.fern-accordion-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.fern-accordion-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.fern-accordion-trigger

展开/折叠触发器。

Default CSS

.fern-accordion-trigger {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border-radius: inherit;
  padding: 1rem;
  transition-property: background-color;
  list-style: none;
  overflow: auto;
}
.fern-accordion-trigger:hover {
  background-color: var(--grayscale-a2);
  transition: none;
}
.fern-accordion-trigger[data-state="open"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.fern-accordion-trigger::-webkit-details-marker {
  display: none;
}

.fern-accordion-trigger-arrow

展开/折叠箭头。

Default CSS

.fern-accordion-trigger-arrow {
  color: var(--grayscale-a11);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fern-accordion-trigger[data-state="open"] .fern-accordion-trigger-arrow {
  transform: rotate(90deg);
}

.fern-accordion-trigger-title

手风琴触发器标题。

Default CSS

.fern-accordion-trigger-title {
  color: var(--text-body);
  margin: 0;
  margin-bottom: -1px;
  display: flex;
  max-width: max-content;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5rem;
}
.fern-accordion-trigger-title p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

滚动区域组件

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

.fern-scroll-area

可滚动区域容器。

Default CSS

.fern-scroll-area {
  z-index: 0;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
}

.fern-scroll-area-viewport

滚动视口。

Default CSS

.fern-scroll-area-viewport {
  display: flex;
  height: 100%;
  min-height: 0;
  width: 100%;
  flex-shrink: 1;
  flex-direction: column;
  border-radius: inherit;
}
.fern-scroll-area-viewport:has(.fern-scroll-area-scrollbar[data-orientation="horizontal"]) {
  overscroll-behavior-x: contain;
}
.fern-scroll-area-viewport > div {
  display: block !important;
  flex-grow: 1;
}
.fern-scroll-area-viewport[data-scrollbars="vertical"] > div {
  max-width: 100%;
}

.fern-scroll-area-scrollbar

滚动条。

Default CSS

.fern-scroll-area-scrollbar {
  z-index: 10;
  margin: 0.25rem;
  display: flex;
  touch-action: none;
  user-select: none;
  border-radius: 9999px;
  transition: all 150ms ease-out;
  background-color: var(--grayscale-a3);
}
.fern-scroll-area-scrollbar[data-state="hidden"] {
  opacity: 0;
}
.fern-scroll-area-scrollbar[data-orientation="vertical"] {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 4px;
}
.fern-scroll-area-scrollbar[data-orientation="vertical"]:hover {
  width: 6px;
}
.fern-scroll-area-scrollbar[data-orientation="horizontal"] {
  margin-left: 5px;
  margin-right: 5px;
  height: 4px;
  flex-direction: column;
}
.fern-scroll-area-scrollbar[data-orientation="horizontal"]:hover {
  height: 6px;
}

.fern-scroll-area-thumb

滚动条滑块。

Default CSS

.fern-scroll-area-thumb {
  position: relative;
  z-index: auto;
  display: flex;
  background-color: var(--accent-track);
  flex: 1 1 0%;
  border-radius: 9999px;
}
.fern-scroll-area-thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 28px;
  min-height: 28px;
}

.fern-scroll-area-corner

滚动条角落。

Default CSS

.fern-scroll-area-corner {
  background-color: transparent;
}

徽章组件

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

.fern-docs-badge

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

Default CSS

.fern-docs-badge {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  justify-content: center;
  line-height: 1rem;
  box-sizing: border-box;
  font-weight: 600;
  white-space: nowrap;
}
.fern-docs-badge.small {
  border-radius: var(--radius-1);
  font-size: 0.75rem;
  height: 1.25rem;
  padding: 0 0.375rem;
}
.fern-docs-badge.large {
  border-radius: var(--radius-3/2);
  font-size: 0.875rem;
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
}
.fern-docs-badge.rounded {
  border-radius: 9999px !important;
}
.fern-docs-badge:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fern-docs-badge[data-badge-type="http-method"],
.fern-docs-badge[data-badge-type="status-code"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-variant-numeric: slashed-zero;
  text-transform: uppercase;
}

MDX 内容组件

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

.fern-mdx-link

带外部链接图标和悬停下划线的链接。

Default CSS

.fern-mdx-link {
  color: var(--accent-a11);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: currentcolor;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.25rem;
}
.fern-mdx-link:hover {
  text-decoration-thickness: 2px !important;
}
.fern-mdx-link svg.external-link-icon {
  margin-left: 0.125rem;
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  color: currentColor;
  opacity: 0.7;
  overflow: visible;
}
.fern-mdx-link:hover svg.external-link-icon path:nth-child(1),
.fern-mdx-link:hover svg.external-link-icon path:nth-child(2) {
  transform: translate(2px, -2px);
  transition: transform 0.2s ease;
}

.fern-callout

标注，颜色与 intent 相匹配。

Default CSS

.fern-callout {
  border-radius: var(--radius-3);
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  border: 1px solid;
  padding: 1rem;
}
.fern-callout:first-child {
  margin-top: 0;
}

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"] - 绿色

.fern-indent

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

Default CSS

.fern-indent {
  position: relative;
  margin-left: 1rem;
  padding-left: 1rem;
}
.fern-indent > * + * {
  margin-top: 0.25rem;
}
.fern-indent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  border-left: 1px solid transparent;
}

.fern-steps

步骤组件的容器。

Default CSS

.fern-steps {
  border-left: 1px solid var(--border-default);
  margin-bottom: 3rem;
  margin-left: 0.75rem;
  margin-top: 1rem;
  padding-left: 1.75rem;
}

.fern-step

单个步骤。

Default CSS

.fern-step > .fern-anchor {
  position: absolute;
  margin-left: -40px;
  margin-top: 0.25rem;
}

.fern-anchor

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

Default CSS

a.fern-anchor {
  border-radius: var(--radius-3/2);
  position: relative;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  border: 0;
}
.fern-anchor-icon {
  border-radius: var(--radius-3/2);
  position: absolute;
  left: 0;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
}
.fern-anchor-icon:not(.copied) {
  color: var(--grayscale-a11);
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
}
.fern-anchor-icon.copied {
  background-color: var(--accent-a3);
  border: 1px solid var(--accent-a5);
  backdrop-filter: blur(8px);
}
.fern-anchor-icon.copied > svg {
  color: var(--accent-a11);
}
.fern-anchor-icon > svg {
  width: 1rem;
  height: 1rem;
}

.fern-table-root

表格容器。

Default CSS

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

.fern-table

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

Default CSS

.fern-table {
  width: 100%;
}
.fern-table thead tr th {
  background-color: var(--grayscale-a2);
}
.fern-table td,
.fern-table th {
  height: 2.25rem;
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
}
.fern-table tbody > tr:last-child > td {
  border-bottom: 0;
}
.fern-table.sticky {
  font-size: 0.875rem;
}
.fern-table.sticky thead {
  position: sticky;
  top: var(--header-height, var(--spacing-header-height-real));
}
.fern-table.sticky thead tr th {
  background-color: var(--grayscale-2);
}
.fern-table.sticky td,
.fern-table.sticky th {
  max-width: 0;
}

变更日志筛选器组件

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

.fern-filter-badge

筛选徽章基类。

Default CSS

.fern-filter-badge {
  display: inline;
  max-width: 100%;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fern-filter-badge-selected

已选中的筛选徽章。

Default CSS

.fern-filter-badge-selected {
  /* Inherits from .fern-docs-badge with variant="outlined" */
}

Example: Style selected filter badges with your brand color

/* Make selected badges use your accent color */
.fern-filter-badge.fern-filter-badge-selected {
  background-color: var(--accent-a9);
  color: var(--accent-contrast);
  border-color: var(--accent-a9);
}

.fern-filter-badge-unselected

未选中的筛选徽章。

Default CSS

.fern-filter-badge-unselected {
  /* Inherits from .fern-docs-badge with variant="outlined-subtle" */
}

Example: Mute unselected filter badges

/* Style unselected badges with muted appearance */
.fern-filter-badge.fern-filter-badge-unselected {
  background-color: transparent;
  color: var(--grayscale-a10);
  border-color: var(--grayscale-a6);
}

API Reference 组件

用于 API Reference 组件的选择器。

.fern-api-property

API 属性容器。

Default CSS

.fern-api-property {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.fern-api-property p:last-child {
  margin-bottom: 0;
}

.fern-api-property-header

API 属性头部。

Default CSS

.fern-api-property-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.fern-api-property-key

API 属性名。

Default CSS

.fern-api-property-key {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
}

.fern-api-property-meta

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

Default CSS

.fern-api-property-meta {
  color: var(--grayscale-a11);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.fern-api-property-constraint

API 属性约束。

Default CSS

.fern-api-property-constraint {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
}

工具组件

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

.fern-highlight

高亮文本。

Default CSS

.fern-highlight {
  color: var(--accent-a12);
  background-color: transparent;
  font-weight: 700;
}

.fern-mdx-icon

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

Default CSS

.fern-mdx-icon {
  color: var(--grayscale-a11);
  display: inline-block;
  vertical-align: baseline;
}
@variant dark {
  .fern-mdx-icon {
    color: var(--fa-icon-dark, var(--grayscale-a11));
  }
}

.fern-mdx-tooltip-trigger

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

Default CSS

.fern-mdx-tooltip-trigger {
  --tooltip-underline-color: var(--grayscale-a10);
  --tooltip-underline-hover-color: var(--grayscale-12);
  --tooltip-underline-thickness: 1px;
  --tooltip-underline-offset: 1px;
  --tooltip-transition-duration: 0.15s;
  display: inline-block;
  cursor: help;
  text-decoration: underline dashed var(--tooltip-underline-color) var(--tooltip-underline-thickness);
  text-underline-position: under;
  text-underline-offset: var(--tooltip-underline-offset);
  transition: text-decoration-color var(--tooltip-transition-duration) ease;
}
.fern-mdx-tooltip-trigger:hover {
  text-decoration-color: var(--tooltip-underline-hover-color);
}

.fern-file-icon

文件类型图标。

Default CSS

.fern-selection-item-icon .fern-file-icon {
  display: block;
  height: 50%;
  width: 50%;
  transition: all 300ms ease-in-out;
}
.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
  transform: scale(1.2);
}

.fern-collapsible-child

可折叠子元素。

Default CSS

.fern-collapsible[data-state="open"] .fern-collapsible-child {
  animation: slide-down 0.18s var(--ease-collapse) none;
  width: var(--radix-collapsible-content-width);
}
.fern-collapsible[data-state="closed"] .fern-collapsible-child {
  animation: slide-up 0.18s var(--ease-collapse) none;
  width: var(--radix-collapsible-content-width);
}
@keyframes slide-down {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.fern-runnable-endpoint

可运行端点。

Default CSS

.fern-runnable-endpoint ul {
  padding-left: 0 !important;
  margin-top: 0 !important;
}
.fern-runnable-endpoint button {
  margin-top: 0 !important;
}
.fern-runnable-endpoint .fern-input:disabled,
.fern-runnable-endpoint .fern-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.fern-runnable-endpoint .fern-input-group:has(.fern-input:disabled),
.fern-runnable-endpoint .fern-textarea-group:has(.fern-textarea:disabled),
.fern-runnable-endpoint .fern-numeric-input-group:has(.fern-input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--grayscale-a2);
  pointer-events: none;
}

.fern-rss-feed-button

RSS 订阅按钮。

Default CSS

.fern-rss-feed-button .fern-button-content {
  gap: 0.5rem;
}

变更日志组件

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

.fern-changelog

变更日志页面容器。

Default CSS

.fern-changelog {
  display: flex;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .fern-changelog {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .fern-changelog {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.fern-changelog > main {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1024px;
  word-wrap: break-word;
}

变体：

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

.fern-changelog-entry

变更日志条目。

Default CSS

.fern-changelog-entry {
  display: flex;
  align-items: stretch;
}
.fern-changelog-entry:is(article) {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 1024px) {
  .fern-changelog-entry:is(article) {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.fern-changelog-date

变更日志日期。

Default CSS

.fern-changelog-date {
  color: var(--grayscale-a11);
  font-size: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) {
  .fern-changelog.full-width .fern-changelog-entry > aside .fern-changelog-date {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
  }
}

.fern-changelog-content

变更日志内容区域。

Default CSS

.fern-changelog-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: var(--content-wide-width);
  grid-template-columns: 1fr;
  gap: 1rem;
}

.fern-changelog-label

变更日志条目标签。

Default CSS

.fern-changelog-label {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 0.5rem;
}
@media (min-width: 1280px) {
  .fern-changelog-label {
    flex-direction: column;
  }
}

布局与结构

.fern-background-image

.fern-page-heading

.fern-layout-page

.fern-layout-guide

.fern-layout-reference

.fern-layout-overview

.fern-layout-changelog

头部组件

.fern-header

.fern-header-tabs

.fern-header-logo-container

.fern-header-search-bar

.fern-header-navbar-links

.fern-header-mobile-menu-button

侧边栏组件

.fern-sidebar-header

.fern-sidebar-heading

.fern-sidebar-heading-content

.fern-sidebar-link

.fern-sidebar-link-title

.fern-sidebar-link-title-inner

.fern-sidebar-group

.fern-sidebar-tabs

导航组件

.fern-breadcrumb

.fern-breadcrumb-item

.fern-breadcrumb-arrow

按钮组件

.fern-button

.fern-button-content

.fern-button-text

.fern-button-group

.fern-copy-button

.fern-expand-button

.fern-page-actions

卡片组件

.fern-card

表单组件

.fern-input

.fern-input-group

.fern-input-icon

.fern-input-right-element

.fern-input-clear-button

.fern-textarea

.fern-textarea-group

.fern-checkbox-label

.fern-checkbox-item

.fern-checkbox-indicator

.fern-radio-group

.fern-radio-label

.fern-radio-item

.fern-radio-indicator

.fern-segmented-control

.fern-numeric-input-group

.fern-numeric-input-step

下拉菜单与选择器组件

.fern-dropdown

.fern-dropdown-item

.fern-dropdown-item-indicator

.fern-selection-item

.fern-selection-item-icon

.fern-selection-item-title

.fern-selection-item-end-icon

.fern-product-selector

.fern-product-selector-radio-group

手风琴组件

.fern-accordion

.fern-accordion-item

.fern-accordion-trigger

.fern-accordion-trigger-arrow

.fern-accordion-trigger-title

滚动区域组件

.fern-scroll-area

.fern-scroll-area-viewport

.fern-scroll-area-scrollbar

.fern-scroll-area-thumb

.fern-scroll-area-corner

徽章组件

.fern-docs-badge