1# toolbar开发指导
2
3
4toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。具体用法请参考[toolbar](../reference/apis-arkui/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```html
83<!-- xxx.hml -->
84<div class="container">
85  <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
86    <toolbar-item value="item1" icon="common/images/1.png" class="toolbarActive"></toolbar-item>
87    <toolbar-item value="item2" icon="common/images/2.png"></toolbar-item>
88    <toolbar-item value="item3" icon="common/images/1.png"></toolbar-item>
89    <toolbar-item value="item4" icon="common/images/2.png"></toolbar-item>
90  </toolbar>
91</div>
92```
93
94
95
96```css
97/* xxx.css */
98.container {
99  background-color: #F1F3F5;
100  flex-direction: column;
101  width: 100%;
102  height: 100%;
103  justify-content: center;
104  align-items: center;
105}
106toolbar-item{
107  font-size: 35px;
108}
109```
110
111
112![zh-cn_image_0000001218279254](figures/zh-cn_image_0000001218279254.png)
113
114
115## 绑定事件
116
117分别给toolbar-item绑定单击事件和长按事件，单击后文本变红，长按时文本变蓝。
118
119
120```html
121<!-- xxx.hml -->
122<div class="container">
123  <toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;">
124    <toolbar-item value="item1" icon="common/images/1.png" style="color: {{itemColor}};" onclick="itemClick"></toolbar-item>
125    <toolbar-item value="item2" icon="common/images/2.png"  style="color: {{itemColor}}"></toolbar-item>
126    <toolbar-item value="item3" icon="common/images/3.png"  style="color: {{itemColor}}" onlongpress="itemLongPress"></toolbar-item>
127  </toolbar>
128</div>
129```
130
131
132```css
133/* xxx.css */
134.container {
135  background-color: #F1F3F5;
136  flex-direction: column;
137  width: 100%;
138  height: 100%;
139  justify-content: center;
140  align-items: center;
141}
142toolbar-item{
143  font-size: 35px;
144}
145```
146
147
148```js
149// xxx.js
150import promptAction from '@ohos.promptAction';
151export default {
152  data:{
153    itemColor:'black'
154  },
155  itemClick(){
156    this.itemColor= "red";
157    promptAction.showToast({duration:2000,message:'item click'});
158  },
159  itemLongPress(){
160    promptAction.showToast({duration:2000,message:'item long press'});
161    this.itemColor= "blue";
162  },
163}
164```
165
166![zh-cn_image_0000001218439306](figures/zh-cn_image_0000001218439306.gif)
167
168> **说明：**
169>
170> toolbar组件不支持添加事件和方法，但其子组件toolbar-item支持。
171
172
173## 场景示例
174
175本场景中开发者可点击toolbar-item组件，改变当前组件文本颜色并更换相对应的图片内容。
176
177  使用for循环创建toolbar-item组件并添加点击事件，点击后获得索引值进行存储。设置文本颜色时，判断当前索引值是否为储存的值，若相同则设置为红色，不同则使用默认颜色。
178
179```html
180<!-- xxx.hml -->
181<div class="container">
182  <image src="{{imgList[active]}}"></image>
183  <toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
184    <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>
185    </toolbar>
186</div>
187```
188
189
190```css
191/* xxx.css */
192.container {
193  background-color: #F1F3F5;
194  flex-direction: column;
195  width: 100%;
196  justify-content: center;
197  align-items: center;
198}
199toolbar-item{
200  font-size: 35px;
201}
202```
203
204
205```js
206// xxx.js
207export default {
208  data:{
209    active: 0,
210    imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"],
211    itemList:[
212      {option:'item1',icon:'common/images/1.png'},
213      {option:'item2',icon:'common/images/2.png'},
214      {option:'item3',icon:'common/images/3.png'},
215      {option:'item4',icon:'common/images/4.png'},
216    ]
217  },
218  itemClick(id){
219    this.active= id;
220  },
221}
222```
223
224![zh-cn_image_0000001263279105](figures/zh-cn_image_0000001263279105.gif)