在離子之間添加自定義規則<ion-item>

Question

我想在我的列表中輸入<ion-item>之間的自定義水平線。

我的CSS可以很好地與<ion-list>工作，除了<ion-list>增加了我自己不想要的規則。我只是想要我的自定義規則。

如果我嘗試使用<ion-list no-lines>（移除<ion-list>自動將我的CSS不工作了規則，我沒有得到我的自定義規則

我的CSS是：

.my-item { 
    border-style:solid; 
    border-bottom-width: 11px; 
    border-bottom-color: black; 
} 

我的HTML是：

<ion-list> 
    <ion-item class="my-item>Something</ion-item> 
    <ion-item class="my-item>Something Else</ion-item> 
</ion-list> 

加了我真正的代碼

如果這可以幫助這裏是我使用的實際代碼：

page-my-plans { 
 

 
    } 
 

 
    .pu-my-plans-plus-circle { 
 
     display: block; 
 
     //border: 2px solid white; 
 
     background-color: $pu-orange; 
 
     border-radius: 50%; 
 
     height: 38px; 
 
     width: 38px; 
 
    } 
 

 
    .pu-my-plans-plus-circle span { 
 
     font-size: 38px; 
 
     font-weight: 100; 
 
     color: white; 
 
     position: absolute; 
 
     top: -7px; 
 
     left: 8.5px; 
 
    } 
 
    .pu-plan-addButton { 
 
     font-size: 30px; 
 
     margin-right: 14px; 
 
     margin-top:-2px; 
 
    } 
 

 

 
    .pu-section-list-item{ 
 
     color: black; 
 
     font-weight:$pu-item-font-weight; 
 
     font-size:$pu-item-font-size; 
 
     padding-left:20px; 
 
     padding-right:0px; 
 
     margin-bottom: 4px; 
 
    } 
 
    .item{ 
 
     background: transparent !important; 
 
    } 
 

 

 
    // THEMING CSS 
 
    // =========== 
 
    // 
 
    .pu-my-plans-background { 
 
     background-image: url("../assets/img/PU_Light_BG_1.png"); 
 
     background-size: cover !important; 
 
    } 
 
    .pu-my-plans-item { 
 
     border: none; 
 
     border-bottom: 11px solid black; 
 
    } 
 
    .pu-my-plans-plan-date { 
 
     color: black; //$pu-orange; 
 
     font-size: 11px; 
 
     font-weight: 200; 
 
    }

<ion-content class="pu-my-plans-background"> 
 

 
    <div *ngIf="hasPlans"> 
 
    <ion-list no-lines class="pu-item-list"> 
 
     <!--<ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">--> 
 
     <ion-item-sliding *ngFor="let plan of plans; let i = index" > 
 
      <ion-item class="pu-section-list-item pu-my-plans-item" (click)="editPlan(plan.id, plan.rev, plan.title, i)"> 
 
      {{ plan.title }} 
 
      <br> 
 
      <span class="pu-my-plans-plan-date">{{ plan.updated}}</span> 
 
      <button *ngIf="plan.important" ion-button clear item-right> 
 
       <ion-icon name="ios-alert-outline"></ion-icon> 
 
      </button> 
 
      </ion-item> 
 
      <ion-item-options side="right"> 
 
      <button ion-button color="danger" (click)="deletePlan(plan.id, plan.rev)"> 
 
       <ion-icon name="delete"></ion-icon> 
 
       Delete 
 
      </button> 
 
      </ion-item-options> 
 
      <div class="xxx">SOME TEXT</div> 
 
     </ion-item-sliding> 
 
     <!--</ion-item-group>--> 
 
    </ion-list> 
 
    </div> 
 

 
</ion-content>

有了這個代碼，我試圖得到一條邊框的規則失敗。如果我將no-lines添加到<ion-list>我的邊框可以工作，但我也可以得到<ion-list>生成的線條。

這是它看起來像上面的代碼：

如果我帶走no-rules它看起來像這樣：

有在底部的規則的列表和最後一項沒有我想申請的邊界。

Answer 1

只需重新設置自己的邊框即可。

.my-item { 
    border: none; 
    border-bottom: 11px solid black; 
} 

編輯：

離子2的iOS風格也含有特定的最後一個子規則，它的邊界，這是需要在此重寫的。

.list-ios>.item-block:last-child, .list-ios>.item-wrapper:last-child .item-block { 
    border-bottom: .55px solid #c8c7cc; 
} 

Answer 2

我可以幫助你，但我需要訪問源代碼。 http://view.ionic.io/