Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

sync translation of 'build custom form controls' #14568

Merged
merged 10 commits into from
Jul 29, 2023
Merged

sync translation of 'build custom form controls' #14568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4d7728b
stage
yin1999 Jul 17, 2023
21a6316
stage 2
yin1999 Jul 24, 2023
318c08a
finish translation
yin1999 Jul 24, 2023
14b4848
Apply suggestions from code review
yin1999 Jul 24, 2023
ef25a15
Merge branch 'main' into form-stage
yin1999 Jul 25, 2023
6c96d1a
fix more and sync examples
yin1999 Jul 25, 2023
f07e098
Merge branch 'main' into form-stage
yin1999 Jul 26, 2023
b4c86f6
Apply suggestions from code review
yin1999 Jul 27, 2023
fe15b6d
run prettier format
yin1999 Jul 27, 2023
54175b0
re-format code example
yin1999 Jul 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 26 additions & 38 deletions files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Example 1
title: 示例 1
slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
---

这是第一个[如果构建自定义表单小部件](/zh-CN/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets)的代码解释事例。
这是第一个[如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)的代码解释事例。

## 基本状态

Expand All @@ -25,9 +25,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
### CSS

```css
/* --------------- */
/* Required Styles */
/* --------------- */
/*--------- */
/* 所需的样式 */
/* -------- */

.select {
position: relative;
Expand All @@ -51,15 +51,14 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
visibility: hidden;
}

/* ------------ */
/* Fancy Styles */
/* ------------ */
/* ------- */
/* 美化样式 */
/* ------- */

.select {
font-size: 0.625em; /* 10px */
font-family: Verdana, Arial, sans-serif;

-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
Expand All @@ -71,7 +70,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */

background: #f0f0f0;
background: -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}

Expand All @@ -85,7 +83,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
vertical-align: top;
}

.select:after {
.select::after {
content: "▼";
position: absolute;
z-index: 1;
Expand All @@ -96,7 +94,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

padding-top: 0.1em;

-moz-box-sizing: border-box;
box-sizing: border-box;

text-align: center;
Expand All @@ -122,7 +119,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);

-moz-box-sizing: border-box;
box-sizing: border-box;

min-width: 100%;
Expand All @@ -141,7 +137,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
}
```

### 结果
### 基本状态结果

{{ EmbedLiveSample('基本状态', 120, 130) }}

Expand All @@ -165,9 +161,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
### CSS

```css
/* --------------- */
/* Required Styles */
/* --------------- */
/*--------- */
/* 所需的样式 */
/* -------- */

.select {
position: relative;
Expand All @@ -191,15 +187,14 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
visibility: hidden;
}

/* ------------ */
/* Fancy Styles */
/* ------------ */
/* ------- */
/* 美化样式 */
/* ------- */

.select {
font-size: 0.625em; /* 10px */
font-family: Verdana, Arial, sans-serif;

-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
Expand All @@ -211,7 +206,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */

background: #f0f0f0;
background: -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}

Expand All @@ -225,7 +219,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
vertical-align: top;
}

.select:after {
.select::after {
content: "▼";
position: absolute;
z-index: 1;
Expand All @@ -236,7 +230,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

padding-top: 0.1em;

-moz-box-sizing: border-box;
box-sizing: border-box;

text-align: center;
Expand All @@ -262,7 +255,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);

-moz-box-sizing: border-box;
box-sizing: border-box;

min-width: 100%;
Expand All @@ -281,7 +273,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
}
```

### 结果
### 活动状态结果

{{ EmbedLiveSample('活动状态', 120, 130) }}

Expand All @@ -305,9 +297,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
### CSS

```css
/* --------------- */
/* Required Styles */
/* --------------- */
/*--------- */
/* 所需的样式 */
/* -------- */

.select {
position: relative;
Expand All @@ -331,15 +323,14 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
visibility: hidden;
}

/* ------------ */
/* Fancy Styles */
/* ------------ */
/* ------- */
/* 美化样式 */
/* ------- */

.select {
font-size: 0.625em; /* 10px */
font-family: Verdana, Arial, sans-serif;

-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
Expand All @@ -351,7 +342,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */

background: #f0f0f0;
background: -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}

Expand All @@ -365,7 +355,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
vertical-align: top;
}

.select:after {
.select::after {
content: "▼";
position: absolute;
z-index: 1;
Expand All @@ -376,7 +366,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

padding-top: 0.1em;

-moz-box-sizing: border-box;
box-sizing: border-box;

text-align: center;
Expand All @@ -402,7 +391,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);

-moz-box-sizing: border-box;
box-sizing: border-box;

min-width: 100%;
Expand All @@ -421,6 +409,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
}
```

### 结果
### 展开状态结果

{{ EmbedLiveSample('展开状态', 120, 130) }}
28 changes: 11 additions & 17 deletions files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Example 2
title: 示例 2
slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
---

这是解释 [如何构建自定义表单小部件](/zh-CN/docs/HTML/Forms/How_to_build_custom_form_widgets)的第二个示例。
这是解释[如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)的第二个示例。

## 使用 JS

Expand All @@ -29,7 +29,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
<li class="option">Apple</li>
</ul>
</div>
<form></form>
</form>
```

Expand All @@ -44,9 +43,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
overflow: hidden;
}

/* --------------- */
/* Required Styles */
/* --------------- */
/*--------- */
/* 所需的样式 */
/* -------- */

.select {
position: relative;
Expand All @@ -70,15 +69,14 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
visibility: hidden;
}

/* ------------ */
/* Fancy Styles */
/* ------------ */
/* ------- */
/* 美化样式 */
/* ------- */

.select {
font-size: 0.625em; /* 10px */
font-family: Verdana, Arial, sans-serif;

-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
Expand All @@ -90,7 +88,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */

background: #f0f0f0;
background: -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}

Expand All @@ -104,7 +101,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
vertical-align: top;
}

.select:after {
.select::after {
content: "▼";
position: absolute;
z-index: 1;
Expand All @@ -115,7 +112,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2

padding-top: 0.1em;

-moz-box-sizing: border-box;
box-sizing: border-box;

text-align: center;
Expand All @@ -141,7 +137,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2

box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);

-moz-box-sizing: border-box;
box-sizing: border-box;

min-width: 100%;
Expand All @@ -163,8 +158,8 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
### JavaScript

```js
window.addEventListener("load", function () {
var form = document.querySelector("form");
window.addEventListener("load", () => {
const form = document.querySelector("form");

form.classList.remove("no-widget");
form.classList.add("widget");
Expand Down Expand Up @@ -199,7 +194,6 @@ window.addEventListener("load", function () {
<li class="option">Apple</li>
</ul>
</div>
<form></form>
</form>
```

Expand Down
Loading