首页
核心
实例
资源
关于
v1.0

Card 卡片

使用说明

卡片是综合图文信息列表，不同于其他列表，卡片内容是从上至下、从左至右排列的。卡片需要配合网格布局ax-grid使用以实现数据循环，网格使用方法见：方格。

基本HTML结构为ax-card [-> ax-card-header] -> poster -> ax-card-body -> caption -> brief -> byline/keywords [-> ax-card-footer]

  • 意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。
    362 2019年1月2日
  • 埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    关键字：威尼斯暴雨最高纪录
  • “畅游蔚蓝海底，和鱼群作伴探索神秘沉船遗迹”这样无限令人遐思的话语并不只存在与探险小说当中，在多米尼加的“海底博物馆”就能实现。近期“海底博物馆”又将添新馆，一家新建立的海底博物馆就要出现在全世界潜水迷的面前。
    关键字：威尼斯暴雨最高纪录
  • 俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。
    关键字：威尼斯暴雨最高纪录
                            <ul class="ax-grid ax-grid-2 ax-space-xxl">

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-8.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
                                            <div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。</div>
                                            <div byline>
                                                <span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
                                                <span>2019年1月2日</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                            <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-11.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">在蔚蓝世界探寻沉船遗迹：多米尼加新建一家“海底博物馆”</a></div>
                                            <div brief>“畅游蔚蓝海底，和鱼群作伴探索神秘沉船遗迹”这样无限令人遐思的话语并不只存在与探险小说当中，在多米尼加的“海底博物馆”就能实现。近期“海底博物馆”又将添新馆，一家新建立的海底博物馆就要出现在全世界潜水迷的面前。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-9.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">俄罗斯一农户捡到“小猫”，长大后却发现不是猫</a></div>
                                            <div brief>俄罗斯农户发现“小猫”的地点位于自家谷仓。它们的体态和普通小猫差距不大，毛发的颜色和密度也与普通猫咪相似。但是随着时间的流逝，这些小家伙们长得越来越大，主人才发现了它们的与众不同。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                    </div>
                                </li>

                            </ul>

栏目分类

在poster属性标签内，通过使用category属性标签给图片添加栏目分类。以下示例没有使用ax-card-header和ax-card-body容器。

                                        <ul class="ax-grid ax-grid-2 ax-space-xxl">

                                            <li>
                                                <div class="ax-card">
                                                    <a href="###" poster> <img src="https://src.axui.cn/v2.0/public/images/image-8.jpg" /><i category>国际</a>
                                                    <div caption> <a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
                                                    <div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。</div>
                                                    <div byline>
                                                        <span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
                                                        <span>2019年1月2日</span>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>

使用按钮

如果使用按钮，相等于这个card形成了标准的header+body+footer结构，所以建议使用ax-card-footer标签。

按钮元素用btns属性标签包裹，默认每个按钮宽度一致，支持多个按钮。

如果是提示文字+按钮组合，可使用left和right属性标签，左侧占70%，右侧占30%。

  • 埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    关键字：威尼斯暴雨最高纪录
    警告 确定 禁止
  • 埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    关键字：威尼斯暴雨最高纪录
    确定
  • 埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    关键字：威尼斯暴雨最高纪录
    警告 确定
  • “畅游蔚蓝海底，和鱼群作伴探索神秘沉船遗迹”这样无限令人遐思的话语并不只存在与探险小说当中，在多米尼加的“海底博物馆”就能实现。近期“海底博物馆”又将添新馆，一家新建立的海底博物馆就要出现在全世界潜水迷的面前。
    关键字：威尼斯暴雨最高纪录
    总价5800元，优惠0元
    立即购买 
                            <ul class="ax-grid ax-grid-2 ax-space-xxl ax-split">

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                            <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                        <div class="ax-card-footer" btns>
                                            <a href="###"><i class="ax-color-error">警告</i></a>
                                            <a href="###">确定</a>
                                            <span><i class="ax-color-ignore">禁止</i></span>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                            <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                        <div class="ax-card-footer" btns>
                                            <a href="###">确定</a>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                            <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                        <div class="ax-card-footer" btns>
                                            <a href="###"><i class="ax-color-error">警告</i></a>
                                            <a href="###">确定</a>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-11.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">在蔚蓝世界探寻沉船遗迹：多米尼加新建一家“海底博物馆”</a></div>
                                            <div brief>“畅游蔚蓝海底，和鱼群作伴探索神秘沉船遗迹”这样无限令人遐思的话语并不只存在与探险小说当中，在多米尼加的“海底博物馆”就能实现。近期“海底博物馆”又将添新馆，一家新建立的海底博物馆就要出现在全世界潜水迷的面前。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                        <div class="ax-card-footer" btns>
                                            <div left>总价5800元，优惠0元</div>
                                            <a href="###" right><i class="ax-color-primary">立即购买</i></a>
                                        </div>
                                    </div>
                                </li>

                            </ul>

