ionic 编辑常用布局 （实用、赞）

先上图：

一、加按钮

html

<ion-item>
    <ion-label>规格名称</ion-label>
    <ion-input formControlName="SpecName" text-right></ion-input>
    <button class="btn-spec" item-right ion-button clear type="button"  (click)="selectSpec()">
        <ion-icon class="sm-ico-dropdown" name="arrow-dropdown" ios="md-arrow-dropdown" md="md-arrow-dropdown"></ion-icon>
    </button>
</ion-item>

css

 /*与其它下拉箭头对齐*/
.btn-spec {
    margin-right: -3px !important;
    margin-left: 19px !important;
}

 .sm-ico-dropdown {
    font-size: 21px;
    color: rgb(153, 153, 153);
}

 二、选项

htm

    <ion-item required>
        <ion-label>启用状态</ion-label>
        <ion-select interface="popover" formControlName="Enabled">
            <ion-option value='1'>启用</ion-option>
            <ion-option value='0'>停用</ion-option>
        </ion-select>
    </ion-item>

 

三、常规 

html
 

<ion-item>
    <ion-label>消费积分</ion-label>
    <ion-input type="number" formControlName="ScoreValue" text-right></ion-input>
</ion-item>

四、1行2个字段  (div 包含多个 ion-label)
 
html
 

<div class="sm-multi-col-item" [ngClass]="{'is-ios':platForm == 'ios'}">
     <ion-label class="my-label">积分换购</ion-label>

     <ion-label class="input-box">
        <ion-input type="number" formControlName="ScoreToItemPrice" text-right ></ion-input>
        <span class="remark">元 + </span>
     </ion-label>
 
     <ion-label class="input-box">
       <ion-input type="number" formControlName="ScoreToItemValue" text-right ></ion-input>
       <span class="remark">分</span>
     </ion-label>
</div>

 css
 

.sm-multi-col-item.is-ios {
    border-bottom: 0.55px solid #c8c7cc;
}

//1行2字段
.sm-multi-col-item {
    display: flex;
    align-items: baseline;
    margin-left: 16px;
    padding-right: 8px;
    border-bottom: 1px solid #dedede;
    font-size: 1.6rem;

    .my-label.label-md {
        color: #999;
    }

    .input-box {
        display: flex;
        align-items: baseline;

        ion-input .text-input {
            margin-top: 6px;
            margin-bottom: 6px;
        }

        .remark {
            color: #999;
        }
    }
}

五、多行
 
html

<ion-item>
    <ion-label>说明</ion-label>
    <ion-textarea rows="4" formControlName="Remark"></ion-textarea>
</ion-item>

六、多个选项 (用ion-col装ion-item)
 
 

<ion-row class="option-row" [ngClass]="{'is-ios':platForm == 'ios'}">
    <ion-col col-6>
        <ion-item no-lines>
            <ion-checkbox formControlName="Online" text-right></ion-checkbox>
            <ion-label>线上产品</ion-label>
        </ion-item>
    </ion-col>
    
    <ion-col col-6>
        <ion-item no-lines>
            <ion-checkbox formControlName="Offline" text-right></ion-checkbox>
            <ion-label>线下产品</ion-label>
        </ion-item>
    </ion-col>
</ion-row>

css

/*Editor页面中一行多个选项样式*/
ion-row.option-row {
    margin-left: 16px;
    border-bottom: 1px solid #dedede;

    ion-col {
        ion-item {
            padding-left: 0 !important;

            ion-checkbox {
                margin-right: 9px !important;
            }

            .item-inner {
                padding-right: 0 !important;
            }
        }
    }
}

ion-row.option-row.is-ios{
    border-bottom: 0.55px solid #c8c7cc;
}