ionic CSS布局

最新推荐文章于 2021-08-04 08:21:00 发布
最新推荐文章于 2021-08-04 08:21:00 发布
阅读量718 收藏 3
点赞数 1
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lamenw/article/details/77508678
版权

1)头部/Header、内容/Content、底部/Footer:

  .bar .bar-header——声明元素为头部；

  .bar .footer——声明元素为底部；

  .content/.scroll-content——声明元素为内容区；

  .bar .bar-subheader——声明元素为二级导航栏；

  .bar .bar-subfooter——声明元素为二级底部栏；

  .bar-light等——设置bar的颜色；

  .title——声明元素为标题；

  .bar .item-input-inset——设置bar为条块元素并用于嵌入input；

  .item-input-wrapper——设置元素为input的包裹元素；

2)按钮/button：

  .button-bar——声明元素为工具栏，通常包含一组按钮；

  .button——声明元素为按钮；

  .button-light等——设置button的颜色;

  .button-clear——设置button为无边框背景透明样式;

  .button-block——设置button充满父元素，并保留边框半径及左右边框，保留padding，让元素有点呼吸空隙；

  .button-full——设置button完全充满父元素，无左右边框及边框半径。

  .button-small——小按钮;

  .button-large——大按钮；

  .button-outline——背景透明带边框按钮；

3)图标/icon

  .icon .ion-images等——获取ionic的内置图标；

  .icon-right——将icon图标放在元素的内部右侧；

4）样式

   .light等——设置字体的颜色；

   .light-border等——设置按钮等元素的边框；

   .light-bg等——设置元素的背景色；

   .padding等——设置元素的内边距；

   .has-header等——设置元素所处的位置;

  

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <div class="bar bar-header bar-positive">  
  10.         <div class="button icon ion-ios-arrow-left"></div>  
  11.         <h1 class="title">今日头条</h1>  
  12.         <div class="button icon ion-gear-b"></div>  
  13.     </div>  
  14.     <div class="bar bar-subheader bar-dark">  
  15.   
  16.         <div class="button-bar">  
  17.             <a class="button button-balanced">新闻</a>  
  18.             <a class="button button-clear">国内</a>  
  19.             <a class="button button-clear">国际</a>  
  20.             <a class="button button-clear">体育</a>  
  21.             <a class="button button-clear">科技</a>  
  22.         </div>  
  23.     </div>  
  24.   
  25.     <div class="scroll-content has-header has-subheader padding">  
  26.         <div class="bar bar-energized item-input-inset">  
  27.             <a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>  
  28.             <label class="item-input-wrapper">  
  29.                 <input class="light-bg" type="text" placeholder="搜索内容">  
  30.             </label>  
  31.         </div>  
  32.         <h4 class="assertive royal-bg">IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。</h4>  
  33.         <button class="button button-block button-positive">  
  34.             Block Button  
  35.         </button>  
  36.         <button class="button button-full button-light">  
  37.             Full Button  
  38.         </button>  
  39.         <button class="button button-large button-assertive">  
  40.             Large Button  
  41.         </button>  
  42.         <button class="button button-small positive-border">  
  43.             Small Button  
  44.         </button>  
  45.         <button class="button button-outline button-positive">  
  46.             Outlined Button  
  47.         </button>  
  48.         <a class="button icon-left ion-gear-b calm">设置</a>  
  49.         <a class="button icon-left positive">  
  50.             <i class="icon ion-refresh"></i>刷新  
  51.         </a>  
  52.     </div>  
  53.     <div class="bar bar-subfooter bar-light">  
  54.         <div class="button-bar">  
  55.             <a class="button button-clear icon ion-images">新闻</a>  
  56.             <a class="button button-clear">国内</a>  
  57.             <a class="button button-clear">国际</a>  
  58.             <a class="button button-clear">体育</a>  
  59.             <a class="button button-clear">科技</a>  
  60.         </div>  
  61.     </div>  
  62.     <div class="bar bar-footer bar-dark">  
  63.         <h1 class="title">您关心的就是头条</h1>  
  64.     </div>  
  65. </body>  
  66. </html>  


