优化space组件的上下间距;代码沙盒的高度支持自适应

master
yutent 2023-04-23 15:53:38 +08:00
parent 3eafe5ca05
commit fa19555622
2 changed files with 11 additions and 3 deletions

View File

@ -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() {
//
this.#cache.preview.panel = this.$refs.preview
@ -228,7 +234,7 @@ class Sandbox extends Component {
></wc-icon>
</header>
<div class="content">
<iframe ref="preview"></iframe>
<iframe ref="preview" @load=${this.contentLoaded}></iframe>
<slot name="javascript"></slot>
<slot name="html"></slot>
<slot name="css"></slot>

View File

@ -8,6 +8,8 @@ import { css, html, Component } from '@bd/core'
class Space extends Component {
static styles = css`
@use 'sass:math';
:host {
display: block;
}
@ -16,7 +18,7 @@ class Space extends Component {
flex-wrap: wrap;
align-items: center;
width: 100%;
padding: 12px 0;
padding: 6px 0;
gap: 12px;
}
:host([vertical]) {
@ -41,7 +43,7 @@ class Space extends Component {
@loop $k, $v in $gaps {
:host([gap='#{$k}']) {
.container {
padding: $v 0;
padding: math.div($v, 2) 0;
gap: $v;
}
}