@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/mobile/app/mask/webdoc/mask.cn.md

@@ -0,0 +1,11 @@
+---
+title: Mask 列表
+---
+
+# Mask 遮罩层
+
+<div>
+
+遮罩层通常用于覆盖在页面上，以阻止用户对页面或元素的操作，同时可以显示一些提示信息或加载状态等。
+
+</div>

package/demos/mobile/app/mask/webdoc/mask.en.md

@@ -0,0 +1,11 @@
+---
+title: Mask
+---
+
+# Mask
+
+<div>
+
+A mask layer is typically used to cover a page, preventing users from interacting with the page or elements, while displaying some informational or loading state messages.
+
+</div>

package/demos/mobile/app/mask/webdoc/mask.js

@@ -0,0 +1,114 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'base',
+      name: {
+        'zh-CN': '基本使用',
+        'en-US': 'left right arrow'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>v-model:visible</code> 属性设置显示与隐藏遮罩层；<code>click</code> 监听点击事件。</p>',
+        'en-US': '<p>double-line</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'cancel-touch',
+      name: {
+        'zh-CN': '点击遮罩层不隐藏',
+        'en-US': 'No hide after clicking'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>cancel-touch</code> 属性设置点击遮罩层后组件不隐藏</p>',
+        'en-US':
+          '<p>"By setting the <code>cancel-touch</code> attribute, the component will not be hidden when clicking on the mask layer.</p>'
+      },
+      codeFiles: ['click-no-hide.vue']
+    },
+    {
+      demoId: 'z-index',
+      name: {
+        'zh-CN': '层叠数值',
+        'en-US': 'z-index'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>z-index</code> 属性设置层叠数值。</p>',
+        'en-US': '<p>"Use the <code>z-index</code> attribute to set z-index of CSS property.</p>'
+      },
+      codeFiles: ['z-index.vue']
+    },
+    {
+      demoId: 'slot-default',
+      name: {
+        'zh-CN': '默认插槽',
+        'en-US': 'Default slot'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>default</code> 默认插槽自定义嵌入内容。</p>',
+        'en-US':
+          '<p>"By setting the <code>cancel-touch</code> attribute, the component will not be hidden when clicking on the mask layer.</p>'
+      },
+      codeFiles: ['slot-default.vue']
+    }
+  ],
+  apis: [
+    {
+      name: 'Mask',
+      type: 'component',
+      properties: [
+        {
+          name: 'cancelTouch',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用touch事件，设为 <code>true</code> 后点击遮罩层不会关闭',
+            'en-US': "whether to disable touch events, and mask wouldn't close when it was set <code>true</code>"
+          },
+          demoId: 'cancel-touch'
+        },
+        {
+          name: 'visible',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否展示遮罩层',
+            'en-US': 'whether to show mask layer'
+          },
+          demoId: 'base'
+        },
+        {
+          name: 'z-index',
+          type: 'number',
+          defaultValue: '99',
+          desc: {
+            'zh-CN': '层叠数值',
+            'en-US': 'z-index property'
+          },
+          demoId: 'z-index'
+        }
+      ],
+      events: [
+        {
+          name: 'click',
+          desc: {
+            'zh-CN': '点击遮罩层触发',
+            'en-US': 'Click'
+          },
+          demoId: 'basic-usage'
+        }
+      ],
+      slots: [
+        {
+          name: 'default',
+          desc: {
+            'zh-CN': '默认插槽',
+            'en-US': 'Default slot'
+          },
+          demoId: 'slot-default'
+        }
+      ]
+    }
+  ]
+}

package/demos/mobile/app/mask/z-index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="mobile-mask-demo">
+    <tiny-button  @click="visible = true">点击展示遮罩层</tiny-button>
+    <tiny-mask v-model:visible="visible" :z-index="zIndex"></tiny-mask>
+  </div>
+</template>
+
+<script>
+import { Mask, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMask: Mask,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false,
+      zIndex: 9999
+    }
+  },
+}
+</script>
+
+<style scoped>
+.mobile-mask-demo {
+  height: 100%;
+  background: #f4f4f4;
+}
+</style>

package/demos/mobile/app/tag/basic-usage.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag color="default" text="默认" />
+    <tiny-tag color="default"> 默认默认默认默认默认默认默认默认</tiny-tag>
+  </div>
+</template>
+
+<script>
+import { Tag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style>
+.tiny-tag-demo {
+  padding: 10px;
+}
+
+.tiny-mobile-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

package/demos/mobile/app/tag/different-color.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag color="default" text=""> 默认 </tiny-tag>
+    <tiny-tag color="red" text="红色" />
+    <tiny-tag color="blue" text="蓝色"> </tiny-tag>
+    <tiny-tag color="yellow" text="黄色"> </tiny-tag>
+    <tiny-tag color="green" text="绿色"> </tiny-tag>
+  </div>
+</template>
+
+<script>
+import { Tag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style>
+.tiny-tag-demo {
+  padding: 10px;
+}
+
+.tiny-mobile-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

package/demos/mobile/app/tag/max-width.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag color="default" max-width="100"> 默认默认默认默认默认默认默认默认 </tiny-tag>
+  </div>
+</template>
+
+<script>
+import { Tag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style>
+.tiny-tag-demo {
+  padding: 10px;
+}
+
+.tiny-mobile-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

package/demos/mobile/app/tag/mini.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag color="default"> 默认 </tiny-tag>
+    <tiny-tag color="default" mini> 小尺寸 </tiny-tag>
+  </div>
+</template>
+
+<script>
+import { Tag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style>
+.tiny-tag-demo {
+  padding: 10px;
+}
+
+.tiny-mobile-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

package/demos/mobile/app/tag/webdoc/tag.cn.md

@@ -0,0 +1,7 @@
+---
+title: Tag 标签
+---
+
+# Tag 标签
+
+<div>用于标记事物的属性和维度</div>

package/demos/mobile/app/tag/webdoc/tag.en.md

@@ -0,0 +1,7 @@
+---
+title: Tag
+---
+
+# Tag
+
+<div>Used to mark transaction attributes and dimensions</div>

package/demos/mobile/app/tag/webdoc/tag.js

@@ -0,0 +1,96 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      'demoId': 'basic-usage',
+      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
+      'desc': {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      'codeFiles': ['basic-usage.vue']
+    },
+    {
+      'demoId': 'different-color',
+      'name': { 'zh-CN': '不同颜色', 'en-US': 'Different Color' },
+      'desc': {
+        'zh-CN': '不同颜色',
+        'en-US': 'Different Color'
+      },
+      'codeFiles': ['different-color.vue']
+    },
+    {
+      'demoId': 'max-width',
+      'name': { 'zh-CN': '最大宽度', 'en-US': 'Max Width' },
+      'desc': {
+        'zh-CN': '最大宽度',
+        'en-US': 'Max Width'
+      },
+      'codeFiles': ['max-width.vue']
+    },
+    {
+      'demoId': 'mini',
+      'name': { 'zh-CN': '小尺寸', 'en-US': 'Mini' },
+      'desc': {
+        'zh-CN': '小尺寸',
+        'en-US': 'Mini'
+      },
+      'codeFiles': ['mini.vue']
+    }
+  ],
+  apis: [
+    {
+      'name': 'tag',
+      'type': 'component',
+      'props': [
+        {
+          'name': 'color',
+          'type': 'string',
+          'defaultValue': 'default',
+          'desc': {
+            'zh-CN': '文字颜色：default、red、blue、yellow、green',
+            'en-US': 'text color: default、red、blue、yellow、green'
+          },
+          'demoId': 'different-color'
+        },
+        {
+          'name': 'max-width',
+          'type': 'string | number',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '最大宽度', 'en-US': 'max width' },
+          'demoId': 'max-width'
+        },
+        {
+          'name': 'mini',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '小尺寸',
+            'en-US': 'mini'
+          },
+          'demoId': 'mini'
+        },
+        {
+          'name': 'text',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '文字',
+            'en-US': 'Text'
+          },
+          'demoId': 'basic-usage'
+        }
+      ],
+      'slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '标签内容', 'en-US': 'Label Content' },
+          'demoId': 'slot-default'
+        }
+      ]
+    }
+  ]
+}

package/demos/mobile/menus.js

@@ -79,6 +79,7 @@ export const cmpMenus = [
       { name: 'Slider', nameCn: '滑块', key: 'slider' },
       { name: 'CheckboxGroup', nameCn: '复选框组', key: 'checkboxgroup' },
       { name: 'Input', nameCn: '输入框', key: 'input' },
+      { name: 'Label', nameCn: '文本', key: 'label' },
       { name: 'Radio', nameCn: '单选', key: 'radio' },
       { name: 'Search', nameCn: '搜索框', key: 'search' },
       { name: 'Switch', nameCn: '开关', key: 'switch' },
@@ -98,7 +99,8 @@ export const cmpMenus = [
       { name: 'Loading', nameCn: '加载', key: 'loading' },
       { name: 'Modal', nameCn: '模态框', key: 'modal' },
       { name: 'Popover', nameCn: '气泡', key: 'popover' },
-      { name: 'Toast', nameCn: '轻提示', key: 'toast' }
+      { name: 'Toast', nameCn: '轻提示', key: 'toast' },
+      { name: 'Mask', nameCn: '遮罩层', key: 'mask' }
     ]
   },
   {
@@ -112,7 +114,8 @@ export const cmpMenus = [
       { name: 'Icon', nameCn: '图标', key: 'icon' },
       { name: 'ActionSheet', nameCn: '上滑列表组件', key: 'actionsheet' },
       { name: 'MiniPicker', nameCn: 'mini选择器', key: 'minipicker' },
-      { name: 'UserHead', nameCn: '用户头像', key: 'user-head' }
+      { name: 'UserHead', nameCn: '用户头像', key: 'user-head' },
+      { name: 'Tag', nameCn: '标签', key: 'tag' }
     ]
   }
 ]

package/demos/mobile-first/app/alert/webdoc/alert.js

