angular - CSS - 如何修复一个部分和其他移动？

Question

我正在使用 https://bertrandg.github.io/angular-split/#/为了我的要求。它解决了我一半的问题。

我有 2 个部分，使用我拼接成两个的 Angular 拆分。在 70% 宽度之后，第二部分应该首先重叠。意味着，第一部分是固定的，第二部分可以先拖过来。

例如:第一个部分的最小宽度是 70%，如果我将第二个部分拖到超过 30% 宽度，这应该覆盖第一个部分。

程序如下: https://plnkr.co/edit/tlO2b85xXGIUdga6J9o8?p=preview

右侧部分最小宽度应为 30%，最大宽度应为 50%

我该怎么做？

Answer 1

我更新了你的 app.ts 也 fork 了你的 plunker ... 链接在下面提到。我认为这应该可以满足您的要求。

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AngularSplitModule} from 'angular-split';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <div style="width: 100%; height: 500px; background: rgba(0,0,10, .4); border: 4px solid rgba(15, 15,211, .4);">
        <split direction="horizontal" style="border:2px solid black;position:relative;">
            <split-area size="70" >
                <p style="position:absolute;top:0;left:0;width:50%;z-index:-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </split-area>
            <split-area size="30">
                <p style="background:red;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
            </split-area>
        </split>
</div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule, AngularSplitModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

https://plnkr.co/edit/w8O2I3bD4bdXp0QsL35L?p=preview