ionic-item 颜色和 href 不起作用

2024-01-09

我开始了一个基于侧菜单模板的离子项目。我试图更改侧面菜单中每个元素的背景颜色(我希望每个项目都有不同的颜色)。

我尝试添加离子颜色类:

<ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item class="positive-bg" nav-clear menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item class="calm-bg" nav-clear menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item class="assertive-bg" nav-clear menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item nav-clear menu-close class="balanced-bg" href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>

它在登录元素上效果很好,但在其他元素上效果不佳。删除其他元素上的 href 属性是有效的...我怎样才能拥有背景颜色和 href 元素?


An ion-item with a href属性呈现不同。欲了解更多信息why参见 dfsq 的回答

你可以做的是而不是使用ion-list指令,使用类:

<ion-content>
    <ul class="list">
        <a href="" class="item positive-bg" nav-clear menu-close ng-click="login()">Login</a>
        <a href="#/app/search" class="item calm-bg" nav-clear menu-close>Search</a>
        <a href="#/app/browse" class="item assertive-bg" nav-clear menu-close>Browse</a>
        <a href="#/app/playlists" class="item balanced-bg" nav-clear menu-close>Playlists</a>
    </ul>
</ion-content>

Codepen 上的演示 http://codepen.io/anon/pen/PqwMGZ

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

ionic-item 颜色和 href 不起作用 的相关文章

  • jQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见

    我正在寻找一种方法来确定使用 JavaScript jQuery 是否显示 WooCommerce 商店通知 商店通知的 HTML 看起来像这样 p class woocommerce store notice demo store sty
  • Google 字体衬里数字

    我正在使用Raleway http www google com fonts specimen Raleway字体和谷歌字体的描述说 下载的内容既有旧风格 也有衬里数字 我找不到任何说明文件how到行数字 有谁知道我该怎么做 回答我自己的问
  • 需要为每个图例文本高图应用背景颜色

    正如我在问题中所说 我希望改变我的传奇 例如 FROM TO 我已经尝试过这个背景颜色 legend backgroundColor CCC layout horizontal floating true align left vertic
  • 使用 Phaser.js 和 Ionic 开发游戏应用程序(渲染缓慢/不稳定)

    只是为了让您知道 以防有人想要开发 我使用 Phaser js 开发了一个游戏应用程序 我将代码放入 Ionic 空白启动应用程序中 所以基本上视图是使用 Ionic 应用程序渲染的 然后 Phaser 通过 id 选取 div 并显示游戏
  • 在 Asp.Net 中以编程方式添加样式表

    我想以编程方式在头部添加样式表 但我看到的示例之一似乎需要多行代码才能添加一个样式表 即使我可能需要很多 示例代码 HtmlLink css new HtmlLink css Href css fancyforms css css Attr
  • 是否可以使用 jQuery UI 限制 selectmenu 小部件的高度?

    我一直在尝试通过设置来做到这一点size来源的属性select元素 但它被忽略了 小部件似乎没有任何高度设置选项 是否可以 该小部件当前在隐藏了溢出的 div 对话框内工作 因此下拉列表 始终为 26 个项目 会从 div 中消失 一些CS
  • 严格的 DocType 在 FF/Chrome 中强制规定最小表格行高

    我以前从未注意到的事情 但似乎在 Chrome Firefox 可能还有 Opera Safari 我没有专门检查这些 中 使用严格的文档类型可以防止表行显示小于我无法显示的值来确定计算 以下文档在 IE7 中的显示方式与人们想象的一样 所
  • 使用 javascript 设置最大高度

    我有一个 div 这个 div 的最大宽度是用户定义的 我知道我可以使用 element style height 完成它 但这在 IE 中不起作用 关于如何使用 javascript 实现 Firefox 的最大高度等效项有什么想法吗 通
  • Bootstrap 手风琴菜单不起作用

    我设计了一个如图所示的手风琴菜单 如果单击菜单 打开的菜单将关闭 这就是手风琴的功能 但在这个设计中 我逐个单击菜单 但前一个没有关闭 如何解决这个问题 提前致谢 jQuery document ready function var acc
  • AngularJs 数据绑定不适用于 ionic

    我觉得我在离子输入文本中遗漏了一些明显的东西 我在用angular ui router这条路线 stateProvider state findPersons url findPersons templateUrl html findPer
  • Chrome DevTools:计算样式与 css 规则不同?

    当我在 CSS 文件中定义 4px 时 我的 DOM 元素的 border top width 怎么可能是 0px 当我使用 Chrome DevTools 检查元素时 我发现计算的样式告诉 0px 而最上面的 css 规则是 4px 而且
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • 有 CSS 的替代品吗?

    是否有替代 CSS 的样式表格式化语言 或者 CSS 是当前用于执行样式表格式化类型操作的单一语言 我查看了维基百科上 CSS 的描述 http en wikipedia org wiki Cascading Style Sheets ht
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐

  • JSR250:CommonAnnotations for Java,2.3:@Resource 方法必须是遵循标准 JavaBeans 约定的 setter

    我在这条线上遇到问题 Resource public void setMessageDrivenContext MessageDrivenContext context this context context 消息是 JSR250 Jav
  • 将从mongo返回的日期转换为这种格式2015-10-25

    我有一个从 mongo db 返回的 json 文件 如下所示 id date 2014 10 19T04 00 00 000Z value 29 id date 2014 10 20T04 00 00 000Z value 20 id d
  • 使用OpenMP计算PI值

    我正在尝试通过并行化蒙特卡罗代码来学习如何使用 OpenMP 该代码通过给定的迭代次数计算 PI 的值 代码的核心内容是这样的 int chunk CHUNKSIZE count 0 pragma omp parallel shared c
  • Simplecov gem 在 Rails 中缺少未经测试的文件

    Using simple covRails 应用程序中的 gem 我们可以将未测试的文件包含在报告中吗 如果是 怎么办 如果不是 该文件应该计入覆盖率 对吧 尝试编辑您的config environments test rb并设置这一行 c
  • PhpStorm 中有选择当前行的键盘快捷键吗?

    在 PhpStorm 中有扩展选择的快捷方式ctrl w 有没有选择当前所有行的快捷方式 我正在寻找类似的东西ctrl l在崇高 这样的操作是可用的 但分配的快捷键 如果有 取决于实际使用的键盘映射 任何状况之下 Settings Pref
  • 确认第一条消息后发送第二条消息。 RabbitMQ 保证顺序吗?

    假设多个生产者发布到同一个交易所 E 扇出 每个生产商都有自己的渠道 队列 Q 绑定到交换机 E 生产者 P1 向 E 发布消息 M1 并从 E 接收确认 A1 只有在确认 A1 后 第二个生产者 P2 才发布第二条消息 M2 Rabbit
  • 矩阵和向量的逐元素点积[重复]

    这个问题在这里已经有答案了 确实有类似的问题here https stackoverflow com questions 26168363 elegant expression for row wise dot product of two
  • 我可以在套件中运行单个测试吗?

    我已经为我的结构设置了一个测试套件 https github com stretchr testify suite package https github com stretchr testify suite package 在我能够通过
  • 在 iOS 中同时管理文本转语音和语音识别

    我想要我的iOS我正在开发一个应用程序 使用文本转语音功能向用户朗读从服务器接收到的一些信息 并且我还想允许用户通过语音命令停止此类语音 我尝试过 iOS 的语音识别框架 例如OpenEars我发现问题在于它正在监听和检测应用程序本身 说
  • 在 mouseenter 上旋转 div 元素并在 mouseleave 上停止旋转

    我搜索了很多 但我无法理解其实现 我是初学者 所以请帮助我 div style height 100 width 100 background color blue div javascript var x 0 var y function
  • 为什么我的开发团队应该拥有构建服务器?

    我们知道这是好事 但我发现自己向我的雇主证明了这一点 请说明为什么开发团队需要构建服务器 使用构建服务器有多种原因 没有特定的顺序 但我的脑海中浮现出以下内容 您可以简化开发人员的工作流程并减少出错的机会 您的构建服务器可以处理多个步骤 例
  • 仅在使用 jquery 最后一个键后进行 Keyup

    我正在编写一个简单的脚本来提取输入 keyup 事件的数据库信息 我遇到的问题是每次用户按下一个键时总是重复 keyup 事件 如何才能使其仅在按下最后一个键后才起作用 我想我应该在每次按键后使用像 setTimeOut 这样的函数 但我不
  • Java 中的虚拟(派生)属性是什么?

    我应该创建一个派生属性 该属性将具有处理 Mark E Brown 等值的访问器和修改器 我不明白这个词 这对我来说是新的 帮助 public String getFullName return fullName getFirstName
  • 如何增加雷达图 MPAndoid Chart 的大小?

    I want to increase size of MPAndroid Radar Chart I observed that the size increases gradually when i increase size of th
  • 使用mockito“无法解析方法”

    I use org springframework security core Authentication其中有一个方法 Collection
  • 字符串格式正值和负值以及条件颜色格式 XAML

    我正在寻找一种简单的方法来使用以下标准格式化结果 如果为正 则添加加号并将其显示为绿色 如果为负则添加减号并将其显示为红色 我已经完成了一半 我只是不知道获得颜色格式的最简单方法是什么 有没有一种不使用值转换器的方法
  • cpp文件中的C++变量可以定义为特殊符号β吗

    我们可以使用特殊字符在 C C 中定义变量吗 例如 double 如果是 如何实现这一目标 根据CPP标准工作草案 N4713 5 10 标识符 lex name 标识符是任意长的字母和数字序列 标识符中的每个通用字符名应指定一个字符 该字
  • iOS:如何获取安装引用源

    我想了解用户如何使用什么来源 归因 安装应用程序 对于 Android 可以获取引用者的 URL 但我还没有找到针对 iOS 的明显方法 有外部服务 例如 AppsFlyer http support appsflyer com entri
  • 将 QString 转换为 std::string

    我看过其他几篇关于将 QString 转换为 std string 的帖子 它应该很简单 但不知怎的 我收到了一个错误 我的代码使用cmake编译成VS项目 我使用的是VS Express 所以QT库没有问题 而且我编写的GUI除了这部分之
  • ionic-item 颜色和 href 不起作用

    我开始了一个基于侧菜单模板的离子项目 我试图更改侧面菜单中每个元素的背景颜色 我希望每个项目都有不同的颜色 我尝试添加离子颜色类