离子标签徽章

2023-12-30

我正在尝试在选项卡中的图标上添加徽章。 目前的结果是:http://play.ionic.io/app/decfc14cb171 http://play.ionic.io/app/decfc14cb171

有谁知道如何将它们放在每个图标的右上角?

我尝试使用但事实证明在其他方面问题比较多,虽然有了“徽章”属性更容易达到预期的效果。有没有办法在不使用 ion-tabs 的情况下复制它?


我建议使用 Ionicion-tabs http://ionicframework.com/docs/api/directive/ionTabs/指令,因为它对徽章有“一流”的支持。 ion-tab 元素有一个“badge”属性,这使得向图标添加文本(在您的情况下是数字)变得非常容易。

我在这里写了一个实际的演示:

http://play.ionic.io/app/c6e96276e8fd http://play.ionic.io/app/c6e96276e8fd

添加标签的代码在这里:

<ion-tabs class="tabs-icon-top tabs-striped">

 <ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="3" badge style="badge-assertive">
   <ion-nav-view name="home-tab"></ion-nav-view>
 </ion-tab>

 <ion-tab title="About" icon=" ion-ios-paper" href="#/tab/about" badge="5" badge-style="badge-assertive">
   <ion-nav-view name="about-tab"></ion-nav-view>
 </ion-tab>

</ion-tabs>

结果如下:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

离子标签徽章 的相关文章

  • 是否可以以编程方式更改操作栏选项卡指示器

    如何以编程方式更改操作栏的选定选项卡指示器 我读过关于选项卡样式 http developer android com guide topics ui actionbar html Style和 Tab setCustomView 方法 但
  • 将打字稿中的字符串转换为时间格式

    我必须将服务器数据转换为字符串格式13 47 to 01 47PM但我正在尝试 time date hh MM and task time date shortTime 但它显示日期管道错误和参数错误 运行时错误 InvalidPipeAr
  • 如何重启ngOnInit来更新Interpolation

    有办法重新启动吗ngOnInit 改变变量时 因为我想重新开始ngOnInit 改变时theme多变的 这是我的代码 设置 ts export class SettingsPage implements OnInit phraseColor
  • ion-textarea 在 Ionic 5 中动态调整高度

    我正在将我的项目从 Ionc3 迁移到 Ionic5 我有一个 ion textarea 它会随着用户键入而增加高度 并且它在 Ionic3 中工作 以下是代码 HTML 页面
  • 如何获取linux/windows下运行应用程序的图标/图标路径?

    我想要一个打开的窗口及其图标的列表 并用 python 处理它 我以为我很接近 xprop 和 wmctrl 但我不能将它用于我的目的 我可以获取打开的窗口列表wmctrl l 但不知道如何获取任何列出的控件的图标 图标路径 请帮忙 您可以
  • JavaFX 应用程序隐藏 OSX 停靠图标

    我需要隐藏 javafx 应用程序的停靠图标 在普通的 java 应用程序中 这可以通过以下属性来实现 System setProperty apple awt UIElement true 然而 这似乎不适用于 JavaFX Thanks
  • Angular Material mat-form-field 输入字段图标

    在 Angular 项目中我有角材料垫形式场 https material angular io components form field overview我的图标出现在左外侧
  • 有什么方法可以修复 Juno 更新后可怕的工具栏图标吗?

    至少在 Windows 7 上 标题栏颜色看起来可能已更改为蓝色 但是 标题栏图标仅设计用于浅灰色栏 而不是使用 alpha 透明度进行抗锯齿 请注意绿色圆圈 运行 图标边缘周围的白色突出显示 这些图标看起来很可怕 就像我们在 1995 年
  • Vim:垂直选项卡列表可以吗?

    是否可以让 vim 的选项卡列表垂直显示在编辑器的左侧 这确实很有帮助 但我还没有找到任何可以做到这一点的插件 我对谷歌很烂吗 我同意兰迪关于选项卡使用的观点 但前段时间我也在寻找在 gvim 中添加垂直制表符的可能性 为此 您必须修改源
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • chrome 检查器,远程调试在我的移动应用程序上不再正常工作

    我使用 Cordova Ionic 构建了一个渐进式 Web 应用程序 三年来的大部分时间里 我一直在使用开发工具来排除故障并分析我的应用程序的内部工作原理 然而 在过去的几周里 我认为自从 Chrome 更新到 v70 以来 开发工具无法
  • Google 地图 API 标记图标 URL?

    我正在尝试将标记图标更改为 红圈 或 红针 或其他任何内容 在这些代码中 markerOptions icon images beachflag png 标记不显示 但如果我做icon一行注释行 因此标记显示为 red pin icon 所
  • 在 Angular 5 中,如何从父组件访问动态添加的子组件?

    我正在开发一个 Ionic Angular 5 项目 我需要动态加载一些组件 继动态组件加载器示例 https angular io guide dynamic component loader在 Angular 文档中 我能够成功加载组件
  • Protractor+AngularJS+Jasmine - 测试按住项目

    AngularJS 和 Protractor 非常新 但我认为到目前为止我正在朝着正确的方向前进 我的网站有一个项目列表 当您单击该项目并按住 X 秒时 它会打开一个模式窗口 我如何在 Protractor Jasmine 中模拟这种行为
  • ionic:在哪里可以看到显示的控制台日志

    我是 ionic 新手 我正在关注离子框架文档 https ionicframework com docs api components action sheet ActionSheetController 去学习它 这是我的方法的代码 你
  • 如何在运行时更改android应用程序名称和图标?

    安装 Android 应用程序后 当您按下应用程序中的按钮时 是否可以动态更改应用程序图标和名称 在运行时 这是到目前为止的代码 getPackageManager setComponentEnabledSetting new Compon
  • Visual Studio 2013 及更高版本的 Windows 菜单中缺少新的垂直选项卡组?

    我刚刚迁移到 Visual Studio 2013 找不到垂直分割代码窗口的方法 因此我并排有两个不同的文件 在以前的版本中 我可以创建一个新窗口 然后通过选择将其移动到新选项卡创建新的垂直选项卡组从 Windows 菜单 现在我只看到创建
  • php将多维数组内爆为制表符分隔行

    我有一个多维数组 BlockData 其中有 13 个维度和 n 个数组元素 我需要将此数组内爆回单个长字符串 其中元素由 n 换行和尺寸由 t tabs 我尝试过使用array map 功能没有成功 需要帮助来完成此任务 请帮忙 这可以使
  • Visual Studio 2017 - 指定应用程序图标

    我正在尝试将我的图标添加为 Visual Studio 项目中的默认应用程序图标 微软文档 https learn microsoft com en us visualstudio ide how to specify an applica
  • Eclipse 选项卡宽度不变

    我浏览了一些与此相关的帖子 但它们似乎并不能帮助我解决我的问题 我有一个项目 其中 java 文件以 2 个空格的宽度缩进 我想将所有内容更改为 4 空格宽度 我尝试了 正确的缩进 选项 但当我将几行修改为 4 空格缩进时 它只是将所有内容

随机推荐

  • 如何加速向量叉积计算

    嗨 我是这里的新手 正在尝试使用 numpy 进行一些计算 我在一次特定的计算中经历了很长的时间 并且无法找到任何更快的方法来实现同样的事情 基本上它是射线三角形相交算法的一部分 我需要计算两个不同大小的矩阵的所有向量乘积 我使用的代码是
  • aws ecs 优化的 AMI 中的私有 docker 注册表身份验证不成功

    我正在编写一个 terraform 脚本来创建 ECS 自动缩放集群 我创建了一个集群并向其中添加了 ec2 容器实例 我的任务定义文件包含来自私有 docker 存储库的图像 我浏览了 aws 官方文档并找到了一个页面私人登记认证 htt
  • 通过 Geodjango 中的几何交集关联两个模型

    在 GeoDjango 中 两个有两个包含几何字段的模型 from django contrib gis db import models class Country models Model territory models MultiP
  • AudioKit:我可以在不调用 AudioKit.stop() 的情况下禁用 AKMicrophone 吗?

    我有一个具有两个功能的应用程序 一个扮演一个AKMetronome并允许当应用程序不在前台时进行后台播放 另一个是调谐器功能 它使用AKMicrophone 仅当应用程序位于前台时才需要处于活动状态 这些功能可以同时使用 调谐器处于活动状态
  • 为什么我不能在同一结构中存储值和对该值的引用?

    我有一个值 我想存储该值和对的引用 我自己的类型中该值内的某些内容 struct Thing count u32 struct Combined lt a gt Thing a u32 fn make combined lt a gt gt
  • 如何将初始参数传递给 django 的 ModelForm 实例?

    我遇到的具体情况是这样的 我有一个交易模型 其中包含以下字段 from to 两者都是ForeignKeys to auth User型号 和amount 在我的表单中 我想向用户展示 2 个要填写的字段 amount and from t
  • 从命令行运行 Eclipse 项目

    我在从命令行编译和运行 Eclipse java 项目时遇到两个问题 当我刚刚从 Eclipse IDE 运行时 这工作得很好 我尝试过谷歌搜索 但无法真正让事情发挥作用 任何帮助深表感谢 问题 1 当我尝试从 java 文件所在目录以外的
  • 在所有路线上反应加载屏幕?

    我了解如何获得旋转屏幕state and componentDidMount 但我将如何在所有路线之间创建一个加载屏幕而无需编写componentDidMount 在每个组件中 我的 app js 文件 class App extends
  • 无法在 WebView 中输入内容

    我在与某个人交互时遇到问题WebView 我正在显示一个 HTML 登录表单WebView我无法在表单的任何输入字段内键入内容 我确实可以与链接 选择框 按钮等进行交互 这是我的代码的示例 基本上我从 xml 中检索 Web 视图并将其设置
  • 在循环内声明变量,是好习惯还是坏习惯?

    问题 1 在循环内声明变量是好习惯还是坏习惯 我读过有关是否存在性能问题的其他线程 大多数人说不 并且您应该始终将变量声明为靠近它们将要使用的位置 我想知道是否应该避免这种情况 或者是否确实是首选 Example for int count
  • 如何填充页面网格并将内容宽度布置在单列中?

    我正在尝试为网络开发创建弹性框列 然而 我所能做的就是制作一列弹性盒 有哪些基本 CSS 代码可以验证 div 卡是否始终填充页面网格 并且宽度足够小 内容会布局在单列中 charset utf 8 CSS Code section dis
  • 为 matplotlib Slider 小部件设置刻度标签

    The slider https matplotlib org stable api widgets api html highlight slider matplotlib widgets Slidermatplotlib 中的行为随着最
  • ValueError:无法在空集合上计算 LDA(无术语)

    当尝试计算较小规模的语料库的 lda 时 在 python 中出现此错误 但在其他情况下工作正常 语料库的大小是 15 我尝试将主题数设置为 5 然后将其减少到 2 但它仍然给出相同的错误 ValueError 无法在空集合上计算 LDA
  • 计算流中的元素数并返回 Integer 而不是 long

    我需要计算流中的元素并将其分配给一个整数而不进行强制转换 count 确实返回很长 想到了 collect Collectors reducing 但无法弄清楚 我觉得有一些简单的事情我不明白 My Try Stream
  • bootstrap datepicker 设置日期格式 dd/mm/yyyy

    我必须以 dd mm yyyy 格式在日期选择器中设置日期 我想用 Javascript 做的是这样的 var year 2014 var month 5 var day 10 var realDate new Date year mont
  • 使用 Swift CFunctionPointer 将回调传递给 CoreMIDI API

    目前这可能实际上是不可能的 这将是不幸的 我正在尝试调用 CoreMIDI API 来设置 MIDI 输入 这就是我在 Swift 中尝试做的事情 var midiClient MIDIClientRef var inputPort MID
  • 使用 Ruby Enterprise Edition,gems 没有安装在我期望的位置

    我刚刚安装了 Ruby Enterprise Edition 并正在为其安装一些 gem 服务器上还安装了 Stock Ruby 1 8 6 我已经添加了 opt ruby enterprise 1 8 6 20090201 bin to
  • Rails 3:fields_for 在编辑视图上显示空白字段

    在我的 Rails 3 应用程序中 我在 form for 中使用 fields for 来创建和编辑问题和答案 但我在 fields for 上的编辑视图寻求答案时遇到问题 当我在数据库中为 1 个问题注册了 2 个答案时 编辑视图会显示
  • 在 NSTableCellView firstResponder() 中制作 NSTextField

    对于那些不想阅读 20 条评论来寻找答案的人 这对我有用 tableView 是基于视图 而不是基于单元格 属性检查器 tableView reloadData 不够快 使用 insertRow at 0 withAnimation lef
  • 离子标签徽章

    我正在尝试在选项卡中的图标上添加徽章 目前的结果是 http play ionic io app decfc14cb171 http play ionic io app decfc14cb171 有谁知道如何将它们放在每个图标的右上角 我尝