微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多基础的组件,其中 label 标签组件是一个很常用的基础元件, MinUI 中 label 组件的效果图如下:
各式各样的类型都有哦,是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快:
下面介绍 label 组件的使用方式。
1、使用下列命令安装 Min-Cli,如已安装,请进入到下一步。Min-Cli 的文档请猛戳这里:Min-Cli使用手册
npm install -g @mindev/min-cli
2、初始化一个小程序项目。
min init my-project
选择 新建小程序 选项,即可初始化一个小程序项目。创建项目后,在编辑器中打开项目,src 目录为源码目录,dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home
页面。详细文档:Min 初始化小程序项目
3、安装 label 组件。
进入刚才新建的小程序项目的目录中:
cd my-project
安装组件:
min install @minui/wxc-label
4、开启dev。
min dev
开启之后,修改源码后都会重新编译。
5、在页面中引入组件。
在编辑器中打开 src/pages
目录下的 home/index.wxp
文件,在 script
中添加 config
字段,配置小程序自定义组件字段,代码如下:
export default {config: {"usingComponents": {'wxc-label': "@minui/wxc-label"}}
}
wxc-label
即为头像组件的标签名,可以在 wxml 中使用。
6、在 wxml 中使用 wxc-label
标签。
在 home/index.wxp
文件的 template
中添加 wxc-label
标签,代码如下:
<wxc-label text="双11价"></wxc-label>
7、打开微信开发者工具,指定 dist
目录,预览项目。
home/index.wxp
文件的代码如下所示:
<!-- home/index.wxp -->
<template><wxc-label class="label" text="双11价"></wxc-label><wxc-label class="label" text="限时折扣"></wxc-label>
</template><script>
export default {config: {usingComponents: {'wxc-label': '@minui/wxc-label','wxc-icon': '@minui/wxc-icon'}},data: {}
}
</script><style>.label {margin-right: 20rpx;}
</style>
图示:
至此,minui 组件库的 label 标签组件在 Min 工具生成的小程序项目中的方法已介绍完毕,其他场景,在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接:
在已有小程序项目中使用 MinUI 组件介绍
了解组件的使用方式后,下面开始介绍 label 组件的 API 。
Label【props】
名称 | 描述 |
---|---|
text
|
String 文案设置 |
type
|
String 显示类型。目前支持 fill、plain、corner,<br/> 对应实心标、镂空标、角标,默认值为 plain。 |
type-color
|
String 类型配色。默认值 #FF5777 |
text-color
|
String 文字配色。type="fill" 下生效,默认值 #FFFFFF |
更多demo
1、子元素传值
<template><wxc-label class="label">双11价</wxc-label><wxc-label class="label">限时折扣</wxc-label><wxc-label class="label"><wxc-icon type="pintuan" size="20"></wxc-icon> 拼团秒杀</wxc-label>
</template><script>
export default {config: {usingComponents: {'wxc-label': '@minui/wxc-label','wxc-icon': '@minui/wxc-icon'}},data: {}
}
</script><style>.label {margin-right: 20rpx;}
</style>
图示:
2、非镂空状态的 label
<template><wxc-label class="label" type="fill">双11价</wxc-label><wxc-label class="label" type="fill">限时折扣</wxc-label>
</template><script>
export default {config: {usingComponents: {'wxc-label': '@minui/wxc-label','wxc-icon': '@minui/wxc-icon'}},data: {}
}
</script><style>.label {margin-right: 20rpx;}
</style>
图示:
3、自定义颜色
<template><wxc-label class="label" type="fill" type-color="#747bb1">直播中</wxc-label><wxc-label class="label" type="fill" type-color="#ffe8ee" text-color="#ff5577">已团8.7万件</wxc-label>
</template><script>
export default {config: {usingComponents: {'wxc-label': '@minui/wxc-label','wxc-icon': '@minui/wxc-icon'}},data: {}
}
</script><style>.label {margin-right: 20rpx;}
</style>
图示:
更多组件更新同步请关注 MinUI
小程序组件库示例查看,或请移步到实时同步更新的 微信小程序 label 标签组件使用文档。
沟通反馈
请添加群助手 wUf18018252882 好友或者扫码加好友,并与群助手对话发送验证码 10088
按照指引进群。
相关链接
- Min-Cli 官方仓库
- MinUI 官方仓库
- Min 官方文档
开源组件
布局元素
- flex 布局
- cc 水平垂直居中
基础元件
- avatar 头像
- badge 徽章
- elip 文本截断
- icon 图标
- label 标签
- loadmore 页底提示
- price 价格
- progress 进度条
功能组件
- abnor 异常流展示
- countdown 倒计时
- counter 数字框
- loading 加载提示
- mask 遮罩层
- steps 步骤条
- tab 选项卡
提示反馈
- dialog 对话框
- popup 弹出层
- toast 提示框
表单组件
- Coming soon ...
蘑菇街前端团队,2018.01.19 于杭州
微信小程序 MinUI 组件库系列之 label 标签组件相关推荐
- 微信小程序 MinUI 组件库系列之 label 标签组件 1
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序使用第三方库(第三方js)问题
比如很多人会有这样的问题: 小程序怎样引用第三方js呢? 第三方js是封装好的类库 想引用进来实例化使用 这个帖子就综合一下所有相关的知识,做一个整合,以便大家能够集中了了解:我觉得这个还是应该让大家 ...
- 微信小程序把玩(二十八)image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
- 微信小程序把玩(二十六)navigator组件
微信小程序把玩(二十六)navigator组件 原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
- 微信小程序 MinUI 组件库系列之 abnor 异常流组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
- 微信小程序 MinUI 组件库系列之 badge 徽章组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序 MinUI 组件库系列之 avatar 头像组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
- 微信小程序 MinUI 组件库系列之 price 价格组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.小程序组件化框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件 ...
- 微信小程序 MinUI 组件库系列之 loadmore 页底组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
最新文章
- jmeter在linux上运行
- 所请求vi未加载至服务器内存_linux下tomcat端口请求数太大,导致服务器资源加载过慢的配置优化...
- 【C、C++基础】什么时候用 “.” 什么时候用“->”(3个实例搞懂)
- [LeetCode] Search in Rotated Sorted Array
- 常用应用层传输协议和端口
- Assigning retained object to weak property object will be released after assignment
- 君正T31 ACC解码
- 实景三维数据也可以免费下载
- 微信小程序中自定义模板
- 数据库可视化软件 安装 for windows
- python 模块下载资源汇总
- mysql 连续天数_MYSQL面试题:统计连续打卡天数
- 【拜小白的机器学习】2-机器学习的种类与基本术语概念
- 51Nod 1677 treecnt
- C++关于利用_kbhit()函数持续获取键盘输入的一点心得。
- 入门深度学习与机器学习的经验和学习路径
- RXJava2响应式编程框架设计三---Rxjava2背压、生命周期
- opencv基础之--图片颜色反转
- tr闭包_个人简历网页模板
- 赚商联盟:知识付费时代通过购买网课来缓解焦虑,是对还是错?