# 编写 tldraw 示例示例项目（`apps/examples`）包含如何使用 tldraw SDK 的最小演示。示例嵌入在 [docs site]() 上并部署到 [examples.tldraw.com]()。 `apps/examples/src/examples` 中示例的标准。 ## 结构示例每个示例都位于其自己的文件夹中：应用程序/示例/src/示例/ └── 我的例子/ ├── README.md # 所需元数据 ├── MyExampleExample.tsx # 主示例文件 └── my-example.css # 可选样式 ## 文件夹名称 * 小写 kebab-case: `custom-canvas`, `button-demo`, `magical-wand` * 用作示例的 URL 路径 ## 自述文件.md 所需的前言格式： --- 标题：示例标题组件：./ExampleFile.tsx 类别：类别 ID 优先级：1 关键词：[关键词1，关键词2] --- 此示例演示内容的一行摘要。 --- 示例的详细解释。如果代码片段有助于解释示例代码本身不明显的概念，请在此处包含它们。 ### Frontmatter 字段领域|描述 ---|--- 标题 |句首字母大写，对应文件夹名称组件|示例文件的相对路径类别 |有效类别 ID 之一（见下文）优先|类别内的显示顺序（较低=较高）关键词|搜索字词（避免使用明显的字词，如“tldraw”） ### 有效类别 `入门`、`配置`、`editor-api`、`ui`、`布局`、`事件`、`形状/工具`、`协作`、`数据/资产`、`用例` ## 示例文件 ### 命名 * PascalCase 以“Example”结尾：`CustomCanvasExample.tsx`、`ButtonExample.tsx` * 名称应与文件夹名称和标题相对应 ### 结构从 'tldraw' 导入 { Tldraw } 导入“tldraw/tldraw.css” 导出默认函数 MyExampleExample() { 返回（

） } **要求：** * 必须有一个默认的导出React组件 * 使用 `tldraw__editor` 类来获取整页示例 * 导入 `tldraw/tldraw.css` 样式 ### 布局 * 整页：用 `

` 换行 * 插图：查看页面布局模式的现有示例 ## 风格 * 将 CSS 放入以示例命名的单独文件中：`my-example.css` * 与 tldraw CSS 一起导入：`import './my-example.css'` * 通过“style”属性避免大量内联样式 ## 控制面板对于需要按钮或控件的示例，请将“TopPanel”组件槽与“TldrawUiButton”一起使用：从 'tldraw' 导入 { Tldraw, TldrawUiButton, useEditor } 导入“tldraw/tldraw.css” 导入'./my-example.css' 函数 MyControls() { 常量编辑器 = useEditor() 返回（

editor.zoomIn()}> 放大 editor.zoomOut()}> 缩小

） } 导出默认函数 MyExampleExample() { 返回（

） } 控制面板的 CSS： .我的控件{ 显示：柔性；弹性包裹：包裹；边距：8px； } ＃＃评论使用带有编号参考文献的脚注格式：从 'tldraw' 导入 { Tldraw，类型 TLComponents } 导入“tldraw/tldraw.css” // [1] 常量组件：TLComponents = { 页面菜单：空， } 导出默认函数 CustomComponentsExample() { 返回（

{/* [2] */}

） } /* [1] 在 React 组件外部定义组件覆盖，以便它们是静态的。如果在内部定义，请使用 useMemo 来防止每次渲染时重新创建。 [2] 通过 Components 属性传递组件覆盖。 */ ## 类型示例 ### 严格的例子 * 狭隘地关注特定的 SDK 功能 * 简约风格 * 仅供阅读，而非使用 * 删除任何无关代码 ### 用例示例 * 展现可识别的用户体验 * 优先考虑清晰度和完整性 * 类别：`用例` ## 附加文件 * 如果复杂的代码分散了示例的目的，请将其拆分为单独的文件 * 示例：`Input.tsx` 中的复杂输入组件 * 将主要示例文件集中于演示概念 ## 重要 * 遵循 React 和 TypeScript 最佳实践 * 切勿使用标题大小写作为标题 - 使用句子大小写 * 保持示例最少且重点突出

写例子

包含技能