fengxiang
2018-07-12 5c0d8040266554b67e852ccb7056c3d0cae4b4ef
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="content__title">
    <h1>
        Dropdown Animations
        <small>Extends the dropdown effects when open just adding an animation class</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Basic">
            <nz-dropdown class="mr-sm">
                <a class="ant-dropdown-link" nz-dropdown>
                    Hover me <i class="anticon anticon-down"></i>
                </a>
                <ul nz-menu>
                    <li nz-menu-item>1st menu item</li>
                    <li nz-menu-item>2st menu item</li>
                    <li nz-menu-divider></li>
                    <li nz-menu-item [nzDisable]="true">3st menu item</li>
                    <li nz-menu-divider></li>
                    <li nz-submenu>
                        <span title>sub menu</span>
                        <ul>
                            <li nz-menu-item>1rd menu item</li>
                            <li nz-menu-item>2th menu item</li>
                        </ul>
                    </li>
                </ul>
            </nz-dropdown>
            <nz-dropdown-button>
                DropDown Button
                <ul nz-menu>
                    <li nz-menu-item>1st menu item</li>
                    <li nz-menu-item>2st menu item</li>
                </ul>
            </nz-dropdown-button>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="6" *ngFor="let name of ants">
        <div class="ant-box">
            <nz-dropdown [nzTrigger]="'click'">
                <a class="ant-dropdown-link" nz-dropdown>
                    {{name}} <i class="anticon anticon-down"></i>
                </a>
                <ul nz-menu class="animated {{name}}">
                    <li nz-menu-item>1st menu item</li>
                    <li nz-menu-item>2st menu item</li>
                </ul>
            </nz-dropdown>
        </div>
    </div>
</div>