时间戳

首页 > 解决方案 > 创建一个 Angular 可调整大小的水平卡片

css - 创建一个 Angular 可调整大小的水平卡片

问题描述

我正在关注这个Stackblitz Link来创建一个可调整大小的角度卡片布局，如下图所示。 可调整大小的卡片布局 在这里，当我将顶部标题向右或向左拖动时，卡片内容的大小以及标题需要调整大小，但我的问题是拖动属性在我的代码中不起作用

我的 HTML 代码：

<div class="container">
  <div class="row">
    <div class="col-3" [resizableMinWidth]=30 appResizable>
      SNO
    </div>
    <div class="col-3" [resizableMinWidth]=30 appResizable>
      Name
    </div>
    <div class="col-3" [resizableMinWidth]=30 appResizable>
      Desigination
    </div>
  </div>
  <div class="card">
    <div class="row">
      <div class="col-3">
        01
      </div>
      <div class="col-3">
        Sam
      </div>
      <div class="col-3">
        SE
      </div>
    </div>
  </div>
</div>

我的 CSS 代码：

.container {
    display:flex;
    justify-content:flex-start;
    flex-direction: column;
  }

标签： cssangularresizable

解决方案

您是否将指令添加到模块中？在属于您的模块的声明部分添加 ResizableDirective 很重要。 @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, ResizableDirective ], bootstrap: [ AppComponent ] }) 如果不是这种情况，请告诉我以找到另一个原因。:) 如果您包含您的堆栈跟踪以及您的文件 .ts，那就太好了

推荐阅读