Summary
PageContainer could use a few extra slots:
preTitle : an element that is placed immediately before the h# element that contains the title
postTitle : an element that is placed immediately after the h# element that contains the title.
preTitle, title, postTitle should wrap into new rows in smaller widths
These should be siblings to the h#, not children
An alternative approach would be to allow a ReactNode for the title prop (or turn it into a slot?), in which case it's up to the user to implement the HTML structure correctly, and the PageContainer simply renders it in place of where it's currently rendering <h#>{title}</h#>, completely replacing this with whatever the user passed as title.
If a string is passed as title then it works like it does now.
Examples
e.g.
I need to add an icon before the title and some extra information after it.
Motivation
Needing to achieve something like this:
Search keywords: PageContainer, title, customization
Summary
PageContainercould use a few extra slots:preTitle: an element that is placed immediately before theh#element that contains thetitlepostTitle: an element that is placed immediately after theh#element that contains thetitle.preTitle,title,postTitleshould wrap into new rows in smaller widthsThese should be siblings to the
h#, not childrenAn alternative approach would be to allow a
ReactNodefor thetitleprop (or turn it into a slot?), in which case it's up to the user to implement the HTML structure correctly, and thePageContainersimply renders it in place of where it's currently rendering<h#>{title}</h#>, completely replacing this with whatever the user passed astitle.If a
stringis passed astitlethen it works like it does now.Examples
e.g.
I need to add an icon before the title and some extra information after it.
Motivation
Needing to achieve something like this:
Search keywords: PageContainer, title, customization