v25.1.35 is released
This commit is contained in:
pipeline
Родитель
4d55aa3b92
Коммит
aec0ef138e
103
README.md
103
README.md
|
|
@ -1,104 +1,25 @@
|
|||
# JavaScript Sample Browser
|
||||
# Syncfusion JavaScript Control Demo Samples
|
||||
|
||||
## Adding New Sample
|
||||
Welcome to the demo samples repository for Syncfusion JavaScript Controls! This repository contains a collection of sample applications showcasing the usage of various Syncfusion Controls in a JavaScript environment.
|
||||
|
||||
Create your new folder in 'src' location and name the folder as control name. Example: “button” or "list-view".
|
||||
## Prerequisites
|
||||
|
||||
Add your sample order in the `src/common/sampleOrder.json` with corresponding category.
|
||||
- [Node.js](https://nodejs.org/en) - `v16+`
|
||||
|
||||
**Note:** Do not use whitespace at any cause in the folder’s name. Use “-” instead of space.
|
||||
## Run the samples
|
||||
|
||||
To run the sample applications locally, follow these steps
|
||||
|
||||
### Configure the folder and sample
|
||||
|
||||
Create the “sample.json” file inside of your control folder. Create your sample html and js file in same folder also the html and js files should have the same names.
|
||||
|
||||
**Note:** Do not use whitespace at any cause in the file’s name. Use “-” instead of space.
|
||||
|
||||
|
||||
### Configure Sample JSON
|
||||
|
||||
Configure your sample json file as like below code snippet.
|
||||
1. Install the required dependencies using npm
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
{
|
||||
"name": "Grid",
|
||||
"directory": "grid",
|
||||
"category": "Grid",
|
||||
"samples": [
|
||||
{ "url": "localdata", "name": "Local Data", "category": "Data Binding" },
|
||||
{ "url": "remotedata", "name": "Remote Data", "category": "Data Binding" },
|
||||
{ "url": "autowrap", "name": "AutoWrap Column Cells", "category": "Columns" },
|
||||
{ "url": "showhide", "name": "Show or Hide Column", "category": "Columns" }
|
||||
],
|
||||
"dataSourcePath": "src/grid/datasource.js"
|
||||
}
|
||||
```
|
||||
**Note:** To exculde a sample in the device you need to set `hideOnDevice` as true for the sample json file.
|
||||
|
||||
**Fields Description:**
|
||||
2. Start the development server using gulp
|
||||
|
||||
* _name :_ It can be any string that you want to show a component name.
|
||||
|
||||
* _directory :_ Specifies that your sample's directory name.
|
||||
|
||||
* _category :_ Specify that your sample comes under which category.
|
||||
|
||||
* _dataSourcePath :_ Specify that your data source file Path (Optional).
|
||||
|
||||
* _samples :_ Specify array of samples in your control.
|
||||
|
||||
* _samples.url :_ specifies the file name without extension.
|
||||
|
||||
* _samples.name :_ It can be any string that you want to show a sample name.
|
||||
|
||||
* _samples.category :_ Specify that your sample comes under which category.
|
||||
|
||||
|
||||
## Adding datasource components
|
||||
|
||||
To add datasource file for the component, you need to include the `dataSourcePath` option which need to map the datasource file path in the component's sample.json.
|
||||
|
||||
refer the below link for config
|
||||
|
||||
https://github.com/syncfusion/ej2-javascript-samples/blob/master/src/grid/sample.json#L7
|
||||
|
||||
The sample datasource file need to store the json in window variable.
|
||||
|
||||
Each component's datasource window variable name must be unique.
|
||||
|
||||
For example datasource for grid must be stored as `window.gridData`.
|
||||
|
||||
Refer the below datasource file for further reference
|
||||
|
||||
https://github.com/syncfusion/ej2-javascript-samples/blob/master/src/grid/data-source.js
|
||||
|
||||
**Note:** Each component should include one datasource file only.
|
||||
|
||||
## Run the sample browser
|
||||
|
||||
We can run the sample browser with two commands
|
||||
|
||||
1. **gulp _serve_** – run the sample browser alone.
|
||||
2. **gulp _watch_** – run the sample browser and monitor typescript as well. This will help at development time. If any changes detect means it will automatically compile and browser will reloaded.
|
||||
|
||||
```
|
||||
```bash
|
||||
gulp serve
|
||||
```
|
||||
|
||||
|
||||
**Access URLs:**
|
||||
|
||||
Local URL is works only in your machine.
|
||||
|
||||
```
|
||||
http://localhost:3000
|
||||
```
|
||||
|
||||
External URL is works in all locally connected LAN. (You can use to see sample browser in mobile).
|
||||
|
||||
```
|
||||
http://your-ip-address:3000
|
||||
```
|
||||
|
||||
**Note:** Here, The mentioned IP is your local machine IP Address.
|
||||
3. Open your web browser and navigate to the specified localhost address to view the samples.
|
||||
|
|
@ -111,6 +111,7 @@
|
|||
"common",
|
||||
"sys",
|
||||
"appbar",
|
||||
"textarea",
|
||||
null
|
||||
]
|
||||
}
|
||||
84
index.html
84
index.html
|
|
@ -17,10 +17,9 @@
|
|||
<!-- End Google Tag Manager -->
|
||||
<meta charset="utf-8" />
|
||||
<title>Demos, Examples of Syncfusion JavaScript (ES5) UI Controls</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description"
|
||||
content="Explore and learn Syncfusion JavaScript (ES5) UI controls library using large collection of feature-wise examples for each components." />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="author" content="Syncfusion" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
<link rel="manifest" href="./manifest.webmanifest">
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<div hidden id="sync-analytics" data-queue="EJ2 - Javascript (ES5) - Demos"></div>
|
||||
<aside id='left-sidebar'>
|
||||
<aside id='left-sidebar' role="complementary" aria-labelledby="sb-toggle-left">
|
||||
<div class='sb-left-pane e-view'>
|
||||
<div class="sb-left-pane-header">
|
||||
<div class="sb-header-top">
|
||||
|
|
@ -88,12 +87,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-home" onclick="document.getElementById('sb-home').click()">
|
||||
<div class="sb-home" role="button" tabindex="0" aria-label="Essential JS2 home page" onclick="document.getElementById('sb-home').click()">
|
||||
<div class="sb-home-link sb-icons sb-icon-Home"></div>
|
||||
<div class="sb-home-text">
|
||||
<span>HOME</span>
|
||||
</div>
|
||||
<a id="sb-home" href="https://ej2.syncfusion.com/home/javascript.html" aria-label="Sample home page"></a>
|
||||
<a id="sb-home" href="https://ej2.syncfusion.com/home/javascript.html" aria-label="Essential JS2 home page"></a>
|
||||
</div>
|
||||
<div class='sb-control-navigation'>
|
||||
<div id="controlTree" class='e-view'></div>
|
||||
|
|
@ -135,12 +134,12 @@
|
|||
<div class='sb-header-item sb-table-cell'>
|
||||
<div id="sb-toggle-left" role="button" tabindex="0"
|
||||
class="sb-slide-nav sb-icons toggle-active sb-icon-Hamburger"
|
||||
aria-label="toggle all controls navigation" title='toggle leftpane'></div>
|
||||
aria-label="Toggle all controls navigation" aria-controls="left-sidebar" title='toggle left pane'></div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell'>
|
||||
<div id='sb-header-text' class='e-sb-header-text'>
|
||||
<span class='sb-header-text-left'>Essential Studio for</span>
|
||||
<span class='sb-header-text-right'>JavaScript (ES5)</span>
|
||||
<span class='sb-header-text-right' role="button" tabindex="0">JavaScript (ES5)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell sb-lang-toggler-wrapper'>
|
||||
|
|
@ -161,7 +160,7 @@
|
|||
<span class="sb-header-text-left">CHOOSE THEME</span>
|
||||
</div>
|
||||
<div class="sb-theme-switcher-wrapper">
|
||||
<span id="sb-theme-switcher" class="sb-theme-switch sb-icons sb-icon-Dropdown"></span>
|
||||
<span id="sb-theme-switcher" class="sb-theme-switch sb-icons sb-icon-Dropdown" role="presentation" aria-label="Theme selection"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,17 +179,17 @@
|
|||
<div class="sb-header-item sb-table-cell sb-header-settings sb-icons"></div>
|
||||
<div class="sb-header-splitter sb-download-splitter"></div>
|
||||
<div class='sb-header-item sb-table-cell sb-download-wrapper'>
|
||||
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank" aria-label="Download Free Trail">
|
||||
<a href='https://www.syncfusion.com/downloads?tag=es-seo-ej2-javascript-es5-demo-menu-trail' target="_blank" aria-label="Free Trail (Opens in a new window)">
|
||||
<button id='download-now' class='sb-download-btn'>
|
||||
<span class='sb-download-text'>FREE TRIAL</span>
|
||||
</button>
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/search?q=ej2-javascript' target="_blank" aria-label="Install NPM">
|
||||
<!-- <a href='https://www.npmjs.com/search?q=ej2-javascript' target="_blank" aria-label="Install NPM">
|
||||
<button class='sb-npm-btn'>
|
||||
<img class="npm-svg" src="styles/images/NPM.svg" alt="npm icon"><span
|
||||
class="doc-npm-link">Install NPM</span>
|
||||
</button>
|
||||
</a>
|
||||
</a> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -199,6 +198,9 @@
|
|||
<div id='sb-switcher-popup' role='navigation' class='sb-switch-popup'>
|
||||
<ul id='switch-sb' role="list">
|
||||
<li class='sb-current' role="listiem">JavaScript (ES5)</li>
|
||||
<li>
|
||||
<a id='nextjs'>Next.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id='angular'>Angular</a>
|
||||
</li>
|
||||
|
|
@ -384,8 +386,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class='sb-desktop-wrapper'>
|
||||
<div id='component-name' role='header' class='sb-component-name sb-rightpane-padding'>
|
||||
<h1 class='sb-sample-text' role="heading" aria-level="1">Chart</h1>
|
||||
<div id='component-name' class='sb-component-name sb-rightpane-padding'>
|
||||
<h1 class='sb-sample-text' aria-level="1" role="heading">Data Grid</h1>
|
||||
</div>
|
||||
<div id='sample-bread-crumb' class='sb-bread-crumb sb-rightpane-padding'>
|
||||
<div class='sb-bread-crumb-text'>
|
||||
|
|
@ -396,8 +398,7 @@
|
|||
<div class='crumb-sample '></div>
|
||||
</div>
|
||||
|
||||
<a id="sb-home" href="https://ej2.syncfusion.com/home/javascript.html" aria-label="Sample home page"></a>
|
||||
</div>
|
||||
|
||||
<div class='sb-action-description sb-rightpane-padding'></div>
|
||||
<div class='sb-content-tab' id='content-tab'>
|
||||
<div id="sb-content" class='sb-content-section'>
|
||||
|
|
@ -425,20 +426,6 @@
|
|||
<div>
|
||||
<div class='sb-source-section'>
|
||||
<div id='sb-source-tab' class="">
|
||||
<!-- <div id='sb-content-header' class="e-tab-header sb-content-tab-header">
|
||||
<div>
|
||||
<span class="sb-js-snippet-header"></span> jsfileName </div>
|
||||
<div>
|
||||
<span class="sb-html-snippet-header"></span> htmlfileName </div>
|
||||
</div>
|
||||
<div class="e-content sb-sample-content-area">
|
||||
<div>
|
||||
<div id="js-src-tab" class="js-source-content sb-src-code javascript">js Content</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="html-src-tab" class="html-source-content sb-src-code xml">html Content</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -462,58 +449,63 @@
|
|||
</div>
|
||||
<div class='description-section sb-rightpane-padding'>
|
||||
</div>
|
||||
<div class="banner-wrapper">
|
||||
<div id='banner-image' class="banner-img">
|
||||
<div class="ad-wrapper">
|
||||
<div id='ad-image' class="ad-img">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-12">
|
||||
<div id="banner-head" class="banner-header">Transform your JavaScript web apps today with Syncfusion Javascript controls</div>
|
||||
<div id="ad-banner-head" class="ad-header">Transform your JavaScript web
|
||||
apps today with Syncfusion Javascript controls</div>
|
||||
</div>
|
||||
<div class="col-sm-12 cnt-area">
|
||||
<div class="content-area">
|
||||
<div class="banner-cnt-pt">
|
||||
<div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
||||
<div class="cnt-text">80+ high-performance and responsive UI components</div>
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection">
|
||||
</div>
|
||||
<div class="cnt-text">80+ high-performance and responsive UI components
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-cnt-pt">
|
||||
<div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection">
|
||||
</div>
|
||||
<div class="cnt-text">Dedicated support</div>
|
||||
</div>
|
||||
<div class="banner-cnt-pt">
|
||||
<div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection">
|
||||
</div>
|
||||
<div class="cnt-text">Hassle-free licensing</div>
|
||||
</div>
|
||||
</div>
|
||||
<a style="color:#ffff;text-decoration:none;"
|
||||
href="https://www.syncfusion.com/downloads/essential-js2" aria-label="Try it for free">
|
||||
href="https://www.syncfusion.com/downloads?tag=es-seo-ej2-javascript-es5-demo-ads-trail" aria-label="TRY IT FOR FREE (Opens in a new window)">
|
||||
<div class="free-trial">TRY IT FOR FREE</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-footer">
|
||||
<div class="sb-footer-left">
|
||||
<div class="sb-footer-links">
|
||||
<a href="https://ej2.syncfusion.com/javascript/documentation/" target="_blank" aria-label="Documentation link">
|
||||
<a href="https://ej2.syncfusion.com/javascript/documentation/" target="_blank" aria-label="Documentation (Opens in a new window)">
|
||||
<div class="sb-footer-link">Documentation</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/forums/essential-js2" target="_blank" aria-label="Forum link">
|
||||
<a href="https://www.syncfusion.com/forums/essential-js2" target="_blank" aria-label="Forum (Opens in a new window)">
|
||||
<div class="sb-footer-link">Forum</div>
|
||||
</a>
|
||||
<a href="https://syncfusion.com/blogs" target="_blank" aria-label="Blog link">
|
||||
<a href="https://syncfusion.com/blogs" target="_blank" aria-label="Blog (Opens in a new window)">
|
||||
<div class="sb-footer-link">Blog</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/kb" target="_blank" aria-label="Knowledge base">
|
||||
<a href="https://www.syncfusion.com/kb" target="_blank" aria-label="Knowledge base (Opens in a new window)">
|
||||
<div class="sb-footer-link">Knowledge Base</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sb-footer-copyright"></div>
|
||||
</div>
|
||||
<div class="sb-footer-logo">
|
||||
<a href="https://www.syncfusion.com/" target="_blank" aria-label="Sample footer logo">
|
||||
<a href="https://www.syncfusion.com/" target="_blank" aria-label="Syncfusion logo">
|
||||
<div class="sb-footer-logo-icon"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -1,15 +1,15 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-javascript-samples",
|
||||
"version": "24.2.3",
|
||||
"version": "25.1.35",
|
||||
"description": "Examples of JavaScript (ES5) UI Controls",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"dependencies": {
|
||||
"@syncfusion/ej2": "*",
|
||||
"crossroads": "^0.12.2",
|
||||
"hasher": "^1.2.0",
|
||||
"fuse.js": "3.2.0",
|
||||
"tributejs": "^3.7.3"
|
||||
"crossroads": "0.12.2",
|
||||
"hasher": "1.2.0",
|
||||
"fuse.js": "7.0.0",
|
||||
"tributejs": "5.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@syncfusion/ej2-react-notifications": "*",
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_default\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Default Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_default');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_default\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Default Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_default');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/icons/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_icon\"></div>\n </div>\n <div id=\"athletics\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon marathon\"></span> Marathon</li>\n <li><span class=\"e-acrdn-icons e-content-icon javelin\"></span> Javelin Throw</li>\n <li><span class=\"e-acrdn-icons e-content-icon discus\"></span> Discus Throw</li>\n <li><span class=\"e-acrdn-icons e-content-icon highjump\"></span> High Jump</li>\n <li><span class=\"e-acrdn-icons e-content-icon longjump\"></span> Long Jump</li>\n </div>\n <div id=\"water_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon dive\"></span> Diving</li>\n <li><span class=\"e-acrdn-icons e-content-icon swimming\"></span> Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon marathan_swim\"></span> Marathon Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon sync_swim\"></span> Synchronized Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon waterpolo\"></span> Water Polo</li>\n </div>\n <div id=\"racing_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon cycle_BMX\"></span> Cycling BMX</li>\n <li> <span class=\"e-acrdn-icons e-content-icon cycle_Mountain\"></span> Cycling Mountain Bike</li>\n <li> <span class=\"e-acrdn-icons e-content-icon cycle\"></span> Cycle Racing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon sailing\"></span> Sailing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon rowing\"></span> Rowing</li>\n </div>\n <div id=\"indoor_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon tennis\"></span> Table Tennis</li>\n <li> <span class=\"e-acrdn-icons e-content-icon badminton\"></span> Badminton</li>\n <li> <span class=\"e-acrdn-icons e-content-icon volleyball\"></span> Volleyball</li>\n <li> <span class=\"e-acrdn-icons e-content-icon boxing\"></span> Boxing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon swimming_In\"></span> Swimming</li>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Icon Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: window.data\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_icon');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/icons/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_icon\"></div>\n </div>\n <div id=\"athletics\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon marathon\"></span> Marathon</li>\n <li><span class=\"e-acrdn-icons e-content-icon javelin\"></span> Javelin Throw</li>\n <li><span class=\"e-acrdn-icons e-content-icon discus\"></span> Discus Throw</li>\n <li><span class=\"e-acrdn-icons e-content-icon highjump\"></span> High Jump</li>\n <li><span class=\"e-acrdn-icons e-content-icon longjump\"></span> Long Jump</li>\n </div>\n <div id=\"water_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon dive\"></span> Diving</li>\n <li><span class=\"e-acrdn-icons e-content-icon swimming\"></span> Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon marathan_swim\"></span> Marathon Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon sync_swim\"></span> Synchronized Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon waterpolo\"></span> Water Polo</li>\n </div>\n <div id=\"racing_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon cycle_BMX\"></span> Cycling BMX</li>\n <li> <span class=\"e-acrdn-icons e-content-icon cycle_Mountain\"></span> Cycling Mountain Bike</li>\n <li> <span class=\"e-acrdn-icons e-content-icon cycle\"></span> Cycle Racing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon sailing\"></span> Sailing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon rowing\"></span> Rowing</li>\n </div>\n <div id=\"indoor_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon tennis\"></span> Table Tennis</li>\n <li> <span class=\"e-acrdn-icons e-content-icon badminton\"></span> Badminton</li>\n <li> <span class=\"e-acrdn-icons e-content-icon volleyball\"></span> Volleyball</li>\n <li> <span class=\"e-acrdn-icons e-content-icon boxing\"></span> Boxing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon swimming_In\"></span> Swimming</li>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Icon Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: window.data\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_icon');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/keyboard-interaction/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_keyboard_interaction\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Keyboard Interaction Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_keyboard_interaction');\n\n //Focus the Accordion header (alt+j) key combination\n document.body.addEventListener('keydown', function (e) {\n var accordionElement = document.querySelector(\n '#Accordion_keyboard_interaction .e-acrdn-header'\n );\n if (e.altKey && e.keyCode === 74 && accordionElement) {\n accordionElement.focus();\n }\n });\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/keyboard-interaction/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_keyboard_interaction\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Keyboard Interaction Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_keyboard_interaction');\n\n //Focus the Accordion header (alt+j) key combination\n document.body.addEventListener('keydown', function (e) {\n var accordionElement = document.querySelector(\n '#Accordion_keyboard_interaction .e-acrdn-header'\n );\n if (e.altKey && e.keyCode === 74 && accordionElement) {\n accordionElement.focus();\n }\n });\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/custom-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"books\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n // define the JSON of data\n \n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the data to dataSource property\n dataSource: window.booksData,\n // maps the appropriate column to fields property\n fields: { value: 'BookName' },\n // set placeholder to AutoComplete input element\n placeholder: 'e.g. Node.js Succinctly',\n // Bind the filter event\n filtering: function (e) {\n var options = {\n keys: ['BookName'],\n includeMatches: true,\n findAllMatches: true\n };\n // create object from Fuse constructor\n var fuse = new Fuse(window.booksData, options);\n // store the search result data based on typed characters\n var result = fuse.search(e.text);\n var data = [];\n for (var i = 0; i < result.length; i++) {\n data.push(result[i].item);\n }\n // pass the filter data source to updateData method.\n e.updateData(data, null);\n var popupElement = document.getElementById('books_popup');\n if (popupElement)\n {\n var lists = popupElement.querySelectorAll('.e-list-item');\n // For highlight the typed characters, pass the result data and list items to highlightSearch method.\n highlightSearch(lists, result);\n }\n }\n });\n atcObj.appendTo('#books');\n loadExternalFile();\n // Dynamically load the fuse.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'dist/fuse.min.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n function highlightSearch(listItems, result) {\n if (result.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n var innerHTML = listItems[i].innerHTML;\n for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {\n var indexes = result[i].matches[0].indices[j];\n innerHTML = innerHTML.substring(0, indexes[0]) + '<span class=\"e-highlight\">' +\n innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);\n listItems[i].innerHTML = innerHTML;\n }\n }\n }\n }\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/custom-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"books\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n // define the JSON of data\n \n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the data to dataSource property\n dataSource: window.booksData,\n // maps the appropriate column to fields property\n fields: { value: 'BookName' },\n // set placeholder to AutoComplete input element\n placeholder: 'e.g. Node.js Succinctly',\n // Bind the filter event\n filtering: function (e) {\n var options = {\n keys: ['BookName'],\n includeMatches: true,\n findAllMatches: true\n };\n // create object from Fuse constructor\n var fuse = new Fuse(window.booksData, options);\n // store the search result data based on typed characters\n var result = fuse.search(e.text);\n var data = [];\n for (var i = 0; i < result.length; i++) {\n data.push(result[i].item);\n }\n // pass the filter data source to updateData method.\n e.updateData(data, null);\n var popupElement = document.getElementById('books_popup');\n if (popupElement)\n {\n var lists = popupElement.querySelectorAll('.e-list-item');\n // For highlight the typed characters, pass the result data and list items to highlightSearch method.\n highlightSearch(lists, result);\n }\n }\n });\n atcObj.appendTo('#books');\n loadExternalFile();\n // Dynamically load the fuse.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'dist/fuse.min.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n function highlightSearch(listItems, result) {\n if (result.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n var innerHTML = listItems[i].innerHTML;\n for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {\n var indexes = result[i].matches[0].indices[j];\n innerHTML = innerHTML.substring(0, indexes[0]) + '<span class=\"e-highlight\">' +\n innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);\n listItems[i].innerHTML = innerHTML;\n }\n }\n }\n }\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/data-binding/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-9\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4> Local Data</h4>\n <input type=\"text\" id=\"country\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Remote Data</h4>\n <input type=\"text\" id=\"products\">\n </div>\n </div>\n</div>\n<div class=\"col-lg-3 property-section\">\n\t<table id=\"property\" title=\"Properties\">\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\t<input id=\"checkAutofill\" type=\"checkbox\" checked=\"true\">\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj1 = new ej.dropdowns.AutoComplete({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url: 'https://services.syncfusion.com/js/production/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // set the count for displays the suggestion items.\n suggestionCount: 5,\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // map the appropriate columns to fields property\n fields: { value: 'FirstName' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // sort the resulted items\n sortOrder: 'Ascending',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true,\n // set the filterType to searching operation\n filterType: 'StartsWith',\n });\n atcObj1.appendTo('#products');\n\n // initialize AutoComplete component\n var atcObj2 = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the filterType to searching operation\n filterType: 'StartsWith',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n atcObj2.appendTo('#country');\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Autofill',\n // bind change event\n change: function (args) {\n // enable or disable the autofill in remote data AutoComplete based on CheckBox checked state\n atcObj1.autofill = args.checked;\n // enable or disable the autofill in local data AutoComplete based on CheckBox checked state\n atcObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/data-binding/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-9\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4> Local Data</h4>\n <input type=\"text\" id=\"country\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Remote Data</h4>\n <input type=\"text\" id=\"products\">\n </div>\n </div>\n</div>\n<div class=\"col-lg-3 property-section\">\n\t<table id=\"property\" title=\"Properties\">\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\t<input id=\"checkAutofill\" type=\"checkbox\" checked=\"true\">\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj1 = new ej.dropdowns.AutoComplete({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url: 'https://services.syncfusion.com/js/production/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // set the count for displays the suggestion items.\n suggestionCount: 5,\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // map the appropriate columns to fields property\n fields: { value: 'FirstName' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // sort the resulted items\n sortOrder: 'Ascending',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true,\n // set the filterType to searching operation\n filterType: 'StartsWith',\n });\n atcObj1.appendTo('#products');\n\n // initialize AutoComplete component\n var atcObj2 = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the filterType to searching operation\n filterType: 'StartsWith',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n atcObj2.appendTo('#country');\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Autofill',\n // bind change event\n change: function (args) {\n // enable or disable the autofill in remote data AutoComplete based on CheckBox checked state\n atcObj1.autofill = args.checked;\n // enable or disable the autofill in local data AutoComplete based on CheckBox checked state\n atcObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"games\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // define the array of data\n var sportsData = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: sportsData,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"games\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // define the array of data\n var sportsData = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: sportsData,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/diacritics-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"list\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n\n/**\n * AutoComplete Diacritics functionality Sample\n */\n\n // initialize AutoComplete component\n var dropdownObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true\n });\n dropdownObj.appendTo('#list');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/diacritics-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"list\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n\n/**\n * AutoComplete Diacritics functionality Sample\n */\n\n // initialize AutoComplete component\n var dropdownObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true\n });\n dropdownObj.appendTo('#list');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/grouping-icon/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div id=\"groupList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Grouping</h4>\n <input type=\"text\" id=\"vegetables\">\n </div>\n </div>\n\n <div id=\"iconList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4> Icons</h4>\n <input type=\"text\" id=\"icons\">\n </div>\n </div>\n</div>\n\n\n\n\n\n<style>\n \n\n .e-list-icon {\n font-family: 'Socialicons' !important;\n color: rgba(0, 0, 0, .57);\n }\n\n .twitter:before {\n content: \"\\a701\";\n }\n\n .vimeo:before {\n content: \"\\a702\";\n }\n\n .youtube:before {\n content: \"\\a709\";\n }\n\n .whatsapp:before {\n content: \"\\a700\";\n }\n\n .skype:before {\n content: \"\\a708\";\n }\n\n .instagram:before {\n content: \"\\a703\";\n }\n\n .google-plus:before {\n content: \"\\a706\";\n }\n\n .facebook:before {\n content: \"\\a705\";\n }\n\n .tumblr:before {\n content: \"\\a707\";\n }\n\n .linkedin:before {\n content: \"\\a704\";\n }\n</style></div></body></html>","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var groupObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', value: 'Vegetable' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Cabbage',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n groupObj.appendTo('#vegetables');\n\n // initialize AutoComplete component\n var iconObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { iconCss: 'Class', value: 'SocialMedia' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Facebook',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n iconObj.appendTo('#icons');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/grouping-icon/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div id=\"groupList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Grouping</h4>\n <input type=\"text\" id=\"vegetables\">\n </div>\n </div>\n\n <div id=\"iconList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4> Icons</h4>\n <input type=\"text\" id=\"icons\">\n </div>\n </div>\n</div>\n\n\n\n\n\n<style>\n \n\n .e-list-icon {\n font-family: 'Socialicons' !important;\n color: rgba(0, 0, 0, .57);\n }\n\n .twitter:before {\n content: \"\\a701\";\n }\n\n .vimeo:before {\n content: \"\\a702\";\n }\n\n .youtube:before {\n content: \"\\a709\";\n }\n\n .whatsapp:before {\n content: \"\\a700\";\n }\n\n .skype:before {\n content: \"\\a708\";\n }\n\n .instagram:before {\n content: \"\\a703\";\n }\n\n .google-plus:before {\n content: \"\\a706\";\n }\n\n .facebook:before {\n content: \"\\a705\";\n }\n\n .tumblr:before {\n content: \"\\a707\";\n }\n\n .linkedin:before {\n content: \"\\a704\";\n }\n</style></div></body></html>","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var groupObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', value: 'Vegetable' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Cabbage',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n groupObj.appendTo('#vegetables');\n\n // initialize AutoComplete component\n var iconObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { iconCss: 'Class', value: 'SocialMedia' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Facebook',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n iconObj.appendTo('#icons');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/highlight/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"country\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%;\">\n <tbody><tr>\n <td class=\"left-side\">FilterType :</td>\n <td style=\"padding-top: 10px\"><input type=\"text\" id=\"filter-type\"> </td>\n </tr>\n </tbody></table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // enable the highlight property to highlight the matched character in suggestion list\n highlight: true\n });\n atcObj.appendTo('#country');\n\n // initialize DropDownList component\n var ddlObj = new ej.dropdowns.DropDownList({\n // set the array of string data to dataSource property\n dataSource: ['Contains', 'StartsWith', 'EndsWith'],\n // set the value to select an item at initial rendering.\n text: 'Contains',\n // set the placeholder to DropDownList input element\n placeholder: 'Select a type',\n // set width size of DropDownList element.\n width: '150px',\n // bind change event to modify the filter type of AutoComplete element.\n change: function (e) {\n atcObj.filterType = e.itemData.value;\n }\n });\n ddlObj.appendTo('#filter-type');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/highlight/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"country\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%;\">\n <tbody><tr>\n <td class=\"left-side\">FilterType :</td>\n <td style=\"padding-top: 10px\"><input type=\"text\" id=\"filter-type\"> </td>\n </tr>\n </tbody></table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // enable the highlight property to highlight the matched character in suggestion list\n highlight: true\n });\n atcObj.appendTo('#country');\n\n // initialize DropDownList component\n var ddlObj = new ej.dropdowns.DropDownList({\n // set the array of string data to dataSource property\n dataSource: ['Contains', 'StartsWith', 'EndsWith'],\n // set the value to select an item at initial rendering.\n text: 'Contains',\n // set the placeholder to DropDownList input element\n placeholder: 'Select a type',\n // set width size of DropDownList element.\n width: '150px',\n // bind change event to modify the filter type of AutoComplete element.\n change: function (e) {\n atcObj.filterType = e.itemData.value;\n }\n });\n ddlObj.appendTo('#filter-type');\n"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/object-value-binding/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control-wrapper\">\n <div id=\"default\" style=\"padding-top:75px;\">\n <input type=\"text\" id=\"object\" tabindex=\"1\">\n </div>\n </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n <textarea id=\"value\" title=\"Properties\" style=\"width: 100%; margin-top:90px; height: 60px;\" readonly=\"\">Selected value : </textarea>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}/**\n * AutoComplete Object Value Binding Sample\n */\nvar records = [];\nfor (var i = 1; i <= 150; i++) {\n var autoObjectItem = {};\n autoObjectItem.id = 'id' + i;\n autoObjectItem.text = \"Item \".concat(i);\n var randomAutoGroup = Math.floor(Math.random() * 4) + 1;\n switch (randomAutoGroup) {\n case 1:\n autoObjectItem.group = 'Group D';\n break;\n case 2:\n autoObjectItem.group = 'Group C';\n break;\n case 3:\n autoObjectItem.group = 'Group B';\n break;\n case 4:\n autoObjectItem.group = 'Group A';\n break;\n default:\n break;\n }\n records.push(autoObjectItem);\n}\n\n\n\n // Initialize DropDownList component\n var listObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: records,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a Item',\n allowObjectBinding: true,\n fields: { value: 'text' },\n // set the height of the popup element\n popupHeight: '200px',\n // bind the change event\n change: function (args) {\n var inputValue = document.getElementById('value');\n inputValue.value = \"Selected value : \" + JSON.stringify(listObj.value);\n console.log(args.value);\n },\n });\n listObj.appendTo('#object');\n"}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<div class="col-lg-8 control-section">
|
||||
<div class="control-wrapper">
|
||||
<div id="default" style='padding-top:75px;'>
|
||||
<input type="text" id="object" tabindex="1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 property-section">
|
||||
<textarea id="value" title="Properties" style="width: 100%; margin-top:90px; height: 60px;" readonly>Selected value : </textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="action-description">
|
||||
<p>The sample showcases the functionality of object value binding in the AutoComplete component. Users can type
|
||||
characters into the AutoComplete field and select an item from the suggestion list. The corresponding object
|
||||
value of the selected item is then assigned to the value property. In the property panel, the <code>value</code> property of the selected item's will be displayed.</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>The <code>AutoComplete</code> component generates a list of suggestions that match the characters typed by the
|
||||
user. Users can then select an item from this list. Once an item is selected, its associated object value is
|
||||
automatically assigned to the <code>value</code> property. This behavior is enabled by the
|
||||
<code>allowObjectBinding</code> property.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
|
||||
<style>
|
||||
.control-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.property-section .right-side {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.property-section .left-side {
|
||||
padding: 5px;
|
||||
width: 25%
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* AutoComplete Object Value Binding Sample
|
||||
*/
|
||||
var records = [];
|
||||
for (var i = 1; i <= 150; i++) {
|
||||
var autoObjectItem = {};
|
||||
autoObjectItem.id = 'id' + i;
|
||||
autoObjectItem.text = "Item ".concat(i);
|
||||
var randomAutoGroup = Math.floor(Math.random() * 4) + 1;
|
||||
switch (randomAutoGroup) {
|
||||
case 1:
|
||||
autoObjectItem.group = 'Group D';
|
||||
break;
|
||||
case 2:
|
||||
autoObjectItem.group = 'Group C';
|
||||
break;
|
||||
case 3:
|
||||
autoObjectItem.group = 'Group B';
|
||||
break;
|
||||
case 4:
|
||||
autoObjectItem.group = 'Group A';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
records.push(autoObjectItem);
|
||||
}
|
||||
|
||||
this.default = function () {
|
||||
|
||||
// Initialize DropDownList component
|
||||
var listObj = new ej.dropdowns.AutoComplete({
|
||||
//set the local data to dataSource property
|
||||
dataSource: records,
|
||||
// set the placeholder to DropDownList input element
|
||||
placeholder: 'Select a Item',
|
||||
allowObjectBinding: true,
|
||||
fields: { value: 'text' },
|
||||
// set the height of the popup element
|
||||
popupHeight: '200px',
|
||||
// bind the change event
|
||||
change: function (args) {
|
||||
var inputValue = document.getElementById('value');
|
||||
inputValue.value = "Selected value : " + JSON.stringify(listObj.value);
|
||||
console.log(args.value);
|
||||
},
|
||||
});
|
||||
listObj.appendTo('#object');
|
||||
};
|
||||
|
|
@ -8,9 +8,10 @@
|
|||
{ "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of the JavaScript(ES5) autocomplete control with minimum configuration.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "value", "placeholder"] } },
|
||||
{ "url": "grouping-icon", "name": "Grouping and Icons", "description": "This example demonstrates how to group based on the different categories with individual header and icon support using the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["fields", "placeholder"] } },
|
||||
{ "url": "data-binding", "name": "Data Binding", "description": "This example demonstrates how to bind with local data source and fetch data from remote data service in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"] } },
|
||||
{ "url": "object-value-binding", "name": "Object Value Binding", "type": "new", "description": "This example demonstrates how to bind with data source in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["query", "dataSource", "fields", "sortOrder", "placeholder","allowObjectBinding"] } },
|
||||
{ "url": "template", "name": "Template", "description": "This example demonstrates how to customize the appearance of each item in the JavaScript(ES5) autocomplete control pop-up list using template.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "headerTemplate", "itemTemplate", "placeholder", "popupHeight"] } },
|
||||
{ "url": "highlight", "name": "Highlight", "description": "This example demonstrates how to highlight the searched characters in the suggested list items of the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "highlight", "placeholder"] } },
|
||||
{ "url": "virtual-scroll", "name": "Virtualization", "type": "update", "description": "This example demonstrates how to use virtualization support of the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "enableVirtualization", "popupHeight", "placeholder"] } },
|
||||
{ "url": "virtual-scroll", "name": "Virtualization", "description": "This example demonstrates how to use virtualization support of the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "enableVirtualization", "popupHeight", "placeholder"] } },
|
||||
{ "url": "custom-filtering", "name": "Custom Filtering", "description": "This example demonstrates how to achieve the custom filtering functionalities in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "filtering", "fields", "placeholder"] } },
|
||||
{ "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This example demonstrates how to achieve the diacritics filter functionalities in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "ignoreAccent", "placeholder"] } }
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/template/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"employees\">\n </div>\n </div>\n</div>\n\n\n\n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 300px;\n }\n\n .header {\n font-weight: 600;\n color: rgba(0, 0, 0, .54);\n height: 48px;\n padding: 15px 0 0 16px;\n font-size: 16px;\n background-color: #f5f5f5;\n font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\";\n }\n\n\n .info {\n margin-left: 17px;\n }\n\n .ename {\n display: block !important;\n opacity: .87;\n font-size: 16px;\n margin-top: 8px;\n }\n\n .job {\n opacity: .54;\n font-size: 14px;\n margin-top: -15px;\n margin-bottom: 7px;\n }\n\n .empImage {\n margin: 6px 16px;\n float: left;\n width: 50px;\n height: 50px;\n }\n\n #employees_popup.e-popup .e-list-item * {\n display: block;\n text-indent: 0;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup .e-dropdownbase .e-list-item {\n line-height: 42px;\n height: 80px;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage {\n margin: 10px 16px;\n }\n\n .tailwind #employees_popup .job {\n margin-top: -7px;\n margin-bottom: 5px;\n }\n\n .e-bigger.tailwind #employees_popup .job {\n margin-top: -15px;\n margin-bottom: 5px;\n }\n .bootstrap5 #employees_popup .job,\n .bootstrap-dark #employees_popup .job,\n .bootstrap5-dark #employees_popup .job,\n .tailwind-dark #employees_popup .job ,\n .fluent-dark #employees_popup .job {\n margin-top: 0;\n }\n .e-bigger.bootstrap5 #employees_popup .job,\n .e-bigger.bootstrap-dark #employees_popup .job,\n .e-bigger.bootstrap5-dark #employees_popup .job,\n .e-bigger.tailwind-dark #employees_popup .job,\n .e-bigger.fluent-dark #employees_popup .job {\n margin-top: -15px;\n }\n\n .fluent-dark .header {\n background: #252423;\n color: #2899F5;\n }\n\n .bootstrap5-dark .header {\n background: #343A40;\n color: #7B848D;\n }\n\n .fluent .header{\n color: #2899F5;\n }\n\n .tailwind-dark .header {\n background: #374151;\n color: rgb(255, 255, 255);\n }\n\n .material3-dark .header,\n .material-dark .header {\n background: rgb(66, 66, 66);\n color: rgb(255, 255, 255);\n }\n\n .fabric-dark .header {\n background: rgb(40, 39, 39);\n color: rgb(255, 255, 255);\n }\n\n .bootstrap-dark .header {\n background: rgb(49, 49, 49);\n color: rgb(255, 255, 255);\n }\n</style></div></body></html>","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the template content for popup header element\n headerTemplate:\n '<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>',\n // set the template content for list items\n itemTemplate: '<div><img class=\"empImage\" src=\"styles/images/Employees/${Eimg}.png\" alt=\"employee\"/>' +\n '<div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div></div>',\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // set the height of the popup element\n popupHeight: '450px'\n });\n atcObj.appendTo('#employees');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/template/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"employees\">\n </div>\n </div>\n</div>\n\n\n\n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 300px;\n }\n\n .header {\n font-weight: 600;\n color: rgba(0, 0, 0, .54);\n height: 48px;\n padding: 15px 0 0 16px;\n font-size: 16px;\n background-color: #f5f5f5;\n font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\";\n }\n\n\n .info {\n margin-left: 17px;\n }\n\n .ename {\n display: block !important;\n opacity: .87;\n font-size: 16px;\n margin-top: 8px;\n }\n\n .job {\n opacity: .54;\n font-size: 14px;\n margin-top: -15px;\n margin-bottom: 7px;\n }\n\n .empImage {\n margin: 6px 16px;\n float: left;\n width: 50px;\n height: 50px;\n }\n\n #employees_popup.e-popup .e-list-item * {\n display: block;\n text-indent: 0;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup .e-dropdownbase .e-list-item {\n line-height: 42px;\n height: 80px;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage {\n margin: 10px 16px;\n }\n\n .tailwind #employees_popup .job {\n margin-top: -7px;\n margin-bottom: 5px;\n }\n\n .e-bigger.tailwind #employees_popup .job {\n margin-top: -15px;\n margin-bottom: 5px;\n }\n .bootstrap5 #employees_popup .job,\n .bootstrap-dark #employees_popup .job,\n .bootstrap5-dark #employees_popup .job,\n .tailwind-dark #employees_popup .job ,\n .fluent-dark #employees_popup .job {\n margin-top: 0;\n }\n .e-bigger.bootstrap5 #employees_popup .job,\n .e-bigger.bootstrap-dark #employees_popup .job,\n .e-bigger.bootstrap5-dark #employees_popup .job,\n .e-bigger.tailwind-dark #employees_popup .job,\n .e-bigger.fluent-dark #employees_popup .job {\n margin-top: -15px;\n }\n\n .fluent-dark .header {\n background: #252423;\n color: #2899F5;\n }\n\n .bootstrap5-dark .header {\n background: #343A40;\n color: #7B848D;\n }\n\n .fluent .header{\n color: #2899F5;\n }\n\n .tailwind-dark .header {\n background: #374151;\n color: rgb(255, 255, 255);\n }\n\n .material3-dark .header,\n .material-dark .header {\n background: rgb(66, 66, 66);\n color: rgb(255, 255, 255);\n }\n\n .fabric-dark .header {\n background: rgb(40, 39, 39);\n color: rgb(255, 255, 255);\n }\n\n .bootstrap-dark .header {\n background: rgb(49, 49, 49);\n color: rgb(255, 255, 255);\n }\n</style></div></body></html>","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the template content for popup header element\n headerTemplate:\n '<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>',\n // set the template content for list items\n itemTemplate: '<div><img class=\"empImage\" src=\"styles/images/Employees/${Eimg}.png\" alt=\"employee\"/>' +\n '<div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div></div>',\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // set the height of the popup element\n popupHeight: '450px'\n });\n atcObj.appendTo('#employees');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/virtual-scroll/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-12\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Local Data</h4>\n <input type=\"text\" id=\"local\" tabindex=\"1\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Remote Data</h4>\n <input type=\"text\" id=\"remote\" tabindex=\"1\">\n </div>\n </div>\n <div id=\"group-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Grouping</h4>\n <input type=\"text\" id=\"group\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // define the array of data\n var autoCompleteRecords = [];\n for (var i = 1; i <= 150; i++) {\n var autoItem = {};\n autoItem.id = 'id' + i;\n autoItem.text = \"Item \".concat(i);\n var randomGroup = Math.floor(Math.random() * 4) + 1;\n switch (randomGroup) {\n case 1:\n autoItem.group = 'Group A';\n break;\n case 2:\n autoItem.group = 'Group B';\n break;\n case 3:\n autoItem.group = 'Group C';\n break;\n case 4:\n autoItem.group = 'Group D';\n break;\n default:\n break;\n }\n autoCompleteRecords.push(autoItem);\n }\n\n // initialize AutoComplete component\n var localObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: autoCompleteRecords,\n //enable the virtualization property\n enableVirtualization: true,\n popupHeight: '200px',\n fields: { value: 'text' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Item 1'\n });\n localObj.appendTo('#local');\n var remoteObj = new ej.dropdowns.AutoComplete({\n dataSource: new ej.data.DataManager({\n url: 'https://services.syncfusion.com/js/production/api/orders',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n }),\n fields: { value: 'OrderID' },\n enableVirtualization: true,\n popupHeight: '200px',\n placeholder: 'OrderID'\n });\n remoteObj.appendTo('#remote');\n var groupObj = new ej.dropdowns.AutoComplete({\n dataSource: autoCompleteRecords,\n enableVirtualization: true,\n popupHeight: '200px',\n fields: { groupBy: 'group', value: 'text'},\n placeholder: 'e.g. Item 1'\n });\n groupObj.appendTo('#group');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/virtual-scroll/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-12\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Local Data</h4>\n <input type=\"text\" id=\"local\" tabindex=\"1\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Remote Data</h4>\n <input type=\"text\" id=\"remote\" tabindex=\"1\">\n </div>\n </div>\n <div id=\"group-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Grouping</h4>\n <input type=\"text\" id=\"group\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // define the array of data\n var autoCompleteRecords = [];\n for (var i = 1; i <= 150; i++) {\n var autoItem = {};\n autoItem.id = 'id' + i;\n autoItem.text = \"Item \".concat(i);\n var randomGroup = Math.floor(Math.random() * 4) + 1;\n switch (randomGroup) {\n case 1:\n autoItem.group = 'Group A';\n break;\n case 2:\n autoItem.group = 'Group B';\n break;\n case 3:\n autoItem.group = 'Group C';\n break;\n case 4:\n autoItem.group = 'Group D';\n break;\n default:\n break;\n }\n autoCompleteRecords.push(autoItem);\n }\n\n // initialize AutoComplete component\n var localObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: autoCompleteRecords,\n //enable the virtualization property\n enableVirtualization: true,\n popupHeight: '200px',\n fields: { value: 'text' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Item 1'\n });\n localObj.appendTo('#local');\n var remoteObj = new ej.dropdowns.AutoComplete({\n dataSource: new ej.data.DataManager({\n url: 'https://services.syncfusion.com/js/production/api/orders',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n }),\n fields: { value: 'OrderID' },\n enableVirtualization: true,\n popupHeight: '200px',\n placeholder: 'OrderID'\n });\n remoteObj.appendTo('#remote');\n var groupObj = new ej.dropdowns.AutoComplete({\n dataSource: autoCompleteRecords,\n enableVirtualization: true,\n popupHeight: '200px',\n fields: { groupBy: 'group', value: 'text'},\n placeholder: 'e.g. Item 1'\n });\n groupObj.appendTo('#group');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/avatar/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-default\">\n <div class=\"avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Avatar-->\n <div class=\"e-avatar e-avatar-xsmall image\"></div>\n <!-- Small Avatar-->\n <div class=\"e-avatar e-avatar-small image\"></div>\n <!-- Avatar-->\n <div class=\"e-avatar image\"></div>\n <!-- Large Avatar-->\n <div class=\"e-avatar e-avatar-large image\"></div>\n <!-- xLarge Avatar-->\n <div class=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n <div class=\"circleAvatar avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Circle Avatar-->\n <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n <!-- Small Circle Avatar-->\n <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n <!-- Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle image\"></div>\n <!-- Large Circle Avatar-->\n <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n }\n\n .sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Assinging image for avatar in 'background-image' property */\n\n .e-avatar.image {\n background-image: url(//npmci.syncfusion.com/development/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 140px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n }\n\n .bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-default\">\n <div class=\"avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Avatar-->\n <div class=\"e-avatar e-avatar-xsmall image\"></div>\n <!-- Small Avatar-->\n <div class=\"e-avatar e-avatar-small image\"></div>\n <!-- Avatar-->\n <div class=\"e-avatar image\"></div>\n <!-- Large Avatar-->\n <div class=\"e-avatar e-avatar-large image\"></div>\n <!-- xLarge Avatar-->\n <div class=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n <div class=\"circleAvatar avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Circle Avatar-->\n <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n <!-- Small Circle Avatar-->\n <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n <!-- Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle image\"></div>\n <!-- Large Circle Avatar-->\n <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n }\n\n .sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Assinging image for avatar in 'background-image' property */\n\n .e-avatar.image {\n background-image: url(//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 140px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n }\n\n .bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/badge/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section default\">\n <div class=\"sample_container badge-default\">\n <div class=\"e-btn-group e-custom-button\">\n <button id=\"update\" class=\"e-btn\">Updates\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-info e-badge-notification e-badge-overlap\">14</span>\n </button>\n <button id=\"task\" class=\"e-btn\">Tasks\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-success e-badge-notification e-badge-overlap\">48</span>\n </button>\n <button id=\"notify\" class=\"e-btn\">Notifications\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-primary e-badge-notification e-badge-overlap\">99</span>\n </button>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n @media only screen and (max-width: 400px) {\n .sample_container.badge-default .e-btn-group {\n left: calc(50% - 111px);\n }\n .sample_container.badge-default #task {\n display: none;\n }\n }\n\n .sample_container.badge-default {\n max-width: 328px;\n margin: auto;\n margin-top: 130px;\n }\n\n .badge-default .e-btn {\n position: relative;\n }\n\n .badge-default .e-bigger .e-btn {\n padding: 3px 10px;\n }\n\n /* Group Button Customization */\n\n .badge-default .e-btn-group {\n width: auto;\n position: relative;\n left: calc(50% - 164px);\n }\n\n .e-btn-group.e-custom-button {\n box-shadow: none;\n }\n\n .highcontrast .e-btn-group.e-custom-button .e-btn:focus {\n outline: 0px;\n color: white;\n }\n\n .fabric .e-btn-group.e-custom-button .e-btn,\n\t.material .e-btn-group.e-custom-button .e-btn,\n\t.bootstrap .e-btn-group.e-custom-button .e-btn {\n background: #F6F7F9;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n text-transform: initial;\n }\n\n #update.e-btn {\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n border-right: 1px dotted #aaa;\n width: 100px;\n }\n\n #task.e-btn {\n border-right: 1px dotted #aaa;\n width: 100px;\n }\n\n #notify.e-btn {\n padding-left: 24px;\n padding-right: 24px;\n border-bottom-right-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n .material3 #update.e-btn {\n\tborder-bottom-right-radius: 0px;\n border-top-right-radius: 0px;\n }\n\n .material3 #task.e-btn {\n\tborder-radius: 0;\n }\n\n .material3 #notify.e-btn {\n border-bottom-left-radius: 0px;\n \tborder-top-left-radius: 0px;\n }\n\n .material3 .e-btn-group.e-custom-button {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n }\n\n .default .e-badge.e-badge-overlap {\n transform: translateX(-110%);\n z-index: 100;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
|
||||
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/badge/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section default\">\n <div class=\"sample_container badge-default\">\n <div class=\"e-btn-group e-custom-button\">\n <button id=\"update\" class=\"e-btn\">Updates\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-info e-badge-notification e-badge-overlap\">14</span>\n </button>\n <button id=\"task\" class=\"e-btn\">Tasks\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-success e-badge-notification e-badge-overlap\">48</span>\n </button>\n <button id=\"notify\" class=\"e-btn\">Notifications\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-primary e-badge-notification e-badge-overlap\">99</span>\n </button>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n @media only screen and (max-width: 400px) {\n .sample_container.badge-default .e-btn-group {\n left: calc(50% - 111px);\n }\n .sample_container.badge-default #task {\n display: none;\n }\n }\n\n .sample_container.badge-default {\n max-width: 328px;\n margin: auto;\n margin-top: 130px;\n }\n\n .badge-default .e-btn {\n position: relative;\n }\n\n .badge-default .e-bigger .e-btn {\n padding: 3px 10px;\n }\n\n /* Group Button Customization */\n\n .badge-default .e-btn-group {\n width: auto;\n position: relative;\n left: calc(50% - 164px);\n }\n\n .e-btn-group.e-custom-button {\n box-shadow: none;\n }\n\n .highcontrast .e-btn-group.e-custom-button .e-btn:focus {\n outline: 0px;\n color: white;\n }\n\n .fabric .e-btn-group.e-custom-button .e-btn,\n\t.material .e-btn-group.e-custom-button .e-btn,\n\t.bootstrap .e-btn-group.e-custom-button .e-btn {\n background: #F6F7F9;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n text-transform: initial;\n }\n\n #update.e-btn {\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n border-right: 1px dotted #aaa;\n width: 100px;\n }\n\n #task.e-btn {\n border-right: 1px dotted #aaa;\n width: 100px;\n }\n\n #notify.e-btn {\n padding-left: 24px;\n padding-right: 24px;\n border-bottom-right-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n .material3 #update.e-btn {\n\tborder-bottom-right-radius: 0px;\n border-top-right-radius: 0px;\n }\n\n .material3 #task.e-btn {\n\tborder-radius: 0;\n }\n\n .material3 #notify.e-btn {\n border-bottom-left-radius: 0px;\n \tborder-top-left-radius: 0px;\n }\n\n .material3 .e-btn-group.e-custom-button {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n }\n\n .default .e-badge.e-badge-overlap {\n transform: translateX(-110%);\n z-index: 100;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/badge/toolbar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container badge-toolbar\">\n <div id=\"toolbar\">\n <div>\n <div class=\"header\">\n Notification\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"message icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-primary e-badge-notification e-badge-overlap\">35</span>\n </div>\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"user-profile icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-success e-badge-notification e-badge-overlap\">28</span>\n </div>\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"love icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-info e-badge-notification e-badge-overlap\">98</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container.badge-toolbar {\n display: table;\n margin: auto;\n margin-top: 117px;\n }\n\n body.bootstrap5 .badge-toolbar .e-toolbar,\n body.material .badge-toolbar .e-toolbar,\n body.tailwind .badge-toolbar .e-toolbar{\n border: 1px solid #dee2e6;\n }\n\n .tailwind-dark .sample_container.badge-toolbar,\n .bootstrap5-dark .sample_container.badge-toolbar,\n .bootstrap-dark .sample_container.badge-toolbar,\n .fabric-dark .sample_container.badge-toolbar {\n border: 1px solid #dddddd;\n }\n\n @media only screen and (max-width: 550px) {\n .sample_container.badge-toolbar #toolbar .header {\n display: none;\n }\n\n .material .sample_container.badge-toolbar .e-toolbar .e-toolbar-items:first-child>.e-toolbar-item:last-child {\n margin-right: 9px;\n }\n\n .bootstrap .sample_container.badge-toolbar .e-toolbar .e-toolbar-items:first-child>.e-toolbar-item:last-child {\n margin-right: 10px;\n }\n }\n\n .sample_container.badge-toolbar .badge-block {\n position: relative;\n display: inline-block;\n margin: 20px 13px 10px 10px;\n }\n\n .icons {\n width: 28px;\n height: 28px;\n display: inline-block;\n }\n\n #toolbar .header {\n font-size: 18px;\n margin-right: 56px;\n }\n\n /* SVG Icons */\n\n .love {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.532.81c3.029 0 5.932 1.668 7.468 4.521 2.139-3.97 6.922-5.644 11.008-3.726 4.289 2.012 6.177 7.212 4.218 11.617C29.273 17.614 16 31.19 16 31.19 15.916 31.137 2.727 17.614.774 13.222-1.186 8.817.703 3.617 4.993 1.605A8.299 8.299 0 0 1 8.532.81z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .message {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M0 5.126h.024l7.547 7.393 8.405 8.252 8.405-8.252 7.547-7.393H32v22.6H0zm1.902-.852h28.195l-7.048 5.929L16 16.132l-7.049-5.929z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .user-profile {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.772 18.363a11.978 11.978 0 0 0 7.229 2.416c2.71 0 5.214-.899 7.229-2.416 4.71.593 8.354 4.61 8.354 9.481V32H.416v-4.156c0-4.871 3.646-8.888 8.356-9.481zM16.001 0a8.727 8.727 0 1 1-.003 17.455A8.727 8.727 0 0 1 16.001 0z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS tab intergration\n */\n\n var toolbarObj = new ej.navigations.Toolbar();\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar');\n"}
|
||||
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/badge/toolbar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container badge-toolbar\">\n <div id=\"toolbar\">\n <div>\n <div class=\"header\">\n Notification\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"message icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-primary e-badge-notification e-badge-overlap\">35</span>\n </div>\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"user-profile icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-success e-badge-notification e-badge-overlap\">28</span>\n </div>\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"love icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-info e-badge-notification e-badge-overlap\">98</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container.badge-toolbar {\n display: table;\n margin: auto;\n margin-top: 117px;\n }\n\n body.bootstrap5 .badge-toolbar .e-toolbar,\n body.material .badge-toolbar .e-toolbar,\n body.tailwind .badge-toolbar .e-toolbar{\n border: 1px solid #dee2e6;\n }\n\n .tailwind-dark .sample_container.badge-toolbar,\n .bootstrap5-dark .sample_container.badge-toolbar,\n .bootstrap-dark .sample_container.badge-toolbar,\n .fabric-dark .sample_container.badge-toolbar {\n border: 1px solid #dddddd;\n }\n\n @media only screen and (max-width: 550px) {\n .sample_container.badge-toolbar #toolbar .header {\n display: none;\n }\n\n .material .sample_container.badge-toolbar .e-toolbar .e-toolbar-items:first-child>.e-toolbar-item:last-child {\n margin-right: 9px;\n }\n\n .bootstrap .sample_container.badge-toolbar .e-toolbar .e-toolbar-items:first-child>.e-toolbar-item:last-child {\n margin-right: 10px;\n }\n }\n\n .sample_container.badge-toolbar .badge-block {\n position: relative;\n display: inline-block;\n margin: 20px 13px 10px 10px;\n }\n\n .icons {\n width: 28px;\n height: 28px;\n display: inline-block;\n }\n\n #toolbar .header {\n font-size: 18px;\n margin-right: 56px;\n }\n\n /* SVG Icons */\n\n .love {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.532.81c3.029 0 5.932 1.668 7.468 4.521 2.139-3.97 6.922-5.644 11.008-3.726 4.289 2.012 6.177 7.212 4.218 11.617C29.273 17.614 16 31.19 16 31.19 15.916 31.137 2.727 17.614.774 13.222-1.186 8.817.703 3.617 4.993 1.605A8.299 8.299 0 0 1 8.532.81z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .message {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M0 5.126h.024l7.547 7.393 8.405 8.252 8.405-8.252 7.547-7.393H32v22.6H0zm1.902-.852h28.195l-7.048 5.929L16 16.132l-7.049-5.929z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .user-profile {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.772 18.363a11.978 11.978 0 0 0 7.229 2.416c2.71 0 5.214-.899 7.229-2.416 4.71.593 8.354 4.61 8.354 9.481V32H.416v-4.156c0-4.871 3.646-8.888 8.356-9.481zM16.001 0a8.727 8.727 0 1 1-.003 17.455A8.727 8.727 0 0 1 16.001 0z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS tab intergration\n */\n\n var toolbarObj = new ej.navigations.Toolbar();\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Bind to Location</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"bind-to-location\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-10 col-md-12\">\n <h5>URL Binding and Navigation</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"url-binding\"></nav>\n </div>\n </div>\n </div>\n</div> \n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n new ej.navigations.Breadcrumb({ \n enableNavigation: false\n }, '#bind-to-location');\n\n var url = 'https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/breadcrumb/bind-to-location.html',\n themeName = url.split('/')[6];\n\n new ej.navigations.Breadcrumb({\n url: url,\n beforeItemRender: function(args) {\n if (args.item.text == 'demos') {\n args.item.url = args.item.url + '/#/' + themeName;\n }\n else if (args.item.text == 'breadcrumb') {\n args.item.url = 'https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/breadcrumb/default.html';\n }\n else if (args.item.text == '#' || args.item.text == themeName || args.item.text == 'javascript') {\n args.cancel = true;\n }\n }\n }, '#url-binding');\n\n // To refresh Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName(\"e-breadcrumb\");\n for (var i = 0; i < breadcrumbs.length; i++) {\n breadcrumb = breadcrumbs[i];\n breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n }\n };\n\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Bind to Location</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"bind-to-location\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-10 col-md-12\">\n <h5>URL Binding and Navigation</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"url-binding\"></nav>\n </div>\n </div>\n </div>\n</div> \n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n new ej.navigations.Breadcrumb({ \n enableNavigation: false\n }, '#bind-to-location');\n\n var url = 'https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/breadcrumb/bind-to-location.html',\n themeName = url.split('/')[6];\n\n new ej.navigations.Breadcrumb({\n url: url,\n beforeItemRender: function(args) {\n if (args.item.text == 'demos') {\n args.item.url = args.item.url + '/#/' + themeName;\n }\n else if (args.item.text == 'breadcrumb') {\n args.item.url = 'https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/breadcrumb/default.html';\n }\n else if (args.item.text == '#' || args.item.text == themeName || args.item.text == 'javascript') {\n args.cancel = true;\n }\n }\n }, '#url-binding');\n\n // To refresh Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName(\"e-breadcrumb\");\n for (var i = 0; i < breadcrumbs.length; i++) {\n breadcrumb = breadcrumbs[i];\n breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n }\n };\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Simple Breadcrumb</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"keyboard-navigation\"></nav>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n new ej.navigations.Breadcrumb({\n enableNavigation: false\n }, '#keyboard-navigation');\n\n // To refresh Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb = document.getElementById('keyboard-navigation');\n var breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n };\n\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Simple Breadcrumb</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"keyboard-navigation\"></nav>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n new ej.navigations.Breadcrumb({\n enableNavigation: false\n }, '#keyboard-navigation');\n\n // To refresh Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb = document.getElementById('keyboard-navigation');\n var breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n };\n\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Overflow Mode - Hidden</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"default-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Menu</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"menu-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Collapsed</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"collapsed-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Wrap</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav style=\"width:255px;\" id=\"wrap-mode\"></nav>\n </div>\n </div> \n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Scroll</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav style=\"width:300px;\" id=\"scroll-mode\"></nav>\n </div>\n </div>\n </div>\n</div>\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n var overflowItems = [\n {\n text: \"Home\",\n url: \"./\"\n },\n {\n text: \"Breadcrumb\",\n url: \"./breadcrumb\"\n },\n {\n text: \"Default\",\n url: \"./breadcrumb/default\"\n },\n {\n text: \"Icons\",\n url: \"./breadcrumb/icons\"\n },\n {\n text: \"Navigation\",\n url: \"./breadcrumb/navigation\"\n },\n {\n text: \"Overflow\",\n url: \"./breadcrumb/overflow\"\n }\n ];\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Hidden',\n enableNavigation: false\n }, '#default-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Menu',\n enableNavigation: false\n }, '#menu-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Collapsed',\n enableNavigation: false\n }, '#collapsed-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n overflowMode: 'Wrap',\n enableNavigation: false\n }, '#wrap-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n overflowMode: 'Scroll',\n enableNavigation: false\n }, '#scroll-mode');\n\n // To refresh all Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName(\"e-breadcrumb\");\n for (var j = 0; j < breadcrumbs.length; j++) {\n breadcrumb = breadcrumbs[j];\n breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n }\n };\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Overflow Mode - Hidden</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"default-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Menu</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"menu-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Collapsed</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"collapsed-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Wrap</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav style=\"width:255px;\" id=\"wrap-mode\"></nav>\n </div>\n </div> \n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Scroll</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav style=\"width:300px;\" id=\"scroll-mode\"></nav>\n </div>\n </div>\n </div>\n</div>\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n var overflowItems = [\n {\n text: \"Home\",\n url: \"./\"\n },\n {\n text: \"Breadcrumb\",\n url: \"./breadcrumb\"\n },\n {\n text: \"Default\",\n url: \"./breadcrumb/default\"\n },\n {\n text: \"Icons\",\n url: \"./breadcrumb/icons\"\n },\n {\n text: \"Navigation\",\n url: \"./breadcrumb/navigation\"\n },\n {\n text: \"Overflow\",\n url: \"./breadcrumb/overflow\"\n }\n ];\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Hidden',\n enableNavigation: false\n }, '#default-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Menu',\n enableNavigation: false\n }, '#menu-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Collapsed',\n enableNavigation: false\n }, '#collapsed-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n overflowMode: 'Wrap',\n enableNavigation: false\n }, '#wrap-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n overflowMode: 'Scroll',\n enableNavigation: false\n }, '#scroll-mode');\n\n // To refresh all Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName(\"e-breadcrumb\");\n for (var j = 0; j < breadcrumbs.length; j++) {\n breadcrumb = breadcrumbs[j];\n breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n }\n };\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -60,7 +60,7 @@
|
|||
This sample illustrates a customization of feature bar and comparative bar type in terms of color and width
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<div id="description">
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a feature bar or comparative bar on the bullet chart.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n\n .prop-text {\n font-size: small\n }\n\n tr {\n height: 50px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for legend of bullet chart.\n */\n\n var chart = new ej.charts.BulletChart({\n width: ej.base.Browser.isDevice ? '100%' : '70%',\n tooltip: { enable: true },\n dataSource: [{ value: 25, target: [20, 26, 28] }],\n valueField: 'value',\n targetField: 'target',\n animation: { enable: false },\n ranges: [{ end: 8, color: '#CA4218', name: 'Poor' },\n { end: 18, color: '#EFC820', name: 'Avg' },\n { end: 30, color: '#599C20', name: 'Good' }\n ],\n height: '160',\n labelFormat: '{value}K',\n minimum: 0, maximum: 30, interval: 5,\n title: 'Package Downloads',\n subtitle: 'in Thousands',\n legendSettings: { visible: true },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');\n },\n legendRender: function (args) {\n if (args.text === 'Target_0') {\n args.text = 'Previous Target';\n }\n if (args.text === 'Target_1') {\n args.text = 'Current Target';\n }\n if (args.text === 'Target_2') {\n args.text = 'Future Target';\n }\n }\n });\n chart.appendTo('#container');\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"container\" align=\"center\"></div>\n</div>\n\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n\n .prop-text {\n font-size: small\n }\n\n tr {\n height: 50px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for legend of bullet chart.\n */\n\n var chart = new ej.charts.BulletChart({\n width: ej.base.Browser.isDevice ? '100%' : '70%',\n tooltip: { enable: true },\n dataSource: [{ value: 25, target: [20, 26, 28] }],\n valueField: 'value',\n targetField: 'target',\n animation: { enable: false },\n ranges: [{ end: 8, color: '#CA4218', name: 'Poor' },\n { end: 18, color: '#EFC820', name: 'Avg' },\n { end: 30, color: '#599C20', name: 'Good' }\n ],\n height: '160',\n labelFormat: '{value}K',\n minimum: 0, maximum: 30, interval: 5,\n title: 'Package Downloads',\n subtitle: 'in Thousands',\n legendSettings: { visible: true },\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');\n },\n legendRender: function (args) {\n if (args.text === 'Target_0') {\n args.text = 'Previous Target';\n }\n if (args.text === 'Target_1') {\n args.text = 'Current Target';\n }\n if (args.text === 'Target_2') {\n args.text = 'Future Target';\n }\n }\n });\n chart.appendTo('#container');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-md-8\">\n <div id=\"orientation\" align=\"center\"></div>\n</div>\n<div class=\"col-md-4 property-section\">\n <div class=\"property-panel-header\">Properties</div>\n <table title=\"Properties\" style=\"width: 100%; height: 100%;\">\n <tbody><tr>\n <td style=\"width: 60%\">\n <div>Orientation</div>\n </td>\n <td style=\"width: 40%\">\n <div id=\"orientationSelect\">\n </div>\n </td>\n </tr>\n </tbody></table>\n</div>\n\n\n\n<style>\n#control-container {\n padding: 0px !important;\n}\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for bullet chart with Orientation.\n */\n\n var chart = new ej.charts.BulletChart({\n width: '19%',\n tooltip: { enable: true },\n dataSource: [{ value: 23, target: 27, name: 'Product A' }],\n valueField: 'value',\n targetField: 'target',\n categoryField: 'name',\n animation: { enable: false },\n margin: { left: ej.base.Browser.isDevice ? 10 : 10 },\n ranges: [{ end: 20 },\n { end: 25 },\n { end: 30 }\n ],\n height: '400',\n minimum: 0, maximum: 30, interval: 5,\n labelFormat: '{value}%',\n orientation: 'Vertical',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');\n }\n });\n chart.appendTo('#orientation');\n\n var changeOrientation = new ej.dropdowns.DropDownList({\n dataSource: ['Vertical', 'Horizontal'],\n value : 'Vertical',\n change : function(args) {\n if (args.value === 'Horizontal') {\n chart.width = '80%';\n chart.height = '100px';\n } else {\n chart.width = '19%';\n chart.height = '400px';\n }\n chart.orientation = args.value;\n chart.refresh();\n }\n });\n changeOrientation.appendTo('#orientationSelect');\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-md-8\">\n <div id=\"orientation\" align=\"center\"></div>\n</div>\n<div class=\"col-md-4 property-section\">\n <div class=\"property-panel-header\">Properties</div>\n <table title=\"Properties\" style=\"width: 100%; height: 100%;\">\n <tbody><tr>\n <td style=\"width: 60%\">\n <div>Orientation</div>\n </td>\n <td style=\"width: 40%\">\n <div id=\"orientationSelect\">\n </div>\n </td>\n </tr>\n </tbody></table>\n</div>\n\n\n\n<style>\n#control-container {\n padding: 0px !important;\n}\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for bullet chart with Orientation.\n */\n\n var chart = new ej.charts.BulletChart({\n width: '19%',\n tooltip: { enable: true },\n dataSource: [{ value: 23, target: 27, name: 'Product A' }],\n valueField: 'value',\n targetField: 'target',\n categoryField: 'name',\n animation: { enable: false },\n margin: { left: ej.base.Browser.isDevice ? 10 : 10 },\n ranges: [{ end: 20 },\n { end: 25 },\n { end: 30 }\n ],\n height: '400',\n minimum: 0, maximum: 30, interval: 5,\n labelFormat: '{value}%',\n orientation: 'Vertical',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');\n }\n });\n chart.appendTo('#orientation');\n\n var changeOrientation = new ej.dropdowns.DropDownList({\n dataSource: ['Vertical', 'Horizontal'],\n value : 'Vertical',\n change : function(args) {\n if (args.value === 'Horizontal') {\n chart.width = '80%';\n chart.height = '100px';\n } else {\n chart.width = '19%';\n chart.height = '400px';\n }\n chart.orientation = args.value;\n chart.refresh();\n }\n });\n changeOrientation.appendTo('#orientationSelect');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"righttoleft\" align=\"center\"></div>\n</div>\n\n \n<style>\n#control-container {\n padding: 0px !important;\n}\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bullet chart in RTL mode.\n */\n\n var bullet = new ej.charts.BulletChart({\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n tooltip: { enable: true },\n dataSource: [{ value: 270, target: 250 }],\n valueField: 'value',\n targetField: 'target',\n animation: { enable: false },\n ranges: [{ end: 150 },\n { end: 250 },\n { end: 300 }\n ],\n minimum: 0, maximum: 300, interval: 50,\n title: 'Revenue YTD',\n subtitle: '$ in Thousands',\n labelFormat: '${value}K',\n enableRtl: true,\n titleStyle: { textAlignment: 'Center', },\n orientation: 'Horizontal',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');\n }\n });\n bullet.appendTo('#righttoleft');\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"righttoleft\" align=\"center\"></div>\n</div>\n\n \n<style>\n#control-container {\n padding: 0px !important;\n}\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bullet chart in RTL mode.\n */\n\n var bullet = new ej.charts.BulletChart({\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n tooltip: { enable: true },\n dataSource: [{ value: 270, target: 250 }],\n valueField: 'value',\n targetField: 'target',\n animation: { enable: false },\n ranges: [{ end: 150 },\n { end: 250 },\n { end: 300 }\n ],\n minimum: 0, maximum: 300, interval: 50,\n title: 'Revenue YTD',\n subtitle: '$ in Thousands',\n labelFormat: '${value}K',\n enableRtl: true,\n titleStyle: { textAlignment: 'Center', },\n orientation: 'Horizontal',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');\n }\n });\n bullet.appendTo('#righttoleft');\n"}
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "bullet-chart",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "bullet-chart",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
|
|
@ -22,7 +21,6 @@
|
|||
{
|
||||
"url": "multiple-data",
|
||||
"name": "Multiple Data",
|
||||
"type": "update",
|
||||
"description":"This demo for Essential JS2 Bullet Chart control shows the default rendering of bullet chart with multiple local data values.",
|
||||
"category": "Bullet Chart",
|
||||
"api": {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"tooltip\" align=\"center\"></div>\n</div>\n\n\n<script id=\"Tooltip\" type=\"text/x-template\">\n <div id=\"wrap\">\n <table style=\"width:100%; background-color: #ffffff; border-spacing: 0px; border-collapse:separate; border: 1px solid grey; border-radius:10px; padding-top: 5px; padding-bottom:5px\">\n <tr>\n <td style=\"font-weight:bold; color:black; padding-left: 5px;padding-top: 2px;padding-bottom: 2px;\">Sales</td>\n </tr>\n <tr>\n <td style=\"padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;\">Target : ${target}K </td>\n </tr>\n <tr>\n <td style=\"padding-left: 5px; color:black; padding-right: 5px\">Current : ${value} </td>\n </tr>\n \n </table>\n </div>\n</script>\n\n<style>\n#control-container {\n padding: 0px !important;\n}\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for tooltip template in Bullet chart.\n */\n\n var bullet = new ej.charts.BulletChart({\n width: ej.base.Browser.isDevice ? '100%' : '70%',\n tooltip: { enable: true, template : '#Tooltip' },\n dataSource: [{ value: 70, target: 50 }],\n valueField: 'value',\n targetField: 'target',\n animation: { enable: false },\n ranges: [{ end: 30, color: '#599C20' },\n { end: 60, color: '#EFC820' },\n { end: 100, color: '#CA4218' }\n ],\n minimum: 0, maximum: 100, interval: 10,\n title: 'Revenue YTD',\n subtitle: 'US $ (in Thousands)',\n labelFormat: '${value}K',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');\n }\n });\n bullet.appendTo('#tooltip');\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"tooltip\" align=\"center\"></div>\n</div>\n\n\n<script id=\"Tooltip\" type=\"text/x-template\">\n <div id=\"wrap\">\n <table style=\"width:100%; background-color: #ffffff; border-spacing: 0px; border-collapse:separate; border: 1px solid grey; border-radius:10px; padding-top: 5px; padding-bottom:5px\">\n <tr>\n <td style=\"font-weight:bold; color:black; padding-left: 5px;padding-top: 2px;padding-bottom: 2px;\">Sales</td>\n </tr>\n <tr>\n <td style=\"padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;\">Target : ${target}K </td>\n </tr>\n <tr>\n <td style=\"padding-left: 5px; color:black; padding-right: 5px\">Current : ${value} </td>\n </tr>\n \n </table>\n </div>\n</script>\n\n<style>\n#control-container {\n padding: 0px !important;\n}\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for tooltip template in Bullet chart.\n */\n\n var bullet = new ej.charts.BulletChart({\n width: ej.base.Browser.isDevice ? '100%' : '70%',\n tooltip: { enable: true, template : '#Tooltip' },\n dataSource: [{ value: 70, target: 50 }],\n valueField: 'value',\n targetField: 'target',\n animation: { enable: false },\n ranges: [{ end: 30, color: '#599C20' },\n { end: 60, color: '#EFC820' },\n { end: 100, color: '#CA4218' }\n ],\n minimum: 0, maximum: 100, interval: 10,\n title: 'Revenue YTD',\n subtitle: 'US $ (in Thousands)',\n labelFormat: '${value}K',\n load: function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +\n selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');\n }\n });\n bullet.appendTo('#tooltip');\n"}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<td style="font-weight:bold; color:black; padding-left: 5px;padding-top: 2px;padding-bottom: 2px;">Sales</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;">Target : ${target}K </td>
|
||||
<td style="padding-left: 5px; color:black; padding-right: 5px; padding-bottom: 2px;">Target : ${target}K </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 5px; color:black; padding-right: 5px">Current : ${value} </td>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\" style=\"overflow:auto\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n min: new Date('05/05/2017'),\n max: new Date('05/27/2017'),\n change: startDate\n });\n calendar.appendTo('#calendar');\n function startDate(args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\" style=\"overflow:auto\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n min: new Date('05/05/2017'),\n max: new Date('05/27/2017'),\n change: startDate\n });\n calendar.appendTo('#calendar');\n function startDate(args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\" style=\"overflow:auto\">\n <div id=\"container\">\n <div id=\"calendar\"></div>\n <br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n change: function (args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n });\n calendar.appendTo('#calendar');\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\" style=\"overflow:auto\">\n <div id=\"container\">\n <div id=\"calendar\"></div>\n <br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n change: function (args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n });\n calendar.appendTo('#calendar');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\" style=\"overflow:auto\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n renderDayCell: disableDate, change: valueChange\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n function disableDate(args) {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\" style=\"overflow:auto\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n renderDayCell: disableDate, change: valueChange\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n (document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n function disableDate(args) {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"container\" style=\"overflow:auto\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n\n </div>\n </div>\n</div>\n\n\n<style>\n\n .e-calendar .e-content td.e-selected span.e-day.sf-icon-cup.highlight:before,\n .e-calendar .e-content td.e-selected span.e-day.sf-icon-start.highlight:before {\n color: #ffff !important;\n }\n\n .sf-icon-cup:before {\n content: '\\e724';\n color: #0b0bd9a1;\n position: relative;\n top: 2px;\n left: -2px;\n }\n\n .highcontrast .sf-icon-cup:before,\n .material-dark .sf-icon-cup:before,\n .material3-dark .sf-icon-cup:before,\n .fabric-dark .sf-icon-cup:before,\n .bootstrap-dark .sf-icon-cup:before,\n .bootstrap5-dark .sf-icon-cup:before,\n .tailwind-dark .sf-icon-cup:before,\n .fluent-dark .sf-icon-cup:before {\n color: #ff7500;\n }\n\n .highcontrast .sf-icon-start:before,\n .material-dark .sf-icon-start:before,\n .material3-dark .sf-icon-start:before,\n .fabric-dark .sf-icon-start:before,\n .bootstrap-dark .sf-icon-start:before,\n .bootstrap5-dark .sf-icon-start:before,\n .tailwind-dark .sf-icon-start:before,\n .fluent-dark .sf-icon-start:before {\n color: #ff7500;\n }\n\n .sf-icon-start:before {\n content: '\\e708';\n color: #0b0bd9a1;\n position: relative;\n top: 2px;\n left: -2px;\n }\n\n .e-customStyle span.e-icons.highlight {\n margin-top: -13px;\n display: block;\n margin-left: 4px;\n }\n\n .e-customStyle .e-other-month span.e-icons.highlight:before {\n content: \"\";\n }\n\n .e-customStyle .e-selected span.e-icons.highlight:before {\n color: #fff;\n }\n\n .e-customStyle span.e-icons.highlight,\n .e-customStyle .e-calendar .e-content span.special,\n .e-customStyle .e-calendar .e-content span.daycell {\n font-weight: bold;\n font-size: 14px;\n }\n\n .e-customStyle .e-calendar .e-content span.special {\n border-radius: 50%;\n }\n\n</style></div></body></html>","index.js":"{{ripple}}\n var span;\n var addClass = ej.base.addClass;\n var calendar = new ej.calendars.Calendar({\n change: valueChange,\n renderDayCell: disableDate,\n calendarMode: 'Islamic'\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n /*Displays selected date in the label*/\n document.getElementById('date_label').textContent = 'Selected Value: ' + this.globalize.formatDate(args.value, { type: 'date', format: 'ddMMMyyyy', calendar: 'islamic' });\n }\n function disableDate(args) {\n /*Date need to be disabled*/\n if (args.date.getDate() === 2 || args.date.getDate() === 10 || args.date.getDate() === 28) {\n args.isDisabled = true;\n }\n if (args.date.getDate() === 13) {\n span = document.createElement('span');\n args.element.children[0].className += 'e-day sf-icon-cup highlight';\n addClass([args.element], ['special', 'e-day', 'dinner']);\n args.element.setAttribute('data-val', ' Dinner !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 23) {\n args.element.children[0].className += 'e-day sf-icon-start highlight';\n span = document.createElement('span');\n span.setAttribute('class', 'sf-icons-star highlight');\n //use the imported method to add the multiple classes to the given element\n addClass([args.element], ['special', 'e-day', 'holiday']);\n args.element.setAttribute('data-val', ' Holiday !');\n args.element.appendChild(span);\n }\n \n }\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"container\" style=\"overflow:auto\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n\n </div>\n </div>\n</div>\n\n\n<style>\n\n .e-calendar .e-content td.e-selected span.e-day.sf-icon-cup.highlight:before,\n .e-calendar .e-content td.e-selected span.e-day.sf-icon-start.highlight:before {\n color: #ffff !important;\n }\n\n .sf-icon-cup:before {\n content: '\\e724';\n color: #0b0bd9a1;\n position: relative;\n top: 2px;\n left: -2px;\n }\n\n .highcontrast .sf-icon-cup:before,\n .material-dark .sf-icon-cup:before,\n .material3-dark .sf-icon-cup:before,\n .fabric-dark .sf-icon-cup:before,\n .bootstrap-dark .sf-icon-cup:before,\n .bootstrap5-dark .sf-icon-cup:before,\n .tailwind-dark .sf-icon-cup:before,\n .fluent-dark .sf-icon-cup:before {\n color: #ff7500;\n }\n\n .highcontrast .sf-icon-start:before,\n .material-dark .sf-icon-start:before,\n .material3-dark .sf-icon-start:before,\n .fabric-dark .sf-icon-start:before,\n .bootstrap-dark .sf-icon-start:before,\n .bootstrap5-dark .sf-icon-start:before,\n .tailwind-dark .sf-icon-start:before,\n .fluent-dark .sf-icon-start:before {\n color: #ff7500;\n }\n\n .sf-icon-start:before {\n content: '\\e708';\n color: #0b0bd9a1;\n position: relative;\n top: 2px;\n left: -2px;\n }\n\n .e-customStyle span.e-icons.highlight {\n margin-top: -13px;\n display: block;\n margin-left: 4px;\n }\n\n .e-customStyle .e-other-month span.e-icons.highlight:before {\n content: \"\";\n }\n\n .e-customStyle .e-selected span.e-icons.highlight:before {\n color: #fff;\n }\n\n .e-customStyle span.e-icons.highlight,\n .e-customStyle .e-calendar .e-content span.special,\n .e-customStyle .e-calendar .e-content span.daycell {\n font-weight: bold;\n font-size: 14px;\n }\n\n .e-customStyle .e-calendar .e-content span.special {\n border-radius: 50%;\n }\n\n</style></div></body></html>","index.js":"{{ripple}}\n var span;\n var addClass = ej.base.addClass;\n var calendar = new ej.calendars.Calendar({\n change: valueChange,\n renderDayCell: disableDate,\n calendarMode: 'Islamic'\n });\n calendar.appendTo('#calendar');\n function valueChange(args) {\n /*Displays selected date in the label*/\n document.getElementById('date_label').textContent = 'Selected Value: ' + this.globalize.formatDate(args.value, { type: 'date', format: 'ddMMMyyyy', calendar: 'islamic' });\n }\n function disableDate(args) {\n /*Date need to be disabled*/\n if (args.date.getDate() === 2 || args.date.getDate() === 10 || args.date.getDate() === 28) {\n args.isDisabled = true;\n }\n if (args.date.getDate() === 13) {\n span = document.createElement('span');\n args.element.children[0].className += 'e-day sf-icon-cup highlight';\n addClass([args.element], ['special', 'e-day', 'dinner']);\n args.element.setAttribute('data-val', ' Dinner !');\n args.element.appendChild(span);\n }\n if (args.date.getDate() === 23) {\n args.element.children[0].className += 'e-day sf-icon-start highlight';\n span = document.createElement('span');\n span.setAttribute('class', 'sf-icons-star highlight');\n //use the imported method to add the multiple classes to the given element\n addClass([args.element], ['special', 'e-day', 'holiday']);\n args.element.setAttribute('data-val', ' Holiday !');\n args.element.appendChild(span);\n }\n \n }\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\" style=\"overflow:auto\">\n <div id=\"container\">\n <div id=\"calendar\"></div>\n <br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n start: 'Year',\n depth: 'Year',\n change: valueChange\n });\n calendar.appendTo('#calendar');\n var Intl = new ej.base.Internationalization();\n function valueChange(args) {\n var value = Intl.formatDate(args.value, { type: 'dateTime', format: 'MMMM y' });\n document.getElementById('date_label').textContent = 'Selected Value: ' + value;\n }\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\" style=\"overflow:auto\">\n <div id=\"container\">\n <div id=\"calendar\"></div>\n <br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var calendar = new ej.calendars.Calendar({\n start: 'Year',\n depth: 'Year',\n change: valueChange\n });\n calendar.appendTo('#calendar');\n var Intl = new ej.base.Internationalization();\n function valueChange(args) {\n var value = Intl.formatDate(args.value, { type: 'dateTime', format: 'MMMM y' });\n document.getElementById('date_label').textContent = 'Selected Value: ' + value;\n }\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12\">\n <div class=\"col-lg-7 control-section sb-property-border\">\n <div id=\"control_wrapper\" class=\"col-lg-6 col-sm-8 col-md-8 multiselectWrapper\">\n <div id=\"container\" style=\"overflow:auto\"></div>\n <div id=\"calendar\"></div>\n <br>\n </div>\n </div>\n <div class=\"col-lg-5\">\n <label style=\"padding-top:22px\">Selected values</label>\n <div class=\"content-value\">\n <div id=\"multiselect\"></div>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var currentYear = new Date().getFullYear();\n var currentMonth = new Date().getMonth();\n var calendar = new ej.calendars.Calendar({\n isMultiSelection: true,\n values: [new Date(currentYear, currentMonth, 10), new Date(currentYear, currentMonth, 15), new Date(currentYear, currentMonth, 25)],\n change: changeValue,\n created: changeValue\n });\n calendar.appendTo('#calendar');\n function changeValue() { \n var element = document.getElementById('multiselect');\n element.innerHTML = '';\n for (var index = 0; index < this.values.length; index++) {\n element.insertBefore(document.createTextNode(this.values[index]), element.childNodes[0]);\n element.insertBefore(document.createElement('br'), element.childNodes[0]);\n }\n }\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12\">\n <div class=\"col-lg-7 control-section sb-property-border\">\n <div id=\"control_wrapper\" class=\"col-lg-6 col-sm-8 col-md-8 multiselectWrapper\">\n <div id=\"container\" style=\"overflow:auto\"></div>\n <div id=\"calendar\"></div>\n <br>\n </div>\n </div>\n <div class=\"col-lg-5\">\n <label style=\"padding-top:22px\">Selected values</label>\n <div class=\"content-value\">\n <div id=\"multiselect\"></div>\n </div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}\n var currentYear = new Date().getFullYear();\n var currentMonth = new Date().getMonth();\n var calendar = new ej.calendars.Calendar({\n isMultiSelection: true,\n values: [new Date(currentYear, currentMonth, 10), new Date(currentYear, currentMonth, 15), new Date(currentYear, currentMonth, 25)],\n change: changeValue,\n created: changeValue\n });\n calendar.appendTo('#calendar');\n function changeValue() { \n var element = document.getElementById('multiselect');\n element.innerHTML = '';\n for (var index = 0; index < this.values.length; index++) {\n element.insertBefore(document.createTextNode(this.values[index]), element.childNodes[0]);\n element.insertBefore(document.createElement('br'), element.childNodes[0]);\n }\n }\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -139,6 +139,18 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
.material3 .card-control-section.swipe_card_layout .e-card:hover,
|
||||
.material3 .card-control-section.swipe_card_layout .e-card:focus,
|
||||
.material3 .card-control-section.swipe_card_layout .e-card:active {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.material3-dark .card-control-section.swipe_card_layout .e-card:hover,
|
||||
.material3-dark .card-control-section.swipe_card_layout .e-card:focus,
|
||||
.material3-dark .card-control-section.swipe_card_layout .e-card:active {
|
||||
background-color: #191c1f;
|
||||
}
|
||||
|
||||
.fabric .card-control-section.swipe_card_layout .e-card:hover,
|
||||
.highcontrast .card-control-section.swipe_card_layout .e-card:hover {
|
||||
border-width: 1px;
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section default-carousel-section\">\n <div class=\"col-lg-12 content-wrapper\">\n <div class=\"carousel-sample\">\n <div id=\"carousel\"></div>\n </div>\n </div>\n</div>\n<style>\n .default-carousel-section .carousel-sample {\n margin: 0 auto 2em;\n max-width: 500px;\n height: 300px;\n }\n\n .default-carousel .e-carousel-items .e-carousel-item .img-container {\n height: 100%;\n }\n\n .default-carousel .e-carousel-items .e-carousel-item .img-caption {\n bottom: 5em;\n color: #fff;\n font-size: 12pt;\n height: 2em;\n position: relative;\n padding: 0.3em 1em;\n text-align: center;\n width: 100%;\n }\n</style>\n\n</div></body></html>","index.js":"{{ripple}}\n var carouselObj = new ej.navigations.Carousel({\n cssClass: 'default-carousel',\n items: [\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/bridge.jpg\" alt=\"bridge\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Golden Gate Bridge, San Francisco</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/trees.jpg\" alt=\"spring_trees\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Spring Flower Trees</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/waterfall.jpg\" alt=\"waterfall\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Oddadalen Waterfalls, Norway</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/sea.jpg\" alt=\"sea\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Anse Source d`Argent, Seychelles</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/rocks.jpeg\" alt=\"rocks\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Stonehenge, England</figcaption></figure>' }\n ]\n });\n carouselObj.appendTo('#carousel');\n\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section default-carousel-section\">\n <div class=\"col-lg-12 content-wrapper\">\n <div class=\"carousel-sample\">\n <div id=\"carousel\"></div>\n </div>\n </div>\n</div>\n<style>\n .default-carousel-section .carousel-sample {\n margin: 0 auto 2em;\n max-width: 500px;\n height: 300px;\n }\n\n .default-carousel .e-carousel-items .e-carousel-item .img-container {\n height: 100%;\n }\n\n .default-carousel .e-carousel-items .e-carousel-item .img-caption {\n bottom: 5em;\n color: #fff;\n font-size: 12pt;\n height: 2em;\n position: relative;\n padding: 0.3em 1em;\n text-align: center;\n width: 100%;\n }\n</style>\n\n</div></body></html>","index.js":"{{ripple}}\n var carouselObj = new ej.navigations.Carousel({\n cssClass: 'default-carousel',\n items: [\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/bridge.jpg\" alt=\"bridge\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Golden Gate Bridge, San Francisco</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/trees.jpg\" alt=\"spring_trees\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Spring Flower Trees</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/waterfall.jpg\" alt=\"waterfall\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Oddadalen Waterfalls, Norway</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/sea.jpg\" alt=\"sea\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Anse Source d`Argent, Seychelles</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/rocks.jpeg\" alt=\"rocks\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Stonehenge, England</figcaption></figure>' }\n ]\n });\n carouselObj.appendTo('#carousel');\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section partial-carousel-section\">\n <div class=\"col-lg-12 content-wrapper\">\n <div class=\"carousel-sample\">\n <div id=\"carousel\"></div>\n </div>\n </div>\n</div>\n<style>\n .partial-carousel-section .carousel-sample {\n margin: 0 auto 2em;\n max-width: 650px;\n height: 300px;\n }\n\n .partial-carousel .e-carousel-items .e-carousel-item .img-container {\n margin: 0 10px;\n width: 100%;\n height: 100%;\n }\n\n .partial-carousel .e-carousel-items .e-carousel-item .img-caption {\n bottom: 4em;\n color: #fff;\n font-size: 12pt;\n height: 2em;\n position: relative;\n padding: 0.3em 1em;\n text-align: center;\n width: 100%;\n }\n\n @media screen and (max-width: 480px) {\n .partial-carousel-section .carousel-sample {\n height: 110px;\n }\n\n .partial-carousel .e-carousel-items .e-carousel-item .img-caption {\n position: absolute;\n top: 0;\n font-size: 12px;\n text-align: left;\n }\n }\n</style>\n\n</div></body></html>","index.js":"{{ripple}}\n var carouselObj = new ej.navigations.Carousel({\n cssClass: 'partial-carousel',\n items: [\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/bridge.jpg\" alt=\"bridge\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Golden Gate Bridge, San Francisco</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/trees.jpg\" alt=\"trees\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Spring Flower Trees</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/waterfall.jpg\" alt=\"waterfall\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Oddadalen Waterfalls, Norway</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/sea.jpg\" alt=\"sea\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Anse Source d`Argent, Seychelles</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/rocks.jpeg\" alt=\"rocks\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Stonehenge, England</figcaption></figure>' }\n ],\n partialVisible: true\n });\n carouselObj.appendTo('#carousel');\n\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section partial-carousel-section\">\n <div class=\"col-lg-12 content-wrapper\">\n <div class=\"carousel-sample\">\n <div id=\"carousel\"></div>\n </div>\n </div>\n</div>\n<style>\n .partial-carousel-section .carousel-sample {\n margin: 0 auto 2em;\n max-width: 650px;\n height: 300px;\n }\n\n .partial-carousel .e-carousel-items .e-carousel-item .img-container {\n margin: 0 10px;\n width: 100%;\n height: 100%;\n }\n\n .partial-carousel .e-carousel-items .e-carousel-item .img-caption {\n bottom: 4em;\n color: #fff;\n font-size: 12pt;\n height: 2em;\n position: relative;\n padding: 0.3em 1em;\n text-align: center;\n width: 100%;\n }\n\n @media screen and (max-width: 480px) {\n .partial-carousel-section .carousel-sample {\n height: 110px;\n }\n\n .partial-carousel .e-carousel-items .e-carousel-item .img-caption {\n position: absolute;\n top: 0;\n font-size: 12px;\n text-align: left;\n }\n }\n</style>\n\n</div></body></html>","index.js":"{{ripple}}\n var carouselObj = new ej.navigations.Carousel({\n cssClass: 'partial-carousel',\n items: [\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/bridge.jpg\" alt=\"bridge\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Golden Gate Bridge, San Francisco</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/trees.jpg\" alt=\"trees\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Spring Flower Trees</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/waterfall.jpg\" alt=\"waterfall\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Oddadalen Waterfalls, Norway</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/sea.jpg\" alt=\"sea\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Anse Source d`Argent, Seychelles</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/rocks.jpeg\" alt=\"rocks\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Stonehenge, England</figcaption></figure>' }\n ],\n partialVisible: true\n });\n carouselObj.appendTo('#carousel');\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/accumulation-distribution-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"adi-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for ADI Indicator\n */\n this.renderChartADI = function () {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime', intervalType: \"Months\",\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n minimum: 50, maximum: 170,\n plotOffset: 25,\n interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,\n interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution (in Billion)',\n stripLines: [\n {\n start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,\n opacity: 0.1, zIndex: 'Behind'\n }\n ]\n }],\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n series: [{\n dataSource: chartValue, width: 2,\n xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n indicators: [{\n type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n period: 3, \n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'X',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n axisLabelRender: function (args) {\n if (args.axis.name === 'secondary') {\n var value = Number(args.text) / 1000000000;\n args.text = String(value) + 'B';\n }\n },\n chartArea: { border: { width: 0 } },\n title: 'AAPL Stock Price 2012 - 2017',\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n\n legendSettings: {\n visible: false\n }\n });\n chart.appendTo('#adi-container');\n };\n \n renderChartADI();\n \n \n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/accumulation-distribution-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"adi-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for ADI Indicator\n */\n this.renderChartADI = function () {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime', intervalType: \"Months\",\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true }\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n minimum: 50, maximum: 170,\n plotOffset: 25,\n interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,\n interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution (in Billion)',\n stripLines: [\n {\n start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,\n opacity: 0.1, zIndex: 'Behind'\n }\n ]\n }],\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n series: [{\n dataSource: chartValue, width: 2,\n xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle', animation: { enable: true }\n }],\n indicators: [{\n type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n period: 3, \n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'X',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n axisLabelRender: function (args) {\n if (args.axis.name === 'secondary') {\n var value = Number(args.text) / 1000000000;\n args.text = String(value) + 'B';\n }\n },\n chartArea: { border: { width: 0 } },\n title: 'AAPL Stock Price 2012 - 2017',\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n\n legendSettings: {\n visible: false\n }\n });\n chart.appendTo('#adi-container');\n };\n \n renderChartADI();\n \n \n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/area-empty/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"area-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Area Series with empty points\n */\n \n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime', labelFormat: 'dd MMM', majorGridLines: { width: 0 }, minimum: new Date(2021, 10, 14), maximum: new Date(2021, 10, 23), edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}MB', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, minimum: 0, maximum: 5, interval: 1 \n },\n chartArea: {\n border: {\n width: 0\n }\n },//Initializing Chart Series\n series: [\n {\n type: 'Area',\n dataSource: [{ Period: new Date(2021, 10, 14), US_InflationRate: 2.2, IN_InflationRate: 0.8 }, { Period: new Date(2021, 10, 15), US_InflationRate: 2.0, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 16), US_InflationRate: 2.8, IN_InflationRate: 1.8 },\n { Period: new Date(2021, 10, 17), US_InflationRate: 1.6, IN_InflationRate: 2.1 }, { Period: new Date(2021, 10, 18), US_InflationRate: 2.3, IN_InflationRate: null }, { Period: new Date(2021, 10, 19), US_InflationRate: 2.5, IN_InflationRate: 2.3 },\n { Period: new Date(2021, 10, 20), US_InflationRate: 2.9, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 21), US_InflationRate: 1.1, IN_InflationRate: 1.5 }, { Period: new Date(2021, 10, 22), US_InflationRate: 1.4, IN_InflationRate: 0.5 },\n { Period: new Date(2021, 10, 23), US_InflationRate: 1.1, IN_InflationRate: 1.3 }],\n xName: 'Period', width: 2,\n yName: 'US_InflationRate', name: 'Andrew',\n opacity: 0.5, border: { width: 2 },\n marker: { visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }\n },\n {\n type: 'Area',\n dataSource: [{ Period: new Date(2021, 10, 14), US_InflationRate: 2.2, IN_InflationRate: 0.8 }, { Period: new Date(2021, 10, 15), US_InflationRate: 2.0, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 16), US_InflationRate: 2.8, IN_InflationRate: 1.8 },\n { Period: new Date(2021, 10, 17), US_InflationRate: 1.6, IN_InflationRate: 2.1 }, { Period: new Date(2021, 10, 18), US_InflationRate: 2.3, IN_InflationRate: null }, { Period: new Date(2021, 10, 19), US_InflationRate: 2.5, IN_InflationRate: 2.3 },\n { Period: new Date(2021, 10, 20), US_InflationRate: 2.9, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 21), US_InflationRate: 1.1, IN_InflationRate: 1.5 }, { Period: new Date(2021, 10, 22), US_InflationRate: 1.4, IN_InflationRate: 0.5 },\n { Period: new Date(2021, 10, 23), US_InflationRate: 1.1, IN_InflationRate: 1.3 }],\n xName: 'Period', width: 2,\n yName: 'IN_InflationRate', name: 'Thomas',\n opacity: 0.5, border: { width: 2 },\n marker: { visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }\n }\n ],\n //Initializing Chart Title\n title: 'Data Consumption',\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },\n legendSettings: {enableHighlight:true},\n\n });\n chart.appendTo('#area-container'); \n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/area-empty/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"area-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Area Series with empty points\n */\n \n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime', labelFormat: 'dd MMM', majorGridLines: { width: 0 }, minimum: new Date(2021, 10, 14), maximum: new Date(2021, 10, 23), edgeLabelPlacement: 'Shift'\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}MB', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, minimum: 0, maximum: 5, interval: 1 \n },\n chartArea: {\n border: {\n width: 0\n }\n },//Initializing Chart Series\n series: [\n {\n type: 'Area',\n dataSource: [{ Period: new Date(2021, 10, 14), US_InflationRate: 2.2, IN_InflationRate: 0.8 }, { Period: new Date(2021, 10, 15), US_InflationRate: 2.0, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 16), US_InflationRate: 2.8, IN_InflationRate: 1.8 },\n { Period: new Date(2021, 10, 17), US_InflationRate: 1.6, IN_InflationRate: 2.1 }, { Period: new Date(2021, 10, 18), US_InflationRate: 2.3, IN_InflationRate: null }, { Period: new Date(2021, 10, 19), US_InflationRate: 2.5, IN_InflationRate: 2.3 },\n { Period: new Date(2021, 10, 20), US_InflationRate: 2.9, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 21), US_InflationRate: 1.1, IN_InflationRate: 1.5 }, { Period: new Date(2021, 10, 22), US_InflationRate: 1.4, IN_InflationRate: 0.5 },\n { Period: new Date(2021, 10, 23), US_InflationRate: 1.1, IN_InflationRate: 1.3 }],\n xName: 'Period', width: 2,\n yName: 'US_InflationRate', name: 'Andrew',\n opacity: 0.5, border: { width: 2 },\n marker: { visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }\n },\n {\n type: 'Area',\n dataSource: [{ Period: new Date(2021, 10, 14), US_InflationRate: 2.2, IN_InflationRate: 0.8 }, { Period: new Date(2021, 10, 15), US_InflationRate: 2.0, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 16), US_InflationRate: 2.8, IN_InflationRate: 1.8 },\n { Period: new Date(2021, 10, 17), US_InflationRate: 1.6, IN_InflationRate: 2.1 }, { Period: new Date(2021, 10, 18), US_InflationRate: 2.3, IN_InflationRate: null }, { Period: new Date(2021, 10, 19), US_InflationRate: 2.5, IN_InflationRate: 2.3 },\n { Period: new Date(2021, 10, 20), US_InflationRate: 2.9, IN_InflationRate: 1.7 }, { Period: new Date(2021, 10, 21), US_InflationRate: 1.1, IN_InflationRate: 1.5 }, { Period: new Date(2021, 10, 22), US_InflationRate: 1.4, IN_InflationRate: 0.5 },\n { Period: new Date(2021, 10, 23), US_InflationRate: 1.1, IN_InflationRate: 1.3 }],\n xName: 'Period', width: 2,\n yName: 'IN_InflationRate', name: 'Thomas',\n opacity: 0.5, border: { width: 2 },\n marker: { visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }\n }\n ],\n //Initializing Chart Title\n title: 'Data Consumption',\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n tooltip: { enable: true, format: '${point.x} : <b>${point.y}</b>' },\n legendSettings: {enableHighlight:true},\n\n });\n chart.appendTo('#area-container'); \n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/area-negative-point/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"area-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Area Series with empty points\n */\n \n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n edgeLabelPlacement: 'Shift',\n minimum:new Date(2017, 0, 1), maximum: new Date(2021, 0, 1), intervalType: 'Years'\n },\n //Initializing Primary Y Axis\n primaryYAxis: { \n labelFormat: '${value}',interval: 2000, maximum: 8000, minimum: -4000,\n lineStyle: { width: 0},\n majorTickLines: { width: 0}\n },\n chartArea: {\n border: {\n width: 0\n }\n },//Initializing Chart Series\n series: [\n {\n type: 'Area',\n dataSource: [\n { x: new Date(2017, 0, 1), y: 3000 }, { x: new Date(2018, 0, 1), y: 4000 },\n { x: new Date(2019, 0, 1), y: -4000 }, { x: new Date(2020, 0, 1), y: -2000 },\n { x: new Date(2021, 0, 1), y: 5000 }\n ],\n xName: 'x',\n width: 2,\n yName: 'y',marker: { visible : true,isFilled : true , width : 7 , height : 7 , shape : \"Circle\"},\n name: 'Company A',\n opacity: 0.75,border: { width: 2 },\n },\n {\n type: 'Area',\n dataSource: [\n { x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: 3000 },\n { x: new Date(2019, 0, 1), y: 4000 }, { x: new Date(2020, 0, 1), y: 2000 },\n { x: new Date(2021, 0, 1), y: 3000 }\n ],\n xName: 'x',\n width: 2,\n yName: 'y',\n name: 'Company B',marker: {visible:true, isFilled : true , width : 7 , height : 7 , shape : \"Diamond\"},\n opacity: 0.75,border: { width: 2 },\n },\n {\n type: 'Area',\n dataSource: [\n { x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: -1000 },\n { x: new Date(2019, 0, 1), y: -3000 }, { x: new Date(2020, 0, 1), y: 4000 },\n { x: new Date(2021, 0, 1), y: 1000 }\n ],\n xName: 'x', \n width: 2,\n yName: 'y',\n name: 'Company C',marker: {visible:true, isFilled : true , width : 5 , height : 5 , shape : \"Rectangle\"},\n opacity: 0.75,border: { width: 2 },\n },\n ],\n //Initializing Chart Title\n title: 'Profit and Loss',\n tooltip: {\n enable: true\n },\n legendSettings: { enableHighlight: true },\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n\n });\n chart.appendTo('#area-container');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/area-negative-point/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"area-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Area Series with empty points\n */\n \n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n edgeLabelPlacement: 'Shift',\n minimum:new Date(2017, 0, 1), maximum: new Date(2021, 0, 1), intervalType: 'Years'\n },\n //Initializing Primary Y Axis\n primaryYAxis: { \n labelFormat: '${value}',interval: 2000, maximum: 8000, minimum: -4000,\n lineStyle: { width: 0},\n majorTickLines: { width: 0}\n },\n chartArea: {\n border: {\n width: 0\n }\n },//Initializing Chart Series\n series: [\n {\n type: 'Area',\n dataSource: [\n { x: new Date(2017, 0, 1), y: 3000 }, { x: new Date(2018, 0, 1), y: 4000 },\n { x: new Date(2019, 0, 1), y: -4000 }, { x: new Date(2020, 0, 1), y: -2000 },\n { x: new Date(2021, 0, 1), y: 5000 }\n ],\n xName: 'x',\n width: 2,\n yName: 'y',marker: { visible : true,isFilled : true , width : 7 , height : 7 , shape : \"Circle\"},\n name: 'Company A',\n opacity: 0.75,border: { width: 2 },\n },\n {\n type: 'Area',\n dataSource: [\n { x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: 3000 },\n { x: new Date(2019, 0, 1), y: 4000 }, { x: new Date(2020, 0, 1), y: 2000 },\n { x: new Date(2021, 0, 1), y: 3000 }\n ],\n xName: 'x',\n width: 2,\n yName: 'y',\n name: 'Company B',marker: {visible:true, isFilled : true , width : 7 , height : 7 , shape : \"Diamond\"},\n opacity: 0.75,border: { width: 2 },\n },\n {\n type: 'Area',\n dataSource: [\n { x: new Date(2017, 0, 1), y: 2000 }, { x: new Date(2018, 0, 1), y: -1000 },\n { x: new Date(2019, 0, 1), y: -3000 }, { x: new Date(2020, 0, 1), y: 4000 },\n { x: new Date(2021, 0, 1), y: 1000 }\n ],\n xName: 'x', \n width: 2,\n yName: 'y',\n name: 'Company C',marker: {visible:true, isFilled : true , width : 5 , height : 5 , shape : \"Rectangle\"},\n opacity: 0.75,border: { width: 2 },\n },\n ],\n //Initializing Chart Title\n title: 'Profit and Loss',\n tooltip: {\n enable: true\n },\n legendSettings: { enableHighlight: true },\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n\n });\n chart.appendTo('#area-container');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/average-true-range-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"atr-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for ATR Indicator\n */\nthis.renderChartATR = function () {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true },\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n minimum: 50, maximum: 170,\n interval: 30, rowIndex: 1,\n plotOffset: 25, majorTickLines: { width: 0 },\n majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }\n },\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },\n title: 'ATR',\n stripLines: [\n {\n start: 0, end: 14, text: '', color: '#6063ff', visible: true,\n opacity: 0.1, zIndex: 'Behind'\n }\n ]\n }],\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n series: [{\n dataSource: chartValue, width: 2,\n xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle'\n }],\n indicators: [{\n type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n period: 3\n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'X',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n chartArea: { border: { width: 0 } },\n title: 'AAPL Stock Price 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n\n legendSettings: {\n visible: false\n }\n });\n chart.appendTo('#atr-container');\n };\n \n renderChartATR();\n \n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/average-true-range-indicator/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"atr-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for ATR Indicator\n */\nthis.renderChartATR = function () {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true },\n },\n primaryYAxis: {\n title: 'Price',\n labelFormat: '${value}',\n minimum: 50, maximum: 170,\n interval: 30, rowIndex: 1,\n plotOffset: 25, majorTickLines: { width: 0 },\n majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }\n },\n axes: [{\n name: 'secondary',\n opposedPosition: true, rowIndex: 0,\n majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },\n title: 'ATR',\n stripLines: [\n {\n start: 0, end: 14, text: '', color: '#6063ff', visible: true,\n opacity: 0.1, zIndex: 'Behind'\n }\n ]\n }],\n rows: [\n {\n height: '40%'\n }, {\n height: '60%'\n }\n ],\n series: [{\n dataSource: chartValue, width: 2,\n xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle'\n }],\n indicators: [{\n type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',\n period: 3\n }],\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'X',\n enablePan: true\n },\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n chartArea: { border: { width: 0 } },\n title: 'AAPL Stock Price 2012-2017',\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n\n legendSettings: {\n visible: false\n }\n });\n chart.appendTo('#atr-container');\n };\n \n renderChartATR();\n \n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/bar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"bar-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bar Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}%',\n title: 'GDP (In Percentage)',\n edgeLabelPlacement: 'Shift',\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Bar',\n dataSource: [\n { x: 'Japan', y: 1.71 }, { x: 'France', y: 1.82 },\n { x: 'India', y: 6.68 }, { x: 'Germany', y: 2.22 }, { x: 'Italy', y: 1.50 }, { x: 'Canada', y: 3.05 }\n ],\n xName: 'x', width: 2, name:'GDP' ,\n yName: 'y', columnSpacing: 0.1\n },\n {\n type: 'Bar',\n dataSource: [\n { x: 'Japan', y: 6.02 }, { x: 'France', y: 3.19 },\n { x: 'India', y: 3.28 }, { x: 'Germany', y: 4.56 }, { x: 'Italy', y: 2.40 }, { x: 'Canada', y: 2.04 }\n ],\n xName: 'x', width: 2,name: \"Share in World's GDP\",\n yName: 'y',columnSpacing: 0.1\n }\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n legendSettings: { enableHighlight :true },\n //Initializing Chart Title\n title: 'GDP by Country in 2017',\n\n });\n chart.appendTo('#bar-container');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/bar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"bar-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bar Series\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}%',\n title: 'GDP (In Percentage)',\n edgeLabelPlacement: 'Shift',\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 },\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Bar',\n dataSource: [\n { x: 'Japan', y: 1.71 }, { x: 'France', y: 1.82 },\n { x: 'India', y: 6.68 }, { x: 'Germany', y: 2.22 }, { x: 'Italy', y: 1.50 }, { x: 'Canada', y: 3.05 }\n ],\n xName: 'x', width: 2, name:'GDP' ,\n yName: 'y', columnSpacing: 0.1\n },\n {\n type: 'Bar',\n dataSource: [\n { x: 'Japan', y: 6.02 }, { x: 'France', y: 3.19 },\n { x: 'India', y: 3.28 }, { x: 'Germany', y: 4.56 }, { x: 'Italy', y: 2.40 }, { x: 'Canada', y: 2.04 }\n ],\n xName: 'x', width: 2,name: \"Share in World's GDP\",\n yName: 'y',columnSpacing: 0.1\n }\n ],\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n legendSettings: { enableHighlight :true },\n //Initializing Chart Title\n title: 'GDP by Country in 2017',\n\n });\n chart.appendTo('#bar-container');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/bollinger/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"bollinger-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bollinger Band Indicator\n */\nthis.renderChartBollinger = function () {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',intervalType: \"Months\",\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n primaryYAxis: {\n title: 'Price (in Million)',\n labelFormat: '${value}M',\n minimum: 50, maximum: 170, interval: 30,\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 }\n },\n series: [{\n dataSource: chartValue, width: 2,\n xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle'\n }],\n indicators: [{\n type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',\n period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 },\n lowerLine: { color: '#f2ec2f', width: 1 }\n }],\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'X',\n enablePan: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n title: 'AAPL Stock Price 2012-2017',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#bollinger-container');\n };\n \n renderChartBollinger();\n "}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/bollinger/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"bollinger-container\" align=\"center\"></div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Bollinger Band Indicator\n */\nthis.renderChartBollinger = function () {\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n valueType: 'DateTime',intervalType: \"Months\",\n majorGridLines: { width: 0 },\n zoomFactor: 0.2, zoomPosition: 0.6,\n crosshairTooltip: { enable: true }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n primaryYAxis: {\n title: 'Price (in Million)',\n labelFormat: '${value}M',\n minimum: 50, maximum: 170, interval: 30,\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 }\n },\n series: [{\n dataSource: chartValue, width: 2,\n xName: 'period', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',\n name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',\n type: 'Candle'\n }],\n indicators: [{\n type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',\n period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 },\n lowerLine: { color: '#f2ec2f', width: 1 }\n }],\n tooltip: {\n enable: true, shared: true\n },\n crosshair: { enable: true, lineType: 'Vertical' },\n zoomSettings: {\n enableSelectionZooming: true,\n enablePinchZooming: true,\n mode: 'X',\n enablePan: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '75%',\n title: 'AAPL Stock Price 2012-2017',\n\n legendSettings: { visible: false }\n });\n chart.appendTo('#bollinger-container');\n };\n \n renderChartBollinger();\n "}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/box-and-whisker/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/22.1.34/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n <div class=\"control-section\">\n <div id=\"container\" align=\"center\"></div>\n </div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Box and Whisker Series \n */\n\n var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = window.fabricColors[args.point.index % 10];\n }\n else if (selectedTheme === 'material') {\n args.fill = window.materialColors[args.point.index % 10];\n }\n else if (selectedTheme === 'fluent') {\n args.fill = window.fluentColors[args.point.index % 10];\n }\n else if (selectedTheme === 'fluent-dark') {\n args.fill = window.fluentDarkColors[args.point.index % 10];\n }\n else {\n args.fill = window.bootstrapColors[args.point.index % 10];\n }\n args.border.color = ej.charts.getSaturationColor(args.fill, -0.6);\n };\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n labelIntersectAction: ej.base.Browser ? 'None' : 'Rotate45',\n labelRotation: ej.base.Browser.isDevice ? -45 : 0,\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Age',\n minimum: 10,\n maximum: 60,\n interval: 10,\n majorGridLines: { width: 1 },\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 }\n },\n pointRender: labelRender,\n //Initializing Chart Series\n series: [\n {\n type: 'BoxAndWhisker',\n dataSource: [\n { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },\n { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },\n { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },\n { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },\n { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },\n { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },\n { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },\n { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] },\n { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] }\n ],\n xName: 'x',\n yName: 'y',\n marker: {\n visible: true,\n width: 7,\n height: 7\n }, boxPlotMode: \"Normal\", showMean: true,\n }\n ],\n tooltip: {\n enable: true\n },\n legendSettings: {\n visible: false\n },\n //Initializing Chart Title\n title: 'Employee Age Group in Various Department',\n width: ej.base.Browser.isDevice ? '100%' : '70%',\n\n });\n chart.appendTo('#container');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/box-and-whisker/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n <div class=\"control-section\">\n <div id=\"container\" align=\"center\"></div>\n </div>\n</div>\n\n\n<style>\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for Box and Whisker Series \n */\n\n var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = window.fabricColors[args.point.index % 10];\n }\n else if (selectedTheme === 'material') {\n args.fill = window.materialColors[args.point.index % 10];\n }\n else if (selectedTheme === 'fluent') {\n args.fill = window.fluentColors[args.point.index % 10];\n }\n else if (selectedTheme === 'fluent-dark') {\n args.fill = window.fluentDarkColors[args.point.index % 10];\n }\n else {\n args.fill = window.bootstrapColors[args.point.index % 10];\n }\n args.border.color = ej.charts.getSaturationColor(args.fill, -0.6);\n };\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n majorGridLines: { width: 0 },\n majorTickLines: { width: 0 },\n labelIntersectAction: ej.base.Browser ? 'None' : 'Rotate45',\n labelRotation: ej.base.Browser.isDevice ? -45 : 0,\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Age',\n minimum: 10,\n maximum: 60,\n interval: 10,\n majorGridLines: { width: 1 },\n majorTickLines: { width: 0 },\n lineStyle: { width: 0 }\n },\n pointRender: labelRender,\n //Initializing Chart Series\n series: [\n {\n type: 'BoxAndWhisker',\n dataSource: [\n { x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },\n { x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },\n { x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },\n { x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },\n { x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },\n { x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },\n { x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },\n { x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] },\n { x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] }\n ],\n xName: 'x',\n yName: 'y',\n marker: {\n visible: true,\n width: 7,\n height: 7\n }, boxPlotMode: \"Normal\", showMean: true,\n }\n ],\n tooltip: {\n enable: true\n },\n legendSettings: {\n visible: false\n },\n //Initializing Chart Title\n title: 'Employee Age Group in Various Department',\n width: ej.base.Browser.isDevice ? '100%' : '70%',\n\n });\n chart.appendTo('#container');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче