Skip to content

feat(ui5-panel): expose header-wrapper part #13571

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
ndeshev merged 1 commit into from
May 22, 2026
Merged

feat(ui5-panel): expose header-wrapper part #13571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion packages/main/src/Panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ import panelCss from "./generated/themes/Panel.css.js";
* @extends UI5Element
* @public
* @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.
* @csspart header - Used to style the wrapper of the header.
* @csspart header-wrapper - Used to style the outermost header wrapper, useful for adjusting sticky header position.
* @csspart header - Used to style the header.
* @csspart content - Used to style the wrapper of the content.
*/
@customElement({
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/PanelTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default function PanelTemplate(this: Panel) {
}}
role={this.headingWrapperRole}
aria-level={this.headingWrapperAriaLevel}
part="header-wrapper"
>
<div
onClick={this._headerClick}
Expand Down
34 changes: 34 additions & 0 deletions packages/main/test/pages/Panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,40 @@
</ui5-label>
</ui5-panel>

<br>

<section>
<ui5-title>Sticky Header with Custom Top Offset Demo</ui5-title>
<p>The container below has a fixed toolbar at the top. The panel's sticky header uses <code>::part(header-wrapper) { top: 50px }</code> to stick below the toolbar.</p>

<div id="sticky-demo-container">
<div id="sticky-demo-toolbar">Fixed Toolbar (50px)</div>
<div id="sticky-demo-scroll-area">
<ui5-panel id="panel-stickyHeader-customTop" fixed sticky-header header-text="Sticky header with custom top (50px)">
<ui5-label wrapping-type="Normal">
<span>
Scroll this container to see the sticky header stick at 50px from the top (below the toolbar).
Lorem ipsum dolor sit amet, tamquam invidunt cu sed, unum regione mel ea, quo ea alia novum. Ne qui illud zril
nostrum, vel ea sint dicant postea. Vel ne facete tritani, neglegentur concludaturque sed te. His animal dolorum ut.
Aeterno appareat ei mei, cu sed elit scripserit, an quodsi oportere accusamus quo. Pri ea probo corpora rationibus,
soluta incorrupte ex his.
Mei ei brute cetero, id duo magna aeque torquatos. Quodsi erroribus mediocritatem his ut, ad pri legere iracundia
democritum. Menandri intellegam in mea, ex vero movet qualisque sed. Maiorum verterem perfecto nec ea, est velit
elaboraret consequuntur eu, eam ad reque postea admodum. Ne inimicus convenire pri, doctus vidisse te ius.
Percipitur contentiones in vis, cu vim propriae phaedrum. Has ad magna errem honestatis, duo vero graeco epicurei
no, populo semper sit ne. Vulputate dissentiunt interpretaris ea vis, nec civibus moderatius at. Cu vim stet
dissentias, no vidit saperet indoctum nec, et pro magna prima nobis. Vis consul feugiat qualisque in, regione
persecuti cotidieque id eos, id ius omnesque vituperata.
Pri ex impedit percipit consulatu. Ius iudico feugiat instructior an. Iusto putant eum eu, ubique splendide pri ad,
cu qui salutandi assentior percipitur. At esse ceteros salutandi ius. Te dicam reprehendunt nec, ea discere ponderum
sensibus duo. Vis cu commodo definiebas, postea dissentias ne vim. Modo homero eos ad. Ut vix equidem temporibus.
</span>
</ui5-label>
</ui5-panel>
</div>
</div>
</section>

<br>
<ui5-panel id="panel1" collapsed header-text="Click to expand!" header-level="H3" accessible-role="Form">

Expand Down
31 changes: 31 additions & 0 deletions packages/main/test/pages/styles/Panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,35 @@

#panel-expandable::part(header) {
color: green;
}

#sticky-demo-container {
position: relative;
height: 300px;
border: 1px solid #ccc;
}

#sticky-demo-toolbar {
position: sticky;
top: 0;
height: 50px;
background: #0854a0;
color: white;
display: flex;
align-items: center;
padding: 0 1rem;
z-index: 2;
}

#sticky-demo-scroll-area {
height: 250px;
overflow: auto;
}

#panel-stickyHeader-customTop::part(header-wrapper) {
top: 50px;
}

#panel-stickyHeader-customTop::part(content) {
padding-top: 50px;
}
Loading