Skip to content

U
unidocs-zh

程序yang / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 1
Fork 0
U
unidocs-zh
提交 130e103c 编写于 作者: study夏羽's avatar study夏羽
浏览文件
操作

add preview

上级 24568cb9
隐藏空白更改
内联 并排
Showing with 94 addition and 52 deletion
docs/component/button.md
浏览文件 @ 130e103c
...@@ -139,8 +139,6 @@ button 组件没有 url 属性，如果要跳转页面，可以在@click中编 ...@@ -139,8 +139,6 @@ button 组件没有 url 属性，如果要跳转页面，可以在@click中编
``` ```
::: :::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/f3edf730-4f32-11eb-8a36-ebb87efcf8c0.png)
**注意** **注意**
......
docs/component/checkbox.md
浏览文件 @ 130e103c
...@@ -19,10 +19,14 @@ ...@@ -19,10 +19,14 @@
|checked|Boolean|false|当前是否选中，可用来设置默认选中| |checked|Boolean|false|当前是否选中，可用来设置默认选中|
|color|Color||checkbox的颜色，同css的color| |color|Color||checkbox的颜色，同css的color|
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/checkbox/checkbox) **示例**
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/checkbox/checkbox
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -69,6 +73,9 @@ ...@@ -69,6 +73,9 @@
</view> </view>
</view> </view>
</template> </template>
```
> Script
```vue
<script> <script>
export default { export default {
data() { data() {
...@@ -118,18 +125,18 @@ ...@@ -118,18 +125,18 @@
} }
} }
</script> </script>
```
> Style
``` vue
<style> <style>
.uni-list-cell { .uni-list-cell {
justify-content: flex-start justify-content: flex-start
} }
</style> </style>
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/f4db8b80-4f32-11eb-bdc1-8bd33eb6adaa.png)
**注意** **注意**
- checkbox的默认颜色，在不同平台不一样。微信小程序、360小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。 - checkbox的默认颜色，在不同平台不一样。微信小程序、360小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
- 如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%`style="transform:scale(0.7)"` - 如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%`style="transform:scale(0.7)"`
......
docs/component/editor.md
浏览文件 @ 130e103c
...@@ -68,14 +68,18 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序 ...@@ -68,14 +68,18 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
**示例代码** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/editor/editor) **示例代码** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/editor/editor)
```html ::: preview https://hellouniapp.dcloud.net.cn/pages/component/editor/editor
> Template
``` vue
<template> <template>
<view class="container"> <view class="container">
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor> <editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
<button type="warn" @tap="undo">撤销</button> <button type="warn" @tap="undo">撤销</button>
</view> </view>
</template> </template>
```
> Script
``` vue
<script> <script>
export default { export default {
data() { data() {
...@@ -101,7 +105,9 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序 ...@@ -101,7 +105,9 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
} }
} }
</script> </script>
```
> Style
``` vue
<style> <style>
.container { .container {
padding: 10px; padding: 10px;
...@@ -118,3 +124,4 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序 ...@@ -118,3 +124,4 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序
} }
</style> </style>
``` ```
:::
\ No newline at end of file
docs/component/form.md
浏览文件 @ 130e103c
...@@ -15,7 +15,10 @@ ...@@ -15,7 +15,10 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/form/form) **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/form/form)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/form/form
> Template
``` vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -65,6 +68,9 @@ ...@@ -65,6 +68,9 @@
</view> </view>
</view> </view>
</template> </template>
```
> Script
``` vue
<script> <script>
export default { export default {
data() { data() {
...@@ -86,16 +92,16 @@ ...@@ -86,16 +92,16 @@
} }
} }
</script> </script>
```
> Style
``` vue
<style> <style>
.uni-form-item .title { .uni-form-item .title {
padding: 20rpx 0; padding: 20rpx 0;
} }
</style> </style>
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/f5e29b40-4f32-11eb-bdc1-8bd33eb6adaa.png)
**使用内置 behaviors** **使用内置 behaviors**
......
docs/component/input.md
浏览文件 @ 130e103c
...@@ -148,7 +148,11 @@ App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adju ...@@ -148,7 +148,11 @@ App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adju
**input示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/input/input) **input示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/input/input)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/input/input
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -203,8 +207,8 @@ App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adju ...@@ -203,8 +207,8 @@ App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adju
</view> </view>
</template> </template>
``` ```
> Script
```javascript ```vue
export default { export default {
data() { data() {
return { return {
...@@ -232,8 +236,7 @@ export default { ...@@ -232,8 +236,7 @@ export default {
} }
} }
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/f713b320-4f30-11eb-b680-7980c8a877b8.png)
......
docs/component/label.md
浏览文件 @ 130e103c
...@@ -18,7 +18,10 @@ for优先级高于内部控件，内部有多个控件的时候默认触发第 ...@@ -18,7 +18,10 @@ for优先级高于内部控件，内部有多个控件的时候默认触发第
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/label/label) **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/label/label)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/label/label
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -70,8 +73,8 @@ for优先级高于内部控件，内部有多个控件的时候默认触发第 ...@@ -70,8 +73,8 @@ for优先级高于内部控件，内部有多个控件的时候默认触发第
</view> </view>
</template> </template>
``` ```
> Script
```javascript ```vue
export default { export default {
data() { data() {
return { return {
...@@ -125,6 +128,5 @@ export default { ...@@ -125,6 +128,5 @@ export default {
} }
} }
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/4588a660-4f30-11eb-a16f-5b3e54966275.png)
docs/component/picker-view.md
浏览文件 @ 130e103c
...@@ -29,8 +29,9 @@ ...@@ -29,8 +29,9 @@
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
::: preview https://hellouniapp.dcloud.net.cn/pages/component/picker-view/picker-view
```html > Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -50,6 +51,9 @@ ...@@ -50,6 +51,9 @@
</picker-view> </picker-view>
</view> </view>
</template> </template>
```
> Script
```vue
<script> <script>
export default { export default {
data: function () { data: function () {
...@@ -92,6 +96,9 @@ ...@@ -92,6 +96,9 @@
} }
} }
</script> </script>
```
> Style
```vue
<style> <style>
.picker-view { .picker-view {
width: 750rpx; width: 750rpx;
...@@ -105,10 +112,9 @@ ...@@ -105,10 +112,9 @@
text-align: center; text-align: center;
} }
</style> </style>
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/433a97b0-4f30-11eb-b680-7980c8a877b8.png)
**Tips** **Tips**
- 微信小程序端，滚动时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭 - 微信小程序端，滚动时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
......
docs/component/picker.md
浏览文件 @ 130e103c
...@@ -126,7 +126,10 @@ ...@@ -126,7 +126,10 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/picker/picker) **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/picker/picker)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/picker/picker
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -174,7 +177,8 @@ ...@@ -174,7 +177,8 @@
</view> </view>
</template> </template>
``` ```
```javascript > Script
```vue
export default { export default {
data() { data() {
const currentDate = this.getDate({ const currentDate = this.getDate({
...@@ -225,8 +229,7 @@ export default { ...@@ -225,8 +229,7 @@ export default {
} }
} }
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/42826b40-4f30-11eb-b680-7980c8a877b8.png)
示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中 示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中
......
docs/component/radio.md
浏览文件 @ 130e103c
...@@ -24,7 +24,10 @@ ...@@ -24,7 +24,10 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/radio/radio) **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/radio/radio)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/radio/radio
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -49,7 +52,8 @@ ...@@ -49,7 +52,8 @@
</view> </view>
</template> </template>
``` ```
```javascript > Script
```vue
export default { export default {
data() { data() {
return { return {
...@@ -93,9 +97,9 @@ export default { ...@@ -93,9 +97,9 @@ export default {
} }
} }
} }
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/44bec6b0-4f30-11eb-a16f-5b3e54966275.png)
**注意** **注意**
......
docs/component/slider.md
浏览文件 @ 130e103c
...@@ -29,7 +29,10 @@ ...@@ -29,7 +29,10 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/slider/slider) **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/slider/slider)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/slider/slider
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -57,8 +60,8 @@ ...@@ -57,8 +60,8 @@
</view> </view>
</template> </template>
``` ```
> Script
```javascript ```vue
export default { export default {
data() { data() {
return {} return {}
...@@ -71,8 +74,7 @@ export default { ...@@ -71,8 +74,7 @@ export default {
} }
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/96daf000-4f2f-11eb-b997-9918a5dda011.png)
**Tips** **Tips**
......
docs/component/switch.md
浏览文件 @ 130e103c
...@@ -14,7 +14,9 @@ ...@@ -14,7 +14,9 @@
**示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/switch/switch) **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/switch/switch)
```html ::: preview https://hellouniapp.dcloud.net.cn/pages/component/switch/switch
> Template
```vue
<template> <template>
<view> <view>
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
...@@ -38,8 +40,8 @@ ...@@ -38,8 +40,8 @@
</view> </view>
</template> </template>
``` ```
> Script
```javascript ```vue
export default { export default {
data() { data() {
return {} return {}
...@@ -54,8 +56,8 @@ export default { ...@@ -54,8 +56,8 @@ export default {
} }
} }
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/51f6fb50-4f2f-11eb-b680-7980c8a877b8.png)
示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中 示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中
......
docs/component/textarea.md
浏览文件 @ 130e103c
...@@ -50,7 +50,10 @@ ...@@ -50,7 +50,10 @@
**示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/textarea/textarea) **示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/textarea/textarea)
以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
```html
::: preview https://hellouniapp.dcloud.net.cn/pages/component/textarea/textarea
> Template
```vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view> <view>
...@@ -65,8 +68,8 @@ ...@@ -65,8 +68,8 @@
</view> </view>
</template> </template>
``` ```
> Script
```javascript ```vue
export default { export default {
data() { data() {
return {} return {}
...@@ -78,8 +81,7 @@ export default { ...@@ -78,8 +81,7 @@ export default {
} }
} }
``` ```
:::
![uniapp](https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3aa1edc0-4f2f-11eb-bd01-97bc1429a9ff.png)
**Tips** **Tips**
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或