Skip to content

Commit 0f29e41

Browse files
ac666666666ac666666666
committed
fix:解决Issue #956(文档md中英文问题)
1 parent 42cb3da commit 0f29e41

File tree

2 files changed

+161
-22
lines changed

2 files changed

+161
-22
lines changed

‎packages/omi/README.CN.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<p align="center"><img src="https://omijs.github.io/home/assets/logo.svg" alt="omi" width="100"/></p>
2+
<h2 align="center">Omi - Web Components 框架</h2>
3+
4+
- 📶 基于 [reactive-signal](https://github.com/Tencent/omi/tree/master/packages/reactive-signal) 的 **Signal** 驱动响应式编程
5+
- 🧱 [TDesign Web Components](https://github.com/TDesignOteam/tdesign-web-components)
6+
- 💗 [100+ OMI 模板](https://omi.cdn-go.cn/templates/latest/) & [OMI 模板源码](https://github.com/Tencent/omi/tree/master/packages/omi-templates)
7+
- 🐲 [OMI 表单](https://omi.cdn-go.cn/form/latest/docs/) & [OMI 表单演练场](https://omi.cdn-go.cn/form/latest/play/) & [Lucide Omi 图标](https://github.com/omijs/lucide-omi)
8+
- ⚡ **小巧**体积，**快速**性能
9+
- 🌐 你需要的一切：**Web Components**、**JSX**、函数组件、路由、Suspense、指令、Tailwindcss...
10+
- 💒 利用 **Constructable Stylesheets** 轻松管理和共享样式
11+
12+
## ExportParts - 样式化嵌套组件
13+
14+
Omi 支持 Web Components 的 `exportparts` 属性，允许将嵌套组件的 CSS parts 暴露给外部进行样式化。这使得在保持样式封装的同时，实现强大的组件组合。
15+
16+
### 基本用法
17+
18+
```tsx
19+
import { render, tag, Component, h } from 'omi'
20+
21+
// 内部组件定义 CSS parts
22+
@tag('inner-button')
23+
class InnerButton extends Component {
24+
static css = `
25+
.btn {
26+
padding: 10px 20px;
27+
border: 2px solid #007bff;
28+
background: #007bff;
29+
color: white;
30+
border-radius: 4px;
31+
cursor: pointer;
32+
}
33+
`
34+
35+
render() {
36+
return (
37+
<button class="btn" part="button">
38+
<span part="icon">🚀</span>
39+
<span part="text">{this.props.children}</span>
40+
</button>
41+
)
42+
}
43+
}
44+
45+
// 容器组件使用 exportparts
46+
@tag('card-component')
47+
class CardComponent extends Component {
48+
static css = `
49+
.card {
50+
border: 1px solid #ddd;
51+
padding: 20px;
52+
border-radius: 8px;
53+
}
54+
55+
/* 通过 ::part() 样式化嵌套组件 */
56+
inner-button::part(button) {
57+
background: #28a745;
58+
border-color: #28a745;
59+
}
60+
`
61+
62+
render() {
63+
return (
64+
<div class="card" part="card">
65+
{/* 导出嵌套组件的 parts */}
66+
<inner-button exportparts="button, icon, text">
67+
Click me
68+
</inner-button>
69+
</div>
70+
)
71+
}
72+
}
73+
74+
// 父组件可以样式化导出的 parts
75+
@tag('app-container')
76+
class AppContainer extends Component {
77+
static css = `
78+
/* 样式化从嵌套组件导出的 parts */
79+
card-component::part(button) {
80+
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
81+
border: none;
82+
border-radius: 25px;
83+
}
84+
85+
card-component::part(icon) {
86+
animation: spin 2s linear infinite;
87+
}
88+
89+
@keyframes spin {
90+
from { transform: rotate(0deg); }
91+
to { transform: rotate(360deg); }
92+
}
93+
`
94+
95+
render() {
96+
return <card-component />
97+
}
98+
}
99+
```
100+
101+
### 核心特性
102+
103+
- **Part 定义**: 使用 `part="part-name"` 属性定义组件中可样式化的部分
104+
- **Part 导出**: 使用 `exportparts="part1, part2"` 暴露嵌套组件的 parts
105+
- **外部样式化**: 使用 `component::part(part-name)` 选择器从外部样式化 parts
106+
- **Part 重命名**: 使用 `exportparts="internal-name:external-name"` 重命名导出的 parts
107+
108+
### 高级示例
109+
110+
完整的工作示例请参考 [`exportparts-example.tsx`](./examples/exportparts-example.tsx)，演示了：
111+
- 多层组件嵌套
112+
- Part 重命名和别名
113+
- 复杂样式化场景
114+
- 动画和悬停效果
115+
116+
## 在 Vue 中使用 Omi 组件
117+
118+
```vue
119+
<template>
120+
<h1>{{ msg }}</h1>
121+
122+
<my-counter @change="change" :count="count" />
123+
<p>
124+
【Omi 组件】
125+
</p>
126+
127+
<div class="card">
128+
<button type="button" @click="count++">count is {{ count }}</button>
129+
<p>
130+
【Vue 组件】
131+
</p>
132+
</div>
133+
134+
</template>
135+
```
136+
137+
## 许可证
138+
139+
MIT © Tencent

‎packages/omi/README.md‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -245,16 +245,16 @@ define('my-app', class extends withTwind(Component) {
245245
})
246246
``` -->
247247

248-
## ExportParts - 样式化嵌套组件
248+
## ExportParts - Styling Nested Components
249249

250-
Omi 支持 Web Components 的 `exportparts` 属性，允许将嵌套组件的 CSS parts 暴露给外部进行样式化。这使得在保持样式封装的同时，实现强大的组件组合。
250+
Omi supports the Web Components `exportparts` attribute, allowing nested component CSS parts to be exposed for external styling. This enables powerful component composition while maintaining style encapsulation.
251251

252-
### 基本用法
252+
### Basic Usage
253253

254254
```tsx
255255
import { render, tag, Component, h } from 'omi'
256256

257-
// 内部组件定义 CSS parts
257+
// Inner component defines CSS parts
258258
@tag('inner-button')
259259
class InnerButton extends Component {
260260
static css = `
@@ -278,7 +278,7 @@ class InnerButton extends Component {
278278
}
279279
}
280280

281-
// 容器组件使用 exportparts
281+
// Container component uses exportparts
282282
@tag('card-component')
283283
class CardComponent extends Component {
284284
static css = `
@@ -288,7 +288,7 @@ class CardComponent extends Component {
288288
border-radius: 8px;
289289
}
290290
291-
/* 通过 ::part() 样式化嵌套组件 */
291+
/* Style nested components via ::part() */
292292
inner-button::part(button) {
293293
background: #28a745;
294294
border-color: #28a745;
@@ -298,7 +298,7 @@ class CardComponent extends Component {
298298
render() {
299299
return (
300300
<div class="card" part="card">
301-
{/* 导出嵌套组件的 parts */}
301+
{/* Export nested component parts */}
302302
<inner-button exportparts="button, icon, text">
303303
Click me
304304
</inner-button>
@@ -307,11 +307,11 @@ class CardComponent extends Component {
307307
}
308308
}
309309

310-
// 父组件可以样式化导出的 parts
310+
// Parent component can style exported parts
311311
@tag('app-container')
312312
class AppContainer extends Component {
313313
static css = `
314-
/* 样式化从嵌套组件导出的 parts */
314+
/* Style parts exported from nested components */
315315
card-component::part(button) {
316316
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
317317
border: none;
@@ -334,20 +334,20 @@ class AppContainer extends Component {
334334
}
335335
```
336336

337-
### 核心特性
337+
### Core Features
338338

339-
- **Part 定义**: 使用 `part="part-name"` 属性定义组件中可样式化的部分
340-
- **Part 导出**: 使用 `exportparts="part1, part2"` 暴露嵌套组件的 parts
341-
- **外部样式化**: 使用 `component::part(part-name)` 选择器从外部样式化 parts
342-
- **Part 重命名**: 使用 `exportparts="internal-name:external-name"` 重命名导出的 parts
339+
- **Part Definition**: Use `part="part-name"` attribute to define styleable parts within components
340+
- **Part Export**: Use `exportparts="part1, part2"` to expose nested component parts
341+
- **External Styling**: Use `component::part(part-name)` selector to style parts from outside
342+
- **Part Renaming**: Use `exportparts="internal-name:external-name"` to rename exported parts
343343

344-
### 高级示例
344+
### Advanced Example
345345

346-
完整的工作示例请参考 [`exportparts-example.tsx`](./examples/exportparts-example.tsx)，演示了：
347-
- 多层组件嵌套
348-
- Part 重命名和别名
349-
- 复杂样式化场景
350-
- 动画和悬停效果
346+
For a complete working example, see [`exportparts-example.tsx`](./examples/exportparts-example.tsx), which demonstrates:
347+
- Multi-level component nesting
348+
- Part renaming and aliasing
349+
- Complex styling scenarios
350+
- Animations and hover effects
351351

352352
## Define Cross Framework Component
353353

@@ -432,13 +432,13 @@ const change = (e) => {
432432
433433
<my-counter @change="change" :count="count" />
434434
<p>
435-
【Omi】
435+
【Omi Component】
436436
</p>
437437
438438
<div class="card">
439439
<button type="button" @click="count++">count is {{ count }}</button>
440440
<p>
441-
【Vue】
441+
【Vue Component】
442442
</p>
443443
</div>
444444

0 commit comments

Comments
 (0)