mjz update
This commit is contained in:
mjz
@@ -6,7 +6,7 @@ article: false
|
||||
---
|
||||
|
||||
::: tip 温馨提示
|
||||
本文档并非是官方文档，而是本人自己经常使用 Color UI，但是又找不到一个满意的文档，不如自己搭建一个文档，自己使用方便的同时也方便大家使用
|
||||
本文档并非是官方文档，而是本人自己经常使用 Color UI，但是又找不到一个满意的文档，不如自己搭建一个文档，自己使用方便的同时也方便大家使用。
|
||||
:::
|
||||
|
||||
## 基本介绍
|
||||
@@ -17,6 +17,8 @@ Color UI 我想大家都知晓吧，我就不过多阐述了，是 **文晓港**
|
||||
|
||||
[ColorUI 插件市场](https://ext.dcloud.net.cn/plugin?id=239)
|
||||
|
||||
[ColorUI 在线展示](https://miren123.gitee.io/colorui-h5/#/) 因为右侧的h5是用iframe来嵌入的，因此字体和极小一部分的样式会有出入，文档里只做展示，比较完整的样式，点这里查看。
|
||||
|
||||
## 文档说明
|
||||
|
||||
文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。
|
||||
|
||||
@@ -55,11 +55,17 @@ article: false
|
||||
## 镂空按钮
|
||||
`.bg-` 换成 `.line-`
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.lines-red|... 边框深（大）
|
||||
.line-red|... 边框浅（小）
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<button class="cu-btn round line-red shadow">按钮</button>
|
||||
```
|
||||
|
||||
## 块状按钮
|
||||
|
||||
> css 代码
|
||||
|
||||
+122
-6
@@ -5,10 +5,126 @@ permalink: /pages/basics/tag
|
||||
article: false
|
||||
---
|
||||
|
||||
## 标签
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/tag`
|
||||
```vue
|
||||
## 标签形状
|
||||
> css 代码
|
||||
```css
|
||||
.cu-tag 默认
|
||||
.cu-tag round 椭圆
|
||||
.cu-tag radius 圆角
|
||||
```
|
||||
:::
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class='cu-tag'>默认</view>
|
||||
<view class='cu-tag round'>椭圆</view>
|
||||
<view class='cu-tag radius'>圆角</view>
|
||||
```
|
||||
|
||||
## 标签尺寸
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.cu-tag sm 小尺寸
|
||||
.cu-tag 默认
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class='cu-tag radius sm'>小尺寸</view>
|
||||
<view class='cu-tag radius'>普通尺寸</view>
|
||||
```
|
||||
|
||||
## 标签颜色
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.bg-red 背景颜色 | .bg-...
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cu-tag bg-red">标签</view>
|
||||
```
|
||||
|
||||
## 镂空标签
|
||||
`.bg-` 换成 `.line-`
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.line-red|...
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cu-tag line-red">标签</view>
|
||||
```
|
||||
|
||||
## 胶囊样式
|
||||
|
||||
父容器加样式 `.cu-capsule`，里面包裹需要的图标和标签
|
||||
|
||||
> 演示代码 可对比右侧预览
|
||||
```vue
|
||||
<view class="cu-capsule">
|
||||
<view class='cu-tag bg-red'>
|
||||
<text class='cuIcon-likefill'></text>
|
||||
</view>
|
||||
<view class="cu-tag line-red">
|
||||
12
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-capsule round">
|
||||
<view class='cu-tag bg-blue '>
|
||||
<text class='cuIcon-likefill'></text>
|
||||
</view>
|
||||
<view class="cu-tag line-blue">
|
||||
23
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-capsule round">
|
||||
<view class='cu-tag bg-blue '>
|
||||
说明
|
||||
</view>
|
||||
<view class="cu-tag line-blue">
|
||||
123
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-capsule radius">
|
||||
<view class='cu-tag bg-grey '>
|
||||
<text class='cuIcon-likefill'></text>
|
||||
</view>
|
||||
<view class="cu-tag line-grey">
|
||||
23
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-capsule radius">
|
||||
<view class='cu-tag bg-brown sm'>
|
||||
<text class='cuIcon-likefill'></text>
|
||||
</view>
|
||||
<view class="cu-tag line-brown sm">
|
||||
23
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
## 数字标签
|
||||
|
||||
父容器一般为头像 `cu-avatar`，其中包裹**标签**，加入样式 `.badge`
|
||||
|
||||
> 演示代码 可对比右侧预览
|
||||
```vue
|
||||
<view class='cu-avatar xl radius'>
|
||||
港
|
||||
<view class="cu-tag badge">99+</view>
|
||||
</view>
|
||||
<view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)">
|
||||
<view class='cu-tag badge'>9</view>
|
||||
</view>
|
||||
<view class='cu-avatar xl radius'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<text class='cuIcon-people'></text>
|
||||
</view>
|
||||
<view class='cu-avatar xl radius'>
|
||||
<view class='cu-tag badge'>99+</view>
|
||||
</view>
|
||||
```
|
||||
@@ -5,10 +5,90 @@ permalink: /pages/basics/avatar
|
||||
article: false
|
||||
---
|
||||
|
||||
## 头像
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/basics/avatar`
|
||||
```vue
|
||||
## 头像形状
|
||||
> css 代码
|
||||
```css
|
||||
.cu-avatar 默认
|
||||
.cu-avatar round 圆
|
||||
.cu-avatar radius 圆角
|
||||
```
|
||||
:::
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class='cu-avatar'>默认</view>
|
||||
<view class='cu-avatar round'>椭圆</view>
|
||||
<view class='cu-avatar radius'>圆角</view>
|
||||
```
|
||||
|
||||
## 头像尺寸
|
||||
|
||||
> css 代码
|
||||
```css
|
||||
.cu-avatar sm 小 48upx / 24px
|
||||
.cu-avatar 普通 64upx / 32px
|
||||
.cu-avatar lg 大 96upx / 48px
|
||||
.cu-avatar xl 较大 128upx / 64px
|
||||
```
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class='cu-avatar radius sm'>小尺寸</view>
|
||||
<view class='cu-avatar radius'></view>
|
||||
<view class='cu-avatar radius lg'></view>
|
||||
<view class='cu-avatar radius xl'></view>
|
||||
```
|
||||
|
||||
## 内嵌文字（图标）
|
||||
|
||||
父容器加上 `.cu-avatar`，该容器内添加文字或者图标。
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cu-avatar radius">
|
||||
<text class="cuIcon-people"></text>
|
||||
</view>
|
||||
<view class="cu-avatar radius margin-left">
|
||||
<text>港</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
## 头像颜色
|
||||
|
||||
父容器加上 `.cu-avatar .bg-red|...`，该容器内添加文字或者图标。
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cu-avatar radius bg-red">
|
||||
<text class="cuIcon-people"></text>
|
||||
</view>
|
||||
<view class="cu-avatar radius bg-red margin-left">
|
||||
<text>港</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
## 头像组
|
||||
|
||||
父容器加上 `cu-avatar-group`，该容器内放置头像即可
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cu-avatar-group">
|
||||
<view class="cu-avatar radius bg-red">
|
||||
<text class="cuIcon-people"></text>
|
||||
</view>
|
||||
<view class="cu-avatar radius bg-red margin-left">
|
||||
<text>港</text>
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
## 头像标签
|
||||
|
||||
父容器是头像，该容器内是数字标签。
|
||||
|
||||
> 演示代码
|
||||
```vue
|
||||
<view class="cu-avatar radius bg-red margin-left">
|
||||
<view class="cu-tag badge cuIcon-male bg-blue"></view>
|
||||
</view>
|
||||
```
|
||||
Reference in New Issue
Block a user