卡片
使用 QCard 组件来把重要的信息分组展示,这种模式已经成为各种网站和应用程序的主流设计,不仅能把信息展示得清晰条理,而且还很美观,不会让您的页面看上去很死板。
为了在有限的屏幕尺寸上展示足够多的信息,卡片式的设计风格已经成为谷歌,推特等各大公司的首选设计模式。
Qcard 组件很轻巧,它实际上是一个容器元素,您可以使用 QCard 组件来包裹任何元素,使其具有卡片式的设计感。
QCard API
tag
: String
说明
使用的 HTML 标签
QCardSection API
horizontal
: Boolean
说明
水平显示此部分(没有内边距,可以包含其他的 QCardSection)
tag
: String
说明
使用的 HTML 标签
QCardActions API
align
: String
说明
指定如何对齐操作按钮
vertical
: Boolean
说明
一个接一个地显示操作按钮
用法
TIP
您可以在卡片中使用排版来创造精美的卡片。
基础
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Our Changing Planet
by John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Our Changing Planet
by John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Our Changing Planet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
带有操作控件
Our Changing Planet
by John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Our Changing Planet
by John Doe
Our Changing Planet
by John Doe
Our Planet
by John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
可以通过 align
属性来自定义操作控件的对齐方式
Our Changing Planet
by John Doe
Our Changing Planet
by John Doe
Our Changing Planet
by John Doe
Our Changing Planet
by John Doe
媒体内容

Our Changing Planet
by John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title
Subhead

Our Changing Planet
by John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Our Changing Planet
by John Doe
水平
在下面的示例中,注意一个外层的带 horizontal
属性的 QCardSection 组件包裹了另外的 QCardSection。另外您可以直接把 col-*
css 类添加到子 QCardSection 组件的 class 中来控制大小。
如果需要在带有 horizontal 属性的 QCardSections 组件中展示图片,更推荐您使用 QImg 组件而不是原生的 <img>
标签
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Overline
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title
Subhead
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
多样的内容

local_bar
Bar XYZ
Have a drink.
local_gas_station
Gas Station
Fill your gas tank.
local_movies
Cinema XYZ
Watch a movie.

Our Changing Planet
4.2 (551)

Cafe Basilico
place 250 ft
$・Italian, Cafe
Small plates, salads & sandwiches in an intimate setting.
Our Changing Planet
by John Doe
Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) | Sodium (mg) |
---|---|---|---|---|---|
Frozen Yogurt | 159 | 6 | 24 | 4 | 87 |
Ice cream sandwich | 237 | 9 | 37 | 4.3 | 129 |
Eclair | 262 | 16 | 23 | 6 | 337 |
Cupcake | 305 | 3.7 | 67 | 4.3 | 413 |
Gingerbread | 356 | 16 | 49 | 3.9 | 327 |
Our Changing Planet
by John Doe
The QCard component is a great way to display important pieces of grouped content.
可展开的
下面的示例可以点击最右边的按钮来展开操作面板
Overline
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.