图标导航／Iconnav

创建由图标组成的导航。

用法

要应用此组件，请将 .uk-iconnav class添加到 <ul> 元素。将 <a> 元素用作列表中的菜单单元，并从 Icon 组件添加需要的图标。要将活动状态应用于菜单项，只需添加 .uk-active class。

<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>

垂直对齐

默认情况下，图标导航内的菜单单元是水平对齐的。要改为垂直对齐方式，请添加 .uk-iconnav-vertical class。

<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>

上一篇： Icon

下一篇： Image

iconnav.md

# 图标导航／Iconnav

<p class="uk-text-lead">创建由图标组成的导航。</p>

## Usage-用法

要应用此组件，请将 `.uk-iconnav` class添加到 `<ul>`  元素。将 `<a>` 元素用作列表中的菜单单元，并从 [Icon 组件](icon.md)添加需要的图标。要将活动状态应用于菜单项，只需添加 `.uk-active` class。

```html
<ul class="uk-iconnav">
    <li><a href="" uk-icon="icon: check"></a></li>
</ul>
```

```example
<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>
```

***

## Vertical alignment-垂直对齐

默认情况下，图标导航内的菜单单元是水平对齐的。要改为垂直对齐方式，请添加 `.uk-iconnav-vertical` class。

```html
<ul class="uk-iconnav uk-iconnav-vertical">...</ul>
```

```example
<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>
```