如何使用Angular Material制作水平卡片

huangapple
go评论64阅读模式
英文:

How to make horizontal cards using Angular Material

问题

我正在尝试将这些垂直卡片变成水平卡片。

我正在使用Angular Material的Cards组件。

我只能创建垂直卡片，但我需要将卡片水平排列。

这里是我附上的代码供参考。

HTML：

<body>
    <div class="wrap">
        <!-- <img class="img-bg" background-image src="assets/logo.png"> -->
        <div class="text">
            <h1 style="font-weight: bold; text-align: center;">欢迎使用数据门户...</h1>
            <br>

            <mat-card class="example-card">
                <mat-card-header>
                    <mat-card-title>Catalog</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                    <p>在这里，您可以找到有关用户/角色的详细信息。</p>
                </mat-card-content>
                <mat-card-header>
                    <mat-card-title>Data Portal</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                    <p>在这里，您可以找到有关所有数据库和表的详细信息。</p>
                </mat-card-content>
            </mat-card>
            <br>
            <mat-card class="example-card">
                <mat-card-header>
                    <mat-card-title>Data Portal</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                    <p>在这里，您可以找到有关所有数据库和表的详细信息。</p>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
</body>

CSS：

.example-card {
    height: 200px;
    width: 400px;
    max-width: 300px;
    margin-left: 100px;
    background-color: lightgrey;
    color: black;
    text-align: center;
}

示例图片


<details>
<summary>英文:</summary>

I am trying to make these vertical cards into horizontal cards.

I am using the Cards component from Angular Material.

I can create cards only vertically, but I need the cards arranged on a horizontal level.

Here I&#39;m attaching my code for reference.

HTML:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;body&gt;
        &lt;div class=&quot;wrap&quot;&gt;
            &lt;!-- &lt;img class=&quot;img-bg&quot; background-image src=&quot;assets/logo.png&quot;&gt; --&gt;
            &lt;div class=&quot;text&quot;&gt;
                &lt;h1 style=&quot;font-weight: bold; text-align: center;&quot;&gt;Welcome to Data Portal...&lt;/h1&gt;
                &lt;br&gt;

                &lt;mat-card class=&quot;example-card&quot;&gt;
                    &lt;mat-card-header&gt;
                      &lt;mat-card-title&gt;Catalog&lt;/mat-card-title&gt;
                    &lt;/mat-card-header&gt;
                    &lt;mat-card-content&gt;
                      &lt;p&gt;Here you can find the details about users/roles.&lt;/p&gt;
                    &lt;/mat-card-content&gt;
                    &lt;mat-card-header&gt;
                        &lt;mat-card-title&gt;Data Portal&lt;/mat-card-title&gt;
                      &lt;/mat-card-header&gt;
                      &lt;mat-card-content&gt;
                        &lt;p&gt;Here you can find the details about all the databases and tables.&lt;/p&gt;
                    &lt;/mat-card-content&gt;
                &lt;/mat-card&gt;
                &lt;br&gt;
                &lt;mat-card class=&quot;example-card&quot;&gt;
                    &lt;mat-card-header&gt;
                      &lt;mat-card-title&gt;Data Portal&lt;/mat-card-title&gt;
                    &lt;/mat-card-header&gt;
                    &lt;mat-card-content&gt;
                      &lt;p&gt;Here you can find the details about all the databases and tables.&lt;/p&gt;
                    &lt;/mat-card-content&gt;
                &lt;/mat-card&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;

&lt;!-- end snippet --&gt;

CSS:
&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .example-card {
        height: 200px;
        width: 400px;
        max-width: 300px;
        margin-left: 100px;
        background-color: lightgrey;
        color: black;
        text-align: center;
      }

&lt;!-- end snippet --&gt;


[sample image](https://i.stack.imgur.com/PRKzY.png)

</details>


# 答案1
**得分**: 2

创建一个容器来包裹所有的`mat-card`，然后使用CSS改变容器内元素的布局流动方式。例如：

```html
<div style="display: flex;">
  <mat-card>...</mat-card>
  <mat-card>...</mat-card>
</div>
英文:

Create a container for all the mat-cards, then change the flow of the elements inside the container using CSS. For example:

&lt;div style=&quot;display: flex;&quot;&gt;
  &lt;mat-card&gt;...&lt;/mat-card&gt;
  &lt;mat-card&gt;...&lt;/mat-card&gt;
&lt;/div&gt;

答案2

得分: 1

以下是您提供的代码的翻译：

<div fxLayout="row wrap" fxLayoutGap="16px grid">
  <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%">
    <mat-card class="mat-elevation-z4">
  
    </mat-card>
  </div>
</div>

请注意，这是提供的代码的直译翻译，没有进行任何其他修改。如果您需要进一步的帮助或解释，请告诉我。

英文: 
&lt;div fxLayout=&quot;row wrap&quot; fxLayoutGap=&quot;16px grid&quot;&gt;
  &lt;div fxFlex=&quot;25%&quot; fxFlex.xs=&quot;100%&quot; fxFlex.sm=&quot;33%&quot;&gt;
    &lt;mat-card class=&quot;mat-elevation-z4&quot; &gt;

    &lt;/mat-card&gt;
&lt;/div&gt;

See link below for reference https://zoaibkhan.com/blog/create-a-responsive-card-grid-in-angular-using-flex-layout-part-1/

答案3

得分: 1

你需要先为mat-cards创建一个容器，然后可以设置flex属性，使其水平或垂直排列，如果需要的话。以下是一些可能会帮助你的代码。

.wrap {
  display: flex;
  margin: 0 auto; /* 居中内容 */
}

.example-card {
  border: 1px solid black;
  border-radius: 5px;
  text-align: center;
  height: 200px;
  width: 400px;
  max-width: 300px;
  margin-left: 100px;
  background-color: lightgrey;
  color: black;
  text-align: center;
}

<div class="wrap">
  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title>Catalog</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>在这里，您可以找到有关用户/角色的详细信息。</p>
    </mat-card-content>
    <mat-card-header>
      <mat-card-title>Data Portal</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>在这里，您可以找到有关所有数据库和表的详细信息。</p>
    </mat-card-content>
  </mat-card>
  <br>
  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title>Data Portal</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>在这里，您可以找到有关所有数据库和表的详细信息。</p>
    </mat-card-content>
  </mat-card>
</div>
英文:

You need a container for mat-cards first, then you can set flex to make it horizontal or even vertical if you want. Some code is below maybe will help you.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wrap{
display: flex;
margin: 0 auto //center the content
}

.example-card{
border: 1px solid black;
border-radius: 5px;
text-align: center;
height: 200px;
width: 400px;
max-width: 300px;
margin-left: 100px;
background-color: lightgrey;
color: black;
text-align: center;
}

<!-- language: lang-html -->

&lt;div class=&quot;wrap&quot;&gt;
  &lt;mat-card class=&quot;example-card&quot;&gt;
    &lt;mat-card-header&gt;
      &lt;mat-card-title&gt;Catalog&lt;/mat-card-title&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;p&gt;Here you can find the details about users/roles.&lt;/p&gt;
    &lt;/mat-card-content&gt;
    &lt;mat-card-header&gt;
      &lt;mat-card-title&gt;Data Portal&lt;/mat-card-title&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;p&gt;Here you can find the details about all the databases and tables.&lt;/p&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  &lt;br&gt;
  &lt;mat-card class=&quot;example-card&quot;&gt;
    &lt;mat-card-header&gt;
      &lt;mat-card-title&gt;Data Portal&lt;/mat-card-title&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;p&gt;Here you can find the details about all the databases and tables.&lt;/p&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月6日 21:34:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/75361988.html
  • angular
  • angular-material
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定