0.1.8 • Published 4 years ago

@foxone/finance-ui v0.1.8

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

finance-ui

English | 简体中文

Demo

Quick start

Install

yarn add @foxone/finance-ui
# or
npm i -S @foxone/finance-ui

Global Usage

main.ts:

import Vue from "vue";
import FinanceUI from "@foxone/finance-ui";
import "@foxone/finance-ui/es/index.css";

Vue.use(FinanceUI);

// ……

App.vue:

<template>
  <div>
    My Vue App With FinanceUI
    <asset-range-input
      v-model="amount"
      @input="onInput"
      :max="max"
      :inputTips="inputTips"
      :asset="asset"
      :selectable="false"
    />
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';

  @Component
  export default class App extends Vue {
    max = 50;
    asset = {
      chain: {
        chain: null,
        chain_id: "43d61dcd-e413-450d-80b8-101d5e903357",
        id: "43d61dcd-e413-450d-80b8-101d5e903357",
        logo: "https://mixin-images.zeromesh.net/zVDjOxNTQvVsA8h2B4ZVxuHoCF3DJszufYKWpd9duXUSbSapoZadC7_13cnWBqg0EmwmRcKGbJaUpA8wFfpgZA=s128",
        name: "Ether",
        price: "2167.89",
        symbol: "ETH"
      },
      chain_id: "43d61dcd-e413-450d-80b8-101d5e903357",
      id: "965e5c6e-434c-3fa9-b780-c50f43cd955c",
      logo: "https://mixin-images.zeromesh.net/0sQY63dDMkWTURkJVjowWY6Le4ICjAFuu3ANVyZA4uI3UdkbuOT5fjJUT82ArNYmZvVcxDXyNjxoOv0TAYbQTNKS=s128",
      name: "Chui Niu Bi",
      price: "0",
      symbol: "CNB"
    };
    inputTips = {
      amount: 50,
      amountSymbol: 'CNB',
      tipLeft: 'Collateral',
      tipRight: '≈ $ 6456.54',
    };
    amount = 30.21;

    onInput() {
      console.log('this.amount', this.amount);
    }
  }
</script>

Local Usage

Component.vue:

<template>
  <div>
    It's Risk Slider
    <risk-slider
      v-model="percent"
      :tips="tips"
      :scale="scale"
      ref="slider"
    />
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import { RiskSlider } from '@foxone/finance-ui';
  import "@foxone/finance-ui/es/RiskSlider/style/css";

  @Component(
    components: {
      RiskSlider
    }
  )
  export default class App extends Vue {
    percent = 30;
    tips = {
      tip: 'Collateralization Ration reach',
      highlight: `${(30.21 / 50 * 100).toFixed(2)}%, it’s in low-risk now.`
    };
    scale = {
      low: 0.65,
      mid: 0.2,
      high: 0.15
    };
  }
</script>

Dev

For debugging or maintenance, you can clone the whole git repository and run the project.

git clone --depth 1 git@github.com:fox-one/finance-ui.git

cd finance-ui

yarn && yarn dev

More Detials

0.1.8

4 years ago

0.1.2

4 years ago

0.1.7

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.0

4 years ago

0.1.1

4 years ago

0.1.0-rc.12

4 years ago

0.1.0-rc.11

4 years ago

0.1.0-beta.5

4 years ago

0.1.0-beta.4

4 years ago

0.1.0-rc.9

4 years ago

0.1.0-rc.7

4 years ago

0.1.0-rc.8

4 years ago

0.1.0-rc.5

4 years ago

0.1.0-rc.6

4 years ago

0.1.0-rc.3

4 years ago

0.1.0-rc.4

4 years ago

0.1.0-rc.1

4 years ago

0.1.0-rc.2

4 years ago

0.1.0-rc.0

4 years ago

0.1.0-rc.10

4 years ago

0.1.0-beta.7

4 years ago

0.1.0-beta.6

4 years ago

0.1.0-beta.3

4 years ago

0.1.0-beta.2

4 years ago

0.1.0-beta.1

4 years ago

0.1.0-alpha.10

4 years ago

0.1.0-beta.0

4 years ago

0.1.0-alpha.12

4 years ago

0.1.0-alpha.11

4 years ago

0.1.0-alpha.14

4 years ago

0.1.0-alpha.13

4 years ago

0.1.0-alpha.16

4 years ago

0.1.0-alpha.15

4 years ago

0.1.0-alpha.18

4 years ago

0.1.0-alpha.17

4 years ago

0.1.0-alpha.19

4 years ago

0.1.0-alpha.21

4 years ago

0.1.0-alpha.20

4 years ago

0.1.0-alpha.9

4 years ago

0.1.0-alpha.8

4 years ago

0.1.0-alpha.5

4 years ago

0.1.0-alpha.4

4 years ago

0.1.0-alpha.7

4 years ago

0.1.0-alpha.6

4 years ago

0.1.0-alpha.1

4 years ago

0.1.0-alpha.0

4 years ago

0.1.0-alpha.3

4 years ago

0.1.0-alpha.2

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.1

4 years ago