Question

我是离子的新手。我正在使用离子框架将现有的角度应用程序转换为移动应用程序但是，我无法为此添加侧边菜单。我怎么做。这是我的代码：

<div class="wrap">
    <div class="header">
        <div class="pull-right">
            <a href="#" class="handle"><i class="fa fa-bars">
                </i></a>
        </div>

        <div class="text-center">
            <h1>SKY</h1>
        </div>


    </div>
    <div class="items-list">
        <div class="item">
            <div class="clearfix">
                <div class="item-thumb-container">
                    <img src="images/item-1.jpg" class="item-thumb img-responsive">
                </div>
                <div class="item-details-container">
                    <h2 class="item-title">Item Name</h2>
                    <div class="item-description">
                        <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
                    </div>
                    <div class="item-meta">
                        <a href="#" ui-sref="single" class="item-btn">See</A>
                        <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
                        <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="item item-img-right">
            <a href="#" ui-sref="single">
                <div class="clearfix">
                    <div class="item-details-container">
                        <h2 class="item-title">Item Name</h2>
                        <div class="item-description">
                            <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
                        </div>
                        <div class="item-meta">
                            <span class="item-btn">See</span>
                            <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
                            <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
                        </div>
                    </div>
                    <div class="item-thumb-container">
                        <img src="images/item-1.jpg" class="item-thumb img-responsive">
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="#" ui-sref="single">
                <div class="clearfix">
                    <div class="item-thumb-container">
                        <img src="images/item-1.jpg" class="item-thumb img-responsive">
                    </div>
                    <div class="item-details-container">
                        <h2 class="item-title">Item Name</h2>
                        <div class="item-description">
                            <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
                        </div>
                        <div class="item-meta">
                            <span class="item-btn">See</span>
                            <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
                            <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

我想在点击右边的按钮时显示侧边菜单。我尝试添加<ion-sidemenus>，但它会显示外部的菜单列表项。

Answer 1

Ionic称这个MenuToggle可以通过一行代码轻松实现

<button ion-button menuToggle>Toggle Menu</button>

详细了解官方文档中的MenuToggle。

在离子框架中添加侧菜单

1 个答案: