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

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

How to make horizontal cards using Angular Material

问题

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

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

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

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

HTML：

  1. <body>
  2.     <div class="wrap">
  3.         <!-- <img class="img-bg" background-image src="assets/logo.png"> -->
  4.         <div class="text">
  5.             <h1 style="font-weight: bold; text-align: center;">欢迎使用数据门户...</h1>
  6.             <br>
  8.             <mat-card class="example-card">
  9.                 <mat-card-header>
  10.                     <mat-card-title>Catalog</mat-card-title>
  11.                 </mat-card-header>
  12.                 <mat-card-content>
  13.                     <p>在这里，您可以找到有关用户/角色的详细信息。</p>
  14.                 </mat-card-content>
  15.                 <mat-card-header>
  16.                     <mat-card-title>Data Portal</mat-card-title>
  17.                 </mat-card-header>
  18.                 <mat-card-content>
  19.                     <p>在这里，您可以找到有关所有数据库和表的详细信息。</p>
  20.                 </mat-card-content>
  21.             </mat-card>
  22.             <br>
  23.             <mat-card class="example-card">
  24.                 <mat-card-header>
  25.                     <mat-card-title>Data Portal</mat-card-title>
  26.                 </mat-card-header>
  27.                 <mat-card-content>
  28.                     <p>在这里，您可以找到有关所有数据库和表的详细信息。</p>
  29.                 </mat-card-content>
  30.             </mat-card>
  31.         </div>
  32.     </div>
  33. </body>

CSS：

  1. .example-card {
  2.     height: 200px;
  3.     width: 400px;
  4.     max-width: 300px;
  5.     margin-left: 100px;
  6.     background-color: lightgrey;
  7.     color: black;
  8.     text-align: center;
  9. }

示例图片

  2. <details>
  3. <summary>英文:</summary>
  5. I am trying to make these vertical cards into horizontal cards.
  7. I am using the Cards component from Angular Material.
  9. I can create cards only vertically, but I need the cards arranged on a horizontal level.
  11. Here I&#39;m attaching my code for reference.
  13. HTML:
  15. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  17. &lt;!-- language: lang-html --&gt;
  19.     &lt;body&gt;
  20.         &lt;div class=&quot;wrap&quot;&gt;
  21.             &lt;!-- &lt;img class=&quot;img-bg&quot; background-image src=&quot;assets/logo.png&quot;&gt; --&gt;
  22.             &lt;div class=&quot;text&quot;&gt;
  23.                 &lt;h1 style=&quot;font-weight: bold; text-align: center;&quot;&gt;Welcome to Data Portal...&lt;/h1&gt;
  24.                 &lt;br&gt;
  26.                 &lt;mat-card class=&quot;example-card&quot;&gt;
  27.                     &lt;mat-card-header&gt;
  28.                       &lt;mat-card-title&gt;Catalog&lt;/mat-card-title&gt;
  29.                     &lt;/mat-card-header&gt;
  30.                     &lt;mat-card-content&gt;
  31.                       &lt;p&gt;Here you can find the details about users/roles.&lt;/p&gt;
  32.                     &lt;/mat-card-content&gt;
  33.                     &lt;mat-card-header&gt;
  34.                         &lt;mat-card-title&gt;Data Portal&lt;/mat-card-title&gt;
  35.                       &lt;/mat-card-header&gt;
  36.                       &lt;mat-card-content&gt;
  37.                         &lt;p&gt;Here you can find the details about all the databases and tables.&lt;/p&gt;
  38.                     &lt;/mat-card-content&gt;
  39.                 &lt;/mat-card&gt;
  40.                 &lt;br&gt;
  41.                 &lt;mat-card class=&quot;example-card&quot;&gt;
  42.                     &lt;mat-card-header&gt;
  43.                       &lt;mat-card-title&gt;Data Portal&lt;/mat-card-title&gt;
  44.                     &lt;/mat-card-header&gt;
  45.                     &lt;mat-card-content&gt;
  46.                       &lt;p&gt;Here you can find the details about all the databases and tables.&lt;/p&gt;
  47.                     &lt;/mat-card-content&gt;
  48.                 &lt;/mat-card&gt;
  50.             &lt;/div&gt;
  51.         &lt;/div&gt;
  52.     &lt;/body&gt;
  54. &lt;!-- end snippet --&gt;
  56. CSS:
  57. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  59. &lt;!-- language: lang-css --&gt;
  61.     .example-card {
  62.         height: 200px;
  63.         width: 400px;
  64.         max-width: 300px;
  65.         margin-left: 100px;
  66.         background-color: lightgrey;
  67.         color: black;
  68.         text-align: center;
  69.       }
  71. &lt;!-- end snippet --&gt;
  74. [sample image](https://i.stack.imgur.com/PRKzY.png)
  76. </details>
  79. # 答案1
  80. **得分**: 2
  82. 创建一个容器来包裹所有的`mat-card`，然后使用CSS改变容器内元素的布局流动方式。例如：
  84. ```html
  85. <div style="display: flex;">
  86.   <mat-card>...</mat-card>
  87.   <mat-card>...</mat-card>
  88. </div>
英文:

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

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

答案2

得分: 1

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

  1. <div fxLayout="row wrap" fxLayoutGap="16px grid">
  2.   <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%">
  3.     <mat-card class="mat-elevation-z4">
  4.   
  5.     </mat-card>
  6.   </div>
  7. </div>

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

英文: 
  1. &lt;div fxLayout=&quot;row wrap&quot; fxLayoutGap=&quot;16px grid&quot;&gt;
  2.   &lt;div fxFlex=&quot;25%&quot; fxFlex.xs=&quot;100%&quot; fxFlex.sm=&quot;33%&quot;&gt;
  3.     &lt;mat-card class=&quot;mat-elevation-z4&quot; &gt;
  5.     &lt;/mat-card&gt;
  6. &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属性，使其水平或垂直排列，如果需要的话。以下是一些可能会帮助你的代码。

  1. .wrap {
  2.   display: flex;
  3.   margin: 0 auto; /* 居中内容 */
  4. }
  6. .example-card {
  7.   border: 1px solid black;
  8.   border-radius: 5px;
  9.   text-align: center;
  10.   height: 200px;
  11.   width: 400px;
  12.   max-width: 300px;
  13.   margin-left: 100px;
  14.   background-color: lightgrey;
  15.   color: black;
  16.   text-align: center;
  17. }
  1. <div class="wrap">
  2.   <mat-card class="example-card">
  3.     <mat-card-header>
  4.       <mat-card-title>Catalog</mat-card-title>
  5.     </mat-card-header>
  6.     <mat-card-content>
  7.       <p>在这里，您可以找到有关用户/角色的详细信息。</p>
  8.     </mat-card-content>
  9.     <mat-card-header>
  10.       <mat-card-title>Data Portal</mat-card-title>
  11.     </mat-card-header>
  12.     <mat-card-content>
  13.       <p>在这里，您可以找到有关所有数据库和表的详细信息。</p>
  14.     </mat-card-content>
  15.   </mat-card>
  16.   <br>
  17.   <mat-card class="example-card">
  18.     <mat-card-header>
  19.       <mat-card-title>Data Portal</mat-card-title>
  20.     </mat-card-header>
  21.     <mat-card-content>
  22.       <p>在这里，您可以找到有关所有数据库和表的详细信息。</p>
  23.     </mat-card-content>
  24.   </mat-card>
  25. </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 -->

  1. .wrap{
  2. display: flex;
  3. margin: 0 auto //center the content
  4. }
  6. .example-card{
  7. border: 1px solid black;
  8. border-radius: 5px;
  9. text-align: center;
  10. height: 200px;
  11. width: 400px;
  12. max-width: 300px;
  13. margin-left: 100px;
  14. background-color: lightgrey;
  15. color: black;
  16. text-align: center;
  17. }

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

  1. &lt;div class=&quot;wrap&quot;&gt;
  2.   &lt;mat-card class=&quot;example-card&quot;&gt;
  3.     &lt;mat-card-header&gt;
  4.       &lt;mat-card-title&gt;Catalog&lt;/mat-card-title&gt;
  5.     &lt;/mat-card-header&gt;
  6.     &lt;mat-card-content&gt;
  7.       &lt;p&gt;Here you can find the details about users/roles.&lt;/p&gt;
  8.     &lt;/mat-card-content&gt;
  9.     &lt;mat-card-header&gt;
  10.       &lt;mat-card-title&gt;Data Portal&lt;/mat-card-title&gt;
  11.     &lt;/mat-card-header&gt;
  12.     &lt;mat-card-content&gt;
  13.       &lt;p&gt;Here you can find the details about all the databases and tables.&lt;/p&gt;
  14.     &lt;/mat-card-content&gt;
  15.   &lt;/mat-card&gt;
  16.   &lt;br&gt;
  17.   &lt;mat-card class=&quot;example-card&quot;&gt;
  18.     &lt;mat-card-header&gt;
  19.       &lt;mat-card-title&gt;Data Portal&lt;/mat-card-title&gt;
  20.     &lt;/mat-card-header&gt;
  21.     &lt;mat-card-content&gt;
  22.       &lt;p&gt;Here you can find the details about all the databases and tables.&lt;/p&gt;
  23.     &lt;/mat-card-content&gt;
  24.   &lt;/mat-card&gt;
  25. &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:

确定