feat(float-button): [float-button] add float-button

.all-contributorsrc

@@ -547,6 +547,7 @@
         "code"
       ]
     },
+
     {
       "login": "Floyd-bit",
       "name": "Floyd",

examples/sites/demos/pc/app/float-button/backTop-composition-api.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="parent" ref="dom">
+    <div class="child"></div>
+    <tiny-float-button
+      :back-top="true"
+      :visibility-height="199"
+      bottom="-200px"
+      right="0"
+      trigger=""
+      :element="dom"
+      :icon="IconDel"
+    >
+    </tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const IconDel = iconDel()
+const dom = ref(null)
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+  overflow-y: scroll;
+}
+
+.child {
+  margin-top: 300px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/backTop.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="parent" ref="dom">
+    <div class="child"></div>
+    <tiny-float-button
+      :back-top="true"
+      :visibility-height="199"
+      bottom="-200px"
+      right="0"
+      trigger=""
+      :element="dom"
+      :icon="IconDel"
+    >
+    </tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { iconDel } from '@opentiny/vue-icon'
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFloatButton
+  },
+  data() {
+    return {
+      dom: null,
+      IconDel: iconDel()
+    }
+  },
+  created() {
+    this.dom = this.$refs.dom
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+  overflow-y: scroll;
+}
+
+.child {
+  margin-top: 300px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/basic-usage-composition-api.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="parent">
+    <tiny-float-button :icon="IconSearch" circle bottom="20px"></tiny-float-button>
+    <tiny-float-button
+      type="primary"
+      :icon="IconEdit"
+      circle
+      bottom="20px"
+      right="60px"
+      shape="square"
+    ></tiny-float-button>
+
+    <tiny-float-button type="info" :icon="IconMail" circle bottom="20px" right="100px "></tiny-float-button>
+    <tiny-float-button type="warning" :icon="IconStarO" circle bottom="20px" right="140px"></tiny-float-button>
+    <tiny-float-button type="danger" :icon="IconDel" circle bottom="20px" right="180px"></tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
+
+const IconDel = iconDel()
+const IconEdit = iconEdit()
+const IconMail = iconMail()
+const IconStarO = iconStarO()
+const IconSearch = iconSearch()
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/basic-usage.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="parent">
+    <tiny-float-button :icon="IconSearch" circle bottom="20px"></tiny-float-button>
+    <tiny-float-button
+      type="primary"
+      :icon="IconEdit"
+      circle
+      bottom="20px"
+      right="60px"
+      shape="square"
+    ></tiny-float-button>
+
+    <tiny-float-button type="info" :icon="IconMail" circle bottom="20px" right="100px "></tiny-float-button>
+    <tiny-float-button type="warning" :icon="IconStarO" circle bottom="20px" right="140px"></tiny-float-button>
+    <tiny-float-button type="danger" :icon="IconDel" circle bottom="20px" right="180px"></tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { FloatButton } from '@opentiny/vue'
+import { IconDel, IconEdit, IconMail, IconStarO, IconSearch } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyFloatButton: FloatButton
+  },
+  data() {
+    return {
+      IconDel: IconDel(),
+      IconEdit: IconEdit(),
+      IconMail: IconMail(),
+      IconStarO: IconStarO(),
+      IconSearch: IconSearch()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/icon-composition-api.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="parent">
+    <tiny-float-button bottom="-15px" right="100px" trigger="" :icon="IconDel"> </tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+
+const IconDel = iconDel()
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+}
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/icon.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="parent">
+    <tiny-float-button bottom="-15px" right="100px" trigger="" :icon="IconDel"> </tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyFloatButton
+  },
+  data() {
+    return {
+      IconDel: iconDel()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/jump-composition-api.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="parent">
+    <tiny-float-button type="success" right="" left="0" bottom="0" top="-9px" trigger="" href="/" description="跳">
+    </tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+}
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/jump.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="parent">
+    <tiny-float-button type="success" right="" left="0" bottom="0" top="-9px" trigger="" href="/" description="跳">
+    </tiny-float-button>
+  </div>
+</template>
+
+<script>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFloatButton
+  }
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/reset-time-composition-api.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="parent">
+    <tiny-float-button reset-time="2000" type="success" right="" left="0" bottom="0" trigger="click" description="点">
+      展开</tiny-float-button
+    >
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/reset-time.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="parent">
+    <tiny-float-button reset-time="2000" type="success" right="" left="0" bottom="0" trigger="click" description="点">
+      展开</tiny-float-button
+    >
+  </div>
+</template>
+
+<script>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+
+export default {
+  TinyFloatButton
+}
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>

examples/sites/demos/pc/app/float-button/trigger-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="parent">
+    <tiny-float-button bottom="-15px" right="100px" trigger="click" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+    <tiny-float-button bottom="-15px" right="180px" trigger="hover" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+    <tiny-float-button bottom="-15px" right="280px" trigger="click" :open="true" :icon="IconDel" type="primary">
+      <tiny-float-button bottom="0px" right="-28px" trigger="" :icon="IconDel"> </tiny-float-button>
+    </tiny-float-button>
+  </div>
+</template>
+
+<script setup>
+import { FloatButton as TinyFloatButton } from '@opentiny/vue'
+import { iconDel } from '@opentiny/vue-icon'
+
+const IconDel = iconDel()
+</script>
+
+<style scoped>
+.parent {
+  position: relative;
+  height: 100px;
+}
+
+.tiny-float-button {
+  position: absolute;
+}
+</style>