v19.3.43 is released
This commit is contained in:
pipeline
Родитель
ebae479435
Коммит
6f6f143737
81
README.md
81
README.md
|
|
@ -8,12 +8,14 @@ Add your sample order in the `src/common/sampleOrder.json` with corresponding ca
|
|||
|
||||
**Note:** Do not use whitespace at any cause in the folder’s name. Use “-” instead of space.
|
||||
|
||||
|
||||
### 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.
|
||||
|
|
@ -73,91 +75,18 @@ https://gitlab.syncfusion.com/essential-studio/ej2-javascript-samples/blob/19761
|
|||
|
||||
**Note:** Each component should include one datasource file only.
|
||||
|
||||
# Using the samples
|
||||
|
||||
## Installing
|
||||
|
||||
Before installation check `@syncfusion:registry=http://nexus.syncfusion.com/repository/ej2-production/` is available in npmrc file. Then use the below command to install all dependent packages.
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
## Testing
|
||||
|
||||
Use `npm run test` command to compile the source files. It calls the following tasks synchronously,
|
||||
|
||||
1. Build
|
||||
2. Styles ship
|
||||
3. Site-map generate.
|
||||
|
||||
### Build
|
||||
|
||||
Use the below command to generate scripts, styles, locale and sample lists.
|
||||
|
||||
```
|
||||
gulp build
|
||||
```
|
||||
It runs the following tasks synchronously,
|
||||
|
||||
1. Scripts
|
||||
2. Styles
|
||||
|
||||
#### **Scripts**
|
||||
|
||||
It compiles the Typescript files and use the below command to run this task.
|
||||
|
||||
```
|
||||
gulp scripts
|
||||
```
|
||||
|
||||
#### **Styles**
|
||||
|
||||
The command `gulp styles` is used to compile default themes. It calls the following two tasks synchronously.
|
||||
|
||||
1. Default theme
|
||||
2. Compile styles
|
||||
|
||||
#### Default theme
|
||||
|
||||
Use the below command to generate default theme files.
|
||||
|
||||
```
|
||||
gulp default-theme
|
||||
```
|
||||
|
||||
#### Compile Styles
|
||||
It compiles the scss file to css file. To run this task use the below command,
|
||||
|
||||
```
|
||||
gulp compile-styles
|
||||
```
|
||||
|
||||
### Styles Shipping
|
||||
|
||||
It copies css files for themes from node_modules. Use the below command to run it individual.
|
||||
|
||||
```
|
||||
gulp styles-shipping
|
||||
```
|
||||
|
||||
### Site map generation
|
||||
The below command combines sample of all components and store it in sitemap-demos.xml file to index our components, samples, documents in search engine.
|
||||
|
||||
```
|
||||
gulp sitemap-generate
|
||||
```
|
||||
|
||||
## Run your sample browser
|
||||
## 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 javascript as well. This will help at development time. If any changes detect means it will automatically compile and browser will reloaded.
|
||||
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.
|
||||
|
||||
```
|
||||
gulp serve
|
||||
```
|
||||
|
||||
|
||||
**Access URLs:**
|
||||
|
||||
Local URL is works only in your machine.
|
||||
|
|
|
|||
651
index.html
651
index.html
|
|
@ -3,33 +3,39 @@
|
|||
|
||||
<head>
|
||||
<script>
|
||||
var orgin = location.origin;
|
||||
var baseref = location.href.split('#')[0].replace(orgin, '');
|
||||
document.write('<base href=\"' + baseref + '\">');
|
||||
var orgin = location.origin;
|
||||
var baseref = location.href.split('#')[0].replace(orgin, '');
|
||||
document.write('<base href=\"' + baseref + '\">');
|
||||
</script>
|
||||
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-WLQL39J');</script>
|
||||
<script>(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || []; w[l].push({
|
||||
'gtm.start':
|
||||
new Date().getTime(), event: 'gtm.js'
|
||||
}); var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-WLQL39J');</script>
|
||||
<!-- 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="description" content="Explore and learn Syncfusion JavaScript (ES5) UI controls library using large collection of feature-wise examples for each components." />
|
||||
<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">
|
||||
<link href="src/common/lib/content/roboto.css" rel="stylesheet" type="text/css">
|
||||
<link href="src/common/lib/content/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"></link>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
|
||||
</link>
|
||||
<link href="styles/highlight.css" rel="stylesheet" />
|
||||
<link id="themelink" href="styles/material.css" rel="stylesheet" />
|
||||
<link href="styles/index.css" rel="stylesheet" />
|
||||
<link href="src/common/lib/content/codemirror.css" rel="stylesheet"></link>
|
||||
<link href="src/common/lib/content/codemirror.css" rel="stylesheet">
|
||||
</link>
|
||||
<script>
|
||||
var orgin = location.origin;
|
||||
var baseref = location.href.split('#')[0].replace(orgin, '');
|
||||
|
|
@ -52,7 +58,7 @@
|
|||
</script>
|
||||
<script src="dist/ej2.min.js"></script>
|
||||
<script src="dist/locale-string.js"></script>
|
||||
|
||||
|
||||
<script id='sample-datasource' type='text/javascript'></script>
|
||||
<script src="src/common/lib/scripts/js-signals.min.js"></script>
|
||||
<script src="src/common/lib/scripts/elasticlunr.min.js"></script>
|
||||
|
|
@ -62,14 +68,18 @@
|
|||
<script src="src/common/samplelist.js" type="text/javascript"></script>
|
||||
<script src="src/common/search-index.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/css/css.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/css/css.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/htmlmixed/htmlmixed.js"
|
||||
type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
<body class='e-view' aria-busy="true">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J"height="0"width="0"style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J" 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'>
|
||||
|
|
@ -127,238 +137,279 @@
|
|||
<div id='sample-header' class="sb-header e-view" role="banner">
|
||||
<div class='sb-header-left sb-left sb-table'>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell sb-lang-toggler-wrapper'>
|
||||
<span id='sb-switcher' role="button" tabindex="0" class='sb-lang-toggler sb-icons sb-icon-Dropdown' aria-label="change the samplebrowser"></span>
|
||||
</div>
|
||||
<!-- <div class='sb-header-item sb-table-cell sb-preview-wrapper'>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell sb-lang-toggler-wrapper'>
|
||||
<span id='sb-switcher' role="button" tabindex="0" class='sb-lang-toggler sb-icons sb-icon-Dropdown'
|
||||
aria-label="change the samplebrowser"></span>
|
||||
</div>
|
||||
<!-- <div class='sb-header-item sb-table-cell sb-preview-wrapper'>
|
||||
<div>
|
||||
<img src='./styles/images/Vol 3 beta_Option 2.svg'>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class='sb-header-right sb-right sb-table'>
|
||||
<div class="sb-header-item sb-table-cell">
|
||||
<div id="header-theme-switcher" role="button" tabindex="0" class="theme-wrapper" title='Change theme of sample browser'>
|
||||
<div id="sb-theme-text" class="sb-theme-text">
|
||||
<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>
|
||||
</div>
|
||||
<div class='sb-header-right sb-right sb-table'>
|
||||
<div class="sb-header-item sb-table-cell">
|
||||
<div id="header-theme-switcher" role="button" tabindex="0" class="theme-wrapper"
|
||||
title='Change theme of sample browser'>
|
||||
<div id="sb-theme-text" class="sb-theme-text">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell sb-search-wrapper'>
|
||||
<div class='sb-search-btn' id='sb-trigger-search' role="button" tabindex="0" aria-label="toggle sample search" title="Toggle sample search">
|
||||
<span class='sb-settings sb-icons sb-icon-Search'></span>
|
||||
<div class='sb-header-item sb-table-cell sb-search-wrapper'>
|
||||
<div class='sb-search-btn' id='sb-trigger-search' role="button" tabindex="0"
|
||||
aria-label="toggle sample search" title="Toggle sample search">
|
||||
<span class='sb-settings sb-icons sb-icon-Search'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell sb-settings-wrapper'>
|
||||
<div class='sb-setting-btn' role="button" tabindex="0" aria-label="toggle settings menu" tabindex="">
|
||||
<span class='sb-settings sb-icons sb-icon-Settings-Preferences'></span>
|
||||
<div class='sb-header-item sb-table-cell sb-settings-wrapper'>
|
||||
<div class='sb-setting-btn' role="button" tabindex="0" aria-label="toggle settings menu"
|
||||
tabindex="">
|
||||
<span class='sb-settings sb-icons sb-icon-Settings-Preferences'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<button id='download-now' class='sb-download-btn'>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</button>
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/search?q=ej2-javascript' target="_blank">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id='sb-popup-section' class='sb-popups'>
|
||||
<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='angular'>Angular</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='react'>React</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='typescript'>JavaScript</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='aspnetcore'>ASP.NET Core</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='aspnetmvc'>ASP.NET MVC</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='vue'>Vue</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='blazor'>Blazor</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='theme-switcher-popup' class='sb-theme-popup'>
|
||||
<ul id="themelist" class="options" role="list">
|
||||
<li class='active' id="material" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material</span>
|
||||
</li>
|
||||
<li id="fabric" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Fabric</span>
|
||||
</li>
|
||||
<li class="e-list" id="bootstrap" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap</span>
|
||||
</li>
|
||||
<li class="e-list" id="bootstrap4" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap v4</span>
|
||||
</li>
|
||||
<li class="e-list" id="tailwind" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Tailwind</span>
|
||||
</li>
|
||||
<!--<li class="e-list" id="tailwind-dark" role="listitem">-->
|
||||
<!-- <span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>-->
|
||||
<!-- <span class="switch-text">Tailwind Dark</span>-->
|
||||
<!--</li>-->
|
||||
<li class="e-list" id="highcontrast">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">High Contrast</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='settings-popup' class='sb-setting-popup'>
|
||||
<div class='sb-setting-header'>
|
||||
<span> Preferences
|
||||
</span>
|
||||
<div id='sb-popup-section' class='sb-popups'>
|
||||
<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='angular'>Angular</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='react'>React</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='typescript'>JavaScript</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='aspnetcore'>ASP.NET Core</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='aspnetmvc'>ASP.NET MVC</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='vue'>Vue</a>
|
||||
</li>
|
||||
<li role="listiem">
|
||||
<a id='blazor'>Blazor</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='sb-setting-content'>
|
||||
<div class='sb-setting-item sb-setting-theme-section'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Palette'></div>
|
||||
<div class='sb-setting-text'>Theme Selection</div>
|
||||
</div>
|
||||
<div class='setting-content setting-theme-change'>
|
||||
<select id='sb-setting-theme' class='sb-setting-theme-select'>
|
||||
<div id='theme-switcher-popup' class='sb-theme-popup'>
|
||||
<ul id="themelist" class="options" role="list">
|
||||
<li class="e-list" id="bootstrap5" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap v5</span>
|
||||
</li>
|
||||
<li class="e-list" id="bootstrap5-dark" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap v5 Dark</span>
|
||||
</li>
|
||||
<li class="e-list" id="tailwind" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Tailwind CSS</span>
|
||||
</li>
|
||||
<li class="e-list" id="tailwind-dark" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Tailwind CSS Dark</span>
|
||||
</li>
|
||||
<li class='active' id="material" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material</span>
|
||||
</li>
|
||||
<li class="e-list" id="material-dark" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material Dark</span>
|
||||
</li>
|
||||
<li id="fabric" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Fabric</span>
|
||||
</li>
|
||||
<li class="e-list" id="fabric-dark" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Fabric Dark</span>
|
||||
</li>
|
||||
<li class="e-list" id="bootstrap4" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap v4</span>
|
||||
</li>
|
||||
<li class="e-list" id="bootstrap" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap</span>
|
||||
</li>
|
||||
<li class="e-list" id="bootstrap-dark" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap Dark</span>
|
||||
</li>
|
||||
<li class="e-list" id="highcontrast" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">High Contrast</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sb-theme-studio"><a target="_blank" href="https://ej2.syncfusion.com/themestudio/?theme=material">Go to Theme Studio</a></div>
|
||||
</div>
|
||||
<div id='settings-popup' class='sb-setting-popup'>
|
||||
<div class='sb-setting-header'>
|
||||
<span> Preferences
|
||||
</span>
|
||||
</div>
|
||||
<div class='sb-setting-content'>
|
||||
<div class='sb-setting-item sb-setting-theme-section'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Palette'></div>
|
||||
<div class='sb-setting-text'>Theme Selection</div>
|
||||
</div>
|
||||
<div class='setting-content setting-theme-change'>
|
||||
<select id='sb-setting-theme' class='sb-setting-theme-select'>
|
||||
<option value="bootstrap5">Bootstrap v5</option>
|
||||
<option value="bootstrap5-dark">Bootstrap v5 Dark</option>
|
||||
<option value="tailwind">Tailwind CSS</option>
|
||||
<option value="tailwind-dark">Tailwind CSS Dark</option>
|
||||
<option value="material">Material</option>
|
||||
<option value="material-dark">Material Dark</option>
|
||||
<option value="fabric">Fabric</option>
|
||||
<option value="bootstrap">Bootstrap</option>
|
||||
<option value="fabric-dark">Fabric Dark</option>
|
||||
<option value="bootstrap4">Bootstrap v4</option>
|
||||
<!--<option value="tailwind-dark">Tailwind Dark</option>-->
|
||||
<option value="tailwind">Tailwind</option>
|
||||
<option value="bootstrap">Bootstrap</option>
|
||||
<option value="bootstrap-dark">Bootstrap Dark</option>
|
||||
<option value="highcontrast">High Contrast</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-setting-item sb-responsive-section'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Responsive'></div>
|
||||
<div class='sb-setting-text'>Mode Selection</div>
|
||||
<div class='sb-setting-item sb-responsive-section'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Responsive'></div>
|
||||
<div class='sb-setting-text'>Mode Selection</div>
|
||||
</div>
|
||||
<div class='setting-content btn-group setting-responsive'>
|
||||
<div id='touch' role="button" tabindex="0"
|
||||
class="sb-responsive-items set-border-radious-touch"
|
||||
title="Increased padding for actionable items to accommodate user touches">Touch</div>
|
||||
<div id='mouse' role="button" tabindex="0"
|
||||
class="sb-responsive-items set-border-radious-mouse"
|
||||
title="Default control sizes, optimized for use with mouse">Mouse</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='setting-content btn-group setting-responsive'>
|
||||
<div id='touch' role="button" tabindex="0" class="sb-responsive-items set-border-radious-touch" title="Increased padding for actionable items to accommodate user touches">Touch</div>
|
||||
<div id='mouse' role="button" tabindex="0" class="sb-responsive-items set-border-radious-mouse" title="Default control sizes, optimized for use with mouse">Mouse</div>
|
||||
<div class='sb-setting-item sb-setting-culture'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Localization'></div>
|
||||
<div class='sb-setting-text'>Localization</div>
|
||||
</div>
|
||||
<div class='setting-content'>
|
||||
<select id='sb-setting-culture' class='sb-setting-culture-select'>
|
||||
<option value="en">English</option>
|
||||
<option value="de">German - Germany*</option>
|
||||
<option value="fr-CH">French - Switzerland*</option>
|
||||
<option value="ar">Arabic*</option>
|
||||
<option value="zh">Chinese - China*</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="sb-setting-translate">
|
||||
<span>*Translated by Google Translator.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-setting-item sb-setting-culture'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Localization'></div>
|
||||
<div class='sb-setting-text'>Localization</div>
|
||||
</div>
|
||||
<div class='setting-content'>
|
||||
<select id='sb-setting-culture' class='sb-setting-culture-select'>
|
||||
<option value="en">English</option>
|
||||
<option value="de">German - Germany*</option>
|
||||
<option value="fr-CH">French - Switzerland*</option>
|
||||
<option value="ar">Arabic*</option>
|
||||
<option value="zh">Chinese - China*</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="sb-setting-translate">
|
||||
<span>*Translated by Google Translator.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-setting-item sb-setting-currency'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Currency'></div>
|
||||
<div class='sb-setting-text'>Currency</div>
|
||||
</div>
|
||||
<div class='setting-content'>
|
||||
<select id='sb-setting-currency' class='sb-setting-currency-content'>
|
||||
<option value="USD">USD</option>
|
||||
<option value="EUR">EUR</option>
|
||||
<option value="AED">AED</option>
|
||||
<option value="CHF">CHF</option>
|
||||
<option value="CNY">CNY</option>
|
||||
</select>
|
||||
<div class='sb-setting-item sb-setting-currency'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Currency'></div>
|
||||
<div class='sb-setting-text'>Currency</div>
|
||||
</div>
|
||||
<div class='setting-content'>
|
||||
<select id='sb-setting-currency' class='sb-setting-currency-content'>
|
||||
<option value="USD">USD</option>
|
||||
<option value="EUR">EUR</option>
|
||||
<option value="AED">AED</option>
|
||||
<option value="CHF">CHF</option>
|
||||
<option value="CNY">CNY</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-content e-view">
|
||||
<div class='sb-right-pane e-view' id='right-pane'>
|
||||
<div class="sb-content-overlay">
|
||||
<div class="sb-loading">
|
||||
<svg class="circular" height="40" width="40">
|
||||
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
|
||||
</svg>
|
||||
</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'>Chart</h1>
|
||||
</div>
|
||||
<div id='sample-bread-crumb' class='sb-bread-crumb sb-rightpane-padding'>
|
||||
<div class='sb-bread-crumb-text'>
|
||||
<div class='category-text bread-ctext'> </div>
|
||||
<div class='category-seperator sb-icons sb-icon-Next seperator'> </div>
|
||||
<div class='component bread-ctext'></div>
|
||||
<div class="component-seperator sb-icons sb-icon-Next seperator"> </div>
|
||||
<div class='crumb-sample '></div>
|
||||
<div class="sb-content e-view">
|
||||
<div class='sb-right-pane e-view' id='right-pane'>
|
||||
<div class="sb-content-overlay">
|
||||
<div class="sb-loading">
|
||||
<svg class="circular" height="40" width="40">
|
||||
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6"
|
||||
stroke-miterlimit="10" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<a id="sb-home" href="https://ej2.syncfusion.com/home/javascript.html"></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'>
|
||||
<div id='sb-content-header' class="e-tab-header sb-content-tab-header">
|
||||
<div>
|
||||
<span class="sb-icons sb-icon-Demo"></span><span class="sb-tab-title"> DEMO </span> </div>
|
||||
<div>
|
||||
<span class="sb-icons sb-icon-Code"></span><span class="sb-tab-title"> SOURCE </span> </div>
|
||||
<div><span class="sb-icons sb-icon-API"></span><span class="sb-tab-title"> API </span></div>
|
||||
<div class='sb-desktop-wrapper'>
|
||||
<div id='component-name' role='header' class='sb-component-name sb-rightpane-padding'>
|
||||
<h1 class='sb-sample-text'>Chart</h1>
|
||||
</div>
|
||||
<div id='sample-bread-crumb' class='sb-bread-crumb sb-rightpane-padding'>
|
||||
<div class='sb-bread-crumb-text'>
|
||||
<div class='category-text bread-ctext'> </div>
|
||||
<div class='category-seperator sb-icons sb-icon-Next seperator'> </div>
|
||||
<div class='component bread-ctext'></div>
|
||||
<div class="component-seperator sb-icons sb-icon-Next seperator"> </div>
|
||||
<div class='crumb-sample '></div>
|
||||
</div>
|
||||
<div class="e-content sb-sample-content-area">
|
||||
<div>
|
||||
<div class='sb-demo-section'>
|
||||
<div class="control-fluid">
|
||||
<div class="container-fluid">
|
||||
<div id="control-content"></div>
|
||||
|
||||
<a id="sb-home" href="https://ej2.syncfusion.com/home/javascript.html"></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'>
|
||||
<div id='sb-content-header' class="e-tab-header sb-content-tab-header">
|
||||
<div>
|
||||
<span class="sb-icons sb-icon-Demo"></span><span class="sb-tab-title"> DEMO </span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="sb-icons sb-icon-Code"></span><span class="sb-tab-title"> SOURCE
|
||||
</span>
|
||||
</div>
|
||||
<div><span class="sb-icons sb-icon-API"></span><span class="sb-tab-title"> API </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-content sb-sample-content-area">
|
||||
<div>
|
||||
<div class='sb-demo-section'>
|
||||
<div class="control-fluid">
|
||||
<div class="container-fluid">
|
||||
<div id="control-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -372,118 +423,130 @@
|
|||
<div id="html-src-tab" class="html-source-content sb-src-code xml">html Content</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class='sb-api-section'>
|
||||
<div>
|
||||
<div class='sb-api-section'>
|
||||
|
||||
<div id='api-grid'>
|
||||
<script id="template" type="text/x-template">
|
||||
<div id='api-grid'>
|
||||
<script id="template" type="text/x-template">
|
||||
<a href="${link}" target="_blank">${name}</a>
|
||||
</script>
|
||||
<script id="template-description" type="text/x-template">
|
||||
<script id="template-description" type="text/x-template">
|
||||
<div class='sb-sample-description'>
|
||||
<div class='sb-api-content'>${description}</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='description-section sb-rightpane-padding'>
|
||||
</div>
|
||||
<div class="ad-wrapper">
|
||||
<div id='ad-image' class="ad-img">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class='description-section sb-rightpane-padding'>
|
||||
</div>
|
||||
<div class="ad-wrapper">
|
||||
<div id='ad-image' class="ad-img">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div id="ad-banner-head" class="ad-header">Transform your Javascript ES5 web apps today with Syncfusion Javascript ES5 controls</div>
|
||||
</div>
|
||||
<div class="col-sm-12 cnt-area">
|
||||
<div class="content-area">
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection"></div>
|
||||
<div class="cnt-text">65+ high-performance and responsive UI components</div>
|
||||
</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="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 class="col-sm-12">
|
||||
<div id="ad-banner-head" class="ad-header">Transform your Javascript ES5 web
|
||||
apps today with Syncfusion Javascript ES5 controls</div>
|
||||
</div>
|
||||
<div class="col-sm-12 cnt-area">
|
||||
<div class="content-area">
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection">
|
||||
</div>
|
||||
<div class="cnt-text">65+ high-performance and responsive UI components
|
||||
</div>
|
||||
</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="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">
|
||||
<div class="free-trial">TRY IT FOR FREE</div>
|
||||
</a>
|
||||
</div>
|
||||
<a style="color:#ffff;text-decoration:none;"
|
||||
href="https://www.syncfusion.com/downloads/essential-js2">
|
||||
<div class="free-trial">TRY IT FOR FREE</div>
|
||||
</a>
|
||||
</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">
|
||||
<div class="sb-footer-link">Documentation</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/forums/essential-js2" target="_blank">
|
||||
<div class="sb-footer-link">Forum</div>
|
||||
</a>
|
||||
<a href="https://syncfusion.com/blogs" target="_blank">
|
||||
<div class="sb-footer-link">Blog</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/kb" target="_blank">
|
||||
<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">
|
||||
<div class="sb-footer-logo-icon"></div>
|
||||
</a>
|
||||
</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">
|
||||
<div class="sb-footer-link">Documentation</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/forums/essential-js2" target="_blank">
|
||||
<div class="sb-footer-link">Forum</div>
|
||||
</a>
|
||||
<a href="https://syncfusion.com/blogs" target="_blank">
|
||||
<div class="sb-footer-link">Blog</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/kb" target="_blank">
|
||||
<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">
|
||||
<div class="sb-footer-logo-icon"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-body-overlay e-view">
|
||||
<div class="sb-loading">
|
||||
<svg class="circular" height="40" width="40">
|
||||
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6"
|
||||
stroke-miterlimit="10" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-body-overlay e-view">
|
||||
<div class="sb-loading">
|
||||
<svg class="circular" height="40" width="40">
|
||||
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
|
||||
</svg>
|
||||
<div class="e-search-overlay sb-hide">
|
||||
<div class='sb-search-input' id='search-input-wrapper' data-value=''>
|
||||
<input type='text' aria-required="true" class="e-icons" id='search-input'
|
||||
onkeyup='this.parentElement.setAttribute("data-value",this.value)' class='e-icons'
|
||||
placeholder="Search here..." aria-label="search samples" />
|
||||
<span class='e-icons sb-reset-icon'></span>
|
||||
<span class='e-icons sb-search-icon'></span>
|
||||
</div>
|
||||
<div id='search-popup' class='sb-search-result'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-search-overlay sb-hide">
|
||||
<div class='sb-search-input' id='search-input-wrapper' data-value=''>
|
||||
<input type='text' aria-required="true" class="e-icons" id='search-input' onkeyup='this.parentElement.setAttribute("data-value",this.value)'
|
||||
class='e-icons' placeholder="Search here..." aria-label="search samples" />
|
||||
<span class='e-icons sb-reset-icon'></span>
|
||||
<span class='e-icons sb-search-icon'></span>
|
||||
</div>
|
||||
<div id='search-popup' class='sb-search-result'></div>
|
||||
</div>
|
||||
<div class='sb-mobilefooter e-view sample-navigation' id='mobile-footer'>
|
||||
<button id='mobile-prev-sample' class="sb-navigation-prev sb-left" aria-label="previous sample">
|
||||
<div class='sb-mobilefooter e-view sample-navigation' id='mobile-footer'>
|
||||
<button id='mobile-prev-sample' class="sb-navigation-prev sb-left" aria-label="previous sample">
|
||||
PREVIOUS
|
||||
</button>
|
||||
<button id='mobile-next-sample' class="sb-navigation-next sb-right" aria-label="next sample">
|
||||
<button id='mobile-next-sample' class="sb-navigation-next sb-right" aria-label="next sample">
|
||||
NEXT
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
if(location.hash.indexOf('-dark')!== -1){
|
||||
document.getElementById('dark-switcher').checked = true;
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="src/common/index.min.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-javascript-samples",
|
||||
"version": "19.2.44",
|
||||
"version": "19.3.43",
|
||||
"description": "Examples of JavaScript (ES5) UI Controls",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
.e-accordion table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.e-accordion table th,
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -43,9 +43,7 @@
|
|||
<div id='Video_Rec_features' style="display:none">
|
||||
<table>
|
||||
<tr>
|
||||
<th class='e-bold' rowspan='9'>Video Recording</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class='e-bold' rowspan='6'>Video Recording</th>
|
||||
<td class='e-bold'>4K video recording</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,19 @@
|
|||
.bootstrap4 .e-list-icon{
|
||||
color: #495057;
|
||||
}
|
||||
.material-dark .e-list-icon,
|
||||
.bootstrap5-dark .e-list-icon,
|
||||
.tailwind-dark .e-list-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bootstrap-dark .e-list-icon {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.fabric-dark .e-list-icon {
|
||||
color: #dadada;
|
||||
}
|
||||
|
||||
/* custom code end*/
|
||||
.e-list-icon {
|
||||
|
|
|
|||
|
|
@ -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/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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\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/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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 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 margin-top: -15px;\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"}
|
||||
|
|
@ -59,15 +59,14 @@
|
|||
}
|
||||
|
||||
.bootstrap .header {
|
||||
background-color: #fff;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #777;
|
||||
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
padding: 0 0 0 24px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
height: 48px;
|
||||
padding: 15px 0 0 16px;
|
||||
}
|
||||
|
||||
.highcontrast .header {
|
||||
|
|
@ -76,7 +75,6 @@
|
|||
}
|
||||
|
||||
.e-bigger.bootstrap .header {
|
||||
line-height: 44px;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -95,7 +93,7 @@
|
|||
|
||||
.e-bigger.bootstrap .job {
|
||||
font-size: 15px;
|
||||
margin-top: -32px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
|
|
@ -109,6 +107,7 @@
|
|||
.e-bigger.bootstrap .ename {
|
||||
font-size: 16px;
|
||||
padding-bottom: 15px;
|
||||
line-height: 1.063em;
|
||||
}
|
||||
|
||||
.bootstrap .empImage,
|
||||
|
|
@ -175,5 +174,16 @@
|
|||
margin-top: -15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.bootstrap5 #employees_popup .job,
|
||||
.bootstrap-dark #employees_popup .job,
|
||||
.bootstrap5-dark #employees_popup .job,
|
||||
.tailwind-dark #employees_popup .job {
|
||||
margin-top: 0;
|
||||
}
|
||||
.e-bigger.bootstrap5 #employees_popup .job,
|
||||
.e-bigger.bootstrap-dark #employees_popup .job,
|
||||
.e-bigger.bootstrap5-dark #employees_popup .job,
|
||||
.e-bigger.tailwind-dark #employees_popup .job {
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -79,7 +79,9 @@
|
|||
box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.tailwind .e-custom-card .e-avatar {
|
||||
.tailwind .e-custom-card .e-avatar,
|
||||
.bootstrap5 .e-custom-card .e-avatar,
|
||||
.bootstrap5-dark .e-custom-card .e-avatar{
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
}
|
||||
|
|
@ -129,16 +131,41 @@
|
|||
.sample_container .name {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.highcontrast .e-custom-card.e-card .avatar-content {
|
||||
.highcontrast .e-custom-card.e-card .avatar-content,
|
||||
.bootstrap-dark .e-custom-card.e-card .avatar-content,
|
||||
.tailwind-dark .e-custom-card.e-card .avatar-content,
|
||||
.material-dark .e-custom-card.e-card .avatar-content,
|
||||
.fabric-dark .e-custom-card.e-card .avatar-content,
|
||||
.bootstrap5-dark .e-custom-card.e-card .avatar-content {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
|
||||
.highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.bootstrap-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.tailwind-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.fabric-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.bootstrap5-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {
|
||||
.highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.bootstrap-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.tailwind-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.fabric-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.bootstrap5-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.tailwind .e-custom-card .e-avatar,
|
||||
body.tailwind-dark .e-custom-card .e-avatar,
|
||||
body.bootstrap5-dark .e-custom-card .e-avatar {
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-custom-card .e-avatar {
|
||||
left: calc(50% - 1.4em);
|
||||
}
|
||||
</style>
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -121,12 +121,35 @@
|
|||
background-image: url('./src/avatar/images/pic04.png');
|
||||
}
|
||||
|
||||
.bootstrap4 #letterAvatarList .e-list-item {
|
||||
.bootstrap4 #letterAvatarList .e-list-item,
|
||||
.bootstrap5 #letterAvatarList .e-list-item,
|
||||
.bootstrap5-dark #letterAvatarList .e-list-item {
|
||||
line-height: 30px;
|
||||
padding: 8px 16px 8px 16px;
|
||||
}
|
||||
|
||||
.bootstrap4 #letterAvatarList .e-list-item .e-avatar {
|
||||
.bootstrap5 #letterAvatarList .e-list-item .e-avatar,
|
||||
.bootstrap5-dark #letterAvatarList .e-list-item .e-avatar,
|
||||
.tailwind-dark #letterAvatarList .e-list-item .e-avatar {
|
||||
top: calc(100% - 48px);
|
||||
}
|
||||
|
||||
body.bootstrap4 #letterAvatarList .e-list-item .e-avatar{
|
||||
top: calc(100% - 45px);
|
||||
}
|
||||
|
||||
body.bootstrap #letterAvatarList .e-list-item,
|
||||
body.bootstrap-dark #letterAvatarList .e-list-item {
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
body.tailwind-dark #letterAvatarList .e-list-item {
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
body.material #letterAvatarList .e-list-item,
|
||||
body.material-dark #letterAvatarList .e-list-item {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -25,11 +25,17 @@
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tailwind .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
.tailwind .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.tailwind-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.e-bigger.tailwind .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
.e-bigger.tailwind .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.tailwind-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
|
|
@ -42,19 +48,24 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
.people,
|
||||
.e-people {
|
||||
.badge-accordion .people,
|
||||
.badge-accordion .e-people {
|
||||
font-family: 'Contacts';
|
||||
}
|
||||
|
||||
.e-people:before {
|
||||
|
||||
.badge-accordion .e-icons.e-people:before {
|
||||
content: '\e700';
|
||||
}
|
||||
|
||||
.people:before {
|
||||
.badge-accordion .people:before {
|
||||
content: '\e701';
|
||||
}
|
||||
|
||||
.badge-accordion #accordion {
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
/* Accordion Customization */
|
||||
|
||||
#accordion .e-acrdn-header .e-toggle-icon .e-tgl-collapse-icon.e-icons {
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
<ul>
|
||||
<li>Top: It is the default position, so there is no additional class needed for the top position.</li>
|
||||
<li>Bottom: To get the bottom badge, add the
|
||||
<code>.e-.badge-bottom</code> class with
|
||||
<code>.e-badge-bottom</code> class with
|
||||
<code>.e-badge</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -48,6 +48,27 @@
|
|||
margin-top: 11px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.bootstrap5 .list_svg,
|
||||
.bootstrap4 .list_svg,
|
||||
.bootstrap5-dark .list_svg,
|
||||
.tailwind-dark .list_svg {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.bootstrap5 #lists .e-list-item,
|
||||
.bootstrap4 #lists .e-list-item,
|
||||
.bootstrap5-dark #lists .e-list-item,
|
||||
.tailwind-dark #lists .e-list-item {
|
||||
line-height: 36px !important;
|
||||
}
|
||||
|
||||
.bootstrap5 .listWrapper .e-badge,
|
||||
.bootstrap4 .listWrapper .e-badge,
|
||||
.bootstrap5-dark .listWrapper .e-badge,
|
||||
.tailwind-dark .listWrapper .e-badge {
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.e-rtl .list_svg {
|
||||
margin-left: 16px;
|
||||
|
|
@ -110,4 +131,13 @@
|
|||
.starred {
|
||||
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239E9E9E' d='M16 1.6l4.45 9.48 9.95 1.52-7.2 7.38 1.7 10.42-8.9-4.92-8.9 4.92 1.7-10.42-7.2-7.38 9.951-1.52z'/%3E%3C/svg%3E") no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
.bootstrap5-dark #lists.e-control.e-listview,
|
||||
.tailwind-dark #lists.e-control.e-listview,
|
||||
.fabric-dark #lists.e-control.e-listview,
|
||||
.material-dark #lists.e-control.e-listview,
|
||||
.highcontrast #lists.e-control.e-listview,
|
||||
.bootstrap-dark #lists.e-control.e-listview {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -132,6 +132,15 @@
|
|||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.tailwind-dark .sample_container.badge-notification .layout,
|
||||
.material-dark .sample_container.badge-notification .layout,
|
||||
.fabric-dark .sample_container.badge-notification .layout,
|
||||
.bootstrap-dark .sample_container.badge-notification .layout,
|
||||
.bootstrap5-dark .sample_container.badge-notification .layout {
|
||||
background: inherit;
|
||||
border: 1px solid #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.highcontrast .sample_container.badge-notification .layout {
|
||||
box-shadow: 0 2px 15px 0 rgb(92, 91, 91);
|
||||
background: #000;
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,204 @@
|
|||
this.default = function() {
|
||||
var breadcrumbItems = [
|
||||
{
|
||||
iconCss: 'e-bicons e-picture'
|
||||
},
|
||||
{
|
||||
text: 'This PC'
|
||||
},
|
||||
{
|
||||
text: 'Local Disk (C:)'
|
||||
},
|
||||
{
|
||||
text: 'Users'
|
||||
},
|
||||
{
|
||||
text: 'Admin'
|
||||
},
|
||||
{
|
||||
text: 'Pictures'
|
||||
}
|
||||
];
|
||||
|
||||
var items = [
|
||||
{
|
||||
text: 'OneDrive', type: 'onedrive',
|
||||
items: [
|
||||
{ text: 'Documents', type: 'folder' },
|
||||
{ text: 'Email attachments', type: 'folder' },
|
||||
{ text: 'Music', type: 'folder' },
|
||||
{ text: 'Pictures', type: 'folder' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'This PC', type: 'desktop',
|
||||
items: [
|
||||
{ text: 'Desktop', type: 'desktop' },
|
||||
{ text: 'Documents', type: 'documents', items: [
|
||||
{ text: 'IISExpress', type: 'folder', items: [
|
||||
{ text: 'config', type: 'folder' }
|
||||
] },
|
||||
{ text: 'Visual Studio 2019', type: 'folder', items: [
|
||||
{ text: 'Code Snippets', type: 'folder' },
|
||||
{ text: 'Templates', type: 'folder' },
|
||||
{ text: 'Visualizers', type: 'folder' }
|
||||
] }
|
||||
] },
|
||||
{ text: 'Downloads', type: 'downloads' },
|
||||
{
|
||||
text: 'Local Disk (C:)', type: 'folder', items: [
|
||||
{
|
||||
text: 'Microsoft', type: 'folder'
|
||||
},
|
||||
{ text: 'Program Files', type: 'folder', items: [
|
||||
{ text: 'Git', type: 'folder', items: [
|
||||
{ text: 'bin', type: 'folder' },
|
||||
{ text: 'cmd', type: 'folder' },
|
||||
{ text: 'dev', type: 'folder' }
|
||||
] },
|
||||
{ text: 'Google', type: 'folder', items:[
|
||||
{ text: 'Chrome', type: 'folder' }
|
||||
] },
|
||||
{ text: 'Internet Explorer', type: 'folder', items:[
|
||||
{ text: 'en-US', type: 'folder' }
|
||||
] }
|
||||
] },
|
||||
{ text: 'Program Files (x86)', type: 'folder', items:[
|
||||
{ text: 'Microsoft', type: 'folder', items: [
|
||||
{ text: 'Edge', type: 'folder' }
|
||||
] },
|
||||
{ text: 'MSBuild', type: 'folder' },
|
||||
{ text: 'Windows Defender', type: 'folder' }
|
||||
] },
|
||||
{
|
||||
text: 'Users', type: 'folder', items: [
|
||||
{
|
||||
text: 'Admin', type: 'folder', items: [
|
||||
{ text: 'Desktop', type: 'desktop' },
|
||||
{ text: 'Documents', type: 'documents' },
|
||||
{ text: 'Downloads', type: 'downloads' },
|
||||
{ text: 'Pictures', type: 'picture' }
|
||||
]
|
||||
},
|
||||
{ text: 'Public', type: 'folder' }
|
||||
]
|
||||
},
|
||||
{ text: 'Windows', type: 'folder', items: [
|
||||
{ text: 'Boot', type: 'folder' },
|
||||
{ text: 'System32', type: 'folder', items: [
|
||||
{ text: 'Configuration', type: 'folder' },
|
||||
{ text: 'LogFiles', type: 'folder' }
|
||||
] }
|
||||
] }
|
||||
]
|
||||
},
|
||||
{ text: 'Local Disk (D:)', type: 'folder' }
|
||||
]
|
||||
},
|
||||
{ text: 'Libraries', type: 'folder' },
|
||||
{ text: 'Network', type: 'network' },
|
||||
{ text: 'Recycle Bin', type: 'recyclebin' }
|
||||
];
|
||||
|
||||
var breadcrumbObj = new ej.navigations.Breadcrumb({
|
||||
cssClass: 'e-custom-breadcrumb',
|
||||
itemTemplate: '#itemTemplate',
|
||||
items: breadcrumbItems,
|
||||
beforeItemRender: beforeItemRenderHanlder
|
||||
}, '#address-bar');
|
||||
|
||||
function beforeItemRenderHanlder(args) {
|
||||
if (!args.element.classList.contains('e-breadcrumb-separator')) {
|
||||
new ej.navigations.Menu({
|
||||
items: [{
|
||||
text: args.item.text, iconCss: args.item.iconCss
|
||||
}],
|
||||
select: function (args) {
|
||||
for (var i = 0; i < breadcrumbItems.length; i++) {
|
||||
if (breadcrumbItems[i].text === args.item.text) {
|
||||
breadcrumbItems = breadcrumbItems.slice(0, i + 1);
|
||||
breadcrumbItems[0].iconCss = 'e-bicons e-' + getItems(args.item.text, true)[0].items.type;
|
||||
breadcrumbObj.items = breadcrumbItems;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}, args.element.querySelector('ul'));
|
||||
if (args.item) {
|
||||
if (getItems(args.item.text)[0].items) {
|
||||
new ej.navigations.Menu({
|
||||
items: getItems(args.item.text),
|
||||
showItemOnClick: true,
|
||||
select: function (args) {
|
||||
if (!args.element.parentElement.classList.contains('e-menu') && this.items[0] && this.items[0].items) {
|
||||
var idx;
|
||||
for (var i = 0; i < this.items[0].items.length; i++) {
|
||||
for (var j = 0; j < breadcrumbItems.length; j++) {
|
||||
if (this.items[0].items[i].text === breadcrumbItems[j].text) {
|
||||
idx = j;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (idx) {
|
||||
breadcrumbItems = breadcrumbItems.slice(0, idx);
|
||||
}
|
||||
breadcrumbItems[0].iconCss = 'e-bicons e-' + args.item.type;
|
||||
breadcrumbItems.push({ text: args.item.text });
|
||||
breadcrumbObj.items = breadcrumbItems;
|
||||
}
|
||||
},
|
||||
beforeOpen: function () {
|
||||
this.element.classList.add('e-open');
|
||||
},
|
||||
onClose: function () {
|
||||
this.element.classList.remove('e-open');
|
||||
}
|
||||
}, args.element.querySelectorAll('ul')[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getItems(text, needParent) {
|
||||
var mItems = [].slice.call(items);
|
||||
var isBreaked;
|
||||
if (!text) {
|
||||
mItems = getSubMenuItems(mItems);
|
||||
}
|
||||
else {
|
||||
for (var i = 1; i < breadcrumbItems.length; i++) {
|
||||
for (var j = 0; j < mItems.length; j++) {
|
||||
if (mItems[j].text === breadcrumbItems[i].text) {
|
||||
if (mItems[j].text === text) {
|
||||
if (needParent) {
|
||||
mItems = mItems[j];
|
||||
} else {
|
||||
mItems = getSubMenuItems(mItems[j].items);
|
||||
}
|
||||
isBreaked = true;
|
||||
} else {
|
||||
mItems = mItems[j].items;
|
||||
j = 0;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isBreaked) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return [{ items: mItems }];
|
||||
}
|
||||
|
||||
function getSubMenuItems(mItems) {
|
||||
var subItems;
|
||||
if (mItems) {
|
||||
subItems = [];
|
||||
for (var i = 0; i < mItems.length; i++) {
|
||||
subItems.push({ text: mItems[i].text, type: mItems[i].type });
|
||||
}
|
||||
}
|
||||
return subItems;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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-10 col-md-12\">\n <h5>Bind to Location</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=\"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</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 new ej.navigations.Breadcrumb({\n enableNavigation: false, \n url: \"https://ej2.syncfusion.com/javascript/demos/breadcrumb/navigation\" \n }, '#url-binding');\n\n"}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-10 col-md-12">
|
||||
<h5>Bind to Location</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="bind-to-location"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-10 col-md-12">
|
||||
<h5>URL Binding</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="url-binding"></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p> This sample demonstrates the Navigation functionality of the <b>Breadcrumb</b> component.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>The <code>Breadcrumb</code> component can be rendered by using the href(url) of the current page or by using <code>url</code> property when the user is not specified the breadcrumb items using <code>items</code> property.</p>
|
||||
<p>More information about <code>Breadcrumb</code> component navigations feature can be found in this <a target='_blank' href="https://ej2.syncfusion.com/javascript/documentation/breadcrumb/es5-getting-started/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.content-wrapper {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-wrapper {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.col-xs-12,
|
||||
.col-xs-4,
|
||||
.col-xs-12 {
|
||||
padding: 10px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.tailwind .e-breadcrumb,
|
||||
.tailwind-dark .e-breadcrumb {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.material .e-breadcrumb,
|
||||
.material-dark .e-breadcrumb {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.fabric .e-breadcrumb,
|
||||
.fabric-dark .e-breadcrumb,
|
||||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
this.default = function() {
|
||||
new ej.navigations.Breadcrumb({
|
||||
enableNavigation: false
|
||||
}, '#bind-to-location');
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
enableNavigation: false,
|
||||
url: "https://ej2.syncfusion.com/javascript/demos/breadcrumb/navigation"
|
||||
}, '#url-binding');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,139 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Simple Breadcrumb</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="default"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Breadcrumb with Overflow</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="overflow"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Active Last Breadcrumb</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="active-item"></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the basic rendering, overflow feature and navigable active item of the <b>Breadcrumb</b> component with icon support.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>The <code>Breadcrumb</code> component is used as a navigational aid to identify the current page location within the navigational hierarchy structure of websites. It has list of items that can be populated using the <code>items</code> property.</p>
|
||||
<p><b>Simple Breadcrumb</b></p>
|
||||
<p>In this sample, the <code>Breadcrumb</code> is populated with Text, Icon, and Url.</p>
|
||||
<p><b>Breadcrumb with Overflow</b></p>
|
||||
<p>In the <code>Breadcrumb</code> component, <code>maxItems</code> and <code>overflowMode</code> properties were used to limit the number of breadcrumb items to be displayed.</p>
|
||||
<p>The following overflow mode's were available in the <code>Breadcrumb</code> component.</p>
|
||||
<ul>
|
||||
<li><code>Default</code> - Specified maxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.</li>
|
||||
<li><code>Collapsed</code> - Only the first and last items will be visible, and the remaining items will be hidden in the collapsed icon. When the collapsed icon is clicked, all items become visible.</li>
|
||||
</ul>
|
||||
<p>In this sample, the maxItems is set as 3 with overflowMode as Default. To prevent breadcrumb item navigation we have set <code>false</code> in <code>enableNavigation</code> property of <code>Breadcrumb</code> component.</p>
|
||||
<p><b>Active Last Breadcrumb</b></p>
|
||||
<p>In this sample, navigation for the last item is enabled by using <code>enableActiveItemNavigation</code> property.</p>
|
||||
<p>More information about <code>Breadcrumb</code> component can be found in this <a target='_blank' href="https://ej2.syncfusion.com/javascript/documentation/breadcrumb/es5-getting-started/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.content-wrapper {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-wrapper {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.col-xs-12,
|
||||
.col-xs-4,
|
||||
.col-xs-12 {
|
||||
padding: 10px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.tailwind .e-breadcrumb,
|
||||
.tailwind-dark .e-breadcrumb {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.material .e-breadcrumb,
|
||||
.material-dark .e-breadcrumb {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.fabric .e-breadcrumb,
|
||||
.fabric-dark .e-breadcrumb,
|
||||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'e-bicons';
|
||||
src:
|
||||
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.e-bicons {
|
||||
font-family: 'e-bicons' !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
|
||||
padding-left: 0;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.e-bicons.e-arrow {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.bootstrap .e-bicons.e-arrow,
|
||||
.bootstrap4 .e-bicons.e-arrow,
|
||||
.bootstrap-dark .e-bicons.e-arrow {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.tailwind .e-bicons.e-arrow,
|
||||
.tailwind-dark .e-bicons.e-arrow {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.e-arrow:before {
|
||||
content: "\e706";
|
||||
font-weight: 800;
|
||||
font-size: 9px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
this.default = function () {
|
||||
var items = [
|
||||
{
|
||||
iconCss: 'e-icons e-home',
|
||||
url: "https://ej2.syncfusion.com/javascript/demos",
|
||||
},
|
||||
{
|
||||
text: "Components",
|
||||
url: "https://ej2.syncfusion.com/javascript/demos/#/material/grid/grid-overview",
|
||||
},
|
||||
{
|
||||
text: "Navigations",
|
||||
url: "https://ej2.syncfusion.com/javascript/demos/#/material/grid/menu/default",
|
||||
},
|
||||
{
|
||||
text: "Breadcrumb",
|
||||
url: "./breadcrumb/default",
|
||||
}
|
||||
];
|
||||
|
||||
var overflowItems = [
|
||||
{
|
||||
text: "Home",
|
||||
url: "../"
|
||||
},
|
||||
{
|
||||
text: "Breadcrumb",
|
||||
url: "./breadcrumb"
|
||||
},
|
||||
{
|
||||
text: "Default",
|
||||
url: "./breadcrumb/default"
|
||||
},
|
||||
{
|
||||
text: "Icons",
|
||||
url: "./breadcrumb/icons"
|
||||
},
|
||||
{
|
||||
text: "Navigation",
|
||||
url: "./breadcrumb/navigation"
|
||||
},
|
||||
{
|
||||
text: "Overflow",
|
||||
url: "./breadcrumb/overflow"
|
||||
}
|
||||
];
|
||||
|
||||
var activeItems = [
|
||||
{
|
||||
iconCss: 'e-icons e-home',
|
||||
url: "https://ej2.syncfusion.com/javascript/demos",
|
||||
},
|
||||
{
|
||||
text: "All Components",
|
||||
url: "https://ej2.syncfusion.com/javascript/demos/#/material/grid/grid-overview",
|
||||
},
|
||||
{
|
||||
text: "Breadcrumb",
|
||||
url: "./breadcrumb/default",
|
||||
}
|
||||
];
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: items,
|
||||
enableNavigation: false
|
||||
}, '#default');
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: overflowItems,
|
||||
enableNavigation: false,
|
||||
maxItems: 3,
|
||||
separatorTemplate: '<span class="e-bicons e-arrow"></span>'
|
||||
}, '#overflow');
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: activeItems,
|
||||
enableNavigation: false,
|
||||
enableActiveItemNavigation: true
|
||||
}, '#active-item');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,122 @@
|
|||
<div>
|
||||
<div class="col-lg-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Breadcrumb with Events</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="events"></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 property-section">
|
||||
<table id="property" title="Event Trace">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="eventarea" style="height: 245px;overflow: auto">
|
||||
<span class="EventLog" id="EventLog" style="word-break: normal;"></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="evtbtn" style="padding-bottom: 10px">
|
||||
<button id="clear">Clear Log</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the events that have been triggered on <code>Breadcrumb</code> actions. The event details are showcased in the event trace panel.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>In this demo, <code>Breadcrumb</code> performs following actions which can be traced by event trace panel:</p>
|
||||
<ul>
|
||||
<li>created - Triggers when the Breadcrumb is created.</li>
|
||||
<li>itemClick - Triggers when a Breadcrumb item is clicked.</li>
|
||||
<li>beforeItemRender - Triggers while rendering each Breadcrumb item.</li>
|
||||
</ul>
|
||||
<p>More information about <code>Breadcrumb</code> component can be found in this <a target='_blank' href="https://ej2.syncfusion.com/javascript/documentation/breadcrumb/es5-getting-started/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.content-wrapper {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-wrapper {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.col-xs-12,
|
||||
.col-xs-4,
|
||||
.col-xs-12 {
|
||||
padding: 10px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#EventLog b{
|
||||
color: #388e3c;
|
||||
}
|
||||
hr {
|
||||
margin: 1px 10px 1px 0px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.tailwind .e-breadcrumb,
|
||||
.tailwind-dark .e-breadcrumb {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.material .e-breadcrumb,
|
||||
.material-dark .e-breadcrumb {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.fabric .e-breadcrumb,
|
||||
.fabric-dark .e-breadcrumb,
|
||||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'e-bicons';
|
||||
src:
|
||||
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1wSfkAAAEoAAAAVmNtYXDnHOdpAAABmAAAAD5nbHlmSRvkRAAAAegAAANoaGVhZB2Xb78AAADQAAAANmhoZWEIUQQHAAAArAAAACRobXR4GAAAAAAAAYAAAAAYbG9jYQSCAv4AAAHYAAAADm1heHABFwEfAAABCAAAACBuYW1lXj/4/wAABVAAAAIlcG9zdE4LDloAAAd4AAAAegABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAABgABAAAAAQAA6q1k4F8PPPUACwQAAAAAAN1ClWcAAAAA3UKVZwAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAAGARMABwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBwQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAqAAAABAAEAAEAAOcH//8AAOcD//8AAAABAAQAAAABAAIABQADAAQAAAAAAAABTgFqAYABlAG0AAAABwAAAAADdwP0AB8AXwCfAOMA5gDsARIAAAEVDwUrAS8FPQE/BTsBHwUHFR8OPw8vDisBDw0XDw8jLw4/Dx8OJxUPAycHFw8EJwcfBAcXNx8EBxc3HwE/Ahc3Jz8DFzcnPwUnBy8DNycHLwQ1JyM/ASERIREzJREVHwgzITM/CDURNS8IIyECGAICAwQEBAUFBQQDAwMBAQMDAwQFBQUEBAQDAgJvAgIDAwUFBQcGBwgICAkJCQgJCAcHBwYGBQQEAwIBAQEBAgMEBAUGBgcHBwgJCAkJCQgICAcGBwUFBQMDAgLeAQIDBQUHCAkJCwsMDA0NDg4ODQwMCwoKCQgGBgUDAgEBAgMFBgYICQoKCwwMDQ4ODg0NDAwLCwkJCAcFBQMCohYTEhIiKyIOBQoIBDQJNAEDBQYvHDANDg8IDBQ0FBQUDw8IFDQTEg8NEDAcLwUFBAEBNAo0BwgKECIqIg0RERMLuHFxPgGW/ZDa/ucBAgUGCQoLBgYHAnAHBgYLCgkGBQIBAQIFBgkKCwYGB/4+AaIFBAQEAwICAgIDBAQEBQUFBAMDAwEBAwMDBAUFCQgJCAcHBwYGBQQEAwIBAQEBAgMEBAUGBgcHBwgJCAkJCQgICAcGBwUFBQMDAgICAgMDBQUFBwYHCAgICQkODQ0MDAsLCQkIBwYEAwIBAwMEBgcICAoLCwwMDQ0ODg0NDQwLCgoJBwcGBAQCAQECAwUGBwcJCgoLDA0NDew2BQUICikkKRIIERILCTcKGBQTEhwwHA8MDAUGOBM4AwEBAQI4EzcLCwwRHTEcDRETEw0JOAkUEBAUKSQpBwgGBQI2fHEt/JQCkC39QwYGBgsKCQYFAgEBAgUGCQoLBgYGA2wGBgYLCgkGBQIBAAACAAAAAAPzA0wAAwALAAA3IRMhAzMTITUhJyFSAuq4/QPrDrgCaf4uOv7dtAG9/kMB8Sh/AAAAAAEAAAAAAxcD9AAFAAATCQEXCQHpAcn+NzMB+/4FA8H+P/4/MwH0AfQAAAAAAQAAAAAD9AOAAAUAAAEnBwkBJwFZ52YBTQKbZwFM52b+sgKbZwAAAAIAAAAAA/QDngAIAA4AABMRMzUhFTMRJQUVCQE1AYzuAQnx/pL+BgH6Ae7+EgHT/o/09AFx84NwAVv+rnEBUQAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAcAAQABAAAAAAACAAcACAABAAAAAAADAAcADwABAAAAAAAEAAcAFgABAAAAAAAFAAsAHQABAAAAAAAGAAcAKAABAAAAAAAKACwALwABAAAAAAALABIAWwADAAEECQAAAAIAbQADAAEECQABAA4AbwADAAEECQACAA4AfQADAAEECQADAA4AiwADAAEECQAEAA4AmQADAAEECQAFABYApwADAAEECQAGAA4AvQADAAEECQAKAFgAywADAAEECQALACQBIyBlLWJjb25zUmVndWxhcmUtYmNvbnNlLWJjb25zVmVyc2lvbiAxLjBlLWJjb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AYgBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAGIAYwBvAG4AcwBlAC0AYgBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AYgBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYBAgEDAQQBBQEGAQcAE2RvY3VtZW50LXNldHRpbmctd2YOZm9sZGVyLW9wZW4tMDERY2hldnJvbi1yaWdodF8wMy0KY2hlY2stbWFyawhob3VzZS0wNAAAAAA=) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.e-bicons {
|
||||
font-family: 'e-bicons' !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.e-folder:before {
|
||||
content: "\e704";
|
||||
}
|
||||
|
||||
.e-file:before {
|
||||
content: "\e703";
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
this.default = function () {
|
||||
var items = [
|
||||
{
|
||||
text: "Program Files",
|
||||
iconCss: "e-bicons e-folder"
|
||||
},
|
||||
{
|
||||
text: "Commom Files",
|
||||
iconCss: "e-bicons e-folder"
|
||||
},
|
||||
{
|
||||
text: "Services",
|
||||
iconCss: "e-bicons e-folder"
|
||||
},
|
||||
{
|
||||
text: "Config.json",
|
||||
iconCss: "e-bicons e-file"
|
||||
}
|
||||
];
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: items,
|
||||
created: createdHandler,
|
||||
itemClick: clickHandler,
|
||||
beforeItemRender: beforeItemRenderHandler,
|
||||
enableNavigation: false
|
||||
}, '#events');
|
||||
|
||||
var clear = new ej.buttons.Button();
|
||||
clear.appendTo('#clear');
|
||||
|
||||
document.getElementById('clear').onclick = function() {
|
||||
document.getElementById('EventLog').innerHTML = '';
|
||||
};
|
||||
|
||||
function createdHandler() {
|
||||
logEvent('created');
|
||||
}
|
||||
|
||||
function clickHandler(args) {
|
||||
logEvent(args.name);
|
||||
}
|
||||
|
||||
function beforeItemRenderHandler(args) {
|
||||
logEvent(args.name);
|
||||
}
|
||||
|
||||
function logEvent(eventName) {
|
||||
var span = document.createElement('span');
|
||||
span.innerHTML = 'Breadcrumb <b>' + eventName + '</b> event called<hr>';
|
||||
var log = document.getElementById('EventLog');
|
||||
log.insertBefore(span, log.firstChild);
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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>Simple Breadcrumb</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=\"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"}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<div class="control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Simple Breadcrumb</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="keyboard-navigation"></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p> This sample demonstrates the Keyboard Navigation functionalities of the <b>Breadcrumb</b> component.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>The <code>Breadcrumb</code> component can be interacted with keyboard navigation. Below key combinations can be used in Breadcrumb to initiate various actions.</p>
|
||||
<ul>
|
||||
<li><b>Tab</b> to navigate to the next item.</li>
|
||||
<li><b>Shift + Tab</b> to navigate to the previous item.</li>
|
||||
<li><b>Enter</b> to click the item.</li>
|
||||
</ul>
|
||||
<p>More information about <code>Breadcrumb</code> component Keyboard navigations can be found in this <a target='_blank' href="https://ej2.syncfusion.com/javascript/documentation/breadcrumb/es5-getting-started/">documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.content-wrapper {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-wrapper {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.col-xs-12,
|
||||
.col-xs-4,
|
||||
.col-xs-12 {
|
||||
padding: 10px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.tailwind .e-breadcrumb,
|
||||
.tailwind-dark .e-breadcrumb {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.material .e-breadcrumb,
|
||||
.material-dark .e-breadcrumb {
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.fabric .e-breadcrumb,
|
||||
.fabric-dark .e-breadcrumb,
|
||||
.highcontrast .e-breadcrumb {
|
||||
margin-left: -4px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
this.default = function() {
|
||||
new ej.navigations.Breadcrumb({
|
||||
enableNavigation: false
|
||||
}, '#keyboard-navigation');
|
||||
};
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
{
|
||||
"name": "Breadcrumb",
|
||||
"directory": "breadcrumb",
|
||||
"category": "Navigation",
|
||||
"ftName": "breadcrumb",
|
||||
"type": "preview",
|
||||
"samples": [
|
||||
{
|
||||
"url": "default",
|
||||
"name": "Default Functionalities",
|
||||
"category": "Breadcrumb",
|
||||
"api":{ "Breadcrumb":["items", "enableNavigation", "maxItems", "separatorTemplate"], "BreadcrumbItem": ["text", "iconCss", "url"] },
|
||||
"description": "This example demonstrates the Syncfusion JavaScript ES5 Breadcrumb items with icons, text and url along with overflow mode when exceeds maximum items count."
|
||||
},
|
||||
{
|
||||
"url": "bind-to-location",
|
||||
"name": "Bind to Location",
|
||||
"category": "Breadcrumb",
|
||||
"api":{"Breadcrumb":["url"]},
|
||||
"description": "This example demonstrates the binding of current url location to the items and items based on static url of Syncfusion JavaScript ES5 Breadcrumb component."
|
||||
},
|
||||
{
|
||||
"url": "template-and-customization",
|
||||
"name": "Template and Customization",
|
||||
"category": "Breadcrumb",
|
||||
"api":{ "Breadcrumb":["items", "cssClass", "itemTemplate", "separatorTemplate"], "BreadcrumbItem": ["text", "iconCss"] },
|
||||
"description": "This example demonstrates how to customize item and separator by using templates, disable, add icon for item, with the Syncfusion JavaScript ES5 Breadcrumb component."
|
||||
},
|
||||
{
|
||||
"url": "events",
|
||||
"name": "Events",
|
||||
"category": "Breadcrumb",
|
||||
"api":{ "Breadcrumb":["items", "created", "itemClick", "beforeItemRender", "enableNavigation"], "BreadcrumbItem": ["text", "iconCss"] },
|
||||
"description": "This example demonstrates Syncfusion JavaScript ES5 Breadcrumb component shows the events that have been triggered during the breadcrumb actions."
|
||||
},
|
||||
{
|
||||
"url": "keyboard-navigation",
|
||||
"name": "Keyboard Navigation",
|
||||
"category": "Breadcrumb",
|
||||
"api":{},
|
||||
"description": "This example explains the key combinations used to perform various actions in Syncfusion JavaScript ES5 Breadcrumb component."
|
||||
},
|
||||
{
|
||||
"url": "address-bar",
|
||||
"name": "Address Bar",
|
||||
"category": "Use Case",
|
||||
"api":{ "Breadcrumb":["items", "cssClass", "itemTemplate", "separatorTemplate", "beforeItemRender"], "BreadcrumbItem": ["text"] },
|
||||
"description": "This example demonstrates the use case of the Syncfusion JavaScript ES5 Breadcrumb by integrating with Menu component using templates."
|
||||
}
|
||||
]
|
||||
}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,547 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Custom Breadcrumb</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="item-template"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Specific Item Template</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="specific-item-template"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Custom Separator</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="separator-template"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Custom Breadcrumb and Separator</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="both-template"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Breadcrumb with Icons</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="icons"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<h5>Disabled Breadcrumb</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav id="disabled"></nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script id="chipTemplate" type="text/x-template">
|
||||
<div class="e-lib e-chip-list e-control e-chip-set">
|
||||
<div class="e-chip" tabindex="0" role="option" aria-label="Apple" aria-selected="false">
|
||||
<span class="e-chip-text">${text}</span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="specificItemTemplate" type="text/x-template">
|
||||
<div>
|
||||
${if(text=="Breadcrumb")}
|
||||
<span class="e-searchfor-text"><span style="margin-right: 5px">Search for:</span>
|
||||
<a class="e-breadcrumb-text" href="${url}" onclick="return false">${text}</a></span>
|
||||
${else}
|
||||
<a class="e-breadcrumb-text" href="${url}" onclick="return false">${text}</a>
|
||||
${/if}
|
||||
</div>
|
||||
</script>
|
||||
<script id="customTemplate" type="text/x-template">
|
||||
<div class="e-custom-item">
|
||||
<div class="e-custom-icon">
|
||||
<span class="e-bicons e-frame e-check"></span>
|
||||
<span class="e-label">${text}</span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<div id="action-description">
|
||||
<p> This sample demonstrates the template functionalities of the <b>Breadcrumb</b> component. The breadcrumb item
|
||||
templates are customized using HTML and CSS.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> The <code>Breadcrumb</code> component provides a way to customize the items using <code>itemTemplate</code> and
|
||||
the separators using
|
||||
<code>separatorTemplate</code> properties.
|
||||
</p>
|
||||
<p>The icons are used for the visual representation of the breadcrumb items. You can specify the
|
||||
<code>iconCss</code> property to display the icon within the corresponding breadcrumb item. By default, the icons are aligned in the left position.</p>
|
||||
<p>You can enable or disable the entire Breadcrumb by adding/removing the <b>e-disabled</b> class by using <code>cssClass</code> property.
|
||||
</p>
|
||||
<p>In this demo, we have used Shopping Cart details as Breadcrumb Items and customized the items using
|
||||
<code>itemTemplate</code> and <code>separatorTemplate</code>.</p>
|
||||
<p>And, showcased the file path of the config.json file with icons using the <code>iconCss</code> property and
|
||||
disabled the specific Breadcrumb items by adding <b>e-disabled</b> class to the item element in <code>beforeItemRender</code> event.</p>
|
||||
<p>More information about <code>Breadcrumb</code> component template feature can be found in this <a
|
||||
target='_blank'
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/breadcrumb/es5-getting-started/">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'e-bicons';
|
||||
src:
|
||||
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.e-bicons {
|
||||
font-family: 'e-bicons' !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-chip-list {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-chip-list .e-chip {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-breadcrumb-separator {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.e-arrow:before {
|
||||
content: "\e706";
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.e-folder:before {
|
||||
content: "\e704";
|
||||
}
|
||||
|
||||
.e-file:before {
|
||||
content: "\e703";
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-separator {
|
||||
width: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb li + li {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background: #938bf6;
|
||||
padding: 10px 12px 10px 30px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-breadcrumb-item:last-child .e-custom-item {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid white;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid #938bf6;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb li:first-child .e-custom-item:after {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb li:first-child .e-custom-item {
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item:hover,
|
||||
.e-custom-breadcrumb .e-custom-item:active{
|
||||
background-color: #7b74ce;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item:hover::before,
|
||||
.e-custom-breadcrumb .e-custom-item:active::before{
|
||||
border-left: 20px solid #7b74ce;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-icon .e-frame {
|
||||
border-radius: 100%;
|
||||
background-color: #7dd284;
|
||||
border-color: #7dd284;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item .e-label {
|
||||
vertical-align: top;
|
||||
padding-left: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-icon .e-frame::before {
|
||||
content: "\e707";
|
||||
font-size: 10px;
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 4px
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb li:last-child .e-custom-icon .e-frame {
|
||||
background-color: #c9c5fb;
|
||||
border-color: #c9c5fb;
|
||||
color: #938bf6;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-breadcrumb-item,
|
||||
.e-custom-breadcrumb .e-breadcrumb-separator
|
||||
{
|
||||
padding-right: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tailwind .e-custom-breadcrumb .e-custom-icon {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.e-searchfor-text {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.e-bigger .e-searchfor-text {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.fabric .e-searchfor-text,
|
||||
.fabric-dark .e-searchfor-text,
|
||||
.highcontrast .e-searchfor-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.e-bigger.fabric .e-searchfor-text,
|
||||
.e-bigger.fabric-dark .e-searchfor-text,
|
||||
.e-bigger.highcontrast .e-searchfor-text {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.e-specific-item-template .e-breadcrumb-item:last-child a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.content-wrapper {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
.bootstrap .e-breadcrumb-chips,
|
||||
.bootstrap .e-custom-breadcrumb,
|
||||
.bootstrap4 .e-breadcrumb-chips,
|
||||
.bootstrap4 .e-custom-breadcrumb,
|
||||
.bootstrap-dark .e-breadcrumb-chips,
|
||||
.bootstrap-dark .e-custom-breadcrumb {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
.tailwind .e-breadcrumb,
|
||||
.tailwind-dark .e-breadcrumb {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.tailwind .e-custom-breadcrumb,
|
||||
.tailwind-dark .e-custom-breadcrumb {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.material .e-breadcrumb:not(.e-custom-breadcrumb),
|
||||
.material-dark .e-breadcrumb:not(.e-custom-breadcrumb) {
|
||||
margin-left: -8px
|
||||
}
|
||||
|
||||
.fabric .e-breadcrumb:not(.e-custom-breadcrumb),
|
||||
.fabric-dark .e-breadcrumb:not(.e-custom-breadcrumb) {
|
||||
margin-left: -4px
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.content-wrapper {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.col-xs-12,
|
||||
.col-xs-4,
|
||||
.col-xs-12 {
|
||||
padding: 10px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-wrapper div.row {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'e-bicons';
|
||||
src:
|
||||
url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.e-bicons {
|
||||
font-family: 'e-bicons' !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-chip-list {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-chip-list .e-chip {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-breadcrumb-separator {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.e-arrow:before {
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.e-arrow:before {
|
||||
content: "\e85f";
|
||||
}
|
||||
|
||||
.bootstrap4 .e-arrow:before {
|
||||
content: "\e7ce";
|
||||
}
|
||||
.bootstrap5 .e-arrow:before,
|
||||
.bootstrap5-dark .e-arrow:before {
|
||||
content: "\e7f9";
|
||||
}
|
||||
.tailwind .e-arrow:before,
|
||||
.tailwind-dark .e-arrow:before {
|
||||
content: "\e7a8";
|
||||
}
|
||||
|
||||
.e-folder:before {
|
||||
content: "\e704";
|
||||
}
|
||||
|
||||
.e-file:before {
|
||||
content: "\e703";
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips ol,
|
||||
.e-custom-breadcrumb ol {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-breadcrumb-item,
|
||||
.e-breadcrumb-chips .e-breadcrumb-separator,
|
||||
.e-custom-breadcrumb .e-breadcrumb-item,
|
||||
.e-custom-breadcrumb .e-breadcrumb-separator {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-breadcrumb-item:not(:last-child):not(.e-breadcrumb-separator):active,
|
||||
.e-breadcrumb-chips .e-breadcrumb-item:not(:last-child):not(.e-breadcrumb-separator):hover,
|
||||
.e-custom-breadcrumb .e-breadcrumb-item:not(:last-child):not(.e-breadcrumb-separator):active,
|
||||
.e-custom-breadcrumb .e-breadcrumb-item:not(:last-child):not(.e-breadcrumb-separator):hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.e-breadcrumb-chips .e-breadcrumb-item:last-child .e-chip {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-separator {
|
||||
width: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb li+li {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item {
|
||||
width: auto;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background: #938bf6;
|
||||
padding: 10px 12px 10px 30px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid white;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
}
|
||||
|
||||
.highcontrast .e-custom-breadcrumb .e-custom-item:after,
|
||||
.material-dark .e-custom-breadcrumb .e-custom-item:after,
|
||||
.fabric-dark .e-custom-breadcrumb .e-custom-item:after,
|
||||
.bootstrap-dark .e-custom-breadcrumb .e-custom-item:after,
|
||||
.tailwind-dark .e-custom-breadcrumb .e-custom-item:after {
|
||||
border-left: 20px solid black;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid #938bf6;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb li:first-child .e-custom-item:after {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb li:first-child .e-custom-item {
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item:hover,
|
||||
.e-custom-breadcrumb .e-custom-item:active {
|
||||
background-color: #7b74ce;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item:hover::before,
|
||||
.e-custom-breadcrumb .e-custom-item:active::before {
|
||||
border-left: 20px solid #7b74ce;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-icon .e-frame {
|
||||
border-radius: 100%;
|
||||
background-color: #7dd284;
|
||||
border-color: #7dd284;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-item .e-bc-label {
|
||||
vertical-align: top;
|
||||
padding-left: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-icon .e-frame::before {
|
||||
content: "\e707";
|
||||
font-size: 10px;
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 4px
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb li:last-child .e-custom-icon .e-frame {
|
||||
background-color: #c9c5fb;
|
||||
border-color: #c9c5fb;
|
||||
color: #938bf6;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-breadcrumb-item,
|
||||
.e-custom-breadcrumb .e-breadcrumb-separator {
|
||||
padding-right: 0px !important;
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.e-custom-breadcrumb .e-custom-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tailwind .e-custom-breadcrumb .e-custom-icon {
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
this.default = function () {
|
||||
var items = [
|
||||
{
|
||||
text: "Cart"
|
||||
},
|
||||
{
|
||||
text: "Billing"
|
||||
},
|
||||
{
|
||||
text: "Shipping"
|
||||
},
|
||||
{
|
||||
text: "Payment"
|
||||
}
|
||||
];
|
||||
var iconItems = [
|
||||
{
|
||||
text: "Program Files",
|
||||
iconCss: "e-bicons e-folder"
|
||||
},
|
||||
{
|
||||
text: "Commom Files",
|
||||
iconCss: "e-bicons e-folder"
|
||||
},
|
||||
{
|
||||
text: "Services",
|
||||
iconCss: "e-bicons e-folder"
|
||||
},
|
||||
{
|
||||
text: "Config.json",
|
||||
iconCss: "e-bicons e-file"
|
||||
}
|
||||
];
|
||||
|
||||
var specificTemplateItems = [
|
||||
{
|
||||
text: "Home",
|
||||
url: "https://ej2.syncfusion.com/demos",
|
||||
},
|
||||
{
|
||||
text: "Components",
|
||||
url: "https://ej2.syncfusion.com/demos/#/material/grid/grid-overview",
|
||||
},
|
||||
{
|
||||
text: "Navigations",
|
||||
url: "https://ej2.syncfusion.com/demos/#/material/menu/default",
|
||||
},
|
||||
{
|
||||
text: "Breadcrumb",
|
||||
url: "./breadcrumb/default",
|
||||
}
|
||||
];
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: items,
|
||||
cssClass: 'e-breadcrumb-chips',
|
||||
itemTemplate: '#chipTemplate'
|
||||
}, '#item-template');
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: specificTemplateItems,
|
||||
itemTemplate: '#specificItemTemplate',
|
||||
cssClass: 'e-specific-item-template'
|
||||
}, '#specific-item-template');
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: items,
|
||||
separatorTemplate: '<span class="e-icons e-arrow"></span>'
|
||||
}, '#separator-template');
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: items,
|
||||
cssClass: 'e-custom-breadcrumb',
|
||||
itemTemplate: '#customTemplate',
|
||||
separatorTemplate: '<div class="e-custom-separator"></div>'
|
||||
}, '#both-template');
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: iconItems
|
||||
}, '#icons');
|
||||
|
||||
new ej.navigations.Breadcrumb({
|
||||
items: iconItems,
|
||||
beforeItemRender: function(args) {
|
||||
if(args.item.text !== 'Program Files') {
|
||||
args.element.classList.add('e-disabled');
|
||||
}
|
||||
}
|
||||
}, '#disabled');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -22,7 +22,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#dotCustomization');
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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: false },\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/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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: false },\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"}
|
||||
|
|
@ -23,7 +23,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
legendRender: function (args) {
|
||||
if (args.text === 'Target_0') {
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -21,7 +21,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -23,7 +23,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
bullet1.appendTo('#container1');
|
||||
|
|
@ -49,7 +49,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
bullet2.appendTo('#container2');
|
||||
|
|
@ -75,7 +75,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
bullet3.appendTo('#container3');
|
||||
|
|
@ -101,7 +101,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
bullet4.appendTo('#container4');
|
||||
|
|
@ -126,7 +126,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
bullet5.appendTo('#container5');
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"localData\" 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}}var data = [\n {\n requiredStories: 20,\n completedStories: 25,\n name: 'David'\n },\n {\n requiredStories: 25,\n completedStories: 20,\n name: 'Asif'\n },\n {\n requiredStories: 15,\n completedStories: 10,\n name: 'Thomas'\n },\n {\n requiredStories: 40,\n completedStories: 39,\n name: 'Rohit'\n },\n {\n requiredStories: 35,\n completedStories: 40,\n name: 'Virat'\n },\n {\n requiredStories: 28,\n completedStories: 25,\n name: 'Jude'\n },\n {\n requiredStories: 10,\n completedStories: 18,\n name: 'Warner'\n },\n {\n requiredStories: 30,\n completedStories: 28,\n name: 'Malik'\n }\n];\n\n\n/**\n * Sample for multiple data.\n */\n\n var bullet = new ej.charts.BulletChart({\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n tooltip: { enable: true },\n dataSource: data,\n valueField: 'completedStories',\n targetField: 'requiredStories',\n categoryField: 'name',\n animation: { enable: false },\n valueFill: '#304560',\n targetColor: '#304560',\n ranges: [\n { end: 25, opacity: 1, color: '#DBE7F3' },\n { end: 37, opacity: 1, color: '#BBCEE7' },\n { end: 45, opacity: 1, color: '#96B2D7' }\n ],\n height: '400',\n minimum: 5, maximum: 45, interval: 5,\n minorTickLines: { width: 0},\n title: 'Sprint Planning',\n subtitle: 'Estimated in story points',\n titlePosition: 'Top',\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('#localData');\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"localData\" 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}}var data = [\n {\n requiredStories: 20,\n completedStories: 25,\n name: 'David'\n },\n {\n requiredStories: 25,\n completedStories: 20,\n name: 'Asif'\n },\n {\n requiredStories: 15,\n completedStories: 10,\n name: 'Thomas'\n },\n {\n requiredStories: 40,\n completedStories: 39,\n name: 'Rohit'\n },\n {\n requiredStories: 35,\n completedStories: 40,\n name: 'Virat'\n },\n {\n requiredStories: 28,\n completedStories: 25,\n name: 'Jude'\n },\n {\n requiredStories: 10,\n completedStories: 18,\n name: 'Warner'\n },\n {\n requiredStories: 30,\n completedStories: 28,\n name: 'Malik'\n }\n];\n\n\n/**\n * Sample for multiple data.\n */\n\n var bullet = new ej.charts.BulletChart({\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n tooltip: { enable: true },\n dataSource: data,\n valueField: 'completedStories',\n targetField: 'requiredStories',\n categoryField: 'name',\n animation: { enable: false },\n valueFill: '#304560',\n targetColor: '#304560',\n ranges: [\n { end: 25, opacity: 1, color: '#DBE7F3' },\n { end: 37, opacity: 1, color: '#BBCEE7' },\n { end: 45, opacity: 1, color: '#96B2D7' }\n ],\n height: '400',\n minimum: 5, maximum: 45, interval: 5,\n minorTickLines: { width: 0},\n title: 'Sprint Planning',\n subtitle: 'Estimated in story points',\n titlePosition: 'Top',\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('#localData');\n"}
|
||||
|
|
@ -71,7 +71,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
bullet.appendTo('#localData');
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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 title: 'Profit in Percent',\n titlePosition: 'Top',\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/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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 title: 'Profit in Percent',\n titlePosition: 'Top',\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"}
|
||||
|
|
@ -25,7 +25,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
chart.appendTo('#orientation');
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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 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/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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 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"}
|
||||
|
|
@ -23,7 +23,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
bullet.appendTo('#righttoleft');
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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}K </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 height: '110px',\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 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/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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}K </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 height: '110px',\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 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"}
|
||||
|
|
@ -21,7 +21,7 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.bulletChart.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/light/i, 'Light').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
});
|
||||
bullet.appendTo('#tooltip');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -14,7 +14,7 @@
|
|||
<div id="text" class="e-btn-group">
|
||||
<input type="radio" id="left" name="align" value="left" />
|
||||
<label class="e-btn" for="left">Left</label>
|
||||
<input type="radio" id="center" name="align" value="center" disabled />
|
||||
<input type="radio" id="center" name="align" value="center" />
|
||||
<label class="e-btn" for="center">Center</label>
|
||||
<input type="radio" id="right" name="align" value="right" />
|
||||
<label class="e-btn" for="right">Right</label>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</p>
|
||||
<ul>
|
||||
<li><b>Default:</b> Triggers action on button click.</li>
|
||||
<li><b>Single selection:</b> Radio type behavior selects a single button and submits its value to the server on form submission. This is showcased with the second button disabled, by default.</li>
|
||||
<li><b>Single selection:</b> Radio type behavior selects a single button and submits its value to the server on form submission.</li>
|
||||
<li><b>Multiple selection:</b> Checkbox type behavior selects multiple buttons and submits its selected values to the server on form submission. This is showcased with the first button selected, by default.</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
|
|
|||
Двоичный файл не отображается.
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 11 KiB |
Двоичный файл не отображается.
Двоичный файл не отображается.
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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 .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/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </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 .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 color: #ff7500;\n }\n\n .highcontrast .sf-icon-start:before,\n .material-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 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"}
|
||||
|
|
@ -53,6 +53,24 @@
|
|||
left: -2px;
|
||||
}
|
||||
|
||||
.highcontrast .sf-icon-cup:before,
|
||||
.material-dark .sf-icon-cup:before,
|
||||
.fabric-dark .sf-icon-cup:before,
|
||||
.bootstrap-dark .sf-icon-cup:before,
|
||||
.bootstrap5-dark .sf-icon-cup:before,
|
||||
.tailwind-dark .sf-icon-cup:before {
|
||||
color: #ff7500;
|
||||
}
|
||||
|
||||
.highcontrast .sf-icon-start:before,
|
||||
.material-dark .sf-icon-start:before,
|
||||
.fabric-dark .sf-icon-start:before,
|
||||
.bootstrap-dark .sf-icon-start:before,
|
||||
.bootstrap5-dark .sf-icon-start:before,
|
||||
.tailwind-dark .sf-icon-start:before {
|
||||
color: #ff7500;
|
||||
}
|
||||
|
||||
.sf-icon-start:before {
|
||||
content: '\e708';
|
||||
color: #0b0bd9a1;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\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 class=\"valuesWrapper col-lg-6 col-sm-8 col-md-8\">\n <h5>Selected values</h5>\n <div class=\"contentValue\">\n <div id=\"multiSelect\">\n </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/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"col-lg-7\">\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>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"}
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div id="control_wrapper" class="col-lg-6 col-sm-8 col-md-8 multiselectWrapper">
|
||||
<div id="container" style="overflow:auto"></div>
|
||||
<div id="calendar"></div>
|
||||
<br/>
|
||||
<div class="col-lg-7">
|
||||
<div id="control_wrapper" class="col-lg-6 col-sm-8 col-md-8 multiselectWrapper">
|
||||
<div id="container" style="overflow:auto"></div>
|
||||
<div id="calendar"></div>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="valuesWrapper col-lg-6 col-sm-8 col-md-8">
|
||||
<h5>Selected values</h5>
|
||||
<div class="contentValue">
|
||||
<div id="multiSelect">
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<label>Selected values</label>
|
||||
<div class="content-value">
|
||||
<div id="multiselect"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,12 +39,13 @@
|
|||
float: none;
|
||||
}
|
||||
|
||||
.contentValue {
|
||||
.content-value {
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
max-height: 100px;
|
||||
margin-bottom: 10px;
|
||||
max-height: 150px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
margin-top: 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.e-bigger #wrapper,
|
||||
|
|
@ -51,15 +53,13 @@
|
|||
max-width: 300px;
|
||||
}
|
||||
|
||||
.valuesWrapper {
|
||||
margin: 0 auto;
|
||||
float: none;
|
||||
padding: 0;
|
||||
max-width: 370px;
|
||||
}
|
||||
|
||||
body.highcontrast .contentValue {
|
||||
border: 1px solid #969696;
|
||||
.highcontrast .content-value,
|
||||
.material-dark .content-value,
|
||||
.fabric-dark .content-value,
|
||||
.bootstrap-dark .content-value,
|
||||
.bootstrap5-dark .content-value,
|
||||
.tailwind-dark .content-value {
|
||||
border: 1px solid rgb(150, 150, 150);
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -9,7 +9,7 @@ this.default = function () {
|
|||
});
|
||||
calendar.appendTo('#calendar');
|
||||
function changeValue() {
|
||||
var element = document.getElementById('multiSelect');
|
||||
var element = document.getElementById('multiselect');
|
||||
element.innerHTML = '';
|
||||
for (var index = 0; index < this.values.length; index++) {
|
||||
element.insertBefore(document.createTextNode(this.values[index]), element.childNodes[0]);
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -54,6 +54,21 @@
|
|||
color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
.highcontrast .e-customStyle span.e-icons.highlight,
|
||||
.highcontrast .e-customStyle span.e-icons.highlight:before,
|
||||
.material-dark .e-customStyle span.e-icons.highlight,
|
||||
.material-dark .e-customStyle span.e-icons.highlight:before,
|
||||
.fabric-dark .e-customStyle span.e-icons.highlight,
|
||||
.fabric-dark .e-customStyle span.e-icons.highlight:before,
|
||||
.bootstrap-dark .e-customStyle span.e-icons.highlight,
|
||||
.bootstrap-dark .e-customStyle span.e-icons.highlight:before,
|
||||
.bootstrap5-dark .e-customStyle span.e-icons.highlight,
|
||||
.bootstrap5-dark .e-customStyle span.e-icons.highlight:before,
|
||||
.tailwind-dark .e-customStyle span.e-icons.highlight,
|
||||
.tailwind-dark .e-customStyle span.e-icons.highlight:before {
|
||||
color: #ff7500;
|
||||
}
|
||||
|
||||
.e-customStyle .e-other-month span.e-icons.highlight:before {
|
||||
content: "";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/card/basic/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n <div class=\"e-card-resize-container\">\n <div class=\"row\">\n <div class=\"row card-layout\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Basic Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n </div>\n </div>\n <div class=\"e-card-content\">\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n </div>\n <div class=\"e-card-actions\">\n <button class=\"e-btn e-outline e-primary\">\n Read More\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Weather Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Today</div>\n <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n </div>\n </div>\n <div class=\"e-card-header weather_report\">\n <div class=\"e-card-header-image\"></div>\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">1º / -4º</div>\n <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n<style>\n /* Weather Card Layout Customization */\n\n .card-control-section.basic_card_layout #weather_card.e-card {\n background-image: url('//ej2.syncfusion.com/javascript/demos/src/card/images/weather.png');\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n color: white;\n }\n\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n border: none;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n text-align: right;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n background-image: url('//ej2.syncfusion.com/javascript/demos/src/card/images/rainy.svg');\n }\n\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 100%;\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n margin: auto;\n max-width: 400px;\n }\n\n @media (min-width: 870px) {\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 50%;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n max-width: 870px;\n }\n }\n</style></div></body></html>","index.js":"{{ripple}}\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/card/basic/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n <div class=\"e-card-resize-container\">\n <div class=\"row\">\n <div class=\"row card-layout\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Basic Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n </div>\n </div>\n <div class=\"e-card-content\">\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n </div>\n <div class=\"e-card-actions\">\n <button class=\"e-btn e-outline e-primary\">\n Read More\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Weather Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Today</div>\n <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n </div>\n </div>\n <div class=\"e-card-header weather_report\">\n <div class=\"e-card-header-image\"></div>\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">1º / -4º</div>\n <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n<style>\n /* Weather Card Layout Customization */\n\n .card-control-section.basic_card_layout #weather_card.e-card {\n background-image: url('//ej2.syncfusion.com/javascript/demos/src/card/images/weather.png');\n }\n \n .material-dark .card-control-section.basic_card_layout .e-card .e-card-header {\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n color: white;\n }\n\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n border: none;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n text-align: right;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n background-image: url('//ej2.syncfusion.com/javascript/demos/src/card/images/rainy.svg');\n }\n\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 100%;\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n margin: auto;\n max-width: 400px;\n }\n\n @media (min-width: 870px) {\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 50%;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n max-width: 870px;\n }\n }\n</style></div></body></html>","index.js":"{{ripple}}\n"}
|
||||
|
|
@ -66,6 +66,10 @@
|
|||
.card-control-section.basic_card_layout #weather_card.e-card {
|
||||
background-image: url('./src/card/images/weather.png');
|
||||
}
|
||||
|
||||
.material-dark .card-control-section.basic_card_layout .e-card .e-card-header {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,
|
||||
.card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -149,6 +149,11 @@
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tailwind-dark .card-control-section.flip_card_layout #card_flip.e-card,
|
||||
.tailwind-dark .card-control-section.flip_card_layout #card_flip_profile.e-card {
|
||||
height: 314px;
|
||||
}
|
||||
|
||||
.card-control-section.flip_card_layout #card_flip.e-card,
|
||||
.card-control-section.flip_card_layout #card_profile.e-card {
|
||||
background-image: url('./src/card/images/vertical_img.png');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -43,11 +43,11 @@
|
|||
Philips trimmers are designed to last longer than 4 ordinary trimmers and DuraPower Technology which optimizes power.
|
||||
</div>
|
||||
</div>
|
||||
<img src='./src/card/images/Trimmer.png' />
|
||||
<img src='./src/card/images/Trimmer.png' alt="Trimmer"/>
|
||||
</div>
|
||||
<!-- Horizontal Card Layout for Canon Product -->
|
||||
<div tabindex="0" class="e-card e-card-horizontal" id="horizontal_product">
|
||||
<img src='./src/card/images/Camera.png' style="height:214px" />
|
||||
<img src='./src/card/images/Camera.png' style="height:214px" alt="Camera"/>
|
||||
<div class='e-card-stacked'>
|
||||
<div class="e-card-header">
|
||||
<div class="e-card-header-caption">
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -96,6 +96,11 @@
|
|||
.card-control-section.reveal_card_layout .e-card #card_reveal .e-card-header .e-card-header-caption {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.material-dark .card-control-section.reveal_card_layout .e-card .e-card-header {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td .e-card-actions .e-card-btn {
|
||||
background-color: #fff;
|
||||
|
|
@ -105,6 +110,11 @@
|
|||
.highcontrast .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td .e-card-actions .e-card-btn {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.tailwind-dark .card-control-section.reveal_card_layout .e-card #card_revealed .e-card-content table td .e-card-actions .e-card-btn {
|
||||
background-color: unset;
|
||||
border: 1px solid #22d3ee;
|
||||
}
|
||||
|
||||
.card-control-section.reveal_card_layout .row.card-layout .e-card #card_reveal.e-reveal-show {
|
||||
display: block;
|
||||
|
|
@ -213,11 +223,18 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tailwind .card-control-section.reveal_card_layout .e-card .e-collapse:before {
|
||||
.tailwind .card-control-section.reveal_card_layout .e-card .e-collapse:before,
|
||||
.tailwind-dark .card-control-section.reveal_card_layout .e-card .e-collapse:before{
|
||||
content: "\e771";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bootstrap5 .card-control-section.reveal_card_layout .e-card .e-collapse:before,
|
||||
.bootstrap5-dark .card-control-section.reveal_card_layout .e-card .e-collapse:before{
|
||||
content: "\e7e7";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.card-control-section.reveal_card_layout .e-card .e-reveal-icon {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
|
|
@ -229,9 +246,15 @@
|
|||
content: "\e984";
|
||||
}
|
||||
|
||||
.tailwind .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before {
|
||||
.tailwind .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before,
|
||||
.tailwind-dark .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before{
|
||||
content: "\e76f";
|
||||
}
|
||||
|
||||
.bootstrap5 .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before,
|
||||
.bootstrap5-dark .card-control-section.reveal_card_layout .e-card .e-reveal-icon:before {
|
||||
content: "\e71c";
|
||||
}
|
||||
|
||||
.card-control-section.reveal_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
|
||||
width: 100%;
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -5,7 +5,7 @@
|
|||
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6" id="horizontal_product">
|
||||
<!-- Swipe Card Layout -->
|
||||
<div tabindex="0" class="e-card e-card-horizontal">
|
||||
<img src='./src/card/images/newyork.png' style="height:214px" />
|
||||
<img src='./src/card/images/newyork.png' style="height:214px" alt="newyork"/>
|
||||
<div class='e-card-stacked'>
|
||||
<div class="e-card-content" style="height: 175px">
|
||||
New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div tabindex="0" class="e-card e-card-horizontal">
|
||||
<img src='./src/card/images/malaysia.png' style="height:214px" />
|
||||
<img src='./src/card/images/malaysia.png' style="height:214px" alt="malaysia"/>
|
||||
<div class='e-card-stacked'>
|
||||
<div class="e-card-content" style="height: 175px">
|
||||
Malaysia is one of the Southeast Asian countries, on a peninsula of the Asian continent, to a certain extent; it can be recognized
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div tabindex="0" class="e-card e-card-horizontal">
|
||||
<img src='./src/card/images/eiffeltower.png' style="height:214px" />
|
||||
<img src='./src/card/images/eiffeltower.png' style="height:214px" alt="eiffeltower"/>
|
||||
<div class='e-card-stacked'>
|
||||
<div class="e-card-content" style="height: 175px">
|
||||
The Eiffel Tower is acknowledged as the universal symbol of Paris and France. It was originally designed by Émile Nouguier
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div tabindex="0" class="e-card e-card-horizontal">
|
||||
<img src='./src/card/images/sydney.png' style="height:214px" />
|
||||
<img src='./src/card/images/sydney.png' style="height:214px" alt="sydney"/>
|
||||
<div class='e-card-stacked'>
|
||||
<div class="e-card-content" style="height: 175px">
|
||||
Sydney is a city on the east coast of Australia. Sydney is the capital city of New South Wales. About four million people
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/data-editing/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"dataediting-container\" align=\"center\" style=\"width:92%\"></div>\n </div>\n \n \n </div></body></html>","index.js":"{{ripple}}/**\n * Sample for Data Editing\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n minimum: -0.5,\n maximum: 6.5,\n labelPlacement: 'OnTicks',\n majorGridLines: { width: 0 },\n },\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n rangePadding: 'None',\n minimum: 0,\n maximum: 100,\n title : 'Sales',\n labelFormat: '{value}%',\n interval: 20,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n dragSettings: {enable: true},\n type: 'Column',\n dataSource: [\n { x: '2005', y: 21 }, { x: '2006', y: 60 },\n { x: '2007', y: 45 }, { x: '2008', y: 50 },\n { x: '2009', y: 74 }, { x: '2010', y: 65 },\n { x: '2011', y: 85 },\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'Product A', fill: '#00BDAE',\n },\n {\n type: 'Line',\n dataSource: [\n { x: '2005', y: 21 }, { x: '2006', y: 22 },\n { x: '2007', y: 36 }, { x: '2008', y: 34 },\n { x: '2009', y: 54 }, { x: '2010', y: 55 },\n { x: '2011', y: 60 }\n ],\n dragSettings: {enable: true},\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'Product B', fill: '#357CD2',\n },\n\n ],\n //Initializing Chart Title\n title: 'Sales Prediction of Products',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n });\n chart.appendTo('#dataediting-container');\n\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/data-editing/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"dataediting-container\" align=\"center\" style=\"width:92%\"></div>\n </div>\n \n \n </div></body></html>","index.js":"{{ripple}}/**\n * Sample for Data Editing\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n minimum: -0.5,\n maximum: 6.5,\n labelPlacement: 'OnTicks',\n majorGridLines: { width: 0 },\n },\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n rangePadding: 'None',\n minimum: 0,\n maximum: 100,\n title : 'Sales',\n labelFormat: '{value}%',\n interval: 20,\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 },\n minorTickLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Chart Series\n series: [\n {\n dragSettings: {enable: true},\n type: 'Column',\n dataSource: [\n { x: '2005', y: 21 }, { x: '2006', y: 60 },\n { x: '2007', y: 45 }, { x: '2008', y: 50 },\n { x: '2009', y: 74 }, { x: '2010', y: 65 },\n { x: '2011', y: 85 },\n ],\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'Product A'\n },\n {\n type: 'Line',\n dataSource: [\n { x: '2005', y: 21 }, { x: '2006', y: 22 },\n { x: '2007', y: 36 }, { x: '2008', y: 34 },\n { x: '2009', y: 54 }, { x: '2010', y: 55 },\n { x: '2011', y: 60 }\n ],\n dragSettings: {enable: true},\n xName: 'x', width: 2, marker: {\n visible: true,\n width: 10,\n height: 10\n },\n yName: 'y', name: 'Product B'\n },\n\n ],\n //Initializing Chart Title\n title: 'Sales Prediction of Products',\n //Initializing Tooltip\n tooltip: {\n enable: true\n },\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n\n });\n chart.appendTo('#dataediting-container');\n\n"}
|
||||
|
|
@ -45,7 +45,7 @@ this.default = function () {
|
|||
width: 10,
|
||||
height: 10
|
||||
},
|
||||
yName: 'y', name: 'Product A', fill: '#00BDAE',
|
||||
yName: 'y', name: 'Product A'
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
|
|
@ -61,7 +61,7 @@ this.default = function () {
|
|||
width: 10,
|
||||
height: 10
|
||||
},
|
||||
yName: 'y', name: 'Product B', fill: '#357CD2',
|
||||
yName: 'y', name: 'Product B'
|
||||
},
|
||||
|
||||
],
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -133,4 +133,100 @@
|
|||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Male-Bootstrap5' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#262E0B;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Female-Bootstrap5' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#668E1F;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Male-MaterialDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#9ECB08;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Female-MaterialDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#56AEFF;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Male-FabricDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#4472c4;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Female-FabricDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#ed7d31;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Male-BootstrapDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#a16ee5;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Female-BootstrapDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#f7ce69;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Male-TailwindDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#8B5CF6;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Female-TailwindDark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#22D3EE;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Male-Bootstrap5Dark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#5ECB9B;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Female-Bootstrap5Dark' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#A860F1;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -50,6 +50,9 @@ this.default = function () {
|
|||
if (selectedTheme === 'highcontrast') {
|
||||
args.accumulation.annotations[0].content = '#white' ;
|
||||
}
|
||||
if (args.accumulation.theme.indexOf('Dark') > -1){
|
||||
args.accumulation.annotations[0].content = '#white' ;
|
||||
}
|
||||
}
|
||||
// custom code end
|
||||
};
|
||||
|
|
@ -110,7 +113,8 @@ this.default = function () {
|
|||
load: function (args) {
|
||||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/contrast/i, 'Contrast');
|
||||
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() +
|
||||
selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
}
|
||||
};
|
||||
var pie = new ej.charts.AccumulationChart(instance);
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -65,7 +65,27 @@
|
|||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.e-play-icon::before {
|
||||
content: '\e720';
|
||||
.e-export-icon::before {
|
||||
content: '\e728';
|
||||
}
|
||||
|
||||
.e-view.fabric .e-export-icon::before, .e-view.fabric-dark .e-export-icon::before {
|
||||
content: '\e710';
|
||||
}
|
||||
|
||||
.e-view.bootstrap4 .e-export-icon::before {
|
||||
content: '\e780';
|
||||
}
|
||||
|
||||
.e-view.tailwind-dark .e-export-icon::before, .e-view.tailwind .e-export-icon::before {
|
||||
content: '\e7bf';
|
||||
}
|
||||
|
||||
.e-view.highcontrast .e-export-icon::before {
|
||||
content: '\e710';
|
||||
}
|
||||
|
||||
.e-view.bootstrap5 .e-export-icon::before, .e-view.bootstrap5-dark .e-export-icon::before {
|
||||
content: '\e72e';
|
||||
}
|
||||
</style>
|
||||
|
|
@ -78,7 +78,7 @@ this.default = function () {
|
|||
});
|
||||
mode.appendTo('#mode');
|
||||
var togglebtn = new ej.buttons.Button({
|
||||
iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,
|
||||
iconCss: 'e-icons e-export-icon', cssClass: 'e-flat', isPrimary: true,
|
||||
});
|
||||
togglebtn.appendTo('#togglebtn');
|
||||
document.getElementById('togglebtn').onclick = function () {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/histogram/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"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 Histogram Series\n */\n\n var chartData = [];\n var points = [5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,\n 5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,\n 26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,\n 46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,\n 46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,\n 46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,\n 46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,\n 66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,\n 66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,\n 87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250\n ];\n points.map(function (value) {\n chartData.push({\n y: value\n });\n });\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n majorGridLines: { width: 0 }, title: 'Score of Final Examination',\n minimum: 0, maximum: 100\n },\n chartArea: { border: { width: 0 } },\n legendSettings: { visible: false },\n primaryYAxis: {\n title: 'Number of Students',\n minimum: 0, maximum: 50, interval: 10,\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Histogram', width: 2, yName: 'y', name: 'Score',\n dataSource: chartData, binInterval: 20,\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },\n showNormalDistribution: true, columnWidth: 0.99\n }\n ],\n resized: function (args) {\n location.reload();\n },\n //Initializing Chart Title\n title: 'Examination Result', tooltip: { enable: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/histogram/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"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 Histogram Series\n */\n\n var chartData = [];\n var points = [5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,\n 5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,\n 26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,\n 46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,\n 46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,\n 46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,\n 46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,\n 66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,\n 66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,\n 87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250\n ];\n points.map(function (value) {\n chartData.push({\n y: value\n });\n });\n var chart = new ej.charts.Chart({\n primaryXAxis: {\n majorGridLines: { width: 0 }, title: 'Score of Final Examination',\n minimum: 0, maximum: 100\n },\n chartArea: { border: { width: 0 } },\n legendSettings: { visible: false },\n primaryYAxis: {\n title: 'Number of Students',\n minimum: 0, maximum: 50, interval: 10,\n majorTickLines: { width: 0 }, lineStyle: { width: 0 }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Histogram', width: 2, yName: 'y', name: 'Score',\n dataSource: chartData, binInterval: 20,\n marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } },\n showNormalDistribution: true, columnWidth: 0.99\n }\n ],\n //Initializing Chart Title\n title: 'Examination Result', tooltip: { enable: true },\n width: ej.base.Browser.isDevice ? '100%' : '60%',\n\n });\n chart.appendTo('#container');\n"}
|
||||
|
|
@ -40,9 +40,6 @@ this.default = function () {
|
|||
showNormalDistribution: true, columnWidth: 0.99
|
||||
}
|
||||
],
|
||||
resized: function (args) {
|
||||
location.reload();
|
||||
},
|
||||
//Initializing Chart Title
|
||||
title: 'Examination Result', tooltip: { enable: true },
|
||||
width: ej.base.Browser.isDevice ? '100%' : '60%',
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -71,9 +71,6 @@ this.default = function () {
|
|||
pie.refresh();
|
||||
}
|
||||
},
|
||||
resized: function (args) {
|
||||
location.reload();
|
||||
},
|
||||
loaded: function (args) {
|
||||
if (isRender) {
|
||||
pie.destroy();
|
||||
|
|
@ -87,7 +84,7 @@ this.default = function () {
|
|||
load: function (args) {
|
||||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
},
|
||||
legendSettings: { visible: false },
|
||||
});
|
||||
|
|
@ -105,8 +102,11 @@ this.default = function () {
|
|||
dataSource: pieDataSource, border: { color: 'transparent'},
|
||||
xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', name: 'text' },
|
||||
}],
|
||||
theme: (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)),
|
||||
legendSettings: { visible: false }
|
||||
theme: (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'),
|
||||
legendSettings: { visible: false },
|
||||
resized: function (args) {
|
||||
location.reload();
|
||||
},
|
||||
});
|
||||
pie.appendTo('#chart_annotation');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/print/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n <div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"print-container\"></div>\n </div>\n </div>\n <div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr id=\"button-control\" style=\"height: 50px\">\n <td align=\"center\">\n <div> \n <button id=\"togglebtn\">Print</button>\n </div>\n </td>\n </tr>\n </tbody></table>\n </div>\n</div>\n\n\n<style>\n #button-control {\n width: 100%;\n text-align: center;\n }\n #control-container {\n padding: 0px !important;\n }\n .e-play-icon::before {\n content: '\\e34b';\n }\n</style></div></body></html>","index.js":"{{ripple}}var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n '#ea7a57', '#404041', '#00bdae'];\n var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n var highcontrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index];\n }\n else if (selectedTheme === 'material') {\n args.fill = materialColors[args.point.index];\n }\n else if (selectedTheme === 'highcontrast'){\n args.fill = highcontrastColors[args.point.index];\n }\n else {\n args.fill = bootstrapColors[args.point.index % 10];\n }\n};\n/**\n * Sample for chart print\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Manager',\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n pointRender: labelRender,\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Sales',\n minimum: 0,\n maximum: 20000,\n majorGridLines: { width: 0 }\n },\n chartMouseClick: function (args) {\n if (args.target.indexOf('print') > -1) {\n chart.print();\n }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [{ x: 'John', y: 10000 }, { x: 'Jake', y: 12000 }, { x: 'Peter', y: 18000 },\n { x: 'James', y: 11000 }, { x: 'Mary', y: 9700 }],\n xName: 'x', width: 2,\n yName: 'y'\n }\n ],\n //Initializing Chart Title\n title: 'Sales Comparision',\n\n });\n chart.appendTo('#print-container');\n var togglebtn = new ej.buttons.Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n chart.print();\n };\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/print/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div>\n <div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"print-container\"></div>\n </div>\n </div>\n <div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr id=\"button-control\" style=\"height: 50px\">\n <td align=\"center\">\n <div> \n <button id=\"togglebtn\">Print</button>\n </div>\n </td>\n </tr>\n </tbody></table>\n </div>\n</div>\n\n\n<style>\n #button-control {\n width: 100%;\n text-align: center;\n }\n .e-print-icon::before {\n content: '\\e34b';\n }\n\n .e-view.fabric .e-print-icon::before, .e-view.fabric-dark .e-print-icon::before {\n content: '\\e7df';\n }\n\n .e-view.bootstrap .e-print-icon::before {\n content: '\\ebd2';\n }\n\n .e-view.bootstrap4 .e-print-icon::before {\n content: '\\e743';\n }\n\n .e-view.tailwind .e-print-icon::before, .e-view.tailwind-dark .e-print-icon::before {\n content: '\\e76c';\n }\n\n .e-view.highcontrast .e-print-icon::before {\n content: '\\ebf9';\n }\n\n .e-view.bootstrap5 .e-print-icon::before, .e-view.bootstrap5-dark .e-print-icon::before {\n content: '\\e75d';\n }\n #control-container {\n padding: 0px !important;\n }\n</style></div></body></html>","index.js":"{{ripple}}var labelRender = function (args) {\n var selectedTheme = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n var materialColors = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',\n '#ea7a57', '#404041', '#00bdae'];\n var fabricColors = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];\n var bootstrapColors = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',\n '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];\n var highcontrastColors = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF',\n '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E'];\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index];\n }\n else if (selectedTheme === 'material') {\n args.fill = materialColors[args.point.index];\n }\n else if (selectedTheme === 'highcontrast'){\n args.fill = highcontrastColors[args.point.index];\n }\n else {\n args.fill = bootstrapColors[args.point.index % 10];\n }\n};\n/**\n * Sample for chart print\n */\n\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Manager',\n valueType: 'Category',\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n pointRender: labelRender,\n //Initializing Primary Y Axis\n primaryYAxis: {\n title: 'Sales',\n minimum: 0,\n maximum: 20000,\n majorGridLines: { width: 0 }\n },\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [{ x: 'John', y: 10000 }, { x: 'Jake', y: 12000 }, { x: 'Peter', y: 18000 },\n { x: 'James', y: 11000 }, { x: 'Mary', y: 9700 }],\n xName: 'x', width: 2,\n yName: 'y'\n }\n ],\n //Initializing Chart Title\n title: 'Sales Comparision',\n\n });\n chart.appendTo('#print-container');\n var togglebtn = new ej.buttons.Button({\n cssClass: 'e-flat', isPrimary: true, iconCss: 'e-icons e-print-icon'\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = function () {\n chart.print();\n };\n"}
|
||||
|
|
@ -36,10 +36,34 @@
|
|||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.e-print-icon::before {
|
||||
content: '\e34b';
|
||||
}
|
||||
|
||||
.e-view.fabric .e-print-icon::before, .e-view.fabric-dark .e-print-icon::before {
|
||||
content: '\e7df';
|
||||
}
|
||||
|
||||
.e-view.bootstrap .e-print-icon::before {
|
||||
content: '\ebd2';
|
||||
}
|
||||
|
||||
.e-view.bootstrap4 .e-print-icon::before {
|
||||
content: '\e743';
|
||||
}
|
||||
|
||||
.e-view.tailwind .e-print-icon::before, .e-view.tailwind-dark .e-print-icon::before {
|
||||
content: '\e76c';
|
||||
}
|
||||
|
||||
.e-view.highcontrast .e-print-icon::before {
|
||||
content: '\ebf9';
|
||||
}
|
||||
|
||||
.e-view.bootstrap5 .e-print-icon::before, .e-view.bootstrap5-dark .e-print-icon::before {
|
||||
content: '\e75d';
|
||||
}
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.e-play-icon::before {
|
||||
content: '\e34b';
|
||||
}
|
||||
</style>
|
||||
|
|
@ -46,11 +46,6 @@ this.default = function () {
|
|||
maximum: 20000,
|
||||
majorGridLines: { width: 0 }
|
||||
},
|
||||
chartMouseClick: function (args) {
|
||||
if (args.target.indexOf('print') > -1) {
|
||||
chart.print();
|
||||
}
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
|
|
@ -74,7 +69,7 @@ this.default = function () {
|
|||
});
|
||||
chart.appendTo('#print-container');
|
||||
var togglebtn = new ej.buttons.Button({
|
||||
iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,
|
||||
cssClass: 'e-flat', isPrimary: true, iconCss: 'e-icons e-print-icon'
|
||||
});
|
||||
togglebtn.appendTo('#togglebtn');
|
||||
document.getElementById('togglebtn').onclick = function () {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/range-area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"range-container1\" 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 Range Area series\n */\n\n var series1 = [];\n var value = 35;\n var point1;\n for (var i = 1; i < 360; i++) {\n if (Math.random() > 0.5) {\n value += Math.random();\n }\n else {\n value -= Math.random();\n }\n point1 = {\n x: new Date(2015, 0, i),\n high: value, low: value - 10\n };\n series1.push(point1);\n }\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}˚C',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n //Initializing Zooming\n zoomSettings: {\n enableSelectionZooming: true,\n mode: 'X'\n },\n //Initializing Chart Series\n series: [\n {\n type: 'RangeArea', marker: { visible : false },\n name: 'India',\n dataSource: series1,\n xName: 'x', high: 'high', low: 'low', opacity: 0.4,\n border: { width: 2 }\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n //Initializing Chart Title\n title: 'Temperature Variation',\n seriesRender: function (args) {\n var theme = args.series.chart.theme;\n var color;\n if (theme === 'Material') {\n color = '#008E83';\n } else if (theme === 'Bootstrap') {\n color = '#7953AC';\n } else {\n color = '#335693';\n }\n args.series.border.color = color;\n },\n legendSettings: { visible: false },\n\n });\n chart.appendTo('#range-container1');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/chart/range-area/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/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 </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"range-container1\" 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 Range Area series\n */\n\n var series1 = [];\n var value = 35;\n var point1;\n for (var i = 1; i < 360; i++) {\n if (Math.random() > 0.5) {\n value += Math.random();\n }\n else {\n value -= Math.random();\n }\n point1 = {\n x: new Date(2015, 0, i),\n high: value, low: value - 10\n };\n series1.push(point1);\n }\n var chart = new ej.charts.Chart({\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift',\n majorGridLines: { width: 0 }\n },\n chartArea: {\n border: {\n width: 0\n }\n },\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}˚C',\n lineStyle: { width: 0 },\n majorTickLines: { width: 0 }\n },\n //Initializing Zooming\n zoomSettings: {\n enableSelectionZooming: true,\n mode: 'X'\n },\n //Initializing Chart Series\n series: [\n {\n type: 'RangeArea', marker: { visible : false },\n name: 'India',\n dataSource: series1,\n xName: 'x', high: 'high', low: 'low', opacity: 0.4,\n border: { width: 2 }\n }\n ],\n width: ej.base.Browser.isDevice ? '100%' : '80%',\n //Initializing Chart Title\n title: 'Temperature Variation',\n seriesRender: function (args) {\n var areathemes = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast'];\n var borderColor = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4'];\n args.series.border.color = borderColor[areathemes.indexOf(args.series.chart.theme.toLowerCase())];\n },\n legendSettings: { visible: false },\n\n });\n chart.appendTo('#range-container1');\n"}
|
||||
|
|
@ -55,16 +55,9 @@ this.default = function () {
|
|||
//Initializing Chart Title
|
||||
title: 'Temperature Variation',
|
||||
seriesRender: function (args) {
|
||||
var theme = args.series.chart.theme;
|
||||
var color;
|
||||
if (theme === 'Material') {
|
||||
color = '#008E83';
|
||||
} else if (theme === 'Bootstrap') {
|
||||
color = '#7953AC';
|
||||
} else {
|
||||
color = '#335693';
|
||||
}
|
||||
args.series.border.color = color;
|
||||
var areathemes = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast'];
|
||||
var borderColor = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4'];
|
||||
args.series.border.color = borderColor[areathemes.indexOf(args.series.chart.theme.toLowerCase())];
|
||||
},
|
||||
legendSettings: { visible: false },
|
||||
// custom code start
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"directory": "chart",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "chart",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{
|
||||
"url": "line",
|
||||
|
|
@ -188,7 +187,6 @@
|
|||
{
|
||||
"url": "spline-range-area",
|
||||
"name": "Spline Range Area",
|
||||
"type": "new",
|
||||
"description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the spline range area series.",
|
||||
"category": "Area Charts",
|
||||
"api": {
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,6 @@
|
|||
<style>
|
||||
#material-gradient-chart stop {
|
||||
stop-color: #BDEDE9;
|
||||
stop-color: #00bdae;
|
||||
}
|
||||
#fabric-gradient-chart stop {
|
||||
stop-color: #4472c4;
|
||||
|
|
@ -15,7 +15,25 @@
|
|||
stop-color: #79ECE4;
|
||||
}
|
||||
#tailwind-gradient-chart stop {
|
||||
stop-color: #4f46e5;
|
||||
stop-color: #5A61F6;
|
||||
}
|
||||
#bootstrap5-gradient-chart stop {
|
||||
stop-color: #262E0B;
|
||||
}
|
||||
#material-dark-gradient-chart stop {
|
||||
stop-color: #9ECB08;
|
||||
}
|
||||
#fabric-dark-gradient-chart stop {
|
||||
stop-color: #4472c4;
|
||||
}
|
||||
#bootstrap-dark-gradient-chart stop {
|
||||
stop-color: #a16ee5;
|
||||
}
|
||||
#tailwind-dark-gradient-chart stop {
|
||||
stop-color: #8B5CF6;
|
||||
}
|
||||
#bootstrap5-dark-gradient-chart stop {
|
||||
stop-color: #5ECB9B;
|
||||
}
|
||||
.chart-gradient stop[offset="0"] {
|
||||
stop-opacity: 0.75;
|
||||
|
|
@ -85,5 +103,29 @@
|
|||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="bootstrap5-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="material-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="fabric-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="bootstrap-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="tailwind-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="bootstrap5-dark-gradient-chart" style="opacity: 0.75" class="chart-gradient" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0"></stop>
|
||||
<stop offset="1"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
@ -19,8 +19,8 @@ this.default = function () {
|
|||
var selectedTheme = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
var theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
|
||||
var themes = ['Material', 'Fabric', 'Bootstrap', 'Bootstrap4', 'Highcontrast', 'Tailwind'];
|
||||
var borderColor = ['#00bdae', '#4472c4', '#a16ee5', '#a16ee5', '#79ECE4', '#4F46E5'];
|
||||
var themes = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast'];
|
||||
var borderColor = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4'];
|
||||
var fill = 'url(#' + selectedTheme + '-gradient-chart)';
|
||||
var chart = new ej.charts.Chart({
|
||||
chartArea: { border: { width: 0 } },
|
||||
|
|
@ -48,7 +48,7 @@ var fill = 'url(#' + selectedTheme + '-gradient-chart)';
|
|||
xName: 'x',
|
||||
yName: 'y',
|
||||
fill: fill,
|
||||
border: { width: 0.5, color: borderColor[themes.indexOf(theme)] },
|
||||
border: { width: 0.5, color: borderColor[themes.indexOf(theme.toLowerCase())] },
|
||||
animation: { enable: false }
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче