@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/mobile/app/tabs/before-leave.vue

@@ -2,10 +2,10 @@
   <tiny-tabs v-model="activeName" :before-leave="beforeLeave" tab-style="card">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
     <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/mobile/app/tabs/tabs-events.vue

@@ -18,10 +18,10 @@
         表单组件,具有与用户交互，并可完成数据采集功能的控件。
       </tiny-tab-item>
       <tiny-tab-item title="数据组件" name="second">
-        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
-      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>
@@ -49,22 +49,22 @@ export default {
         {
           title: '数据组件',
           name: 'second',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'third',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+          content: ' 导航组件,帮助网站访问者浏览站点的组件。'
         },
         {
           title: '业务组件',
           name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
         },
         {
           title: '其他组件',
           name: 'fifth.',
-          content: '其他组件，更多种类组件'
+          content: '其他组件，更多种类组件。'
         }
       ]
     }

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

@@ -53,7 +53,10 @@ export const cmpMenus = [
     label: '容器组件',
     labelEn: 'Container',
     key: 'cmp_container',
-    children: [{ name: 'Dialog', nameCn: '对话框', key: 'dialogbox' }]
+    children: [
+      { name: 'Dialog', nameCn: '对话框', key: 'dialogbox' },
+      { name: 'Container', nameCn: '内容布局', key: 'container' }
+    ]
   },
   {
     label: '数据组件',
@@ -76,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' },
@@ -95,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' }
     ]
   },
   {
@@ -109,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': []
+  }]
+}