config(EJ2-000): repository setup and included common docs contents
|
@ -0,0 +1,33 @@
|
|||
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
|
||||
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
|
||||
|
||||
name: Node.js CI
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches: [ master ]
|
||||
types: [opened, closed, edited, synchronize]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [10.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 2
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
|
||||
- name: Install
|
||||
run: npm i
|
||||
|
||||
- name: Test
|
||||
run: npm run test
|
|
@ -0,0 +1,47 @@
|
|||
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
|
||||
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
|
||||
|
||||
name: Node.js CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ master ]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [10.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 2
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
|
||||
- name: set environment variables
|
||||
uses: allenevans/set-env@v2.0.0
|
||||
with:
|
||||
GIT_USER: ${{ secrets.WEB_GITLAB_USER }}
|
||||
GIT_TOKEN: ${{ secrets.WEB_GITLAB_TOKEN }}
|
||||
GIT_MAIL: ${{ secrets.USER_MAIL }}
|
||||
|
||||
- name: Install
|
||||
run: npm i
|
||||
|
||||
- name: Get changed files
|
||||
run: |
|
||||
git diff --name-only HEAD^ HEAD
|
||||
|
||||
- name: Publish
|
||||
run: npm run publish
|
||||
env:
|
||||
GIT_USER: ${{ secrets.WEB_GITLAB_USER }}
|
||||
GIT_TOKEN: ${{ secrets.WEB_GITLAB_TOKEN }}
|
||||
GIT_MAIL: ${{ secrets.USER_MAIL }}
|
|
@ -0,0 +1,43 @@
|
|||
{
|
||||
"header-increment": true,
|
||||
"first-header-h1": true,
|
||||
"header-style": { "style": "atx" },
|
||||
"ul-style": { "style": "asterisk" },
|
||||
"list-indent": true,
|
||||
"ul-start-left": true,
|
||||
"ul-indent": { "indent": 4 },
|
||||
"no-trailing-spaces": true,
|
||||
"no-hard-tabs": true,
|
||||
"no-reversed-links": true,
|
||||
"no-multiple-blanks": { "maximum" : 1 },
|
||||
"line-length": false,
|
||||
"commands-show-output": true,
|
||||
"no-missing-space-atx": true,
|
||||
"no-multiple-space-atx": true,
|
||||
"no-missing-space-closed-atx": true,
|
||||
"no-multiple-space-closed-atx": true,
|
||||
"blanks-around-headers": true,
|
||||
"header-start-left": true,
|
||||
"no-duplicate-header": {"siblings_only": true},
|
||||
"single-h1": true,
|
||||
"no-trailing-punctuation": true,
|
||||
"no-multiple-space-blockquote": true,
|
||||
"no-blanks-blockquote": true,
|
||||
"ol-prefix": { "style" : "ordered" },
|
||||
"list-marker-space": true,
|
||||
"blanks-around-fences": true,
|
||||
"blanks-around-lists": false,
|
||||
"no-inline-html": {
|
||||
"allowed_elements": ["br", "kbd", "span", "div", "b"]
|
||||
},
|
||||
"no-bare-urls": true,
|
||||
"hr-style": { "style" : "----"},
|
||||
"no-emphasis-as-header": true,
|
||||
"no-space-in-emphasis": true,
|
||||
"no-space-in-code": true,
|
||||
"no-space-in-links": true,
|
||||
"fenced-code-language": true,
|
||||
"first-line-h1": false,
|
||||
"no-empty-links": true,
|
||||
"required-headers": true
|
||||
}
|
10
README.md
|
@ -1,2 +1,8 @@
|
|||
# ej2-vue-docs
|
||||
Documentation for Essential JS 2 Vue UI components. https://ej2.syncfusion.com/vue/documentation/
|
||||
# Syncfusion Angular Documentation
|
||||
|
||||
This is the GitHub repository for the technical product documentation for [Syncfusion Vue UI Components](https://ej2.syncfusion.com/home/vue.html).This documentation is published to https://ej2.syncfusion.com/vue/documentation/
|
||||
|
||||
## Contributions Welcome!
|
||||
|
||||
We welcome the [pull request](https://docs.github.com/en/github/managing-files-in-a-repository/editing-files-in-another-users-repository) for improving the Blazor Components user guide documentation. Your contribution towards this will be greatly appreciated.
|
||||
|
||||
|
|
|
@ -0,0 +1,102 @@
|
|||
var fs = require('fs');
|
||||
var gulp = require('gulp');
|
||||
var glob = require('glob');
|
||||
var shelljs = require('shelljs');
|
||||
|
||||
var components;
|
||||
var compPaths = glob.sync(`./src/**/`, { silent: true, ignore: [`./src/base/`, `./src/`, './src/common/', './src/getting-started/'] });
|
||||
|
||||
var user = process.env.GIT_USER;
|
||||
var token = process.env.GIT_TOKEN;
|
||||
var user_mail = process.env.GIT_MAIL;
|
||||
|
||||
/**
|
||||
* Source shipping to gitlap
|
||||
*/
|
||||
gulp.task('ship-to-gitlap', function (done) {
|
||||
console.log('---check----' + user_mail);
|
||||
console.log('---user---' + user);
|
||||
|
||||
shelljs.exec(`git config --global user.email "${user_mail}"`);
|
||||
shelljs.exec(`git config --global user.name "${user}"`);
|
||||
|
||||
var changes = shelljs.exec(`git diff --name-only HEAD^ HEAD`);
|
||||
console.log('--changes----' + changes);
|
||||
|
||||
var changedFileNames = changes.stdout.split('\n');
|
||||
console.log('--changedFileNames----' + changedFileNames);
|
||||
|
||||
var cloneRepos = [];
|
||||
for (var i = 0; i < changedFileNames.length; i++) {
|
||||
var curentRootRepo = changedFileNames[i].split('/')[1];
|
||||
// if(curentRootRepo !='workflows'){
|
||||
// return
|
||||
// }
|
||||
if (curentRootRepo != undefined && curentRootRepo !='workflows') {
|
||||
cloneRepos.push(curentRootRepo);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('--cloneRepos----' + cloneRepos);
|
||||
|
||||
for (var j = 0; j < cloneRepos.length; j++) {
|
||||
var gitPath = 'https://' + user + ':' + token + `@gitlab.syncfusion.com/essential-studio/ej2-${cloneRepos[j]}-vue-docs`;
|
||||
console.log('Clone has been started...!');
|
||||
var clone = shelljs.exec('git clone ' + gitPath + ' -b master' + ' ' + `./gitlapRepo/ej2-${cloneRepos[j]}-vue-docs`, {
|
||||
silent: false
|
||||
});
|
||||
if (clone.code !== 0) {
|
||||
console.log(clone.stderr);
|
||||
done();
|
||||
return;
|
||||
} else {
|
||||
console.log('Clone has been completed...!');
|
||||
shelljs.cp('-rf', `./src/${cloneRepos[j]}/*`, `./gitlapRepo/ej2-${cloneRepos[j]}-vue-docs/src`);
|
||||
shelljs.cd(`./gitlapRepo/ej2-${cloneRepos[j]}-vue-docs`);
|
||||
shelljs.exec('git add .');
|
||||
shelljs.exec('git pull');
|
||||
shelljs.exec('git commit -m \"ci-skip(EJ2-000): source updation from github repo [ci skip]\" --no-verify');
|
||||
shelljs.exec('git push');
|
||||
shelljs.cd('../../');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Lint md files in src location
|
||||
*/
|
||||
gulp.task('lint', function (done) {
|
||||
var markdownlint = require('markdownlint');
|
||||
components = controlsList();
|
||||
var options = {
|
||||
files: glob.sync('./src/' + components + '/*.md', { ignore: ['./src/**/api*.md', './src/summary.md', './src/release-notes/*.md'] }),
|
||||
config: require('./.markdownlint.json')
|
||||
};
|
||||
markdownlint(options, function (result, err) {
|
||||
if (err && err.toString().length) {
|
||||
console.error(err.toString());
|
||||
done();
|
||||
process.exit(1);
|
||||
} else {
|
||||
console.log('\n*** Markdown Lint Succeeded ***\n');
|
||||
done();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Controls List
|
||||
function controlsList() {
|
||||
var controls = '**';
|
||||
if (true) {
|
||||
var ret = '';
|
||||
for (var comp of compPaths) {
|
||||
ret += comp.replace(/.\/src\//g, '') + '**/,';
|
||||
}
|
||||
return '{' + ret + '}';
|
||||
}
|
||||
else if (fs.existsSync('./controlsList.txt')) {
|
||||
controls = fs.readFileSync('./controlsList.txt', 'utf8');
|
||||
controls = '{' + controls + ',}';
|
||||
}
|
||||
return controls;
|
||||
}
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-vue-docs",
|
||||
"version": "1.0.0",
|
||||
"description": "Syncfusion Vue documentation",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"core-js": "^2.5.7",
|
||||
"cheerio": "^1.0.0-rc.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-csslint": "^1.0.1",
|
||||
"gulp-csslint-report": "^2.0.0",
|
||||
"gulp-gzip": "^1.4.2",
|
||||
"lodash": "^4.17.11",
|
||||
"markdownlint": "^0.11.0",
|
||||
"markdown-link-extractor": "^1.2.0",
|
||||
"markdown-spellcheck": "^1.3.1",
|
||||
"prismjs": "^1.15.0",
|
||||
"require-dir": "^1.0.0",
|
||||
"shelljs": "^0.8.2",
|
||||
"styled-components": "^3.4.9",
|
||||
"typeface-merriweather": "0.0.43",
|
||||
"typeface-montserrat": "0.0.43",
|
||||
"typo-js": "^1.0.3",
|
||||
"typescript": "^2.6.2",
|
||||
"typography": "^0.16.17",
|
||||
"typography-theme-wordpress-2016": "^0.15.10",
|
||||
"webpack": "4.28.4",
|
||||
"terser": "3.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-plugin-react": "^7.11.1",
|
||||
"gh-pages": "^1.2.0",
|
||||
"json-loader": "^0.5.7",
|
||||
"prettier": "^1.14.2"
|
||||
},
|
||||
"config": {
|
||||
"ghooks": {
|
||||
"pre-commit": "gulp test"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"test": "gulp lint",
|
||||
"publish": "gulp ship-to-gitlap"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
# Accessibility
|
||||
|
||||
The Syncfusion Vue UI components follow WAI-ARIA accessibility standard by default. This enables you to build accessible web applications which is fully navigable by user with disabilities.
|
||||
|
||||
## Keyboard Navigation
|
||||
|
||||
Keyboard navigation support enables users to interact with components using keyboard shortcuts. Each component has its own set of shortcuts, refer the following documents to get the details of each component.
|
||||
|
||||
* [AutoComplete](./auto-complete/accessibility/)
|
||||
* [Calendar](./calendar/accessibility/)
|
||||
* [Chart](./chart/accessibility/)
|
||||
* [CircularGauge](./circular-gauge/accessibility/)
|
||||
* [Combobox](./combo-box/accessibility/)
|
||||
* [DatePicker](./datepicker/accessibility/)
|
||||
* [Dialog](./dialog/accessibility/)
|
||||
* [DropDownList](./drop-down-list/accessibility/)
|
||||
* [Grid](./grid/accessibility/)
|
||||
* [LinearGauge](./linear-gauge/accessibility/)
|
||||
* [ListView](./list-view/accessibility/)
|
||||
* [NumericTextBox](./numerictextbox/accessibility/)
|
||||
* [TimePicker](./timepicker/accessibility/)
|
||||
* [Toolbar](./toolbar/accessibility/)
|
||||
* [ToolTip](./tooltip/accessibility/)
|
|
@ -0,0 +1,122 @@
|
|||
# Icons Library
|
||||
|
||||
The Syncfusion Vue library provides the set of `base64` formatted font icons, that can be utilized in the web application.
|
||||
|
||||
## Steps to use icon library
|
||||
|
||||
1. Add the class name `e-icons` to the HTML element which needs to render the icon. This class contains the font-family and common property of font icons.
|
||||
|
||||
2. Add the icon class with corresponding icon content from the [available icons](#available-icons). For example, the below code snippet represents the search icon class.
|
||||
|
||||
```css
|
||||
.e-search:before{
|
||||
content:'\e993';
|
||||
}
|
||||
```
|
||||
|
||||
3. Add `e-search` class name to the HTML element along with `e-icons` class.
|
||||
|
||||
```html
|
||||
<span class="e-icons e-search"></span>
|
||||
```
|
||||
|
||||
The below code snippet represents the complete example of icon usage.
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 2 </title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="./node_modules/@syncfusion/ej2/material.css" rel="stylesheet" />
|
||||
<style>
|
||||
.e-search:before{
|
||||
content:'\e993';
|
||||
}
|
||||
.e-upload:before{
|
||||
content: '\e725';
|
||||
}
|
||||
.e-font:before{
|
||||
content: '\e34c';
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="icons">
|
||||
<ul>
|
||||
<li><span class="e-icons e-search"></span></li>
|
||||
<li><span class="e-icons e-settings"></span></li>
|
||||
<li><span class="e-icons e-upload"></span></li>
|
||||
<li><span class="e-icons e-font"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
* The Syncfusion icon library can customize its color and size by overriding the `e-icons` class.
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 2 </title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="./node_modules/@syncfusion/ej2/material.css" rel="stylesheet" />
|
||||
<style>
|
||||
.e-icons{
|
||||
color: #00ffff;
|
||||
font-size: 26px;
|
||||
}
|
||||
.e-search:before{
|
||||
content: '\e993';
|
||||
}
|
||||
.e-upload:before{
|
||||
content: '\e725';
|
||||
}
|
||||
.e-font:before{
|
||||
content: '\e34c';
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="icons">
|
||||
<ul>
|
||||
<li><span class="e-icons e-search"></span></li>
|
||||
<li><span class="e-icons e-settings"></span></li>
|
||||
<li><span class="e-icons e-upload"></span></li>
|
||||
<li><span class="e-icons e-font"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Available Icons
|
||||
|
||||
The complete package of Essential JS 2 icons is listed in the following table. The corresponding icon content can be referred in the content section.
|
||||
|
||||
<!-- markdownlint-disable MD033 -->
|
||||
|
||||
### Material
|
||||
|
||||
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/material/demo.html" style="height:1000px;"></iframe>
|
||||
|
||||
### Fabric
|
||||
|
||||
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/fabric/demo.html" style="height:1000px;"></iframe>
|
||||
|
||||
### Bootstrap
|
||||
|
||||
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/bootstrap/demo.html" style="height:1000px;"></iframe>
|
||||
|
||||
### Bootstrap 4
|
||||
|
||||
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/bootstrap4/demo.html" style="height:1000px;"></iframe>
|
||||
|
||||
### High Contrast
|
||||
|
||||
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/highcontrast/demo.html" style="height:1000px;"></iframe>
|
После Ширина: | Высота: | Размер: 85 KiB |
После Ширина: | Высота: | Размер: 73 KiB |
После Ширина: | Высота: | Размер: 8.1 KiB |
После Ширина: | Высота: | Размер: 79 KiB |
После Ширина: | Высота: | Размер: 77 KiB |
После Ширина: | Высота: | Размер: 32 KiB |
После Ширина: | Высота: | Размер: 74 KiB |
После Ширина: | Высота: | Размер: 75 KiB |
После Ширина: | Высота: | Размер: 10 KiB |
После Ширина: | Высота: | Размер: 75 KiB |
После Ширина: | Высота: | Размер: 13 KiB |
После Ширина: | Высота: | Размер: 74 KiB |
После Ширина: | Высота: | Размер: 32 KiB |
После Ширина: | Высота: | Размер: 85 KiB |
|
@ -0,0 +1,9 @@
|
|||
# Overview
|
||||
|
||||
The Syncfusion Vue library styles are developed under the SCSS environment with `base64` embed font icons. The list of key features are described in the below topics.
|
||||
|
||||
## Key Features
|
||||
|
||||
* [Theming](./theme/)
|
||||
* [Icons Library](./icons/)
|
||||
* [Theme Studio](./theme-studio/)
|
|
@ -0,0 +1,3 @@
|
|||
* [Built-in Themes](appearance/theme.md)
|
||||
* [Icons](appearance/icons.md)
|
||||
* [Theme Studio](appearance/theme-studio.md)
|
|
@ -0,0 +1,89 @@
|
|||
# Overview
|
||||
|
||||
Theme Studio for Essential JS 2 can be used to customize a new theme from an existing theme. It doesn't support with Data visualization components like Chart, Diagram, Gauge, Range Navigator, Maps.
|
||||
|
||||
## Customizing theme color from theme studio
|
||||
|
||||
The Syncfusion Vue (Essential JS 2) themes are developed under the SCSS environment. Each theme has a unique common variable list. When you change the common variable color code value, it will reflect in all Syncfusion Vue UI components. All Syncfusion Vue component styles are derived from these [theme-based common variables](theme#common-variables). This common variable list is handled inside the theme studio application for customizing theme-based colors.
|
||||
|
||||
**Step 1:** Navigate to the theme studio application at [https://ej2.syncfusion.com/themestudio/](https://ej2.syncfusion.com/themestudio/).
|
||||
|
||||
**Step 2:** The theme studio application page can be divided into two sections: the components preview section on the left, and the theme customization section on the right.
|
||||
|
||||
![two-sections](images/two-pane.png)
|
||||
|
||||
**Step 3:** Click the color pickers in the theme customization section to select your desired color.
|
||||
|
||||
![colpr-picker](images/colorpicker.png)
|
||||
|
||||
**Step 4:** After selecting colors with the color pickers, the Syncfusion Vue components will have the newly selected colors applied to them in the components preview section.
|
||||
|
||||
![customized](images/customized.png)
|
||||
|
||||
### Filtering a specific list of components
|
||||
|
||||
Using the theme studio, you can apply custom themes to a list of specific components. This option is useful when you have integrated a selective list of Syncfusion Vue components in your application. The theme studio will filter the selected components and customize the final output for those component's styles alone, reducing the final output file size.
|
||||
|
||||
**Step 1:** Click the Filter icon in the top right corner and select the components whose theme you want to customize.
|
||||
|
||||
![filter-icon](images/filter-icon.png)
|
||||
|
||||
**Step 2:** Click the Apply button in the Filter dialog. Now, only the selected components will be rendered in the components preview section.
|
||||
|
||||
![filter-dialog](images/filter-dialog.png)
|
||||
|
||||
**Step 3:** Now you can customize the colors in the theme customization section for the components you selected.
|
||||
|
||||
![filter-customized](images/filter-customized.png)
|
||||
|
||||
### Download the customized theme
|
||||
|
||||
You can download the custom styles after customizing the theme colors.
|
||||
|
||||
**Step 1:** Click the Download button in the top right corner. The Download dialog will open.
|
||||
|
||||
![download-icon](images/download-icon.png)
|
||||
|
||||
**Step 2:** Assign a theme name in the File Name field and click the Download button.
|
||||
|
||||
![download-dialog](images/download-dialog.png)
|
||||
|
||||
**Step 3:** The download styles will come as a zip file that contains SCSS and CSS files for the selected Syncfusion Vue components. The current settings are stored in the `settings.json` file.
|
||||
|
||||
![output-files](images/output-files.png)
|
||||
|
||||
### Using a customized theme in a web application
|
||||
|
||||
You can directly use the customized CSS file in the web application.
|
||||
|
||||
**Step 1:** Copy/paste the customized CSS file from the download folder into your application at any folder. Example: `styles\{file-name}.css`.
|
||||
|
||||
**Step 2:** Refer the customized CSS file reference in the `index.html` or `shared/_layout.cshtml` main page head section.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="styles/{file-name}.css" rel="stylesheet"/>
|
||||
</head>
|
||||
```
|
||||
|
||||
## Import previously changed settings into the theme studio
|
||||
|
||||
When you want to change your application theme and UI design in the future, you won’t need to customize the Syncfusion Vue components from scratch in the theme studio. Just import the old `settings.json` file to review and update your stored settings in the theme studio application.
|
||||
|
||||
**Step 1:** Click the Import icon in the top right corner.
|
||||
|
||||
![import-icon](images/import-icon.png)
|
||||
|
||||
**Step 2:** The Import Theme dialog will open. Click the Browse button and select a `settings.json` file you exported previously.
|
||||
|
||||
![import-dialog](images/import-dialog.png)
|
||||
|
||||
**Step 3:** Click the Import button.
|
||||
|
||||
![imported-settings](images/imported-settings.png)
|
||||
|
||||
**Step 4:** The stored data will be reflected in the theme studio application. Now you can change the theme colors based on your latest design and export the theme again.
|
||||
|
||||
![filter-customized](images/filter-customized.png)
|
||||
|
||||
**Step 5:** The exported file will contain your latest changes. You can just replace the older custom style with the newer one to refresh your application.
|
|
@ -0,0 +1,227 @@
|
|||
# Theming
|
||||
|
||||
The Syncfusion Vue library has provided the below list of in-built themes,
|
||||
|
||||
1. Google’s Material
|
||||
2. Microsoft Office’s Fabric
|
||||
3. Bootstrap
|
||||
4. High Contrast
|
||||
|
||||
> The Syncfusion Bootstrap theme is designed based on `Bootstrap v3`, however, it can be compatible with `Bootstrap v4` applications. In addition to these four built-in themes, [ThemeStudio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/) provides support for the Fusion Theme that can only be downloaded from [ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=fusion).
|
||||
|
||||
Themes are shipped as individual and combined CSS files. Combined CSS file can be referred from the npm package `@syncfusion/ej2` and individual CSS files are available within same component repository’s `style` folder. In ej2 npm packages, we have shipped both CSS and SCSS files for all components.
|
||||
|
||||
Referring All components CSS
|
||||
|
||||
```css
|
||||
@import "./node_modules/@syncfusion/ej2/<theme_name>.css";
|
||||
```
|
||||
|
||||
Referring All components SCSS
|
||||
|
||||
```scss
|
||||
@import "ej2/<theme_name>.scss";
|
||||
```
|
||||
|
||||
## Referring individual control theme
|
||||
|
||||
We can get the individual theme from the individual npm package or from an overall ej2 npm package.
|
||||
|
||||
Referring individual control from individual package
|
||||
|
||||
```scss
|
||||
@import "<dependent-package>/<dependent-control>/<theme_name>.scss";
|
||||
@import "ej2-buttons/styles/button/<theme_name>.scss";
|
||||
```
|
||||
|
||||
**Example:**
|
||||
|
||||
```scss
|
||||
@import "ej2-base/styles/material.scss";
|
||||
@import "ej2-buttons/styles/button/material.scss";
|
||||
```
|
||||
|
||||
> `ej2-base` is common dependent package for all Syncfusion JavaScript control styles. So, it needs first to be added in the import statement.
|
||||
|
||||
Referring individual control from ej2 package
|
||||
|
||||
```scss
|
||||
@import "ej2/<dependent-control>/<theme_name>.scss";
|
||||
@import "ej2/button/<theme_name>.scss";
|
||||
```
|
||||
|
||||
**Example:**
|
||||
|
||||
```scss
|
||||
@import "ej2/base/material.scss";
|
||||
@import "ej2/button/material.scss";
|
||||
```
|
||||
|
||||
> The individual control theme will not include its dependent control styles. I.e. The dependent controls theme should be added before adding the individual control themes.
|
||||
|
||||
## Common Variables
|
||||
|
||||
The below list of common variables used in the Syncfusion Vue library themes for all components. You can change these variables to customize the corresponding theme.
|
||||
|
||||
### Google's Material
|
||||
|
||||
| Name | Value |
|
||||
| ------------- | ------------- |
|
||||
| `$accent` | ![#e3165b](https://ej2.syncfusion.com/download/documentation/svg/e3165b.svg) `#e3165b` |
|
||||
| `$accent-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$primary` | ![#3f51b5](https://ej2.syncfusion.com/download/documentation/svg/3f51b5.svg) `#3f51b5` |
|
||||
| `$primary-50` | ![#e8eaf6](https://ej2.syncfusion.com/download/documentation/svg/e8eaf6.svg) `#e8eaf6` |
|
||||
| `$primary-100` | ![#c5cae9](https://ej2.syncfusion.com/download/documentation/svg/c5cae9.svg) `#c5cae9` |
|
||||
| `$primary-200` | ![#9fa8da](https://ej2.syncfusion.com/download/documentation/svg/9fa8da.svg) `#9fa8da` |
|
||||
| `$primary-300` | ![#7986cb](https://ej2.syncfusion.com/download/documentation/svg/7986cb.svg) `#7986cb` |
|
||||
| `$primary-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$primary-50-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$primary-100-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$primary-200-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$primary-300-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$grey-white` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$grey-black` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$grey-50` | ![#fafafa](https://ej2.syncfusion.com/download/documentation/svg/fafafa.svg) `#fafafa` |
|
||||
| `$grey-100` | ![#f5f5f5](https://ej2.syncfusion.com/download/documentation/svg/f5f5f5.svg) `#f5f5f5` |
|
||||
| `$grey-200` | ![#eeeeee](https://ej2.syncfusion.com/download/documentation/svg/eeeeee.svg) `#eeeeee` |
|
||||
| `$grey-300` | ![#e0e0e0](https://ej2.syncfusion.com/download/documentation/svg/e0e0e0.svg) `#e0e0e0` |
|
||||
| `$grey-400` | ![#bdbdbd](https://ej2.syncfusion.com/download/documentation/svg/bdbdbd.svg) `#bdbdbd` |
|
||||
| `$grey-500` | ![#9e9e9e](https://ej2.syncfusion.com/download/documentation/svg/9e9e9e.svg) `#9e9e9e` |
|
||||
| `$grey-600` | ![#757575](https://ej2.syncfusion.com/download/documentation/svg/757575.svg) `#757575` |
|
||||
| `$grey-700` | ![#616161](https://ej2.syncfusion.com/download/documentation/svg/616161.svg) `#616161` |
|
||||
| `$grey-800` | ![#424242](https://ej2.syncfusion.com/download/documentation/svg/424242.svg) `#424242` |
|
||||
| `$grey-900` | ![#212121](https://ej2.syncfusion.com/download/documentation/svg/212121.svg) `#212121` |
|
||||
| `$grey-dark` | ![#303030](https://ej2.syncfusion.com/download/documentation/svg/303030.svg) `#303030` |
|
||||
| `$grey-light-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$grey-dark-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$base-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$error-font` | ![#f44336](https://ej2.syncfusion.com/download/documentation/svg/f44336.svg) `#f44336` |
|
||||
|
||||
### Microsoft Office’s Fabric
|
||||
|
||||
| Name | Value |
|
||||
| ------------- | ------------- |
|
||||
| `$theme-primary` | ![#0078d7](https://ej2.syncfusion.com/download/documentation/svg/f44336.svg) `#0078d7` |
|
||||
| `$theme-dark-alt` | ![#006fc7](https://ej2.syncfusion.com/download/documentation/svg/006fc7.svg) `darken($theme-primary, 3%)` |
|
||||
| `$theme-dark` | ![#005ba3](https://ej2.syncfusion.com/download/documentation/svg/005ba3.svg) `darken($theme-primary, 10%)` |
|
||||
| `$theme-darker` | ![#00457a](https://ej2.syncfusion.com/download/documentation/svg/00457a.svg) `darken($theme-primary, 18%)` |
|
||||
| `$theme-secondary` | ![#0081e5](https://ej2.syncfusion.com/download/documentation/svg/0081e5.svg) `lighten($theme-primary, 3%)` |
|
||||
| `$theme-tertiary` | ![#42acff](https://ej2.syncfusion.com/download/documentation/svg/42acff.svg) `lighten($theme-primary, 21%)` |
|
||||
| `$theme-light` | ![#b7e0ff](https://ej2.syncfusion.com/download/documentation/svg/b7e0ff.svg) `lighten($theme-primary, 44%)` |
|
||||
| `$theme-lighter` | ![#d1ebff](https://ej2.syncfusion.com/download/documentation/svg/d1ebff.svg) `lighten($theme-primary, 49%)` |
|
||||
| `$theme-lighter-alt` | ![#aliceblue](https://ej2.syncfusion.com/download/documentation/svg/aliceblue.svg) `lighten($theme-primary, 55%)` |
|
||||
| `$neutral-white` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$neutral-lighter-alt` | ![#f8f8f8](https://ej2.syncfusion.com/download/documentation/svg/f8f8f8.svg) `#f8f8f8` |
|
||||
| `$neutral-lighter` | ![#f4f4f4](https://ej2.syncfusion.com/download/documentation/svg/f4f4f4.svg) `#f4f4f4` |
|
||||
| `$neutral-light` | ![#eaeaea](https://ej2.syncfusion.com/download/documentation/svg/eaeaea.svg) `#eaeaea` |
|
||||
| `$neutral-quintenaryalt` | ![#dadada](https://ej2.syncfusion.com/download/documentation/svg/dadada.svg) `#dadada` |
|
||||
| `$neutral-quintenary` | ![#d0d0d0](https://ej2.syncfusion.com/download/documentation/svg/d0d0d0.svg) `#d0d0d0` |
|
||||
| `$neutral-tertiary-alt` | ![#c8c8c8](https://ej2.syncfusion.com/download/documentation/svg/c8c8c8.svg) `#c8c8c8` |
|
||||
| `$neutral-tertiary` | ![#a6a6a6](https://ej2.syncfusion.com/download/documentation/svg/a6a6a6.svg) `#a6a6a6` |
|
||||
| `$neutral-secondary-alt` | ![#767676](https://ej2.syncfusion.com/download/documentation/svg/767676.svg) `#767676` |
|
||||
| `$neutral-secondary` | ![#666666](https://ej2.syncfusion.com/download/documentation/svg/666666.svg) `#666666` |
|
||||
| `$neutral-primary` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
|
||||
| `$neutral-dark` | ![#212121](https://ej2.syncfusion.com/download/documentation/svg/212121.svg) `#212121` |
|
||||
| `$neutral-black` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$alert-bg` | ![#deecf9](https://ej2.syncfusion.com/download/documentation/svg/deecf9.svg) `#deecf9` |
|
||||
| `$error-bg` | ![#fde7e9](https://ej2.syncfusion.com/download/documentation/svg/fde7e9.svg) `#fde7e9` |
|
||||
| `$success-bg` | ![#dff6dd](https://ej2.syncfusion.com/download/documentation/svg/dff6dd.svg) `#dff6dd` |
|
||||
| `$theme-dark-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$theme-primary-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$theme-light-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
|
||||
| `$neutral-light-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
|
||||
| `$neutral-light-fontalt` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$grey-dark-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$base-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
|
||||
| `$message-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
|
||||
| `$alert-font` | ![#d83b01](https://ej2.syncfusion.com/download/documentation/svg/d83b01.svg) `#d83b01` |
|
||||
| `$error-font` | ![#a80000](https://ej2.syncfusion.com/download/documentation/svg/a80000.svg) `#a80000` |
|
||||
| `$success-font` | ![#107c10](https://ej2.syncfusion.com/download/documentation/svg/107c10.svg) `#107c10` |
|
||||
|
||||
### Bootstrap
|
||||
|
||||
| Name | Value |
|
||||
| ------------- | ------------- |
|
||||
| `$brand-primary` | ![#317ab9](https://ej2.syncfusion.com/download/documentation/svg/317ab9.svg) `#317ab9` |
|
||||
| `$brand-primary-darken-10` | ![#3071a9](https://ej2.syncfusion.com/download/documentation/svg/3071a9.svg) `#3071a9` |
|
||||
| `$brand-primary-darken-15` | ![#2a6496](https://ej2.syncfusion.com/download/documentation/svg/2a6496.svg) `#2a6496` |
|
||||
| `$brand-primary-darken-25` | ![#1f496e](https://ej2.syncfusion.com/download/documentation/svg/1f496e.svg) `#1f496e` |
|
||||
| `$brand-primary-darken-35` | ![#142f46](https://ej2.syncfusion.com/download/documentation/svg/142f46.svg) `#142f46` |
|
||||
| `$brand-primary-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$grey-base` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$grey-darker` | ![#222222](https://ej2.syncfusion.com/download/documentation/svg/222222.svg) `#222222` |
|
||||
| `$grey-dark` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
|
||||
| `$grey` | ![#555555](https://ej2.syncfusion.com/download/documentation/svg/555555.svg) `#555555` |
|
||||
| `$grey-light` | ![#777777](https://ej2.syncfusion.com/download/documentation/svg/777777.svg) `#777777` |
|
||||
| `$grey-44` | ![#444444](https://ej2.syncfusion.com/download/documentation/svg/444444.svg) `#444444` |
|
||||
| `$grey-88` | ![#888888](https://ej2.syncfusion.com/download/documentation/svg/888888.svg) `#888888` |
|
||||
| `$grey-99` | ![#999999](https://ej2.syncfusion.com/download/documentation/svg/999999.svg) `#999999` |
|
||||
| `$grey-8c` | ![#8c8c8c](https://ej2.syncfusion.com/download/documentation/svg/8c8c8c.svg) `#8c8c8c` |
|
||||
| `$grey-ad` | ![#adadad](https://ej2.syncfusion.com/download/documentation/svg/adadad.svg) `#adadad` |
|
||||
| `$grey-dark-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$grey-white` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$grey-lighter` | ![#eeeeee](https://ej2.syncfusion.com/download/documentation/svg/eeeeee.svg) `#eeeeee` |
|
||||
| `$grey-f9` | ![#f9f9f9](https://ej2.syncfusion.com/download/documentation/svg/f9f9f9.svg) `#f9f9f9` |
|
||||
| `$grey-f8` | ![#f8f8f8](https://ej2.syncfusion.com/download/documentation/svg/f8f8f8.svg) `#f8f8f8` |
|
||||
| `$grey-f5` | ![#f5f5f5](https://ej2.syncfusion.com/download/documentation/svg/f5f5f5.svg) `#f5f5f5` |
|
||||
| `$grey-e6` | ![#e6e6e6](https://ej2.syncfusion.com/download/documentation/svg/e6e6e6.svg) `#e6e6e6` |
|
||||
| `$grey-dd` | ![#dddddd](https://ej2.syncfusion.com/download/documentation/svg/dddddd.svg) `#dddddd` |
|
||||
| `$grey-d4` | ![#d4d4d4](https://ej2.syncfusion.com/download/documentation/svg/d4d4d4.svg) `#d4d4d4` |
|
||||
| `$grey-cc` | ![#cccccc](https://ej2.syncfusion.com/download/documentation/svg/cccccc.svg) `#cccccc` |
|
||||
| `$grey-light-font` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
|
||||
| `$brand-success` | ![#5cb85c](https://ej2.syncfusion.com/download/documentation/svg/5cb85c.svg) `#5cb85c` |
|
||||
| `$brand-success-dark` | ![#3c763d](https://ej2.syncfusion.com/download/documentation/svg/3c763d.svg) `#3c763d` |
|
||||
| `$brand-info` | ![#5bc0de](https://ej2.syncfusion.com/download/documentation/svg/5bc0de.svg) `#5bc0de` |
|
||||
| `$brand-info-dark` | ![#31708f](https://ej2.syncfusion.com/download/documentation/svg/31708f.svg) `#31708f` |
|
||||
| `$brand-warning` | ![#f0ad4e](https://ej2.syncfusion.com/download/documentation/svg/f0ad4e.svg) `#f0ad4e` |
|
||||
| `$brand-warning-dark` | ![#8a6d3b](https://ej2.syncfusion.com/download/documentation/svg/8a6d3b.svg) `#8a6d3b` |
|
||||
| `$brand-danger` | ![#d9534f](https://ej2.syncfusion.com/download/documentation/svg/d9534f.svg) `#d9534f` |
|
||||
| `$brand-danger-dark` | ![#a94442](https://ej2.syncfusion.com/download/documentation/svg/a94442.svg) `#a94442` |
|
||||
| `$brand-success-light` | ![#dff0d8](https://ej2.syncfusion.com/download/documentation/svg/dff0d8.svg) `#dff0d8` |
|
||||
| `$brand-info-light` | ![#d9edf7](https://ej2.syncfusion.com/download/documentation/svg/d9edf7.svg) `#d9edf7` |
|
||||
| `$brand-warning-light` | ![#fcf8e3](https://ej2.syncfusion.com/download/documentation/svg/fcf8e3.svg) `#fcf8e3` |
|
||||
| `$brand-danger-light` | ![#f2dede](https://ej2.syncfusion.com/download/documentation/svg/f2dede.svg) `#f2dede` |
|
||||
| `$input-border-focus` | ![#66afe9](https://ej2.syncfusion.com/download/documentation/svg/66afe9.svg) `#66afe9` |
|
||||
| `$brand-success-font` | ![#3c763d](https://ej2.syncfusion.com/download/documentation/svg/3c763d.svg) `#3c763d` |
|
||||
| `$brand-info-font` | ![#31708f](https://ej2.syncfusion.com/download/documentation/svg/31708f.svg) `#31708f` |
|
||||
| `$brand-warning-font` | ![#8a6d3b](https://ej2.syncfusion.com/download/documentation/svg/8a6d3b.svg) `#8a6d3b` |
|
||||
| `$brand-danger-font` |![#a94442](https://ej2.syncfusion.com/download/documentation/svg/a94442.svg) `#a94442` |
|
||||
| `$base-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
|
||||
### High Contrast
|
||||
|
||||
| Name | Value |
|
||||
| ------------- | ------------- |
|
||||
| `$selection-bg` | ![#ffd939](https://ej2.syncfusion.com/download/documentation/svg/ffd939.svg) `#ffd939` |
|
||||
| `$selection-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$selection-border` | ![#ffd939](https://ej2.syncfusion.com/download/documentation/svg/ffd939.svg) `#ffd939` |
|
||||
| `$hover-bg` | ![#685708](https://ej2.syncfusion.com/download/documentation/svg/685708.svg) `#685708` |
|
||||
| `$hover-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$hover-border` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$border-default` | ![#969696](https://ej2.syncfusion.com/download/documentation/svg/969696.svg) `#969696` |
|
||||
| `$border-alt` | ![#757575](https://ej2.syncfusion.com/download/documentation/svg/757575.svg) `#757575` |
|
||||
| `$border-fg` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$border-fg-alt` | ![#ffd939](https://ej2.syncfusion.com/download/documentation/svg/ffd939.svg) `#ffd939` |
|
||||
| `$bg-base-0` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$bg-base-5` | ![#0d0d0d](https://ej2.syncfusion.com/download/documentation/svg/0d0d0d.svg) `#0d0d0d` |
|
||||
| `$bg-base-10` | ![#1a1a1a](https://ej2.syncfusion.com/download/documentation/svg/1a1a1a.svg) `#1a1a1a` |
|
||||
| `$bg-base-15` | ![#262626](https://ej2.syncfusion.com/download/documentation/svg/262626.svg) `#262626` |
|
||||
| `$bg-base-20` | ![#333333](https://ej2.syncfusion.com/download/documentation/svg/333333.svg) `#333333` |
|
||||
| `$bg-base-75` | ![#bfbfbf](https://ej2.syncfusion.com/download/documentation/svg/bfbfbf.svg) `#bfbfbf` |
|
||||
| `$bg-base-100` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$header-font` | ![#ffd939](https://ej2.syncfusion.com/download/documentation/svg/ffd939.svg) `#ffd939` |
|
||||
| `$header-font-alt` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$content-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$content-font-alt` | ![#969696](https://ej2.syncfusion.com/download/documentation/svg/969696.svg) `#969696` |
|
||||
| `$link` | ![#8a8aff](https://ej2.syncfusion.com/download/documentation/svg/8a8aff.svg) `#8a8aff` |
|
||||
| `$invert-font` | ![#000000](https://ej2.syncfusion.com/download/documentation/svg/000000.svg) `#000000` |
|
||||
| `$success-bg` | ![#166600](https://ej2.syncfusion.com/download/documentation/svg/166600.svg) `#166600` |
|
||||
| `$error-bg` | ![#b30900](https://ej2.syncfusion.com/download/documentation/svg/b30900.svg) `#b30900` |
|
||||
| `$message-font` | ![#ffffff](https://ej2.syncfusion.com/download/documentation/svg/ffffff.svg) `#ffffff` |
|
||||
| `$alert-bg` | ![#944000](https://ej2.syncfusion.com/download/documentation/svg/944000.svg) `#944000` |
|
||||
| `$info-bg` | ![#0056b3](https://ej2.syncfusion.com/download/documentation/svg/0056b3.svg) `#0056b3` |
|
||||
| `$success-alt` | ![#2bc700](https://ej2.syncfusion.com/download/documentation/svg/2bc700.svg) `#2bc700` |
|
||||
| `$error-alt` | ![#ff6161](https://ej2.syncfusion.com/download/documentation/svg/ff6161.svg) `#ff6161` |
|
||||
| `$alert-alt` | ![#ff7d1a](https://ej2.syncfusion.com/download/documentation/svg/ff7d1a.svg) `#ff7d1a` |
|
||||
| `$info-alt` | ![#66b0ff](https://ej2.syncfusion.com/download/documentation/svg/66b0ff.svg) `#66b0ff` |
|
||||
| `$disable` | ![#757575](https://ej2.syncfusion.com/download/documentation/svg/757575.svg) `#757575` |
|
|
@ -0,0 +1,54 @@
|
|||
# Browser Support
|
||||
|
||||
The Syncfusion Essential JS 2 components are supported only in modern browsers. This includes the following versions.
|
||||
|
||||
| Chrome | Firefox | Opera | Edge | IE | Safari | IOS | Android | Windows Mobile |
|
||||
|--------------|---------------|--------------|------------|------------|--------------|-----------|---------------|------------------------|
|
||||
| Latest | Latest | Latest | 13 + | 11 + | 9 + | 9 + | 4.4 + | IE 11 + |
|
||||
|
||||
## Required Polyfills
|
||||
|
||||
The following polyfills are required to run Essential JS 2 components in each browser.
|
||||
|
||||
| Browser | Polyfills |
|
||||
|:--------------------------------------------------------:|:-------------------:|
|
||||
| Chrome(latest), Firefox(latest), Opera(latest), Edge, Safari 9+ | NONE |
|
||||
| IE 11 | ES6 Promise |
|
||||
|
||||
The Syncfusion Essential JS 2 components are supported in IE 11 browser with ES6 Promise polyfill.
|
||||
|
||||
## Using CDN
|
||||
|
||||
To add ES6 Promise polyfill using a CDN, include this in your HTML file.
|
||||
|
||||
```typescript
|
||||
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
|
||||
<!-- Minified version of `es6-promise-auto` below. -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
|
||||
|
||||
```
|
||||
|
||||
## Node.js
|
||||
|
||||
ES6 Promise polyfill can also be installed on the node.js.
|
||||
|
||||
To install:
|
||||
|
||||
```typescript
|
||||
yarn add es6-promise
|
||||
(or)
|
||||
npm install es6-promise
|
||||
|
||||
```
|
||||
|
||||
To Use:
|
||||
|
||||
```typescript
|
||||
var Promise = require('es6-promise').Promise;
|
||||
|
||||
```
|
||||
|
||||
For further details, refer to the link [here](https://github.com/stefanpenner/es6-promise).
|
|
@ -0,0 +1,48 @@
|
|||
# Animation
|
||||
|
||||
The **Animation** library is used to perform animation effects on HTML elements by running a sequence of frames.
|
||||
|
||||
## Animating a HTML Element
|
||||
|
||||
The `animate` method of `Animation` library can be used to animate the HTML elements. This method can also take additional `AnimationModel`. Refer the below code snippet to animate a multiple DOM element.
|
||||
|
||||
{% tab template="common/animation-multiple", isDefaultActive=true %}
|
||||
|
||||
```html
|
||||
|
||||
<template>
|
||||
<div id='container'>
|
||||
<div id='element1'></div>
|
||||
<div id='element2'></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Animation } from '@syncfusion/ej2-base';
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
mounted: function () {
|
||||
var animation = new Animation({ duration: 5000 });
|
||||
animation.animate('#element1', { name: 'FadeOut' });
|
||||
animation.animate('#element2', { name: 'ZoomOut' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
#element1, #element2 {
|
||||
background: #333333;
|
||||
border: 1px solid #cecece;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
height: 100px;
|
||||
width:100px;
|
||||
}
|
||||
|
||||
#element2 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
|
@ -0,0 +1,184 @@
|
|||
# Drag and Drop
|
||||
|
||||
Drag and Drop is supported through two libraries. Those are [`Draggable`](https://ej2.syncfusion.com/documentation/api/base/draggable) and [`Droppable`](https://ej2.syncfusion.com/documentation/api/base/droppable). Draggable makes DOM to be dragged using mouse or touch gestures and Droppable mark required DOM as droppable zone.
|
||||
|
||||
## Initializing Draggable
|
||||
|
||||
You can make any element draggable by passing the element to Draggable constructor. Refer the following code snippet to enable draggable for the DOM element.
|
||||
|
||||
{% tab template="common/draggable-default" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id='container'>
|
||||
<div id='element1'>
|
||||
<p>Draggable Element </p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Draggable } from '@syncfusion/ej2-base';
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
mounted: function () {
|
||||
|
||||
var dragElement = document.getElementById('element1');
|
||||
var draggable = new Draggable(dragElement, { clone: false });
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#element1,
|
||||
.helper {
|
||||
height: 100px;
|
||||
width: 150px;
|
||||
border: 1px solid #cecece;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
color: #6a77a7;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 23px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.helper {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.select {
|
||||
border: 1px solid #cccccc;
|
||||
background: #ededed;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
{% endtab %}
|
||||
|
||||
## Creating Droppable zone
|
||||
|
||||
You can convert any DOM element as a droppable zone, which accepts the draggable elements. Refer the following code snippet to enable droppable zone.
|
||||
|
||||
{% tab template="common/droppable-default" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id='droppable'>
|
||||
<p class='drop'>
|
||||
<span>Drop Target</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Droppable } from '@syncfusion/ej2-base';
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
mounted: function () {
|
||||
|
||||
var droppable = new Droppable(document.getElementById('droppable'));
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.drop {
|
||||
padding-top: 23px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
#droppable {
|
||||
margin: 5px;
|
||||
line-height: 170px;
|
||||
font-size: 14px;
|
||||
width: 250px;
|
||||
border: 1px solid #cecece;
|
||||
background: #f6f6f6;
|
||||
touch-action: none;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Defining Drop Action
|
||||
|
||||
To define a drop action set [`drop`](https://ej2.syncfusion.com/documentation/api/base/droppable#drop) callback function during droppable object creation. You can get details of dropped element through dropped element property in event argument. Refer the following code snippet to use basic drag and drop action.
|
||||
|
||||
{% tab template="common/drag-drop-action", es5Template="drag-drop-template" %}
|
||||
|
||||
```html
|
||||
|
||||
<template>
|
||||
<div id='container'>
|
||||
<div id='droppable'>
|
||||
<p class='drop'><span>Drop Target </span></p>
|
||||
</div>
|
||||
<div id='element1'>
|
||||
<p class='drag-text'>Drag </p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Draggable, Droppable } from '@syncfusion/ej2-base';
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
mounted: function () {
|
||||
var draggable = new Draggable(document.getElementById('element1'), {
|
||||
clone: false
|
||||
});
|
||||
var droppable = new Droppable(document.getElementById('droppable'), {
|
||||
drop: (e) => {
|
||||
e.droppedElement.querySelector('.drag-text').textContent = 'Dropped';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#element1 {
|
||||
height: 100px;
|
||||
width: 150px;
|
||||
border: 1px solid #cecece;
|
||||
cursor: move;
|
||||
background: #cdffe3;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
#element1 p {
|
||||
padding-top: 23px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.drop {
|
||||
padding-top: 23px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
#droppable {
|
||||
margin: 5px;
|
||||
line-height: 170px;
|
||||
font-size: 14px;
|
||||
width: 250px;
|
||||
border: 1px solid #cecece;
|
||||
background: #f6f6f6;
|
||||
touch-action: none;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## See Also
|
||||
|
||||
[Define handle element for Draggable](https://ej2.syncfusion.com/documentation/api/base/draggable#handle)<br/>
|
||||
[Restricting Draggable within conainer](https://ej2.syncfusion.com/documentation/api/base/draggable#dragarea)<br>
|
||||
[Visual feedback of draggable element](https://ej2.syncfusion.com/documentation/api/base/draggable#clone)<br>
|
||||
[Accepting specific drag element in droppable](https://ej2.syncfusion.com/documentation/api/base/droppable#accept)
|
|
@ -0,0 +1,83 @@
|
|||
# Event Binding
|
||||
|
||||
Syncfusion Vue UI components support Binding of both Custom and Native Events. For more information, refer official [Vue Documentation](https://vuejs.org/v2/guide/events.html)
|
||||
|
||||
## Custom Events
|
||||
|
||||
Custom events are the `Component` specific events provided by Syncfusion Vue components supported through `v-on` directive. The Syntax for Binding Custom Event is `v-on:event-name="function"`.
|
||||
|
||||
Refer the below code snippet for Binding of Custom Events.
|
||||
|
||||
```html
|
||||
|
||||
// Custom Event Binding
|
||||
|
||||
<template>
|
||||
<div id="calendar">
|
||||
<ejs-calendar v-on:created="display" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
|
||||
Vue.use(CalendarPlugin);
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
display: function() {
|
||||
window.alert('Calendar Created');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
|
||||
|
||||
#calendar {
|
||||
max-width: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
## Native Events
|
||||
|
||||
Native events are the DOM events of Syncfusion Vue component's root element. `.native` modifier for `v-on` directive is used for binding these events. The Syntax for Binding Native Event is `v-on:event-name.native="function"`.
|
||||
|
||||
Refer the below code snippet for Binding Native Events.
|
||||
|
||||
```html
|
||||
|
||||
//Native Event Binding
|
||||
|
||||
<template>
|
||||
<div id="button">
|
||||
<ejs-button :content="name" v-on:click.native="clicked"></ejs-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
|
||||
Vue.use(ButtonPlugin);
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: "Button"
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clicked: function() {
|
||||
window.alert('Button Clicked');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
|
||||
</style>
|
||||
|
||||
```
|
|
@ -0,0 +1,29 @@
|
|||
# Update Syncfusion npm package
|
||||
|
||||
The latest Syncfusion npm package can be updated with the help of [`npm-check-updates`](https://www.npmjs.com/package/npm-check-updates) package.
|
||||
|
||||
1. You can install the `npm-check-update package` globally to use this as CLI.
|
||||
|
||||
```bash
|
||||
npm install -g npm-check-updates
|
||||
ncu -u -f /^@syncfusion/
|
||||
```
|
||||
|
||||
This will update the package.json file with latest version of all `@syncfusion` packages.
|
||||
|
||||
2. Now, run the following commands to update the packages in `node_modules` and remove the duplicate package which is already installed.
|
||||
|
||||
```bash
|
||||
npm update
|
||||
npm dedupe
|
||||
```
|
||||
|
||||
## Updating a specific npm package
|
||||
|
||||
* Run the following commands from the command prompt in the application root to update a specific npm package in `node_modules` and remove the installed duplicate package.
|
||||
|
||||
```bash
|
||||
npm update @syncfusion/ej2-grids
|
||||
npm update @syncfusion/ej2-vue-grids
|
||||
npm dedupe
|
||||
```
|
|
@ -0,0 +1,13 @@
|
|||
# Overview
|
||||
|
||||
The Base (`ej2-base`) is the most common package which has common class definitions, libraries and methods for the Syncfusion Vue components.
|
||||
|
||||
## Key Features
|
||||
|
||||
* [Animation](./animation/)
|
||||
* [Template Engine](./template/)
|
||||
* [Localization](./localization/)
|
||||
* [Internationalization](./internationalization/)
|
||||
* [Drag and Drop](./drag-and-drop/)
|
||||
* [Event Binding](./event-binding/)
|
||||
* [Model Binding](./model-binding/)
|
|
@ -0,0 +1,475 @@
|
|||
# Internationalization
|
||||
|
||||
The `Internationalization` library provides support for formatting and parsing date and number objects
|
||||
using the official [Unicode CLDR](http://cldr.unicode.org/) JSON data. The `en-US` locale is set as
|
||||
default _culture_ and the `USD` is set as default _currencyCode_ for all Syncfusion Vue components.
|
||||
|
||||
## Loading Culture Data
|
||||
|
||||
It requires the following CLDR data to be loaded using the `loadCldr` function for cultures other than `en-US`.
|
||||
|
||||
| File Name | Path |
|
||||
| ------------- | ------------- |
|
||||
| ca-gregorian | cldr/main/en/ca-gregorian.json |
|
||||
| timeZoneNames |cldr/main/en/timeZoneNames.json |
|
||||
| numbers | cldr/main/en/numbers.json |
|
||||
| numberingSystems | cldr/supplemental/numberingSystems.json |
|
||||
| currencies | cldr/main/en/currencies.json |
|
||||
|
||||
>Note: For `en`, dependency files are already loaded in the library.
|
||||
|
||||
### Installing CLDR Data
|
||||
|
||||
CLDR data is available as npm package. So, you can install it through the below command to our package.
|
||||
|
||||
```bash
|
||||
npm install cldr-data
|
||||
```
|
||||
|
||||
### Binding to i18n library
|
||||
|
||||
```typescript
|
||||
import { loadCldr } from '@syncfusion/ej2-base';
|
||||
loadcldr(enNumberData, entimeZoneData);
|
||||
```
|
||||
|
||||
## Changing Global Culture and Currency Code
|
||||
|
||||
To set the default culture and the currencyCode for all Syncfusion Vue components, you can use the methods
|
||||
`setCulture` for setting default locale and `setCurrencyCode` for setting the currencyCode.
|
||||
|
||||
### Setting Global Culture
|
||||
|
||||
```typescript
|
||||
|
||||
import {setCulture} from '@syncfusion/ej2-base';
|
||||
|
||||
setCulture('ar');
|
||||
|
||||
```
|
||||
|
||||
### Setting Currency Code
|
||||
|
||||
```typescript
|
||||
|
||||
import { setCurrencyCode} from '@syncfusion/ej2-base';
|
||||
|
||||
setCurrencyCode('QAR');
|
||||
|
||||
```
|
||||
|
||||
>Note: If global culture is not set then `en-US` is set as default locale and the `USD` is set as a default currency code.
|
||||
|
||||
## Manipulating Numbers
|
||||
|
||||
<!-- markdownlint-disable MD024 -->
|
||||
|
||||
### Supported Format String
|
||||
|
||||
<!-- markdownlint-disable MD024 -->
|
||||
|
||||
Based on the [`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions)
|
||||
number formatting and parsing operations are processed. You need to specify some or all of the following properties mentioned in the below table.
|
||||
|
||||
| No | Properties | Description |
|
||||
| --- | --- | --- |
|
||||
| 1 | `format` | Denotes the format to be set .Possible values are <br /> 1. **N -** denotes numeric type. <br /> 2. **C -** denotes currency type. <br /> 3. **P -** denotes percentage type. <br /> E.g: <br /> `formatNumber`( **1234344** ,{format:'N4'}). <br /> <br/>Note: If no format is specified it takes numeric as default format type. |
|
||||
| 2 | `minimumFractionDigits` | Indicates the minimum number of fraction digits . Possible values are 0 to 20. |
|
||||
| 3 | `maximumFractionDigits` | Indicates the maximum number of fraction digits. Possible values are 0 to 20. |
|
||||
| 4 | `minimumSignificantDigits` | Indicates he minimum number of significant digits. Possible values are 1 to 21. <br /> **Note:** If `minimumSignificantDigits` is given it is mandatory to give `maximumSignificantDigits` |
|
||||
| 5 | `maximumSignificantDigits` | Indicates he maximum number of significant digits. . Possible values are 1 to 21. <br />**Note:** If `maximumSignificantDigits` is given it is mandatory to give `minimumSignificantDigits` |
|
||||
| 6 | `useGrouping` | Indicates whether to enable the group separator or not . By default grouping value will be true. |
|
||||
| 7 | `minimumIntegerDigits` | Indicates the minimum number of the integer digits to be placed in the value. Possible values are 1 to 21. |
|
||||
| 8 | `currency`| Indicates the currency code which needs to considered for the currency formatting. |
|
||||
|
||||
>Note: The `minimumIntegerDigits`, `minimumFractionDigits` and `maximumFractionDigits` are categorized
|
||||
as group one,
|
||||
`minimumSignificantDigits` and `maximumSignificantDigits` are categorized as group two.
|
||||
If group two properties are defined, then the group one properties will be ignored.
|
||||
|
||||
### Custom number formatting and parsing
|
||||
|
||||
Custom number formatting and parsing are also supported by specifying the pattern directly
|
||||
in the **format** property of `NumberFormatOptions`. Custom number format can be achieved by
|
||||
using one or more custom format specifiers listed in the below table.
|
||||
|
||||
| Specifier | Description | Input | Format Output |
|
||||
| ------- |--------------- | ---------------- | --------------- |
|
||||
| 0 | Replaces the zero with the corresponding digit if one is present. Otherwise, zero appears in the result string. | `instance.formatNumber`(123,{format: '0000' }) | '0123' |
|
||||
| # | Replaces the "#" symbol with the corresponding digit if one is present; otherwise, no digit appears in the result string.| `instance.formatNumber`(1234,{format: '####' }) | ‘1234’ |
|
||||
| . | Denotes the number of digits allowed after the decimal points if it’s not specified then no need to specify decimal point values. | `instance.formatNumber`(546321,{format: '###0.##0#' }) | ‘546321.000’ |
|
||||
| % | Percent specifier denotes the percentage type format. | `instance.formatNumber`(1,{format: '0000 %' }) | ‘0100 %’ |
|
||||
| $ | Denotes the currency type format based on the global currency code specified. | `instance.formatNumber`(13,{format: '$ ###.00' }); | ‘$ 13.00’ |
|
||||
| ; | Denotes separate formats for positive, negative and zero values. | `instance.formatNumber`(-120,{format: '###.##;(###.00);-0'}); | ‘(120.00)’ |
|
||||
| 'String' (single Quotes) | Denotes the characters enclosed within single Quote(') to be replaced in the resultant string. | `instance.formatNumber`(-123.44,{format: "####.## '@'"}) | ‘123.44 @’ |
|
||||
|
||||
>Note: If custom format pattern is specified other [`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions) properties will not be considered.
|
||||
|
||||
### Number formatting
|
||||
|
||||
#### `getNumberFormat`
|
||||
|
||||
The [`getNumberFormat`](https://ej2.syncfusion.com/documentation/api/base/internationalization#getnumberformat)
|
||||
method which will return a function that formats given numbers based on the
|
||||
[`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions) specified.
|
||||
|
||||
{% tab template="common/intl-getNumber-format", es5Template="number-formatting-template" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="result"></div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Internationalization } from '@syncfusion/ej2-base';
|
||||
export default {
|
||||
mounted:function(){
|
||||
var intl = new Internationalization();
|
||||
var nFormatter = intl.getNumberFormat({ skeleton: 'C3', currency: 'USD',minimumIntegerDigits:8});
|
||||
var formattedValue = nFormatter(1234545.65)
|
||||
document.querySelector('.result').innerHTML = formattedValue;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
#### `formatNumber`
|
||||
|
||||
The [`formatNumber`](https://ej2.syncfusion.com/documentation/api/base/internationalization)
|
||||
method which takes two arguments numeric value and[`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions)
|
||||
and returns the formatted string.
|
||||
|
||||
{% tab template="common/intl-getNumber-format", es5Template="format-number-template" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="result"> </div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Internationalization } from '@syncfusion/ej2-base';
|
||||
export default {
|
||||
mounted: function(){
|
||||
var intl = new Internationalization();
|
||||
var formattedString = intl.formatNumber(12345.65, { format:'C5' , useGrouping: false,
|
||||
minimumSignificantDigits:1, maximumSignificantDigits:3 });
|
||||
document.querySelector('.result').innerHTML = formattedString;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
### Parsing
|
||||
|
||||
#### `getNumberParser`
|
||||
|
||||
The [`getNumberParser`](https://ej2.syncfusion.com/documentation/api/base/internationalization#getnumberparser) method which will return a function
|
||||
that parses given string based on the [`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions) specified.
|
||||
|
||||
{% tab template="common/intl-parseNumber1", es5Template="parser-template" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="result"></div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import Vue from 'vue';
|
||||
import { Internationalization } from '@syncfusion/ej2-base';
|
||||
export default {
|
||||
mounted:function(){
|
||||
var intl = new Internationalization();
|
||||
var nParser = intl.getNumberParser({ format:'P2' , useGrouping: false});
|
||||
var val = nParser('123567.45%');
|
||||
document.querySelector('.result').innerHTML = val + '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
#### `parseNumber`
|
||||
|
||||
The [`parseNumber`](https://ej2.syncfusion.com/documentation/api/base/internationalization#parsenumber) method which takes two arguments the string value, [`NumberFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions) and returns the numeric value.
|
||||
|
||||
{% tab template="common/intl-parseNumber" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="result"></div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import Vue from 'vue';
|
||||
import { Internationalization } from '@syncfusion/ej2-base';
|
||||
export default {
|
||||
mounted:function(){
|
||||
var intl = new Internationalization();
|
||||
var val = intl.parseNumber('$01,234,545.650', { format: 'C3', currency: 'USD', minimumIntegerDigits: 8 });
|
||||
document.querySelector('.result').innerHTML = val + '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Manipulating DateTime
|
||||
|
||||
### Supported Format String
|
||||
|
||||
Based on the [`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions)
|
||||
date formatting and parsing operations are processed. You need to specify some or all of the following properties
|
||||
mentioned below table.
|
||||
|
||||
| Options | Descriptions |
|
||||
| --- | --- | --- |
|
||||
| Type | It specifies the type of format to be used supported types .<br/>1. **`date`** <br/> 2. **`dateTime`** <br/> 3. **`time`** <br/> Based on the type specified the supported skeletons are given below. <br/> 1. short <br/> 2. medium, <br/>3. long <br/>4. full <br/> **E.g:** `formatDate`(new Date(), {type: 'date', skeleton:medium})<br/> Note: If no type is specified then **date** type is set by default. |
|
||||
| skeleton | Specifies the format in which the `dateTime` format will process |
|
||||
|
||||
<!-- markdownlint-disable MD036 -->
|
||||
|
||||
**Date type skeletons**
|
||||
|
||||
| skeleton | Option input | Format Output |
|
||||
| --- | --- | --- |
|
||||
| short | {type: 'date', skeleton:'short'}) | 11/4/16 |
|
||||
| medium | {type: 'date', skeleton:'medium'}) | Nov 4, 2016 |
|
||||
| long | {type: 'date', skeleton:'long'} | November 4, 2016 |
|
||||
| full | {type: 'date', skeleton:full}) | Friday, November 4, 2016 |
|
||||
|
||||
**Time type skeletons**
|
||||
|
||||
| skeleton | Option input | Format Output |
|
||||
| --- | --- | --- |
|
||||
| short | {type: 'time', skeleton:'short'} | 1:03 PM |
|
||||
| medium | {type: 'time', skeleton:'medium'} | 1:03:04 PM |
|
||||
| Long | {type: 'time', skeleton:'long'}) | 1:03:04 PM GMT+5 |
|
||||
| full | {type: 'time', skeleton:'full'}) | 1:03:04 PM GMT+05:30 |
|
||||
|
||||
**DateTime type skeletons**
|
||||
|
||||
| Skeleton | Option input | Format Output |
|
||||
| --- | --- | --- |
|
||||
| short | {type: '`dateTime`', skeleton:'short'} | 11/4/16, 1:03 PM |
|
||||
| medium | {type: '`dateTime`, skeleton:'medium'} | Nov 4, 2016, 1:03:04 PM |
|
||||
| Long | {type: '`dateTime`', skeleton:'long'}) | November 4, 2016 at 1:03:04 PM GMT+5 |
|
||||
| full | {type: '`dateTime`', skeleton:'full'}) | Friday, November 4, 2016 at 1:03:04 PM GMT+05:30 |
|
||||
|
||||
**Additional skeletons**
|
||||
|
||||
Apart from the standard date type formats additional format are supported by using the additional skeletons given in below table.
|
||||
|
||||
| skeleton | Option input | Format Output |
|
||||
| --- | --- | --- |
|
||||
| d | {skeleton:'d'} | 7 |
|
||||
| E | {skeleton:'E'} | Mon |
|
||||
| Ed | {skeleton:'Ed'} | 7 Mon |
|
||||
| Ehm | {skeleton:'Ehm'}) | Mon 12:43 AM |
|
||||
| EHm | {skeleton:'EHm;}); | Mon 12:43 |
|
||||
| Ehms | {skeleton:'Ehms' } | Mon 2:45:23 PM |
|
||||
| EHms | {skeleton:'EHms'}) | Mon 12:45:45 |
|
||||
| Gy | {skeleton:'Gy' } | 2016 AD |
|
||||
| GyMMM | {skeleton:'GyMMM'} | : Nov 2016 AD |
|
||||
| GyMMMd | {skeleton:'GyMMMd'} | Nov 7, 2016 AD |
|
||||
| GyMMMEd | {skeleton:'GyMMMEd'} | Mon, Nov 7, 2016 AD |
|
||||
| h | {skeleton:'h'} | 12 PM |
|
||||
| H | {skeleton:'H'} | 12 |
|
||||
| hm | {skeleton:'hm'} | 12:59 PM |
|
||||
| Hm | {skeleton:'Hm'} | 12:59 |
|
||||
| hms | {skeleton:'hms'} | 12:59:13 PM |
|
||||
| Hms | {skeleton:'Hms'} | 12:59:13 |
|
||||
| M | {skeleton:'M'} | 11 |
|
||||
| Md | {skeleton:'Md'} | 11/7 |
|
||||
| MEd | {skeleton:'hms'} | Mon, 11/7 |
|
||||
| MMM | {skeleton:'MMM'} | Nov |
|
||||
| MMMEd | {skeleton:'MMMEd'} | Mon, Nov 7 |
|
||||
| MMMd | {skeleton:'MMMEd'} | Nov 7 |
|
||||
| ms | {skeleton:'ms'} | 59:13 |
|
||||
| y | {skeleton:'y' } | 2016 |
|
||||
| yM | {skeleton:'yM' } | 11/2016 |
|
||||
| yMd | {skeleton:'yMd' } | 11/7/2016 |
|
||||
| yMEd | {skeleton:'yMEd' } | Mon, 11/7/2016 |
|
||||
| yMMM | {skeleton:'yMMM' } | Nov 2016 |
|
||||
| yMMMd | {skeleton:'yMMMd'} | Nov 7, 2016 |
|
||||
| yMMMEd | {skeleton:'yMMMEd'} | Mon, Nov 7, 2016 |
|
||||
| yMMM | {skeleton:'yMMM'} | Nov 2016 |
|
||||
|
||||
>Note: Culture specific format skeletons are also supported.
|
||||
|
||||
### Custom Formats
|
||||
|
||||
To use the custom date and time formats we need to specify the date/time pattern directly in the *format* property.
|
||||
The custom format string must contain one or more of the following standard date/time symbols
|
||||
|
||||
| Symbols | Description |
|
||||
|--------- |------------- |
|
||||
| G | Denotes the era in the date |
|
||||
| y | Denotes the year.|
|
||||
| M / L | Denotes month.|
|
||||
| E / c | Denotes the day of week. |
|
||||
| d | Denotes the day of month. |
|
||||
| h / H | Denotes the hour. *h* for 12 hour and *H* for 24 hours format. |
|
||||
| m | Denotes minutes. |
|
||||
| s | Denotes seconds. |
|
||||
| a | Denotes the am/pm designator it will only be displayed if hour is specified in the h format. |
|
||||
| z | Denotes the time zone. |
|
||||
| ' (single quotes) | To display words in the formatted date you can specify the words with in the single quotes |
|
||||
|
||||
**Custom format example**
|
||||
|
||||
```typescript
|
||||
import Vue from 'vue';
|
||||
import { Internationalization } from '@syncfusion/ej2-base';
|
||||
var intl = new Internationalization();
|
||||
var formattedString = intl.formatDate(new Date('1/12/2014 10:20:33'), { format: '\'year:\'y' \'month:\' MM' });
|
||||
//Output: "year:2014 month:01"
|
||||
|
||||
```
|
||||
|
||||
>Note: If format property is given in options other properties are not considered.
|
||||
|
||||
<!-- markdownlint-enable MD036 -->
|
||||
|
||||
### Formatting
|
||||
|
||||
#### `getDateFormat`
|
||||
|
||||
The [`getDateFormat`](https://ej2.syncfusion.com/documentation/api/base/internationalization#getdateformat)
|
||||
method which will return a function that formats given date object based on the
|
||||
[`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions) specified.
|
||||
|
||||
{% tab template="common/intl-formatDate" %}
|
||||
|
||||
```html
|
||||
|
||||
<template>
|
||||
<div class="result"></div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Internationalization } from '@syncfusion/ej2-base';
|
||||
export default {
|
||||
mounted:function(){
|
||||
var intl = new Internationalization();
|
||||
var dFormatter = intl.getDateFormat({ skeleton: 'full', type: 'dateTime' });
|
||||
var formattedString = dFormatter(new Date('1/12/2014 10:20:33'));
|
||||
document.querySelector('.result').innerHTML = formattedString;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
#### `formatDate`
|
||||
|
||||
The [`formatDate`](https://ej2.syncfusion.com/documentation/api/base/internationalization)
|
||||
method which takes two arguments date object,
|
||||
[`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions) and
|
||||
returns the formatted string.
|
||||
|
||||
{% tab template="common/intl-formatDate" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="result"></div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Internationalization } from '@syncfusion/ej2-base';
|
||||
export default {
|
||||
mounted:function(){
|
||||
var intl = new Internationalization();
|
||||
var date = new Date();
|
||||
var formattedString = intl.formatDate(new Date('1/12/2014 10:20:33'), { skeleton: 'GyMMM' });
|
||||
document.querySelector('.result').innerHTML = formattedString;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
<!-- markdownlint-enable MD036 -->
|
||||
|
||||
### Parsing
|
||||
|
||||
#### `getDateParser`
|
||||
|
||||
The [`getDateParser`](https://ej2.syncfusion.com/documentation/api/base/internationalization#getdateParser)
|
||||
method which will return a function that parses given string based on the
|
||||
[`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions) specified.
|
||||
|
||||
{% tab template="common/intl-parseDate" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="result"> </div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import {Internationalization} from '@syncfusion/ej2-base';
|
||||
export default {
|
||||
mounted:function(){
|
||||
var intl = new Internationalization();
|
||||
var dParser = intl.getDateParser({skeleton: 'full', type: 'dateTime'});
|
||||
var val = dParser('Friday, November 4, 2016 at 1:03:04 PM GMT+05:30');
|
||||
document.querySelector('.result').innerHTML = val.toString();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
#### `parseDate`
|
||||
|
||||
The [`parseDate`](https://ej2.syncfusion.com/documentation/api/base/internationalization#parsedate) method which takes two argument's string value, [`DateFormatOptions`](https://ej2.syncfusion.com/documentation/api/base/dateFormatOptions) and returns the date Object.
|
||||
|
||||
{% tab template="common/intl-parseDate1" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="result"></div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import {Internationalization} from '@syncfusion/ej2-base';
|
||||
export default {
|
||||
mounted:function(){
|
||||
var intl = new Internationalization();
|
||||
var val = intl.parseDate('11/2016',{skeleton: 'yM'});
|
||||
document.querySelector('.result').innerHTML = val.toString();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
|
@ -0,0 +1,96 @@
|
|||
# Localization
|
||||
|
||||
Localization library allows you to localize the text content of the Syncfusion Vue UI component.
|
||||
|
||||
## Loading translations
|
||||
|
||||
To load translation object in your application use `load` function of `L10n` class.
|
||||
|
||||
{% tab template="common/intl" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-grid :dataSource='data' locale='de-DE' :allowGrouping='true' :allowPaging='true' :pageSettings='pageOptions' height='220px'>
|
||||
<e-columns>
|
||||
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
|
||||
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
|
||||
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
|
||||
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { L10n, setCulture } from '@syncfusion/ej2-base';
|
||||
import { GridPlugin, Page, Group } from "@syncfusion/ej2-vue-grids";
|
||||
import { data } from './datasource.js';
|
||||
|
||||
setCulture('de-DE');
|
||||
|
||||
L10n.load({
|
||||
'de-DE': {
|
||||
'grid': {
|
||||
'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
|
||||
'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte',
|
||||
'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',
|
||||
'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',
|
||||
'Item': 'Artikel',
|
||||
'Items': 'Artikel'
|
||||
},
|
||||
'pager':{
|
||||
'currentPageInfo': '{0} von {1} Seiten',
|
||||
'totalItemsInfo': '({0} Beiträge)',
|
||||
'firstPageTooltip': 'Zur ersten Seite',
|
||||
'lastPageTooltip': 'Zur letzten Seite',
|
||||
'nextPageTooltip': 'Zur nächsten Seite',
|
||||
'previousPageTooltip': 'Zurück zur letzten Seit',
|
||||
'nextPagerTooltip': 'Zum nächsten Pager',
|
||||
'previousPagerTooltip': 'Zum vorherigen Pager'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: data,
|
||||
pageOptions: { pageSize: 7 }
|
||||
};
|
||||
},
|
||||
provide: {
|
||||
grid: [Page, Group]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
|
||||
## Changing current locale
|
||||
|
||||
Current locale can be changed for all the Essential JS 2 components in your application by invoking
|
||||
`setCulture` function with your desired culture name.
|
||||
|
||||
```typescript
|
||||
import {L10n, setCulture} from '@syncfusion/ej2-base';
|
||||
L10n.load({
|
||||
'fr-BE': {
|
||||
'Button': {
|
||||
'id': 'Numéro de commande',
|
||||
'date':'Date de commande'
|
||||
}
|
||||
}
|
||||
});
|
||||
setCulture('fr-BE');
|
||||
```
|
||||
|
||||
>Note: Before changing a culture globally, ensure that locale text for the concerned culture is loaded through `L10n.load` function.
|
|
@ -0,0 +1,50 @@
|
|||
# Model Binding
|
||||
|
||||
## Integrating Vue model binding in Syncfusion Vue UI components
|
||||
|
||||
Syncfusion Vue UI components support model binding through the `v-model` directive.
|
||||
The model binding support in Syncfusion Vue components uses custom 'modelchanged' event, which is used to notify Vue that a model is changed.
|
||||
|
||||
* Syncfusion Vue UI components that are initialized from form elements support model binding.
|
||||
|
||||
Refer to the following code snippet.
|
||||
|
||||
{% tab template="common/model", isDefaultActive=true %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-checkbox v-model="checked" label="EJ2 Vue Checkbox" :checked="checked" />
|
||||
<p>
|
||||
Checkbox State: <span id="checked-state" v-text="checked" ></span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { CheckBoxPlugin } from '@syncfusion/ej2-vue-buttons';
|
||||
|
||||
Vue.use(CheckBoxPlugin);
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
|
||||
#app {
|
||||
color: #008cff;
|
||||
height: 40px;
|
||||
left: 45%;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
|
@ -0,0 +1,8 @@
|
|||
* [Event Binding](common/event-binding.md)
|
||||
* [Model Binding](common/model-binding.md)
|
||||
* [Template](common/template.md)
|
||||
* [Animation](common/animation.md)
|
||||
* [Localization](common/localization.md)
|
||||
* [Internationalization](common/internationalization.md)
|
||||
* [Drag and Drop](common/drag-and-drop.md)
|
||||
* [Update NPM Packages](common/how-to/update-npm-package.md)
|
|
@ -0,0 +1,264 @@
|
|||
# Template
|
||||
|
||||
The Syncfusion Vue UI components support native Vue templates using single file components and Vue.component().
|
||||
|
||||
The two ways to configure template support are:
|
||||
|
||||
* Single File Components (.vue file)
|
||||
* Vue.component()
|
||||
|
||||
## Single file components
|
||||
|
||||
* Define the template in a template.vue file, and create an empty object `data` in the **data option** of the template.vue file.
|
||||
|
||||
* Pass arguments as properties of a data object.
|
||||
|
||||
Refer to the following code snippet of template.vue file.
|
||||
|
||||
```html
|
||||
// template.vue
|
||||
|
||||
<template>
|
||||
<div class="button">
|
||||
<ejs-button :content="`${data.ShipCountry}`"></ejs-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
* Import the template.vue file in the corresponding app.vue file as specified in the following code snippet.
|
||||
|
||||
```html
|
||||
import buttonTemplate from './template.vue'
|
||||
```
|
||||
|
||||
* Create a template function which returns an object { key: 'template', value: 'importedTemplate' }.
|
||||
|
||||
```html
|
||||
cTemplate: function(e) {
|
||||
return {
|
||||
template: buttonTemplate
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
* Template function is assigned to the template property of the Syncfusion Vue component.
|
||||
|
||||
Refer to the following code snippet of App.vue file.
|
||||
|
||||
```html
|
||||
// App.vue
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-grid ref="grid" :dataSource="ds">
|
||||
<e-columns>
|
||||
<e-column headerText='Ship Country' width='150' textAlign='Center' :template='cTemplate' />
|
||||
<e-column field="OrderID" headerText="Order ID" width=120 textAlign="Right" />
|
||||
<e-column field="CustomerName" headerText="Customer Name" width=150 />
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
|
||||
import { empData } from "./data";
|
||||
import buttonTemplate from "./template.vue";
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ds: empData,
|
||||
cTemplate: function(e) {
|
||||
return {
|
||||
template: buttonTemplate
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
## Vue.component()
|
||||
|
||||
The template is initialized with `Vue.component()` where template is provided with the template option.
|
||||
* The template is initialized with `Vue.component()` where template is provided with the template option.
|
||||
|
||||
* Pass arguments as properties of a data object.
|
||||
|
||||
```html
|
||||
var demoTemplate = Vue.component("demo", {
|
||||
template: "<ejs-button :content="`${data.ShipCountry}`"></ejs-button>",
|
||||
data() {
|
||||
return {
|
||||
data: {}
|
||||
};
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
* Create a template function which returns an object { key: 'template', value: 'importedTemplate' }.
|
||||
|
||||
```html
|
||||
cTemplate: function(e) {
|
||||
return {
|
||||
template: demoTemplate
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
* Template function is assigned to the template property of the Syncfusion Vue component.
|
||||
|
||||
* Refer to the following code snippet of App.vue file.
|
||||
|
||||
```html
|
||||
// App.vue
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-grid ref="grid" :dataSource="ds">
|
||||
<e-columns>
|
||||
<e-column headerText='Ship Country' width='150' textAlign='Center' :template='cTemplate' />
|
||||
<e-column field="OrderID" headerText="Order ID" width=120 textAlign="Right" />
|
||||
<e-column field="CustomerName" headerText="Customer Name" width=150 />
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
|
||||
import { empData } from "./data";
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
|
||||
var demoTemplate = Vue.component("demo", {
|
||||
template: "<ejs-button>{{data.ShipCountry}}</ejs-button>",
|
||||
data() {
|
||||
return {
|
||||
data: {}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ds: empData,
|
||||
cTemplate: function(e) {
|
||||
return {
|
||||
template: demoTemplate
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
## Template sample
|
||||
|
||||
{% tab template="common/template", isDefaultActive=true %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="grid">
|
||||
<ejs-grid ref="grid" :dataSource="ds">
|
||||
<e-columns>
|
||||
<e-column field="OrderID" headerText="Order ID" width=120 textAlign="Right" />
|
||||
<e-column field="CustomerName" headerText="Customer Name" width=150 />
|
||||
<e-column field="ShipCountry" headerText="Ship Country" width=150 :template='cTemplate' />
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
|
||||
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
Vue.use(ButtonPlugin);
|
||||
|
||||
|
||||
var demoTemplate = Vue.component("demo", {
|
||||
template: '<ejs-button :content="`${data.ShipCountry}`"></ejs-button>',
|
||||
data() {
|
||||
return {
|
||||
data: {}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var empData = [{
|
||||
OrderID: 10248,
|
||||
ShipCountry: "France",
|
||||
CustomerName: "Paul Henriot"
|
||||
},
|
||||
{
|
||||
OrderID: 10249,
|
||||
ShipCountry: "Germany",
|
||||
CustomerName: "Karin Josephs"
|
||||
},
|
||||
{
|
||||
OrderID: 10250,
|
||||
ShipCountry: "Brazil",
|
||||
CustomerName: "Mario Pontes"
|
||||
},
|
||||
{
|
||||
OrderID: 10251,
|
||||
ShipCountry: "France",
|
||||
CustomerName: "Mary Saveley"
|
||||
}];
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ds: empData,
|
||||
cTemplate: function (e) {
|
||||
return {
|
||||
template: demoTemplate
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
|
||||
#app {
|
||||
color: #008cff;
|
||||
height: 40px;
|
||||
left: 45%;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
|
@ -0,0 +1,46 @@
|
|||
# Deployment
|
||||
|
||||
## CDN
|
||||
|
||||
The CDN links are provided individually for all the scripts and style sheets of Syncfusion Vue UI components.
|
||||
|
||||
The CDN link is provided to following files in the package
|
||||
|
||||
1. UMD Files
|
||||
2. CSS Files
|
||||
|
||||
_The latest minified versions of all UMD, Global and CSS files are available on CDN:_
|
||||
|
||||
* **`https://cdn.syncfusion.com/ej2/PACKAGENAME/dist/PACKAGENAME.umd.min.js`**
|
||||
* **`https://cdn.syncfusion.com/ej2/PACKAGENAME/styles/THEMENAME.css`**
|
||||
|
||||
For example
|
||||
|
||||
* [https://cdn.syncfusion.com/ej2/ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js](https://cdn.syncfusion.com/ej2/ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js)
|
||||
* [https://cdn.syncfusion.com/ej2/ej2-vue-inputs/styles/material.css](https://cdn.syncfusion.com/ej2/ej2-vue-inputs/styles/material.css)
|
||||
|
||||
_Versioned files are also available on CDN._
|
||||
|
||||
* **`https://cdn.syncfusion.com/ej2/VERSION/PACKAGENAME/dist/PACKAGENAME.umd.min.js`**
|
||||
* **`https://cdn.syncfusion.com/ej2/VERSION/PACKAGENAME/styles/THEMENAME.css`**
|
||||
|
||||
For example
|
||||
|
||||
* [https://cdn.syncfusion.com/ej2/1.0.18/ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js](https://cdn.syncfusion.com/ej2/1.0.18/ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js)
|
||||
* [https://cdn.syncfusion.com/ej2/1.0.18/ej2-vue-inputs/styles/material.css](https://cdn.syncfusion.com/ej2/1.0.18/ej2-vue-inputs/styles/material.css)
|
||||
|
||||
## Packages
|
||||
|
||||
Syncfusion Vue packages is published and available in public
|
||||
[npm](https://www.npmjs.com/search?q=ej2-vue&page=1&ranking=optimal) registry.
|
||||
|
||||
### Anatomy of NPM Packages
|
||||
|
||||
Syncfusion Vue UI components are shipped as npm packages. Following table explains the purpose of each file available in the package.
|
||||
|
||||
| Files | Purpose |
|
||||
|---------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| `dist/es6` | This folder contains the ES6 formatted JS file of the package. |
|
||||
| `dist/<packagename>.umd.min.js` `dist/<packagename>.umd.js` | For applications using AMD or Common JS based module loader can be utilize these files. |
|
||||
| `src/` | This folder contains the script files in AMD format. You can connect these AMD files as a package in System JS or Require JS. |
|
||||
| `styles/<theme name>.css` `styles/<theme name>.scss` | This folder contains the CSS and SCSS files of the package. ||
|
|
@ -0,0 +1,59 @@
|
|||
<!-- markdownlint-disable MD024 -->
|
||||
# Getting Started with Syncfusion Vue UI Components using direct scripts in a quickstart application
|
||||
|
||||
This article provides a step-by-step introduction to configure Syncfusion Vue UI components (Essential JS 2) and build a simple HTML web application.
|
||||
|
||||
## Getting started by using CDN link for script and style references
|
||||
|
||||
### Prerequisites
|
||||
|
||||
* [Visual Studio Code](https://code.visualstudio.com/)
|
||||
|
||||
### Configure Syncfusion JavaScript (ES5) control in the application
|
||||
|
||||
1. Create an app folder `quickstart` for the Syncfusion controls and open it in the Visual Studio Code.
|
||||
2. The below hosted CDN links contains all Syncfusion Vue (ES) components resources in a single file.
|
||||
|
||||
> Scripts: `https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js`
|
||||
>
|
||||
> Styles: `https://cdn.syncfusion.com/ej2/material.css`
|
||||
3. Create an HTML file `~/quickstart/index.html` and add the below Syncfusion and [Vue] (https://vuejs.org/v2/guide/installation.html#CDN) CDN link references. Now, the `Button` element and register the `Syncfusion Vue Button` component in the index.html by using the following code.
|
||||
|
||||
{% tab template="common/getting-started-es5", sourceFiles="index.html", skipVue="true" %}
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<title>Syncfusion Vue (ES5) UI Components</title>
|
||||
<!-- Essentail JS2 for Vue (All components Styles) -->
|
||||
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Vue library file-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js" type="text/javascript"></script>
|
||||
<!-- Essential JS 2 for Vue global script -->
|
||||
<script src="https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h2>Syncfusion Vue Button Components</h2>
|
||||
<div id="app">
|
||||
<ejs-button is-primary="true">Button</ejs-button>
|
||||
</div>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
Note : While using Syncfusion Vue components in DOM templates, camelCased property (isPrimary) names need to specify in the kebab-cased (is-primary) equivalents.
|
||||
|
||||
4. Finally, run the `~/quickstart/index.html` file in the web browser and it will render the Syncfusion Vue Button component.
|
|
@ -0,0 +1,5 @@
|
|||
# Overview
|
||||
|
||||
This document illustrates how to build and run a simple Syncfusion Vue (Essential JS 2) component in web applications.
|
||||
|
||||
* [Getting Started with Syncfusion Vue UI Components and Vue CLI](./vue-cli/)
|
|
@ -0,0 +1,3 @@
|
|||
* [Vue CLI](getting-started/vue-cli.md)
|
||||
* [Vue CLI with SCSS](getting-started/vue-sass.md)
|
||||
* [Direct Scripts](getting-started/direct-scripts.md)
|
|
@ -0,0 +1,144 @@
|
|||
# Getting Started with Syncfusion Vue UI Components and Vue CLI
|
||||
|
||||
You can use [`Vue CLI`](https://github.com/vuejs/vue-cli) to setup your Vue applications.
|
||||
To install Vue CLI, use the following command.
|
||||
|
||||
```bash
|
||||
npm install -g @vue/cli
|
||||
npm install -g @vue/cli-init
|
||||
```
|
||||
|
||||
Start a new project using the following Vue CLI command.
|
||||
|
||||
```bash
|
||||
vue init webpack-simple quickstart
|
||||
|
||||
cd quickstart
|
||||
npm install
|
||||
|
||||
```
|
||||
|
||||
## Adding Syncfusion packages
|
||||
|
||||
All the available Syncfusion Vue packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry.
|
||||
Choose the component to be installed. In this application, the button component is installed.
|
||||
|
||||
To install the button component, use the following command.
|
||||
|
||||
```bash
|
||||
npm install @syncfusion/ej2-vue-buttons --save
|
||||
```
|
||||
|
||||
## Registering Vue component
|
||||
|
||||
The two ways to register the Vue component are:
|
||||
* Vue.use()
|
||||
* Vue.component()
|
||||
|
||||
### Using Vue.use()
|
||||
|
||||
Import the component plugin from the EJ2 Vue package and register it using Vue.use() with component plugin as its argument.
|
||||
|
||||
Refer to the following code snippet.
|
||||
|
||||
```typescript
|
||||
import { ButtonPlugin } from '@syncfuion/ej2-vue-buttons';
|
||||
|
||||
Vue.use(ButtonPlugin);
|
||||
```
|
||||
|
||||
Note : By registering the component plugin in Vue, all child directives can also be globally registered.
|
||||
|
||||
### Using Vue.component()
|
||||
|
||||
Import the component and component plugin from EJ2 Vue package and register it using the Vue.component() with name of component from component plugin and the EJ2 Vue component as its arguments.
|
||||
|
||||
Refer to the following the code snippet.
|
||||
|
||||
```typescript
|
||||
import { ButtonComponent, ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
|
||||
|
||||
Vue.component(ButtonPlugin.name, ButtonComponent);
|
||||
```
|
||||
|
||||
Note: By using the Vue.component(), only the EJ2 Vue component can be registered. The child directives should be registered separately.
|
||||
|
||||
## Creating Vue sample
|
||||
|
||||
Add the EJ2 Vue button to the `<template>` section of the `App.vue` file in src directory using `<ejs-button>`. The content attribute of the button component is provided as name in the data option of the `<script>` section.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<img src="./assets/logo.png">
|
||||
<h1>{{ msg }}</h1>
|
||||
<ejs-button :content="name"></ejs-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
|
||||
|
||||
Vue.use(ButtonPlugin);
|
||||
export default {
|
||||
name: 'app',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Hi EJ2 Components for Vue',
|
||||
name: 'Button'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Adding CSS reference
|
||||
|
||||
Add the styles of the button component to the `<style>` section of the `App.vue` file as follows.
|
||||
|
||||
```html
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
|
||||
</style>
|
||||
```
|
||||
|
||||
## Running the application
|
||||
|
||||
Now, run the `npm run dev` command in the console to build your application and open it in the browser.
|
||||
|
||||
{% tab template="common/default", isDefaultActive=true %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-button :content="name"></ejs-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
|
||||
|
||||
Vue.use(ButtonPlugin);
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
msg: 'Hi EJ2 Components for Vue',
|
||||
name: 'Button'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
|
||||
#app {
|
||||
color: #008cff;
|
||||
height: 40px;
|
||||
left: 45%;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
|
@ -0,0 +1,166 @@
|
|||
# Overview
|
||||
|
||||
Vue CLI 3 is a complete rewrite of the previous version of the Vue command line interface tool and comes with a set of new features which makes Vue development and the management of Vue projects a lot easier.
|
||||
|
||||
# Getting Started with Syncfusion Vue UI Components and Vue CLI
|
||||
|
||||
You can use [`Vue CLI`](https://github.com/vuejs/vue-cli) to setup your Vue applications.
|
||||
At first it is mostly recommended to uninstall the old Vue CLI package from your system.
|
||||
|
||||
```bash
|
||||
npm uninstall vue-cli -g
|
||||
```
|
||||
Then install Vue CLI 3, use the following commands.
|
||||
|
||||
```bash
|
||||
npm install -g @vue/cli
|
||||
npm install -g @vue/cli-init
|
||||
```
|
||||
|
||||
Start a new project using the following Vue CLI command.
|
||||
|
||||
```bash
|
||||
vue create quickstart
|
||||
|
||||
cd quickstart
|
||||
npm install
|
||||
|
||||
```
|
||||
|
||||
Then we’ll be prompted with the option to pick a default preset or to manually select features. Using the arrow keys, we can highlight our selection. But now we can select the `default`, then hit enter. If you wish to select manually, please use this [`vue-create`](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) link for references.
|
||||
|
||||
```bash
|
||||
cd quickstart
|
||||
npm install
|
||||
|
||||
```
|
||||
|
||||
## Adding Syncfusion packages
|
||||
|
||||
All the available Syncfusion Vue packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry.
|
||||
Choose the component to be installed. In this application, the calendar component is installed.
|
||||
|
||||
To install the calendar component, use the following command.
|
||||
|
||||
```bash
|
||||
npm install @syncfusion/ej2-vue-calendars --save
|
||||
```
|
||||
|
||||
## Registering Vue component
|
||||
|
||||
The two ways to register the Vue component are:
|
||||
* Vue.use()
|
||||
* Vue.component()
|
||||
|
||||
### Using Vue.use()
|
||||
|
||||
Import the component plugin from the EJ2 Vue package and register it using Vue.use() with component plugin as its argument.
|
||||
|
||||
Refer to the following code snippet.
|
||||
|
||||
```typescript
|
||||
import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
|
||||
|
||||
Vue.use(CalendarPlugin);
|
||||
```
|
||||
|
||||
Note : By registering the component plugin in Vue, all child directives can also be globally registered.
|
||||
|
||||
### Using Vue.component()
|
||||
|
||||
Import the component and component plugin from EJ2 Vue package and register it using the Vue.component() with name of component from component plugin and the EJ2 Vue component as its arguments.
|
||||
|
||||
Refer to the following the code snippet.
|
||||
|
||||
```typescript
|
||||
import { CalendarComponent, CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
|
||||
|
||||
Vue.component(CalendarComponent, CalendarPlugin);
|
||||
```
|
||||
|
||||
Note: By using the Vue.component(), only the EJ2 Vue component can be registered. The child directives should be registered separately.
|
||||
|
||||
## Creating Vue sample
|
||||
|
||||
Add the EJ2 Vue calendar to the `<template>` section of the `App.vue` file or inside components in src directory using `<ejs-calendar>`. The content attribute of the calendar component is provided as name in the data option of the `<script>` section.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<img src="./assets/logo.png">
|
||||
<h1>{{ msg }}</h1>
|
||||
<ejs-calendar ></ejs-calendar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
|
||||
|
||||
Vue.use(CalendarPlugin);
|
||||
export default {
|
||||
name: 'app',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Hi EJ2 Components for Vue',
|
||||
name: 'Calendar'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Adding CSS reference
|
||||
|
||||
Add the styles of calendar component to the `<style>` section of the `App.vue` file as follows.
|
||||
|
||||
```html
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
|
||||
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
|
||||
</style>
|
||||
```
|
||||
|
||||
## Running the application
|
||||
|
||||
Now, run the `npm run serve` command in the console to build your application and open it in the browser.
|
||||
|
||||
{% tab template="common/cli3", isDefaultActive=true %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<img src="./assets/logo.png">
|
||||
<h1>{{ msg }}</h1>
|
||||
<ejs-calendar ></ejs-calendar>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
|
||||
|
||||
Vue.use(CalendarPlugin);
|
||||
export default {
|
||||
name: 'app',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Hi EJ2 Components for Vue',
|
||||
name: 'Calendar'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
|
||||
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
|
||||
#app {
|
||||
color: #008cff;
|
||||
height: 40px;
|
||||
left: 45%;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
|
@ -0,0 +1,225 @@
|
|||
# Getting Started with Syncfusion Vue UI Components and Vue CLI
|
||||
|
||||
You can use [`Vue CLI`](https://github.com/vuejs/vue-cli) to setup your Vue applications.
|
||||
To install Vue CLI, use the following command.
|
||||
|
||||
```bash
|
||||
npm install -g @vue/cli
|
||||
npm install -g @vue/cli-init
|
||||
```
|
||||
|
||||
Start a new project using the following Vue CLI command.
|
||||
|
||||
```bash
|
||||
vue init webpack-simple quickstart
|
||||
|
||||
cd quickstart
|
||||
npm install
|
||||
|
||||
```
|
||||
|
||||
## Adding Syncfusion packages
|
||||
|
||||
All the available Syncfusion Vue packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry.
|
||||
Choose the component to be installed. In this application, the button component is installed.
|
||||
|
||||
To install the button component, use the following command.
|
||||
|
||||
```bash
|
||||
npm install @syncfusion/ej2-vue-grids --save
|
||||
```
|
||||
|
||||
## Registering Vue component
|
||||
|
||||
The two ways to register the Vue component are:
|
||||
* Vue.use()
|
||||
* Vue.component()
|
||||
|
||||
### Using Vue.use()
|
||||
|
||||
Import the component plugin from the EJ2 Vue package and register it using Vue.use() with component plugin as its argument.
|
||||
|
||||
Refer to the following code snippet.
|
||||
|
||||
```typescript
|
||||
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
```
|
||||
|
||||
Note: By registering the component plugin in Vue, all child directives can also be globally registered.
|
||||
|
||||
### Using Vue.component()
|
||||
|
||||
Import the component and component plugin from EJ2 Vue package and register it using the Vue.component() with name of component from component plugin and the EJ2 Vue component as its arguments.
|
||||
|
||||
Refer to the following the code snippet.
|
||||
|
||||
```typescript
|
||||
import { GridComponent, GridPlugin } from "@syncfusion/ej2-vue-grids";
|
||||
|
||||
Vue.use(GridPlugin.name, GridComponent);
|
||||
```
|
||||
|
||||
Note: By using the Vue.component(), only the EJ2 Vue component can be registered. The child directives should be registered separately.
|
||||
|
||||
## Creating Vue sample
|
||||
|
||||
Add the EJ2 Vue button in the `<template>` section of the `App.vue` file in src directory using `<ejs-button>`. The content attribute of the button component is provided as name in the data option of the `<script>` section.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-grid :dataSource="data" :allowPaging="true" :pageSettings="pageSettings">
|
||||
<e-columns>
|
||||
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
|
||||
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
|
||||
<e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column>
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { GridPlugin, Page, GridComponent } from "@syncfusion/ej2-vue-grids";
|
||||
Vue.use(GridPlugin);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ OrderID: 10248, CustomerID: "VINET", Freight: 32.38 },
|
||||
{ OrderID: 10249, CustomerID: "TOMSP", Freight: 11.61 },
|
||||
{ OrderID: 10250, CustomerID: "HANAR", Freight: 65.83 },
|
||||
{ OrderID: 10251, CustomerID: "VICTE", Freight: 41.34 },
|
||||
{ OrderID: 10252, CustomerID: "SUPRD", Freight: 51.3 },
|
||||
{ OrderID: 10253, CustomerID: "HANAR", Freight: 58.17 },
|
||||
{ OrderID: 10254, CustomerID: "CHOPS", Freight: 22.98 }
|
||||
],
|
||||
pageSettings: { pageSize: 5 }
|
||||
};
|
||||
},
|
||||
provide: {
|
||||
grid: [Page]
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## Adding SCSS reference
|
||||
|
||||
Add the styles of Grid component to the `<style>` section of the `App.vue` file as follows.
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
// syncfusion styles
|
||||
@import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss";
|
||||
</style>
|
||||
```
|
||||
|
||||
## Adding includePaths option
|
||||
|
||||
While using scss files for style reference, you need to configure the `includePaths` in sass-loader options in the `webpack.config.js` like below:
|
||||
|
||||
```ts
|
||||
module: {
|
||||
rules: [
|
||||
....
|
||||
....
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
|
||||
// the "scss" and "sass" values for the lang attribute to the right configs here.
|
||||
'scss': [
|
||||
'vue-style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
includePaths: [
|
||||
path.resolve(__dirname,"./node_modules/@syncfusion")
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
....
|
||||
....
|
||||
}
|
||||
}
|
||||
}
|
||||
....
|
||||
....
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Running the application
|
||||
|
||||
Now, run the `npm run dev` command in the console to build your application and open it in the browser.
|
||||
|
||||
{% tab template="common/sass", isDefaultActive=true %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-grid :dataSource="data" :allowPaging="true" :pageSettings='pageSettings'>
|
||||
<e-columns>
|
||||
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
|
||||
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
|
||||
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
|
||||
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
|
||||
import { data } from "./datasource.js";
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: data,
|
||||
pageSettings: { pageSizes: true, pageSize: 9 }
|
||||
};
|
||||
},
|
||||
provide: {
|
||||
grid: [Page]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// syncfusion styles
|
||||
@import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss";
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## How To Override styles
|
||||
|
||||
In Syncfusion Vue components, you can override control styles by replacing sass variable values like below:
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
|
||||
// SASS Variable override
|
||||
$accent: black;
|
||||
$primary: blue;
|
||||
|
||||
// syncfusion styles
|
||||
@import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.scss";
|
||||
|
||||
</style>
|
||||
```
|
|
@ -0,0 +1,29 @@
|
|||
<!-- markdownlint-disable MD024 -->
|
||||
|
||||
# Installation
|
||||
|
||||
## Install by using npm CLI
|
||||
|
||||
Syncfusion Vue (Essential JS 2) packages are published in [npm](https://www.npmjs.com/search?q=ej2-vue). You can install the necessary packages from npm’s install command. For example, grid package can be installed using the following command.
|
||||
|
||||
```sh
|
||||
npm install @syncfusion/ej2-vue-grids --save
|
||||
```
|
||||
|
||||
## Install by using package.json
|
||||
|
||||
1. Add the Syncfusion Vue (Essential JS 2) package references in the `dependencies` of `~/package.json` file.
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@syncfusion/ej2-vue-grids": "*",
|
||||
"@syncfusion/ej2-vue-charts": "*"
|
||||
}
|
||||
}
|
||||
```
|
||||
> The `*` indicates the latest version of npm package. Refer the [documentation](https://docs.npmjs.com/misc/semver#versions) for more details about npm versioning.
|
||||
|
||||
2. Now, open the command prompt and run the `npm install` command line. This will install all npm dependencies in a single command line.
|
||||
|
||||
> Refer the [documentation](https://docs.npmjs.com/files/package.json) for more details about npm package.json
|
|
@ -0,0 +1,29 @@
|
|||
# Syncfusion Vue UI Components (Essential JS 2)
|
||||
|
||||
Syncfusion Vue is a modern UI Components library that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It also includes complete support for Angular, React, ASP.NET MVC and ASP.NET Core frameworks.
|
||||
|
||||
## How to best read this user guide
|
||||
|
||||
* The best way to get started would be to read the "Getting Started" section
|
||||
of the documentation for the component that you would like to start using first.
|
||||
The "Getting Started" guide gives just enough information that you need to know
|
||||
before starting to write code. This is the only section that we recommend reading
|
||||
end-to-end before starting to write code, all other information can be referred as needed.
|
||||
|
||||
* Now that you are familiar with the basics of using the component, the next
|
||||
step would be to start integrating the component into your application.
|
||||
A good starting point would be to refer to the code snippets in the
|
||||
[online sample browser](http://ej2.syncfusion.com/vue/demos/) which contains
|
||||
hundreds of code samples, it is very likely that you will find a code sample that
|
||||
resembles your intended usage scenario.
|
||||
|
||||
* Another valuable resource is the API reference which provides detailed information
|
||||
on the object hierarchy as well as the settings available on every object.
|
||||
|
||||
## Getting Help
|
||||
|
||||
If you are still not able to find the information that you are looking for at the
|
||||
self-help resources mentioned above then please contact us by creating a support
|
||||
ticket in our support site, or ask your query in StackOverflow with tag `syncfusion-ej2`.
|
||||
|
||||
>Note: Syncfusion does not collect any kind of information when our components are used in customer applications.
|
|
@ -0,0 +1,138 @@
|
|||
# Right-To-Left
|
||||
|
||||
Right To Left (RTL) can be enabled for Syncfusion Vue UI components by calling `enableRtl` with
|
||||
`true`. This will render all the Syncfusion Vue components in the right to left direction. Find the code snippet
|
||||
for this below.
|
||||
|
||||
{% tab template="common/right-to-left" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-grid :dataSource='data' locale='ar-AE' :allowPaging='true' :pageSettings='pageOptions'>
|
||||
<e-columns>
|
||||
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
|
||||
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
|
||||
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
|
||||
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { L10n, setCulture, enableRtl } from '@syncfusion/ej2-base';
|
||||
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
|
||||
import { data } from './datasource.js';
|
||||
|
||||
setCulture('ar-AE');
|
||||
// Enables Right to left alignment for all components
|
||||
enableRtl(true);
|
||||
L10n.load({
|
||||
'ar-AE': {
|
||||
'grid': {
|
||||
'EmptyRecord': 'لا سجلات لعرضها',
|
||||
'EmptyDataSourceError': 'يجب أن يكون مصدر البيانات فارغة في التحميل الأولي منذ يتم إنشاء الأعمدة من مصدر البيانات في أوتوجينيراتد عمود الشبكة'
|
||||
},
|
||||
'pager':{
|
||||
'currentPageInfo': '{0} من {1} صفحة',
|
||||
'totalItemsInfo': '({0} العناصر)',
|
||||
'firstPageTooltip': 'انتقل إلى الصفحة الأولى',
|
||||
'lastPageTooltip': 'انتقل إلى الصفحة الأخيرة',
|
||||
'nextPageTooltip': 'انتقل إلى الصفحة التالية',
|
||||
'previousPageTooltip': 'انتقل إلى الصفحة السابقة',
|
||||
'nextPagerTooltip': 'الذهاب إلى بيجر المقبل',
|
||||
'previousPagerTooltip': 'الذهاب إلى بيجر السابقة'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: data,
|
||||
pageOptions: { pageSize: 7 }
|
||||
};
|
||||
},
|
||||
provide: {
|
||||
grid: [Page]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
## Enable RTL to individual component
|
||||
|
||||
To enable the RTL to an individual component, set the `enableRtl` property directly in its model options. For illustration, the `enableRtl` is added to the Grid component in following code snippet.
|
||||
|
||||
{% tab template="common/right-to-left" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-grid :dataSource='data' locale='ar-AE' :enableRtl='true' :allowPaging='true' :pageSettings='pageOptions'>
|
||||
<e-columns>
|
||||
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
|
||||
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
|
||||
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
|
||||
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { L10n, setCulture } from '@syncfusion/ej2-base';
|
||||
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
|
||||
import { data } from './datasource.js';
|
||||
|
||||
setCulture('ar-AE');
|
||||
// Enables Right to left alignment for all components
|
||||
L10n.load({
|
||||
'ar-AE': {
|
||||
'grid': {
|
||||
'EmptyRecord': 'لا سجلات لعرضها',
|
||||
'EmptyDataSourceError': 'يجب أن يكون مصدر البيانات فارغة في التحميل الأولي منذ يتم إنشاء الأعمدة من مصدر البيانات في أوتوجينيراتد عمود الشبكة'
|
||||
},
|
||||
'pager':{
|
||||
'currentPageInfo': '{0} من {1} صفحة',
|
||||
'totalItemsInfo': '({0} العناصر)',
|
||||
'firstPageTooltip': 'انتقل إلى الصفحة الأولى',
|
||||
'lastPageTooltip': 'انتقل إلى الصفحة الأخيرة',
|
||||
'nextPageTooltip': 'انتقل إلى الصفحة التالية',
|
||||
'previousPageTooltip': 'انتقل إلى الصفحة السابقة',
|
||||
'nextPagerTooltip': 'الذهاب إلى بيجر المقبل',
|
||||
'previousPagerTooltip': 'الذهاب إلى بيجر السابقة'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: data,
|
||||
pageOptions: { pageSize: 7 }
|
||||
};
|
||||
},
|
||||
provide: {
|
||||
grid: [Page]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
{% endtab %}
|
|
@ -0,0 +1,46 @@
|
|||
# State Persistence
|
||||
|
||||
Syncfusion Vue UI components have support for persisting its state across page refreshes or navigation. To
|
||||
enable this feature, set `enablePersistence` property as true to the required component. This will store
|
||||
the component’s state in browser’s `localStorage` object on page `unload` event. For example, we have
|
||||
enabled persistence to grid component in the following code.
|
||||
|
||||
{% tab template="common/right-to-left" %}
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<ejs-grid :dataSource='data' :allowSorting='true' :enablePersistence='true' :allowPaging='true' :allowFiltering='true' height='210px'>
|
||||
<e-columns>
|
||||
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
|
||||
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
|
||||
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
|
||||
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
|
||||
</e-columns>
|
||||
</ejs-grid>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import { GridPlugin, Sort, Page, Filter } from "@syncfusion/ej2-vue-grids";
|
||||
import { data } from './datasource.js';
|
||||
|
||||
Vue.use(GridPlugin);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: data
|
||||
};
|
||||
},
|
||||
provide: {
|
||||
grid: [Sort, Page, Filter]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
|
||||
</style>
|
||||
```
|
||||
|
||||
{% endtab %}
|
|
@ -0,0 +1,7 @@
|
|||
* [Introduction](introduction.md)
|
||||
* [Installation](installation.md)
|
||||
* [Deployment](deployment.md)
|
||||
* [Right-To-Left](right-to-left.md)
|
||||
* [State Persistence](state-persistence.md)
|
||||
* [Accessibility](accessibility.md)
|
||||
* [Browser Compatibility](browser.md)
|
Двоичные данные
src/common/visual-studio-code-integration/images/CreateProjectPalette.png
Normal file
После Ширина: | Высота: | Размер: 2.7 KiB |
После Ширина: | Высота: | Размер: 32 KiB |
Двоичные данные
src/common/visual-studio-code-integration/images/ProjectLocationName.png
Normal file
После Ширина: | Высота: | Размер: 52 KiB |
После Ширина: | Высота: | Размер: 56 KiB |
После Ширина: | Высота: | Размер: 86 KiB |
После Ширина: | Высота: | Размер: 37 KiB |
После Ширина: | Высота: | Размер: 65 KiB |
После Ширина: | Высота: | Размер: 3.0 KiB |
После Ширина: | Высота: | Размер: 31 KiB |
После Ширина: | Высота: | Размер: 34 KiB |
|
@ -0,0 +1,9 @@
|
|||
# Visual Studio Code Integration
|
||||
|
||||
## Overview
|
||||
|
||||
The Syncfusion Essential Studio Web extension for Visual Studio Code allows you to use the Syncfusion JavaScript components(React, Angular, and Vue) easily by configuring the Syncfusion NPM packages and themes.
|
||||
|
||||
The Syncfusion Web Extension provides the following support in Visual Studio Code:
|
||||
|
||||
[Project-Template](https://help.syncfusion.com/extension/javascript-extension/visual-studio-code/create-project): Creates Syncfusion Web applications by adding the required Syncfusion JavaScript components.
|
|
@ -0,0 +1,3 @@
|
|||
* [Overview](visual-studio-code-integration/overview.md)
|
||||
* [Download and Installation](visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md)
|
||||
* [Create Project](visual-studio-code-integration/visual-studio-code-extensions/create-project.md)
|
|
@ -0,0 +1,46 @@
|
|||
# Visual Studio Code Extensions
|
||||
|
||||
## Create project
|
||||
|
||||
Syncfusion provides **project templates** for **VisualStudio Code** to create Syncfusion Web applications. Syncfusion Web Project template creates applications with the selected Framework(React, Angular, and Vue), required Syncfusion NPM packages, component render code for the Grid, Chart, Scheduler components, and the style for making development easier with Syncfusion components.
|
||||
|
||||
> The Syncfusion Visual Studio Code project template provides support for Web project templates from v18.3.0.47.
|
||||
|
||||
The following steps help you create **Syncfusion Web Applications** through the **Visual Studio Code:**
|
||||
|
||||
1. In Visual Studio Code, open the command palette by pressing **Ctrl+Shift+P**. The Visual Studio Code palette opens, search the word **Syncfusion**, so you can get the templates provided.
|
||||
|
||||
![CreateProjectPalette](../images/CreateProjectPalette.png)
|
||||
|
||||
2. Select Syncfusion Web Template Studio: Launch and then press enter, Template Studio wizard for configuring the Syncfusion Web app will appear. Provide the require Project Name and Path to create the new Syncfusion Web application along with any one of the Framework(React, Angular, and Vue).
|
||||
|
||||
![ProjectLocation](../images/ProjectLocationName.png)
|
||||
|
||||
3. Click either **Next** or the **Framework** tab, and the Framework types will be appears. Choose any one of the Framework:
|
||||
* React
|
||||
* Angular
|
||||
* Vue
|
||||
|
||||
![Framework](../images/frameworktype.png)
|
||||
|
||||
4. Click either Next or the Configuration tab, and the Configuration section will be loaded. Choose the preferred theme and then click Create. The project will be created.
|
||||
|
||||
![Themes](../images/Themes.png)
|
||||
|
||||
5. The created Syncfusion Web App is configured with the Syncfusion NPM packages, styles, and the component render code for the Syncfusion component added.
|
||||
|
||||
![NPM Packages](../images/vue-npm-install.png)
|
||||
|
||||
![Styles](../images/vue-styles.png)
|
||||
|
||||
![Components](../images/vue-components.png)
|
||||
|
||||
## Run the application
|
||||
|
||||
1. Click on **F5** or navigate to **Debug>Start debugging**
|
||||
|
||||
![Run](../images/run.png)
|
||||
|
||||
2. After compilation process completed, open the local host link in browser to see the output.
|
||||
|
||||
![Output](../images/vue-compilation.png)
|
|
@ -0,0 +1,51 @@
|
|||
# Download and Installation
|
||||
|
||||
Syncfusion publishes the Visual Studio Code extension in [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Angular-VSCode-Extensions). You can either install it from Visual Studio Code or download and install it from the Visual Studio Code marketplace.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
The following prerequisites software needs to be installed for the Syncfusion Web extension installation and for creating the Syncfusion Web applications along with any one of the Framework(React, Angular, and Vue).
|
||||
|
||||
* [Visual Studio Code](https://code.visualstudio.com/download)
|
||||
|
||||
> The minimum version of the Visual Studio Code is 1.38.0 to use the Syncfusion Web Extension.
|
||||
|
||||
* [C# Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)
|
||||
|
||||
* [Node.js](https://nodejs.org/en/download/)
|
||||
|
||||
## Install through the Visual Studio Code Extensions
|
||||
|
||||
The following steps explain how to install the Syncfusion Web extensions from Visual Studio Code Extensions.
|
||||
|
||||
1. Open Visual Studio Code.
|
||||
|
||||
2. Go to **View > Extensions**, and open Manage Extensions.
|
||||
|
||||
3. Type **“Syncfusion Web** in the search box.
|
||||
|
||||
![Extension](../images/Extension.png)
|
||||
|
||||
4. Click the Install button on the **"Web VSCode Extensions - Syncfusion"** extension.
|
||||
|
||||
5. After the installation, reload the Visual Studio Code using the **Reload Required** in Visual Studio Code palette.
|
||||
|
||||
6. Now, use the Syncfusion Web extensions from the Visual Studio Code palette.
|
||||
|
||||
![CreateProjectPalette](../images/CreateProjectPalette.png)
|
||||
|
||||
## Install from the Visual Studio Code Marketplace
|
||||
|
||||
The following steps explain how to download Syncfusion Web applications from the Visual Studio Code Marketplace and install them.
|
||||
|
||||
1. Open the [Syncfusion Web Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions)
|
||||
|
||||
2. Click Install from Visual Studio Code Marketplace. The browser opens the popup with the information like **“Open Visual Studio Code”**. Click Open Visual Studio Code, then [Syncfusion Web Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Angular-VSCode-Extensions) will open in Visual Studio Code.
|
||||
|
||||
3. Click the Install button in the **"Web VSCode Extensions - Syncfusion"** extension.
|
||||
|
||||
4. After the installation, reload the Visual Studio Code using the Reload Required in Visual Studio Code palette.
|
||||
|
||||
5. Now, use the Syncfusion Web extensions from the Visual Studio Code palette.
|
||||
|
||||
![CreateProjectPalette](../images/CreateProjectPalette.png)
|