绍兴网站建设推广,个人网站建设服务,网站哪家做得好,营销型网站建设的特色WeUI 是一套同微信原生视觉体验一致的基础样式库#xff0c;由微信官方设计团队为微信 Web 开发量身设计#xff0c;可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、弹出菜单actionsheet、图标icon等各式元…WeUI 是一套同微信原生视觉体验一致的基础样式库由微信官方设计团队为微信 Web 开发量身设计可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、弹出菜单actionsheet、图标icon等各式元素。 一、项目地址
https://github.com/weui/weui-wxss/ 二、如何使用
1、下载程序代码解压后可以看到如下目录 2、我们只需要将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下 3、新建微信小程序项目将weui.wxss文件导入到小程序项目的根目录下 4、在项目中引用在app.wxss中加入weui.wxss的引用- import ‘weui.wxss’; 5、使用示例如下 三、使用WeUI样式说明
1、根组件使用classpage 2、页面骨架组件使用classpage__xxx(注意是两个下划线) 3、其他组件都已weui-开头后接组件名称例如classweui-footer 4、组件的子组件样式例如view.weui-footer组件还有链接和版权信息。 四、WeUI标签预览具体应以WeUI样式标签为准
红色表示出现次数比较多的标签 1、表单
Button
weui-btn按钮
weui-btn mini-btn小按钮 list
weui-cells__title列表组件标题
weui-cell__bd标题文字
weui-cell__ft 说明文字 Input
weui-cells__title列表组件标题
weui-check 单选
weui-icon-radio 单选图标
weui-cell__bd 标题文字说明
weui-label 列表
weui-input 输入
weui-vcode-btn 获取验证码按钮
weui-vcode-img 验证码图片
weui-textarea请输入文本
weui-select 选择 Slider滑动参考小程序文档 Uploader
weui-uploader上传
weui-uploader__title图片上传
weui-uploader__info 上传个数
weui-uploader__file 上传文件
weui-uploader__img上传图片 2、基础组件
Article
weui-article文章标签
weui-article__h1标题
weui-article__title章标题
weui-article__section文章区域
weui-article__h3节标题
weui-article__p文字
weui-article__img图片 Badge徽章
weui-cells__title列表组件标题
weui-cell__bd组件列表行
weui-badge徽章 Flex布局
weui-flex布局区域
weui-flex__item布局选项 Footer页脚
weui-footer页脚名称
weui-footer__text页脚内容
weui-footer__links页脚链接 Gallery画廊参考小程序文档 Grid九宫格
weui-grids九宫格区域
weui-grid__icon九宫格图标
weui-grid__label九宫格列表 Icons图标
icon-box图表区域
icon-box__title图标标题
icon-box__desc图标说明 Loadmore加载更多
weui-loading加载更多标签
weui-loadmore__tips正在加载 Panel面板
weui-panel__hd面板页头
weui-panel__bd面板主体
weui-media-box__title面板标题
weui-media-box__desc面板说明
weui-media-box__info__meta面板底部文字说明 Preview表单预览
weui-form-preview表单预览区域
weui-form-preview__hd表单预览页头
weui-form-preview__bd表单预览主体
weui-form-preview__item表单预览列表区域
weui-form-preview__label表单预览列表标题
weui-form-preview__value_in-hd表单预览页头内容
weui-form-preview__value表单预览列表内容 Progress进度条
weui-progress进度条标签
weui-progress__bar进度条
weui-progress__opr进度条图标 3、操作反馈
ActionSheet弹出式菜单
weui-btn-area按钮标签区域 Dialog对话框
weui-btn-area按钮标签区域
weui-btn按钮 Msg提示页
weui-btn-area按钮标签区域
weui-btn按钮
weui-msg__icon-area提示图标
weui-msg__text-area提示区域
weui-msg__title提示标题
weui-msg__desc提示说明
weui-msg__opr-area提示后操作区域
weui-msg__extra-area额外区域 Picker选择器
weui-btn-area按钮区域 Toast弹出式提示
weui-btn-area按钮标签区域
weui-btn按钮 4、导航相关
Navbar头部导航
weui-navbar导航标签
weui-navbar__title导航标题
weui-navbar__slider导航滑块
weui-tab__panel导航面板
weui-tab__content导航内容 Tabbar底部导航参考小程序文档 5、搜索相关
Searchbar搜索栏
weui-search-bar搜索栏区域
weui-search-bar__form搜索栏表单
weui-search-bar__label搜索栏列表
weui-icon-search搜索栏图标
weui-search-bar__text搜索栏文字
weui-cell__bd搜索栏文本
