未验证 提交 0c3efa72 编写于 作者: O openharmony_ci 提交者: Gitee

!9731 翻译完成 9135

Merge pull request !9731 from ester.zhou/TR-9135
# select<a name="EN-US_TOPIC_0000001173164719"></a>
The **<select\>** component provides a drop-down list that allows users to select among multiple options.
## Required Permissions<a name="section11257113618419"></a>
None
## Child Component<a name="section9288143101012"></a>
The **<[option](js-components-basic-option.md)\>** child component is supported.
## Attributes<a name="section2907183951110"></a>
Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
## Styles<a name="section648514244510"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<a name="table2017217206553"></a>
<table><thead align="left"><tr id="row17172152010556"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="p1117215208557"><a name="p1117215208557"></a><a name="p1117215208557"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="p11172120175513"><a name="p11172120175513"></a><a name="p11172120175513"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="p21721420155517"><a name="p21721420155517"></a><a name="p21721420155517"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="p917211203552"><a name="p917211203552"></a><a name="p917211203552"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="p101721020175516"><a name="p101721020175516"></a><a name="p101721020175516"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1917292016550"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p9172162095516"><a name="p9172162095516"></a><a name="p9172162095516"></a>font-family</p>
</td>
<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="p181721120165512"><a name="p181721120165512"></a><a name="p181721120165512"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="p1117282018556"><a name="p1117282018556"></a><a name="p1117282018556"></a>sans-serif</p>
</td>
<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p517218202558"><a name="p517218202558"></a><a name="p517218202558"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p17172120195510"><a name="p17172120195510"></a><a name="p17172120195510"></a>Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by <a href="js-components-common-customizing-font.md">Custom Font Styles</a> in the family is selected as the font for the text.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section3892191911214"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<a name="table836435619510"></a>
<table><thead align="left"><tr id="row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="a426b8903842d48fa8012a24ff3c997eb"><a name="a426b8903842d48fa8012a24ff3c997eb"></a><a name="a426b8903842d48fa8012a24ff3c997eb"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="a53448ba47e5e4ae9bf7774c90820e970"><a name="a53448ba47e5e4ae9bf7774c90820e970"></a><a name="a53448ba47e5e4ae9bf7774c90820e970"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="add489ff50c444f24b759162c7f4bad9a"><a name="add489ff50c444f24b759162c7f4bad9a"></a><a name="add489ff50c444f24b759162c7f4bad9a"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row166321742154511"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="p169871843194513"><a name="p169871843194513"></a><a name="p169871843194513"></a>change</p>
</td>
<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="p19988164384513"><a name="p19988164384513"></a><a name="p19988164384513"></a>{newValue: newValue}</p>
</td>
<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="p298824384514"><a name="p298824384514"></a><a name="p298824384514"></a>Triggered after a value is selected from the drop-down list. The value of <strong id="b91604451525"><a name="b91604451525"></a><a name="b91604451525"></a>newValue</strong> is the attribute value of the child component <strong id="b716613458211"><a name="b716613458211"></a><a name="b716613458211"></a>option</strong>.</p>
</td>
</tr>
</tbody>
</table>
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>- The **<select\>** component does not support the **click** event.
## Method<a name="section2279124532420"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example Code<a name="section18261242145416"></a>
# select
```
The **<select\>** component provides a drop-down list that allows users to select among multiple options.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
The **<[option](js-components-basic-option.md)\>** child component is supported.
## Attributes
The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
## Ad Asset
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Mandatory| Description |
| ----------- | ------ | ---- | ------------------------------------------------------------ |
| font-family | string | No | Font family, in which fonts are separated by commas (,). The first font in the family or the specified [custom font](./js-components-common-customizing-font.md) is used for the text.<br>Default value: **sans-serif**|
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| ------ | ------------------------- | ------------------------------------------------------------ |
| change | {newValue:&nbsp;newValue} | Triggered when an option is selected from the drop-down list to return an object. The value of **newValue** is the value of the selected option.|
> **NOTE**
>
> The **\<select>** component does not support the **click** event.
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example
```html
<!-- xxx.hml -->
<div class="container">
<select @change="changeFruit">
......@@ -94,7 +63,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
......@@ -103,5 +72,13 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
}
```
![](figures/en-us_image_0000001152588538.png)
```js
// ×××.js
export default {
changeFruit(e){
console.log("newValue:" + e.newValue)
}
}
```
![en-us_image_0000001152588538](figures/en-us_image_0000001152588538.png)
# Custom Events<a name="EN-US_TOPIC_0000001127284896"></a>
# Custom Events
The following example describes how to define a child component **comp**:
The following example describes how to define a child component **comp**:
```
```html
<!-- comp.hml -->
<div class="item">
<text class="text-style" onclick="childClicked">Click here to view the hidden text.</text>
<text class="text-style" onclick="childClicked">Click here to view the hidden text.</text>
<text class="text-style" if="{{showObj}}">hello world</text>
</div>
```
```
```css
/* comp.css */
.item {
width: 700px;
......@@ -26,7 +28,8 @@ The following example describes how to define a child component **comp**:
}
```
```
```js
// comp.js
export default {
data: {
......@@ -39,9 +42,11 @@ export default {
}
```
The following example describes how to introduce the child component:
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
......@@ -49,7 +54,8 @@ The following example describes how to introduce the child component:
</div>
```
```
```css
/* xxx.css */
.container {
background-color: #f8f8ff;
......@@ -59,10 +65,12 @@ The following example describes how to introduce the child component:
}
```
```
```js
// xxx.js
export default {
textClicked () {},
}
```
For more information, see [Basic Usage](./js-components-custom-basic-usage.md).
# Implementing Page Redirection and Data Transmission
This section describes how to implement page redirection and data transmission between pages:
1. Page redirection: Click a food item on the food list page to go to the food details page. Click the back button on the food details page to go back to the food list page.
2. Data transmission between pages: After you click a food item, FoodDetail receives data from the previous page and renders the corresponding food details page.
2. Data transmission between pages: After you click a food item, **FoodDetail** receives data from the previous page and renders the corresponding food details page.
## Page Redirection
The declarative UI paradigm provides two mechanisms for page redirection:
1. Navigator: encapsulates the page routing capability. After the page target is specified, all child components in the page target have the routing capability.
1. **Navigator**: encapsulates the page routing capability. After the page target is specified, all child components in the page target have the routing capability.
2. Router APIs: called to implement various operations of page routing. You'll need to import router before calling the router APIs.
2. Router APIs: called to implement various operations of page routing. You'll need to import **router** before calling the router APIs.
The procedure below uses these two mechanisms for redirection between the page list page and food details page.
1. Click FoodListItem. The FoodDetail page is displayed. Create a Navigator component in FoodListItem to enable its child components to have the routing function. The target page is 'pages/FoodDetail'.
1. Click **FoodListItem**. The **FoodDetail** page is displayed. Create a **Navigator** component in **FoodListItem** to enable its child components to have the routing function. The target page is **'pages/FoodDetail'**.
```ts
@Component
struct FoodListItem {
......@@ -49,8 +47,7 @@ The procedure below uses these two mechanisms for redirection between the page l
![en-us_image_0000001223127744](figures/en-us_image_0000001223127744.gif)
2. Click FoodGridItem. The FoodDetail page is displayed. Import the router module, and then call the push API of this module to push the FoodDetail page to the route stack to implement page redirection.
2. Click **FoodGridItem**. The **FoodDetail** page is displayed. Import the **router** module, and then call the **push** API of this module to push the **FoodDetail** page to the route stack to implement page redirection.
```ts
import router from '@ohos.router'
......@@ -72,8 +69,7 @@ The procedure below uses these two mechanisms for redirection between the page l
![en-us_image_0000001267607909](figures/en-us_image_0000001267607909.gif)
3. Add the icon for returning from the FoodDetail page to the food list page. Save the Back.png file to the resources > base > media directory. Create a custom component PageTitle, which contains the back icon and Food Detail text. Call the router.back() API of the router to display the top page of the route stack, that is, the upper-level page.
3. Add the icon for returning from the **FoodDetail** page to the food list page. Save the **Back.png** file to the **resources** > **base** > **media** directory. Create a custom component **PageTitle**, which contains the back icon and Food Detail text. Call the **router.back()** API of the router to display the top page of the route stack, that is, the upper-level page.
```ts
// FoodDetail.ets
import router from '@ohos.router'
......@@ -99,8 +95,7 @@ The procedure below uses these two mechanisms for redirection between the page l
}
```
4. Create the Stack component in the FoodDetail component, including the FoodImageDisplay and PageTitle child components. Set the alignment mode to TopStart.
4. Create the Stack component in the **FoodDetail** component, including the **FoodImageDisplay** and **PageTitle** child components. Set the alignment mode to **TopStart**.
```ts
@Entry
@Component
......@@ -123,10 +118,9 @@ The procedure below uses these two mechanisms for redirection between the page l
## Data Transmission Between Pages
We have implemented the redirection and going back of the FoodCategoryList and FoodDetail pages. At this point, the tomato details page is displayed no matter which FoodListItem/FoodGridItem is clicked. This is because the data transmission between pages is not yet configured. To configure data transmission between pages, set the routing with parameters as follows:
1. Set the params attribute in the Navigator of the FoodListItem component. The params attribute accepts the key-value object.
We have implemented the redirection and going back of the **FoodCategoryList** and **FoodDetail** pages. At this point, the tomato details page is displayed no matter which **FoodListItem**/**FoodGridItem** is clicked. This is because the data transmission between pages is not yet configured. To configure data transmission between pages, set the routing with parameters as follows:
1. Set the **params** attribute, which accepts the key-value object, in the **Navigator** of the **FoodListItem** component.
```ts
// FoodList.ets
@Component
......@@ -141,8 +135,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
}
```
The router API called by FoodGridItem also has the capability of redirection with parameters. The method of using the router API is similar to that of using the Navigator.
The router API called by **FoodGridItem** also has supports redirection with parameters. The method of using the router API is similar to that of using the **Navigator**.
```ts
router.push({
......@@ -151,8 +144,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
})
```
2. Import the FoodData class to the FoodDetail page and add the foodItem member variable to the FoodDetail component.
2. Import the **FoodData** class to the **FoodDetail** page and add the **foodItem** member variable to the **FoodDetail** component.
```ts
// FoodDetail.ets
import { FoodData } from '../model/FoodData'
......@@ -167,13 +159,12 @@ We have implemented the redirection and going back of the FoodCategoryList and F
}
```
3. Obtain the value of foodData. Call router.getParams().foodData to obtain the data corresponding to foodData carried when the FoodCategoryList page is displayed.
3. Obtain the value of **foodData**. Call **router.getParams()['foodData']** to obtain the data corresponding to **foodData** carried when the **FoodCategoryList** page is displayed.
```ts
@Entry
@Component
struct FoodDetail {
private foodItem: FoodData = router.getParams().foodData
private foodItem: FoodData = router.getParams()['foodData']
build() {
......
......@@ -181,8 +172,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
}
```
4. Re-build the components on the FoodDetail page. During building, the food information on the FoodDetail page is all directly declared constants. You need to use the passed FoodData data to assign a new value to the constants. The code is as follows:
4. Re-build the components on the **FoodDetail** page. During building, the food information on the **FoodDetail** page is all directly declared constants. You need to use the passed **FoodData** data to assign a new value to the constants. The sample code is as follows:
```ts
@Component
struct PageTitle {
......@@ -258,7 +248,7 @@ We have implemented the redirection and going back of the FoodCategoryList and F
@Entry
@Component
struct FoodDetail {
private foodItem: FoodData = router.getParams().foodData
private foodItem: FoodData = router.getParams()['foodData']
build() {
Column() {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册