风格与外观

新jQuery的剑道UI？免费下载30天试用版

卡片

Kendo UI Card是一组定义灵活内容容器的类。

卡片可以由标题、主体和操作组成，还可以容纳图像、列表、组、分隔符等。

制作卡片

要构建卡片，请使用.k-card类，它使您能够使用各种各样的内容。

…< / div >

卡元素

该卡可容纳以下元素:

Card的头部是一个可选元素。要呈现Card标头，请使用.k-card-header类，它可以包括标题和副标题。

  • 添加标题需要设置.k-card-title类到类h元素。
  • 添加字幕需要设置.k-card-subtitle类到类h元素。
< span style=" font - family:宋体;"> 
 
卡片标题
 
卡片副标题
 
 
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。

您还可以在标题之外使用标题和副标题。

< span style=" font - family:宋体;"
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 动作1 动作2

身体

卡片的主要内容是主体，主体可以通过.k-card-body类。

< span style=" font - family:宋体;"> 
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。

卡片的主要内容是主体，主体可以通过.k-card-body类。

< span style=" font - family:宋体;">  Card Footer

行动

控件将操作列表添加到卡片中.k-card-actions类。

< span style=" font - family:宋体;"> 
卡片标题
 
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 动作1 动作2

要实现一致的样式，每个操作都可以包装在.k-card-action容器。

< span style=" font - family:宋体;"
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
  行动1  行动2

可以将动作扩展到整个容器.k-card-actions-stretched类。

< span style=" font - family:宋体;"
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
  动作1  动作2

控件可以将操作置于容器的中心位置.k-card-actions-center类:

< span style=" font - family:宋体;"
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
  动作1  动作2

操作可以在容器的开始处与.k-card-actions-start类:

< span style=" font - family:宋体;"
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
  动作1  动作2

操作可以在容器的末尾与.k-card-actions-end类:

< span style=" font - family:宋体;"
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
  行动1  行动2

操作也可以强制垂直显示.k-card-actions-vertical类。

< span style=" font - family:宋体;"
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 行动1 行动2

媒体

卡片允许您在其内容中显示图像或视频。

图像可以通过.k-card-image类。

< span style=" font - family:宋体;"> 
卡片标题
  
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。

视频可以通过.k-card-media类。

 
< h5 class="k-card-title">DevReach  
 
DevReach 2019 Day 2上午主题演讲:技术领导:Jody Davis在NASA的经验教训
 
 < span class="k-card-actions"> < /span>< span class="k-button k-flat k-button-icon">< /span>< span class="k-button k-button-icon"> < /span>< span class="k-button k- share">

分隔符

要包含卡分隔符，请使用.k-card-separator类。

< span style=" font - family:宋体;"> 
 
 
Card Subtitle
Card Subtitle 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 
 
 
Card Subtitle
Card Subtitle 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。

要指定分隔符的垂直方向，请添加.k-card-separator-vertical类设置为separator元素。

布局

Cards公开了用于布置一系列纸牌的附加类。

卡片渲染列表

要呈现列中彼此分离的卡片，请使用.k-card-list类。

< span class="k-card" style=" font - family:宋体;"
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 行动1 行动2  
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 行动1 行动2  
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 
 动作1 动作2

渲染卡片组

要呈现在单行上彼此附加的卡片，请使用.k-card-group类。

< span class="k-card" style=" font - family:宋体;
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 行动1 行动2  
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 行动1 行动2  
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 
 动作1 动作2

呈现牌组

要呈现在单行上彼此分离的卡片，请使用.k-card-deck类。

< span class="k-card" style=" font - family:宋体;
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 行动1 行动2  
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 行动1 行动2  
 
Card Title
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 
 动作1 动作2

自定义布局

在卡片内定位水平伸缩容器元素可以使用.k-hbox类:

 
 
卡片标题
 
卡片副标题
 
 
 
 
一些快速的示例文本来构建卡片标题并构成卡片的大部分内容。
 
 行动1 行动2

在卡内定位垂直伸缩容器元素可以使用.k-vbox类:

 
 
 
卡片标题
 
卡片副标题
 
 
一些快速的示例文本来构建卡片标题并构成卡片的大部分内容。
 
 行动1 行动2

取向

所述卡片内容可通过所述的垂直或水平排列.k-card-vertical和.k-card-horizontal类:

 
 
 Sofia
 
Sunny
 
 C

风格

卡提供了预定义的状态类，您可以使用这些状态类来更改卡的外观。

< span style=" font - family:宋体;"
 
Card Title Primary
 
Card Subtitle
 
一些快速的示例文本来构建卡片标题并构成卡片内容的主体。
 
 动作1 动作2     
 
 
Card Title Info
 
Card Subtitle
 
Some quick example text to build on the card title and make up the bulk of the card content.
 
 
 Action 1 Action 2 
 
 
 
 
Card Title Success
 
Card Subtitle
 
Some quick example text to build on the card title and make up the bulk of the card content.
 
 
 Action 1 Action 2 
 
 
 
 
Card Title Warning
 
Card Subtitle
 
Some quick example text to build on the card title and make up the bulk of the card content.
 
 
 Action 1 Action 2 
 
 
 
 
Card Title Error
 
Card Subtitle
 
Some quick example text to build on the card title and make up the bulk of the card content.
 
 
 Action 1 Action 2

另请参阅

在本文中< / div >
相关文章< / div >
没有找到你需要的帮助?
联络支持
改进这篇文章
Baidu
map