[beast: 16/47] EBEAST: vc/icon-button.vue: add <vc-icon-button/>, suports icon prop



commit 51b83b15d807038d1fbefe4ceea234b275b6751d
Author: Tim Janik <timj gnu org>
Date:   Tue Apr 11 01:18:08 2017 +0200

    EBEAST: vc/icon-button.vue: add <vc-icon-button/>, suports icon prop
    
    Signed-off-by: Tim Janik <timj gnu org>

 ebeast/vc/icon-button.vue |   45 +++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 45 insertions(+), 0 deletions(-)
---
diff --git a/ebeast/vc/icon-button.vue b/ebeast/vc/icon-button.vue
new file mode 100644
index 0000000..1b652f5
--- /dev/null
+++ b/ebeast/vc/icon-button.vue
@@ -0,0 +1,45 @@
+<!-- GNU LGPL v2.1+: http://www.gnu.org/licenses/lgpl.html -->
+
+<docs>
+  ## vc-icon-button - A Button containing an icon
+  ### Props:
+  - **icon** - Name of the icon to be displayed by this button
+  - **hotkey** - Keyboard accelerator to trigger a ''click'' event.
+  ### Events:
+  - **click** - A ''click'' event is emitted for activation through mouse buttons, Space or Enter keys.
+  ### Slots:
+  - **slot** - All contents passed into this element will be rendered as contents besides the icon.
+</docs>
+
+<style lang="less">
+  @import 'styles.less';
+  .vc-icon-button                      { margin: 0 0; padding: 7px; }
+  .vc-icon-button .vc-icon-button-icon { font-size: 1.3em /*1.33333333em*/; }
+</style>
+
+<template>
+  <vc-button
+      class="vc-icon-button"
+      :hotkey="hotkey"
+      @click="emit ('click', $event)"
+  ><span
+       :class="iconclasses"
+   ></span><slot
+              class="vc-slot"
+          ></slot></vc-button>
+</template>
+
+<script>
+module.exports = {
+  name: 'vc-icon-button',
+  props: [ 'icon', 'hotkey' ],
+  computed: {
+    iconclasses() { return "vc-icon-button-icon fa fa-lg fa-fw " + this.icon; },
+  },
+  methods: {
+    emit (what, ev) {
+      this.$emit (what, ev);
+    },
+  },
+};
+</script>


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]