How to add a button between list-items

Ionic Framework
1

I want a (plus) button between two existing items of a (reorder) list and the button should appear “on the line” and should not be overlapped by the next item.

I tried like this, but with the following result

<IonButton
  className="plusbutton"
  size="default"
>
  <IonIcon icon={add} slot="icon-only" />
</IonButton>

.plusbutton {
  --border-radius: 50%;
  width: 56px;
  height: 56px;
  transform: translateY(55%);
}

but1

Alternatively I’m satisfied if the button is on the right side next to the line resp. the reorder icon. But putting the button outside of the item leads to strange behavior when reordering.

2

Have you looked the ion-fab and ion-fab-button components?

5

I can’t put fa-buttons relative to the items, I don’t know how to use them in non-static way.

6

I dont understand the UX/UI,What the reasoning behind having a button in the middle of items? why not just place the button within each item? and like jj said, the fab button is your best bet since it hovers over everything else.

I think by having the buttons in between each item will confuse the user since the button is place in an unusual position. The docs explain how to use button within ion-item: ion-item: Input, Edit, or Delete iOS and Android Item Elements

1 Like
7

The button should lead to add a new item in between the two items where the button is placed. I think this is understandable in my case.

But may be you are right and I use a fab button in the a typical position and let the user sort the items afterwards. Thank you for your advice.

8

You’re welcome, here is also some more resources on the topic: lists - What is the best location for the "Add New Button"? - User Experience Stack Exchange.

3 Likes