Question

我在Angular上折叠卡片时遇到问题。我有组件从'@ angular / core'导入{Component，OnInit，Input};

@Component({
  selector: 'app-numbered-card',
  templateUrl: './numbered-card.component.html',
  styleUrls: ['./numbered-card.component.scss']
})
export class NumberedCardComponent implements OnInit {
  @Input() color: string;
  @Input() text: string;
  @Input() title: string;
  @Input() number: string;
  constructor() { }

  ngOnInit() {
  }

}

<div class="info-container" [ngStyle]="{'background-color': color}">
  <div class="ib-header">
    <span class="ib-index vertical-center">
      {{number}}
    </span>
    <div class="ib-title vertical-center">{{title}}
    </div>
  </div>

</div> <a href="" class="info-box-more-details">Read more</a>

我的scss文件

.info-container {
    width: 250px;
    border-radius: 4px;
}
.ib-index {
    color: white;
    opacity: 0.25;
    font-size: 140px;
    font-weight: 900;
    padding-left: 5px !important;
    position: absolute;
    margin-top: -20px;
}

.ib-header {
    height: 130px;
}

.ib-title {
    color: white;
    height: 130px;
    font-size: 24px;
    font-weight: 600;
}

.ib-paragraph {
    font-size: 16px !important;
    color: white !important;
    height: inherit;
    padding-bottom: 10px;
}

.info-box-more-details {
    height: 25px !important;
    background-color: #DA3D06;
    color: white;
    height: inherit;
    width: 120px;
    position: absolute;
    right: 20px;
    bottom: 5px;
    padding: 5px;
    z-index:20;
}

.vertical-center {
    display: flex;
    align-items: center;
    flex-direction: column;
    /* make main axis vertical */
    justify-content: center;
    /* center items vertically, in this case */
}

当前看起来像这样：

我希望它看起来像这样：

当我单击红色按钮时，我希望此框展开并显示文本，然后再次单击将其折叠。它是扩展框：

你有什么主意吗？

Answer 1

您不需要角材料即可使卡片扩展/折叠。 1.您的CSS可能设置不正确 2.不要将锚点用作“切换”按钮，因为锚点用于导航。而是使用带有（click）='toggle（）'的按钮。然后为更多信息区域添加* ngIf ='iscollapsed'。

点击时折叠的卡片

1 个答案: