UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][webcomponents] Allow to style the webcomponent using class. Removed width/height attributes since direct style is possible.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-16 16:03:33 +02:00
parent 845773671e
commit 20203dcd07
2 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
spine-ts/spine-webcomponents/example/tutorial.html
View File

@ -280,12 +280,20 @@
<div class="split-top split"> <div class="split-top split">
<div class="split-left"> <div class="split-left">
<style>
.custom-class {
width: 150px;
height: 150px;
border: 1px solid green;
border-radius: 10px;
box-shadow: -5px 5px 3px rgba(255, 0, 0, 0.3);
}
</style>
<spine-skeleton <spine-skeleton
atlas="/assets/spineboy-pma.atlas" atlas="/assets/spineboy-pma.atlas"
skeleton="/assets/spineboy-pro.skel" skeleton="/assets/spineboy-pro.skel"
animation="walk" animation="walk"
height="150" class="custom-class"
width="150"
></spine-skeleton> ></spine-skeleton>
<spine-skeleton <spine-skeleton
atlas="/assets/spineboy-pma.atlas" atlas="/assets/spineboy-pma.atlas"
@ -301,10 +309,9 @@
></spine-skeleton> ></spine-skeleton>
</div> </div>
<div class="split-right"> <div class="split-right">
If you want to manually size the Spine widget, specify the <code>width</code> and <code>height</code> attributes in pixels (without the "px" unit). By default, the widget occupy zero width and height.
If you want to manually size the Spine widget, you can style the component using the <code>style</code> or <code>class</code> attribute, which provides more styling options.
<br> <br>
<br>
If you prefer, you can style the component using the <code>style</code> attribute, which provides more styling options.
</div> </div>
</div> </div>

15
spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts
View File

@ -875,7 +875,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
* @returns The `HTMLElement` where the widget is hosted. * @returns The `HTMLElement` where the widget is hosted.
*/ */
public getHostElement (): HTMLElement { public getHostElement (): HTMLElement {
return (this.width <= 0 || this.width <= 0) && !this.getAttribute("style") return (this.width <= 0 || this.width <= 0) && !this.getAttribute("style") && !this.getAttribute("class")
? this.parentElement! ? this.parentElement!
: this; : this;
} }
@ -1075,22 +1075,13 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
} }
private render (): void { private render (): void {
let width; let noSize = (!this.getAttribute("style") && !this.getAttribute("class"));
let height;
if (this.width === -1 || this.height === -1) {
width = "0";
height = "0";
} else {
width = `${this.width}px`
height = `${this.height}px`
}
this.root.innerHTML = ` this.root.innerHTML = `
<style> <style>
:host { :host {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: ${width}; ${noSize ? "width: 0; height: 0;" : ""}
height: ${height};
} }
</style> </style>
`; `;