Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

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