Ionic Angular -滑动选项文本隐藏

ocebsuys 于 2023-04-27 发布在 Ionic

关注(0)|答案(1)|浏览(148)

下面的代码生成了一个ion-item-sliding元素列表，其中的标签是一些文本，然后按钮（最终）允许用户编辑/删除当前项：

<ion-list *ngIf="examples | async; else loading">
  <ion-item-sliding *ngFor="let example of examples | async">
    <ion-item>
      <ion-label>{{example.ExampleName}}</ion-label>
    </ion-item>
    
    <ion-item-options>
      <ion-item-option>Edit</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

问题是，如果其中一个项目的标签中只有很少的文本，则整个标签将被隐藏（见图）。
有没有一种方法可以使文本从右到左隐藏而不是从左到右隐藏？例如，使用上面的截图，最上面的条目会说“This is an example with a lot”，然后“of text”会被切断。

ionic-framework

来源：https://stackoverflow.com/questions/76097496/ionic-angular-sliding-option-text-hidden

1条答案

按热度按时间

imzjd6km1#

我尝试了一个小的变通方案与事件（ionDrag）和getOpenAmount应用的利润基地的幻灯片.这需要一点更多的工作重置，但它的技巧，以避免标签消失.
查看这里的方法：https://ionicframework.com/docs/v6/api/item-sliding#methods

超文本标记语言

<ion-list>
  <ion-item-sliding (ionDrag)="testMargin($event)" slot="end">
    <ion-item>
      <ion-label id="testId">This label</ion-label>
    </ion-item>

    <ion-item-options>
      <ion-item-option>Edit</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
  <ion-item-sliding>
    <ion-item>
      <ion-label>That label</ion-label>
    </ion-item>

    <ion-item-options>
      <ion-item-option>Edit</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

testMargin(ev: any) {

    ev.target.getOpenAmount().then((el) => document.getElementById('testId').style.marginLeft = el + 'px');

  }

赞(0）回复(0）举报 2023-04-27

我来回答

Ionic Angular -滑动选项文本隐藏

1条答案

相关问题

热门标签

最新问答