イオンローにnative IONICの矢印（タップ可能）を追加する方法

Question

<ion-grid>の<ion-row>にネイティブイオン2の右矢印を追加する方法はありますか？私はいくつかの列を持つグリッドを持っていて、最善の解決策を見つけるために助けてください<button ion-item>

用イオン2用途と同じ矢印のUIを使用したいですか？ おかげ

Answer 1

私はあなたの質問の権利を得た場合、私は知りませんが、あなたはこのように行うことができます。

<ion-grid> 
    <ion-row> 
    <ion-col> 
     <ion-icon name="ios-arrow-forward"></ion-icon> <!-- use the ios one to have this chevron right --> 
    </ion-col> 
    </ion-row> 
</ion-grid> 

あなたはそれをして右に行くことができます：

• CSS <ion-icon>のtext-align: right;
• text-rightの属性は<ion-icon>です。
• または、2 <ion-col>を持つ<ion-icon>を持っているために、第2 1を1つずつbeeingてと

<ion-col width-10>のように宣言は、それがお役に立てば幸いです。

Answer 2

あなたはこれを使用することができます：

ion-row { 
    background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2012%2020"><path%20d="M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z"%20fill="%23c8c7cc"/></svg>'); 
    padding-right: 32px; 
    background-repeat: no-repeat; 
    background-position: right 14px center; 
    background-size: 14px 14px; 
} 

Answer 3

はどこrequired- SASSファイルに以下のコードを追加しfrom here

// BEGIN HACK -------------------------------------------------------- 
// I've copied this style from the iOS settings. For some reason, the 
// Android defaults do not have a right arrow on active list items that 
// can be clickable. This seems like a bad UX to me, so I'm adding 
// it here for Android, even if it's not standard. 

$icon-detail-push-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default; 
$item-md-detail-push-color:   $list-md-border-color !default; 

@mixin md-detail-push-icon($fg-color) { 
    $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color); 
    @include svg-background-image($svg); 
} 

button.item:not([detail-none]) .item-inner, 
a.item:not([detail-none]) .item-inner, 
.item[detail-push] .item-inner { 
    @include md-detail-push-icon($item-md-detail-push-color); 
    background-repeat: no-repeat; 
    background-position: right (15px - 2) center; 
    background-size: 14px 14px; 
    padding-right: 32px; 
} 
// END HACK -----------------------------------------------------------