Ionic Framework学习(一)

最新推荐文章于 2024-08-13 08:19:51 发布

Alan_TW

最新推荐文章于 2024-08-13 08:19:51 发布

阅读量1.8k

点赞数 3

分类专栏：前端文章标签： Ionic 前端框架

本文链接：https://blog.csdn.net/Alan_TW/article/details/88402699

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.安装
(1)安装nodejs
(2)新建文件夹，shift+右键，打开命令行：npm install -g ionic
(3)Start an App:ionic start myApp tabs
(4)运行cd myApp,ionic serve

2.Packages & CDN
(1)集成Angular：npm install @ionic/angular@latest --save
(2)Using Ionic from a CDN:在<head></head>间

<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
    <link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">

(3)ionicons的使用:放在页面末尾附近，</body>之前

 <script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>

3.环境配置
查看nodejs和npm版本

node --version
npm --version
git --version

4.iOS 设置
(1)XCode:Xcode是用于创建本机iOS应用程序的IDE。它包括iOS SDK和Xcode命令行工具。可以使用Apple帐户免费下载 Xcode 。它也可以通过App Store安装。
(2)ios-sim和ios-deploy:该ios-sim和ios-deploy是在开发过程中的应用程序部署到了iOS模拟器和iOS设备的实用程序。它们可以在全球范围内安装NPM。
npm install -g ios-sim
npm install -g ios-deploy

5.Android 设置
(1)Java:Native Android apps are compiled with the Java programming language(原生Android应用程序使用Java编译语言编译).
(2)Gradle:Android应用程序使用的构建工具。
(3)Android Studio:创建Android应用程序的IDE,
(4)安装Android SDK:打开Android Studio，在SDK Components Setup屏幕中，完成SDK的安装。
(5)创建Android虚拟设备(AVD):进入Tools » AVD Manager，单击 Create Virtual Device 并选择合适的设备定义。如果不确定，选择Pixel 2 XL。然后，选择合适的系统映像。

6.Building 构建
(1)ionic start myApp tabs(\sidemenu\blank)
   myApp是项目名，tabs是启动器模板
   tabs: A tabs based layout
   sidemenu: A sidemenu based layout
   blank: An empty project with a single page
(2)查看可用的模板
ionic start --list
(3)项目结构

(4)生成新功能：ionic generate，然后选择要生成的功能。选择完成后，Ionic CLI将提示输入名称。名称可以是路径，允许在有组织的项目结构中轻松生成功能。或者，可以在命令行上输入type和name生成的和：ionic g page "User Detail"。
tip:Could not find an NgModule. Use the skip-import option to skip importing in NgModule.解决方式：进入src结构下的app下进行操作。

7.Layout 布局
(1)结构体：
①页眉和页脚布局
头：

   <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Header</ion-title>
        </ion-toolbar>
      </ion-header>
      
      <ion-content padding>
        <h1>Main Content</h1>
      </ion-content>
    </ion-app>

页脚：

   <ion-app>
      <ion-content padding>
        <h1>Main Content</h1>
      </ion-content>    

      <ion-footer>
        <ion-toolbar>
          <ion-title>Footer</ion-title>
        </ion-toolbar>
      </ion-footer>
    </ion-app>

②标签布局

   <ion-app>
      <ion-tabs>
        <ion-tab tab="home">
          <h1>Home Content</h1>
        </ion-tab>
        <ion-tab tab="settings">
          <h1>Settings Content</h1>
        </ion-tab>

        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="home">
            <ion-label>Home</ion-label>
            <ion-icon name="home"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="settings">
            <ion-label>Settings</ion-label>
            <ion-icon name="settings"></ion-icon>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-app>

③菜单布局

<ion-app>
  <ion-menu>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-list-header>
          Navigate
        </ion-list-header>
        <ion-menu-toggle auto-hide="false">
          <ion-item button>
            <ion-icon slot="start" name='home'></ion-icon>
            <ion-label>
              Home
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-page class="ion-page" main>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-toggle>
            <ion-button>
              <ion-icon slot="icon-only" name="menu"></ion-icon>
            </ion-button>
          </ion-menu-toggle>
        </ion-buttons>
        <ion-title>Header</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <h1>Main Content</h1>
      <p>Click the icon in the top left to toggle the menu.</p>
    </ion-content>
  </ion-page>
</ion-app>

<ion-menu-controller></ion-menu-controller>

④拆分窗格布局

<ion-app>
  <ion-split-pane when="sm">
    <ion-menu>
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-list-header>
            Navigate
          </ion-list-header>
          <ion-menu-toggle auto-hide="false">
            <ion-item button>
              <ion-icon slot="start" name='home'></ion-icon>
              <ion-label>
                Home
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-page class="ion-page" main>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-menu-toggle>
              <ion-button>
                <ion-icon slot="icon-only" name="menu"></ion-icon>
              </ion-button>
            </ion-menu-toggle>
          </ion-buttons>
          <ion-title>Header</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content padding>
        <h1>Main Content</h1>
      </ion-content>
    </ion-page>

  </ion-split-pane>
</ion-app>

(2)响应式网格
①网格大小
默认情况下，网格将占用100％的宽度。要根据屏幕大小设置特定宽度，请添加fixed属性。每个断点的网格宽度在--ion-grid-width-{breakpoint}CSS变量中定义。

XS    100％    不要为xs屏幕设置网格宽度
SM    540px    设置网格宽度为540px时（最小宽度：576px）
MD    720px    （最小宽度：768px）时将网格宽度设置为720px
LG    960px    （最小宽度：992px）时将网格宽度设置为960px
XL    1140px    （最小宽度：1200px）时将网格宽度设置为1140px

②网格属性

属性           描述
no-padding     从网格和直接子列中删除填充。
fixed          根据屏幕大小设置最大宽度。

③默认断点

名称      值            宽度前缀    偏移前缀        推送前缀    拉前缀            描述
XS        0            size-        offset-    push-    pull-        （min-width：0）时设置列
SM        576px        size-sm-    offset-sm-        push-sm-    pull-sm-        设置列时（最小宽度：576px）
MD        768px        size-md-    offset-md-        push-md-    pull-md-        设置列时（最小宽度：768px）
LG        992px        size-lg-    offset-lg-        push-lg-    pull-lg-        设置列时（最小宽度：992px）
XL        1200px    size-xl-    offset-xl-        push-xl-    pull-xl-        设置列时（最小宽度：1200px）

(3)CSS实用工具
①文字对齐

.ion-text-left        text-align: left    内联内容与行框的左边缘对齐。
.ion-text-right        text-align: right    内联内容与行框的右边缘对齐。
.ion-text-start        text-align: start    一样text-left如果方向是左到右和text-right如果方向是从右到左。
.ion-text-end        text-align: end        一样text-right如果方向是左到右和text-left如果方向是从右到左。
.ion-text-center    text-align: center    内联内容在行框中居中。
.ion-text-justify    text-align: justify    内联内容是合理的。文本应该间隔开，以使其左右边缘与行框的左右边缘对齐，但最后一行除外。
.ion-text-wrap        white-space: normal    空白的序列被折叠。源中的换行符作为其他空格处理。根据需要打破行以填充行框。
.ion-text-nowrap    white-space: nowrap    折叠空白normal，但抑制文本中的换行符（文本换行）。

②文字转换

.ion-text-uppercase        text-transform: uppercase    强制将所有字符转换为大写。
.ion-text-lowercase        text-transform: lowercase    强制将所有字符转换为小写。
.ion-text-capitalize    text-transform: capitalize    强制将每个单词的第一个字母转换为大写。

③响应文本类

.ion-text-{modifier}    将修改器应用于所有屏幕尺寸的元素。
.ion-text-sm-{modifier}    在何时将修改器应用于元素min-width: 576px。
.ion-text-md-{modifier}    在何时将修改器应用于元素min-width: 768px。
.ion-text-lg-{modifier}    在何时将修改器应用于元素min-width: 992px。
.ion-text-xl-{modifier}    在何时将修改器应用于元素min-width: 1200px。

④浮动元素

类                    风格规则                    描述
.ion-float-left        float: left                    该元素将浮动在其包含块的左侧。
.ion-float-right    float: right                元素将浮动在其包含块的右侧。
.ion-float-start    float: left / float: right    一样float-left如果方向是左到右和float-right如果方向是从右到左。
.ion-float-end        float: left / float: right    一样float-right如果方向是左到右和float-left如果方向是从右到左。

⑤响应式浮动

.ion-float-{modifier}        将修改器应用于所有屏幕尺寸的元素。
.ion-float-sm-{modifier}    在何时将修改器应用于元素min-width: 576px。
.ion-float-md-{modifier}    在何时将修改器应用于元素min-width: 768px。
.ion-float-lg-{modifier}    在何时将修改器应用于元素min-width: 992px。
.ion-float-xl-{modifier}    在何时将修改器应用于元素min-width: 1200px。

⑥显示元素

.ion-hide    display: none    该元素将被隐藏。

⑦响应式显示元素

