web-dev-qa-db-ja.com

イオンヘッダーのボーダー下部を削除

ionicアプリで、イオンヘッダーの境界線の下を削除しようとして問題が発生しました

you could see my ionic header with border here

tab-home.htmlのコードは次のとおりです：

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>
            <!--<ion-nav-bar class="bar-transparent">
            </ion-nav-bar>-->
            <ion-pane ng-controller="CardsCtrl">
            <!--<ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon ion-navicon"></button>
            </ion-nav-buttons>-->
            <td-cards>
            <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
            <div class="image">
            <!--<div class="yes-text" ng-style="leftTextOpacity">LIKE</div>-->
            <img ng-src="{{card.image}}">
            <!--<div class="no-text" ng-style="rightTextOpacity">NOPE</div>-->
            </div>
            </td-card>
            </td-cards>
            </ion-pane>
            </ion-view>

ご覧のとおり、私たちが関心を持っている部分は次のとおりです。

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>

私はすべてを試しましたが（ブラウザではこの境界線が表示されません！）、それを変更するものはありません！誰かがその境界線を削除する方法を見つけるのを手伝ってくれるでしょうか？ N.B. ：ionic.cssの編集も試み、ブラウザーでのみ変更しました。

編集：このビューでのみ非表示にする必要があるため、クラスはバー透過です

htmlcssborderionic-framework
19
Ludovico Loreti

問題ない、

これをカスタムCSSに追加するだけです。

.bar-header {
    border: 0px !important;
    border-bottom-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
}
33
BenNov

Ionic-header no-borderを使用すると、すべての境界が削除されます。

<ion-header no-border>
39
H S Progr

@BenNovの回答が機能しません。

これは、イオンナビゲーションバーの下枠を削除するために行ったものです

.bar {
    background-size: 100% 0px;
}

ionic-1.0.0-rc.4を使用しています

8
Tommaso Resti

オプション1：オーバーフローCSSプロパティを使用する

ion-header {
    overflow: hidden;
}

オプション2：の境界なしプロパティを使用する

<ion-header no-border><ion-header>
1
angelhernandez

これにより、ionic 1.1.0でヘッダーとタブの間の境界線が削除されました

.bar-header {
    box-shadow: none;
    height: 45px;
}
0
Morris Mukiri