效果如下：


5)列表/list

  .list——定义元素为列表容器；

  .list-borderless——设置样式为无边框;

  .list-inset——设置样式为边框缩进;

  .card——设置样式为边框缩进并在下方添加阴影。

  .item——定义元素为列表成员；


[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body class="stable">  
  9.     <div class="bar bar-header bar-balanced">  
  10.          <h1 class="title">城市列表</h1>  
  11.     </div>  
  12.     <div class="scroll-content has-header">  
  13.         <ul class="list">  
  14.             <li class="item">北京</li>  
  15.             <li class="item">上海</li>  
  16.             <li class="item">武汉</li>  
  17.         </ul>  
  18.         <ul class="list list-borderless">  
  19.             <li class="item">北京</li>  
  20.             <li class="item">深圳</li>  
  21.         </ul>  
  22.         <ul class="list list-inset">  
  23.             <li class="item">北京</li>  
  24.             <li class="item">深圳</li>  
  25.         </ul>  
  26.         <ul class="list card">  
  27.             <li class="item">北京</li>  
  28.             <li class="item">深圳</li>  
  29.         </ul>  
  30.     </div>  
  31. </body>  
  32. </html>  
效果：


 .item-borderless——设置该列表成员为无边框样式；

 .item-light等——设置列表成员元素的颜色；

 .item-divider——设置该列表成员所占行高减半，常用作分组；

 .item-button-left/right——设置按钮位置居左/居右；

 .item-icon-left/right——设置图标位置居左/居右；

 .item-thumbnail-left/right——设置缩略图位置居左/居右；

 .item-image——设置图像充满列表成员；

 .barge——徽章；

 

 

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body class="stable">  
  9.     <div class="bar bar-header bar-balanced">  
  10.          <h1 class="title">列表/list</h1>  
  11.     </div>  
  12.     <div class="scroll-content has-header">  
  13.         <ul class="list list-inset">  
  14.             <li class="item item-divider item-positive">直辖市</li>  
  15.             <li class="item">北京</li>  
  16.             <li class="item item-button-right">天津  
  17.                 <button class="button">修改</button>  
  18.             </li>  
  19.             <li class="item item-divider item-assertive">省会</li>  
  20.             <li class="item">武汉<i class="badge positive-bg light">15</i></li>  
  21.             <li class="item item-icon-left item-icon-right">  
  22.                 <i class="icon ion-location"></i>  
  23.                 <h2>深圳：当前位置</h2>  
  24.                 <i class="icon ion-ios-arrow-right"></i>  
  25.             </li>  
  26.             <li class="item item-thumbnail-right">  
  27.                 <img src="img/a-2.jpg">  
  28.                 <h2>美国男子为防妻分家产, <br/>将价值50万美元黄金扔垃圾桶</h2>  
  29.                 <p>新浪新闻</p>  
  30.             </li>  
  31.             <div class="item item-avatar-left">  
  32.                 <img src="img/a-1.jpg">  
  33.                 <h2>papa酱</h2>  
  34.                 <p>不是每个美女都爱钱...</p>  
  35.             </div>  
  36.             <div class="item item-image">  
  37.                 <img src="img/bmw.jpg">  
  38.             </div>  
  39.             <div class="item item-icon-left">  
  40.                 <i class="icon ion-thumbsup"></i>  
  41.                 <p>44 赞</p>  
  42.             </div>  
  43.         </ul>  
  44.     </div>  
  45. </body>  
  46. </html>  

6)表单/Forms

  .item-input——声明元素为输入框组件容器；

  .item-input-inset——设置输入框组件容器为内嵌样式；

  .item-stacked-label——设置为堆叠标签样式(分行)；

  .item-floating-label——设置为浮动标签样式；

  .item-checkbox——声明元素为多选框组件容器；

  .item-radio——声明元素为单选框组件容器；

  .item-select——声明元素为下拉框组件容器；

  .item-toggle——声明元素为开关按钮的容器；

  .toggle——声明元素为开关按钮；

  .range——声明元素为滑动条；

  

  

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <div class="bar bar-header bar-balanced">  
  10.         <h1 class="title">表单输入</h1>  
  11.     </div>  
  12.     <div class="scroll-content has-header">  
  13.         <div class="list">  
  14.             <div class="item item-input">  
  15.                 <i class="icon ion-android-person positive"> 姓名 </i>  
  16.                 <input type="text" placeholder=" 周杰伦">  
  17.             </div>  
  18.             <label class="item item-input">  
  19.                 <i class="icon ion-ios-unlocked-outline positive"></i>  
  20.                 <input type="password" placeholder="请输入您的密码">  
  21.             </label>  
  22.             <label class="item item-input item-input-inset item-button-right">  
  23.                 <span class="input-label">年龄</span>  
  24.                 <input type="text" placeholder="25">  
  25.                 <a class="button button-clear icon ion-ios-arrow-right"></a>  
  26.             </label>  
  27.             <label class="item item-input item-floating-label">  
  28.                 <span class="input-label">个性签名</span>  
  29.                 <input type="text" placeholder="论一个程序员的自我修养">  
  30.             </label>  
  31.             <label class="item item-input item-stacked-label">评论  
  32.                 <textarea placeholder="请文明用语..."></textarea>  
  33.             </label>  
  34.             <label class="item item-checkbox">  
  35.                 <label class="checkbox">  
  36.                     <input type="checkbox" checked>  
  37.                 </label>  
  38.                 记住密码  
  39.             </label>  
  40.             <div class="item item-divider"><b>请选择支付方式</b></div>  
  41.             <label class="item item-radio">  
  42.                 <input type="radio" name="group">  
  43.                 <div class="item-content">支付宝客户端支付</div>  
  44.                 <i class="radio-icon ion-checkmark balanced"></i>  
  45.             </label>  
  46.             <label class="item item-radio">  
  47.                 <input type="radio" name="group">  
  48.                 <div class="item-content">支付宝网页支付</div>  
  49.                 <i class="radio-icon ion-checkmark balanced"></i>  
  50.             </label>  
  51.             <label class="item item-radio">  
  52.                 <input type="radio" name="group" checked>  
  53.                 <div class="item-content">一键支付（无需支付宝账户）</div>  
  54.                 <i class="radio-icon ion-checkmark balanced"></i>  
  55.             </label>  
  56.         </div>  
  57.   
  58.         <div class="list">  
  59.             <div class="item range range-positive">  
  60.                 <i class="icon ion-ios-sunny-outline"></i>  
  61.                 <input type="range" name="volume" min="0" max="100" value="33">  
  62.                 <i class="icon ion-ios-sunny"></i>  
  63.             </div>  
  64.             <div class="item item-toggle">  
  65.                 定位  
  66.                 <label class="toggle toggle-balanced">  
  67.                     <input type="checkbox" checked>  
  68.                     <div class="track">  
  69.                         <div class="handle"></div>  
  70.                     </div>  
  71.                 </label>  
  72.             </div>  
  73.         </div>  
  74.   
  75.         <div class="list">  
  76.             <label class="item item-input item-select">  
  77.                 <div class="input-label">  
  78.                     前端技术  
  79.                 </div>  
  80.                 <select>  
  81.                     <option>HTML</option>  
  82.                     <option selected>CSS</option>  
  83.                     <option>JavaScript</option>  
  84.                 </select>  
  85.             </label>  
  86.         </div>  
  87.     </div>  
  88. </body>  
  89. </html>  
效果：


7)切换标签组件/tabs:

  .tabs——声明元素为切换标签组件容器；

  .tabs-light等——设置切换标签组件的颜色；

  .tabs-top——设置切换标签组件在上部；

  .tabs-icon-top/left——设置切换标签组件内部的图标的位置；

  .tabs-icon-only——设置切换标签组件只显示图标；

  .tabs-item——声明元素为切换标签组件的子选项；

  .active/.tab-item-active/.activated——设置子选项为选中状态；

  .diasbled——设置子选项为禁用状态；

  .has-badge——设置子选项含有徽章；

  .tabs-striped——声明元素为条带风格的切换标签组件容器；

  

  

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <div class="bar bar-header bar-dark">  
  10.         <h1 class="title">今日头条</h1>  
  11.         <a class="button button-clear icon ion-ios-plus-empty"></a>  
  12.     </div>  
  13.     <div class="tabs tabs-top tabs-positive">  
  14.         <a class="tab-item">要闻</a>  
  15.         <a class="tab-item active">上海</a>  
  16.         <a class="tab-item">房产</a>  
  17.         <a class="tab-item">财经</a>  
  18.         <a class="tab-item">娱乐</a>  
  19.     </div>  
  20.     <div class="scroll-content stable-bg has-header has-tabs-top has-tabs tabs-item-hide">  
  21.         <h4 class="positive">IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。</h4>  
  22.     </div>  
  23.     <div class="tabs tabs-stable tabs-icon-top">  
  24.         <a class="tab-item active">  
  25.             <i class="icon ion-ios-paper-outline"></i>新闻  
  26.         </a>  
  27.         <a class="tab-item disabled">  
  28.             <i class="icon ion-ios-book-outline"></i>订阅  
  29.         </a>  
  30.         <a class="tab-item has-badge">  
  31.             <div class="badge badge-assertive">12</div>  
  32.             <i class="icon ion-images"></i>图片  
  33.         </a>  
  34.         <a class="tab-item activated">  
  35.             <i class="icon ion-ios-videocam-outline"></i>视频  
  36.         </a>  
  37.     </div>  
  38. </body>  
  39. </html>  
效果：


[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <div class="tabs-striped tabs-top tabs-light tabs-icon-only">  
  10.         <div class="tabs">  
  11.             <a class="tab-item active">  
  12.                 <i class="icon ion-ios-telephone"></i>  
  13.             </a>  
  14.             <a class="tab-item">  
  15.                 <i class="icon ion-ios-clock"></i>  
  16.             </a>  
  17.             <a class="tab-item">  
  18.                 <i class="icon ion-ios-person"></i>  
  19.             </a>  
  20.         </div>  
  21.     </div>  
  22.     <div class="tabs tabs-positive tabs-icon-only">  
  23.         <a class="tab-item">  
  24.             <i class="icon ion-ios-search"></i>  
  25.         </a>  
  26.         <a class="tab-item active">  
  27.             <i class="icon ion-ios-telephone"></i>  
  28.         </a>  
  29.         <a class="tab-item" href="#">  
  30.             <i class="icon ion-backspace"></i>  
  31.         </a>  
  32.     </div>  
  33. </body>  
  34. </html>  
效果：



8)网格布局/Grid:

  .row——声明元素为栅格系统的行容器；

  .row-top/center/bottom——设置行容器内的元素所处的位置；

  .responsive-sm/md/lg——设置行容器所适配的屏幕尺寸；

  .col——声明元素为栅格系统行内的列；

  .col-10等——设置列宽所占的行宽比；

  .col-offset-10等——设置列偏移量所占的行宽比；

  .col-top/offset/bottom——设置该列所处位置；

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  6.     <link rel="stylesheet" type="text/css" href="../lib/css/ionic.min.css">  
  7.     <style>  
  8.         .col-40{-webkit-box-flex:0;-webkit-flex:0 0 40%;-moz-box-flex:0;-moz-flex:0 0 40%;-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}  
  9.         .col-60{-webkit-box-flex:0;-webkit-flex:0 0 60%;-moz-box-flex:0;-moz-flex:0 0 60%;-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}  
  10.     </style>  
  11. </head>  
  12. <body>  
  13.     <div class="bar bar-header bar-stable">  
  14.         <h1 class="title">网格布局</h1>  
  15.     </div>  
  16.     <div class="scroll-content has-header">  
  17.         <div class="row">  
  18.             <div class="col col-offset-25 positive-bg">  
  19.                 col-offset-25  
  20.             </div>  
  21.             <div class="col calm-bg">  
  22.                 col  
  23.             </div>  
  24.         </div>  
  25.         <div class="row">  
  26.             <div class="col col-33 balanced-bg">  
  27.                 col-33  
  28.             </div>  
  29.             <div class="col col-67 energized-bg">  
  30.                 col-67  
  31.             </div>  
  32.         </div>  
  33.         <div class="row">  
  34.             <div class="col col-40 assertive-bg">  
  35.                 col-40  
  36.             </div>  
  37.             <div class="col col-60 royal-bg">  
  38.                 col-60  
  39.             </div>  
  40.         </div>  
  41.   
  42.         <div class="row">  
  43.             <div class="col col-top positive-bg">.col</div>  
  44.             <div class="col col-center calm-bg">.col</div>  
  45.             <div class="col col-bottom balanced-bg">.col</div>  
  46.             <div class="col energized-bg">1<br>2<br>3<br>4</div>  
  47.         </div>  
  48.   
  49.         <div class="row row-top">  
  50.             <div class="col energized-bg">.col</div>  
  51.             <div class="col assertive-bg">.col</div>  
  52.             <div class="col royal-bg">.col</div>  
  53.             <div class="col positive-bg">1<br>2<br>3<br>4</div>  
  54.         </div>  
  55.   
  56.         <div class="row responsive-sm">  
  57.             <div class="col positive-bg">.col</div>  
  58.             <div class="col calm-bg">.col</div>  
  59.             <div class="col balanced-bg">.col</div>  
  60.             <div class="col energized-bg">.col</div>  
  61.         </div>  
  62.     </div>  
  63. </body>  
  64. </html>  