@@ -1,16 +1,15 @@
 export default {
   column: '2',
   owner: '',
-  demos: [
-    {
+  demos: [{
       demoId: 'type',
       name: {
         'zh-CN': '类型',
-        'en-US': 'basic usage'
+        'en-US': 'type'
       },
       desc: {
         'zh-CN': '<p>通过<code>type</code>设置不同的类型。可选值：success、warning、info、error，默认值：info 。</p>',
-        'en-US': '<p>button type</p>'
+        'en-US': '<p>Use <code>type</code> to set different types. The options are success, warning, info, and error. The default value is info.</p>'
       },
       codeFiles: ['type.vue']
     },
@@ -18,11 +17,11 @@ export default {
       demoId: 'size',
       name: {
         'zh-CN': '大尺寸',
-        'en-US': 'button round'
+        'en-US': 'Large size'
       },
       desc: {
         'zh-CN': '<p>通过 <code>size</code> 属性设置不同的尺寸，可选值：nomal、large，默认值：nomal 。</p>',
-        'en-US': '<p>button round</p>'
+        'en-US': '<p>Use the <code>size</code> attribute to set different sizes. The options are nomal and large. The default value is nomal.</p>'
       },
       codeFiles: ['size.vue']
     },
@@ -30,12 +29,11 @@ export default {
       demoId: 'title',
       name: {
         'zh-CN': '自定义标题',
-        'en-US': 'events'
+        'en-US': 'Custom Title'
       },
       desc: {
-        'zh-CN':
-          '<p>当  <code>size</code>为 large 时显示标题，可设置  <code>title</code> 或  <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>当  <code>size</code>为 large 时显示标题，可设置  <code>title</code> 或  <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。</p>',
+        'en-US': '<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. The default title is displayed according to the set <code>type</code>.</p>'
       },
       codeFiles: ['title.vue']
     },
@@ -55,11 +53,11 @@ export default {
       demoId: 'closable',
       name: {
         'zh-CN': '不可关闭',
-        'en-US': 'events'
+        'en-US': 'Can not be closed'
       },
       desc: {
-        'zh-CN': '<p>通过  <code>closable</code> 属性可设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过  <code>closable</code> 属性可设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。</p>',
+        'en-US': '<p>The <code>closable</code> attribute can be used to set whether to display the Close button. If there is no Close button, the Warning dialog box cannot be closed.</p>'
       },
       codeFiles: ['closable.vue']
     },
@@ -67,11 +65,11 @@ export default {
       demoId: 'custom-description',
       name: {
         'zh-CN': '自定义提示内容',
-        'en-US': 'events'
+        'en-US': 'Customized prompt content'
       },
       desc: {
-        'zh-CN': '<p>可通过 <code>description</code> 属性或插槽设置自定义提示内容。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>可通过 <code>description</code> 属性或插槽设置自定义提示内容。</p>',
+        'en-US': '<p>You can customize the prompt content through the <code>description</code> property or slot.</p>'
       },
       codeFiles: ['custom-description.vue']
     },
@@ -79,11 +77,11 @@ export default {
       demoId: 'slot-default',
       name: {
         'zh-CN': '自定义交互操作',
-        'en-US': 'events'
+        'en-US': 'Customizing Interactions'
       },
       desc: {
-        'zh-CN': '<p>当 <code>size</code> 为 large 时，设置默认插槽自定义交互操作。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>当 <code>size</code> 为 large 时，设置默认插槽自定义交互操作。</p>',
+        'en-US': '<p>Set the default slot custom interaction when <code>size</code> is large.</p>'
       },
       codeFiles: ['slot-default.vue']
     },
@@ -91,11 +89,11 @@ export default {
       demoId: 'close',
       name: {
         'zh-CN': '关闭事件',
-        'en-US': 'events'
+        'en-US': 'Close Event'
       },
       desc: {
-        'zh-CN': '<p><code>close</code> 事件，关闭警告框时触发。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p><code>close</code> 事件，关闭警告框时触发。</p>',
+        'en-US': '<p><code>close</code> event, triggered when the warning dialog box is closed.</p>'
       },
       codeFiles: ['close.vue']
     },
@@ -103,12 +101,11 @@ export default {
       demoId: 'feedback-of-result',
       name: {
         'zh-CN': '表单提交结果反馈',
-        'en-US': 'events'
+        'en-US': 'Form submission result feedback'
       },
       desc: {
-        'zh-CN':
-          '<p>当 <code>size</code> 为 large 时，属性 <code>description</code> 和默认插槽结合使用，可渲染提交反馈界面。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>当 <code>size</code> 为 large 时，属性 <code>description</code> 和默认插槽结合使用，可渲染提交反馈界面。</p>',
+        'en-US': '<p>When <code>size</code> is set to large, the <code>description</code> attribute is used together with the default slot to render the submission feedback interface.</p>'
       },
       codeFiles: ['feedback-of-result.vue']
     },
@@ -116,11 +113,11 @@ export default {
       demoId: 'show-icon',
       name: {
         'zh-CN': '是否显示图标',
-        'en-US': 'events'
+        'en-US': 'Indicates whether to display the icon.'
       },
       desc: {
-        'zh-CN': '<p>通过配置  <code>show-icon</code>  属性，控制图标是否显示。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过配置  <code>show-icon</code>  属性，控制图标是否显示。</p>',
+        'en-US': '<p>You can set the <code>show-icon</code> attribute to control whether to display the icon.</p>'
       },
       codeFiles: ['show-icon.vue']
     },
@@ -128,12 +125,11 @@ export default {
       demoId: 'show-foldable',
       name: {
         'zh-CN': '带标题可折叠样式',
-        'en-US': 'events'
+        'en-US': 'Collapsible Style with Title'
       },
       desc: {
-        'zh-CN':
-          '<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br /> 通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>通过 `flex-basis` 属性可以设置内容插槽的宽度，flex-basis 类型为数组，最多能传入 4 个值，支持百分比，固定宽度及固有的尺寸关键词，默认为 auto，详情见 flex 的 flex-basis 属性。<br /> 通过设置`flex-grow`属性可以设置每一项在 flex 容器中分配剩余空间的相对比例，默认为 1。如果不想自动撑满主容器，可以设为 0，详情见 flex 的 flex-grow 属性。<br />flex-grow 举例：`:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis 举例：`:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`</p>',
+        'en-US': '<p>The `flex-basis` attribute can be used to set the width of the content slot. The flex-basis type is an array. A maximum of four values can be transferred. The percentage, fixed width, and inherent size keywords are supported. The default value is auto. For details, see the flex-basis attribute of Flex. <br />You can set the relative proportion of the remaining space allocated to each item in the flex container by setting the `flex-grow` attribute. The default value is 1. If you do not want to automatically fill the main container, set this parameter to 0. For details, see the flex-grow attribute of flex. <br />Flex-grow Example: `:flex-grow="[0, 0]" :flex-grow="[2, 1]" :flex-grow="[2, 1,1,1]"` <br />flex-basis Example: `:flex-basis="["200px", "100px","300px"]" :flex-basis="["75%", "25%"]" :flex-basis="["40%", "20%", "20%", "20%"]"`</p>'
       },
       codeFiles: ['show-foldable.vue']
     },
@@ -141,7 +137,7 @@ export default {
       demoId: 'custom-class',
       name: {
         'zh-CN': '自定义类名',
-        'en-US': 'Custom class'
+        'en-US': 'User-defined class name'
       },
       desc: {
         'zh-CN': '<p>通过<code>custom-class</code>属性设置自定义类名<p>',
@@ -150,5 +146,50 @@ export default {
       codeFiles: ['custom-class.vue']
     }
   ],
-  apis: []
-}
+  apis: [{
+    'name': 'Alert',
+    'type': 'component',
+    'props': [{
+        'name': 'scrolling',
+        'type': 'String',
+        'defaultValue': '',
+        'desc': {
+          'zh-CN': '是否开启描述文字在鼠标 hover 时滚动显示的动画。',
+          'en-US': 'Indicates whether to enable the animation of the description text scrolling when the mouse hovers.'
+        },
+        'demoId': ''
+      },
+      {
+        'name': 'show-foldable',
+        'type': 'String',
+        'defaultValue': '',
+        'desc': {
+          'zh-CN': '展示带标题可折叠样式。',
+          'en-US': 'Shows collapsible styles with titles.'
+        },
+        'demoId': ''
+      },
+      {
+        'name': 'single-line',
+        'type': 'String',
+        'defaultValue': '',
+        'desc': {
+          'zh-CN': '描述内容是否一行显示，超出显示...，默认值为 false。',
+          'en-US': 'Indicates whether the description is displayed in one line. The default value is false.'
+        },
+        'demoId': ''
+      }
+    ],
+    'events': [{
+      'name': 'handleHeaderClick',
+      'type': 'Function()',
+      'defaultValue': '',
+      'desc': {
+        'zh-CN': '标题点击事件，设置 show-foldable 为 true 时有效。',
+        'en-US': 'Title click event. This parameter is valid only when show-foldable is set to true.'
+      },
+      'demoId': ''
+    }],
+    'slots': []
+  }]
+}