Skip to content

feat(toolbar): add shadow parts for background, container, and content #30069

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 23, 2025
Merged

feat(toolbar): add shadow parts for background, container, and content #30069

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
329048c
feat(toolbar) Add shadow parts
fudom Dec 10, 2024
1f4390d
docs(toolbar): document parts
brandyscarney Jan 22, 2025
17638be
Merge branch 'feature-8.5' into #30068
brandyscarney Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2000,4 +2000,7 @@ ion-toolbar,css-prop,--padding-end,md
ion-toolbar,css-prop,--padding-start,ios
ion-toolbar,css-prop,--padding-start,md
ion-toolbar,css-prop,--padding-top,ios
ion-toolbar,css-prop,--padding-top,md
ion-toolbar,css-prop,--padding-top,md
ion-toolbar,part,background
ion-toolbar,part,container
ion-toolbar,part,content
10 changes: 7 additions & 3 deletions core/src/components/toolbar/toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
* @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
* @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
* @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
*
* @part background - The background of the toolbar, covering the entire area behind the toolbar content.
* @part container - The container that wraps all toolbar content, including the default slot and named slot content.
* @part content - The container for the default slot, wrapping content provided without a named slot.
*/
@Component({
tag: 'ion-toolbar',
Expand Down Expand Up @@ -97,11 +101,11 @@ export class Toolbar implements ComponentInterface {
}),
}}
>
<div class="toolbar-background"></div>
<div class="toolbar-container">
<div class="toolbar-background" part="background"></div>
<div class="toolbar-container" part="container">
<slot name="start"></slot>
<slot name="secondary"></slot>
<div class="toolbar-content">
<div class="toolbar-content" part="content">
<slot></slot>
</div>
<slot name="primary"></slot>
Expand Down
Loading