初步学习 ionic css 布局
好好学习
05-30 1999
 ionic.css 布局是基于flex的，虽然没有bootstrap那么丰富，但基本的布局还是满足的。提供了字体的图标，可以自定义颜色。还是能基本满足icon需求吧。。。当然还是需要自己定义很多css 或者 覆盖原来的。入门的写下，也不知道对不对。。。。。   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta char...
ionic css的样式操作 详细介绍
热门推荐
午夜灬玫瑰焰钻的博客
03-18 1万+
1.    ionic css基本布局  2.    ionic css色彩、图标和边距 3.    ionic css界面组件列表 4.    ionic css界面组件按钮 5.    ionic css界面组件 表单输入 6.    ionic css界面组件选项卡 7.    ionic css定制布局 Grid布局 第十三讲免费视频教程下载地址：http://bbs
ionic的css文件
08-25
ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。与另外一个文件angularJS文件可以快速开发手机APP
移动app之ionic框架css布局
xyphf的博客
12-12 6564
声明：本文转自汇智网，转载只为传播更多信息，版权归原作者所有。Ionic简介ionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用： ionic主要包括三个部分： CSS框架
Ionic Css简介与基本布局
Sean_css的博客
06-21 5672
@(Ionic)[ionic css]Ionic Css简介与基本布局Ionic简介　　Ionic属于hybrid开发模式，本质上是讲移动web应用与浏览器打包，优点是采用标准的web技术进行开发，避免了不同平台原声开发体系的学习，上手快、效率高。缺点是性能上有一定的损失 　　ionic是一个强大的混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、CSS、JavaScript
Ionic css组成（一）
weixin_33912638的博客
03-25 141
2019独角兽企业重金招聘Python工程师标准>>> ...
ionic css图片解读
08-09
Ionic CSS 基于Flexbox布局模型，这使得创建复杂的弹性布局变得简单。图片可能展示了Flexbox属性（如 `flex-direction`、`align-items` 和 `justify-content`）如何工作，帮助理解如何在Ionic中创建对齐和流式布局...
Ionic Css-Prop-Cheat Sheet：Ionic Css属性备忘单
02-25
《Ionic CSS属性备忘单详解》 在移动应用开发领域，Ionic框架凭借其强大的功能和跨平台兼容性，成为开发者们的热门选择。特别是在构建响应式、高性能的混合应用程序时，理解并熟练运用Ionic的CSS属性至关重要。本文...
Ionic 4与Vue结合：展示Tailwind CSS布局的应用案例
资源摘要信息: "ionic4-vue-tailwindcss-layouts演示应用程序是一套基于Ionic 4框架，采用Vue.js前端框架和Tailwind CSS进行样式设计的移动应用界面布局展示。该演示程序不仅涵盖了基础的布局设计，如列表和网格，还...
ionic入门到精通----css样式
01-02 4769
Ionic CSS 介绍ionic 的预定义 CSS 类主要分四个方面： 基本布局类 颜色和图标类 界面组件类 栅格系统类 基本布局类ionic将手机页面的布局模式基本抽象为三块：头、内容、尾。基本布局类提供了 这几个区域的CSS类。头部，定高条块：bar样式 .bar 将元素声明为屏幕上绝对定位的块状区域，具有固定的高度（44px）：<any class="bar">...</any>bar 嵌入
ionic css布局介绍(一)
weixin_33725722的博客
10-28 179
ionic css 布局介绍1. 基本布局2. 色彩、图标和边距3. 界面组件列表4. 界面组件按钮5. 界面组件 表单输入6. 界面组件选项卡7. 定制布局 栅格系统------------------------------------------------1． 基本布局1....
ionic css类总结
leeseean的博客
05-04 1026
header，subheader，footer主要用bar，有ion-header-bar,ion-footer-bar，有align-title等API； content有ion-content，ion-refresher，ion-pane，赋予了多种API； Buttons的类比较多，分Block,Full Width,Different Sizes,Outlined,Clear,Icon
Ionic4—全局CSS变量
雷雨天的雷胖子
12-11 861
目录 一、概述 二、实例 一、概述 Ionic4中全局CSS变量一般在variables.scss文件的伪类root中定义，变量名以--开头。当然任意全局CSS文件的root伪类中都可以定义全局CSS变量。 二、实例 定义全局CSS变量 调用全局CSS变量 使用var函数调用CSS变量。 ...
ionic css的样式操作 详细介绍 (实用，备忘）
chelen_jak的专栏
11-13 336
原文出处：https://blog.csdn.net/gujinapenggu5/article/details/50925662 （ 详情见原文） 延伸阅读：Ionic Css简介与基本布局 (有图） 1. ionic css基本布局 2. ionic css色彩、图标和边距 3. ionic css界面组件列表 4. ionic css界面组件按钮 5. ion...
ionic中文详解CSS组件（2）
午夜灬玫瑰焰钻的博客
03-07 1097
接着上一篇ionic中文详解CSS组件(1)，我这里将一些相关组件的介绍合在一起，给出综合例子和显示效果，方便自己查阅。另外官网的JS API介绍文档有问题，国内访问不能跳转，请参考我的另一篇ionic中文javascript API. range范围选择 range组件用于在某个范围内选择值。 1
ionic能自己写css吗,ionic2怎么写公共css样式
weixin_32205057的博客
08-04 1140
1.page.html文件里写ionic提供的控件，比如：ion-header,ion-content, ion-title,ion-toobar,经管如此，有时候满足不了项目的界面，我们需要结合HTML的基本命令来完成设计，比如：div，p， img，a，等。2.scss使用经验：每个页面都有自己的scss文件，我在使用时，发现几个页面的css定义会影响，就是页面2可以用页面1的css定义造成干...
ionic能自己写css吗,ionic2怎么写公共css样式?
weixin_36059638的博客
08-04 224
1.page.html文件里写ionic提供的控件，比如：ion-header,ion-content, ion-title,ion-toobar,经管如此，有时候满足不了项目的界面，我们需要结合HTML的基本命令来完成设计，比如：div，p， img，a，等。2.scss使用经验：每个页面都有自己的scss文件，我在使用时，发现几个页面的css定义会影响，就是页面2可以用页面1的css定义造成干...
Ionic css组成（四）
bwf_erg的博客
03-25 274
Ionic css组间界面类还包括以下元素。 7. 滑动条          volume">        8. 选择框   any class=item item-select”>                   ...         ...         ...        9. 选项卡 选项卡是一个可以包含多个按钮或链
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值