v26.1.35 is released
This commit is contained in:
pipeline
Родитель
aec0ef138e
Коммит
9f2279fd98
|
|
@ -111,7 +111,6 @@
|
|||
"common",
|
||||
"sys",
|
||||
"appbar",
|
||||
"textarea",
|
||||
null
|
||||
"textarea"
|
||||
]
|
||||
}
|
||||
173
index.html
173
index.html
|
|
@ -28,7 +28,7 @@
|
|||
<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 id="themelink" href="styles/fluent2.css" rel="stylesheet" />
|
||||
<link href="styles/index.css" rel="stylesheet" />
|
||||
<link href="src/common/lib/content/codemirror.css" rel="stylesheet">
|
||||
</link>
|
||||
|
|
@ -164,6 +164,24 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-header-item sb-table-cell" id="sb-dark-theme">
|
||||
<div class="sb-switch-btn" role="button" data-theme="dark" id="buttoncolor">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" id="dark-icon"
|
||||
width="16" height="14" fill="currentColor" class="bi bi-moon" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"
|
||||
id="light-icon" width="16" height="14" fill="currentColor" class="bi bi-sun"
|
||||
viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
|
||||
</svg>
|
||||
<span id="sb-dark-span"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sb-theme-splitter sb-download-splitter"></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">
|
||||
|
|
@ -224,74 +242,36 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='theme-switcher-popup' class='sb-theme-popup'>
|
||||
<ul id="themelist" class="options" role="list">
|
||||
<li class="e-list" id="fluent" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Fluent</span>
|
||||
</li>
|
||||
<li class="e-list" id="fluent-dark" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Fluent Dark</span>
|
||||
</li>
|
||||
<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='e-list' 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 class='active' id="material3" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material 3</span>
|
||||
</li>
|
||||
<li class="e-list" id="material3-dark" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material 3 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" aria-label="Go to Theme Studio">Go to Theme Studio</a></div>
|
||||
<div id='theme-switcher-popup' class='sb-theme-popup'>
|
||||
<ul id="themelist" class="options" role="list">
|
||||
<li class='active' id="material3" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material 3</span>
|
||||
</li>
|
||||
<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 5</span>
|
||||
</li>
|
||||
<li class="e-list" id="fluent2" role="listitem">
|
||||
<span class="sb-icons sb-theme-select sb-icon-icon-selection"></span>
|
||||
<span class="switch-text">Fluent 2</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="highcontrast" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">High Contrast</span>
|
||||
</li>
|
||||
<li class="e-list" id="fluent" role="listitem">
|
||||
<span class="sb-icons sb-theme-select sb-icon-icon-selection"></span>
|
||||
<span class="switch-text">Fluent</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sb-theme-studio"><a target="_blank"
|
||||
href="https://ej2.syncfusion.com/themestudio/?theme=material" aria-label="Go to Theme Studio">Go
|
||||
to Theme Studio</a></div>
|
||||
</div>
|
||||
<div id='settings-popup' class='sb-setting-popup'>
|
||||
<div class='sb-setting-header'>
|
||||
|
|
@ -306,22 +286,29 @@
|
|||
</div>
|
||||
<div class='setting-content setting-theme-change'>
|
||||
<select id='sb-setting-theme' class='sb-setting-theme-select'>
|
||||
<option value="fluent">Fluent</option>
|
||||
<option value="fluent-dark">Fluent Dark</option>
|
||||
<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="material3">Material 3</option>
|
||||
<option value="material3-dark">Material 3 Dark</option>
|
||||
<option value="fabric">Fabric</option>
|
||||
<option value="fabric-dark">Fabric Dark</option>
|
||||
<option value="bootstrap4">Bootstrap v4</option>
|
||||
<option value="bootstrap">Bootstrap</option>
|
||||
<option value="bootstrap-dark">Bootstrap Dark</option>
|
||||
<option value="bootstrap5">Bootstrap 5</option>
|
||||
<option value="fluent2">Fluent 2</option>
|
||||
<option value="tailwind">Tailwind CSS</option>
|
||||
<option value="highcontrast">High Contrast</option>
|
||||
<option value="fluent">Fluent</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-setting-item sb-setting-theme-section' id="mobiledarkswitch">
|
||||
<div class='setting-label'>
|
||||
<div> <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 5px;" id="light-icon"
|
||||
width="16" height="14" fill="currentColor" class="bi bi-sun" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
|
||||
</svg></div>
|
||||
<div class='sb-setting-text'>Theme Mode</div>
|
||||
</div>
|
||||
<div class='setting-content setting-theme-change'>
|
||||
<select id='sb-theme-mode' class='sb-setting-theme-select'>
|
||||
<option value="lightMode">Light mode</option>
|
||||
<option value="darkMode">Dark mode</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -397,8 +384,8 @@
|
|||
<div class="component-seperator sb-icons sb-icon-Next seperator"> </div>
|
||||
<div class='crumb-sample '></div>
|
||||
</div>
|
||||
</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'>
|
||||
|
|
@ -449,29 +436,29 @@
|
|||
</div>
|
||||
<div class='description-section sb-rightpane-padding'>
|
||||
</div>
|
||||
<div class="ad-wrapper">
|
||||
<div id='ad-image' class="ad-img">
|
||||
<div class="banner-wrapper">
|
||||
<div id="banner-image" class="banner-img">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-12">
|
||||
<div id="ad-banner-head" class="ad-header">Transform your JavaScript web
|
||||
<div id="banner-head" class="banner-header">Transform your JavaScript web
|
||||
apps today with Syncfusion Javascript controls</div>
|
||||
</div>
|
||||
<div class="col-sm-12 cnt-area">
|
||||
<div class="content-area">
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection">
|
||||
<div class="banner-cnt-pt">
|
||||
<div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection">
|
||||
</div>
|
||||
<div class="cnt-text">80+ high-performance and responsive UI components
|
||||
</div>
|
||||
</div>
|
||||
<div class="ad-cnt-pt">
|
||||
<div class="ad-cnt-icon click-icon sb-icons sb-icon-icon-selection">
|
||||
<div class="banner-cnt-pt">
|
||||
<div class="banner-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 class="banner-cnt-pt">
|
||||
<div class="banner-cnt-icon click-icon sb-icons sb-icon-icon-selection">
|
||||
</div>
|
||||
<div class="cnt-text">Hassle-free licensing</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-javascript-samples",
|
||||
"version": "25.1.35",
|
||||
"version": "26.1.35",
|
||||
"description": "Examples of JavaScript (ES5) UI Controls",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
"@syncfusion/ej2": "*",
|
||||
"crossroads": "0.12.2",
|
||||
"hasher": "1.2.0",
|
||||
"simple-git": "3.16.0",
|
||||
"fuse.js": "7.0.0",
|
||||
"tributejs": "5.1.3"
|
||||
},
|
||||
|
|
|
|||
Двоичные данные
pdfviewer/eSigning-form-designer/styles/pdfviewer/employees/profile1.png
Normal file
Двоичные данные
pdfviewer/eSigning-form-designer/styles/pdfviewer/employees/profile1.png
Normal file
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.5 KiB |
Двоичные данные
pdfviewer/eSigning-form-designer/styles/pdfviewer/employees/profile2.png
Normal file
Двоичные данные
pdfviewer/eSigning-form-designer/styles/pdfviewer/employees/profile2.png
Normal file
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.4 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.4 KiB |
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_default\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Default Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_default');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_default\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Default Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_default');\n"}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
mode.
|
||||
</p>
|
||||
<p>
|
||||
More information about Accordion can be found in this <a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/accordion/es5-getting-started/">
|
||||
More information about Accordion can be found in this <a aria-label="Accordion getting started" target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/accordion/es5-getting-started/">
|
||||
documentation</a> section.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -88,7 +88,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<div id='source_link'>Source:
|
||||
<a href="https://www.apple.com/iphone-x/specs/" target='_blank'>www.apple.com/iphone-x/specs/</a>
|
||||
<a aria-label="Apple iphones" href="https://www.apple.com/iphone-x/specs/" target='_blank'>www.apple.com/iphone-x/specs/</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
This sample illustrates the external webpage content loaded inside the Accordion panel by using FETCH library.
|
||||
</p>
|
||||
<p>
|
||||
More information about Accordion can be found in this <a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/accordion/es5-getting-started/">
|
||||
More information about Accordion can be found in this <a aria-label="Accordion getting started" target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/accordion/es5-getting-started/">
|
||||
documentation</a> section.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/icons/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_icon\"></div>\n </div>\n <div id=\"athletics\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon marathon\"></span> Marathon</li>\n <li><span class=\"e-acrdn-icons e-content-icon javelin\"></span> Javelin Throw</li>\n <li><span class=\"e-acrdn-icons e-content-icon discus\"></span> Discus Throw</li>\n <li><span class=\"e-acrdn-icons e-content-icon highjump\"></span> High Jump</li>\n <li><span class=\"e-acrdn-icons e-content-icon longjump\"></span> Long Jump</li>\n </div>\n <div id=\"water_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon dive\"></span> Diving</li>\n <li><span class=\"e-acrdn-icons e-content-icon swimming\"></span> Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon marathan_swim\"></span> Marathon Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon sync_swim\"></span> Synchronized Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon waterpolo\"></span> Water Polo</li>\n </div>\n <div id=\"racing_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon cycle_BMX\"></span> Cycling BMX</li>\n <li> <span class=\"e-acrdn-icons e-content-icon cycle_Mountain\"></span> Cycling Mountain Bike</li>\n <li> <span class=\"e-acrdn-icons e-content-icon cycle\"></span> Cycle Racing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon sailing\"></span> Sailing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon rowing\"></span> Rowing</li>\n </div>\n <div id=\"indoor_games\" style=\"display:none\">\n <li><span class=\"e-acrdn-icons e-content-icon tennis\"></span> Table Tennis</li>\n <li> <span class=\"e-acrdn-icons e-content-icon badminton\"></span> Badminton</li>\n <li> <span class=\"e-acrdn-icons e-content-icon volleyball\"></span> Volleyball</li>\n <li> <span class=\"e-acrdn-icons e-content-icon boxing\"></span> Boxing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon swimming_In\"></span> Swimming</li>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Icon Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: window.data\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_icon');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/icons/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_icon\"></div>\n </div>\n <div id=\"athletics\" style=\"display:none\">\n <ul>\n <li><span class=\"e-acrdn-icons e-content-icon marathon\"></span> Marathon</li>\n <li><span class=\"e-acrdn-icons e-content-icon javelin\"></span> Javelin Throw</li>\n <li><span class=\"e-acrdn-icons e-content-icon discus\"></span> Discus Throw</li>\n <li><span class=\"e-acrdn-icons e-content-icon highjump\"></span> High Jump</li>\n <li><span class=\"e-acrdn-icons e-content-icon longjump\"></span> Long Jump</li>\n </ul>\n </div>\n <div id=\"water_games\" style=\"display:none\">\n <ul>\n <li><span class=\"e-acrdn-icons e-content-icon dive\"></span> Diving</li>\n <li><span class=\"e-acrdn-icons e-content-icon swimming\"></span> Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon marathan_swim\"></span> Marathon Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon sync_swim\"></span> Synchronized Swimming</li>\n <li><span class=\"e-acrdn-icons e-content-icon waterpolo\"></span> Water Polo</li>\n </ul>\n </div>\n <div id=\"racing_games\" style=\"display:none\">\n <ul>\n <li><span class=\"e-acrdn-icons e-content-icon cycle_BMX\"></span> Cycling BMX</li>\n <li> <span class=\"e-acrdn-icons e-content-icon cycle_Mountain\"></span> Cycling Mountain Bike</li>\n <li> <span class=\"e-acrdn-icons e-content-icon cycle\"></span> Cycle Racing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon sailing\"></span> Sailing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon rowing\"></span> Rowing</li>\n </ul>\n </div>\n <div id=\"indoor_games\" style=\"display:none\">\n <ul>\n <li><span class=\"e-acrdn-icons e-content-icon tennis\"></span> Table Tennis</li>\n <li> <span class=\"e-acrdn-icons e-content-icon badminton\"></span> Badminton</li>\n <li> <span class=\"e-acrdn-icons e-content-icon volleyball\"></span> Volleyball</li>\n <li> <span class=\"e-acrdn-icons e-content-icon boxing\"></span> Boxing</li>\n <li> <span class=\"e-acrdn-icons e-content-icon swimming_In\"></span> Swimming</li>\n </ul>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Icon Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: window.data\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_icon');\n"}
|
||||
|
|
@ -3,32 +3,40 @@
|
|||
<div id='Accordion_icon'></div>
|
||||
</div>
|
||||
<div id='athletics' style="display:none">
|
||||
<li><span class='e-acrdn-icons e-content-icon marathon'></span> Marathon</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon javelin'></span> Javelin Throw</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon discus'></span> Discus Throw</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon highjump'></span> High Jump</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon longjump'></span> Long Jump</li>
|
||||
<ul>
|
||||
<li><span class='e-acrdn-icons e-content-icon marathon'></span> Marathon</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon javelin'></span> Javelin Throw</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon discus'></span> Discus Throw</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon highjump'></span> High Jump</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon longjump'></span> Long Jump</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='water_games' style="display:none">
|
||||
<li><span class='e-acrdn-icons e-content-icon dive'></span> Diving</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon swimming'></span> Swimming</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon marathan_swim'></span> Marathon Swimming</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon sync_swim'></span> Synchronized Swimming</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon waterpolo'></span> Water Polo</li>
|
||||
<ul>
|
||||
<li><span class='e-acrdn-icons e-content-icon dive'></span> Diving</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon swimming'></span> Swimming</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon marathan_swim'></span> Marathon Swimming</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon sync_swim'></span> Synchronized Swimming</li>
|
||||
<li><span class='e-acrdn-icons e-content-icon waterpolo'></span> Water Polo</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='racing_games' style="display:none">
|
||||
<li><span class='e-acrdn-icons e-content-icon cycle_BMX'></span> Cycling BMX</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon cycle_Mountain'></span> Cycling Mountain Bike</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon cycle'></span> Cycle Racing</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon sailing'></span> Sailing</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon rowing'></span> Rowing</li>
|
||||
<ul>
|
||||
<li><span class='e-acrdn-icons e-content-icon cycle_BMX'></span> Cycling BMX</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon cycle_Mountain'></span> Cycling Mountain Bike</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon cycle'></span> Cycle Racing</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon sailing'></span> Sailing</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon rowing'></span> Rowing</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='indoor_games' style="display:none">
|
||||
<li><span class='e-acrdn-icons e-content-icon tennis'></span> Table Tennis</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon badminton'></span> Badminton</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon volleyball'></span> Volleyball</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon boxing'></span> Boxing</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon swimming_In'></span> Swimming</li>
|
||||
<ul>
|
||||
<li><span class='e-acrdn-icons e-content-icon tennis'></span> Table Tennis</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon badminton'></span> Badminton</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon volleyball'></span> Volleyball</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon boxing'></span> Boxing</li>
|
||||
<li> <span class='e-acrdn-icons e-content-icon swimming_In'></span> Swimming</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
|
|
@ -42,7 +50,7 @@
|
|||
the some of the games list.
|
||||
</p>
|
||||
<p>
|
||||
More information about Accordion can be found in this <a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/accordion/es5-getting-started/">
|
||||
More information about Accordion can be found in this <a aria-label="Accordion getting started" target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/accordion/es5-getting-started/">
|
||||
documentation</a> section.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/keyboard-interaction/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_keyboard_interaction\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Keyboard Interaction Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_keyboard_interaction');\n\n //Focus the Accordion header (alt+j) key combination\n document.body.addEventListener('keydown', function (e) {\n var accordionElement = document.querySelector(\n '#Accordion_keyboard_interaction .e-acrdn-header'\n );\n if (e.altKey && e.keyCode === 74 && accordionElement) {\n accordionElement.focus();\n }\n });\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/keyboard-interaction/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_keyboard_interaction\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Keyboard Interaction Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_keyboard_interaction');\n\n //Focus the Accordion header (alt+j) key combination\n document.body.addEventListener('keydown', function (e) {\n var accordionElement = document.querySelector(\n '#Accordion_keyboard_interaction .e-acrdn-header'\n );\n if (e.altKey && e.keyCode === 74 && accordionElement) {\n accordionElement.focus();\n }\n });\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -41,7 +41,7 @@
|
|||
The RTL sample illustrates the direction of the Accordion from right to left.
|
||||
</p>
|
||||
<p>
|
||||
More information about Accordion can be found in this <a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/accordion/es5-getting-started/">
|
||||
More information about Accordion can be found in this <a aria-label="Accordion getting started" target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/accordion/es5-getting-started/">
|
||||
documentation</a> section.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -2,7 +2,7 @@
|
|||
<div class="color-appbar-container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>Light</h5>
|
||||
<h1>Light</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>Dark</h5>
|
||||
<h1>Dark</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>Primary</h5>
|
||||
<h1>Primary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>Inherit</h5>
|
||||
<h1>Inherit</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -112,6 +112,10 @@
|
|||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.color-appbar-section h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.color-appbar-section .e-appbar .e-appbar-separator {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -2,7 +2,7 @@
|
|||
<div class="default-appbar-container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>Simple AppBar</h5>
|
||||
<h1>Simple AppBar</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>Prominent</h5>
|
||||
<h1>Prominent</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>Dense</h5>
|
||||
<h1>Dense</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -83,6 +83,9 @@
|
|||
.default-appbar-section .prominent-appbar .e-inherit.e-css.e-btn.e-active {
|
||||
background: rgba(255, 255, 255, .08);
|
||||
}
|
||||
.default-appbar-section h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.default-appbar-section .prominent {
|
||||
font-size: 20px;
|
||||
|
|
@ -94,7 +97,10 @@
|
|||
}
|
||||
.e-bigger .default-appbar-section .e-inherit.e-btn.login,
|
||||
.e-bigger.tailwind-dark .default-appbar-section .e-inherit.e-btn.e-icon-btn.menu,
|
||||
.e-bigger.tailwind .default-appbar-section .e-inherit.e-btn.e-icon-btn.menu {
|
||||
.e-bigger.tailwind .default-appbar-section .e-inherit.e-btn.e-icon-btn.menu,
|
||||
.e-bigger.fluent2-dark .default-appbar-section .e-inherit.e-btn.e-icon-btn.menu,
|
||||
.e-bigger.fluent2-highcontrast .default-appbar-section .e-inherit.e-btn.e-icon-btn.menu,
|
||||
.e-bigger.fluent2 .default-appbar-section .e-inherit.e-btn.e-icon-btn.menu {
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,32 @@
|
|||
<div class="control-section">
|
||||
<div id="gauge" align='center'></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample shows an arc gauge with a real-time scenario of a customer satisfaction score ranging from 0 to 10.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render an arc gauge showing customer satisfaction score. You can use <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/axisModel/">axes</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/rangeModel/">ranges</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/annotationModel/">annotations</a>,
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/legendSettingsModel/">legend</a>
|
||||
and <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/tooltipSettingsModel/">tooltip</a>
|
||||
oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
|
||||
</p>
|
||||
<p>
|
||||
More information on the arc gauge can be found in this
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<main>
|
||||
<div class="control-section">
|
||||
<div id="gauge" align='center'></div>
|
||||
</div>
|
||||
<section id="action-description" aria-label="Description of Circular Gauge sample">
|
||||
<p>
|
||||
This sample shows an arc gauge with a real-time scenario of a customer satisfaction score ranging from 0 to 10.
|
||||
</p>
|
||||
</section>
|
||||
<section id="description" aria-label="Description of Circular Gauge features demonstrated in this sample">
|
||||
<p>
|
||||
In this example, you can see how to render an arc gauge showing customer satisfaction score. You can use <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/axisModel/">axes</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/rangeModel/">ranges</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/annotationModel/">annotations</a>,
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/legendSettingsModel/">legend</a>
|
||||
and <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/tooltipSettingsModel/">tooltip</a>
|
||||
oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
|
||||
</p>
|
||||
<p>
|
||||
More information on the arc gauge can be found in this
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -1,62 +1,64 @@
|
|||
<div class="control-section">
|
||||
<div id="gauge" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample shows the arc gauge's default rendering. It also shows the most popular social media platforms and
|
||||
the percentage of female users.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render a default arc gauge. The arc gauge helps in the visualization of
|
||||
numerical values of scales in a semi-circular manner. You can use <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/axisModel/">axes</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/rangeModel/">ranges</a> and <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/annotationModel/">annotations</a>
|
||||
oriented properties to customize the default appearance of the arc gauge.
|
||||
</p>
|
||||
<p>
|
||||
More information on the arc gauge can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
.titleText {
|
||||
font-family: inherit;
|
||||
font-size: 22px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.e-view.tailwind div.titleText,
|
||||
.e-view.tailwind-dark div.titleText {
|
||||
font-size: 22px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.annotation {
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
<main>
|
||||
<div class="control-section">
|
||||
<div id="gauge" align="center"></div>
|
||||
</div>
|
||||
<section id="action-description" aria-label="Description of Circular Gauge sample">
|
||||
<p>
|
||||
This sample shows the arc gauge's default rendering. It also shows the most popular social media platforms and
|
||||
the percentage of female users.
|
||||
</p>
|
||||
</section>
|
||||
<section id="description" aria-label="Description of Circular Gauge features demonstrated in this sample">
|
||||
<p>
|
||||
In this example, you can see how to render a default arc gauge. The arc gauge helps in the visualization of
|
||||
numerical values of scales in a semi-circular manner. You can use <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/axisModel/">axes</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/rangeModel/">ranges</a> and <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/annotationModel/">annotations</a>
|
||||
oriented properties to customize the default appearance of the arc gauge.
|
||||
</p>
|
||||
<p>
|
||||
More information on the arc gauge can be found in this <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</section>
|
||||
<style>
|
||||
.titleText {
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
font-size: 22px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.annotation {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
.e-view.tailwind div.titleText,
|
||||
.e-view.tailwind-dark div.titleText {
|
||||
font-size: 15px;
|
||||
font-size: 22px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.annotation {
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.titleText {
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.annotation {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.e-view.tailwind div.titleText,
|
||||
.e-view.tailwind-dark div.titleText {
|
||||
font-size: 15px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
|
|
@ -13,60 +13,70 @@ this.default = function () {
|
|||
{
|
||||
annotations: [
|
||||
{
|
||||
description:'Youtube',
|
||||
content: '<div class="titleText" style="color:#c8eab7;">YouTube</div>',
|
||||
angle: 344,
|
||||
radius: '94%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'Instagram',
|
||||
content: '<div class="titleText" style="color:#82cdbc;">Instagram</div>',
|
||||
angle: 340,
|
||||
radius: '81%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'Twitter',
|
||||
content: '<div class="titleText" style="color:#43b6c4;">Twitter</div>',
|
||||
angle: 340,
|
||||
radius: '66%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'Facebook',
|
||||
content: '<div class="titleText" style="color:#1d91bf;">Facebook</div>',
|
||||
angle: 332,
|
||||
radius: '55%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'Tiktok',
|
||||
content: '<div class="titleText" style="color:#205ea8;">TikTok</div>',
|
||||
angle: 328,
|
||||
radius: '40%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'68%',
|
||||
content: '<div class="annotation">68%</div>',
|
||||
angle: 191,
|
||||
radius: '89%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'43%',
|
||||
content: '<div class="annotation">43%</div>',
|
||||
angle: 125,
|
||||
radius: '75%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'21%',
|
||||
content: '<div class="annotation">21%</div>',
|
||||
angle: 67,
|
||||
radius: '62%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'75%',
|
||||
content: '<div class="annotation">75%</div>',
|
||||
angle: 215,
|
||||
radius: '48%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'44%',
|
||||
content: '<div class="annotation">44%</div>',
|
||||
angle: 133,
|
||||
radius: '33%',
|
||||
|
|
|
|||
|
|
@ -1,93 +1,60 @@
|
|||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample shows an arc gauge with a key performance indicator (KPI), which is a measurable value that shows
|
||||
how an organization meets key business objectives.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render an arc gauge showing key performance indicator (KPI). You can use <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/axisModel/">axes</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/rangeModel/">ranges</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/pointerModel/">pointers</a> and
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/annotationModel/">annotations</a>
|
||||
oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
|
||||
</p>
|
||||
<p>
|
||||
More information on the arc gauge can be found in this
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#gauge_Annotations_0 {
|
||||
line-height: 0.4;
|
||||
}
|
||||
.triangle-up {
|
||||
width: 20;
|
||||
height: 20;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid #84cbb5;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: inherit;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
font-family: inherit;
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.e-view.material div.triangle-up,
|
||||
.e-view.material-dark div.triangle-up,
|
||||
.e-view.bootstrap-dark div.triangle-up,
|
||||
.e-view.bootstrap div.triangle-up,
|
||||
.e-view.bootstrap4 div.triangle-up {
|
||||
width: 20;
|
||||
height: 20;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid #84cbb5;
|
||||
margin-top: -17px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.text {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
<main>
|
||||
<div class="control-section">
|
||||
<div id="gauge"></div>
|
||||
</div>
|
||||
<section id="action-description" aria-label="Description of Circular Gauge sample">
|
||||
<p>
|
||||
This sample shows an arc gauge with a key performance indicator (KPI), which is a measurable value that shows
|
||||
how an organization meets key business objectives.
|
||||
</p>
|
||||
</section>
|
||||
<section id="description" aria-label="Description of Circular Gauge features demonstrated in this sample">
|
||||
<p>
|
||||
In this example, you can see how to render an arc gauge showing key performance indicator (KPI). You can use <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/axisModel/">axes</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/rangeModel/">ranges</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/pointerModel/">pointers</a> and
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/annotationModel/">annotations</a>
|
||||
oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
|
||||
</p>
|
||||
<p>
|
||||
More information on the arc gauge can be found in this
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#gauge_Annotations_0 {
|
||||
line-height: 0.4;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.triangle-up {
|
||||
width: 20;
|
||||
height: 20;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid #84cbb5;
|
||||
margin-top: -3px;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
font-family: inherit;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
font-family: inherit;
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.e-view.material div.triangle-up,
|
||||
.e-view.material-dark div.triangle-up,
|
||||
.e-view.bootstrap-dark div.triangle-up,
|
||||
|
|
@ -98,7 +65,42 @@
|
|||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid #84cbb5;
|
||||
margin-top: -6px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.text {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.triangle-up {
|
||||
width: 20;
|
||||
height: 20;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid #84cbb5;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.e-view.material div.triangle-up,
|
||||
.e-view.material-dark div.triangle-up,
|
||||
.e-view.bootstrap-dark div.triangle-up,
|
||||
.e-view.bootstrap div.triangle-up,
|
||||
.e-view.bootstrap4 div.triangle-up {
|
||||
width: 20;
|
||||
height: 20;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid #84cbb5;
|
||||
margin-top: -6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
|
|
@ -7,12 +7,14 @@ this.default = function () {
|
|||
{
|
||||
annotations: [
|
||||
{
|
||||
description:'Triangle',
|
||||
content: '<div class="triangle-up"></div>',
|
||||
angle: 270,
|
||||
zIndex: '1',
|
||||
radius: '33%',
|
||||
},
|
||||
{
|
||||
description:'Current',
|
||||
content:
|
||||
'<div class="text" style="color:#84cbb5;">Current</div>',
|
||||
angle: 0,
|
||||
|
|
@ -20,6 +22,7 @@ this.default = function () {
|
|||
radius: '25%',
|
||||
},
|
||||
{
|
||||
description:'76.6%',
|
||||
content:
|
||||
'<div class="percentage" style="color:#84cbb5;">76.6%</div>',
|
||||
angle: 125,
|
||||
|
|
@ -27,6 +30,7 @@ this.default = function () {
|
|||
radius: '12%',
|
||||
},
|
||||
{
|
||||
description:'0',
|
||||
content:
|
||||
'<div style="font-size:22px;font-family: inherit;">0</div>',
|
||||
angle: 213,
|
||||
|
|
@ -34,6 +38,7 @@ this.default = function () {
|
|||
radius: '83%',
|
||||
},
|
||||
{
|
||||
description:'100',
|
||||
content:
|
||||
'<div style="font-size:22px;font-family: inherit">100</div>',
|
||||
angle: 150,
|
||||
|
|
@ -43,6 +48,7 @@ this.default = function () {
|
|||
],
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
format:'{value} %',
|
||||
font: {
|
||||
size: '0px',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,86 +1,88 @@
|
|||
<div class="control-section" style="overflow: auto;">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container1" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container2" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container3" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container4" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container5" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container6" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample includes a wide range of arc gauges with varying appearances based on the built-in features and
|
||||
customization options.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render an arc gauge in various styles. You can use <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/axisModel">axes</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/rangeModel/">ranges</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/pointerModel/">pointers</a> and
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/annotationModel/">annotations</a>
|
||||
oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
|
||||
</p>
|
||||
<p>
|
||||
More information on the arc gauge can be found in this
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
.annotationText {
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.e-view.tailwind div.annotationText,
|
||||
.e-view.tailwind-dark div.annotationText {
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.gaugeAlign {
|
||||
width: 50%;
|
||||
}
|
||||
.gaugeThreeText {
|
||||
margin-top: 4px;margin-left: 10px;
|
||||
}
|
||||
.e-view.tailwind div.gaugeThreeText, .e-view.tailwind-dark div.gaugeThreeText {
|
||||
margin-top: 0px;margin-left: 10px;
|
||||
}
|
||||
.e-view.material div.gaugeThreeText, .e-view.material-dark div.gaugeThreeText, .e-view.bootstrap-dark div.gaugeThreeText,
|
||||
.e-view.bootstrap div.gaugeThreeText, .e-view.bootstrap4 div.gaugeThreeText,
|
||||
.e-view.fabric div.gaugeThreeText, .e-view.fabric-dark div.gaugeThreeText{
|
||||
margin-top: 4px;margin-left: 9px;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<div class="control-section" style="overflow: auto;">
|
||||
<table role="none">
|
||||
<tr>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container1" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container2" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container3" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container4" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container5" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="gaugeAlign">
|
||||
<div id="container6" style="height:250px;">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<section id="action-description" aria-label="Description of Circular Gauge sample">
|
||||
<p>
|
||||
This sample includes a wide range of arc gauges with varying appearances based on the built-in features and
|
||||
customization options.
|
||||
</p>
|
||||
</section>
|
||||
<section id="description" aria-label="Description of Circular Gauge features demonstrated in this sample">
|
||||
<p>
|
||||
In this example, you can see how to render an arc gauge in various styles. You can use <a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/axisModel">axes</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/rangeModel/">ranges</a>, <a
|
||||
target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/pointerModel/">pointers</a> and
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/api/circular-gauge/annotationModel/">annotations</a>
|
||||
oriented properties to customize the appearance of the arc gauge, in order to achieve the desired outcome.
|
||||
</p>
|
||||
<p>
|
||||
More information on the arc gauge can be found in this
|
||||
<a target="_blank"
|
||||
href="https://ej2.syncfusion.com/javascript/documentation/circular-gauge/es5-getting-started/">documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</section>
|
||||
<style>
|
||||
.annotationText {
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.e-view.tailwind div.annotationText,
|
||||
.e-view.tailwind-dark div.annotationText {
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.gaugeAlign {
|
||||
width: 50%;
|
||||
}
|
||||
.gaugeThreeText {
|
||||
margin-top: 4px;margin-left: 10px;
|
||||
}
|
||||
.e-view.tailwind div.gaugeThreeText, .e-view.tailwind-dark div.gaugeThreeText {
|
||||
margin-top: 0px;margin-left: 10px;
|
||||
}
|
||||
.e-view.material div.gaugeThreeText, .e-view.material-dark div.gaugeThreeText, .e-view.bootstrap-dark div.gaugeThreeText,
|
||||
.e-view.bootstrap div.gaugeThreeText, .e-view.bootstrap4 div.gaugeThreeText,
|
||||
.e-view.fabric div.gaugeThreeText, .e-view.fabric-dark div.gaugeThreeText{
|
||||
margin-top: 4px;margin-left: 9px;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
|
|
@ -13,6 +13,7 @@ function pointerGauge1() {
|
|||
{
|
||||
annotations: [
|
||||
{
|
||||
description:'38',
|
||||
content: '<div style="font-size:30px;margin-top: -5px;font-family: inherit;">38</div>',
|
||||
angle: 1,
|
||||
radius: '-20%',
|
||||
|
|
@ -42,6 +43,7 @@ function pointerGauge1() {
|
|||
{
|
||||
type: 'RangeBar',
|
||||
color: '#7edfb4',
|
||||
description:'RangeBar pointer value : 38',
|
||||
value: 38,
|
||||
radius: '120%',
|
||||
pointerWidth: 28,
|
||||
|
|
@ -51,6 +53,7 @@ function pointerGauge1() {
|
|||
},
|
||||
{
|
||||
type: 'Marker',
|
||||
description:'Marker pointer value : 38',
|
||||
markerShape: 'Rectangle',
|
||||
markerWidth: 28,
|
||||
markerHeight: 3,
|
||||
|
|
@ -129,6 +132,7 @@ function pointerGauge2() {
|
|||
{
|
||||
annotations: [
|
||||
{
|
||||
description:'75%',
|
||||
content: '<div style="font-size:25px;font-family: inherit;">75%</div>',
|
||||
angle: 1,
|
||||
radius: '0%',
|
||||
|
|
@ -136,12 +140,14 @@ function pointerGauge2() {
|
|||
|
||||
},
|
||||
{
|
||||
description:'Annotation value : 0 %',
|
||||
content: '<div style="font-size:22px;font-family: inherit;">0%</div>',
|
||||
angle: 255,
|
||||
radius: '102%',
|
||||
zIndex: '1',
|
||||
},
|
||||
{
|
||||
description:'Annotation value :100 %',
|
||||
content: '<div style="font-size:22px;font-family: inherit;">100%</div>',
|
||||
angle: 105,
|
||||
radius: '105%',
|
||||
|
|
@ -159,6 +165,7 @@ function pointerGauge2() {
|
|||
width: 0,
|
||||
},
|
||||
labelStyle: {
|
||||
format:'{value} %',
|
||||
font: {
|
||||
size: '0px',
|
||||
fontFamily: 'inherit'
|
||||
|
|
@ -169,6 +176,7 @@ function pointerGauge2() {
|
|||
type: 'RangeBar',
|
||||
pointerWidth: 40,
|
||||
color: '#d6f5e8',
|
||||
description: 'RangeBar pointer value: 75',
|
||||
value: 75,
|
||||
radius: '125%',
|
||||
},
|
||||
|
|
@ -176,6 +184,7 @@ function pointerGauge2() {
|
|||
type: 'RangeBar',
|
||||
pointerWidth: 30,
|
||||
color: '#7edfb4',
|
||||
description: 'RangeBar pointer value :75',
|
||||
value: 75,
|
||||
radius: '115%',
|
||||
},
|
||||
|
|
@ -213,6 +222,7 @@ function pointerGauge3() {
|
|||
{
|
||||
annotations: [
|
||||
{
|
||||
description:'450',
|
||||
content:
|
||||
'<div style="font-size:30px;font-family: inherit;"> 450 </div> </div>',
|
||||
zIndex: '1',
|
||||
|
|
@ -220,18 +230,21 @@ function pointerGauge3() {
|
|||
radius: '-10%',
|
||||
},
|
||||
{
|
||||
description:'300',
|
||||
content: '<div style="font-size:12px;font-family: inherit;"> 300 </div>',
|
||||
zIndex: '1',
|
||||
angle: 0,
|
||||
radius: '112%',
|
||||
},
|
||||
{
|
||||
description:'400',
|
||||
content: '<div style="font-size:12px"> 400 </div>',
|
||||
zIndex: '1',
|
||||
angle: 48,
|
||||
radius: '112%',
|
||||
},
|
||||
{
|
||||
description:'500',
|
||||
content: '<div style="font-size:12px;font-family: inherit;"> 500 </div>',
|
||||
zIndex: '1',
|
||||
angle: 93,
|
||||
|
|
@ -245,6 +258,7 @@ function pointerGauge3() {
|
|||
maximum: 600,
|
||||
radius: '75%',
|
||||
labelStyle: {
|
||||
format:' {value}%',
|
||||
font: { fontFamily: 'inherit', size: '0px' },
|
||||
offset: 10,
|
||||
},
|
||||
|
|
@ -343,6 +357,7 @@ function pointerGauge4() {
|
|||
{
|
||||
annotations: [
|
||||
{
|
||||
description:'21%',
|
||||
content:
|
||||
'<div class="gaugeThreeText" style="font-size:30px;font-family: inherit;">21%</div>',
|
||||
angle: 1,
|
||||
|
|
@ -352,6 +367,7 @@ function pointerGauge4() {
|
|||
],
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
format:'Pointer {value} % ',
|
||||
font: {
|
||||
size: '0px',
|
||||
fontFamily: 'inherit'
|
||||
|
|
@ -405,6 +421,7 @@ function pointerGauge4() {
|
|||
type: 'RangeBar',
|
||||
radius: '90%',
|
||||
value: 21,
|
||||
description:'RangeBar pointer value : 21',
|
||||
roundedCornerRadius: 10,
|
||||
color: '#a8f789',
|
||||
pointerWidth: 25,
|
||||
|
|
@ -419,6 +436,7 @@ function pointerGauge4() {
|
|||
markerHeight: 30,
|
||||
color: 'white',
|
||||
radius: '80%',
|
||||
description:'Marker pointer value :22',
|
||||
value: 22,
|
||||
animation: {
|
||||
enable: false
|
||||
|
|
@ -431,6 +449,7 @@ function pointerGauge4() {
|
|||
markerHeight: 18,
|
||||
color: '#a8f789',
|
||||
radius: '80%',
|
||||
description:'Marker pointer value: 22',
|
||||
value: 22,
|
||||
animation: {
|
||||
enable: false
|
||||
|
|
@ -454,6 +473,7 @@ function pointerGauge5() {
|
|||
{
|
||||
annotations: [
|
||||
{
|
||||
description:'54%',
|
||||
content:
|
||||
'<div style="font-size:30px;font-family: inherit;">54%</div>',
|
||||
angle: 170,
|
||||
|
|
@ -463,6 +483,7 @@ function pointerGauge5() {
|
|||
],
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
format:'$ {value} ',
|
||||
font: {
|
||||
size: '0px',
|
||||
fontFamily: 'inherit'
|
||||
|
|
@ -516,6 +537,7 @@ function pointerGauge5() {
|
|||
pointers: [
|
||||
{
|
||||
roundedCornerRadius: 20,
|
||||
description:'RangeBar pointer value : 54',
|
||||
value: 54,
|
||||
type: 'RangeBar',
|
||||
radius: '90%',
|
||||
|
|
@ -559,6 +581,7 @@ function pointerGauge6() {
|
|||
{
|
||||
annotations: [
|
||||
{
|
||||
description:'80% Completed',
|
||||
content:
|
||||
'<div class="annotationText">80% <br/> <div> Completed </div> </div>',
|
||||
angle: 10,
|
||||
|
|
@ -568,6 +591,7 @@ function pointerGauge6() {
|
|||
],
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
format:'{value} % Completed',
|
||||
font: {
|
||||
size: '0px',
|
||||
fontFamily: 'inherit'
|
||||
|
|
@ -1235,6 +1259,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 54',
|
||||
value: 54,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1247,6 +1272,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 55',
|
||||
value: 55,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1259,6 +1285,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 56',
|
||||
value: 56,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1271,6 +1298,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 57',
|
||||
value: 57,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1283,6 +1311,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 58',
|
||||
value: 58,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1295,6 +1324,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 59',
|
||||
value: 59,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1307,6 +1337,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 60',
|
||||
value: 60,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1319,6 +1350,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 61',
|
||||
value: 61,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1331,6 +1363,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 62',
|
||||
value: 62,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1343,6 +1376,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 63',
|
||||
value: 63,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1355,6 +1389,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 64',
|
||||
value: 64,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1367,6 +1402,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 65',
|
||||
value: 65,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1379,6 +1415,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 66',
|
||||
value: 66,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1391,6 +1428,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 67',
|
||||
value: 67,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1403,6 +1441,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 68',
|
||||
value: 68,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1415,6 +1454,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 69',
|
||||
value: 69,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1427,6 +1467,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 70',
|
||||
value: 70,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1439,6 +1480,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 71',
|
||||
value: 71,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1451,6 +1493,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 72',
|
||||
value: 72,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1463,6 +1506,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 73',
|
||||
value: 73,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1475,6 +1519,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 74',
|
||||
value: 74,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1487,6 +1532,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 75',
|
||||
value: 75,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1499,6 +1545,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 76',
|
||||
value: 76,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1511,6 +1558,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 77',
|
||||
value: 77,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1523,6 +1571,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 78',
|
||||
value: 78,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
@ -1535,6 +1584,7 @@ function pointerGauge6() {
|
|||
markerWidth: 38,
|
||||
markerHeight: 3,
|
||||
color: '#7edfb4',
|
||||
description:'Marker pointer value : 79',
|
||||
value: 79,
|
||||
animation: {
|
||||
enable: false,
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/custom-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"books\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n // define the JSON of data\n \n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the data to dataSource property\n dataSource: window.booksData,\n // maps the appropriate column to fields property\n fields: { value: 'BookName' },\n // set placeholder to AutoComplete input element\n placeholder: 'e.g. Node.js Succinctly',\n // Bind the filter event\n filtering: function (e) {\n var options = {\n keys: ['BookName'],\n includeMatches: true,\n findAllMatches: true\n };\n // create object from Fuse constructor\n var fuse = new Fuse(window.booksData, options);\n // store the search result data based on typed characters\n var result = fuse.search(e.text);\n var data = [];\n for (var i = 0; i < result.length; i++) {\n data.push(result[i].item);\n }\n // pass the filter data source to updateData method.\n e.updateData(data, null);\n var popupElement = document.getElementById('books_popup');\n if (popupElement)\n {\n var lists = popupElement.querySelectorAll('.e-list-item');\n // For highlight the typed characters, pass the result data and list items to highlightSearch method.\n highlightSearch(lists, result);\n }\n }\n });\n atcObj.appendTo('#books');\n loadExternalFile();\n // Dynamically load the fuse.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'dist/fuse.min.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n function highlightSearch(listItems, result) {\n if (result.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n var innerHTML = listItems[i].innerHTML;\n for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {\n var indexes = result[i].matches[0].indices[j];\n innerHTML = innerHTML.substring(0, indexes[0]) + '<span class=\"e-highlight\">' +\n innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);\n listItems[i].innerHTML = innerHTML;\n }\n }\n }\n }\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/custom-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"0\" id=\"books\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n // define the JSON of data\n \n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the data to dataSource property\n dataSource: window.booksData,\n // maps the appropriate column to fields property\n fields: { value: 'BookName' },\n // set placeholder to AutoComplete input element\n placeholder: 'e.g. Node.js Succinctly',\n // Bind the filter event\n filtering: function (e) {\n var options = {\n keys: ['BookName'],\n includeMatches: true,\n findAllMatches: true\n };\n // create object from Fuse constructor\n var fuse = new Fuse(window.booksData, options);\n // store the search result data based on typed characters\n var result = fuse.search(e.text);\n var data = [];\n for (var i = 0; i < result.length; i++) {\n data.push(result[i].item);\n }\n // pass the filter data source to updateData method.\n e.updateData(data, null);\n var popupElement = document.getElementById('books_popup');\n if (popupElement)\n {\n var lists = popupElement.querySelectorAll('.e-list-item');\n // For highlight the typed characters, pass the result data and list items to highlightSearch method.\n highlightSearch(lists, result);\n }\n }\n });\n atcObj.appendTo('#books');\n loadExternalFile();\n // Dynamically load the fuse.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'dist/fuse.min.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n function highlightSearch(listItems, result) {\n if (result.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n var innerHTML = listItems[i].innerHTML;\n for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {\n var indexes = result[i].matches[0].indices[j];\n innerHTML = innerHTML.substring(0, indexes[0]) + '<span class=\"e-highlight\">' +\n innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);\n listItems[i].innerHTML = innerHTML;\n }\n }\n }\n }\n"}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="col-lg-12 control-section" style="height: 400px;">
|
||||
<div class='control-wrapper'>
|
||||
<div style='padding-top:70px;'>
|
||||
<input type="text" tabindex="1" id='books' />
|
||||
<input type="text" tabindex="0" id='books' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/data-binding/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-9\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4> Local Data</h4>\n <input type=\"text\" id=\"country\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Remote Data</h4>\n <input type=\"text\" id=\"products\">\n </div>\n </div>\n</div>\n<div class=\"col-lg-3 property-section\">\n\t<table id=\"property\" title=\"Properties\">\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\t<input id=\"checkAutofill\" type=\"checkbox\" checked=\"true\">\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj1 = new ej.dropdowns.AutoComplete({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url: 'https://services.syncfusion.com/js/production/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // set the count for displays the suggestion items.\n suggestionCount: 5,\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // map the appropriate columns to fields property\n fields: { value: 'FirstName' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // sort the resulted items\n sortOrder: 'Ascending',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true,\n // set the filterType to searching operation\n filterType: 'StartsWith',\n });\n atcObj1.appendTo('#products');\n\n // initialize AutoComplete component\n var atcObj2 = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the filterType to searching operation\n filterType: 'StartsWith',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n atcObj2.appendTo('#country');\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Autofill',\n // bind change event\n change: function (args) {\n // enable or disable the autofill in remote data AutoComplete based on CheckBox checked state\n atcObj1.autofill = args.checked;\n // enable or disable the autofill in local data AutoComplete based on CheckBox checked state\n atcObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/data-binding/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-9\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <label class=\"h4\"> Local Data</label>\n <input type=\"text\" id=\"country\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <label class=\"h4\">Remote Data</label>\n <input type=\"text\" id=\"products\">\n </div>\n </div>\n</div>\n<div class=\"col-lg-3 property-section\">\n\t<table id=\"property\" title=\"Properties\">\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\t<input id=\"checkAutofill\" type=\"checkbox\" checked=\"true\">\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj1 = new ej.dropdowns.AutoComplete({\n // bind the DataManager instance to dataSource property\n dataSource: new ej.data.DataManager({ url: 'https://services.syncfusion.com/js/production/api/Employees', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true}),\n // set the count for displays the suggestion items.\n suggestionCount: 5,\n // bind the Query instance to query property\n query: new ej.data.Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),\n // map the appropriate columns to fields property\n fields: { value: 'FirstName' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // sort the resulted items\n sortOrder: 'Ascending',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true,\n // set the filterType to searching operation\n filterType: 'StartsWith',\n });\n atcObj1.appendTo('#products');\n\n // initialize AutoComplete component\n var atcObj2 = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // sort the resulted items\n sortOrder: 'Ascending',\n // set the filterType to searching operation\n filterType: 'StartsWith',\n // enable the autofill property to fill a first matched value in input when press a down key\n autofill: true\n });\n atcObj2.appendTo('#country');\n var checkBoxObj = new ej.buttons.CheckBox({\n // set true for enable the checked state at initial rendering\n checked: true,\n // set text value for check box element.\n label: 'Autofill',\n // bind change event\n change: function (args) {\n // enable or disable the autofill in remote data AutoComplete based on CheckBox checked state\n atcObj1.autofill = args.checked;\n // enable or disable the autofill in local data AutoComplete based on CheckBox checked state\n atcObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n\n"}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<div class="control-section col-lg-9">
|
||||
<div id='local-data' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class='content'>
|
||||
<h4> Local Data</h4>
|
||||
<label class="h4"> Local Data</label>
|
||||
<input type="text" id='country' />
|
||||
</div>
|
||||
</div>
|
||||
<div id='remote-data' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class='content'>
|
||||
<h4>Remote Data</h4>
|
||||
<label class="h4">Remote Data</label>
|
||||
<input type="text" id='products' />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,5 +60,13 @@
|
|||
margin: 0 auto;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.content .h4 {
|
||||
font-size: 16px;
|
||||
margin: 0 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"games\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // define the array of data\n var sportsData = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: sportsData,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"games\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // define the array of data\n var sportsData = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: sportsData,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/diacritics-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"list\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n\n/**\n * AutoComplete Diacritics functionality Sample\n */\n\n // initialize AutoComplete component\n var dropdownObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true\n });\n dropdownObj.appendTo('#list');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/diacritics-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"list\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n\n/**\n * AutoComplete Diacritics functionality Sample\n */\n\n // initialize AutoComplete component\n var dropdownObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.diacritics,\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g: gul',\n // enabled the ignoreAccent property for ignore the diacritics\n ignoreAccent: true\n });\n dropdownObj.appendTo('#list');\n"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/disabled-items/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-12\">\n <div id=\"default-list\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Status</h4>\n <input type=\"text\" id=\"default\" tabindex=\"1\">\n </div>\n </div>\n <div id=\"grouping-list\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Vegetable</h4>\n <input type=\"text\" id=\"grouping\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n\n\n // initialize AutoComplete component\n var defaultObject = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: window.statusDatac,\n // set placeholder to AutoComplete input element\n placeholder: \"Select Status\",\n // map the appropriate columns to fields property\n fields: { value: 'Status', disabled: 'State' },\n });\n\n // render initialized AutoComplete\n defaultObject.appendTo('#default');\n\n // initialize AutoComplete component\n var groupingObject = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: window.groupingDatab,\n // set placeholder to AutoComplete input element\n placeholder: \"Select Vegetable\",\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', value: 'Vegetable', disabled: 'State' },\n });\n\n // render initialized AutoComplete\n groupingObject.appendTo('#grouping');\n\n"}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div class="control-section col-lg-12">
|
||||
<div id='default-list' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class='content'>
|
||||
<h4>Status</h4>
|
||||
<input type="text" id="default" tabindex="1" />
|
||||
</div>
|
||||
</div>
|
||||
<div id='grouping-list' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class='content'>
|
||||
<h4>Vegetable</h4>
|
||||
<input type="text" id="grouping" tabindex="1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This example showcases the disabled items of AutoComplete. When you type on the AutoComplete the popup will open, and you will notice that the disabled items are greyed out and cannot be selected.</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>The AutoComplete provides options for individual items to be in either an enabled or disabled state for specific scenarios.
|
||||
Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the <code>fields.disabled</code> property.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
width: 320px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
this.default = function () {
|
||||
|
||||
// initialize AutoComplete component
|
||||
var defaultObject = new ej.dropdowns.AutoComplete({
|
||||
//set the data to dataSource property
|
||||
dataSource: window.statusDatac,
|
||||
// set placeholder to AutoComplete input element
|
||||
placeholder: "Select Status",
|
||||
// map the appropriate columns to fields property
|
||||
fields: { value: 'Status', disabled: 'State' },
|
||||
});
|
||||
|
||||
// render initialized AutoComplete
|
||||
defaultObject.appendTo('#default');
|
||||
|
||||
// initialize AutoComplete component
|
||||
var groupingObject = new ej.dropdowns.AutoComplete({
|
||||
//set the data to dataSource property
|
||||
dataSource: window.groupingDatab,
|
||||
// set placeholder to AutoComplete input element
|
||||
placeholder: "Select Vegetable",
|
||||
// map the appropriate columns to fields property
|
||||
fields: { groupBy: 'Category', value: 'Vegetable', disabled: 'State' },
|
||||
});
|
||||
|
||||
// render initialized AutoComplete
|
||||
groupingObject.appendTo('#grouping');
|
||||
|
||||
};
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/grouping-icon/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div id=\"groupList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Grouping</h4>\n <input type=\"text\" id=\"vegetables\">\n </div>\n </div>\n\n <div id=\"iconList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4> Icons</h4>\n <input type=\"text\" id=\"icons\">\n </div>\n </div>\n</div>\n\n\n\n\n\n<style>\n \n\n .e-list-icon {\n font-family: 'Socialicons' !important;\n color: rgba(0, 0, 0, .57);\n }\n\n .twitter:before {\n content: \"\\a701\";\n }\n\n .vimeo:before {\n content: \"\\a702\";\n }\n\n .youtube:before {\n content: \"\\a709\";\n }\n\n .whatsapp:before {\n content: \"\\a700\";\n }\n\n .skype:before {\n content: \"\\a708\";\n }\n\n .instagram:before {\n content: \"\\a703\";\n }\n\n .google-plus:before {\n content: \"\\a706\";\n }\n\n .facebook:before {\n content: \"\\a705\";\n }\n\n .tumblr:before {\n content: \"\\a707\";\n }\n\n .linkedin:before {\n content: \"\\a704\";\n }\n</style></div></body></html>","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var groupObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', value: 'Vegetable' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Cabbage',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n groupObj.appendTo('#vegetables');\n\n // initialize AutoComplete component\n var iconObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { iconCss: 'Class', value: 'SocialMedia' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Facebook',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n iconObj.appendTo('#icons');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/grouping-icon/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div id=\"groupList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <label class=\"h4\">Grouping</label>\n <input type=\"text\" id=\"vegetables\">\n </div>\n </div>\n\n <div id=\"iconList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <label class=\"h4\"> Icons</label>\n <input type=\"text\" id=\"icons\">\n </div>\n </div>\n</div>\n\n\n\n\n\n<style>\n \n\n .e-list-icon {\n font-family: 'Socialicons' !important;\n color: rgba(0, 0, 0, .57);\n }\n\n .twitter:before {\n content: \"\\a701\";\n }\n\n .vimeo:before {\n content: \"\\a702\";\n }\n\n .youtube:before {\n content: \"\\a709\";\n }\n\n .whatsapp:before {\n content: \"\\a700\";\n }\n\n .skype:before {\n content: \"\\a708\";\n }\n\n .instagram:before {\n content: \"\\a703\";\n }\n\n .google-plus:before {\n content: \"\\a706\";\n }\n\n .facebook:before {\n content: \"\\a705\";\n }\n\n .tumblr:before {\n content: \"\\a707\";\n }\n\n .linkedin:before {\n content: \"\\a704\";\n }\n</style></div></body></html>","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var groupObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddVegetableData,\n // map the appropriate columns to fields property\n fields: { groupBy: 'Category', value: 'Vegetable' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Cabbage',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n groupObj.appendTo('#vegetables');\n\n // initialize AutoComplete component\n var iconObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: window.ddSocialMedia,\n // map the appropriate columns to fields property\n fields: { iconCss: 'Class', value: 'SocialMedia' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Facebook',\n // enabled the popup button to AutoComplete\n showPopupButton: true\n });\n iconObj.appendTo('#icons');\n"}
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div id='groupList' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class="content">
|
||||
<h4>Grouping</h4>
|
||||
<label class="h4">Grouping</label>
|
||||
<input type="text" id='vegetables' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='iconList' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class="content">
|
||||
<h4> Icons</h4>
|
||||
<label class="h4"> Icons</label>
|
||||
<input type="text" id='icons' />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,6 +38,12 @@
|
|||
width: 250px;
|
||||
}
|
||||
|
||||
.content .h4 {
|
||||
font-size: 16px;
|
||||
margin: 0 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Socialicons';
|
||||
src:
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/highlight/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"country\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%;\">\n <tbody><tr>\n <td class=\"left-side\">FilterType :</td>\n <td style=\"padding-top: 10px\"><input type=\"text\" id=\"filter-type\"> </td>\n </tr>\n </tbody></table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // enable the highlight property to highlight the matched character in suggestion list\n highlight: true\n });\n atcObj.appendTo('#country');\n\n // initialize DropDownList component\n var ddlObj = new ej.dropdowns.DropDownList({\n // set the array of string data to dataSource property\n dataSource: ['Contains', 'StartsWith', 'EndsWith'],\n // set the value to select an item at initial rendering.\n text: 'Contains',\n // set the placeholder to DropDownList input element\n placeholder: 'Select a type',\n // set width size of DropDownList element.\n width: '150px',\n // bind change event to modify the filter type of AutoComplete element.\n change: function (e) {\n atcObj.filterType = e.itemData.value;\n }\n });\n ddlObj.appendTo('#filter-type');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/highlight/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"country\" tabindex=\"0\">\n </div>\n </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%;\">\n <tbody><tr>\n <td class=\"left-side\">FilterType :</td>\n <td style=\"padding-top: 10px\"><input type=\"text\" id=\"filter-type\"> </td>\n </tr>\n </tbody></table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddCountryData,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Australia',\n // enable the highlight property to highlight the matched character in suggestion list\n highlight: true\n });\n atcObj.appendTo('#country');\n\n // initialize DropDownList component\n var ddlObj = new ej.dropdowns.DropDownList({\n // set the array of string data to dataSource property\n dataSource: ['Contains', 'StartsWith', 'EndsWith'],\n // set the value to select an item at initial rendering.\n text: 'Contains',\n // set the placeholder to DropDownList input element\n placeholder: 'Select a type',\n // set width size of DropDownList element.\n width: '150px',\n // bind change event to modify the filter type of AutoComplete element.\n change: function (e) {\n atcObj.filterType = e.itemData.value;\n }\n });\n ddlObj.appendTo('#filter-type');\n"}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="col-lg-8 control-section">
|
||||
<div class="control-wrapper">
|
||||
<div style='padding-top:70px;'>
|
||||
<input type="text" id="country" tabindex="1" />
|
||||
<input type="text" id="country" tabindex="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/object-value-binding/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control-wrapper\">\n <div id=\"default\" style=\"padding-top:75px;\">\n <input type=\"text\" id=\"object\" tabindex=\"1\">\n </div>\n </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n <textarea id=\"value\" title=\"Properties\" style=\"width: 100%; margin-top:90px; height: 60px;\" readonly=\"\">Selected value : </textarea>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}/**\n * AutoComplete Object Value Binding Sample\n */\nvar records = [];\nfor (var i = 1; i <= 150; i++) {\n var autoObjectItem = {};\n autoObjectItem.id = 'id' + i;\n autoObjectItem.text = \"Item \".concat(i);\n var randomAutoGroup = Math.floor(Math.random() * 4) + 1;\n switch (randomAutoGroup) {\n case 1:\n autoObjectItem.group = 'Group D';\n break;\n case 2:\n autoObjectItem.group = 'Group C';\n break;\n case 3:\n autoObjectItem.group = 'Group B';\n break;\n case 4:\n autoObjectItem.group = 'Group A';\n break;\n default:\n break;\n }\n records.push(autoObjectItem);\n}\n\n\n\n // Initialize DropDownList component\n var listObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: records,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a Item',\n allowObjectBinding: true,\n fields: { value: 'text' },\n // set the height of the popup element\n popupHeight: '200px',\n // bind the change event\n change: function (args) {\n var inputValue = document.getElementById('value');\n inputValue.value = \"Selected value : \" + JSON.stringify(listObj.value);\n console.log(args.value);\n },\n });\n listObj.appendTo('#object');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/object-value-binding/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-8 control-section\">\n <div class=\"control-wrapper\">\n <div id=\"default\" style=\"padding-top:75px;\">\n <input type=\"text\" id=\"object\" tabindex=\"0\">\n </div>\n </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n <textarea id=\"value\" title=\"Properties\" style=\"width: 100%; margin-top:90px; height: 60px;\" readonly=\"\">Selected value : </textarea>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}/**\n * AutoComplete Object Value Binding Sample\n */\nvar records = [];\nfor (var i = 1; i <= 150; i++) {\n var autoObjectItem = {};\n autoObjectItem.id = 'id' + i;\n autoObjectItem.text = \"Item \".concat(i);\n var randomAutoGroup = Math.floor(Math.random() * 4) + 1;\n switch (randomAutoGroup) {\n case 1:\n autoObjectItem.group = 'Group D';\n break;\n case 2:\n autoObjectItem.group = 'Group C';\n break;\n case 3:\n autoObjectItem.group = 'Group B';\n break;\n case 4:\n autoObjectItem.group = 'Group A';\n break;\n default:\n break;\n }\n records.push(autoObjectItem);\n}\n\n\n\n // Initialize DropDownList component\n var listObj = new ej.dropdowns.AutoComplete({\n //set the local data to dataSource property\n dataSource: records,\n // set the placeholder to DropDownList input element\n placeholder: 'Select a Item',\n allowObjectBinding: true,\n fields: { value: 'text' },\n // set the height of the popup element\n popupHeight: '200px',\n // bind the change event\n change: function (args) {\n var inputValue = document.getElementById('value');\n inputValue.value = \"Selected value : \" + JSON.stringify(listObj.value);\n console.log(args.value);\n },\n });\n listObj.appendTo('#object');\n"}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="col-lg-8 control-section">
|
||||
<div class="control-wrapper">
|
||||
<div id="default" style='padding-top:75px;'>
|
||||
<input type="text" id="object" tabindex="1" />
|
||||
<input type="text" id="object" tabindex="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
{ "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of the JavaScript(ES5) autocomplete control with minimum configuration.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "value", "placeholder"] } },
|
||||
{ "url": "grouping-icon", "name": "Grouping and Icons", "description": "This example demonstrates how to group based on the different categories with individual header and icon support using the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["fields", "placeholder"] } },
|
||||
{ "url": "data-binding", "name": "Data Binding", "description": "This example demonstrates how to bind with local data source and fetch data from remote data service in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"] } },
|
||||
{ "url": "object-value-binding", "name": "Object Value Binding", "type": "new", "description": "This example demonstrates how to bind with data source in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["query", "dataSource", "fields", "sortOrder", "placeholder","allowObjectBinding"] } },
|
||||
{ "url": "object-value-binding", "name": "Object Value Binding", "description": "This example demonstrates how to bind with data source in the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["query", "dataSource", "fields", "sortOrder", "placeholder","allowObjectBinding"] } },
|
||||
{ "url": "disabled-items", "name": "Disabled Items", "type": "new", "description": "This example demonstrates the disabled items of the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "placeholder", "fields"] } },
|
||||
{ "url": "template", "name": "Template", "description": "This example demonstrates how to customize the appearance of each item in the JavaScript(ES5) autocomplete control pop-up list using template.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "headerTemplate", "itemTemplate", "placeholder", "popupHeight"] } },
|
||||
{ "url": "highlight", "name": "Highlight", "description": "This example demonstrates how to highlight the searched characters in the suggested list items of the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "highlight", "placeholder"] } },
|
||||
{ "url": "virtual-scroll", "name": "Virtualization", "description": "This example demonstrates how to use virtualization support of the JavaScript(ES5) autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "enableVirtualization", "popupHeight", "placeholder"] } },
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/template/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"employees\">\n </div>\n </div>\n</div>\n\n\n\n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 300px;\n }\n\n .header {\n font-weight: 600;\n color: rgba(0, 0, 0, .54);\n height: 48px;\n padding: 15px 0 0 16px;\n font-size: 16px;\n background-color: #f5f5f5;\n font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\";\n }\n\n\n .info {\n margin-left: 17px;\n }\n\n .ename {\n display: block !important;\n opacity: .87;\n font-size: 16px;\n margin-top: 8px;\n }\n\n .job {\n opacity: .54;\n font-size: 14px;\n margin-top: -15px;\n margin-bottom: 7px;\n }\n\n .empImage {\n margin: 6px 16px;\n float: left;\n width: 50px;\n height: 50px;\n }\n\n #employees_popup.e-popup .e-list-item * {\n display: block;\n text-indent: 0;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup .e-dropdownbase .e-list-item {\n line-height: 42px;\n height: 80px;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage {\n margin: 10px 16px;\n }\n\n .tailwind #employees_popup .job {\n margin-top: -7px;\n margin-bottom: 5px;\n }\n\n .e-bigger.tailwind #employees_popup .job {\n margin-top: -15px;\n margin-bottom: 5px;\n }\n .bootstrap5 #employees_popup .job,\n .bootstrap-dark #employees_popup .job,\n .bootstrap5-dark #employees_popup .job,\n .tailwind-dark #employees_popup .job ,\n .fluent-dark #employees_popup .job {\n margin-top: 0;\n }\n .e-bigger.bootstrap5 #employees_popup .job,\n .e-bigger.bootstrap-dark #employees_popup .job,\n .e-bigger.bootstrap5-dark #employees_popup .job,\n .e-bigger.tailwind-dark #employees_popup .job,\n .e-bigger.fluent-dark #employees_popup .job {\n margin-top: -15px;\n }\n\n .fluent-dark .header {\n background: #252423;\n color: #2899F5;\n }\n\n .bootstrap5-dark .header {\n background: #343A40;\n color: #7B848D;\n }\n\n .fluent .header{\n color: #2899F5;\n }\n\n .tailwind-dark .header {\n background: #374151;\n color: rgb(255, 255, 255);\n }\n\n .material3-dark .header,\n .material-dark .header {\n background: rgb(66, 66, 66);\n color: rgb(255, 255, 255);\n }\n\n .fabric-dark .header {\n background: rgb(40, 39, 39);\n color: rgb(255, 255, 255);\n }\n\n .bootstrap-dark .header {\n background: rgb(49, 49, 49);\n color: rgb(255, 255, 255);\n }\n</style></div></body></html>","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the template content for popup header element\n headerTemplate:\n '<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>',\n // set the template content for list items\n itemTemplate: '<div><img class=\"empImage\" src=\"styles/images/Employees/${Eimg}.png\" alt=\"employee\"/>' +\n '<div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div></div>',\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // set the height of the popup element\n popupHeight: '450px'\n });\n atcObj.appendTo('#employees');\n"}
|
||||
{"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/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"0\" id=\"employees\">\n </div>\n </div>\n</div>\n\n\n\n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 300px;\n }\n\n .header {\n font-weight: 600;\n color: rgba(0, 0, 0, .54);\n height: 48px;\n padding: 15px 0 0 16px;\n font-size: 16px;\n background-color: #f5f5f5;\n font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\";\n }\n\n\n .info {\n margin-left: 17px;\n }\n\n .ename {\n display: block !important;\n opacity: .87;\n font-size: 16px;\n margin-top: 8px;\n }\n\n .job {\n opacity: .54;\n font-size: 14px;\n margin-top: -15px;\n margin-bottom: 7px;\n }\n\n .empImage {\n margin: 6px 16px;\n float: left;\n width: 50px;\n height: 50px;\n }\n\n #employees_popup.e-popup .e-list-item * {\n display: block;\n text-indent: 0;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup .e-dropdownbase .e-list-item {\n line-height: 42px;\n height: 80px;\n }\n\n .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage {\n margin: 10px 16px;\n }\n\n .tailwind #employees_popup .job {\n margin-top: -7px;\n margin-bottom: 5px;\n }\n\n .e-bigger.tailwind #employees_popup .job {\n margin-top: -15px;\n margin-bottom: 5px;\n }\n .bootstrap5 #employees_popup .job,\n .bootstrap-dark #employees_popup .job,\n .bootstrap5-dark #employees_popup .job,\n .tailwind-dark #employees_popup .job ,\n .fluent-dark #employees_popup .job {\n margin-top: 0;\n }\n .e-bigger.bootstrap5 #employees_popup .job,\n .e-bigger.bootstrap-dark #employees_popup .job,\n .e-bigger.bootstrap5-dark #employees_popup .job,\n .e-bigger.tailwind-dark #employees_popup .job,\n .e-bigger.fluent-dark #employees_popup .job {\n margin-top: -15px;\n }\n\n .fluent-dark .header {\n background: #252423;\n color: #2899F5;\n }\n\n .bootstrap5-dark .header {\n background: #343A40;\n color: #7B848D;\n }\n\n .fluent .header{\n color: #2899F5;\n }\n\n .tailwind-dark .header {\n background: #374151;\n color: rgb(255, 255, 255);\n }\n\n .material3-dark .header,\n .material-dark .header {\n background: rgb(66, 66, 66);\n color: rgb(255, 255, 255);\n }\n\n .fabric-dark .header {\n background: rgb(40, 39, 39);\n color: rgb(255, 255, 255);\n }\n\n .bootstrap-dark .header {\n background: rgb(49, 49, 49);\n color: rgb(255, 255, 255);\n }\n</style></div></body></html>","index.js":"{{ripple}}\n\n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the local data to dataSource property\n dataSource: window.ddEmployeesList,\n // map the appropriate columns to fields property\n fields: { value: 'Name' },\n // set the template content for popup header element\n headerTemplate:\n '<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>',\n // set the template content for list items\n itemTemplate: '<div><img class=\"empImage\" src=\"styles/images/Employees/${Eimg}.png\" alt=\"employee\"/>' +\n '<div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div></div>',\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Andrew Fuller',\n // set the height of the popup element\n popupHeight: '450px'\n });\n atcObj.appendTo('#employees');\n"}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="col-lg-12 control-section" style="height: 400px;">
|
||||
<div class='control-wrapper'>
|
||||
<div style='padding-top:70px;'>
|
||||
<input type="text" tabindex="1" id='employees' />
|
||||
<input type="text" tabindex="0" id='employees' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/virtual-scroll/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-12\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Local Data</h4>\n <input type=\"text\" id=\"local\" tabindex=\"1\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Remote Data</h4>\n <input type=\"text\" id=\"remote\" tabindex=\"1\">\n </div>\n </div>\n <div id=\"group-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Grouping</h4>\n <input type=\"text\" id=\"group\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // define the array of data\n var autoCompleteRecords = [];\n for (var i = 1; i <= 150; i++) {\n var autoItem = {};\n autoItem.id = 'id' + i;\n autoItem.text = \"Item \".concat(i);\n var randomGroup = Math.floor(Math.random() * 4) + 1;\n switch (randomGroup) {\n case 1:\n autoItem.group = 'Group A';\n break;\n case 2:\n autoItem.group = 'Group B';\n break;\n case 3:\n autoItem.group = 'Group C';\n break;\n case 4:\n autoItem.group = 'Group D';\n break;\n default:\n break;\n }\n autoCompleteRecords.push(autoItem);\n }\n\n // initialize AutoComplete component\n var localObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: autoCompleteRecords,\n //enable the virtualization property\n enableVirtualization: true,\n popupHeight: '200px',\n fields: { value: 'text' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Item 1'\n });\n localObj.appendTo('#local');\n var remoteObj = new ej.dropdowns.AutoComplete({\n dataSource: new ej.data.DataManager({\n url: 'https://services.syncfusion.com/js/production/api/orders',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n }),\n fields: { value: 'OrderID' },\n enableVirtualization: true,\n popupHeight: '200px',\n placeholder: 'OrderID'\n });\n remoteObj.appendTo('#remote');\n var groupObj = new ej.dropdowns.AutoComplete({\n dataSource: autoCompleteRecords,\n enableVirtualization: true,\n popupHeight: '200px',\n fields: { groupBy: 'group', value: 'text'},\n placeholder: 'e.g. Item 1'\n });\n groupObj.appendTo('#group');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/virtual-scroll/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/26.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section col-lg-12\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <label class=\"h4\">Local Data</label>\n <input type=\"text\" id=\"local\" tabindex=\"0\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <label class=\"h4\">Remote Data</label>\n <input type=\"text\" id=\"remote\" tabindex=\"0\">\n </div>\n </div>\n <div id=\"group-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <label class=\"h4\">Grouping</label>\n <input type=\"text\" id=\"group\" tabindex=\"0\">\n </div>\n </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n // define the array of data\n var autoCompleteRecords = [];\n for (var i = 1; i <= 150; i++) {\n var autoItem = {};\n autoItem.id = 'id' + i;\n autoItem.text = \"Item \".concat(i);\n var randomGroup = Math.floor(Math.random() * 4) + 1;\n switch (randomGroup) {\n case 1:\n autoItem.group = 'Group A';\n break;\n case 2:\n autoItem.group = 'Group B';\n break;\n case 3:\n autoItem.group = 'Group C';\n break;\n case 4:\n autoItem.group = 'Group D';\n break;\n default:\n break;\n }\n autoCompleteRecords.push(autoItem);\n }\n\n // initialize AutoComplete component\n var localObj = new ej.dropdowns.AutoComplete({\n //set the data to dataSource property\n dataSource: autoCompleteRecords,\n //enable the virtualization property\n enableVirtualization: true,\n popupHeight: '200px',\n fields: { value: 'text' },\n // set the placeholder to AutoComplete input element\n placeholder: 'e.g. Item 1'\n });\n localObj.appendTo('#local');\n var remoteObj = new ej.dropdowns.AutoComplete({\n dataSource: new ej.data.DataManager({\n url: 'https://services.syncfusion.com/js/production/api/orders',\n adaptor: new ej.data.WebApiAdaptor(),\n crossDomain: true\n }),\n fields: { value: 'OrderID' },\n enableVirtualization: true,\n popupHeight: '200px',\n placeholder: 'OrderID'\n });\n remoteObj.appendTo('#remote');\n var groupObj = new ej.dropdowns.AutoComplete({\n dataSource: autoCompleteRecords,\n enableVirtualization: true,\n popupHeight: '200px',\n fields: { groupBy: 'group', value: 'text'},\n placeholder: 'e.g. Item 1'\n });\n groupObj.appendTo('#group');\n"}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
<div class="control-section col-lg-12">
|
||||
<div id='local-data' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class='content'>
|
||||
<h4>Local Data</h4>
|
||||
<input type="text" id="local" tabindex="1" />
|
||||
<label class="h4">Local Data</label>
|
||||
<input type="text" id="local" tabindex="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div id='remote-data' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class='content'>
|
||||
<h4>Remote Data</h4>
|
||||
<input type="text" id="remote" tabindex="1" />
|
||||
<label class="h4">Remote Data</label>
|
||||
<input type="text" id="remote" tabindex="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div id='group-data' class='col-lg-6' style='padding-top:15px'>
|
||||
<div class='content'>
|
||||
<h4>Grouping</h4>
|
||||
<input type="text" id="group" tabindex="1" />
|
||||
<label class="h4">Grouping</label>
|
||||
<input type="text" id="group" tabindex="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,5 +34,12 @@
|
|||
margin: 0 auto;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.content .h4 {
|
||||
font-size: 16px;
|
||||
margin: 0 0 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -85,6 +85,9 @@
|
|||
.bootstrap5-dark .e-custom-card .e-avatar,
|
||||
.fluent .e-custom-card .e-avatar,
|
||||
.fluent-dark .e-custom-card .e-avatar,
|
||||
.fluent2 .e-custom-card .e-avatar,
|
||||
.fluent2-dark .e-custom-card .e-avatar,
|
||||
.fluent2-highcontrast .e-custom-card .e-avatar,
|
||||
.material3 .e-custom-card .e-avatar,
|
||||
.material3-dark .e-custom-card .e-avatar
|
||||
{
|
||||
|
|
@ -143,6 +146,8 @@
|
|||
.material-dark .e-custom-card.e-card .avatar-content,
|
||||
.material3-dark .e-custom-card.e-card .avatar-content,
|
||||
.fluent-dark .e-custom-card.e-card .avatar-content,
|
||||
.fluent2-dark .e-custom-card.e-card .avatar-content,
|
||||
.fluent2-highcontrast .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);
|
||||
|
|
@ -154,6 +159,8 @@
|
|||
.material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.material3-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.fluent2-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title,
|
||||
.fluent2-highcontrast .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);
|
||||
|
|
@ -165,6 +172,8 @@
|
|||
.material-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.material3-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.fluent-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.fluent2-dark .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title,
|
||||
.fluent2-highcontrast .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);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/avatar/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-default\">\n <div class=\"avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Avatar-->\n <div class=\"e-avatar e-avatar-xsmall image\"></div>\n <!-- Small Avatar-->\n <div class=\"e-avatar e-avatar-small image\"></div>\n <!-- Avatar-->\n <div class=\"e-avatar image\"></div>\n <!-- Large Avatar-->\n <div class=\"e-avatar e-avatar-large image\"></div>\n <!-- xLarge Avatar-->\n <div class=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n <div class=\"circleAvatar avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Circle Avatar-->\n <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n <!-- Small Circle Avatar-->\n <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n <!-- Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle image\"></div>\n <!-- Large Circle Avatar-->\n <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n }\n\n .sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Assinging image for avatar in 'background-image' property */\n\n .e-avatar.image {\n background-image: url(//ej2.syncfusion.com/javascript/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 140px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n }\n\n .bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
|
||||
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/avatar/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container avatar-default\">\n <div class=\"avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Avatar-->\n <div class=\"e-avatar e-avatar-xsmall image\"></div>\n <!-- Small Avatar-->\n <div class=\"e-avatar e-avatar-small image\"></div>\n <!-- Avatar-->\n <div class=\"e-avatar image\"></div>\n <!-- Large Avatar-->\n <div class=\"e-avatar e-avatar-large image\"></div>\n <!-- xLarge Avatar-->\n <div class=\"e-avatar e-avatar-xlarge image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Default</div>\n </div>\n </div>\n </div>\n <div class=\"circleAvatar avatar-block\">\n <div class=\"e-card e-avatar-showcase\">\n <div class=\"e-card-content\">\n <!-- xSmall Circle Avatar-->\n <div class=\"e-avatar e-avatar-xsmall e-avatar-circle image\"></div>\n <!-- Small Circle Avatar-->\n <div class=\"e-avatar e-avatar-small e-avatar-circle image\"></div>\n <!-- Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle image\"></div>\n <!-- Large Circle Avatar-->\n <div class=\"e-avatar e-avatar-large e-avatar-circle image\"></div>\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-xlarge e-avatar-circle image\"></div>\n </div>\n <div class=\"e-card-content\">\n <div>Circle</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Media Quries for various devices */\n\n @media only screen and (max-width: 965px) {\n .sample_container.avatar-default {\n max-width: 332px;\n margin: auto;\n margin-top: 0;\n }\n .circleAvatar {\n margin-top: 15px;\n }\n .e-avatar-showcase.e-card {\n width: 300px;\n }\n }\n\n @media only screen and (min-width: 965px) {\n .sample_container.avatar-default {\n max-width: 825px;\n margin: auto;\n margin-top: 70px;\n }\n .e-avatar-showcase.e-card {\n width: 400px;\n }\n }\n\n .sample_container.avatar-default .avatar-block {\n display: inline-block;\n vertical-align: top;\n }\n\n /* Assinging image for avatar in 'background-image' property */\n\n .e-avatar.image {\n background-image: url(//npmci.syncfusion.com/development/demos/src/avatar/images/pic01.png);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n /* Card Customization */\n\n .e-avatar-showcase.e-card {\n height: 140px;\n padding: 5px;\n margin: 5px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n border-radius: 8px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-header-title {\n align-self: center;\n font-size: 18px;\n letter-spacing: 1px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title {\n color: rgba(0, 0, 0, 0.75);\n white-space: pre-line;\n font-size: 14px;\n text-shadow: #eaeaea 1px 1px 2px;\n }\n\n .e-avatar-showcase.e-card .e-card-header .e-card-sub-title p {\n margin: 0;\n }\n\n .e-avatar-showcase.e-card .e-card-content {\n align-self: center;\n padding: 10px 0 10px 0;\n overflow: visible;\n }\n\n .bootstrap4 .e-avatar-showcase.e-card {\n box-shadow: none;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -85,7 +85,7 @@
|
|||
#letterAvatarList .listWrapper .e-avatar {
|
||||
position: absolute;
|
||||
top: calc(100% - 40px);
|
||||
font-size: 10px;
|
||||
font-size: 16px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -214,6 +214,18 @@
|
|||
content: '\e700';
|
||||
}
|
||||
|
||||
.fluent2 .e-people,
|
||||
.fluent2-dark .e-people,
|
||||
.fluent2-highcontrast .e-people {
|
||||
font-family: 'e-icons';
|
||||
}
|
||||
|
||||
.fluent2 .e-people:before,
|
||||
.fluent2-dark .e-people:before,
|
||||
.fluent2-highcontrast .e-people:before {
|
||||
content: '\e7b4';
|
||||
}
|
||||
|
||||
.e-avatar .e-people.icons {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -34,7 +34,10 @@
|
|||
.e-bigger.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.material3 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.material3-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
.e-bigger.material3-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.fluent .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.fluent-dark .sample_container.badge-accordion #accordion .e-toggle-icon
|
||||
.e-bigger.fluent2 .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
|
|
@ -92,11 +95,31 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.fluent2 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.fluent2-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.fluent2-highcontrast .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.e-bigger.fluent2 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.fluent2-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
.e-bigger.fluent2-highcontrast .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.e-bigger.fluent2 .badge-accordion #accordion .e-acrdn-header-content,
|
||||
.e-bigger.fluent2-dark.e-bigger .badge-accordion #accordion .e-acrdn-header-content,
|
||||
.e-bigger.fluent2-highcontrast.e-bigger .badge-accordion #accordion .e-acrdn-header-content {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
body.tailwind-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.bootstrap5 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.bootstrap5-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.material3 .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.material3-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
body.material3-dark .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.fluent .sample_container.badge-accordion #accordion .e-toggle-icon,
|
||||
body.fluent-dark .sample_container.badge-accordion #accordion .e-toggle-icon {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -108,4 +131,4 @@
|
|||
body.material3-dark .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ this.default = function () {
|
|||
// Assigning badge data
|
||||
var badgeContent = ['7 New', '27 New', '2 New', '14 New'];
|
||||
|
||||
var template = '<div><li class="msg"><span class="e-acrdn-icons e-content-icon people">' +
|
||||
'</span>Message Thread</li><li class="msg"><span class="e-acrdn-icons e-content-icon people"></span>Message Thread</li></div>';
|
||||
var template = '<div><ul><li class="msg"><span class="e-acrdn-icons e-content-icon people">' +
|
||||
'</span>Message Thread</li><li class="msg"><span class="e-acrdn-icons e-content-icon people"></span>Message Thread</li></ul></div>';
|
||||
//Initialize Accordion component
|
||||
var acrdnObj = new ej.navigations.Accordion({
|
||||
// Assigning accordion data
|
||||
|
|
@ -31,4 +31,4 @@ this.default = function () {
|
|||
});
|
||||
//Render initialized Accordion component
|
||||
acrdnObj.appendTo('#accordion');
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/badge/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section default\">\n <div class=\"sample_container badge-default\">\n <div class=\"e-btn-group e-custom-button\">\n <button id=\"update\" class=\"e-btn\">Updates\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-info e-badge-notification e-badge-overlap\">14</span>\n </button>\n <button id=\"task\" class=\"e-btn\">Tasks\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-success e-badge-notification e-badge-overlap\">48</span>\n </button>\n <button id=\"notify\" class=\"e-btn\">Notifications\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-primary e-badge-notification e-badge-overlap\">99</span>\n </button>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n @media only screen and (max-width: 400px) {\n .sample_container.badge-default .e-btn-group {\n left: calc(50% - 111px);\n }\n .sample_container.badge-default #task {\n display: none;\n }\n }\n\n .sample_container.badge-default {\n max-width: 328px;\n margin: auto;\n margin-top: 130px;\n }\n\n .badge-default .e-btn {\n position: relative;\n }\n\n .badge-default .e-bigger .e-btn {\n padding: 3px 10px;\n }\n\n /* Group Button Customization */\n\n .badge-default .e-btn-group {\n width: auto;\n position: relative;\n left: calc(50% - 164px);\n }\n\n .e-btn-group.e-custom-button {\n box-shadow: none;\n }\n\n .highcontrast .e-btn-group.e-custom-button .e-btn:focus {\n outline: 0px;\n color: white;\n }\n\n .fabric .e-btn-group.e-custom-button .e-btn,\n\t.material .e-btn-group.e-custom-button .e-btn,\n\t.bootstrap .e-btn-group.e-custom-button .e-btn {\n background: #F6F7F9;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n text-transform: initial;\n }\n\n #update.e-btn {\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n border-right: 1px dotted #aaa;\n width: 100px;\n }\n\n #task.e-btn {\n border-right: 1px dotted #aaa;\n width: 100px;\n }\n\n #notify.e-btn {\n padding-left: 24px;\n padding-right: 24px;\n border-bottom-right-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n .material3 #update.e-btn {\n\tborder-bottom-right-radius: 0px;\n border-top-right-radius: 0px;\n }\n\n .material3 #task.e-btn {\n\tborder-radius: 0;\n }\n\n .material3 #notify.e-btn {\n border-bottom-left-radius: 0px;\n \tborder-top-left-radius: 0px;\n }\n\n .material3 .e-btn-group.e-custom-button {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n }\n\n .default .e-badge.e-badge-overlap {\n transform: translateX(-110%);\n z-index: 100;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/badge/default/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section default\">\n <div class=\"sample_container badge-default\">\n <div class=\"e-btn-group e-custom-button\">\n <button id=\"update\" class=\"e-btn\">Updates\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-info e-badge-notification e-badge-overlap\">14</span>\n </button>\n <button id=\"task\" class=\"e-btn\">Tasks\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-success e-badge-notification e-badge-overlap\">48</span>\n </button>\n <button id=\"notify\" class=\"e-btn\">Notifications\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-primary e-badge-notification e-badge-overlap\">99</span>\n </button>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n @media only screen and (max-width: 400px) {\n .sample_container.badge-default .e-btn-group {\n left: calc(50% - 111px);\n }\n .sample_container.badge-default #task {\n display: none;\n }\n }\n\n .sample_container.badge-default {\n max-width: 328px;\n margin: auto;\n margin-top: 130px;\n }\n\n .badge-default .e-btn {\n position: relative;\n }\n\n .badge-default .e-bigger .e-btn {\n padding: 3px 10px;\n }\n\n /* Group Button Customization */\n\n .badge-default .e-btn-group {\n width: auto;\n position: relative;\n left: calc(50% - 164px);\n }\n\n .e-btn-group.e-custom-button {\n box-shadow: none;\n }\n\n .highcontrast .e-btn-group.e-custom-button .e-btn:focus {\n outline: 0px;\n color: white;\n }\n\n .fabric .e-btn-group.e-custom-button .e-btn,\n\t.material .e-btn-group.e-custom-button .e-btn,\n\t.bootstrap .e-btn-group.e-custom-button .e-btn {\n background: #F6F7F9;\n box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n text-transform: initial;\n }\n\n #update.e-btn {\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n border-right: 1px dotted #aaa;\n width: 100px;\n }\n\n #task.e-btn {\n border-right: 1px dotted #aaa;\n width: 100px;\n }\n\n #notify.e-btn {\n padding-left: 24px;\n padding-right: 24px;\n border-bottom-right-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n .material3 #update.e-btn {\n\tborder-bottom-right-radius: 0px;\n border-top-right-radius: 0px;\n }\n\n .material3 #task.e-btn {\n\tborder-radius: 0;\n }\n\n .material3 #notify.e-btn {\n border-bottom-left-radius: 0px;\n \tborder-top-left-radius: 0px;\n }\n\n .material3 .e-btn-group.e-custom-button {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n }\n\n .default .e-badge.e-badge-overlap {\n transform: translateX(-110%);\n z-index: 100;\n }\n</style>\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS Basic Layout Badge\n */\n\n //\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -79,6 +79,19 @@
|
|||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.fluent2 .list_svg,
|
||||
.fluent2-dark .list_svg,
|
||||
.fluent2-highcontrast .list_svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.fluent2 .listWrapper .e-badge,
|
||||
.fluent2-dark .listWrapper .e-badge,
|
||||
.fluent2-highcontrast .listWrapper .e-badge {
|
||||
margin-top: 13px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.e-rtl .list_svg {
|
||||
margin-left: 16px;
|
||||
margin-right: 0;
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/badge/toolbar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container badge-toolbar\">\n <div id=\"toolbar\">\n <div>\n <div class=\"header\">\n Notification\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"message icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-primary e-badge-notification e-badge-overlap\">35</span>\n </div>\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"user-profile icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-success e-badge-notification e-badge-overlap\">28</span>\n </div>\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"love icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-info e-badge-notification e-badge-overlap\">98</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container.badge-toolbar {\n display: table;\n margin: auto;\n margin-top: 117px;\n }\n\n body.bootstrap5 .badge-toolbar .e-toolbar,\n body.material .badge-toolbar .e-toolbar,\n body.tailwind .badge-toolbar .e-toolbar{\n border: 1px solid #dee2e6;\n }\n\n .tailwind-dark .sample_container.badge-toolbar,\n .bootstrap5-dark .sample_container.badge-toolbar,\n .bootstrap-dark .sample_container.badge-toolbar,\n .fabric-dark .sample_container.badge-toolbar {\n border: 1px solid #dddddd;\n }\n\n @media only screen and (max-width: 550px) {\n .sample_container.badge-toolbar #toolbar .header {\n display: none;\n }\n\n .material .sample_container.badge-toolbar .e-toolbar .e-toolbar-items:first-child>.e-toolbar-item:last-child {\n margin-right: 9px;\n }\n\n .bootstrap .sample_container.badge-toolbar .e-toolbar .e-toolbar-items:first-child>.e-toolbar-item:last-child {\n margin-right: 10px;\n }\n }\n\n .sample_container.badge-toolbar .badge-block {\n position: relative;\n display: inline-block;\n margin: 20px 13px 10px 10px;\n }\n\n .icons {\n width: 28px;\n height: 28px;\n display: inline-block;\n }\n\n #toolbar .header {\n font-size: 18px;\n margin-right: 56px;\n }\n\n /* SVG Icons */\n\n .love {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.532.81c3.029 0 5.932 1.668 7.468 4.521 2.139-3.97 6.922-5.644 11.008-3.726 4.289 2.012 6.177 7.212 4.218 11.617C29.273 17.614 16 31.19 16 31.19 15.916 31.137 2.727 17.614.774 13.222-1.186 8.817.703 3.617 4.993 1.605A8.299 8.299 0 0 1 8.532.81z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .message {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M0 5.126h.024l7.547 7.393 8.405 8.252 8.405-8.252 7.547-7.393H32v22.6H0zm1.902-.852h28.195l-7.048 5.929L16 16.132l-7.049-5.929z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .user-profile {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.772 18.363a11.978 11.978 0 0 0 7.229 2.416c2.71 0 5.214-.899 7.229-2.416 4.71.593 8.354 4.61 8.354 9.481V32H.416v-4.156c0-4.871 3.646-8.888 8.356-9.481zM16.001 0a8.727 8.727 0 1 1-.003 17.455A8.727 8.727 0 0 1 16.001 0z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS tab intergration\n */\n\n var toolbarObj = new ej.navigations.Toolbar();\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar');\n"}
|
||||
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/badge/toolbar/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"sample_container badge-toolbar\">\n <div id=\"toolbar\">\n <div>\n <div class=\"header\">\n Notification\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"message icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-primary e-badge-notification e-badge-overlap\">35</span>\n </div>\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"user-profile icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-success e-badge-notification e-badge-overlap\">28</span>\n </div>\n </div>\n <div>\n <div class=\"badge-block\">\n <div class=\"love icons\"></div>\n <!-- Notification Badge -->\n <span class=\"e-badge e-badge-info e-badge-notification e-badge-overlap\">98</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container.badge-toolbar {\n display: table;\n margin: auto;\n margin-top: 117px;\n }\n\n body.bootstrap5 .badge-toolbar .e-toolbar,\n body.material .badge-toolbar .e-toolbar,\n body.tailwind .badge-toolbar .e-toolbar{\n border: 1px solid #dee2e6;\n }\n\n .tailwind-dark .sample_container.badge-toolbar,\n .bootstrap5-dark .sample_container.badge-toolbar,\n .bootstrap-dark .sample_container.badge-toolbar,\n .fabric-dark .sample_container.badge-toolbar {\n border: 1px solid #dddddd;\n }\n\n @media only screen and (max-width: 550px) {\n .sample_container.badge-toolbar #toolbar .header {\n display: none;\n }\n\n .material .sample_container.badge-toolbar .e-toolbar .e-toolbar-items:first-child>.e-toolbar-item:last-child {\n margin-right: 9px;\n }\n\n .bootstrap .sample_container.badge-toolbar .e-toolbar .e-toolbar-items:first-child>.e-toolbar-item:last-child {\n margin-right: 10px;\n }\n }\n\n .sample_container.badge-toolbar .badge-block {\n position: relative;\n display: inline-block;\n margin: 20px 13px 10px 10px;\n }\n\n .icons {\n width: 28px;\n height: 28px;\n display: inline-block;\n }\n\n #toolbar .header {\n font-size: 18px;\n margin-right: 56px;\n }\n\n /* SVG Icons */\n\n .love {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.532.81c3.029 0 5.932 1.668 7.468 4.521 2.139-3.97 6.922-5.644 11.008-3.726 4.289 2.012 6.177 7.212 4.218 11.617C29.273 17.614 16 31.19 16 31.19 15.916 31.137 2.727 17.614.774 13.222-1.186 8.817.703 3.617 4.993 1.605A8.299 8.299 0 0 1 8.532.81z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .message {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M0 5.126h.024l7.547 7.393 8.405 8.252 8.405-8.252 7.547-7.393H32v22.6H0zm1.902-.852h28.195l-7.048 5.929L16 16.132l-7.049-5.929z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n\n .user-profile {\n background: transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.772 18.363a11.978 11.978 0 0 0 7.229 2.416c2.71 0 5.214-.899 7.229-2.416 4.71.593 8.354 4.61 8.354 9.481V32H.416v-4.156c0-4.871 3.646-8.888 8.356-9.481zM16.001 0a8.727 8.727 0 1 1-.003 17.455A8.727 8.727 0 0 1 16.001 0z'/%3E%3C/svg%3E\") no-repeat 100% 100%;\n }\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for CSS tab intergration\n */\n\n var toolbarObj = new ej.navigations.Toolbar();\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -98,6 +98,12 @@
|
|||
{
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.fluent2 .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret,
|
||||
.fluent2-dark .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret,
|
||||
.fluent2-highcontrast .e-custom-breadcrumb .e-menu-wrapper ul .e-menu-item .e-caret {
|
||||
right: 3px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Bind to Location</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"bind-to-location\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-10 col-md-12\">\n <h5>URL Binding and Navigation</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"url-binding\"></nav>\n </div>\n </div>\n </div>\n</div> \n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n new ej.navigations.Breadcrumb({ \n enableNavigation: false\n }, '#bind-to-location');\n\n var url = 'https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/breadcrumb/bind-to-location.html',\n themeName = url.split('/')[6];\n\n new ej.navigations.Breadcrumb({\n url: url,\n beforeItemRender: function(args) {\n if (args.item.text == 'demos') {\n args.item.url = args.item.url + '/#/' + themeName;\n }\n else if (args.item.text == 'breadcrumb') {\n args.item.url = 'https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/breadcrumb/default.html';\n }\n else if (args.item.text == '#' || args.item.text == themeName || args.item.text == 'javascript') {\n args.cancel = true;\n }\n }\n }, '#url-binding');\n\n // To refresh Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName(\"e-breadcrumb\");\n for (var i = 0; i < breadcrumbs.length; i++) {\n breadcrumb = breadcrumbs[i];\n breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n }\n };\n\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Bind to Location</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"bind-to-location\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-10 col-md-12\">\n <h5>URL Binding and Navigation</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"url-binding\"></nav>\n </div>\n </div>\n </div>\n</div> \n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n new ej.navigations.Breadcrumb({ \n enableNavigation: false\n }, '#bind-to-location');\n\n var url = 'https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/breadcrumb/bind-to-location.html',\n themeName = url.split('/')[6];\n\n new ej.navigations.Breadcrumb({\n url: url,\n beforeItemRender: function(args) {\n if (args.item.text == 'demos') {\n args.item.url = args.item.url + '/#/' + themeName;\n }\n else if (args.item.text == 'breadcrumb') {\n args.item.url = 'https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/breadcrumb/default.html';\n }\n else if (args.item.text == '#' || args.item.text == themeName || args.item.text == 'javascript') {\n args.cancel = true;\n }\n }\n }, '#url-binding');\n\n // To refresh Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName(\"e-breadcrumb\");\n for (var i = 0; i < breadcrumbs.length; i++) {\n breadcrumb = breadcrumbs[i];\n breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n }\n };\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -18,7 +18,7 @@
|
|||
<table id="property" title="Event Trace">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="eventarea" style="height: 245px;overflow: auto">
|
||||
<div class="eventarea" tabindex='0' style="height: 245px;overflow: auto">
|
||||
<span class="EventLog" id="EventLog" style="word-break: normal;"></span>
|
||||
</div>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Simple Breadcrumb</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"keyboard-navigation\"></nav>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n new ej.navigations.Breadcrumb({\n enableNavigation: false\n }, '#keyboard-navigation');\n\n // To refresh Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb = document.getElementById('keyboard-navigation');\n var breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n };\n\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Simple Breadcrumb</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"keyboard-navigation\"></nav>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n new ej.navigations.Breadcrumb({\n enableNavigation: false\n }, '#keyboard-navigation');\n\n // To refresh Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb = document.getElementById('keyboard-navigation');\n var breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n };\n\n"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Overflow Mode - Hidden</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"default-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Menu</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"menu-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Collapsed</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"collapsed-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Wrap</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav style=\"width:255px;\" id=\"wrap-mode\"></nav>\n </div>\n </div> \n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Scroll</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav style=\"width:300px;\" id=\"scroll-mode\"></nav>\n </div>\n </div>\n </div>\n</div>\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n var overflowItems = [\n {\n text: \"Home\",\n url: \"./\"\n },\n {\n text: \"Breadcrumb\",\n url: \"./breadcrumb\"\n },\n {\n text: \"Default\",\n url: \"./breadcrumb/default\"\n },\n {\n text: \"Icons\",\n url: \"./breadcrumb/icons\"\n },\n {\n text: \"Navigation\",\n url: \"./breadcrumb/navigation\"\n },\n {\n text: \"Overflow\",\n url: \"./breadcrumb/overflow\"\n }\n ];\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Hidden',\n enableNavigation: false\n }, '#default-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Menu',\n enableNavigation: false\n }, '#menu-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Collapsed',\n enableNavigation: false\n }, '#collapsed-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n overflowMode: 'Wrap',\n enableNavigation: false\n }, '#wrap-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n overflowMode: 'Scroll',\n enableNavigation: false\n }, '#scroll-mode');\n\n // To refresh all Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName(\"e-breadcrumb\");\n for (var j = 0; j < breadcrumbs.length; j++) {\n breadcrumb = breadcrumbs[j];\n breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n }\n };\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\">\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5 style=\"display: inline-block\">Overflow Mode - Hidden</h5>\n <button id=\"reset\" class=\"reset-btn\">Reset State</button>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"default-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Menu</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"menu-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Collapsed</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav id=\"collapsed-mode\"></nav>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Wrap</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav style=\"width:255px;\" id=\"wrap-mode\" aria-hidden=\"true\"></nav>\n </div>\n </div> \n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <h5>Overflow Mode - Scroll</h5>\n </div>\n </div>\n <div class=\"row material2\">\n <div class=\"col-xs-12 col-sm-12 col-lg-12 col-md-12\">\n <nav style=\"width:300px;\" id=\"scroll-mode\"></nav>\n </div>\n </div>\n </div>\n</div>\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n var overflowItems = [\n {\n text: \"Home\",\n url: \"./\"\n },\n {\n text: \"Breadcrumb\",\n url: \"./breadcrumb\"\n },\n {\n text: \"Default\",\n url: \"./breadcrumb/default\"\n },\n {\n text: \"Icons\",\n url: \"./breadcrumb/icons\"\n },\n {\n text: \"Navigation\",\n url: \"./breadcrumb/navigation\"\n },\n {\n text: \"Overflow\",\n url: \"./breadcrumb/overflow\"\n }\n ];\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Hidden',\n enableNavigation: false\n }, '#default-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Menu',\n enableNavigation: false\n }, '#menu-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n maxItems: 3,\n overflowMode: 'Collapsed',\n enableNavigation: false\n }, '#collapsed-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n overflowMode: 'Wrap',\n enableNavigation: false\n }, '#wrap-mode');\n\n new ej.navigations.Breadcrumb({\n items: overflowItems,\n overflowMode: 'Scroll',\n enableNavigation: false\n }, '#scroll-mode');\n\n // To refresh all Breadcrumb control state when reset button clicked\n new ej.buttons.Button({ cssClass: 'e-small' }, '#reset').element.onclick = function() {\n var breadcrumb, breadcrumbInst, breadcrumbs = document.querySelector('.content-wrapper').getElementsByClassName(\"e-breadcrumb\");\n for (var j = 0; j < breadcrumbs.length; j++) {\n breadcrumb = breadcrumbs[j];\n breadcrumbInst = ej.base.getComponent(breadcrumb, 'breadcrumb');\n breadcrumbInst.activeItem = breadcrumbInst.items[breadcrumbInst.items.length - 1].text;\n }\n };\n"}
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
<div class="row material2">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
|
||||
<nav style="width:255px;" id="wrap-mode"></nav>
|
||||
<nav style="width:255px;" id="wrap-mode" aria-hidden="true"></nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row material2">
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -65,7 +65,7 @@
|
|||
</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">
|
||||
<div class="e-chip" tabindex="0" aria-label="Chip" >
|
||||
<span class="e-chip-text">${text}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -553,4 +553,4 @@
|
|||
.tailwind .e-custom-breadcrumb .e-custom-icon {
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample illustrates a customization of feature bar and comparative bar type in terms of color and width
|
||||
This sample illustrates a customization of feature bar and comparative bar type in terms of color and width.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -8,13 +8,13 @@
|
|||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can observe how multiple datasets are compared in a bullet chart. Here, each value bar is assigned a different color from the <code><a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/#datasource">dataSource</a></code>.
|
||||
In this example, you can observe how multiple datasets are compared in a bullet chart. Here, each value bar is assigned a different color from the <code><a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/#datasource" aria-label="Navigate to the dataSource property reference for JavaScript Bullet Chart control">dataSource</a></code>.
|
||||
</p>
|
||||
<p>
|
||||
<code>Tooltips</code> are enabled in this example, to see them in action, hover over a feature bar or comparative bar on the bullet chart.
|
||||
</p>
|
||||
<p>
|
||||
More information on the data binding for the bullet chart can be found in this <a target="_blank" href="https://ej2.syncfusion.com/documentation/bullet-chart/data-binding">documentation section</a>.
|
||||
More information on the data binding for the bullet chart can be found in this <a target="_blank" href="https://ej2.syncfusion.com/documentation/bullet-chart/data-binding" aria-label="Navigate to the documentation for Data Binding in JavaScript Bullet Chart control">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,8 @@ this.default = function () {
|
|||
var material3Colors = ["#2196F5", "#4BE0BC", "#FD7400", "#963C70", "#F7523F", "#FFB400", "#00AEE0", "#6355C7"];
|
||||
var material3DarkColors = ["#B93CE4", "#B3F32F", "#FF9E45", "#38FFE7", "#17EA58", "#FFF500", "#FA4EAB", "#4EAAFF"];
|
||||
var defaultColors = ["#7f84e8", "#dd8abd", "#70ad47", "#f8b883", "#e56590", "#357cd2", "#404041", "#00bdae"];
|
||||
var fluent2Colors = ["#6200EE", "#09AF74", "#0076E5", "#CB3587", "#E7910F", "#0364DE", "#66CD15", "#F3A93C", "#107C10", "#C19C00"];
|
||||
var fluent2DarkColors = ["#9BB449", "#2A72D5", "#43B786", "#3F579A", "#584EC6", "#E85F9C", "#6E7A89", "#EA6266", "#0B6A0B", "#C19C00"];
|
||||
var bullet = new ej.charts.BulletChart({
|
||||
width: ej.base.Browser.isDevice ? '100%' : '80%',
|
||||
tooltip: { enable: true },
|
||||
|
|
@ -138,6 +140,12 @@ this.default = function () {
|
|||
case "Material3Dark":
|
||||
color = material3DarkColors;
|
||||
break;
|
||||
case "Fluent2":
|
||||
color = fluent2Colors;
|
||||
break;
|
||||
case "Fluent2Dark":
|
||||
color = fluent2DarkColors;
|
||||
break;
|
||||
default:
|
||||
color = defaultColors;
|
||||
break;
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -4,9 +4,9 @@
|
|||
<div class="row">
|
||||
<p class="h5">Default</p>
|
||||
<div id="icon" class="e-btn-group">
|
||||
<button id="watch"></button>
|
||||
<button id="star"></button>
|
||||
<button id="download"></button>
|
||||
<button id="watch" aria-label="watch"></button>
|
||||
<button id="star" aria-label="star"></button>
|
||||
<button id="download" aria-label="download"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -40,7 +40,7 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
|
||||
<div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
|
||||
<button id="roundbtn"></button>
|
||||
<button id="roundbtn" aria-label="button"></button>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
|
||||
<button id="togglebtn">Play</button>
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -46,7 +46,7 @@
|
|||
<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">
|
||||
<div tabindex="0" class="e-card e-card-horizontal" id="horizontal_product1">
|
||||
<img src='./src/card/images/Camera.png' style="height:214px" alt="Camera"/>
|
||||
<div class='e-card-stacked'>
|
||||
<div class="e-card-header">
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -12,13 +12,13 @@
|
|||
upon commerce and etc...
|
||||
</div>
|
||||
<div class="e-card-actions">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button" >
|
||||
<span class="e-fav-icon cb-icons "></span>
|
||||
</button>
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-like-icon cb-icons "></span>
|
||||
</button>
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-share-icon cb-icons "></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -32,13 +32,13 @@
|
|||
as part of the Asian continent.
|
||||
</div>
|
||||
<div class="e-card-actions">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-fav-icon cb-icons "></span>
|
||||
</button>
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-like-icon cb-icons "></span>
|
||||
</button>
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-share-icon cb-icons "></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -52,13 +52,13 @@
|
|||
and Maurice Koechlin.
|
||||
</div>
|
||||
<div class="e-card-actions">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-fav-icon cb-icons "></span>
|
||||
</button>
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-like-icon cb-icons "></span>
|
||||
</button>
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-share-icon cb-icons "></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -72,13 +72,13 @@
|
|||
live in Sydney which makes it the biggest city in Oceania.
|
||||
</div>
|
||||
<div class="e-card-actions">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-fav-icon cb-icons "></span>
|
||||
</button>
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-like-icon cb-icons "></span>
|
||||
</button>
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;">
|
||||
<button style="padding:0px;border:0px;height: 24px;width: 24px;" aria-label="button">
|
||||
<span class="e-share-icon cb-icons "></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -115,7 +115,7 @@
|
|||
</figure>
|
||||
</script>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the properties available in the <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript(ES5) Carousel</a> component.</p>
|
||||
<p>This sample demonstrates the properties available in the <a aria-label="Javascript carousel" href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript(ES5) Carousel</a> component.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>In this demo, you can manually change the properties of the <code>JavaScript(ES5) Carousel</code> component like
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -2,7 +2,7 @@
|
|||
<div class="card">
|
||||
<img src=${ImgPath} class="card-img-top" alt=${Title} style="height:210px;width:100%;" />
|
||||
<div class="card-body" style="padding:1rem;">
|
||||
<h5 class="card-title">${Title}</h5>
|
||||
<h1 class="card-title">${Title}</h1>
|
||||
<p class="card-text">${Content}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the basic rendering of the <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript(ES5) Carousel</a> component by
|
||||
<p>This sample demonstrates the basic rendering of the <a aria-label="Javascript carousel" href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript(ES5) Carousel</a> component by
|
||||
binding <code>dataSource</code> property.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/25.1.35/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section default-carousel-section\">\n <div class=\"col-lg-12 content-wrapper\">\n <div class=\"carousel-sample\">\n <div id=\"carousel\"></div>\n </div>\n </div>\n</div>\n<style>\n .default-carousel-section .carousel-sample {\n margin: 0 auto 2em;\n max-width: 500px;\n height: 300px;\n }\n\n .default-carousel .e-carousel-items .e-carousel-item .img-container {\n height: 100%;\n }\n\n .default-carousel .e-carousel-items .e-carousel-item .img-caption {\n bottom: 5em;\n color: #fff;\n font-size: 12pt;\n height: 2em;\n position: relative;\n padding: 0.3em 1em;\n text-align: center;\n width: 100%;\n }\n</style>\n\n</div></body></html>","index.js":"{{ripple}}\n var carouselObj = new ej.navigations.Carousel({\n cssClass: 'default-carousel',\n items: [\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/bridge.jpg\" alt=\"bridge\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Golden Gate Bridge, San Francisco</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/trees.jpg\" alt=\"spring_trees\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Spring Flower Trees</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/waterfall.jpg\" alt=\"waterfall\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Oddadalen Waterfalls, Norway</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/sea.jpg\" alt=\"sea\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Anse Source d`Argent, Seychelles</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/rocks.jpeg\" alt=\"rocks\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Stonehenge, England</figcaption></figure>' }\n ]\n });\n carouselObj.appendTo('#carousel');\n\n"}
|
||||
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/24.1.41/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n .control-section{\n margin-top:100px;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section default-carousel-section\">\n <div class=\"col-lg-12 content-wrapper\">\n <div class=\"carousel-sample\">\n <div id=\"carousel\"></div>\n </div>\n </div>\n</div>\n<style>\n .default-carousel-section .carousel-sample {\n margin: 0 auto 2em;\n max-width: 500px;\n height: 300px;\n }\n\n .default-carousel .e-carousel-items .e-carousel-item .img-container {\n height: 100%;\n }\n\n .default-carousel .e-carousel-items .e-carousel-item .img-caption {\n bottom: 5em;\n color: #fff;\n font-size: 12pt;\n height: 2em;\n position: relative;\n padding: 0.3em 1em;\n text-align: center;\n width: 100%;\n }\n</style>\n\n</div></body></html>","index.js":"{{ripple}}\n var carouselObj = new ej.navigations.Carousel({\n cssClass: 'default-carousel',\n items: [\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/bridge.jpg\" alt=\"bridge\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Golden Gate Bridge, San Francisco</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/trees.jpg\" alt=\"spring_trees\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Spring Flower Trees</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/waterfall.jpg\" alt=\"waterfall\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Oddadalen Waterfalls, Norway</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/sea.jpg\" alt=\"sea\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Anse Source d`Argent, Seychelles</figcaption></figure>' },\n { template: '<figure class=\"img-container\"><img src=\"//ej2.syncfusion.com/javascript/demos/src/carousel/images/rocks.jpeg\" alt=\"rocks\" style=\"height:100%;width:100%;\" /><figcaption class=\"img-caption\">Stonehenge, England</figcaption></figure>' }\n ]\n });\n carouselObj.appendTo('#carousel');\n\n"}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
</style>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the basic rendering of the <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript(ES5) Carousel</a> component with
|
||||
<p>This sample demonstrates the basic rendering of the <a aria-label="Javascript carousel" href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript(ES5) Carousel</a> component with
|
||||
</code>items</code>. </p>
|
||||
</div>
|
||||
<div id="description">
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -2,21 +2,21 @@
|
|||
<div class="col-lg-12 content-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 carousel-sample">
|
||||
<h4>Default Indicator</h4>
|
||||
<h1>Default Indicator</h1>
|
||||
<div id="default-carousel"></div>
|
||||
</div>
|
||||
<div class="col-lg-6 carousel-sample">
|
||||
<h4>Dynamic Indicator</h4>
|
||||
<h1>Dynamic Indicator</h1>
|
||||
<div id="dynamic-carousel"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 carousel-sample">
|
||||
<h4>Fraction Indicator</h4>
|
||||
<h1>Fraction Indicator</h1>
|
||||
<div id="fraction-carousel"></div>
|
||||
</div>
|
||||
<div class="col-lg-6 carousel-sample">
|
||||
<h4>Progress Indicator</h4>
|
||||
<h1>Progress Indicator</h1>
|
||||
<div id="progress-carousel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -28,6 +28,10 @@
|
|||
height: 200px;
|
||||
}
|
||||
|
||||
.indicator-type-section .carousel-sample h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.indicator-type .e-carousel-items .e-carousel-item .img-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -79,7 +83,7 @@
|
|||
</style>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the types of indicators in the <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript Carousel</a> component.</p>
|
||||
<p>This sample demonstrates the types of indicators in the <a aria-label="Javascript carousel" href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript Carousel</a> component.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>In this demo, the available types of indicators of JavaScript Carousel are showcased. They are <code>default</code>, <code>dynamic</code>, <code>progress</code> and <code>fraction</code>, and can be set using the <strong>indicatorsType</strong> property. </p>
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче