Skip to content

组件 ​

全部 46 个组件,忠实于 React 原版并经过对照验证。大多数位于 prism-ui;图表在 prism-charts,玻璃在 prism-glass,图标在 prism-icons。桌面端 sample 实例化了每一个组件。

组件在适合的地方构建于 Material 3 基础之上,并完全由 PrismTheme 令牌进行样式设置。交互式和自定义绘制的组件携带 Modifier.semantics { } 以支持屏幕阅读器。

操作与反馈 ​

组件API说明
ButtonPrismButton4 个变体 × 色调 × 3 种尺寸,前置/后置图标
TagPrismTag色调胶囊;selected 边框环;可用的移除(×)
BadgePrismBadge计数/圆点,max,浮于 content 之上
BannerPrismBanner着色、色调图标、操作 + 关闭
ToastPrismToastneutral/success/error 变体 + 自动图标
SpinnerPrismSpinnerCircularProgressIndicator;label / showLabel
ProgressBarPrismProgressBarLinearProgressIndicator;色调;确定/不确定
SkeletonPrismSkeletontext / rect / circle 变体,lines
PageControlPrismPageControl圆点指示器;设置 onChange 后可点按
StateViewPrismStateViewempty/error:图标 + 标题 + 描述 + 操作

输入与表单 ​

组件API说明
TextFieldPrismTextFieldOutlinedTextField + 标签 / 帮助 / 错误
TextareaPrismTextarea多行输入
SearchFieldPrismSearchField搜索图标 + 条件清除
SelectPrismSelectExposedDropdownMenuBox(泛型 <T>)
SwitchPrismSwitch令牌样式的 Material 3 Switch
CheckboxPrismCheckboxTriStateCheckbox
RadioPrismRadio / PrismRadioGroupRadioButton + selectableGroup
SliderPrismSlider可选标签 + 数值显示
StepperPrismStepper−/+ 带 min/max/step 边界
DatePickerPrismDatePicker42 格月历网格,纯 Kotlin 日期运算
WheelPickerPrismWheelPicker吸附惯性滚轮;单列或多列

导航 ​

组件API说明
TabsPrismTabs2px 强调色下划线
SegmentedControlPrismSegmentedControl逐段背景切换
TabBarPrismTabBar半透明材质之上的 NavigationBar
NavBarPrismNavBar3 槽位顶栏 + 大标题、返回按钮
BreadcrumbPrismBreadcrumb可点击路径 + 尖角分隔符

覆盖层与展开 ​

组件API说明
ModalPrismModal居中 Dialog + 遮罩
AlertPrismAlertAlertDialog;破坏性 / 堆叠
SheetPrismSheet滑入式底部 sheet + 遮罩
PopoverPrismPopoverPopup,4 种位置,点击外部/Esc 关闭
TooltipPrismTooltip由悬停/聚焦/按压驱动的气泡
MenuPrismMenuDropdownMenu;项、danger、分隔符
DisclosurePrismDisclosure带动画的手风琴 + 旋转尖角

容器与内容 ​

组件API说明
CardPrismCard媒体槽位 + eyebrow/标题/描述/页脚
ListPrismList / PrismListRow前置/标题/副标题/后置/尖角
TablePrismTable右对齐数字、细线行
GridPrismGrid响应式列(泛型 <T>)
AvatarPrismAvatar / PrismAvatarGroup首字母 + 在线圆点;重叠 "+N"
ImagePrismImage宽高比盒子 + 渐变遮罩 + 占位符

图表 ​

组件API说明
BarChartPrismBarChart比例柱状,单一强调色
LineChartPrismLineChartCanvas 折线 + 区域渐变
ProgressRingPrismProgressRingdrawArc 环 + 中心标签

玻璃 ​

组件API说明
MaterialPrismMaterial磨砂表面,4 种厚度,渐进式
LiquidGlassPrismLiquidGlass漂浮的半透明胶囊

玻璃保真度

prism-glass 提供了一个无依赖的半透明近似实现,可在每个目标平台上编译。实时背景模糊(Android 12+ 上的 Haze / RenderEffect,其他平台上的 Skia 着色器)可在同一 API 背后接入。像素级忠实的 Apple 原生玻璃在设计上仅限 Web。

基础 ​

组件API说明
IconPrismIcon / PrismIcons46 个图标集,运行时 strokeWidth
ThemeProviderPrismTheme参见主题

基于 MIT 许可发布。