[skywalking-rocketbot-ui] branch master updated: Component: button component (#207)

[yw...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

ywang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git


The following commit(s) were added to refs/heads/master by this push:
     new 3d4b826  Component: button component (#207)
3d4b826 is described below

commit 3d4b826774bd614da73ab3e95c424750e14b3ce2
Author: bigflybrother <fe...@daocloud.io>
AuthorDate: Sat Nov 23 16:10:01 2019 +0800

    Component: button component (#207)
---
 src/components/index.ts      |  3 ++-
 src/components/rk-button.vue | 54 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/src/components/index.ts b/src/components/index.ts
index 4345f11..80b4c11 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -29,10 +29,11 @@ import RkSelect from './rk-select.vue';
 import RkPopper from './rk-popper.vue';
 import RkDropdown from './rk-dropdown.vue';
 import RkBack from './rk-back.vue';
+import RkButton from './rk-button.vue';
 
 const components: any = {
   RkHeader, RkFooter, RkProgress, RkDate, RkPanel, RkEcharts, RkPage, RkSidebox, RkFooterTime, RkSelect,
-  RkPopper, RkDropdown, RkBack,
+  RkPopper, RkDropdown, RkBack, RkButton
 };
 
 const componentsName: string[] = Object.keys(components);
diff --git a/src/components/rk-button.vue b/src/components/rk-button.vue
new file mode 100644
index 0000000..73622fe
--- /dev/null
+++ b/src/components/rk-button.vue
@@ -0,0 +1,54 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+<template>
+  <a class="rk-btn" :class="{size, 'ghost': ghost}" @click="$emit('click')">
+    <svg class="icon"><use xlink:href="#chevron-left"></use></svg>
+  </a>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import { Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class RkBtn extends Vue {
+  @Prop({ default: '' }) private size!: string;
+  @Prop({ default: false }) private ghost!: boolean;
+}
+</script>
+<style lang="scss">
+.rk-btn{
+  line-height: 26px;
+  padding: 0 7px;
+  background-color: #448dfe;
+  border-radius: 4px;
+  color: #fff;
+  transition: background-color .3s;
+  &.sm{
+    line-height: 24px;
+  }
+  &.lg{
+    line-height: 30px;
+  }
+  &.ghost{
+    background-color: #555b6b66;
+  }
+  &:hover{
+    background-color: #357de9;
+  }
+}
+</style>