起步

引入样式

在 App.vue 中引入 Pure Ui 的样式文件。

@import "@/uni_modules/pure-styles/index.css";

使用组件

• 在插件市场引入对应的组件到自己的项目.
• 在页面中使用组件.

<template>
  <!-- 示例 -->
  <pure-button text="按钮"></pure-button>
</template>

全局配置

样式变量

• 通过在 App.vue 中修改样式变量来修改组件的全局默认样式。

变量名	说明	默认值	版本
--pure-theme-primary	主题色(主要)	#1989fa	+1.0.0
--pure-theme-success	主题色(成功)	#07c160	+1.0.0
--pure-theme-danger	主题色(危险)	#ee0a24	+1.0.0
--pure-theme-warning	主题色(警告)	#ff976a	+1.0.0
--pure-theme-info	主题色(信息)	#909399	+1.0.0
--pure-background-element	组件的默认背景	#ffffff	+1.0.0
--pure-background-regular	组件的浅色背景	#c0c4cc	+1.0.0
--pure-background-mask	遮罩的默认背景	rgba(0, 0, 0, 0.6)	+1.0.0
--pure-background-disabled	禁用状态的默认背景	#909399	+1.0.0
--pure-text-color-default	文本默认颜色	#303133	+1.0.0
--pure-text-color-regular	浅色文本色	#606266	+1.0.0
--pure-text-color-light	更浅色文本色	#909399	+1.0.0
--pure-text-color-placeholder	提示文本色	#c0c4cc	+1.0.0
--pure-border-color-default	默认边框色	#f5f6f7	+1.0.0
--pure-border-color-regular	浅色边框色	#dcdfe6	+1.0.0
--pure-font-size-default	默认文本字体尺寸	1em	+1.0.0
--pure-font-size-smaller	相对小一点的文字尺寸	0.75em	+1.0.0
--pure-font-size-mini	最小的文字尺寸	0.5em	+1.0.0
--pure-font-size-larger	相对大一点的文字尺寸	1.25em	+1.0.0
--pure-opacity-hover	hover-class 时的透明度	0.75	+1.0.0
--pure-opacity-disabled	禁用状态时的透明度	0.50	+1.0.0
--pure-opacity-light-text	相对浅颜色文字的透明度	0.75	+1.0.0
--pure-opacity-lighter-text	相对更浅颜色文字的透明度	0.50	+1.0.0
--pure-opacity-lightest-text	最浅颜色文字的透明度	0.25	+1.0.0
--pure-opacity-light-background	相对浅颜色背景的透明度	0.25	+1.0.0
--pure-z-index-upper	高层级	900	+1.0.0
--pure-z-index-middle	中层级	500	+1.0.0
--pure-z-index-lower	低层级	100	+1.0.0