优化space组件的上下间距;代码沙盒的高度支持自适应
parent
3eafe5ca05
commit
fa19555622
|
@ -195,6 +195,12 @@ class Sandbox extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
contentLoaded(ev) {
|
||||||
|
let elem = ev.target
|
||||||
|
let body = elem.contentWindow.document.body
|
||||||
|
elem.style.height = body.clientHeight + 'px'
|
||||||
|
}
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
//
|
//
|
||||||
this.#cache.preview.panel = this.$refs.preview
|
this.#cache.preview.panel = this.$refs.preview
|
||||||
|
@ -228,7 +234,7 @@ class Sandbox extends Component {
|
||||||
></wc-icon>
|
></wc-icon>
|
||||||
</header>
|
</header>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<iframe ref="preview"></iframe>
|
<iframe ref="preview" @load=${this.contentLoaded}></iframe>
|
||||||
<slot name="javascript"></slot>
|
<slot name="javascript"></slot>
|
||||||
<slot name="html"></slot>
|
<slot name="html"></slot>
|
||||||
<slot name="css"></slot>
|
<slot name="css"></slot>
|
||||||
|
|
|
@ -8,6 +8,8 @@ import { css, html, Component } from '@bd/core'
|
||||||
|
|
||||||
class Space extends Component {
|
class Space extends Component {
|
||||||
static styles = css`
|
static styles = css`
|
||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -16,7 +18,7 @@ class Space extends Component {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 0;
|
padding: 6px 0;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
:host([vertical]) {
|
:host([vertical]) {
|
||||||
|
@ -41,7 +43,7 @@ class Space extends Component {
|
||||||
@loop $k, $v in $gaps {
|
@loop $k, $v in $gaps {
|
||||||
:host([gap='#{$k}']) {
|
:host([gap='#{$k}']) {
|
||||||
.container {
|
.container {
|
||||||
padding: $v 0;
|
padding: math.div($v, 2) 0;
|
||||||
gap: $v;
|
gap: $v;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue