js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

[viewport-demp] Parts for zoom buttons, zoom cursors

Browse Source
This commit is contained in:
Lea Verou
2024-12-10 04:50:36 -05:00
parent 22ca715ddb
commit fd3ec885f9
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/viewport-demo/viewport-demo.styles.ts
View File

@@ -109,4 +109,14 @@ export default css`
opacity: 80%;
}
}
[part~='zoom-in'],
[part~='zoom-in']::part(base) {
cursor: zoom-in;
}
[part~='zoom-out'],
[part~='zoom-out']::part(base) {
cursor: zoom-out;
}
`;

8
src/components/viewport-demo/viewport-demo.ts
View File

@@ -291,9 +291,13 @@ export default class WaViewportDemo extends WebAwesomeElement {
<span part="controls">
${dimensions}
<span class="zoom">
<wa-icon-button name="square-minus" variant="regular" @click=${() => this.zoomOut()}>-</wa-icon-button>
<wa-icon-button name="square-minus" variant="regular" @click=${() => this.zoomOut()} part="zoom-out button"
>-</wa-icon-button
>
<span class="zoom-level"> ${Math.round(this.computedZoom * 100)}%</span>
<wa-icon-button name="square-plus" variant="regular" @click=${() => this.zoomIn()}>+</wa-icon-button>
<wa-icon-button name="square-plus" variant="regular" @click=${() => this.zoomIn()} part="zoom-in button"
>+</wa-icon-button
>
</span>
</span>
<slot @slotchange=${this.handleSlotChange}></slot>