Skip to content

feat(toolbar): add titlePlacement prop to control title position relative to content#31034

Open
brandyscarney wants to merge 7 commits intonextfrom
FW-7054
Open

feat(toolbar): add titlePlacement prop to control title position relative to content#31034
brandyscarney wants to merge 7 commits intonextfrom
FW-7054

Conversation

@brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Mar 24, 2026

Issue number: internal


What is the current behavior?

The ionic theme currently only supports aligning the toolbar title to the center.

What is the new behavior?

  • Adds titlePlacement property to toolbar
    • This property currently only works for the ionic theme as it is the only theme that supports the new center implementation
    • Set to "start" to place the title to the left in LTR and to the right in RTL
    • Set to "center" to center the title within the toolbar
    • Set to "end" to place the title to the right in LTR and to the left in RTL
  • Adds an e2e test for title-placement which takes screenshots for the ionic theme only

Does this introduce a breaking change?

  • Yes
  • No

Other information

Preview

@vercel
Copy link

vercel bot commented Mar 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Mar 25, 2026 1:36pm

Request Review

@github-actions github-actions bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package labels Mar 24, 2026
return this.titlePlacement;
}

return getIonTheme(this) === 'ionic' || getIonTheme(this) === 'ios' ? 'center' : 'start';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While this property doesn't work with ios or md yet, this will be needed eventually when we update them to work with it.

* `"center"`: The title will appear in the center of the toolbar.
* `"end"`: The title will appear to the right of the toolbar content in LTR and to the left in RTL.
*/
@Prop() titlePlacement?: 'start' | 'center' | 'end';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose to add titlePlacement to the toolbar because it controls all the positioning logic, but if we would prefer to add placement as a property on ion-title we could assign it there and pass it up to ion-toolbar.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this fixed a bug. The only reason the title wasn't centered in the two cases where it was left-aligned is because it had size="small" on it. I don't think this should change the alignment but I can change it back if desired.

@brandyscarney brandyscarney marked this pull request as ready for review March 25, 2026 13:54
@brandyscarney brandyscarney requested a review from a team as a code owner March 25, 2026 13:54
@brandyscarney brandyscarney requested a review from ShaneK March 25, 2026 13:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant