Is sets of UI components made with Semantic UI, VueTyped and friends
npm install vue-typed-ui --save-dev
import * as Vue from 'vue'
import * as VueTypedUI from 'VueTypedUI'
Vue.use(VueTypedUI /* optional */ ,{
prefix: 'ui',
settings: { /* see options/settings section bellow */ }
})
Components tag prefix. Default is 'ui'
Some components may have some individual settings
Name | Default | Description |
---|---|---|
Date / Time | ||
dateFormat | 'MM/DD/YYYY' | Date / DateTime format. You can change this format by follow momentjs formats. |
timeFormat | 'HH:mm' | Time format. You can change this format by follow momentjs formats. |
Numeric | ||
decimalPlaces | 2 | Decimal places |
decimalSeparator | '.' | Decimal separator |
groupSeparator | ',' | Group separator |
max | 9999999999999.99 | Maximum number that component can handle |
min | -9999999999999.99 | Minimum number that component can handle |
Currency | ||
sign | 'USD' | Currency sign |
signPos | 'right' | Currency symbol position |
Toastr | ||
toastr | Official toastr default settings | Settings for toastr component to get more detail see: http://codeseven.github.io/toastr/ |
These requirements must be referenced in your main HTML file. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Awesome App</title>
<!-- requirement css-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/master/dist/calendar.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- main app here-->
<div id="app"></div>
<!-- requirement scripts-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/master/dist/calendar.min.js"></script>
</body>
</html>
MIT