主题 Theme
概览 Overview
颜色 Color
深色模式 Dark mode
排版 Typography
间距 Spacing
断点 Breakpoints
圆角 Radius
阴影 Shadows
光标 Cursors
组件
警报对话框 Alert Dialog
纵横比 Aspect Ratio
头像 Avatar
徽章 Badge
按钮 Button
提示框 Callout
卡片Card
复选框 Checkbox
复选框组合 Checkbox Group
复选框卡片 Checkbox Cards
上下文菜单 Context Menu
数据列表 Data List
对话框 Dialog
下拉菜单 Dropdown Menu
悬停卡片 Hover Card
图标按钮 Icon Button
插入 Inset
弹出框 Popover
进度条 Progress
单选框 Radio
单选框组合 Radio Group
单选框卡片 Radio Cards
滚动区域 Scroll Area
分段控制 Segmented Control
选择 Select
分隔线 Separator
骨架 Skeleton
滚动条 Slider
加载指示器 Spinner
开关 Switch
表格 Table
标签 Tabs
标签导航 Tab Nav
文本区域 Text Area
文本字段 Text Field
工具提示 Tooltip
Components
纵横比
在所需的比率内显示内容。
<AspectRatio ratio={16 / 8}>
<img
src="https://images.unsplash.com/photo-1479030160180-b1860951d696?&auto=format&fit=crop&w=1200&q=80"
alt="森林中的房子"
style={{
objectFit: "cover",
width: "100%",
height: "100%",
borderRadius: "var(--radius-2)",
}}
/>
</AspectRatio>
API 参考
该组件继承自 纵横比原语 的属性。