优化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() {
|
||||
//
|
||||
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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue