Github source updated for Vol2
This commit is contained in:
Sridurgha
Родитель
95312c1049
Коммит
4a386ff949
|
|
@ -53,7 +53,7 @@
|
|||
<div id="controlTree" class='e-view'></div>
|
||||
<div id="controlSamples">
|
||||
<div id="sb-left-back" class="back" role="button" tabindex="0">
|
||||
<div class="e-icons back-icon"></div>
|
||||
<div class="sb-icons sb-icon-Back"></div>
|
||||
<div class='control-name'>All Controls</div>
|
||||
</div>
|
||||
<div id="controlList" class='e-view sb-control-list-top'></div>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class='sb-left-footer'>
|
||||
<div class="sb-mobile-header-buttons">
|
||||
<a href='https://www.syncfusion.com/products/javascript' target="_blank">
|
||||
<a href='https://www.syncfusion.com/javascript-ui-controls' target="_blank">
|
||||
<div class="sb-mobile-header-about">
|
||||
About</div>
|
||||
</a>
|
||||
|
|
@ -177,6 +177,10 @@
|
|||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap</span>
|
||||
</li>
|
||||
<li class="e-list" id="bootstrap4" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap v4</span>
|
||||
</li>
|
||||
<li class="e-list" id="highcontrast">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">High Contrast</span>
|
||||
|
|
@ -199,6 +203,7 @@
|
|||
<option value="material">Material</option>
|
||||
<option value="fabric">Fabric</option>
|
||||
<option value="bootstrap">Bootstrap</option>
|
||||
<option value="bootstrap4">Bootstrap v4</option>
|
||||
<option value="highcontrast">High Contrast</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
|
|||
61
package.json
61
package.json
|
|
@ -1,39 +1,40 @@
|
|||
{
|
||||
"name": "@syncfusion/ej2-samples",
|
||||
"version": "16.4.52",
|
||||
"version": "*",
|
||||
"description": "Samples for Syncfusion Essential JS 2",
|
||||
"author": "Syncfusion Inc.",
|
||||
"license": "SEE LICENSE IN license",
|
||||
"dependencies": {
|
||||
"@syncfusion/ej2": "16.4.52",
|
||||
"@syncfusion/ej2-base": "16.4.52",
|
||||
"@syncfusion/ej2-buttons": "16.4.52",
|
||||
"@syncfusion/ej2-calendars": "16.4.52",
|
||||
"@syncfusion/ej2-charts": "16.4.52",
|
||||
"@syncfusion/ej2-circulargauge": "16.4.52",
|
||||
"@syncfusion/ej2-compression": "16.4.52",
|
||||
"@syncfusion/ej2-data": "16.4.52",
|
||||
"@syncfusion/ej2-diagrams": "16.4.52",
|
||||
"@syncfusion/ej2-documenteditor": "16.4.52",
|
||||
"@syncfusion/ej2-dropdowns": "16.4.52",
|
||||
"@syncfusion/ej2-excel-export": "16.4.52",
|
||||
"@syncfusion/ej2-file-utils": "16.4.52",
|
||||
"@syncfusion/ej2-grids": "16.4.52",
|
||||
"@syncfusion/ej2-heatmap": "16.4.52",
|
||||
"@syncfusion/ej2-inplace-editor": "16.4.52",
|
||||
"@syncfusion/ej2-inputs": "16.4.52",
|
||||
"@syncfusion/ej2-lineargauge": "16.4.52",
|
||||
"@syncfusion/ej2-lists": "16.4.52",
|
||||
"@syncfusion/ej2-maps": "16.4.52",
|
||||
"@syncfusion/ej2-navigations": "16.4.52",
|
||||
"@syncfusion/ej2-pdf-export": "16.4.52",
|
||||
"@syncfusion/ej2-popups": "16.4.52",
|
||||
"@syncfusion/ej2-querybuilder": "16.4.52",
|
||||
"@syncfusion/ej2-richtexteditor": "^16.4.52",
|
||||
"@syncfusion/ej2-schedule": "16.4.52",
|
||||
"@syncfusion/ej2-splitbuttons": "16.4.52",
|
||||
"@syncfusion/ej2-treegrid": "16.4.52",
|
||||
"@syncfusion/ej2-treemap": "16.4.52",
|
||||
"@syncfusion/ej2": "*",
|
||||
"@syncfusion/ej2-base": "*",
|
||||
"@syncfusion/ej2-barcode-generator": "*",
|
||||
"@syncfusion/ej2-buttons": "*",
|
||||
"@syncfusion/ej2-calendars": "*",
|
||||
"@syncfusion/ej2-charts": "*",
|
||||
"@syncfusion/ej2-circulargauge": "*",
|
||||
"@syncfusion/ej2-compression": "*",
|
||||
"@syncfusion/ej2-data": "*",
|
||||
"@syncfusion/ej2-diagrams": "*",
|
||||
"@syncfusion/ej2-documenteditor": "*",
|
||||
"@syncfusion/ej2-dropdowns": "*",
|
||||
"@syncfusion/ej2-excel-export": "*",
|
||||
"@syncfusion/ej2-file-utils": "*",
|
||||
"@syncfusion/ej2-grids": "*",
|
||||
"@syncfusion/ej2-heatmap": "*",
|
||||
"@syncfusion/ej2-inplace-editor": "*",
|
||||
"@syncfusion/ej2-inputs": "*",
|
||||
"@syncfusion/ej2-lineargauge": "*",
|
||||
"@syncfusion/ej2-lists": "*",
|
||||
"@syncfusion/ej2-maps": "*",
|
||||
"@syncfusion/ej2-navigations": "*",
|
||||
"@syncfusion/ej2-pdf-export": "*",
|
||||
"@syncfusion/ej2-popups": "*",
|
||||
"@syncfusion/ej2-querybuilder": "*",
|
||||
"@syncfusion/ej2-richtexteditor": "^*",
|
||||
"@syncfusion/ej2-schedule": "*",
|
||||
"@syncfusion/ej2-splitbuttons": "*",
|
||||
"@syncfusion/ej2-treegrid": "*",
|
||||
"@syncfusion/ej2-treemap": "*",
|
||||
"@types/codemirror": "0.0.56",
|
||||
"@types/crossroads": "0.0.28",
|
||||
"@types/es6-promise": "0.0.28",
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -144,6 +144,7 @@
|
|||
margin: 0 10% 0 10%;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
/* custom code start*/
|
||||
#source_link {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
|
|
@ -158,4 +159,5 @@
|
|||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
/* custom code end*/
|
||||
</style>
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"{{ripple}}\n/**\n * Accordion Default Sample\n */\nimport { Accordion } from '@syncfusion/ej2-navigations';\n\n\n \n // tslint:disable:max-line-length\n let acrdnObj: Accordion = new Accordion({ //Initialize Accordion component\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 // tslint:enable:max-line-length\n acrdnObj.appendTo('#Accordion_default'); //Render initialized Accordion component\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<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<style>\n .accordion-control-section {\n margin: 0 10% 0 10%;\n }\n\n @media screen and (max-width: 768px) {\n .accordion-control-section {\n margin: 0;\n }\n }\n</style>\n</div></body></html>"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<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\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Accordion Default Sample\n */\nimport { Accordion } from '@syncfusion/ej2-navigations';\n\n\n \n // tslint:disable:max-line-length\n let acrdnObj: Accordion = new Accordion({ //Initialize Accordion component\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 // tslint:enable:max-line-length\n acrdnObj.appendTo('#Accordion_default'); //Render initialized Accordion component\n"}
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
documentation</a> section.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.accordion-control-section {
|
||||
margin: 0 10% 0 10%;
|
||||
|
|
@ -30,3 +31,4 @@ documentation</a> section.
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -46,6 +46,7 @@
|
|||
documentation</a> section.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'acrdn-icons';
|
||||
|
|
@ -57,6 +58,23 @@
|
|||
.e-acrdn-icons {
|
||||
font-family: 'acrdn-icons';
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-acrdn-icons {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.e-bigger.bootstrap4 .e-acrdn-icons {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.e-bigger.bootstrap4 .e-acrdn-icons:not(.e-icons) {
|
||||
padding: 0 12px 0 0 !important;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-acrdn-icons:not(.e-icons) {
|
||||
padding: 0 8px 0 0 !important;
|
||||
}
|
||||
|
||||
.cycle_BMX::before {
|
||||
|
|
@ -170,6 +188,14 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-bigger .e-acrdn-icons:not(.e-icons) {
|
||||
padding: 0 12px 0 0;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-acrdn-icons:not(.e-icons) {
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
|
||||
#athletics li,
|
||||
#racing_games li,
|
||||
#water_games li,
|
||||
|
|
@ -189,3 +215,4 @@
|
|||
}
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -21,10 +21,11 @@
|
|||
For more information about Fuse.js can be found in this <a href="http://fusejs.io/" target="_blank"> reference link</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.control-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -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>
|
||||
<h3> Local Data</h3>
|
||||
<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>
|
||||
<h3>Remote Data</h3>
|
||||
<input type="text" id='products' />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,9 +57,11 @@
|
|||
<a href="http://ej2.syncfusion.com/documentation/auto-complete/data-binding.html" target="_blank"> documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -19,9 +19,11 @@
|
|||
<a href="http://ej2.syncfusion.com/documentation/auto-complete/getting-started.html" target="_blank"> documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.control-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -17,9 +17,11 @@
|
|||
|
||||
<p>This sample illustrates using the international characters data.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.control-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<style>
|
||||
/* custom code start*/
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
|
|
@ -47,6 +48,11 @@
|
|||
.highcontrast .e-list-icon{
|
||||
color: #ffffff;
|
||||
}
|
||||
.bootstrap4 .e-list-icon{
|
||||
color: #495057;
|
||||
}
|
||||
/* custom code end*/
|
||||
|
||||
.e-list-icon {
|
||||
font-family: 'Socialicons' !important;
|
||||
color: rgba(0, 0, 0, .57);
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
.control-wrapper {
|
||||
margin: 0 auto;
|
||||
|
|
@ -40,3 +41,4 @@
|
|||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -4,12 +4,12 @@
|
|||
"category": "Dropdowns",
|
||||
"ftName": "autocomplete",
|
||||
"samples": [
|
||||
{ "url": "default", "name": "Default Functionalities", "description": "This demo for Syncfusion JavaScript autocomplete control shows the default rendering of the autocomplete with minimum configuration.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "value", "placeholder"] } },
|
||||
{ "url": "grouping-icon", "name": "Grouping and Icons", "description": "This demo explains the grouping based on different categories with individual header and icon support in the Syncfusion JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["fields", "placeholder"] } },
|
||||
{ "url": "data-binding", "name": "Data Binding", "description": "This demo for Syncfusion JavaScript autocomplete control shows how to bind with local data source and how to fetch data from remote data service.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"] } },
|
||||
{ "url": "template", "name": "Template", "description": "This demo for Syncfusion JavaScript autocomplete control shows how to customize the appearance of each item in the pop-up list using template option.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "headerTemplate", "itemTemplate", "placeholder", "popupHeight"] } },
|
||||
{ "url": "highlight", "name": "Highlight", "description": "This demo for Syncfusion JavaScript autocomplete control shows the built-in support to highlight the searched characters in the suggested list items.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "highlight", "placeholder"] } },
|
||||
{ "url": "custom-filtering", "name": "Custom Filtering", "description": "This demo explains the custom filtering functionalities of the Syncfusion JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "filtering", "fields", "placeholder"] } },
|
||||
{ "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This demo explains the diacritics filter functionality of the Syncfusion JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "ignoreAccent", "placeholder"] } }
|
||||
{ "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of the JavaScript 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 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 autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"] } },
|
||||
{ "url": "template", "name": "Template", "description": "This example demonstrates how to customize the appearance of each item in the JavaScript 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 autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "highlight", "placeholder"] } },
|
||||
{ "url": "custom-filtering", "name": "Custom Filtering", "description": "This example demonstrates how to achieve the custom filtering functionalities in the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "filtering", "fields", "placeholder"] } },
|
||||
{ "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This example demonstrates how to achieve the diacritics filter functionalities in the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "ignoreAccent", "placeholder"] } }
|
||||
]
|
||||
}
|
||||
|
|
@ -7,11 +7,13 @@
|
|||
</div>
|
||||
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the template functionalities of the AutoComplete. Type a character in the AutoComplete element and choose an item from the customized list</p>
|
||||
<p>This sample demonstrates the template functionalities of the AutoComplete. Type a character in the AutoComplete
|
||||
element and choose an item from the customized list</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>The AutoComplete has been provided with several options to customize each list items, group title, header and footer
|
||||
<p>The AutoComplete has been provided with several options to customize each list items, group title, header and
|
||||
footer
|
||||
elements.
|
||||
</p>
|
||||
|
||||
|
|
@ -21,11 +23,13 @@
|
|||
<li><code>HeaderTemplate</code> - To customize the header element.</li>
|
||||
</ul>
|
||||
<p> More information on the template feature configuration can be found in the
|
||||
<a href="http://ej2.syncfusion.com/documentation/auto-complete/templates.html" target="_blank"> documentation section</a>.
|
||||
<a href="http://ej2.syncfusion.com/documentation/auto-complete/templates.html" target="_blank"> documentation
|
||||
section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* custom code start*/
|
||||
.control-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 250px;
|
||||
|
|
@ -48,6 +52,10 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bootstrap4 .header {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.highcontrast .header {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
|
|
@ -64,43 +72,60 @@
|
|||
height: 30px;
|
||||
padding: 0 0 0 24px;
|
||||
}
|
||||
|
||||
.e-bigger.bootstrap .header {
|
||||
line-height: 44px;
|
||||
height: 44px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bootstrap .info,
|
||||
.e-bigger.bootstrap .info {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.bootstrap .job {
|
||||
opacity: .54;
|
||||
font-size: 14px;
|
||||
margin-top: -25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.e-bigger.bootstrap .job {
|
||||
font-size: 15px;
|
||||
margin-top: -32px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.bootstrap .ename {
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
opacity: .87;
|
||||
padding: 3px 0 20px;
|
||||
}
|
||||
.e-bigger.bootstrap .ename{
|
||||
|
||||
.e-bigger.bootstrap .ename {
|
||||
font-size: 16px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.bootstrap .empImage,
|
||||
.e-bigger.bootstrap .empImage {
|
||||
margin: 0px 10px 0 20px;
|
||||
}
|
||||
|
||||
.bootstrap4 #employees_popup.e-popup .empImage {
|
||||
margin: 0px 16px;
|
||||
}
|
||||
|
||||
.bootstrap4 #employees_popup.e-popup .job {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* custom code end*/
|
||||
|
||||
.info {
|
||||
margin-left:17px;
|
||||
margin-left: 17px;
|
||||
}
|
||||
|
||||
.ename {
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -194,4 +194,9 @@
|
|||
padding: 10px 11px 10px 0px;
|
||||
color: rgba(0, 0, 0, 0.75)
|
||||
}
|
||||
|
||||
.bootstrap4 .e-avatar-showcase.e-card {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container\">\n <!-- Card Component -->\n <div class=\"e-card e-custom-card\">\n <div class=\"e-card-header\">\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n <img src=\"//npmci.syncfusion.com/development/demos/src/avatar/images/pic02.png\" alt=\"profile_pic\">\n </div>\n  \n </div>\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption center\">\n <div class=\"e-card-header-title name\">Laura Callahan</div>\n <div class=\"e-card-sub-title\">Sales Coordinator</div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.</p>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container {\n max-width: 300px;\n margin: auto;\n min-height: 400px;\n }\n\n /* Card Customizations */\n\n .e-custom-card {\n position: relative;\n margin-top: 80px;\n overflow: visible;\n border-radius: 15px;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n transition: 0.2s;\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card.e-card:hover {\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card :nth-child(2) .e-card-header-title.name {\n margin-top: 20px;\n }\n\n .sample_container p.avatar-content {\n line-height: 20px;\n font-family: inherit;\n }\n\n .e-custom-card .e-card-header {\n text-align: center;\n }\n\n .e-custom-card .e-avatar {\n font-size: 40px;\n position: absolute;\n top: calc(0% - 1.5em);\n left: calc(50% - 1.5em);\n box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n }\n\n .e-card.e-custom-card :nth-child(3) {\n padding: 12px 0px 20px 0px;\n height: 130px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n font-size: 24px;\n font-weight: 500;\n line-height: normal;\n color: rgba(83, 101, 132, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: rgba(86, 90, 97, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-content {\n overflow: visible;\n width: auto;\n margin: -5px 20px 0 20px;\n word-spacing: 1px;\n }\n\n .avatar-content {\n color: rgba(250, 200, 130, 0.6);\n margin: 0 auto;\n text-align: center;\n color: rgb(94, 94, 94);\n border: none;\n padding: 0;\n font-size: 14px;\n }\n\n .avatar-content {\n margin-bottom: 0;\n }\n\n .sample_container .name {\n margin-top: 10px;\n }\n\n .highcontrast .e-custom-card.e-card .avatar-content {\n color: rgba(255, 255, 255, 0.84);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n color: rgba(255, 255, 255, 0.45);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n color: rgba(255, 255, 255, 0.84);\n }\n</style>\n</div></body></html>"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"sample_container\">\n <!-- Card Component -->\n <div class=\"e-card e-custom-card\">\n <div class=\"e-card-header\">\n <!-- xLarge Circle Avatar-->\n <div class=\"e-avatar e-avatar-circle e-avatar-xlarge\">\n <img src=\"//ej2.syncfusion.com/demos/src/avatar/images/pic02.png\" alt=\"profile_pic\">\n </div>\n  \n </div>\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption center\">\n <div class=\"e-card-header-title name\">Laura Callahan</div>\n <div class=\"e-card-sub-title\">Sales Coordinator</div>\n </div>\n </div>\n <div class=\"e-card-content\">\n <p class=\"avatar-content\"> Laura received a BA in psychology from the University of Washington. She has also completed a course\n in business French. She reads and writes French.</p>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n .sample_container {\n max-width: 300px;\n margin: auto;\n min-height: 400px;\n }\n\n /* Card Customizations */\n\n .e-custom-card {\n position: relative;\n margin-top: 80px;\n overflow: visible;\n border-radius: 15px;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n transition: 0.2s;\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card.e-card:hover {\n border-width: 1px;\n padding: 1px;\n }\n\n .e-custom-card :nth-child(2) .e-card-header-title.name {\n margin-top: 20px;\n }\n\n .sample_container p.avatar-content {\n line-height: 20px;\n font-family: inherit;\n }\n\n .e-custom-card .e-card-header {\n text-align: center;\n }\n\n .e-custom-card .e-avatar {\n font-size: 40px;\n position: absolute;\n top: calc(0% - 1.5em);\n left: calc(50% - 1.5em);\n box-shadow: 0 16px 28px -8px rgba(0, 0, 0, .36), 0 4px 15px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);\n }\n\n .e-card.e-custom-card :nth-child(3) {\n padding: 12px 0px 20px 0px;\n height: 130px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n font-size: 24px;\n font-weight: 500;\n line-height: normal;\n color: rgba(83, 101, 132, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n font-size: 12px;\n font-weight: 500;\n line-height: normal;\n color: rgba(86, 90, 97, 0.65);\n text-shadow: 0 0 0.1px;\n }\n\n .e-custom-card.e-card .e-card-content {\n overflow: visible;\n width: auto;\n margin: -5px 20px 0 20px;\n word-spacing: 1px;\n }\n\n .avatar-content {\n color: rgba(250, 200, 130, 0.6);\n margin: 0 auto;\n text-align: center;\n color: rgb(94, 94, 94);\n border: none;\n padding: 0;\n font-size: 14px;\n }\n\n .avatar-content {\n margin-bottom: 0;\n }\n\n .sample_container .name {\n margin-top: 10px;\n }\n\n .highcontrast .e-custom-card.e-card .avatar-content {\n color: rgba(255, 255, 255, 0.84);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-sub-title {\n color: rgba(255, 255, 255, 0.45);\n }\n\n .highcontrast .e-custom-card.e-card .e-card-header .e-card-header-caption .e-card-header-title {\n color: rgba(255, 255, 255, 0.84);\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
{ id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },
|
||||
{ id: 's_05', text: 'John', pic: 'pic01', avatar: '' },
|
||||
{ id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },
|
||||
{ id: 's_06', text: 'Michael', pic: 'pic02', avatar: '' },
|
||||
{ id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },
|
||||
{ id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },
|
||||
{ id: 's_08', text: 'Margaret', avatar: 'M', pic: '' }
|
||||
{ id: 's_08', text: 'Michael', avatar: 'M', pic: '' }
|
||||
];
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<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</style>\n</div></body></html>"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<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/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\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
|
|
@ -158,4 +158,9 @@
|
|||
padding: 10px 0 10px 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-avatar-showcase.e-card {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1 +1 @@
|
|||
{"datasource.ts":"/**\n * Sample for CSS Avatar listview\n */\n\n // Listview datasource with avatar and image source fields\n export let listData: { [key: string]: Object; }[] = [\n { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },\n { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },\n { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },\n { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },\n { id: 's_06', text: 'Michael', pic: 'pic02', avatar: '' },\n { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },\n { id: 's_08', text: 'Margaret', avatar: 'M', pic: '' }\n ];","index.ts":"{{ripple}}\n/**\n * Sample for CSS Avatar listview\n */\nimport { ListView } from '@syncfusion/ej2-lists';\nimport { listData } from './datasource';\n\n \n\n let letterAvatarList: ListView = new ListView({\n // Bind listview datasource\n dataSource: listData,\n // Assign header title\n headerTitle: 'Contacts',\n // Enable header title\n showHeader: true,\n // Assign list-item template\n template: '<div class=\"listWrapper\">' +\n '${if(avatar!==\"\")}' +\n '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n '${else}' +\n '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n '${/if}' +\n '<span class=\"list-text\">' +\n '${text} </span> </div>',\n // Assign sorting order\n sortOrder: 'Ascending'\n });\n letterAvatarList.appendTo('#letterAvatarList');\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <!-- Listview element -->\n <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Listview Customization */\n\n #letterAvatarList {\n max-width: 350px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n\n #letterAvatarList .listWrapper {\n width: inherit;\n height: inherit;\n position: relative;\n }\n\n #letterAvatarList .e-list-header {\n height: 54px;\n }\n\n .material #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .fabric #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .bootstrap #letterAvatarList .e-list-header .e-text {\n line-height: 13px;\n }\n\n .highcontrast #letterAvatarList .e-list-header .e-text {\n line-height: 20px;\n }\n\n #letterAvatarList .e-list-item {\n cursor: pointer;\n height: 50px;\n line-height: 44px;\n border: 0;\n }\n\n /* Badge Positioning */\n\n #letterAvatarList .e-badge {\n margin-top: 12px;\n }\n\n #letterAvatarList .listWrapper .list-text {\n width: 60%;\n display: inline-block;\n vertical-align: middle;\n margin: 0 50px;\n }\n\n /* Avatar Positioning */\n\n #letterAvatarList .listWrapper .e-avatar {\n position: absolute;\n top: calc(100% - 40px);\n font-size: 10px;\n left: 5px;\n }\n\n /* Avatar Background Customization */\n\n #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n background-color: #039BE5;\n }\n\n #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n background-color: #E91E63;\n }\n\n #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n background-color: #009688;\n }\n\n /* Avatar images using 'background-image' property */\n\n .pic01 {\n background-image: url('//npmci.syncfusion.com/development/demos/src/avatar/images/pic01.png');\n }\n\n .pic02 {\n background-image: url('//npmci.syncfusion.com/development/demos/src/avatar/images/pic02.png');\n }\n\n .pic03 {\n background-image: url('//npmci.syncfusion.com/development/demos/src/avatar/images/pic03.png');\n }\n\n .pic04 {\n background-image: url('//npmci.syncfusion.com/development/demos/src/avatar/images/pic04.png');\n }\n</style>\n</div></body></html>"}
|
||||
{"datasource.ts":"/**\n * Sample for CSS Avatar listview\n */\n\n // Listview datasource with avatar and image source fields\n export let listData: { [key: string]: Object; }[] = [\n { id: 's_01', text: 'Robert', avatar: '', pic: 'pic04' },\n { id: 's_02', text: 'Nancy', avatar: 'N', pic: '' },\n { id: 's_05', text: 'John', pic: 'pic01', avatar: '' },\n { id: 's_03', text: 'Andrew', avatar: 'A', pic: '' },\n { id: 's_06', text: 'Margaret', pic: 'pic02', avatar: '' },\n { id: 's_07', text: 'Steven', pic: 'pic03', avatar: '' },\n { id: 's_08', text: 'Michael', avatar: 'M', pic: '' }\n ];","index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <!-- Listview element -->\n <div id=\"letterAvatarList\"></div>\n</div>\n\n\n\n\n<style>\n .control-section {\n overflow: auto;\n }\n\n /* Listview Customization */\n\n #letterAvatarList {\n max-width: 350px;\n margin: auto;\n border: 1px solid #dddddd;\n border-radius: 3px;\n }\n\n #letterAvatarList .listWrapper {\n width: inherit;\n height: inherit;\n position: relative;\n }\n\n #letterAvatarList .e-list-header {\n height: 54px;\n }\n\n .material #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .fabric #letterAvatarList .e-list-header .e-text {\n line-height: 22px;\n }\n\n .bootstrap #letterAvatarList .e-list-header .e-text {\n line-height: 13px;\n }\n\n .highcontrast #letterAvatarList .e-list-header .e-text {\n line-height: 20px;\n }\n\n #letterAvatarList .e-list-item {\n cursor: pointer;\n height: 50px;\n line-height: 44px;\n border: 0;\n }\n\n /* Badge Positioning */\n\n #letterAvatarList .e-badge {\n margin-top: 12px;\n }\n\n #letterAvatarList .listWrapper .list-text {\n width: 60%;\n display: inline-block;\n vertical-align: middle;\n margin: 0 50px;\n }\n\n /* Avatar Positioning */\n\n #letterAvatarList .listWrapper .e-avatar {\n position: absolute;\n top: calc(100% - 40px);\n font-size: 10px;\n left: 5px;\n }\n\n /* Avatar Background Customization */\n\n #letterAvatarList .e-list-item:nth-child(1) .e-avatar {\n background-color: #039BE5;\n }\n\n #letterAvatarList .e-list-item:nth-child(3) .e-avatar {\n background-color: #E91E63;\n }\n\n #letterAvatarList .e-list-item:nth-child(5) .e-avatar {\n background-color: #009688;\n }\n\n /* Avatar images using 'background-image' property */\n\n .pic01 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic01.png');\n }\n\n .pic02 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic02.png');\n }\n\n .pic03 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic03.png');\n }\n\n .pic04 {\n background-image: url('//ej2.syncfusion.com/demos/src/avatar/images/pic04.png');\n }\n\n .bootstrap4 #letterAvatarList .e-list-item {\n line-height: 30px;\n padding: 8px 16px 8px 16px;\n }\n\n .bootstrap4 #letterAvatarList .e-list-item .e-avatar {\n top: calc(100% - 48px);\n }\n\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Avatar listview\n */\nimport { ListView } from '@syncfusion/ej2-lists';\nimport { listData } from './datasource';\n\n \n\n let letterAvatarList: ListView = new ListView({\n // Bind listview datasource\n dataSource: listData,\n // Assign header title\n headerTitle: 'Contacts',\n // Enable header title\n showHeader: true,\n // Assign list-item template\n template: '<div class=\"listWrapper\">' +\n '${if(avatar!==\"\")}' +\n '<span class=\"e-avatar e-avatar-small e-avatar-circle\">${avatar}</span>' +\n '${else}' +\n '<span class=\"${pic} e-avatar e-avatar-small e-avatar-circle\"> </span>' +\n '${/if}' +\n '<span class=\"list-text\">' +\n '${text} </span> </div>',\n // Assign sorting order\n sortOrder: 'Ascending'\n });\n letterAvatarList.appendTo('#letterAvatarList');\n"}
|
||||
|
|
@ -114,4 +114,14 @@
|
|||
.pic04 {
|
||||
background-image: url('./src/avatar/images/pic04.png');
|
||||
}
|
||||
|
||||
.bootstrap4 #letterAvatarList .e-list-item {
|
||||
line-height: 30px;
|
||||
padding: 8px 16px 8px 16px;
|
||||
}
|
||||
|
||||
.bootstrap4 #letterAvatarList .e-list-item .e-avatar {
|
||||
top: calc(100% - 48px);
|
||||
}
|
||||
|
||||
</style>
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -223,4 +223,13 @@
|
|||
.e-avatar.custom {
|
||||
background-color: blueviolet;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-avatar.custom {
|
||||
background-color: #cfd5ff;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-avatar .chrome {
|
||||
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23666666' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<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-secondary 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 {\n background: #000;\n }\n\n .highcontrast .e-btn-group.e-custom-button .e-btn:focus {\n outline: 0px;\n color: white;\n }\n\n .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 .default .e-badge.e-badge-overlap {\n transform: translateX(-110%);\n z-index: 100;\n }\n</style>\n</div></body></html>"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<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-secondary 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 .default .e-badge.e-badge-overlap {\n transform: translateX(-110%);\n z-index: 100;\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Badge\n */\n\n \n//\n"}
|
||||
|
|
@ -100,16 +100,14 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.highcontrast .e-btn-group.e-custom-button .e-btn {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.highcontrast .e-btn-group.e-custom-button .e-btn:focus {
|
||||
outline: 0px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.e-btn-group.e-custom-button .e-btn {
|
||||
.fabric .e-btn-group.e-custom-button .e-btn,
|
||||
.material .e-btn-group.e-custom-button .e-btn,
|
||||
.bootstrap .e-btn-group.e-custom-button .e-btn {
|
||||
background: #F6F7F9;
|
||||
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);
|
||||
text-transform: initial;
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"{{ripple}}\n/**\n * Sample for CSS tab intergration\n */\nimport { Toolbar } from '@syncfusion/ej2-navigations';\n\n\n \n let toolbarObj: Toolbar = new Toolbar();\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar');\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<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 @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>\n</div></body></html>"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<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 @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>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS tab intergration\n */\nimport { Toolbar } from '@syncfusion/ej2-navigations';\n\n\n \n let toolbarObj: Toolbar = new Toolbar();\n //Render initialized Toolbar component\n toolbarObj.appendTo('#toolbar');\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,315 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> support 16 letters: 0-9, -, $, :, /, ., + and start/stop characters A-D'
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes a barcode that is designed to be accurately read even when printed with dot matrix printers. This type of barcode is widely used in applications that require serial numbers, such as blood bank management, slips for door-to door delivery services, and member cards.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows a codabar with a character set of 16 letters with four start and stop characters. The `type` property can be used to set the barcode type as `Codabar`.
|
||||
</p>
|
||||
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
width: '200px',
|
||||
height: '150px',
|
||||
mode: 'SVG',
|
||||
invalid: invalidInput,
|
||||
type: 'Codabar',
|
||||
value: '123456789',
|
||||
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: '123456789',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: '123456789',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> support 0-9 A-Z a-z and special character
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes a barcode image that presents alphanumeric combinations. Code 128 barcode consists of a start character, data digits, a modulo 103 check digit, and a stop character.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the Code 128 barcode type with alphanumeric characters. The `type` property can be used to set the barcode type as `Code128`.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
type: 'Code128',
|
||||
value: 'SYNCFUSION',
|
||||
width: '200px', height: '150px',
|
||||
mode: 'SVG',
|
||||
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> support 0-9 A-Z and special character
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes a barcode image that presents information with a combination of numbers, uppercase letters, and control characters such as tab and new line.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the Code 128A barcode type with alphanumeric characters. The `type` property can be used to set the barcode type as ` Code128A`.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
type: 'Code128A',
|
||||
value: 'SYNCFUSION',
|
||||
width: '200px', height: '150px',
|
||||
mode: 'SVG',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> support 0-9 A-Z a-z and special character
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes a barcode image that presents information with a combination of numbers, uppercase letters, and control characters such as tab and new line.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the Code 128B barcode type with alphanumeric characters. The `type` property can be used to set the barcode type as `Code128B`.
|
||||
</p>
|
||||
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
type: 'Code128B',
|
||||
value: 'SYNCFUSION',
|
||||
width: '200px', height: '150px',
|
||||
mode: 'SVG',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> Support even number of digits
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes a barcode image that presents information with a combination of numbers, uppercase and lowercase letters, and some additional characters.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the Code 128C barcode type with alphanumeric characters. The `type` property can be used to set the barcode type as `Code128C`.
|
||||
</p>
|
||||
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
type: 'Code128C',
|
||||
value: '01234567',
|
||||
width: '200px', height: '150px',
|
||||
mode: 'SVG',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: '01234567',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: '01234567',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> This barcode supports 8 numbers as input.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the pharmaceutical code that encodes numeric data in a compressed format. This type of barcode supports all numeric digits and all uppercase letters.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the Code 32 barcode with five bars and four spaces for encoding each character. The `type` property can be used to set the barcode type as `Code32`.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
type: 'Code32',
|
||||
value: '01234567',
|
||||
width: '200px', height: '150px',
|
||||
mode: 'SVG',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: '01234567',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: '01234567',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> A-Z, 0-9 </span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes Code 39, a self-checking barcode symbology that consists of uppercase letters, numeric digits, and several special characters. It is often used to present model numbers. Code 39 is widely used in the automotive and defense industries as a standard label.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the Code 39 self-checking symbology type barcode image. The `type` property can be used to set the barcode type as `Code39`.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
width: '200px',
|
||||
height: '150px',
|
||||
mode: 'SVG',
|
||||
type: 'Code39',
|
||||
invalid: invalidInput,
|
||||
value: 'SYNCFUSION',
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> This barcode support only ASCII characters.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the model number of an item in the automotive industry. This barcode supports both standard and extended Code 39 barcodes. The extended mode gives access to the full set of ASCII letters.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the extended Code 39 barcode with an added checksum. The `type` property can be used to set the barcode type as `Code39Extension`. By default, `enableCheckSum` is set as true, but the checksum can be disabled by assigning false to it.
|
||||
</p>
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
width: '200px',
|
||||
height: '150px',
|
||||
mode: 'SVG',
|
||||
type: 'Code39Extension',
|
||||
value: 'SYNCFUSION',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: 'SYNCFUSION',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> This bar code support 0-9 , * , -'
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes how to present a model number with higher density and data security enhancements compared to Code 39. Code 93 has a native character set of 26 uppercase letters, 10 digits, and 7 special characters.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the Code 93 barcode with two check characters. The `type` property can be used to set the barcode type as `Code93`. By default, `enableCheckSum` is set as true, but the checksum can be disabled by assigning false to it.
|
||||
</p>
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
type: 'Code93',
|
||||
value: '01234567',
|
||||
width: '200px', height: '150px',
|
||||
mode: 'SVG',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: '01234567',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.value = args.value.toString();
|
||||
displayText.value = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: '01234567',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.matrixSize{
|
||||
width: 33%;
|
||||
padding-left: 0px;
|
||||
float: left;
|
||||
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.sb-mobile-prop-pane .matrixSize{
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass" >SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;
|
||||
padding-left: 12px;
|
||||
margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Size</div>
|
||||
<div class="matrixSize">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='MatrixSize' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Encoding</div>
|
||||
<div class="matrixSize">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='PdfDataMatrixEncoding' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample displays encoded numerals or text as an optical label using solid adjacent borders in an L-shape and two other borders consisting of alternating dark and light cells or modules. Within these borders are rows and columns of cells that encode information.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This example shows how to display encoded text or numerical values as the label using the Barcode component. The `type` property can be used to set the barcode type as data matrix. The data matrix encoding type can be set using the `encoding` property of the Barcode component and the data matrix size can be defined using the `size` property of the component.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { DataMatrixGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment, DataMatrixEncoding } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: DataMatrixGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new DataMatrixGenerator({
|
||||
mode: 'SVG',
|
||||
value: 'Syncfusion',
|
||||
invalid: invalidInput,
|
||||
displayText: { visibility: false },
|
||||
height: 150, width: 200,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let matrixSize: { [key: string]: Object }[] = [
|
||||
{ value: '0', text: 'Auto' },
|
||||
{ value: '6', text: 'Size10x10' },
|
||||
{ value: '12', text: 'Size12x12' },
|
||||
{ value: '20', text: 'Size14x14' },
|
||||
{ value: '23', text: 'Size16x16' },
|
||||
{ value: '24', text: 'Size18x18' },
|
||||
{ value: '24', text: 'Size20x20' },
|
||||
{ value: '24', text: 'Size22x22' },
|
||||
{ value: '24', text: 'Size24x24' },
|
||||
{ value: '24', text: 'Size26x26' },
|
||||
{ value: '24', text: 'Size32x32' },
|
||||
{ value: '24', text: 'Size36x36' },
|
||||
{ value: '24', text: 'Size40x40' },
|
||||
{ value: '24', text: 'Size44x44' },
|
||||
{ value: '24', text: 'Size48x48' },
|
||||
{ value: '24', text: 'Size52x52' },
|
||||
{ value: '24', text: 'Size64x64' },
|
||||
|
||||
{ value: '24', text: 'Size72x72' },
|
||||
{ value: '24', text: 'Size80x80' },
|
||||
{ value: '24', text: 'Size88x88' },
|
||||
{ value: '24', text: 'Size96x96' },
|
||||
{ value: '24', text: 'Size104x104' },
|
||||
{ value: '24', text: 'Size120x120' },
|
||||
{ value: '24', text: 'Size132x132' },
|
||||
{ value: '24', text: 'Size144x144' },
|
||||
{ value: '24', text: 'Size8x18' },
|
||||
{ value: '24', text: 'Size8x32' },
|
||||
{ value: '24', text: 'Size12x26' },
|
||||
{ value: '24', text: 'Size12x36' },
|
||||
{ value: '24', text: 'Size16x36' },
|
||||
{ value: '24', text: 'Size16x48' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let pdfDataMatrixEncodingValue: { [key: string]: Object }[] = [
|
||||
{ value: 'Auto', text: 'Auto' },
|
||||
{ value: 'ASCII', text: 'ASCII' },
|
||||
{ value: 'ASCIINumeric', text: 'ASCIINumeric' },
|
||||
{ value: 'Base256', text: 'Base256' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
value: 'Center',
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: 'Syncfusion',
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let size: DropDownList = new DropDownList({
|
||||
dataSource: matrixSize,
|
||||
value: 'Auto',
|
||||
change: (args: ChangeEventArgs) => {
|
||||
barcode.size = (Number(args.itemData.value));
|
||||
}
|
||||
});
|
||||
size.appendTo('#MatrixSize');
|
||||
|
||||
let encoding: DropDownList = new DropDownList({
|
||||
dataSource: pdfDataMatrixEncodingValue,
|
||||
value: 'Auto',
|
||||
change: (args: ChangeEventArgs) => {
|
||||
barcode.encoding = ((args.itemData.value.toString()) as DataMatrixEncoding);
|
||||
}
|
||||
});
|
||||
encoding.appendTo('#PdfDataMatrixEncoding');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> This barocode supports 13 numbers as input.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the 13-digit Global Trade Identification Numbers. These 13 digits comprise the following components: GS1 company prefix, manufacturer code, product code, and check digit.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the EAN-13 barcode. The `type` property can be used to set the barcode type as `Ean13`.
|
||||
</p>
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
width: '200px', height: '150px',
|
||||
type: 'Ean13',
|
||||
value: '9735940564824',
|
||||
mode: 'SVG',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: '9735940564824',
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: '9735940564824',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
if (args.isInteracted) {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> This barocode supports 8 numbers as
|
||||
input.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes the 8-digit Global Trade Identification Numbers. It was introduced for use on small
|
||||
packages where an EAN-8 barcode would be too large.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the EAN-8 barcode. The `type` property can be used to set the barcode type as
|
||||
`Ean8`
|
||||
</p>
|
||||
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
width: '200px',
|
||||
height: '150px',
|
||||
mode: 'SVG',
|
||||
type: 'Ean8',
|
||||
value: '11223344',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
|
||||
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
value: 'Center',
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: '11223344',
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: '11223344',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
if (args.isInteracted) {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;
|
||||
padding-left: 12px;
|
||||
margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Version</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='Version' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Error Correction Level</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='errorCorrection' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample displays a machine-readable optical label that contains information about the item to which it is
|
||||
attached. The information may be a location, a URL, an address book, etc.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This example shows how to display a URL as the optical label using the Barcode component. The `type` property
|
||||
can be used to set the barcode type as one-dimensional or two-dimensional.
|
||||
The `version` property is used to set the version of the QR barcode. Also, the Barcode component provides
|
||||
support to set the error correction level on a QR-type barcode by using the `errorCorrectionLevel` property.
|
||||
</p>
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,287 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { QRCodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: QRCodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new QRCodeGenerator({
|
||||
width: '200px',
|
||||
height: '150px',
|
||||
displayText: { visibility: false },
|
||||
invalid: invalidInput,
|
||||
mode: 'SVG',
|
||||
value: 'Syncfusion',
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let errorCorrectionLevel: { [key: string]: Object }[] = [
|
||||
{ value: '7', text: 'Low' },
|
||||
{ value: '15', text: 'Medium' },
|
||||
{ value: '25', text: 'Quartile' },
|
||||
{ value: '30', text: 'High' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
value: 'Center',
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: 'Syncfusion',
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let version: NumericTextBox = new NumericTextBox({
|
||||
format: '###.##',
|
||||
min: 1, max: 40,
|
||||
value: 1, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.version = (Number(args.value));
|
||||
}
|
||||
});
|
||||
version.appendTo('#Version');
|
||||
|
||||
let errorCorrection: DropDownList = new DropDownList({
|
||||
dataSource: errorCorrectionLevel,
|
||||
value: 'Medium',
|
||||
change: (args: ChangeEventArgs) => {
|
||||
barcode.errorCorrectionLevel = (Number(args.itemData.value));
|
||||
}
|
||||
});
|
||||
errorCorrection.appendTo('#errorCorrection');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
{
|
||||
"name": "Barcode",
|
||||
"directory": "barcode",
|
||||
"category": "Data Visualization",
|
||||
"ftName": "barcode",
|
||||
"type": "preview",
|
||||
"samples": [
|
||||
{
|
||||
"url": "ean8",
|
||||
"name": "EAN-8",
|
||||
"description": "This sample visualizes the 8-digit Global Trade Identification Numbers. It was introduced for use on small packages where an EAN-8 barcode would be too large.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "code128",
|
||||
"name": "Code 128",
|
||||
"description": "This sample visualizes a barcode image that presents alphanumeric combinations and it consist of start character, data digits etc.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "code128A",
|
||||
"name": "Code 128A",
|
||||
"description": "This sample visualizes a barcode image that presents information with a combination of numbers, and control characters such as tab and new line.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "code128B",
|
||||
"name": "Code 128B",
|
||||
"description": "This sample visualizes a barcode image that presents information with a combination of numbers, and control characters such as tab and new line.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "code128C",
|
||||
"name": "Code 128C",
|
||||
"description": "This sample visualizes a barcode image that presents information with a combination of numbers, uppercase and lowercase letters, and some additional characters.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "code93",
|
||||
"name": "Code 93",
|
||||
"description": "This sample has a native character set of 26 uppercase letters, 10 digits, and 7 special characters.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "code32",
|
||||
"name": "Code 32",
|
||||
"description": "This sample visualizes the pharmaceutical code that encodes numeric data in a compressed format and supports all numeric digits and all uppercase letters",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "codabar",
|
||||
"name": "Codabar",
|
||||
"description": "This sample visualizes a barcode that is designed to be accurately read even when printed with dot matrix printers.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "ean13",
|
||||
"name": "EAN-13",
|
||||
"description": "This sample visualizes the 13-digit Global Trade Identification Numbers.It comprises of 13 digits such as manufacturer code, product code etc",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "upca",
|
||||
"name": "UPC-A",
|
||||
"description": "A UPC-A barcode consists of four areas: number system, manufacturer code, product code, and check digit",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "upce",
|
||||
"name": "UPC-E",
|
||||
"description": "This sample visualizes a product package identification number consist of 6 digits. It is mainly used for scanning products in small packages",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "code39",
|
||||
"name": "Code39",
|
||||
"description": "visualizes Code 39, a self-checking barcode symbology that consists of uppercase letters, and several special characters.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "code39Extd",
|
||||
"name": "Code 39 Extended",
|
||||
"description": "This sample visualizes the model number of an item in the automotive industry.It supports both standard and extended Code 39 barcodes",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "qrcode",
|
||||
"name": "QR Code",
|
||||
"description": "This sample displays a machine-readable optical label that contains information about the item to which it is attached.",
|
||||
"category": "Getting Started"
|
||||
},
|
||||
{
|
||||
"url": "datamatrix",
|
||||
"name": "Data Matrix",
|
||||
"description": "This example shows how to display encoded text or numerical values as the label using the Barcode component",
|
||||
"category": "Getting Started"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> This barocode supports 11 numbers as input.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes a consumer good identification number. A UPC-A barcode consists of four areas: number system, manufacturer code, product code, and check digit.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the UPC-A barcode. The `type` property can be used to set the barcode type as `UpcA`. By default, `enableCheckSum` is set as true, but the checksum can be disabled by assigning false to it.
|
||||
</p>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
width: '200px', height: '150px',
|
||||
type: 'UpcA',
|
||||
value: '72527273070',
|
||||
invalid: invalidInput,
|
||||
mode: 'SVG',
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
value: 'Center',
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: '72527273070',
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: '72527273070',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
if (args.isInteracted) {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
<div class="col-lg-8 control-section" style="width: 64%">
|
||||
<style>
|
||||
.column-style {
|
||||
display: table;
|
||||
height: 35px;
|
||||
padding-right: 4px;
|
||||
padding-left: 0px;
|
||||
width: calc((100% - 12px) / 3);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-header {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.labelstyle {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
padding-right: 10px
|
||||
}
|
||||
|
||||
.propertystyle {
|
||||
padding-top: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sb-child-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
border: 2px solid lightgray;
|
||||
min-height: 40%;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.col-lg-4-property-section {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.rightProperty {
|
||||
margin-top: 10px;
|
||||
width: 16.66666667%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.textProperty {
|
||||
width: 81%;
|
||||
padding-left: 0px;
|
||||
padding-right: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .svgTextClass {
|
||||
width: 40px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.svgTextClass {
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sb-mobile-prop-pane .rightProperty {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textPropertyClass {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.sb-mobile-prop-pane .textProperty {
|
||||
padding-left: 30px;
|
||||
width: 77%
|
||||
}
|
||||
|
||||
.textPropertyClass {
|
||||
width: 83.33333333%;
|
||||
float: left;
|
||||
padding-left: 0px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.allowedText {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin-left: 14px;
|
||||
margin-right: 17px;
|
||||
margin-top: 14px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.top {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.centercontrol {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#password-info {
|
||||
position: absolute;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="content-wrapper" style="width: 100%;height: 590px;">
|
||||
<div class='center'>
|
||||
<div class='centercontrol' id="barcode"></div>
|
||||
|
||||
</div>
|
||||
<div class='allowedText'>
|
||||
<span style="font-weight: 600;"> Allowed Input characters :</span> This barcode supports 6 numbers as input
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 property-section" style="padding-right: 0px;
|
||||
padding-left: 18px;">
|
||||
<div class="property-panel-header">
|
||||
Appearance
|
||||
</div>
|
||||
<div id="propertypanel" class="e-remove-selection">
|
||||
<div class="property-section-content">
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-xs-10" style="padding-left: 0px">
|
||||
<form id="form-element" class="form-horizontal">
|
||||
<div id='barcodevaluediv'>
|
||||
<input type="text" id="barcodeValue" name="password" class="form-control" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div>
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;padding-right: 20px;">
|
||||
Width
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px">
|
||||
<input type="text" id='width' />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rightProperty">
|
||||
Height
|
||||
</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='height' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row" style="margin-top: 20px;">
|
||||
<div class="col-xs-6" style="padding-left: 0px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="textVisibility"
|
||||
unchecked="false">
|
||||
</div>
|
||||
<div class="col-xs-10">Text Visibility</div>
|
||||
</div>
|
||||
<div class="col-xs-4" style="padding-left: 0;margin-left: 13px;">
|
||||
<div class="col-xs-1" style="padding-left: 0px;"><input type="checkbox" id="svgMode"
|
||||
unchecked="false"></div>
|
||||
<div class="svgTextClass">SVG Mode</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div style="margin-top: 15px">
|
||||
<div class="col-xs-2" style="margin-top: 5px;padding-left: 0px;">BG Color</div>
|
||||
<div class="col-xs-4" style="padding-left: 0px;">
|
||||
<input id='bgColor' type="color" />
|
||||
</div>
|
||||
<div class="col-xs-2" style="width: 18%;padding-left: 12px;margin-top: 5px;">Fore Color</div>
|
||||
<div class="col-xs-3" style="padding-left: 2px;">
|
||||
<input id='foreColor' type="color" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-panel-header">
|
||||
Margin
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;"> Left</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='marginLeft' />
|
||||
</div>
|
||||
<div class="rightProperty">Right</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginRight' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<div style="padding-bottom: 8px">
|
||||
<input type="text" id='marginTop' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='MarginBottom' />
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property-panel-header">
|
||||
Text Properties
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">Top</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextmarginTop' />
|
||||
</div>
|
||||
<div class="rightProperty">Bottom</div>
|
||||
<div class="col-xs-3" style="width: 33%;padding-left: 0px;">
|
||||
<input type="text" id='TextMarginBottom' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Position
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textPosition' />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-2 top" style="padding-left: 0px;">
|
||||
Alignment
|
||||
</div>
|
||||
<div class="textPropertyClass">
|
||||
<input type="text" id='textAlignment' />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sb-child-row">
|
||||
<div class="col-xs-3 top" style="width: 17%;padding-left: 0px;">
|
||||
Display Text
|
||||
</div>
|
||||
<div class="textProperty">
|
||||
<input id='displayText' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample visualizes a product package identification number consist of 6 digits. A UPC-E barcode is mainly used for scanning products in small packages.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
This sample shows how to create the UPC-E barcode. The `type` property can be used to set the barcode type as `UpcE`. By default, `enableCheckSum` is set as true, but the checksum can be disabled by assigning false to it.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
</p>
|
||||
<br>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
/**
|
||||
* Default Barcode sample
|
||||
*/
|
||||
|
||||
import { BarcodeGenerator, ValidateEvent } from '@syncfusion/ej2-barcode-generator';
|
||||
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
|
||||
import { TextPosition, Alignment } from '@syncfusion/ej2-barcode-generator/src/barcode/enum/enum';
|
||||
|
||||
import { TextBox, NumericTextBox, ChangedEventArgs, FormValidatorModel, FormValidator } from '@syncfusion/ej2-inputs';
|
||||
import { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBox } from '@syncfusion/ej2-buttons';
|
||||
import { ColorPicker, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
|
||||
import { CheckBoxChangeEventArgs } from '@syncfusion/ej2-grids';
|
||||
import { EJ2Instance } from '@syncfusion/ej2-navigations';
|
||||
|
||||
let barcode: BarcodeGenerator;
|
||||
// tslint:disable-next-line:max-func-body-length
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
barcode = new BarcodeGenerator({
|
||||
width: '200px', height: '150px',
|
||||
type: 'UpcE',
|
||||
value: '123456',
|
||||
mode: 'SVG',
|
||||
invalid: invalidInput,
|
||||
});
|
||||
barcode.appendTo('#barcode');
|
||||
|
||||
let canShowError: boolean = false;
|
||||
|
||||
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
|
||||
if (canShowError) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
let options: FormValidatorModel = {
|
||||
rules: {
|
||||
'password': { minLength: [customFn, 'Invalid input'] }
|
||||
},
|
||||
keyup(): void {
|
||||
if (canShowError) {
|
||||
canShowError = false;
|
||||
}
|
||||
},
|
||||
focusout(args: any): void {
|
||||
displayText.value = barcode.value = (document.getElementById('barcodeValue') as HTMLInputElement).value;
|
||||
barcode.dataBind();
|
||||
},
|
||||
|
||||
};
|
||||
let formObject: FormValidator = new FormValidator('#form-element', options);
|
||||
|
||||
function invalidInput(args: ValidateEvent): void {
|
||||
let error: HTMLElement = document.getElementById('errorblog');
|
||||
|
||||
canShowError = true;
|
||||
formObject.validate();
|
||||
}
|
||||
|
||||
|
||||
//FontType Collection
|
||||
let position: { [key: string]: Object }[] = [
|
||||
{ type: 'Bottom', text: 'Bottom' },
|
||||
{ type: 'Top', text: 'Top' },
|
||||
];
|
||||
|
||||
//FontType Collection
|
||||
let alignment: { [key: string]: Object }[] = [
|
||||
{ type: 'Left', text: 'Left' },
|
||||
{ type: 'Right', text: 'Right' },
|
||||
{ type: 'Center', text: 'Center' },
|
||||
];
|
||||
|
||||
function updatePosition(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textPosition') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.position = (positionValue.value) as TextPosition;
|
||||
}
|
||||
function updateAlignt(value: string): void {
|
||||
let positionValue: TextBox = ((document.getElementById('textAlignment') as EJ2Instance).ej2_instances[0]) as TextBox;
|
||||
barcode.displayText.alignment = (positionValue.value) as Alignment;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textPosition: DropDownList = new DropDownList({
|
||||
dataSource: position,
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updatePosition(args.value.toString());
|
||||
}
|
||||
});
|
||||
textPosition.appendTo('#textPosition');
|
||||
|
||||
//DropDownList used to apply for fontFamily of the Annotation
|
||||
let textAlign: DropDownList = new DropDownList({
|
||||
dataSource: alignment,
|
||||
value: 'Center',
|
||||
fields: { value: 'type', text: 'text' }, popupWidth: 150,
|
||||
width: '100%', placeholder: 'select position', index: 0,
|
||||
change: (args: ChangeEventArgs) => {
|
||||
updateAlignt(args.value.toString());
|
||||
}
|
||||
});
|
||||
textAlign.appendTo('#textAlignment');
|
||||
|
||||
let barcodeValue: TextBox = new TextBox({
|
||||
value: '123456',
|
||||
});
|
||||
barcodeValue.appendTo('#barcodeValue');
|
||||
|
||||
|
||||
let bgColor: ColorPicker = new ColorPicker({
|
||||
value: '#ffffff',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.backgroundColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
bgColor.appendTo('#bgColor');
|
||||
|
||||
let displayText: TextBox = new TextBox({
|
||||
value: '123456',
|
||||
change: (args: ChangedEventArgs) => {
|
||||
if (args.isInteracted) {
|
||||
barcode.displayText.text = args.value.toString();
|
||||
}
|
||||
}
|
||||
});
|
||||
displayText.appendTo('#displayText');
|
||||
|
||||
|
||||
|
||||
let foreColor: ColorPicker = new ColorPicker({
|
||||
value: '#000000',
|
||||
change: (args: ColorPickerEventArgs) => {
|
||||
barcode.foreColor = args.currentValue.hex;
|
||||
}
|
||||
});
|
||||
foreColor.appendTo('#foreColor');
|
||||
|
||||
|
||||
|
||||
let barcodeWidth: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 200, step: 2, min: 150, max: 250,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.width = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeWidth.appendTo('#width');
|
||||
|
||||
let barcodeHeight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 150, step: 2, min: 100, max: 200,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.height = args.value.toString();
|
||||
}
|
||||
});
|
||||
barcodeHeight.appendTo('#height');
|
||||
|
||||
let marginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
marginLeft.appendTo('#marginLeft');
|
||||
|
||||
let marginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
min: -10, max: 30,
|
||||
value: 10, step: 1,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
marginRight.appendTo('#MarginRight');
|
||||
|
||||
let marginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
marginTop.appendTo('#marginTop');
|
||||
|
||||
|
||||
|
||||
let marginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 10, step: 1,
|
||||
min: -10, max: 30,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
marginBottom.appendTo('#MarginBottom');
|
||||
|
||||
|
||||
|
||||
let textVisibility: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: CheckBoxChangeEventArgs) => {
|
||||
barcode.displayText.visibility = args.checked;
|
||||
}
|
||||
});
|
||||
textVisibility.appendTo('#textVisibility');
|
||||
|
||||
|
||||
let svgMode: CheckBox = new CheckBox({
|
||||
checked: true,
|
||||
change: (args: any) => {
|
||||
barcode.mode = args.checked ? 'SVG' : 'Canvas';
|
||||
}
|
||||
});
|
||||
svgMode.appendTo('#svgMode');
|
||||
|
||||
|
||||
|
||||
let textmarginLeft: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.left = args.value;
|
||||
}
|
||||
});
|
||||
textmarginLeft.appendTo('#TextmarginLeft');
|
||||
|
||||
let textMarginRight: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 40, step: 1, min: 40, max: 60,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.right = args.value;
|
||||
}
|
||||
});
|
||||
textMarginRight.appendTo('#TextMarginRight');
|
||||
|
||||
let textmarginTop: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.top = args.value;
|
||||
}
|
||||
});
|
||||
textmarginTop.appendTo('#TextmarginTop');
|
||||
|
||||
|
||||
|
||||
let textMarginBottom: NumericTextBox = new NumericTextBox({
|
||||
enabled: true, format: '###.##',
|
||||
value: 0, step: 1, min: -10, max: 20,
|
||||
change: (args: NumericChangeEventArgs) => {
|
||||
barcode.displayText.margin.bottom = args.value;
|
||||
}
|
||||
});
|
||||
textMarginBottom.appendTo('#TextMarginBottom');
|
||||
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -57,7 +57,7 @@
|
|||
</ul>
|
||||
<p>
|
||||
More information on ButtonGroup can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/button-group/getting-started/">
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/button-group/getting-started">
|
||||
documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
.e-btngrp-underline::before {
|
||||
content: '\e703';
|
||||
}
|
||||
|
||||
/* custom code start */
|
||||
.button-group-section {
|
||||
width: 320px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -139,4 +139,5 @@
|
|||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
/* custom code end */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<div class="control-section">
|
||||
<div class="checkbox-control">
|
||||
<div class="row">
|
||||
<input id="checked" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<input id="disabled" type="checkbox" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<input id="indeterminate" type="checkbox" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>This sample demonstrates the default functionalities of the CheckBox. Click the CheckBox element to toggle states between checked/unchecked.</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
CheckBox is a graphical user interface element that allows to select one or more options from the choices. It contains checked, unchecked, and indeterminate states.
|
||||
</p>
|
||||
<p>
|
||||
In this sample, checked state is achieved by using the
|
||||
<code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/api/check-box/#checked">checked
|
||||
</a></code> property, indeterminate state is achieved by using the <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/api/check-box/#indeterminate">indeterminate
|
||||
</a></code> property, and disabled state is achieved by using the <code><a target="_blank" class="code"
|
||||
href="https://ej2.syncfusion.com/documentation/api/check-box/#disabled">disabled
|
||||
</a></code> property.
|
||||
</p>
|
||||
<p>
|
||||
More information about CheckBox can be found in this
|
||||
<a target="_blank" href="https://ej2.syncfusion.com/documentation/check-box/getting-started">
|
||||
documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
/* CheckBox Styles */
|
||||
.checkbox-control {
|
||||
margin: 12% 0 12% 40%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.checkbox-control {
|
||||
margin: 20% 0 0 32%;
|
||||
}
|
||||
|
||||
.control-section {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.control-section {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.checkbox-control {
|
||||
margin-top: 27%;
|
||||
margin-left: 20%;
|
||||
margin-bottom: 27%;
|
||||
}
|
||||
}
|
||||
|
||||
.control-section .row {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
|
||||
|
||||
/**
|
||||
* Default CheckBox sample
|
||||
*/
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let checkBoxObj: CheckBox = new CheckBox({ label: 'CheckBox: true', checked: true, change: onChange });
|
||||
checkBoxObj.appendTo('#checked');
|
||||
|
||||
checkBoxObj = new CheckBox({ label: 'Checked, Disabled', disabled: true, checked: true });
|
||||
checkBoxObj.appendTo('#disabled');
|
||||
|
||||
checkBoxObj = new CheckBox({ label: 'Indeterminate, Disabled', indeterminate: true, disabled: true });
|
||||
checkBoxObj.appendTo('#indeterminate');
|
||||
|
||||
// function to handle the CheckBox change event
|
||||
function onChange(args: ChangeEventArgs): void {
|
||||
this.label = 'CheckBox: ' + args.checked;
|
||||
}
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -78,6 +78,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<style>
|
||||
/* custom code start */
|
||||
#button-control {
|
||||
width: 100%;
|
||||
margin: 8% 0;
|
||||
|
|
@ -98,7 +99,7 @@
|
|||
#button-control .col-xs-12 {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
/* custom code end */
|
||||
@font-face {
|
||||
font-family: 'button-icons';
|
||||
src:url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1uSf8AAAEoAAAAVmNtYXDOXM6wAAABtAAAAFRnbHlmcV/SKgAAAiQAAAJAaGVhZBNt0QcAAADQAAAANmhoZWEIUQQOAAAArAAAACRobXR4NAAAAAAAAYAAAAA0bG9jYQNWA+AAAAIIAAAAHG1heHABGQAZAAABCAAAACBuYW1lASvfhQAABGQAAAJhcG9zdFAouWkAAAbIAAAA2AABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAADQABAAAAAQAAYD3WXF8PPPUACwQAAAAAANgtxgsAAAAA2C3GCwAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAANAA0AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wHnDQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAQAAAAAYABAABAALnCOcN//8AAOcB5wr//wAAAAAAAQAGABQAAAABAAMABAAHAAIACgAJAAgABQAGAAsADAAAAAAADgAkAEQAWgByAIoApgDAAOAA+AEMASAAAQAAAAADYQP0AAIAADcJAZ4CxP08DAH0AfQAAAIAAAAAA9QD9AADAAcAACUhESEBIREhAm4BZv6a/b4BZv6aDAPo/BgD6AAAAgAAAAADpwP0AAMADAAANyE1ISUBBwkBJwERI1kDTvyyAYH+4y4BeQGANv7UTAxNlwEIPf6eAWI9/ukDEwAAAAIAAAAAA/QDngADAAcAADchNSETAyEBDAPo/Bj6+gPo/gxipgFy/t0CRwAAAQAAAAAD9AP0AAsAAAEhFSERMxEhNSERIwHC/koBtnwBtv5KfAI+fP5KAbZ8AbYAAQAAAAAD9AP0AAsAAAEhFSERMxEhNSERIwHh/isB1T4B1f4rPgIfPv4rAdU+AdUAAgAAAAAD9AOlAAMADAAANyE1ISUnBxc3JwcRIwwD6PwYAcWjLO7uLKI/Wj+hoSvs6iyhAm0AAAABAAAAAAP0A/QACwAAAREhFSERMxEhNSERAeH+KwHVPgHV/isD9P4rPv4rAdU+AdUAAAAAAgAAAAADdwP0AAMADAAANyE1ISUBBwkBJwERI4kC7v0SAVj+0SkBdgF4Kf7RPgw+rQEJL/64AUgv/vgC/AAAAAEAAAAAA/QD9AALAAABIRUhETMRITUhESMB2v4yAc5MAc7+MkwCJkz+MgHOTAHOAAIAAAAAA/QDzQADAAcAADchNSE1KQEBDAPo/BgB9AH0/gwzpZUCYAACAAAAAAP0A80AAwAHAAA3ITUhNSkBAQwD6PwYAfQB9P4MM6WVAmAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAMAAEAAQAAAAAAAgAHAA0AAQAAAAAAAwAMABQAAQAAAAAABAAMACAAAQAAAAAABQALACwAAQAAAAAABgAMADcAAQAAAAAACgAsAEMAAQAAAAAACwASAG8AAwABBAkAAAACAIEAAwABBAkAAQAYAIMAAwABBAkAAgAOAJsAAwABBAkAAwAYAKkAAwABBAkABAAYAMEAAwABBAkABQAWANkAAwABBAkABgAYAO8AAwABBAkACgBYAQcAAwABBAkACwAkAV8gYnV0dG9uLWljb25zUmVndWxhcmJ1dHRvbi1pY29uc2J1dHRvbi1pY29uc1ZlcnNpb24gMS4wYnV0dG9uLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABiAHUAdAB0AG8AbgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGIAdQB0AHQAbwBuAC0AaQBjAG8AbgBzAGIAdQB0AHQAbwBuAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABiAHUAdAB0AG8AbgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4ACm1lZGlhLXBsYXkLbWVkaWEtcGF1c2UQLWRvd25sb2FkLTAyLXdmLQltZWRpYS1lbmQHYWRkLW5ldwtuZXctbWFpbC13ZhB1c2VyLWRvd25sb2FkLXdmDGV4cGFuZC0wMy13Zg5kb3dubG9hZC0wMi13ZgphZGQtbmV3XzAxC21lZGlhLWVqZWN0Dm1lZGlhLWVqZWN0LTAxAAA=) format('truetype');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,38 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
|
||||
|
||||
/**
|
||||
* Default DropDownButton sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let items: ItemModel[] = [
|
||||
{
|
||||
text: 'Dashboard',
|
||||
iconCss: 'e-ddb-icons e-dashboard'
|
||||
},
|
||||
{
|
||||
text: 'Notifications',
|
||||
iconCss: 'e-ddb-icons e-notifications',
|
||||
},
|
||||
{
|
||||
text: 'User Settings',
|
||||
iconCss: 'e-ddb-icons e-settings',
|
||||
},
|
||||
{
|
||||
text: 'Log Out',
|
||||
iconCss: 'e-ddb-icons e-logout'
|
||||
}];
|
||||
|
||||
let btnObj: DropDownButton = new DropDownButton({ items: items, iconCss: 'e-ddb-icons e-profile' });
|
||||
btnObj.appendTo('#iconbtn');
|
||||
|
||||
btnObj = new DropDownButton({ items: items });
|
||||
btnObj.appendTo('#textbtn');
|
||||
|
||||
btnObj = new DropDownButton({ items: items, iconCss: 'e-ddb-icons e-profile' });
|
||||
btnObj.appendTo('#icontextbtn');
|
||||
|
||||
btnObj = new DropDownButton({items: items, cssClass: 'e-caret-hide'});
|
||||
btnObj.appendTo('#custombtn');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -90,6 +90,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<style>
|
||||
/* custom code start */
|
||||
#progress-button-control {
|
||||
width: 100%;
|
||||
margin: 8% 0;
|
||||
|
|
@ -110,6 +111,7 @@
|
|||
#progress-button-control .col-xs-12 {
|
||||
margin: 18px 0;
|
||||
}
|
||||
/* custom code end */
|
||||
|
||||
#contract.e-progress-active .e-btn-content {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"{{ripple}}import { RadioButton } from '@syncfusion/ej2-buttons';\n\n/**\n * Default RadioButton sample\n */\n\n //Checked State\n let radioButton: RadioButton = new RadioButton({label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true});\n radioButton.appendTo('#radio1');\n\n radioButton = new RadioButton({label: 'Net Banking', name: 'payment', value: 'netbanking'});\n radioButton.appendTo('#radio2');\n\n radioButton = new RadioButton({label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery'});\n radioButton.appendTo('#radio3');\n\n radioButton = new RadioButton({label: 'Other Wallets', name: 'payment', value: 'others'});\n radioButton.appendTo('#radio4');\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n <div class=\"radio-control\">\n <h4 class=\"row\">Select a payment method</h4>\n <div class=\"row\">\n <input id=\"radio1\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio2\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio3\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio4\" type=\"radio\">\n </div>\n </div>\n</div>\n\n\n<style>\n /* RadioButton Styles */\n .radio-control {\n margin: 5% 0 5% 40%;\n }\n\n @media only screen and (max-width: 700px) {\n .radio-control {\n margin-left: 35%;\n margin-top: 8%;\n }\n\n .control-section {\n min-height: 200px;\n }\n }\n\n @media only screen and (max-width: 500px) {\n .radio-control {\n margin-top: 20%;\n margin-left: 21%;\n margin-bottom: 27%;\n }\n }\n\n .control-section .row {\n margin: 20px 0;\n }\n\n .radio-control h4 {\n color: rgba(0, 0, 0, 0.64);\n }\n\n .highcontrast .radio-control h4 {\n color: rgba(255, 255, 255, 0.64);\n }\n\n .e-bigger .radio-control h4 {\n font-size: 20px;\n }\n</style>\n</div></body></html>"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"control-section\">\n <div class=\"radio-control\">\n <h4 class=\"row\">Select a payment method</h4>\n <div class=\"row\">\n <input id=\"radio1\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio2\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio3\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio4\" type=\"radio\">\n </div>\n </div>\n</div>\n\n\n\n</div></body></html>","index.ts":"{{ripple}}\nimport { RadioButton } from '@syncfusion/ej2-buttons';\n\n/**\n * Default RadioButton sample\n */\n\n \n //Checked State\n let radioButton: RadioButton = new RadioButton({label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true});\n radioButton.appendTo('#radio1');\n\n radioButton = new RadioButton({label: 'Net Banking', name: 'payment', value: 'netbanking'});\n radioButton.appendTo('#radio2');\n\n radioButton = new RadioButton({label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery'});\n radioButton.appendTo('#radio3');\n\n radioButton = new RadioButton({label: 'Other Wallets', name: 'payment', value: 'others'});\n radioButton.appendTo('#radio4');\n"}
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
/* RadioButton Styles */
|
||||
.radio-control {
|
||||
|
|
@ -62,15 +63,8 @@
|
|||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.radio-control h4 {
|
||||
color: rgba(0, 0, 0, 0.64);
|
||||
}
|
||||
|
||||
.highcontrast .radio-control h4 {
|
||||
color: rgba(255, 255, 255, 0.64);
|
||||
}
|
||||
|
||||
.e-bigger .radio-control h4 {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { RadioButton } from '@syncfusion/ej2-buttons';
|
||||
|
||||
/**
|
||||
* Default RadioButton sample
|
||||
*/
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
//Checked State
|
||||
let radioButton: RadioButton = new RadioButton({label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true});
|
||||
radioButton.appendTo('#radio1');
|
||||
|
|
|
|||
|
|
@ -9,46 +9,46 @@
|
|||
"category": "Button",
|
||||
"ftName": "button",
|
||||
"api":{"Button":["isPrimary","cssClass", "iconCss", "isToggle", "iconPosition", "content"] },
|
||||
"description": "This demo for Essential JS2 Button shows its types (flat, toggle, outline, round, icon), sizes and styles (primary, success, info, warning) of buttons."
|
||||
"description": "This example demonstrates the types (flat, toogle, outline, round), sizes and styles (primary, success, info, warning) of the Syncfusion Javascript button."
|
||||
},
|
||||
{
|
||||
"url": "button-group",
|
||||
"name": "ButtonGroup",
|
||||
"name": "Button Group",
|
||||
"category": "Button",
|
||||
"ftName": "button-group",
|
||||
"description": "This demo for Syncfusion Essential JS2 Button Group control shows the horizontal group of buttons. This supports radio and checkbox type behaviors."
|
||||
"description": "This example demonstrates the behaviors (default, checkbox, radio) of the Syncfusion Javascript ButtonGroup."
|
||||
},
|
||||
{
|
||||
"url": "check-box",
|
||||
"name": "CheckBox",
|
||||
"url": "checkbox",
|
||||
"name": "Checkbox",
|
||||
"category": "Button",
|
||||
"ftName": "checkbox",
|
||||
"api":{"CheckBox":["label", "checked", "indeterminate", "disabled", "change"] },
|
||||
"description": "This demo for Essential JS2 Check Box control shows the checked, unchecked, and indeterminate states of checkbox. It also provide supports for specifying label"
|
||||
"description": "This example demonstrates the three different states (checked, unchecked, indeterminate) of the Syncfusion Javascript CheckBox."
|
||||
},
|
||||
{
|
||||
"url": "radio-button",
|
||||
"name": "RadioButton",
|
||||
"name": "Radio Button",
|
||||
"category": "Button",
|
||||
"ftName": "radio-button",
|
||||
"api":{"RadioButton":["label", "name", "value", "checked"] },
|
||||
"description": "This demo for Syncfusion Essential JS2 RadioButton control shows the radio button group functionality. It contains checked and unchecked state."
|
||||
"description": "This example demonstrates the group functionality of the Syncfusion Javascript RadioButton with checked and unchecked states."
|
||||
},
|
||||
{
|
||||
"url": "drop-down-button",
|
||||
"name": "DropDownButton",
|
||||
"url": "dropdown-button",
|
||||
"name": "Dropdown Menu",
|
||||
"category": "Button",
|
||||
"ftName": "dropdown-menu",
|
||||
"api":{"DropDownButton":["items", "cssClass", "iconCss"] },
|
||||
"description": "This demo for Essential JS2 DropDown Button control shows the use cases of drop down button. The popup contains action items with text, icons and separator."
|
||||
"description": "This example demonstrates the usecases of the Syncfusion Javascript DropDownMenu with icons, text and separator in popup action items."
|
||||
},
|
||||
{
|
||||
"url": "split-button",
|
||||
"name": "SplitButton",
|
||||
"name": "Split Button",
|
||||
"category": "Button",
|
||||
"ftName": "split-button",
|
||||
"api":{"SplitButton":[ "items", "content", "iconCss", "beforeItemRender"] },
|
||||
"description": "This demo for Syncfusion Essential JS2 SplitButton control shows the use cases of split button. The icons, text and both can be loaded in primary splitbutton."
|
||||
"description": "This example demonstrates the usecases of the Syncfusion Javascript SplitButton with icons and text in primary splitbutton."
|
||||
},
|
||||
{
|
||||
"url": "switch",
|
||||
|
|
@ -56,15 +56,15 @@
|
|||
"category": "Button",
|
||||
"ftName": "toggle-switch-button",
|
||||
"api":{"Switch":[ "checked", "disabled"] },
|
||||
"description": "This demo for Syncfusion Essential JS2 Switch control allows to toggle between the checked and unchecked states. It also provides support for custom UI."
|
||||
"description": "This example demonstrates the toggle states (checked, unchecked) of the Syncfusion Javascript Switch."
|
||||
},
|
||||
{
|
||||
"url": "progress-button",
|
||||
"name": "ProgressButton",
|
||||
"name": "Progress Button",
|
||||
"category": "Button",
|
||||
"ftName": "progress-button",
|
||||
"api":{"ProgressButton":["content", "iconCss", "cssClass", "duration", "disabled", "isPrimary", "enableProgress", "end", "begin", "spinSettings", "animationSettings"]},
|
||||
"description": "This demo for Essential JS2 Progress button has progress indicator and spinner. It supports texts, icons, styles, sizes, positions, and its customization."
|
||||
"description": "This example demonstrates the different functionalities of the Syncfusion Javascript ProgressButton with spinner and progress indicator."
|
||||
}
|
||||
]
|
||||
}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"{{ripple}}\nimport { Switch, rippleMouseHandler } from '@syncfusion/ej2-buttons';\n\n/**\n * Default Switch sample\n */\n\n\n \n\n let switchObj: Switch = new Switch({ name: 'hotspot', value: 'USB tethering', checked: true});\n switchObj.appendTo('#checked');\n\n switchObj = new Switch({ name: 'hotspot', value: 'Wi-Fi hotspot' });\n switchObj.appendTo('#unchecked');\n\n switchObj = new Switch({ name: 'hotspot', value: 'Bluetooth tethering', disabled: true });\n switchObj.appendTo('#disabled');\n\n // Function to handle ripple effect for Switch with label.\n let elemArray: NodeListOf<Element> = document.querySelectorAll('.switch-control label');\n for (let i: number = 0, len: number = elemArray.length; i < len; i++) {\n elemArray[i].addEventListener('mouseup', rippleHandler);\n elemArray[i].addEventListener('mousedown', rippleHandler);\n }\n\n function rippleHandler(e: MouseEvent): void {\n let rippleSpan: Element = this.nextElementSibling.querySelector('.e-ripple-container');\n if (rippleSpan) {\n rippleMouseHandler(e, rippleSpan);\n }\n }\n\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div class=\"container switch-control\">\n <div>\n <h4 class=\"heading\">Hotspot & tethering</h4>\n </div>\n <div>\n <label for=\"checked\" style=\"padding: 10px 70px 10px 0\"> USB Tethering </label>\n <input id=\"checked\" type=\"checkbox\">\n </div>\n\n <div>\n <label for=\"unchecked\" style=\"padding: 10px 24px 10px 0\"> Portable Wi-Fi hotspot </label>\n <input id=\"unchecked\" type=\"checkbox\">\n </div>\n <div>\n <label for=\"disabled\" class=\"e-disabled\" style=\"padding: 10px 40px 10px 0\"> Bluetooth Tethering </label>\n <input id=\"disabled\" type=\"checkbox\">\n </div>\n </div>\n </div>\n</div>\n \n \n <style>\n /* Switch Styles */\n .content-wrapper {\n margin-top: 47px;\n }\n\n .switch-control div {\n display: flex;\n align-items: center;\n }\n\n .switch-control .heading {\n text-indent: 15px;\n padding: 15px 0;\n }\n\n .switch-control {\n margin: 0 auto;\n width: 275px;\n }\n\n .switch-control label {\n -webkit-tap-highlight-color: transparent;\n cursor: pointer;\n user-select: none;\n font-weight: 400;\n font-size: 13px;\n }\n\n .switch-control .e-disabled {\n pointer-events: none;\n }\n </style>\n \n</div></body></html>"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div class=\"container switch-control\">\n <div>\n <h4 class=\"heading\">Hotspot & tethering</h4>\n </div>\n <div>\n <label for=\"checked\" style=\"padding: 10px 70px 10px 0\"> USB Tethering </label>\n <input id=\"checked\" type=\"checkbox\">\n </div>\n\n <div>\n <label for=\"unchecked\" style=\"padding: 10px 24px 10px 0\"> Portable Wi-Fi hotspot </label>\n <input id=\"unchecked\" type=\"checkbox\">\n </div>\n <div>\n <label for=\"disabled\" class=\"e-disabled\" style=\"padding: 10px 40px 10px 0\"> Bluetooth Tethering </label>\n <input id=\"disabled\" type=\"checkbox\">\n </div>\n </div>\n </div>\n</div>\n \n \n\n \n</div></body></html>","index.ts":"{{ripple}}\nimport { Switch, rippleMouseHandler } from '@syncfusion/ej2-buttons';\n\n/**\n * Default Switch sample\n */\n\n\n \n\n let switchObj: Switch = new Switch({ name: 'hotspot', value: 'USB tethering', checked: true});\n switchObj.appendTo('#checked');\n\n switchObj = new Switch({ name: 'hotspot', value: 'Wi-Fi hotspot' });\n switchObj.appendTo('#unchecked');\n\n switchObj = new Switch({ name: 'hotspot', value: 'Bluetooth tethering', disabled: true });\n switchObj.appendTo('#disabled');\n\n // Function to handle ripple effect for Switch with label.\n let elemArray: NodeListOf<Element> = document.querySelectorAll('.switch-control label');\n for (let i: number = 0, len: number = elemArray.length; i < len; i++) {\n elemArray[i].addEventListener('mouseup', rippleHandler);\n elemArray[i].addEventListener('mousedown', rippleHandler);\n }\n\n function rippleHandler(e: MouseEvent): void {\n let rippleSpan: Element = this.nextElementSibling.querySelector('.e-ripple-container');\n if (rippleSpan) {\n rippleMouseHandler(e, rippleSpan);\n }\n }\n\n"}
|
||||
|
|
@ -46,6 +46,7 @@
|
|||
documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
/* Switch Styles */
|
||||
.content-wrapper {
|
||||
|
|
@ -79,4 +80,5 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end -->
|
||||
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
<a href="https://ej2.syncfusion.com/documentation/calendar/date-range.html" target="_blank"> documentation section</a>.</p>
|
||||
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#date_label {
|
||||
display: block;
|
||||
|
|
@ -35,3 +36,4 @@
|
|||
color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
<p>More information on the calendar instantiation can be found in this
|
||||
<a href="https://ej2.syncfusion.com/documentation/calendar/getting-started.html#create-a-simple-calendar" target="_blank"> documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#date_label {
|
||||
display: block;
|
||||
|
|
@ -35,3 +36,4 @@
|
|||
color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
<p>More information on the disabled dates can be found in this
|
||||
<a href="https://ej2.syncfusion.com/documentation/calendar/customization.html" target="_blank"> documentation section</a>.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#date_label {
|
||||
display: block;
|
||||
|
|
@ -35,3 +36,4 @@
|
|||
color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
documentation section</a>.</p>
|
||||
</div>
|
||||
<style>
|
||||
/* custom code start*/
|
||||
#date_label {
|
||||
display: block;
|
||||
width: 248px;
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* custom code start*/
|
||||
.e-customStyle span.e-icons.highlight {
|
||||
margin-top: -13px;
|
||||
display: block;
|
||||
|
|
@ -89,6 +91,8 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* custom code start*/
|
||||
|
||||
/* custom generated icons styles */
|
||||
|
||||
@font-face {
|
||||
|
|
@ -113,6 +117,7 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* custom code start*/
|
||||
|
||||
/* end of custom generated icons styles */
|
||||
</style>
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { enableRipple } from '@syncfusion/ej2-base';
|
||||
enableRipple(false);
|
||||
import { Calendar, ChangedEventArgs, RenderDayCellEventArgs, Islamic } from '@syncfusion/ej2-calendars';
|
||||
import { addClass, L10n } from '@syncfusion/ej2-base';
|
||||
import { addClass } from '@syncfusion/ej2-base';
|
||||
Calendar.Inject(Islamic);
|
||||
|
||||
/**
|
||||
* Islamic Calendar sample
|
||||
*/
|
||||
|
||||
this.default = (): void => {
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
|
||||
let hijriCalendar: Calendar = new Calendar({
|
||||
change: valueChange,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<div class="col-lg-12 control-section">
|
||||
<div class="control_wrapper">
|
||||
<div id="container" style="overflow:auto">
|
||||
<div id="calendar"></div><br />
|
||||
<span id="date_label"> Selected Value: </span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
The following sample demonstrates the Calendar control acting as a month picker. It allows you to select values in terms of months.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
The Calendar has the <code>Start</code> and the <code>Depth</code> properties that provide options to restrict users from navigating to any Calendar view (year, month, or decade).</p>
|
||||
<p>More information on the Calendar Start/Depth can be found in the
|
||||
<a href="https://ej2.syncfusion.com/documentation/api/calendar/#start" target="_blank">Start</a>|<a
|
||||
href="https://ej2.syncfusion.com/documentation/api/calendar/#depth" target="_blank">Depth</a> documentation
|
||||
section.</p>
|
||||
</div>
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#date_label {
|
||||
display: block;
|
||||
width: 248px;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.control_wrapper {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body.highcontrast #date_label {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { loadCultureFiles } from '../common/culture-loader';
|
||||
import { Calendar, ChangedEventArgs } from '@syncfusion/ej2-calendars';
|
||||
import { Internationalization } from '@syncfusion/ej2-base';
|
||||
/**
|
||||
* Calendar Month Picker sample
|
||||
*/
|
||||
|
||||
(window as any).default = (): void => {
|
||||
loadCultureFiles();
|
||||
let calendar: Calendar = new Calendar({ start: 'Year', depth: 'Year', change: valueChange });
|
||||
calendar.appendTo('#calendar');
|
||||
let intl: Internationalization = new Internationalization();
|
||||
function valueChange(args: ChangedEventArgs): void {
|
||||
let value: string = intl.formatDate(args.value, { type: 'dateTime', format: 'MMMM y' });
|
||||
/*Displays selected date in the label*/
|
||||
(<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + value;
|
||||
}
|
||||
};
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<a href="https://ej2.syncfusion.com/documentation/calendar/getting-started.html#create-a-simple-calendar" target="_blank">
|
||||
documentation section</a>.</p>
|
||||
</div>
|
||||
|
||||
<!-- custom code start -->
|
||||
<style>
|
||||
#control_wrapper {
|
||||
max-width: 330px;
|
||||
|
|
@ -62,3 +62,4 @@
|
|||
border: 1px solid #969696;
|
||||
}
|
||||
</style>
|
||||
<!-- custom code end-->
|
||||
|
|
@ -2,13 +2,13 @@
|
|||
"name": "Calendar",
|
||||
"directory": "calendar",
|
||||
"category": "Calendars",
|
||||
"type": "update",
|
||||
"samples": [
|
||||
{ "url": "default", "name": "Default Functionalities", "category": "Calendar", "api":{"Calendar": [ "change" ]}, "description": "This example demonstrates a simple, mobile-friendly and responsive JavaScript (TypeScript) Calendar to select a date" },
|
||||
{ "url": "disabled", "name": "Disabled Dates", "category": "Calendar", "api":{"Calendar": [ "renderDayCell", "change" ]}, "description": "This example demonstrates how to disable the dates like weekends, weekdays and specific dates (past dates, future dates and current dates) in a JavaScript (TypeScript) Calendar" },
|
||||
{ "url": "disabled", "name": "Disabled Dates", "category": "Calendar", "api":{"Calendar": [ "renderDayCell", "change" ]}, "description": "This example demonstrates how to disable the dates like weekends, weekdays and specific dates (past , future and current) in a JavaScript (TypeScript) Calendar" },
|
||||
{ "url": "date-range", "name": "Date Range", "category": "Calendar", "api":{"Calendar": [ "min", "max", "change" ]}, "description": "This example demonstrates how to disables the specific range of dates (min and max) in a JavaScript (TypeScript) Calendar" },
|
||||
{ "url": "special-dates", "name": "Special Dates", "category": "Calendar", "api":{"Calendar": [ "renderDayCell", "change" ]}, "description": "This example demonstrates how to highlight the specific dates like weekends, holidays and special dates in a JavaScript (TypeScript) Calendar" },
|
||||
{ "url": "multi-selection", "name": "Multi Selection", "category": "Calendar", "api":{"Calendar": [ "isMultiSelection", "values" ]}, "description": "This example demonstrates how to select the multiple dates (more than one date) in a JavaScript (TypeScript) Calendar" },
|
||||
{ "url": "islamic-calendar", "name": "Islamic Calendar", "category": "Calendar", "type": "new", "api":{"Calendar": [ "isMultiSelection", "values" ]}}
|
||||
{ "url": "month-picker", "name": "Month Picker", "category": "Calendar", "api":{"Calendar": [ "start", "depth" ]}, "description": "The JavaScript Calendar control can act as a month and year picker. It helps you to select a month or year quickly with all month related properties."},
|
||||
{ "url": "islamic-calendar", "name": "Islamic Calendar", "category": "Calendar", "api":{"Calendar": [ "isMultiSelection", "values" ]}}
|
||||
]
|
||||
}
|
||||
|
|
@ -2,25 +2,30 @@
|
|||
<div class="control_wrapper">
|
||||
<div id="container" style="overflow:auto">
|
||||
<div id="calendar" class="e-customStyle"></div>
|
||||
<br/>
|
||||
<br />
|
||||
<span id="date_label"> Selected Value: </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
In the following sample, specific dates are <code>highlighted</code>. In desktop mode highlighted information about the date will be displayed when hovered.
|
||||
In the following sample, specific dates are <code>highlighted</code>. In desktop mode highlighted information
|
||||
about the date will be displayed when hovered.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Special Dates sample demonstrates, how to customize a specific dates in a calendar by using
|
||||
<code>renderDayCell</code> event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates in calendar. Here 10, 15 and 25 date's are customized with custom styles by adding the
|
||||
<code>renderDayCell</code> event. This event gets triggered on each day cell element creation that allows you to
|
||||
customize or disable the specific dates in calendar. Here 10, 15 and 25 date's are customized with custom styles
|
||||
by adding the
|
||||
<code>e-customStyle</code> class. </p>
|
||||
<p>More information on the calendar customization can be found in this
|
||||
<a href="https://ej2.syncfusion.com/documentation/calendar/customization.html" target="_blank"> documentation section</a>.</p>
|
||||
<a href="https://ej2.syncfusion.com/documentation/calendar/customization.html" target="_blank"> documentation
|
||||
section</a>.</p>
|
||||
</div>
|
||||
<style>
|
||||
/* custom code start*/
|
||||
#date_label {
|
||||
display: block;
|
||||
width: 248px;
|
||||
|
|
@ -33,6 +38,16 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-customStyle span.e-icons.highlight:before {
|
||||
vertical-align: none;
|
||||
}
|
||||
|
||||
.bootstrap4 .e-customStyle span.e-icons.highlight {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
||||
/* custom code end*/
|
||||
.e-customStyle span.e-icons.highlight {
|
||||
margin-top: -13px;
|
||||
display: block;
|
||||
|
|
@ -83,13 +98,16 @@
|
|||
body.highcontrast #date_label {
|
||||
color: white;
|
||||
}
|
||||
/* custom generated icons styles */
|
||||
|
||||
/* custom code start*/
|
||||
/* custom generated icons styles */
|
||||
@font-face {
|
||||
font-family: 'e-icons';
|
||||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjciQ6oAAAEoAAAAVmNtYXBH1Ec8AAABsAAAAHJnbHlmKcXfOQAAAkAAAAg4aGVhZBLt+DYAAADQAAAANmhoZWEHogNsAAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYQukCgIAAAIkAAAAGm1heHABGQEOAAABCAAAACBuYW1lR4040wAACngAAAJtcG9zdEFgIbwAAAzoAAAArAABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAADAABAAAAAQAAlbrm7l8PPPUACwPoAAAAANfuWa8AAAAA1+5ZrwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAAMAQIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4QLhkANS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABeAAAADgAIAAIABuEC4QnhD+ES4RvhkP//AADhAuEJ4QvhEuEa4ZD//wAAAAAAAAAAAAAAAAABAA4ADgAOABYAFgAYAAAAAQACAAYABAADAAgABwAKAAkABQALAAAAAAAAAB4AQABaAQYB5gJkAnoCjgKwA8oEHAAAAAIAAAAAA+oDlQAEAAoAAAEFESERCQEVCQE1AgcBZv0mAXQB5P4c/g4Cw/D+lwFpAcP+s24BTf6qbgAAAAEAAAAAA+oD6gALAAATCQEXCQEHCQEnCQF4AYgBiGP+eAGIY/54/nhjAYj+eAPr/ngBiGP+eP54YwGI/nhjAYgBiAAAAwAAAAAD6gOkAAMABwALAAA3IRUhESEVIREhFSEVA9b8KgPW/CoD1vwq6I0B64wB640AAAEAAAAAA+oD4QCaAAABMx8aHQEPDjEPAh8bIT8bNS8SPxsCAA0aGhgMDAsLCwoKCgkJCQgHBwYGBgUEBAMCAgECAwUFBggICQoLCwwMDg0GAgEBAgIDBAMIBiIdHh0cHBoZFhUSEAcFBgQDAwEB/CoBAQMDBAUGBw8SFRYYGhsbHB0cHwsJBQQEAwIBAQMEDg0NDAsLCQkJBwYGBAMCAQEBAgIDBAQFBQYGBwgICAkJCgoKCwsLDAwMGRoD4gMEBwQFBQYGBwgICAkKCgsLDAwNDQ4ODxAQEBEWFxYWFhYVFRQUExIRERAOFxMLCggIBgYFBgQMDAwNDg4QDxERERIJCQkKCQkJFRQJCQoJCQgJEhERERAPDw4NDQsMBwgFBgYICQkKDAwODw8RERMTExUUFhUWFxYWFxEQEBAPDg4NDQwMCwsKCgkICAgHBgYFBQQEBQQAAAAAAwAAAAAD8wPzAEEAZQDFAAABMx8FFREzHwYdAg8GIS8GPQI/BjM1KwEvBT0CPwUzNzMfBR0CDwUrAi8FPQI/BTMnDw8fFz8XLxcPBgI+BQQDAwMCAT8EBAMDAwIBAQIDAwMEBP7cBAQDAwMCAQECAwMDBAQ/PwQEAwMDAgEBAgMDAwQE0AUEAwMDAgEBAgMDAwQFfAUEAwMDAgEBAgMDAwQFvRsbGRcWFRMREA4LCQgFAwEBAwUHCgsOEBETFRYXGRocHR4eHyAgISIiISAgHx4eHRsbGRcWFRMREA4LCQgFAwEBAwUHCgsOEBETFRYXGRsbHR4eHyAgISIiISAgHx4eAqYBAgIDBAQE/rMBAQEDAwQEBGgEBAQDAgIBAQEBAgIDBAQEaAQEBAMDAQEB0AECAwMDBAVoBAQDAwMCAeUBAgIEAwQEaAUEAwMDAgEBAgMDAwQFaAQEAwQCAgElERMVFhcZGhwdHh4fICAhIiIhICAfHh4dGxsZFxYVExEQDgsJCAUDAQEDBQcKCw4QERMVFhcZGxsdHh4fICAhIiIhICAfHh4dHBoZFxYVExEQDgsKBwUDAQEDBQcKCw4AAAIAAAAAA9MD6QALAE8AAAEOAQcuASc+ATceAQEHBgcnJgYPAQYWHwEGFBcHDgEfAR4BPwEWHwEeATsBMjY/ATY3FxY2PwE2Ji8BNjQnNz4BLwEuAQ8BJi8BLgErASIGApsBY0tKYwICY0pLY/7WEy4nfAkRBWQEAwdqAwNqBwMEZAURCXwnLhMBDgnICg4BEy4mfQkRBGQFAwhpAwNpCAMFZAQSCH0mLhMBDgrICQ4B9UpjAgJjSkpjAgJjAZWEFB4yBAYIrggSBlIYMhhSBhIIrggFAzIfE4QJDAwJhBQeMgQGCK4IEgZSGDIYUgYSCK4IBQMyHxOECQwMAAEAAAAAAwED6gAFAAAJAicJAQEbAef+FhoBzf4zA+v+Ff4VHwHMAc0AAAAAAQAAAAADAQPqAAUAAAEXCQEHAQLlHf4zAc0a/hYD6x7+M/40HwHrAAEAAAAAA/MD8wALAAATCQEXCQE3CQEnCQENAY7+cmQBjwGPZP5yAY5k/nH+cQOP/nH+cWQBjv5yZAGPAY9k/nEBjwAAAwAAAAAD8wPzAEAAgQEBAAAlDw4rAS8dPQE/DgUVDw4BPw47AR8dBRUfHTsBPx09AS8dKwEPHQL1DQ0ODg4PDw8QEBAQERERERUUFBQTExITEREREBAPDw0ODAwLCwkJCAcGBgQEAgIBAgIEAwUFBgYHBwkICQoCygECAgQDBQUGBgcHCQgJCv3QDQ0ODg4PDw8QEBAQERERERUUFBQTExITEREREBAPDw0ODAwLCwkJCAcGBgQEAgL8fgIDBQUHCAkKCwwNDg8PERESExQUFRYWFhgXGBkZGRoaGRkZGBcYFhYWFRQUExIREQ8PDg0MCwoJCAcFBQMCAgMFBQcICQoLDA0ODw8RERITFBQVFhYWGBcYGRkZGhoZGRkYFxgWFhYVFBQTEhERDw8ODQwLCgkIBwUFAwLFCgkICQcHBgYFBQMEAgIBAgIEBAYGBwgJCQsLDAwODQ8PEBARERETEhMTFBQUFREREREQEBAQDw8PDg4ODQ31ERERERAQEBAPDw8ODg4NDQIwCgkICQcHBgYFBQMEAgIBAgIEBAYGBwgJCQsLDAwODQ8PEBARERETEhMTFBQUFRoZGRkYFxgWFhYVFBQTEhERDw8ODQwLCgkIBwUFAwICAwUFBwgJCgsMDQ4PDxEREhMUFBUWFhYYFxgZGRkaGhkZGRgXGBYWFhUUFBMSEREPDw4NDAsKCQgHBQUDAgIDBQUHCAkKCwwNDg8PERESExQUFRYWFhgXGBkZGQAAAQAAAAAD6gPqAEMAABMhHw8RDw8hLw8RPw6aAswNDgwMDAsKCggIBwUFAwIBAQIDBQUHCAgKCgsMDAwODf00DQ4MDAwLCgoICAcFBQMCAQECAwUFBwgICgoLDAwMDgPrAQIDBQUHCAgKCgsLDA0NDv00Dg0NDAsLCgoICAcFBQMCAQECAwUFBwgICgoLCwwNDQ4CzA4NDQwLCwoKCAgHBQUDAgAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA0AAQABAAAAAAACAAcADgABAAAAAAADAA0AFQABAAAAAAAEAA0AIgABAAAAAAAFAAsALwABAAAAAAAGAA0AOgABAAAAAAAKACwARwABAAAAAAALABIAcwADAAEECQAAAAIAhQADAAEECQABABoAhwADAAEECQACAA4AoQADAAEECQADABoArwADAAEECQAEABoAyQADAAEECQAFABYA4wADAAEECQAGABoA+QADAAEECQAKAFgBEwADAAEECQALACQBayBlLWljb25zLW1ldHJvUmVndWxhcmUtaWNvbnMtbWV0cm9lLWljb25zLW1ldHJvVmVyc2lvbiAxLjBlLWljb25zLW1ldHJvRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwAtAG0AZQB0AHIAbwBlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0AB2hvbWUtMDELQ2xvc2UtaWNvbnMHbWVudS0wMQR1c2VyB0JUX2luZm8PU2V0dGluZ19BbmRyb2lkDWNoZXZyb24tcmlnaHQMY2hldnJvbi1sZWZ0CE1UX0NsZWFyDE1UX0p1bmttYWlscwRzdG9wAAA=) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
font-family: 'e-icons';
|
||||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjciQ6oAAAEoAAAAVmNtYXBH1Ec8AAABsAAAAHJnbHlmKcXfOQAAAkAAAAg4aGVhZBLt+DYAAADQAAAANmhoZWEHogNsAAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYQukCgIAAAIkAAAAGm1heHABGQEOAAABCAAAACBuYW1lR4040wAACngAAAJtcG9zdEFgIbwAAAzoAAAArAABAAADUv9qAFoEAAAA//UD8wABAAAAAAAAAAAAAAAAAAAADAABAAAAAQAAlbrm7l8PPPUACwPoAAAAANfuWa8AAAAA1+5ZrwAAAAAD8wPzAAAACAACAAAAAAAAAAEAAAAMAQIAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4QLhkANS/2oAWgPzAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABeAAAADgAIAAIABuEC4QnhD+ES4RvhkP//AADhAuEJ4QvhEuEa4ZD//wAAAAAAAAAAAAAAAAABAA4ADgAOABYAFgAYAAAAAQACAAYABAADAAgABwAKAAkABQALAAAAAAAAAB4AQABaAQYB5gJkAnoCjgKwA8oEHAAAAAIAAAAAA+oDlQAEAAoAAAEFESERCQEVCQE1AgcBZv0mAXQB5P4c/g4Cw/D+lwFpAcP+s24BTf6qbgAAAAEAAAAAA+oD6gALAAATCQEXCQEHCQEnCQF4AYgBiGP+eAGIY/54/nhjAYj+eAPr/ngBiGP+eP54YwGI/nhjAYgBiAAAAwAAAAAD6gOkAAMABwALAAA3IRUhESEVIREhFSEVA9b8KgPW/CoD1vwq6I0B64wB640AAAEAAAAAA+oD4QCaAAABMx8aHQEPDjEPAh8bIT8bNS8SPxsCAA0aGhgMDAsLCwoKCgkJCQgHBwYGBgUEBAMCAgECAwUFBggICQoLCwwMDg0GAgEBAgIDBAMIBiIdHh0cHBoZFhUSEAcFBgQDAwEB/CoBAQMDBAUGBw8SFRYYGhsbHB0cHwsJBQQEAwIBAQMEDg0NDAsLCQkJBwYGBAMCAQEBAgIDBAQFBQYGBwgICAkJCgoKCwsLDAwMGRoD4gMEBwQFBQYGBwgICAkKCgsLDAwNDQ4ODxAQEBEWFxYWFhYVFRQUExIRERAOFxMLCggIBgYFBgQMDAwNDg4QDxERERIJCQkKCQkJFRQJCQoJCQgJEhERERAPDw4NDQsMBwgFBgYICQkKDAwODw8RERMTExUUFhUWFxYWFxEQEBAPDg4NDQwMCwsKCgkICAgHBgYFBQQEBQQAAAAAAwAAAAAD8wPzAEEAZQDFAAABMx8FFREzHwYdAg8GIS8GPQI/BjM1KwEvBT0CPwUzNzMfBR0CDwUrAi8FPQI/BTMnDw8fFz8XLxcPBgI+BQQDAwMCAT8EBAMDAwIBAQIDAwMEBP7cBAQDAwMCAQECAwMDBAQ/PwQEAwMDAgEBAgMDAwQE0AUEAwMDAgEBAgMDAwQFfAUEAwMDAgEBAgMDAwQFvRsbGRcWFRMREA4LCQgFAwEBAwUHCgsOEBETFRYXGRocHR4eHyAgISIiISAgHx4eHRsbGRcWFRMREA4LCQgFAwEBAwUHCgsOEBETFRYXGRsbHR4eHyAgISIiISAgHx4eAqYBAgIDBAQE/rMBAQEDAwQEBGgEBAQDAgIBAQEBAgIDBAQEaAQEBAMDAQEB0AECAwMDBAVoBAQDAwMCAeUBAgIEAwQEaAUEAwMDAgEBAgMDAwQFaAQEAwQCAgElERMVFhcZGhwdHh4fICAhIiIhICAfHh4dGxsZFxYVExEQDgsJCAUDAQEDBQcKCw4QERMVFhcZGxsdHh4fICAhIiIhICAfHh4dHBoZFxYVExEQDgsKBwUDAQEDBQcKCw4AAAIAAAAAA9MD6QALAE8AAAEOAQcuASc+ATceAQEHBgcnJgYPAQYWHwEGFBcHDgEfAR4BPwEWHwEeATsBMjY/ATY3FxY2PwE2Ji8BNjQnNz4BLwEuAQ8BJi8BLgErASIGApsBY0tKYwICY0pLY/7WEy4nfAkRBWQEAwdqAwNqBwMEZAURCXwnLhMBDgnICg4BEy4mfQkRBGQFAwhpAwNpCAMFZAQSCH0mLhMBDgrICQ4B9UpjAgJjSkpjAgJjAZWEFB4yBAYIrggSBlIYMhhSBhIIrggFAzIfE4QJDAwJhBQeMgQGCK4IEgZSGDIYUgYSCK4IBQMyHxOECQwMAAEAAAAAAwED6gAFAAAJAicJAQEbAef+FhoBzf4zA+v+Ff4VHwHMAc0AAAAAAQAAAAADAQPqAAUAAAEXCQEHAQLlHf4zAc0a/hYD6x7+M/40HwHrAAEAAAAAA/MD8wALAAATCQEXCQE3CQEnCQENAY7+cmQBjwGPZP5yAY5k/nH+cQOP/nH+cWQBjv5yZAGPAY9k/nEBjwAAAwAAAAAD8wPzAEAAgQEBAAAlDw4rAS8dPQE/DgUVDw4BPw47AR8dBRUfHTsBPx09AS8dKwEPHQL1DQ0ODg4PDw8QEBAQERERERUUFBQTExITEREREBAPDw0ODAwLCwkJCAcGBgQEAgIBAgIEAwUFBgYHBwkICQoCygECAgQDBQUGBgcHCQgJCv3QDQ0ODg4PDw8QEBAQERERERUUFBQTExITEREREBAPDw0ODAwLCwkJCAcGBgQEAgL8fgIDBQUHCAkKCwwNDg8PERESExQUFRYWFhgXGBkZGRoaGRkZGBcYFhYWFRQUExIREQ8PDg0MCwoJCAcFBQMCAgMFBQcICQoLDA0ODw8RERITFBQVFhYWGBcYGRkZGhoZGRkYFxgWFhYVFBQTEhERDw8ODQwLCgkIBwUFAwLFCgkICQcHBgYFBQMEAgIBAgIEBAYGBwgJCQsLDAwODQ8PEBARERETEhMTFBQUFREREREQEBAQDw8PDg4ODQ31ERERERAQEBAPDw8ODg4NDQIwCgkICQcHBgYFBQMEAgIBAgIEBAYGBwgJCQsLDAwODQ8PEBARERETEhMTFBQUFRoZGRkYFxgWFhYVFBQTEhERDw8ODQwLCgkIBwUFAwICAwUFBwgJCgsMDQ4PDxEREhMUFBUWFhYYFxgZGRkaGhkZGRgXGBYWFhUUFBMSEREPDw4NDAsKCQgHBQUDAgIDBQUHCAkKCwwNDg8PERESExQUFRYWFhgXGBkZGQAAAQAAAAAD6gPqAEMAABMhHw8RDw8hLw8RPw6aAswNDgwMDAsKCggIBwUFAwIBAQIDBQUHCAgKCgsMDAwODf00DQ4MDAwLCgoICAcFBQMCAQECAwUFBwgICgoLDAwMDgPrAQIDBQUHCAgKCgsLDA0NDv00Dg0NDAsLCgoICAcFBQMCAQECAwUFBwgICgoLCwwNDQ4CzA4NDQwLCwoKCAgHBQUDAgAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA0AAQABAAAAAAACAAcADgABAAAAAAADAA0AFQABAAAAAAAEAA0AIgABAAAAAAAFAAsALwABAAAAAAAGAA0AOgABAAAAAAAKACwARwABAAAAAAALABIAcwADAAEECQAAAAIAhQADAAEECQABABoAhwADAAEECQACAA4AoQADAAEECQADABoArwADAAEECQAEABoAyQADAAEECQAFABYA4wADAAEECQAGABoA+QADAAEECQAKAFgBEwADAAEECQALACQBayBlLWljb25zLW1ldHJvUmVndWxhcmUtaWNvbnMtbWV0cm9lLWljb25zLW1ldHJvVmVyc2lvbiAxLjBlLWljb25zLW1ldHJvRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwAtAG0AZQB0AHIAbwBlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAC0AbQBlAHQAcgBvAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0AB2hvbWUtMDELQ2xvc2UtaWNvbnMHbWVudS0wMQR1c2VyB0JUX2luZm8PU2V0dGluZ19BbmRyb2lkDWNoZXZyb24tcmlnaHQMY2hldnJvbi1sZWZ0CE1UX0NsZWFyDE1UX0p1bmttYWlscwRzdG9wAAA=) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* custom code end*/
|
||||
/* end of custom generated icons styles */
|
||||
</style>
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Cards.\n */\n\n \n //\n\n","index.html":"<html><head><link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"../node_modules/@syncfusion/ej2/{{theme}}.css\" rel=\"stylesheet\"><style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n <div class=\"e-card-resize-container\">\n <div class=\"row\">\n <div class=\"row card-layout\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Basic Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n </div>\n </div>\n <div class=\"e-card-content\">\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n </div>\n <div class=\"e-card-actions\">\n <button class=\"e-btn e-outline e-primary\">\n Read More\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Weather Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Today</div>\n <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n </div>\n </div>\n <div class=\"e-card-header weather_report\">\n <div class=\"e-card-header-image\"></div>\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">1º / -4º</div>\n <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n<style>\n /* Weather Card Layout Customization */\n\n .card-control-section.basic_card_layout #weather_card.e-card {\n background-image: url('//npmci.syncfusion.com/development/demos/src/card/images/weather.png');\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n color: white;\n }\n\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n border: none;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n text-align: right;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n background-image: url('//npmci.syncfusion.com/development/demos/src/card/images/rainy.svg');\n }\n\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 100%;\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n margin: auto;\n max-width: 400px;\n }\n\n @media (min-width: 870px) {\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 50%;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n max-width: 870px;\n }\n }\n</style>\n</div></body></html>"}
|
||||
{"index.html":"<html><head><link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\">\n<div class=\"col-lg-12 control-section card-control-section basic_card_layout\">\n <div class=\"e-card-resize-container\">\n <div class=\"row\">\n <div class=\"row card-layout\">\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Basic Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"basic_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Debunking Five Data Science Myths</div>\n <div class=\"e-card-sub-title\">By John Doe | Jan 20, 2018 </div>\n </div>\n </div>\n <div class=\"e-card-content\">\n Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds\n like the future and probably involves lots of numbers. Many of these topics can be grouped under\n the intimidating term data science.\n </div>\n <div class=\"e-card-actions\">\n <button class=\"e-btn e-outline e-primary\">\n Read More\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-xs-6 col-sm-6 col-lg-6 col-md-6\">\n <!-- Weather Card Layout -->\n <div tabindex=\"0\" class=\"e-card\" id=\"weather_card\">\n <div class=\"e-card-header\">\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">Today</div>\n <div class=\"e-card-sub-title\"> New York - Scattered Showers.</div>\n </div>\n </div>\n <div class=\"e-card-header weather_report\">\n <div class=\"e-card-header-image\"></div>\n <div class=\"e-card-header-caption\">\n <div class=\"e-card-header-title\">1º / -4º</div>\n <div class=\"e-card-sub-title\">Chance for snow: 100%</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n<style>\n /* Weather Card Layout Customization */\n\n .card-control-section.basic_card_layout #weather_card.e-card {\n background-image: url('//ej2.syncfusion.com/demos/src/card/images/weather.png');\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-header-title,\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header-caption .e-card-sub-title {\n color: white;\n }\n\n .highcontrast .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n border: none;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .weather_report .e-card-header-caption {\n text-align: right;\n }\n\n .card-control-section.basic_card_layout #weather_card.e-card .e-card-header.weather_report .e-card-header-image {\n background-image: url('//ej2.syncfusion.com/demos/src/card/images/rainy.svg');\n }\n\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 100%;\n padding: 10px;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n margin: auto;\n max-width: 400px;\n }\n\n @media (min-width: 870px) {\n .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {\n width: 50%;\n }\n\n .card-control-section.basic_card_layout .card-layout {\n max-width: 870px;\n }\n }\n</style>\n</div></body></html>","index.ts":"{{ripple}}\n/**\n * Sample for CSS Basic Layout Cards.\n */\n\n \n //\n\n"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -3,7 +3,7 @@ import { loadCultureFiles } from '../common/culture-loader';
|
|||
* Sample for CSS Swipeable Cards.
|
||||
*/
|
||||
// tslint:disable:max-line-length
|
||||
import { Touch, SwipeEventArgs, closest } from '@syncfusion/ej2-base';
|
||||
import { Touch, SwipeEventArgs, closest, isNullOrUndefined } from '@syncfusion/ej2-base';
|
||||
|
||||
|
||||
(window as any).default = (): void => {
|
||||
|
|
@ -41,7 +41,7 @@ import { Touch, SwipeEventArgs, closest } from '@syncfusion/ej2-base';
|
|||
}
|
||||
function touchSwipeHandler(e: SwipeEventArgs): void {
|
||||
let ele: HTMLElement = <HTMLElement>closest(<Element>e.originalEvent.target, '.e-card');
|
||||
if (!ele.classList.contains('e-card')) {
|
||||
if (isNullOrUndefined(ele)) {
|
||||
return;
|
||||
}
|
||||
if (ele.parentElement.querySelector('.card-out')) {
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче