Question

我在尝试移除离子应用程序中的离子头边框底部时遇到问题

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>

我尝试了一切（在浏览器中我看不到这个边框！），但没有什么可以改变的！有人可以帮我试图找到删除边框的方法吗？注：：还尝试编辑ionic.css并仅在浏览器中进行更改。

编辑：它应该只在此视图中隐藏，因此该类是透明的

Answer 1

没问题，

只需将其添加到自定义CSS：

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

Answer 2

通过使用ionic-header no-border，将删除所有边框。

Option Explicit

Sub Demand_Minus_Storage()
Dim QT As Integer
Dim i As Integer

Dim Demand_WB As Workbook
Set Demand_WB = Workbooks.Open("C:\Users\rosipov\Desktop\eliran\MFG - GSS\Demand_Optics " & Format(Now(), "dd.mm.yyyy") & ".xlsx")

Dim storage_wb As Workbook
Set storage_wb = Workbooks.Open("C:\Users\rosipov\Desktop\eliran\MFG - GSS\OpticLabStorage.xlsm")


storage_wb.Worksheets("Illuminator").Range("C3").Activate
Set QT = ActiveCell.Value
Demand_WB.Worksheets("Illuminators").Activate



End Sub

Answer 3

对于离子5，应该是

<ion-header class="ion-no-border"></ion-header>

Answer 4

@BenNov回答对我不起作用。

这就是我所做的去除离子导航条底部边框

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

我正在使用ionic-1.0.0-rc.4

Answer 5

选项1：使用溢出CSS属性

ion-header {
    overflow: hidden;
}

选项2：使用

的无边界财产

<ion-header no-border><ion-header>

Answer 6

这为我在离子1.1.0上删除了标题和标签之间的边界

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

Answer 7

我就是这样解决的...

给ion-header的 ion-toolbar 子类提供一个类似于“ headerMain”的类，并在下面应用CSS。

css：

.headerMain {
    border-bottom-width: 0;
}

Answer 8

对于Ionic 5，这对我有用：

<ion-header class="ion-no-border"></ion-header>

删除离子头中的边框底部

8 个答案: