javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Resolves #30068

---------

Add `part` attributes to toolbar for the `background`, `container` and `content`.
This commit is contained in:
fudom
2025-01-23 21:48:58 +01:00
committed by GitHub
parent efd3e0fd2b
commit ac4ea3232b
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/api.txt
View File

@ -2000,4 +2000,7 @@ ion-toolbar,css-prop,--padding-end,md
ion-toolbar,css-prop,--padding-start,ios ion-toolbar,css-prop,--padding-start,ios
ion-toolbar,css-prop,--padding-start,md ion-toolbar,css-prop,--padding-start,md
ion-toolbar,css-prop,--padding-top,ios 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
core/src/components/toolbar/toolbar.tsx
View File

@ -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 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 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. * @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({ @Component({
tag: 'ion-toolbar', tag: 'ion-toolbar',
@ -97,11 +101,11 @@ export class Toolbar implements ComponentInterface {
}), }),
}} }}
> >
<div class="toolbar-background"></div> <div class="toolbar-background" part="background"></div>
<div class="toolbar-container"> <div class="toolbar-container" part="container">
<slot name="start"></slot> <slot name="start"></slot>
<slot name="secondary"></slot> <slot name="secondary"></slot>
<div class="toolbar-content"> <div class="toolbar-content" part="content">
<slot></slot> <slot></slot>
</div> </div>
<slot name="primary"></slot> <slot name="primary"></slot>