• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# toolbar开发指导
2
3
4toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。具体用法请参考[toolbar](../reference/arkui-js/js-components-basic-toolbar.md)。
5
6
7## 创建toolbar组件
8
9在pages/index目录下的hml文件中创建一个toolbar组件。
10
11
12```html
13<!-- xxx.hml -->
14<div class="container">
15  <toolbar style="background-color: #F1F3F5;">
16    <toolbar-item value="item1"></toolbar-item>
17    <toolbar-item value="item2"></toolbar-item>
18  </toolbar>
19</div>
20```
21
22
23```css
24/* xxx.css */
25.container {
26  width: 100%;
27  height: 100%;
28  flex-direction: column;
29  justify-content: center;
30  align-items: center;
31  background-color: #F1F3F5;
32}
33toolbar-item{
34  font-size: 35px;
35}
36```
37
38![zh-cn_image_0000001175668970](figures/zh-cn_image_0000001175668970.gif)
39
40
41## 添加子组件
42
43  toolbar组件仅支持toolbar-item为子组件，页面最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item，则保留前面4个，后续的将收纳到工具栏上的更多项中，通过点击更多项弹窗进行展示。并且更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。
44
45```html
46<!-- xxx.hml -->
47<div class="container">
48  <toolbar>
49    <toolbar-item value="item1"></toolbar-item>
50    <toolbar-item value="item2"></toolbar-item>
51    <toolbar-item value="item3"></toolbar-item>
52    <toolbar-item value="item4"></toolbar-item>
53    <toolbar-item value="item5"></toolbar-item>
54    <toolbar-item value="item6"></toolbar-item>
55  </toolbar>
56</div>
57```
58
59
60```css
61/* xxx.css */
62.container {
63  width: 100%;
64  height: 100%;
65  flex-direction: column;
66  justify-content: center;
67  align-items: center;
68  background-color: #F1F3F5;
69}
70toolbar-item{
71  font-size: 35px;
72}
73```
74
75![zh-cn_image_0000001175828962](figures/zh-cn_image_0000001175828962.gif)
76
77
78## 设置样式
79
80设置position样式控制toolbar组件的位置，并设置子组件toolbar-item的字体颜色、大小及背景色。
81
82
83
84```html
85<!-- xxx.hml -->
86<div class="container">
87  <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
88    <toolbar-item value="item1" icon="common/images/1.png" class="toolbarActive"></toolbar-item>
89    <toolbar-item value="item2" icon="common/images/2.png"></toolbar-item>
90    <toolbar-item value="item3" icon="common/images/1.png"></toolbar-item>
91    <toolbar-item value="item4" icon="common/images/2.png"></toolbar-item>
92  </toolbar>
93</div>
94```
95
96
97
98```css
99/* xxx.css */
100.container {
101  background-color: #F1F3F5;
102  flex-direction: column;
103  width: 100%;
104  height: 100%;
105  justify-content: center;
106  align-items: center;
107}
108toolbar-item{
109  font-size: 35px;
110}
111```
112
113
114![zh-cn_image_0000001218279254](figures/zh-cn_image_0000001218279254.png)
115
116
117## 绑定事件
118
119分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。
120
121
122```html
123<!-- xxx.hml -->
124<div class="container">
125  <toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;">
126    <toolbar-item value="item1" icon="common/images/1.png" style="color: {{itemColor}};" onclick="itemClick"></toolbar-item>
127    <toolbar-item value="item2" icon="common/images/2.png"  style="color: {{itemColor}}"></toolbar-item>
128    <toolbar-item value="item3" icon="common/images/3.png"  style="color: {{itemColor}}" onlongpress="itemLongPress"></toolbar-item>
129  </toolbar>
130</div>
131```
132
133
134```css
135/* xxx.css */
136.container {
137  background-color: #F1F3F5;
138  flex-direction: column;
139  width: 100%;
140  height: 100%;
141  justify-content: center;
142  align-items: center;
143}
144toolbar-item{
145  font-size: 35px;
146}
147```
148
149
150```js
151// xxx.js
152import promptAction from '@ohos.promptAction';
153export default {
154  data:{
155    itemColor:'black'
156  },
157  itemClick(){
158    this.itemColor= "red";
159    promptAction.showToast({duration:2000,message:'item click'});
160  },
161  itemLongPress(){
162    promptAction.showToast({duration:2000,message:'item long press'});
163    this.itemColor= "blue";
164  },
165}
166```
167
168![zh-cn_image_0000001218439306](figures/zh-cn_image_0000001218439306.gif)
169
170> **说明：**
171> toolbar组件不支持添加事件和方法，但其子组件toolbar-item支持。
172
173
174## 场景示例
175
176本场景中开发者可点击toolbar-item组件，改变当前组件文本颜色并更换相对应的图片内容。
177
178  使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。
179
180```html
181<!-- xxx.hml -->
182<div class="container">
183  <image src="{{imgList[active]}}"></image>
184  <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
185    <toolbar-item value="{{ item.option}}" icon="{{item.icon}}" style="color: {{active == $idx?'red':'black'}};background-color: {{active== $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item>
186    </toolbar>
187</div>
188```
189
190
191```css
192/* xxx.css */
193.container {
194  background-color: #F1F3F5;
195  flex-direction: column;
196  width: 100%;
197  justify-content: center;
198  align-items: center;
199}
200toolbar-item{
201  font-size: 35px;
202}
203```
204
205
206```js
207// xxx.js
208export default {
209  data:{
210    active: 0,
211    imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"],
212    itemList:[
213      {option:'item1',icon:'common/images/1.png'},
214      {option:'item2',icon:'common/images/2.png'},
215      {option:'item3',icon:'common/images/3.png'},
216      {option:'item4',icon:'common/images/4.png'},
217    ]
218  },
219  itemClick(id){
220    this.active= id;
221  },
222}
223```
224
225![zh-cn_image_0000001263279105](figures/zh-cn_image_0000001263279105.gif)
226
227
228