From 357553ae08b9da29399a8f36db08248d8feda769 Mon Sep 17 00:00:00 2001 From: mehaotian <490272692@qq.com> Date: Fri, 19 Nov 2021 10:51:04 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0card=E3=80=81list=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (cherry picked from commit 653dae18c8c473aa8f56ffdf8fbc87d1de265068) --- docs/component/uniui/resource.md | 2 +- docs/component/uniui/uni-card.md | 118 +++++++++++++--------- docs/component/uniui/uni-collapse.md | 1 - docs/component/uniui/uni-data-checkbox.md | 1 - docs/component/uniui/uni-data-picker.md | 1 - docs/component/uniui/uni-easyinput.md | 1 - docs/component/uniui/uni-file-picker.md | 1 - docs/component/uniui/uni-forms.md | 1 - docs/component/uniui/uni-list.md | 112 +++++++------------- 9 files changed, 110 insertions(+), 128 deletions(-) diff --git a/docs/component/uniui/resource.md b/docs/component/uniui/resource.md index 18ab6fe41..b1ae142f8 100644 --- a/docs/component/uniui/resource.md +++ b/docs/component/uniui/resource.md @@ -6,6 +6,6 @@ Axurez资源正在整理和完善中。

在Sketch中快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格

- 下载 + 下载
diff --git a/docs/component/uniui/uni-card.md b/docs/component/uniui/uni-card.md index 57a655139..36383804e 100644 --- a/docs/component/uniui/uni-card.md +++ b/docs/component/uniui/uni-card.md @@ -1,63 +1,77 @@ > **组件名：uni-card** > 代码块： `uCard` - 卡片视图组件。 > **注意事项** > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 > - 因为平台兼容问题 ， 目前 APP-NVUE 安卓平台下不支持阴影 +> - **1.2.1 版本有较大改动 ，更新组件请注意组件兼容问题** ### 基本用法 -在 ``template`` 中使用组件 - ```html - - - 内容主体，可自定义内容及样式 + + 这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。 +``` - - - +### 卡片标题+额外信息 +使用 `title` 属性设置卡片标题 + +使用 `extra` 属性设置卡片标题额外信息 + +```html + + 这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。 +``` + +### 双标题卡片 + 略缩图 +使用 `sub-title` 属性设置卡片副标题 + +使用 `thumbnail` 属性设置卡片标题左略缩图 - - - uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。 +```html + + 这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。 +``` - - - uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。 +### 通栏卡片 +使用 `is-full` 属性设置卡片通栏 ，通栏没有外边距，左右会贴合父元素 + +```html + + 这是一个通栏卡片 ，通栏没有外边距，左右会贴合父元素。 +``` +### 卡片封面图 + 操作栏 + +使用 `cover` 属性设置卡片封面图,或者使用 `cover` 插槽设置卡片封面图 + +使用 `actions` 插槽设置卡片操作栏内容，示例样式排版和事件需要自己实现 - - - 默认内容 - + + + 评论 + + ``` @@ -65,16 +79,23 @@ ### Card Props -|属性名|类型|默认值|说明 | +|属性名|类型|默认值|说明| |:-:|:-:|:-:|:-:| |title|String|-|标题文字| +|sub-title|String|-|副标题文字| |extra|String|-|标题额外信息| -|note|String|-|底部信息 | -|thumbnail|String |-|标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：`/static/xxx.png` | -|mode|String|basic |卡片模式 ，可选值， basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片| -|isFull|Boolean|false|卡片内容是否通栏，为true时将去除padding值| -|isShadow|Boolean|false |卡片内容是否开启阴影| - +|thumbnail|String |-|标题左侧缩略图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：`/static/xxx.png`| +|cover|String|-|封面图,支持网络图片，本地图片，本图片需要传入一个绝对路径，如：`/static/xxx.png`| +|is-full|Boolean|false|卡片内容是否通栏，为true时将去除padding值| +|is-shadow|Boolean|false |卡片内容是否开启阴影| +|shadow|String|0px 0px 3px 1px rgba(0, 0, 0, 0.08) |卡片阴影,需符合 css 值| +|border|Boolean|true |卡片边框| +|margin|String|true |卡片外边距| +|spacing|String|true|卡片内边距| +|padding|String|true|卡片内容内边距| +|border|Boolean|true|卡片边框| +|mode[弃用]|String|basic |卡片模式 ，可选值， basic：基础卡片 ；style ：图文卡片 ； title ：标题卡片| +|note[弃用]|String|-|底部信息| ### Card Events @@ -87,8 +108,11 @@ |插槽称名|说明| |:-:|:-:| -|header |卡片头部插槽（ 图文卡片 mode="style" 时，不支持）| -|footer |卡片底部插槽 | +|cover|封面图插槽| +|title|卡片头部插槽，替换原header插槽| +|actions|操作栏插槽，替换原footer插槽| +|header[弃用]|卡片头部插槽（ 图文卡片 mode="style" 时，不支持）| +|footer[弃用]|卡片底部插槽 | ## 组件示例 diff --git a/docs/component/uniui/uni-collapse.md b/docs/component/uniui/uni-collapse.md index b52a08981..80c8b29ed 100644 --- a/docs/component/uniui/uni-collapse.md +++ b/docs/component/uniui/uni-collapse.md @@ -14,7 +14,6 @@ > - 如需自定义组件默认边框颜色等，请使用插槽自定义内容并合理使用 `border ` 和 `title-border` 属性 > - 折叠面板仅支持嵌套使用，请勿单独使用 > - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` -> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 ### 基本用法 diff --git a/docs/component/uniui/uni-data-checkbox.md b/docs/component/uniui/uni-data-checkbox.md index b98b2a812..1f690bbe0 100644 --- a/docs/component/uniui/uni-data-checkbox.md +++ b/docs/component/uniui/uni-data-checkbox.md @@ -17,7 +17,6 @@ > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 > - 组件需要依赖 `sass` 插件 ，请自行手动安装 > - 本组件为数据驱动，目的是快速投入使用，只可通过 style 覆盖有限样式，不支持自定义更多样式 -> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 > - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` > - 如组件显示有问题 ，请升级 `HBuilderX` 为 `v3.1.0` 以上 diff --git a/docs/component/uniui/uni-data-picker.md b/docs/component/uniui/uni-data-picker.md index d09659111..93f15e2d9 100644 --- a/docs/component/uniui/uni-data-picker.md +++ b/docs/component/uniui/uni-data-picker.md @@ -21,7 +21,6 @@ > **注意事项** > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 > - 组件需要依赖 `sass` 插件 ，请自行手动安装 -> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 > - `` 内部包含了弹出层组件 `` 外层的布局可能会影响弹出层，[详情](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Common_CSS_Questions) ## API diff --git a/docs/component/uniui/uni-easyinput.md b/docs/component/uniui/uni-easyinput.md index e31aeb49b..d2df09b22 100644 --- a/docs/component/uniui/uni-easyinput.md +++ b/docs/component/uniui/uni-easyinput.md @@ -10,7 +10,6 @@ easyinput 组件是对原生input组件的增强 ，是专门为配合表单组 > **注意事项** > 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 > - 组件需要依赖 `sass` 插件 ，请自行手动安装 -> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 ### 基本用法 diff --git a/docs/component/uniui/uni-file-picker.md b/docs/component/uniui/uni-file-picker.md index 6003d7114..321d8fb75 100644 --- a/docs/component/uniui/uni-file-picker.md +++ b/docs/component/uniui/uni-file-picker.md @@ -11,7 +11,6 @@ > - 如不绑定服务空间，`autoUpload`默认为`false`且不可更改 > - 选择文件目前只支持 `H5` 和 `微信小程序平台` ，且 `微信小程序平台` 使用 `wx.chooseMessageFile()` > - v-model 值需要自动上传成功后才会绑定值，一般只用来回显数据 -> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 ### 基础用法 diff --git a/docs/component/uniui/uni-forms.md b/docs/component/uniui/uni-forms.md index 27a59fd12..2f7e5aa3a 100644 --- a/docs/component/uniui/uni-forms.md +++ b/docs/component/uniui/uni-forms.md @@ -23,7 +23,6 @@ uni-app的内置组件已经有了 `
`组件，用于提交表单内容。 > - 如果配置 `validateTrigger` 属性为 `bind` 且表单域组件使用 `input` 事件触发会耗损部分性能，请谨慎使用 > - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` > - uni-forms 中不包含其他表单组件，如需使用 uni-easyinput、uni-data-checkbox 等组件，需要自行引入 -> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 ### 基本用法 diff --git a/docs/component/uniui/uni-list.md b/docs/component/uniui/uni-list.md index 7103b4c0d..f392d1a32 100644 --- a/docs/component/uniui/uni-list.md +++ b/docs/component/uniui/uni-list.md @@ -31,8 +31,6 @@ uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-l > - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译 > - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义 > - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli` -> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 - ### 基本用法 @@ -104,93 +102,59 @@ uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-l ### List Props -属性名 |类型 |默认值 | 说明 -:-: |:-: |:-: | :-: -border |Boolean |true | 是否显示边框 +|属性名 |类型 |默认值 | 说明| +|:-: |:-: |:-: | :-: | +|border |Boolean |true | 是否显示边框| ### ListItem Props -属性名 |类型 |默认值 | 说明 -:-: |:-: |:-: | :-: -title |String |- | 标题 -note |String |- | 描述 -ellipsis |Number |0 | title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】 -thumb |String |- | 左侧缩略图，若thumb有值，则不会显示扩展图标 -thumbSize |String |medium | 略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图; -showBadge |Boolean |false | 是否显示数字角标 -badgeText |String |- | 数字角标内容 -badgeType |String |- | 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21) -rightText |String |- | 右侧文字内容 -disabled |Boolean |false | 是否禁用 -showArrow |Boolean |true | 是否显示箭头图标 -link |String |navigateTo | 新页面跳转方式，可选值见下表 -to |String |- | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功 -clickable |Boolean |false | 是否开启点击反馈 -showSwitch |Boolean |false | 是否显示Switch -switchChecked |Boolean |false | Switch是否被选中 -showExtraIcon |Boolean |false | 左侧是否显示扩展图标 -extraIcon |Object |- | 扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28) -direction | String |row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制 - +|属性名|类型|默认值|说明 | +|:-:|:-:|:-:|:-:| +|title|String|-|标题| +|note|String|-|描述| +|ellipsis|Number|0| title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;| +|disabled|Boolean|false|是否禁用 | +|thumb|String|-|左侧缩略图，若thumb有值，则不会显示扩展图标| +|thumbSize|String|medium|略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;| +|rightText|String|-|右侧文字内容| +|showArrow|Boolean|true|是否显示箭头图标 | +|link|String|navigateTo |新页面跳转方式，可选值见下表| +|to|String|-|新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功 | +|clickable|Boolean|false|是否开启点击反馈| +|showExtraIcon|Boolean|false|左侧是否显示扩展图标| +|extraIcon|Object|-|扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)| +|direction[弃用]| String|row|排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制| +|showBadge[弃用]|Boolean|false|是否显示数字角标| +|badgeText[弃用]|String|-|数字角标内容| +|badgeType[弃用]|String|-|数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)| +|showSwitch[弃用]|Boolean|false|是否显示Switch| +|switchChecked|Boolean[弃用]|false|Switch是否被选中 | #### Link Options -属性名 | 说明 -:-: | :-: -navigateTo | 同 uni.navigateTo() -redirectTo | 同 uni.reLaunch() -reLaunch | 同 uni.reLaunch() -switchTab | 同 uni.switchTab() +|属性名| 说明| +|:-:|:-:| +|navigateTo|同 uni.navigateTo()| +|redirectTo|同 uni.reLaunch()| +|reLaunch|同 uni.reLaunch()| +|switchTab|同 uni.switchTab()| ### ListItem Events -事件称名 |说明 |返回参数 -:-: |:-: |:-: -click |点击 uniListItem 触发事件，需开启点击反馈 |- -switchChange |点击切换 Switch 时触发，需显示 switch |e={value:checked} +|事件称名|说明|返回参数| +|:-:|:-:|:-:| +|@click|点击 uniListItem 触发事件，需开启点击反馈|-| ### ListItem Slots -名称 | 说明 -:-: | :-: -header | 左/上内容插槽，可完全自定义默认显示 -body | 中间内容插槽，可完全自定义中间内容 -footer | 右/下内容插槽，可完全自定义右侧内容 - - -> **通过插槽扩展** -> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 -> 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 -> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer` -> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分 -> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分 -> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。 - - -**示例** - -```html - - - - - - - - - 自定义插槽 - - - - -``` +|名称|说明| +|:-:|:-:| +|default|默认插槽| +|icon|图标插槽| +|actions|操作栏插槽| ## 基于uni-list扩展的页面模板 -- GitLab