【问题标题】:ItemSliding is not working with buttonItemSliding 不适用于按钮
【发布时间】:2018-02-25 10:54:04
【问题描述】:

你能告诉我为什么我看不到Me 按钮吗?我用过ItemSliding

这里是stackblitz。请查看home 文件夹。

我想创建以下类型的列表:

用户界面

.html

<ion-list>
        <ion-item-sliding #item>
            <ion-item>
                <button ion-button class="buttoncls">Me</button>
                <ion-label fixed>Members</ion-label>
            </ion-item>
            <ion-item-options side="right">
                <button ion-button (click)="deleteMember(item)" color="danger">
            <ion-icon name="ios-trash-outline"></ion-icon>
            </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>

【问题讨论】:

    标签: css angular typescript sass ionic3


    【解决方案1】:

    那是因为ion-item 组件具有预定义的选择器集,可用于在该组件内进行转换。 Git repo

     '<ng-content select="[item-start],[item-left],ion-checkbox:not([item-end]):not([item-right])"></ng-content>' +
        '<div class="item-inner">' +
          '<div class="input-wrapper">' +
            '<ng-content select="ion-label"></ng-content>' +
            '<ion-label *ngIf="_viewLabel">' +
              '<ng-content></ng-content>' +
            '</ion-label>' +
            '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
          '</div>' +
          '<ng-content select="[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' +
          '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' +
        '</div>' +
    '<div class="button-effect"></div>',
    

    所以只需添加例如item-start 属性就像

    <button ion-button item-start class="buttoncls">Me</button>
    

    看看Forked Stackblitz

    item-right 看起来像 Example

    【讨论】:

    • 最好使用item-end 而不是item-right
    • 哦.. 超级。非常感谢:)
    猜你喜欢
    • 2018-05-10
    • 2017-12-17
    • 2012-06-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-23
    • 2021-01-30
    相关资源
    最近更新 更多