diff --git a/packages/vtable/examples/custom/default.ts b/packages/vtable/examples/custom/custom-layout.ts similarity index 99% rename from packages/vtable/examples/custom/default.ts rename to packages/vtable/examples/custom/custom-layout.ts index 02d5d2432..5da38bf0a 100644 --- a/packages/vtable/examples/custom/default.ts +++ b/packages/vtable/examples/custom/custom-layout.ts @@ -78,7 +78,11 @@ export function createTable() { showBounds: false, direction: 'column', alignContent: 'center', - justifyContent: 'center' + justifyContent: 'center', + background: { + fill: 'blue', + stroke: 'red' + } }); container.add(containerLeft); diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index 5a43b966e..bb92e0893 100644 --- a/packages/vtable/examples/menu.ts +++ b/packages/vtable/examples/menu.ts @@ -244,6 +244,15 @@ export const menus = [ } ] }, + { + menu: 'custom', + children: [ + { + path: 'custom', + name: 'custom-layout' + } + ] + }, { menu: '调试使用', children: [ diff --git a/packages/vtable/examples/style.css b/packages/vtable/examples/style.css index 424afa589..28698ee7d 100644 --- a/packages/vtable/examples/style.css +++ b/packages/vtable/examples/style.css @@ -27,7 +27,7 @@ body p { } .container .sidebar { - width: 100px; + width: 200px; /* height: 100%; */ border-right: 1px solid rgba(0, 0, 0, 0.06); } diff --git a/packages/vtable/src/render/layout/container.ts b/packages/vtable/src/render/layout/container.ts index 51e36cce9..0376f47c2 100644 --- a/packages/vtable/src/render/layout/container.ts +++ b/packages/vtable/src/render/layout/container.ts @@ -187,6 +187,19 @@ export class Container extends BaseElement { this.updateYAlign(); const elements = []; + if (this.background && this.background.fill) { + const backgroundRect = new Rect({ + width: this.width, + height: this.height, + stroke: this.background.stroke ?? false, + fill: this.background.fill, + cornerRadius: this.background.cornerRadius ?? 0, + lineWidth: this.background.lineWidth ?? 1 + }); + backgroundRect.x += this.x + parentPos.parentX; + backgroundRect.y += this.y + parentPos.parentY; + elements.push(backgroundRect); + } if (this.showBounds) { const boundsRect = new Rect({ width: this.width,