@opentiny/vue-docs 1.0.0 → 1.0.2

package/resources/mobile-first/app/button/base.vue

@@ -0,0 +1,71 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-button>默认按钮</tiny-button>
+      <tiny-button type="primary" native-type="submit">
+        主要按钮
+      </tiny-button>
+      <tiny-button type="success">
+        成功按钮
+      </tiny-button>
+      <tiny-button type="info">
+        信息按钮
+      </tiny-button>
+      <tiny-button type="warning">
+        警告按钮
+      </tiny-button>
+      <tiny-button type="danger">
+        危险按钮
+      </tiny-button>
+    </tiny-row>
+    <tiny-row>
+      <tiny-button plain>
+        线性按钮
+      </tiny-button>
+      <tiny-button type="primary" plain>
+        主要按钮
+      </tiny-button>
+      <tiny-button type="success" plain>
+        成功按钮
+      </tiny-button>
+      <tiny-button type="info" plain>
+        信息按钮
+      </tiny-button>
+      <tiny-button type="warning" plain>
+        警告按钮
+      </tiny-button>
+      <tiny-button type="danger" plain>
+        危险按钮
+      </tiny-button>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Button, Layout, Row } from '@opentiny/vue'
+import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyLayout: Layout,
+    TinyRow: Row
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconYes: IconYes(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>

package/resources/mobile-first/app/button/button-class.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="demo">
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button button-class="text-color-brand-active bg-color-bg-3">
+      主要按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>

package/resources/mobile-first/app/button/circle.vue

@@ -0,0 +1,61 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-button circle>
+        C
+      </tiny-button>
+      <tiny-button type="primary" circle>
+        C
+      </tiny-button>
+      <tiny-button type="success" circle>
+        C
+      </tiny-button>
+      <tiny-button type="info" circle>
+        C
+      </tiny-button>
+      <tiny-button type="warning" circle>
+        C
+      </tiny-button>
+      <tiny-button type="danger" circle>
+        C
+      </tiny-button>
+    </tiny-row>
+    <tiny-row>
+      <tiny-button :icon="IconSearch" circle></tiny-button>
+      <tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
+      <tiny-button type="success" :icon="IconYes" circle></tiny-button>
+      <tiny-button type="info" :icon="IconMail" circle></tiny-button>
+      <tiny-button type="warning" :icon="IconStarO" circle></tiny-button>
+      <tiny-button type="danger" :icon="IconDel" circle></tiny-button>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Button, Layout, Row } from '@opentiny/vue'
+import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyLayout: Layout,
+    TinyRow: Row
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconYes: IconYes(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+</style>

package/resources/mobile-first/app/button/click.vue

@@ -0,0 +1,26 @@
+<template>
+  <tiny-button @click="click">
+    默认按钮
+  </tiny-button>
+</template>
+
+<script>
+import { Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  methods: {
+    click() {
+      Modal.message('click')
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>

package/resources/mobile-first/app/button/dynamic-disabled.vue

@@ -0,0 +1,52 @@
+<template>
+  <tiny-layout>
+    <tiny-row>
+      <tiny-button @click="disabled = !disabled">
+        {{ disabled ? '点击启用按钮' : '点击禁用按钮' }}
+      </tiny-button>
+    </tiny-row>
+    <tiny-row>
+      <tiny-button :disabled="disabled">
+        默认按钮
+      </tiny-button>
+      <tiny-button type="primary" :disabled="disabled">
+        主要按钮
+      </tiny-button>
+      <tiny-button type="success" :disabled="disabled">
+        成功按钮
+      </tiny-button>
+      <tiny-button type="info" :disabled="disabled">
+        信息按钮
+      </tiny-button>
+      <tiny-button type="warning" :disabled="disabled">
+        警告按钮
+      </tiny-button>
+      <tiny-button type="danger" :disabled="disabled">
+        危险按钮
+      </tiny-button>
+    </tiny-row>
+  </tiny-layout>
+</template>
+
+<script>
+import { Button, Layout, Row } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyLayout: Layout,
+    TinyRow: Row
+  },
+  data() {
+    return {
+      disabled: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>

package/resources/mobile-first/app/button/icon.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <tiny-button :icon="IconSearch"></tiny-button>
+    <tiny-button type="primary" :icon="IconEdit"></tiny-button>
+    <tiny-button type="success" native-type="submit" :icon="IconYes"></tiny-button>
+    <tiny-button type="info" :icon="IconMail"></tiny-button>
+    <tiny-button type="warning" :icon="IconStarO"></tiny-button>
+    <tiny-button type="danger" :icon="IconDel"></tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { IconDel, IconYes, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconYes: IconYes(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/button/image.vue

@@ -0,0 +1,21 @@
+<template>
+  <tiny-button>
+    <img :src="image" width="26" />
+    <span>图片按钮</span>
+  </tiny-button>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      image: 'webnova/static/images/hae-logo.png'
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/button/link.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <tiny-button type="text" href="/">
+      超链接按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>

package/resources/mobile-first/app/button/loading.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-button loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="primary" loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="success" loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="info" loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="warning" loading>
+      加载中
+    </tiny-button>
+    <tiny-button type="danger" loading>
+      加载中
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>

package/resources/mobile-first/app/button/plain.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <tiny-button plain>
+      朴素按钮
+    </tiny-button>
+    <tiny-button type="primary" plain>
+      主要按钮
+    </tiny-button>
+    <tiny-button type="success" plain>
+      成功按钮
+    </tiny-button>
+    <tiny-button type="info" plain>
+      信息按钮
+    </tiny-button>
+    <tiny-button type="warning" plain>
+      警告按钮
+    </tiny-button>
+    <tiny-button type="danger" plain>
+      危险按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>

package/resources/mobile-first/app/button/reset-time.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <tiny-button>默认禁用</tiny-button>
+    <tiny-button :reset-time="0">
+      无禁用
+    </tiny-button>
+    <tiny-button :reset-time="5000">
+      禁用 5 秒
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>

package/resources/mobile-first/app/button/round.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-button round>
+      默认按钮
+    </tiny-button>
+    <tiny-button type="primary" round>
+      主要按钮
+    </tiny-button>
+    <tiny-button type="success" round>
+      成功按钮
+    </tiny-button>
+    <tiny-button type="info" round>
+      信息按钮
+    </tiny-button>
+    <tiny-button type="warning" round>
+      警告按钮
+    </tiny-button>
+    <tiny-button type="danger" round>
+      危险按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>

package/resources/mobile-first/app/button/size.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button size="medium">
+      中等按钮
+    </tiny-button>
+    <tiny-button size="small">
+      小型按钮
+    </tiny-button>
+    <tiny-button size="mini">
+      超小按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>

package/resources/mobile-first/app/button/slot-default.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button>
+      <span>上传</span>
+      <icon-upload class="tiny-svg-size" />
+    </tiny-button>
+    <tiny-button>
+      <img :src="image" width="26" />
+      <span>图片按钮</span>
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { IconUpload } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    IconUpload: IconUpload(),
+    TinyButton: Button
+  },
+  data() {
+    return {
+      image: 'webnova/static/images/hae-logo.png'
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/button/text.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <tiny-button type="text">
+      文本按钮
+    </tiny-button>
+    <tiny-button type="text" text="text属性"></tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>

package/resources/mobile-first/app/button/type.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <tiny-button>默认按钮</tiny-button>
+    <tiny-button type="primary">
+      主要按钮
+    </tiny-button>
+    <tiny-button type="success">
+      成功按钮
+    </tiny-button>
+    <tiny-button type="info">
+      信息按钮
+    </tiny-button>
+    <tiny-button type="warning">
+      警告按钮
+    </tiny-button>
+    <tiny-button type="danger">
+      危险按钮
+    </tiny-button>
+    <tiny-button type="text">
+      文本按钮
+    </tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+button {
+  margin: 0 16px 16px 0;
+}
+</style>

package/resources/mobile-first/app/button/webdoc/button.cn.md

@@ -0,0 +1,11 @@
+---
+title: Button 按钮
+---
+
+# Button 按钮
+
+<div>
+
+常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
+
+</div>

package/resources/mobile-first/app/button/webdoc/button.en.md

@@ -0,0 +1,11 @@
+---
+title: Button 按钮
+---
+
+# Button 按钮
+
+<div>
+
+常用的操作按钮，提供包括默认按钮、图标按钮、图片按钮、下拉按钮等类型。
+
+</div>