.ion-hide-sm-{dir}    在min-width: 576px（up）或max-width: 576px（down）时将修饰符应用于元素。
.ion-hide-md-{dir}    在min-width: 768px（up）或max-width: 768px（down）时将修饰符应用于元素。
.ion-hide-lg-{dir}    在min-width: 992px（up）或max-width: 992px（down）时将修饰符应用于元素。
.ion-hide-xl-{dir}    在min-width: 1200px（up）或max-width: 1200px（down）时将修饰符应用于元素。

⑧元素填充(内边距padding)

类                        风格规则                描述
.ion-padding            padding: 16px            适用于所有方面的填充。
.ion-padding-top        padding-top: 16px        将填充应用于顶部。
.ion-padding-start        padding-start: 16px        应用填充到开头。
.ion-padding-end        padding-end: 16px        将填充应用到最后。
.ion-padding-bottom        padding-bottom: 16px    将填充应用于底部。
.ion-padding-vertical    padding: 16px 0            在顶部和底部应用填充。
.ion-padding-horizontal    padding: 0 16px            在左侧和右侧应用填充。
.ion-no-padding            padding: 0                不向所有方面应用填充。

⑨元素填充(外边距margin)

类                        风格规则            描述
.ion-margin                margin: 16px        所有方面的外边距。
.ion-margin-top            margin-top: 16px    顶部外边距。
.ion-margin-start        margin-start: 16px    左侧外边距。
.ion-margin-end            margin-end: 16px    右侧外边距。
.ion-margin-bottom        margin-bottom: 16px    底部外边距。
.ion-margin-vertical    margin: 16px 0        在顶部和底部应用外边距。
.ion-margin-horizontal    margin: 0 16px        向左和向右应用外边距。
.ion-no-margin            margin: 0            不向所有方面申请外边距。

8.CSS变量
(1)全局变量，在src/theme/variables.scss下

 / *为所有模式设置变量* / 
    ：root  { 
      / *设置整个应用程序的背景* / 
      --ion-background-color: #ff3700;
      / *设置整个app * /  
      --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
      / *仅为Material Design设置整个应用程序的文本颜色* / 
      .md {
        --ion-text-color: #222;
      }

(2)组件变量,要为特定组件设置CSS变量，请在其选择器内添加变量

 / *设置所有离子按钮元素的颜色* / 
    ion-button {
      --color: #222;
    }
    / *设置在离子键与.fancy按钮类* /
    .fancy-button {
      --background: #00ff00;
    }

(3)通过JavaScript设置变量

const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');

(4)获取值
①使用CSS

.fancy-button {
    --background: var(--charcoal, #36454f);
}

②使用JavaScript

const el = document.querySelector('.fancy-button');
const color = el.style.getPropertyValue('--charcoal');

9.Color Generate、
(1)color:

    <ion-button>Default</ion-button>
    <ion-button color="primary">Primary</ion-button>
    <ion-button color="secondary">Secondary</ion-button>
    <ion-button color="tertiary">Tertiary</ion-button>
    <ion-button color="success">Success</ion-button>
    <ion-button color="warning">Warning</ion-button>
    <ion-button color="danger">Danger</ion-button>
    <ion-button color="light">Light</ion-button>
    <ion-button color="medium">Medium</ion-button>
    <ion-button color="dark">Dark</ion-button>

(2)分层颜色

名称            属性                                默认值                描述
Base            --ion-color-primary                    #3880ff                所有变化源自的主要颜色
Base (rgb)        --ion-color-primary-rgb                rgb( 56, 128, 255)    基色为红色，绿色，蓝色格式
Contrast        --ion-color-primary-contrast        #ffffff                基色的反面应该是基色可见的
Contrast (rgb)    --ion-color-primary-contrast-rgb    rgb( 255, 255, 255)    红色，绿色，蓝色格式的对比色
Shade            --ion-color-primary-shade            #3171e0                基色的浅色版本
Tint            --ion-color-primary-tint            #4c8dff                基色的略微更轻的版本

(3)要更改颜色的默认值，应设置该颜色的所有列出的变体

:root {
      --ion-color-secondary: #006600;
      --ion-color-secondary-rgb: 0,102,0;
      --ion-color-secondary-contrast: #ffffff;
      --ion-color-secondary-contrast-rgb: 255,255,255;
      --ion-color-secondary-shade: #005a00;
      --ion-color-secondary-tint: #1a751a;
    }

(4)添加颜色

 .ion-color-favorite {
      --ion-color-base: #69bb7b;
      --ion-color-base-rgb: 105,187,123;
      --ion-color-contrast: #ffffff;
      --ion-color-contrast-rgb: 255,255,255;
      --ion-color-shade: #5ca56c;
      --ion-color-tint: #78c288;
    }

使用：

<ion-button color="favorite">Favorite</ion-button>

Alan_TW

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录