Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 4x 4x 12x 12x 12x 12x 12x 12x 12x | import { Component, h, Prop, Host } from "@stencil/core";
import { LoaderVariant } from "@trumpf/ux.ui/dist/types/components";
@Component({
tag: "ux-w-wrapper",
styleUrl: "wrapper.scss",
shadow: false
})
export class Wrapper {
/** url for the Link next to the title */
@Prop() url: string = "";
/** text for the title attribute of the link */
@Prop() linkTitle: string = "";
/** text for the title */
@Prop() headline: string = "";
/** does this widget have a menu */
@Prop() hasMenu: boolean = false;
/** indicate a loading state */
@Prop() isLoading: boolean = false;
render() {
const baseClass = "ux-w-wrapper";
return (
<Host class={baseClass}>
<ux-w-header
url={this.url}
linkTitle={this.linkTitle}
hasMenu={this.hasMenu}
>
<span slot="headline">{this.headline}</span>
<div slot="menu">
<slot name="menu" />
</div>
</ux-w-header>
<div class={`${baseClass}__body`}>
{this.isLoading && (
<div class={`${baseClass}__loader`}>
<ux-loader
variant={"spinner" as LoaderVariant}
></ux-loader>
</div>
)}
<slot name="content" />
</div>
</Host>
);
}
}
|