3

主なナビゲーション方法がタブである Ionic プロジェクトに取り組んでいます。中央のタブを目立たせる必要があるため、scss で次のようなスタイルを作成しました。

i.icon.ion-ios-camera {
    height: inherit;
    border-radius: 100em;
    background-color: #ff5b38;
}

バーベキューを行ったときと同じようにこれを行ったionic serveところ、タブが次のように表示されました。

<ion-tab title="Post" icon="ion-ios-camera" href="#/home/post">
    <ion-nav-view name="tab6"></ion-nav-view>
</ion-tab>

次のようにコンパイルされます。

コンパイル済みタブ

そのため、コンパイルされたアイコンのスタイルを作成するだけだと考えました(タブ全体ではなく、タブアイコンのみをスタイルしたい)。奇妙なことに、これはうまくいきませんでした。ただし、その要素を調べて、次のようにスタイルを追加すると機能します。

インスペクタによるスタイルの編集

最終結果は次のようになります。

タブ

<i>しかし、インスペクターでタグを直接編集してこれらのスタイルを実現することしかできません。私が上に投稿したスタイル (ionic.app.scss ファイルにあります) は、アイコンのスタイルを変更しません。私は何か間違ったことをしていますか？スタイルが正しくコンパイルされませんか?

4

3 に答える 3

2

代わりに以下のスニペットを使用してください。

.tabs i.icon.ion-ios-camera {
  height: inherit;
  background-color: #ff5b38;
  border-radius: 100em;
}

.tabs i.icon.ion-ios-camera:before {
  color: white;
}

ちなみに、sass を使っている場合はgulp sassorionic setup sassが実行されていることを確認してください。これがお役に立てば幸いです。

于 2016-04-27T01:49:35.633 に答える
1

実行してみましたか: ionic setup sass?

ionic プロジェクトで sass をセットアップします。その後ionic serve、SASS を実行すると、プロジェクトの css フォルダーにコンパイルされます。

www/css にある style.css にコードを追加することもできます。

ionic を使用した sass のセットアップに関する記事全文は、http://ionicframework.com/docs/cli/sass.html で確認できます。

于 2016-04-26T23:58:50.577 に答える