定价

Frame

统一布局、状态、加载与动效，并通过显式配置支持多个组件的联动和样式编排。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

何时使用 Frame

Frame 是布局、状态、加载、动效及组件间显式协作的通用宿主。页面只需要普通结构时，使用语义化 HTML。

导入

import { Frame, initMotion } from '@snowui-design-system/components';
AI 文档 
请用 SnowUI 实现我随后提供的界面需求或设计稿。 SnowUI 的核心方向之一是让 AI 在对话中生成可交互界面，目前该能力建设中，正式组件的聊天宿主验收尚未完成。如果我的需求是在对话内展示，先核对宿主执行能力、组件版本与实际适配证据；仅使用已验证子集和允许动作，保留用户输入，区分本地交互、业务提交与结果续轮。缺少支持时如实说明，并采用获准的替代方式；网页预览、代码或仿样不能冒充对话内交互完成。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。 该豁免也适用于真实工作和获准数据，不要求产品编号、用途声明、登记台账或发布检查。仅当成果另行采用到独立网站／应用时，再按该产品用途核对许可；不要把对话会话或界面登记为项目。 首次采用先读完整 LICENSE：https://snowui.dev/LICENSE；已安装版本以随包许可为准。同任务、同版本、同产品和已确认范围复用检查。 先按 https://snowui.dev/llms/setup.md 与机器配置 https://snowui.dev/llms/setup.json 完成下载、安装、素材和环境准备。识别实际文件／终端、Svelte 构建、资源加载及消息内运行能力；获准的 Svelte 5 环境复用兼容依赖或使用 pnpm add --save-exact @snowui-design-system/components@0.3.0-alpha.11 @snowui-design-system/resource-svelte@1.0.31（沿用现有包管理器），自动解析 resource-base 依赖，入口只加载一次 @snowui-design-system/components/styles，再实际检查组件交互及素材加载。从 https://snowui.dev/llms/resources.json 按名称选择真实素材，不引用维护者磁盘路径，不将全库塞进每条消息。 分别报告下载、安装、构建、素材加载、消息内交互和续轮结果，给出以后可复用的非秘密配置摘要。本机安装或复制过的提示词不会自动配置另一个 AI 产品或新会话；先发现新宿主，再使用真实且已验的连接入口。当前机器配置尚无 SnowUI 聊天连接地址，不编造端点、不绕过宿主授权、不擅写 AI 记忆、不声称未执行的安装或渲染已经完成。 阅读设计指南：https://snowui.dev/llms/design-system.md；先拆页面区域，用公开组件与语义 HTML 实现。 首次阅读样式顺序：https://snowui.dev/llms/styling.md；先用 variant、size 等公开 Props 匹配，尽量保留原样；必要时用自己的 class（已有 Tailwind 也属此方式），再用实例 style。同类 Token 是建议，只用公开根、parts 和已登记 override。 按需选型：https://snowui.dev/llms/component-selection.md；从 https://snowui.dev/llms.txt 发现组件，再读命中的 API、组合与示例。使用 SnowUI Figma 设计时另读 https://snowui.dev/llms/figma.md。 官方包面向 Svelte 5；先确认项目框架，需要移植时如实说明，不改 import 伪装其他框架兼容。 AI 对话内使用按上述免费豁免直接继续，不核对项目或席位额度。对于独立产品，Free 不强制注册、账户、公钥或签名付费许可文件，仍按 LICENSE 核对用途、项目和开发者人数。自述付费计划不是已验证授权；需要付费权益时核对可信证据，资料或网络不可用保持 unknown，只继续已允许的工作。 按我后续的需求实现，不臆造 API、地址或授权。 参考 Frame「Import」（import），阅读该章节的实际代码：https://snowui.dev/components/frame#import。 完整公开手册：https://snowui.dev/llms/components/frame/reference.md 组件说明：https://snowui.dev/llms/components/frame.md公开 API：https://snowui.dev/llms/components/frame/api.md依赖：@snowui-design-system/components；读取示例实际 import，包样式只引入一次。保留示例行为，只按需求作必要调整。

布局与内容

优先用 row、column、grid、as 与 row firstLine 组合内容。视觉值使用公开 Token、class 或 style。loading 与 skeleton 共用继承的上下文。

协作

使用跨组件动效时，在父组件初始化阶段调用 initMotion()。Frame 支持 orchestrate*、target/action 触发器和 styles 规则；这些能力与普通布局共用同一个 Frame 实现和上下文。

API 与示例

API 参考 · 完整手册 · 快速开始

API 参考

属性 类型 默认值 示例 描述
componentParts ComponentParts — componentParts={ExampleIcon} 复合组件内部的 parts 传播边界；普通页面通过宿主组件公开 parts 使用，不直接配置此字段。
enableResponsive boolean true enableResponsive 响应式监听能力。控制 ResizeObserver 和断点检测。
enableContext boolean true enableContext 上下文提供能力。控制 FramePerception Context。
enableScaleObserver boolean false enableScaleObserver 尺寸比例监听能力。开启后向 CSS 变量写入运行时宽高、高宽比与统一尺寸。
enableDefaultMotion boolean true enableDefaultMotion New in v3.6.0 默认动效开关。设为 false 时，该 Frame 的所有 while* 不自动注入系统默认动效。用户显式传入的 while* 配置不受影响。
enableAutoLayout boolean true enableAutoLayout 自动布局协议开关。当 Frame 声明了 row / column 方向时默认激活，在根 DOM 上输出 data-auto-layout 属性，继承 auto-layout.css 的三槽位感知、首行对齐、Wrap、Gap 等规则。设为 false 可关闭。详见 LayoutProtocol.md。
contentFill boolean false contentFill 普通内容子项宽度填满 Frame 内容区；优先级高于 contentHug。
contentHug boolean false contentHug 普通内容子项宽度按内容收缩。
pinOffset number | string — pinOffset="Example" Pin 布局两个方向的偏移；数字按 px，字符串原样输出；新用法使用对应 Token 字符串。
pinOffsetX number | string — pinOffsetX="Example" Pin 水平偏移，优先于 pinOffset；数字按 px，字符串原样输出。
pinOffsetY number | string — pinOffsetY="Example" Pin 垂直偏移，优先于 pinOffset；数字按 px，字符串原样输出。
scaleHeightVar string --snowui-scale-height-runtime scaleHeightVar="Example" 运行时高度变量名
scaleWidthVar string --snowui-scale-width-runtime scaleWidthVar="Example" 运行时宽度变量名
scaleAspectRatioVar string --snowui-scale-aspect-ratio-runtime scaleAspectRatioVar="Example" 运行时高宽比变量名
scaleSizeVar string --snowui-scale-size-runtime scaleSizeVar="Example" 运行时统一尺寸变量名
scaleObserverTarget "self" | "parent" 'self' scaleObserverTarget="self" 监听目标节点
scaleBasis "height" | "width" | "mixed" | "aspect" 'height' scaleBasis="height" 比例计算依据模式
scaleMixHeightWeight number 0.5 scaleMixHeightWeight={42} mixed 模式下高度权重
scaleAspectBaseRatio number 1 scaleAspectBaseRatio={42} aspect 模式参考高宽比
sizeRatio number 1 sizeRatio={42} 统一尺寸比例（相对 basis size 的倍率；1=与 basis size 等大）
iconSizeRatio number sizeRatio iconSizeRatio={42} Icon 独立比例
avatarSizeRatio number sizeRatio avatarSizeRatio={42} Avatar 独立比例
class string — class="my-component" 外部 CSS 类名，用于样式覆盖或布局调整
style string — style="width: 100%;" 行内样式
children Snippet<[any]> — <Frame>Content</Frame> 子内容 (容器类组件)
as string — as="Example" 角色声明，用于在组合模式下声明自身角色
tag string div tag="Example" 渲染的 HTML 标签名
id string — id="example" 元素 ID。动效编排时必须由用户手动指定
element HTMLElement — bind:element={element} 绑定根元素 (bindable)
use any[] — use={use} Svelte Actions 数组
size number — size={42} 组件逻辑尺寸。用于通过 Context 传递给子组件（如资源组件选择分辨率）
iconSize number — iconSize={42} New 独立控制内部 Icon 的尺寸 (Context 传递)
avatarSize number — avatarSize={42} New 独立控制内部 Avatar 的尺寸 (Context 传递)
loading boolean false loading 是否进入加载态。只表示状态，不决定具体视觉呈现。
skeleton boolean true skeleton 加载态是否渲染骨架。可继承父级 loading protocol。
renderHints RenderHints — renderHints={value} 组件根的 Skeleton 自注册协议。组件提供最终形态、尺寸、圆角与行数；调用方逐字段覆盖。
currentState CoreState "Idle" currentState={value} 外部受控核心状态。用于 Toast / Portal 等由父级管理生命周期的场景，把 Appear / Disappear / Active 等状态交给 Frame 默认动效系统解析。
customStates string[] — customStates={customStates} 自定义状态名称数组，用于扩展状态机
StartLoad StateTransition — StartLoad={value} 开始加载后转变
Load StateTransition — Load={value} 加载完成后转变
Reload StateTransition — Reload={value} 重新加载后转变，调用 onReload 回调
Appear StateTransition — Appear={value} 出现完成后转变
Disappear StateTransition — Disappear={value} 消失完成后转变
Idle StateTransition — Idle={value} 空闲后转变
Active StateTransition — Active={value} 激活完成后转变
Disabled StateTransition — Disabled={value} 禁用后转变
Validating StateTransition — Validating={value} 验证中后转变
Uploading StateTransition — Uploading={value} 上传中后转变
Editing StateTransition — Editing={value} 编辑中后转变
onReload () => Promise<void> — onReload={(value) => { /* handle value */ }} 进入 Reload 状态时执行的回调，用于数据刷新
stateVars Record<string, StateValueMap<any>> — stateVars={stateVarsOptions} 通用状态变量映射（任意变量名 -> 按状态取值）
stateClass StateValueMap<string> — stateClass={stateClassOptions} 按状态追加 class
stateStyle StateValueMap<string | Record<string, string | number>> — stateStyle={stateStyleOptions} 按状态追加 style
stateContent StateValueMap<any> — stateContent={stateContentOptions} New in v3.6.0 按状态切换子内容（Snippet），Frame 自动处理交叉淡化补间动效 (Crossfade)
Click EventTrigger — Click={value} 点击时触发
Drag EventTrigger — Drag={value} 拖拽时触发
Hover EventTrigger — Hover={value} 悬停时触发
Focus EventTrigger — Focus={value} 聚焦时触发
Key | { key: string; state: CoreState } | { key: string; target: string; action: string; reverse?: boolean; } | { key: string; run: (e?: any) => void } — Key={(value) => { /* handle value */ }} 指定键盘按键时触发
Scroll EventTrigger — Scroll={value} 滚动到组件时触发
collapsed boolean — collapsed 声明收起形态，由形态与状态能力消费；不自动提供触发按钮。
expanded boolean — expanded 声明展开形态，由形态与状态能力消费；不自动创建额外内容。
responsive FrameResponsiveProps | false — responsive={value} 基于容器宽度的内容适配配置或 false；启用响应能力时，方向与内容收缩按公开 FrameResponsiveProps 解析。
xs "row" | "column" | "grid" | "row-reverse" | "column-reverse" — xs="row" 兼容断点方向 xs，启用 enableResponsive 时按 mobile-first 级联；新页面优先页面 responsive utilities。
sm "row" | "column" | "grid" | "row-reverse" | "column-reverse" — sm="row" 兼容断点方向 sm，启用 enableResponsive 时按 mobile-first 级联；新页面优先页面 responsive utilities。
md "row" | "column" | "grid" | "row-reverse" | "column-reverse" — md="row" 兼容断点方向 md，启用 enableResponsive 时按 mobile-first 级联；新页面优先页面 responsive utilities。
lg "row" | "column" | "grid" | "row-reverse" | "column-reverse" — lg="row" 兼容断点方向 lg，启用 enableResponsive 时按 mobile-first 级联；新页面优先页面 responsive utilities。
xl "row" | "column" | "grid" | "row-reverse" | "column-reverse" — xl="row" 兼容断点方向 xl，启用 enableResponsive 时按 mobile-first 级联；新页面优先页面 responsive utilities。
2xl "row" | "column" | "grid" | "row-reverse" | "column-reverse" — 2xl="row" 兼容断点方向 2xl，启用 enableResponsive 时按 mobile-first 级联；新页面优先页面 responsive utilities。
row boolean — row 设置横向布局；同时声明 column 或 grid 时 row 优先。
firstLine boolean false firstLine 允许换行的图文正文显式声明首行对齐；单行标签使用singleLine，通用Frame不自动识别内容。在 row / row-reverse 三槽布局中，将 leading / trailing 附件与正文第一行行框居中；正文须继承宿主行高。非 row、无附件或 enableAutoLayout=false 时不增强；与 Pin 兼容。
singleLine boolean false singleLine 显式单行图文／文字组合预设：横排居中、不换行、gap至少4 CSS px；leading／trailing附件保持尺寸，普通内容可收缩。优先于方向断点及responsive结构回退；不自动识别子项、不生成文字或Tooltip。Text lines=1负责截断与全文访问。enableAutoLayout=false时关闭本预设。
column boolean — column 设置纵向布局；未启用 row 时生效，配合 reverse 改变方向。
grid boolean — grid 设置网格基础布局；row、column 均未启用时生效，网格列由公开 class/style 配置。
reverse boolean — reverse 是否反向执行
morph boolean — morph 启用自身布局变化过渡；不替代图表、表格或文字内部的专业时间线。
whileLoad MotionConfig | boolean — whileLoad={value} Load 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileReload MotionConfig | boolean — whileReload={value} Reload 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileAppear MotionConfig | boolean — whileAppear={value} Appear 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileDisappear MotionConfig | boolean — whileDisappear={value} Disappear 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileIdle MotionConfig | boolean — whileIdle={value} Idle 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileActive MotionConfig | boolean — whileActive={value} Active 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileDisabled MotionConfig | boolean — whileDisabled={value} Disabled 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileClick MotionConfig | boolean — whileClick={value} Click 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileDrag MotionConfig | boolean — whileDrag={value} Drag 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileHover MotionConfig | boolean — whileHover={value} Hover 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileFocus MotionConfig | boolean — whileFocus={value} Focus 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileKey MotionConfig | boolean — whileKey={value} Key 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileScroll MotionConfig | boolean — whileScroll={value} Scroll 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。不主动创建业务状态，不接管子组件专业内部时间线。
whileValidating MotionConfig | boolean — whileValidating={value} Validating 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。兼容迁移能力，新页面不扩大使用。
whileUploading MotionConfig | boolean — whileUploading={value} Uploading 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。兼容迁移能力，新页面不扩大使用。
whileEditing MotionConfig | boolean — whileEditing={value} Editing 状态或触发阶段的动效配置；对象表达显式动效，boolean 控制该阶段默认能力。兼容迁移能力，新页面不扩大使用。
whileCollapsed MotionConfig — whileCollapsed={value} Collapsed 状态或触发阶段的动效配置；对象表达显式动效。兼容迁移能力，新页面不扩大使用。
whileExpanded MotionConfig — whileExpanded={value} Expanded 状态或触发阶段的动效配置；对象表达显式动效。兼容迁移能力，新页面不扩大使用。
whileXs MotionConfig — whileXs={value} Xs 状态或触发阶段的动效配置；对象表达显式动效。兼容迁移能力，新页面不扩大使用。
whileSm MotionConfig — whileSm={value} Sm 状态或触发阶段的动效配置；对象表达显式动效。兼容迁移能力，新页面不扩大使用。
whileMd MotionConfig — whileMd={value} Md 状态或触发阶段的动效配置；对象表达显式动效。兼容迁移能力，新页面不扩大使用。
whileLg MotionConfig — whileLg={value} Lg 状态或触发阶段的动效配置；对象表达显式动效。兼容迁移能力，新页面不扩大使用。
whileXl MotionConfig — whileXl={value} Xl 状态或触发阶段的动效配置；对象表达显式动效。兼容迁移能力，新页面不扩大使用。
while2xl MotionConfig — while2xl={value} 2xl 状态或触发阶段的动效配置；对象表达显式动效。兼容迁移能力，新页面不扩大使用。
variants Record<string, MotionConfig> — variants={variantsOptions} 动效变体属性
delay number 0 delay={42} 延迟执行时间 (ms)
loopMotion LoopMotionConfig — loopMotion={value} 循环动画配置。默认将 duration / easing / iteration / direction / playState 写入 Frame 的 --snowui-frame-loop-motion-* 变量；当 preset="rotateClockwise" 时，Frame 根节点直接启用内建连续旋转。
scroll ScrollConfig — scroll={value} 滚动联动配置
layoutId string — layoutId="Example" 共享元素转场 ID
itemId string — itemId="Example" 元素替换锚点 ID（推荐；语义同 layoutId）
scope FrameScope — scope={value} Context 能力作用域：self、children、descendants、explicit；未传不额外限制传播。
access FrameAccess — access={value} Context 操作权限；readonly 为只读，writeable 允许公开协议范围内的操作。
timeline string — timeline="Example" 时间轴声明: timeline:[ID]:[Order]
orchestrate boolean — orchestrate 启用父 Frame 对子项的动效编排。
orchestrateMode "sequential" | "random" | "parallel" — orchestrateMode="sequential" sequential 按顺序、random 随机、parallel 同时安排子项。
orchestrateDelay number — orchestrateDelay={42} 子项编排的间隔，单位毫秒；不改变每个子项自己的持续时间。
orchestrateOrder | "visual-row" | "visual-column" | "visual-row-reverse" | "visual-column-reverse" | "dom" — orchestrateOrder="visual-row" 子项排序按视觉行、视觉列及其反向或 dom 顺序。
orchestrateGroup string — orchestrateGroup="Example" 编排组标识，用于区分协同子项。
orchestrateTrigger "appear" | "hover" | "click" | "scroll" | "none" — orchestrateTrigger="appear" 编排触发：appear、hover、click、scroll 或 none；none 不自动触发。
orchestrateTarget string — orchestrateTarget="Example" 编排目标选择器，限制参与的子项。
styles Record<string, Record<string, string | number>> — styles={stylesOptions} 按目标 ID 配置跨 Frame 样式编排；键为 #id，值为样式字段和值，不是任意后代 CSS 选择器。
padding number — padding={42} 兼容标量视觉字段；新页面使用 padding Token 与 class/style，不新增依赖该兼容入口。
gap number — gap={42} 兼容间距编号，直接布局路径映射 --gap-N；新页面优先对应 gap Token，不填写未登记档位。
radius number | "full" — radius={42} 兼容圆角字段；新页面使用 radius Token 或组件公开圆角入口，不新增对旧标量字段的依赖。
border number — border={42} 兼容边框字段；新页面使用 border Token 或组件公开边框入口。
innerBorder boolean | string — innerBorder="Example" 兼容内边框字段；新页面使用组件公开入口和已登记 Token，不假定任意输入均可创建内边框。
fontSize number | string — fontSize="Example" 兼容字号字段；新页面配对使用 --text-* 与 --leading-*，不使用 size Token 表达字号。
minWidth number | string — minWidth="Example" 最小宽度；数字转为 px，字符串作为 CSS 值；设计还原使用 Token 或适用布局表达式。
minHeight number | string — minHeight="Example" 兼容最小高度字段；普通页面通过根 style 与尺寸 Token 表达，不依赖未明确的标量解析路径。
width number | string — width="Example" 宽度；数字转为 px，字符串作为 CSS 值；新用法优先组件 API 与 Token。
height number | string — height="Example" 兼容高度字段；普通页面通过根 style 与尺寸 Token 表达。
opacity number — opacity={42} 透明度

下一步

快速开始 ScrollArea