【问题标题】:Possible to change font size of iOS select input using Ionic可以使用 Ionic 更改 iOS 选择输入的字体大小
【发布时间】:2017-07-13 10:42:28
【问题描述】:

我有一个正在 Ionic 中工作的项目,客户询问是否可以减小所选输入的字体大小。

这是一张来自 Google 的随机图片,但显示了我正在引用的 iOS 上的选择“滚动条”:

蓝色、绿色和红色选项需要较小的字体大小。我很确定它不能完成,对我来说也更容易。

【问题讨论】:

    标签: ios css ionic-framework


    【解决方案1】:

    您没有说明您使用的是哪个版本的 ionic,所以我假设它是最新版本。

    ionic 中的每个组件都分配了 sass 变量,这些变量可用于定位组件的特定元素,然后可用于相应地对其进行样式设置。

    在您的theme/variables.scss 文件中,您可以定位一个变量,然后该变量将覆盖默认样式。在您的情况下,这将是选择的字体大小。现在对于这个用例,字体大小是一个继承属性,并且没有分配给它特定的 sass 变量(您可以查看 select here 的所有 sass 变量)

    因此,在这种情况下,要覆盖默认样式,您必须使用

    显式包装您的 scss 代码
    .ios,.md,.wp{
        // your style here
    }
    

    从您的图像看来,您使用的是“操作表选择”样式。这将针对 .action-sheet-ios .action-sheet-button 类来更改字体大小。

    .ios{
        .action-sheet-ios .action-sheet-selected,
        .action-sheet-ios .action-sheet-button{
             font-size:1rem;
         }
    }
    

    这专门针对ios

    【讨论】:

      【解决方案2】:

      这可以通过 css 完成。首先通过实验室为您的应用提供服务

      ionic serve --lab
      

      比检查 chrome 中的元素并选择您的文本组件并找到它的类。然后您可以添加自定义 CSS 样式。

      干杯:D

      【讨论】:

        猜你喜欢
        • 2022-01-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-03-07
        • 2017-11-13
        • 2012-06-03
        • 1970-01-01
        • 2011-11-03
        相关资源
        最近更新 更多