61 lines
1.2 KiB
TypeScript
61 lines
1.2 KiB
TypeScript
|
import { DeesElement, customElement, html, css, unsafeCSS, cssManager, property } from '@designestate/dees-element';
|
||
|
|
|
||
|
|
import * as domtools from '@designestate/dees-domtools';
|
||
|
|
|
||
|
|
@customElement('dees-stepper')
|
||
|
|
export class DeesStepper extends DeesElement {
|
||
|
|
public static demo = () => html`
|
||
|
|
<dees-stepper></dees-stepper>
|
||
|
|
`;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
}
|
||
|
|
|
||
|
|
@property({
|
||
|
|
type: Array
|
||
|
|
})
|
||
|
|
public steps = [{
|
||
|
|
title: 'Who are you?'
|
||
|
|
}, {
|
||
|
|
title: 'Verification:'
|
||
|
|
}]
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
cssManager.defaultStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.stepperContainer {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: #111;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step {
|
||
|
|
max-width: 600px;
|
||
|
|
min-height: 300px;
|
||
|
|
border-radius: 10px;
|
||
|
|
background: #222;
|
||
|
|
margin: auto;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
|
||
|
|
}
|
||
|
|
`
|
||
|
|
]
|
||
|
|
|
||
|
|
public render () {
|
||
|
|
return html`
|
||
|
|
<div class="stepperContainer">
|
||
|
|
${this.steps.map(stepArg => html`
|
||
|
|
<div class="step"></div>
|
||
|
|
`)}
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|