首页 › Angular论坛 › Angular第三方UI组件库------ionic

冯志国 發表於 2020-2-11 23:12:00

Angular第三方UI组件库------ionic

<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">一、Angular&nbsp; UI组件库&nbsp; ------------ionic</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">1、 官网：https://ionicframework.com</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 文档：https://ionicframework.com/docs</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 概述：是一个移动端UI组件库，可以与Angular/Vue/React组合应用，也可以单独使用(SCRIPT直接引入)</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 可以使用lonic的步骤：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 1.下载并安装全局的脚手架工具</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 0, 0, 1)">npm&nbsp; &nbsp; &nbsp;i&nbsp; &nbsp; &nbsp;-g&nbsp; &nbsp; ionic</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;默认安装在c:/users/用户名/appdata/roaming/npm</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 2.运行脚手架工具，创建一个空白项目</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 0, 0, 1)"> ionic&nbsp; &nbsp; start&nbsp; &nbsp;项目名</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px"><span style="color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ionic&nbsp; &nbsp; start&nbsp; &nbsp;项目名&nbsp; &nbsp;blank/tabs/sidemenu</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 3.进入空白项目，启动开发服务器</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 0, 0, 1)"> npm&nbsp; &nbsp; start</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp;4.使用客户端访问测试</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">2、lonic的九种主题色：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;primary:&nbsp; &nbsp; &nbsp; 蓝+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;secondary:&nbsp; 青+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;tertiary:&nbsp; &nbsp; &nbsp; &nbsp;紫+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;success:&nbsp; &nbsp; &nbsp; 绿+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;warning:&nbsp; &nbsp; &nbsp;黄+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;danger:&nbsp; &nbsp; &nbsp; &nbsp;红+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;danrk:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;黑+白色</span></p>
<p><span style="font-size: 18px">&nbsp; &nbsp; &nbsp;<span style="font-family: &quot;Microsoft YaHei&quot;">medium:&nbsp; &nbsp; &nbsp; &nbsp;灰+白色</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;light:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;白 + 黑色</span></p>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">3、lonic组件在IOS和Android的效果不一样的：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp;ios风格：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp;md风格：Google提供的Meterial Design风格</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">二者标题栏不同、弹出框不同、按钮不同、图片显示效果不同.....</span></p>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">4、lonic移动App页面结构：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &lt;ion-app&gt;&nbsp; &nbsp; 保证始终铺满全屏的容器</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-header&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-title&gt;标题字&lt;/ion-title&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-header&gt;</span></p>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-content padding&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-content&gt;</span></p>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-footer&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-title&gt;标题字&lt;/ion-title&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-footer&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &lt;/ion-app&gt;&nbsp; &nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">5、lonic中的响应式网格布局系统</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">手册地址：https://ionicframework.com/docs/layout/grid</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">lonic提供了一套类似于Bootstrap的响应式栅格布局系统</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&lt;ion-grid&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-row&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-col&gt;内容&lt;/ion-col&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-row&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&lt;/ion-grid&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(0, 0, 0, 1)">这套布局系统的特点：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(0, 0, 0, 1)">1.列可以不指定宽度占比，在一行中的多个列的宽度会平均分配，一行中列的数量取决于屏幕的</span><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">宽度。</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">2.可以使用size属性指定一列的宽度占比-----总分为12；6就是6/12,4就是4/12。</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">3.可以使用<span style="color: rgba(255, 0, 0, 1)">offset(偏移量)</span>属性指定一列向右偏移指定的宽度-----底层</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">是用margin-left实现的，故会影响当前列及后续的列。</span></p>
<p><span style="font-size: 18px"><span style="font-family: &quot;Microsoft YaHei&quot;">4.可以使用<span style="color: rgba(255, 0, 0, 1)">push(向右推)</span>和<span style="color: rgba(255, 0, 0, 1)">pull(向左拉)</span>属性调整一列</span><span style="font-family: &quot;Microsoft YaHei&quot;">的出现位置-----底层是用绝对定位</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">实现的，故不会影响同一行的其他列。</span></p>
<p>&nbsp;</p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">6.Ionic中常用的UI组件</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp;手册地址：https://ionicframework.com/docs/components</span></p>
<p><span style="font-size: 18px">&nbsp; &nbsp; <strong><span style="font-family: &quot;Microsoft YaHei&quot;">1.Badge：徽章</span></strong></span></p>
<p><span style="font-size: 18px"><span style="font-family: &quot;Microsoft YaHei&quot;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 0, 0, 1)">&lt;ion-badge&nbsp; color="九种主题色之一"&gt;23&lt;/ion-badge&gt;</span></span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; <strong>&nbsp; 2.Icon：图标</strong></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-icon name="图标名称" color="主题色"&gt;&lt;/ion-icon&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">练习：查找下列图标对应的name属性：首页(home)、配置(settings)、</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">购物车(cart)、用户(person)、星星(star)、心形(heart)、定位(pin)、</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">邮件(mail)、拍照(camera)、扫码(qr-scanner)、指纹(finger-print)、</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">后退(arrow-back)、前进(arrow-forward)、刷新(refresh)</span></p>
<p>&nbsp;</p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">课后任务：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">(1)继续自学lonic常用组件:Button、Input、SearchBar、Card、Toolbar、Slides</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">(2)使用上述组件完成“lonic阶段项目”首页组件中的内容。</span></p>
<p>&nbsp;</p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">Angular第三方UI组件库(github搜“awesome angular ")-----lonic</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">概述：是一个第三方的适用于移动端App的UI组件库，可以与Angular/React/Vue.js组合，也可以独立使用。</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;"><span style="font-size: 18px">九种主题色：primary、secondary、tertiary、danger、warning、success、dark、medium、light</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">2、页面结构：&lt;ion-app&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-header&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-title&gt;&lt;/ion-title&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ion-header&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-content&gt;&lt;/ion-content&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-footer&gt;&lt;/ion-footer&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-app&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">3、布局系统：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-grid&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-row&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-col&nbsp; size="6" offse="" push=""&nbsp; &nbsp; pull=""&gt;&lt;/ion-col&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ion-row&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-grid&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;"><span style="font-size: 18px">4、徽章：</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;"><span style="font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-badge color=""&gt;&lt;/ion-badge&gt;</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">5、图标：&lt;ion-icon name="home"&gt;&lt;/ion-icon&gt;</span></p>
<p>&nbsp;</p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">一、Angular&nbsp; UI组件库&nbsp; ------------ionic</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">1、 官网：https://ionicframework.com</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 文档：https://ionicframework.com/docs</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 概述：是一个移动端UI组件库，可以与Angular/Vue/React组合应用，也可以单独使用(SCRIPT直接引入)</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 可以使用lonic的步骤：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 1.下载并安装全局的脚手架工具</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 0, 0, 1)">npm&nbsp; &nbsp; &nbsp;i&nbsp; &nbsp; &nbsp;-g&nbsp; &nbsp; ionic</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;默认安装在c:/users/用户名/appdata/roaming/npm</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 2.运行脚手架工具，创建一个空白项目</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 0, 0, 1)">&nbsp;ionic&nbsp; &nbsp; start&nbsp; &nbsp;项目名</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px"><span style="color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ionic&nbsp; &nbsp; start&nbsp; &nbsp;项目名&nbsp; &nbsp;blank/tabs/sidemenu</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; 3.进入空白项目，启动开发服务器</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 0, 0, 1)">&nbsp;npm&nbsp; &nbsp; start</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp;4.使用客户端访问测试</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">2、lonic的九种主题色：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;primary:&nbsp; &nbsp; &nbsp; 蓝+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;secondary:&nbsp; 青+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;tertiary:&nbsp; &nbsp; &nbsp; &nbsp;紫+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;success:&nbsp; &nbsp; &nbsp; 绿+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;warning:&nbsp; &nbsp; &nbsp;黄+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;danger:&nbsp; &nbsp; &nbsp; &nbsp;红+白色</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;danrk:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;黑+白色</span></p>
<p><span style="font-size: 18px">&nbsp; &nbsp; &nbsp;<span style="font-family: &quot;Microsoft YaHei&quot;">medium:&nbsp; &nbsp; &nbsp; &nbsp;灰+白色</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp;light:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;白 + 黑色</span></p>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">3、lonic组件在IOS和Android的效果不一样的：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp;ios风格：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp;md风格：Google提供的Meterial Design风格</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">二者标题栏不同、弹出框不同、按钮不同、图片显示效果不同.....</span></p>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">4、lonic移动App页面结构：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &lt;ion-app&gt;&nbsp; &nbsp; 保证始终铺满全屏的容器</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-header&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-title&gt;标题字&lt;/ion-title&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-header&gt;</span></p>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-content padding&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-content&gt;</span></p>
<p><span style="font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-footer&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-title&gt;标题字&lt;/ion-title&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-toolbar&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/ion-footer&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp; &nbsp; &lt;/ion-app&gt;&nbsp; &nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">5、lonic中的响应式网格布局系统</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">手册地址：https://ionicframework.com/docs/layout/grid</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">lonic提供了一套类似于Bootstrap的响应式栅格布局系统</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&lt;ion-grid&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-row&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-col&gt;内容&lt;/ion-col&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &lt;ion-row&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&lt;/ion-grid&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(0, 0, 0, 1)">这套布局系统的特点：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(0, 0, 0, 1)">1.列可以不指定宽度占比，在一行中的多个列的宽度会平均分配，一行中列的数量取决于屏幕的</span><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">宽度。</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">2.可以使用size属性指定一列的宽度占比-----总分为12；6就是6/12,4就是4/12。</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">3.可以使用<span style="color: rgba(255, 0, 0, 1)">offset(偏移量)</span>属性指定一列向右偏移指定的宽度-----底层</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">是用margin-left实现的，故会影响当前列及后续的列。</span></p>
<p><span style="font-size: 18px"><span style="font-family: &quot;Microsoft YaHei&quot;">4.可以使用<span style="color: rgba(255, 0, 0, 1)">push(向右推)</span>和<span style="color: rgba(255, 0, 0, 1)">pull(向左拉)</span>属性调整一列</span><span style="font-family: &quot;Microsoft YaHei&quot;">的出现位置-----底层是用绝对定位</span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">实现的，故不会影响同一行的其他列。</span></p>
<p>&nbsp;</p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">6.Ionic中常用的UI组件</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp; &nbsp;手册地址：https://ionicframework.com/docs/components</span></p>
<p><span style="font-size: 18px">&nbsp; &nbsp;&nbsp;<strong><span style="font-family: &quot;Microsoft YaHei&quot;">1.Badge：徽章</span></strong></span></p>
<p><span style="font-size: 18px"><span style="font-family: &quot;Microsoft YaHei&quot;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: rgba(255, 0, 0, 1)">&lt;ion-badge&nbsp; color="九种主题色之一"&gt;23&lt;/ion-badge&gt;</span></span></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">&nbsp;&nbsp;<strong>&nbsp; 2.Icon：图标</strong></span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px; color: rgba(255, 0, 0, 1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;ion-icon name="图标名称" color="主题色"&gt;&lt;/ion-icon&gt;</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">练习：查找下列图标对应的name属性：首页(home)、配置(settings)、</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">购物车(cart)、用户(person)、星星(star)、心形(heart)、定位(pin)、</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">邮件(mail)、拍照(camera)、扫码(qr-scanner)、指纹(finger-print)、</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">后退(arrow-back)、前进(arrow-forward)、刷新(refresh)</span></p>
<p>&nbsp;</p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">课后任务：</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">(1)继续自学lonic常用组件:Button、Input、SearchBar、Card、Toolbar、Slides</span></p>
<p><span style="font-family: &quot;Microsoft YaHei&quot;; font-size: 18px">(2)使用上述组件完成“lonic阶段项目”首页组件中的内容。</span></p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/sna-ling/p/12297355.html

查看完整版本: Angular第三方UI组件库------ionic