typescript 如何使CDK角步进机垂直

ifsvaxew  于 2023-05-08  发布在  TypeScript
关注(0)|答案(1)|浏览(179)

请,我们如何才能改变方向为垂直的自定义Angular cdk步进在这个例子中提供了他们的网站:
https://material.angular.io/cdk/stepper/examples
因为我不能改变它,即使我把方向设置为垂直,它也不起作用。

kmb7vmvb

kmb7vmvb1#

CDK不提供样式

只设置orientation属性是不可能做到的。组件开发工具包(CDK)只是一个API的集合,可以帮助您构建自己的组件,它也用于@angular/material库。
要检查垂直mat-stepper如何工作(它基于cdkStepper),可以检查此directory on GitHub

怎么做?

如果你想让cdkStepper垂直,你必须为它编写自己的css。如果需要在方向之间切换,可以像mat-stepper一样在ngIfngSwitch中使用属性orientation
Here是一个非常简单的示例,说明如何基于docs中的示例执行此操作

.example-step-navigation-bar {
  display: flex;
  flex-direction: column; /* <-- This is the added line  */
  justify-content: flex-start;
  margin-top: 10px;
}

相关问题