【发布时间】:2017-07-13 10:42:28
【问题描述】:
我有一个正在 Ionic 中工作的项目,客户询问是否可以减小所选输入的字体大小。
这是一张来自 Google 的随机图片,但显示了我正在引用的 iOS 上的选择“滚动条”:
蓝色、绿色和红色选项需要较小的字体大小。我很确定它不能完成,对我来说也更容易。
【问题讨论】:
标签: ios css ionic-framework
我有一个正在 Ionic 中工作的项目,客户询问是否可以减小所选输入的字体大小。
这是一张来自 Google 的随机图片,但显示了我正在引用的 iOS 上的选择“滚动条”:
蓝色、绿色和红色选项需要较小的字体大小。我很确定它不能完成,对我来说也更容易。
【问题讨论】:
标签: ios css ionic-framework
您没有说明您使用的是哪个版本的 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。
【讨论】:
这可以通过 css 完成。首先通过实验室为您的应用提供服务
ionic serve --lab
比检查 chrome 中的元素并选择您的文本组件并找到它的类。然后您可以添加自定义 CSS 样式。
干杯:D
【讨论】: