Iconnav
创建由图标组成的导航。
用法
要应用该组件，为 <ul> 元素添加 .uk-iconnav 类。在列表中使用 <a> 元素作为菜单项，并从 Icon 组件 添加图标。要为菜单项应用激活状态，只需添加 .uk-active 类。
<ul class="uk-iconnav">
<li><a href="" uk-icon="icon: check"></a></li>
</ul><ul class="uk-iconnav">
<li><a href="#" uk-icon="icon: plus"></a></li>
<li><a href="#" uk-icon="icon: file-edit"></a></li>
<li><a href="#" uk-icon="icon: copy"></a></li>
<li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
</ul>
垂直对齐
默认情况下，iconnav 的各项水平排列。要应用垂直排列，添加 .uk-iconnav-vertical 类。
<ul class="uk-iconnav uk-iconnav-vertical">…</ul><ul class="uk-iconnav uk-iconnav-vertical">
<li><a href="#" uk-icon="icon: plus"></a></li>
<li><a href="#" uk-icon="icon: file-edit"></a></li>
<li><a href="#" uk-icon="icon: copy"></a></li>
<li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
</ul>可访问性
为 Iconnav 组件设置合适的 WAI-ARIA 角色、状态和属性。
- 为
<a>元素设置aria-label属性，以描述它们的含义。
<ul class="uk-iconnav">
<li><a href="" uk-icon="icon: check" aria-label="…"></a></li>
</ul>