آموزش منوی کشویی در برنامه نویسی انگولار

4 سال پیش

امتیاز دهید post

آموزش منوی کشویی در برنامه نویسی انگولار

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش منوی کشویی در برنامه نویسی انگولار خواهیم پرداخت.

برای کار با منوی کشویی در رابط کاربری گوشه ای تلفن همراه ، باید از منوی class .dropdown استفاده کنید.

در اینجا مثالی آورده شده است که منوی کشویی را نمایش می دهد.

ما تغییرات را در src / home / home.html اضافه خواهیم کرد.

&lt;div class="list-group text-center"&gt;
   &lt;div class="list-group-item list-group-item-home"&gt;
      &lt;h1&gt;{{msg}}&lt;/h1&gt;
   &lt;/div&gt;
   &lt;div class="list-group-item list-group-item-home"&gt;
      &lt;div class="btn-group"&gt;
         &lt;a ui-turn-on='testDropdown' class='btn'&gt;
            &lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;Tutorials
         &lt;/a&gt;
         &lt;ul
            class="dropdown-menu"
            ui-outer-click="Ui.turnOff('testDropdown')"
            ui-outer-click-if="Ui.active('testDropdown')"
            role="menu"
            ui-show="testDropdown"
            ui-state="testDropdown"
            ui-turn-off="testDropdown"&gt;
            &lt;li&gt;&lt;a&gt;PHP&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;JAVA&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;MYSQL&lt;/a&gt;&lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;PYTHON&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

</div>

<i class="fa fa-caret-down" aria-hidden="true"></i>Tutorials

</a>

<ul

class="dropdown-menu"

ui-outer-click="Ui.turnOff('testDropdown')"

ui-outer-click-if="Ui.active('testDropdown')"

role="menu"

ui-show="testDropdown"

ui-state="testDropdown"

ui-turn-off="testDropdown">

<li><a>MYSQL</a></li>

<li><a>PYTHON</a></li>

</ul>

</div>

ما لیستی از آموزشها را در لیست کشویی نشان داده ایم. خروجی روی صفحه به شرح زیر است –

Dropdown

منبع.

لیست جلسات قبل آموزش برنامه نویسی انگولار

امتیاز دهید post

برچسب ها : آموزش انگولار آموزش برنامه نویسی موبایل

نویسنده مطلب saber

آموزش منوی کشویی در برنامه نویسی انگولار

آموزش منوی کشویی در برنامه نویسی انگولار

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

بدون دیدگاه

آموزش منوی کشویی در برنامه نویسی انگولار

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه