javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(item): Create .icon-accessory and remove auto nav icons, closes #1061

Browse Source 
BREAKING CHANGE: The developer should be stating exactly how an icon
should show, but previously the right nav arrow icon violates this by
automatically showing a right arrow when an item was an anchor or
button. Instead of using the `:after` item selector, which was always
applied by default, it uses the same markup as `item-icon-right`, which
is easier to understand, customizable and not a hard coded default.

This change removes the `:after` nav icon styling, and creates a new
class, `icon-accessory`, based off of similar CSS. The change makes a
nav arrow highly customizable, allows RTL developers to easily control
the arrow direction, and the accessory class is something that's
reusable.

An example of right side arrow using `ion-chevron-right` as the icon:

    <a class="item item-icon-right" href="#">
      Check mail
      <i class="icon ion-chevron-right icon-accessory"></i>
    </a>
This commit is contained in:
Adam Bradley
2014-04-07 15:33:32 -05:00
parent 518e54ee86
commit c7e3defca5
3 changed files with 40 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
test/html/lists.html
View File

@@ -36,9 +36,20 @@
Check mail
</a>
<a href="#" class="item item-icon-left">
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-right">
Right side nav icon
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-chevron-left icon-accessory"></i>
Left side nav icon
</a>
</div>
@@ -49,10 +60,11 @@
Work
</div>
<a href="#" class="item item-icon-left">
<a href="#" class="item item-icon-left item-icon-right">
<i class="icon ion-email"></i>
Check mail
<span class="badge">5</span>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<div class="item item-icon-left item-button-right">
@@ -364,7 +376,7 @@
<div class="item-content">
<i class="icon ion-heart brand-assertive fill-icon"></i>
Madison, WI
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</a>
@@ -372,7 +384,7 @@
<div class="item-content slide-left">
<i class="icon ion-image brand-energized fill-icon"></i>
Driving Directions
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
@@ -383,7 +395,7 @@
<div class="item-content slide-right">
<i class="icon ion-ios7-cog gray fill-icon"></i>
Settings
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
</a>
@@ -418,7 +430,7 @@
Default has no wrap! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
@@ -426,7 +438,7 @@
Assigned "item-text-wrap". This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
<a href="#" class="item item-complex item-icon-left item-icon-right item-slider">
@@ -435,7 +447,7 @@
Default no wrap and has item-content! This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
@@ -448,7 +460,7 @@
Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
really really really really long long long long long long
text text text texxxxxttt text testy text!!!
<i class="icon ion-chevron-right"></i>
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
<div class="item-options">
<button class="button">Button</button>
@@ -465,7 +477,7 @@
<h3>Thumbnails .item-thumbnail</h3>
<div class="list">
<a href="#" class="item item-avatar">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
@@ -473,7 +485,7 @@
</div>
</a>
<a href="#" class="item item-avatar">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
<h2>Nevermind</h2>
@@ -481,7 +493,7 @@
</div>
</a>
<a href="#" class="item item-avatar">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
<h2>License To Ill</h2>
@@ -489,7 +501,7 @@
</div>
</a>
<a href="#" class="item item-avatar">
<a href="#" class="item item-avatar-left">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
<h2>gjpqy</h2>