Mag Design

排版和通用类

标题

使用 h1~h4 来申明标题

一级标题

二级标题

三级标题

四级标题

普通文本

副标题

设定文本尺寸

超小辅助文本 辅助文本 小标题大小的文本 中标题大小的文本 大标题大小的文本 超大标题大小的文本

使用具体尺寸

0级尺寸文本 5级尺寸文本 8级尺寸文本 10级尺寸文本

主题颜色

主题色 主题背景色 次要色 次要背景色

具体颜色

设置元素背景色 设置文字前景色 设置不同深浅的颜色

Tag 标签

进行标记和分类的小标签,用于标记事务的属性和维度。

常规标签

基础标签,可以通过添加关闭图标变为可关闭标签,也可以作为一组标签使用,可以动态添加和删除。

标签 直角标签 后图标标签 新增

标签 圆角标签 后图标标签 新增

颜色标签

允许多色彩标签的样式,颜色可以从色版中选择。

橙色 红色 圆角 也可以

热门标签

热门关键词: 刘德华 梅艳芳 周迅 赵薇

可选择标签

点击切换选中效果

选中的标签 选中的圆角标签 选中的涂色标签

Label 图标

玄幻 高清 热门 收费 VIP 优惠 TOP1

[标签] 危险 官网

按钮

按钮表示一定的用户行为,通常为点击行为。

文字按钮

中文因为没有大小写之分,所以文字按钮需要在颜色上进行区分。

示例按钮 示例按钮

线型按钮

对于 <button> 标签而言,不需要增加 btn 类。

示例按钮

实体按钮

胶囊按钮

尺寸

块级按钮






点击区域和点击态

在下方的 demo 中增加了橙色和绿色辅助线,方便观察行为。橙色表示可点区域,绿色表示 UI 反应实际区域。

   文本按钮    线形按钮

由于移动端通常不使用 hover 特效,如果需要 hover 的效果,需要在祖先 DOM 上增加 class hover-enabled

   文本按钮    线形按钮

使用 .hover 类也可以手动增加 hover 效果,适用于 loading 等场景。

展开与收起

MIP HTML 基于HTML中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使HTML能够展现更加丰富的内容;MIP JS 可以保证 MIP HTML 页面的快速渲染;MIP Cache 用于实现MIP页面的高速缓存,从而进一步提高页面性能。MIP HTML 基于HTML中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使HTML能够展现更加丰富的内容;MIP JS 可以保证 MIP HTML 页面的快速渲染;MIP Cache 用于实现MIP页面的高速缓存,从而进一步提高页面性能。
收起
展开

分隔线

下面为默认分割线,默认8%黑色


接下来是8%白色

白色分隔线之上部分


白色分隔线之下部分

适用于卡片的4pt分隔线


适用于卡片的8pt分隔线


播放控件

点击播放医生的语音回答
00:00
--:--

徽章

与文字一起使用

示例文字 NEW

示例文字 NEW

5
8
255
16
OK

放在元素的右上角

99+

提示

提示条

我是一个贯穿通栏的信息条

工具提示

Lorem ipsum
我在左边
我在右边
我在上面
我在下面

图标

图标名称 样式 代码 unicode
<i class="icon icon-add"></i> &#xe690;
关闭 <i class="icon icon-close"></i> &#xe691;
关闭-线型 <i class="icon icon-close1"></i> &#xe699;
向上 <i class="icon icon-up"></i> &#xe68f;
向下 <i class="icon icon-down"></i> &#xe68e;
向左 <i class="icon icon-left"></i> &#xe68d;
向右 <i class="icon icon-right"></i> &#xe688;
搜索 <i class="icon icon-search"></i> &#xe687;
<i class="icon icon-fabulous_normal"></i> &#xe68c;
已赞 <i class="icon icon-fabulous"></i> &#xe68a;
分享 <i class="icon icon-share"></i> &#xe68b;
查看更多 <i class="icon icon-more"></i> &#xe689;
留言评论 <i class="icon icon-comment"></i> &#xe686;
播放 <i class="icon icon-play"></i> &#xe682;
菜单项 <i class="icon icon-menu"></i> &#xe680;
菜单列表 <i class="icon icon-menulist"></i> &#xe681;
书签 <i class="icon icon-mybook"></i> &#xe67f;
日间模式 <i class="icon icon-day"></i> &#xe67e;
夜间模式 <i class="icon icon-night"></i> &#xe67b;
排序 <i class="icon icon-order"></i> &#xe67a;
触摸 <i class="icon icon-finger"></i> &#xe67c;
字体 <i class="icon icon-font"></i> &#xe67d;
熊掌 <i class="icon icon-logo"></i> &#xe685;
指南针 <i class="icon icon-compass"></i> &#xe695;
GitHub <i class="icon icon-github"></i> &#xe696;
组件 <i class="icon icon-components"></i> &#xe697;
MIP <i class="icon icon-mip"></i> &#xe698;
代码 <i class="icon icon-code"></i> &#xe69a;

Toast

添加关注成功
添加关注成功
添加关注成功

图片横滑

sidebar

菜单

类目

AI

程序程序程序程序程序程序程序,我换行了,支持换行的 A 标签,且是块级的

MIP © 2018

轮播图

加载

加载图标

加载图标和文字

加载中...