优化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() { 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>

View File

@ -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;
} }
} }