Npmlibrary

UI 组件

预计阅读时间: 3 分钟

Video.js UI 组件的工作原理——每个组件一个元素，用于状态的 data 属性，以及复合组合。

UI 组件是按钮、滑块和时间显示等控件。

每个 UI 组件只渲染一个 HTML 元素，灵感来自 shadcn/ui 和 Base UI 等项目。这种方法让你可以控制样式和行为，同时为你处理复杂的交互。

放置组件的位置

UI 组件可以放在 <Player.Provider> 内的任何位置。

但是，你应该考虑将组件放在 <Player.Container> 中。<Player.Container> 中的组件将随播放器一起全屏，响应用户活动等。

了解更多关于 <Player.Container>

样式和自定义

`render` 属性

render 属性是主要的自定义机制。它接受一个接收 props 和 state 的函数，并返回你的元素。props 对象包括事件处理程序、ARIA 属性、data 属性和 ref——始终展开 {...props} 以保持一切正常工作：

<PlayButton
  render={(props, state) => (
    <button {...props}>
      {state.paused ? '播放' : '暂停'}
    </button>
  )}
/>

className 和 style 也接受状态函数，用于无需完整 render 属性的动态样式：

<PlayButton
  className={(state) =>
    state.paused ? 'btn btn--paused' : 'btn btn--playing'
  }
/>

Data 属性和 CSS 自定义属性

组件将其元素上的播放器状态反映为 data-* 属性。例如，data-paused 或 data-volume-level="high"。

这允许你在纯 CSS 中样式化状态变化：

/* 根据播放状态显示/隐藏图标 */
.play-icon { display: none; }
.pause-icon { display: none; }

button[data-paused] .play-icon { display: inline; }
button:not([data-paused]) .pause-icon { display: inline; }

每个组件的参考页面都记录了其完整的 data 属性集。

一些组件还暴露CSS 自定义属性，用于连续值，如填充百分比和指针位置。例如，滑块设置 --media-slider-fill 和 --media-slider-pointer。有关详细信息，请参阅各个组件参考页面。

复合组件

复杂的交互被拆分为可组合的部分。父级管理共享状态，而子级消费它。每个部分仍然是一个元素。

复合组件使用共享命名空间的点表示法：

<VolumeSlider.Root orientation="vertical">
  <VolumeSlider.Track>
    <VolumeSlider.Fill />
  </VolumeSlider.Track>
  <VolumeSlider.Thumb />
</VolumeSlider.Root>

上一步： 预设

下一步： 无障碍访问

#UI 组件

#放置组件的位置

#样式和自定义

#render 属性