ionic中怎样更改默认样式

Posted 2023-04-23

参考技术A 页面布局首先在'tab-message.html'中添加聊天消息的布局<ion-view> <ion-content on-swipe-left="onSwipeLeft()"> <!--这里的rj-close-back-drop是自定义指令, 后面会讲是干嘛的--> <ion-list rj-close-back-drop> <ion-item class="item-avatar" on-hold="popupMessageOpthins($index)" rj-hold-active ng-repeat="message in messages"> <img ng-src="message.pic"> <!--这个就是来了新消息, 头像上的小红数字--> <span class="rj-sm-red-icon" ng-show="message.showHints"><p ng-bind="message.noReadMessages"></p></span> <h2 ng-bind="message.name"></h2> <p class="rj-list-p" ng-bind="message.lastMessage.content"></p> <span class="rj-push-right" ng-bind="message.lastMessage.time"></span> </ion-item> </ion-list> </ion-content></ion-view>大家在试这个的时候, 由于'messages'还未定义, 先不绑定, 用实际的值代替,像这样<img src="img/ben.png"><span class="rj-sm-red-icon"><p>1</p></span><h2>小王</h2><p class="rj-list-p">你在干什么?</p><span class="rj-push-right">12:30</span>这样就能看到效果了自定义样式可以看到上图有点丑, 需要我们自己修改样式, 可以自己添加css文件link进来, 但官方推荐使用sass的方式修改, 关于sass的语法, 可以看 这个 , 看完就差不多可以了.首先在项目目录下,运行命令$ionic setup sass$ionic serve运行以后, 就会对 scss/ionic.app.scss 文件监控, 有修改, 会自动编译该文件, 输出到 css/ionic.app.css所以你每次修改保存scss文件后, 浏览器会看到实时的效果, 非常方便.打开 scss/ionic.app.scss 文件, 如下/*To customize the look and feel of Ionic, you can override the variablesin ionic's _variables.scss file.For example, you might change some of the default colors:$light: #fff !default;$stable: #f8f8f8 !default;$positive: #387ef5 !default;$calm: #11c1f3 !default;$balanced: #33cd5f !default;$energized: #ffc900 !default;$assertive: #ef473a !default;$royal: #886aea !default;$dark: #444 !default;*/// The path for our ionicons font files, relative to the built CSS in www/css$ionicons-font-path: "../lib/ionic/fonts" !default;可以看到官方预定义的颜色几个颜色, 如果要修改预定义的颜色, 直接修改这里就可以了.我们自己的样式, 直接在后面添加. 我们在后面添加$item-avatar-border-radius: 0;可以发现头像变成方的了, 那怎么知道修改这个变量呢?打开 www/lib/ionic/scss/ 目录, 可以看到很多scss文件├── _action-sheet.scss├── _animations.scss├── _backdrop.scss├── _badge.scss├── _bar.scss├── _button-bar.scss├── _button.scss├── _checkbox.scss├── _form.scss├── _grid.scss├── ionicons├── ionic.scss├── _items.scss├── _list.scss├── _loading.scss├── _menu.scss├── _mixins.scss├── _modal.scss...这些都是官方的样式文件, 找到 items.scss 文件, 这个就是ion-item相关的样式, 再搜 border-radius 很快就能找到啦具体的细节我就不说啦, 其它的修改都类似, 可以参考 我的代码popup的使用关于$ionicPopup的详细使用, 可以参考 官网首先在 controllers.js 文件中添加一个controller:.controller('messageCtrl', function($scope, $state, $ionicPopup, localStorageService, messageService) $scope.popup = isPopup: false, index: 0;$scope.onSwipeLeft = function() $state.go("tab.friends");;$scope.popupMessageOpthins = function($index) $scope.popup.index = $index; //这里通过$ionicPopup.show()方法创建了一个自定义的popup $scope.popup.optionsPopup = $ionicPopup.show( templateUrl: "templates/popup.html", scope: $scope, ); $scope.popup.isPopup = true;;//实现标为已读/未读, 注意$scope.popup.optionsPopup.close()方法//用来关闭弹窗, 我竟然找了很久才发现这个接口$scope.markMessage = function() var index = $scope.popup.index; var message = $scope.messages[index]; if (message.showHints) message.showHints = false; message.noReadMessages = 0; else message.showHints = true; message.noReadMessages = 1; $scope.popup.optionsPopup.close(); $scope.popup.isPopup = false; messageService.updateMessage(message);;这里要注意两点要在routes.js中将该controll传进去需要通过自定义样式, 去掉自带的标题和按钮//routes.js.state('tab.message', url: '/message',views: 'tab-message': templateUrl: 'templates/tab-message.html', controller: "messageCtrl" )自定义指令细心的人会发现两个问题:弹出popup时, 联系人列表没有动画效果弹出popup后, 点击popup以外的地方, popup不能消失, 这两个问题, 就通过自定义指令来解决首先在 directives.js 文件中添加 rjCloseBackDrop 指令, 用来解决上面第二个问题.directive('rjCloseBackDrop', [function() return scope: false,//共享父scope restrict: 'A', replace: false, link: function(scope, iElm, iAttrs, controller) //要在html上添加点击事件, 试了很久- -! var htmlEl = angular.element(document.querySelector('html')); htmlEl.on("click", function(event) if (event.target.nodeName === "HTML" && scope.popup.optionsPopup && scope.popup.isPopup) scope.popup.optionsPopup.close(); scope.popup.isPopup = false; ); ;])再创建 rjHoldActive 指令, 用来解决第一个问题.directive('rjHoldActive', ['$ionicGesture', '$timeout', function($ionicGesture, $timeout, $ionicBackdrop) return scope: false, restrict: 'A', replace: false, link: function(scope, iElm, iAttrs, controller) $ionicGesture.on("hold", function() iElm.addClass('active'); //300ms后恢复 $timeout(function() iElm.removeClass('active'); , 300); , iElm); ; ])最后分别在 ion-list 和 ion-item 上添加指令<ion-list rj-close-back-drop> <ion-item class="item-avatar"rj-hold-active ng-repeat="message in messages">

在单个页面中更改离子标签的字体大小 - Ionic

【中文标题】在单个页面中更改离子标签的字体大小 - Ionic

【英文标题】：change font size of ion-label in a single page - Ionic

【发布时间】：2018-05-06 01:56:40

【问题描述】：

我想更改离子应用主页中离子标签的字体大小。 我读过我可以更改 __variables.scss 文件中的字体大小变量，这可能会影响离子标签。我想我可以做到。 但我觉得奇怪的是，在与页面关联的 scss 文件中设置离子标签的样式不起作用。我在网上搜索过，但除了我的方法应该有效之外，我找不到任何关于它的信息。

这是我的 scss：

$primary-color: #cf810c;
$bg-color: #CCFFFF;

page-home 
    .masters
        background-color:$bg-color;
    
    ion-label
        color: $primary-color;
        font-size: 4em;
   

这是我的 html 文件中的内容：

<ion-content padding class="masters">
  <ion-label stacked>Tap and press the buttons to win!</ion-label>
</ion-content>

我的页面如下：

【参考方案1】：

您还可以全局更改添加到 global.scss 中的所有标签字体

ion-label 
  label 
   font-size: 1rem!important;
  

【参考方案2】：

例如，使用适当的 HTML 元素也可以解决您的问题

    <ion-item>
      <ion-text>
        <h2> product.name</h2> // BIG
        <h3> product.category</h3> // MEDIUM
        <h4> product.price</h4> // SMALL
      </ion-text>
    </ion-item>

【参考方案3】：

我不鼓励像其他答案那样使用自己的字体大小值/类。 Ionic 有一个定义的字体大小，它可以针对定义的 h1、h2、...、small 和其他标签进行缩放；看这里：https://github.com/ionic-team/ionic/blob/master/core/src/css/typography.scss#L34

我建议您只需使用 <ion-label> 包装其中一个标签，以便在您的应用中保持一致的字体值：

<ion-item
    <ion-label>
        <small>Foo Bar</small>
    </ion-label>
</ion-item>

【参考方案4】：

抱歉，Sampath 和 Shahab Rauf 的答案对我不起作用：Ionic 4 和 Angular 5。

在另一个命题下：

HTML：

  <ion-label stacked >
      <p class="my-label">Tap and press the buttons to win!</p>
  </ion-label>

SCSS：

page-my-page 
    .my-label 
        font-size: 8em;
      

这里，不需要将SCSS文件添加到Angular组件的styleUrls属性或app.scss中。

希望对您有所帮助。

【参考方案5】：

您可以在标签中添加一个类并在 CSS 中对其进行编辑。

HTML

<ion-label class="testclass">Your Label</ion-label>

CSS

.testclass font-size: 30px !important;

【参考方案6】：

你只需要这样做：

这是有效的stackblitz

my-page.html

  <ion-label stacked class="my-label">Tap and press the buttons to win!</ion-label>

my-page.scss

.my-label 
  font-size: 4em;