自定义footer

以上展示了btns内置风格，用户可借助框架内的组件自行定义ax-card-footer标签中的内容。

  • 埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    关键字：威尼斯暴雨最高纪录
    共56人查阅
    3天前发布
  • 埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    关键字：威尼斯暴雨最高纪录
    我爱旅游~~ 
                            <ul class="ax-grid ax-grid-2 ax-space-xxl ax-split">

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                            <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                        <div class="ax-card-footer">
                                            <div class="ax-row">
                                                <div class="ax-col">
                                                    <span class="ax-avatars">
                                                        <span class="ax-avatar ax-xs"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
                                                        <span class="ax-avatar ax-xs"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
                                                        <span class="ax-avatar ax-xs"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
                                                    </span>
                                                    <span>共56人查阅</span>
                                                </div>
                                                <span class="ax-color-ignore">3天前发布</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ax-card">
                                        <div class="ax-card-header">
                                            <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                        </div>
                                        <div class="ax-card-body">
                                            <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                            <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                            <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                        </div>
                                        <div class="ax-card-footer">
                                            <hr/>
                                            我爱旅游~~
                                        </div>
                                    </div>
                                </li>

                            </ul>

多图

如果需要显示图集请使用posters属性标签，标签内置入照片墙组件ax-wall，关于照片墙组件详细用法请点击这里。

                                        <ul class="ax-grid ax-grid-2 ax-space-xxl ax-split">

                                            <li>
                                                <div class="ax-card">
                                                        <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                                        <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                                        <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                                        <div posters>
                                                            <div class="ax-wall-3 ax-gap-2" ratio="4:3">
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-3.jpg" /></a>
                                                                <i count>3图</i>
                                                            </div>
                                                        </div>
                                                        <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="ax-card">
                                                        <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                                        <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                                        <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                                        <div posters>
                                                            <div class="ax-wall-3 ax-gap-2" ratio="4:3">
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-3.jpg" /></a>
                                                                <i count>3图</i>
                                                            </div>
                                                        </div>                                                        
                                                        <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="ax-card">
                                                        <a href="###" poster><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
                                                        <div posters>
                                                            <div class="ax-wall-3 ax-gap-2" ratio="4:3">
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-3.jpg" /></a>
                                                                <i count>3图</i>
                                                            </div>
                                                        </div>                                                        <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                                        <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                                        <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="ax-card">
                                                        <div caption="2"> <a href="###">埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。</a></div>
                                                        <div posters>
                                                            <div class="ax-wall-3 ax-gap-2" ratio="4:3" split>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-3.jpg" /><i more>+6</i></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-4.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-5.jpg" /></a>
                                                                <a href="###"><img src="https://src.axui.cn/v2.0/public/images/image-6.jpg" /></a>
                                                            </div>
                                                        </div>
                                                        <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                                </div>
                                            </li>

                                        </ul>

lazyload

可配合axLazyload插件使用，其原理是先使用loading图片载入，等img标签进入视窗后将data-src中的真实图片地址替换src值。关于插件详细用法请点击这里。

  • 埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。
    3图
    关键字：威尼斯暴雨最高纪录
                            <ul class="ax-grid ax-grid-2 ax-space-xxl ax-split">
                                <li>
                                    <div class="ax-card">
                                        <a href="###" poster><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-7.jpg" axLazyload /></a>
                                        <div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
                                        <div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
                                        <div posters>
                                            <div class="ax-wall-3 ax-gap-2" ratio="4:3">
                                                <a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-1.jpg" axLazyload /></a>
                                                <a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-2.jpg" axLazyload /></a>
                                                <a href="###"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/image-3.jpg" axLazyload /></a>
                                                <i count>3图</i>
                                            </div>
                                        </div>
                                        <div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
                                    </div>
                                </li>
                            </ul>