Skip to content

ion-fab-list with texts #17586

@bodinaren

Description

@bodinaren

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request
I'd like to see the ion-fab-list having support for texts or other content besides just ion-fab-button. In my case I would like to show texts.

Describe Preferred Solution
As a matter of fact, you can already have text instead of icons pretty easily by using an ion-button inside instead of an ion-fab-button. It's a simple matter of adding two extra styles as shown below.

Related Code
Stackblitz example

This is the relevant CSS:

ion-fab[horizontal="start"] ion-fab-list {
  left: 0;
  align-items: flex-start;
}

ion-fab[horizontal="end"] ion-fab-list {
  right: 0;
  align-items: flex-end;
}

It does need slightly more advanced styling that what I've done here. It'd need to adjust for RTL, and you might also want to limit it to ion-fab-list[side="top"] and ion-fab-list[side="bottom"] as they're the only two cases where this makes sense.

Additional
I would be willing to submit a PR for this if approved.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions