molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
This commit is contained in:
mjz
2023-05-28 22:33:23 +08:00
parent f522f60f80
commit 31b64e1e46
69 changed files with 491 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/10.文档/20.基础元素/50.按钮.md
+6
View File
@@ -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 代码
docs/10.文档/20.基础元素/60.标签.md
+122 -6
View File
@@ -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>
```
docs/10.文档/20.基础元素/70.头像.md
+86 -6
View File
@@ -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>
```