diff --git a/404.html b/404.html index 1f112ebba..2c3b2daf6 100644 --- a/404.html +++ b/404.html @@ -10,13 +10,13 @@ - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/06e625b9.760f6587.js b/assets/js/06e625b9.760f6587.js new file mode 100644 index 000000000..989bf406a --- /dev/null +++ b/assets/js/06e625b9.760f6587.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[99023],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>g});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),m=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=m(e.components);return a.createElement(i.Provider,{value:t},e.children)},d="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),d=m(n),c=r,g=d["".concat(i,".").concat(c)]||d[c]||p[c]||o;return n?a.createElement(g,l(l({ref:t},u),{},{components:n})):a.createElement(g,l({ref:t},u))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=c;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[d]="string"==typeof e?e:r,l[1]=s;for(var m=2;m{n.d(t,{ZP:()=>d});var a=n(87462),r=n(67294),o=n(3905),l=n(72389);function s(e){let{children:t,fallback:n}=e;return(0,l.Z)()?r.createElement(r.Fragment,null,t?.()):n??null}n(73935);function i(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const m={toc:[]},u="wrapper";function d(e){let{components:t,...n}=e;return(0,o.kt)(u,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(i,{mdxType:"RenderAd"}))))}d.isMDXComponent=!0},75390:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>s,default:()=>c,frontMatter:()=>l,metadata:()=>i,toc:()=>u});var a=n(87462),r=(n(67294),n(3905)),o=n(58034);const l={title:"Blazor AutoComplete Component",description:"Blazor Bootstrap `AutoComplete` component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.",image:"https://i.imgur.com/gRcdvc0.png",sidebar_label:"Auto Complete",sidebar_position:1},s="Blazor Auto Complete",i={unversionedId:"forms/autocomplete",id:"forms/autocomplete",title:"Blazor AutoComplete Component",description:"Blazor Bootstrap `AutoComplete` component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.",source:"@site/docs/04-forms/autocomplete.mdx",sourceDirName:"04-forms",slug:"/forms/autocomplete",permalink:"/forms/autocomplete",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/04-forms/autocomplete.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Blazor AutoComplete Component",description:"Blazor Bootstrap `AutoComplete` component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.",image:"https://i.imgur.com/gRcdvc0.png",sidebar_label:"Auto Complete",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Icons",permalink:"/content/icons"},next:{title:"Currency Input",permalink:"/forms/currency-input"}},m={},u=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Events",id:"events",level:2},{value:"Keyboard Navigation",id:"keyboard-navigation",level:2},{value:"Examples",id:"examples",level:2},{value:"Client side data",id:"client-side-data",level:3},{value:"Client side data with StringComparision",id:"client-side-data-with-stringcomparision",level:3},{value:"Server side data",id:"server-side-data",level:3},{value:"Set default value",id:"set-default-value",level:3},{value:"Validations",id:"validations",level:3},{value:"Disable",id:"disable",level:3}],d={toc:u},p="wrapper";function c(e){let{components:t,...n}=e;return(0,r.kt)(p,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-auto-complete"},"Blazor Auto Complete"),(0,r.kt)("p",null,"Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering."),(0,r.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"DataProvider"),(0,r.kt)("td",{parentName:"tr",align:"left"},"delegate"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"DataProvider is for items to render. The provider should always return an instance of ",(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteDataProviderResult"),", and null is not allowed."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Disabled"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Is AutoComplete disabled."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"EmptyText"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"No records found.")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the empty text."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"LoadingText"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Loading...")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the loading text."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Placeholder"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete placeholder."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PropertyName"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete data text property name."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Size"),(0,r.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteSize.Default")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Use ",(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteSize.Default")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteSize.Large")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteSize.Small")),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"StringComparison"),(0,r.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.OrdinalIgnoreCase")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Specifies the culture, case, and sort rules to be used. Use ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.CurrentCulture")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.CurrentCultureIgnoreCase")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.InvariantCulture")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.InvariantCultureIgnoreCase")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.Ordinal")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.OrdinalIgnoreCase"),"."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"StringFilterOperator"),(0,r.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.Contains")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Use ",(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.Equals")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.Contains")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.StartsWith")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.EndsWith")),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Value"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete value."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ValueExpression"),(0,r.kt)("td",{parentName:"tr",align:"left"},"expression"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete value expression."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Returns"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Disable()"),(0,r.kt)("td",{parentName:"tr",align:"left"},"void"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Disables autocomplete."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Enable()"),(0,r.kt)("td",{parentName:"tr",align:"left"},"void"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Enables autocomplete."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"RefreshDataAsync()"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Refresh the autocomplete data."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ResetAsync()"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Resets the autocomplete selection."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")))),(0,r.kt)("h2",{id:"events"},"Events"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"OnChanged"),(0,r.kt)("td",{parentName:"tr",align:"left"},"This event fires immediately when the autocomplete selection changes by the user."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ValueChanged"),(0,r.kt)("td",{parentName:"tr",align:"left"},"This event fires on every user keystroke that changes the textbox value."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")))),(0,r.kt)("h2",{id:"keyboard-navigation"},"Keyboard Navigation"),(0,r.kt)("p",null,"Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions."),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Key"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Esc")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Closes the popup list when it is in an open state."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Up arrow")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Focuses on the previous item in the list."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Down arrow")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Focuses on the next item in the list."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Home")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Focuses on the first item in the list."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"End")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Focuses on the last item in the list."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Enter")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Selects the currently focused item."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"client-side-data"},"Client side data"),(0,r.kt)("img",{src:"https://i.imgur.com/gRcdvc0.png",alt:"Blazor Bootstrap AutoComplete Component - Client side data"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3-8} showLineNumbers","{3-8}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{6-12} showLineNumbers","{6-12}":!0,showLineNumbers:!0},'@code {\n private string customerName;\n\n public IEnumerable customers;\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n if (customers is null) // pull customers only one time for client-side autocomplete\n customers = GetCustomers(); // call a service or an API to pull the customers\n\n return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));\n }\n\n private IEnumerable GetCustomers()\n {\n return new List {\n new(1, "Pich S"),\n new(2, "sfh Sobi"),\n new(3, "Jojo chan"),\n new(4, "Jee ja"),\n new(5, "Rose Canon"),\n new(6, "Manju A"),\n new(7, "Bandita PA"),\n new(8, "Sagar Adil"),\n new(9, "Isha Wang"),\n new(10, "Daina JJ"),\n new(11, "Komala Mug"),\n new(12, "Dikshita BD"),\n new(13, "Neha Gosar"),\n new(14, "Preeti S"),\n new(15, "Sagar Seth"),\n new(16, "Vinayak MM"),\n new(17, "Vijaya Lakhsmi"),\n new(18, "Jahan K"),\n new(19, "Joy B"),\n new(20, "Zaraiah C"),\n new(21, "Laura L"),\n new(22, "Punith ES")\n };\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($"\'{customer?.CustomerName}\' selected.");\n }\n}\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"public record Customer(int CustomerId, string CustomerName);\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#client-side-data"},"See demo here")),(0,r.kt)("h3",{id:"client-side-data-with-stringcomparision"},"Client side data with StringComparision"),(0,r.kt)("p",null,"In the below example, ",(0,r.kt)("inlineCode",{parentName:"p"},"StringComparision.Ordinal")," is used to make the filter case-sensitive."),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},"By default, ",(0,r.kt)("inlineCode",{parentName:"p"},"StringComparison.OrdinalIgnoreCase")," is used to compare culture-agnostic and case-insensitive string matching.")),(0,r.kt)("img",{src:"https://i.imgur.com/8YZzW9f.png",alt:"Blazor Bootstrap AutoComplete Component - Client side data with StringComparision"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8} showLineNumbers","{8}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{6-12} showLineNumbers","{6-12}":!0,showLineNumbers:!0},'@code {\n private string customerName;\n\n public IEnumerable customers;\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n if (customers is null) // pull customers only one time for client-side autocomplete\n customers = GetCustomers(); // call a service or an API to pull the customers\n\n return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));\n }\n\n private IEnumerable GetCustomers()\n {\n return new List {\n new(1, "Pich S"),\n new(2, "sfh Sobi"),\n new(3, "Jojo chan"),\n new(4, "Jee ja"),\n new(5, "Rose Canon"),\n new(6, "Manju A"),\n new(7, "Bandita PA"),\n new(8, "Sagar Adil"),\n new(9, "Isha Wang"),\n new(10, "Daina JJ"),\n new(11, "Komala Mug"),\n new(12, "Dikshita BD"),\n new(13, "Neha Gosar"),\n new(14, "Preeti S"),\n new(15, "Sagar Seth"),\n new(16, "Vinayak MM"),\n new(17, "Vijaya Lakhsmi"),\n new(18, "Jahan K"),\n new(19, "Joy B"),\n new(20, "Zaraiah C"),\n new(21, "Laura L"),\n new(22, "Punith ES")\n };\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($"\'{customer?.CustomerName}\' selected.");\n }\n}\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"public record Customer(int CustomerId, string CustomerName);\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#client-side-data-with-string-comparision"},"See demo here")),(0,r.kt)("h3",{id:"server-side-data"},"Server side data"),(0,r.kt)("img",{src:"https://i.imgur.com/D5ox9um.png",alt:"Blazor Bootstrap AutoComplete Component - Server side data"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3-8} showLineNumbers","{3-8}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{6-10} showLineNumbers","{6-10}":!0,showLineNumbers:!0},"@code {\n private string customerName;\n\n [Inject] ICustomerService _customerService { get; set; }\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n var customers = await _customerService.GetCustomers(request.Filter, request.CancellationToken); // API call\n return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() });\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($\"'{customer?.CustomerName}' selected.\");\n }\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#server-side-data"},"See demo here")),(0,r.kt)("h3",{id:"set-default-value"},"Set default value"),(0,r.kt)("img",{src:"https://i.imgur.com/AMqyt8h.png",alt:"Blazor Bootstrap AutoComplete Component - Set default value"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-csharp"},'@code {\n private string customerName;\n\n public IEnumerable customers;\n\n protected override void OnInitialized()\n {\n customerName = "Pich S";\n }\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n if (customers is null) // pull customers only one time for client-side autocomplete\n customers = GetCustomers(); // call a service or an API to pull the customers\n\n return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));\n }\n\n private IEnumerable GetCustomers()\n {\n return new List {\n new(1, "Pich S"),\n new(2, "sfh Sobi"),\n new(3, "Jojo chan"),\n new(4, "Jee ja"),\n new(5, "Rose Canon"),\n new(6, "Manju A"),\n new(7, "Bandita PA"),\n new(8, "Sagar Adil"),\n new(9, "Isha Wang"),\n new(10, "Daina JJ"),\n new(11, "Komala Mug"),\n new(12, "Dikshita BD"),\n new(13, "Neha Gosar"),\n new(14, "Preeti S"),\n new(15, "Sagar Seth"),\n new(16, "Vinayak MM"),\n new(17, "Vijaya Lakhsmi"),\n new(18, "Jahan K"),\n new(19, "Joy B"),\n new(20, "Zaraiah C"),\n new(21, "Laura L"),\n new(22, "Punith ES")\n };\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($"\'{customer?.CustomerName}\' selected.");\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#set-default-value"},"See demo here")),(0,r.kt)("h3",{id:"validations"},"Validations"),(0,r.kt)("img",{src:"https://i.imgur.com/sMQ7Uc6.png",alt:"Blazor Bootstrap AutoComplete Component - Validations - Data empty"}),(0,r.kt)("img",{src:"https://i.imgur.com/4IzNcdp.png",alt:"Blazor Bootstrap AutoComplete Component - Validations - Item selected"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@using System.ComponentModel.DataAnnotations\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:"showLineNumbers",showLineNumbers:!0},"\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{7-13} showLineNumbers","{7-13}":!0,showLineNumbers:!0},'\n \n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n
\n \n
\n
\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private CustomerAddress customerAddress = new();\n private EditContext _editContext;\n\n [Inject] ICustomerService _customerService { get; set; }\n\n protected override void OnInitialized()\n {\n _editContext = new EditContext(customerAddress);\n base.OnInitialized();\n }\n\n public void HandleOnValidSubmit()\n {\n Console.WriteLine($"Customer name is {customerAddress.CustomerName} and address is {customerAddress.Address}");\n }\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n var customers = await _customerService.GetCustomers(request.Filter); // API call\n return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() });\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($"\'{customer?.CustomerName}\' selected.");\n Console.WriteLine($"Data null: {customer is null}.");\n }\n\n public class CustomerAddress\n {\n [Required]\n public string CustomerName { get; set; }\n\n [Required]\n public string Address { get; set; }\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#validations"},"See demo here")),(0,r.kt)("h3",{id:"disable"},"Disable"),(0,r.kt)("p",null,"Use the ",(0,r.kt)("b",null,"Disabled")," parameter to disable the AutoComplete."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8,13-15} showLineNumbers","{8,13-15}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{3,21,23,25} showLineNumbers","{3,21,23,25}":!0,showLineNumbers:!0},"@code {\n private string customerName = default!;\n private bool disabled = true;\n\n [Inject] ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call\n return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() });\n }\n\n private void OnAutoCompleteChanged(Customer2 customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($\"'{customer?.CustomerName}' selected.\");\n }\n\n private void Enable() => disabled = false;\n\n private void Disable() => disabled = true;\n\n private void Toggle() => disabled = !disabled;\n}\n")),(0,r.kt)("p",null,"Also, use ",(0,r.kt)("strong",{parentName:"p"},"Enable()")," and ",(0,r.kt)("strong",{parentName:"p"},"Disable()")," methods to enable and disable the AutoComplete."),(0,r.kt)("admonition",{title:"NOTE",type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"Do not use both the ",(0,r.kt)("strong",{parentName:"p"},"Disabled")," parameter and ",(0,r.kt)("strong",{parentName:"p"},"Enable()")," & ",(0,r.kt)("strong",{parentName:"p"},"Disable()")," methods.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,13-14} showLineNumbers","{3,13-14}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,21,23} showLineNumbers","{2,21,23}":!0,showLineNumbers:!0},"@code {\n private AutoComplete autoComplete1 = default!;\n private string customerName = default!;\n\n [Inject] ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call\n return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() });\n }\n\n private void OnAutoCompleteChanged(Customer2 customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($\"'{customer?.CustomerName}' selected.\");\n }\n\n private void Disable() => autoComplete1.Disable();\n\n private void Enable() => autoComplete1.Enable();\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#disable"},"See demo here")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/06e625b9.7936081f.js b/assets/js/06e625b9.7936081f.js deleted file mode 100644 index ad1f559c9..000000000 --- a/assets/js/06e625b9.7936081f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[99023],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>g});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),m=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=m(e.components);return a.createElement(i.Provider,{value:t},e.children)},d="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),d=m(n),c=r,g=d["".concat(i,".").concat(c)]||d[c]||p[c]||o;return n?a.createElement(g,l(l({ref:t},u),{},{components:n})):a.createElement(g,l({ref:t},u))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,l=new Array(o);l[0]=c;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[d]="string"==typeof e?e:r,l[1]=s;for(var m=2;m{n.d(t,{ZP:()=>d});var a=n(87462),r=n(67294),o=n(3905),l=n(72389);function s(e){let{children:t,fallback:n}=e;return(0,l.Z)()?r.createElement(r.Fragment,null,t?.()):n??null}n(73935);function i(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const m={toc:[]},u="wrapper";function d(e){let{components:t,...n}=e;return(0,o.kt)(u,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(i,{mdxType:"RenderAd"}))))}d.isMDXComponent=!0},75390:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>s,default:()=>c,frontMatter:()=>l,metadata:()=>i,toc:()=>u});var a=n(87462),r=(n(67294),n(3905)),o=n(58034);const l={title:"Blazor AutoComplete Component",description:"Blazor Bootstrap `AutoComplete` component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.",image:"https://i.imgur.com/gRcdvc0.png",sidebar_label:"Auto Complete",sidebar_position:1},s="Blazor Auto Complete",i={unversionedId:"forms/autocomplete",id:"forms/autocomplete",title:"Blazor AutoComplete Component",description:"Blazor Bootstrap `AutoComplete` component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.",source:"@site/docs/04-forms/autocomplete.mdx",sourceDirName:"04-forms",slug:"/forms/autocomplete",permalink:"/forms/autocomplete",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/04-forms/autocomplete.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Blazor AutoComplete Component",description:"Blazor Bootstrap `AutoComplete` component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.",image:"https://i.imgur.com/gRcdvc0.png",sidebar_label:"Auto Complete",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Icons",permalink:"/content/icons"},next:{title:"Currency Input",permalink:"/forms/currency-input"}},m={},u=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Events",id:"events",level:2},{value:"Keyboard Navigation",id:"keyboard-navigation",level:2},{value:"Examples",id:"examples",level:2},{value:"Client side data",id:"client-side-data",level:3},{value:"Client side data with StringComparision",id:"client-side-data-with-stringcomparision",level:3},{value:"Server side data",id:"server-side-data",level:3},{value:"Set default value",id:"set-default-value",level:3},{value:"Validations",id:"validations",level:3},{value:"Disable",id:"disable",level:3}],d={toc:u},p="wrapper";function c(e){let{components:t,...n}=e;return(0,r.kt)(p,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-auto-complete"},"Blazor Auto Complete"),(0,r.kt)("p",null,"Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering."),(0,r.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"DataProvider"),(0,r.kt)("td",{parentName:"tr",align:"left"},"delegate"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"DataProvider is for items to render. The provider should always return an instance of ",(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteDataProviderResult"),", and null is not allowed."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Disabled"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Is AutoComplete disabled."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"EmptyText"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"No records found.")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the empty text."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"LoadingText"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Loading...")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the loading text."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Placeholder"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete placeholder."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PropertyName"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete data text property name."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Size"),(0,r.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteSize.Default")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Use ",(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteSize.Default")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteSize.Large")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"AutoCompleteSize.Small")),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"StringComparison"),(0,r.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.OrdinalIgnoreCase")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Specifies the culture, case, and sort rules to be used. Use ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.CurrentCulture")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.CurrentCultureIgnoreCase")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.InvariantCulture")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.InvariantCultureIgnoreCase")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.Ordinal")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringComparison.OrdinalIgnoreCase"),"."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"StringFilterOperator"),(0,r.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.Contains")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Use ",(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.Equals")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.Contains")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.StartsWith")," or ",(0,r.kt)("inlineCode",{parentName:"td"},"StringFilterOperator.EndsWith")),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Value"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete value."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ValueExpression"),(0,r.kt)("td",{parentName:"tr",align:"left"},"expression"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete value expression."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Returns"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Disable()"),(0,r.kt)("td",{parentName:"tr",align:"left"},"void"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Disables autocomplete."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Enable()"),(0,r.kt)("td",{parentName:"tr",align:"left"},"void"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Enables autocomplete."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"RefreshDataAsync()"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Refresh the autocomplete data."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ResetAsync()"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Resets the autocomplete selection."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")))),(0,r.kt)("h2",{id:"events"},"Events"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"OnChanged"),(0,r.kt)("td",{parentName:"tr",align:"left"},"This event fires immediately when the autocomplete selection changes by the user."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ValueChanged"),(0,r.kt)("td",{parentName:"tr",align:"left"},"This event fires on every user keystroke that changes the textbox value."),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.4.0")))),(0,r.kt)("h2",{id:"keyboard-navigation"},"Keyboard Navigation"),(0,r.kt)("p",null,"Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions."),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Key"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Esc")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Closes the popup list when it is in an open state."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Up arrow")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Focuses on the previous item in the list."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Down arrow")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Focuses on the next item in the list."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Home")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Focuses on the first item in the list."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"End")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Focuses on the last item in the list."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("kbd",null,"Enter")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Selects the currently focused item."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.3.1")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"client-side-data"},"Client side data"),(0,r.kt)("img",{src:"https://i.imgur.com/gRcdvc0.png",alt:"Blazor Bootstrap AutoComplete Component - Client side data"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3-8} showLineNumbers","{3-8}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{6-12} showLineNumbers","{6-12}":!0,showLineNumbers:!0},'@code {\n private string customerName;\n\n public IEnumerable customers;\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n if (customers is null) // pull customers only one time for client-side autocomplete\n customers = GetCustomers(); // call a service or an API to pull the customers\n\n return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));\n }\n\n private IEnumerable GetCustomers()\n {\n return new List {\n new(1, "Pich S"),\n new(2, "sfh Sobi"),\n new(3, "Jojo chan"),\n new(4, "Jee ja"),\n new(5, "Rose Canon"),\n new(6, "Manju A"),\n new(7, "Bandita PA"),\n new(8, "Sagar Adil"),\n new(9, "Isha Wang"),\n new(10, "Daina JJ"),\n new(11, "Komala Mug"),\n new(12, "Dikshita BD"),\n new(13, "Neha Gosar"),\n new(14, "Preeti S"),\n new(15, "Sagar Seth"),\n new(16, "Vinayak MM"),\n new(17, "Vijaya Lakhsmi"),\n new(18, "Jahan K"),\n new(19, "Joy B"),\n new(20, "Zaraiah C"),\n new(21, "Laura L"),\n new(22, "Punith ES")\n };\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($"\'{customer?.CustomerName}\' selected.");\n }\n}\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"public record Customer(int CustomerId, string CustomerName);\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#client-side-data"},"See demo here")),(0,r.kt)("h3",{id:"client-side-data-with-stringcomparision"},"Client side data with StringComparision"),(0,r.kt)("p",null,"In the below example, ",(0,r.kt)("inlineCode",{parentName:"p"},"StringComparision.Ordinal")," is used to make the filter case-sensitive."),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},"By default, ",(0,r.kt)("inlineCode",{parentName:"p"},"StringComparison.OrdinalIgnoreCase")," is used to compare culture-agnostic and case-insensitive string matching.")),(0,r.kt)("img",{src:"https://i.imgur.com/8YZzW9f.png",alt:"Blazor Bootstrap AutoComplete Component - Client side data with StringComparision"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8} showLineNumbers","{8}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{6-12} showLineNumbers","{6-12}":!0,showLineNumbers:!0},'@code {\n private string customerName;\n\n public IEnumerable customers;\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n if (customers is null) // pull customers only one time for client-side autocomplete\n customers = GetCustomers(); // call a service or an API to pull the customers\n\n return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));\n }\n\n private IEnumerable GetCustomers()\n {\n return new List {\n new(1, "Pich S"),\n new(2, "sfh Sobi"),\n new(3, "Jojo chan"),\n new(4, "Jee ja"),\n new(5, "Rose Canon"),\n new(6, "Manju A"),\n new(7, "Bandita PA"),\n new(8, "Sagar Adil"),\n new(9, "Isha Wang"),\n new(10, "Daina JJ"),\n new(11, "Komala Mug"),\n new(12, "Dikshita BD"),\n new(13, "Neha Gosar"),\n new(14, "Preeti S"),\n new(15, "Sagar Seth"),\n new(16, "Vinayak MM"),\n new(17, "Vijaya Lakhsmi"),\n new(18, "Jahan K"),\n new(19, "Joy B"),\n new(20, "Zaraiah C"),\n new(21, "Laura L"),\n new(22, "Punith ES")\n };\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($"\'{customer?.CustomerName}\' selected.");\n }\n}\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"public record Customer(int CustomerId, string CustomerName);\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#client-side-data-with-string-comparision"},"See demo here")),(0,r.kt)("h3",{id:"server-side-data"},"Server side data"),(0,r.kt)("img",{src:"https://i.imgur.com/D5ox9um.png",alt:"Blazor Bootstrap AutoComplete Component - Server side data"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3-8} showLineNumbers","{3-8}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{6-10} showLineNumbers","{6-10}":!0,showLineNumbers:!0},"@code {\n private string customerName;\n\n [Inject] ICustomerService _customerService { get; set; }\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n var customers = await _customerService.GetCustomers(request.Filter, request.CancellationToken); // API call\n return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() });\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($\"'{customer?.CustomerName}' selected.\");\n }\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#server-side-data"},"See demo here")),(0,r.kt)("h3",{id:"set-default-value"},"Set default value"),(0,r.kt)("img",{src:"https://i.imgur.com/AMqyt8h.png",alt:"Blazor Bootstrap AutoComplete Component - Set default value"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-csharp"},'@code {\n private string customerName;\n\n public IEnumerable customers;\n\n protected override void OnInitialized()\n {\n customerName = "Pich S";\n }\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n if (customers is null) // pull customers only one time for client-side autocomplete\n customers = GetCustomers(); // call a service or an API to pull the customers\n\n return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));\n }\n\n private IEnumerable GetCustomers()\n {\n return new List {\n new(1, "Pich S"),\n new(2, "sfh Sobi"),\n new(3, "Jojo chan"),\n new(4, "Jee ja"),\n new(5, "Rose Canon"),\n new(6, "Manju A"),\n new(7, "Bandita PA"),\n new(8, "Sagar Adil"),\n new(9, "Isha Wang"),\n new(10, "Daina JJ"),\n new(11, "Komala Mug"),\n new(12, "Dikshita BD"),\n new(13, "Neha Gosar"),\n new(14, "Preeti S"),\n new(15, "Sagar Seth"),\n new(16, "Vinayak MM"),\n new(17, "Vijaya Lakhsmi"),\n new(18, "Jahan K"),\n new(19, "Joy B"),\n new(20, "Zaraiah C"),\n new(21, "Laura L"),\n new(22, "Punith ES")\n };\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($"\'{customer?.CustomerName}\' selected.");\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#set-default-value"},"See demo here")),(0,r.kt)("h3",{id:"validations"},"Validations"),(0,r.kt)("img",{src:"https://i.imgur.com/sMQ7Uc6.png",alt:"Blazor Bootstrap AutoComplete Component - Validations - Data empty"}),(0,r.kt)("img",{src:"https://i.imgur.com/4IzNcdp.png",alt:"Blazor Bootstrap AutoComplete Component - Validations - Item selected"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@using System.ComponentModel.DataAnnotations\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html",metastring:"showLineNumbers",showLineNumbers:!0},"\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{7-13} showLineNumbers","{7-13}":!0,showLineNumbers:!0},'\n \n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n
\n \n
\n
\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private CustomerAddress customerAddress = new();\n private EditContext _editContext;\n\n [Inject] ICustomerService _customerService { get; set; }\n\n protected override void OnInitialized()\n {\n _editContext = new EditContext(customerAddress);\n base.OnInitialized();\n }\n\n public void HandleOnValidSubmit()\n {\n Console.WriteLine($"Customer name is {customerAddress.CustomerName} and address is {customerAddress.Address}");\n }\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n var customers = await _customerService.GetCustomers(request.Filter); // API call\n return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() });\n }\n\n private void OnAutoCompleteChanged(Customer customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($"\'{customer?.CustomerName}\' selected.");\n Console.WriteLine($"Data null: {customer is null}.");\n }\n\n public class CustomerAddress\n {\n [Required]\n public string CustomerName { get; set; }\n\n [Required]\n public string Address { get; set; }\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#validations"},"See demo here")),(0,r.kt)("h3",{id:"disable"},"Disable"),(0,r.kt)("p",null,"Use the ",(0,r.kt)("b",null,"Disabled")," parameter to disable the AutoComplete."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8,13-15} showLineNumbers","{8,13-15}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{3,21,23,25} showLineNumbers","{3,21,23,25}":!0,showLineNumbers:!0},"@code {\n private string customerName = default!;\n private bool disabled = true;\n\n [Inject] ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call\n return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() });\n }\n\n private void OnAutoCompleteChanged(Customer2 customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($\"'{customer?.CustomerName}' selected.\");\n }\n\n private void Enable() => disabled = false;\n\n private void Disable() => disabled = true;\n\n private void Toggle() => disabled = !disabled;\n}\n")),(0,r.kt)("p",null,"Also, use ",(0,r.kt)("strong",{parentName:"p"},"Enable()")," and ",(0,r.kt)("strong",{parentName:"p"},"Disable()")," methods to enable and disable the AutoComplete."),(0,r.kt)("admonition",{title:"NOTE",type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"Do not use both the ",(0,r.kt)("strong",{parentName:"p"},"Disabled")," parameter and ",(0,r.kt)("strong",{parentName:"p"},"Enable()")," & ",(0,r.kt)("strong",{parentName:"p"},"Disable()")," methods.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,13-14} showLineNumbers","{3,13-14}":!0,showLineNumbers:!0},'
\n
\n \n
\n
\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,21,23} showLineNumbers","{2,21,23}":!0,showLineNumbers:!0},"@code {\n private AutoComplete autoComplete1 = default!;\n private string customerName = default!;\n\n [Inject] ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request)\n {\n var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call\n return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() });\n }\n\n private void OnAutoCompleteChanged(Customer2 customer)\n {\n // TODO: handle your own logic\n\n // NOTE: do null check\n Console.WriteLine($\"'{customer?.CustomerName}' selected.\");\n }\n\n private void Disable() => autoComplete1.Disable();\n\n private void Enable() => autoComplete1.Enable();\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/autocomplete#disable"},"See demo here")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/15d6b0c8.98665938.js b/assets/js/15d6b0c8.98665938.js deleted file mode 100644 index 733c4291f..000000000 --- a/assets/js/15d6b0c8.98665938.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[70057],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>b});var a=r(67294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var i=a.createContext({}),p=function(e){var t=a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},m=function(e){var t=p(e.components);return a.createElement(i.Provider,{value:t},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(r),d=n,b=c["".concat(i,".").concat(d)]||c[d]||u[d]||o;return r?a.createElement(b,l(l({ref:t},m),{},{components:r})):a.createElement(b,l({ref:t},m))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=d;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[c]="string"==typeof e?e:n,l[1]=s;for(var p=2;p{r.d(t,{ZP:()=>c});var a=r(87462),n=r(67294),o=r(3905),l=r(72389);function s(e){let{children:t,fallback:r}=e;return(0,l.Z)()?n.createElement(n.Fragment,null,t?.()):r??null}r(73935);function i(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const p={toc:[]},m="wrapper";function c(e){let{components:t,...r}=e;return(0,o.kt)(m,(0,a.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(i,{mdxType:"RenderAd"}))))}c.isMDXComponent=!0},27885:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>d,frontMatter:()=>l,metadata:()=>i,toc:()=>m});var a=r(87462),n=(r(67294),r(3905)),o=r(58034);const l={id:"blazor-server",sidebar_label:"Blazor Server",sidebar_position:2,title:"Blazor Server"},s="Layout Setup - Blazor WebAssembly",i={unversionedId:"layout/blazor-server",id:"layout/blazor-server",title:"Blazor Server",description:"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.",source:"@site/docs/02-layout/getting-started-server.mdx",sourceDirName:"02-layout",slug:"/layout/blazor-server",permalink:"/layout/blazor-server",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/02-layout/getting-started-server.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{id:"blazor-server",sidebar_label:"Blazor Server",sidebar_position:2,title:"Blazor Server"},sidebar:"tutorialSidebar",previous:{title:"Blazor WebAssembly",permalink:"/layout/blazor-webassembly"},next:{title:"Icons",permalink:"/content/icons"}},p={},m=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Steps",id:"steps",level:2},{value:"Starter templates",id:"starter-templates",level:2},{value:".NET 6",id:"net-6",level:3},{value:".NET 7",id:"net-7",level:3}],c={toc:m},u="wrapper";function d(e){let{components:t,...r}=e;return(0,n.kt)(u,(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"layout-setup---blazor-webassembly"},"Layout Setup - Blazor WebAssembly"),(0,n.kt)("p",null,"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework."),(0,n.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("h2",{id:"prerequisites"},"Prerequisites"),(0,n.kt)("p",null,"Assuming you followed the getting started docs for the initial setup."),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("strong",{parentName:"li"},"Blazor WebAssembly Project:")," Follow the ",(0,n.kt)("a",{parentName:"li",href:"/getting-started/blazor-webassembly"},"getting started")," steps for the initial setup."),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("strong",{parentName:"li"},"Blazor Server Project:")," Follow the ",(0,n.kt)("a",{parentName:"li",href:"/getting-started/blazor-server"},"getting started")," steps for the initial setup.")),(0,n.kt)("h2",{id:"steps"},"Steps"),(0,n.kt)("p",null,"Replace ",(0,n.kt)("strong",{parentName:"p"},"MainLayout.razor")," page code with the below code."),(0,n.kt)("admonition",{title:"NOTE",type:"danger"},(0,n.kt)("p",{parentName:"admonition"},"Remove all the CSS content from the ",(0,n.kt)("strong",{parentName:"p"},"Shared/MainLayout.razor.css")," file.")),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@inherits LayoutComponentBase\n\n
\n\n \n\n
\n
\n About\n
\n\n
\n
\n @Body\n
\n
\n
\n\n
\n\n@code {\n private Sidebar sidebar = default!;\n private IEnumerable navItems = default!;\n\n private async Task SidebarDataProvider(SidebarDataProviderRequest request)\n {\n if (navItems is null)\n navItems = GetNavItems();\n\n return await Task.FromResult(request.ApplyTo(navItems));\n }\n\n private IEnumerable GetNavItems()\n {\n navItems = new List\n {\n new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},\n new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},\n new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},\n };\n\n return navItems;\n }\n}\n')),(0,n.kt)("h2",{id:"starter-templates"},"Starter templates"),(0,n.kt)("h3",{id:"net-6"},".NET 6"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET6.BlazorWebAssemblyApp"},"Blazor Bootstrap - Blazor WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/aRV3rJm.png",alt:"Blazor Bootstrap - Blazor WebAssembly App"}))),(0,n.kt)("h3",{id:"net-7"},".NET 7"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyApp"},"Blazor Bootstrap - Blazor WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/4P8u0HR.png",alt:"Blazor Bootstrap - Blazor WebAssembly App"})),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyAppEmpty"},"Blazor Bootstrap - Blazor Empty WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/CBEoZ6P.png",alt:"Blazor Bootstrap - Blazor Empty WebAssembly App"}))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/15d6b0c8.b3acff3a.js b/assets/js/15d6b0c8.b3acff3a.js new file mode 100644 index 000000000..aae552438 --- /dev/null +++ b/assets/js/15d6b0c8.b3acff3a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[70057],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>b});var a=r(67294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var i=a.createContext({}),p=function(e){var t=a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},m=function(e){var t=p(e.components);return a.createElement(i.Provider,{value:t},e.children)},c="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(r),d=n,b=c["".concat(i,".").concat(d)]||c[d]||u[d]||o;return r?a.createElement(b,l(l({ref:t},m),{},{components:r})):a.createElement(b,l({ref:t},m))}));function b(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=d;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[c]="string"==typeof e?e:n,l[1]=s;for(var p=2;p{r.d(t,{ZP:()=>c});var a=r(87462),n=r(67294),o=r(3905),l=r(72389);function s(e){let{children:t,fallback:r}=e;return(0,l.Z)()?n.createElement(n.Fragment,null,t?.()):r??null}r(73935);function i(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const p={toc:[]},m="wrapper";function c(e){let{components:t,...r}=e;return(0,o.kt)(m,(0,a.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(i,{mdxType:"RenderAd"}))))}c.isMDXComponent=!0},27885:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>d,frontMatter:()=>l,metadata:()=>i,toc:()=>m});var a=r(87462),n=(r(67294),r(3905)),o=r(58034);const l={id:"blazor-server",sidebar_label:"Blazor Server",sidebar_position:2,title:"Blazor Server"},s="Layout Setup - Blazor WebAssembly",i={unversionedId:"layout/blazor-server",id:"layout/blazor-server",title:"Blazor Server",description:"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.",source:"@site/docs/02-layout/getting-started-server.mdx",sourceDirName:"02-layout",slug:"/layout/blazor-server",permalink:"/layout/blazor-server",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/02-layout/getting-started-server.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{id:"blazor-server",sidebar_label:"Blazor Server",sidebar_position:2,title:"Blazor Server"},sidebar:"tutorialSidebar",previous:{title:"Blazor WebAssembly",permalink:"/layout/blazor-webassembly"},next:{title:"Icons",permalink:"/content/icons"}},p={},m=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Steps",id:"steps",level:2},{value:"Starter templates",id:"starter-templates",level:2},{value:".NET 6",id:"net-6",level:3},{value:".NET 7",id:"net-7",level:3}],c={toc:m},u="wrapper";function d(e){let{components:t,...r}=e;return(0,n.kt)(u,(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"layout-setup---blazor-webassembly"},"Layout Setup - Blazor WebAssembly"),(0,n.kt)("p",null,"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework."),(0,n.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("h2",{id:"prerequisites"},"Prerequisites"),(0,n.kt)("p",null,"Assuming you followed the getting started docs for the initial setup."),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("strong",{parentName:"li"},"Blazor WebAssembly Project:")," Follow the ",(0,n.kt)("a",{parentName:"li",href:"/getting-started/blazor-webassembly"},"getting started")," steps for the initial setup."),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("strong",{parentName:"li"},"Blazor Server Project:")," Follow the ",(0,n.kt)("a",{parentName:"li",href:"/getting-started/blazor-server"},"getting started")," steps for the initial setup.")),(0,n.kt)("h2",{id:"steps"},"Steps"),(0,n.kt)("p",null,"Replace ",(0,n.kt)("strong",{parentName:"p"},"MainLayout.razor")," page code with the below code."),(0,n.kt)("admonition",{title:"NOTE",type:"danger"},(0,n.kt)("p",{parentName:"admonition"},"Remove all the CSS content from the ",(0,n.kt)("strong",{parentName:"p"},"Shared/MainLayout.razor.css")," file.")),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@inherits LayoutComponentBase\n\n
\n\n \n\n
\n
\n About\n
\n\n
\n
\n @Body\n
\n
\n
\n\n
\n\n@code {\n private Sidebar sidebar = default!;\n private IEnumerable navItems = default!;\n\n private async Task SidebarDataProvider(SidebarDataProviderRequest request)\n {\n if (navItems is null)\n navItems = GetNavItems();\n\n return await Task.FromResult(request.ApplyTo(navItems));\n }\n\n private IEnumerable GetNavItems()\n {\n navItems = new List\n {\n new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},\n new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},\n new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},\n };\n\n return navItems;\n }\n}\n')),(0,n.kt)("h2",{id:"starter-templates"},"Starter templates"),(0,n.kt)("h3",{id:"net-6"},".NET 6"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET6.BlazorWebAssemblyApp"},"Blazor Bootstrap - Blazor WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/aRV3rJm.png",alt:"Blazor Bootstrap - Blazor WebAssembly App"}))),(0,n.kt)("h3",{id:"net-7"},".NET 7"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyApp"},"Blazor Bootstrap - Blazor WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/4P8u0HR.png",alt:"Blazor Bootstrap - Blazor WebAssembly App"})),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyAppEmpty"},"Blazor Bootstrap - Blazor Empty WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/CBEoZ6P.png",alt:"Blazor Bootstrap - Blazor Empty WebAssembly App"}))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1677a4a2.6a8e01c7.js b/assets/js/1677a4a2.6a8e01c7.js new file mode 100644 index 000000000..8495532b9 --- /dev/null +++ b/assets/js/1677a4a2.6a8e01c7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[94026],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>b});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),d=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=d(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,m=o(e,["components","mdxType","originalType","parentName"]),p=d(n),c=r,b=p["".concat(s,".").concat(c)]||p[c]||u[c]||i;return n?a.createElement(b,l(l({ref:t},m),{},{components:n})):a.createElement(b,l({ref:t},m))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,l=new Array(i);l[0]=c;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o[p]="string"==typeof e?e:r,l[1]=o;for(var d=2;d{n.d(t,{ZP:()=>p});var a=n(87462),r=n(67294),i=n(3905),l=n(72389);function o(e){let{children:t,fallback:n}=e;return(0,l.Z)()?r.createElement(r.Fragment,null,t?.()):n??null}n(73935);function s(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const d={toc:[]},m="wrapper";function p(e){let{components:t,...n}=e;return(0,i.kt)(m,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},13372:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>s,toc:()=>m});var a=n(87462),r=(n(67294),n(3905)),i=n(58034);const l={title:"Blazor Date Input Component",description:'Blazor Bootstrap `DateInput` component is constructed using an HTML input of `type="date"` which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.',image:"https://i.imgur.com/1mVjqQv.png",sidebar_label:"Date Input",sidebar_position:3},o="Blazor Date Input",s={unversionedId:"forms/date-input",id:"forms/date-input",title:"Blazor Date Input Component",description:'Blazor Bootstrap `DateInput` component is constructed using an HTML input of `type="date"` which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.',source:"@site/docs/04-forms/date-input.mdx",sourceDirName:"04-forms",slug:"/forms/date-input",permalink:"/forms/date-input",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/04-forms/date-input.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Blazor Date Input Component",description:'Blazor Bootstrap `DateInput` component is constructed using an HTML input of `type="date"` which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.',image:"https://i.imgur.com/1mVjqQv.png",sidebar_label:"Date Input",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Currency Input",permalink:"/forms/currency-input"},next:{title:"Number Input",permalink:"/forms/number-input"}},d={},m=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Events",id:"events",level:2},{value:"Examples",id:"examples",level:2},{value:"Basic usage",id:"basic-usage",level:3},{value:"Generic type",id:"generic-type",level:3},{value:"Enable min and max",id:"enable-min-and-max",level:3},{value:"Disable",id:"disable",level:3},{value:"Validations",id:"validations",level:3},{value:"Events: ValueChanged",id:"events-valuechanged",level:3},{value:"Restrict the date field based on the entry in another date field",id:"restrict-the-date-field-based-on-the-entry-in-another-date-field",level:3}],p={toc:m},u="wrapper";function c(e){let{components:t,...n}=e;return(0,r.kt)(u,(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-date-input"},"Blazor Date Input"),(0,r.kt)("p",null,"Blazor Bootstrap ",(0,r.kt)("inlineCode",{parentName:"p"},"DateInput")," component is constructed using an HTML input of ",(0,r.kt)("inlineCode",{parentName:"p"},'type="date"')," which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface."),(0,r.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("img",{src:"https://i.imgur.com/1mVjqQv.png",alt:"Blazor Bootstrap: Date Input Component"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Indicates whether the DateInput can complete the values automatically by the browser."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Disabled"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the disabled."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"EnableMinMax"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Max"),(0,r.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},'Gets or sets the max. Max ignored if EnableMinMax="false".'),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Min"),(0,r.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},'Gets or sets the min. Min ignored if EnableMinMax="false".'),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Placeholder"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string?"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the placeholder."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Value"),(0,r.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the value."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ValueExpression"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Expression>")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the expression"),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.6.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Disable"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Disables date input."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Enable"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Enables date input."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")))),(0,r.kt)("h2",{id:"events"},"Events"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ValueChanged"),(0,r.kt)("td",{parentName:"tr",align:"left"},"This event fired on every user keystroke that changes the ",(0,r.kt)("inlineCode",{parentName:"td"},"DateInput")," value.")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"basic-usage"},"Basic usage"),(0,r.kt)("admonition",{title:"NOTE",type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to ",(0,r.kt)("inlineCode",{parentName:"p"},'type="text"'),".")),(0,r.kt)("img",{src:"https://i.imgur.com/1mVjqQv.png",alt:"Blazor Bootstrap: Date Input Component - Basic usage"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n \n
\n
Entered date: @date1
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddDays(1));\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#basic-usage"},"See demo here")),(0,r.kt)("h3",{id:"generic-type"},"Generic type"),(0,r.kt)("p",null,"The Blazor Bootstrap DateInput component supports several data types: ",(0,r.kt)("inlineCode",{parentName:"p"},"DateOnly"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DateOnly?"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DateTime"),", and ",(0,r.kt)("inlineCode",{parentName:"p"},"DateTime?"),". This allows flexible component usage to accommodate various data types in Blazor applications."),(0,r.kt)("p",null,"In the below example, TValue is set to ",(0,r.kt)("inlineCode",{parentName:"p"},"DateOnly"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DateOnly?"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DateTime"),", and ",(0,r.kt)("inlineCode",{parentName:"p"},"DateTime?"),"."),(0,r.kt)("img",{src:"https://i.imgur.com/KyyqyNf.png",alt:"Blazor Bootstrap: Date Input Component - Generic type"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n DateOnly:\n
\n
\n \n
\n
Entered date: @date1
\n\n
\n DateOnly?:\n
\n
\n \n
\n
Entered date: @date2
\n\n
\n DateTime:\n
\n
\n \n
\n
Entered date: @date3
\n\n
\n DateTime?:\n
\n
\n \n
\n
Entered date: @date4
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddMonths(3));\n private DateOnly? date2;\n private DateTime date3 = DateTime.Now.AddMonths(3);\n private DateTime? date4;\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#generic-type"},"See demo here")),(0,r.kt)("h3",{id:"enable-min-and-max"},"Enable min and max"),(0,r.kt)("p",null,"Set ",(0,r.kt)("inlineCode",{parentName:"p"},'EnableMinMax="true"')," and set the ",(0,r.kt)("inlineCode",{parentName:"p"},"Min")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"Max")," parameters to restrict the user input between the Min and Max range."),(0,r.kt)("img",{src:"https://i.imgur.com/rZpYrFL.png",alt:"Blazor Bootstrap: Date Input Component - Enable min and max"}),(0,r.kt)("admonition",{title:"NOTE",type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"If the user tries to enter a number in the ",(0,r.kt)("b",null,"DateInput")," field which is out of range, then it will override with Min or Max value based on the context.\nIf the user input is less than the Min value, then it will override with the Min value.\nIf the user input exceeds the Max value, it will override with the Max value.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n DateOnly:\n
\n
\n \n
\n
Min date: @min1
\n
Max date: @max1
\n
Entered date: @date1
\n\n
\n DateOnly?:\n
\n
\n \n
\n
Min date: @min2
\n
Max date: @max2
\n
Entered date: @date2
\n\n
\n DateTime:\n
\n
\n \n
\n
Min date: @min3
\n
Max date: @max3
\n
Entered date: @date3
\n\n
\n DateTime?:\n
\n
\n \n
\n
Min date: @min4
\n
Max date: @max4
\n
Entered date: @date4
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private DateTime date = DateTime.Now.AddMonths(3);\n private DateTime min = DateTime.Now.AddMonths(-1);\n private DateTime max = DateTime.Now.AddYears(1);\n\n private DateOnly date1, min1, max1;\n private DateOnly? date2, min2, max2;\n private DateTime date3, min3, max3;\n private DateTime? date4, min4, max4;\n\n protected override void OnInitialized()\n {\n date1 = DateOnly.FromDateTime(date);\n min1 = DateOnly.FromDateTime(min);\n max1 = DateOnly.FromDateTime(max);\n\n date2 = null;\n min2 = DateOnly.FromDateTime(min);\n max2 = DateOnly.FromDateTime(max);\n\n date3 = DateTime.Now.AddMonths(3);\n min3 = min;\n max3 = max;\n\n date4 = null;\n min4 = min;\n max4 = max;\n }\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#enable-max-min"},"See demo here")),(0,r.kt)("h3",{id:"disable"},"Disable"),(0,r.kt)("p",null,"Use the ",(0,r.kt)("b",null,"Disabled")," parameter to disable the DateInput."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4,9-11} showLineNumbers","{4,9-11}":!0,showLineNumbers:!0},'
\n \n
\n
Entered date: @date1
\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{3,5,7,9} showLineNumbers","{3,5,7,9}":!0,showLineNumbers:!0},"@code {\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);\n private bool disabled = true;\n\n private void Enable() => disabled = false;\n\n private void Disable() => disabled = true;\n\n private void Toggle() => disabled = !disabled;\n}\n")),(0,r.kt)("p",null,"Also, use ",(0,r.kt)("strong",{parentName:"p"},"Enable()")," and ",(0,r.kt)("strong",{parentName:"p"},"Disable()")," methods to enable and disable the DateInput."),(0,r.kt)("admonition",{title:"NOTE",type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"Do not use both the ",(0,r.kt)("strong",{parentName:"p"},"Disabled")," parameter and ",(0,r.kt)("strong",{parentName:"p"},"Enable()")," & ",(0,r.kt)("strong",{parentName:"p"},"Disable()")," methods.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,9-10} showLineNumbers","{2,9-10}":!0,showLineNumbers:!0},'
\n \n
\n
Entered date: @date1
\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,6,8} showLineNumbers","{2,6,8}":!0,showLineNumbers:!0},"@code {\n private DateInput dateInput = default!;\n\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);\n\n private void Disable() => dateInput.Disable();\n\n private void Enable() => dateInput.Enable();\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#disable"},"See demo here")),(0,r.kt)("h3",{id:"validations"},"Validations"),(0,r.kt)("p",null,"Like any other blazor input component, ",(0,r.kt)("inlineCode",{parentName:"p"},"DateInput")," component supports validations. Use the Use the ",(0,r.kt)("strong",{parentName:"p"},"DataAnnotations")," to validate the user input before submitting the form. In the below example, we used the ",(0,r.kt)("inlineCode",{parentName:"p"},"Required")," attributes."),(0,r.kt)("img",{src:"https://i.imgur.com/V4SWntV.png",alt:"Blazor Bootstrap: Date Input Component - Validations"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using System.ComponentModel.DataAnnotations\n\n\n\n\n \n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private Invoice invoice = new();\n private EditContext editContext;\n\n protected override void OnInitialized()\n {\n editContext = new EditContext(invoice);\n base.OnInitialized();\n }\n\n public void HandleOnValidSubmit()\n {\n Console.WriteLine($"Invoice Date: {invoice.InvoiceDate}");\n Console.WriteLine($"Customer Name: {invoice.CustomerName}");\n }\n\n private void ResetForm()\n {\n invoice = new();\n editContext = new EditContext(invoice);\n }\n\n public class Invoice\n {\n [Required(ErrorMessage = "Invoice Date required.")]\n public DateOnly? InvoiceDate { get; set; }\n\n [Required(ErrorMessage = "Customer Name required.")]\n public string CustomerName { get; set; }\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#validations"},"See demo here")),(0,r.kt)("h3",{id:"events-valuechanged"},"Events: ValueChanged"),(0,r.kt)("p",null,"This event fires on every user keystroke/selection that changes the ",(0,r.kt)("inlineCode",{parentName:"p"},"DateInput")," value."),(0,r.kt)("img",{src:"https://i.imgur.com/3OFrZJX.png",alt:"Blazor Bootstrap: Date Input Component - Events: ValueChanged"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n \n
\n
Changed date: @date1
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);\n\n private void DateChanged(DateOnly dateOnly)\n {\n date1 = dateOnly; \n }\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#event-value-changed"},"See demo here")),(0,r.kt)("h3",{id:"restrict-the-date-field-based-on-the-entry-in-another-date-field"},"Restrict the date field based on the entry in another date field"),(0,r.kt)("p",null,"One common scenario is that the date fields are restricted based on the entry in another date field.\nIn the example below, we restrict the course end time based on the selection of course start date."),(0,r.kt)("img",{src:"https://i.imgur.com/bCXn1vE.png",width:"450",alt:"Blazor Bootstrap:- Date Input Component - Restrict the date field based on the entry in another date field"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@using System.ComponentModel.DataAnnotations\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{17-18,28-30} showLineNumbers","{17-18,28-30}":!0,showLineNumbers:!0},'\n \n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{23-25,32-34} showLineNumbers","{23-25,32-34}":!0,showLineNumbers:!0},'@code {\n DateInput endDateInput = default!;\n\n private OnlineCourseForm onlineCourseForm = new();\n private EditContext editContext;\n\n private DateTime? courseMinDate;\n private DateTime? courseMaxDate;\n\n [Inject] ToastService _toastService { get; set; }\n\n protected override void OnInitialized()\n {\n editContext = new EditContext(onlineCourseForm);\n base.OnInitialized();\n }\n\n private void StartDateChanged(DateTime? startDate)\n {\n if (startDate is null || !startDate.HasValue)\n {\n onlineCourseForm.StartDate = null;\n onlineCourseForm.EndDate = null;\n courseMinDate = null;\n courseMaxDate = null;\n endDateInput.Disable();\n\n return;\n }\n\n onlineCourseForm.StartDate = startDate;\n onlineCourseForm.EndDate = null;\n courseMinDate = startDate.Value;\n courseMaxDate = startDate.Value.AddDays(5);\n endDateInput.Enable();\n }\n\n public void HandleValidSubmit()\n {\n var toastMessage = new ToastMessage\n (\n type: ToastType.Success,\n iconName: IconName.Check2All,\n title: "Success!",\n helpText: $"{DateTime.Now.ToLocalTime()}",\n message: "Online course schedule created."\n );\n _toastService.Notify(toastMessage);\n }\n\n private void ResetForm()\n {\n onlineCourseForm = new();\n editContext = new EditContext(onlineCourseForm);\n }\n\n public class OnlineCourseForm\n {\n [Required(ErrorMessage = "Course Name required.")]\n public string CourseName { get; set; }\n\n [Required(ErrorMessage = "Start Date required.")]\n public DateTime? StartDate { get; set; }\n\n [Required(ErrorMessage = "End Date required.")]\n public DateTime? EndDate { get; set; }\n }\n}\n')))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1677a4a2.bd1277f7.js b/assets/js/1677a4a2.bd1277f7.js deleted file mode 100644 index 2145bc644..000000000 --- a/assets/js/1677a4a2.bd1277f7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[94026],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>b});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),d=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=d(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,m=o(e,["components","mdxType","originalType","parentName"]),p=d(n),c=r,b=p["".concat(s,".").concat(c)]||p[c]||u[c]||i;return n?a.createElement(b,l(l({ref:t},m),{},{components:n})):a.createElement(b,l({ref:t},m))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,l=new Array(i);l[0]=c;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o[p]="string"==typeof e?e:r,l[1]=o;for(var d=2;d{n.d(t,{ZP:()=>p});var a=n(87462),r=n(67294),i=n(3905),l=n(72389);function o(e){let{children:t,fallback:n}=e;return(0,l.Z)()?r.createElement(r.Fragment,null,t?.()):n??null}n(73935);function s(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const d={toc:[]},m="wrapper";function p(e){let{components:t,...n}=e;return(0,i.kt)(m,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},13372:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>s,toc:()=>m});var a=n(87462),r=(n(67294),n(3905)),i=n(58034);const l={title:"Blazor Date Input Component",description:'Blazor Bootstrap `DateInput` component is constructed using an HTML input of `type="date"` which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.',image:"https://i.imgur.com/1mVjqQv.png",sidebar_label:"Date Input",sidebar_position:3},o="Blazor Date Input",s={unversionedId:"forms/date-input",id:"forms/date-input",title:"Blazor Date Input Component",description:'Blazor Bootstrap `DateInput` component is constructed using an HTML input of `type="date"` which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.',source:"@site/docs/04-forms/date-input.mdx",sourceDirName:"04-forms",slug:"/forms/date-input",permalink:"/forms/date-input",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/04-forms/date-input.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Blazor Date Input Component",description:'Blazor Bootstrap `DateInput` component is constructed using an HTML input of `type="date"` which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.',image:"https://i.imgur.com/1mVjqQv.png",sidebar_label:"Date Input",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Currency Input",permalink:"/forms/currency-input"},next:{title:"Number Input",permalink:"/forms/number-input"}},d={},m=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Events",id:"events",level:2},{value:"Examples",id:"examples",level:2},{value:"Basic usage",id:"basic-usage",level:3},{value:"Generic type",id:"generic-type",level:3},{value:"Enable min and max",id:"enable-min-and-max",level:3},{value:"Disable",id:"disable",level:3},{value:"Validations",id:"validations",level:3},{value:"Events: ValueChanged",id:"events-valuechanged",level:3},{value:"Restrict the date field based on the entry in another date field",id:"restrict-the-date-field-based-on-the-entry-in-another-date-field",level:3}],p={toc:m},u="wrapper";function c(e){let{components:t,...n}=e;return(0,r.kt)(u,(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-date-input"},"Blazor Date Input"),(0,r.kt)("p",null,"Blazor Bootstrap ",(0,r.kt)("inlineCode",{parentName:"p"},"DateInput")," component is constructed using an HTML input of ",(0,r.kt)("inlineCode",{parentName:"p"},'type="date"')," which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface."),(0,r.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("img",{src:"https://i.imgur.com/1mVjqQv.png",alt:"Blazor Bootstrap: Date Input Component"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AutoComplete"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Indicates whether the DateInput can complete the values automatically by the browser."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Disabled"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the disabled."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"EnableMinMax"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Max"),(0,r.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},'Gets or sets the max. Max ignored if EnableMinMax="false".'),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Min"),(0,r.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},'Gets or sets the min. Min ignored if EnableMinMax="false".'),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Placeholder"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string?"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the placeholder."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Value"),(0,r.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the value."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ValueExpression"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Expression>")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the expression"),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.6.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Disable"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Disables date input."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Enable"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Enables date input."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.5.0")))),(0,r.kt)("h2",{id:"events"},"Events"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ValueChanged"),(0,r.kt)("td",{parentName:"tr",align:"left"},"This event fired on every user keystroke that changes the ",(0,r.kt)("inlineCode",{parentName:"td"},"DateInput")," value.")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"basic-usage"},"Basic usage"),(0,r.kt)("admonition",{title:"NOTE",type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to ",(0,r.kt)("inlineCode",{parentName:"p"},'type="text"'),".")),(0,r.kt)("img",{src:"https://i.imgur.com/1mVjqQv.png",alt:"Blazor Bootstrap: Date Input Component - Basic usage"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n \n
\n
Entered date: @date1
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddDays(1));\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#basic-usage"},"See demo here")),(0,r.kt)("h3",{id:"generic-type"},"Generic type"),(0,r.kt)("p",null,"The Blazor Bootstrap DateInput component supports several data types: ",(0,r.kt)("inlineCode",{parentName:"p"},"DateOnly"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DateOnly?"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DateTime"),", and ",(0,r.kt)("inlineCode",{parentName:"p"},"DateTime?"),". This allows flexible component usage to accommodate various data types in Blazor applications."),(0,r.kt)("p",null,"In the below example, TValue is set to ",(0,r.kt)("inlineCode",{parentName:"p"},"DateOnly"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DateOnly?"),", ",(0,r.kt)("inlineCode",{parentName:"p"},"DateTime"),", and ",(0,r.kt)("inlineCode",{parentName:"p"},"DateTime?"),"."),(0,r.kt)("img",{src:"https://i.imgur.com/KyyqyNf.png",alt:"Blazor Bootstrap: Date Input Component - Generic type"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n DateOnly:\n
\n
\n \n
\n
Entered date: @date1
\n\n
\n DateOnly?:\n
\n
\n \n
\n
Entered date: @date2
\n\n
\n DateTime:\n
\n
\n \n
\n
Entered date: @date3
\n\n
\n DateTime?:\n
\n
\n \n
\n
Entered date: @date4
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddMonths(3));\n private DateOnly? date2;\n private DateTime date3 = DateTime.Now.AddMonths(3);\n private DateTime? date4;\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#generic-type"},"See demo here")),(0,r.kt)("h3",{id:"enable-min-and-max"},"Enable min and max"),(0,r.kt)("p",null,"Set ",(0,r.kt)("inlineCode",{parentName:"p"},'EnableMinMax="true"')," and set the ",(0,r.kt)("inlineCode",{parentName:"p"},"Min")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"Max")," parameters to restrict the user input between the Min and Max range."),(0,r.kt)("img",{src:"https://i.imgur.com/rZpYrFL.png",alt:"Blazor Bootstrap: Date Input Component - Enable min and max"}),(0,r.kt)("admonition",{title:"NOTE",type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"If the user tries to enter a number in the ",(0,r.kt)("b",null,"DateInput")," field which is out of range, then it will override with Min or Max value based on the context.\nIf the user input is less than the Min value, then it will override with the Min value.\nIf the user input exceeds the Max value, it will override with the Max value.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n DateOnly:\n
\n
\n \n
\n
Min date: @min1
\n
Max date: @max1
\n
Entered date: @date1
\n\n
\n DateOnly?:\n
\n
\n \n
\n
Min date: @min2
\n
Max date: @max2
\n
Entered date: @date2
\n\n
\n DateTime:\n
\n
\n \n
\n
Min date: @min3
\n
Max date: @max3
\n
Entered date: @date3
\n\n
\n DateTime?:\n
\n
\n \n
\n
Min date: @min4
\n
Max date: @max4
\n
Entered date: @date4
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private DateTime date = DateTime.Now.AddMonths(3);\n private DateTime min = DateTime.Now.AddMonths(-1);\n private DateTime max = DateTime.Now.AddYears(1);\n\n private DateOnly date1, min1, max1;\n private DateOnly? date2, min2, max2;\n private DateTime date3, min3, max3;\n private DateTime? date4, min4, max4;\n\n protected override void OnInitialized()\n {\n date1 = DateOnly.FromDateTime(date);\n min1 = DateOnly.FromDateTime(min);\n max1 = DateOnly.FromDateTime(max);\n\n date2 = null;\n min2 = DateOnly.FromDateTime(min);\n max2 = DateOnly.FromDateTime(max);\n\n date3 = DateTime.Now.AddMonths(3);\n min3 = min;\n max3 = max;\n\n date4 = null;\n min4 = min;\n max4 = max;\n }\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#enable-max-min"},"See demo here")),(0,r.kt)("h3",{id:"disable"},"Disable"),(0,r.kt)("p",null,"Use the ",(0,r.kt)("b",null,"Disabled")," parameter to disable the DateInput."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4,9-11} showLineNumbers","{4,9-11}":!0,showLineNumbers:!0},'
\n \n
\n
Entered date: @date1
\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{3,5,7,9} showLineNumbers","{3,5,7,9}":!0,showLineNumbers:!0},"@code {\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);\n private bool disabled = true;\n\n private void Enable() => disabled = false;\n\n private void Disable() => disabled = true;\n\n private void Toggle() => disabled = !disabled;\n}\n")),(0,r.kt)("p",null,"Also, use ",(0,r.kt)("strong",{parentName:"p"},"Enable()")," and ",(0,r.kt)("strong",{parentName:"p"},"Disable()")," methods to enable and disable the DateInput."),(0,r.kt)("admonition",{title:"NOTE",type:"caution"},(0,r.kt)("p",{parentName:"admonition"},"Do not use both the ",(0,r.kt)("strong",{parentName:"p"},"Disabled")," parameter and ",(0,r.kt)("strong",{parentName:"p"},"Enable()")," & ",(0,r.kt)("strong",{parentName:"p"},"Disable()")," methods.")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,9-10} showLineNumbers","{2,9-10}":!0,showLineNumbers:!0},'
\n \n
\n
Entered date: @date1
\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,6,8} showLineNumbers","{2,6,8}":!0,showLineNumbers:!0},"@code {\n private DateInput dateInput = default!;\n\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);\n\n private void Disable() => dateInput.Disable();\n\n private void Enable() => dateInput.Enable();\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#disable"},"See demo here")),(0,r.kt)("h3",{id:"validations"},"Validations"),(0,r.kt)("p",null,"Like any other blazor input component, ",(0,r.kt)("inlineCode",{parentName:"p"},"DateInput")," component supports validations. Use the Use the ",(0,r.kt)("strong",{parentName:"p"},"DataAnnotations")," to validate the user input before submitting the form. In the below example, we used the ",(0,r.kt)("inlineCode",{parentName:"p"},"Required")," attributes."),(0,r.kt)("img",{src:"https://i.imgur.com/V4SWntV.png",alt:"Blazor Bootstrap: Date Input Component - Validations"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using System.ComponentModel.DataAnnotations\n\n\n\n\n \n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private Invoice invoice = new();\n private EditContext editContext;\n\n protected override void OnInitialized()\n {\n editContext = new EditContext(invoice);\n base.OnInitialized();\n }\n\n public void HandleOnValidSubmit()\n {\n Console.WriteLine($"Invoice Date: {invoice.InvoiceDate}");\n Console.WriteLine($"Customer Name: {invoice.CustomerName}");\n }\n\n private void ResetForm()\n {\n invoice = new();\n editContext = new EditContext(invoice);\n }\n\n public class Invoice\n {\n [Required(ErrorMessage = "Invoice Date required.")]\n public DateOnly? InvoiceDate { get; set; }\n\n [Required(ErrorMessage = "Customer Name required.")]\n public string CustomerName { get; set; }\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#validations"},"See demo here")),(0,r.kt)("h3",{id:"events-valuechanged"},"Events: ValueChanged"),(0,r.kt)("p",null,"This event fires on every user keystroke/selection that changes the ",(0,r.kt)("inlineCode",{parentName:"p"},"DateInput")," value."),(0,r.kt)("img",{src:"https://i.imgur.com/3OFrZJX.png",alt:"Blazor Bootstrap: Date Input Component - Events: ValueChanged"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n \n
\n
Changed date: @date1
\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);\n\n private void DateChanged(DateOnly dateOnly)\n {\n date1 = dateOnly; \n }\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/date-input#event-value-changed"},"See demo here")),(0,r.kt)("h3",{id:"restrict-the-date-field-based-on-the-entry-in-another-date-field"},"Restrict the date field based on the entry in another date field"),(0,r.kt)("p",null,"One common scenario is that the date fields are restricted based on the entry in another date field.\nIn the example below, we restrict the course end time based on the selection of course start date."),(0,r.kt)("img",{src:"https://i.imgur.com/bCXn1vE.png",width:"450",alt:"Blazor Bootstrap:- Date Input Component - Restrict the date field based on the entry in another date field"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@using System.ComponentModel.DataAnnotations\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"\n")),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{17-18,28-30} showLineNumbers","{17-18,28-30}":!0,showLineNumbers:!0},'\n \n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{23-25,32-34} showLineNumbers","{23-25,32-34}":!0,showLineNumbers:!0},'@code {\n DateInput endDateInput = default!;\n\n private OnlineCourseForm onlineCourseForm = new();\n private EditContext editContext;\n\n private DateTime? courseMinDate;\n private DateTime? courseMaxDate;\n\n [Inject] ToastService _toastService { get; set; }\n\n protected override void OnInitialized()\n {\n editContext = new EditContext(onlineCourseForm);\n base.OnInitialized();\n }\n\n private void StartDateChanged(DateTime? startDate)\n {\n if (startDate is null || !startDate.HasValue)\n {\n onlineCourseForm.StartDate = null;\n onlineCourseForm.EndDate = null;\n courseMinDate = null;\n courseMaxDate = null;\n endDateInput.Disable();\n\n return;\n }\n\n onlineCourseForm.StartDate = startDate;\n onlineCourseForm.EndDate = null;\n courseMinDate = startDate.Value;\n courseMaxDate = startDate.Value.AddDays(5);\n endDateInput.Enable();\n }\n\n public void HandleValidSubmit()\n {\n var toastMessage = new ToastMessage\n (\n type: ToastType.Success,\n iconName: IconName.Check2All,\n title: "Success!",\n helpText: $"{DateTime.Now.ToLocalTime()}",\n message: "Online course schedule created."\n );\n _toastService.Notify(toastMessage);\n }\n\n private void ResetForm()\n {\n onlineCourseForm = new();\n editContext = new EditContext(onlineCourseForm);\n }\n\n public class OnlineCourseForm\n {\n [Required(ErrorMessage = "Course Name required.")]\n public string CourseName { get; set; }\n\n [Required(ErrorMessage = "Start Date required.")]\n public DateTime? StartDate { get; set; }\n\n [Required(ErrorMessage = "End Date required.")]\n public DateTime? EndDate { get; set; }\n }\n}\n')))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/20b54e65.395e8fcc.js b/assets/js/20b54e65.395e8fcc.js new file mode 100644 index 000000000..113649f4d --- /dev/null +++ b/assets/js/20b54e65.395e8fcc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[7167],{3905:(e,t,a)=>{a.d(t,{Zo:()=>m,kt:()=>f});var n=a(67294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function s(e){for(var t=1;t=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var o=n.createContext({}),u=function(e){var t=n.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},m=function(e){var t=u(e.components);return n.createElement(o.Provider,{value:t},e.children)},c="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var a=e.components,i=e.mdxType,l=e.originalType,o=e.parentName,m=r(e,["components","mdxType","originalType","parentName"]),c=u(a),d=i,f=c["".concat(o,".").concat(d)]||c[d]||p[d]||l;return a?n.createElement(f,s(s({ref:t},m),{},{components:a})):n.createElement(f,s({ref:t},m))}));function f(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var l=a.length,s=new Array(l);s[0]=d;var r={};for(var o in t)hasOwnProperty.call(t,o)&&(r[o]=t[o]);r.originalType=e,r[c]="string"==typeof e?e:i,s[1]=r;for(var u=2;u{a.d(t,{ZP:()=>c});var n=a(87462),i=a(67294),l=a(3905),s=a(72389);function r(e){let{children:t,fallback:a}=e;return(0,s.Z)()?i.createElement(i.Fragment,null,t?.()):a??null}a(73935);function o(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const u={toc:[]},m="wrapper";function c(e){let{components:t,...a}=e;return(0,l.kt)(m,(0,n.Z)({},u,a,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(r,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(o,{mdxType:"RenderAd"}))))}c.isMDXComponent=!0},31650:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>s,metadata:()=>o,toc:()=>m});var n=a(87462),i=(a(67294),a(3905)),l=a(58034);const s={title:"Blazor Offcanvas Component",description:"Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.",image:"https://i.imgur.com/ev2Q8ON.jpg",sidebar_label:"Offcanvas",sidebar_position:14},r="Blazor Offcanvas",o={unversionedId:"components/offcanvas",id:"components/offcanvas",title:"Blazor Offcanvas Component",description:"Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.",source:"@site/docs/05-components/offcanvas.mdx",sourceDirName:"05-components",slug:"/components/offcanvas",permalink:"/components/offcanvas",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/offcanvas.mdx",tags:[],version:"current",sidebarPosition:14,frontMatter:{title:"Blazor Offcanvas Component",description:"Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.",image:"https://i.imgur.com/ev2Q8ON.jpg",sidebar_label:"Offcanvas",sidebar_position:14},sidebar:"tutorialSidebar",previous:{title:"Modal",permalink:"/components/modal"},next:{title:"Pagination",permalink:"/components/pagination"}},u={},m=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Callback Events",id:"callback-events",level:2},{value:"How it works",id:"how-it-works",level:2},{value:"Examples",id:"examples",level:2},{value:"Offcanvas",id:"offcanvas",level:3},{value:"Dynamic component as offcanvas",id:"dynamic-component-as-offcanvas",level:3},{value:"Pass event callbacks to a dynamic component",id:"pass-event-callbacks-to-a-dynamic-component",level:3},{value:"Placement",id:"placement",level:3},{value:"Static backdrop",id:"static-backdrop",level:3},{value:"Sizes",id:"sizes",level:3},{value:"Small Offcanvas",id:"small-offcanvas",level:4},{value:"Large Offcanvas",id:"large-offcanvas",level:4},{value:"Callback Events",id:"callback-events-1",level:3}],c={toc:m},p="wrapper";function d(e){let{components:t,...a}=e;return(0,i.kt)(p,(0,n.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"blazor-offcanvas"},"Blazor Offcanvas"),(0,i.kt)("p",null,"Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component."),(0,i.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,i.kt)("h2",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Name"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"),(0,i.kt)("th",{parentName:"tr",align:null},"Required"),(0,i.kt)("th",{parentName:"tr",align:null},"Default"),(0,i.kt)("th",{parentName:"tr",align:null},"Added Version"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"BodyCssClass"),(0,i.kt)("td",{parentName:"tr",align:null},"string"),(0,i.kt)("td",{parentName:"tr",align:null},"Additional body CSS class."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"BodyTemplate"),(0,i.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,i.kt)("td",{parentName:"tr",align:null},"Body content."),(0,i.kt)("td",{parentName:"tr",align:null},"\u2714\ufe0f"),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"CloseOnEscape"),(0,i.kt)("td",{parentName:"tr",align:null},"bool"),(0,i.kt)("td",{parentName:"tr",align:null},"Indicates whether the offcanvas closes when escape key is pressed."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"true"),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"FooterCssClass"),(0,i.kt)("td",{parentName:"tr",align:null},"string"),(0,i.kt)("td",{parentName:"tr",align:null},"Additional footer CSS class."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"FooterTemplate"),(0,i.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,i.kt)("td",{parentName:"tr",align:null},"Footer content."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"HeaderCssClass"),(0,i.kt)("td",{parentName:"tr",align:null},"string"),(0,i.kt)("td",{parentName:"tr",align:null},"Additional header CSS class."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"HeaderTemplate"),(0,i.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,i.kt)("td",{parentName:"tr",align:null},"Content for the header."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"IsScrollable"),(0,i.kt)("td",{parentName:"tr",align:null},"bool"),(0,i.kt)("td",{parentName:"tr",align:null},"Indicates whether body (page) scrolling is allowed while offcanvas is open."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"false"),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"Placement"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Placement")),(0,i.kt)("td",{parentName:"tr",align:null},"Gets or sets the offcanvas placement. By default, offcanvas is placed on the right of the viewport."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Placement.End")),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"ShowCloseButton"),(0,i.kt)("td",{parentName:"tr",align:null},"bool"),(0,i.kt)("td",{parentName:"tr",align:null},"Indicates whether the modal shows close button in header."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"true"),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"Size"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"OffcanvasSize")),(0,i.kt)("td",{parentName:"tr",align:null},"Size of the offcanvas."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"OffcanvasSize.Regular")),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"TabIndex"),(0,i.kt)("td",{parentName:"tr",align:null},"int"),(0,i.kt)("td",{parentName:"tr",align:null},"Gets or sets the tab index."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"-1"),(0,i.kt)("td",{parentName:"tr",align:null},"1.6.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"Title"),(0,i.kt)("td",{parentName:"tr",align:null},"string"),(0,i.kt)("td",{parentName:"tr",align:null},"Text for the title in header."),(0,i.kt)("td",{parentName:"tr",align:null},"\u2714\ufe0f"),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"UseStaticBackdrop"),(0,i.kt)("td",{parentName:"tr",align:null},"bool"),(0,i.kt)("td",{parentName:"tr",align:null},"When ",(0,i.kt)("inlineCode",{parentName:"td"},"UseStaticBackdrop")," is set to true, the offcanvas will not close when clicking outside of it."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"false"),(0,i.kt)("td",{parentName:"tr",align:null},"1.8.0")))),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Method"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"),(0,i.kt)("th",{parentName:"tr",align:null},"Added Version"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"ShowAsync"),(0,i.kt)("td",{parentName:"tr",align:null},"Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the ",(0,i.kt)("inlineCode",{parentName:"td"},"OnShown")," event occurs)."),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"HideAsync"),(0,i.kt)("td",{parentName:"tr",align:null},"Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the ",(0,i.kt)("inlineCode",{parentName:"td"},"OnHidden")," event occurs)."),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")))),(0,i.kt)("admonition",{title:"Asynchronous methods and transitions",type:"danger"},(0,i.kt)("p",{parentName:"admonition"},"All API methods are ",(0,i.kt)("strong",{parentName:"p"},"asynchronous")," and start a ",(0,i.kt)("strong",{parentName:"p"},"transition"),". They return to the caller as soon as the transition is started but ",(0,i.kt)("strong",{parentName:"p"},"before it ends"),". In addition, a method call on a ",(0,i.kt)("strong",{parentName:"p"},"transitioning component will be ignored"),".")),(0,i.kt)("h2",{id:"callback-events"},"Callback Events"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Event"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"OnShowing"),(0,i.kt)("td",{parentName:"tr",align:null},"This event fires immediately when the show instance method is called.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"OnShown"),(0,i.kt)("td",{parentName:"tr",align:null},"This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"OnHiding"),(0,i.kt)("td",{parentName:"tr",align:null},"This event is fired immediately when the hide method has been called.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"OnHidden"),(0,i.kt)("td",{parentName:"tr",align:null},"This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).")))),(0,i.kt)("h2",{id:"how-it-works"},"How it works"),(0,i.kt)("p",null,"Offcanvas is a sidebar component that can be toggled to appear from the left, right, or bottom edge of the viewport."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Conceptually, they are quite similar to the Modal component, but they are separate components."),(0,i.kt)("li",{parentName:"ul"},"When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas."),(0,i.kt)("li",{parentName:"ul"},"Similar to modals, only one offcanvas can be shown at a time.")),(0,i.kt)("h2",{id:"examples"},"Examples"),(0,i.kt)("h3",{id:"offcanvas"},"Offcanvas"),(0,i.kt)("p",null,"Below is an offcanvas example that is shown by default."),(0,i.kt)("img",{src:"https://i.imgur.com/1vNz5Ci.jpg",alt:"Offcanvas - Example"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n ... design your header and body\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,6,11} showLineNumbers","{2,6,11}":!0,showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task ShowOffcanvasAsync()\n {\n await offcanvas?.ShowAsync();\n }\n\n private async Task HideOffcanvasAsync()\n {\n await offcanvas?.HideAsync();\n }\n}\n")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#examples"},"See demo here.")),(0,i.kt)("admonition",{type:"info"},(0,i.kt)("p",{parentName:"admonition"},"Default placement for the offcanvas component is right.")),(0,i.kt)("h3",{id:"dynamic-component-as-offcanvas"},"Dynamic component as offcanvas"),(0,i.kt)("p",null,"Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.\nIf dynamically-rendered components have component parameters, pass them as an ",(0,i.kt)("inlineCode",{parentName:"p"},"IDictionary"),". The ",(0,i.kt)("inlineCode",{parentName:"p"},"string")," is the parameter's name, and the ",(0,i.kt)("inlineCode",{parentName:"p"},"object")," is the parameter's value."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n@code {\n private Offcanvas offcanvas = default!;\n private string? message;\n\n private async Task ShowEmployeeComponent()\n {\n var parameters = new Dictionary();\n parameters.Add("EmployeeId", 321);\n await offcanvas.ShowAsync(title: "Employee Details", parameters: parameters);\n }\n}\n')),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"EmployeeDemoComponent1.razor")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n
Employee Id :
\n
@EmployeeId
\n
\n
\n
First Name :
\n
@employee.FirstName
\n
\n
\n
Last Name :
\n
@employee.LastName
\n
\n\n@code {\n private Employee employee = default!;\n\n [Parameter] public int EmployeeId { get; set; }\n\n protected override void OnInitialized()\n {\n // get employee with {EmployeeId} from DB\n\n employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };\n\n base.OnInitialized();\n }\n}\n')),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#dynamic-component-as-offcanvas"},"See demo here.")),(0,i.kt)("h3",{id:"pass-event-callbacks-to-a-dynamic-component"},"Pass event callbacks to a dynamic component"),(0,i.kt)("p",null,"Event callbacks can be passed in its parameter dictionary."),(0,i.kt)("p",null,"In the following parent component example, the ",(0,i.kt)("inlineCode",{parentName:"p"},"ShowDTMessage")," method assigns a string with the current time to ",(0,i.kt)("inlineCode",{parentName:"p"},"message"),", and the value of ",(0,i.kt)("inlineCode",{parentName:"p"},"message")," is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"The ",(0,i.kt)("inlineCode",{parentName:"li"},"string")," key is the callback method's name, ",(0,i.kt)("inlineCode",{parentName:"li"},"OnClickCallback"),"."),(0,i.kt)("li",{parentName:"ul"},"The ",(0,i.kt)("inlineCode",{parentName:"li"},"object")," value is created by ",(0,i.kt)("inlineCode",{parentName:"li"},"EventCallbackFactory.Create")," for the parent callback method, ",(0,i.kt)("inlineCode",{parentName:"li"},"ShowDTMessage"),".")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n
\n @message\n
\n\n@code {\n private Offcanvas offcanvas = default!;\n private string? message;\n\n private async Task ShowEmployeeComponent()\n {\n var parameters = new Dictionary();\n parameters.Add("EmployeeId", 322);\n parameters.Add("OnclickCallback", EventCallback.Factory.Create(this, ShowDTMessage));\n await offcanvas.ShowAsync(title: "Employee Details", parameters: parameters);\n }\n\n private void ShowDTMessage(MouseEventArgs e) => message = $"The current date time is: {DateTime.Now}.";\n}\n')),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"EmployeeDemoComponent2.razor")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n
Employee Id :
\n
@EmployeeId
\n
\n
\n
First Name :
\n
@employee.FirstName
\n
\n
\n
Last Name :
\n
@employee.LastName
\n
\n\n\n\n@code {\n private Employee employee = default!;\n\n [Parameter] public int EmployeeId { get; set; }\n\n [Parameter] public EventCallback OnClickCallback { get; set; }\n\n protected override void OnInitialized()\n {\n // get employee with {EmployeeId} from DB\n\n employee = new Employee { FirstName = "Sagar", LastName = "Reddy" };\n\n base.OnInitialized();\n }\n}\n')),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#pass-event-callbacks-to-a-dynamic-component"},"See demo here.")),(0,i.kt)("h3",{id:"placement"},"Placement"),(0,i.kt)("p",null,"Try the top, bottom, and left examples out below."),(0,i.kt)("img",{src:"https://i.imgur.com/dJpJYpX.jpg",alt:"Offcanvas - Top Placement"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n ...\n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n}\n")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#placement"},"See demo here.")),(0,i.kt)("h3",{id:"static-backdrop"},"Static backdrop"),(0,i.kt)("p",null,"When ",(0,i.kt)("strong",{parentName:"p"},"UseStaticBackdrop")," is set to ",(0,i.kt)("strong",{parentName:"p"},"true"),", the offcanvas will not close when clicking outside of it."),(0,i.kt)("img",{src:"https://i.imgur.com/J7g2eeA.png",alt:"Offcanvas - Static backdrop"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1} showLineNumbers","{1}":!0,showLineNumbers:!0},'\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

\n

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

\n

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

\n

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

\n

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

\n \n \n \n \n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n}\n")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#static-backdrop"},"See demo here.")),(0,i.kt)("h3",{id:"sizes"},"Sizes"),(0,i.kt)("p",null,"Set the size of the ",(0,i.kt)("inlineCode",{parentName:"p"},"Offcanvas")," with the Size parameter. The default value is ",(0,i.kt)("inlineCode",{parentName:"p"},"OffcanvasSize.Regular"),"."),(0,i.kt)("h4",{id:"small-offcanvas"},"Small Offcanvas"),(0,i.kt)("img",{src:"https://i.imgur.com/DJ09ngz.jpg",alt:"Offcanvas - Small Size"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

\n

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

\n

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

\n

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

\n

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

\n \n \n \n \n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n}\n")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#sizes"},"See demo here.")),(0,i.kt)("h4",{id:"large-offcanvas"},"Large Offcanvas"),(0,i.kt)("img",{src:"https://i.imgur.com/MG0NFrU.jpg",alt:"Large Offcanvas"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

\n

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

\n

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

\n

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

\n

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

\n \n \n \n \n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n}\n")),(0,i.kt)("h3",{id:"callback-events-1"},"Callback Events"),(0,i.kt)("p",null,"BlazorBootstrap's offcanvas component exposes a few events for hooking into offcanvas functionality."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n \n
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
\n \n\n \n \n \n\n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n\n private async Task OnHideOffcanvasClick()\n {\n await offcanvas?.HideAsync();\n }\n\n private async Task OnOffcanvasShowingAsync()\n {\n await Task.Run(() => { Console.WriteLine("Event: Showing"); });\n }\n\n private async Task OnOffcanvasShownAsync()\n {\n await Task.Run(() => { Console.WriteLine("Event: Shown"); });\n }\n\n private async Task OnOffcanvasHidingAsync()\n {\n await Task.Run(() => { Console.WriteLine("Event: Hiding"); });\n }\n\n private async Task OnOffcanvasHiddenAsync()\n {\n await Task.Run(() => { Console.WriteLine("Event: Hidden"); });\n }\n}\n')),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#events"},"See demo here.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/20b54e65.cf3d8d0c.js b/assets/js/20b54e65.cf3d8d0c.js deleted file mode 100644 index 34726f5e6..000000000 --- a/assets/js/20b54e65.cf3d8d0c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[7167],{3905:(e,t,a)=>{a.d(t,{Zo:()=>m,kt:()=>f});var n=a(67294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function s(e){for(var t=1;t=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var o=n.createContext({}),u=function(e){var t=n.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},m=function(e){var t=u(e.components);return n.createElement(o.Provider,{value:t},e.children)},c="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var a=e.components,i=e.mdxType,l=e.originalType,o=e.parentName,m=r(e,["components","mdxType","originalType","parentName"]),c=u(a),d=i,f=c["".concat(o,".").concat(d)]||c[d]||p[d]||l;return a?n.createElement(f,s(s({ref:t},m),{},{components:a})):n.createElement(f,s({ref:t},m))}));function f(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var l=a.length,s=new Array(l);s[0]=d;var r={};for(var o in t)hasOwnProperty.call(t,o)&&(r[o]=t[o]);r.originalType=e,r[c]="string"==typeof e?e:i,s[1]=r;for(var u=2;u{a.d(t,{ZP:()=>c});var n=a(87462),i=a(67294),l=a(3905),s=a(72389);function r(e){let{children:t,fallback:a}=e;return(0,s.Z)()?i.createElement(i.Fragment,null,t?.()):a??null}a(73935);function o(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const u={toc:[]},m="wrapper";function c(e){let{components:t,...a}=e;return(0,l.kt)(m,(0,n.Z)({},u,a,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(r,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(o,{mdxType:"RenderAd"}))))}c.isMDXComponent=!0},31650:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>r,default:()=>d,frontMatter:()=>s,metadata:()=>o,toc:()=>m});var n=a(87462),i=(a(67294),a(3905)),l=a(58034);const s={title:"Blazor Offcanvas Component",description:"Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.",image:"https://i.imgur.com/ev2Q8ON.jpg",sidebar_label:"Offcanvas",sidebar_position:14},r="Blazor Offcanvas",o={unversionedId:"components/offcanvas",id:"components/offcanvas",title:"Blazor Offcanvas Component",description:"Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.",source:"@site/docs/05-components/offcanvas.mdx",sourceDirName:"05-components",slug:"/components/offcanvas",permalink:"/components/offcanvas",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/offcanvas.mdx",tags:[],version:"current",sidebarPosition:14,frontMatter:{title:"Blazor Offcanvas Component",description:"Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.",image:"https://i.imgur.com/ev2Q8ON.jpg",sidebar_label:"Offcanvas",sidebar_position:14},sidebar:"tutorialSidebar",previous:{title:"Modal",permalink:"/components/modal"},next:{title:"Pagination",permalink:"/components/pagination"}},u={},m=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Callback Events",id:"callback-events",level:2},{value:"How it works",id:"how-it-works",level:2},{value:"Examples",id:"examples",level:2},{value:"Offcanvas",id:"offcanvas",level:3},{value:"Dynamic component as offcanvas",id:"dynamic-component-as-offcanvas",level:3},{value:"Pass event callbacks to a dynamic component",id:"pass-event-callbacks-to-a-dynamic-component",level:3},{value:"Placement",id:"placement",level:3},{value:"Static backdrop",id:"static-backdrop",level:3},{value:"Sizes",id:"sizes",level:3},{value:"Small Offcanvas",id:"small-offcanvas",level:4},{value:"Large Offcanvas",id:"large-offcanvas",level:4},{value:"Callback Events",id:"callback-events-1",level:3}],c={toc:m},p="wrapper";function d(e){let{components:t,...a}=e;return(0,i.kt)(p,(0,n.Z)({},c,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"blazor-offcanvas"},"Blazor Offcanvas"),(0,i.kt)("p",null,"Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component."),(0,i.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,i.kt)("h2",{id:"parameters"},"Parameters"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Name"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"),(0,i.kt)("th",{parentName:"tr",align:null},"Required"),(0,i.kt)("th",{parentName:"tr",align:null},"Default"),(0,i.kt)("th",{parentName:"tr",align:null},"Added Version"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"BodyCssClass"),(0,i.kt)("td",{parentName:"tr",align:null},"string"),(0,i.kt)("td",{parentName:"tr",align:null},"Additional body CSS class."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"BodyTemplate"),(0,i.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,i.kt)("td",{parentName:"tr",align:null},"Body content."),(0,i.kt)("td",{parentName:"tr",align:null},"\u2714\ufe0f"),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"CloseOnEscape"),(0,i.kt)("td",{parentName:"tr",align:null},"bool"),(0,i.kt)("td",{parentName:"tr",align:null},"Indicates whether the offcanvas closes when escape key is pressed."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"true"),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"FooterCssClass"),(0,i.kt)("td",{parentName:"tr",align:null},"string"),(0,i.kt)("td",{parentName:"tr",align:null},"Additional footer CSS class."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"FooterTemplate"),(0,i.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,i.kt)("td",{parentName:"tr",align:null},"Footer content."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"HeaderCssClass"),(0,i.kt)("td",{parentName:"tr",align:null},"string"),(0,i.kt)("td",{parentName:"tr",align:null},"Additional header CSS class."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"HeaderTemplate"),(0,i.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,i.kt)("td",{parentName:"tr",align:null},"Content for the header."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"IsScrollable"),(0,i.kt)("td",{parentName:"tr",align:null},"bool"),(0,i.kt)("td",{parentName:"tr",align:null},"Indicates whether body (page) scrolling is allowed while offcanvas is open."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"false"),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"Placement"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Placement")),(0,i.kt)("td",{parentName:"tr",align:null},"Gets or sets the offcanvas placement. By default, offcanvas is placed on the right of the viewport."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Placement.End")),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"ShowCloseButton"),(0,i.kt)("td",{parentName:"tr",align:null},"bool"),(0,i.kt)("td",{parentName:"tr",align:null},"Indicates whether the modal shows close button in header."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"true"),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"Size"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"OffcanvasSize")),(0,i.kt)("td",{parentName:"tr",align:null},"Size of the offcanvas."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"OffcanvasSize.Regular")),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"TabIndex"),(0,i.kt)("td",{parentName:"tr",align:null},"int"),(0,i.kt)("td",{parentName:"tr",align:null},"Gets or sets the tab index."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"-1"),(0,i.kt)("td",{parentName:"tr",align:null},"1.6.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"Title"),(0,i.kt)("td",{parentName:"tr",align:null},"string"),(0,i.kt)("td",{parentName:"tr",align:null},"Text for the title in header."),(0,i.kt)("td",{parentName:"tr",align:null},"\u2714\ufe0f"),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"UseStaticBackdrop"),(0,i.kt)("td",{parentName:"tr",align:null},"bool"),(0,i.kt)("td",{parentName:"tr",align:null},"When ",(0,i.kt)("inlineCode",{parentName:"td"},"UseStaticBackdrop")," is set to true, the offcanvas will not close when clicking outside of it."),(0,i.kt)("td",{parentName:"tr",align:null}),(0,i.kt)("td",{parentName:"tr",align:null},"false"),(0,i.kt)("td",{parentName:"tr",align:null},"1.8.0")))),(0,i.kt)("h2",{id:"methods"},"Methods"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Method"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"),(0,i.kt)("th",{parentName:"tr",align:null},"Added Version"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"ShowAsync"),(0,i.kt)("td",{parentName:"tr",align:null},"Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the ",(0,i.kt)("inlineCode",{parentName:"td"},"OnShown")," event occurs)."),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"HideAsync"),(0,i.kt)("td",{parentName:"tr",align:null},"Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the ",(0,i.kt)("inlineCode",{parentName:"td"},"OnHidden")," event occurs)."),(0,i.kt)("td",{parentName:"tr",align:null},"1.0.0")))),(0,i.kt)("admonition",{title:"Asynchronous methods and transitions",type:"danger"},(0,i.kt)("p",{parentName:"admonition"},"All API methods are ",(0,i.kt)("strong",{parentName:"p"},"asynchronous")," and start a ",(0,i.kt)("strong",{parentName:"p"},"transition"),". They return to the caller as soon as the transition is started but ",(0,i.kt)("strong",{parentName:"p"},"before it ends"),". In addition, a method call on a ",(0,i.kt)("strong",{parentName:"p"},"transitioning component will be ignored"),".")),(0,i.kt)("h2",{id:"callback-events"},"Callback Events"),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Event"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"OnShowing"),(0,i.kt)("td",{parentName:"tr",align:null},"This event fires immediately when the show instance method is called.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"OnShown"),(0,i.kt)("td",{parentName:"tr",align:null},"This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"OnHiding"),(0,i.kt)("td",{parentName:"tr",align:null},"This event is fired immediately when the hide method has been called.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"OnHidden"),(0,i.kt)("td",{parentName:"tr",align:null},"This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).")))),(0,i.kt)("h2",{id:"how-it-works"},"How it works"),(0,i.kt)("p",null,"Offcanvas is a sidebar component that can be toggled to appear from the left, right, or bottom edge of the viewport."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Conceptually, they are quite similar to the Modal component, but they are separate components."),(0,i.kt)("li",{parentName:"ul"},"When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas."),(0,i.kt)("li",{parentName:"ul"},"Similar to modals, only one offcanvas can be shown at a time.")),(0,i.kt)("h2",{id:"examples"},"Examples"),(0,i.kt)("h3",{id:"offcanvas"},"Offcanvas"),(0,i.kt)("p",null,"Below is an offcanvas example that is shown by default."),(0,i.kt)("img",{src:"https://i.imgur.com/1vNz5Ci.jpg",alt:"Offcanvas - Example"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n ... design your header and body\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,6,11} showLineNumbers","{2,6,11}":!0,showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task ShowOffcanvasAsync()\n {\n await offcanvas?.ShowAsync();\n }\n\n private async Task HideOffcanvasAsync()\n {\n await offcanvas?.HideAsync();\n }\n}\n")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#examples"},"See demo here.")),(0,i.kt)("admonition",{type:"info"},(0,i.kt)("p",{parentName:"admonition"},"Default placement for the offcanvas component is right.")),(0,i.kt)("h3",{id:"dynamic-component-as-offcanvas"},"Dynamic component as offcanvas"),(0,i.kt)("p",null,"Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.\nIf dynamically-rendered components have component parameters, pass them as an ",(0,i.kt)("inlineCode",{parentName:"p"},"IDictionary"),". The ",(0,i.kt)("inlineCode",{parentName:"p"},"string")," is the parameter's name, and the ",(0,i.kt)("inlineCode",{parentName:"p"},"object")," is the parameter's value."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n@code {\n private Offcanvas offcanvas = default!;\n private string? message;\n\n private async Task ShowEmployeeComponent()\n {\n var parameters = new Dictionary();\n parameters.Add("EmployeeId", 321);\n await offcanvas.ShowAsync(title: "Employee Details", parameters: parameters);\n }\n}\n')),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"EmployeeDemoComponent1.razor")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n
Employee Id :
\n
@EmployeeId
\n
\n
\n
First Name :
\n
@employee.FirstName
\n
\n
\n
Last Name :
\n
@employee.LastName
\n
\n\n@code {\n private Employee employee = default!;\n\n [Parameter] public int EmployeeId { get; set; }\n\n protected override void OnInitialized()\n {\n // get employee with {EmployeeId} from DB\n\n employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };\n\n base.OnInitialized();\n }\n}\n')),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#dynamic-component-as-offcanvas"},"See demo here.")),(0,i.kt)("h3",{id:"pass-event-callbacks-to-a-dynamic-component"},"Pass event callbacks to a dynamic component"),(0,i.kt)("p",null,"Event callbacks can be passed in its parameter dictionary."),(0,i.kt)("p",null,"In the following parent component example, the ",(0,i.kt)("inlineCode",{parentName:"p"},"ShowDTMessage")," method assigns a string with the current time to ",(0,i.kt)("inlineCode",{parentName:"p"},"message"),", and the value of ",(0,i.kt)("inlineCode",{parentName:"p"},"message")," is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"The ",(0,i.kt)("inlineCode",{parentName:"li"},"string")," key is the callback method's name, ",(0,i.kt)("inlineCode",{parentName:"li"},"OnClickCallback"),"."),(0,i.kt)("li",{parentName:"ul"},"The ",(0,i.kt)("inlineCode",{parentName:"li"},"object")," value is created by ",(0,i.kt)("inlineCode",{parentName:"li"},"EventCallbackFactory.Create")," for the parent callback method, ",(0,i.kt)("inlineCode",{parentName:"li"},"ShowDTMessage"),".")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n
\n @message\n
\n\n@code {\n private Offcanvas offcanvas = default!;\n private string? message;\n\n private async Task ShowEmployeeComponent()\n {\n var parameters = new Dictionary();\n parameters.Add("EmployeeId", 322);\n parameters.Add("OnclickCallback", EventCallback.Factory.Create(this, ShowDTMessage));\n await offcanvas.ShowAsync(title: "Employee Details", parameters: parameters);\n }\n\n private void ShowDTMessage(MouseEventArgs e) => message = $"The current date time is: {DateTime.Now}.";\n}\n')),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"EmployeeDemoComponent2.razor")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n
Employee Id :
\n
@EmployeeId
\n
\n
\n
First Name :
\n
@employee.FirstName
\n
\n
\n
Last Name :
\n
@employee.LastName
\n
\n\n\n\n@code {\n private Employee employee = default!;\n\n [Parameter] public int EmployeeId { get; set; }\n\n [Parameter] public EventCallback OnClickCallback { get; set; }\n\n protected override void OnInitialized()\n {\n // get employee with {EmployeeId} from DB\n\n employee = new Employee { FirstName = "Sagar", LastName = "Reddy" };\n\n base.OnInitialized();\n }\n}\n')),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#pass-event-callbacks-to-a-dynamic-component"},"See demo here.")),(0,i.kt)("h3",{id:"placement"},"Placement"),(0,i.kt)("p",null,"Try the top, bottom, and left examples out below."),(0,i.kt)("img",{src:"https://i.imgur.com/dJpJYpX.jpg",alt:"Offcanvas - Top Placement"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n ...\n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n}\n")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#placement"},"See demo here.")),(0,i.kt)("h3",{id:"static-backdrop"},"Static backdrop"),(0,i.kt)("p",null,"When ",(0,i.kt)("strong",{parentName:"p"},"UseStaticBackdrop")," is set to ",(0,i.kt)("strong",{parentName:"p"},"true"),", the offcanvas will not close when clicking outside of it."),(0,i.kt)("img",{src:"https://i.imgur.com/J7g2eeA.png",alt:"Offcanvas - Static backdrop"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1} showLineNumbers","{1}":!0,showLineNumbers:!0},'\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

\n

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

\n

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

\n

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

\n

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

\n \n \n \n \n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n}\n")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#static-backdrop"},"See demo here.")),(0,i.kt)("h3",{id:"sizes"},"Sizes"),(0,i.kt)("p",null,"Set the size of the ",(0,i.kt)("inlineCode",{parentName:"p"},"Offcanvas")," with the Size parameter. The default value is ",(0,i.kt)("inlineCode",{parentName:"p"},"OffcanvasSize.Regular"),"."),(0,i.kt)("h4",{id:"small-offcanvas"},"Small Offcanvas"),(0,i.kt)("img",{src:"https://i.imgur.com/DJ09ngz.jpg",alt:"Offcanvas - Small Size"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

\n

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

\n

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

\n

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

\n

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

\n \n \n \n \n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n}\n")),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#sizes"},"See demo here.")),(0,i.kt)("h4",{id:"large-offcanvas"},"Large Offcanvas"),(0,i.kt)("img",{src:"https://i.imgur.com/MG0NFrU.jpg",alt:"Large Offcanvas"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

\n

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

\n

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

\n

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

\n

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

\n \n \n \n \n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n}\n")),(0,i.kt)("h3",{id:"callback-events-1"},"Callback Events"),(0,i.kt)("p",null,"BlazorBootstrap's offcanvas component exposes a few events for hooking into offcanvas functionality."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n \n
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
\n \n\n \n \n \n\n\n\n\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private Offcanvas offcanvas;\n\n private async Task OnShowOffcanvasClick()\n {\n await offcanvas?.ShowAsync();\n }\n\n private async Task OnHideOffcanvasClick()\n {\n await offcanvas?.HideAsync();\n }\n\n private async Task OnOffcanvasShowingAsync()\n {\n await Task.Run(() => { Console.WriteLine("Event: Showing"); });\n }\n\n private async Task OnOffcanvasShownAsync()\n {\n await Task.Run(() => { Console.WriteLine("Event: Shown"); });\n }\n\n private async Task OnOffcanvasHidingAsync()\n {\n await Task.Run(() => { Console.WriteLine("Event: Hiding"); });\n }\n\n private async Task OnOffcanvasHiddenAsync()\n {\n await Task.Run(() => { Console.WriteLine("Event: Hidden"); });\n }\n}\n')),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/offcanvas#events"},"See demo here.")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/24728d82.3309ed97.js b/assets/js/24728d82.3309ed97.js new file mode 100644 index 000000000..1f1a8525b --- /dev/null +++ b/assets/js/24728d82.3309ed97.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[73269],{3905:(t,a,e)=>{e.d(a,{Zo:()=>u,kt:()=>g});var n=e(67294);function r(t,a,e){return a in t?Object.defineProperty(t,a,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[a]=e,t}function l(t,a){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(t,a).enumerable}))),e.push.apply(e,n)}return e}function i(t){for(var a=1;a=0||(r[e]=t[e]);return r}(t,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}var s=n.createContext({}),d=function(t){var a=n.useContext(s),e=a;return t&&(e="function"==typeof t?t(a):i(i({},a),t)),e},u=function(t){var a=d(t.components);return n.createElement(s.Provider,{value:a},t.children)},p="mdxType",h={inlineCode:"code",wrapper:function(t){var a=t.children;return n.createElement(n.Fragment,{},a)}},m=n.forwardRef((function(t,a){var e=t.components,r=t.mdxType,l=t.originalType,s=t.parentName,u=o(t,["components","mdxType","originalType","parentName"]),p=d(e),m=r,g=p["".concat(s,".").concat(m)]||p[m]||h[m]||l;return e?n.createElement(g,i(i({ref:a},u),{},{components:e})):n.createElement(g,i({ref:a},u))}));function g(t,a){var e=arguments,r=a&&a.mdxType;if("string"==typeof t||r){var l=e.length,i=new Array(l);i[0]=m;var o={};for(var s in a)hasOwnProperty.call(a,s)&&(o[s]=a[s]);o.originalType=t,o[p]="string"==typeof t?t:r,i[1]=o;for(var d=2;d{e.d(a,{ZP:()=>p});var n=e(87462),r=e(67294),l=e(3905),i=e(72389);function o(t){let{children:a,fallback:e}=t;return(0,i.Z)()?r.createElement(r.Fragment,null,a?.()):e??null}e(73935);function s(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let a=document.getElementById("_carbonads_js");a&&a.remove(),a=document.createElement("script"),a.async=!0,a.id="_carbonads_js",a.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",a.type="text/javascript",a.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),a&&t.appendChild(a)}),5e3),null}const d={toc:[]},u="wrapper";function p(t){let{components:a,...e}=t;return(0,l.kt)(u,(0,n.Z)({},d,e,{components:a,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},72661:(t,a,e)=>{e.r(a),e.d(a,{assets:()=>d,contentTitle:()=>o,default:()=>m,frontMatter:()=>i,metadata:()=>s,toc:()=>u});var n=e(87462),r=(e(67294),e(3905)),l=e(58034);const i={title:"Blazor Doughnut Chart",description:"A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.",image:"https://i.imgur.com/xEPhAsW.png",sidebar_label:"Doughnut Chart",sidebar_position:2},o="Blazor Doughnut Chart",s={unversionedId:"data-visualization/doughnut-chart",id:"data-visualization/doughnut-chart",title:"Blazor Doughnut Chart",description:"A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.",source:"@site/docs/06-data-visualization/doughnut-chart.mdx",sourceDirName:"06-data-visualization",slug:"/data-visualization/doughnut-chart",permalink:"/data-visualization/doughnut-chart",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/06-data-visualization/doughnut-chart.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Blazor Doughnut Chart",description:"A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.",image:"https://i.imgur.com/xEPhAsW.png",sidebar_label:"Doughnut Chart",sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Bar Chart",permalink:"/data-visualization/bar-chart"},next:{title:"Line Chart",permalink:"/data-visualization/line-chart"}},d={},u=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"ChartData Members",id:"chartdata-members",level:2},{value:"DoughnutChartDataset Members",id:"doughnutchartdataset-members",level:2},{value:"DoughnutChartDatasetDataLabels Members",id:"doughnutchartdatasetdatalabels-members",level:2},{value:"DoughnutChartOptions Members",id:"doughnutchartoptions-members",level:2},{value:"Examples",id:"examples",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"How it works",id:"how-it-works",level:3},{value:"Locale",id:"locale",level:3},{value:"Data labels",id:"data-labels",level:3}],p={toc:u},h="wrapper";function m(t){let{components:a,...e}=t;return(0,r.kt)(h,(0,n.Z)({},p,e,{components:a,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-doughnut-chart"},"Blazor Doughnut Chart"),(0,r.kt)("p",null,"A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories.\nIt is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category."),(0,r.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("img",{src:"https://i.imgur.com/xEPhAsW.png",alt:"Blazor Chart Component - Blazor Doughnut Chart"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart height."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets chart width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Return type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDataAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds data to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDatasetAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds dataset to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"InitializeAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Initialize Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"UpdateAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Update Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"chartdata-members"},"ChartData Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datasets"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Datasets."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Labels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Labels."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"doughnutchartdataset-members"},"DoughnutChartDataset Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"DoughnutChartDataset")," implements ",(0,r.kt)("strong",{parentName:"p"},"IChartDataset"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Clip"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}"),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the Data."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datalabels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"DoughnutChartDatasetDataLabels")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the data labels"),(0,r.kt)("td",{parentName:"tr",align:"left"})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Hidden"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Label"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The label for the dataset which appears in the legend and tooltips."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the chart type."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"doughnutchartdatasetdatalabels-members"},"DoughnutChartDatasetDataLabels Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Anchor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"center")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the anchor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"double?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"2")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the border width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")))),(0,r.kt)("h2",{id:"doughnutchartoptions-members"},"DoughnutChartOptions Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"DoughnutChartOptions")," implements ",(0,r.kt)("strong",{parentName:"p"},"ChartOptions"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Locale"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Plugins"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"DoughnutChartPlugins")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Plugins."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Responsive."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"prerequisites"},"Prerequisites"),(0,r.kt)("p",null,"Refer to the ",(0,r.kt)("a",{parentName:"p",href:"/getting-started/blazor-webassembly"},"getting started guide")," for setting up charts."),(0,r.kt)("h3",{id:"how-it-works"},"How it works"),(0,r.kt)("p",null,"In the following example, a categorical 12-color palette is used."),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"For data visualization, you can use the predefined palettes ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalTwelveColors")," for a 12-color palette and ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalSixColors")," for a 6-color palette.\nThese palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.")),(0,r.kt)("img",{src:"https://i.imgur.com/Q1bBWPQ.png",alt:"Blazor Bootstrap: Doughnut Chart Component - How it works"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private DoughnutChart doughnutChart = default!;\n private DoughnutChartOptions doughnutChartOptions = default!;\n private ChartData chartData = default!;\n private string[]? backgroundColors;\n\n private int datasetsCount = 0;\n private int dataLabelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n backgroundColors = ColorBuilder.CategoricalTwelveColors;\n chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };\n\n doughnutChartOptions = new();\n doughnutChartOptions.Responsive = true;\n doughnutChartOptions.Plugins.Title.Text = "2022 - Sales";\n doughnutChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is DoughnutChartDataset doughnutChartDataset\n && doughnutChartDataset is not null\n && doughnutChartDataset.Data is not null)\n {\n var count = doughnutChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(0, 100));\n }\n\n doughnutChartDataset.Data = newData;\n newDatasets.Add(doughnutChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await doughnutChart.UpdateAsync(chartData, doughnutChartOptions);\n }\n\n private async Task AddDatasetAsync()\n {\n if (chartData is null || chartData.Datasets is null) return;\n\n var chartDataset = GetRandomDoughnutChartDataset();\n chartData = await doughnutChart.AddDatasetAsync(chartData, chartDataset, doughnutChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (dataLabelsCount >= 12)\n return;\n\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is DoughnutChartDataset doughnutChartDataset)\n {\n data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));\n }\n }\n\n chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n\n dataLabelsCount += 1;\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n datasets.Add(GetRandomDoughnutChartDataset());\n }\n\n return datasets;\n }\n\n private DoughnutChartDataset GetRandomDoughnutChartDataset()\n {\n datasetsCount += 1;\n return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n data.Add(random.Next(0, 100));\n }\n\n return data;\n }\n\n private List GetRandomBackgroundColors()\n {\n var colors = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n colors.Add(backgroundColors![index]);\n }\n\n return colors;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n dataLabelsCount += 1;\n }\n\n return labels;\n }\n\n private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";\n\n private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/doughnut-chart#how-it-works"},"See the demo here.")),(0,r.kt)("h3",{id:"locale"},"Locale"),(0,r.kt)("p",null,"By default, the chart is using the default locale of the platform on which it is running.\nIn the following example, you will see the chart in the ",(0,r.kt)("strong",{parentName:"p"},"German")," locale (",(0,r.kt)("strong",{parentName:"p"},"de_DE"),")."),(0,r.kt)("img",{src:"https://i.imgur.com/3qndkPO.png",alt:"Blazor Bootstrap: Doughnut Chart Component - Locale"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Extensions\n@using Color = System.Drawing.Color\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private LineChart lineChart = default!;\n private LineChartOptions lineChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };\n var datasets = new List();\n\n var dataset1 = new LineChartDataset()\n {\n Label = "Windows",\n Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[0] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new LineChartDataset()\n {\n Label = "macOS",\n Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[1] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new LineChartDataset()\n {\n Label = "Other",\n Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[2] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n lineChartOptions = new();\n lineChartOptions.Locale = "de-DE";\n lineChartOptions.Responsive = true;\n lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };\n\n lineChartOptions.Scales.X.Title.Text = "2019";\n lineChartOptions.Scales.X.Title.Display = true;\n\n lineChartOptions.Scales.Y.Title.Text = "Visitors";\n lineChartOptions.Scales.Y.Title.Display = true;\n\n lineChartOptions.Plugins.Title.Text = "Operating system";\n lineChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await lineChart.InitializeAsync(chartData, lineChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/doughnut-chart#locale"},"See the demo here.")),(0,r.kt)("h3",{id:"data-labels"},"Data labels"),(0,r.kt)("img",{src:"https://i.imgur.com/xEPhAsW.png",alt:"Blazor Bootstrap: Doughnut Chart Component - Data labels"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{28,97,99,101} showLineNumbers","{28,97,99,101}":!0,showLineNumbers:!0},'@code {\n private DoughnutChart doughnutChart = default!;\n private DoughnutChartOptions doughnutChartOptions = default!;\n private ChartData chartData = default!;\n private string[]? backgroundColors;\n\n private int datasetsCount = 0;\n private int dataLabelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n backgroundColors = ColorBuilder.CategoricalTwelveColors;\n chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) };\n\n doughnutChartOptions = new();\n doughnutChartOptions.Responsive = true;\n doughnutChartOptions.Plugins.Title.Text = "2022 - Sales";\n doughnutChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n // pass the plugin name to enable the data labels\n await doughnutChart.InitializeAsync(chartData: chartData, chartOptions: doughnutChartOptions, plugins: new string[] { "ChartDataLabels" });\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n var datasetIndex = 0;\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is DoughnutChartDataset doughnutChartDataset\n && doughnutChartDataset is not null\n && doughnutChartDataset.Data is not null)\n {\n var count = doughnutChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(0, 100));\n }\n\n doughnutChartDataset.Data = newData;\n newDatasets.Add(doughnutChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await doughnutChart.UpdateAsync(chartData: chartData, chartOptions: doughnutChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (dataLabelsCount >= 12)\n return;\n\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is DoughnutChartDataset doughnutChartDataset)\n {\n data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));\n }\n }\n\n chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n\n dataLabelsCount += 1;\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n var dataset = GetRandomDoughnutChartDataset();\n\n if (index == 0)\n dataset.Datalabels.Anchor = "end";\n else if (index == numberOfDatasets - 1)\n dataset.Datalabels.Anchor = "start";\n else\n dataset.Datalabels.Anchor = "center";\n\n datasets.Add(dataset);\n }\n\n return datasets;\n }\n\n private DoughnutChartDataset GetRandomDoughnutChartDataset()\n {\n datasetsCount += 1;\n return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n data.Add(random.Next(0, 100));\n }\n\n return data;\n }\n\n private List GetRandomBackgroundColors()\n {\n var colors = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n colors.Add(backgroundColors![index]);\n }\n\n return colors;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n dataLabelsCount += 1;\n }\n\n return labels;\n }\n\n private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";\n\n private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/doughnut-chart#data-labels"},"See the demo here.")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/24728d82.66d16220.js b/assets/js/24728d82.66d16220.js deleted file mode 100644 index be672e500..000000000 --- a/assets/js/24728d82.66d16220.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[73269],{3905:(t,a,e)=>{e.d(a,{Zo:()=>u,kt:()=>g});var n=e(67294);function r(t,a,e){return a in t?Object.defineProperty(t,a,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[a]=e,t}function l(t,a){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(t,a).enumerable}))),e.push.apply(e,n)}return e}function i(t){for(var a=1;a=0||(r[e]=t[e]);return r}(t,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}var s=n.createContext({}),d=function(t){var a=n.useContext(s),e=a;return t&&(e="function"==typeof t?t(a):i(i({},a),t)),e},u=function(t){var a=d(t.components);return n.createElement(s.Provider,{value:a},t.children)},p="mdxType",h={inlineCode:"code",wrapper:function(t){var a=t.children;return n.createElement(n.Fragment,{},a)}},m=n.forwardRef((function(t,a){var e=t.components,r=t.mdxType,l=t.originalType,s=t.parentName,u=o(t,["components","mdxType","originalType","parentName"]),p=d(e),m=r,g=p["".concat(s,".").concat(m)]||p[m]||h[m]||l;return e?n.createElement(g,i(i({ref:a},u),{},{components:e})):n.createElement(g,i({ref:a},u))}));function g(t,a){var e=arguments,r=a&&a.mdxType;if("string"==typeof t||r){var l=e.length,i=new Array(l);i[0]=m;var o={};for(var s in a)hasOwnProperty.call(a,s)&&(o[s]=a[s]);o.originalType=t,o[p]="string"==typeof t?t:r,i[1]=o;for(var d=2;d{e.d(a,{ZP:()=>p});var n=e(87462),r=e(67294),l=e(3905),i=e(72389);function o(t){let{children:a,fallback:e}=t;return(0,i.Z)()?r.createElement(r.Fragment,null,a?.()):e??null}e(73935);function s(){let t=document.getElementById("divCarbonAd");if(t){let a=document.getElementById("_carbonads_js");a&&a.remove(),a=document.createElement("script"),a.async=!0,a.id="_carbonads_js",a.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",a.type="text/javascript",a.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(a)}return null}const d={toc:[]},u="wrapper";function p(t){let{components:a,...e}=t;return(0,l.kt)(u,(0,n.Z)({},d,e,{components:a,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},72661:(t,a,e)=>{e.r(a),e.d(a,{assets:()=>d,contentTitle:()=>o,default:()=>m,frontMatter:()=>i,metadata:()=>s,toc:()=>u});var n=e(87462),r=(e(67294),e(3905)),l=e(58034);const i={title:"Blazor Doughnut Chart",description:"A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.",image:"https://i.imgur.com/xEPhAsW.png",sidebar_label:"Doughnut Chart",sidebar_position:2},o="Blazor Doughnut Chart",s={unversionedId:"data-visualization/doughnut-chart",id:"data-visualization/doughnut-chart",title:"Blazor Doughnut Chart",description:"A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.",source:"@site/docs/06-data-visualization/doughnut-chart.mdx",sourceDirName:"06-data-visualization",slug:"/data-visualization/doughnut-chart",permalink:"/data-visualization/doughnut-chart",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/06-data-visualization/doughnut-chart.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Blazor Doughnut Chart",description:"A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.",image:"https://i.imgur.com/xEPhAsW.png",sidebar_label:"Doughnut Chart",sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Bar Chart",permalink:"/data-visualization/bar-chart"},next:{title:"Line Chart",permalink:"/data-visualization/line-chart"}},d={},u=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"ChartData Members",id:"chartdata-members",level:2},{value:"DoughnutChartDataset Members",id:"doughnutchartdataset-members",level:2},{value:"DoughnutChartDatasetDataLabels Members",id:"doughnutchartdatasetdatalabels-members",level:2},{value:"DoughnutChartOptions Members",id:"doughnutchartoptions-members",level:2},{value:"Examples",id:"examples",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"How it works",id:"how-it-works",level:3},{value:"Locale",id:"locale",level:3},{value:"Data labels",id:"data-labels",level:3}],p={toc:u},h="wrapper";function m(t){let{components:a,...e}=t;return(0,r.kt)(h,(0,n.Z)({},p,e,{components:a,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-doughnut-chart"},"Blazor Doughnut Chart"),(0,r.kt)("p",null,"A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories.\nIt is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category."),(0,r.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("img",{src:"https://i.imgur.com/xEPhAsW.png",alt:"Blazor Chart Component - Blazor Doughnut Chart"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart height."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets chart width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Return type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDataAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds data to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDatasetAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds dataset to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"InitializeAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Initialize Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"UpdateAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Update Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"chartdata-members"},"ChartData Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datasets"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Datasets."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Labels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Labels."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"doughnutchartdataset-members"},"DoughnutChartDataset Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"DoughnutChartDataset")," implements ",(0,r.kt)("strong",{parentName:"p"},"IChartDataset"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Clip"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}"),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the Data."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datalabels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"DoughnutChartDatasetDataLabels")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the data labels"),(0,r.kt)("td",{parentName:"tr",align:"left"})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Hidden"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Label"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The label for the dataset which appears in the legend and tooltips."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the chart type."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"doughnutchartdatasetdatalabels-members"},"DoughnutChartDatasetDataLabels Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Anchor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"center")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the anchor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"double?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"2")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the border width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")))),(0,r.kt)("h2",{id:"doughnutchartoptions-members"},"DoughnutChartOptions Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"DoughnutChartOptions")," implements ",(0,r.kt)("strong",{parentName:"p"},"ChartOptions"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Locale"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Plugins"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"DoughnutChartPlugins")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Plugins."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Responsive."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"prerequisites"},"Prerequisites"),(0,r.kt)("p",null,"Refer to the ",(0,r.kt)("a",{parentName:"p",href:"/getting-started/blazor-webassembly"},"getting started guide")," for setting up charts."),(0,r.kt)("h3",{id:"how-it-works"},"How it works"),(0,r.kt)("p",null,"In the following example, a categorical 12-color palette is used."),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"For data visualization, you can use the predefined palettes ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalTwelveColors")," for a 12-color palette and ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalSixColors")," for a 6-color palette.\nThese palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.")),(0,r.kt)("img",{src:"https://i.imgur.com/Q1bBWPQ.png",alt:"Blazor Bootstrap: Doughnut Chart Component - How it works"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private DoughnutChart doughnutChart = default!;\n private DoughnutChartOptions doughnutChartOptions = default!;\n private ChartData chartData = default!;\n private string[]? backgroundColors;\n\n private int datasetsCount = 0;\n private int dataLabelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n backgroundColors = ColorBuilder.CategoricalTwelveColors;\n chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };\n\n doughnutChartOptions = new();\n doughnutChartOptions.Responsive = true;\n doughnutChartOptions.Plugins.Title.Text = "2022 - Sales";\n doughnutChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is DoughnutChartDataset doughnutChartDataset\n && doughnutChartDataset is not null\n && doughnutChartDataset.Data is not null)\n {\n var count = doughnutChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(0, 100));\n }\n\n doughnutChartDataset.Data = newData;\n newDatasets.Add(doughnutChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await doughnutChart.UpdateAsync(chartData, doughnutChartOptions);\n }\n\n private async Task AddDatasetAsync()\n {\n if (chartData is null || chartData.Datasets is null) return;\n\n var chartDataset = GetRandomDoughnutChartDataset();\n chartData = await doughnutChart.AddDatasetAsync(chartData, chartDataset, doughnutChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (dataLabelsCount >= 12)\n return;\n\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is DoughnutChartDataset doughnutChartDataset)\n {\n data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));\n }\n }\n\n chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n\n dataLabelsCount += 1;\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n datasets.Add(GetRandomDoughnutChartDataset());\n }\n\n return datasets;\n }\n\n private DoughnutChartDataset GetRandomDoughnutChartDataset()\n {\n datasetsCount += 1;\n return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n data.Add(random.Next(0, 100));\n }\n\n return data;\n }\n\n private List GetRandomBackgroundColors()\n {\n var colors = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n colors.Add(backgroundColors![index]);\n }\n\n return colors;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n dataLabelsCount += 1;\n }\n\n return labels;\n }\n\n private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";\n\n private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/doughnut-chart#how-it-works"},"See the demo here.")),(0,r.kt)("h3",{id:"locale"},"Locale"),(0,r.kt)("p",null,"By default, the chart is using the default locale of the platform on which it is running.\nIn the following example, you will see the chart in the ",(0,r.kt)("strong",{parentName:"p"},"German")," locale (",(0,r.kt)("strong",{parentName:"p"},"de_DE"),")."),(0,r.kt)("img",{src:"https://i.imgur.com/3qndkPO.png",alt:"Blazor Bootstrap: Doughnut Chart Component - Locale"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Extensions\n@using Color = System.Drawing.Color\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private LineChart lineChart = default!;\n private LineChartOptions lineChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };\n var datasets = new List();\n\n var dataset1 = new LineChartDataset()\n {\n Label = "Windows",\n Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[0] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new LineChartDataset()\n {\n Label = "macOS",\n Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[1] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new LineChartDataset()\n {\n Label = "Other",\n Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[2] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n lineChartOptions = new();\n lineChartOptions.Locale = "de-DE";\n lineChartOptions.Responsive = true;\n lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };\n\n lineChartOptions.Scales.X.Title.Text = "2019";\n lineChartOptions.Scales.X.Title.Display = true;\n\n lineChartOptions.Scales.Y.Title.Text = "Visitors";\n lineChartOptions.Scales.Y.Title.Display = true;\n\n lineChartOptions.Plugins.Title.Text = "Operating system";\n lineChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await lineChart.InitializeAsync(chartData, lineChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/doughnut-chart#locale"},"See the demo here.")),(0,r.kt)("h3",{id:"data-labels"},"Data labels"),(0,r.kt)("img",{src:"https://i.imgur.com/xEPhAsW.png",alt:"Blazor Bootstrap: Doughnut Chart Component - Data labels"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{28,97,99,101} showLineNumbers","{28,97,99,101}":!0,showLineNumbers:!0},'@code {\n private DoughnutChart doughnutChart = default!;\n private DoughnutChartOptions doughnutChartOptions = default!;\n private ChartData chartData = default!;\n private string[]? backgroundColors;\n\n private int datasetsCount = 0;\n private int dataLabelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n backgroundColors = ColorBuilder.CategoricalTwelveColors;\n chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) };\n\n doughnutChartOptions = new();\n doughnutChartOptions.Responsive = true;\n doughnutChartOptions.Plugins.Title.Text = "2022 - Sales";\n doughnutChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n // pass the plugin name to enable the data labels\n await doughnutChart.InitializeAsync(chartData: chartData, chartOptions: doughnutChartOptions, plugins: new string[] { "ChartDataLabels" });\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n var datasetIndex = 0;\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is DoughnutChartDataset doughnutChartDataset\n && doughnutChartDataset is not null\n && doughnutChartDataset.Data is not null)\n {\n var count = doughnutChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(0, 100));\n }\n\n doughnutChartDataset.Data = newData;\n newDatasets.Add(doughnutChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await doughnutChart.UpdateAsync(chartData: chartData, chartOptions: doughnutChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (dataLabelsCount >= 12)\n return;\n\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is DoughnutChartDataset doughnutChartDataset)\n {\n data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));\n }\n }\n\n chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n\n dataLabelsCount += 1;\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n var dataset = GetRandomDoughnutChartDataset();\n\n if (index == 0)\n dataset.Datalabels.Anchor = "end";\n else if (index == numberOfDatasets - 1)\n dataset.Datalabels.Anchor = "start";\n else\n dataset.Datalabels.Anchor = "center";\n\n datasets.Add(dataset);\n }\n\n return datasets;\n }\n\n private DoughnutChartDataset GetRandomDoughnutChartDataset()\n {\n datasetsCount += 1;\n return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n data.Add(random.Next(0, 100));\n }\n\n return data;\n }\n\n private List GetRandomBackgroundColors()\n {\n var colors = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n colors.Add(backgroundColors![index]);\n }\n\n return colors;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n dataLabelsCount += 1;\n }\n\n return labels;\n }\n\n private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";\n\n private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/doughnut-chart#data-labels"},"See the demo here.")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2510c43f.33e9f1e4.js b/assets/js/2510c43f.33e9f1e4.js new file mode 100644 index 000000000..b7d52f9f6 --- /dev/null +++ b/assets/js/2510c43f.33e9f1e4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[22965],{3905:(t,e,n)=>{n.d(e,{Zo:()=>d,kt:()=>u});var o=n(67294);function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function r(t){for(var e=1;e=0||(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}var l=o.createContext({}),c=function(t){var e=o.useContext(l),n=e;return t&&(n="function"==typeof t?t(e):r(r({},e),t)),n},d=function(t){var e=c(t.components);return o.createElement(l.Provider,{value:e},t.children)},h="mdxType",m={inlineCode:"code",wrapper:function(t){var e=t.children;return o.createElement(o.Fragment,{},e)}},p=o.forwardRef((function(t,e){var n=t.components,a=t.mdxType,i=t.originalType,l=t.parentName,d=s(t,["components","mdxType","originalType","parentName"]),h=c(n),p=a,u=h["".concat(l,".").concat(p)]||h[p]||m[p]||i;return n?o.createElement(u,r(r({ref:e},d),{},{components:n})):o.createElement(u,r({ref:e},d))}));function u(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var i=n.length,r=new Array(i);r[0]=p;var s={};for(var l in e)hasOwnProperty.call(e,l)&&(s[l]=e[l]);s.originalType=t,s[h]="string"==typeof t?t:a,r[1]=s;for(var c=2;c{n.d(e,{ZP:()=>h});var o=n(87462),a=n(67294),i=n(3905),r=n(72389);function s(t){let{children:e,fallback:n}=t;return(0,r.Z)()?a.createElement(a.Fragment,null,e?.()):n??null}n(73935);function l(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),e&&t.appendChild(e)}),5e3),null}const c={toc:[]},d="wrapper";function h(t){let{components:e,...n}=t;return(0,i.kt)(d,(0,o.Z)({},c,n,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(l,{mdxType:"RenderAd"}))))}h.isMDXComponent=!0},33051:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>c,contentTitle:()=>s,default:()=>p,frontMatter:()=>r,metadata:()=>l,toc:()=>d});var o=n(87462),a=(n(67294),n(3905)),i=n(58034);const r={title:"Blazor Accordion Component",description:"Build vertically collapsing accordions in combination with our Collapse component.",image:"https://i.imgur.com/g4zpMXp.png",sidebar_label:"Accordion",sidebar_position:1},s="Blazor Accordion",l={unversionedId:"components/accordion",id:"components/accordion",title:"Blazor Accordion Component",description:"Build vertically collapsing accordions in combination with our Collapse component.",source:"@site/docs/05-components/accordion.mdx",sourceDirName:"05-components",slug:"/components/accordion",permalink:"/components/accordion",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/accordion.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Blazor Accordion Component",description:"Build vertically collapsing accordions in combination with our Collapse component.",image:"https://i.imgur.com/g4zpMXp.png",sidebar_label:"Accordion",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Time Input",permalink:"/forms/time-input"},next:{title:"Alerts",permalink:"/components/alerts"}},c={},d=[{value:"Accordion Parameters",id:"accordion-parameters",level:2},{value:"Accordion Methods",id:"accordion-methods",level:2},{value:"Accordion Events",id:"accordion-events",level:2},{value:"AccordionItem Parameters",id:"accordionitem-parameters",level:2},{value:"Examples",id:"examples",level:2},{value:"Accordion",id:"accordion",level:3},{value:"Title with Icon",id:"title-with-icon",level:3},{value:"Flush",id:"flush",level:3},{value:"Set default active accordion item",id:"set-default-active-accordion-item",level:3},{value:"Always open",id:"always-open",level:3},{value:"Activate individual accordion items",id:"activate-individual-accordion-items",level:3},{value:"Events Example",id:"events-example",level:3}],h={toc:d},m="wrapper";function p(t){let{components:e,...n}=t;return(0,a.kt)(m,(0,o.Z)({},h,n,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-accordion"},"Blazor Accordion"),(0,a.kt)("p",null,"Build vertically collapsing accordions in combination with our Collapse component."),(0,a.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("img",{src:"https://i.imgur.com/g4zpMXp.png",alt:"Blazor Bootstrap: Accordion Component"}),(0,a.kt)("h2",{id:"accordion-parameters"},"Accordion Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this ",(0,a.kt)("see",{cref:"Collapse"}),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Flush"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Removes borders and rounded corners to render accordions edge-to-edge with their parent container."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AlwaysOpen"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"It makes accordion items stay open when another item is opened."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,a.kt)("h2",{id:"accordion-methods"},"Accordion Methods"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ShowFirstAccordionItemAsync"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Show the first ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ShowLastAccordionItemAsync"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Show the last ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ShowAccordionItemByNameAsync"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Show the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem")," by name."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ShowAccordionItemByIndexAsync"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Show the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem")," by index."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,a.kt)("h2",{id:"accordion-events"},"Accordion Events"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnShowing"),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event fires immediately when the show method is called."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnShown"),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete)."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnHiding"),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired immediately when the hide method has been called."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnHidden"),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete)."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,a.kt)("h2",{id:"accordionitem-parameters"},"AccordionItem Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Content"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"IsActive"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the active ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the name."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Title"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem")," title."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"TitleTemplate"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem")," title template."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"accordion"},"Accordion"),(0,a.kt)("p",null,"Click the accordions below to expand/collapse the accordion content."),(0,a.kt)("img",{src:"https://i.imgur.com/IcfmBek.png",alt:"Blazor Bootstrap: Accordion Component - Examples"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"\n \n \n This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#examples"},"See demo here.")),(0,a.kt)("h3",{id:"title-with-icon"},"Title with Icon"),(0,a.kt)("p",null,"To customize the accordion title, use ",(0,a.kt)("inlineCode",{parentName:"p"},"TitleTemplate"),", as shown in the below example."),(0,a.kt)("img",{src:"https://i.imgur.com/nkIyXbb.png",alt:"Blazor Bootstrap: Accordion Component - Title with Icon"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n Accordion Item #1\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n Accordion Item #2\n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n Accordion Item #3\n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#title-with-icon"},"See demo here.")),(0,a.kt)("h3",{id:"flush"},"Flush"),(0,a.kt)("p",null,"Set the ",(0,a.kt)("inlineCode",{parentName:"p"},"Flush")," parameter to ",(0,a.kt)("inlineCode",{parentName:"p"},"true")," to remove borders and rounded corners to render accordions edge-to-edge with their parent container."),(0,a.kt)("img",{src:"https://i.imgur.com/8yqF7iY.png",alt:"Blazor Bootstrap: Accordion Component - Flush"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#flush"},"See demo here.")),(0,a.kt)("h3",{id:"set-default-active-accordion-item"},"Set default active accordion item"),(0,a.kt)("p",null,"Set the ",(0,a.kt)("inlineCode",{parentName:"p"},"IsActive")," parameter to ",(0,a.kt)("inlineCode",{parentName:"p"},"true")," to keep the accordion item open by default."),(0,a.kt)("img",{src:"https://i.imgur.com/FkbNpZN.png",alt:"Blazor Bootstrap: Accordion Component - Set default active accordion item"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#set-default-active-accordion-item"},"See demo here.")),(0,a.kt)("h3",{id:"always-open"},"Always open"),(0,a.kt)("p",null,"Set the ",(0,a.kt)("inlineCode",{parentName:"p"},"AlwaysOpen")," parameter to ",(0,a.kt)("inlineCode",{parentName:"p"},"true")," to keep accordion items open when another item is opened."),(0,a.kt)("img",{src:"https://i.imgur.com/E2AbjKh.png",alt:"Blazor Bootstrap: Accordion Component - Always open"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#always-open"},"See demo here.")),(0,a.kt)("h3",{id:"activate-individual-accordion-items"},"Activate individual accordion items"),(0,a.kt)("p",null,"You can activate individual accordion items in several ways.\nUse predefined methods ",(0,a.kt)("inlineCode",{parentName:"p"},"ShowFirstAccordionItemAsync"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"ShowLastAccordionItemAsync"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"ShowAccordionItemByNameAsync"),", and ",(0,a.kt)("inlineCode",{parentName:"p"},"ShowAccordionItemByIndexAsync")," as shown below."),(0,a.kt)("img",{src:"https://i.imgur.com/JpzHrws.png",alt:"Blazor Bootstrap: Accordion Component - Activate individual accordion items"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the fourth item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the fifth item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the sixth item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n\n\n\n\n\n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private Accordion accordion1 = default!;\n\n private async Task ShowFirstAccordionItemAsync() => await accordion1.ShowFirstAccordionItemAsync();\n private async Task ShowSecondAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(1);\n private async Task ShowThirdAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(2);\n private async Task ShowProductsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync("Products");\n private async Task ShowFaqsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync("FAQ");\n private async Task ShowLastAccordionItemAsync() => await accordion1.ShowLastAccordionItemAsync();\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#activate-individual-accordion-items"},"See demo here.")),(0,a.kt)("h3",{id:"events-example"},"Events Example"),(0,a.kt)("p",null,"Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality."),(0,a.kt)("img",{src:"https://i.imgur.com/IcfmBek.png",alt:"Blazor Bootstrap: Accordion Component - Events Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private Accordion accordion1 = default!;\n\n [Inject] ToastService ToastService { get; set; } = default!;\n\n private void OnShowingAsync(AccordionEventArgs args)\n {\n ToastService.Notify(new ToastMessage(\n type: ToastType.Primary,\n message: $"Event Name: Showing, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));\n }\n\n private void OnShownAsync(AccordionEventArgs args)\n {\n ToastService.Notify(new ToastMessage(\n type: ToastType.Primary,\n message: $"Event Name: OnShown, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));\n }\n\n private void OnHidingAsync(AccordionEventArgs args)\n {\n ToastService.Notify(new ToastMessage(\n type: ToastType.Primary,\n message: $"Event Name: OnHiding, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));\n }\n\n private void OnHiddenAsync(AccordionEventArgs args)\n {\n ToastService.Notify(new ToastMessage(\n type: ToastType.Primary,\n message: $"Event Name: OnHidden, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#events"},"See demo here.")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2510c43f.d747a79f.js b/assets/js/2510c43f.d747a79f.js deleted file mode 100644 index 7f9cf4979..000000000 --- a/assets/js/2510c43f.d747a79f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[22965],{3905:(t,e,n)=>{n.d(e,{Zo:()=>d,kt:()=>u});var o=n(67294);function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,o)}return n}function r(t){for(var e=1;e=0||(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}var l=o.createContext({}),c=function(t){var e=o.useContext(l),n=e;return t&&(n="function"==typeof t?t(e):r(r({},e),t)),n},d=function(t){var e=c(t.components);return o.createElement(l.Provider,{value:e},t.children)},h="mdxType",m={inlineCode:"code",wrapper:function(t){var e=t.children;return o.createElement(o.Fragment,{},e)}},p=o.forwardRef((function(t,e){var n=t.components,a=t.mdxType,i=t.originalType,l=t.parentName,d=s(t,["components","mdxType","originalType","parentName"]),h=c(n),p=a,u=h["".concat(l,".").concat(p)]||h[p]||m[p]||i;return n?o.createElement(u,r(r({ref:e},d),{},{components:n})):o.createElement(u,r({ref:e},d))}));function u(t,e){var n=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var i=n.length,r=new Array(i);r[0]=p;var s={};for(var l in e)hasOwnProperty.call(e,l)&&(s[l]=e[l]);s.originalType=t,s[h]="string"==typeof t?t:a,r[1]=s;for(var c=2;c{n.d(e,{ZP:()=>h});var o=n(87462),a=n(67294),i=n(3905),r=n(72389);function s(t){let{children:e,fallback:n}=t;return(0,r.Z)()?a.createElement(a.Fragment,null,e?.()):n??null}n(73935);function l(){let t=document.getElementById("divCarbonAd");if(t){let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(e)}return null}const c={toc:[]},d="wrapper";function h(t){let{components:e,...n}=t;return(0,i.kt)(d,(0,o.Z)({},c,n,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(l,{mdxType:"RenderAd"}))))}h.isMDXComponent=!0},33051:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>c,contentTitle:()=>s,default:()=>p,frontMatter:()=>r,metadata:()=>l,toc:()=>d});var o=n(87462),a=(n(67294),n(3905)),i=n(58034);const r={title:"Blazor Accordion Component",description:"Build vertically collapsing accordions in combination with our Collapse component.",image:"https://i.imgur.com/g4zpMXp.png",sidebar_label:"Accordion",sidebar_position:1},s="Blazor Accordion",l={unversionedId:"components/accordion",id:"components/accordion",title:"Blazor Accordion Component",description:"Build vertically collapsing accordions in combination with our Collapse component.",source:"@site/docs/05-components/accordion.mdx",sourceDirName:"05-components",slug:"/components/accordion",permalink:"/components/accordion",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/accordion.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Blazor Accordion Component",description:"Build vertically collapsing accordions in combination with our Collapse component.",image:"https://i.imgur.com/g4zpMXp.png",sidebar_label:"Accordion",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Time Input",permalink:"/forms/time-input"},next:{title:"Alerts",permalink:"/components/alerts"}},c={},d=[{value:"Accordion Parameters",id:"accordion-parameters",level:2},{value:"Accordion Methods",id:"accordion-methods",level:2},{value:"Accordion Events",id:"accordion-events",level:2},{value:"AccordionItem Parameters",id:"accordionitem-parameters",level:2},{value:"Examples",id:"examples",level:2},{value:"Accordion",id:"accordion",level:3},{value:"Title with Icon",id:"title-with-icon",level:3},{value:"Flush",id:"flush",level:3},{value:"Set default active accordion item",id:"set-default-active-accordion-item",level:3},{value:"Always open",id:"always-open",level:3},{value:"Activate individual accordion items",id:"activate-individual-accordion-items",level:3},{value:"Events Example",id:"events-example",level:3}],h={toc:d},m="wrapper";function p(t){let{components:e,...n}=t;return(0,a.kt)(m,(0,o.Z)({},h,n,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-accordion"},"Blazor Accordion"),(0,a.kt)("p",null,"Build vertically collapsing accordions in combination with our Collapse component."),(0,a.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("img",{src:"https://i.imgur.com/g4zpMXp.png",alt:"Blazor Bootstrap: Accordion Component"}),(0,a.kt)("h2",{id:"accordion-parameters"},"Accordion Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this ",(0,a.kt)("see",{cref:"Collapse"}),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Flush"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Removes borders and rounded corners to render accordions edge-to-edge with their parent container."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AlwaysOpen"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"It makes accordion items stay open when another item is opened."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,a.kt)("h2",{id:"accordion-methods"},"Accordion Methods"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ShowFirstAccordionItemAsync"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Show the first ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ShowLastAccordionItemAsync"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Show the last ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ShowAccordionItemByNameAsync"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Show the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem")," by name."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ShowAccordionItemByIndexAsync"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Show the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem")," by index."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,a.kt)("h2",{id:"accordion-events"},"Accordion Events"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnShowing"),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event fires immediately when the show method is called."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnShown"),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete)."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnHiding"),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired immediately when the hide method has been called."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnHidden"),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete)."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,a.kt)("h2",{id:"accordionitem-parameters"},"AccordionItem Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Content"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"IsActive"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the active ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the name."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Title"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem")," title."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"TitleTemplate"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ",(0,a.kt)("inlineCode",{parentName:"td"},"AccordionItem")," title template."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"accordion"},"Accordion"),(0,a.kt)("p",null,"Click the accordions below to expand/collapse the accordion content."),(0,a.kt)("img",{src:"https://i.imgur.com/IcfmBek.png",alt:"Blazor Bootstrap: Accordion Component - Examples"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"\n \n \n This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#examples"},"See demo here.")),(0,a.kt)("h3",{id:"title-with-icon"},"Title with Icon"),(0,a.kt)("p",null,"To customize the accordion title, use ",(0,a.kt)("inlineCode",{parentName:"p"},"TitleTemplate"),", as shown in the below example."),(0,a.kt)("img",{src:"https://i.imgur.com/nkIyXbb.png",alt:"Blazor Bootstrap: Accordion Component - Title with Icon"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n Accordion Item #1\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n Accordion Item #2\n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n Accordion Item #3\n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#title-with-icon"},"See demo here.")),(0,a.kt)("h3",{id:"flush"},"Flush"),(0,a.kt)("p",null,"Set the ",(0,a.kt)("inlineCode",{parentName:"p"},"Flush")," parameter to ",(0,a.kt)("inlineCode",{parentName:"p"},"true")," to remove borders and rounded corners to render accordions edge-to-edge with their parent container."),(0,a.kt)("img",{src:"https://i.imgur.com/8yqF7iY.png",alt:"Blazor Bootstrap: Accordion Component - Flush"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#flush"},"See demo here.")),(0,a.kt)("h3",{id:"set-default-active-accordion-item"},"Set default active accordion item"),(0,a.kt)("p",null,"Set the ",(0,a.kt)("inlineCode",{parentName:"p"},"IsActive")," parameter to ",(0,a.kt)("inlineCode",{parentName:"p"},"true")," to keep the accordion item open by default."),(0,a.kt)("img",{src:"https://i.imgur.com/FkbNpZN.png",alt:"Blazor Bootstrap: Accordion Component - Set default active accordion item"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#set-default-active-accordion-item"},"See demo here.")),(0,a.kt)("h3",{id:"always-open"},"Always open"),(0,a.kt)("p",null,"Set the ",(0,a.kt)("inlineCode",{parentName:"p"},"AlwaysOpen")," parameter to ",(0,a.kt)("inlineCode",{parentName:"p"},"true")," to keep accordion items open when another item is opened."),(0,a.kt)("img",{src:"https://i.imgur.com/E2AbjKh.png",alt:"Blazor Bootstrap: Accordion Component - Always open"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#always-open"},"See demo here.")),(0,a.kt)("h3",{id:"activate-individual-accordion-items"},"Activate individual accordion items"),(0,a.kt)("p",null,"You can activate individual accordion items in several ways.\nUse predefined methods ",(0,a.kt)("inlineCode",{parentName:"p"},"ShowFirstAccordionItemAsync"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"ShowLastAccordionItemAsync"),", ",(0,a.kt)("inlineCode",{parentName:"p"},"ShowAccordionItemByNameAsync"),", and ",(0,a.kt)("inlineCode",{parentName:"p"},"ShowAccordionItemByIndexAsync")," as shown below."),(0,a.kt)("img",{src:"https://i.imgur.com/JpzHrws.png",alt:"Blazor Bootstrap: Accordion Component - Activate individual accordion items"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the fourth item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the fifth item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the sixth item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n\n\n\n\n\n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private Accordion accordion1 = default!;\n\n private async Task ShowFirstAccordionItemAsync() => await accordion1.ShowFirstAccordionItemAsync();\n private async Task ShowSecondAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(1);\n private async Task ShowThirdAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(2);\n private async Task ShowProductsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync("Products");\n private async Task ShowFaqsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync("FAQ");\n private async Task ShowLastAccordionItemAsync() => await accordion1.ShowLastAccordionItemAsync();\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#activate-individual-accordion-items"},"See demo here.")),(0,a.kt)("h3",{id:"events-example"},"Events Example"),(0,a.kt)("p",null,"Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality."),(0,a.kt)("img",{src:"https://i.imgur.com/IcfmBek.png",alt:"Blazor Bootstrap: Accordion Component - Events Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n \n This is the first item\'s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the second item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n \n \n This is the third item\'s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It\'s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.\n \n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private Accordion accordion1 = default!;\n\n [Inject] ToastService ToastService { get; set; } = default!;\n\n private void OnShowingAsync(AccordionEventArgs args)\n {\n ToastService.Notify(new ToastMessage(\n type: ToastType.Primary,\n message: $"Event Name: Showing, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));\n }\n\n private void OnShownAsync(AccordionEventArgs args)\n {\n ToastService.Notify(new ToastMessage(\n type: ToastType.Primary,\n message: $"Event Name: OnShown, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));\n }\n\n private void OnHidingAsync(AccordionEventArgs args)\n {\n ToastService.Notify(new ToastMessage(\n type: ToastType.Primary,\n message: $"Event Name: OnHiding, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));\n }\n\n private void OnHiddenAsync(AccordionEventArgs args)\n {\n ToastService.Notify(new ToastMessage(\n type: ToastType.Primary,\n message: $"Event Name: OnHidden, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/accordion#events"},"See demo here.")))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/28293836.2c948549.js b/assets/js/28293836.2c948549.js new file mode 100644 index 000000000..8e4380ea4 --- /dev/null +++ b/assets/js/28293836.2c948549.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[21100],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>g});var r=n(67294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var m=r.createContext({}),s=function(e){var t=r.useContext(m),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},d=function(e){var t=s(e.components);return r.createElement(m.Provider,{value:t},e.children)},p="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,m=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),p=s(n),u=a,g=p["".concat(m,".").concat(u)]||p[u]||c[u]||i;return n?r.createElement(g,o(o({ref:t},d),{},{components:n})):r.createElement(g,o({ref:t},d))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=u;var l={};for(var m in t)hasOwnProperty.call(t,m)&&(l[m]=t[m]);l.originalType=e,l[p]="string"==typeof e?e:a,o[1]=l;for(var s=2;s{n.d(t,{ZP:()=>p});var r=n(87462),a=n(67294),i=n(3905),o=n(72389);function l(e){let{children:t,fallback:n}=e;return(0,o.Z)()?a.createElement(a.Fragment,null,t?.()):n??null}n(73935);function m(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const s={toc:[]},d="wrapper";function p(e){let{components:t,...n}=e;return(0,i.kt)(d,(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(l,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(m,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},38238:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>m,toc:()=>d});var r=n(87462),a=(n(67294),n(3905)),i=n(58034);const o={title:"Blazor Grid Component",description:"Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting.",image:"https://i.imgur.com/kKNgo2I.png",sidebar_label:"Grid",sidebar_position:12},l="Blazor Grid",m={unversionedId:"components/grid",id:"components/grid",title:"Blazor Grid Component",description:"Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting.",source:"@site/docs/05-components/grid.mdx",sourceDirName:"05-components",slug:"/components/grid",permalink:"/components/grid",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/grid.mdx",tags:[],version:"current",sidebarPosition:12,frontMatter:{title:"Blazor Grid Component",description:"Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting.",image:"https://i.imgur.com/kKNgo2I.png",sidebar_label:"Grid",sidebar_position:12},sidebar:"tutorialSidebar",previous:{title:"Dropdown",permalink:"/components/dropdown"},next:{title:"Modal",permalink:"/components/modal"}},s={},d=[{value:"Grid Parameters",id:"grid-parameters",level:2},{value:"Grid Callback Events",id:"grid-callback-events",level:2},{value:"Grid Methods",id:"grid-methods",level:2},{value:"GridColumn Parameters",id:"gridcolumn-parameters",level:2},{value:"GridSettings Properties",id:"gridsettings-properties",level:2},{value:"Examples",id:"examples",level:2},{value:"Client side filtering",id:"client-side-filtering",level:3},{value:"Client side filtering with string comparision",id:"client-side-filtering-with-string-comparision",level:3},{value:"Client side paging",id:"client-side-paging",level:3},{value:"Client side sorting",id:"client-side-sorting",level:3},{value:"Client side filtering, paging, and sorting",id:"client-side-filtering-paging-and-sorting",level:3},{value:"Set default filter",id:"set-default-filter",level:3},{value:"Disable specific column filter",id:"disable-specific-column-filter",level:3},{value:"Increase filter textbox width",id:"increase-filter-textbox-width",level:3},{value:"Server side filtering, paging and sorting",id:"server-side-filtering-paging-and-sorting",level:3},{value:"Set default sorting",id:"set-default-sorting",level:3},{value:"Disable specific column sorting",id:"disable-specific-column-sorting",level:3},{value:"Header text alignment",id:"header-text-alignment",level:3},{value:"Cell alignment",id:"cell-alignment",level:3},{value:"Cell formating",id:"cell-formating",level:3},{value:"Cell nowrap",id:"cell-nowrap",level:3},{value:"Pagination alignment",id:"pagination-alignment",level:3},{value:"Empty data",id:"empty-data",level:3},{value:"Save and Load Grid Settings",id:"save-and-load-grid-settings",level:3},{value:"Data parameter - Assign collection",id:"data-parameter---assign-collection",level:3},{value:"Data parameter - Update collection",id:"data-parameter---update-collection",level:3},{value:"Conditional css class for grid row",id:"conditional-css-class-for-grid-row",level:3},{value:"Conditional css class for grid column",id:"conditional-css-class-for-grid-column",level:3},{value:"Custom column headers",id:"custom-column-headers",level:3},{value:"Selection",id:"selection",level:3},{value:"Multiple selection",id:"multiple-selection",level:3},{value:"Disable selection",id:"disable-selection",level:3},{value:"Dynamic page size",id:"dynamic-page-size",level:3},{value:"Page size selection",id:"page-size-selection",level:3},{value:"Header row css class",id:"header-row-css-class",level:3},{value:"Filters row css class",id:"filters-row-css-class",level:3},{value:"Row click event",id:"row-click-event",level:3},{value:"Row double click event",id:"row-double-click-event",level:3},{value:"Translations",id:"translations",level:3},{value:"Fixed header",id:"fixed-header",level:3},{value:"Fixed header with filters",id:"fixed-header-with-filters",level:3},{value:"Freeze columns",id:"freeze-columns",level:3},{value:"Freeze columns with fixed header",id:"freeze-columns-with-fixed-header",level:3},{value:"Freeze columns with fixed header and filters",id:"freeze-columns-with-fixed-header-and-filters",level:3}],p={toc:d},c="wrapper";function u(e){let{components:t,...n}=e;return(0,a.kt)(c,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-grid"},"Blazor Grid"),(0,a.kt)("p",null,"Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting."),(0,a.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("img",{src:"https://i.imgur.com/kKNgo2I.png",alt:"Blazor Bootstrap: Grid Component"}),(0,a.kt)("h2",{id:"grid-parameters"},"Grid Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowFiltering"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid filtering."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowPaging"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid paging."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowRowClick"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the allow row click."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.5")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowSelection"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid selection."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowSorting"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid sorting."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the grid."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"IEnumerable")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid data."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.4.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"DataProvider"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"GridDataProviderDelegate")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"DataProvider is for items to render. The provider should always return an instance of ",(0,a.kt)("inlineCode",{parentName:"td"},"GridDataProviderResult"),", and ",(0,a.kt)("inlineCode",{parentName:"td"},"null")," is not allowed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"DisableAllRowsSelection"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Func, bool>?")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Enable or disable the header checkbox selection."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"DisableRowSelection"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Func?")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Enable or disable the row level checkbox selection."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"EmptyDataTemplate"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Template to render when there are no rows to display."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"EmptyText"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},"No records to display"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Shows text on no records."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FiltersRowCssClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the filters row css class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.2")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FiltersTranslationProvider"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"GridFiltersTranslationDelegate")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Filters transalation is for grid filters to render. The provider should always return a 'FilterOperatorInfo' collection, and 'null' is not allowed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FixedHeader"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid fixed header."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"HeaderRowCssClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the header row css class but not the thead tag class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.2")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,a.kt)("td",{parentName:"tr",align:"left"},"float"),(0,a.kt)("td",{parentName:"tr",align:"left"},"320 pixels"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid height."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ItemsPerPageText"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Items per page")),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ItemsPerPageText."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.5")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageSize"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int"),(0,a.kt)("td",{parentName:"tr",align:"left"},"10"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the page size of the grid."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageSizeSelectorItems"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int[]"),(0,a.kt)("td",{parentName:"tr",align:"left"},"new int[] { 10, 20, 50 }"),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the page size selector items."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageSizeSelectorVisible"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the page size selector visible."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PaginationItemsTextFormat"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"{0} - {1} of {2} items")),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the pagination items text format."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"RowClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Func?"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the row class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.6.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets a value indicating whether Grid is responsive."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SelectionMode"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"GridSelectionMode")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid selection mode."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SettingsProvider"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"GridSettingsProviderDelegate")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Settings are for the grid to render. The provider should always return an instance of 'GridSettings', and 'null' is not allowed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"THeadCssClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"string?")),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the thead css class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Unit"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Unit")),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Unit.px")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the units."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.3")))),(0,a.kt)("admonition",{title:"IMPORTANT",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"Grid requires either ",(0,a.kt)("inlineCode",{parentName:"p"},"Data")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"DataProvider")," parameter, but not both.")),(0,a.kt)("h2",{id:"grid-callback-events"},"Grid Callback Events"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"GridSettingsChanged"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"EventCallback")),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired when the grid state is changed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnRowClick"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"EventCallback>")),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is triggered when the user clicks on the row. Set AllowRowClick to true to enable row clicking."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.5")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnRowDoubleClick"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"EventCallback>")),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is triggered when the user double clicks on the row. Set AllowRowClick to true to enable row double clicking."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.5")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SelectedItemsChanged"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"EventCallback>")),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired when the items selection changed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")))),(0,a.kt)("h2",{id:"grid-methods"},"Grid Methods"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Return Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"GetFilters()"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"IEnumerable")),(0,a.kt)("td",{parentName:"tr",align:"left"},"Get filters."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"RefreshDataAsync(CancellationToken cancellationToken = default)"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Refresh the grid data."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ResetPageNumber()"),(0,a.kt)("td",{parentName:"tr",align:"left"},"ValueTask"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Reset the page number to 1 and refresh the grid."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.4.3")))),(0,a.kt)("h2",{id:"gridcolumn-parameters"},"GridColumn Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the grid column."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ColumnClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Func?"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the column class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.6.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Filterable"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"true"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Enable or disable the filter on a specific column. The filter is enabled or disabled based on the grid ",(0,a.kt)("inlineCode",{parentName:"td"},"AllowFiltering")," parameter."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FilterOperator"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Assigned based on the property type."),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the filter operator."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FilterTextboxWidth"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the filter textbox width in pixels."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FilterValue"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the filter value."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Freeze"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Indicates whether the column is frozen."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FreezeDirection"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"FreezeDirection")),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"FreezeDirection.Left")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the freeze direction of the column."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FreezeLeftPosition"),(0,a.kt)("td",{parentName:"tr",align:"left"},"double"),(0,a.kt)("td",{parentName:"tr",align:"left"},"0"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the horizontal position of the column from left. It has no effect on non-positioned columns."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FreezeRightPosition"),(0,a.kt)("td",{parentName:"tr",align:"left"},"double"),(0,a.kt)("td",{parentName:"tr",align:"left"},"0"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the horizontal position of the column from right. It has no effect on non-positioned columns."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"HeaderContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the grid column header."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"HeaderText"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the table column header."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"HeaderTextAlignment"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Start")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the header text alignment. Use ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Start")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Center")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.End"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"IsDefaultSortColumn"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the default sort column."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PropertyName"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the property name. This is required when ",(0,a.kt)("inlineCode",{parentName:"td"},"AllowFiltering")," is true."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Sortable"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Enable or disable the sorting on a specific column. The sorting is enabled or disabled based on the grid ",(0,a.kt)("inlineCode",{parentName:"td"},"AllowSorting")," parameter."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SortDirection"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"SortDirection.None")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the default sort direction of a column. Use ",(0,a.kt)("inlineCode",{parentName:"td"},"SortDirection.Ascending")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"SortDirection.Descending")),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SortKeySelector"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Expression>")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Expression used for sorting."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SortString"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the column sort string. This string is passed to the backend/API for sorting. And it is ignored for client-side sorting."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"StringComparison"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.OrdinalIgnoreCase")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the StringComparison. Use ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.CurrentCulture")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.CurrentCultureIgnoreCase")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.InvariantCulture")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.InvariantCultureIgnoreCase")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.Ordinal")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.OrdinalIgnoreCase"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"TextAlignment"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Alignment")),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Start")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the text alignment. Use ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Start")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Center")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.End"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"TextNoWrap"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets text nowrap."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,a.kt)("h2",{id:"gridsettings-properties"},"GridSettings Properties"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageNumber"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Page number."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageSize"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Size of the page."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Filters"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"IEnumerable")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Current filters."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"client-side-filtering"},"Client side filtering"),(0,a.kt)("p",null,"For filtering, ",(0,a.kt)("inlineCode",{parentName:"p"},"AllowFiltering")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"PropertyName")," parameters are required.\nAdd ",(0,a.kt)("inlineCode",{parentName:"p"},'AllowFiltering="true"')," parameter to Grid and ",(0,a.kt)("inlineCode",{parentName:"p"},"PropertyName")," parameter to all the GridColumns."),(0,a.kt)("img",{src:"https://i.imgur.com/Clr8W11.png",alt:"Blazor Bootstrap: Grid Component - Client side filtering"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,2,5,8,11,14} showLineNumbers","{1,2,5,8,11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-filtering"},"See demo here")),(0,a.kt)("h3",{id:"client-side-filtering-with-string-comparision"},"Client side filtering with string comparision"),(0,a.kt)("p",null,"In the below example, ",(0,a.kt)("inlineCode",{parentName:"p"},"StringComparision.Ordinal")," is used on the ",(0,a.kt)("strong",{parentName:"p"},"Employee Name")," column to make the filter case-sensitive."),(0,a.kt)("img",{src:"https://i.imgur.com/yLzUB8I.png",alt:"Blazor Bootstrap: Grid Component - Client side filtering with string comparision"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5} showLineNumbers","{5}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-filtering-with-string-comparision"},"See demo here")),(0,a.kt)("admonition",{type:"info"},(0,a.kt)("p",{parentName:"admonition"},"By default, ",(0,a.kt)("code",null,"StringComparison.OrdinalIgnoreCase")," is used to compare culture-agnostic and case-insensitive string matching.")),(0,a.kt)("h3",{id:"client-side-paging"},"Client side paging"),(0,a.kt)("p",null,"For paging, ",(0,a.kt)("inlineCode",{parentName:"p"},"AllowPaging")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"PageSize")," parameters are required.\nAdd ",(0,a.kt)("inlineCode",{parentName:"p"},'AllowPaging="true"')," and ",(0,a.kt)("inlineCode",{parentName:"p"},'PageSize="20"')," parameters to the Grid. ",(0,a.kt)("inlineCode",{parentName:"p"},"PageSize")," parameter is optional. "),(0,a.kt)("img",{src:"https://i.imgur.com/WXwUqgX.png",alt:"Blazor Bootstrap: Grid Component - Client side paging"}),(0,a.kt)("admonition",{title:"INFO",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"The default page size is 10.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1} showLineNumbers","{1}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-paging"},"See demo here")),(0,a.kt)("h3",{id:"client-side-sorting"},"Client side sorting"),(0,a.kt)("p",null,"For sorting, ",(0,a.kt)("inlineCode",{parentName:"p"},"AllowSorting")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"SortKeySelector")," parameters are required.\nAdd ",(0,a.kt)("inlineCode",{parentName:"p"},'AllowSorting="true"')," parameter to Grid and ",(0,a.kt)("inlineCode",{parentName:"p"},"SortKeySelector")," to all the GridColumns."),(0,a.kt)("img",{src:"https://i.imgur.com/wkIWG5S.png",alt:"Blazor Bootstrap: Grid Component - Client side sorting"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,2,5,8,11,14} showLineNumbers","{1,2,5,8,11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-sorting"},"See demo here")),(0,a.kt)("h3",{id:"client-side-filtering-paging-and-sorting"},"Client side filtering, paging, and sorting"),(0,a.kt)("img",{src:"https://i.imgur.com/wZ0cQiO.png",alt:"Blazor Bootstrap: Grid Component - Client side filtering, paging, and sorting"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,2,5,8,11,14} showLineNumbers","{1,2,5,8,11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-filtering-paging-sorting"},"See demo here")),(0,a.kt)("h3",{id:"set-default-filter"},"Set default filter"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"FilterOperator")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"FilterValue")," parameters are required to set the default filter. "),(0,a.kt)("img",{src:"https://i.imgur.com/jog5EA4.png",alt:"Blazor Bootstrap: Grid Component - Set default filter"}),(0,a.kt)("admonition",{title:"TIP",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"You can set the default filter on more than one GridColumn.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2} showLineNumbers","{2}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#set-default-filter"},"See demo here")),(0,a.kt)("h3",{id:"disable-specific-column-filter"},"Disable specific column filter"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"Filterable")," parameter is required to disable the filter on a specific column.\nAdd ",(0,a.kt)("inlineCode",{parentName:"p"},'Filterable="false"')," parameter to GridColumn."),(0,a.kt)("img",{src:"https://i.imgur.com/oGeA4VO.png",alt:"Blazor Bootstrap: Grid Component - Disable specific column filter"}),(0,a.kt)("admonition",{title:"INFO",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"By default, ",(0,a.kt)("inlineCode",{parentName:"p"},'Filterable="true"')," on all the columns if the ",(0,a.kt)("inlineCode",{parentName:"p"},"AllowFiltering")," parameter is set to ",(0,a.kt)("inlineCode",{parentName:"p"},"true")," on the grid.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{14} showLineNumbers","{14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#disable-specific-column-filter"},"See demo here")),(0,a.kt)("h3",{id:"increase-filter-textbox-width"},"Increase filter textbox width"),(0,a.kt)("p",null,"Add ",(0,a.kt)("inlineCode",{parentName:"p"},"FilterTextboxWidth")," parameter to the GridColumn to increase or decrease the filter textbox width, ",(0,a.kt)("inlineCode",{parentName:"p"},"FilterTextboxWidth")," parameter is optional."),(0,a.kt)("img",{src:"https://i.imgur.com/eWXiHr0.png",alt:"Blazor Bootstrap: Grid Component - Increase filter textbox width"}),(0,a.kt)("admonition",{title:"NOTE",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"Filter textbox width measured in pixels.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,5,8} showLineNumbers","{2,5,8}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.FirstName\n \n \n @context.LastName\n \n \n @context.Email\n \n \n @context.Company\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.Salary.ToString("N2")\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },\n new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },\n new Employee3 { Id = 106, FirstName = "John", LastName = "Papa", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },\n new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },\n new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true },\n new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },\n new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },\n new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },\n new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#increase-filter-textbox-width"},"See demo here")),(0,a.kt)("h3",{id:"server-side-filtering-paging-and-sorting"},"Server side filtering, paging and sorting"),(0,a.kt)("img",{src:"https://i.imgur.com/xHVXTew.png",alt:"Blazor Bootstrap: Grid Component - Server side filtering, paging and sorting"}),(0,a.kt)("admonition",{title:"NOTE",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"For server-side sorting, we need the ",(0,a.kt)("inlineCode",{parentName:"p"},"SortString")," parameter on GridColumn along with the ",(0,a.kt)("inlineCode",{parentName:"p"},"SortKeySelector")," parameter.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.FirstName\n \n \n @context.LastName\n \n \n @context.Designation\n \n \n @context.Salary\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{11} showLineNumbers","{11}":!0,showLineNumbers:!0},'@code {\n [Inject] public IEmployeeService _employeeService { get; set; }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting[0].SortString;\n sortDirection = request.Sorting[0].SortDirection;\n }\n var result = _employeeService.GetEmployees(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#server-side-filtering-paging-sorting"},"See demo here")),(0,a.kt)("h3",{id:"set-default-sorting"},"Set default sorting"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"IsDefaultSortColumn")," parameter is required to set the default sorting. Add ",(0,a.kt)("inlineCode",{parentName:"p"},'IsDefaultSortColumn="true"')," parameter to the GridColumn.\nThe default sort direction will be ",(0,a.kt)("strong",{parentName:"p"},"ascending"),". To change the default sorting of a column, add ",(0,a.kt)("inlineCode",{parentName:"p"},'SortDirection="SortDirection.Descending"')," to the GridColumn."),(0,a.kt)("img",{src:"https://i.imgur.com/WxULPS6.png",alt:"Blazor Bootstrap: Grid Component - Set default sorting"}),(0,a.kt)("admonition",{title:"INFO",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"If more than one GridColumn has the ",(0,a.kt)("inlineCode",{parentName:"p"},"IsDefaultSortColumn")," paramter, it will pick the first column as the default sorting column.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5} showLineNumbers","{5}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#set-default-sorting"},"See demo here")),(0,a.kt)("h3",{id:"disable-specific-column-sorting"},"Disable specific column sorting"),(0,a.kt)("p",null,"Add ",(0,a.kt)("inlineCode",{parentName:"p"},'Sortable="false"')," parameter the GridColumn to disable the sorting. "),(0,a.kt)("admonition",{title:"INFO",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"If sorting is disabled, then the ",(0,a.kt)("inlineCode",{parentName:"p"},"SortKeySelector")," parameter is not required.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8} showLineNumbers","{8}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#disable-specific-column-sorting"},"See demo here")),(0,a.kt)("h3",{id:"header-text-alignment"},"Header text alignment"),(0,a.kt)("p",null,"Use the ",(0,a.kt)("inlineCode",{parentName:"p"},"HeaderTextAlignment")," parameter to change the header column alignment.\nBy default, ",(0,a.kt)("inlineCode",{parentName:"p"},"HeaderTextAlignment")," is set to Alignment.Start. Other options you can use are ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Center")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.End"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/gWgIESD.png",alt:"Blazor Bootstrap: Grid Component - Header text alignment"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8,11,14} showLineNumbers","{8,11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#header-text-alignment"},"See demo here")),(0,a.kt)("h3",{id:"cell-alignment"},"Cell alignment"),(0,a.kt)("p",null,"Use the ",(0,a.kt)("inlineCode",{parentName:"p"},"TextAlignment")," parameter to change the cell data alignment.\nBy default, ",(0,a.kt)("inlineCode",{parentName:"p"},"TextAlignment")," is set to ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Start"),". Other options you can use are ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Center")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.End"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/0OKp4yd.png",alt:"Blazor Bootstrap: Grid Component - Cell alignment"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{11,14} showLineNumbers","{11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.Salary\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },\n new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },\n new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },\n new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },\n new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },\n new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },\n new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },\n new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },\n new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#cell-alignment"},"See demo here")),(0,a.kt)("h3",{id:"cell-formating"},"Cell formating"),(0,a.kt)("p",null,"To format the cell data, use ",(0,a.kt)("inlineCode",{parentName:"p"},"ToString")," method and format strings. Refer: ",(0,a.kt)("a",{parentName:"p",href:"https://docs.microsoft.com/en-us/dotnet/standard/base-types/formatting-types"},"How to format numbers, dates, enums, and other types in .NET")),(0,a.kt)("img",{src:"https://i.imgur.com/MitfasL.png",alt:"Blazor Bootstrap: Grid Component - Cell formating"}),(0,a.kt)("admonition",{title:"EXAMPLE",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},'@context.Salary.ToString("N2")')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{12} showLineNumbers","{12}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.Salary.ToString("N2")\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },\n new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },\n new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },\n new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },\n new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },\n new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },\n new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },\n new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },\n new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#cell-formating"},"See demo here")),(0,a.kt)("h3",{id:"cell-nowrap"},"Cell nowrap"),(0,a.kt)("p",null,"To prevent text from wrapping, add ",(0,a.kt)("inlineCode",{parentName:"p"},'TextNoWrap="true"')," parameter to the GridColumn."),(0,a.kt)("img",{src:"https://i.imgur.com/Wzc3AUF.png",alt:"Blazor Bootstrap: Grid Component - Cell nowrap"}),(0,a.kt)("admonition",{title:"TIP",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"Add ",(0,a.kt)("inlineCode",{parentName:"p"},'Responsive="true"')," parameter to the grid to enable horizontal scrolling.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{14,17} showLineNumbers","{14,17}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.FirstName\n \n \n @context.LastName\n \n \n @context.Email\n \n \n @context.Company\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.Salary.ToString("N2")\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },\n new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },\n new Employee3 { Id = 106, FirstName = "John", LastName = "Papa", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },\n new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },\n new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true },\n new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },\n new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },\n new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },\n new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#cell-nowrap"},"See demo here")),(0,a.kt)("h3",{id:"pagination-alignment"},"Pagination alignment"),(0,a.kt)("p",null,"Change the alignment of pagination by adding the ",(0,a.kt)("inlineCode",{parentName:"p"},"PaginationAlignment")," parameter to the Grid.\nBy default, ",(0,a.kt)("inlineCode",{parentName:"p"},"PaginationAlignment")," is set to ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Start"),". Other options you can use are ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Center")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.End"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/CtSqfJb.png",alt:"Blazor Bootstrap: Grid Component - Pagination alignment"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1} showLineNumbers","{1}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#pagination-alignment"},"See demo here")),(0,a.kt)("h3",{id:"empty-data"},"Empty data"),(0,a.kt)("p",null,"If there are no records to display in the Grid, by default, it will display the ",(0,a.kt)("strong",{parentName:"p"},"No records to display")," message.\nYou can change this message by adding the ",(0,a.kt)("inlineCode",{parentName:"p"},"EmptyText")," parameter to the Grid."),(0,a.kt)("img",{src:"https://i.imgur.com/cLuvfmD.png",alt:"Blazor Bootstrap: Grid Component - Empty data"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1} showLineNumbers","{1}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.FirstName\n \n \n @context.LastName\n \n \n @context.Designation\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n await Task.Delay(3000);\n\n return (new GridDataProviderResult { Data = new List(), TotalCount = 0 });\n }\n}\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#empty-data"},"See demo here")),(0,a.kt)("admonition",{title:"TIP",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"Add ",(0,a.kt)("inlineCode",{parentName:"p"},'Responsive="true"')," parameter to the grid to enable horizontal scrolling.")),(0,a.kt)("h3",{id:"save-and-load-grid-settings"},"Save and Load Grid Settings"),(0,a.kt)("p",null,"This example shows how to save/load the Grid state. The state includes the page number, page size, and filters."),(0,a.kt)("admonition",{title:"IMPORTANT",type:"danger"},(0,a.kt)("p",{parentName:"admonition"},"In version ",(0,a.kt)("inlineCode",{parentName:"p"},"0.5.1"),", the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases.")),(0,a.kt)("admonition",{title:"NOTE",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"Browser local storage is used to persist the Grid state. Common locations exist for persisting state are ",(0,a.kt)("strong",{parentName:"p"},"Server-side storage"),", ",(0,a.kt)("strong",{parentName:"p"},"URL"),", ",(0,a.kt)("strong",{parentName:"p"},"Browser storage"),", and ",(0,a.kt)("strong",{parentName:"p"},"In-memory state container service"),".")),(0,a.kt)("img",{src:"https://i.imgur.com/weFYVWA.png",alt:"Blazor Bootstrap: Grid Component - Save and Load Grid Settings"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,6,7} showLineNumbers","{1,6,7}":!0,showLineNumbers:!0},'@using System.Text.Json\n\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,6,7} showLineNumbers","{1,6,7}":!0,showLineNumbers:!0},'\n@code {\n BlazorBootstrap.Grid grid;\n private IEnumerable employees;\n\n [Inject] public IJSRuntime JS { get; set; }\n public GridSettings Settings { get; set; }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private async Task OnGridSettingsChanged(GridSettings settings)\n {\n if (settings is null)\n return;\n\n // NOTE: enable below two lines, if you want to set default values for PageNumber and PageSize all the time.\n //settings.PageNumber = 1;\n //settings.PageSize = 10;\n\n await JS.InvokeVoidAsync("window.localStorage.setItem", "grid-settings", JsonSerializer.Serialize(settings));\n }\n\n private async Task GridSettingsProvider()\n {\n var settingsJson = await JS.InvokeAsync("window.localStorage.getItem", "grid-settings");\n if (string.IsNullOrWhiteSpace(settingsJson))\n return null;\n\n var settings = JsonSerializer.Deserialize(settingsJson);\n if (settings is null)\n return null;\n\n return settings;\n }\n\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#save-and-load-grid-settings"},"See demo here")),(0,a.kt)("h3",{id:"data-parameter---assign-collection"},"Data parameter - Assign collection"),(0,a.kt)("p",null,"Assign a collection to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Data")," parameter to render the grid dynamically. The example below will render different department employees in the individual grid."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Demo.Models;\n\n@foreach (var department in departments)\n{\n

@department.Name Employees:

\n \n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n \n}\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n Grid grid;\n\n private List departments = new List()\n {\n new Department("Product 1 - Research & Development", new List {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }\n }),\n new Department("Product 2 - Research & Development", new List {\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true }\n })\n };\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#data-parameter-assign-collection"},"See demo here")),(0,a.kt)("h3",{id:"data-parameter---update-collection"},"Data parameter - Update collection"),(0,a.kt)("p",null,"Assign a collection to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Data")," parameter to render the grid dynamically. The example below will render different department employees in the individual grid."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Demo.Models;\n\n\n\n\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n Grid grid;\n\n private List employees;\n\n protected override void OnInitialized()\n {\n employees = new List {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }\n };\n }\n\n private async Task AddEmployee()\n {\n // for the same employees collection, we are adding an object\n // explicit grid refresh required\n employees.Add(CreateEmployee());\n await grid.RefreshDataAsync();\n }\n\n private void AddEmployee2()\n {\n // creates a shallow copy\n var emps = employees.GetRange(0, employees.Count);\n emps.Add(CreateEmployee());\n // now employees variable has a new reference. So no need to refresh the grid explicitly\n // explicit grid refresh is not required\n employees = emps;\n }\n\n private Employee1 CreateEmployee()\n {\n var emp = new Employee1();\n emp.Id = employees.Max(x => x.Id) + 1;\n emp.Name = $"Employee {emp.Id}";\n emp.Designation = $"QA Engineer {emp.Id}";\n emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));\n emp.IsActive = true;\n return emp;\n }\n}\n')),(0,a.kt)("admonition",{type:"note"},(0,a.kt)("p",{parentName:"admonition"},"The ",(0,a.kt)("strong",{parentName:"p"},"Add Employee")," button click adds a new employee to the existing ",(0,a.kt)("strong",{parentName:"p"},"employees")," collection\u2014so explicit grid refresh is required."),(0,a.kt)("p",{parentName:"admonition"},"The ",(0,a.kt)("strong",{parentName:"p"},"Add Employee 2")," button click creates a shallow copy of the ",(0,a.kt)("strong",{parentName:"p"},"employees")," collection and adds a new employee. This new collection is assigned to the ",(0,a.kt)("strong",{parentName:"p"},"employees")," variable. Now, the ",(0,a.kt)("strong",{parentName:"p"},"employees")," variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required.")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#data-parameter-update-collection"},"See demo here")),(0,a.kt)("h3",{id:"conditional-css-class-for-grid-row"},"Conditional css class for grid row"),(0,a.kt)("p",null,"In the below example, we applied ",(0,a.kt)("inlineCode",{parentName:"p"},"table-danger")," CSS class to the row where the employee is inactive and the ",(0,a.kt)("inlineCode",{parentName:"p"},"table-success")," CSS class to the row where the employee designation is Architect."),(0,a.kt)("img",{src:"https://i.imgur.com/TYW4VsK.png",alt:"Blazor Bootstrap: Grid Component - Conditional css class for grid row"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{9} showLineNumbers","{9}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{12-20} showLineNumbers","{12-20}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private string GetRowClass(Employee1 emp)\n {\n if (!emp.IsActive)\n return "table-danger";\n else if (emp.Designation == "Architect")\n return "table-success";\n\n return string.Empty;\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#conditional-css-class-for-grid-row"},"See demo here")),(0,a.kt)("h3",{id:"conditional-css-class-for-grid-column"},"Conditional css class for grid column"),(0,a.kt)("p",null,"In the below example, we applied ",(0,a.kt)("inlineCode",{parentName:"p"},"table-danger")," CSS class to the Active column where the employee is inactive and the ",(0,a.kt)("inlineCode",{parentName:"p"},"table-success")," CSS class to the Active column where the employee is active."),(0,a.kt)("img",{src:"https://i.imgur.com/XlatgsB.png",alt:"Blazor Bootstrap: Grid Component - Conditional css class for grid column"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{26} showLineNumbers","{26}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#conditional-css-class-for-grid-column"},"See demo here")),(0,a.kt)("h3",{id:"custom-column-headers"},"Custom column headers"),(0,a.kt)("p",null,"In the below example, we use ",(0,a.kt)("inlineCode",{parentName:"p"},"")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"")," tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column."),(0,a.kt)("img",{src:"https://i.imgur.com/yeTbaNT.png",alt:"Blazor Bootstrap: Grid Component - Custom column headers"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{23-29} showLineNumbers","{23-29}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n \n \n \n \n \n \n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{4-8} showLineNumbers","{4-8}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n private bool IsAllChecked\n {\n get => employees.All(e => e.IsActive);\n set => Array.ForEach(employees.ToArray(), e => e.IsActive = value);\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("h3",{id:"selection"},"Selection"),(0,a.kt)("p",null,"Set ",(0,a.kt)("inlineCode",{parentName:"p"},'AllowSelection="true"')," to enable the selection on the Grid. By default, SelectionMode is ",(0,a.kt)("strong",{parentName:"p"},"Single"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/u1lV12d.png",alt:"Blazor Bootstrap: Grid Component - Selection"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4-5} showLineNumbers","{4-5}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n\n
\n Selected Items Count: @selectedEmployees.Count\n
\n\n
\n Selected Employees:\n
    \n @foreach (var emp in selectedEmployees)\n {\n
  • @emp.Name
    • \n }\n
\n
\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{32-36} showLineNumbers","{32-36}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private HashSet selectedEmployees = new();\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n Console.WriteLine("EmployeesDataProvider called...");\n\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private Task OnSelectedItemsChanged(HashSet employees)\n {\n selectedEmployees = employees is not null && employees.Any() ? employees : new();\n return Task.CompletedTask;\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#selection"},"See demo here")),(0,a.kt)("h3",{id:"multiple-selection"},"Multiple selection"),(0,a.kt)("p",null,"To select multiple rows, set ",(0,a.kt)("inlineCode",{parentName:"p"},'SelectionMode="GridSelectionMode.Multiple"'),"."),(0,a.kt)("img",{src:"https://i.imgur.com/yzJETf8.png",alt:"Blazor Bootstrap: Grid Component - Multiple selection"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4-6} showLineNumbers","{4-6}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n\n
\n Selected Items Count: @selectedEmployees.Count\n
\n\n
\n Selected Employees:\n
    \n @foreach (var emp in selectedEmployees)\n {\n
  • @emp.Name
    • \n }\n
\n
\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{32-36} showLineNumbers","{32-36}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private HashSet selectedEmployees = new();\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n Console.WriteLine("EmployeesDataProvider called...");\n\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private Task OnSelectedItemsChanged(HashSet employees)\n {\n selectedEmployees = employees is not null && employees.Any() ? employees : new();\n return Task.CompletedTask;\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#multiple-selection"},"See demo here")),(0,a.kt)("h3",{id:"disable-selection"},"Disable selection"),(0,a.kt)("p",null,"We can disable the header checkbox or row level checkbox based on a condition.\nFor this, we have ",(0,a.kt)("inlineCode",{parentName:"p"},"DisableAllRowsSelection")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"DisableRowSelection")," delegate parameters.\nIn the below example, we disabled the header checkbox if any of the employee Id is less than 105.\nAlso, disable check the row level checkbox if the employee Id is less than 105."),(0,a.kt)("img",{src:"https://i.imgur.com/v0x4C16.png",alt:"Blazor Bootstrap: Grid Component - Disable selection"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4-8} showLineNumbers","{4-8}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n\n
\n Selected Items Count: @selectedEmployees.Count\n
\n\n
\n Selected Employees:\n
    \n @foreach (var emp in selectedEmployees)\n {\n
  • @emp.Name
    • \n }\n
\n
\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{30-33,35-38,40-44} showLineNumbers","{30-33,35-38,40-44}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private HashSet selectedEmployees = new();\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private bool DisableAllRowsSelectionHandler(IEnumerable employees)\n {\n return employees.Any(x => x.Id < 105); // disable selection if EmployeeId < 105\n }\n\n private bool DisableRowSelectionHandler(Employee1 emp)\n {\n return emp.Id < 105; // disable selection if EmployeeId < 105\n }\n\n private Task OnSelectedItemsChanged(HashSet employees)\n {\n selectedEmployees = employees is not null && employees.Any() ? employees : new();\n return Task.CompletedTask;\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#disable-selection"},"See demo here")),(0,a.kt)("h3",{id:"dynamic-page-size"},"Dynamic page size"),(0,a.kt)("img",{src:"https://user-images.githubusercontent.com/2337067/239613002-c7b4b6f6-be67-4f14-accc-b3dd390eb0f9.png",alt:"Blazor Bootstrap: Grid Component - Dynamic page size"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5,26-28} showLineNumbers","{5,26-28}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n\n\n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,32} showLineNumbers","{2,32}":!0,showLineNumbers:!0},'@code {\n private int pageSize = 5;\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n\n private void ChangeSize(int size) => pageSize = size;\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#dynamic-page-size"},"See demo here")),(0,a.kt)("h3",{id:"page-size-selection"},"Page size selection"),(0,a.kt)("img",{src:"https://user-images.githubusercontent.com/2337067/239613340-3917f4fa-a252-4e5e-a3b5-27b83304cbc2.png",alt:"Blazor Bootstrap: Grid Component - Page size selection"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5-7} showLineNumbers","{5-7}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#page-size-selection"},"See demo here")),(0,a.kt)("h3",{id:"header-row-css-class"},"Header row css class"),(0,a.kt)("img",{src:"https://i.imgur.com/KIqBefV.png",alt:"Blazor Bootstrap: Grid Component - Header row css class"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5,34,63,92} showLineNumbers","{5,34,63,92}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#header-row-css-class"},"See demo here")),(0,a.kt)("h3",{id:"filters-row-css-class"},"Filters row css class"),(0,a.kt)("img",{src:"https://i.imgur.com/11SK9v4.png",alt:"Blazor Bootstrap: Grid Component - Filters row css class"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{7,38,69,100,131,162,193} showLineNumbers","{7,38,69,100,131,162,193}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#filters-row-css-class"},"See demo here")),(0,a.kt)("h3",{id:"row-click-event"},"Row click event"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,7} showLineNumbers","{2,7}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{27-30} showLineNumbers","{27-30}":!0,showLineNumbers:!0},'@code {\n [Inject] ModalService ModalService { get; set; } = default!;\n\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n };\n }\n\n private async Task OnRowClick(GridRowEventArgs args)\n {\n await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = "Event: Row Click", Message = $"Id: {args.Item.Id}, Name: {args.Item.Name}" });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#row-click-event"},"See demo here")),(0,a.kt)("h3",{id:"row-double-click-event"},"Row double click event"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,7} showLineNumbers","{2,7}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{27-30} showLineNumbers","{27-30}":!0,showLineNumbers:!0},'@code {\n [Inject] ModalService ModalService { get; set; } = default!;\n\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n };\n }\n\n private async Task OnRowDoubleClick(GridRowEventArgs args)\n {\n await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = "Event: Row Double Click", Message = $"Id: {args.Item.Id}, Name: {args.Item.Name}" });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#row-double-click-event"},"See demo here")),(0,a.kt)("h3",{id:"translations"},"Translations"),(0,a.kt)("p",null,"In the example below, you will see translations related to pagination and filters in ",(0,a.kt)("strong",{parentName:"p"},"Dutch"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/kKNgo2I.png",alt:"Blazor Bootstrap: Grid Component - Translations"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8,13-14} showLineNumbers","{8,13-14}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{4-25} showLineNumbers","{4-25}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private async Task> GridFiltersTranslationProvider()\n {\n var filtersTranslation = new List();\n\n // number/date/boolean\n filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));\n filtersTranslation.Add(new("!=", "Niet gelijk", FilterOperator.NotEquals));\n // number/date\n filtersTranslation.Add(new("<", "Minder dan", FilterOperator.LessThan));\n filtersTranslation.Add(new("<=", "Kleiner dan of gelijk aan", FilterOperator.LessThanOrEquals));\n filtersTranslation.Add(new(">", "Groter dan", FilterOperator.GreaterThan));\n filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals));\n // string\n filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains));\n filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith));\n filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith));\n filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));\n // common\n filtersTranslation.Add(new("x", "Duidelijk", FilterOperator.Clear));\n\n return await Task.FromResult(filtersTranslation);\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#translations"},"See demo here")),(0,a.kt)("h3",{id:"fixed-header"},"Fixed header"),(0,a.kt)("p",null,"To set the fixed header, set the ",(0,a.kt)("strong",{parentName:"p"},"FixedHeader")," parameter to ",(0,a.kt)("strong",{parentName:"p"},"true"),". The minimum height of the grid is ",(0,a.kt)("strong",{parentName:"p"},"320 pixels"),". You can change the units to em, pt, px, or etc. by setting the ",(0,a.kt)("strong",{parentName:"p"},"Unit")," parameter."),(0,a.kt)("img",{src:"https://i.imgur.com/KRsQK6I.png",alt:"Blazor Bootstrap: Grid Component - Fixed header"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5,6,8} showLineNumbers","{5,6,8}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.Designation\n \n \n @context.Designation\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n \n @context.IsActive\n \n \n @context.IsActive\n \n \n @context.IsActive\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n BlazorBootstrap.Grid grid = default!;\n private IEnumerable employees = default!;\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee4 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee4 { Id = null, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee4 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee4 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee4 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee4 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee4 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee4 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee4 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = null, IsActive = true },\n new Employee4 { Id = 110, Name = "Vijay", Designation = null, DOJ = new DateOnly(1990, 7, 1), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#fixed-header"},"See demo here")),(0,a.kt)("h3",{id:"fixed-header-with-filters"},"Fixed header with filters"),(0,a.kt)("img",{src:"https://i.imgur.com/QRgyrZK.png",alt:"Blazor Bootstrap: Grid Component - Fixed header with filters"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4,7,9} showLineNumbers","{4,7,9}":!0,showLineNumbers:!0},'\n\n \n @context.CustomerId\n \n \n @context.CustomerName\n \n \n @context.Phone\n \n \n @context.Email\n \n \n @context.Address\n \n \n @context.PostalZip\n \n \n @context.Country\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] public ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting.FirstOrDefault().SortString;\n sortDirection = request.Sorting.FirstOrDefault().SortDirection;\n }\n var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#fixed-header-with-filters"},"See demo here")),(0,a.kt)("h3",{id:"freeze-columns"},"Freeze columns"),(0,a.kt)("img",{src:"https://i.imgur.com/1vRu0LU.png",alt:"Blazor Bootstrap: Grid Component - Freeze columns"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{7,9,12,27} showLineNumbers","{7,9,12,27}":!0,showLineNumbers:!0},'\n\n \n @context.CustomerId\n \n \n @context.CustomerName\n \n \n @context.Phone\n \n \n @context.Email\n \n \n @context.Address\n \n \n @context.PostalZip\n \n \n @context.Country\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] public ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting.FirstOrDefault().SortString;\n sortDirection = request.Sorting.FirstOrDefault().SortDirection;\n }\n var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#freeze-columns"},"See demo here")),(0,a.kt)("h3",{id:"freeze-columns-with-fixed-header"},"Freeze columns with fixed header"),(0,a.kt)("img",{src:"https://i.imgur.com/qIVCEKH.png",alt:"Blazor Bootstrap: Grid Component - Freeze columns with fixed header"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{6,8,10,13,28} showLineNumbers","{6,8,10,13,28}":!0,showLineNumbers:!0},'\n\n \n @context.CustomerId\n \n \n @context.CustomerName\n \n \n @context.Phone\n \n \n @context.Email\n \n \n @context.Address\n \n \n @context.PostalZip\n \n \n @context.Country\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] public ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting.FirstOrDefault().SortString;\n sortDirection = request.Sorting.FirstOrDefault().SortDirection;\n }\n var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#freeze-columns-with-fixed-header"},"See demo here")),(0,a.kt)("h3",{id:"freeze-columns-with-fixed-header-and-filters"},"Freeze columns with fixed header and filters"),(0,a.kt)("img",{src:"https://i.imgur.com/GzXuQep.png",alt:"Blazor Bootstrap: Grid Component - Freeze columns with fixed header and filters"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4,7,9,11,14,26,29} showLineNumbers","{4,7,9,11,14,26,29}":!0,showLineNumbers:!0},'\n\n \n @context.CustomerId\n \n \n @context.CustomerName\n \n \n @context.Phone\n \n \n @context.Email\n \n \n @context.Address\n \n \n @context.PostalZip\n \n \n @context.Country\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] public ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting.FirstOrDefault().SortString;\n sortDirection = request.Sorting.FirstOrDefault().SortDirection;\n }\n var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#freeze-columns-with-fixed-header-and-filters"},"See demo here")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/28293836.f27f6e06.js b/assets/js/28293836.f27f6e06.js deleted file mode 100644 index 59d8dcccb..000000000 --- a/assets/js/28293836.f27f6e06.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[21100],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>g});var r=n(67294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var m=r.createContext({}),s=function(e){var t=r.useContext(m),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},d=function(e){var t=s(e.components);return r.createElement(m.Provider,{value:t},e.children)},p="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,m=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),p=s(n),u=a,g=p["".concat(m,".").concat(u)]||p[u]||c[u]||i;return n?r.createElement(g,o(o({ref:t},d),{},{components:n})):r.createElement(g,o({ref:t},d))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=u;var l={};for(var m in t)hasOwnProperty.call(t,m)&&(l[m]=t[m]);l.originalType=e,l[p]="string"==typeof e?e:a,o[1]=l;for(var s=2;s{n.d(t,{ZP:()=>p});var r=n(87462),a=n(67294),i=n(3905),o=n(72389);function l(e){let{children:t,fallback:n}=e;return(0,o.Z)()?a.createElement(a.Fragment,null,t?.()):n??null}n(73935);function m(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const s={toc:[]},d="wrapper";function p(e){let{components:t,...n}=e;return(0,i.kt)(d,(0,r.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(l,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(m,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},38238:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>m,toc:()=>d});var r=n(87462),a=(n(67294),n(3905)),i=n(58034);const o={title:"Blazor Grid Component",description:"Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting.",image:"https://i.imgur.com/kKNgo2I.png",sidebar_label:"Grid",sidebar_position:12},l="Blazor Grid",m={unversionedId:"components/grid",id:"components/grid",title:"Blazor Grid Component",description:"Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting.",source:"@site/docs/05-components/grid.mdx",sourceDirName:"05-components",slug:"/components/grid",permalink:"/components/grid",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/grid.mdx",tags:[],version:"current",sidebarPosition:12,frontMatter:{title:"Blazor Grid Component",description:"Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting.",image:"https://i.imgur.com/kKNgo2I.png",sidebar_label:"Grid",sidebar_position:12},sidebar:"tutorialSidebar",previous:{title:"Dropdown",permalink:"/components/dropdown"},next:{title:"Modal",permalink:"/components/modal"}},s={},d=[{value:"Grid Parameters",id:"grid-parameters",level:2},{value:"Grid Callback Events",id:"grid-callback-events",level:2},{value:"Grid Methods",id:"grid-methods",level:2},{value:"GridColumn Parameters",id:"gridcolumn-parameters",level:2},{value:"GridSettings Properties",id:"gridsettings-properties",level:2},{value:"Examples",id:"examples",level:2},{value:"Client side filtering",id:"client-side-filtering",level:3},{value:"Client side filtering with string comparision",id:"client-side-filtering-with-string-comparision",level:3},{value:"Client side paging",id:"client-side-paging",level:3},{value:"Client side sorting",id:"client-side-sorting",level:3},{value:"Client side filtering, paging, and sorting",id:"client-side-filtering-paging-and-sorting",level:3},{value:"Set default filter",id:"set-default-filter",level:3},{value:"Disable specific column filter",id:"disable-specific-column-filter",level:3},{value:"Increase filter textbox width",id:"increase-filter-textbox-width",level:3},{value:"Server side filtering, paging and sorting",id:"server-side-filtering-paging-and-sorting",level:3},{value:"Set default sorting",id:"set-default-sorting",level:3},{value:"Disable specific column sorting",id:"disable-specific-column-sorting",level:3},{value:"Header text alignment",id:"header-text-alignment",level:3},{value:"Cell alignment",id:"cell-alignment",level:3},{value:"Cell formating",id:"cell-formating",level:3},{value:"Cell nowrap",id:"cell-nowrap",level:3},{value:"Pagination alignment",id:"pagination-alignment",level:3},{value:"Empty data",id:"empty-data",level:3},{value:"Save and Load Grid Settings",id:"save-and-load-grid-settings",level:3},{value:"Data parameter - Assign collection",id:"data-parameter---assign-collection",level:3},{value:"Data parameter - Update collection",id:"data-parameter---update-collection",level:3},{value:"Conditional css class for grid row",id:"conditional-css-class-for-grid-row",level:3},{value:"Conditional css class for grid column",id:"conditional-css-class-for-grid-column",level:3},{value:"Custom column headers",id:"custom-column-headers",level:3},{value:"Selection",id:"selection",level:3},{value:"Multiple selection",id:"multiple-selection",level:3},{value:"Disable selection",id:"disable-selection",level:3},{value:"Dynamic page size",id:"dynamic-page-size",level:3},{value:"Page size selection",id:"page-size-selection",level:3},{value:"Header row css class",id:"header-row-css-class",level:3},{value:"Filters row css class",id:"filters-row-css-class",level:3},{value:"Row click event",id:"row-click-event",level:3},{value:"Row double click event",id:"row-double-click-event",level:3},{value:"Translations",id:"translations",level:3},{value:"Fixed header",id:"fixed-header",level:3},{value:"Fixed header with filters",id:"fixed-header-with-filters",level:3},{value:"Freeze columns",id:"freeze-columns",level:3},{value:"Freeze columns with fixed header",id:"freeze-columns-with-fixed-header",level:3},{value:"Freeze columns with fixed header and filters",id:"freeze-columns-with-fixed-header-and-filters",level:3}],p={toc:d},c="wrapper";function u(e){let{components:t,...n}=e;return(0,a.kt)(c,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-grid"},"Blazor Grid"),(0,a.kt)("p",null,"Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting."),(0,a.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("img",{src:"https://i.imgur.com/kKNgo2I.png",alt:"Blazor Bootstrap: Grid Component"}),(0,a.kt)("h2",{id:"grid-parameters"},"Grid Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowFiltering"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid filtering."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowPaging"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid paging."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowRowClick"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the allow row click."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.5")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowSelection"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid selection."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"AllowSorting"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid sorting."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the grid."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"IEnumerable")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid data."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.4.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"DataProvider"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"GridDataProviderDelegate")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"DataProvider is for items to render. The provider should always return an instance of ",(0,a.kt)("inlineCode",{parentName:"td"},"GridDataProviderResult"),", and ",(0,a.kt)("inlineCode",{parentName:"td"},"null")," is not allowed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"DisableAllRowsSelection"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Func, bool>?")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Enable or disable the header checkbox selection."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"DisableRowSelection"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Func?")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Enable or disable the row level checkbox selection."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"EmptyDataTemplate"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Template to render when there are no rows to display."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"EmptyText"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},"No records to display"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Shows text on no records."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FiltersRowCssClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the filters row css class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.2")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FiltersTranslationProvider"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"GridFiltersTranslationDelegate")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Filters transalation is for grid filters to render. The provider should always return a 'FilterOperatorInfo' collection, and 'null' is not allowed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FixedHeader"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid fixed header."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"HeaderRowCssClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the header row css class but not the thead tag class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.2")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,a.kt)("td",{parentName:"tr",align:"left"},"float"),(0,a.kt)("td",{parentName:"tr",align:"left"},"320 pixels"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid height."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ItemsPerPageText"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Items per page")),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ItemsPerPageText."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.5")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageSize"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int"),(0,a.kt)("td",{parentName:"tr",align:"left"},"10"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the page size of the grid."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageSizeSelectorItems"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int[]"),(0,a.kt)("td",{parentName:"tr",align:"left"},"new int[] { 10, 20, 50 }"),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the page size selector items."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageSizeSelectorVisible"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the page size selector visible."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PaginationItemsTextFormat"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"{0} - {1} of {2} items")),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the pagination items text format."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"RowClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Func?"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the row class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.6.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets a value indicating whether Grid is responsive."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SelectionMode"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"GridSelectionMode")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the grid selection mode."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SettingsProvider"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"GridSettingsProviderDelegate")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Settings are for the grid to render. The provider should always return an instance of 'GridSettings', and 'null' is not allowed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"THeadCssClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"string?")),(0,a.kt)("td",{parentName:"tr",align:"left"},"null"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the thead css class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Unit"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Unit")),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Unit.px")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the units."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.3")))),(0,a.kt)("admonition",{title:"IMPORTANT",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"Grid requires either ",(0,a.kt)("inlineCode",{parentName:"p"},"Data")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"DataProvider")," parameter, but not both.")),(0,a.kt)("h2",{id:"grid-callback-events"},"Grid Callback Events"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"GridSettingsChanged"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"EventCallback")),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired when the grid state is changed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnRowClick"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"EventCallback>")),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is triggered when the user clicks on the row. Set AllowRowClick to true to enable row clicking."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.5")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"OnRowDoubleClick"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"EventCallback>")),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is triggered when the user double clicks on the row. Set AllowRowClick to true to enable row double clicking."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.9.5")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SelectedItemsChanged"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"EventCallback>")),(0,a.kt)("td",{parentName:"tr",align:"left"},"This event is fired when the items selection changed."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.8.0")))),(0,a.kt)("h2",{id:"grid-methods"},"Grid Methods"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Return Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"GetFilters()"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"IEnumerable")),(0,a.kt)("td",{parentName:"tr",align:"left"},"Get filters."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"RefreshDataAsync(CancellationToken cancellationToken = default)"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Refresh the grid data."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ResetPageNumber()"),(0,a.kt)("td",{parentName:"tr",align:"left"},"ValueTask"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Reset the page number to 1 and refresh the grid."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.4.3")))),(0,a.kt)("h2",{id:"gridcolumn-parameters"},"GridColumn Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the grid column."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ColumnClass"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Func?"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the column class."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.6.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Filterable"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"true"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Enable or disable the filter on a specific column. The filter is enabled or disabled based on the grid ",(0,a.kt)("inlineCode",{parentName:"td"},"AllowFiltering")," parameter."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FilterOperator"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Assigned based on the property type."),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the filter operator."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FilterTextboxWidth"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the filter textbox width in pixels."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FilterValue"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the filter value."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Freeze"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Indicates whether the column is frozen."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FreezeDirection"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"FreezeDirection")),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"FreezeDirection.Left")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the freeze direction of the column."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FreezeLeftPosition"),(0,a.kt)("td",{parentName:"tr",align:"left"},"double"),(0,a.kt)("td",{parentName:"tr",align:"left"},"0"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the horizontal position of the column from left. It has no effect on non-positioned columns."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"FreezeRightPosition"),(0,a.kt)("td",{parentName:"tr",align:"left"},"double"),(0,a.kt)("td",{parentName:"tr",align:"left"},"0"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the horizontal position of the column from right. It has no effect on non-positioned columns."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"HeaderContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the grid column header."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.7.3")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"HeaderText"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the table column header."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"HeaderTextAlignment"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Start")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the header text alignment. Use ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Start")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Center")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.End"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"IsDefaultSortColumn"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the default sort column."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PropertyName"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the property name. This is required when ",(0,a.kt)("inlineCode",{parentName:"td"},"AllowFiltering")," is true."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Sortable"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Enable or disable the sorting on a specific column. The sorting is enabled or disabled based on the grid ",(0,a.kt)("inlineCode",{parentName:"td"},"AllowSorting")," parameter."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SortDirection"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"SortDirection.None")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the default sort direction of a column. Use ",(0,a.kt)("inlineCode",{parentName:"td"},"SortDirection.Ascending")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"SortDirection.Descending")),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SortKeySelector"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Expression>")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Expression used for sorting."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"SortString"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the column sort string. This string is passed to the backend/API for sorting. And it is ignored for client-side sorting."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"StringComparison"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.OrdinalIgnoreCase")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the StringComparison. Use ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.CurrentCulture")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.CurrentCultureIgnoreCase")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.InvariantCulture")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.InvariantCultureIgnoreCase")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.Ordinal")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"StringComparison.OrdinalIgnoreCase"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"TextAlignment"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Alignment")),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Start")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the text alignment. Use ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Start")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.Center")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"Alignment.End"),"."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"TextNoWrap"),(0,a.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,a.kt)("td",{parentName:"tr",align:"left"},"false"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets text nowrap."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,a.kt)("h2",{id:"gridsettings-properties"},"GridSettings Properties"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageNumber"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Page number."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"PageSize"),(0,a.kt)("td",{parentName:"tr",align:"left"},"int"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Size of the page."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Filters"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"IEnumerable")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Current filters."),(0,a.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"client-side-filtering"},"Client side filtering"),(0,a.kt)("p",null,"For filtering, ",(0,a.kt)("inlineCode",{parentName:"p"},"AllowFiltering")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"PropertyName")," parameters are required.\nAdd ",(0,a.kt)("inlineCode",{parentName:"p"},'AllowFiltering="true"')," parameter to Grid and ",(0,a.kt)("inlineCode",{parentName:"p"},"PropertyName")," parameter to all the GridColumns."),(0,a.kt)("img",{src:"https://i.imgur.com/Clr8W11.png",alt:"Blazor Bootstrap: Grid Component - Client side filtering"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,2,5,8,11,14} showLineNumbers","{1,2,5,8,11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-filtering"},"See demo here")),(0,a.kt)("h3",{id:"client-side-filtering-with-string-comparision"},"Client side filtering with string comparision"),(0,a.kt)("p",null,"In the below example, ",(0,a.kt)("inlineCode",{parentName:"p"},"StringComparision.Ordinal")," is used on the ",(0,a.kt)("strong",{parentName:"p"},"Employee Name")," column to make the filter case-sensitive."),(0,a.kt)("img",{src:"https://i.imgur.com/yLzUB8I.png",alt:"Blazor Bootstrap: Grid Component - Client side filtering with string comparision"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5} showLineNumbers","{5}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-filtering-with-string-comparision"},"See demo here")),(0,a.kt)("admonition",{type:"info"},(0,a.kt)("p",{parentName:"admonition"},"By default, ",(0,a.kt)("code",null,"StringComparison.OrdinalIgnoreCase")," is used to compare culture-agnostic and case-insensitive string matching.")),(0,a.kt)("h3",{id:"client-side-paging"},"Client side paging"),(0,a.kt)("p",null,"For paging, ",(0,a.kt)("inlineCode",{parentName:"p"},"AllowPaging")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"PageSize")," parameters are required.\nAdd ",(0,a.kt)("inlineCode",{parentName:"p"},'AllowPaging="true"')," and ",(0,a.kt)("inlineCode",{parentName:"p"},'PageSize="20"')," parameters to the Grid. ",(0,a.kt)("inlineCode",{parentName:"p"},"PageSize")," parameter is optional. "),(0,a.kt)("img",{src:"https://i.imgur.com/WXwUqgX.png",alt:"Blazor Bootstrap: Grid Component - Client side paging"}),(0,a.kt)("admonition",{title:"INFO",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"The default page size is 10.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1} showLineNumbers","{1}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-paging"},"See demo here")),(0,a.kt)("h3",{id:"client-side-sorting"},"Client side sorting"),(0,a.kt)("p",null,"For sorting, ",(0,a.kt)("inlineCode",{parentName:"p"},"AllowSorting")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"SortKeySelector")," parameters are required.\nAdd ",(0,a.kt)("inlineCode",{parentName:"p"},'AllowSorting="true"')," parameter to Grid and ",(0,a.kt)("inlineCode",{parentName:"p"},"SortKeySelector")," to all the GridColumns."),(0,a.kt)("img",{src:"https://i.imgur.com/wkIWG5S.png",alt:"Blazor Bootstrap: Grid Component - Client side sorting"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,2,5,8,11,14} showLineNumbers","{1,2,5,8,11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-sorting"},"See demo here")),(0,a.kt)("h3",{id:"client-side-filtering-paging-and-sorting"},"Client side filtering, paging, and sorting"),(0,a.kt)("img",{src:"https://i.imgur.com/wZ0cQiO.png",alt:"Blazor Bootstrap: Grid Component - Client side filtering, paging, and sorting"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,2,5,8,11,14} showLineNumbers","{1,2,5,8,11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#client-side-filtering-paging-sorting"},"See demo here")),(0,a.kt)("h3",{id:"set-default-filter"},"Set default filter"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"FilterOperator")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"FilterValue")," parameters are required to set the default filter. "),(0,a.kt)("img",{src:"https://i.imgur.com/jog5EA4.png",alt:"Blazor Bootstrap: Grid Component - Set default filter"}),(0,a.kt)("admonition",{title:"TIP",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"You can set the default filter on more than one GridColumn.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2} showLineNumbers","{2}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#set-default-filter"},"See demo here")),(0,a.kt)("h3",{id:"disable-specific-column-filter"},"Disable specific column filter"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"Filterable")," parameter is required to disable the filter on a specific column.\nAdd ",(0,a.kt)("inlineCode",{parentName:"p"},'Filterable="false"')," parameter to GridColumn."),(0,a.kt)("img",{src:"https://i.imgur.com/oGeA4VO.png",alt:"Blazor Bootstrap: Grid Component - Disable specific column filter"}),(0,a.kt)("admonition",{title:"INFO",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"By default, ",(0,a.kt)("inlineCode",{parentName:"p"},'Filterable="true"')," on all the columns if the ",(0,a.kt)("inlineCode",{parentName:"p"},"AllowFiltering")," parameter is set to ",(0,a.kt)("inlineCode",{parentName:"p"},"true")," on the grid.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{14} showLineNumbers","{14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#disable-specific-column-filter"},"See demo here")),(0,a.kt)("h3",{id:"increase-filter-textbox-width"},"Increase filter textbox width"),(0,a.kt)("p",null,"Add ",(0,a.kt)("inlineCode",{parentName:"p"},"FilterTextboxWidth")," parameter to the GridColumn to increase or decrease the filter textbox width, ",(0,a.kt)("inlineCode",{parentName:"p"},"FilterTextboxWidth")," parameter is optional."),(0,a.kt)("img",{src:"https://i.imgur.com/eWXiHr0.png",alt:"Blazor Bootstrap: Grid Component - Increase filter textbox width"}),(0,a.kt)("admonition",{title:"NOTE",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"Filter textbox width measured in pixels.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,5,8} showLineNumbers","{2,5,8}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.FirstName\n \n \n @context.LastName\n \n \n @context.Email\n \n \n @context.Company\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.Salary.ToString("N2")\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },\n new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },\n new Employee3 { Id = 106, FirstName = "John", LastName = "Papa", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },\n new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },\n new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true },\n new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },\n new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },\n new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },\n new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#increase-filter-textbox-width"},"See demo here")),(0,a.kt)("h3",{id:"server-side-filtering-paging-and-sorting"},"Server side filtering, paging and sorting"),(0,a.kt)("img",{src:"https://i.imgur.com/xHVXTew.png",alt:"Blazor Bootstrap: Grid Component - Server side filtering, paging and sorting"}),(0,a.kt)("admonition",{title:"NOTE",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"For server-side sorting, we need the ",(0,a.kt)("inlineCode",{parentName:"p"},"SortString")," parameter on GridColumn along with the ",(0,a.kt)("inlineCode",{parentName:"p"},"SortKeySelector")," parameter.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.FirstName\n \n \n @context.LastName\n \n \n @context.Designation\n \n \n @context.Salary\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{11} showLineNumbers","{11}":!0,showLineNumbers:!0},'@code {\n [Inject] public IEmployeeService _employeeService { get; set; }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting[0].SortString;\n sortDirection = request.Sorting[0].SortDirection;\n }\n var result = _employeeService.GetEmployees(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#server-side-filtering-paging-sorting"},"See demo here")),(0,a.kt)("h3",{id:"set-default-sorting"},"Set default sorting"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"IsDefaultSortColumn")," parameter is required to set the default sorting. Add ",(0,a.kt)("inlineCode",{parentName:"p"},'IsDefaultSortColumn="true"')," parameter to the GridColumn.\nThe default sort direction will be ",(0,a.kt)("strong",{parentName:"p"},"ascending"),". To change the default sorting of a column, add ",(0,a.kt)("inlineCode",{parentName:"p"},'SortDirection="SortDirection.Descending"')," to the GridColumn."),(0,a.kt)("img",{src:"https://i.imgur.com/WxULPS6.png",alt:"Blazor Bootstrap: Grid Component - Set default sorting"}),(0,a.kt)("admonition",{title:"INFO",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"If more than one GridColumn has the ",(0,a.kt)("inlineCode",{parentName:"p"},"IsDefaultSortColumn")," paramter, it will pick the first column as the default sorting column.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5} showLineNumbers","{5}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#set-default-sorting"},"See demo here")),(0,a.kt)("h3",{id:"disable-specific-column-sorting"},"Disable specific column sorting"),(0,a.kt)("p",null,"Add ",(0,a.kt)("inlineCode",{parentName:"p"},'Sortable="false"')," parameter the GridColumn to disable the sorting. "),(0,a.kt)("admonition",{title:"INFO",type:"info"},(0,a.kt)("p",{parentName:"admonition"},"If sorting is disabled, then the ",(0,a.kt)("inlineCode",{parentName:"p"},"SortKeySelector")," parameter is not required.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8} showLineNumbers","{8}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#disable-specific-column-sorting"},"See demo here")),(0,a.kt)("h3",{id:"header-text-alignment"},"Header text alignment"),(0,a.kt)("p",null,"Use the ",(0,a.kt)("inlineCode",{parentName:"p"},"HeaderTextAlignment")," parameter to change the header column alignment.\nBy default, ",(0,a.kt)("inlineCode",{parentName:"p"},"HeaderTextAlignment")," is set to Alignment.Start. Other options you can use are ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Center")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.End"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/gWgIESD.png",alt:"Blazor Bootstrap: Grid Component - Header text alignment"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8,11,14} showLineNumbers","{8,11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#header-text-alignment"},"See demo here")),(0,a.kt)("h3",{id:"cell-alignment"},"Cell alignment"),(0,a.kt)("p",null,"Use the ",(0,a.kt)("inlineCode",{parentName:"p"},"TextAlignment")," parameter to change the cell data alignment.\nBy default, ",(0,a.kt)("inlineCode",{parentName:"p"},"TextAlignment")," is set to ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Start"),". Other options you can use are ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Center")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.End"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/0OKp4yd.png",alt:"Blazor Bootstrap: Grid Component - Cell alignment"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{11,14} showLineNumbers","{11,14}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.Salary\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },\n new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },\n new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },\n new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },\n new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },\n new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },\n new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },\n new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },\n new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#cell-alignment"},"See demo here")),(0,a.kt)("h3",{id:"cell-formating"},"Cell formating"),(0,a.kt)("p",null,"To format the cell data, use ",(0,a.kt)("inlineCode",{parentName:"p"},"ToString")," method and format strings. Refer: ",(0,a.kt)("a",{parentName:"p",href:"https://docs.microsoft.com/en-us/dotnet/standard/base-types/formatting-types"},"How to format numbers, dates, enums, and other types in .NET")),(0,a.kt)("img",{src:"https://i.imgur.com/MitfasL.png",alt:"Blazor Bootstrap: Grid Component - Cell formating"}),(0,a.kt)("admonition",{title:"EXAMPLE",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},'@context.Salary.ToString("N2")')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{12} showLineNumbers","{12}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.Salary.ToString("N2")\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee2 { Id = 107, Name = "Alice", Designation = "AI Engineer", Salary = 7700, IsActive = true },\n new Employee2 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", Salary = 19000, IsActive = true },\n new Employee2 { Id = 106, Name = "John", Designation = "Data Engineer", Salary = 12000, IsActive = true },\n new Employee2 { Id = 104, Name = "Pop", Designation = "Associate Architect", Salary = 19000, IsActive = false },\n new Employee2 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", Salary = 16500.50M, IsActive = true },\n new Employee2 { Id = 102, Name = "Line", Designation = "Architect", Salary = 24000, IsActive = true },\n new Employee2 { Id = 101, Name = "Daniel", Designation = "Architect", Salary = 21000, IsActive = true },\n new Employee2 { Id = 108, Name = "Zayne", Designation = "Data Analyst", Salary = 17850, IsActive = true },\n new Employee2 { Id = 109, Name = "Isha", Designation = "App Maker", Salary = 8000, IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#cell-formating"},"See demo here")),(0,a.kt)("h3",{id:"cell-nowrap"},"Cell nowrap"),(0,a.kt)("p",null,"To prevent text from wrapping, add ",(0,a.kt)("inlineCode",{parentName:"p"},'TextNoWrap="true"')," parameter to the GridColumn."),(0,a.kt)("img",{src:"https://i.imgur.com/Wzc3AUF.png",alt:"Blazor Bootstrap: Grid Component - Cell nowrap"}),(0,a.kt)("admonition",{title:"TIP",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"Add ",(0,a.kt)("inlineCode",{parentName:"p"},'Responsive="true"')," parameter to the grid to enable horizontal scrolling.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{14,17} showLineNumbers","{14,17}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.FirstName\n \n \n @context.LastName\n \n \n @context.Email\n \n \n @context.Company\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.Salary.ToString("N2")\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee3 { Id = 107, FirstName = "Alice", LastName = "Reddy", Email = "alice@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },\n new Employee3 { Id = 103, FirstName = "Bob", LastName = "Roy", Email = "bob@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },\n new Employee3 { Id = 106, FirstName = "John", LastName = "Papa", Email = "john@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },\n new Employee3 { Id = 104, FirstName = "Pop", LastName = "Two", Email = "pop@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },\n new Employee3 { Id = 105, FirstName = "Ronald", LastName = "Dire", Email = "ronald@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true },\n new Employee3 { Id = 102, FirstName = "Line", LastName = "K", Email = "line@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },\n new Employee3 { Id = 101, FirstName = "Daniel", LastName = "Potter", Email = "daniel@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },\n new Employee3 { Id = 108, FirstName = "Zayne", LastName = "Simmons", Email = "zayne@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true },\n new Employee3 { Id = 109, FirstName = "Isha", LastName = "Davison", Email = "isha@blazorbootstrap.com", Company = "BlazorBootstrap Company", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#cell-nowrap"},"See demo here")),(0,a.kt)("h3",{id:"pagination-alignment"},"Pagination alignment"),(0,a.kt)("p",null,"Change the alignment of pagination by adding the ",(0,a.kt)("inlineCode",{parentName:"p"},"PaginationAlignment")," parameter to the Grid.\nBy default, ",(0,a.kt)("inlineCode",{parentName:"p"},"PaginationAlignment")," is set to ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Start"),". Other options you can use are ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.Center")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"Alignment.End"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/CtSqfJb.png",alt:"Blazor Bootstrap: Grid Component - Pagination alignment"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1} showLineNumbers","{1}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n protected override void OnInitialized()\n {\n employees = new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n return await Task.FromResult(request.ApplyTo(employees));\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#pagination-alignment"},"See demo here")),(0,a.kt)("h3",{id:"empty-data"},"Empty data"),(0,a.kt)("p",null,"If there are no records to display in the Grid, by default, it will display the ",(0,a.kt)("strong",{parentName:"p"},"No records to display")," message.\nYou can change this message by adding the ",(0,a.kt)("inlineCode",{parentName:"p"},"EmptyText")," parameter to the Grid."),(0,a.kt)("img",{src:"https://i.imgur.com/cLuvfmD.png",alt:"Blazor Bootstrap: Grid Component - Empty data"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1} showLineNumbers","{1}":!0,showLineNumbers:!0},'\n \n @context.Id\n \n \n @context.FirstName\n \n \n @context.LastName\n \n \n @context.Designation\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n await Task.Delay(3000);\n\n return (new GridDataProviderResult { Data = new List(), TotalCount = 0 });\n }\n}\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#empty-data"},"See demo here")),(0,a.kt)("admonition",{title:"TIP",type:"tip"},(0,a.kt)("p",{parentName:"admonition"},"Add ",(0,a.kt)("inlineCode",{parentName:"p"},'Responsive="true"')," parameter to the grid to enable horizontal scrolling.")),(0,a.kt)("h3",{id:"save-and-load-grid-settings"},"Save and Load Grid Settings"),(0,a.kt)("p",null,"This example shows how to save/load the Grid state. The state includes the page number, page size, and filters."),(0,a.kt)("admonition",{title:"IMPORTANT",type:"danger"},(0,a.kt)("p",{parentName:"admonition"},"In version ",(0,a.kt)("inlineCode",{parentName:"p"},"0.5.1"),", the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases.")),(0,a.kt)("admonition",{title:"NOTE",type:"note"},(0,a.kt)("p",{parentName:"admonition"},"Browser local storage is used to persist the Grid state. Common locations exist for persisting state are ",(0,a.kt)("strong",{parentName:"p"},"Server-side storage"),", ",(0,a.kt)("strong",{parentName:"p"},"URL"),", ",(0,a.kt)("strong",{parentName:"p"},"Browser storage"),", and ",(0,a.kt)("strong",{parentName:"p"},"In-memory state container service"),".")),(0,a.kt)("img",{src:"https://i.imgur.com/weFYVWA.png",alt:"Blazor Bootstrap: Grid Component - Save and Load Grid Settings"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,6,7} showLineNumbers","{1,6,7}":!0,showLineNumbers:!0},'@using System.Text.Json\n\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,6,7} showLineNumbers","{1,6,7}":!0,showLineNumbers:!0},'\n@code {\n BlazorBootstrap.Grid grid;\n private IEnumerable employees;\n\n [Inject] public IJSRuntime JS { get; set; }\n public GridSettings Settings { get; set; }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private async Task OnGridSettingsChanged(GridSettings settings)\n {\n if (settings is null)\n return;\n\n // NOTE: enable below two lines, if you want to set default values for PageNumber and PageSize all the time.\n //settings.PageNumber = 1;\n //settings.PageSize = 10;\n\n await JS.InvokeVoidAsync("window.localStorage.setItem", "grid-settings", JsonSerializer.Serialize(settings));\n }\n\n private async Task GridSettingsProvider()\n {\n var settingsJson = await JS.InvokeAsync("window.localStorage.getItem", "grid-settings");\n if (string.IsNullOrWhiteSpace(settingsJson))\n return null;\n\n var settings = JsonSerializer.Deserialize(settingsJson);\n if (settings is null)\n return null;\n\n return settings;\n }\n\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#save-and-load-grid-settings"},"See demo here")),(0,a.kt)("h3",{id:"data-parameter---assign-collection"},"Data parameter - Assign collection"),(0,a.kt)("p",null,"Assign a collection to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Data")," parameter to render the grid dynamically. The example below will render different department employees in the individual grid."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Demo.Models;\n\n@foreach (var department in departments)\n{\n

@department.Name Employees:

\n \n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n \n}\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n Grid grid;\n\n private List departments = new List()\n {\n new Department("Product 1 - Research & Development", new List {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }\n }),\n new Department("Product 2 - Research & Development", new List {\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true }\n })\n };\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#data-parameter-assign-collection"},"See demo here")),(0,a.kt)("h3",{id:"data-parameter---update-collection"},"Data parameter - Update collection"),(0,a.kt)("p",null,"Assign a collection to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Data")," parameter to render the grid dynamically. The example below will render different department employees in the individual grid."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Demo.Models;\n\n\n\n\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n Grid grid;\n\n private List employees;\n\n protected override void OnInitialized()\n {\n employees = new List {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }\n };\n }\n\n private async Task AddEmployee()\n {\n // for the same employees collection, we are adding an object\n // explicit grid refresh required\n employees.Add(CreateEmployee());\n await grid.RefreshDataAsync();\n }\n\n private void AddEmployee2()\n {\n // creates a shallow copy\n var emps = employees.GetRange(0, employees.Count);\n emps.Add(CreateEmployee());\n // now employees variable has a new reference. So no need to refresh the grid explicitly\n // explicit grid refresh is not required\n employees = emps;\n }\n\n private Employee1 CreateEmployee()\n {\n var emp = new Employee1();\n emp.Id = employees.Max(x => x.Id) + 1;\n emp.Name = $"Employee {emp.Id}";\n emp.Designation = $"QA Engineer {emp.Id}";\n emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));\n emp.IsActive = true;\n return emp;\n }\n}\n')),(0,a.kt)("admonition",{type:"note"},(0,a.kt)("p",{parentName:"admonition"},"The ",(0,a.kt)("strong",{parentName:"p"},"Add Employee")," button click adds a new employee to the existing ",(0,a.kt)("strong",{parentName:"p"},"employees")," collection\u2014so explicit grid refresh is required."),(0,a.kt)("p",{parentName:"admonition"},"The ",(0,a.kt)("strong",{parentName:"p"},"Add Employee 2")," button click creates a shallow copy of the ",(0,a.kt)("strong",{parentName:"p"},"employees")," collection and adds a new employee. This new collection is assigned to the ",(0,a.kt)("strong",{parentName:"p"},"employees")," variable. Now, the ",(0,a.kt)("strong",{parentName:"p"},"employees")," variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required.")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#data-parameter-update-collection"},"See demo here")),(0,a.kt)("h3",{id:"conditional-css-class-for-grid-row"},"Conditional css class for grid row"),(0,a.kt)("p",null,"In the below example, we applied ",(0,a.kt)("inlineCode",{parentName:"p"},"table-danger")," CSS class to the row where the employee is inactive and the ",(0,a.kt)("inlineCode",{parentName:"p"},"table-success")," CSS class to the row where the employee designation is Architect."),(0,a.kt)("img",{src:"https://i.imgur.com/TYW4VsK.png",alt:"Blazor Bootstrap: Grid Component - Conditional css class for grid row"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{9} showLineNumbers","{9}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{12-20} showLineNumbers","{12-20}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private string GetRowClass(Employee1 emp)\n {\n if (!emp.IsActive)\n return "table-danger";\n else if (emp.Designation == "Architect")\n return "table-success";\n\n return string.Empty;\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#conditional-css-class-for-grid-row"},"See demo here")),(0,a.kt)("h3",{id:"conditional-css-class-for-grid-column"},"Conditional css class for grid column"),(0,a.kt)("p",null,"In the below example, we applied ",(0,a.kt)("inlineCode",{parentName:"p"},"table-danger")," CSS class to the Active column where the employee is inactive and the ",(0,a.kt)("inlineCode",{parentName:"p"},"table-success")," CSS class to the Active column where the employee is active."),(0,a.kt)("img",{src:"https://i.imgur.com/XlatgsB.png",alt:"Blazor Bootstrap: Grid Component - Conditional css class for grid column"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{26} showLineNumbers","{26}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#conditional-css-class-for-grid-column"},"See demo here")),(0,a.kt)("h3",{id:"custom-column-headers"},"Custom column headers"),(0,a.kt)("p",null,"In the below example, we use ",(0,a.kt)("inlineCode",{parentName:"p"},"")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"")," tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column."),(0,a.kt)("img",{src:"https://i.imgur.com/yeTbaNT.png",alt:"Blazor Bootstrap: Grid Component - Custom column headers"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{23-29} showLineNumbers","{23-29}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n \n \n \n \n \n \n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{4-8} showLineNumbers","{4-8}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees;\n\n private bool IsAllChecked\n {\n get => employees.All(e => e.IsActive);\n set => Array.ForEach(employees.ToArray(), e => e.IsActive = value);\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("h3",{id:"selection"},"Selection"),(0,a.kt)("p",null,"Set ",(0,a.kt)("inlineCode",{parentName:"p"},'AllowSelection="true"')," to enable the selection on the Grid. By default, SelectionMode is ",(0,a.kt)("strong",{parentName:"p"},"Single"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/u1lV12d.png",alt:"Blazor Bootstrap: Grid Component - Selection"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4-5} showLineNumbers","{4-5}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n\n
\n Selected Items Count: @selectedEmployees.Count\n
\n\n
\n Selected Employees:\n
    \n @foreach (var emp in selectedEmployees)\n {\n
  • @emp.Name
    • \n }\n
\n
\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{32-36} showLineNumbers","{32-36}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private HashSet selectedEmployees = new();\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n Console.WriteLine("EmployeesDataProvider called...");\n\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private Task OnSelectedItemsChanged(HashSet employees)\n {\n selectedEmployees = employees is not null && employees.Any() ? employees : new();\n return Task.CompletedTask;\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#selection"},"See demo here")),(0,a.kt)("h3",{id:"multiple-selection"},"Multiple selection"),(0,a.kt)("p",null,"To select multiple rows, set ",(0,a.kt)("inlineCode",{parentName:"p"},'SelectionMode="GridSelectionMode.Multiple"'),"."),(0,a.kt)("img",{src:"https://i.imgur.com/yzJETf8.png",alt:"Blazor Bootstrap: Grid Component - Multiple selection"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4-6} showLineNumbers","{4-6}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n\n
\n Selected Items Count: @selectedEmployees.Count\n
\n\n
\n Selected Employees:\n
    \n @foreach (var emp in selectedEmployees)\n {\n
  • @emp.Name
    • \n }\n
\n
\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{32-36} showLineNumbers","{32-36}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private HashSet selectedEmployees = new();\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n Console.WriteLine("EmployeesDataProvider called...");\n\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private Task OnSelectedItemsChanged(HashSet employees)\n {\n selectedEmployees = employees is not null && employees.Any() ? employees : new();\n return Task.CompletedTask;\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#multiple-selection"},"See demo here")),(0,a.kt)("h3",{id:"disable-selection"},"Disable selection"),(0,a.kt)("p",null,"We can disable the header checkbox or row level checkbox based on a condition.\nFor this, we have ",(0,a.kt)("inlineCode",{parentName:"p"},"DisableAllRowsSelection")," and ",(0,a.kt)("inlineCode",{parentName:"p"},"DisableRowSelection")," delegate parameters.\nIn the below example, we disabled the header checkbox if any of the employee Id is less than 105.\nAlso, disable check the row level checkbox if the employee Id is less than 105."),(0,a.kt)("img",{src:"https://i.imgur.com/v0x4C16.png",alt:"Blazor Bootstrap: Grid Component - Disable selection"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4-8} showLineNumbers","{4-8}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n\n
\n Selected Items Count: @selectedEmployees.Count\n
\n\n
\n Selected Employees:\n
    \n @foreach (var emp in selectedEmployees)\n {\n
  • @emp.Name
    • \n }\n
\n
\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{30-33,35-38,40-44} showLineNumbers","{30-33,35-38,40-44}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private HashSet selectedEmployees = new();\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n };\n }\n\n private bool DisableAllRowsSelectionHandler(IEnumerable employees)\n {\n return employees.Any(x => x.Id < 105); // disable selection if EmployeeId < 105\n }\n\n private bool DisableRowSelectionHandler(Employee1 emp)\n {\n return emp.Id < 105; // disable selection if EmployeeId < 105\n }\n\n private Task OnSelectedItemsChanged(HashSet employees)\n {\n selectedEmployees = employees is not null && employees.Any() ? employees : new();\n return Task.CompletedTask;\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#disable-selection"},"See demo here")),(0,a.kt)("h3",{id:"dynamic-page-size"},"Dynamic page size"),(0,a.kt)("img",{src:"https://user-images.githubusercontent.com/2337067/239613002-c7b4b6f6-be67-4f14-accc-b3dd390eb0f9.png",alt:"Blazor Bootstrap: Grid Component - Dynamic page size"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5,26-28} showLineNumbers","{5,26-28}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n\n\n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,32} showLineNumbers","{2,32}":!0,showLineNumbers:!0},'@code {\n private int pageSize = 5;\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n\n private void ChangeSize(int size) => pageSize = size;\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#dynamic-page-size"},"See demo here")),(0,a.kt)("h3",{id:"page-size-selection"},"Page size selection"),(0,a.kt)("img",{src:"https://user-images.githubusercontent.com/2337067/239613340-3917f4fa-a252-4e5e-a3b5-27b83304cbc2.png",alt:"Blazor Bootstrap: Grid Component - Page size selection"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5-7} showLineNumbers","{5-7}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#page-size-selection"},"See demo here")),(0,a.kt)("h3",{id:"header-row-css-class"},"Header row css class"),(0,a.kt)("img",{src:"https://i.imgur.com/KIqBefV.png",alt:"Blazor Bootstrap: Grid Component - Header row css class"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5,34,63,92} showLineNumbers","{5,34,63,92}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#header-row-css-class"},"See demo here")),(0,a.kt)("h3",{id:"filters-row-css-class"},"Filters row css class"),(0,a.kt)("img",{src:"https://i.imgur.com/11SK9v4.png",alt:"Blazor Bootstrap: Grid Component - Filters row css class"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{7,38,69,100,131,162,193} showLineNumbers","{7,38,69,100,131,162,193}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n\n\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#filters-row-css-class"},"See demo here")),(0,a.kt)("h3",{id:"row-click-event"},"Row click event"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,7} showLineNumbers","{2,7}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{27-30} showLineNumbers","{27-30}":!0,showLineNumbers:!0},'@code {\n [Inject] ModalService ModalService { get; set; } = default!;\n\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n };\n }\n\n private async Task OnRowClick(GridRowEventArgs args)\n {\n await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = "Event: Row Click", Message = $"Id: {args.Item.Id}, Name: {args.Item.Name}" });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#row-click-event"},"See demo here")),(0,a.kt)("h3",{id:"row-double-click-event"},"Row double click event"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,7} showLineNumbers","{2,7}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n\n \n @context.Name\n \n\n \n @context.Designation\n \n\n \n @context.DOJ\n \n\n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{27-30} showLineNumbers","{27-30}":!0,showLineNumbers:!0},'@code {\n [Inject] ModalService ModalService { get; set; } = default!;\n\n private IEnumerable employees = default!;\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n };\n }\n\n private async Task OnRowDoubleClick(GridRowEventArgs args)\n {\n await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = "Event: Row Double Click", Message = $"Id: {args.Item.Id}, Name: {args.Item.Name}" });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#row-double-click-event"},"See demo here")),(0,a.kt)("h3",{id:"translations"},"Translations"),(0,a.kt)("p",null,"In the example below, you will see translations related to pagination and filters in ",(0,a.kt)("strong",{parentName:"p"},"Dutch"),"."),(0,a.kt)("img",{src:"https://i.imgur.com/kKNgo2I.png",alt:"Blazor Bootstrap: Grid Component - Translations"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{8,13-14} showLineNumbers","{8,13-14}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{4-25} showLineNumbers","{4-25}":!0,showLineNumbers:!0},'@code {\n private IEnumerable employees = default!;\n\n private async Task> GridFiltersTranslationProvider()\n {\n var filtersTranslation = new List();\n\n // number/date/boolean\n filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));\n filtersTranslation.Add(new("!=", "Niet gelijk", FilterOperator.NotEquals));\n // number/date\n filtersTranslation.Add(new("<", "Minder dan", FilterOperator.LessThan));\n filtersTranslation.Add(new("<=", "Kleiner dan of gelijk aan", FilterOperator.LessThanOrEquals));\n filtersTranslation.Add(new(">", "Groter dan", FilterOperator.GreaterThan));\n filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals));\n // string\n filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains));\n filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith));\n filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith));\n filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));\n // common\n filtersTranslation.Add(new("x", "Duidelijk", FilterOperator.Clear));\n\n return await Task.FromResult(filtersTranslation);\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },\n new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },\n new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },\n new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#translations"},"See demo here")),(0,a.kt)("h3",{id:"fixed-header"},"Fixed header"),(0,a.kt)("p",null,"To set the fixed header, set the ",(0,a.kt)("strong",{parentName:"p"},"FixedHeader")," parameter to ",(0,a.kt)("strong",{parentName:"p"},"true"),". The minimum height of the grid is ",(0,a.kt)("strong",{parentName:"p"},"320 pixels"),". You can change the units to em, pt, px, or etc. by setting the ",(0,a.kt)("strong",{parentName:"p"},"Unit")," parameter."),(0,a.kt)("img",{src:"https://i.imgur.com/KRsQK6I.png",alt:"Blazor Bootstrap: Grid Component - Fixed header"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5,6,8} showLineNumbers","{5,6,8}":!0,showLineNumbers:!0},'\n\n \n @context.Id\n \n \n @context.Name\n \n \n @context.Designation\n \n \n @context.Designation\n \n \n @context.Designation\n \n \n @context.Designation\n \n \n @context.DOJ\n \n \n @context.IsActive\n \n \n @context.IsActive\n \n \n @context.IsActive\n \n \n @context.IsActive\n \n \n @context.IsActive\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n BlazorBootstrap.Grid grid = default!;\n private IEnumerable employees = default!;\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task> EmployeesDataProvider(GridDataProviderRequest request)\n {\n if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging\n employees = GetEmployees(); // call a service or an API to pull the employees\n\n return await Task.FromResult(request.ApplyTo(employees));\n }\n\n private IEnumerable GetEmployees()\n {\n return new List\n {\n new Employee4 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },\n new Employee4 { Id = null, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },\n new Employee4 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },\n new Employee4 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },\n new Employee4 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },\n new Employee4 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee4 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },\n new Employee4 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },\n new Employee4 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = null, IsActive = true },\n new Employee4 { Id = 110, Name = "Vijay", Designation = null, DOJ = new DateOnly(1990, 7, 1), IsActive = true },\n };\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#fixed-header"},"See demo here")),(0,a.kt)("h3",{id:"fixed-header-with-filters"},"Fixed header with filters"),(0,a.kt)("img",{src:"https://i.imgur.com/QRgyrZK.png",alt:"Blazor Bootstrap: Grid Component - Fixed header with filters"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4,7,9} showLineNumbers","{4,7,9}":!0,showLineNumbers:!0},'\n\n \n @context.CustomerId\n \n \n @context.CustomerName\n \n \n @context.Phone\n \n \n @context.Email\n \n \n @context.Address\n \n \n @context.PostalZip\n \n \n @context.Country\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] public ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting.FirstOrDefault().SortString;\n sortDirection = request.Sorting.FirstOrDefault().SortDirection;\n }\n var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#fixed-header-with-filters"},"See demo here")),(0,a.kt)("h3",{id:"freeze-columns"},"Freeze columns"),(0,a.kt)("img",{src:"https://i.imgur.com/1vRu0LU.png",alt:"Blazor Bootstrap: Grid Component - Freeze columns"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{7,9,12,27} showLineNumbers","{7,9,12,27}":!0,showLineNumbers:!0},'\n\n \n @context.CustomerId\n \n \n @context.CustomerName\n \n \n @context.Phone\n \n \n @context.Email\n \n \n @context.Address\n \n \n @context.PostalZip\n \n \n @context.Country\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] public ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting.FirstOrDefault().SortString;\n sortDirection = request.Sorting.FirstOrDefault().SortDirection;\n }\n var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#freeze-columns"},"See demo here")),(0,a.kt)("h3",{id:"freeze-columns-with-fixed-header"},"Freeze columns with fixed header"),(0,a.kt)("img",{src:"https://i.imgur.com/qIVCEKH.png",alt:"Blazor Bootstrap: Grid Component - Freeze columns with fixed header"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{6,8,10,13,28} showLineNumbers","{6,8,10,13,28}":!0,showLineNumbers:!0},'\n\n \n @context.CustomerId\n \n \n @context.CustomerName\n \n \n @context.Phone\n \n \n @context.Email\n \n \n @context.Address\n \n \n @context.PostalZip\n \n \n @context.Country\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] public ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting.FirstOrDefault().SortString;\n sortDirection = request.Sorting.FirstOrDefault().SortDirection;\n }\n var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#freeze-columns-with-fixed-header"},"See demo here")),(0,a.kt)("h3",{id:"freeze-columns-with-fixed-header-and-filters"},"Freeze columns with fixed header and filters"),(0,a.kt)("img",{src:"https://i.imgur.com/GzXuQep.png",alt:"Blazor Bootstrap: Grid Component - Freeze columns with fixed header and filters"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4,7,9,11,14,26,29} showLineNumbers","{4,7,9,11,14,26,29}":!0,showLineNumbers:!0},'\n\n \n @context.CustomerId\n \n \n @context.CustomerName\n \n \n @context.Phone\n \n \n @context.Email\n \n \n @context.Address\n \n \n @context.PostalZip\n \n \n @context.Country\n \n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] public ICustomerService _customerService { get; set; } = default!;\n\n private async Task> CustomersDataProvider(GridDataProviderRequest request)\n {\n string sortString = "";\n SortDirection sortDirection = SortDirection.None;\n\n if (request.Sorting is not null && request.Sorting.Any())\n {\n // Note: Multi column sorting is not supported at this moment\n sortString = request.Sorting.FirstOrDefault().SortString;\n sortDirection = request.Sorting.FirstOrDefault().SortDirection;\n }\n var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);\n return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 });\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/grid#freeze-columns-with-fixed-header-and-filters"},"See demo here")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2a6d8460.70bedafe.js b/assets/js/2a6d8460.70bedafe.js deleted file mode 100644 index 1ec921f2b..000000000 --- a/assets/js/2a6d8460.70bedafe.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[22506],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>b});var a=n(67294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var s=a.createContext({}),m=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=m(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,s=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),p=m(n),c=l,b=p["".concat(s,".").concat(c)]||p[c]||d[c]||r;return n?a.createElement(b,i(i({ref:t},u),{},{components:n})):a.createElement(b,i({ref:t},u))}));function b(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,i=new Array(r);i[0]=c;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o[p]="string"==typeof e?e:l,i[1]=o;for(var m=2;m{n.d(t,{ZP:()=>p});var a=n(87462),l=n(67294),r=n(3905),i=n(72389);function o(e){let{children:t,fallback:n}=e;return(0,i.Z)()?l.createElement(l.Fragment,null,t?.()):n??null}n(73935);function s(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const m={toc:[]},u="wrapper";function p(e){let{components:t,...n}=e;return(0,r.kt)(u,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("div",{id:"divCarbonAd"}),(0,r.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,r.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},83582:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>o,default:()=>c,frontMatter:()=>i,metadata:()=>s,toc:()=>u});var a=n(87462),l=(n(67294),n(3905)),r=n(58034);const i={title:"Blazor Number Input Component",description:'Blazor Bootstrap `NumberInput` component is built around HTML input of `type="number"` that prevents the user input based on the parameters set.',image:"https://i.imgur.com/iUNBkki.png",sidebar_label:"Number Input",sidebar_position:4},o="Blazor Number Input",s={unversionedId:"forms/number-input",id:"forms/number-input",title:"Blazor Number Input Component",description:'Blazor Bootstrap `NumberInput` component is built around HTML input of `type="number"` that prevents the user input based on the parameters set.',source:"@site/docs/04-forms/number-input.mdx",sourceDirName:"04-forms",slug:"/forms/number-input",permalink:"/forms/number-input",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/04-forms/number-input.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Blazor Number Input Component",description:'Blazor Bootstrap `NumberInput` component is built around HTML input of `type="number"` that prevents the user input based on the parameters set.',image:"https://i.imgur.com/iUNBkki.png",sidebar_label:"Number Input",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Date Input",permalink:"/forms/date-input"},next:{title:"Switch",permalink:"/forms/switch"}},m={},u=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Events",id:"events",level:2},{value:"Examples",id:"examples",level:2},{value:"Basic usage",id:"basic-usage",level:3},{value:"Generic type",id:"generic-type",level:3},{value:"Enable min and max",id:"enable-min-and-max",level:3},{value:"Step",id:"step",level:3},{value:"Text alignment",id:"text-alignment",level:3},{value:"Allow negative numbers",id:"allow-negative-numbers",level:3},{value:"Disable",id:"disable",level:3},{value:"Validations",id:"validations",level:3},{value:"Events: ValueChanged",id:"events-valuechanged",level:3}],p={toc:u},d="wrapper";function c(e){let{components:t,...n}=e;return(0,l.kt)(d,(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"blazor-number-input"},"Blazor Number Input"),(0,l.kt)("p",null,"Blazor Bootstrap ",(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," component is built around HTML input of ",(0,l.kt)("inlineCode",{parentName:"p"},'type="number"')," that prevents the user input based on the parameters set."),(0,l.kt)(r.ZP,{mdxType:"CarbonAd"}),(0,l.kt)("img",{src:"https://i.imgur.com/XXD0xF4.png",alt:"Blazor Bootstrap: Number Input Component"}),(0,l.kt)("h2",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"AllowNegativeNumbers"),(0,l.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,l.kt)("td",{parentName:"tr",align:"left"},"false"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Allows negative numbers. By default, negative numbers are not allowed.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"AutoComplete"),(0,l.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,l.kt)("td",{parentName:"tr",align:"left"},"false"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Indicates whether the NumberInput can complete the values automatically by the browser.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Disabled"),(0,l.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,l.kt)("td",{parentName:"tr",align:"left"},"false"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the disabled.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"EnableMinMax"),(0,l.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,l.kt)("td",{parentName:"tr",align:"left"},"false"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Max"),(0,l.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},'Gets or sets the max. Max ignored if EnableMinMax="false".')),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Min"),(0,l.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},'Gets or sets the min. Min ignored if EnableMinMax="false".')),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Placeholder"),(0,l.kt)("td",{parentName:"tr",align:"left"},"string?"),(0,l.kt)("td",{parentName:"tr",align:"left"},"null"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the placeholder.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Step"),(0,l.kt)("td",{parentName:"tr",align:"left"},"double?"),(0,l.kt)("td",{parentName:"tr",align:"left"},"null"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the step.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"TextAlignment"),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"Alignment")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"Alignment.None")),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the text alignment.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Value"),(0,l.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the value.")))),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Disable"),(0,l.kt)("td",{parentName:"tr",align:"left"},"Disables number input.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Enable"),(0,l.kt)("td",{parentName:"tr",align:"left"},"Enables number input.")))),(0,l.kt)("h2",{id:"events"},"Events"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"ValueChanged"),(0,l.kt)("td",{parentName:"tr",align:"left"},"This event fired on every user keystroke that changes the ",(0,l.kt)("inlineCode",{parentName:"td"},"NumberInput")," value.")))),(0,l.kt)("h2",{id:"examples"},"Examples"),(0,l.kt)("h3",{id:"basic-usage"},"Basic usage"),(0,l.kt)("p",null,"By default, ",(0,l.kt)("inlineCode",{parentName:"p"},"e + -")," are blocked. For all integral numeric types, dot ",(0,l.kt)("inlineCode",{parentName:"p"},".")," is blocked."),(0,l.kt)("img",{src:"https://i.imgur.com/XXD0xF4.png",alt:"Blazor Bootstrap: Number Input Component - Basic usage"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3} showLineNumbers","{3}":!0,showLineNumbers:!0},'
\n \n \n
\n
Entered Amount: @amount
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private int amount;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#basic-usage"},"See demo here")),(0,l.kt)("h3",{id:"generic-type"},"Generic type"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," is a generic component. Always specify the exact type. In the below example ",(0,l.kt)("b",null,"TValue")," is set to ",(0,l.kt)("inlineCode",{parentName:"p"},"int"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"int?"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"float"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"float?"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"double"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"double?"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"decimal"),", and ",(0,l.kt)("inlineCode",{parentName:"p"},"decimal?"),"."),(0,l.kt)("img",{src:"https://i.imgur.com/iUNBkki.png",alt:"Blazor Bootstrap: Number Input Component - Generic type"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,8,13,18,23,28,33,38} showLineNumbers","{3,8,13,18,23,28,33,38}":!0,showLineNumbers:!0},'
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private int amount;\n private int? amount2;\n private float amount3;\n private float? amount4;\n private double amount5;\n private double? amount6;\n private decimal amount7;\n private decimal? amount8;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#generic-type"},"See demo here")),(0,l.kt)("h3",{id:"enable-min-and-max"},"Enable min and max"),(0,l.kt)("p",null,"Set ",(0,l.kt)("inlineCode",{parentName:"p"},'EnableMinMax="true"')," and set the ",(0,l.kt)("inlineCode",{parentName:"p"},"Min")," and ",(0,l.kt)("inlineCode",{parentName:"p"},"Max")," parameters to restrict the user input between the Min and Max range."),(0,l.kt)("img",{src:"https://i.imgur.com/v4SWtWs.png",alt:"Blazor Bootstrap: Number Input Component - Enable min and max"}),(0,l.kt)("admonition",{title:"NOTE",type:"caution"},(0,l.kt)("p",{parentName:"admonition"},"If the user tries to enter a number in the ",(0,l.kt)("b",null,"NumberInput")," field which is out of range, then it will override with Min or Max value based on the context.\nIf the user input is less than the Min value, then it will override with the Min value.\nIf the user input exceeds the Max value, it will override with the Max value.")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3} showLineNumbers","{3}":!0,showLineNumbers:!0},'
\n \n \n Tip: The amount must be between 10 and 500.\n
\n
Entered Amount: @amount
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private decimal? amount;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#enable-min-and-max"},"See demo here")),(0,l.kt)("h3",{id:"step"},"Step"),(0,l.kt)("p",null,"The ",(0,l.kt)("inlineCode",{parentName:"p"},"Step")," sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, ",(0,l.kt)("inlineCode",{parentName:"p"},"Step")," defaults to ",(0,l.kt)("b",null,"1"),"."),(0,l.kt)("img",{src:"https://i.imgur.com/Lq10NP1.png",alt:"Blazor Bootstrap: Number Input Component - Step"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,10} showLineNumbers","{3,10}":!0,showLineNumbers:!0},'
\n \n \n Info: Here Step parameter is set to 10.\n
\n
Entered Amount: @amount
\n\n
\n \n \n Info: Here Step parameter is set to 2.5.\n
\n
Entered Amount: @amount2
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private int? amount;\n private decimal? amount2;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#step"},"See demo here")),(0,l.kt)("h3",{id:"text-alignment"},"Text alignment"),(0,l.kt)("p",null,"You can change the text alignment according to your need. Use the ",(0,l.kt)("inlineCode",{parentName:"p"},"TextAlignment")," parameter to set the alignment. In the below example, alignment is set to center and end."),(0,l.kt)("img",{src:"https://i.imgur.com/hbHHfKr.png",alt:"Blazor Bootstrap: Number Input Component - Text alignment"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,9} showLineNumbers","{3,9}":!0,showLineNumbers:!0},'
\n \n \n
\n
Entered Amount: @amount
\n\n
\n \n \n
\n
Entered Amount: @amount2
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private int amount;\n private decimal amount2 = 2.34M;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#text-alignment"},"See demo here")),(0,l.kt)("h3",{id:"allow-negative-numbers"},"Allow negative numbers"),(0,l.kt)("p",null,"By default, negative numbers are not allowed. Set the ",(0,l.kt)("inlineCode",{parentName:"p"},"AllowNegativeNumbers")," parameter to true to allow the negative numbers."),(0,l.kt)("img",{src:"https://i.imgur.com/jmtUxzB.png",alt:"Blazor Bootstrap: Number Input Component - Allow negative numbers"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3} showLineNumbers","{3}":!0,showLineNumbers:!0},'
\n \n \n Tip: Negative numbers are also allowed.\n
\n
Entered Amount: @amount
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private int amount;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#allow-negative-numbers"},"See demo here")),(0,l.kt)("h3",{id:"disable"},"Disable"),(0,l.kt)("p",null,"Use the ",(0,l.kt)("b",null,"Disabled")," parameter to disable the NumberInput."),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5,9-11} showLineNumbers","{5,9-11}":!0,showLineNumbers:!0},'
\n \n \n
\n\n\n\n\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{3,5,7,9} showLineNumbers","{3,5,7,9}":!0,showLineNumbers:!0},"@code {\n private int? amount;\n private bool disabled = true;\n\n private void Enable() => disabled = false;\n\n private void Disable() => disabled = true;\n\n private void Toggle() => disabled = !disabled;\n}\n")),(0,l.kt)("p",null,"Also, use ",(0,l.kt)("strong",{parentName:"p"},"Enable()")," and ",(0,l.kt)("strong",{parentName:"p"},"Disable()")," methods to enable and disable the NumberInput."),(0,l.kt)("admonition",{title:"NOTE",type:"caution"},(0,l.kt)("p",{parentName:"admonition"},"Do not use both the ",(0,l.kt)("strong",{parentName:"p"},"Disabled")," parameter and ",(0,l.kt)("strong",{parentName:"p"},"Enable()")," & ",(0,l.kt)("strong",{parentName:"p"},"Disable()")," methods.")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,9-10} showLineNumbers","{3,9-10}":!0,showLineNumbers:!0},'
\n \n \n
\n\n\n\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,5,7} showLineNumbers","{2,5,7}":!0,showLineNumbers:!0},"@code {\n private NumberInput numberInput = default!;\n private int? amount;\n\n private void Disable() => numberInput.Disable();\n\n private void Enable() => numberInput.Enable();\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#disable"},"See demo here")),(0,l.kt)("h3",{id:"validations"},"Validations"),(0,l.kt)("p",null,"Like any other blazor input component, ",(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," supports validations. Add the DataAnnotations on the ",(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," component to validate the user input before submitting the form. In the below example, we used ",(0,l.kt)("b",null,"Required")," and ",(0,l.kt)("b",null,"Range")," attributes."),(0,l.kt)("img",{src:"https://i.imgur.com/K7bepKc.png",alt:"Blazor Bootstrap: Number Input Component - Validations"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{17,18,23,24,31,32,39,40} showLineNumbers","{17,18,23,24,31,32,39,40}":!0,showLineNumbers:!0},'@using System.ComponentModel.DataAnnotations\n\n\n\n\n \n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2-3,7-8,36,46,49-61} showLineNumbers","{2-3,7-8,36,46,49-61}":!0,showLineNumbers:!0},'@code {\n private Invoice invoice = new();\n private EditContext editContext;\n\n protected override void OnInitialized()\n {\n editContext = new EditContext(invoice);\n base.OnInitialized();\n }\n\n protected override void OnParametersSet()\n {\n CalculateToatl();\n base.OnParametersSet();\n }\n\n private void PriceChanged(decimal? value)\n {\n invoice.Price = value;\n CalculateToatl();\n }\n\n private void DiscountChanged(decimal? value)\n {\n invoice.Discount = value;\n CalculateToatl();\n }\n\n private void CalculateToatl()\n {\n var price = invoice.Price.HasValue ? invoice.Price.Value : 0;\n var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0;\n invoice.Total = price - discount;\n }\n\n public void HandleOnValidSubmit()\n {\n Console.WriteLine($"Price: {invoice.Price}");\n Console.WriteLine($"Discount: {invoice.Discount}");\n Console.WriteLine($"Total: {invoice.Total}");\n }\n\n private void ResetForm()\n {\n invoice = new();\n editContext = new EditContext(invoice);\n }\n\n public class Invoice\n {\n [Required(ErrorMessage = "Price required.")]\n [Range(60, 500, ErrorMessage = "Price should be between 60 and 500.")]\n public decimal? Price { get; set; } = 232M;\n\n [Range(0, 50, ErrorMessage = "Discount should be between 0 and 50.")]\n public decimal? Discount { get; set; }\n\n [Required(ErrorMessage = "Amount required.")]\n [Range(10, 500, ErrorMessage = "Total should be between 60 and 500.")]\n public decimal? Total { get; set; }\n }\n}\n')),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#validations"},"See demo here")),(0,l.kt)("h3",{id:"events-valuechanged"},"Events: ValueChanged"),(0,l.kt)("p",null,"This event fires on every user keystroke that changes the ",(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," value."),(0,l.kt)("img",{src:"https://i.imgur.com/1DGW8dG.png",alt:"Blazor Bootstrap: Number Input Component - Events: ValueChanged"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4} showLineNumbers","{4}":!0,showLineNumbers:!0},'
\n \n
\n \n
\n
\n
\n @displayPrice\n
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{5-9} showLineNumbers","{5-9}":!0,showLineNumbers:!0},'@code {\n private decimal? price = 10M;\n private string displayPrice;\n\n private void PriceChanged(decimal? value)\n {\n price = value; // this is mandatory\n displayPrice = $"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.";\n }\n}\n')),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#event-value-changed"},"See demo here")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2a6d8460.cca58028.js b/assets/js/2a6d8460.cca58028.js new file mode 100644 index 000000000..e514c776f --- /dev/null +++ b/assets/js/2a6d8460.cca58028.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[22506],{3905:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>b});var a=n(67294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var s=a.createContext({}),m=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=m(e.components);return a.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},c=a.forwardRef((function(e,t){var n=e.components,l=e.mdxType,r=e.originalType,s=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),p=m(n),c=l,b=p["".concat(s,".").concat(c)]||p[c]||d[c]||r;return n?a.createElement(b,i(i({ref:t},u),{},{components:n})):a.createElement(b,i({ref:t},u))}));function b(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=n.length,i=new Array(r);i[0]=c;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o[p]="string"==typeof e?e:l,i[1]=o;for(var m=2;m{n.d(t,{ZP:()=>p});var a=n(87462),l=n(67294),r=n(3905),i=n(72389);function o(e){let{children:t,fallback:n}=e;return(0,i.Z)()?l.createElement(l.Fragment,null,t?.()):n??null}n(73935);function s(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const m={toc:[]},u="wrapper";function p(e){let{components:t,...n}=e;return(0,r.kt)(u,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("div",{id:"divCarbonAd"}),(0,r.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,r.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},83582:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>o,default:()=>c,frontMatter:()=>i,metadata:()=>s,toc:()=>u});var a=n(87462),l=(n(67294),n(3905)),r=n(58034);const i={title:"Blazor Number Input Component",description:'Blazor Bootstrap `NumberInput` component is built around HTML input of `type="number"` that prevents the user input based on the parameters set.',image:"https://i.imgur.com/iUNBkki.png",sidebar_label:"Number Input",sidebar_position:4},o="Blazor Number Input",s={unversionedId:"forms/number-input",id:"forms/number-input",title:"Blazor Number Input Component",description:'Blazor Bootstrap `NumberInput` component is built around HTML input of `type="number"` that prevents the user input based on the parameters set.',source:"@site/docs/04-forms/number-input.mdx",sourceDirName:"04-forms",slug:"/forms/number-input",permalink:"/forms/number-input",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/04-forms/number-input.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Blazor Number Input Component",description:'Blazor Bootstrap `NumberInput` component is built around HTML input of `type="number"` that prevents the user input based on the parameters set.',image:"https://i.imgur.com/iUNBkki.png",sidebar_label:"Number Input",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Date Input",permalink:"/forms/date-input"},next:{title:"Switch",permalink:"/forms/switch"}},m={},u=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Events",id:"events",level:2},{value:"Examples",id:"examples",level:2},{value:"Basic usage",id:"basic-usage",level:3},{value:"Generic type",id:"generic-type",level:3},{value:"Enable min and max",id:"enable-min-and-max",level:3},{value:"Step",id:"step",level:3},{value:"Text alignment",id:"text-alignment",level:3},{value:"Allow negative numbers",id:"allow-negative-numbers",level:3},{value:"Disable",id:"disable",level:3},{value:"Validations",id:"validations",level:3},{value:"Events: ValueChanged",id:"events-valuechanged",level:3}],p={toc:u},d="wrapper";function c(e){let{components:t,...n}=e;return(0,l.kt)(d,(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"blazor-number-input"},"Blazor Number Input"),(0,l.kt)("p",null,"Blazor Bootstrap ",(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," component is built around HTML input of ",(0,l.kt)("inlineCode",{parentName:"p"},'type="number"')," that prevents the user input based on the parameters set."),(0,l.kt)(r.ZP,{mdxType:"CarbonAd"}),(0,l.kt)("img",{src:"https://i.imgur.com/XXD0xF4.png",alt:"Blazor Bootstrap: Number Input Component"}),(0,l.kt)("h2",{id:"parameters"},"Parameters"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"AllowNegativeNumbers"),(0,l.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,l.kt)("td",{parentName:"tr",align:"left"},"false"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Allows negative numbers. By default, negative numbers are not allowed.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"AutoComplete"),(0,l.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,l.kt)("td",{parentName:"tr",align:"left"},"false"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Indicates whether the NumberInput can complete the values automatically by the browser.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Disabled"),(0,l.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,l.kt)("td",{parentName:"tr",align:"left"},"false"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the disabled.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"EnableMinMax"),(0,l.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,l.kt)("td",{parentName:"tr",align:"left"},"false"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Max"),(0,l.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},'Gets or sets the max. Max ignored if EnableMinMax="false".')),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Min"),(0,l.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},'Gets or sets the min. Min ignored if EnableMinMax="false".')),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Placeholder"),(0,l.kt)("td",{parentName:"tr",align:"left"},"string?"),(0,l.kt)("td",{parentName:"tr",align:"left"},"null"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the placeholder.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Step"),(0,l.kt)("td",{parentName:"tr",align:"left"},"double?"),(0,l.kt)("td",{parentName:"tr",align:"left"},"null"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the step.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"TextAlignment"),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"Alignment")),(0,l.kt)("td",{parentName:"tr",align:"left"},(0,l.kt)("inlineCode",{parentName:"td"},"Alignment.None")),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the text alignment.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Value"),(0,l.kt)("td",{parentName:"tr",align:"left"},"TValue"),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"}),(0,l.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the value.")))),(0,l.kt)("h2",{id:"methods"},"Methods"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Disable"),(0,l.kt)("td",{parentName:"tr",align:"left"},"Disables number input.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"Enable"),(0,l.kt)("td",{parentName:"tr",align:"left"},"Enables number input.")))),(0,l.kt)("h2",{id:"events"},"Events"),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,l.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:"left"},"ValueChanged"),(0,l.kt)("td",{parentName:"tr",align:"left"},"This event fired on every user keystroke that changes the ",(0,l.kt)("inlineCode",{parentName:"td"},"NumberInput")," value.")))),(0,l.kt)("h2",{id:"examples"},"Examples"),(0,l.kt)("h3",{id:"basic-usage"},"Basic usage"),(0,l.kt)("p",null,"By default, ",(0,l.kt)("inlineCode",{parentName:"p"},"e + -")," are blocked. For all integral numeric types, dot ",(0,l.kt)("inlineCode",{parentName:"p"},".")," is blocked."),(0,l.kt)("img",{src:"https://i.imgur.com/XXD0xF4.png",alt:"Blazor Bootstrap: Number Input Component - Basic usage"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3} showLineNumbers","{3}":!0,showLineNumbers:!0},'
\n \n \n
\n
Entered Amount: @amount
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n private int amount;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#basic-usage"},"See demo here")),(0,l.kt)("h3",{id:"generic-type"},"Generic type"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," is a generic component. Always specify the exact type. In the below example ",(0,l.kt)("b",null,"TValue")," is set to ",(0,l.kt)("inlineCode",{parentName:"p"},"int"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"int?"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"float"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"float?"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"double"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"double?"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"decimal"),", and ",(0,l.kt)("inlineCode",{parentName:"p"},"decimal?"),"."),(0,l.kt)("img",{src:"https://i.imgur.com/iUNBkki.png",alt:"Blazor Bootstrap: Number Input Component - Generic type"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,8,13,18,23,28,33,38} showLineNumbers","{3,8,13,18,23,28,33,38}":!0,showLineNumbers:!0},'
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private int amount;\n private int? amount2;\n private float amount3;\n private float? amount4;\n private double amount5;\n private double? amount6;\n private decimal amount7;\n private decimal? amount8;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#generic-type"},"See demo here")),(0,l.kt)("h3",{id:"enable-min-and-max"},"Enable min and max"),(0,l.kt)("p",null,"Set ",(0,l.kt)("inlineCode",{parentName:"p"},'EnableMinMax="true"')," and set the ",(0,l.kt)("inlineCode",{parentName:"p"},"Min")," and ",(0,l.kt)("inlineCode",{parentName:"p"},"Max")," parameters to restrict the user input between the Min and Max range."),(0,l.kt)("img",{src:"https://i.imgur.com/v4SWtWs.png",alt:"Blazor Bootstrap: Number Input Component - Enable min and max"}),(0,l.kt)("admonition",{title:"NOTE",type:"caution"},(0,l.kt)("p",{parentName:"admonition"},"If the user tries to enter a number in the ",(0,l.kt)("b",null,"NumberInput")," field which is out of range, then it will override with Min or Max value based on the context.\nIf the user input is less than the Min value, then it will override with the Min value.\nIf the user input exceeds the Max value, it will override with the Max value.")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3} showLineNumbers","{3}":!0,showLineNumbers:!0},'
\n \n \n Tip: The amount must be between 10 and 500.\n
\n
Entered Amount: @amount
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private decimal? amount;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#enable-min-and-max"},"See demo here")),(0,l.kt)("h3",{id:"step"},"Step"),(0,l.kt)("p",null,"The ",(0,l.kt)("inlineCode",{parentName:"p"},"Step")," sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, ",(0,l.kt)("inlineCode",{parentName:"p"},"Step")," defaults to ",(0,l.kt)("b",null,"1"),"."),(0,l.kt)("img",{src:"https://i.imgur.com/Lq10NP1.png",alt:"Blazor Bootstrap: Number Input Component - Step"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,10} showLineNumbers","{3,10}":!0,showLineNumbers:!0},'
\n \n \n Info: Here Step parameter is set to 10.\n
\n
Entered Amount: @amount
\n\n
\n \n \n Info: Here Step parameter is set to 2.5.\n
\n
Entered Amount: @amount2
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private int? amount;\n private decimal? amount2;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#step"},"See demo here")),(0,l.kt)("h3",{id:"text-alignment"},"Text alignment"),(0,l.kt)("p",null,"You can change the text alignment according to your need. Use the ",(0,l.kt)("inlineCode",{parentName:"p"},"TextAlignment")," parameter to set the alignment. In the below example, alignment is set to center and end."),(0,l.kt)("img",{src:"https://i.imgur.com/hbHHfKr.png",alt:"Blazor Bootstrap: Number Input Component - Text alignment"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,9} showLineNumbers","{3,9}":!0,showLineNumbers:!0},'
\n \n \n
\n
Entered Amount: @amount
\n\n
\n \n \n
\n
Entered Amount: @amount2
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private int amount;\n private decimal amount2 = 2.34M;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#text-alignment"},"See demo here")),(0,l.kt)("h3",{id:"allow-negative-numbers"},"Allow negative numbers"),(0,l.kt)("p",null,"By default, negative numbers are not allowed. Set the ",(0,l.kt)("inlineCode",{parentName:"p"},"AllowNegativeNumbers")," parameter to true to allow the negative numbers."),(0,l.kt)("img",{src:"https://i.imgur.com/jmtUxzB.png",alt:"Blazor Bootstrap: Number Input Component - Allow negative numbers"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3} showLineNumbers","{3}":!0,showLineNumbers:!0},'
\n \n \n Tip: Negative numbers are also allowed.\n
\n
Entered Amount: @amount
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n private int amount;\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#allow-negative-numbers"},"See demo here")),(0,l.kt)("h3",{id:"disable"},"Disable"),(0,l.kt)("p",null,"Use the ",(0,l.kt)("b",null,"Disabled")," parameter to disable the NumberInput."),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{5,9-11} showLineNumbers","{5,9-11}":!0,showLineNumbers:!0},'
\n \n \n
\n\n\n\n\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{3,5,7,9} showLineNumbers","{3,5,7,9}":!0,showLineNumbers:!0},"@code {\n private int? amount;\n private bool disabled = true;\n\n private void Enable() => disabled = false;\n\n private void Disable() => disabled = true;\n\n private void Toggle() => disabled = !disabled;\n}\n")),(0,l.kt)("p",null,"Also, use ",(0,l.kt)("strong",{parentName:"p"},"Enable()")," and ",(0,l.kt)("strong",{parentName:"p"},"Disable()")," methods to enable and disable the NumberInput."),(0,l.kt)("admonition",{title:"NOTE",type:"caution"},(0,l.kt)("p",{parentName:"admonition"},"Do not use both the ",(0,l.kt)("strong",{parentName:"p"},"Disabled")," parameter and ",(0,l.kt)("strong",{parentName:"p"},"Enable()")," & ",(0,l.kt)("strong",{parentName:"p"},"Disable()")," methods.")),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{3,9-10} showLineNumbers","{3,9-10}":!0,showLineNumbers:!0},'
\n \n \n
\n\n\n\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2,5,7} showLineNumbers","{2,5,7}":!0,showLineNumbers:!0},"@code {\n private NumberInput numberInput = default!;\n private int? amount;\n\n private void Disable() => numberInput.Disable();\n\n private void Enable() => numberInput.Enable();\n}\n")),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#disable"},"See demo here")),(0,l.kt)("h3",{id:"validations"},"Validations"),(0,l.kt)("p",null,"Like any other blazor input component, ",(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," supports validations. Add the DataAnnotations on the ",(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," component to validate the user input before submitting the form. In the below example, we used ",(0,l.kt)("b",null,"Required")," and ",(0,l.kt)("b",null,"Range")," attributes."),(0,l.kt)("img",{src:"https://i.imgur.com/K7bepKc.png",alt:"Blazor Bootstrap: Number Input Component - Validations"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{17,18,23,24,31,32,39,40} showLineNumbers","{17,18,23,24,31,32,39,40}":!0,showLineNumbers:!0},'@using System.ComponentModel.DataAnnotations\n\n\n\n\n \n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n \n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{2-3,7-8,36,46,49-61} showLineNumbers","{2-3,7-8,36,46,49-61}":!0,showLineNumbers:!0},'@code {\n private Invoice invoice = new();\n private EditContext editContext;\n\n protected override void OnInitialized()\n {\n editContext = new EditContext(invoice);\n base.OnInitialized();\n }\n\n protected override void OnParametersSet()\n {\n CalculateToatl();\n base.OnParametersSet();\n }\n\n private void PriceChanged(decimal? value)\n {\n invoice.Price = value;\n CalculateToatl();\n }\n\n private void DiscountChanged(decimal? value)\n {\n invoice.Discount = value;\n CalculateToatl();\n }\n\n private void CalculateToatl()\n {\n var price = invoice.Price.HasValue ? invoice.Price.Value : 0;\n var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0;\n invoice.Total = price - discount;\n }\n\n public void HandleOnValidSubmit()\n {\n Console.WriteLine($"Price: {invoice.Price}");\n Console.WriteLine($"Discount: {invoice.Discount}");\n Console.WriteLine($"Total: {invoice.Total}");\n }\n\n private void ResetForm()\n {\n invoice = new();\n editContext = new EditContext(invoice);\n }\n\n public class Invoice\n {\n [Required(ErrorMessage = "Price required.")]\n [Range(60, 500, ErrorMessage = "Price should be between 60 and 500.")]\n public decimal? Price { get; set; } = 232M;\n\n [Range(0, 50, ErrorMessage = "Discount should be between 0 and 50.")]\n public decimal? Discount { get; set; }\n\n [Required(ErrorMessage = "Amount required.")]\n [Range(10, 500, ErrorMessage = "Total should be between 60 and 500.")]\n public decimal? Total { get; set; }\n }\n}\n')),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#validations"},"See demo here")),(0,l.kt)("h3",{id:"events-valuechanged"},"Events: ValueChanged"),(0,l.kt)("p",null,"This event fires on every user keystroke that changes the ",(0,l.kt)("inlineCode",{parentName:"p"},"NumberInput")," value."),(0,l.kt)("img",{src:"https://i.imgur.com/1DGW8dG.png",alt:"Blazor Bootstrap: Number Input Component - Events: ValueChanged"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{4} showLineNumbers","{4}":!0,showLineNumbers:!0},'
\n \n
\n \n
\n
\n
\n @displayPrice\n
\n')),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{5-9} showLineNumbers","{5-9}":!0,showLineNumbers:!0},'@code {\n private decimal? price = 10M;\n private string displayPrice;\n\n private void PriceChanged(decimal? value)\n {\n price = value; // this is mandatory\n displayPrice = $"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.";\n }\n}\n')),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/form/number-input#event-value-changed"},"See demo here")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2aa4da01.08725874.js b/assets/js/2aa4da01.08725874.js deleted file mode 100644 index 15b25b837..000000000 --- a/assets/js/2aa4da01.08725874.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[58746],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>g});var r=n(67294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),c=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(p.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,p=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),d=c(n),u=a,g=d["".concat(p,".").concat(u)]||d[u]||m[u]||o;return n?r.createElement(g,l(l({ref:t},s),{},{components:n})):r.createElement(g,l({ref:t},s))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=u;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[d]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{n.d(t,{ZP:()=>d});var r=n(87462),a=n(67294),o=n(3905),l=n(72389);function i(e){let{children:t,fallback:n}=e;return(0,l.Z)()?a.createElement(a.Fragment,null,t?.()):n??null}n(73935);function p(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const c={toc:[]},s="wrapper";function d(e){let{components:t,...n}=e;return(0,o.kt)(s,(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(p,{mdxType:"RenderAd"}))))}d.isMDXComponent=!0},13792:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>p,toc:()=>s});var r=n(87462),a=(n(67294),n(3905)),o=n(58034);const l={title:"Blazor Preload Component",description:"Indicate the loading state of a page with Blazor Bootstrap preload component.",image:"https://i.imgur.com/2cPuqFa.png",sidebar_label:"Preload",sidebar_position:17},i="Blazor Preload",p={unversionedId:"components/preload",id:"components/preload",title:"Blazor Preload Component",description:"Indicate the loading state of a page with Blazor Bootstrap preload component.",source:"@site/docs/05-components/preload.mdx",sourceDirName:"05-components",slug:"/components/preload",permalink:"/components/preload",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/preload.mdx",tags:[],version:"current",sidebarPosition:17,frontMatter:{title:"Blazor Preload Component",description:"Indicate the loading state of a page with Blazor Bootstrap preload component.",image:"https://i.imgur.com/2cPuqFa.png",sidebar_label:"Preload",sidebar_position:17},sidebar:"tutorialSidebar",previous:{title:"Placeholders",permalink:"/components/placeholders"},next:{title:"Progress",permalink:"/components/progress"}},c={},s=[{value:"Parameters",id:"parameters",level:2},{value:"Preload Service",id:"preload-service",level:2},{value:"Methods",id:"methods",level:3},{value:"Global preload service for the application",id:"global-preload-service-for-the-application",level:2},{value:"Change loading text",id:"change-loading-text",level:2},{value:"Change spinner color",id:"change-spinner-color",level:2}],d={toc:s},m="wrapper";function u(e){let{components:t,...n}=e;return(0,a.kt)(m,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-preload"},"Blazor Preload"),(0,a.kt)("p",null,"Indicate the loading state of a page with Blazor Bootstrap preload component."),(0,a.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"Things to know when using the ",(0,a.kt)("inlineCode",{parentName:"strong"},"Preload")," component:")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Add the ",(0,a.kt)("inlineCode",{parentName:"li"},"Preload")," component to your ",(0,a.kt)("strong",{parentName:"li"},"current page")," or your ",(0,a.kt)("strong",{parentName:"li"},"layout page"),"."),(0,a.kt)("li",{parentName:"ul"},"Inject ",(0,a.kt)("inlineCode",{parentName:"li"},"PreloadService")),(0,a.kt)("li",{parentName:"ul"},"Call ",(0,a.kt)("inlineCode",{parentName:"li"},"PreloadService.Show()")," before you make any call to the API."),(0,a.kt)("li",{parentName:"ul"},"Call ",(0,a.kt)("inlineCode",{parentName:"li"},"PreloadService.Hide()")," after you get the response from the API.")),(0,a.kt)("img",{src:"https://i.imgur.com/2cPuqFa.png",alt:"Blazor Bootstrap: Blazor Preload Component - Default"}),(0,a.kt)("h2",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Version Added"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:null},"null"),(0,a.kt)("td",{parentName:"tr",align:null},"Specifies the content to be rendered inside this."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"1.1.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"LoadingText"),(0,a.kt)("td",{parentName:"tr",align:null},"string?"),(0,a.kt)("td",{parentName:"tr",align:null},"null"),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the loading text."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"1.10.4")))),(0,a.kt)("h2",{id:"preload-service"},"Preload Service"),(0,a.kt)("h3",{id:"methods"},"Methods"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Return Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Show(SpinnerColor spinnerColor = SpinnerColor.Light)"),(0,a.kt)("td",{parentName:"tr",align:null},"void"),(0,a.kt)("td",{parentName:"tr",align:null},"Shows the preload."),(0,a.kt)("td",{parentName:"tr",align:null},"1.1.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null)"),(0,a.kt)("td",{parentName:"tr",align:null},"void"),(0,a.kt)("td",{parentName:"tr",align:null},"Shows the preload."),(0,a.kt)("td",{parentName:"tr",align:null},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Hide()"),(0,a.kt)("td",{parentName:"tr",align:null},"void"),(0,a.kt)("td",{parentName:"tr",align:null},"Hides the preload."),(0,a.kt)("td",{parentName:"tr",align:null},"1.1.0")))),(0,a.kt)("h2",{id:"global-preload-service-for-the-application"},"Global preload service for the application"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},"Add the ",(0,a.kt)("inlineCode",{parentName:"li"},"Preload")," component in ",(0,a.kt)("strong",{parentName:"li"},"MainLayout.razor")," page as shown below.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap\n.\n.\n\n... MainLayout.razor code goes here ...\n\n.\n.\n\n')),(0,a.kt)("ol",{start:2},(0,a.kt)("li",{parentName:"ol"},"Inject ",(0,a.kt)("inlineCode",{parentName:"li"},"PreloadService"),", then call the ",(0,a.kt)("inlineCode",{parentName:"li"},"Show()")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"Hide()")," methods before and after the Service/API call, respectively, as shown below.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n\n [Inject] protected PreloadService PreloadService { get; set; }\n\n private void GetEmployees()\n {\n try\n {\n PreloadService.Show();\n\n // call the service/api to get the employees\n }\n catch\n {\n // handle exception\n }\n finally\n {\n PreloadService.Hide();\n }\n }\n}\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/preload#global-preload-service-for-the-application"},"See Preload demo here.")),(0,a.kt)("h2",{id:"change-loading-text"},"Change loading text"),(0,a.kt)("img",{src:"https://i.imgur.com/nzNRyp7.png",alt:"Blazor Bootstrap: Blazor Preload Component - Change loading text"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNUmbers","{}":!0,showLineNUmbers:!0},'\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] protected PreloadService PreloadService { get; set; }\n\n private async Task ShowLoadingDataAsync()\n {\n PreloadService.Show(SpinnerColor.Light, "Loading data...");\n await Task.Delay(3000); // call the service/api\n PreloadService.Hide();\n }\n\n private async Task ShowSavingDataAsync()\n {\n PreloadService.Show(SpinnerColor.Light, "Saving data...");\n await Task.Delay(3000); // call the service/api\n PreloadService.Hide();\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/preload#change-loading-text"},"See Preload demo here.")),(0,a.kt)("h2",{id:"change-spinner-color"},"Change spinner color"),(0,a.kt)("p",null,"Change the default spinner color by passing the ",(0,a.kt)("inlineCode",{parentName:"p"},"SpinnerColor")," enum to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Show(...)")," method. In the below example, we are using a ",(0,a.kt)("a",{parentName:"p",href:"/components/preload#global-preload-service-for-the-application"},"global preload service"),", as shown in the above section."),(0,a.kt)("img",{src:"https://i.imgur.com/5PVt5bX.png",alt:"Blazor Bootstrap: Blazor Preload Component - Change spinner color"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n\n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n [Inject] protected PreloadService PreloadService { get; set; }\n\n private async Task ShowSpinnerAsync(SpinnerColor spinnerColor)\n {\n PreloadService.Show(spinnerColor);\n\n await Task.Delay(3000); // call the service/api\n\n PreloadService.Hide();\n }\n}\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/preload#change-spinner-color"},"See Preload demo here.")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2aa4da01.5e45f8de.js b/assets/js/2aa4da01.5e45f8de.js new file mode 100644 index 000000000..c15bb09e5 --- /dev/null +++ b/assets/js/2aa4da01.5e45f8de.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[58746],{3905:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>g});var r=n(67294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=r.createContext({}),c=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(p.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},u=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,p=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),d=c(n),u=a,g=d["".concat(p,".").concat(u)]||d[u]||m[u]||o;return n?r.createElement(g,l(l({ref:t},s),{},{components:n})):r.createElement(g,l({ref:t},s))}));function g(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[0]=u;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[d]="string"==typeof e?e:a,l[1]=i;for(var c=2;c{n.d(t,{ZP:()=>d});var r=n(87462),a=n(67294),o=n(3905),l=n(72389);function i(e){let{children:t,fallback:n}=e;return(0,l.Z)()?a.createElement(a.Fragment,null,t?.()):n??null}n(73935);function p(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const c={toc:[]},s="wrapper";function d(e){let{components:t,...n}=e;return(0,o.kt)(s,(0,r.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(p,{mdxType:"RenderAd"}))))}d.isMDXComponent=!0},13792:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>p,toc:()=>s});var r=n(87462),a=(n(67294),n(3905)),o=n(58034);const l={title:"Blazor Preload Component",description:"Indicate the loading state of a page with Blazor Bootstrap preload component.",image:"https://i.imgur.com/2cPuqFa.png",sidebar_label:"Preload",sidebar_position:17},i="Blazor Preload",p={unversionedId:"components/preload",id:"components/preload",title:"Blazor Preload Component",description:"Indicate the loading state of a page with Blazor Bootstrap preload component.",source:"@site/docs/05-components/preload.mdx",sourceDirName:"05-components",slug:"/components/preload",permalink:"/components/preload",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/preload.mdx",tags:[],version:"current",sidebarPosition:17,frontMatter:{title:"Blazor Preload Component",description:"Indicate the loading state of a page with Blazor Bootstrap preload component.",image:"https://i.imgur.com/2cPuqFa.png",sidebar_label:"Preload",sidebar_position:17},sidebar:"tutorialSidebar",previous:{title:"Placeholders",permalink:"/components/placeholders"},next:{title:"Progress",permalink:"/components/progress"}},c={},s=[{value:"Parameters",id:"parameters",level:2},{value:"Preload Service",id:"preload-service",level:2},{value:"Methods",id:"methods",level:3},{value:"Global preload service for the application",id:"global-preload-service-for-the-application",level:2},{value:"Change loading text",id:"change-loading-text",level:2},{value:"Change spinner color",id:"change-spinner-color",level:2}],d={toc:s},m="wrapper";function u(e){let{components:t,...n}=e;return(0,a.kt)(m,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-preload"},"Blazor Preload"),(0,a.kt)("p",null,"Indicate the loading state of a page with Blazor Bootstrap preload component."),(0,a.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"Things to know when using the ",(0,a.kt)("inlineCode",{parentName:"strong"},"Preload")," component:")),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Add the ",(0,a.kt)("inlineCode",{parentName:"li"},"Preload")," component to your ",(0,a.kt)("strong",{parentName:"li"},"current page")," or your ",(0,a.kt)("strong",{parentName:"li"},"layout page"),"."),(0,a.kt)("li",{parentName:"ul"},"Inject ",(0,a.kt)("inlineCode",{parentName:"li"},"PreloadService")),(0,a.kt)("li",{parentName:"ul"},"Call ",(0,a.kt)("inlineCode",{parentName:"li"},"PreloadService.Show()")," before you make any call to the API."),(0,a.kt)("li",{parentName:"ul"},"Call ",(0,a.kt)("inlineCode",{parentName:"li"},"PreloadService.Hide()")," after you get the response from the API.")),(0,a.kt)("img",{src:"https://i.imgur.com/2cPuqFa.png",alt:"Blazor Bootstrap: Blazor Preload Component - Default"}),(0,a.kt)("h2",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Version Added"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:null},"null"),(0,a.kt)("td",{parentName:"tr",align:null},"Specifies the content to be rendered inside this."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"1.1.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"LoadingText"),(0,a.kt)("td",{parentName:"tr",align:null},"string?"),(0,a.kt)("td",{parentName:"tr",align:null},"null"),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the loading text."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"1.10.4")))),(0,a.kt)("h2",{id:"preload-service"},"Preload Service"),(0,a.kt)("h3",{id:"methods"},"Methods"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Return Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Added Version"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Show(SpinnerColor spinnerColor = SpinnerColor.Light)"),(0,a.kt)("td",{parentName:"tr",align:null},"void"),(0,a.kt)("td",{parentName:"tr",align:null},"Shows the preload."),(0,a.kt)("td",{parentName:"tr",align:null},"1.1.0")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null)"),(0,a.kt)("td",{parentName:"tr",align:null},"void"),(0,a.kt)("td",{parentName:"tr",align:null},"Shows the preload."),(0,a.kt)("td",{parentName:"tr",align:null},"1.10.4")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Hide()"),(0,a.kt)("td",{parentName:"tr",align:null},"void"),(0,a.kt)("td",{parentName:"tr",align:null},"Hides the preload."),(0,a.kt)("td",{parentName:"tr",align:null},"1.1.0")))),(0,a.kt)("h2",{id:"global-preload-service-for-the-application"},"Global preload service for the application"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},"Add the ",(0,a.kt)("inlineCode",{parentName:"li"},"Preload")," component in ",(0,a.kt)("strong",{parentName:"li"},"MainLayout.razor")," page as shown below.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap\n.\n.\n\n... MainLayout.razor code goes here ...\n\n.\n.\n\n')),(0,a.kt)("ol",{start:2},(0,a.kt)("li",{parentName:"ol"},"Inject ",(0,a.kt)("inlineCode",{parentName:"li"},"PreloadService"),", then call the ",(0,a.kt)("inlineCode",{parentName:"li"},"Show()")," and ",(0,a.kt)("inlineCode",{parentName:"li"},"Hide()")," methods before and after the Service/API call, respectively, as shown below.")),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n\n [Inject] protected PreloadService PreloadService { get; set; }\n\n private void GetEmployees()\n {\n try\n {\n PreloadService.Show();\n\n // call the service/api to get the employees\n }\n catch\n {\n // handle exception\n }\n finally\n {\n PreloadService.Hide();\n }\n }\n}\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/preload#global-preload-service-for-the-application"},"See Preload demo here.")),(0,a.kt)("h2",{id:"change-loading-text"},"Change loading text"),(0,a.kt)("img",{src:"https://i.imgur.com/nzNRyp7.png",alt:"Blazor Bootstrap: Blazor Preload Component - Change loading text"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNUmbers","{}":!0,showLineNUmbers:!0},'\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n [Inject] protected PreloadService PreloadService { get; set; }\n\n private async Task ShowLoadingDataAsync()\n {\n PreloadService.Show(SpinnerColor.Light, "Loading data...");\n await Task.Delay(3000); // call the service/api\n PreloadService.Hide();\n }\n\n private async Task ShowSavingDataAsync()\n {\n PreloadService.Show(SpinnerColor.Light, "Saving data...");\n await Task.Delay(3000); // call the service/api\n PreloadService.Hide();\n }\n}\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/preload#change-loading-text"},"See Preload demo here.")),(0,a.kt)("h2",{id:"change-spinner-color"},"Change spinner color"),(0,a.kt)("p",null,"Change the default spinner color by passing the ",(0,a.kt)("inlineCode",{parentName:"p"},"SpinnerColor")," enum to the ",(0,a.kt)("inlineCode",{parentName:"p"},"Show(...)")," method. In the below example, we are using a ",(0,a.kt)("a",{parentName:"p",href:"/components/preload#global-preload-service-for-the-application"},"global preload service"),", as shown in the above section."),(0,a.kt)("img",{src:"https://i.imgur.com/5PVt5bX.png",alt:"Blazor Bootstrap: Blazor Preload Component - Change spinner color"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n\n\n\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"@code {\n [Inject] protected PreloadService PreloadService { get; set; }\n\n private async Task ShowSpinnerAsync(SpinnerColor spinnerColor)\n {\n PreloadService.Show(spinnerColor);\n\n await Task.Delay(3000); // call the service/api\n\n PreloadService.Hide();\n }\n}\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/preload#change-spinner-color"},"See Preload demo here.")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2df031cd.2946a640.js b/assets/js/2df031cd.2946a640.js deleted file mode 100644 index e41c30708..000000000 --- a/assets/js/2df031cd.2946a640.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[6918],{3905:(t,a,e)=>{e.d(a,{Zo:()=>p,kt:()=>k});var n=e(67294);function r(t,a,e){return a in t?Object.defineProperty(t,a,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[a]=e,t}function i(t,a){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(t,a).enumerable}))),e.push.apply(e,n)}return e}function l(t){for(var a=1;a=0||(r[e]=t[e]);return r}(t,a);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(r[e]=t[e])}return r}var s=n.createContext({}),d=function(t){var a=n.useContext(s),e=a;return t&&(e="function"==typeof t?t(a):l(l({},a),t)),e},p=function(t){var a=d(t.components);return n.createElement(s.Provider,{value:a},t.children)},m="mdxType",h={inlineCode:"code",wrapper:function(t){var a=t.children;return n.createElement(n.Fragment,{},a)}},c=n.forwardRef((function(t,a){var e=t.components,r=t.mdxType,i=t.originalType,s=t.parentName,p=o(t,["components","mdxType","originalType","parentName"]),m=d(e),c=r,k=m["".concat(s,".").concat(c)]||m[c]||h[c]||i;return e?n.createElement(k,l(l({ref:a},p),{},{components:e})):n.createElement(k,l({ref:a},p))}));function k(t,a){var e=arguments,r=a&&a.mdxType;if("string"==typeof t||r){var i=e.length,l=new Array(i);l[0]=c;var o={};for(var s in a)hasOwnProperty.call(a,s)&&(o[s]=a[s]);o.originalType=t,o[m]="string"==typeof t?t:r,l[1]=o;for(var d=2;d{e.d(a,{ZP:()=>m});var n=e(87462),r=e(67294),i=e(3905),l=e(72389);function o(t){let{children:a,fallback:e}=t;return(0,l.Z)()?r.createElement(r.Fragment,null,a?.()):e??null}e(73935);function s(){let t=document.getElementById("divCarbonAd");if(t){let a=document.getElementById("_carbonads_js");a&&a.remove(),a=document.createElement("script"),a.async=!0,a.id="_carbonads_js",a.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",a.type="text/javascript",a.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(a)}return null}const d={toc:[]},p="wrapper";function m(t){let{components:a,...e}=t;return(0,i.kt)(p,(0,n.Z)({},d,e,{components:a,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(s,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},17486:(t,a,e)=>{e.r(a),e.d(a,{assets:()=>d,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>s,toc:()=>p});var n=e(87462),r=(e(67294),e(3905)),i=e(58034);const l={title:"Blazor Pie Chart Components",description:"A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.",image:"https://i.imgur.com/dDpIuzk.png",sidebar_label:"Pie Chart",sidebar_position:4},o="Blazor Pie Chart",s={unversionedId:"data-visualization/pie-chart",id:"data-visualization/pie-chart",title:"Blazor Pie Chart Components",description:"A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.",source:"@site/docs/06-data-visualization/pie-chart.mdx",sourceDirName:"06-data-visualization",slug:"/data-visualization/pie-chart",permalink:"/data-visualization/pie-chart",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/06-data-visualization/pie-chart.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Blazor Pie Chart Components",description:"A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.",image:"https://i.imgur.com/dDpIuzk.png",sidebar_label:"Pie Chart",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Line Chart",permalink:"/data-visualization/line-chart"},next:{title:"Modal Service",permalink:"/services/modal"}},d={},p=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"ChartData Members",id:"chartdata-members",level:2},{value:"PieChartDataset Members",id:"piechartdataset-members",level:2},{value:"PieChartDatasetDataLabels Members",id:"piechartdatasetdatalabels-members",level:2},{value:"PieChartOptions Members",id:"piechartoptions-members",level:2},{value:"Examples",id:"examples",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"How it works",id:"how-it-works",level:3},{value:"Data labels",id:"data-labels",level:3}],m={toc:p},h="wrapper";function c(t){let{components:a,...e}=t;return(0,r.kt)(h,(0,n.Z)({},m,e,{components:a,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-pie-chart"},"Blazor Pie Chart"),(0,r.kt)("p",null,"A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."),(0,r.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("img",{src:"https://i.imgur.com/dDpIuzk.png",alt:"Blazor Chart Component - Blazor Pie Chart"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart height."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets chart width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Return type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDataAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds data to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDatasetAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds dataset to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"InitializeAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Initialize Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"UpdateAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Update Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"chartdata-members"},"ChartData Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Labels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Labels."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datasets"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Datasets."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"piechartdataset-members"},"PieChartDataset Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"PieChartDataset")," implements ",(0,r.kt)("strong",{parentName:"p"},"IChartDataset"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Clip"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}"),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the Data."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datalabels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"PieChartDatasetDataLabels")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the data labels"),(0,r.kt)("td",{parentName:"tr",align:"left"})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Hidden"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the chart type."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"piechartdatasetdatalabels-members"},"PieChartDatasetDataLabels Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Anchor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"center")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the anchor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"double?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"2")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the border width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")))),(0,r.kt)("h2",{id:"piechartoptions-members"},"PieChartOptions Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"PieChartOptions")," implements ",(0,r.kt)("strong",{parentName:"p"},"ChartOptions"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Locale"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Plugins"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"PieChartPlugins")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Plugins."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Responsive."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"prerequisites"},"Prerequisites"),(0,r.kt)("p",null,"Refer to the ",(0,r.kt)("a",{parentName:"p",href:"/getting-started/blazor-webassembly"},"getting started guide")," for setting up charts."),(0,r.kt)("h3",{id:"how-it-works"},"How it works"),(0,r.kt)("p",null,"In the following example, a categorical 12-color palette is used."),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"For data visualization, you can use the predefined palettes ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalTwelveColors")," for a 12-color palette and ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalSixColors")," for a 6-color palette.\nThese palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.")),(0,r.kt)("img",{src:"https://i.imgur.com/ieBupT2.png",alt:"Blazor Bootstrap: Pie Chart Component - How it works"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private PieChart pieChart = default!;\n private PieChartOptions pieChartOptions = default!;\n private ChartData chartData = default!;\n private string[]? backgroundColors;\n\n private int datasetsCount = 0;\n private int dataLabelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n backgroundColors = ColorBuilder.CategoricalTwelveColors;\n chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };\n\n pieChartOptions = new();\n pieChartOptions.Responsive = true;\n pieChartOptions.Plugins.Title.Text = "2022 - Sales";\n pieChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await pieChart.InitializeAsync(chartData, pieChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is PieChartDataset pieChartDataset\n && pieChartDataset is not null\n && pieChartDataset.Data is not null)\n {\n var count = pieChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(0, 100));\n }\n\n pieChartDataset.Data = newData;\n newDatasets.Add(pieChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await pieChart.UpdateAsync(chartData, pieChartOptions);\n }\n\n private async Task AddDatasetAsync()\n {\n if (chartData is null || chartData.Datasets is null) return;\n\n var chartDataset = GetRandomPieChartDataset();\n chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (dataLabelsCount >= 12)\n return;\n\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is PieChartDataset pieChartDataset)\n data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));\n }\n\n chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n\n dataLabelsCount += 1;\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n datasets.Add(GetRandomPieChartDataset());\n }\n\n return datasets;\n }\n\n private PieChartDataset GetRandomPieChartDataset()\n {\n datasetsCount += 1;\n return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n data.Add(random.Next(0, 100));\n }\n\n return data;\n }\n\n private List GetRandomBackgroundColors()\n {\n var colors = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n colors.Add(backgroundColors![index]);\n }\n\n return colors;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n dataLabelsCount += 1;\n }\n\n return labels;\n }\n\n private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";\n\n private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/pie-chart#how-it-works"},"See the demo here.")),(0,r.kt)("h3",{id:"data-labels"},"Data labels"),(0,r.kt)("img",{src:"https://i.imgur.com/dDpIuzk.png",alt:"Blazor Bootstrap: Pie Chart Component - Data labels"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{28,94,96,98} showLineNumbers","{28,94,96,98}":!0,showLineNumbers:!0},'@code {\n private PieChart pieChart = default!;\n private PieChartOptions pieChartOptions = default!;\n private ChartData chartData = default!;\n private string[]? backgroundColors;\n\n private int datasetsCount = 0;\n private int dataLabelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n backgroundColors = ColorBuilder.CategoricalTwelveColors;\n chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) };\n\n pieChartOptions = new();\n pieChartOptions.Responsive = true;\n pieChartOptions.Plugins.Title.Text = "2022 - Sales";\n pieChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n // pass the plugin name to enable the data labels\n await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { "ChartDataLabels" });\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is PieChartDataset pieChartDataset\n && pieChartDataset is not null\n && pieChartDataset.Data is not null)\n {\n var count = pieChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(0, 100));\n }\n\n pieChartDataset.Data = newData;\n newDatasets.Add(pieChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await pieChart.UpdateAsync(chartData, pieChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (dataLabelsCount >= 12)\n return;\n\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is PieChartDataset pieChartDataset)\n data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));\n }\n\n chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n\n dataLabelsCount += 1;\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n var dataset = GetRandomPieChartDataset();\n\n if (index == 0)\n dataset.Datalabels.Anchor = "end";\n else if (index == numberOfDatasets - 1)\n dataset.Datalabels.Anchor = "end";\n else\n dataset.Datalabels.Anchor = "center";\n\n datasets.Add(dataset);\n }\n\n return datasets;\n }\n\n private PieChartDataset GetRandomPieChartDataset()\n {\n datasetsCount += 1;\n return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n data.Add(random.Next(0, 100));\n }\n\n return data;\n }\n\n private List GetRandomBackgroundColors()\n {\n var colors = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n colors.Add(backgroundColors![index]);\n }\n\n return colors;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n dataLabelsCount += 1;\n }\n\n return labels;\n }\n\n private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";\n\n private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/pie-chart#data-labels"},"See the demo here.")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2df031cd.874924b0.js b/assets/js/2df031cd.874924b0.js new file mode 100644 index 000000000..82f9c904f --- /dev/null +++ b/assets/js/2df031cd.874924b0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[6918],{3905:(t,e,a)=>{a.d(e,{Zo:()=>p,kt:()=>k});var n=a(67294);function r(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function i(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,n)}return a}function l(t){for(var e=1;e=0||(r[a]=t[a]);return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(r[a]=t[a])}return r}var s=n.createContext({}),d=function(t){var e=n.useContext(s),a=e;return t&&(a="function"==typeof t?t(e):l(l({},e),t)),a},p=function(t){var e=d(t.components);return n.createElement(s.Provider,{value:e},t.children)},m="mdxType",h={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},c=n.forwardRef((function(t,e){var a=t.components,r=t.mdxType,i=t.originalType,s=t.parentName,p=o(t,["components","mdxType","originalType","parentName"]),m=d(a),c=r,k=m["".concat(s,".").concat(c)]||m[c]||h[c]||i;return a?n.createElement(k,l(l({ref:e},p),{},{components:a})):n.createElement(k,l({ref:e},p))}));function k(t,e){var a=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var i=a.length,l=new Array(i);l[0]=c;var o={};for(var s in e)hasOwnProperty.call(e,s)&&(o[s]=e[s]);o.originalType=t,o[m]="string"==typeof t?t:r,l[1]=o;for(var d=2;d{a.d(e,{ZP:()=>m});var n=a(87462),r=a(67294),i=a(3905),l=a(72389);function o(t){let{children:e,fallback:a}=t;return(0,l.Z)()?r.createElement(r.Fragment,null,e?.()):a??null}a(73935);function s(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),e&&t.appendChild(e)}),5e3),null}const d={toc:[]},p="wrapper";function m(t){let{components:e,...a}=t;return(0,i.kt)(p,(0,n.Z)({},d,a,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(s,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},17486:(t,e,a)=>{a.r(e),a.d(e,{assets:()=>d,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>s,toc:()=>p});var n=a(87462),r=(a(67294),a(3905)),i=a(58034);const l={title:"Blazor Pie Chart Components",description:"A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.",image:"https://i.imgur.com/dDpIuzk.png",sidebar_label:"Pie Chart",sidebar_position:4},o="Blazor Pie Chart",s={unversionedId:"data-visualization/pie-chart",id:"data-visualization/pie-chart",title:"Blazor Pie Chart Components",description:"A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.",source:"@site/docs/06-data-visualization/pie-chart.mdx",sourceDirName:"06-data-visualization",slug:"/data-visualization/pie-chart",permalink:"/data-visualization/pie-chart",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/06-data-visualization/pie-chart.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Blazor Pie Chart Components",description:"A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.",image:"https://i.imgur.com/dDpIuzk.png",sidebar_label:"Pie Chart",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Line Chart",permalink:"/data-visualization/line-chart"},next:{title:"Modal Service",permalink:"/services/modal"}},d={},p=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"ChartData Members",id:"chartdata-members",level:2},{value:"PieChartDataset Members",id:"piechartdataset-members",level:2},{value:"PieChartDatasetDataLabels Members",id:"piechartdatasetdatalabels-members",level:2},{value:"PieChartOptions Members",id:"piechartoptions-members",level:2},{value:"Examples",id:"examples",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"How it works",id:"how-it-works",level:3},{value:"Data labels",id:"data-labels",level:3}],m={toc:p},h="wrapper";function c(t){let{components:e,...a}=t;return(0,r.kt)(h,(0,n.Z)({},m,a,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-pie-chart"},"Blazor Pie Chart"),(0,r.kt)("p",null,"A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."),(0,r.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("img",{src:"https://i.imgur.com/dDpIuzk.png",alt:"Blazor Chart Component - Blazor Pie Chart"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart height."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets chart width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Return type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDataAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds data to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDatasetAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds dataset to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"InitializeAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Initialize Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"UpdateAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Update Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"chartdata-members"},"ChartData Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Labels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Labels."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datasets"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Datasets."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"piechartdataset-members"},"PieChartDataset Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"PieChartDataset")," implements ",(0,r.kt)("strong",{parentName:"p"},"IChartDataset"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Clip"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}"),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the Data."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datalabels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"PieChartDatasetDataLabels")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the data labels"),(0,r.kt)("td",{parentName:"tr",align:"left"})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Hidden"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the chart type."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"piechartdatasetdatalabels-members"},"PieChartDatasetDataLabels Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Anchor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"center")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the anchor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"double?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"2")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the border width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")))),(0,r.kt)("h2",{id:"piechartoptions-members"},"PieChartOptions Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"PieChartOptions")," implements ",(0,r.kt)("strong",{parentName:"p"},"ChartOptions"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Locale"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Plugins"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"PieChartPlugins")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Plugins."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Responsive."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"prerequisites"},"Prerequisites"),(0,r.kt)("p",null,"Refer to the ",(0,r.kt)("a",{parentName:"p",href:"/getting-started/blazor-webassembly"},"getting started guide")," for setting up charts."),(0,r.kt)("h3",{id:"how-it-works"},"How it works"),(0,r.kt)("p",null,"In the following example, a categorical 12-color palette is used."),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"For data visualization, you can use the predefined palettes ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalTwelveColors")," for a 12-color palette and ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalSixColors")," for a 6-color palette.\nThese palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.")),(0,r.kt)("img",{src:"https://i.imgur.com/ieBupT2.png",alt:"Blazor Bootstrap: Pie Chart Component - How it works"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private PieChart pieChart = default!;\n private PieChartOptions pieChartOptions = default!;\n private ChartData chartData = default!;\n private string[]? backgroundColors;\n\n private int datasetsCount = 0;\n private int dataLabelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n backgroundColors = ColorBuilder.CategoricalTwelveColors;\n chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };\n\n pieChartOptions = new();\n pieChartOptions.Responsive = true;\n pieChartOptions.Plugins.Title.Text = "2022 - Sales";\n pieChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await pieChart.InitializeAsync(chartData, pieChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is PieChartDataset pieChartDataset\n && pieChartDataset is not null\n && pieChartDataset.Data is not null)\n {\n var count = pieChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(0, 100));\n }\n\n pieChartDataset.Data = newData;\n newDatasets.Add(pieChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await pieChart.UpdateAsync(chartData, pieChartOptions);\n }\n\n private async Task AddDatasetAsync()\n {\n if (chartData is null || chartData.Datasets is null) return;\n\n var chartDataset = GetRandomPieChartDataset();\n chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (dataLabelsCount >= 12)\n return;\n\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is PieChartDataset pieChartDataset)\n data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));\n }\n\n chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n\n dataLabelsCount += 1;\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n datasets.Add(GetRandomPieChartDataset());\n }\n\n return datasets;\n }\n\n private PieChartDataset GetRandomPieChartDataset()\n {\n datasetsCount += 1;\n return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n data.Add(random.Next(0, 100));\n }\n\n return data;\n }\n\n private List GetRandomBackgroundColors()\n {\n var colors = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n colors.Add(backgroundColors![index]);\n }\n\n return colors;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n dataLabelsCount += 1;\n }\n\n return labels;\n }\n\n private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";\n\n private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/pie-chart#how-it-works"},"See the demo here.")),(0,r.kt)("h3",{id:"data-labels"},"Data labels"),(0,r.kt)("img",{src:"https://i.imgur.com/dDpIuzk.png",alt:"Blazor Bootstrap: Pie Chart Component - Data labels"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{28,94,96,98} showLineNumbers","{28,94,96,98}":!0,showLineNumbers:!0},'@code {\n private PieChart pieChart = default!;\n private PieChartOptions pieChartOptions = default!;\n private ChartData chartData = default!;\n private string[]? backgroundColors;\n\n private int datasetsCount = 0;\n private int dataLabelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n backgroundColors = ColorBuilder.CategoricalTwelveColors;\n chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) };\n\n pieChartOptions = new();\n pieChartOptions.Responsive = true;\n pieChartOptions.Plugins.Title.Text = "2022 - Sales";\n pieChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n // pass the plugin name to enable the data labels\n await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { "ChartDataLabels" });\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is PieChartDataset pieChartDataset\n && pieChartDataset is not null\n && pieChartDataset.Data is not null)\n {\n var count = pieChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(0, 100));\n }\n\n pieChartDataset.Data = newData;\n newDatasets.Add(pieChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await pieChart.UpdateAsync(chartData, pieChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (dataLabelsCount >= 12)\n return;\n\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is PieChartDataset pieChartDataset)\n data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));\n }\n\n chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n\n dataLabelsCount += 1;\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n var dataset = GetRandomPieChartDataset();\n\n if (index == 0)\n dataset.Datalabels.Anchor = "end";\n else if (index == numberOfDatasets - 1)\n dataset.Datalabels.Anchor = "end";\n else\n dataset.Datalabels.Anchor = "center";\n\n datasets.Add(dataset);\n }\n\n return datasets;\n }\n\n private PieChartDataset GetRandomPieChartDataset()\n {\n datasetsCount += 1;\n return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n data.Add(random.Next(0, 100));\n }\n\n return data;\n }\n\n private List GetRandomBackgroundColors()\n {\n var colors = new List();\n for (var index = 0; index < dataLabelsCount; index++)\n {\n colors.Add(backgroundColors![index]);\n }\n\n return colors;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n dataLabelsCount += 1;\n }\n\n return labels;\n }\n\n private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";\n\n private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/pie-chart#data-labels"},"See the demo here.")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/3b64e0ac.5de9b0ad.js b/assets/js/3b64e0ac.5de9b0ad.js new file mode 100644 index 000000000..54479f703 --- /dev/null +++ b/assets/js/3b64e0ac.5de9b0ad.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[1749],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>h});var n=r(67294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},m=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},u=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,l=e.originalType,s=e.parentName,m=i(e,["components","mdxType","originalType","parentName"]),p=c(r),u=a,h=p["".concat(s,".").concat(u)]||p[u]||d[u]||l;return r?n.createElement(h,o(o({ref:t},m),{},{components:r})):n.createElement(h,o({ref:t},m))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=r.length,o=new Array(l);o[0]=u;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[p]="string"==typeof e?e:a,o[1]=i;for(var c=2;c{r.d(t,{ZP:()=>p});var n=r(87462),a=r(67294),l=r(3905),o=r(72389);function i(e){let{children:t,fallback:r}=e;return(0,o.Z)()?a.createElement(a.Fragment,null,t?.()):r??null}r(73935);function s(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const c={toc:[]},m="wrapper";function p(e){let{components:t,...r}=e;return(0,l.kt)(m,(0,n.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},8944:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>m});var n=r(87462),a=(r(67294),r(3905)),l=r(58034);const o={title:"Blazor Alert Component",description:"Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.",image:"https://i.imgur.com/wjCs7bZ.jpg",sidebar_label:"Alerts",sidebar_position:2},i="Blazor Alerts",s={unversionedId:"components/alerts",id:"components/alerts",title:"Blazor Alert Component",description:"Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.",source:"@site/docs/05-components/alerts.mdx",sourceDirName:"05-components",slug:"/components/alerts",permalink:"/components/alerts",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/alerts.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Blazor Alert Component",description:"Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.",image:"https://i.imgur.com/wjCs7bZ.jpg",sidebar_label:"Alerts",sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Accordion",permalink:"/components/accordion"},next:{title:"Badge",permalink:"/components/badge"}},c={},m=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Callback Events",id:"callback-events",level:2},{value:"Examples",id:"examples",level:2},{value:"Alerts",id:"alerts",level:3},{value:"Additional Content",id:"additional-content",level:3},{value:"Icons",id:"icons",level:3},{value:"Dismissing",id:"dismissing",level:3}],p={toc:m},d="wrapper";function u(e){let{components:t,...r}=e;return(0,a.kt)(d,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-alerts"},"Blazor Alerts"),(0,a.kt)("p",null,"Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."),(0,a.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("h2",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:null},"Specifies the content to be rendered inside the alert."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null})),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Color"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"AlertColor")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the alert color."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"AlertColor.None"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Dismissable"),(0,a.kt)("td",{parentName:"tr",align:null},"bool"),(0,a.kt)("td",{parentName:"tr",align:null},"Enables the alert to be closed by placing the padding for close button."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"false")))),(0,a.kt)("h2",{id:"methods"},"Methods"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"CloseAsync"),(0,a.kt)("td",{parentName:"tr",align:null},"Closes an alert by removing it from the DOM.")))),(0,a.kt)("h2",{id:"callback-events"},"Callback Events"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"OnClose"),(0,a.kt)("td",{parentName:"tr",align:null},"Fires immediately when the ",(0,a.kt)("inlineCode",{parentName:"td"},"close")," instance method is called.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"OnClosed"),(0,a.kt)("td",{parentName:"tr",align:null},"Fired when the alert has been closed and CSS transitions have completed.")))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"alerts"},"Alerts"),(0,a.kt)("p",null,"Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors."),(0,a.kt)("img",{src:"https://i.imgur.com/FGgEMp6.jpg",alt:"Blazor Bootstrap: Alert Component"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n A simple primary alert - check it out! \n A simple secondary alert - check it out! \n A simple success alert - check it out! \n A simple danger alert - check it out! \n A simple warning alert - check it out! \n A simple info alert - check it out! \n A simple light alert - check it out! \n A simple dark alert - check it out! \n
\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/alerts#examples"},"See alerts demo here.")),(0,a.kt)("h3",{id:"additional-content"},"Additional Content"),(0,a.kt)("p",null,"Alerts can also contain additional HTML elements like headings, paragraphs and dividers."),(0,a.kt)("img",{src:"https://i.imgur.com/OaQ7Ydj.jpg",alt:"Blazor Bootstrap: Alert Component - Alerts with additional content"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n \n

Well done!

\n

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

\n
\n

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

\n \n
\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/alerts#additional-content"},"See alerts with additional content demo.")),(0,a.kt)("h3",{id:"icons"},"Icons"),(0,a.kt)("p",null,"Similarly, you can use Bootstrap Icons to create alerts with icons."),(0,a.kt)("img",{src:"https://i.imgur.com/wjCs7bZ.jpg",alt:"Blazor Bootstrap: Alert Component - Alerts with an icon"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n An example alert with an icon \n A simple success alert with an icon \n A simple danger alert with an icon \n A simple warning alert with an icon \n
\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/alerts#icons"},"See alerts with an icon demo.")),(0,a.kt)("h3",{id:"dismissing"},"Dismissing"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},"Using the ",(0,a.kt)("inlineCode",{parentName:"li"},'Dismissable="true"'),", it's possible to dismiss any alert inline.")),(0,a.kt)("p",null,"It's possible to dismiss any alert inline. Here's how:"),(0,a.kt)("img",{src:"https://i.imgur.com/D9tJpSl.jpg",alt:"Blazor Bootstrap: Alert Component - Dismissing"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n Holy guacamole! You should check in on some of those fields below. \n
\n')),(0,a.kt)("ol",{start:2},(0,a.kt)("li",{parentName:"ol"},"Manually we can close an alert with button click.")),(0,a.kt)("img",{src:"https://i.imgur.com/dq48mYF.jpg",alt:"Blazor Bootstrap: Alert Component - Dismissing manually"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n \n Holy guacamole! You should check in on some of those fields below. \n \n
\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{4} showLineNumbers","{4}":!0,showLineNumbers:!0},"@code {\n Alert warningAlert;\n\n private async Task CloseAlert() => await warningAlert?.CloseAsync();\n}\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/alerts#dismissing"},"See dismissable alerts demo.")),(0,a.kt)("admonition",{title:"NOTE",type:"caution"},(0,a.kt)("p",{parentName:"admonition"},"When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend subscribing to the ",(0,a.kt)("inlineCode",{parentName:"p"},"OnClosed")," callback event and programmatically sets focus to the most appropriate location on the page.")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/3b64e0ac.6b904d38.js b/assets/js/3b64e0ac.6b904d38.js deleted file mode 100644 index 13a4c647c..000000000 --- a/assets/js/3b64e0ac.6b904d38.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[1749],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>h});var n=r(67294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),c=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},m=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},u=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,l=e.originalType,s=e.parentName,m=i(e,["components","mdxType","originalType","parentName"]),p=c(r),u=a,h=p["".concat(s,".").concat(u)]||p[u]||d[u]||l;return r?n.createElement(h,o(o({ref:t},m),{},{components:r})):n.createElement(h,o({ref:t},m))}));function h(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=r.length,o=new Array(l);o[0]=u;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[p]="string"==typeof e?e:a,o[1]=i;for(var c=2;c{r.d(t,{ZP:()=>p});var n=r(87462),a=r(67294),l=r(3905),o=r(72389);function i(e){let{children:t,fallback:r}=e;return(0,o.Z)()?a.createElement(a.Fragment,null,t?.()):r??null}r(73935);function s(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const c={toc:[]},m="wrapper";function p(e){let{components:t,...r}=e;return(0,l.kt)(m,(0,n.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},8944:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>m});var n=r(87462),a=(r(67294),r(3905)),l=r(58034);const o={title:"Blazor Alert Component",description:"Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.",image:"https://i.imgur.com/wjCs7bZ.jpg",sidebar_label:"Alerts",sidebar_position:2},i="Blazor Alerts",s={unversionedId:"components/alerts",id:"components/alerts",title:"Blazor Alert Component",description:"Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.",source:"@site/docs/05-components/alerts.mdx",sourceDirName:"05-components",slug:"/components/alerts",permalink:"/components/alerts",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/alerts.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Blazor Alert Component",description:"Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.",image:"https://i.imgur.com/wjCs7bZ.jpg",sidebar_label:"Alerts",sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"Accordion",permalink:"/components/accordion"},next:{title:"Badge",permalink:"/components/badge"}},c={},m=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Callback Events",id:"callback-events",level:2},{value:"Examples",id:"examples",level:2},{value:"Alerts",id:"alerts",level:3},{value:"Additional Content",id:"additional-content",level:3},{value:"Icons",id:"icons",level:3},{value:"Dismissing",id:"dismissing",level:3}],p={toc:m},d="wrapper";function u(e){let{components:t,...r}=e;return(0,a.kt)(d,(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-alerts"},"Blazor Alerts"),(0,a.kt)("p",null,"Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."),(0,a.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("h2",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:null},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:null},"Specifies the content to be rendered inside the alert."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null})),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Color"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"AlertColor")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the alert color."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"AlertColor.None"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Dismissable"),(0,a.kt)("td",{parentName:"tr",align:null},"bool"),(0,a.kt)("td",{parentName:"tr",align:null},"Enables the alert to be closed by placing the padding for close button."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"false")))),(0,a.kt)("h2",{id:"methods"},"Methods"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"CloseAsync"),(0,a.kt)("td",{parentName:"tr",align:null},"Closes an alert by removing it from the DOM.")))),(0,a.kt)("h2",{id:"callback-events"},"Callback Events"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"OnClose"),(0,a.kt)("td",{parentName:"tr",align:null},"Fires immediately when the ",(0,a.kt)("inlineCode",{parentName:"td"},"close")," instance method is called.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"OnClosed"),(0,a.kt)("td",{parentName:"tr",align:null},"Fired when the alert has been closed and CSS transitions have completed.")))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"alerts"},"Alerts"),(0,a.kt)("p",null,"Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors."),(0,a.kt)("img",{src:"https://i.imgur.com/FGgEMp6.jpg",alt:"Blazor Bootstrap: Alert Component"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n A simple primary alert - check it out! \n A simple secondary alert - check it out! \n A simple success alert - check it out! \n A simple danger alert - check it out! \n A simple warning alert - check it out! \n A simple info alert - check it out! \n A simple light alert - check it out! \n A simple dark alert - check it out! \n
\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/alerts#examples"},"See alerts demo here.")),(0,a.kt)("h3",{id:"additional-content"},"Additional Content"),(0,a.kt)("p",null,"Alerts can also contain additional HTML elements like headings, paragraphs and dividers."),(0,a.kt)("img",{src:"https://i.imgur.com/OaQ7Ydj.jpg",alt:"Blazor Bootstrap: Alert Component - Alerts with additional content"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n \n

Well done!

\n

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

\n
\n

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

\n \n
\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/alerts#additional-content"},"See alerts with additional content demo.")),(0,a.kt)("h3",{id:"icons"},"Icons"),(0,a.kt)("p",null,"Similarly, you can use Bootstrap Icons to create alerts with icons."),(0,a.kt)("img",{src:"https://i.imgur.com/wjCs7bZ.jpg",alt:"Blazor Bootstrap: Alert Component - Alerts with an icon"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n An example alert with an icon \n A simple success alert with an icon \n A simple danger alert with an icon \n A simple warning alert with an icon \n
\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/alerts#icons"},"See alerts with an icon demo.")),(0,a.kt)("h3",{id:"dismissing"},"Dismissing"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},"Using the ",(0,a.kt)("inlineCode",{parentName:"li"},'Dismissable="true"'),", it's possible to dismiss any alert inline.")),(0,a.kt)("p",null,"It's possible to dismiss any alert inline. Here's how:"),(0,a.kt)("img",{src:"https://i.imgur.com/D9tJpSl.jpg",alt:"Blazor Bootstrap: Alert Component - Dismissing"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n Holy guacamole! You should check in on some of those fields below. \n
\n')),(0,a.kt)("ol",{start:2},(0,a.kt)("li",{parentName:"ol"},"Manually we can close an alert with button click.")),(0,a.kt)("img",{src:"https://i.imgur.com/dq48mYF.jpg",alt:"Blazor Bootstrap: Alert Component - Dismissing manually"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'
\n \n Holy guacamole! You should check in on some of those fields below. \n \n
\n')),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{4} showLineNumbers","{4}":!0,showLineNumbers:!0},"@code {\n Alert warningAlert;\n\n private async Task CloseAlert() => await warningAlert?.CloseAsync();\n}\n")),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/alerts#dismissing"},"See dismissable alerts demo.")),(0,a.kt)("admonition",{title:"NOTE",type:"caution"},(0,a.kt)("p",{parentName:"admonition"},"When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend subscribing to the ",(0,a.kt)("inlineCode",{parentName:"p"},"OnClosed")," callback event and programmatically sets focus to the most appropriate location on the page.")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/3d9e9914.d6c61dc0.js b/assets/js/3d9e9914.d6c61dc0.js deleted file mode 100644 index 459795fec..000000000 --- a/assets/js/3d9e9914.d6c61dc0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[6333],{3905:(t,e,r)=>{r.d(e,{Zo:()=>p,kt:()=>d});var a=r(67294);function o(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function n(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,a)}return r}function l(t){for(var e=1;e=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}var c=a.createContext({}),s=function(t){var e=a.useContext(c),r=e;return t&&(r="function"==typeof t?t(e):l(l({},e),t)),r},p=function(t){var e=s(t.components);return a.createElement(c.Provider,{value:e},t.children)},h="mdxType",m={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},u=a.forwardRef((function(t,e){var r=t.components,o=t.mdxType,n=t.originalType,c=t.parentName,p=i(t,["components","mdxType","originalType","parentName"]),h=s(r),u=o,d=h["".concat(c,".").concat(u)]||h[u]||m[u]||n;return r?a.createElement(d,l(l({ref:e},p),{},{components:r})):a.createElement(d,l({ref:e},p))}));function d(t,e){var r=arguments,o=e&&e.mdxType;if("string"==typeof t||o){var n=r.length,l=new Array(n);l[0]=u;var i={};for(var c in e)hasOwnProperty.call(e,c)&&(i[c]=e[c]);i.originalType=t,i[h]="string"==typeof t?t:o,l[1]=i;for(var s=2;s{r.d(e,{ZP:()=>h});var a=r(87462),o=r(67294),n=r(3905),l=r(72389);function i(t){let{children:e,fallback:r}=t;return(0,l.Z)()?o.createElement(o.Fragment,null,e?.()):r??null}r(73935);function c(){let t=document.getElementById("divCarbonAd");if(t){let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(e)}return null}const s={toc:[]},p="wrapper";function h(t){let{components:e,...r}=t;return(0,n.kt)(p,(0,a.Z)({},s,r,{components:e,mdxType:"MDXLayout"}),(0,n.kt)("div",{id:"divCarbonAd"}),(0,n.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,n.kt)(c,{mdxType:"RenderAd"}))))}h.isMDXComponent=!0},93773:(t,e,r)=>{r.r(e),r.d(e,{assets:()=>s,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>c,toc:()=>p});var a=r(87462),o=(r(67294),r(3905)),n=r(58034);const l={title:"Blazor Chart Components",description:"Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.",image:"https://i.imgur.com/ATtFiUZ.png",sidebar_label:"Charts",sidebar_position:8},i="Blazor Charts",c={unversionedId:"components/charts",id:"components/charts",title:"Blazor Chart Components",description:"Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.",source:"@site/docs/05-components/charts.mdx",sourceDirName:"05-components",slug:"/components/charts",permalink:"/components/charts",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/charts.mdx",tags:[],version:"current",sidebarPosition:8,frontMatter:{title:"Blazor Chart Components",description:"Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.",image:"https://i.imgur.com/ATtFiUZ.png",sidebar_label:"Charts",sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"Card",permalink:"/components/card"},next:{title:"Collapse",permalink:"/components/collapse"}},s={},p=[{value:"Example",id:"example",level:2},{value:"Chart Types",id:"chart-types",level:2},{value:"Bar Chart",id:"bar-chart",level:2},{value:"Doughnut Chart",id:"doughnut-chart",level:2},{value:"Line Chart",id:"line-chart",level:2},{value:"Pie Chart",id:"pie-chart",level:2}],h={toc:p},m="wrapper";function u(t){let{components:e,...r}=t;return(0,o.kt)(m,(0,a.Z)({},h,r,{components:e,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"blazor-charts"},"Blazor Charts"),(0,o.kt)("p",null,"Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."),(0,o.kt)(n.ZP,{mdxType:"CarbonAd"}),(0,o.kt)("h2",{id:"example"},"Example"),(0,o.kt)("img",{src:"https://i.imgur.com/JLV7oss.png",alt:"Blazor Chart Component - Blazor Bar Chart Example"}),(0,o.kt)("br",null),(0,o.kt)("img",{src:"https://i.imgur.com/CzdXpqr.png",alt:"Blazor Chart Component - Blazor Line Chart Example"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#bar-chart"},"See blazor chart demo here."),(0,o.kt)("h2",{id:"chart-types"},"Chart Types"),(0,o.kt)("p",null,"At this moment we are supporting four blazor chart types."),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},"Bar Chart"),(0,o.kt)("li",{parentName:"ol"},"Doughnut Chart"),(0,o.kt)("li",{parentName:"ol"},"Line Chart"),(0,o.kt)("li",{parentName:"ol"},"Pie Chart")),(0,o.kt)("admonition",{type:"info"},(0,o.kt)("p",{parentName:"admonition"},"We will add ",(0,o.kt)("strong",{parentName:"p"},"Bubble Chart"),", ",(0,o.kt)("strong",{parentName:"p"},"Polar Area Chart"),", ",(0,o.kt)("strong",{parentName:"p"},"Radar Chart"),", ",(0,o.kt)("strong",{parentName:"p"},"Scatter Chart"),", and ",(0,o.kt)("strong",{parentName:"p"},"Mixed Chart")," support in the subsequent versions.")),(0,o.kt)("h2",{id:"bar-chart"},"Bar Chart"),(0,o.kt)("img",{src:"https://i.imgur.com/IX3bajc.png",alt:"Blazor Chart Component - Blazor Bar Chart"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#bar-chart"},"See blazor bar chart demo here."),(0,o.kt)("br",null),(0,o.kt)("a",{href:"/data-visualization/bar-chart"},"See blazor bar chart full documentation here."),(0,o.kt)("h2",{id:"doughnut-chart"},"Doughnut Chart"),(0,o.kt)("img",{src:"https://i.imgur.com/xEPhAsW.png",alt:"Blazor Chart Component - Blazor Doughnut Chart"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#doughnut-chart"},"See blazor doughnut chart demo here."),(0,o.kt)("br",null),(0,o.kt)("a",{href:"/data-visualization/doughnut-chart"},"See blazor doughnut chart full documentation here."),(0,o.kt)("h2",{id:"line-chart"},"Line Chart"),(0,o.kt)("img",{src:"https://i.imgur.com/8b7jH0D.png",alt:"Blazor Chart Component - Blazor Line Chart"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#line-chart"},"See blazor line chart demo here."),(0,o.kt)("br",null),(0,o.kt)("a",{href:"/data-visualization/line-chart"},"See blazor line chart full documentation here."),(0,o.kt)("h2",{id:"pie-chart"},"Pie Chart"),(0,o.kt)("img",{src:"https://i.imgur.com/dDpIuzk.png",alt:"Blazor Chart Component - Blazor Pie Chart"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#pie-chart"},"See blazor pie chart demo here."),(0,o.kt)("br",null),(0,o.kt)("a",{href:"/data-visualization/pie-chart"},"See blazor pie chart full documentation here."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/3d9e9914.df026c21.js b/assets/js/3d9e9914.df026c21.js new file mode 100644 index 000000000..b217db236 --- /dev/null +++ b/assets/js/3d9e9914.df026c21.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[6333],{3905:(t,e,r)=>{r.d(e,{Zo:()=>p,kt:()=>d});var a=r(67294);function o(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function n(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,a)}return r}function l(t){for(var e=1;e=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}var c=a.createContext({}),s=function(t){var e=a.useContext(c),r=e;return t&&(r="function"==typeof t?t(e):l(l({},e),t)),r},p=function(t){var e=s(t.components);return a.createElement(c.Provider,{value:e},t.children)},h="mdxType",m={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},u=a.forwardRef((function(t,e){var r=t.components,o=t.mdxType,n=t.originalType,c=t.parentName,p=i(t,["components","mdxType","originalType","parentName"]),h=s(r),u=o,d=h["".concat(c,".").concat(u)]||h[u]||m[u]||n;return r?a.createElement(d,l(l({ref:e},p),{},{components:r})):a.createElement(d,l({ref:e},p))}));function d(t,e){var r=arguments,o=e&&e.mdxType;if("string"==typeof t||o){var n=r.length,l=new Array(n);l[0]=u;var i={};for(var c in e)hasOwnProperty.call(e,c)&&(i[c]=e[c]);i.originalType=t,i[h]="string"==typeof t?t:o,l[1]=i;for(var s=2;s{r.d(e,{ZP:()=>h});var a=r(87462),o=r(67294),n=r(3905),l=r(72389);function i(t){let{children:e,fallback:r}=t;return(0,l.Z)()?o.createElement(o.Fragment,null,e?.()):r??null}r(73935);function c(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),e&&t.appendChild(e)}),5e3),null}const s={toc:[]},p="wrapper";function h(t){let{components:e,...r}=t;return(0,n.kt)(p,(0,a.Z)({},s,r,{components:e,mdxType:"MDXLayout"}),(0,n.kt)("div",{id:"divCarbonAd"}),(0,n.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,n.kt)(c,{mdxType:"RenderAd"}))))}h.isMDXComponent=!0},93773:(t,e,r)=>{r.r(e),r.d(e,{assets:()=>s,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>c,toc:()=>p});var a=r(87462),o=(r(67294),r(3905)),n=r(58034);const l={title:"Blazor Chart Components",description:"Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.",image:"https://i.imgur.com/ATtFiUZ.png",sidebar_label:"Charts",sidebar_position:8},i="Blazor Charts",c={unversionedId:"components/charts",id:"components/charts",title:"Blazor Chart Components",description:"Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.",source:"@site/docs/05-components/charts.mdx",sourceDirName:"05-components",slug:"/components/charts",permalink:"/components/charts",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/charts.mdx",tags:[],version:"current",sidebarPosition:8,frontMatter:{title:"Blazor Chart Components",description:"Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.",image:"https://i.imgur.com/ATtFiUZ.png",sidebar_label:"Charts",sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"Card",permalink:"/components/card"},next:{title:"Collapse",permalink:"/components/collapse"}},s={},p=[{value:"Example",id:"example",level:2},{value:"Chart Types",id:"chart-types",level:2},{value:"Bar Chart",id:"bar-chart",level:2},{value:"Doughnut Chart",id:"doughnut-chart",level:2},{value:"Line Chart",id:"line-chart",level:2},{value:"Pie Chart",id:"pie-chart",level:2}],h={toc:p},m="wrapper";function u(t){let{components:e,...r}=t;return(0,o.kt)(m,(0,a.Z)({},h,r,{components:e,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"blazor-charts"},"Blazor Charts"),(0,o.kt)("p",null,"Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."),(0,o.kt)(n.ZP,{mdxType:"CarbonAd"}),(0,o.kt)("h2",{id:"example"},"Example"),(0,o.kt)("img",{src:"https://i.imgur.com/JLV7oss.png",alt:"Blazor Chart Component - Blazor Bar Chart Example"}),(0,o.kt)("br",null),(0,o.kt)("img",{src:"https://i.imgur.com/CzdXpqr.png",alt:"Blazor Chart Component - Blazor Line Chart Example"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#bar-chart"},"See blazor chart demo here."),(0,o.kt)("h2",{id:"chart-types"},"Chart Types"),(0,o.kt)("p",null,"At this moment we are supporting four blazor chart types."),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},"Bar Chart"),(0,o.kt)("li",{parentName:"ol"},"Doughnut Chart"),(0,o.kt)("li",{parentName:"ol"},"Line Chart"),(0,o.kt)("li",{parentName:"ol"},"Pie Chart")),(0,o.kt)("admonition",{type:"info"},(0,o.kt)("p",{parentName:"admonition"},"We will add ",(0,o.kt)("strong",{parentName:"p"},"Bubble Chart"),", ",(0,o.kt)("strong",{parentName:"p"},"Polar Area Chart"),", ",(0,o.kt)("strong",{parentName:"p"},"Radar Chart"),", ",(0,o.kt)("strong",{parentName:"p"},"Scatter Chart"),", and ",(0,o.kt)("strong",{parentName:"p"},"Mixed Chart")," support in the subsequent versions.")),(0,o.kt)("h2",{id:"bar-chart"},"Bar Chart"),(0,o.kt)("img",{src:"https://i.imgur.com/IX3bajc.png",alt:"Blazor Chart Component - Blazor Bar Chart"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#bar-chart"},"See blazor bar chart demo here."),(0,o.kt)("br",null),(0,o.kt)("a",{href:"/data-visualization/bar-chart"},"See blazor bar chart full documentation here."),(0,o.kt)("h2",{id:"doughnut-chart"},"Doughnut Chart"),(0,o.kt)("img",{src:"https://i.imgur.com/xEPhAsW.png",alt:"Blazor Chart Component - Blazor Doughnut Chart"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#doughnut-chart"},"See blazor doughnut chart demo here."),(0,o.kt)("br",null),(0,o.kt)("a",{href:"/data-visualization/doughnut-chart"},"See blazor doughnut chart full documentation here."),(0,o.kt)("h2",{id:"line-chart"},"Line Chart"),(0,o.kt)("img",{src:"https://i.imgur.com/8b7jH0D.png",alt:"Blazor Chart Component - Blazor Line Chart"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#line-chart"},"See blazor line chart demo here."),(0,o.kt)("br",null),(0,o.kt)("a",{href:"/data-visualization/line-chart"},"See blazor line chart full documentation here."),(0,o.kt)("h2",{id:"pie-chart"},"Pie Chart"),(0,o.kt)("img",{src:"https://i.imgur.com/dDpIuzk.png",alt:"Blazor Chart Component - Blazor Pie Chart"}),(0,o.kt)("br",null),(0,o.kt)("a",{href:"https://demos.blazorbootstrap.com/charts#pie-chart"},"See blazor pie chart demo here."),(0,o.kt)("br",null),(0,o.kt)("a",{href:"/data-visualization/pie-chart"},"See blazor pie chart full documentation here."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/43a942ce.1d5b0cee.js b/assets/js/43a942ce.1d5b0cee.js new file mode 100644 index 000000000..b21f98e65 --- /dev/null +++ b/assets/js/43a942ce.1d5b0cee.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[18367],{3905:(t,e,a)=>{a.d(e,{Zo:()=>p,kt:()=>h});var n=a(67294);function r(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function i(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,n)}return a}function l(t){for(var e=1;e=0||(r[a]=t[a]);return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(r[a]=t[a])}return r}var s=n.createContext({}),d=function(t){var e=n.useContext(s),a=e;return t&&(a="function"==typeof t?t(e):l(l({},e),t)),a},p=function(t){var e=d(t.components);return n.createElement(s.Provider,{value:e},t.children)},m="mdxType",k={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},g=n.forwardRef((function(t,e){var a=t.components,r=t.mdxType,i=t.originalType,s=t.parentName,p=o(t,["components","mdxType","originalType","parentName"]),m=d(a),g=r,h=m["".concat(s,".").concat(g)]||m[g]||k[g]||i;return a?n.createElement(h,l(l({ref:e},p),{},{components:a})):n.createElement(h,l({ref:e},p))}));function h(t,e){var a=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var i=a.length,l=new Array(i);l[0]=g;var o={};for(var s in e)hasOwnProperty.call(e,s)&&(o[s]=e[s]);o.originalType=t,o[m]="string"==typeof t?t:r,l[1]=o;for(var d=2;d{a.d(e,{ZP:()=>m});var n=a(87462),r=a(67294),i=a(3905),l=a(72389);function o(t){let{children:e,fallback:a}=t;return(0,l.Z)()?r.createElement(r.Fragment,null,e?.()):a??null}a(73935);function s(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),e&&t.appendChild(e)}),5e3),null}const d={toc:[]},p="wrapper";function m(t){let{components:e,...a}=t;return(0,i.kt)(p,(0,n.Z)({},d,a,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(s,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},41151:(t,e,a)=>{a.r(e),a.d(e,{assets:()=>d,contentTitle:()=>o,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>p});var n=a(87462),r=(a(67294),a(3905)),i=a(58034);const l={title:"Blazor Line Chart",description:"A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.",image:"https://i.imgur.com/8b7jH0D.png",sidebar_label:"Line Chart",sidebar_position:3},o="Blazor Line Chart",s={unversionedId:"data-visualization/line-chart",id:"data-visualization/line-chart",title:"Blazor Line Chart",description:"A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.",source:"@site/docs/06-data-visualization/line-chart.mdx",sourceDirName:"06-data-visualization",slug:"/data-visualization/line-chart",permalink:"/data-visualization/line-chart",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/06-data-visualization/line-chart.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Blazor Line Chart",description:"A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.",image:"https://i.imgur.com/8b7jH0D.png",sidebar_label:"Line Chart",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Doughnut Chart",permalink:"/data-visualization/doughnut-chart"},next:{title:"Pie Chart",permalink:"/data-visualization/pie-chart"}},d={},p=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"ChartData Members",id:"chartdata-members",level:2},{value:"LineChartDataset Members",id:"linechartdataset-members",level:2},{value:"LineChartDatasetDataLabels Members",id:"linechartdatasetdatalabels-members",level:2},{value:"LineChartOptions Members",id:"linechartoptions-members",level:2},{value:"Examples",id:"examples",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"How it works",id:"how-it-works",level:3},{value:"Another example",id:"another-example",level:3},{value:"Data labels",id:"data-labels",level:3}],m={toc:p},k="wrapper";function g(t){let{components:e,...a}=t;return(0,r.kt)(k,(0,n.Z)({},m,a,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-line-chart"},"Blazor Line Chart"),(0,r.kt)("p",null,"A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."),(0,r.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("img",{src:"https://i.imgur.com/8b7jH0D.png",alt:"Blazor Chart Component - Blazor Line Chart"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart height."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets chart width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Return type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDataAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds data to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDatasetAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds dataset to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"InitializeAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Initialize Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"UpdateAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Update Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"chartdata-members"},"ChartData Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Labels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Labels."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datasets"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Datasets."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"linechartdataset-members"},"LineChartDataset Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"LineChartDataset")," implements ",(0,r.kt)("strong",{parentName:"p"},"IChartDataset"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderDash"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Line dash."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderDashOffset"),(0,r.kt)("td",{parentName:"tr",align:"left"},"double"),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.0"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Line dash offset."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Clip"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}"),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the Data."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datalabels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"LineChartDatasetDataLabels")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the data labels"),(0,r.kt)("td",{parentName:"tr",align:"left"})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Fill"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Hidden"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderDash"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Hover line dash."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Label"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The label for the dataset which appears in the legend and tooltips."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},'new List { "rgba(0, 0, 0, 0.1)" }')),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The fill color for points."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},'new List { "rgba(0, 0, 0, 0.1)" }')),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The border color for points."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The width of the point border in pixels."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHitRadius"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The pixel size of the non-displayed point that reacts to mouse events."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHoverBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Point background color when hovered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHoverBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Point border color when hovered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHoverBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Border width of point when hovered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHoverRadius"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The radius of the point when hovered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointRadius"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The radius of the point shape. If set to 0, the point is not rendered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointRotation"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 0 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The rotation of the point in degrees."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointStyle"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},'new List { "circle" }')),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Style of the point. Use 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style the point."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ShowLine"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"true"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"If false, the lines between points are not drawn."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"SpanGaps"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Stepped"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"true to show the line as a stepped line (tension will be ignored)."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Tension"),(0,r.kt)("td",{parentName:"tr",align:"left"},"double"),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.2"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the chart type."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"XAxisID"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ID of the x axis to plot this dataset on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"YAxisID"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ID of the y axis to plot this dataset on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"linechartdatasetdatalabels-members"},"LineChartDatasetDataLabels Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Align"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"start")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the align."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Anchor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"start")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the anchor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")))),(0,r.kt)("h2",{id:"linechartoptions-members"},"LineChartOptions Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"LineChartOptions")," implements ",(0,r.kt)("strong",{parentName:"p"},"ChartOptions"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"IndexAxis"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"x"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Interaction"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Interaction"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Interaction."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Layout"),(0,r.kt)("td",{parentName:"tr",align:"left"},"ChartLayout"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ChartLayout."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Locale"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Plugins"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"LineChartPlugins")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Plugins."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Responsive."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Scales"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Scales"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Scales."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"prerequisites"},"Prerequisites"),(0,r.kt)("p",null,"Refer to the ",(0,r.kt)("a",{parentName:"p",href:"/getting-started/blazor-webassembly"},"getting started guide")," for setting up charts."),(0,r.kt)("h3",{id:"how-it-works"},"How it works"),(0,r.kt)("p",null,"In the following example, a categorical 12-color palette is used."),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"For data visualization, you can use the predefined palettes ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalTwelveColors")," for a 12-color palette and ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalSixColors")," for a 6-color palette.\nThese palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.")),(0,r.kt)("img",{src:"https://i.imgur.com/MMWdiyi.png",alt:"Blazor Bootstrap: Line Chart Component - How it works"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Extensions\n@using Color = System.Drawing.Color\n\n\n\n\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private LineChart lineChart = default!;\n private LineChartOptions lineChartOptions = default!;\n private ChartData chartData = default!;\n\n private int datasetsCount = 0;\n private int labelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };\n lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await lineChart.InitializeAsync(chartData, lineChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is LineChartDataset lineChartDataset\n && lineChartDataset is not null\n && lineChartDataset.Data is not null)\n {\n var count = lineChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(200));\n }\n\n lineChartDataset.Data = newData;\n newDatasets.Add(lineChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await lineChart.UpdateAsync(chartData, lineChartOptions);\n }\n\n private async Task AddDatasetAsync()\n {\n if (chartData is null || chartData.Datasets is null) return;\n\n var chartDataset = GetRandomLineChartDataset();\n chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is LineChartDataset lineChartDataset)\n data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200)));\n }\n\n chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n }\n\n private async Task ShowHorizontalLineChartAsync()\n {\n lineChartOptions.IndexAxis = "y";\n await lineChart.UpdateAsync(chartData, lineChartOptions);\n }\n\n private async Task ShowVerticalLineChartAsync()\n {\n lineChartOptions.IndexAxis = "x";\n await lineChart.UpdateAsync(chartData, lineChartOptions);\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n datasets.Add(GetRandomLineChartDataset());\n }\n\n return datasets;\n }\n\n private LineChartDataset GetRandomLineChartDataset()\n {\n var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();\n\n datasetsCount += 1;\n\n return new LineChartDataset()\n {\n Label = $"Team {datasetsCount}",\n Data = GetRandomData(),\n BackgroundColor = new List { c.ToRgbString() },\n BorderColor = new List { c.ToRgbString() },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { c.ToRgbString() },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < labelsCount; index++)\n {\n data.Add(random.Next(200));\n }\n\n return data;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n }\n\n return labels;\n }\n\n private string GetNextDataLabel()\n {\n labelsCount += 1;\n return $"Day {labelsCount}";\n }\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("h3",{id:"another-example"},"Another example"),(0,r.kt)("img",{src:"https://i.imgur.com/qetH0UX.png",alt:"Blazor Bootstrap: Line Chart Component - Another example"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Extensions\n@using Color = System.Drawing.Color\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private LineChart lineChart = default!;\n private LineChartOptions lineChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };\n var datasets = new List();\n\n var dataset1 = new LineChartDataset()\n {\n Label = "Windows",\n Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[0] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new LineChartDataset()\n {\n Label = "macOS",\n Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[1] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new LineChartDataset()\n {\n Label = "Other",\n Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[2] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n lineChartOptions = new();\n lineChartOptions.Responsive = true;\n lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };\n\n lineChartOptions.Scales.X.Title.Text = "2019";\n lineChartOptions.Scales.X.Title.Display = true;\n\n lineChartOptions.Scales.Y.Title.Text = "Visitors";\n lineChartOptions.Scales.Y.Title.Display = true;\n\n lineChartOptions.Plugins.Title.Text = "Operating system";\n lineChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await lineChart.InitializeAsync(chartData, lineChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/line-chart#how-it-works"},"See the demo here.")),(0,r.kt)("h3",{id:"data-labels"},"Data labels"),(0,r.kt)("img",{src:"https://i.imgur.com/8b7jH0D.png",alt:"Blazor Bootstrap: Line Chart Component - Data labels"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{26,43,60,84,92} showLineNumbers","{26,43,60,84,92}":!0,showLineNumbers:!0},'@code {\n private LineChart lineChart = default!;\n private LineChartOptions lineChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };\n var datasets = new List();\n\n var dataset1 = new LineChartDataset\n {\n Label = "Windows",\n Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[0] },\n PointRadius = new List { 3 }, // show points\n PointHoverRadius = new List { 4 },\n\n // datalabels\n Datalabels = new() { Align = "end", Anchor = "end" }\n };\n datasets.Add(dataset1);\n\n var dataset2 = new LineChartDataset\n {\n Label = "macOS",\n Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[1] },\n PointRadius = new List { 3 }, // show points\n PointHoverRadius = new List { 4 },\n\n // datalabels\n Datalabels = new() { Align = "end", Anchor = "end" }\n };\n datasets.Add(dataset2);\n\n var dataset3 = new LineChartDataset\n {\n Label = "Other",\n Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[2] },\n PointRadius = new List { 3 }, // show points\n PointHoverRadius = new List { 4 },\n\n // datalabels\n Datalabels = new() { Align = "start", Anchor = "start" }\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n lineChartOptions = new();\n lineChartOptions.Responsive = true;\n lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };\n\n lineChartOptions.Scales.X.Title.Text = "2019";\n lineChartOptions.Scales.X.Title.Display = true;\n\n lineChartOptions.Scales.Y.Title.Text = "Visitors";\n lineChartOptions.Scales.Y.Title.Display = true;\n\n lineChartOptions.Plugins.Title.Text = "Operating system";\n lineChartOptions.Plugins.Title.Display = true;\n\n // datalabels\n lineChartOptions.Plugins.Datalabels.Color = "white";\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n // pass the plugin name to enable the data labels\n await lineChart.InitializeAsync(chartData: chartData, chartOptions: lineChartOptions, plugins: new string[] { "ChartDataLabels" });\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/line-chart#data-labels"},"See the demo here.")))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/43a942ce.ad4aaa0d.js b/assets/js/43a942ce.ad4aaa0d.js deleted file mode 100644 index 5317c89da..000000000 --- a/assets/js/43a942ce.ad4aaa0d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[18367],{3905:(t,e,a)=>{a.d(e,{Zo:()=>p,kt:()=>h});var n=a(67294);function r(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function i(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,n)}return a}function l(t){for(var e=1;e=0||(r[a]=t[a]);return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(r[a]=t[a])}return r}var s=n.createContext({}),d=function(t){var e=n.useContext(s),a=e;return t&&(a="function"==typeof t?t(e):l(l({},e),t)),a},p=function(t){var e=d(t.components);return n.createElement(s.Provider,{value:e},t.children)},m="mdxType",k={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},g=n.forwardRef((function(t,e){var a=t.components,r=t.mdxType,i=t.originalType,s=t.parentName,p=o(t,["components","mdxType","originalType","parentName"]),m=d(a),g=r,h=m["".concat(s,".").concat(g)]||m[g]||k[g]||i;return a?n.createElement(h,l(l({ref:e},p),{},{components:a})):n.createElement(h,l({ref:e},p))}));function h(t,e){var a=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var i=a.length,l=new Array(i);l[0]=g;var o={};for(var s in e)hasOwnProperty.call(e,s)&&(o[s]=e[s]);o.originalType=t,o[m]="string"==typeof t?t:r,l[1]=o;for(var d=2;d{a.d(e,{ZP:()=>m});var n=a(87462),r=a(67294),i=a(3905),l=a(72389);function o(t){let{children:e,fallback:a}=t;return(0,l.Z)()?r.createElement(r.Fragment,null,e?.()):a??null}a(73935);function s(){let t=document.getElementById("divCarbonAd");if(t){let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(e)}return null}const d={toc:[]},p="wrapper";function m(t){let{components:e,...a}=t;return(0,i.kt)(p,(0,n.Z)({},d,a,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(s,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},41151:(t,e,a)=>{a.r(e),a.d(e,{assets:()=>d,contentTitle:()=>o,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>p});var n=a(87462),r=(a(67294),a(3905)),i=a(58034);const l={title:"Blazor Line Chart",description:"A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.",image:"https://i.imgur.com/8b7jH0D.png",sidebar_label:"Line Chart",sidebar_position:3},o="Blazor Line Chart",s={unversionedId:"data-visualization/line-chart",id:"data-visualization/line-chart",title:"Blazor Line Chart",description:"A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.",source:"@site/docs/06-data-visualization/line-chart.mdx",sourceDirName:"06-data-visualization",slug:"/data-visualization/line-chart",permalink:"/data-visualization/line-chart",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/06-data-visualization/line-chart.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Blazor Line Chart",description:"A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.",image:"https://i.imgur.com/8b7jH0D.png",sidebar_label:"Line Chart",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Doughnut Chart",permalink:"/data-visualization/doughnut-chart"},next:{title:"Pie Chart",permalink:"/data-visualization/pie-chart"}},d={},p=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"ChartData Members",id:"chartdata-members",level:2},{value:"LineChartDataset Members",id:"linechartdataset-members",level:2},{value:"LineChartDatasetDataLabels Members",id:"linechartdatasetdatalabels-members",level:2},{value:"LineChartOptions Members",id:"linechartoptions-members",level:2},{value:"Examples",id:"examples",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"How it works",id:"how-it-works",level:3},{value:"Another example",id:"another-example",level:3},{value:"Data labels",id:"data-labels",level:3}],m={toc:p},k="wrapper";function g(t){let{components:e,...a}=t;return(0,r.kt)(k,(0,n.Z)({},m,a,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-line-chart"},"Blazor Line Chart"),(0,r.kt)("p",null,"A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."),(0,r.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("img",{src:"https://i.imgur.com/8b7jH0D.png",alt:"Blazor Chart Component - Blazor Line Chart"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart height."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,r.kt)("td",{parentName:"tr",align:"left"},"int"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets chart width."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"methods"},"Methods"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Return type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDataAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds data to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"AddDatasetAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Adds dataset to bar chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"InitializeAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Initialize Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"UpdateAsync"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Update Bar Chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"chartdata-members"},"ChartData Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Labels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Labels."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datasets"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Datasets."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"linechartdataset-members"},"LineChartDataset Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"LineChartDataset")," implements ",(0,r.kt)("strong",{parentName:"p"},"IChartDataset"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderDash"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Line dash."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderDashOffset"),(0,r.kt)("td",{parentName:"tr",align:"left"},"double"),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.0"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Line dash offset."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Clip"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}"),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the Data."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Datalabels"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"LineChartDatasetDataLabels")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the data labels"),(0,r.kt)("td",{parentName:"tr",align:"left"})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Fill"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Hidden"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBackgroundColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderColor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderDash"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Hover line dash."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"HoverBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderWidth."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Label"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The label for the dataset which appears in the legend and tooltips."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},'new List { "rgba(0, 0, 0, 0.1)" }')),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The fill color for points."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},'new List { "rgba(0, 0, 0, 0.1)" }')),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The border color for points."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The width of the point border in pixels."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHitRadius"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The pixel size of the non-displayed point that reacts to mouse events."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHoverBackgroundColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Point background color when hovered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHoverBorderColor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Point border color when hovered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHoverBorderWidth"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Border width of point when hovered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointHoverRadius"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The radius of the point when hovered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointRadius"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 1 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The radius of the point shape. If set to 0, the point is not rendered."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointRotation"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"new List { 0 }")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The rotation of the point in degrees."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"PointStyle"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"List")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},'new List { "circle" }')),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Style of the point. Use 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style the point."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"ShowLine"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"true"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"If false, the lines between points are not drawn."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"SpanGaps"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Stepped"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"true to show the line as a stepped line (tension will be ignored)."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Tension"),(0,r.kt)("td",{parentName:"tr",align:"left"},"double"),(0,r.kt)("td",{parentName:"tr",align:"left"},"0.2"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Get or sets the chart type."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"XAxisID"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ID of the x axis to plot this dataset on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"YAxisID"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"null"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The ID of the y axis to plot this dataset on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"linechartdatasetdatalabels-members"},"LineChartDatasetDataLabels Members"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Align"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"start")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the align."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Anchor"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"start")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the anchor."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")))),(0,r.kt)("h2",{id:"linechartoptions-members"},"LineChartOptions Members"),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},(0,r.kt)("strong",{parentName:"p"},"LineChartOptions")," implements ",(0,r.kt)("strong",{parentName:"p"},"ChartOptions"),".")),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"IndexAxis"),(0,r.kt)("td",{parentName:"tr",align:"left"},"string"),(0,r.kt)("td",{parentName:"tr",align:"left"},"x"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Interaction"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Interaction"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Interaction."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Layout"),(0,r.kt)("td",{parentName:"tr",align:"left"},"ChartLayout"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ChartLayout."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Locale"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"string?")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Plugins"),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"LineChartPlugins")),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Plugins."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,r.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,r.kt)("td",{parentName:"tr",align:"left"},"false"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Responsive."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Scales"),(0,r.kt)("td",{parentName:"tr",align:"left"},"Scales"),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"}),(0,r.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Scales."),(0,r.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"prerequisites"},"Prerequisites"),(0,r.kt)("p",null,"Refer to the ",(0,r.kt)("a",{parentName:"p",href:"/getting-started/blazor-webassembly"},"getting started guide")," for setting up charts."),(0,r.kt)("h3",{id:"how-it-works"},"How it works"),(0,r.kt)("p",null,"In the following example, a categorical 12-color palette is used."),(0,r.kt)("admonition",{type:"tip"},(0,r.kt)("p",{parentName:"admonition"},"For data visualization, you can use the predefined palettes ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalTwelveColors")," for a 12-color palette and ",(0,r.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalSixColors")," for a 6-color palette.\nThese palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.")),(0,r.kt)("img",{src:"https://i.imgur.com/MMWdiyi.png",alt:"Blazor Bootstrap: Line Chart Component - How it works"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Extensions\n@using Color = System.Drawing.Color\n\n\n\n\n\n\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private LineChart lineChart = default!;\n private LineChartOptions lineChartOptions = default!;\n private ChartData chartData = default!;\n\n private int datasetsCount = 0;\n private int labelsCount = 0;\n\n private Random random = new();\n\n protected override void OnInitialized()\n {\n chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };\n lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await lineChart.InitializeAsync(chartData, lineChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is LineChartDataset lineChartDataset\n && lineChartDataset is not null\n && lineChartDataset.Data is not null)\n {\n var count = lineChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(200));\n }\n\n lineChartDataset.Data = newData;\n newDatasets.Add(lineChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await lineChart.UpdateAsync(chartData, lineChartOptions);\n }\n\n private async Task AddDatasetAsync()\n {\n if (chartData is null || chartData.Datasets is null) return;\n\n var chartDataset = GetRandomLineChartDataset();\n chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (chartData is null || chartData.Datasets is null)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is LineChartDataset lineChartDataset)\n data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200)));\n }\n\n chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n }\n\n private async Task ShowHorizontalLineChartAsync()\n {\n lineChartOptions.IndexAxis = "y";\n await lineChart.UpdateAsync(chartData, lineChartOptions);\n }\n\n private async Task ShowVerticalLineChartAsync()\n {\n lineChartOptions.IndexAxis = "x";\n await lineChart.UpdateAsync(chartData, lineChartOptions);\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n datasets.Add(GetRandomLineChartDataset());\n }\n\n return datasets;\n }\n\n private LineChartDataset GetRandomLineChartDataset()\n {\n var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();\n\n datasetsCount += 1;\n\n return new LineChartDataset()\n {\n Label = $"Team {datasetsCount}",\n Data = GetRandomData(),\n BackgroundColor = new List { c.ToRgbString() },\n BorderColor = new List { c.ToRgbString() },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { c.ToRgbString() },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < labelsCount; index++)\n {\n data.Add(random.Next(200));\n }\n\n return data;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n }\n\n return labels;\n }\n\n private string GetNextDataLabel()\n {\n labelsCount += 1;\n return $"Day {labelsCount}";\n }\n\n #endregion Data Preparation\n}\n')),(0,r.kt)("h3",{id:"another-example"},"Another example"),(0,r.kt)("img",{src:"https://i.imgur.com/qetH0UX.png",alt:"Blazor Bootstrap: Line Chart Component - Another example"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@using BlazorBootstrap.Extensions\n@using Color = System.Drawing.Color\n\n\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private LineChart lineChart = default!;\n private LineChartOptions lineChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };\n var datasets = new List();\n\n var dataset1 = new LineChartDataset()\n {\n Label = "Windows",\n Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[0] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new LineChartDataset()\n {\n Label = "macOS",\n Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[1] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new LineChartDataset()\n {\n Label = "Other",\n Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[2] },\n PointRadius = new List { 0 }, // hide points\n PointHoverRadius = new List { 4 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n lineChartOptions = new();\n lineChartOptions.Responsive = true;\n lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };\n\n lineChartOptions.Scales.X.Title.Text = "2019";\n lineChartOptions.Scales.X.Title.Display = true;\n\n lineChartOptions.Scales.Y.Title.Text = "Visitors";\n lineChartOptions.Scales.Y.Title.Display = true;\n\n lineChartOptions.Plugins.Title.Text = "Operating system";\n lineChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await lineChart.InitializeAsync(chartData, lineChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/line-chart#how-it-works"},"See the demo here.")),(0,r.kt)("h3",{id:"data-labels"},"Data labels"),(0,r.kt)("img",{src:"https://i.imgur.com/8b7jH0D.png",alt:"Blazor Bootstrap: Line Chart Component - Data labels"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{26,43,60,84,92} showLineNumbers","{26,43,60,84,92}":!0,showLineNumbers:!0},'@code {\n private LineChart lineChart = default!;\n private LineChartOptions lineChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };\n var datasets = new List();\n\n var dataset1 = new LineChartDataset\n {\n Label = "Windows",\n Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[0] },\n PointRadius = new List { 3 }, // show points\n PointHoverRadius = new List { 4 },\n\n // datalabels\n Datalabels = new() { Align = "end", Anchor = "end" }\n };\n datasets.Add(dataset1);\n\n var dataset2 = new LineChartDataset\n {\n Label = "macOS",\n Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[1] },\n PointRadius = new List { 3 }, // show points\n PointHoverRadius = new List { 4 },\n\n // datalabels\n Datalabels = new() { Align = "end", Anchor = "end" }\n };\n datasets.Add(dataset2);\n\n var dataset3 = new LineChartDataset\n {\n Label = "Other",\n Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 2 },\n HoverBorderWidth = new List { 4 },\n PointBackgroundColor = new List { colors[2] },\n PointRadius = new List { 3 }, // show points\n PointHoverRadius = new List { 4 },\n\n // datalabels\n Datalabels = new() { Align = "start", Anchor = "start" }\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n lineChartOptions = new();\n lineChartOptions.Responsive = true;\n lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };\n\n lineChartOptions.Scales.X.Title.Text = "2019";\n lineChartOptions.Scales.X.Title.Display = true;\n\n lineChartOptions.Scales.Y.Title.Text = "Visitors";\n lineChartOptions.Scales.Y.Title.Display = true;\n\n lineChartOptions.Plugins.Title.Text = "Operating system";\n lineChartOptions.Plugins.Title.Display = true;\n\n // datalabels\n lineChartOptions.Plugins.Datalabels.Color = "white";\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n // pass the plugin name to enable the data labels\n await lineChart.InitializeAsync(chartData: chartData, chartOptions: lineChartOptions, plugins: new string[] { "ChartDataLabels" });\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n}\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/line-chart#data-labels"},"See the demo here.")))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/47c689b7.52c0e2e8.js b/assets/js/47c689b7.52c0e2e8.js deleted file mode 100644 index 4cdd9fdbf..000000000 --- a/assets/js/47c689b7.52c0e2e8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[26936],{3905:(e,r,t)=>{t.d(r,{Zo:()=>g,kt:()=>u});var o=t(67294);function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function n(e){for(var r=1;r=0||(s[t]=e[t]);return s}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var i=o.createContext({}),p=function(e){var r=o.useContext(i),t=r;return e&&(t="function"==typeof e?e(r):n(n({},r),e)),t},g=function(e){var r=p(e.components);return o.createElement(i.Provider,{value:r},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var r=e.children;return o.createElement(o.Fragment,{},r)}},c=o.forwardRef((function(e,r){var t=e.components,s=e.mdxType,a=e.originalType,i=e.parentName,g=l(e,["components","mdxType","originalType","parentName"]),m=p(t),c=s,u=m["".concat(i,".").concat(c)]||m[c]||d[c]||a;return t?o.createElement(u,n(n({ref:r},g),{},{components:t})):o.createElement(u,n({ref:r},g))}));function u(e,r){var t=arguments,s=r&&r.mdxType;if("string"==typeof e||s){var a=t.length,n=new Array(a);n[0]=c;var l={};for(var i in r)hasOwnProperty.call(r,i)&&(l[i]=r[i]);l.originalType=e,l[m]="string"==typeof e?e:s,n[1]=l;for(var p=2;p{t.d(r,{ZP:()=>m});var o=t(87462),s=t(67294),a=t(3905),n=t(72389);function l(e){let{children:r,fallback:t}=e;return(0,n.Z)()?s.createElement(s.Fragment,null,r?.()):t??null}t(73935);function i(){let e=document.getElementById("divCarbonAd");if(e){let r=document.getElementById("_carbonads_js");r&&r.remove(),r=document.createElement("script"),r.async=!0,r.id="_carbonads_js",r.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",r.type="text/javascript",r.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(r)}return null}const p={toc:[]},g="wrapper";function m(e){let{components:r,...t}=e;return(0,a.kt)(g,(0,o.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,a.kt)("div",{id:"divCarbonAd"}),(0,a.kt)(l,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,a.kt)(i,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},2653:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>p,contentTitle:()=>l,default:()=>c,frontMatter:()=>n,metadata:()=>i,toc:()=>g});var o=t(87462),s=(t(67294),t(3905)),a=t(58034);const n={title:"Blazor Progress Component",description:"Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.",image:"https://i.imgur.com/MK142lQ.png",sidebar_label:"Progress",sidebar_position:18},l="Blazor Progress",i={unversionedId:"components/progress",id:"components/progress",title:"Blazor Progress Component",description:"Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.",source:"@site/docs/05-components/progress.mdx",sourceDirName:"05-components",slug:"/components/progress",permalink:"/components/progress",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/progress.mdx",tags:[],version:"current",sidebarPosition:18,frontMatter:{title:"Blazor Progress Component",description:"Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.",image:"https://i.imgur.com/MK142lQ.png",sidebar_label:"Progress",sidebar_position:18},sidebar:"tutorialSidebar",previous:{title:"Preload",permalink:"/components/preload"},next:{title:"Sidebar",permalink:"/components/sidebar"}},p={},g=[{value:"Progress Parameters",id:"progress-parameters",level:2},{value:"ProgressBar Parameters",id:"progressbar-parameters",level:2},{value:"ProgressBar Methods",id:"progressbar-methods",level:2},{value:"Examples",id:"examples",level:2},{value:"How it works",id:"how-it-works",level:3},{value:"Labels",id:"labels",level:3},{value:"Set width programmatically",id:"set-width-programmatically",level:3},{value:"Height",id:"height",level:3},{value:"Backgrounds",id:"backgrounds",level:3},{value:"Set background programmatically",id:"set-background-programmatically",level:3},{value:"Multiple bars",id:"multiple-bars",level:3},{value:"Striped",id:"striped",level:3},{value:"Animated stripes",id:"animated-stripes",level:3}],m={toc:g},d="wrapper";function c(e){let{components:r,...t}=e;return(0,s.kt)(d,(0,o.Z)({},m,t,{components:r,mdxType:"MDXLayout"}),(0,s.kt)("h1",{id:"blazor-progress"},"Blazor Progress"),(0,s.kt)("p",null,"Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels."),(0,s.kt)(a.ZP,{mdxType:"CarbonAd"}),(0,s.kt)("img",{src:"https://i.imgur.com/MK142lQ.png",alt:"Blazor Progress"}),(0,s.kt)("h2",{id:"progress-parameters"},"Progress Parameters"),(0,s.kt)("table",null,(0,s.kt)("thead",{parentName:"table"},(0,s.kt)("tr",{parentName:"thead"},(0,s.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,s.kt)("tbody",{parentName:"table"},(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,s.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,s.kt)("td",{parentName:"tr",align:"left"},"double"),(0,s.kt)("td",{parentName:"tr",align:"left"},"16"),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the height of the Progress. Height is measured in pixels, and the default height is 16 pixels.")))),(0,s.kt)("h2",{id:"progressbar-parameters"},"ProgressBar Parameters"),(0,s.kt)("table",null,(0,s.kt)("thead",{parentName:"table"},(0,s.kt)("tr",{parentName:"thead"},(0,s.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,s.kt)("tbody",{parentName:"table"},(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Color"),(0,s.kt)("td",{parentName:"tr",align:"left"},(0,s.kt)("inlineCode",{parentName:"td"},"ProgressColor")),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the progress color.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Label"),(0,s.kt)("td",{parentName:"tr",align:"left"},"string"),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the progress bar label.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,s.kt)("td",{parentName:"tr",align:"left"},(0,s.kt)("inlineCode",{parentName:"td"},"ProgressType")),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the progress bar type.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,s.kt)("td",{parentName:"tr",align:"left"},"double"),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Get or sets the progress bar width.")))),(0,s.kt)("h2",{id:"progressbar-methods"},"ProgressBar Methods"),(0,s.kt)("table",null,(0,s.kt)("thead",{parentName:"table"},(0,s.kt)("tr",{parentName:"thead"},(0,s.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,s.kt)("tbody",{parentName:"table"},(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"DecreaseWidth"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Decrease the progress bar width.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"GetWidth"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Get the progress bar width.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"IncreaseWidth"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Increase the progress bar width.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"SetColor"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Set the progress bar color.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"SetLabel"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Set the progress bar label.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"SetWidth"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Set the progress bar width.")))),(0,s.kt)("h2",{id:"examples"},"Examples"),(0,s.kt)("h3",{id:"how-it-works"},"How it works"),(0,s.kt)("img",{src:"https://i.imgur.com/MK142lQ.png",alt:"Blazor Progress - How it works"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n \n \n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#how-it-works"},"See demo here.")),(0,s.kt)("h3",{id:"labels"},"Labels"),(0,s.kt)("p",null,"Add labels to your Blazor ProgressBar component using the Label parameter or by calling the ",(0,s.kt)("inlineCode",{parentName:"p"},"SetLabel(...)")," method."),(0,s.kt)("img",{src:"https://i.imgur.com/De7gSvL.png",alt:"Blazor Progress - Labels"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#labels"},"See demo here.")),(0,s.kt)("h3",{id:"set-width-programmatically"},"Set width programmatically"),(0,s.kt)("p",null,"Use ",(0,s.kt)("inlineCode",{parentName:"p"},"IncreaseWidth()")," or ",(0,s.kt)("inlineCode",{parentName:"p"},"DecreaseProgressBar()")," methods to increase or decrease the Blazor ProgressBar width."),(0,s.kt)("img",{src:"https://i.imgur.com/ZDfpxN7.png",alt:"Blazor Progress - Set width programmatically"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n
\n \n \n \n
\n')),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n ProgressBar progressBar;\n\n private void IncreaseProgressBar()\n {\n progressBar.IncreaseWidth(10);\n progressBar.SetLabel($"{progressBar.GetWidth()}%");\n }\n\n private void DecreaseProgressBar()\n {\n progressBar.DecreaseProgressBar(10);\n progressBar.SetLabel($"{progressBar.GetWidth()}%");\n }\n\n private void ResetProgressBar()\n {\n progressBar.SetWidth(0);\n progressBar.SetLabel($"{progressBar.GetWidth()}%");\n }\n}\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#set-width-programmatically"},"See demo here.")),(0,s.kt)("h3",{id:"height"},"Height"),(0,s.kt)("p",null,"Set the height of the Blazor Progress by using the ",(0,s.kt)("inlineCode",{parentName:"p"},"Height")," parameter. Height is measured in pixels."),(0,s.kt)("img",{src:"https://i.imgur.com/GzPRWkS.png",alt:"Blazor Progress - Height"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#height"},"See demo here.")),(0,s.kt)("h3",{id:"backgrounds"},"Backgrounds"),(0,s.kt)("p",null,"Use the ",(0,s.kt)("inlineCode",{parentName:"p"},"Color")," parameter or the ",(0,s.kt)("inlineCode",{parentName:"p"},"SetColor(ProgressColor color)")," method to change the appearance of individual Blazor ProgressBar components."),(0,s.kt)("img",{src:"https://i.imgur.com/QkG4fyX.png",alt:"Blazor Progress - Backgrounds"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#backgrounds"},"See demo here.")),(0,s.kt)("h3",{id:"set-background-programmatically"},"Set background programmatically"),(0,s.kt)("p",null,"You can dynamically set the Blazor ProgressBar color by calling the ",(0,s.kt)("inlineCode",{parentName:"p"},"SetColor()")," method."),(0,s.kt)("img",{src:"https://i.imgur.com/rXnCzk1.png",alt:"Blazor Progress - Set background programmatically"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n
\n \n \n \n \n \n \n \n
\n')),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n ProgressBar progressBar;\n private void SetColor(ProgressColor color) => progressBar.SetColor(color);\n}\n")),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#set-background-programmatically"},"See demo here.")),(0,s.kt)("h3",{id:"multiple-bars"},"Multiple bars"),(0,s.kt)("p",null,"Include multiple Blazor ProgressBar components in a Blazor Progress component if needed."),(0,s.kt)("img",{src:"https://i.imgur.com/PCkUVYq.png",alt:"Blazor Progress - Multiple bars"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n \n \n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#multiple-bars"},"See demo here.")),(0,s.kt)("h3",{id:"striped"},"Striped"),(0,s.kt)("p",null,"Add ",(0,s.kt)("inlineCode",{parentName:"p"},'Type="ProgressType.Striped"')," to any Blazor ProgressBar component to apply a stripe."),(0,s.kt)("img",{src:"https://i.imgur.com/Ggg3N6i.png",alt:"Blazor Progress - Striped"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#striped"},"See demo here.")),(0,s.kt)("h3",{id:"animated-stripes"},"Animated stripes"),(0,s.kt)("p",null,"The stripes can also be animated. Add ",(0,s.kt)("inlineCode",{parentName:"p"},'Type="ProgressType.StripedAndAnimated"')," to the Blazor ProgressBar component to animate the stripes right to the left."),(0,s.kt)("img",{src:"https://i.imgur.com/X4MpgJG.png",alt:"Blazor Progress - Animated stripes"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#animated-stripes"},"See demo here.")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/47c689b7.e8fce28c.js b/assets/js/47c689b7.e8fce28c.js new file mode 100644 index 000000000..2802a718f --- /dev/null +++ b/assets/js/47c689b7.e8fce28c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[26936],{3905:(e,r,t)=>{t.d(r,{Zo:()=>g,kt:()=>u});var o=t(67294);function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function n(e){for(var r=1;r=0||(s[t]=e[t]);return s}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(s[t]=e[t])}return s}var i=o.createContext({}),p=function(e){var r=o.useContext(i),t=r;return e&&(t="function"==typeof e?e(r):n(n({},r),e)),t},g=function(e){var r=p(e.components);return o.createElement(i.Provider,{value:r},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var r=e.children;return o.createElement(o.Fragment,{},r)}},c=o.forwardRef((function(e,r){var t=e.components,s=e.mdxType,a=e.originalType,i=e.parentName,g=l(e,["components","mdxType","originalType","parentName"]),m=p(t),c=s,u=m["".concat(i,".").concat(c)]||m[c]||d[c]||a;return t?o.createElement(u,n(n({ref:r},g),{},{components:t})):o.createElement(u,n({ref:r},g))}));function u(e,r){var t=arguments,s=r&&r.mdxType;if("string"==typeof e||s){var a=t.length,n=new Array(a);n[0]=c;var l={};for(var i in r)hasOwnProperty.call(r,i)&&(l[i]=r[i]);l.originalType=e,l[m]="string"==typeof e?e:s,n[1]=l;for(var p=2;p{t.d(r,{ZP:()=>m});var o=t(87462),s=t(67294),a=t(3905),n=t(72389);function l(e){let{children:r,fallback:t}=e;return(0,n.Z)()?s.createElement(s.Fragment,null,r?.()):t??null}t(73935);function i(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let r=document.getElementById("_carbonads_js");r&&r.remove(),r=document.createElement("script"),r.async=!0,r.id="_carbonads_js",r.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",r.type="text/javascript",r.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),r&&e.appendChild(r)}),5e3),null}const p={toc:[]},g="wrapper";function m(e){let{components:r,...t}=e;return(0,a.kt)(g,(0,o.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,a.kt)("div",{id:"divCarbonAd"}),(0,a.kt)(l,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,a.kt)(i,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},2653:(e,r,t)=>{t.r(r),t.d(r,{assets:()=>p,contentTitle:()=>l,default:()=>c,frontMatter:()=>n,metadata:()=>i,toc:()=>g});var o=t(87462),s=(t(67294),t(3905)),a=t(58034);const n={title:"Blazor Progress Component",description:"Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.",image:"https://i.imgur.com/MK142lQ.png",sidebar_label:"Progress",sidebar_position:18},l="Blazor Progress",i={unversionedId:"components/progress",id:"components/progress",title:"Blazor Progress Component",description:"Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.",source:"@site/docs/05-components/progress.mdx",sourceDirName:"05-components",slug:"/components/progress",permalink:"/components/progress",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/progress.mdx",tags:[],version:"current",sidebarPosition:18,frontMatter:{title:"Blazor Progress Component",description:"Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.",image:"https://i.imgur.com/MK142lQ.png",sidebar_label:"Progress",sidebar_position:18},sidebar:"tutorialSidebar",previous:{title:"Preload",permalink:"/components/preload"},next:{title:"Sidebar",permalink:"/components/sidebar"}},p={},g=[{value:"Progress Parameters",id:"progress-parameters",level:2},{value:"ProgressBar Parameters",id:"progressbar-parameters",level:2},{value:"ProgressBar Methods",id:"progressbar-methods",level:2},{value:"Examples",id:"examples",level:2},{value:"How it works",id:"how-it-works",level:3},{value:"Labels",id:"labels",level:3},{value:"Set width programmatically",id:"set-width-programmatically",level:3},{value:"Height",id:"height",level:3},{value:"Backgrounds",id:"backgrounds",level:3},{value:"Set background programmatically",id:"set-background-programmatically",level:3},{value:"Multiple bars",id:"multiple-bars",level:3},{value:"Striped",id:"striped",level:3},{value:"Animated stripes",id:"animated-stripes",level:3}],m={toc:g},d="wrapper";function c(e){let{components:r,...t}=e;return(0,s.kt)(d,(0,o.Z)({},m,t,{components:r,mdxType:"MDXLayout"}),(0,s.kt)("h1",{id:"blazor-progress"},"Blazor Progress"),(0,s.kt)("p",null,"Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels."),(0,s.kt)(a.ZP,{mdxType:"CarbonAd"}),(0,s.kt)("img",{src:"https://i.imgur.com/MK142lQ.png",alt:"Blazor Progress"}),(0,s.kt)("h2",{id:"progress-parameters"},"Progress Parameters"),(0,s.kt)("table",null,(0,s.kt)("thead",{parentName:"table"},(0,s.kt)("tr",{parentName:"thead"},(0,s.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,s.kt)("tbody",{parentName:"table"},(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,s.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,s.kt)("td",{parentName:"tr",align:"left"},"double"),(0,s.kt)("td",{parentName:"tr",align:"left"},"16"),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the height of the Progress. Height is measured in pixels, and the default height is 16 pixels.")))),(0,s.kt)("h2",{id:"progressbar-parameters"},"ProgressBar Parameters"),(0,s.kt)("table",null,(0,s.kt)("thead",{parentName:"table"},(0,s.kt)("tr",{parentName:"thead"},(0,s.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,s.kt)("tbody",{parentName:"table"},(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Color"),(0,s.kt)("td",{parentName:"tr",align:"left"},(0,s.kt)("inlineCode",{parentName:"td"},"ProgressColor")),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the progress color.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Label"),(0,s.kt)("td",{parentName:"tr",align:"left"},"string"),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the progress bar label.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,s.kt)("td",{parentName:"tr",align:"left"},(0,s.kt)("inlineCode",{parentName:"td"},"ProgressType")),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the progress bar type.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,s.kt)("td",{parentName:"tr",align:"left"},"double"),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"}),(0,s.kt)("td",{parentName:"tr",align:"left"},"Get or sets the progress bar width.")))),(0,s.kt)("h2",{id:"progressbar-methods"},"ProgressBar Methods"),(0,s.kt)("table",null,(0,s.kt)("thead",{parentName:"table"},(0,s.kt)("tr",{parentName:"thead"},(0,s.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,s.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,s.kt)("tbody",{parentName:"table"},(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"DecreaseWidth"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Decrease the progress bar width.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"GetWidth"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Get the progress bar width.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"IncreaseWidth"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Increase the progress bar width.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"SetColor"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Set the progress bar color.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"SetLabel"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Set the progress bar label.")),(0,s.kt)("tr",{parentName:"tbody"},(0,s.kt)("td",{parentName:"tr",align:"left"},"SetWidth"),(0,s.kt)("td",{parentName:"tr",align:"left"},"Set the progress bar width.")))),(0,s.kt)("h2",{id:"examples"},"Examples"),(0,s.kt)("h3",{id:"how-it-works"},"How it works"),(0,s.kt)("img",{src:"https://i.imgur.com/MK142lQ.png",alt:"Blazor Progress - How it works"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n \n \n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#how-it-works"},"See demo here.")),(0,s.kt)("h3",{id:"labels"},"Labels"),(0,s.kt)("p",null,"Add labels to your Blazor ProgressBar component using the Label parameter or by calling the ",(0,s.kt)("inlineCode",{parentName:"p"},"SetLabel(...)")," method."),(0,s.kt)("img",{src:"https://i.imgur.com/De7gSvL.png",alt:"Blazor Progress - Labels"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#labels"},"See demo here.")),(0,s.kt)("h3",{id:"set-width-programmatically"},"Set width programmatically"),(0,s.kt)("p",null,"Use ",(0,s.kt)("inlineCode",{parentName:"p"},"IncreaseWidth()")," or ",(0,s.kt)("inlineCode",{parentName:"p"},"DecreaseProgressBar()")," methods to increase or decrease the Blazor ProgressBar width."),(0,s.kt)("img",{src:"https://i.imgur.com/ZDfpxN7.png",alt:"Blazor Progress - Set width programmatically"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n
\n \n \n \n
\n')),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},'@code {\n ProgressBar progressBar;\n\n private void IncreaseProgressBar()\n {\n progressBar.IncreaseWidth(10);\n progressBar.SetLabel($"{progressBar.GetWidth()}%");\n }\n\n private void DecreaseProgressBar()\n {\n progressBar.DecreaseProgressBar(10);\n progressBar.SetLabel($"{progressBar.GetWidth()}%");\n }\n\n private void ResetProgressBar()\n {\n progressBar.SetWidth(0);\n progressBar.SetLabel($"{progressBar.GetWidth()}%");\n }\n}\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#set-width-programmatically"},"See demo here.")),(0,s.kt)("h3",{id:"height"},"Height"),(0,s.kt)("p",null,"Set the height of the Blazor Progress by using the ",(0,s.kt)("inlineCode",{parentName:"p"},"Height")," parameter. Height is measured in pixels."),(0,s.kt)("img",{src:"https://i.imgur.com/GzPRWkS.png",alt:"Blazor Progress - Height"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#height"},"See demo here.")),(0,s.kt)("h3",{id:"backgrounds"},"Backgrounds"),(0,s.kt)("p",null,"Use the ",(0,s.kt)("inlineCode",{parentName:"p"},"Color")," parameter or the ",(0,s.kt)("inlineCode",{parentName:"p"},"SetColor(ProgressColor color)")," method to change the appearance of individual Blazor ProgressBar components."),(0,s.kt)("img",{src:"https://i.imgur.com/QkG4fyX.png",alt:"Blazor Progress - Backgrounds"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#backgrounds"},"See demo here.")),(0,s.kt)("h3",{id:"set-background-programmatically"},"Set background programmatically"),(0,s.kt)("p",null,"You can dynamically set the Blazor ProgressBar color by calling the ",(0,s.kt)("inlineCode",{parentName:"p"},"SetColor()")," method."),(0,s.kt)("img",{src:"https://i.imgur.com/rXnCzk1.png",alt:"Blazor Progress - Set background programmatically"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n
\n \n \n \n \n \n \n \n
\n')),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n ProgressBar progressBar;\n private void SetColor(ProgressColor color) => progressBar.SetColor(color);\n}\n")),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#set-background-programmatically"},"See demo here.")),(0,s.kt)("h3",{id:"multiple-bars"},"Multiple bars"),(0,s.kt)("p",null,"Include multiple Blazor ProgressBar components in a Blazor Progress component if needed."),(0,s.kt)("img",{src:"https://i.imgur.com/PCkUVYq.png",alt:"Blazor Progress - Multiple bars"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n \n \n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#multiple-bars"},"See demo here.")),(0,s.kt)("h3",{id:"striped"},"Striped"),(0,s.kt)("p",null,"Add ",(0,s.kt)("inlineCode",{parentName:"p"},'Type="ProgressType.Striped"')," to any Blazor ProgressBar component to apply a stripe."),(0,s.kt)("img",{src:"https://i.imgur.com/Ggg3N6i.png",alt:"Blazor Progress - Striped"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#striped"},"See demo here.")),(0,s.kt)("h3",{id:"animated-stripes"},"Animated stripes"),(0,s.kt)("p",null,"The stripes can also be animated. Add ",(0,s.kt)("inlineCode",{parentName:"p"},'Type="ProgressType.StripedAndAnimated"')," to the Blazor ProgressBar component to animate the stripes right to the left."),(0,s.kt)("img",{src:"https://i.imgur.com/X4MpgJG.png",alt:"Blazor Progress - Animated stripes"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n')),(0,s.kt)("p",null,(0,s.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/progress#animated-stripes"},"See demo here.")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/4c198d7d.c7205ff0.js b/assets/js/4c198d7d.c7205ff0.js deleted file mode 100644 index f569f50ac..000000000 --- a/assets/js/4c198d7d.c7205ff0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[98581],{3905:(t,a,e)=>{e.d(a,{Zo:()=>p,kt:()=>g});var r=e(67294);function n(t,a,e){return a in t?Object.defineProperty(t,a,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[a]=e,t}function l(t,a){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);a&&(r=r.filter((function(a){return Object.getOwnPropertyDescriptor(t,a).enumerable}))),e.push.apply(e,r)}return e}function i(t){for(var a=1;a=0||(n[e]=t[e]);return n}(t,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(n[e]=t[e])}return n}var o=r.createContext({}),d=function(t){var a=r.useContext(o),e=a;return t&&(e="function"==typeof t?t(a):i(i({},a),t)),e},p=function(t){var a=d(t.components);return r.createElement(o.Provider,{value:a},t.children)},m="mdxType",h={inlineCode:"code",wrapper:function(t){var a=t.children;return r.createElement(r.Fragment,{},a)}},c=r.forwardRef((function(t,a){var e=t.components,n=t.mdxType,l=t.originalType,o=t.parentName,p=s(t,["components","mdxType","originalType","parentName"]),m=d(e),c=n,g=m["".concat(o,".").concat(c)]||m[c]||h[c]||l;return e?r.createElement(g,i(i({ref:a},p),{},{components:e})):r.createElement(g,i({ref:a},p))}));function g(t,a){var e=arguments,n=a&&a.mdxType;if("string"==typeof t||n){var l=e.length,i=new Array(l);i[0]=c;var s={};for(var o in a)hasOwnProperty.call(a,o)&&(s[o]=a[o]);s.originalType=t,s[m]="string"==typeof t?t:n,i[1]=s;for(var d=2;d{e.d(a,{ZP:()=>m});var r=e(87462),n=e(67294),l=e(3905),i=e(72389);function s(t){let{children:a,fallback:e}=t;return(0,i.Z)()?n.createElement(n.Fragment,null,a?.()):e??null}e(73935);function o(){let t=document.getElementById("divCarbonAd");if(t){let a=document.getElementById("_carbonads_js");a&&a.remove(),a=document.createElement("script"),a.async=!0,a.id="_carbonads_js",a.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",a.type="text/javascript",a.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(a)}return null}const d={toc:[]},p="wrapper";function m(t){let{components:a,...e}=t;return(0,l.kt)(p,(0,r.Z)({},d,e,{components:a,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(o,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},90624:(t,a,e)=>{e.r(a),e.d(a,{assets:()=>d,contentTitle:()=>s,default:()=>c,frontMatter:()=>i,metadata:()=>o,toc:()=>p});var r=e(87462),n=(e(67294),e(3905)),l=e(58034);const i={title:"Blazor Bar Chart",description:"A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.",image:"https://i.imgur.com/IX3bajc.png",sidebar_label:"Bar Chart",sidebar_position:1},s="Blazor Bar Chart",o={unversionedId:"data-visualization/bar-chart",id:"data-visualization/bar-chart",title:"Blazor Bar Chart",description:"A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.",source:"@site/docs/06-data-visualization/bar-chart.mdx",sourceDirName:"06-data-visualization",slug:"/data-visualization/bar-chart",permalink:"/data-visualization/bar-chart",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/06-data-visualization/bar-chart.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Blazor Bar Chart",description:"A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.",image:"https://i.imgur.com/IX3bajc.png",sidebar_label:"Bar Chart",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Tooltips",permalink:"/components/tooltips"},next:{title:"Doughnut Chart",permalink:"/data-visualization/doughnut-chart"}},d={},p=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"ChartData Members",id:"chartdata-members",level:2},{value:"BarChartDataset Members",id:"barchartdataset-members",level:2},{value:"BarChartDatasetDataLabels Members",id:"barchartdatasetdatalabels-members",level:2},{value:"BarChartOptions Members",id:"barchartoptions-members",level:2},{value:"Examples",id:"examples",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"How it works",id:"how-it-works",level:3},{value:"Horizontal bar chart",id:"horizontal-bar-chart",level:3},{value:"Stacked bar chart",id:"stacked-bar-chart",level:3},{value:"Locale",id:"locale",level:3},{value:"Data labels",id:"data-labels",level:3}],m={toc:p},h="wrapper";function c(t){let{components:a,...e}=t;return(0,n.kt)(h,(0,r.Z)({},m,e,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"blazor-bar-chart"},"Blazor Bar Chart"),(0,n.kt)("p",null,"A Blazor Bootstrap bar chart component is used to represent data values as vertical bars.\nIt is sometimes used to show trend data and to compare multiple data sets side by side."),(0,n.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("img",{src:"https://i.imgur.com/IX3bajc.png",alt:"Blazor Chart Component - Blazor Bar Chart"}),(0,n.kt)("h2",{id:"parameters"},"Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,n.kt)("td",{parentName:"tr",align:"left"},"int"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart height."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,n.kt)("td",{parentName:"tr",align:"left"},"int"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart width."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"methods"},"Methods"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Return type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"AddDataAsync"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Adds data to bar chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"AddDatasetAsync"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Adds dataset to bar chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"InitializeAsync"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Initialize Bar Chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"UpdateAsync"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Update Bar Chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"chartdata-members"},"ChartData Members"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Datasets"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Datasets."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Labels"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Labels."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"barchartdataset-members"},"BarChartDataset Members"),(0,n.kt)("admonition",{type:"info"},(0,n.kt)("p",{parentName:"admonition"},(0,n.kt)("strong",{parentName:"p"},"BarChartDataset")," implements ",(0,n.kt)("strong",{parentName:"p"},"IChartDataset"),".")),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BackgroundColor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BackgroundColor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BarPercentage"),(0,n.kt)("td",{parentName:"tr",align:"left"},"double"),(0,n.kt)("td",{parentName:"tr",align:"left"},"0.8"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BorderColor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderColor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BorderRadius"),(0,n.kt)("td",{parentName:"tr",align:"left"},"int"),(0,n.kt)("td",{parentName:"tr",align:"left"},"0"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Border radius."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderWidth."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"CategoryPercentage"),(0,n.kt)("td",{parentName:"tr",align:"left"},"double"),(0,n.kt)("td",{parentName:"tr",align:"left"},"0.8"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Percent (0-1) of the available width each category should be within the sample width."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Clip"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}"),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Datalabels"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"BarChartDatasetDataLabels")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the data labels"),(0,n.kt)("td",{parentName:"tr",align:"left"})),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the Data."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Hidden"),(0,n.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,n.kt)("td",{parentName:"tr",align:"left"},"false"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"HoverBackgroundColor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBackgroundColor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"HoverBorderColor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderColor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"HoverBorderWidth"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderWidth."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Label"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"The label for the dataset which appears in the legend and tooltips."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the chart type."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"XAxisID"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"The ID of the x axis to plot this dataset on."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"YAxisID"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"The ID of the y axis to plot this dataset on."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"barchartdatasetdatalabels-members"},"BarChartDatasetDataLabels Members"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Align"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"string?")),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"center")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the align."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Anchor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"string?")),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"center")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the anchor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.2")))),(0,n.kt)("h2",{id:"barchartoptions-members"},"BarChartOptions Members"),(0,n.kt)("admonition",{type:"info"},(0,n.kt)("p",{parentName:"admonition"},(0,n.kt)("strong",{parentName:"p"},"BarChartOptions")," implements ",(0,n.kt)("strong",{parentName:"p"},"ChartOptions"),".")),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"IndexAxis"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"x"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Interaction"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Interaction")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Interaction."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Layout"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"ChartLayout")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ChartLayout."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Locale"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"string?")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Plugins"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"BarChartPlugins")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Plugins."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,n.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,n.kt)("td",{parentName:"tr",align:"left"},"false"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Responsive."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Scales"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Scales")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Scales."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"examples"},"Examples"),(0,n.kt)("h3",{id:"prerequisites"},"Prerequisites"),(0,n.kt)("p",null,"Refer to the ",(0,n.kt)("a",{parentName:"p",href:"/getting-started/blazor-webassembly"},"getting started guide")," for setting up charts."),(0,n.kt)("h3",{id:"how-it-works"},"How it works"),(0,n.kt)("p",null,"In the following example, a categorical 12-color palette is used."),(0,n.kt)("admonition",{type:"tip"},(0,n.kt)("p",{parentName:"admonition"},"For data visualization, you can use the predefined palettes ",(0,n.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalTwelveColors")," for a 12-color palette and ",(0,n.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalSixColors")," for a 6-color palette.\nThese palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.")),(0,n.kt)("img",{src:"https://i.imgur.com/uAWY4pV.png",alt:"Blazor Bootstrap: Bar Chart Component - How it works"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n\n\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n private int datasetsCount = 0;\n private int labelsCount = 0;\n private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };\n private Random random = new();\n\n protected override void OnInitialized()\n {\n chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };\n barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await barChart.InitializeAsync(chartData, barChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is BarChartDataset barChartDataset\n && barChartDataset is not null\n && barChartDataset.Data is not null)\n {\n var count = barChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(200));\n }\n\n barChartDataset.Data = newData;\n newDatasets.Add(barChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await barChart.UpdateAsync(chartData, barChartOptions);\n }\n\n private async Task AddDatasetAsync()\n {\n if (chartData is null || chartData.Datasets is null) return;\n\n if (datasetsCount >= 12)\n return;\n\n var chartDataset = GetRandomBarChartDataset();\n chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (chartData is null || chartData.Datasets is null)\n return;\n\n if (labelsCount >= 12)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is BarChartDataset barChartDataset)\n data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200)));\n }\n\n chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n }\n\n private async Task ShowHorizontalBarChartAsync()\n {\n barChartOptions.IndexAxis = "y";\n await barChart.UpdateAsync(chartData, barChartOptions);\n }\n\n private async Task ShowVerticalBarChartAsync()\n {\n barChartOptions.IndexAxis = "x";\n await barChart.UpdateAsync(chartData, barChartOptions);\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n datasets.Add(GetRandomBarChartDataset());\n }\n\n return datasets;\n }\n\n private BarChartDataset GetRandomBarChartDataset()\n {\n var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();\n\n datasetsCount += 1;\n\n return new BarChartDataset()\n {\n Label = $"Product {datasetsCount}",\n Data = GetRandomData(),\n BackgroundColor = new List { c.ToRgbString() },\n BorderColor = new List { c.ToRgbString() },\n BorderWidth = new List { 0 },\n };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < labelsCount; index++)\n {\n data.Add(random.Next(200));\n }\n\n return data;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n }\n\n return labels;\n }\n\n private string GetNextDataLabel()\n {\n labelsCount += 1;\n return months[labelsCount - 1];\n }\n\n #endregion Data Preparation\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#how-it-works"},"See the demo here.")),(0,n.kt)("h3",{id:"horizontal-bar-chart"},"Horizontal bar chart"),(0,n.kt)("img",{src:"https://i.imgur.com/MIMC8wz.png",alt:"Blazor Bootstrap: Bar Chart Component - Horizontal bar chart"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };\n var datasets = new List();\n\n var dataset1 = new BarChartDataset()\n {\n Data = new List { 55000, 15000, 18000, 21000 },\n BackgroundColor = new List { ColorBuilder.CategoricalTwelveColors[0] },\n BorderColor = new List { ColorBuilder.CategoricalTwelveColors[0] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset1);\n\n chartData = new ChartData { \n Labels = labels, \n Datasets = datasets };\n\n barChartOptions = new BarChartOptions();\n barChartOptions.Responsive = true;\n barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };\n barChartOptions.IndexAxis = "y";\n\n barChartOptions.Scales.X.Title.Text = "Visitors";\n barChartOptions.Scales.X.Title.Display = true;\n\n barChartOptions.Scales.Y.Title.Text = "Browser";\n barChartOptions.Scales.Y.Title.Display = true;\n\n barChartOptions.Plugins.Legend.Display = false;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await barChart.InitializeAsync(chartData, barChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#horizontal-bar-chart"},"See the demo here.")),(0,n.kt)("h3",{id:"stacked-bar-chart"},"Stacked bar chart"),(0,n.kt)("img",{src:"https://i.imgur.com/jMIvDFZ.png",alt:"Blazor Bootstrap: Bar Chart Component - Stacked bar chart"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };\n var datasets = new List();\n\n var dataset1 = new BarChartDataset()\n {\n Label = "Windows",\n Data = new List { 28000, 8000, 2000, 17000 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new BarChartDataset()\n {\n Label = "macOS",\n Data = new List { 8000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new BarChartDataset()\n {\n Label = "Other",\n Data = new List { 28000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n barChartOptions = new();\n barChartOptions.Responsive = true;\n barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };\n barChartOptions.IndexAxis = "y";\n\n barChartOptions.Scales.X.Title.Text = "Visitors";\n barChartOptions.Scales.X.Title.Display = true;\n\n barChartOptions.Scales.Y.Title.Text = "Browser";\n barChartOptions.Scales.Y.Title.Display = true;\n\n barChartOptions.Scales.X.Stacked = true;\n barChartOptions.Scales.Y.Stacked = true;\n\n barChartOptions.Plugins.Title.Text = "Operating system";\n barChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await barChart.InitializeAsync(chartData, barChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#stacked-bar-chart"},"See the demo here.")),(0,n.kt)("h3",{id:"locale"},"Locale"),(0,n.kt)("p",null,"By default, the chart is using the default locale of the platform on which it is running.\nIn the following example, you will see the chart in the ",(0,n.kt)("strong",{parentName:"p"},"German")," locale (",(0,n.kt)("strong",{parentName:"p"},"de_DE"),")."),(0,n.kt)("img",{src:"https://i.imgur.com/3qndkPO.png",alt:"Blazor Bootstrap: Bar Chart Component - Locale"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };\n var datasets = new List();\n\n var dataset1 = new BarChartDataset()\n {\n Label = "Windows",\n Data = new List { 28000, 8000, 2000, 17000 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new BarChartDataset()\n {\n Label = "macOS",\n Data = new List { 8000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new BarChartDataset()\n {\n Label = "Other",\n Data = new List { 28000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n barChartOptions = new();\n barChartOptions.Locale = "de-DE";\n barChartOptions.Responsive = true;\n barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };\n barChartOptions.IndexAxis = "y";\n\n barChartOptions.Scales.X.Title.Text = "Visitors";\n barChartOptions.Scales.X.Title.Display = true;\n\n barChartOptions.Scales.Y.Title.Text = "Browser";\n barChartOptions.Scales.Y.Title.Display = true;\n\n barChartOptions.Scales.X.Stacked = true;\n barChartOptions.Scales.Y.Stacked = true;\n\n barChartOptions.Plugins.Title.Text = "Operating system";\n barChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await barChart.InitializeAsync(chartData, barChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#locale"},"See the demo here.")),(0,n.kt)("h3",{id:"data-labels"},"Data labels"),(0,n.kt)("img",{src:"https://i.imgur.com/em6943w.png",alt:"Blazor Bootstrap: Bar Chart Component - Data labels"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{72} showLineNumbers","{72}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };\n var datasets = new List();\n\n var dataset1 = new BarChartDataset()\n {\n Label = "Windows",\n Data = new List { 28000, 8000, 2000, 17000 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new BarChartDataset()\n {\n Label = "macOS",\n Data = new List { 8000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new BarChartDataset()\n {\n Label = "Other",\n Data = new List { 28000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n barChartOptions = new();\n barChartOptions.Responsive = true;\n barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };\n barChartOptions.IndexAxis = "y";\n\n barChartOptions.Scales.X.Title.Text = "Visitors";\n barChartOptions.Scales.X.Title.Display = true;\n\n barChartOptions.Scales.Y.Title.Text = "Browser";\n barChartOptions.Scales.Y.Title.Display = true;\n\n barChartOptions.Scales.X.Stacked = true;\n barChartOptions.Scales.Y.Stacked = true;\n\n barChartOptions.Plugins.Title.Text = "Operating system";\n barChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n // pass the plugin name to enable the data labels\n await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { "ChartDataLabels" });\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#data-labels"},"See the demo here.")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/4c198d7d.d9200fff.js b/assets/js/4c198d7d.d9200fff.js new file mode 100644 index 000000000..dafdff9ba --- /dev/null +++ b/assets/js/4c198d7d.d9200fff.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[98581],{3905:(t,a,e)=>{e.d(a,{Zo:()=>p,kt:()=>g});var r=e(67294);function n(t,a,e){return a in t?Object.defineProperty(t,a,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[a]=e,t}function l(t,a){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);a&&(r=r.filter((function(a){return Object.getOwnPropertyDescriptor(t,a).enumerable}))),e.push.apply(e,r)}return e}function i(t){for(var a=1;a=0||(n[e]=t[e]);return n}(t,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(n[e]=t[e])}return n}var o=r.createContext({}),d=function(t){var a=r.useContext(o),e=a;return t&&(e="function"==typeof t?t(a):i(i({},a),t)),e},p=function(t){var a=d(t.components);return r.createElement(o.Provider,{value:a},t.children)},m="mdxType",h={inlineCode:"code",wrapper:function(t){var a=t.children;return r.createElement(r.Fragment,{},a)}},c=r.forwardRef((function(t,a){var e=t.components,n=t.mdxType,l=t.originalType,o=t.parentName,p=s(t,["components","mdxType","originalType","parentName"]),m=d(e),c=n,g=m["".concat(o,".").concat(c)]||m[c]||h[c]||l;return e?r.createElement(g,i(i({ref:a},p),{},{components:e})):r.createElement(g,i({ref:a},p))}));function g(t,a){var e=arguments,n=a&&a.mdxType;if("string"==typeof t||n){var l=e.length,i=new Array(l);i[0]=c;var s={};for(var o in a)hasOwnProperty.call(a,o)&&(s[o]=a[o]);s.originalType=t,s[m]="string"==typeof t?t:n,i[1]=s;for(var d=2;d{e.d(a,{ZP:()=>m});var r=e(87462),n=e(67294),l=e(3905),i=e(72389);function s(t){let{children:a,fallback:e}=t;return(0,i.Z)()?n.createElement(n.Fragment,null,a?.()):e??null}e(73935);function o(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let a=document.getElementById("_carbonads_js");a&&a.remove(),a=document.createElement("script"),a.async=!0,a.id="_carbonads_js",a.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",a.type="text/javascript",a.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),a&&t.appendChild(a)}),5e3),null}const d={toc:[]},p="wrapper";function m(t){let{components:a,...e}=t;return(0,l.kt)(p,(0,r.Z)({},d,e,{components:a,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(o,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},90624:(t,a,e)=>{e.r(a),e.d(a,{assets:()=>d,contentTitle:()=>s,default:()=>c,frontMatter:()=>i,metadata:()=>o,toc:()=>p});var r=e(87462),n=(e(67294),e(3905)),l=e(58034);const i={title:"Blazor Bar Chart",description:"A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.",image:"https://i.imgur.com/IX3bajc.png",sidebar_label:"Bar Chart",sidebar_position:1},s="Blazor Bar Chart",o={unversionedId:"data-visualization/bar-chart",id:"data-visualization/bar-chart",title:"Blazor Bar Chart",description:"A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.",source:"@site/docs/06-data-visualization/bar-chart.mdx",sourceDirName:"06-data-visualization",slug:"/data-visualization/bar-chart",permalink:"/data-visualization/bar-chart",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/06-data-visualization/bar-chart.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Blazor Bar Chart",description:"A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.",image:"https://i.imgur.com/IX3bajc.png",sidebar_label:"Bar Chart",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Tooltips",permalink:"/components/tooltips"},next:{title:"Doughnut Chart",permalink:"/data-visualization/doughnut-chart"}},d={},p=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"ChartData Members",id:"chartdata-members",level:2},{value:"BarChartDataset Members",id:"barchartdataset-members",level:2},{value:"BarChartDatasetDataLabels Members",id:"barchartdatasetdatalabels-members",level:2},{value:"BarChartOptions Members",id:"barchartoptions-members",level:2},{value:"Examples",id:"examples",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"How it works",id:"how-it-works",level:3},{value:"Horizontal bar chart",id:"horizontal-bar-chart",level:3},{value:"Stacked bar chart",id:"stacked-bar-chart",level:3},{value:"Locale",id:"locale",level:3},{value:"Data labels",id:"data-labels",level:3}],m={toc:p},h="wrapper";function c(t){let{components:a,...e}=t;return(0,n.kt)(h,(0,r.Z)({},m,e,{components:a,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"blazor-bar-chart"},"Blazor Bar Chart"),(0,n.kt)("p",null,"A Blazor Bootstrap bar chart component is used to represent data values as vertical bars.\nIt is sometimes used to show trend data and to compare multiple data sets side by side."),(0,n.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("img",{src:"https://i.imgur.com/IX3bajc.png",alt:"Blazor Chart Component - Blazor Bar Chart"}),(0,n.kt)("h2",{id:"parameters"},"Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Height"),(0,n.kt)("td",{parentName:"tr",align:"left"},"int"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart height."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Width"),(0,n.kt)("td",{parentName:"tr",align:"left"},"int"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets chart width."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"methods"},"Methods"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Return type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"AddDataAsync"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Adds data to bar chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"AddDatasetAsync"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"ChartData")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Adds dataset to bar chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"InitializeAsync"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Initialize Bar Chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"UpdateAsync"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Task"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Update Bar Chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"chartdata-members"},"ChartData Members"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Datasets"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Datasets."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Labels"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Labels."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"barchartdataset-members"},"BarChartDataset Members"),(0,n.kt)("admonition",{type:"info"},(0,n.kt)("p",{parentName:"admonition"},(0,n.kt)("strong",{parentName:"p"},"BarChartDataset")," implements ",(0,n.kt)("strong",{parentName:"p"},"IChartDataset"),".")),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BackgroundColor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BackgroundColor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BarPercentage"),(0,n.kt)("td",{parentName:"tr",align:"left"},"double"),(0,n.kt)("td",{parentName:"tr",align:"left"},"0.8"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BorderColor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderColor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BorderRadius"),(0,n.kt)("td",{parentName:"tr",align:"left"},"int"),(0,n.kt)("td",{parentName:"tr",align:"left"},"0"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Border radius."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"BorderWidth"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the BorderWidth."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"CategoryPercentage"),(0,n.kt)("td",{parentName:"tr",align:"left"},"double"),(0,n.kt)("td",{parentName:"tr",align:"left"},"0.8"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Percent (0-1) of the available width each category should be within the sample width."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Clip"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}"),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Datalabels"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"BarChartDatasetDataLabels")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the data labels"),(0,n.kt)("td",{parentName:"tr",align:"left"})),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Data"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the Data."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Hidden"),(0,n.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,n.kt)("td",{parentName:"tr",align:"left"},"false"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"HoverBackgroundColor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBackgroundColor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"HoverBorderColor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderColor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"HoverBorderWidth"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"List")),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the HoverBorderWidth."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Label"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"The label for the dataset which appears in the legend and tooltips."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Get or sets the chart type."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"XAxisID"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"The ID of the x axis to plot this dataset on."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"YAxisID"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"null"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"The ID of the y axis to plot this dataset on."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"barchartdatasetdatalabels-members"},"BarChartDatasetDataLabels Members"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Align"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"string?")),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"center")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the align."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Anchor"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"string?")),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"center")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the anchor."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.2")))),(0,n.kt)("h2",{id:"barchartoptions-members"},"BarChartOptions Members"),(0,n.kt)("admonition",{type:"info"},(0,n.kt)("p",{parentName:"admonition"},(0,n.kt)("strong",{parentName:"p"},"BarChartOptions")," implements ",(0,n.kt)("strong",{parentName:"p"},"ChartOptions"),".")),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Property Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"IndexAxis"),(0,n.kt)("td",{parentName:"tr",align:"left"},"string"),(0,n.kt)("td",{parentName:"tr",align:"left"},"x"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Interaction"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Interaction")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Interaction."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Layout"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"ChartLayout")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the ChartLayout."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Locale"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"string?")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Plugins"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"BarChartPlugins")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Plugins."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.2")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Responsive"),(0,n.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,n.kt)("td",{parentName:"tr",align:"left"},"false"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Responsive."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Scales"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Scales")),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the Scales."),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.0.0")))),(0,n.kt)("h2",{id:"examples"},"Examples"),(0,n.kt)("h3",{id:"prerequisites"},"Prerequisites"),(0,n.kt)("p",null,"Refer to the ",(0,n.kt)("a",{parentName:"p",href:"/getting-started/blazor-webassembly"},"getting started guide")," for setting up charts."),(0,n.kt)("h3",{id:"how-it-works"},"How it works"),(0,n.kt)("p",null,"In the following example, a categorical 12-color palette is used."),(0,n.kt)("admonition",{type:"tip"},(0,n.kt)("p",{parentName:"admonition"},"For data visualization, you can use the predefined palettes ",(0,n.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalTwelveColors")," for a 12-color palette and ",(0,n.kt)("inlineCode",{parentName:"p"},"ColorBuilder.CategoricalSixColors")," for a 6-color palette.\nThese palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.")),(0,n.kt)("img",{src:"https://i.imgur.com/uAWY4pV.png",alt:"Blazor Bootstrap: Bar Chart Component - How it works"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n\n\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n private int datasetsCount = 0;\n private int labelsCount = 0;\n private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };\n private Random random = new();\n\n protected override void OnInitialized()\n {\n chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };\n barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await barChart.InitializeAsync(chartData, barChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n\n private async Task RandomizeAsync()\n {\n if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;\n\n var newDatasets = new List();\n\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is BarChartDataset barChartDataset\n && barChartDataset is not null\n && barChartDataset.Data is not null)\n {\n var count = barChartDataset.Data.Count;\n\n var newData = new List();\n for (var i = 0; i < count; i++)\n {\n newData.Add(random.Next(200));\n }\n\n barChartDataset.Data = newData;\n newDatasets.Add(barChartDataset);\n }\n }\n\n chartData.Datasets = newDatasets;\n\n await barChart.UpdateAsync(chartData, barChartOptions);\n }\n\n private async Task AddDatasetAsync()\n {\n if (chartData is null || chartData.Datasets is null) return;\n\n if (datasetsCount >= 12)\n return;\n\n var chartDataset = GetRandomBarChartDataset();\n chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions);\n }\n\n private async Task AddDataAsync()\n {\n if (chartData is null || chartData.Datasets is null)\n return;\n\n if (labelsCount >= 12)\n return;\n\n var data = new List();\n foreach (var dataset in chartData.Datasets)\n {\n if (dataset is BarChartDataset barChartDataset)\n data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200)));\n }\n\n chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data);\n }\n\n private async Task ShowHorizontalBarChartAsync()\n {\n barChartOptions.IndexAxis = "y";\n await barChart.UpdateAsync(chartData, barChartOptions);\n }\n\n private async Task ShowVerticalBarChartAsync()\n {\n barChartOptions.IndexAxis = "x";\n await barChart.UpdateAsync(chartData, barChartOptions);\n }\n\n #region Data Preparation\n\n private List GetDefaultDataSets(int numberOfDatasets)\n {\n var datasets = new List();\n\n for (var index = 0; index < numberOfDatasets; index++)\n {\n datasets.Add(GetRandomBarChartDataset());\n }\n\n return datasets;\n }\n\n private BarChartDataset GetRandomBarChartDataset()\n {\n var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();\n\n datasetsCount += 1;\n\n return new BarChartDataset()\n {\n Label = $"Product {datasetsCount}",\n Data = GetRandomData(),\n BackgroundColor = new List { c.ToRgbString() },\n BorderColor = new List { c.ToRgbString() },\n BorderWidth = new List { 0 },\n };\n }\n\n private List GetRandomData()\n {\n var data = new List();\n for (var index = 0; index < labelsCount; index++)\n {\n data.Add(random.Next(200));\n }\n\n return data;\n }\n\n private List GetDefaultDataLabels(int numberOfLabels)\n {\n var labels = new List();\n for (var index = 0; index < numberOfLabels; index++)\n {\n labels.Add(GetNextDataLabel());\n }\n\n return labels;\n }\n\n private string GetNextDataLabel()\n {\n labelsCount += 1;\n return months[labelsCount - 1];\n }\n\n #endregion Data Preparation\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#how-it-works"},"See the demo here.")),(0,n.kt)("h3",{id:"horizontal-bar-chart"},"Horizontal bar chart"),(0,n.kt)("img",{src:"https://i.imgur.com/MIMC8wz.png",alt:"Blazor Bootstrap: Bar Chart Component - Horizontal bar chart"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };\n var datasets = new List();\n\n var dataset1 = new BarChartDataset()\n {\n Data = new List { 55000, 15000, 18000, 21000 },\n BackgroundColor = new List { ColorBuilder.CategoricalTwelveColors[0] },\n BorderColor = new List { ColorBuilder.CategoricalTwelveColors[0] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset1);\n\n chartData = new ChartData { \n Labels = labels, \n Datasets = datasets };\n\n barChartOptions = new BarChartOptions();\n barChartOptions.Responsive = true;\n barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };\n barChartOptions.IndexAxis = "y";\n\n barChartOptions.Scales.X.Title.Text = "Visitors";\n barChartOptions.Scales.X.Title.Display = true;\n\n barChartOptions.Scales.Y.Title.Text = "Browser";\n barChartOptions.Scales.Y.Title.Display = true;\n\n barChartOptions.Plugins.Legend.Display = false;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await barChart.InitializeAsync(chartData, barChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#horizontal-bar-chart"},"See the demo here.")),(0,n.kt)("h3",{id:"stacked-bar-chart"},"Stacked bar chart"),(0,n.kt)("img",{src:"https://i.imgur.com/jMIvDFZ.png",alt:"Blazor Bootstrap: Bar Chart Component - Stacked bar chart"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };\n var datasets = new List();\n\n var dataset1 = new BarChartDataset()\n {\n Label = "Windows",\n Data = new List { 28000, 8000, 2000, 17000 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new BarChartDataset()\n {\n Label = "macOS",\n Data = new List { 8000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new BarChartDataset()\n {\n Label = "Other",\n Data = new List { 28000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n barChartOptions = new();\n barChartOptions.Responsive = true;\n barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };\n barChartOptions.IndexAxis = "y";\n\n barChartOptions.Scales.X.Title.Text = "Visitors";\n barChartOptions.Scales.X.Title.Display = true;\n\n barChartOptions.Scales.Y.Title.Text = "Browser";\n barChartOptions.Scales.Y.Title.Display = true;\n\n barChartOptions.Scales.X.Stacked = true;\n barChartOptions.Scales.Y.Stacked = true;\n\n barChartOptions.Plugins.Title.Text = "Operating system";\n barChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await barChart.InitializeAsync(chartData, barChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#stacked-bar-chart"},"See the demo here.")),(0,n.kt)("h3",{id:"locale"},"Locale"),(0,n.kt)("p",null,"By default, the chart is using the default locale of the platform on which it is running.\nIn the following example, you will see the chart in the ",(0,n.kt)("strong",{parentName:"p"},"German")," locale (",(0,n.kt)("strong",{parentName:"p"},"de_DE"),")."),(0,n.kt)("img",{src:"https://i.imgur.com/3qndkPO.png",alt:"Blazor Bootstrap: Bar Chart Component - Locale"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };\n var datasets = new List();\n\n var dataset1 = new BarChartDataset()\n {\n Label = "Windows",\n Data = new List { 28000, 8000, 2000, 17000 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new BarChartDataset()\n {\n Label = "macOS",\n Data = new List { 8000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new BarChartDataset()\n {\n Label = "Other",\n Data = new List { 28000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n barChartOptions = new();\n barChartOptions.Locale = "de-DE";\n barChartOptions.Responsive = true;\n barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };\n barChartOptions.IndexAxis = "y";\n\n barChartOptions.Scales.X.Title.Text = "Visitors";\n barChartOptions.Scales.X.Title.Display = true;\n\n barChartOptions.Scales.Y.Title.Text = "Browser";\n barChartOptions.Scales.Y.Title.Display = true;\n\n barChartOptions.Scales.X.Stacked = true;\n barChartOptions.Scales.Y.Stacked = true;\n\n barChartOptions.Plugins.Title.Text = "Operating system";\n barChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n await barChart.InitializeAsync(chartData, barChartOptions);\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#locale"},"See the demo here.")),(0,n.kt)("h3",{id:"data-labels"},"Data labels"),(0,n.kt)("img",{src:"https://i.imgur.com/em6943w.png",alt:"Blazor Bootstrap: Bar Chart Component - Data labels"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n')),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cs",metastring:"{72} showLineNumbers","{72}":!0,showLineNumbers:!0},'@code {\n private BarChart barChart = default!;\n private BarChartOptions barChartOptions = default!;\n private ChartData chartData = default!;\n\n protected override void OnInitialized()\n {\n var colors = ColorBuilder.CategoricalTwelveColors;\n\n var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };\n var datasets = new List();\n\n var dataset1 = new BarChartDataset()\n {\n Label = "Windows",\n Data = new List { 28000, 8000, 2000, 17000 },\n BackgroundColor = new List { colors[0] },\n BorderColor = new List { colors[0] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset1);\n\n var dataset2 = new BarChartDataset()\n {\n Label = "macOS",\n Data = new List { 8000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[1] },\n BorderColor = new List { colors[1] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset2);\n\n var dataset3 = new BarChartDataset()\n {\n Label = "Other",\n Data = new List { 28000, 10000, 14000, 8000 },\n BackgroundColor = new List { colors[2] },\n BorderColor = new List { colors[2] },\n BorderWidth = new List { 0 },\n };\n datasets.Add(dataset3);\n\n chartData = new ChartData\n {\n Labels = labels,\n Datasets = datasets\n };\n\n barChartOptions = new();\n barChartOptions.Responsive = true;\n barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };\n barChartOptions.IndexAxis = "y";\n\n barChartOptions.Scales.X.Title.Text = "Visitors";\n barChartOptions.Scales.X.Title.Display = true;\n\n barChartOptions.Scales.Y.Title.Text = "Browser";\n barChartOptions.Scales.Y.Title.Display = true;\n\n barChartOptions.Scales.X.Stacked = true;\n barChartOptions.Scales.Y.Stacked = true;\n\n barChartOptions.Plugins.Title.Text = "Operating system";\n barChartOptions.Plugins.Title.Display = true;\n }\n\n protected override async Task OnAfterRenderAsync(bool firstRender)\n {\n if (firstRender)\n {\n // pass the plugin name to enable the data labels\n await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { "ChartDataLabels" });\n }\n await base.OnAfterRenderAsync(firstRender);\n }\n}\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/charts/bar-chart#data-labels"},"See the demo here.")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/4fea1e02.602ebb42.js b/assets/js/4fea1e02.602ebb42.js new file mode 100644 index 000000000..30c1ab73c --- /dev/null +++ b/assets/js/4fea1e02.602ebb42.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[13939],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>d});var a=r(67294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var i=a.createContext({}),p=function(e){var t=a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},m=function(e){var t=p(e.components);return a.createElement(i.Provider,{value:t},e.children)},c="mdxType",b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(r),u=n,d=c["".concat(i,".").concat(u)]||c[u]||b[u]||o;return r?a.createElement(d,l(l({ref:t},m),{},{components:r})):a.createElement(d,l({ref:t},m))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=u;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[c]="string"==typeof e?e:n,l[1]=s;for(var p=2;p{r.d(t,{ZP:()=>c});var a=r(87462),n=r(67294),o=r(3905),l=r(72389);function s(e){let{children:t,fallback:r}=e;return(0,l.Z)()?n.createElement(n.Fragment,null,t?.()):r??null}r(73935);function i(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const p={toc:[]},m="wrapper";function c(e){let{components:t,...r}=e;return(0,o.kt)(m,(0,a.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(i,{mdxType:"RenderAd"}))))}c.isMDXComponent=!0},68963:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>u,frontMatter:()=>l,metadata:()=>i,toc:()=>m});var a=r(87462),n=(r(67294),r(3905)),o=r(58034);const l={id:"blazor-webassembly",sidebar_label:"Blazor WebAssembly",sidebar_position:1,title:"Blazor WebAssembly"},s="Layout Setup - Blazor WebAssembly",i={unversionedId:"layout/blazor-webassembly",id:"layout/blazor-webassembly",title:"Blazor WebAssembly",description:"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.",source:"@site/docs/02-layout/getting-started-webassembly.mdx",sourceDirName:"02-layout",slug:"/layout/blazor-webassembly",permalink:"/layout/blazor-webassembly",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/02-layout/getting-started-webassembly.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{id:"blazor-webassembly",sidebar_label:"Blazor WebAssembly",sidebar_position:1,title:"Blazor WebAssembly"},sidebar:"tutorialSidebar",previous:{title:"MAUI Blazor",permalink:"/getting-started/maui-blazor"},next:{title:"Blazor Server",permalink:"/layout/blazor-server"}},p={},m=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Steps",id:"steps",level:2},{value:"Starter templates",id:"starter-templates",level:2},{value:".NET 6",id:"net-6",level:3},{value:".NET 7",id:"net-7",level:3}],c={toc:m},b="wrapper";function u(e){let{components:t,...r}=e;return(0,n.kt)(b,(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"layout-setup---blazor-webassembly"},"Layout Setup - Blazor WebAssembly"),(0,n.kt)("p",null,"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework."),(0,n.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("h2",{id:"prerequisites"},"Prerequisites"),(0,n.kt)("p",null,"Assuming you followed the getting started docs for the initial setup."),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("strong",{parentName:"li"},"Blazor WebAssembly Project:")," Follow the ",(0,n.kt)("a",{parentName:"li",href:"/getting-started/blazor-webassembly"},"getting started")," steps for the initial setup."),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("strong",{parentName:"li"},"Blazor Server Project:")," Follow the ",(0,n.kt)("a",{parentName:"li",href:"/getting-started/blazor-server"},"getting started")," steps for the initial setup.")),(0,n.kt)("h2",{id:"steps"},"Steps"),(0,n.kt)("p",null,"Replace ",(0,n.kt)("strong",{parentName:"p"},"MainLayout.razor")," page code with the below code."),(0,n.kt)("admonition",{title:"NOTE",type:"danger"},(0,n.kt)("p",{parentName:"admonition"},"Remove all the CSS content from the ",(0,n.kt)("strong",{parentName:"p"},"Shared/MainLayout.razor.css")," file.")),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@inherits LayoutComponentBase\n\n
\n\n \n\n
\n
\n About\n
\n\n
\n
\n @Body\n
\n
\n
\n\n
\n\n@code {\n private Sidebar sidebar = default!;\n private IEnumerable navItems = default!;\n\n private async Task SidebarDataProvider(SidebarDataProviderRequest request)\n {\n if (navItems is null)\n navItems = GetNavItems();\n\n return await Task.FromResult(request.ApplyTo(navItems));\n }\n\n private IEnumerable GetNavItems()\n {\n navItems = new List\n {\n new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},\n new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},\n new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},\n };\n\n return navItems;\n }\n}\n')),(0,n.kt)("h2",{id:"starter-templates"},"Starter templates"),(0,n.kt)("h3",{id:"net-6"},".NET 6"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET6.BlazorWebAssemblyApp"},"Blazor Bootstrap - Blazor WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/aRV3rJm.png",alt:"Blazor Bootstrap - Blazor WebAssembly App"}))),(0,n.kt)("h3",{id:"net-7"},".NET 7"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyApp"},"Blazor Bootstrap - Blazor WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/4P8u0HR.png",alt:"Blazor Bootstrap - Blazor WebAssembly App"})),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyAppEmpty"},"Blazor Bootstrap - Blazor Empty WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/CBEoZ6P.png",alt:"Blazor Bootstrap - Blazor Empty WebAssembly App"}))))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/4fea1e02.751c8344.js b/assets/js/4fea1e02.751c8344.js deleted file mode 100644 index 815a82496..000000000 --- a/assets/js/4fea1e02.751c8344.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[13939],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>d});var a=r(67294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function l(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var i=a.createContext({}),p=function(e){var t=a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},m=function(e){var t=p(e.components);return a.createElement(i.Provider,{value:t},e.children)},c="mdxType",b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),c=p(r),u=n,d=c["".concat(i,".").concat(u)]||c[u]||b[u]||o;return r?a.createElement(d,l(l({ref:t},m),{},{components:r})):a.createElement(d,l({ref:t},m))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,l=new Array(o);l[0]=u;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[c]="string"==typeof e?e:n,l[1]=s;for(var p=2;p{r.d(t,{ZP:()=>c});var a=r(87462),n=r(67294),o=r(3905),l=r(72389);function s(e){let{children:t,fallback:r}=e;return(0,l.Z)()?n.createElement(n.Fragment,null,t?.()):r??null}r(73935);function i(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const p={toc:[]},m="wrapper";function c(e){let{components:t,...r}=e;return(0,o.kt)(m,(0,a.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(s,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(i,{mdxType:"RenderAd"}))))}c.isMDXComponent=!0},68963:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>u,frontMatter:()=>l,metadata:()=>i,toc:()=>m});var a=r(87462),n=(r(67294),r(3905)),o=r(58034);const l={id:"blazor-webassembly",sidebar_label:"Blazor WebAssembly",sidebar_position:1,title:"Blazor WebAssembly"},s="Layout Setup - Blazor WebAssembly",i={unversionedId:"layout/blazor-webassembly",id:"layout/blazor-webassembly",title:"Blazor WebAssembly",description:"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.",source:"@site/docs/02-layout/getting-started-webassembly.mdx",sourceDirName:"02-layout",slug:"/layout/blazor-webassembly",permalink:"/layout/blazor-webassembly",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/02-layout/getting-started-webassembly.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{id:"blazor-webassembly",sidebar_label:"Blazor WebAssembly",sidebar_position:1,title:"Blazor WebAssembly"},sidebar:"tutorialSidebar",previous:{title:"MAUI Blazor",permalink:"/getting-started/maui-blazor"},next:{title:"Blazor Server",permalink:"/layout/blazor-server"}},p={},m=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Steps",id:"steps",level:2},{value:"Starter templates",id:"starter-templates",level:2},{value:".NET 6",id:"net-6",level:3},{value:".NET 7",id:"net-7",level:3}],c={toc:m},b="wrapper";function u(e){let{components:t,...r}=e;return(0,n.kt)(b,(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"layout-setup---blazor-webassembly"},"Layout Setup - Blazor WebAssembly"),(0,n.kt)("p",null,"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework."),(0,n.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("h2",{id:"prerequisites"},"Prerequisites"),(0,n.kt)("p",null,"Assuming you followed the getting started docs for the initial setup."),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("strong",{parentName:"li"},"Blazor WebAssembly Project:")," Follow the ",(0,n.kt)("a",{parentName:"li",href:"/getting-started/blazor-webassembly"},"getting started")," steps for the initial setup."),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("strong",{parentName:"li"},"Blazor Server Project:")," Follow the ",(0,n.kt)("a",{parentName:"li",href:"/getting-started/blazor-server"},"getting started")," steps for the initial setup.")),(0,n.kt)("h2",{id:"steps"},"Steps"),(0,n.kt)("p",null,"Replace ",(0,n.kt)("strong",{parentName:"p"},"MainLayout.razor")," page code with the below code."),(0,n.kt)("admonition",{title:"NOTE",type:"danger"},(0,n.kt)("p",{parentName:"admonition"},"Remove all the CSS content from the ",(0,n.kt)("strong",{parentName:"p"},"Shared/MainLayout.razor.css")," file.")),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@inherits LayoutComponentBase\n\n
\n\n \n\n
\n
\n About\n
\n\n
\n
\n @Body\n
\n
\n
\n\n
\n\n@code {\n private Sidebar sidebar = default!;\n private IEnumerable navItems = default!;\n\n private async Task SidebarDataProvider(SidebarDataProviderRequest request)\n {\n if (navItems is null)\n navItems = GetNavItems();\n\n return await Task.FromResult(request.ApplyTo(navItems));\n }\n\n private IEnumerable GetNavItems()\n {\n navItems = new List\n {\n new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},\n new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},\n new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},\n };\n\n return navItems;\n }\n}\n')),(0,n.kt)("h2",{id:"starter-templates"},"Starter templates"),(0,n.kt)("h3",{id:"net-6"},".NET 6"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET6.BlazorWebAssemblyApp"},"Blazor Bootstrap - Blazor WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/aRV3rJm.png",alt:"Blazor Bootstrap - Blazor WebAssembly App"}))),(0,n.kt)("h3",{id:"net-7"},".NET 7"),(0,n.kt)("ol",null,(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyApp"},"Blazor Bootstrap - Blazor WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/4P8u0HR.png",alt:"Blazor Bootstrap - Blazor WebAssembly App"})),(0,n.kt)("li",{parentName:"ol"},(0,n.kt)("p",{parentName:"li"},(0,n.kt)("a",{parentName:"p",href:"https://github.com/vikramlearning/blazorbootstrap-starter-templates/tree/master/src/BlazorBootstrap.Templates.Starter/NET7.BlazorWebAssemblyAppEmpty"},"Blazor Bootstrap - Blazor Empty WebAssembly App")),(0,n.kt)("img",{src:"https://i.imgur.com/CBEoZ6P.png",alt:"Blazor Bootstrap - Blazor Empty WebAssembly App"}))))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5050c89c.0b9a1f96.js b/assets/js/5050c89c.0b9a1f96.js deleted file mode 100644 index 0ede59072..000000000 --- a/assets/js/5050c89c.0b9a1f96.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[67015],{3905:(e,t,l)=>{l.d(t,{Zo:()=>h,kt:()=>u});var r=l(67294);function a(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function o(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,r)}return l}function n(e){for(var t=1;t=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}var d=r.createContext({}),c=function(e){var t=r.useContext(d),l=t;return e&&(l="function"==typeof e?e(t):n(n({},t),e)),l},h=function(e){var t=c(e.components);return r.createElement(d.Provider,{value:t},e.children)},p="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var l=e.components,a=e.mdxType,o=e.originalType,d=e.parentName,h=i(e,["components","mdxType","originalType","parentName"]),p=c(l),m=a,u=p["".concat(d,".").concat(m)]||p[m]||s[m]||o;return l?r.createElement(u,n(n({ref:t},h),{},{components:l})):r.createElement(u,n({ref:t},h))}));function u(e,t){var l=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=l.length,n=new Array(o);n[0]=m;var i={};for(var d in t)hasOwnProperty.call(t,d)&&(i[d]=t[d]);i.originalType=e,i[p]="string"==typeof e?e:a,n[1]=i;for(var c=2;c{l.d(t,{ZP:()=>p});var r=l(87462),a=l(67294),o=l(3905),n=l(72389);function i(e){let{children:t,fallback:l}=e;return(0,n.Z)()?a.createElement(a.Fragment,null,t?.()):l??null}l(73935);function d(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const c={toc:[]},h="wrapper";function p(e){let{components:t,...l}=e;return(0,o.kt)(h,(0,r.Z)({},c,l,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(d,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},23764:(e,t,l)=>{l.r(t),l.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>n,metadata:()=>d,toc:()=>h});var r=l(87462),a=(l(67294),l(3905)),o=l(58034);const n={title:"Blazor Placeholder Component",description:"Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading.",image:"https://i.imgur.com/Mw13qfX.png",sidebar_label:"Placeholders",sidebar_position:16},i="Blazor Placeholders",d={unversionedId:"components/placeholders",id:"components/placeholders",title:"Blazor Placeholder Component",description:"Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading.",source:"@site/docs/05-components/placeholders.mdx",sourceDirName:"05-components",slug:"/components/placeholders",permalink:"/components/placeholders",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/placeholders.mdx",tags:[],version:"current",sidebarPosition:16,frontMatter:{title:"Blazor Placeholder Component",description:"Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading.",image:"https://i.imgur.com/Mw13qfX.png",sidebar_label:"Placeholders",sidebar_position:16},sidebar:"tutorialSidebar",previous:{title:"Pagination",permalink:"/components/pagination"},next:{title:"Preload",permalink:"/components/preload"}},c={},h=[{value:"PlaceholderContainer Parameters",id:"placeholdercontainer-parameters",level:2},{value:"Placeholder Parameters",id:"placeholder-parameters",level:2},{value:"Examples",id:"examples",level:2},{value:"Placeholders",id:"placeholders",level:3},{value:"Width",id:"width",level:3},{value:"Color",id:"color",level:3},{value:"Sizing",id:"sizing",level:3},{value:"Animation",id:"animation",level:3}],p={toc:h},s="wrapper";function m(e){let{components:t,...l}=e;return(0,a.kt)(s,(0,r.Z)({},p,l,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-placeholders"},"Blazor Placeholders"),(0,a.kt)("p",null,"Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading."),(0,a.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("h2",{id:"placeholdercontainer-parameters"},"PlaceholderContainer Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Animation"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderAnimation")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the placeholder animation."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderAnimation.Glow"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"RenderFragment")),(0,a.kt)("td",{parentName:"tr",align:null},"Specifies the content to be rendered inside this."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null})))),(0,a.kt)("h2",{id:"placeholder-parameters"},"Placeholder Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Width"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderWidth")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the placeholder width."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"PlaceholderWidth.Col1")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Color"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderColor")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the placeholder color."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"PlaceholderColor.None")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Size"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderSize")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the placeholder size."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"PlaceholderSize.None")))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"placeholders"},"Placeholders"),(0,a.kt)("img",{src:"https://i.imgur.com/Mw13qfX.png",alt:"Placeholders - Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n \n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#examples"},"See demo here.")),(0,a.kt)("h3",{id:"width"},"Width"),(0,a.kt)("p",null,"You can change the width through ",(0,a.kt)("inlineCode",{parentName:"p"},"PlaceholderWidth"),", width utilities, or inline styles."),(0,a.kt)("img",{src:"https://i.imgur.com/JcLisSd.png",alt:"Placeholders - Width Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#width"},"See demo here.")),(0,a.kt)("h3",{id:"color"},"Color"),(0,a.kt)("p",null,"By default, the placeholder uses currentColor. This can be overridden with the ",(0,a.kt)("inlineCode",{parentName:"p"},"Color")," property of type enum."),(0,a.kt)("img",{src:"https://i.imgur.com/g8m05MQ.png",alt:"Placeholders - Color Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n\n\n\n\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#color"},"See demo here.")),(0,a.kt)("h3",{id:"sizing"},"Sizing"),(0,a.kt)("p",null,"The size of placeholders are based on the typographic style of the parent element. Customize them with ",(0,a.kt)("inlineCode",{parentName:"p"},"Size")," property of type enum."),(0,a.kt)("img",{src:"https://i.imgur.com/udkkloE.png",alt:"Placeholders - Sizing Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#sizing"},"See demo here.")),(0,a.kt)("h3",{id:"animation"},"Animation"),(0,a.kt)("p",null,"Animate placeholders with ",(0,a.kt)("inlineCode",{parentName:"p"},"PlaceholderAnimation.Glow")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"PlaceholderAnimation.Wave")," to better convey the perception of something being actively loaded."),(0,a.kt)("img",{src:"https://i.imgur.com/loMuJzD.png",alt:"Placeholders - Animation Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n \n \n \n\n\n
\n
\n\n\n \n \n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#animation"},"See demo here.")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5050c89c.96057d59.js b/assets/js/5050c89c.96057d59.js new file mode 100644 index 000000000..8bfe64ebe --- /dev/null +++ b/assets/js/5050c89c.96057d59.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[67015],{3905:(e,t,l)=>{l.d(t,{Zo:()=>h,kt:()=>u});var r=l(67294);function a(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function o(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,r)}return l}function n(e){for(var t=1;t=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}var d=r.createContext({}),c=function(e){var t=r.useContext(d),l=t;return e&&(l="function"==typeof e?e(t):n(n({},t),e)),l},h=function(e){var t=c(e.components);return r.createElement(d.Provider,{value:t},e.children)},p="mdxType",s={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var l=e.components,a=e.mdxType,o=e.originalType,d=e.parentName,h=i(e,["components","mdxType","originalType","parentName"]),p=c(l),m=a,u=p["".concat(d,".").concat(m)]||p[m]||s[m]||o;return l?r.createElement(u,n(n({ref:t},h),{},{components:l})):r.createElement(u,n({ref:t},h))}));function u(e,t){var l=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=l.length,n=new Array(o);n[0]=m;var i={};for(var d in t)hasOwnProperty.call(t,d)&&(i[d]=t[d]);i.originalType=e,i[p]="string"==typeof e?e:a,n[1]=i;for(var c=2;c{l.d(t,{ZP:()=>p});var r=l(87462),a=l(67294),o=l(3905),n=l(72389);function i(e){let{children:t,fallback:l}=e;return(0,n.Z)()?a.createElement(a.Fragment,null,t?.()):l??null}l(73935);function d(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const c={toc:[]},h="wrapper";function p(e){let{components:t,...l}=e;return(0,o.kt)(h,(0,r.Z)({},c,l,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(d,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},23764:(e,t,l)=>{l.r(t),l.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>n,metadata:()=>d,toc:()=>h});var r=l(87462),a=(l(67294),l(3905)),o=l(58034);const n={title:"Blazor Placeholder Component",description:"Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading.",image:"https://i.imgur.com/Mw13qfX.png",sidebar_label:"Placeholders",sidebar_position:16},i="Blazor Placeholders",d={unversionedId:"components/placeholders",id:"components/placeholders",title:"Blazor Placeholder Component",description:"Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading.",source:"@site/docs/05-components/placeholders.mdx",sourceDirName:"05-components",slug:"/components/placeholders",permalink:"/components/placeholders",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/placeholders.mdx",tags:[],version:"current",sidebarPosition:16,frontMatter:{title:"Blazor Placeholder Component",description:"Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading.",image:"https://i.imgur.com/Mw13qfX.png",sidebar_label:"Placeholders",sidebar_position:16},sidebar:"tutorialSidebar",previous:{title:"Pagination",permalink:"/components/pagination"},next:{title:"Preload",permalink:"/components/preload"}},c={},h=[{value:"PlaceholderContainer Parameters",id:"placeholdercontainer-parameters",level:2},{value:"Placeholder Parameters",id:"placeholder-parameters",level:2},{value:"Examples",id:"examples",level:2},{value:"Placeholders",id:"placeholders",level:3},{value:"Width",id:"width",level:3},{value:"Color",id:"color",level:3},{value:"Sizing",id:"sizing",level:3},{value:"Animation",id:"animation",level:3}],p={toc:h},s="wrapper";function m(e){let{components:t,...l}=e;return(0,a.kt)(s,(0,r.Z)({},p,l,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-placeholders"},"Blazor Placeholders"),(0,a.kt)("p",null,"Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading."),(0,a.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("h2",{id:"placeholdercontainer-parameters"},"PlaceholderContainer Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Animation"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderAnimation")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the placeholder animation."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderAnimation.Glow"))),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"RenderFragment")),(0,a.kt)("td",{parentName:"tr",align:null},"Specifies the content to be rendered inside this."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null})))),(0,a.kt)("h2",{id:"placeholder-parameters"},"Placeholder Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:null},"Name"),(0,a.kt)("th",{parentName:"tr",align:null},"Type"),(0,a.kt)("th",{parentName:"tr",align:null},"Description"),(0,a.kt)("th",{parentName:"tr",align:null},"Required"),(0,a.kt)("th",{parentName:"tr",align:null},"Default"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Width"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderWidth")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the placeholder width."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"PlaceholderWidth.Col1")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Color"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderColor")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the placeholder color."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"PlaceholderColor.None")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:null},"Size"),(0,a.kt)("td",{parentName:"tr",align:null},(0,a.kt)("inlineCode",{parentName:"td"},"PlaceholderSize")),(0,a.kt)("td",{parentName:"tr",align:null},"Gets or sets the placeholder size."),(0,a.kt)("td",{parentName:"tr",align:null}),(0,a.kt)("td",{parentName:"tr",align:null},"PlaceholderSize.None")))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"placeholders"},"Placeholders"),(0,a.kt)("img",{src:"https://i.imgur.com/Mw13qfX.png",alt:"Placeholders - Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n \n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#examples"},"See demo here.")),(0,a.kt)("h3",{id:"width"},"Width"),(0,a.kt)("p",null,"You can change the width through ",(0,a.kt)("inlineCode",{parentName:"p"},"PlaceholderWidth"),", width utilities, or inline styles."),(0,a.kt)("img",{src:"https://i.imgur.com/JcLisSd.png",alt:"Placeholders - Width Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#width"},"See demo here.")),(0,a.kt)("h3",{id:"color"},"Color"),(0,a.kt)("p",null,"By default, the placeholder uses currentColor. This can be overridden with the ",(0,a.kt)("inlineCode",{parentName:"p"},"Color")," property of type enum."),(0,a.kt)("img",{src:"https://i.imgur.com/g8m05MQ.png",alt:"Placeholders - Color Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n\n\n\n\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#color"},"See demo here.")),(0,a.kt)("h3",{id:"sizing"},"Sizing"),(0,a.kt)("p",null,"The size of placeholders are based on the typographic style of the parent element. Customize them with ",(0,a.kt)("inlineCode",{parentName:"p"},"Size")," property of type enum."),(0,a.kt)("img",{src:"https://i.imgur.com/udkkloE.png",alt:"Placeholders - Sizing Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#sizing"},"See demo here.")),(0,a.kt)("h3",{id:"animation"},"Animation"),(0,a.kt)("p",null,"Animate placeholders with ",(0,a.kt)("inlineCode",{parentName:"p"},"PlaceholderAnimation.Glow")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"PlaceholderAnimation.Wave")," to better convey the perception of something being actively loaded."),(0,a.kt)("img",{src:"https://i.imgur.com/loMuJzD.png",alt:"Placeholders - Animation Example"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n \n \n \n \n\n\n
\n
\n\n\n \n \n \n \n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/placeholders#animation"},"See demo here.")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/51d6be5f.7ac66461.js b/assets/js/51d6be5f.7ac66461.js new file mode 100644 index 000000000..e4d4b81b9 --- /dev/null +++ b/assets/js/51d6be5f.7ac66461.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[85313],{3905:(t,e,o)=>{o.d(e,{Zo:()=>u,kt:()=>h});var n=o(67294);function a(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function l(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function r(t){for(var e=1;e=0||(a[o]=t[o]);return a}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(a[o]=t[o])}return a}var s=n.createContext({}),c=function(t){var e=n.useContext(s),o=e;return t&&(o="function"==typeof t?t(e):r(r({},e),t)),o},u=function(t){var e=c(t.components);return n.createElement(s.Provider,{value:e},t.children)},p="mdxType",d={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},m=n.forwardRef((function(t,e){var o=t.components,a=t.mdxType,l=t.originalType,s=t.parentName,u=i(t,["components","mdxType","originalType","parentName"]),p=c(o),m=a,h=p["".concat(s,".").concat(m)]||p[m]||d[m]||l;return o?n.createElement(h,r(r({ref:e},u),{},{components:o})):n.createElement(h,r({ref:e},u))}));function h(t,e){var o=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=o.length,r=new Array(l);r[0]=m;var i={};for(var s in e)hasOwnProperty.call(e,s)&&(i[s]=e[s]);i.originalType=t,i[p]="string"==typeof t?t:a,r[1]=i;for(var c=2;c{o.d(e,{ZP:()=>p});var n=o(87462),a=o(67294),l=o(3905),r=o(72389);function i(t){let{children:e,fallback:o}=t;return(0,r.Z)()?a.createElement(a.Fragment,null,e?.()):o??null}o(73935);function s(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),e&&t.appendChild(e)}),5e3),null}const c={toc:[]},u="wrapper";function p(t){let{components:e,...o}=t;return(0,l.kt)(u,(0,n.Z)({},c,o,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(s,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},59279:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>r,metadata:()=>s,toc:()=>u});var n=o(87462),a=(o(67294),o(3905)),l=o(58034);const r={title:"Blazor Callout Component",description:"Blazor Bootstrap callout component provides content presentation in a visually distinct manner.",image:"https://i.imgur.com/vmibzEu.png",sidebar_label:"Callout",sidebar_position:6},i="Blazor Callout",s={unversionedId:"components/callout",id:"components/callout",title:"Blazor Callout Component",description:"Blazor Bootstrap callout component provides content presentation in a visually distinct manner.",source:"@site/docs/05-components/callout.mdx",sourceDirName:"05-components",slug:"/components/callout",permalink:"/components/callout",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/callout.mdx",tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"Blazor Callout Component",description:"Blazor Bootstrap callout component provides content presentation in a visually distinct manner.",image:"https://i.imgur.com/vmibzEu.png",sidebar_label:"Callout",sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Buttons",permalink:"/components/buttons"},next:{title:"Card",permalink:"/components/card"}},c={},u=[{value:"Parameters",id:"parameters",level:2},{value:"Examples",id:"examples",level:2},{value:"Callout",id:"callout",level:3},{value:"Custom callout heading",id:"custom-callout-heading",level:3},{value:"Large text",id:"large-text",level:3}],p={toc:u},d="wrapper";function m(t){let{components:e,...o}=t;return(0,a.kt)(d,(0,n.Z)({},p,o,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-callout"},"Blazor Callout"),(0,a.kt)("p",null,"Blazor Bootstrap callout component provides content presentation in a visually distinct manner."),(0,a.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("h2",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Heading"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the callout heading.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Default")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Use ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Default")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Info")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Warning")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Danger")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Tip"))))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"callout"},"Callout"),(0,a.kt)("img",{src:"https://i.imgur.com/vmibzEu.png",alt:"Blazor Bootstrap: Callout Component - Examples"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,5,9,13,17} showLineNumbers","{1,5,9,13,17}":!0,showLineNumbers:!0},'\n This is an default callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an danger callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an warning callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an info callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an tip callout. Example text to show it in action. See callout documentation.\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/callout#examples"},"See callout default demo here.")),(0,a.kt)("h3",{id:"custom-callout-heading"},"Custom callout heading"),(0,a.kt)("img",{src:"https://i.imgur.com/gaZkJqo.png",alt:"Blazor Bootstrap: Callout Component - Custom callout heading"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,5,9,13,17} showLineNumbers","{1,5,9,13,17}":!0,showLineNumbers:!0},'\n This is an default callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an danger callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an warning callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an info callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an tip callout. Example text to show it in action. See callout documentation.\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/callout#custom-callout-heading"},"See callout danger demo here.")),(0,a.kt)("h3",{id:"large-text"},"Large text"),(0,a.kt)("img",{src:"https://i.imgur.com/m4LeerM.png",alt:"Blazor Bootstrap: Callout Component - Large text"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n\n\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n\n\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n\n\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n\n\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/callout#large-text"},"See callout warning demo here.")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/51d6be5f.9bdbbaa0.js b/assets/js/51d6be5f.9bdbbaa0.js deleted file mode 100644 index 4345b3440..000000000 --- a/assets/js/51d6be5f.9bdbbaa0.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[85313],{3905:(t,e,o)=>{o.d(e,{Zo:()=>p,kt:()=>h});var n=o(67294);function a(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function l(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,n)}return o}function r(t){for(var e=1;e=0||(a[o]=t[o]);return a}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(a[o]=t[o])}return a}var s=n.createContext({}),c=function(t){var e=n.useContext(s),o=e;return t&&(o="function"==typeof t?t(e):r(r({},e),t)),o},p=function(t){var e=c(t.components);return n.createElement(s.Provider,{value:e},t.children)},u="mdxType",d={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},m=n.forwardRef((function(t,e){var o=t.components,a=t.mdxType,l=t.originalType,s=t.parentName,p=i(t,["components","mdxType","originalType","parentName"]),u=c(o),m=a,h=u["".concat(s,".").concat(m)]||u[m]||d[m]||l;return o?n.createElement(h,r(r({ref:e},p),{},{components:o})):n.createElement(h,r({ref:e},p))}));function h(t,e){var o=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=o.length,r=new Array(l);r[0]=m;var i={};for(var s in e)hasOwnProperty.call(e,s)&&(i[s]=e[s]);i.originalType=t,i[u]="string"==typeof t?t:a,r[1]=i;for(var c=2;c{o.d(e,{ZP:()=>u});var n=o(87462),a=o(67294),l=o(3905),r=o(72389);function i(t){let{children:e,fallback:o}=t;return(0,r.Z)()?a.createElement(a.Fragment,null,e?.()):o??null}o(73935);function s(){let t=document.getElementById("divCarbonAd");if(t){let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(e)}return null}const c={toc:[]},p="wrapper";function u(t){let{components:e,...o}=t;return(0,l.kt)(p,(0,n.Z)({},c,o,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(s,{mdxType:"RenderAd"}))))}u.isMDXComponent=!0},59279:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>c,contentTitle:()=>i,default:()=>m,frontMatter:()=>r,metadata:()=>s,toc:()=>p});var n=o(87462),a=(o(67294),o(3905)),l=o(58034);const r={title:"Blazor Callout Component",description:"Blazor Bootstrap callout component provides content presentation in a visually distinct manner.",image:"https://i.imgur.com/vmibzEu.png",sidebar_label:"Callout",sidebar_position:6},i="Blazor Callout",s={unversionedId:"components/callout",id:"components/callout",title:"Blazor Callout Component",description:"Blazor Bootstrap callout component provides content presentation in a visually distinct manner.",source:"@site/docs/05-components/callout.mdx",sourceDirName:"05-components",slug:"/components/callout",permalink:"/components/callout",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/callout.mdx",tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"Blazor Callout Component",description:"Blazor Bootstrap callout component provides content presentation in a visually distinct manner.",image:"https://i.imgur.com/vmibzEu.png",sidebar_label:"Callout",sidebar_position:6},sidebar:"tutorialSidebar",previous:{title:"Buttons",permalink:"/components/buttons"},next:{title:"Card",permalink:"/components/card"}},c={},p=[{value:"Parameters",id:"parameters",level:2},{value:"Examples",id:"examples",level:2},{value:"Callout",id:"callout",level:3},{value:"Custom callout heading",id:"custom-callout-heading",level:3},{value:"Large text",id:"large-text",level:3}],u={toc:p},d="wrapper";function m(t){let{components:e,...o}=t;return(0,a.kt)(d,(0,n.Z)({},u,o,{components:e,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"blazor-callout"},"Blazor Callout"),(0,a.kt)("p",null,"Blazor Bootstrap callout component provides content presentation in a visually distinct manner."),(0,a.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,a.kt)("h2",{id:"parameters"},"Parameters"),(0,a.kt)("table",null,(0,a.kt)("thead",{parentName:"table"},(0,a.kt)("tr",{parentName:"thead"},(0,a.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,a.kt)("th",{parentName:"tr",align:"left"},"Description"))),(0,a.kt)("tbody",{parentName:"table"},(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,a.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,a.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Heading"),(0,a.kt)("td",{parentName:"tr",align:"left"},"string"),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the callout heading.")),(0,a.kt)("tr",{parentName:"tbody"},(0,a.kt)("td",{parentName:"tr",align:"left"},"Type"),(0,a.kt)("td",{parentName:"tr",align:"left"},"enum"),(0,a.kt)("td",{parentName:"tr",align:"left"},(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Default")),(0,a.kt)("td",{parentName:"tr",align:"left"}),(0,a.kt)("td",{parentName:"tr",align:"left"},"Use ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Default")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Info")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Warning")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Danger")," or ",(0,a.kt)("inlineCode",{parentName:"td"},"CalloutType.Tip"))))),(0,a.kt)("h2",{id:"examples"},"Examples"),(0,a.kt)("h3",{id:"callout"},"Callout"),(0,a.kt)("img",{src:"https://i.imgur.com/vmibzEu.png",alt:"Blazor Bootstrap: Callout Component - Examples"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,5,9,13,17} showLineNumbers","{1,5,9,13,17}":!0,showLineNumbers:!0},'\n This is an default callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an danger callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an warning callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an info callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an tip callout. Example text to show it in action. See callout documentation.\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/callout#examples"},"See callout default demo here.")),(0,a.kt)("h3",{id:"custom-callout-heading"},"Custom callout heading"),(0,a.kt)("img",{src:"https://i.imgur.com/gaZkJqo.png",alt:"Blazor Bootstrap: Callout Component - Custom callout heading"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1,5,9,13,17} showLineNumbers","{1,5,9,13,17}":!0,showLineNumbers:!0},'\n This is an default callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an danger callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an warning callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an info callout. Example text to show it in action. See callout documentation.\n\n\n\n This is an tip callout. Example text to show it in action. See callout documentation.\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/callout#custom-callout-heading"},"See callout danger demo here.")),(0,a.kt)("h3",{id:"large-text"},"Large text"),(0,a.kt)("img",{src:"https://i.imgur.com/m4LeerM.png",alt:"Blazor Bootstrap: Callout Component - Large text"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n\n\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n\n\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n\n\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n\n\n

Conveying meaning to assistive technologies

\n

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies \u2013 such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

\n\n')),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/callout#large-text"},"See callout warning demo here.")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/61658309.111d1008.js b/assets/js/61658309.111d1008.js new file mode 100644 index 000000000..6612c6e11 --- /dev/null +++ b/assets/js/61658309.111d1008.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[10453],{3905:(t,e,a)=>{a.d(e,{Zo:()=>m,kt:()=>u});var r=a(67294);function n(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function l(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,r)}return a}function d(t){for(var e=1;e=0||(n[a]=t[a]);return n}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(n[a]=t[a])}return n}var i=r.createContext({}),s=function(t){var e=r.useContext(i),a=e;return t&&(a="function"==typeof t?t(e):d(d({},e),t)),a},m=function(t){var e=s(t.components);return r.createElement(i.Provider,{value:e},t.children)},p="mdxType",c={inlineCode:"code",wrapper:function(t){var e=t.children;return r.createElement(r.Fragment,{},e)}},C=r.forwardRef((function(t,e){var a=t.components,n=t.mdxType,l=t.originalType,i=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),p=s(a),C=n,u=p["".concat(i,".").concat(C)]||p[C]||c[C]||l;return a?r.createElement(u,d(d({ref:e},m),{},{components:a})):r.createElement(u,d({ref:e},m))}));function u(t,e){var a=arguments,n=e&&e.mdxType;if("string"==typeof t||n){var l=a.length,d=new Array(l);d[0]=C;var o={};for(var i in e)hasOwnProperty.call(e,i)&&(o[i]=e[i]);o.originalType=t,o[p]="string"==typeof t?t:n,d[1]=o;for(var s=2;s{a.d(e,{ZP:()=>p});var r=a(87462),n=a(67294),l=a(3905),d=a(72389);function o(t){let{children:e,fallback:a}=t;return(0,d.Z)()?n.createElement(n.Fragment,null,e?.()):a??null}a(73935);function i(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),e&&t.appendChild(e)}),5e3),null}const s={toc:[]},m="wrapper";function p(t){let{components:e,...a}=t;return(0,l.kt)(m,(0,r.Z)({},s,a,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(i,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},81459:(t,e,a)=>{a.r(e),a.d(e,{assets:()=>s,contentTitle:()=>o,default:()=>C,frontMatter:()=>d,metadata:()=>i,toc:()=>m});var r=a(87462),n=(a(67294),a(3905)),l=a(58034);const d={title:"Blazor Card Component",description:"BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.",image:"https://i.imgur.com/RhytwPa.png",sidebar_label:"Card",sidebar_position:7},o="Blazor Card",i={unversionedId:"components/card",id:"components/card",title:"Blazor Card Component",description:"BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.",source:"@site/docs/05-components/card.mdx",sourceDirName:"05-components",slug:"/components/card",permalink:"/components/card",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/card.mdx",tags:[],version:"current",sidebarPosition:7,frontMatter:{title:"Blazor Card Component",description:"BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.",image:"https://i.imgur.com/RhytwPa.png",sidebar_label:"Card",sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Callout",permalink:"/components/callout"},next:{title:"Charts",permalink:"/components/charts"}},s={},m=[{value:"About",id:"about",level:2},{value:"Parameters",id:"parameters",level:2},{value:"Card Parameters",id:"card-parameters",level:3},{value:"CardBody Parameters",id:"cardbody-parameters",level:3},{value:"CardFooter Parameters",id:"cardfooter-parameters",level:3},{value:"CardGroup Parameters",id:"cardgroup-parameters",level:3},{value:"CardHeader Parameters",id:"cardheader-parameters",level:3},{value:"CardLink Parameters",id:"cardlink-parameters",level:3},{value:"CardSubTitle Parameters",id:"cardsubtitle-parameters",level:3},{value:"CardText Parameters",id:"cardtext-parameters",level:3},{value:"CardTitle Parameters",id:"cardtitle-parameters",level:3},{value:"Examples",id:"examples",level:2},{value:"Card",id:"card",level:3},{value:"Content types",id:"content-types",level:3},{value:"Body",id:"body",level:3},{value:"Titles, text, and links",id:"titles-text-and-links",level:3},{value:"Images",id:"images",level:3},{value:"List groups",id:"list-groups",level:3},{value:"Kitchen sink",id:"kitchen-sink",level:3},{value:"Header and footer",id:"header-and-footer",level:3},{value:"Sizing",id:"sizing",level:3},{value:"Text alignment",id:"text-alignment",level:3},{value:"Background and color",id:"background-and-color",level:3},{value:"Card groups",id:"card-groups",level:3},{value:"Card groups with footer",id:"card-groups-with-footer",level:3}],p={toc:m},c="wrapper";function C(t){let{components:e,...a}=t;return(0,n.kt)(c,(0,r.Z)({},p,a,{components:e,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"blazor-card"},"Blazor Card"),(0,n.kt)("p",null,"BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options."),(0,n.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("img",{src:"https://i.imgur.com/RhytwPa.png",alt:"Blazor Bootstrap: Card component"}),(0,n.kt)("h2",{id:"about"},"About"),(0,n.kt)("p",null,"A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options."),(0,n.kt)("h2",{id:"parameters"},"Parameters"),(0,n.kt)("h3",{id:"card-parameters"},"Card Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Color"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"CardColor")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the card color."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"CardColor.None")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"TextAlignment"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Alignment")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the text alignment of the card."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Alignment.None")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardbody-parameters"},"CardBody Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardfooter-parameters"},"CardFooter Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardgroup-parameters"},"CardGroup Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardheader-parameters"},"CardHeader Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Color"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"CardColor")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the card color."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"CardColor.None")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.4")))),(0,n.kt)("h3",{id:"cardlink-parameters"},"CardLink Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Disabled"),(0,n.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,n.kt)("td",{parentName:"tr",align:"left"},"When set to 'true', disables the component's functionality and places it in a disabled state."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"To"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"string?")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the target route."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Target"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Target")),(0,n.kt)("td",{parentName:"tr",align:"left"},"The target attribute specifies where to open the linked document."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Target.None")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"TabIndex"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"int?")),(0,n.kt)("td",{parentName:"tr",align:"left"},"If defined, indicates that its element can be focused and can participates in sequential keyboard navigation."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardsubtitle-parameters"},"CardSubTitle Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Size"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"HeadingSize")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the heading size."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"HeadingSize.H6")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardtext-parameters"},"CardText Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardtitle-parameters"},"CardTitle Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Size"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"HeadingSize")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the heading size."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"HeadingSize.H5")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h2",{id:"examples"},"Examples"),(0,n.kt)("h3",{id:"card"},"Card"),(0,n.kt)("p",null,"Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element."),(0,n.kt)("img",{src:"https://i.imgur.com/wT0LXMG.png",alt:"Blazor Bootstrap: Card Component - Examples"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n Card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#examples"},"See the demo here.")),(0,n.kt)("h3",{id:"content-types"},"Content types"),(0,n.kt)("p",null,"Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what\u2019s supported."),(0,n.kt)("h3",{id:"body"},"Body"),(0,n.kt)("p",null,"The building block of a card is the CardBody. Use it whenever you need a padded section within a card."),(0,n.kt)("img",{src:"https://i.imgur.com/jkWQdNr.png",alt:"Blazor Bootstrap: Card Component - Body"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"\n \n This is some text within a card body.\n \n\n")),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#body"},"See the demo here.")),(0,n.kt)("h3",{id:"titles-text-and-links"},"Titles, text, and links"),(0,n.kt)("img",{src:"https://i.imgur.com/9ezoKyR.png",alt:"Blazor Bootstrap: Card Component - Titles, text, and links"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n Card title\n Card subtitle\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n Card link\n Another link\n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#titles-text-and-links"},"See the demo here.")),(0,n.kt)("h3",{id:"images"},"Images"),(0,n.kt)("img",{src:"https://i.imgur.com/LpUuK6C.png",alt:"Blazor Bootstrap: Card Component - Images"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n placeholder\n \n Card title\n Card subtitle\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n \n\n\n\n \n Card title\n Card subtitle\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n \n placeholder\n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#images"},"See the demo here.")),(0,n.kt)("h3",{id:"list-groups"},"List groups"),(0,n.kt)("p",null,"Create lists of content in a card with a flush list group."),(0,n.kt)("img",{src:"https://i.imgur.com/cxLiBhE.png",alt:"Blazor Bootstrap: Card Component - List groups"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n
    \n
  • An item
    • \n
  • A second item
    • \n
  • A third item
    • \n
\n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#list-groups"},"See the demo here.")),(0,n.kt)("h3",{id:"kitchen-sink"},"Kitchen sink"),(0,n.kt)("p",null,"Mix and match multiple content types to create the card you need, or throw everything in there.\nShown below are image styles, blocks, text styles, and a list group\u2014all wrapped in a fixed-width card."),(0,n.kt)("img",{src:"https://i.imgur.com/zsfdUnC.png",alt:"Blazor Bootstrap: Card Component - Kitchen sink"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n placeholder\n \n Card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n
    \n
  • An item
    • \n
  • A second item
    • \n
  • A third item
    • \n
\n \n Card link\n Another link\n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#kitchen-sink"},"See the demo here.")),(0,n.kt)("h3",{id:"header-and-footer"},"Header and footer"),(0,n.kt)("p",null,"Add an optional header and/or footer within a card."),(0,n.kt)("img",{src:"https://i.imgur.com/lNWvitv.png",alt:"Blazor Bootstrap: Card Component - Header and footer"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n Featured\n \n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#header-and-footer"},"See the demo here.")),(0,n.kt)("h3",{id:"sizing"},"Sizing"),(0,n.kt)("p",null,"Cards assume no specific width to start, so they\u2019ll be 100% wide unless otherwise stated.\nYou can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities."),(0,n.kt)("img",{src:"https://i.imgur.com/AszIQT5.png",alt:"Blazor Bootstrap: Card Component - Sizing"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n
\n \n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n \n
\n
\n \n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n \n
\n
\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#sizing"},"See the demo here.")),(0,n.kt)("h3",{id:"text-alignment"},"Text alignment"),(0,n.kt)("p",null,"You can quickly change the text alignment of any card\u2014in its entirety or specific parts\u2014with our TextAlignment parameter."),(0,n.kt)("img",{src:"https://i.imgur.com/tJdeAKt.png",alt:"Blazor Bootstrap: Card Component - Text alignment"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n\n\n\n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n\n\n\n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#text-alignment"},"See the demo here.")),(0,n.kt)("h3",{id:"background-and-color"},"Background and color"),(0,n.kt)("img",{src:"https://i.imgur.com/FH7aQPS.png",alt:"Blazor Bootstrap: Card Component - Background and color - Primary, Secondary, Success"}),(0,n.kt)("img",{src:"https://i.imgur.com/1ukTnup.png",alt:"Blazor Bootstrap: Card Component - Background and color - Danger, Warning, Info"}),(0,n.kt)("img",{src:"https://i.imgur.com/uCvHXXp.png",alt:"Blazor Bootstrap: Card Component - Background and color - Light, Dark"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n Header\n \n Primary card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Secondary card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Success card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Danger card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Warning card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Info card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Light card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Dark card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#background-and-color"},"See the demo here.")),(0,n.kt)("h3",{id:"card-groups"},"Card groups"),(0,n.kt)("p",null,"Use card groups to render cards as a single, attached element with equal width and height columns.\nCard groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint."),(0,n.kt)("img",{src:"https://i.imgur.com/dtYEkBB.png",alt:"Blazor Bootstrap: Card Component - Card groups"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n placeholder\n \n Card title\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n Last updated 3 mins ago\n \n \n \n placeholder\n \n Card title\n This card has supporting text below as a natural lead-in to additional content.\n Last updated 3 mins ago\n \n \n \n placeholder\n \n Card title\n This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.\n Last updated 3 mins ago\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#card-groups"},"See the demo here.")),(0,n.kt)("h3",{id:"card-groups-with-footer"},"Card groups with footer"),(0,n.kt)("p",null,"When using card groups with footers, their content will automatically line up."),(0,n.kt)("img",{src:"https://i.imgur.com/URxKosx.png",alt:"Blazor Bootstrap: Card Component - Card groups with footer"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n placeholder\n \n Card title\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n \n \n Last updated 3 mins ago\n \n \n \n placeholder\n \n Card title\n This card has supporting text below as a natural lead-in to additional content.\n \n \n Last updated 3 mins ago\n \n \n \n placeholder\n \n Card title\n This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.\n \n \n Last updated 3 mins ago\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#card-groups-with-footer"},"See the demo here.")))}C.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/61658309.b703c307.js b/assets/js/61658309.b703c307.js deleted file mode 100644 index 9e3965d7a..000000000 --- a/assets/js/61658309.b703c307.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[10453],{3905:(t,e,a)=>{a.d(e,{Zo:()=>m,kt:()=>u});var r=a(67294);function n(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function l(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,r)}return a}function d(t){for(var e=1;e=0||(n[a]=t[a]);return n}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(n[a]=t[a])}return n}var i=r.createContext({}),s=function(t){var e=r.useContext(i),a=e;return t&&(a="function"==typeof t?t(e):d(d({},e),t)),a},m=function(t){var e=s(t.components);return r.createElement(i.Provider,{value:e},t.children)},p="mdxType",c={inlineCode:"code",wrapper:function(t){var e=t.children;return r.createElement(r.Fragment,{},e)}},C=r.forwardRef((function(t,e){var a=t.components,n=t.mdxType,l=t.originalType,i=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),p=s(a),C=n,u=p["".concat(i,".").concat(C)]||p[C]||c[C]||l;return a?r.createElement(u,d(d({ref:e},m),{},{components:a})):r.createElement(u,d({ref:e},m))}));function u(t,e){var a=arguments,n=e&&e.mdxType;if("string"==typeof t||n){var l=a.length,d=new Array(l);d[0]=C;var o={};for(var i in e)hasOwnProperty.call(e,i)&&(o[i]=e[i]);o.originalType=t,o[p]="string"==typeof t?t:n,d[1]=o;for(var s=2;s{a.d(e,{ZP:()=>p});var r=a(87462),n=a(67294),l=a(3905),d=a(72389);function o(t){let{children:e,fallback:a}=t;return(0,d.Z)()?n.createElement(n.Fragment,null,e?.()):a??null}a(73935);function i(){let t=document.getElementById("divCarbonAd");if(t){let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(e)}return null}const s={toc:[]},m="wrapper";function p(t){let{components:e,...a}=t;return(0,l.kt)(m,(0,r.Z)({},s,a,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("div",{id:"divCarbonAd"}),(0,l.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,l.kt)(i,{mdxType:"RenderAd"}))))}p.isMDXComponent=!0},81459:(t,e,a)=>{a.r(e),a.d(e,{assets:()=>s,contentTitle:()=>o,default:()=>C,frontMatter:()=>d,metadata:()=>i,toc:()=>m});var r=a(87462),n=(a(67294),a(3905)),l=a(58034);const d={title:"Blazor Card Component",description:"BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.",image:"https://i.imgur.com/RhytwPa.png",sidebar_label:"Card",sidebar_position:7},o="Blazor Card",i={unversionedId:"components/card",id:"components/card",title:"Blazor Card Component",description:"BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.",source:"@site/docs/05-components/card.mdx",sourceDirName:"05-components",slug:"/components/card",permalink:"/components/card",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/card.mdx",tags:[],version:"current",sidebarPosition:7,frontMatter:{title:"Blazor Card Component",description:"BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.",image:"https://i.imgur.com/RhytwPa.png",sidebar_label:"Card",sidebar_position:7},sidebar:"tutorialSidebar",previous:{title:"Callout",permalink:"/components/callout"},next:{title:"Charts",permalink:"/components/charts"}},s={},m=[{value:"About",id:"about",level:2},{value:"Parameters",id:"parameters",level:2},{value:"Card Parameters",id:"card-parameters",level:3},{value:"CardBody Parameters",id:"cardbody-parameters",level:3},{value:"CardFooter Parameters",id:"cardfooter-parameters",level:3},{value:"CardGroup Parameters",id:"cardgroup-parameters",level:3},{value:"CardHeader Parameters",id:"cardheader-parameters",level:3},{value:"CardLink Parameters",id:"cardlink-parameters",level:3},{value:"CardSubTitle Parameters",id:"cardsubtitle-parameters",level:3},{value:"CardText Parameters",id:"cardtext-parameters",level:3},{value:"CardTitle Parameters",id:"cardtitle-parameters",level:3},{value:"Examples",id:"examples",level:2},{value:"Card",id:"card",level:3},{value:"Content types",id:"content-types",level:3},{value:"Body",id:"body",level:3},{value:"Titles, text, and links",id:"titles-text-and-links",level:3},{value:"Images",id:"images",level:3},{value:"List groups",id:"list-groups",level:3},{value:"Kitchen sink",id:"kitchen-sink",level:3},{value:"Header and footer",id:"header-and-footer",level:3},{value:"Sizing",id:"sizing",level:3},{value:"Text alignment",id:"text-alignment",level:3},{value:"Background and color",id:"background-and-color",level:3},{value:"Card groups",id:"card-groups",level:3},{value:"Card groups with footer",id:"card-groups-with-footer",level:3}],p={toc:m},c="wrapper";function C(t){let{components:e,...a}=t;return(0,n.kt)(c,(0,r.Z)({},p,a,{components:e,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"blazor-card"},"Blazor Card"),(0,n.kt)("p",null,"BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options."),(0,n.kt)(l.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("img",{src:"https://i.imgur.com/RhytwPa.png",alt:"Blazor Bootstrap: Card component"}),(0,n.kt)("h2",{id:"about"},"About"),(0,n.kt)("p",null,"A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options."),(0,n.kt)("h2",{id:"parameters"},"Parameters"),(0,n.kt)("h3",{id:"card-parameters"},"Card Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Color"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"CardColor")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the card color."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"CardColor.None")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"TextAlignment"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Alignment")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the text alignment of the card."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Alignment.None")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardbody-parameters"},"CardBody Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardfooter-parameters"},"CardFooter Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardgroup-parameters"},"CardGroup Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardheader-parameters"},"CardHeader Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Color"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"CardColor")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the card color."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"CardColor.None")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.4")))),(0,n.kt)("h3",{id:"cardlink-parameters"},"CardLink Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Disabled"),(0,n.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,n.kt)("td",{parentName:"tr",align:"left"},"When set to 'true', disables the component's functionality and places it in a disabled state."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"To"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"string?")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the target route."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Target"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Target")),(0,n.kt)("td",{parentName:"tr",align:"left"},"The target attribute specifies where to open the linked document."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"Target.None")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"TabIndex"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"int?")),(0,n.kt)("td",{parentName:"tr",align:"left"},"If defined, indicates that its element can be focused and can participates in sequential keyboard navigation."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardsubtitle-parameters"},"CardSubTitle Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Size"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"HeadingSize")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the heading size."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"HeadingSize.H6")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardtext-parameters"},"CardText Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h3",{id:"cardtitle-parameters"},"CardTitle Parameters"),(0,n.kt)("table",null,(0,n.kt)("thead",{parentName:"table"},(0,n.kt)("tr",{parentName:"thead"},(0,n.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,n.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,n.kt)("tbody",{parentName:"table"},(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,n.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,n.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside this."),(0,n.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")),(0,n.kt)("tr",{parentName:"tbody"},(0,n.kt)("td",{parentName:"tr",align:"left"},"Size"),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"HeadingSize")),(0,n.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the heading size."),(0,n.kt)("td",{parentName:"tr",align:"left"}),(0,n.kt)("td",{parentName:"tr",align:"left"},(0,n.kt)("inlineCode",{parentName:"td"},"HeadingSize.H5")),(0,n.kt)("td",{parentName:"tr",align:"left"},"1.10.0")))),(0,n.kt)("h2",{id:"examples"},"Examples"),(0,n.kt)("h3",{id:"card"},"Card"),(0,n.kt)("p",null,"Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element."),(0,n.kt)("img",{src:"https://i.imgur.com/wT0LXMG.png",alt:"Blazor Bootstrap: Card Component - Examples"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n Card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#examples"},"See the demo here.")),(0,n.kt)("h3",{id:"content-types"},"Content types"),(0,n.kt)("p",null,"Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what\u2019s supported."),(0,n.kt)("h3",{id:"body"},"Body"),(0,n.kt)("p",null,"The building block of a card is the CardBody. Use it whenever you need a padded section within a card."),(0,n.kt)("img",{src:"https://i.imgur.com/jkWQdNr.png",alt:"Blazor Bootstrap: Card Component - Body"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},"\n \n This is some text within a card body.\n \n\n")),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#body"},"See the demo here.")),(0,n.kt)("h3",{id:"titles-text-and-links"},"Titles, text, and links"),(0,n.kt)("img",{src:"https://i.imgur.com/9ezoKyR.png",alt:"Blazor Bootstrap: Card Component - Titles, text, and links"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n Card title\n Card subtitle\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n Card link\n Another link\n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#titles-text-and-links"},"See the demo here.")),(0,n.kt)("h3",{id:"images"},"Images"),(0,n.kt)("img",{src:"https://i.imgur.com/LpUuK6C.png",alt:"Blazor Bootstrap: Card Component - Images"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n placeholder\n \n Card title\n Card subtitle\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n \n\n\n\n \n Card title\n Card subtitle\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n \n placeholder\n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#images"},"See the demo here.")),(0,n.kt)("h3",{id:"list-groups"},"List groups"),(0,n.kt)("p",null,"Create lists of content in a card with a flush list group."),(0,n.kt)("img",{src:"https://i.imgur.com/cxLiBhE.png",alt:"Blazor Bootstrap: Card Component - List groups"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n
    \n
  • An item
    • \n
  • A second item
    • \n
  • A third item
    • \n
\n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#list-groups"},"See the demo here.")),(0,n.kt)("h3",{id:"kitchen-sink"},"Kitchen sink"),(0,n.kt)("p",null,"Mix and match multiple content types to create the card you need, or throw everything in there.\nShown below are image styles, blocks, text styles, and a list group\u2014all wrapped in a fixed-width card."),(0,n.kt)("img",{src:"https://i.imgur.com/zsfdUnC.png",alt:"Blazor Bootstrap: Card Component - Kitchen sink"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n placeholder\n \n Card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n
    \n
  • An item
    • \n
  • A second item
    • \n
  • A third item
    • \n
\n \n Card link\n Another link\n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#kitchen-sink"},"See the demo here.")),(0,n.kt)("h3",{id:"header-and-footer"},"Header and footer"),(0,n.kt)("p",null,"Add an optional header and/or footer within a card."),(0,n.kt)("img",{src:"https://i.imgur.com/lNWvitv.png",alt:"Blazor Bootstrap: Card Component - Header and footer"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n Featured\n \n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#header-and-footer"},"See the demo here.")),(0,n.kt)("h3",{id:"sizing"},"Sizing"),(0,n.kt)("p",null,"Cards assume no specific width to start, so they\u2019ll be 100% wide unless otherwise stated.\nYou can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities."),(0,n.kt)("img",{src:"https://i.imgur.com/AszIQT5.png",alt:"Blazor Bootstrap: Card Component - Sizing"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'
\n
\n \n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n \n
\n
\n \n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n \n
\n
\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#sizing"},"See the demo here.")),(0,n.kt)("h3",{id:"text-alignment"},"Text alignment"),(0,n.kt)("p",null,"You can quickly change the text alignment of any card\u2014in its entirety or specific parts\u2014with our TextAlignment parameter."),(0,n.kt)("img",{src:"https://i.imgur.com/tJdeAKt.png",alt:"Blazor Bootstrap: Card Component - Text alignment"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n\n\n\n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n\n\n\n \n Special title treatment\n With supporting text below as a natural lead-in to additional content.\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#text-alignment"},"See the demo here.")),(0,n.kt)("h3",{id:"background-and-color"},"Background and color"),(0,n.kt)("img",{src:"https://i.imgur.com/FH7aQPS.png",alt:"Blazor Bootstrap: Card Component - Background and color - Primary, Secondary, Success"}),(0,n.kt)("img",{src:"https://i.imgur.com/1ukTnup.png",alt:"Blazor Bootstrap: Card Component - Background and color - Danger, Warning, Info"}),(0,n.kt)("img",{src:"https://i.imgur.com/uCvHXXp.png",alt:"Blazor Bootstrap: Card Component - Background and color - Light, Dark"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n Header\n \n Primary card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Secondary card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Success card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Danger card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Warning card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Info card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Light card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n\n\n Header\n \n Dark card title\n Some quick example text to build on the card title and make up the bulk of the card\'s content.\n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#background-and-color"},"See the demo here.")),(0,n.kt)("h3",{id:"card-groups"},"Card groups"),(0,n.kt)("p",null,"Use card groups to render cards as a single, attached element with equal width and height columns.\nCard groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint."),(0,n.kt)("img",{src:"https://i.imgur.com/dtYEkBB.png",alt:"Blazor Bootstrap: Card Component - Card groups"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n placeholder\n \n Card title\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n Last updated 3 mins ago\n \n \n \n placeholder\n \n Card title\n This card has supporting text below as a natural lead-in to additional content.\n Last updated 3 mins ago\n \n \n \n placeholder\n \n Card title\n This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.\n Last updated 3 mins ago\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#card-groups"},"See the demo here.")),(0,n.kt)("h3",{id:"card-groups-with-footer"},"Card groups with footer"),(0,n.kt)("p",null,"When using card groups with footers, their content will automatically line up."),(0,n.kt)("img",{src:"https://i.imgur.com/URxKosx.png",alt:"Blazor Bootstrap: Card Component - Card groups with footer"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n \n placeholder\n \n Card title\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\n \n \n Last updated 3 mins ago\n \n \n \n placeholder\n \n Card title\n This card has supporting text below as a natural lead-in to additional content.\n \n \n Last updated 3 mins ago\n \n \n \n placeholder\n \n Card title\n This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.\n \n \n Last updated 3 mins ago\n \n \n\n')),(0,n.kt)("p",null,(0,n.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/card#card-groups-with-footer"},"See the demo here.")))}C.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/6600a909.6b14b8e2.js b/assets/js/6600a909.6b14b8e2.js deleted file mode 100644 index 2d7c77b0e..000000000 --- a/assets/js/6600a909.6b14b8e2.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[80313],{3905:(t,e,n)=>{n.d(e,{Zo:()=>m,kt:()=>u});var a=n(67294);function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function l(t){for(var e=1;e=0||(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var s=a.createContext({}),p=function(t){var e=a.useContext(s),n=e;return t&&(n="function"==typeof t?t(e):l(l({},e),t)),n},m=function(t){var e=p(t.components);return a.createElement(s.Provider,{value:e},t.children)},g="mdxType",d={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},c=a.forwardRef((function(t,e){var n=t.components,r=t.mdxType,i=t.originalType,s=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),g=p(n),c=r,u=g["".concat(s,".").concat(c)]||g[c]||d[c]||i;return n?a.createElement(u,l(l({ref:e},m),{},{components:n})):a.createElement(u,l({ref:e},m))}));function u(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var i=n.length,l=new Array(i);l[0]=c;var o={};for(var s in e)hasOwnProperty.call(e,s)&&(o[s]=e[s]);o.originalType=t,o[g]="string"==typeof t?t:r,l[1]=o;for(var p=2;p{n.d(e,{ZP:()=>g});var a=n(87462),r=n(67294),i=n(3905),l=n(72389);function o(t){let{children:e,fallback:n}=t;return(0,l.Z)()?r.createElement(r.Fragment,null,e?.()):n??null}n(73935);function s(){let t=document.getElementById("divCarbonAd");if(t){let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),t.appendChild(e)}return null}const p={toc:[]},m="wrapper";function g(t){let{components:e,...n}=t;return(0,i.kt)(m,(0,a.Z)({},p,n,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(s,{mdxType:"RenderAd"}))))}g.isMDXComponent=!0},3755:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>p,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>s,toc:()=>m});var a=n(87462),r=(n(67294),n(3905)),i=n(58034);const l={title:"Blazor Pagination Component",description:"Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.",image:"https://i.imgur.com/SCbZVd4.jpg",sidebar_label:"Pagination",sidebar_position:15},o="Blazor Pagination",s={unversionedId:"components/pagination",id:"components/pagination",title:"Blazor Pagination Component",description:"Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.",source:"@site/docs/05-components/pagination.mdx",sourceDirName:"05-components",slug:"/components/pagination",permalink:"/components/pagination",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/pagination.mdx",tags:[],version:"current",sidebarPosition:15,frontMatter:{title:"Blazor Pagination Component",description:"Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.",image:"https://i.imgur.com/SCbZVd4.jpg",sidebar_label:"Pagination",sidebar_position:15},sidebar:"tutorialSidebar",previous:{title:"Offcanvas",permalink:"/components/offcanvas"},next:{title:"Placeholders",permalink:"/components/placeholders"}},p={},m=[{value:"Parameters",id:"parameters",level:2},{value:"Callback Events",id:"callback-events",level:2},{value:"Examples",id:"examples",level:2},{value:"Pagination",id:"pagination",level:3},{value:"Working with icons",id:"working-with-icons",level:3},{value:"Disabled and active states",id:"disabled-and-active-states",level:3},{value:"Sizing",id:"sizing",level:3},{value:"Alignment",id:"alignment",level:3},{value:"Callback Events",id:"callback-events-1",level:3}],g={toc:m},d="wrapper";function c(t){let{components:e,...n}=t;return(0,r.kt)(d,(0,a.Z)({},g,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-pagination"},"Blazor Pagination"),(0,r.kt)("p",null,"Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages."),(0,r.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"Name"),(0,r.kt)("th",{parentName:"tr",align:null},"Type"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"),(0,r.kt)("th",{parentName:"tr",align:null},"Required"),(0,r.kt)("th",{parentName:"tr",align:null},"Default"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"ActivePageNumber"),(0,r.kt)("td",{parentName:"tr",align:null},"int"),(0,r.kt)("td",{parentName:"tr",align:null},"Active page number. Starts with 1."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"Alignment"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Alignment")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets the pagination alignment."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Alignment.None"))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"DisplayPages"),(0,r.kt)("td",{parentName:"tr",align:null},"int"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets the maximum page links to be displayed."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"5")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"FirstLinkIcon"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"IconName")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets first link icon."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"FirstLinkText"),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets first link text. ",(0,r.kt)("inlineCode",{parentName:"td"},"FirstLinkText")," is ignored if ",(0,r.kt)("inlineCode",{parentName:"td"},"FirstLinkIcon")," is specified."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"First")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"LastLinkIcon"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"IconName")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets last link icon."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"LastLinkText"),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets last link text. ",(0,r.kt)("inlineCode",{parentName:"td"},"LastLinkText")," is ignored if ",(0,r.kt)("inlineCode",{parentName:"td"},"LastLinkIcon")," is specified."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"Last")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"NextLinkIcon"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"IconName")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets next link icon."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"NextLinkText"),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets next link text. ",(0,r.kt)("inlineCode",{parentName:"td"},"NextLinkText")," is ignored if ",(0,r.kt)("inlineCode",{parentName:"td"},"NextLinkIcon")," is specified."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"Next")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"PreviousLinkIcon"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"IconName")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets previous link icon."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"PreviousLinkText"),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets previous link text. ",(0,r.kt)("inlineCode",{parentName:"td"},"PreviousLinkText")," is ignored if ",(0,r.kt)("inlineCode",{parentName:"td"},"PreviousLinkIcon")," is specified."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"Previous")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"Size"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"PaginationSize")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets the pagination size."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"TotalPages"),(0,r.kt)("td",{parentName:"tr",align:null},"int"),(0,r.kt)("td",{parentName:"tr",align:null},"Total pages of data items."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})))),(0,r.kt)("h2",{id:"callback-events"},"Callback Events"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"Event"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"PageChanged"),(0,r.kt)("td",{parentName:"tr",align:null},"This event fires immediately when the page number is changed.")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"pagination"},"Pagination"),(0,r.kt)("p",null,"We use a large block of connected links for our pagination, making links hard to miss and easily scalable - all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links."),(0,r.kt)("img",{src:"https://i.imgur.com/6wDZ4zP.jpg",alt:"Pagination - Examples"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#examples"},"See demo here.")),(0,r.kt)("h3",{id:"working-with-icons"},"Working with icons"),(0,r.kt)("img",{src:"https://i.imgur.com/nhfGHfy.jpg",alt:"Pagination - Working with icons"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#working-with-icons"},"See demo here.")),(0,r.kt)("h3",{id:"disabled-and-active-states"},"Disabled and active states"),(0,r.kt)("img",{src:"https://i.imgur.com/SCbZVd4.jpg",alt:"Pagination - Disabled and active states"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#disabled-and-active-states"},"See demo here.")),(0,r.kt)("h3",{id:"sizing"},"Sizing"),(0,r.kt)("p",null,"Fancy larger or smaller pagination? Add ",(0,r.kt)("inlineCode",{parentName:"p"},'Size="PaginationSize.Small"')," or ",(0,r.kt)("inlineCode",{parentName:"p"},'Size="PaginationSize.Large"')," for additional sizes."),(0,r.kt)("img",{src:"https://i.imgur.com/2kMVncQ.jpg",alt:"Pagination - Sizing"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#sizing"},"See demo here.")),(0,r.kt)("h3",{id:"alignment"},"Alignment"),(0,r.kt)("img",{src:"https://i.imgur.com/RkpUdJu.jpg",alt:"Pagination - Alignment"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#alignment"},"See demo here.")),(0,r.kt)("h3",{id:"callback-events-1"},"Callback Events"),(0,r.kt)("img",{src:"https://i.imgur.com/VsB3ZYW.jpg",alt:"Pagination - Callback Events"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\nCurrent Page Number: @currentPageNumber\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n int currentPageNumber = 2;\n\n private async Task OnPageChangedAsync(int newPageNumber)\n {\n await Task.Run(() => { currentPageNumber = newPageNumber; });\n }\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#events"},"See demo here.")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/6600a909.a2d99cfa.js b/assets/js/6600a909.a2d99cfa.js new file mode 100644 index 000000000..0625e2c15 --- /dev/null +++ b/assets/js/6600a909.a2d99cfa.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[80313],{3905:(t,e,n)=>{n.d(e,{Zo:()=>m,kt:()=>u});var a=n(67294);function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,a)}return n}function l(t){for(var e=1;e=0||(r[n]=t[n]);return r}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(r[n]=t[n])}return r}var s=a.createContext({}),p=function(t){var e=a.useContext(s),n=e;return t&&(n="function"==typeof t?t(e):l(l({},e),t)),n},m=function(t){var e=p(t.components);return a.createElement(s.Provider,{value:e},t.children)},g="mdxType",d={inlineCode:"code",wrapper:function(t){var e=t.children;return a.createElement(a.Fragment,{},e)}},c=a.forwardRef((function(t,e){var n=t.components,r=t.mdxType,i=t.originalType,s=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),g=p(n),c=r,u=g["".concat(s,".").concat(c)]||g[c]||d[c]||i;return n?a.createElement(u,l(l({ref:e},m),{},{components:n})):a.createElement(u,l({ref:e},m))}));function u(t,e){var n=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var i=n.length,l=new Array(i);l[0]=c;var o={};for(var s in e)hasOwnProperty.call(e,s)&&(o[s]=e[s]);o.originalType=t,o[g]="string"==typeof t?t:r,l[1]=o;for(var p=2;p{n.d(e,{ZP:()=>g});var a=n(87462),r=n(67294),i=n(3905),l=n(72389);function o(t){let{children:e,fallback:n}=t;return(0,l.Z)()?r.createElement(r.Fragment,null,e?.()):n??null}n(73935);function s(){let t=document.getElementById("divCarbonAd");return t&&setTimeout((()=>{let e=document.getElementById("_carbonads_js");e&&e.remove(),e=document.createElement("script"),e.async=!0,e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",e.type="text/javascript",e.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},t.replaceChildren(),e&&t.appendChild(e)}),5e3),null}const p={toc:[]},m="wrapper";function g(t){let{components:e,...n}=t;return(0,i.kt)(m,(0,a.Z)({},p,n,{components:e,mdxType:"MDXLayout"}),(0,i.kt)("div",{id:"divCarbonAd"}),(0,i.kt)(o,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,i.kt)(s,{mdxType:"RenderAd"}))))}g.isMDXComponent=!0},3755:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>p,contentTitle:()=>o,default:()=>c,frontMatter:()=>l,metadata:()=>s,toc:()=>m});var a=n(87462),r=(n(67294),n(3905)),i=n(58034);const l={title:"Blazor Pagination Component",description:"Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.",image:"https://i.imgur.com/SCbZVd4.jpg",sidebar_label:"Pagination",sidebar_position:15},o="Blazor Pagination",s={unversionedId:"components/pagination",id:"components/pagination",title:"Blazor Pagination Component",description:"Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.",source:"@site/docs/05-components/pagination.mdx",sourceDirName:"05-components",slug:"/components/pagination",permalink:"/components/pagination",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/pagination.mdx",tags:[],version:"current",sidebarPosition:15,frontMatter:{title:"Blazor Pagination Component",description:"Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.",image:"https://i.imgur.com/SCbZVd4.jpg",sidebar_label:"Pagination",sidebar_position:15},sidebar:"tutorialSidebar",previous:{title:"Offcanvas",permalink:"/components/offcanvas"},next:{title:"Placeholders",permalink:"/components/placeholders"}},p={},m=[{value:"Parameters",id:"parameters",level:2},{value:"Callback Events",id:"callback-events",level:2},{value:"Examples",id:"examples",level:2},{value:"Pagination",id:"pagination",level:3},{value:"Working with icons",id:"working-with-icons",level:3},{value:"Disabled and active states",id:"disabled-and-active-states",level:3},{value:"Sizing",id:"sizing",level:3},{value:"Alignment",id:"alignment",level:3},{value:"Callback Events",id:"callback-events-1",level:3}],g={toc:m},d="wrapper";function c(t){let{components:e,...n}=t;return(0,r.kt)(d,(0,a.Z)({},g,n,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"blazor-pagination"},"Blazor Pagination"),(0,r.kt)("p",null,"Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages."),(0,r.kt)(i.ZP,{mdxType:"CarbonAd"}),(0,r.kt)("h2",{id:"parameters"},"Parameters"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"Name"),(0,r.kt)("th",{parentName:"tr",align:null},"Type"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"),(0,r.kt)("th",{parentName:"tr",align:null},"Required"),(0,r.kt)("th",{parentName:"tr",align:null},"Default"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"ActivePageNumber"),(0,r.kt)("td",{parentName:"tr",align:null},"int"),(0,r.kt)("td",{parentName:"tr",align:null},"Active page number. Starts with 1."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"1")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"Alignment"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Alignment")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets the pagination alignment."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"Alignment.None"))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"DisplayPages"),(0,r.kt)("td",{parentName:"tr",align:null},"int"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets the maximum page links to be displayed."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"5")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"FirstLinkIcon"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"IconName")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets first link icon."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"FirstLinkText"),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets first link text. ",(0,r.kt)("inlineCode",{parentName:"td"},"FirstLinkText")," is ignored if ",(0,r.kt)("inlineCode",{parentName:"td"},"FirstLinkIcon")," is specified."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"First")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"LastLinkIcon"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"IconName")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets last link icon."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"LastLinkText"),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets last link text. ",(0,r.kt)("inlineCode",{parentName:"td"},"LastLinkText")," is ignored if ",(0,r.kt)("inlineCode",{parentName:"td"},"LastLinkIcon")," is specified."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"Last")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"NextLinkIcon"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"IconName")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets next link icon."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"NextLinkText"),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets next link text. ",(0,r.kt)("inlineCode",{parentName:"td"},"NextLinkText")," is ignored if ",(0,r.kt)("inlineCode",{parentName:"td"},"NextLinkIcon")," is specified."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"Next")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"PreviousLinkIcon"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"IconName")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets previous link icon."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"PreviousLinkText"),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets previous link text. ",(0,r.kt)("inlineCode",{parentName:"td"},"PreviousLinkText")," is ignored if ",(0,r.kt)("inlineCode",{parentName:"td"},"PreviousLinkIcon")," is specified."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null},"Previous")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"Size"),(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"PaginationSize")),(0,r.kt)("td",{parentName:"tr",align:null},"Gets or sets the pagination size."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"TotalPages"),(0,r.kt)("td",{parentName:"tr",align:null},"int"),(0,r.kt)("td",{parentName:"tr",align:null},"Total pages of data items."),(0,r.kt)("td",{parentName:"tr",align:null}),(0,r.kt)("td",{parentName:"tr",align:null})))),(0,r.kt)("h2",{id:"callback-events"},"Callback Events"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"Event"),(0,r.kt)("th",{parentName:"tr",align:null},"Description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},"PageChanged"),(0,r.kt)("td",{parentName:"tr",align:null},"This event fires immediately when the page number is changed.")))),(0,r.kt)("h2",{id:"examples"},"Examples"),(0,r.kt)("h3",{id:"pagination"},"Pagination"),(0,r.kt)("p",null,"We use a large block of connected links for our pagination, making links hard to miss and easily scalable - all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links."),(0,r.kt)("img",{src:"https://i.imgur.com/6wDZ4zP.jpg",alt:"Pagination - Examples"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n\n\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#examples"},"See demo here.")),(0,r.kt)("h3",{id:"working-with-icons"},"Working with icons"),(0,r.kt)("img",{src:"https://i.imgur.com/nhfGHfy.jpg",alt:"Pagination - Working with icons"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#working-with-icons"},"See demo here.")),(0,r.kt)("h3",{id:"disabled-and-active-states"},"Disabled and active states"),(0,r.kt)("img",{src:"https://i.imgur.com/SCbZVd4.jpg",alt:"Pagination - Disabled and active states"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#disabled-and-active-states"},"See demo here.")),(0,r.kt)("h3",{id:"sizing"},"Sizing"),(0,r.kt)("p",null,"Fancy larger or smaller pagination? Add ",(0,r.kt)("inlineCode",{parentName:"p"},'Size="PaginationSize.Small"')," or ",(0,r.kt)("inlineCode",{parentName:"p"},'Size="PaginationSize.Large"')," for additional sizes."),(0,r.kt)("img",{src:"https://i.imgur.com/2kMVncQ.jpg",alt:"Pagination - Sizing"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#sizing"},"See demo here.")),(0,r.kt)("h3",{id:"alignment"},"Alignment"),(0,r.kt)("img",{src:"https://i.imgur.com/RkpUdJu.jpg",alt:"Pagination - Alignment"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#alignment"},"See demo here.")),(0,r.kt)("h3",{id:"callback-events-1"},"Callback Events"),(0,r.kt)("img",{src:"https://i.imgur.com/VsB3ZYW.jpg",alt:"Pagination - Callback Events"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"showLineNumbers",showLineNumbers:!0},'\n\nCurrent Page Number: @currentPageNumber\n')),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-cs",metastring:"showLineNumbers",showLineNumbers:!0},"@code {\n int currentPageNumber = 2;\n\n private async Task OnPageChangedAsync(int newPageNumber)\n {\n await Task.Run(() => { currentPageNumber = newPageNumber; });\n }\n}\n")),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/pagination#events"},"See demo here.")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/667a4431.07ae699c.js b/assets/js/667a4431.07ae699c.js new file mode 100644 index 000000000..637c834ec --- /dev/null +++ b/assets/js/667a4431.07ae699c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[86244],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>u});var a=n(67294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=a.createContext({}),p=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(s.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},g=a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),m=p(n),g=o,u=m["".concat(s,".").concat(g)]||m[g]||d[g]||r;return n?a.createElement(u,l(l({ref:t},c),{},{components:n})):a.createElement(u,l({ref:t},c))}));function u(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,l=new Array(r);l[0]=g;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[m]="string"==typeof e?e:o,l[1]=i;for(var p=2;p{n.d(t,{ZP:()=>m});var a=n(87462),o=n(67294),r=n(3905),l=n(72389);function i(e){let{children:t,fallback:n}=e;return(0,l.Z)()?o.createElement(o.Fragment,null,t?.()):n??null}n(73935);function s(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const p={toc:[]},c="wrapper";function m(e){let{components:t,...n}=e;return(0,r.kt)(c,(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("div",{id:"divCarbonAd"}),(0,r.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,r.kt)(s,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},7749:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>c});var a=n(87462),o=(n(67294),n(3905)),r=n(58034);const l={title:"Blazor Collapse Component",description:"Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.",image:"https://i.imgur.com/8A0emQe.png",sidebar_label:"Collapse",sidebar_position:9},i="Blazor Collapse",s={unversionedId:"components/collapse",id:"components/collapse",title:"Blazor Collapse Component",description:"Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.",source:"@site/docs/05-components/collapse.mdx",sourceDirName:"05-components",slug:"/components/collapse",permalink:"/components/collapse",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/collapse.mdx",tags:[],version:"current",sidebarPosition:9,frontMatter:{title:"Blazor Collapse Component",description:"Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.",image:"https://i.imgur.com/8A0emQe.png",sidebar_label:"Collapse",sidebar_position:9},sidebar:"tutorialSidebar",previous:{title:"Charts",permalink:"/components/charts"},next:{title:"Confirm Dialog",permalink:"/components/confirm-dialog"}},p={},c=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Events",id:"events",level:2},{value:"How it works",id:"how-it-works",level:2},{value:"Examples",id:"examples",level:2},{value:"Horizontal",id:"horizontal",level:2},{value:"Events Example",id:"events-example",level:3}],m={toc:c},d="wrapper";function g(e){let{components:t,...n}=e;return(0,o.kt)(d,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"blazor-collapse"},"Blazor Collapse"),(0,o.kt)("p",null,"Toggle the visibility of content across your project with the Blazor Bootstrap ",(0,o.kt)("inlineCode",{parentName:"p"},"Collapse")," component."),(0,o.kt)(r.ZP,{mdxType:"CarbonAd"}),(0,o.kt)("img",{src:"https://i.imgur.com/8A0emQe.png",alt:"Blazor Bootstrap: Collapse Component"}),(0,o.kt)("h2",{id:"parameters"},"Parameters"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,o.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,o.kt)("td",{parentName:"tr",align:"left"},"null"),(0,o.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,o.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the collapse."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"Horizontal"),(0,o.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,o.kt)("td",{parentName:"tr",align:"left"},"false"),(0,o.kt)("td",{parentName:"tr",align:"left"}),(0,o.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the horizontal."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"Parent"),(0,o.kt)("td",{parentName:"tr",align:"left"},"string"),(0,o.kt)("td",{parentName:"tr",align:"left"},"null"),(0,o.kt)("td",{parentName:"tr",align:"left"}),(0,o.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the parent."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"Toggle"),(0,o.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,o.kt)("td",{parentName:"tr",align:"left"},"false"),(0,o.kt)("td",{parentName:"tr",align:"left"}),(0,o.kt)("td",{parentName:"tr",align:"left"},"Toggles the collapsible element on invocation."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,o.kt)("h2",{id:"methods"},"Methods"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"ShowAsync"),(0,o.kt)("td",{parentName:"tr",align:"left"},"Shows a collapsible element."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"HideAsync"),(0,o.kt)("td",{parentName:"tr",align:"left"},"Hides a collapsible element."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"ToggleAsync"),(0,o.kt)("td",{parentName:"tr",align:"left"},"Toggles a collapsible element to shown or hidden."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,o.kt)("h2",{id:"events"},"Events"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"OnShowing"),(0,o.kt)("td",{parentName:"tr",align:"left"},"This event fires immediately when the show instance method is called."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"OnShown"),(0,o.kt)("td",{parentName:"tr",align:"left"},"This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete)."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"OnHiding"),(0,o.kt)("td",{parentName:"tr",align:"left"},"This event is fired immediately when the hide method has been called."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"OnHidden"),(0,o.kt)("td",{parentName:"tr",align:"left"},"This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete)."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,o.kt)("h2",{id:"how-it-works"},"How it works"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Collapse")," component is used to show and hide content. Use ",(0,o.kt)("inlineCode",{parentName:"p"},"ShowAsync"),", ",(0,o.kt)("inlineCode",{parentName:"p"},"HideAsync"),", and ",(0,o.kt)("inlineCode",{parentName:"p"},"ToggleAsync")," methods to toggle the content.\nCollapsing an element will animate the height from its current value to ",(0,o.kt)("inlineCode",{parentName:"p"},"0"),"."),(0,o.kt)("admonition",{type:"info"},(0,o.kt)("p",{parentName:"admonition"},"The animation effect of this component is dependent on the prefers-reduced-motion media query.\nSee the ",(0,o.kt)("a",{parentName:"p",href:"https://getbootstrap.com/docs/5.3/getting-started/accessibility/#reduced-motion"},"reduced motion section of our accessibility documentation"),".")),(0,o.kt)("h2",{id:"examples"},"Examples"),(0,o.kt)("p",null,"Click the buttons below to show and hide the content."),(0,o.kt)("img",{src:"https://i.imgur.com/8A0emQe.png",alt:"Blazor Bootstrap: Collapse Component - Examples"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1-3,5} showLineNumbers","{1-3,5}":!0,showLineNumbers:!0},'\n\n\n\n\n \n \n Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.\n \n \n\n')),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,4-6} showLineNumbers","{2,4-6}":!0,showLineNumbers:!0},"@code {\n Collapse collapse1 = default!;\n\n private async Task ShowContentAsync() => await collapse1.ShowAsync();\n private async Task HideContentAsync() => await collapse1.HideAsync();\n private async Task ToggleContentAsync() => await collapse1.ToggleAsync();\n}\n")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/collapse#examples"},"See demo here")),(0,o.kt)("h2",{id:"horizontal"},"Horizontal"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Collapse")," component supports horizontal collapsing.\nSet the ",(0,o.kt)("inlineCode",{parentName:"p"},"Horizontal")," parameter to ",(0,o.kt)("inlineCode",{parentName:"p"},"true")," to enable horizontal collapsing."),(0,o.kt)("img",{src:"https://i.imgur.com/kgSAEVL.png",alt:"Blazor Bootstrap: Collapse Component - Horizontal"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1-3,5} showLineNumbers","{1-3,5}":!0,showLineNumbers:!0},'\n\n\n\n\n \n \n This is some placeholder content for a horizontal collapse. It\'s hidden by default and shown when triggered.\n \n \n\n')),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,4-6} showLineNumbers","{2,4-6}":!0,showLineNumbers:!0},"@code {\n Collapse collapse1 = default!;\n\n private async Task ShowContentAsync() => await collapse1.ShowAsync();\n private async Task HideContentAsync() => await collapse1.HideAsync();\n private async Task ToggleContentAsync() => await collapse1.ToggleAsync();\n}\n")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/collapse#horizontal"},"See demo here")),(0,o.kt)("h3",{id:"events-example"},"Events Example"),(0,o.kt)("p",null,"Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality."),(0,o.kt)("img",{src:"https://i.imgur.com/kH11WqA.png",alt:"Blazor Bootstrap: Collapse Component - Events"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n\n \n \n Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.\n \n \n\n\n
\n @foreach (var item in messages)\n {\n

@item

\n }\n
\n')),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n Collapse collapse1 = default!;\n\n List messages = new List();\n\n private async Task ShowContentAsync() => await collapse1.ShowAsync();\n private async Task HideContentAsync() => await collapse1.HideAsync();\n private async Task ToggleContentAsync() => await collapse1.ToggleAsync();\n\n private void OnCollapseShowingAsync() => messages.Add($"Event: OnShowing called {DateTime.Now.ToLocalTime()}");\n\n private void OnCollapseShownAsync() => messages.Add($"Event: OnShown called {DateTime.Now.ToLocalTime()}");\n\n private void OnCollapseHidingAsync() => messages.Add($"Event: OnHiding called {DateTime.Now.ToLocalTime()}");\n\n private void OnCollapseHiddenAsync() => messages.Add($"Event: OnHidden called {DateTime.Now.ToLocalTime()}");\n\n private void ClearMessage() => messages = new List();\n}\n')))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/667a4431.6a53d066.js b/assets/js/667a4431.6a53d066.js deleted file mode 100644 index 543ee0088..000000000 --- a/assets/js/667a4431.6a53d066.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[86244],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>u});var a=n(67294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=a.createContext({}),p=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(s.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},g=a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),m=p(n),g=o,u=m["".concat(s,".").concat(g)]||m[g]||d[g]||r;return n?a.createElement(u,l(l({ref:t},c),{},{components:n})):a.createElement(u,l({ref:t},c))}));function u(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,l=new Array(r);l[0]=g;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[m]="string"==typeof e?e:o,l[1]=i;for(var p=2;p{n.d(t,{ZP:()=>m});var a=n(87462),o=n(67294),r=n(3905),l=n(72389);function i(e){let{children:t,fallback:n}=e;return(0,l.Z)()?o.createElement(o.Fragment,null,t?.()):n??null}n(73935);function s(){let e=document.getElementById("divCarbonAd");if(e){let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),e.appendChild(t)}return null}const p={toc:[]},c="wrapper";function m(e){let{components:t,...n}=e;return(0,r.kt)(c,(0,a.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("div",{id:"divCarbonAd"}),(0,r.kt)(i,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,r.kt)(s,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},7749:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>g,frontMatter:()=>l,metadata:()=>s,toc:()=>c});var a=n(87462),o=(n(67294),n(3905)),r=n(58034);const l={title:"Blazor Collapse Component",description:"Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.",image:"https://i.imgur.com/8A0emQe.png",sidebar_label:"Collapse",sidebar_position:9},i="Blazor Collapse",s={unversionedId:"components/collapse",id:"components/collapse",title:"Blazor Collapse Component",description:"Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.",source:"@site/docs/05-components/collapse.mdx",sourceDirName:"05-components",slug:"/components/collapse",permalink:"/components/collapse",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/05-components/collapse.mdx",tags:[],version:"current",sidebarPosition:9,frontMatter:{title:"Blazor Collapse Component",description:"Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.",image:"https://i.imgur.com/8A0emQe.png",sidebar_label:"Collapse",sidebar_position:9},sidebar:"tutorialSidebar",previous:{title:"Charts",permalink:"/components/charts"},next:{title:"Confirm Dialog",permalink:"/components/confirm-dialog"}},p={},c=[{value:"Parameters",id:"parameters",level:2},{value:"Methods",id:"methods",level:2},{value:"Events",id:"events",level:2},{value:"How it works",id:"how-it-works",level:2},{value:"Examples",id:"examples",level:2},{value:"Horizontal",id:"horizontal",level:2},{value:"Events Example",id:"events-example",level:3}],m={toc:c},d="wrapper";function g(e){let{components:t,...n}=e;return(0,o.kt)(d,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"blazor-collapse"},"Blazor Collapse"),(0,o.kt)("p",null,"Toggle the visibility of content across your project with the Blazor Bootstrap ",(0,o.kt)("inlineCode",{parentName:"p"},"Collapse")," component."),(0,o.kt)(r.ZP,{mdxType:"CarbonAd"}),(0,o.kt)("img",{src:"https://i.imgur.com/8A0emQe.png",alt:"Blazor Bootstrap: Collapse Component"}),(0,o.kt)("h2",{id:"parameters"},"Parameters"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Type"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Default"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Required"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"ChildContent"),(0,o.kt)("td",{parentName:"tr",align:"left"},"RenderFragment"),(0,o.kt)("td",{parentName:"tr",align:"left"},"null"),(0,o.kt)("td",{parentName:"tr",align:"left"},"\u2714\ufe0f"),(0,o.kt)("td",{parentName:"tr",align:"left"},"Specifies the content to be rendered inside the collapse."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"Horizontal"),(0,o.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,o.kt)("td",{parentName:"tr",align:"left"},"false"),(0,o.kt)("td",{parentName:"tr",align:"left"}),(0,o.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the horizontal."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"Parent"),(0,o.kt)("td",{parentName:"tr",align:"left"},"string"),(0,o.kt)("td",{parentName:"tr",align:"left"},"null"),(0,o.kt)("td",{parentName:"tr",align:"left"}),(0,o.kt)("td",{parentName:"tr",align:"left"},"Gets or sets the parent."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"Toggle"),(0,o.kt)("td",{parentName:"tr",align:"left"},"bool"),(0,o.kt)("td",{parentName:"tr",align:"left"},"false"),(0,o.kt)("td",{parentName:"tr",align:"left"}),(0,o.kt)("td",{parentName:"tr",align:"left"},"Toggles the collapsible element on invocation."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,o.kt)("h2",{id:"methods"},"Methods"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"ShowAsync"),(0,o.kt)("td",{parentName:"tr",align:"left"},"Shows a collapsible element."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"HideAsync"),(0,o.kt)("td",{parentName:"tr",align:"left"},"Hides a collapsible element."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"ToggleAsync"),(0,o.kt)("td",{parentName:"tr",align:"left"},"Toggles a collapsible element to shown or hidden."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,o.kt)("h2",{id:"events"},"Events"),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Description"),(0,o.kt)("th",{parentName:"tr",align:"left"},"Added Version"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"OnShowing"),(0,o.kt)("td",{parentName:"tr",align:"left"},"This event fires immediately when the show instance method is called."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"OnShown"),(0,o.kt)("td",{parentName:"tr",align:"left"},"This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete)."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"OnHiding"),(0,o.kt)("td",{parentName:"tr",align:"left"},"This event is fired immediately when the hide method has been called."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:"left"},"OnHidden"),(0,o.kt)("td",{parentName:"tr",align:"left"},"This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete)."),(0,o.kt)("td",{parentName:"tr",align:"left"},"1.7.0")))),(0,o.kt)("h2",{id:"how-it-works"},"How it works"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Collapse")," component is used to show and hide content. Use ",(0,o.kt)("inlineCode",{parentName:"p"},"ShowAsync"),", ",(0,o.kt)("inlineCode",{parentName:"p"},"HideAsync"),", and ",(0,o.kt)("inlineCode",{parentName:"p"},"ToggleAsync")," methods to toggle the content.\nCollapsing an element will animate the height from its current value to ",(0,o.kt)("inlineCode",{parentName:"p"},"0"),"."),(0,o.kt)("admonition",{type:"info"},(0,o.kt)("p",{parentName:"admonition"},"The animation effect of this component is dependent on the prefers-reduced-motion media query.\nSee the ",(0,o.kt)("a",{parentName:"p",href:"https://getbootstrap.com/docs/5.3/getting-started/accessibility/#reduced-motion"},"reduced motion section of our accessibility documentation"),".")),(0,o.kt)("h2",{id:"examples"},"Examples"),(0,o.kt)("p",null,"Click the buttons below to show and hide the content."),(0,o.kt)("img",{src:"https://i.imgur.com/8A0emQe.png",alt:"Blazor Bootstrap: Collapse Component - Examples"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1-3,5} showLineNumbers","{1-3,5}":!0,showLineNumbers:!0},'\n\n\n\n\n \n \n Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.\n \n \n\n')),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,4-6} showLineNumbers","{2,4-6}":!0,showLineNumbers:!0},"@code {\n Collapse collapse1 = default!;\n\n private async Task ShowContentAsync() => await collapse1.ShowAsync();\n private async Task HideContentAsync() => await collapse1.HideAsync();\n private async Task ToggleContentAsync() => await collapse1.ToggleAsync();\n}\n")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/collapse#examples"},"See demo here")),(0,o.kt)("h2",{id:"horizontal"},"Horizontal"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Collapse")," component supports horizontal collapsing.\nSet the ",(0,o.kt)("inlineCode",{parentName:"p"},"Horizontal")," parameter to ",(0,o.kt)("inlineCode",{parentName:"p"},"true")," to enable horizontal collapsing."),(0,o.kt)("img",{src:"https://i.imgur.com/kgSAEVL.png",alt:"Blazor Bootstrap: Collapse Component - Horizontal"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{1-3,5} showLineNumbers","{1-3,5}":!0,showLineNumbers:!0},'\n\n\n\n\n \n \n This is some placeholder content for a horizontal collapse. It\'s hidden by default and shown when triggered.\n \n \n\n')),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{2,4-6} showLineNumbers","{2,4-6}":!0,showLineNumbers:!0},"@code {\n Collapse collapse1 = default!;\n\n private async Task ShowContentAsync() => await collapse1.ShowAsync();\n private async Task HideContentAsync() => await collapse1.HideAsync();\n private async Task ToggleContentAsync() => await collapse1.ToggleAsync();\n}\n")),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://demos.blazorbootstrap.com/collapse#horizontal"},"See demo here")),(0,o.kt)("h3",{id:"events-example"},"Events Example"),(0,o.kt)("p",null,"Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality."),(0,o.kt)("img",{src:"https://i.imgur.com/kH11WqA.png",alt:"Blazor Bootstrap: Collapse Component - Events"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'\n\n\n\n\n\n \n \n Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.\n \n \n\n\n
\n @foreach (var item in messages)\n {\n

@item

\n }\n
\n')),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-cshtml",metastring:"{} showLineNumbers","{}":!0,showLineNumbers:!0},'@code {\n Collapse collapse1 = default!;\n\n List messages = new List();\n\n private async Task ShowContentAsync() => await collapse1.ShowAsync();\n private async Task HideContentAsync() => await collapse1.HideAsync();\n private async Task ToggleContentAsync() => await collapse1.ToggleAsync();\n\n private void OnCollapseShowingAsync() => messages.Add($"Event: OnShowing called {DateTime.Now.ToLocalTime()}");\n\n private void OnCollapseShownAsync() => messages.Add($"Event: OnShown called {DateTime.Now.ToLocalTime()}");\n\n private void OnCollapseHidingAsync() => messages.Add($"Event: OnHiding called {DateTime.Now.ToLocalTime()}");\n\n private void OnCollapseHiddenAsync() => messages.Add($"Event: OnHidden called {DateTime.Now.ToLocalTime()}");\n\n private void ClearMessage() => messages = new List();\n}\n')))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/782db9e8.1dda8403.js b/assets/js/782db9e8.1dda8403.js new file mode 100644 index 000000000..eb5ea36ee --- /dev/null +++ b/assets/js/782db9e8.1dda8403.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkblazorbootstrap=self.webpackChunkblazorbootstrap||[]).push([[16730],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>g});var a=r(67294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function s(e){for(var t=1;t=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var i=a.createContext({}),p=function(e){var t=a.useContext(i),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},c=function(e){var t=p(e.components);return a.createElement(i.Provider,{value:t},e.children)},m="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=p(r),u=n,g=m["".concat(i,".").concat(u)]||m[u]||d[u]||o;return r?a.createElement(g,s(s({ref:t},c),{},{components:r})):a.createElement(g,s({ref:t},c))}));function g(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,s=new Array(o);s[0]=u;var l={};for(var i in t)hasOwnProperty.call(t,i)&&(l[i]=t[i]);l.originalType=e,l[m]="string"==typeof e?e:n,s[1]=l;for(var p=2;p{r.d(t,{ZP:()=>m});var a=r(87462),n=r(67294),o=r(3905),s=r(72389);function l(e){let{children:t,fallback:r}=e;return(0,s.Z)()?n.createElement(n.Fragment,null,t?.()):r??null}r(73935);function i(){let e=document.getElementById("divCarbonAd");return e&&setTimeout((()=>{let t=document.getElementById("_carbonads_js");t&&t.remove(),t=document.createElement("script"),t.async=!0,t.id="_carbonads_js",t.src="//cdn.carbonads.com/carbon.js?serve=CWYICKJI&placement=docsblazorbootstrapcom",t.type="text/javascript",t.onerror=function(){console.error(`An error occurred while loading the script: ${source}`)},e.replaceChildren(),t&&e.appendChild(t)}),5e3),null}const p={toc:[]},c="wrapper";function m(e){let{components:t,...r}=e;return(0,o.kt)(c,(0,a.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("div",{id:"divCarbonAd"}),(0,o.kt)(l,{fallback:null,mdxType:"BrowserOnly"},(()=>(0,o.kt)(i,{mdxType:"RenderAd"}))))}m.isMDXComponent=!0},83588:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>u,frontMatter:()=>s,metadata:()=>i,toc:()=>c});var a=r(87462),n=(r(67294),r(3905)),o=r(58034);const s={id:"blazor-server",sidebar_label:"Blazor Server",sidebar_position:2,title:"Blazor Server"},l="Getting started - Blazor Server",i={unversionedId:"getting-started/blazor-server",id:"getting-started/blazor-server",title:"Blazor Server",description:"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.",source:"@site/docs/01-getting-started/getting-started-server.mdx",sourceDirName:"01-getting-started",slug:"/getting-started/blazor-server",permalink:"/getting-started/blazor-server",draft:!1,editUrl:"https://github.com/vikramlearning/blazorbootstrap/edit/master/docs/docs/01-getting-started/getting-started-server.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{id:"blazor-server",sidebar_label:"Blazor Server",sidebar_position:2,title:"Blazor Server"},sidebar:"tutorialSidebar",previous:{title:"Blazor WebAssembly",permalink:"/getting-started/blazor-webassembly"},next:{title:"MAUI Blazor",permalink:"/getting-started/maui-blazor"}},p={},c=[{value:"Install Nuget Package",id:"install-nuget-package",level:2},{value:"Add CSS references",id:"add-css-references",level:2},{value:"Add script references",id:"add-script-references",level:2},{value:"Register services",id:"register-services",level:2},{value:"Remove default references",id:"remove-default-references",level:2},{value:"Starter templates",id:"starter-templates",level:2},{value:".NET 6",id:"net-6",level:3},{value:".NET 7",id:"net-7",level:3}],m={toc:c},d="wrapper";function u(e){let{components:t,...r}=e;return(0,n.kt)(d,(0,a.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("h1",{id:"getting-started---blazor-server"},"Getting started - Blazor Server"),(0,n.kt)("p",null,"Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework."),(0,n.kt)(o.ZP,{mdxType:"CarbonAd"}),(0,n.kt)("h2",{id:"install-nuget-package"},"Install Nuget Package"),(0,n.kt)("p",null,"Looking to quickly add ",(0,n.kt)("strong",{parentName:"p"},"Blazor Bootstrap")," to your project? Use NuGet package manager."),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-shell"},"Install-Package Blazor.Bootstrap -Version 1.10.4\n")),(0,n.kt)("h2",{id:"add-css-references"},"Add CSS references"),(0,n.kt)("p",null,"Add the following references to the ",(0,n.kt)("inlineCode",{parentName:"p"},"head")," section in the ",(0,n.kt)("strong",{parentName:"p"},"Pages/_Host.cshtml"),"."),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:"showLineNumbers",showLineNumbers:!0},'\n\n\n')),(0,n.kt)("admonition",{type:"note"},(0,n.kt)("p",{parentName:"admonition"},"If you use the ",(0,n.kt)("strong",{parentName:"p"},"Blazor Server App Empty*")," template (without demonstration code and Bootstrap), add the following references to the ",(0,n.kt)("inlineCode",{parentName:"p"},"head")," section in the ",(0,n.kt)("strong",{parentName:"p"},"Pages/_Host.cshtml"),".\nThere is a known GitHub issue ",(0,n.kt)("a",{parentName:"p",href:"https://github.com/dotnet/aspnetcore/issues/43975"},"Blazor empty template doesn't load scoped CSS"),".")),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:"showLineNumbers",showLineNumbers:!0},'\n')),(0,n.kt)("admonition",{title:"IMPORTANT",type:"danger"},(0,n.kt)("p",{parentName:"admonition"},"In .NET 6 Blazor Server App default template, you may see ",(0,n.kt)("strong",{parentName:"p"},"Pages/_Layout.cshtml"),". So, add these references in the ",(0,n.kt)("strong",{parentName:"p"},"Pages/_Layout.cshtml")," instead of in the ",(0,n.kt)("strong",{parentName:"p"},"Pages/_Host.cshtml"),".")),(0,n.kt)("h2",{id:"add-script-references"},"Add script references"),(0,n.kt)("p",null,"Add the following references to the ",(0,n.kt)("inlineCode",{parentName:"p"},"body")," section in the ",(0,n.kt)("strong",{parentName:"p"},"Pages/_Host.cshtml")," after the ",(0,n.kt)("strong",{parentName:"p"},"_framework/blazor.server.js")," reference."),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-js",metastring:"showLineNumbers",showLineNumbers:!0},' - +
- + \ No newline at end of file diff --git a/blog/2021/11/23/blazorbootstrap-0.0.1.html b/blog/2021/11/23/blazorbootstrap-0.0.1.html index 7d73059fb..399f85fd2 100644 --- a/blog/2021/11/23/blazorbootstrap-0.0.1.html +++ b/blog/2021/11/23/blazorbootstrap-0.0.1.html @@ -10,13 +10,13 @@ - +

BlazorBootstrap v0.0.1

· One min read
Vikram Reddy

Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers.

New Components​

  • Alert
  • Button
  • Icon
  • Modals
  • Offcanvas
  • Tooltip
- + \ No newline at end of file diff --git a/blog/2021/11/27/blazorbootstrap-0.0.2.html b/blog/2021/11/27/blazorbootstrap-0.0.2.html index e0bd4dfba..23c637fb7 100644 --- a/blog/2021/11/27/blazorbootstrap-0.0.2.html +++ b/blog/2021/11/27/blazorbootstrap-0.0.2.html @@ -10,13 +10,13 @@ - +

BlazorBootstrap v0.0.2

· One min read
Vikram Reddy

In this release, our focus was more on documenting the individual components.

Initial documentation is available for the below components:

  • Alert
  • Button
  • Icon
  • Modal
  • Offcanvas
  • Tooltip
- + \ No newline at end of file diff --git a/blog/2021/12/08/blazorbootstrap-0.0.3.html b/blog/2021/12/08/blazorbootstrap-0.0.3.html index ac9b1bdc5..d75812559 100644 --- a/blog/2021/12/08/blazorbootstrap-0.0.3.html +++ b/blog/2021/12/08/blazorbootstrap-0.0.3.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2021/12/12/blazorbootstrap-0.0.4.html b/blog/2021/12/12/blazorbootstrap-0.0.4.html index a96ca21d6..8e084cb9d 100644 --- a/blog/2021/12/12/blazorbootstrap-0.0.4.html +++ b/blog/2021/12/12/blazorbootstrap-0.0.4.html @@ -10,13 +10,13 @@ - +

BlazorBootstrap v0.0.4

· One min read
Vikram Reddy

Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release.

Changelog​

  • Code improvements
  • Documentation updates

Breaking changes​

  • Callback events renamed
    • Showing -> OnShowing
    • Shown -> OnShown
    • Hiding -> OnHiding
    • Hidden -> OnHidden
    • HidePrevented -> OnHidePrevented

Offcanvas​

  • Callback events renamed
    • Showing -> OnShowing
    • Shown -> OnShown
    • Hiding -> OnHiding
    • Hidden -> OnHidden

Tooltip​

  • Parameters renamed
    • TooltipTitle -> Title
    • TooltipPlacement -> Placement

Docs update​

For the below components, documentation is updated.

  • Alerts
  • Buttons
  • Icons
  • Modal
  • Offcanvas
  • Toasts
  • Tooltips
- + \ No newline at end of file diff --git a/blog/2021/12/20/blazorbootstrap-0.1.0.html b/blog/2021/12/20/blazorbootstrap-0.1.0.html index 2c8149b57..46324c868 100644 --- a/blog/2021/12/20/blazorbootstrap-0.1.0.html +++ b/blog/2021/12/20/blazorbootstrap-0.1.0.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2021/12/21/blazorbootstrap-0.1.1.html b/blog/2021/12/21/blazorbootstrap-0.1.1.html index e623b49cf..e0ec695a7 100644 --- a/blog/2021/12/21/blazorbootstrap-0.1.1.html +++ b/blog/2021/12/21/blazorbootstrap-0.1.1.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/01/15/blazorbootstrap-0.2.0.html b/blog/2022/01/15/blazorbootstrap-0.2.0.html index 90df1bdfb..0de141435 100644 --- a/blog/2022/01/15/blazorbootstrap-0.2.0.html +++ b/blog/2022/01/15/blazorbootstrap-0.2.0.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/02/27/blazorbootstrap-0.2.1.html b/blog/2022/02/27/blazorbootstrap-0.2.1.html index 56d1c41f4..c9ddd82a0 100644 --- a/blog/2022/02/27/blazorbootstrap-0.2.1.html +++ b/blog/2022/02/27/blazorbootstrap-0.2.1.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/03/15/blazorbootstrap-0.2.2.html b/blog/2022/03/15/blazorbootstrap-0.2.2.html index 0c375d968..11edd28f6 100644 --- a/blog/2022/03/15/blazorbootstrap-0.2.2.html +++ b/blog/2022/03/15/blazorbootstrap-0.2.2.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/04/30/blazorbootstrap-0.2.3.html b/blog/2022/04/30/blazorbootstrap-0.2.3.html index 1502563ae..f4e7793cf 100644 --- a/blog/2022/04/30/blazorbootstrap-0.2.3.html +++ b/blog/2022/04/30/blazorbootstrap-0.2.3.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/06/19/blazorbootstrap-0.2.4.html b/blog/2022/06/19/blazorbootstrap-0.2.4.html index ad17c854c..7dd7b1095 100644 --- a/blog/2022/06/19/blazorbootstrap-0.2.4.html +++ b/blog/2022/06/19/blazorbootstrap-0.2.4.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/07/28/blazorbootstrap-0.2.5.html b/blog/2022/07/28/blazorbootstrap-0.2.5.html index 3cbbb4706..5483245b7 100644 --- a/blog/2022/07/28/blazorbootstrap-0.2.5.html +++ b/blog/2022/07/28/blazorbootstrap-0.2.5.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/08/13/blazorbootstrap-0.2.6.html b/blog/2022/08/13/blazorbootstrap-0.2.6.html index 4b9fd7e9c..10188232b 100644 --- a/blog/2022/08/13/blazorbootstrap-0.2.6.html +++ b/blog/2022/08/13/blazorbootstrap-0.2.6.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/08/31/blazorbootstrap-0.3.0.html b/blog/2022/08/31/blazorbootstrap-0.3.0.html index 2a59f51b0..7e364d80a 100644 --- a/blog/2022/08/31/blazorbootstrap-0.3.0.html +++ b/blog/2022/08/31/blazorbootstrap-0.3.0.html @@ -10,13 +10,13 @@ - +

BlazorBootstrap v0.3.0

· One min read
Vikram Reddy

We are excited to release 0.3.0 with significant enhancements to the grid component.

Blazor Bootstrap: Grid Component

Updates​

  • Grid component enhancements

Grid component enhancements​

  • Multiple columns filtering (client side and server side)
  • Set default filtering
  • Disable specific column filter
  • Increase filter textbox width
  • Set default sorting
  • Disable specific column sorting
  • Header text alignment
  • Cell alignment
  • Cell formatting
  • Cell nowrap
  • Pagination alignment
  • Empty data
  • Responsive grid with horizontal scrolling
- + \ No newline at end of file diff --git a/blog/2022/09/04/blazorbootstrap-0.4.0.html b/blog/2022/09/04/blazorbootstrap-0.4.0.html index 828e89e21..575575133 100644 --- a/blog/2022/09/04/blazorbootstrap-0.4.0.html +++ b/blog/2022/09/04/blazorbootstrap-0.4.0.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/09/12/blazorbootstrap-0.4.1.html b/blog/2022/09/12/blazorbootstrap-0.4.1.html index b1883729a..63d29545b 100644 --- a/blog/2022/09/12/blazorbootstrap-0.4.1.html +++ b/blog/2022/09/12/blazorbootstrap-0.4.1.html @@ -10,13 +10,13 @@ - +

BlazorBootstrap v0.4.1

· One min read
Vikram Reddy

We are excited to release 0.4.1 with enhancements.

Blazor Bootstrap: Callout Component - Examples

Enhancements​

  • AutoComplete component
  • Callout component
  • Grid component

AutoComplete enhancements​

  • StringComparison support
  • StringFilterOperator support

Callout enhancements​

  • The default heading and default icon are displayed based on the callout type.
  • Change the callout header according to your context.

Callout breaking changes​

  • Renamed enum CalloutColor to CalloutType
  • Renamed parameter Color to Type

Grid enhancements​

  • StringComparison support
- + \ No newline at end of file diff --git a/blog/2022/09/17/blazorbootstrap-0.4.2.html b/blog/2022/09/17/blazorbootstrap-0.4.2.html index 25b909d51..ce4507d57 100644 --- a/blog/2022/09/17/blazorbootstrap-0.4.2.html +++ b/blog/2022/09/17/blazorbootstrap-0.4.2.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/10/16/blazorbootstrap-0.5.0.html b/blog/2022/10/16/blazorbootstrap-0.5.0.html index c2aee2c8e..603822109 100644 --- a/blog/2022/10/16/blazorbootstrap-0.5.0.html +++ b/blog/2022/10/16/blazorbootstrap-0.5.0.html @@ -10,13 +10,13 @@ - +

BlazorBootstrap v0.5.0

· One min read
Vikram Reddy

We are excited to release 0.5.0 with new blazor chart components.

Blazor Chart Component - Blazor Bar Chart Example
Blazor Chart Component - Blazor Line Chart Example

New blazor chart components​

  • Blazor Bar Chart component

    Blazor Chart Component - Blazor Bar Chart

  • Blazor Doughnut Chart component

    Blazor Chart Component - Blazor Doughnut Chart

  • Blazor Line Chart component

    Blazor Chart Component - Blazor Line Chart

  • Blazor Pie Chart component

    Blazor Chart Component - Blazor Pie Chart
- + \ No newline at end of file diff --git a/blog/2022/10/22/blazorbootstrap-0.5.1.html b/blog/2022/10/22/blazorbootstrap-0.5.1.html index bc7f00c3a..4eb543e71 100644 --- a/blog/2022/10/22/blazorbootstrap-0.5.1.html +++ b/blog/2022/10/22/blazorbootstrap-0.5.1.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/10/30/blazorbootstrap-0.6.0.html b/blog/2022/10/30/blazorbootstrap-0.6.0.html index a373c782a..293b468c6 100644 --- a/blog/2022/10/30/blazorbootstrap-0.6.0.html +++ b/blog/2022/10/30/blazorbootstrap-0.6.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v0.6.0

· One min read
Vikram Reddy

We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component.

Blazor Progress component

New Components​

  • Progress component

Progress component features​

  • Labels
  • Backgrounds
  • Multiple bars
  • Striped
  • Animated stripes
Blazor Progress component

Toasts component features​

  • Toasts with/without title
  • Auto hide
  • Placement
  • Stack Length
Blazor Toasts component
- + \ No newline at end of file diff --git a/blog/2022/11/18/blazorbootstrap-1.0.0.html b/blog/2022/11/18/blazorbootstrap-1.0.0.html index 907dd788d..97951751b 100644 --- a/blog/2022/11/18/blazorbootstrap-1.0.0.html +++ b/blog/2022/11/18/blazorbootstrap-1.0.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.0.0

· One min read
Vikram Reddy

We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!!

Blazor NumberInput componentBlazor Tabs component

New Components​

  • NumberInput component

Blazor NumberInput component features​

  • Generic type support
  • Enable min and max
  • Step
  • Text alignment
  • Allow negative numbers
  • Disable
  • Validations
  • Events: ValueChanged
Blazor NumberInput component

Blazor Tabs component features​

  • Fade effect
  • Title with Icon
  • Disable Tab
  • Pills
  • Activate individual tabs
  • Events
Blazor Tabs component

Demos site enhancements​

  • Brand new landing page
  • The demo example and source code are split into two tabs for easy access.
- + \ No newline at end of file diff --git a/blog/2022/11/22/blazorbootstrap-1.0.1.html b/blog/2022/11/22/blazorbootstrap-1.0.1.html index 0d5d4df12..530456e27 100644 --- a/blog/2022/11/22/blazorbootstrap-1.0.1.html +++ b/blog/2022/11/22/blazorbootstrap-1.0.1.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.0.1

· One min read
Vikram Reddy

We are excited to release 1.0.1, with enhancements and more examples!!!

Blazor Preload componentBlazor Offcanvas componentBlazor Confirm Dialog component

What's changed​

  • Confirmation Dialog component enhancements
  • Offcanvas component enhancements

Demos site examples​

  • New examples for 'Blazor Confirm Dialog Component'
  • New examples for 'Blazor Offcanvas Component'
  • New examples for 'Blazor Preload Component'
  • SEO Updates
- + \ No newline at end of file diff --git a/blog/2022/11/28/blazorbootstrap-1.1.0.html b/blog/2022/11/28/blazorbootstrap-1.1.0.html index 889a023b7..f1a3328a7 100644 --- a/blog/2022/11/28/blazorbootstrap-1.1.0.html +++ b/blog/2022/11/28/blazorbootstrap-1.1.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.1.0

· One min read
Vikram Reddy

We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!!

Blazor Toasts serviceBlazor Bootstrap: Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Bootstrap: Blazor ConfirmDialog componentBlazor Icon componentBlazor Bootstrap: Blazor Icon component

What's changed​

  • New ToastService
  • ConfirmDialog component enhancements
  • PreloadService enhancements
  • Icon component enhancements

Demos site examples​

  • New examples for 'Blazor ToastService'
  • New examples for 'Blazor Confirm Dialog Component'
  • New examples for 'Blazor Preload Component'
  • New examples for 'Blazor Icon Component'
- + \ No newline at end of file diff --git a/blog/2022/12/12/blazorbootstrap-1.2.0.html b/blog/2022/12/12/blazorbootstrap-1.2.0.html index 08b6aab2b..a3df87136 100644 --- a/blog/2022/12/12/blazorbootstrap-1.2.0.html +++ b/blog/2022/12/12/blazorbootstrap-1.2.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.2.0

· One min read
Vikram Reddy

We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!!

Blazor CurrencyInput componentBlazor Bootstrap: Blazor CurrencyInput component

What's changed​

  • New CurrencyInput component

Demos site updates​

  • New examples for 'Blazor CurrencyInput Component'
  • New examples for 'Blazor Confirm Dialog Component'
- + \ No newline at end of file diff --git a/blog/2022/12/15/blazorbootstrap-1.3.0.html b/blog/2022/12/15/blazorbootstrap-1.3.0.html index 876869ebf..7238b8717 100644 --- a/blog/2022/12/15/blazorbootstrap-1.3.0.html +++ b/blog/2022/12/15/blazorbootstrap-1.3.0.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2022/12/18/blazorbootstrap-1.3.1.html b/blog/2022/12/18/blazorbootstrap-1.3.1.html index 61d52fc54..aa01507d3 100644 --- a/blog/2022/12/18/blazorbootstrap-1.3.1.html +++ b/blog/2022/12/18/blazorbootstrap-1.3.1.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.3.1

· One min read
Vikram Reddy

We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!!

Blazor AutoComplete componentBlazor Bootstrap: Blazor AutoComplete component

What's changed​

  • AutoComplete component - keyboard navigation support
  • AutoComplete component - CancellationToken support

Demos site updates​

  • New examples for 'Blazor AutoComplete Component'
- + \ No newline at end of file diff --git a/blog/2023/01/15/blazorbootstrap-1.4.0.html b/blog/2023/01/15/blazorbootstrap-1.4.0.html index 0c57b1e46..d93500b92 100644 --- a/blog/2023/01/15/blazorbootstrap-1.4.0.html +++ b/blog/2023/01/15/blazorbootstrap-1.4.0.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/01/23/blazorbootstrap-1.4.1.html b/blog/2023/01/23/blazorbootstrap-1.4.1.html index f02e8e92f..6f7ec69bd 100644 --- a/blog/2023/01/23/blazorbootstrap-1.4.1.html +++ b/blog/2023/01/23/blazorbootstrap-1.4.1.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.4.1

· One min read
Vikram Reddy

We are excited to release 1.4.1, with modal updates and more examples!!!

Blazor modal componentBlazor Bootstrap: Blazor modal component

What's changed​

  • Modal component
    • Render different components dynamically within the modal without iterating through possible types or using conditional logic.
    • If dynamically-rendered components have component parameters, pass them as an IDictionary<string, object>.
    • Pass event callbacks to a dynamic component.

Demos site updates​

  • New examples for Blazor Modal Component
  • New examples for Blazor Confirm Dialog Component
- + \ No newline at end of file diff --git a/blog/2023/01/30/blazorbootstrap-1.4.2.html b/blog/2023/01/30/blazorbootstrap-1.4.2.html index b2a4a6870..15d3e6551 100644 --- a/blog/2023/01/30/blazorbootstrap-1.4.2.html +++ b/blog/2023/01/30/blazorbootstrap-1.4.2.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.4.2

· One min read
Vikram Reddy

We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!!

Blazor Bootstrap: Blazor WebAssembly and Server starter templates

Blazor Bootstrap: Blazor WebAssembly and Server starter templates

What's changed​

  1. Auto Complete component
    • Bug fix

Starter Templates​

  1. Blazor Bootstrap: Blazor WebAssembly Template
  2. Blazor Bootstrap: Blazor WebAssembly Empty Template
  3. Blazor Bootstrap: Blazor Server Template
  4. Blazor Bootstrap: Blazor Server Empty Template
- + \ No newline at end of file diff --git a/blog/2023/02/07/blazorbootstrap-1.4.3.html b/blog/2023/02/07/blazorbootstrap-1.4.3.html index 3eeba9790..cb31e04a4 100644 --- a/blog/2023/02/07/blazorbootstrap-1.4.3.html +++ b/blog/2023/02/07/blazorbootstrap-1.4.3.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/02/10/blazorbootstrap-1.4.4.html b/blog/2023/02/10/blazorbootstrap-1.4.4.html index 4beb87039..5d8ec7133 100644 --- a/blog/2023/02/10/blazorbootstrap-1.4.4.html +++ b/blog/2023/02/10/blazorbootstrap-1.4.4.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/02/23/blazorbootstrap-1.4.5.html b/blog/2023/02/23/blazorbootstrap-1.4.5.html index 2d19a5750..a563bfae0 100644 --- a/blog/2023/02/23/blazorbootstrap-1.4.5.html +++ b/blog/2023/02/23/blazorbootstrap-1.4.5.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/03/05/blazorbootstrap-1.5.0.html b/blog/2023/03/05/blazorbootstrap-1.5.0.html index 4497b69b0..308a03ae1 100644 --- a/blog/2023/03/05/blazorbootstrap-1.5.0.html +++ b/blog/2023/03/05/blazorbootstrap-1.5.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.5.0

· One min read
Vikram Reddy

We are excited to release 1.5.0 with new DateInput component and other updates!!!

Blazor Bootstrap: DateInput Component

What's new​

  • DateInput component
    • Generic type: DateOnly, DateOnly?, DateTime, and DateTime? data types supported
    • Max and Min range
    • Disable
    • Validations
    • ValueChanged event

What's changed​

  • Offcanvas component

    • Render different components dynamically within the modal without iterating through possible types or using conditional logic.
    • If dynamically-rendered components have component parameters, pass them as an IDictionary<string, object>.
    • Pass event callbacks to a dynamic component.

  • Button component

    • Dynamic tooltip support added

  • Tooltip component

    • Dynamic tooltip support added
- + \ No newline at end of file diff --git a/blog/2023/03/12/blazorbootstrap-1.6.0.html b/blog/2023/03/12/blazorbootstrap-1.6.0.html index e8b8bf867..ee121014f 100644 --- a/blog/2023/03/12/blazorbootstrap-1.6.0.html +++ b/blog/2023/03/12/blazorbootstrap-1.6.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.6.0

· One min read
Vikram Reddy

We are excited to release 1.6.0 with new TimeInput component and other updates!!!

Blazor Bootstrap: TimeInput Component

What's new​

  • TimeInput component
    • Generic type: TimeOnly and TimeOnly? supported
    • Max and Min range
    • Disable
    • Validations
    • ValueChanged event
    • Restrict the time field based on the entry in another field

What's changed​

  • Grid component

    • Conditional css class for grid row
    • Conditional css class for grid column

  • DateInput component

    • Restrict the date field based on the entry in another field

  • Modal component

    • Modal CloseOnEscape not working - Fixed

  • Offcanvas component

    • Offcanvas CloseOnEscape not working #160 - Fixed

  • Upgrade Bootstrap version from v5.1.3 to v5.2.3

- + \ No newline at end of file diff --git a/blog/2023/04/10/blazorbootstrap-1.7.0.html b/blog/2023/04/10/blazorbootstrap-1.7.0.html index 8f9944c15..b4d39462a 100644 --- a/blog/2023/04/10/blazorbootstrap-1.7.0.html +++ b/blog/2023/04/10/blazorbootstrap-1.7.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.7.0

· One min read
Vikram Reddy

We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!!

Blazor Bootstrap: Accordion Component

What's new​

  • Badge component

    • Background colors
    • Pill badges
    • Buttons
    • Positioned
    • Generic indicator

  • Collapse component

    • Horizontal collapse
    • Call back events: OnShowing, OnShown, OnHiding, and OnHidden

  • Accordion component

    • Title with Icon
    • Flush
    • Set default active accordion item
    • Always open
    • Activate individual accordion items
    • Call back events: OnShowing, OnShown, OnHiding, and OnHidden

What's changed​

  • Buttons component
    • Disable and enable state dynamically #172

Documentation​

  • Layout setup docs
    • Layout Setup - Blazor WebAssembly
    • Layout Setup - Blazor Server
- + \ No newline at end of file diff --git a/blog/2023/04/19/blazorbootstrap-1.7.1.html b/blog/2023/04/19/blazorbootstrap-1.7.1.html index dee9a312f..f2cc47d41 100644 --- a/blog/2023/04/19/blazorbootstrap-1.7.1.html +++ b/blog/2023/04/19/blazorbootstrap-1.7.1.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.7.1

· One min read
Vikram Reddy

We are excited to release 1.7.1 with Auto complete and Buttons updates!!!

Blazor Bootstrap: Accordion Component

What's changed​

  • Auto Complete component

    • Show Autocomplete reset button when default value set #183

  • Buttons component

    • Button Disabled parameter doesn't work properly on first render in Tabs / Modal #182

    CSS

    • A CSS rule could be more targeted to not interfere with others #184
- + \ No newline at end of file diff --git a/blog/2023/04/24/blazorbootstrap-1.7.2.html b/blog/2023/04/24/blazorbootstrap-1.7.2.html index 10a2e2fee..c559fdbbc 100644 --- a/blog/2023/04/24/blazorbootstrap-1.7.2.html +++ b/blog/2023/04/24/blazorbootstrap-1.7.2.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/04/29/blazorbootstrap-1.7.3.html b/blog/2023/04/29/blazorbootstrap-1.7.3.html index 9340c490a..1c681c9e0 100644 --- a/blog/2023/04/29/blazorbootstrap-1.7.3.html +++ b/blog/2023/04/29/blazorbootstrap-1.7.3.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.7.3

· One min read
Vikram Reddy

We are excited to release 1.7.3 with Buttons and Grid updates!!!

Blazor Bootstrap: Grid Component

What's changed​

  • Button component

    • Button - id on Button is causing Unhandled error #194

  • Grid component

    • Grid calls DataProvider method after input's onchange event #195
- + \ No newline at end of file diff --git a/blog/2023/05/28/blazorbootstrap-1.8.0.html b/blog/2023/05/28/blazorbootstrap-1.8.0.html index f9aaf0f75..360b9b1e1 100644 --- a/blog/2023/05/28/blazorbootstrap-1.8.0.html +++ b/blog/2023/05/28/blazorbootstrap-1.8.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.8.0

· 2 min read
Vikram Reddy

We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!!

Blazor Bootstrap: Grid Component

What's changed​

  • Grid component

    • Grid Selection #179
      • Single selection
      • Multiple selection
      • Disable selection
      • Disable all rows selection
    • Grid Paging #196
      • Dynamic Page Size
      • Page Size Selection

  • Offcanvas component

    • Static backdrop #210

  • Auto Complete component

    • Disable parameter
      • Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component.

  • Currency Input component

    • Disable parameter
      • Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component.

  • Date Input component

    • Disable parameter
      • Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component.

  • Number Input component

    • Disable parameter
      • Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component.

  • Switch component

    • Disable parameter
      • Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component.

  • Time Input component

    • Disable parameter
      • Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component.

  • Blazor Bootstrap Templates

    • Install with .NET CLI: dotnet new install Blazor.Bootstrap.Templates::1.8.0
    Blazor Bootstrap Templates
- + \ No newline at end of file diff --git a/blog/2023/05/31/blazorbootstrap-1.8.1.html b/blog/2023/05/31/blazorbootstrap-1.8.1.html index bf30fa396..48ed24359 100644 --- a/blog/2023/05/31/blazorbootstrap-1.8.1.html +++ b/blog/2023/05/31/blazorbootstrap-1.8.1.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.8.1

· One min read
Vikram Reddy

We are excited to release 1.8.1 with Grid and Tooltip components updates!!!

image

What's changed​

  • Grid component

    • Selection and filters both active bug #214

  • Tooltip component

    • Tooltip does not disappear #213
- + \ No newline at end of file diff --git a/blog/2023/06/11/blazorbootstrap-1.8.2.html b/blog/2023/06/11/blazorbootstrap-1.8.2.html index 905917d5f..88af038a9 100644 --- a/blog/2023/06/11/blazorbootstrap-1.8.2.html +++ b/blog/2023/06/11/blazorbootstrap-1.8.2.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.8.2

· One min read
Vikram Reddy

We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!!

image

What's changed​

  • Grid component

    • Grid local filter with null strings #227
    • Grid Single Select #230

  • Button component

    • Button TooltipTitle does not disappear when clicked #222

  • DateInput component

    • DateInput no reaction to null #221
- + \ No newline at end of file diff --git a/blog/2023/06/16/blazorbootstrap-1.8.3.html b/blog/2023/06/16/blazorbootstrap-1.8.3.html index 4e170d0f3..f9f016390 100644 --- a/blog/2023/06/16/blazorbootstrap-1.8.3.html +++ b/blog/2023/06/16/blazorbootstrap-1.8.3.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/06/30/blazorbootstrap-1.9.0.html b/blog/2023/06/30/blazorbootstrap-1.9.0.html index d0e3ca2f3..30e7fdff5 100644 --- a/blog/2023/06/30/blazorbootstrap-1.9.0.html +++ b/blog/2023/06/30/blazorbootstrap-1.9.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.9.0

· One min read
Vikram Reddy

We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!!

image

What's new​

  • Modal service
    • Global service for the application

What's changed​

  • Modal component

    • Dynamic modal title does not work when using static content #242

  • Icon component

    • New Color parameter added

  • Toasts component

    • ToastService.Notify method does not have AutoHide #238

  • Tabs component

    • ShowTabByIndexAsync not working after OnAfterRenderAsync #243
- + \ No newline at end of file diff --git a/blog/2023/06/31/blazorbootstrap-1.9.1.html b/blog/2023/06/31/blazorbootstrap-1.9.1.html index bef351abb..25989adc8 100644 --- a/blog/2023/06/31/blazorbootstrap-1.9.1.html +++ b/blog/2023/06/31/blazorbootstrap-1.9.1.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/07/01/blazorbootstrap-1.9.2.html b/blog/2023/07/01/blazorbootstrap-1.9.2.html index 4b5e9705d..44551f1a6 100644 --- a/blog/2023/07/01/blazorbootstrap-1.9.2.html +++ b/blog/2023/07/01/blazorbootstrap-1.9.2.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.9.2

· One min read
Vikram Reddy

We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!!

image

What's new​

  • Breadcrumb service
    • Global service for the application

What's changed​

  • Toast service
    • ToastService not working anymore in version 1.9.1 #261
- + \ No newline at end of file diff --git a/blog/2023/07/04/blazorbootstrap-1.9.3.html b/blog/2023/07/04/blazorbootstrap-1.9.3.html index 181f55e8c..65b384397 100644 --- a/blog/2023/07/04/blazorbootstrap-1.9.3.html +++ b/blog/2023/07/04/blazorbootstrap-1.9.3.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/07/05/blazorbootstrap-1.9.4.html b/blog/2023/07/05/blazorbootstrap-1.9.4.html index affb38d0e..e4f93750f 100644 --- a/blog/2023/07/05/blazorbootstrap-1.9.4.html +++ b/blog/2023/07/05/blazorbootstrap-1.9.4.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/2023/07/16/blazorbootstrap-1.9.5.html b/blog/2023/07/16/blazorbootstrap-1.9.5.html index 4a5fcbdbf..dd6ee2b44 100644 --- a/blog/2023/07/16/blazorbootstrap-1.9.5.html +++ b/blog/2023/07/16/blazorbootstrap-1.9.5.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.9.5

· One min read
Vikram Reddy

We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!!

image

What's changed​

  • Grid component

    • New OnRowClick event
    • New OnRowDoubleClick event
    • Grid Component: Row Click Event #264
    • Grid Component - Translatable page size selector #287

  • TimeInput component

    • TimeInput: Changing value does not work #271

  • Switch component

    • Switch class not applied to label #235

  • Modal component

    • Cannot change modal type on static modals #278

  • Line Chart component

    • Multiple of the same chart causing js exception #283

  • Sidebar component

    • SidebarItem without childs, CustomIconName not passed to Icon #286
- + \ No newline at end of file diff --git a/blog/2023/08/13/blazorbootstrap-1.10.0.html b/blog/2023/08/13/blazorbootstrap-1.10.0.html index 39dac750c..b20b959c3 100644 --- a/blog/2023/08/13/blazorbootstrap-1.10.0.html +++ b/blog/2023/08/13/blazorbootstrap-1.10.0.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.10.0

· 2 min read
Vikram Reddy

We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!!

image

What's New​

  • Dropdown Component

    • Single button
    • Multiple colors
    • Split button
    • Sizing
    • Directions (Dropup, Dropup centered, Dropend, and Dropstart)
    • Active
    • Disabled
    • Menu content (Header, Dividers, Text, and Forms)
    • Auto close behavior

  • Card Component

    • Content types (Body, Titles, text, and links)
    • Images
    • List groups
    • Header and footer
    • Sizing
    • Text alignment
    • Background and color
    • Card groups
    • Card groups with footer

What's changed​

  • Bar Chart component

    • New AddDataSetAsync and AddAsync methods

  • Doughnut Chart component

    • New AddDataSetAsync and AddAsync methods

  • Line Chart component

    • New AddDataSetAsync and AddAsync methods

  • Pie Chart component

    • New AddDataSetAsync and AddAsync methods

  • Grid component

    • Grid: Filters translation support #292

  • Button component

    • Tooltip color support added

  • Tooltip component

    • Tooltip color support added
    • Tooltip on button problem #296

  • Switch component

    • Switch is invoking EditContext OnFieldChanged even the change was not from UI #297
- + \ No newline at end of file diff --git a/blog/2023/08/29/blazorbootstrap-1.10.1.html b/blog/2023/08/29/blazorbootstrap-1.10.1.html index 52e01ba34..cef1db782 100644 --- a/blog/2023/08/29/blazorbootstrap-1.10.1.html +++ b/blog/2023/08/29/blazorbootstrap-1.10.1.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.10.1

· One min read
Vikram Reddy

We are excited to release 1.10.1 with base component improvements and chart updates!!!

image

What's changed​

  • We have made improvements to the base components

  • Bar Chart component

    • UpdateAsync method

  • Doughnut Chart component

    • UpdateAsync method

  • Line Chart component

    • UpdateAsync method

  • Pie Chart component

    • UpdateAsync method
- + \ No newline at end of file diff --git a/blog/2023/09/15/blazorbootstrap-1.10.2.html b/blog/2023/09/15/blazorbootstrap-1.10.2.html index 26adf6bf2..7283e3fef 100644 --- a/blog/2023/09/15/blazorbootstrap-1.10.2.html +++ b/blog/2023/09/15/blazorbootstrap-1.10.2.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.10.2

· One min read
Vikram Reddy

We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!!

image

What's changed​

  • AutoComplete component

    • Autocomplete shows "No Records Found" Before Search is finished #352

  • Confirm Dialog component

    • Confirm Dialog - No fade animation #334

  • Modal Service

    • Callback support has been added

  • Tooltip component

    • Dispose issue fixed #327

  • Sidebar component

    • Sidebar should close automatically on mobile #274

  • We have made improvements to all the charts to support data labels #317

    • Bar Chart, Doughnut Chart, Line Chart, and Pie Chart

  • MAUI Blazor App - Getting started docs added

- + \ No newline at end of file diff --git a/blog/2023/10/15/blazorbootstrap-1.10.3.html b/blog/2023/10/15/blazorbootstrap-1.10.3.html index c2e8b4f65..ca5700c5a 100644 --- a/blog/2023/10/15/blazorbootstrap-1.10.3.html +++ b/blog/2023/10/15/blazorbootstrap-1.10.3.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.10.3

· One min read
Vikram Reddy

We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!!

image

What's changed​

  • Grid component

    • Grid: Fixed Header Support #53

  • Dropdown component

    • Add feature to disable Dropdown #373

  • Icon component

    • Sizing for icons in buttons is strange #346

  • Sidebar component

    • Sidebar: Add option to space items #276

  • Docs updates

- + \ No newline at end of file diff --git a/blog/2023/11/18/blazorbootstrap-1.10.4.html b/blog/2023/11/18/blazorbootstrap-1.10.4.html index 145ac947d..d6d4338f9 100644 --- a/blog/2023/11/18/blazorbootstrap-1.10.4.html +++ b/blog/2023/11/18/blazorbootstrap-1.10.4.html @@ -10,13 +10,13 @@ - +

Blazor Bootstrap v1.10.4

· One min read
Vikram Reddy

We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!!

image

What's changed​

  • Grid component

    • Grid: Freeze Columns Support #246

  • Preload component

    • Preload: Add text to preload component #414

  • Switch component

    • Switch: Double click on switch selects the label #401

  • Charts component

    • Chart size updates #384

  • Modal component

    • Pressing Esc still closes the modal even with UseStaticBackdrop="true" #416

  • Docs updates

- + \ No newline at end of file diff --git a/blog/archive.html b/blog/archive.html index ce63fe5f3..861284c20 100644 --- a/blog/archive.html +++ b/blog/archive.html @@ -10,13 +10,13 @@ - +

Archive

Archive

2021

2022

2023

- + \ No newline at end of file diff --git a/blog/page/2.html b/blog/page/2.html index 6e00a4f17..0283874ae 100644 --- a/blog/page/2.html +++ b/blog/page/2.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/page/3.html b/blog/page/3.html index 792d960e6..31a00ff92 100644 --- a/blog/page/3.html +++ b/blog/page/3.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/page/4.html b/blog/page/4.html index f6e3941f2..6a1036063 100644 --- a/blog/page/4.html +++ b/blog/page/4.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/page/5.html b/blog/page/5.html index ab6a2841d..4adfe27a2 100644 --- a/blog/page/5.html +++ b/blog/page/5.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/page/6.html b/blog/page/6.html index 33c143ee7..640159cb7 100644 --- a/blog/page/6.html +++ b/blog/page/6.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/blog/tags.html b/blog/tags.html index f8318e235..db6a1ec22 100644 --- a/blog/tags.html +++ b/blog/tags.html @@ -10,13 +10,13 @@ - +

Tags

B

- + \ No newline at end of file diff --git a/blog/tags/accordion.html b/blog/tags/accordion.html index b25e9f573..049471ebd 100644 --- a/blog/tags/accordion.html +++ b/blog/tags/accordion.html @@ -10,13 +10,13 @@ - +

One post tagged with "accordion"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/alert.html b/blog/tags/alert.html index b0ff146c7..ff25bf9d7 100644 --- a/blog/tags/alert.html +++ b/blog/tags/alert.html @@ -10,13 +10,13 @@ - +

One post tagged with "alert"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/autocomplete.html b/blog/tags/autocomplete.html index 9232860ff..569c4198a 100644 --- a/blog/tags/autocomplete.html +++ b/blog/tags/autocomplete.html @@ -10,13 +10,13 @@ - +

8 posts tagged with "autocomplete"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/badge.html b/blog/tags/badge.html index e4bf5fbf4..52c7336f0 100644 --- a/blog/tags/badge.html +++ b/blog/tags/badge.html @@ -10,13 +10,13 @@ - +

One post tagged with "badge"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-autocomplete.html b/blog/tags/blazor-autocomplete.html index 188b54fdf..8c8ba8722 100644 --- a/blog/tags/blazor-autocomplete.html +++ b/blog/tags/blazor-autocomplete.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-autocomplete"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-bar-chart.html b/blog/tags/blazor-bar-chart.html index ee5640617..9e50af4b6 100644 --- a/blog/tags/blazor-bar-chart.html +++ b/blog/tags/blazor-bar-chart.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-bar-chart"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-bootstrap.html b/blog/tags/blazor-bootstrap.html index 7e161aa2d..7d8b17e21 100644 --- a/blog/tags/blazor-bootstrap.html +++ b/blog/tags/blazor-bootstrap.html @@ -10,13 +10,13 @@ - +

5 posts tagged with "blazor-bootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-charts.html b/blog/tags/blazor-charts.html index 5e27e3ccb..9710755b2 100644 --- a/blog/tags/blazor-charts.html +++ b/blog/tags/blazor-charts.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-charts"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-confirm-dialog.html b/blog/tags/blazor-confirm-dialog.html index 865c46e1f..77fe658b0 100644 --- a/blog/tags/blazor-confirm-dialog.html +++ b/blog/tags/blazor-confirm-dialog.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazor-confirm-dialog"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-currency-input.html b/blog/tags/blazor-currency-input.html index 04e0af3e2..1370e87d0 100644 --- a/blog/tags/blazor-currency-input.html +++ b/blog/tags/blazor-currency-input.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-currency-input"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-dialog.html b/blog/tags/blazor-dialog.html index cf5342b2b..32d5243e5 100644 --- a/blog/tags/blazor-dialog.html +++ b/blog/tags/blazor-dialog.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazor-dialog"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-doughnut-chart.html b/blog/tags/blazor-doughnut-chart.html index d66142521..804124767 100644 --- a/blog/tags/blazor-doughnut-chart.html +++ b/blog/tags/blazor-doughnut-chart.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-doughnut-chart"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-grid-filtering.html b/blog/tags/blazor-grid-filtering.html index c14d73ce9..53c20971f 100644 --- a/blog/tags/blazor-grid-filtering.html +++ b/blog/tags/blazor-grid-filtering.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-grid-filtering"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-grid-paging.html b/blog/tags/blazor-grid-paging.html index 1b7fb8bd5..eea88a6c5 100644 --- a/blog/tags/blazor-grid-paging.html +++ b/blog/tags/blazor-grid-paging.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-grid-paging"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-grid-sorting.html b/blog/tags/blazor-grid-sorting.html index e6df99afb..c2ca81eac 100644 --- a/blog/tags/blazor-grid-sorting.html +++ b/blog/tags/blazor-grid-sorting.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-grid-sorting"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-grid.html b/blog/tags/blazor-grid.html index ce4576462..b07ec8aab 100644 --- a/blog/tags/blazor-grid.html +++ b/blog/tags/blazor-grid.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "blazor-grid"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-input-number.html b/blog/tags/blazor-input-number.html index 5bdaa96ef..c9fd4910f 100644 --- a/blog/tags/blazor-input-number.html +++ b/blog/tags/blazor-input-number.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-input-number"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-input.html b/blog/tags/blazor-input.html index 68cf474f5..e36f23553 100644 --- a/blog/tags/blazor-input.html +++ b/blog/tags/blazor-input.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-input"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-line-chart.html b/blog/tags/blazor-line-chart.html index fd3e0ad54..db64220c5 100644 --- a/blog/tags/blazor-line-chart.html +++ b/blog/tags/blazor-line-chart.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-line-chart"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-number-input.html b/blog/tags/blazor-number-input.html index b6597b4db..7a8e95148 100644 --- a/blog/tags/blazor-number-input.html +++ b/blog/tags/blazor-number-input.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-number-input"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-number.html b/blog/tags/blazor-number.html index a1eceb4d7..eaaa592c1 100644 --- a/blog/tags/blazor-number.html +++ b/blog/tags/blazor-number.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-number"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-offcanvas.html b/blog/tags/blazor-offcanvas.html index f76e1b3d3..5eae5e85f 100644 --- a/blog/tags/blazor-offcanvas.html +++ b/blog/tags/blazor-offcanvas.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-offcanvas"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-pie-chart.html b/blog/tags/blazor-pie-chart.html index 3f098d65f..ddace37b9 100644 --- a/blog/tags/blazor-pie-chart.html +++ b/blog/tags/blazor-pie-chart.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-pie-chart"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-preload.html b/blog/tags/blazor-preload.html index 8d7497f83..38eb2354b 100644 --- a/blog/tags/blazor-preload.html +++ b/blog/tags/blazor-preload.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazor-preload"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-progress-bar.html b/blog/tags/blazor-progress-bar.html index 005856710..d35181bd9 100644 --- a/blog/tags/blazor-progress-bar.html +++ b/blog/tags/blazor-progress-bar.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-progress-bar"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-progress.html b/blog/tags/blazor-progress.html index 5ea0941a4..3565a52d2 100644 --- a/blog/tags/blazor-progress.html +++ b/blog/tags/blazor-progress.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-progress"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-sidemodal.html b/blog/tags/blazor-sidemodal.html index 688bc2e54..5c8fffac5 100644 --- a/blog/tags/blazor-sidemodal.html +++ b/blog/tags/blazor-sidemodal.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-sidemodal"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-spinner.html b/blog/tags/blazor-spinner.html index 0ea298bf5..6df098a4e 100644 --- a/blog/tags/blazor-spinner.html +++ b/blog/tags/blazor-spinner.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazor-spinner"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-starter-templates.html b/blog/tags/blazor-starter-templates.html index 9619fd29e..da43b5e48 100644 --- a/blog/tags/blazor-starter-templates.html +++ b/blog/tags/blazor-starter-templates.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-starter-templates"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-tabs.html b/blog/tags/blazor-tabs.html index 743848862..d8cd5b39c 100644 --- a/blog/tags/blazor-tabs.html +++ b/blog/tags/blazor-tabs.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-tabs"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-templates.html b/blog/tags/blazor-templates.html index 475c0f960..bbd4599c2 100644 --- a/blog/tags/blazor-templates.html +++ b/blog/tags/blazor-templates.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-templates"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-toast.html b/blog/tags/blazor-toast.html index aed292a05..533f7e323 100644 --- a/blog/tags/blazor-toast.html +++ b/blog/tags/blazor-toast.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazor-toast"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor-toasts.html b/blog/tags/blazor-toasts.html index ed99115ce..2de9cb01c 100644 --- a/blog/tags/blazor-toasts.html +++ b/blog/tags/blazor-toasts.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazor-toasts"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor.html b/blog/tags/blazor.html index 3b9dcf15e..f686294f6 100644 --- a/blog/tags/blazor.html +++ b/blog/tags/blazor.html @@ -10,13 +10,13 @@ - +

33 posts tagged with "blazor"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor/page/2.html b/blog/tags/blazor/page/2.html index b8ffc847f..4a37ef048 100644 --- a/blog/tags/blazor/page/2.html +++ b/blog/tags/blazor/page/2.html @@ -10,13 +10,13 @@ - +

33 posts tagged with "blazor"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor/page/3.html b/blog/tags/blazor/page/3.html index 134a4d4f4..fc42cad0f 100644 --- a/blog/tags/blazor/page/3.html +++ b/blog/tags/blazor/page/3.html @@ -10,13 +10,13 @@ - +

33 posts tagged with "blazor"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazor/page/4.html b/blog/tags/blazor/page/4.html index 78e41c642..a30f87261 100644 --- a/blog/tags/blazor/page/4.html +++ b/blog/tags/blazor/page/4.html @@ -10,13 +10,13 @@ - +

33 posts tagged with "blazor"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazoraccordion.html b/blog/tags/blazoraccordion.html index 67e335243..70c0aaa59 100644 --- a/blog/tags/blazoraccordion.html +++ b/blog/tags/blazoraccordion.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazoraccordion"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorautocomplete.html b/blog/tags/blazorautocomplete.html index 0f21b4f1f..2b8c35517 100644 --- a/blog/tags/blazorautocomplete.html +++ b/blog/tags/blazorautocomplete.html @@ -10,13 +10,13 @@ - +

4 posts tagged with "blazorautocomplete"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbadge.html b/blog/tags/blazorbadge.html index 52e4d88b2..d6d5819d6 100644 --- a/blog/tags/blazorbadge.html +++ b/blog/tags/blazorbadge.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazorbadge"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbootstrap-starter-templates.html b/blog/tags/blazorbootstrap-starter-templates.html index e86449b30..efefd0e50 100644 --- a/blog/tags/blazorbootstrap-starter-templates.html +++ b/blog/tags/blazorbootstrap-starter-templates.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazorbootstrap-starter-templates"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbootstrap.html b/blog/tags/blazorbootstrap.html index d31fa528c..a0df6ace8 100644 --- a/blog/tags/blazorbootstrap.html +++ b/blog/tags/blazorbootstrap.html @@ -10,13 +10,13 @@ - +

53 posts tagged with "blazorbootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbootstrap/page/2.html b/blog/tags/blazorbootstrap/page/2.html index 3d46e6564..8d781d207 100644 --- a/blog/tags/blazorbootstrap/page/2.html +++ b/blog/tags/blazorbootstrap/page/2.html @@ -10,13 +10,13 @@ - +

53 posts tagged with "blazorbootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbootstrap/page/3.html b/blog/tags/blazorbootstrap/page/3.html index e830f86ec..bff0058a2 100644 --- a/blog/tags/blazorbootstrap/page/3.html +++ b/blog/tags/blazorbootstrap/page/3.html @@ -10,13 +10,13 @@ - +

53 posts tagged with "blazorbootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbootstrap/page/4.html b/blog/tags/blazorbootstrap/page/4.html index 54c996596..4b4380fd0 100644 --- a/blog/tags/blazorbootstrap/page/4.html +++ b/blog/tags/blazorbootstrap/page/4.html @@ -10,13 +10,13 @@ - +

53 posts tagged with "blazorbootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbootstrap/page/5.html b/blog/tags/blazorbootstrap/page/5.html index 60d925d34..53c1e90a8 100644 --- a/blog/tags/blazorbootstrap/page/5.html +++ b/blog/tags/blazorbootstrap/page/5.html @@ -10,13 +10,13 @@ - +

53 posts tagged with "blazorbootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbootstrap/page/6.html b/blog/tags/blazorbootstrap/page/6.html index dfb1ace12..373faddd9 100644 --- a/blog/tags/blazorbootstrap/page/6.html +++ b/blog/tags/blazorbootstrap/page/6.html @@ -10,13 +10,13 @@ - +

53 posts tagged with "blazorbootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbreadcrumb.html b/blog/tags/blazorbreadcrumb.html index 4f3988a94..1aa1d56cb 100644 --- a/blog/tags/blazorbreadcrumb.html +++ b/blog/tags/blazorbreadcrumb.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazorbreadcrumb"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbutton.html b/blog/tags/blazorbutton.html index 5332fbbbd..13814c7a9 100644 --- a/blog/tags/blazorbutton.html +++ b/blog/tags/blazorbutton.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazorbutton"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorbuttons.html b/blog/tags/blazorbuttons.html index 219881b11..858139383 100644 --- a/blog/tags/blazorbuttons.html +++ b/blog/tags/blazorbuttons.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "blazorbuttons"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorchart.html b/blog/tags/blazorchart.html index 9ccdbc3f5..9040134bc 100644 --- a/blog/tags/blazorchart.html +++ b/blog/tags/blazorchart.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazorchart"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorcollapse.html b/blog/tags/blazorcollapse.html index 2d5870c14..9c98b9d60 100644 --- a/blog/tags/blazorcollapse.html +++ b/blog/tags/blazorcollapse.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazorcollapse"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorconfirmdialog.html b/blog/tags/blazorconfirmdialog.html index aa6ceed28..5982271f9 100644 --- a/blog/tags/blazorconfirmdialog.html +++ b/blog/tags/blazorconfirmdialog.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazorconfirmdialog"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorconfirmmodal.html b/blog/tags/blazorconfirmmodal.html index 4fcfd343a..76eea4951 100644 --- a/blog/tags/blazorconfirmmodal.html +++ b/blog/tags/blazorconfirmmodal.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazorconfirmmodal"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorcurrencyinput.html b/blog/tags/blazorcurrencyinput.html index ecd45e1d4..5eb45c139 100644 --- a/blog/tags/blazorcurrencyinput.html +++ b/blog/tags/blazorcurrencyinput.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "blazorcurrencyinput"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazordate.html b/blog/tags/blazordate.html index 15b98ac04..990135845 100644 --- a/blog/tags/blazordate.html +++ b/blog/tags/blazordate.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazordate"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazordateinput.html b/blog/tags/blazordateinput.html index 295aa00fc..2cd6827ff 100644 --- a/blog/tags/blazordateinput.html +++ b/blog/tags/blazordateinput.html @@ -10,13 +10,13 @@ - +

4 posts tagged with "blazordateinput"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazordatepicker.html b/blog/tags/blazordatepicker.html index 298add2dd..55bd41664 100644 --- a/blog/tags/blazordatepicker.html +++ b/blog/tags/blazordatepicker.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazordatepicker"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazordialog.html b/blog/tags/blazordialog.html index d1350e4b1..8859567e9 100644 --- a/blog/tags/blazordialog.html +++ b/blog/tags/blazordialog.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazordialog"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazordropdown.html b/blog/tags/blazordropdown.html index 4c9bf8aae..b3c7af783 100644 --- a/blog/tags/blazordropdown.html +++ b/blog/tags/blazordropdown.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazordropdown"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorgrid.html b/blog/tags/blazorgrid.html index 77b9f2fed..1e2c1d6ad 100644 --- a/blog/tags/blazorgrid.html +++ b/blog/tags/blazorgrid.html @@ -10,13 +10,13 @@ - +

13 posts tagged with "blazorgrid"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorgrid/page/2.html b/blog/tags/blazorgrid/page/2.html index 0df9d860c..909f8a9c0 100644 --- a/blog/tags/blazorgrid/page/2.html +++ b/blog/tags/blazorgrid/page/2.html @@ -10,13 +10,13 @@ - +

13 posts tagged with "blazorgrid"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazoricon.html b/blog/tags/blazoricon.html index 23de1d792..2796e7256 100644 --- a/blog/tags/blazoricon.html +++ b/blog/tags/blazoricon.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazoricon"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazormodal.html b/blog/tags/blazormodal.html index b8ee11a13..b894860e7 100644 --- a/blog/tags/blazormodal.html +++ b/blog/tags/blazormodal.html @@ -10,13 +10,13 @@ - +

8 posts tagged with "blazormodal"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazormodalservice.html b/blog/tags/blazormodalservice.html index 1d5cc3cf3..7efda7cf0 100644 --- a/blog/tags/blazormodalservice.html +++ b/blog/tags/blazormodalservice.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazormodalservice"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazornumber.html b/blog/tags/blazornumber.html index b37807d73..7ba4374c8 100644 --- a/blog/tags/blazornumber.html +++ b/blog/tags/blazornumber.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazornumber"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazornumberinput.html b/blog/tags/blazornumberinput.html index 775aea7ae..f426696fb 100644 --- a/blog/tags/blazornumberinput.html +++ b/blog/tags/blazornumberinput.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazornumberinput"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazoroffcanvas.html b/blog/tags/blazoroffcanvas.html index ceb1c54e4..47e32289d 100644 --- a/blog/tags/blazoroffcanvas.html +++ b/blog/tags/blazoroffcanvas.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "blazoroffcanvas"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorprogress.html b/blog/tags/blazorprogress.html index 49f31e13e..94fed3086 100644 --- a/blog/tags/blazorprogress.html +++ b/blog/tags/blazorprogress.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazorprogress"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorsidebar.html b/blog/tags/blazorsidebar.html index 4321d9fd3..2803a5006 100644 --- a/blog/tags/blazorsidebar.html +++ b/blog/tags/blazorsidebar.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazorsidebar"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazorswitch.html b/blog/tags/blazorswitch.html index f50c94a74..a4cdfbea8 100644 --- a/blog/tags/blazorswitch.html +++ b/blog/tags/blazorswitch.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazorswitch"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazortabs.html b/blog/tags/blazortabs.html index abe0ebf89..d56e5006c 100644 --- a/blog/tags/blazortabs.html +++ b/blog/tags/blazortabs.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazortabs"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazortime.html b/blog/tags/blazortime.html index 94fa73bc0..4a6165ebb 100644 --- a/blog/tags/blazortime.html +++ b/blog/tags/blazortime.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazortime"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazortimeinput.html b/blog/tags/blazortimeinput.html index f6a92ece9..963cd8496 100644 --- a/blog/tags/blazortimeinput.html +++ b/blog/tags/blazortimeinput.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "blazortimeinput"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazortimepicker.html b/blog/tags/blazortimepicker.html index b812d0390..3791c6f73 100644 --- a/blog/tags/blazortimepicker.html +++ b/blog/tags/blazortimepicker.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazortimepicker"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazortoast.html b/blog/tags/blazortoast.html index c9abba30a..ab6e1ea89 100644 --- a/blog/tags/blazortoast.html +++ b/blog/tags/blazortoast.html @@ -10,13 +10,13 @@ - +

One post tagged with "blazortoast"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazortoasts.html b/blog/tags/blazortoasts.html index d5d0a2e40..e4fce167b 100644 --- a/blog/tags/blazortoasts.html +++ b/blog/tags/blazortoasts.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazortoasts"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/blazortooltip.html b/blog/tags/blazortooltip.html index 59b6ecaf9..c6ed2208a 100644 --- a/blog/tags/blazortooltip.html +++ b/blog/tags/blazortooltip.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "blazortooltip"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/bootstrap-5.html b/blog/tags/bootstrap-5.html index dcb27b511..8bad0de72 100644 --- a/blog/tags/bootstrap-5.html +++ b/blog/tags/bootstrap-5.html @@ -10,13 +10,13 @@ - +

26 posts tagged with "bootstrap5"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/bootstrap-5/page/2.html b/blog/tags/bootstrap-5/page/2.html index 964346014..497dfa5b4 100644 --- a/blog/tags/bootstrap-5/page/2.html +++ b/blog/tags/bootstrap-5/page/2.html @@ -10,13 +10,13 @@ - +

26 posts tagged with "bootstrap5"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/bootstrap-5/page/3.html b/blog/tags/bootstrap-5/page/3.html index 01a56a042..23f17ac71 100644 --- a/blog/tags/bootstrap-5/page/3.html +++ b/blog/tags/bootstrap-5/page/3.html @@ -10,13 +10,13 @@ - +

26 posts tagged with "bootstrap5"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/bootstrap.html b/blog/tags/bootstrap.html index 3de4243f7..82c5285e9 100644 --- a/blog/tags/bootstrap.html +++ b/blog/tags/bootstrap.html @@ -10,13 +10,13 @@ - +

26 posts tagged with "bootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/bootstrap/page/2.html b/blog/tags/bootstrap/page/2.html index 67727c91f..0519fe3f2 100644 --- a/blog/tags/bootstrap/page/2.html +++ b/blog/tags/bootstrap/page/2.html @@ -10,13 +10,13 @@ - +

26 posts tagged with "bootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/bootstrap/page/3.html b/blog/tags/bootstrap/page/3.html index 412c0cb4c..03038d2ad 100644 --- a/blog/tags/bootstrap/page/3.html +++ b/blog/tags/bootstrap/page/3.html @@ -10,13 +10,13 @@ - +

26 posts tagged with "bootstrap"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/breadcrumb.html b/blog/tags/breadcrumb.html index ebd2cf5cb..4b73c240d 100644 --- a/blog/tags/breadcrumb.html +++ b/blog/tags/breadcrumb.html @@ -10,13 +10,13 @@ - +

One post tagged with "breadcrumb"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/breadcrumbservice.html b/blog/tags/breadcrumbservice.html index 4d0542dbb..c483998b5 100644 --- a/blog/tags/breadcrumbservice.html +++ b/blog/tags/breadcrumbservice.html @@ -10,13 +10,13 @@ - +

One post tagged with "breadcrumbservice"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/button.html b/blog/tags/button.html index d24a9c3b0..33a3638e8 100644 --- a/blog/tags/button.html +++ b/blog/tags/button.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "button"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/buttons.html b/blog/tags/buttons.html index 8da0a0228..10f051de6 100644 --- a/blog/tags/buttons.html +++ b/blog/tags/buttons.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "buttons"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/callout.html b/blog/tags/callout.html index 17393855d..11e634971 100644 --- a/blog/tags/callout.html +++ b/blog/tags/callout.html @@ -10,13 +10,13 @@ - +

One post tagged with "callout"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/chart.html b/blog/tags/chart.html index 079961e1c..64160de54 100644 --- a/blog/tags/chart.html +++ b/blog/tags/chart.html @@ -10,13 +10,13 @@ - +

One post tagged with "chart"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/charts.html b/blog/tags/charts.html index 73b74fc7d..fdae277f2 100644 --- a/blog/tags/charts.html +++ b/blog/tags/charts.html @@ -10,13 +10,13 @@ - +

One post tagged with "charts"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/collapse.html b/blog/tags/collapse.html index 795812413..da0ff9e8b 100644 --- a/blog/tags/collapse.html +++ b/blog/tags/collapse.html @@ -10,13 +10,13 @@ - +

One post tagged with "collapse"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/confirm-dialog.html b/blog/tags/confirm-dialog.html index 24c9e984a..d59f1d716 100644 --- a/blog/tags/confirm-dialog.html +++ b/blog/tags/confirm-dialog.html @@ -10,13 +10,13 @@ - +

One post tagged with "confirm dialog"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/confirmdialog.html b/blog/tags/confirmdialog.html index fb92aeb29..6e1693c36 100644 --- a/blog/tags/confirmdialog.html +++ b/blog/tags/confirmdialog.html @@ -10,13 +10,13 @@ - +

One post tagged with "confirmdialog"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/confirmmodal.html b/blog/tags/confirmmodal.html index dcca808f0..06121ae94 100644 --- a/blog/tags/confirmmodal.html +++ b/blog/tags/confirmmodal.html @@ -10,13 +10,13 @@ - +

One post tagged with "confirmmodal"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/currency.html b/blog/tags/currency.html index 5cdaab0a5..81e1608a8 100644 --- a/blog/tags/currency.html +++ b/blog/tags/currency.html @@ -10,13 +10,13 @@ - +

One post tagged with "currency"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/currencyinput.html b/blog/tags/currencyinput.html index 38105e50d..11ac9c2e5 100644 --- a/blog/tags/currencyinput.html +++ b/blog/tags/currencyinput.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "currencyinput"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/date.html b/blog/tags/date.html index e5e671fab..8b07e9e3f 100644 --- a/blog/tags/date.html +++ b/blog/tags/date.html @@ -10,13 +10,13 @@ - +

One post tagged with "date"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/dateinput.html b/blog/tags/dateinput.html index 5c4a090b5..88de76a6b 100644 --- a/blog/tags/dateinput.html +++ b/blog/tags/dateinput.html @@ -10,13 +10,13 @@ - +

4 posts tagged with "dateinput"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/datepicker.html b/blog/tags/datepicker.html index 6a0630704..09931c531 100644 --- a/blog/tags/datepicker.html +++ b/blog/tags/datepicker.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "datepicker"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/dialog.html b/blog/tags/dialog.html index 83f8670fa..8dcd4ea86 100644 --- a/blog/tags/dialog.html +++ b/blog/tags/dialog.html @@ -10,13 +10,13 @@ - +

One post tagged with "dialog"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/docs.html b/blog/tags/docs.html index 07171039b..837e2f345 100644 --- a/blog/tags/docs.html +++ b/blog/tags/docs.html @@ -10,13 +10,13 @@ - +

5 posts tagged with "docs"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/dropdown.html b/blog/tags/dropdown.html index a6aa203e9..8261202ba 100644 --- a/blog/tags/dropdown.html +++ b/blog/tags/dropdown.html @@ -10,13 +10,13 @@ - +

One post tagged with "dropdown"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/grid.html b/blog/tags/grid.html index dc818f839..634e11a02 100644 --- a/blog/tags/grid.html +++ b/blog/tags/grid.html @@ -10,13 +10,13 @@ - +

16 posts tagged with "grid"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/grid/page/2.html b/blog/tags/grid/page/2.html index 62e33ce55..0c18f57a4 100644 --- a/blog/tags/grid/page/2.html +++ b/blog/tags/grid/page/2.html @@ -10,13 +10,13 @@ - +

16 posts tagged with "grid"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/icon.html b/blog/tags/icon.html index 7a0f78b96..a17fa7548 100644 --- a/blog/tags/icon.html +++ b/blog/tags/icon.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "icon"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/icons.html b/blog/tags/icons.html index a184a2fae..112874fcc 100644 --- a/blog/tags/icons.html +++ b/blog/tags/icons.html @@ -10,13 +10,13 @@ - +

One post tagged with "icons"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/input-number.html b/blog/tags/input-number.html index 0d8b480f7..0bbd80feb 100644 --- a/blog/tags/input-number.html +++ b/blog/tags/input-number.html @@ -10,13 +10,13 @@ - +

One post tagged with "input-number"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/input.html b/blog/tags/input.html index f2f4f65e3..6ace651b2 100644 --- a/blog/tags/input.html +++ b/blog/tags/input.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "input"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/layout.html b/blog/tags/layout.html index 495bb87d3..209ce849c 100644 --- a/blog/tags/layout.html +++ b/blog/tags/layout.html @@ -10,13 +10,13 @@ - +

One post tagged with "layout"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/leftmenu.html b/blog/tags/leftmenu.html index e4298ff8d..9df2bc92d 100644 --- a/blog/tags/leftmenu.html +++ b/blog/tags/leftmenu.html @@ -10,13 +10,13 @@ - +

One post tagged with "leftmenu"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/modal.html b/blog/tags/modal.html index a95791d53..4d9d2b454 100644 --- a/blog/tags/modal.html +++ b/blog/tags/modal.html @@ -10,13 +10,13 @@ - +

11 posts tagged with "modal"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/modal/page/2.html b/blog/tags/modal/page/2.html index 94b6bf5dd..8f24fe649 100644 --- a/blog/tags/modal/page/2.html +++ b/blog/tags/modal/page/2.html @@ -10,13 +10,13 @@ - +

11 posts tagged with "modal"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/modalservice.html b/blog/tags/modalservice.html index 81dd76fc8..436cd3530 100644 --- a/blog/tags/modalservice.html +++ b/blog/tags/modalservice.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "modalservice"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/navigation.html b/blog/tags/navigation.html index 8a0318cba..40ee0ffb9 100644 --- a/blog/tags/navigation.html +++ b/blog/tags/navigation.html @@ -10,13 +10,13 @@ - +

One post tagged with "navigation"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/numberinput.html b/blog/tags/numberinput.html index 25c154929..8f365428b 100644 --- a/blog/tags/numberinput.html +++ b/blog/tags/numberinput.html @@ -10,13 +10,13 @@ - +

One post tagged with "numberinput"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/offcanvas.html b/blog/tags/offcanvas.html index 3eaa82dd8..7cc4c43bc 100644 --- a/blog/tags/offcanvas.html +++ b/blog/tags/offcanvas.html @@ -10,13 +10,13 @@ - +

5 posts tagged with "offcanvas"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/pagination.html b/blog/tags/pagination.html index 757e1eb2f..41a2da117 100644 --- a/blog/tags/pagination.html +++ b/blog/tags/pagination.html @@ -10,13 +10,13 @@ - +

One post tagged with "pagination"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/placeholders.html b/blog/tags/placeholders.html index 90b32d296..91e1f69c1 100644 --- a/blog/tags/placeholders.html +++ b/blog/tags/placeholders.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "placeholders"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/preload.html b/blog/tags/preload.html index 2282bb54e..51a15499e 100644 --- a/blog/tags/preload.html +++ b/blog/tags/preload.html @@ -10,13 +10,13 @@ - +

One post tagged with "preload"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/progress-bar.html b/blog/tags/progress-bar.html index 5c9abd9c8..68fdce441 100644 --- a/blog/tags/progress-bar.html +++ b/blog/tags/progress-bar.html @@ -10,13 +10,13 @@ - +

One post tagged with "progress-bar"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/progress.html b/blog/tags/progress.html index cf16b7890..c0fc7faff 100644 --- a/blog/tags/progress.html +++ b/blog/tags/progress.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "progress"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/sidebar.html b/blog/tags/sidebar.html index 17f0ae2e1..9a20d4d83 100644 --- a/blog/tags/sidebar.html +++ b/blog/tags/sidebar.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "sidebar"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/switch.html b/blog/tags/switch.html index 4f3cb91ce..4d0eafac6 100644 --- a/blog/tags/switch.html +++ b/blog/tags/switch.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "switch"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/tabs.html b/blog/tags/tabs.html index 77c91f262..4c52668e9 100644 --- a/blog/tags/tabs.html +++ b/blog/tags/tabs.html @@ -10,13 +10,13 @@ - +

One post tagged with "tabs"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/timeinput.html b/blog/tags/timeinput.html index c3e4d068e..7a3ee1be7 100644 --- a/blog/tags/timeinput.html +++ b/blog/tags/timeinput.html @@ -10,13 +10,13 @@ - +

3 posts tagged with "timeinput"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/timepicker.html b/blog/tags/timepicker.html index b66edec06..f2a393cf6 100644 --- a/blog/tags/timepicker.html +++ b/blog/tags/timepicker.html @@ -10,13 +10,13 @@ - +

One post tagged with "timepicker"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/toast.html b/blog/tags/toast.html index e97c2bc37..60696fe02 100644 --- a/blog/tags/toast.html +++ b/blog/tags/toast.html @@ -10,13 +10,13 @@ - +

One post tagged with "toast"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/toasts.html b/blog/tags/toasts.html index cc26284ef..31552f693 100644 --- a/blog/tags/toasts.html +++ b/blog/tags/toasts.html @@ -10,13 +10,13 @@ - +

4 posts tagged with "toasts"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/toastservice.html b/blog/tags/toastservice.html index 56f656486..94203f190 100644 --- a/blog/tags/toastservice.html +++ b/blog/tags/toastservice.html @@ -10,13 +10,13 @@ - +

One post tagged with "toastservice"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/tooltip.html b/blog/tags/tooltip.html index 579a9cfc1..d907f7770 100644 --- a/blog/tags/tooltip.html +++ b/blog/tags/tooltip.html @@ -10,13 +10,13 @@ - +

2 posts tagged with "tooltip"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-0-1.html b/blog/tags/v-0-0-1.html index 668a79f86..c484188b1 100644 --- a/blog/tags/v-0-0-1.html +++ b/blog/tags/v-0-0-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.0.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-0-2.html b/blog/tags/v-0-0-2.html index a71b9835a..3d4ac5224 100644 --- a/blog/tags/v-0-0-2.html +++ b/blog/tags/v-0-0-2.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.0.2"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-0-3.html b/blog/tags/v-0-0-3.html index fc7b6d123..0399f1107 100644 --- a/blog/tags/v-0-0-3.html +++ b/blog/tags/v-0-0-3.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.0.3"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-0-4.html b/blog/tags/v-0-0-4.html index de2e247d1..0eeb0e31c 100644 --- a/blog/tags/v-0-0-4.html +++ b/blog/tags/v-0-0-4.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.0.4"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-1-0.html b/blog/tags/v-0-1-0.html index dcfa1a251..300ac4fbf 100644 --- a/blog/tags/v-0-1-0.html +++ b/blog/tags/v-0-1-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.1.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-1-1.html b/blog/tags/v-0-1-1.html index e89193a38..59722beee 100644 --- a/blog/tags/v-0-1-1.html +++ b/blog/tags/v-0-1-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.1.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-2-0.html b/blog/tags/v-0-2-0.html index 71f262a97..91d6d15a2 100644 --- a/blog/tags/v-0-2-0.html +++ b/blog/tags/v-0-2-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.2.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-2-1.html b/blog/tags/v-0-2-1.html index aeec7a523..4ce2798d3 100644 --- a/blog/tags/v-0-2-1.html +++ b/blog/tags/v-0-2-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.2.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-2-2.html b/blog/tags/v-0-2-2.html index 0a06d3662..ade421149 100644 --- a/blog/tags/v-0-2-2.html +++ b/blog/tags/v-0-2-2.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.2.2"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-2-3.html b/blog/tags/v-0-2-3.html index 880c0754a..529b28a87 100644 --- a/blog/tags/v-0-2-3.html +++ b/blog/tags/v-0-2-3.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.2.3"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-2-4.html b/blog/tags/v-0-2-4.html index 88b6dc7d8..1425a36a7 100644 --- a/blog/tags/v-0-2-4.html +++ b/blog/tags/v-0-2-4.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.2.4"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-2-5.html b/blog/tags/v-0-2-5.html index 84aa4f12e..3b400bde2 100644 --- a/blog/tags/v-0-2-5.html +++ b/blog/tags/v-0-2-5.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.2.5"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-2-6.html b/blog/tags/v-0-2-6.html index d83eaafa2..f4876b8a8 100644 --- a/blog/tags/v-0-2-6.html +++ b/blog/tags/v-0-2-6.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.2.6"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-3-0.html b/blog/tags/v-0-3-0.html index b4517269e..a157ff685 100644 --- a/blog/tags/v-0-3-0.html +++ b/blog/tags/v-0-3-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.3.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-4-0.html b/blog/tags/v-0-4-0.html index a134f702c..7dac33a7a 100644 --- a/blog/tags/v-0-4-0.html +++ b/blog/tags/v-0-4-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.4.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-4-1.html b/blog/tags/v-0-4-1.html index 5a26bcce9..e1ecdc61a 100644 --- a/blog/tags/v-0-4-1.html +++ b/blog/tags/v-0-4-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.4.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-4-2.html b/blog/tags/v-0-4-2.html index 2174ab8ad..d8b01ec63 100644 --- a/blog/tags/v-0-4-2.html +++ b/blog/tags/v-0-4-2.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.4.2"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-5-0.html b/blog/tags/v-0-5-0.html index 51988b930..2280fc212 100644 --- a/blog/tags/v-0-5-0.html +++ b/blog/tags/v-0-5-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.5.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-5-1.html b/blog/tags/v-0-5-1.html index 371a6e90e..adb6b3808 100644 --- a/blog/tags/v-0-5-1.html +++ b/blog/tags/v-0-5-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.5.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-0-6-0.html b/blog/tags/v-0-6-0.html index 29521800c..2282fbb0a 100644 --- a/blog/tags/v-0-6-0.html +++ b/blog/tags/v-0-6-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v0.6.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-0-0.html b/blog/tags/v-1-0-0.html index 2bf1752a3..322dd4d4f 100644 --- a/blog/tags/v-1-0-0.html +++ b/blog/tags/v-1-0-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.0.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-0-1.html b/blog/tags/v-1-0-1.html index 1314e89b2..724b7d661 100644 --- a/blog/tags/v-1-0-1.html +++ b/blog/tags/v-1-0-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.0.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-1-0.html b/blog/tags/v-1-1-0.html index 4bc6efa12..18b586d44 100644 --- a/blog/tags/v-1-1-0.html +++ b/blog/tags/v-1-1-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.1.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-10-0.html b/blog/tags/v-1-10-0.html index 837addbe5..83c1b7e57 100644 --- a/blog/tags/v-1-10-0.html +++ b/blog/tags/v-1-10-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.10.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-10-1.html b/blog/tags/v-1-10-1.html index 655cef607..d1c1ec885 100644 --- a/blog/tags/v-1-10-1.html +++ b/blog/tags/v-1-10-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.10.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-10-2.html b/blog/tags/v-1-10-2.html index 1f86b2172..69dccad8f 100644 --- a/blog/tags/v-1-10-2.html +++ b/blog/tags/v-1-10-2.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.10.2"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-10-3.html b/blog/tags/v-1-10-3.html index aa667f839..777edc848 100644 --- a/blog/tags/v-1-10-3.html +++ b/blog/tags/v-1-10-3.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.10.3"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-10-4.html b/blog/tags/v-1-10-4.html index f425028bb..48079af61 100644 --- a/blog/tags/v-1-10-4.html +++ b/blog/tags/v-1-10-4.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.10.4"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-2-0.html b/blog/tags/v-1-2-0.html index 5805d170f..c07f4ac22 100644 --- a/blog/tags/v-1-2-0.html +++ b/blog/tags/v-1-2-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.2.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-3-0.html b/blog/tags/v-1-3-0.html index 2f92af8c8..8b7e81026 100644 --- a/blog/tags/v-1-3-0.html +++ b/blog/tags/v-1-3-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.3.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-3-1.html b/blog/tags/v-1-3-1.html index 0c1ffd987..e6cac7b2c 100644 --- a/blog/tags/v-1-3-1.html +++ b/blog/tags/v-1-3-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.3.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-4-0.html b/blog/tags/v-1-4-0.html index 9e43bfcb2..b1347a2c9 100644 --- a/blog/tags/v-1-4-0.html +++ b/blog/tags/v-1-4-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.4.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-4-1.html b/blog/tags/v-1-4-1.html index c3f5cd82d..20da01655 100644 --- a/blog/tags/v-1-4-1.html +++ b/blog/tags/v-1-4-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.4.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-4-2.html b/blog/tags/v-1-4-2.html index 3455def22..bbd577221 100644 --- a/blog/tags/v-1-4-2.html +++ b/blog/tags/v-1-4-2.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.4.2"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-4-3.html b/blog/tags/v-1-4-3.html index c41cd3002..126347004 100644 --- a/blog/tags/v-1-4-3.html +++ b/blog/tags/v-1-4-3.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.4.3"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-4-4.html b/blog/tags/v-1-4-4.html index 75b3ef0d3..51888e5bc 100644 --- a/blog/tags/v-1-4-4.html +++ b/blog/tags/v-1-4-4.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.4.4"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-4-5.html b/blog/tags/v-1-4-5.html index c5b7998ea..9426f647c 100644 --- a/blog/tags/v-1-4-5.html +++ b/blog/tags/v-1-4-5.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.4.5"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-5-0.html b/blog/tags/v-1-5-0.html index ae0462ed8..309892689 100644 --- a/blog/tags/v-1-5-0.html +++ b/blog/tags/v-1-5-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.5.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-6-0.html b/blog/tags/v-1-6-0.html index f750c120a..095cb3fdf 100644 --- a/blog/tags/v-1-6-0.html +++ b/blog/tags/v-1-6-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.6.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-7-0.html b/blog/tags/v-1-7-0.html index b24313b3a..20d8904bb 100644 --- a/blog/tags/v-1-7-0.html +++ b/blog/tags/v-1-7-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.7.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-7-1.html b/blog/tags/v-1-7-1.html index b1d6b1875..7710195fa 100644 --- a/blog/tags/v-1-7-1.html +++ b/blog/tags/v-1-7-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.7.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-7-2.html b/blog/tags/v-1-7-2.html index 7a8ed6f8e..bf2fa6127 100644 --- a/blog/tags/v-1-7-2.html +++ b/blog/tags/v-1-7-2.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.7.2"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-7-3.html b/blog/tags/v-1-7-3.html index eda457ab9..44a65b5a2 100644 --- a/blog/tags/v-1-7-3.html +++ b/blog/tags/v-1-7-3.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.7.3"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-8-0.html b/blog/tags/v-1-8-0.html index 4ae47a582..263502a6b 100644 --- a/blog/tags/v-1-8-0.html +++ b/blog/tags/v-1-8-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.8.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-8-1.html b/blog/tags/v-1-8-1.html index c03646a77..43cad2927 100644 --- a/blog/tags/v-1-8-1.html +++ b/blog/tags/v-1-8-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.8.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-8-2.html b/blog/tags/v-1-8-2.html index 496963cd1..4467baecb 100644 --- a/blog/tags/v-1-8-2.html +++ b/blog/tags/v-1-8-2.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.8.2"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-8-3.html b/blog/tags/v-1-8-3.html index dc949bafd..1c54574f5 100644 --- a/blog/tags/v-1-8-3.html +++ b/blog/tags/v-1-8-3.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.8.3"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-9-0.html b/blog/tags/v-1-9-0.html index ad196896f..60ea1c8b8 100644 --- a/blog/tags/v-1-9-0.html +++ b/blog/tags/v-1-9-0.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.9.0"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-9-1.html b/blog/tags/v-1-9-1.html index ef576c371..523f6b407 100644 --- a/blog/tags/v-1-9-1.html +++ b/blog/tags/v-1-9-1.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.9.1"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-9-2.html b/blog/tags/v-1-9-2.html index a49b711c8..3ed4218dc 100644 --- a/blog/tags/v-1-9-2.html +++ b/blog/tags/v-1-9-2.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.9.2"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-9-3.html b/blog/tags/v-1-9-3.html index c9437c870..39c3b3c09 100644 --- a/blog/tags/v-1-9-3.html +++ b/blog/tags/v-1-9-3.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.9.3"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-9-4.html b/blog/tags/v-1-9-4.html index 4e256399b..c267bf6b5 100644 --- a/blog/tags/v-1-9-4.html +++ b/blog/tags/v-1-9-4.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.9.4"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/v-1-9-5.html b/blog/tags/v-1-9-5.html index c2edeca66..ce0647bea 100644 --- a/blog/tags/v-1-9-5.html +++ b/blog/tags/v-1-9-5.html @@ -10,13 +10,13 @@ - +

One post tagged with "v1.9.5"

View All Tags
- + \ No newline at end of file diff --git a/components/accordion.html b/components/accordion.html index 0eb53d119..8e4d69a46 100644 --- a/components/accordion.html +++ b/components/accordion.html @@ -10,14 +10,14 @@ - +

Blazor Accordion

Build vertically collapsing accordions in combination with our Collapse component.

Blazor Bootstrap: Accordion Component

Accordion Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Specifies the content to be rendered inside this .1.7.0
FlushboolfalseRemoves borders and rounded corners to render accordions edge-to-edge with their parent container.1.7.0
AlwaysOpenboolfalseIt makes accordion items stay open when another item is opened.1.7.0

Accordion Methods​

NameDescriptionAdded Version
ShowFirstAccordionItemAsyncShow the first AccordionItem.1.7.0
ShowLastAccordionItemAsyncShow the last AccordionItem.1.7.0
ShowAccordionItemByNameAsyncShow the AccordionItem by name.1.7.0
ShowAccordionItemByIndexAsyncShow the AccordionItem by index.1.7.0

Accordion Events​

NameDescriptionAdded Version
OnShowingThis event fires immediately when the show method is called.1.7.0
OnShownThis event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete).1.7.0
OnHidingThis event is fired immediately when the hide method has been called.1.7.0
OnHiddenThis event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete).1.7.0

AccordionItem Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
ContentRenderFragmentnull✔️Specifies the content to be rendered inside the AccordionItem.1.7.0
IsActiveboolfalseGets or sets the active AccordionItem.1.7.0
NamestringnullGets or sets the name.1.7.0
TitlestringnullGets or sets the AccordionItem title.1.7.0
TitleTemplateRenderFragmentnullGets or sets the AccordionItem title template.1.7.0

Examples​

Accordion​

Click the accordions below to expand/collapse the accordion content.

Blazor Bootstrap: Accordion Component - Examples
<Accordion>
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

See demo here.

Title with Icon​

To customize the accordion title, use TitleTemplate, as shown in the below example.

Blazor Bootstrap: Accordion Component - Title with Icon
<Accordion>
    <AccordionItem>
        <TitleTemplate>
            <Icon Name="IconName.HouseFill" Class="me-1" /> Accordion Item #1
        </TitleTemplate>
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem>
        <TitleTemplate>
            <Icon Name="IconName.PersonFill" Class="me-1" /> Accordion Item #2
        </TitleTemplate>
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem>
        <TitleTemplate>
            <Icon Name="IconName.PhoneFill" Class="me-1" /> Accordion Item #3
        </TitleTemplate>
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

See demo here.

Flush​

Set the Flush parameter to true to remove borders and rounded corners to render accordions edge-to-edge with their parent container.

Blazor Bootstrap: Accordion Component - Flush
<Accordion Flush="true">
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

See demo here.

Set default active accordion item​

Set the IsActive parameter to true to keep the accordion item open by default.

Blazor Bootstrap: Accordion Component - Set default active accordion item
<Accordion>
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2" IsActive="true">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

See demo here.

Always open​

Set the AlwaysOpen parameter to true to keep accordion items open when another item is opened.

Blazor Bootstrap: Accordion Component - Always open
<Accordion AlwaysOpen="true">
    <AccordionItem Title="Accordion Item #1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

See demo here.

Activate individual accordion items​

You can activate individual accordion items in several ways. Use predefined methods ShowFirstAccordionItemAsync, ShowLastAccordionItemAsync, ShowAccordionItemByNameAsync, and ShowAccordionItemByIndexAsync as shown below.

Blazor Bootstrap: Accordion Component - Activate individual accordion items
<Accordion @ref="accordion1" Class="mb-3">
    <AccordionItem Title="Home" Name="AccordionItem1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Profile" Name="AccordionItem2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Contact" Name="AccordionItem3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Products" Name="Products">
        <Content>
            <b>This is the fourth item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="FAQs" Name="FAQ">
        <Content>
            <b>This is the fifth item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="About" Name="AccordionItem6">
        <Content>
            <b>This is the sixth item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>

<Button Color="ButtonColor.Primary" @onclick="ShowFirstAccordionItemAsync">First Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowSecondAccordionItemAsync">Second Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowThirdAccordionItemAsync">Third Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowProductsAccordionItemAsync">Products Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowFaqsAccordionItemAsync">FAQs Accordion Item</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowLastAccordionItemAsync">Last Accordion Item</Button>
@code {
    private Accordion accordion1 = default!;

    private async Task ShowFirstAccordionItemAsync() => await accordion1.ShowFirstAccordionItemAsync();
    private async Task ShowSecondAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(1);
    private async Task ShowThirdAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(2);
    private async Task ShowProductsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync("Products");
    private async Task ShowFaqsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync("FAQ");
    private async Task ShowLastAccordionItemAsync() => await accordion1.ShowLastAccordionItemAsync();
}

See demo here.

Events Example​

Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality.

Blazor Bootstrap: Accordion Component - Events Example
<Accordion @ref="accordion1"
           OnShowing="OnShowingAsync"
           OnShown="OnShownAsync"
           OnHiding="OnHidingAsync"
           OnHidden="OnHiddenAsync">
    <AccordionItem Title="Accordion Item #1" Name="AccordionItem1">
        <Content>
            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #2" Name="AccordionItem2">
        <Content>
            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
    <AccordionItem Title="Accordion Item #3" Name="AccordionItem3">
        <Content>
            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
        </Content>
    </AccordionItem>
</Accordion>
@code {
    private Accordion accordion1 = default!;

    [Inject] ToastService ToastService { get; set; } = default!;

    private void OnShowingAsync(AccordionEventArgs args)
    {
        ToastService.Notify(new ToastMessage(
            type: ToastType.Primary,
            message: $"Event Name: Showing, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));
    }

    private void OnShownAsync(AccordionEventArgs args)
    {
        ToastService.Notify(new ToastMessage(
            type: ToastType.Primary,
            message: $"Event Name: OnShown, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));
    }

    private void OnHidingAsync(AccordionEventArgs args)
    {
        ToastService.Notify(new ToastMessage(
            type: ToastType.Primary,
            message: $"Event Name: OnHiding, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));
    }

    private void OnHiddenAsync(AccordionEventArgs args)
    {
        ToastService.Notify(new ToastMessage(
            type: ToastType.Primary,
            message: $"Event Name: OnHidden, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}"));
    }
}

See demo here.

- + \ No newline at end of file diff --git a/components/alerts.html b/components/alerts.html index 06f4271a2..c886d0ed1 100644 --- a/components/alerts.html +++ b/components/alerts.html @@ -10,13 +10,13 @@ - +

Blazor Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.

Parameters​

NameTypeDescriptionRequiredDefault
ChildContentRenderFragmentSpecifies the content to be rendered inside the alert.
ColorAlertColorGets or sets the alert color.AlertColor.None
DismissableboolEnables the alert to be closed by placing the padding for close button.false

Methods​

NameDescription
CloseAsyncCloses an alert by removing it from the DOM.

Callback Events​

NameDescription
OnCloseFires immediately when the close instance method is called.
OnClosedFired when the alert has been closed and CSS transitions have completed.

Examples​

Alerts​

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.

Blazor Bootstrap: Alert Component
<div>
    <Alert Color="AlertColor.Primary"> A simple primary alert - check it out! </Alert>
    <Alert Color="AlertColor.Secondary"> A simple secondary alert - check it out! </Alert>
    <Alert Color="AlertColor.Success"> A simple success alert - check it out! </Alert>
    <Alert Color="AlertColor.Danger"> A simple danger alert - check it out! </Alert>
    <Alert Color="AlertColor.Warning"> A simple warning alert - check it out! </Alert>
    <Alert Color="AlertColor.Info"> A simple info alert - check it out! </Alert>
    <Alert Color="AlertColor.Light"> A simple light alert - check it out! </Alert>
    <Alert Color="AlertColor.Dark"> A simple dark alert - check it out! </Alert>
</div>

See alerts demo here.

Additional Content​

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Blazor Bootstrap: Alert Component - Alerts with additional content
<div>
    <Alert Color="AlertColor.Success">
        <h4 class="alert-heading">Well done!</h4>
        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
        <hr>
        <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </Alert>
</div>

See alerts with additional content demo.

Icons​

Similarly, you can use Bootstrap Icons to create alerts with icons.

Blazor Bootstrap: Alert Component - Alerts with an icon
<div>
    <Alert Color="AlertColor.Primary"> <Icon Name="IconName.InfoCircleFill" class="me-2"></Icon>An example alert with an icon </Alert>
    <Alert Color="AlertColor.Success"> <Icon Name="IconName.CheckCircleFill" class="me-2"></Icon>A simple success alert with an icon </Alert>
    <Alert Color="AlertColor.Danger"> <Icon Name="IconName.ExclamationTriangleFill" class="me-2"></Icon>A simple danger alert with an icon </Alert>
    <Alert Color="AlertColor.Warning"> <Icon Name="IconName.ExclamationTriangleFill" class="me-2"></Icon>A simple warning alert with an icon </Alert>
</div>

See alerts with an icon demo.

Dismissing​

  1. Using the Dismissable="true", it's possible to dismiss any alert inline.

It's possible to dismiss any alert inline. Here's how:

Blazor Bootstrap: Alert Component - Dismissing
<div>
    <Alert Color="AlertColor.Warning" Dismissable="true"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. </Alert>
</div>
  1. Manually we can close an alert with button click.
Blazor Bootstrap: Alert Component - Dismissing manually
<div>
    <Alert @ref="warningAlert" Color="AlertColor.Warning">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below. <Button Color="ButtonColor.Primary" @onclick="CloseAlert">Close</Button>
    </Alert>
</div>
@code {
    Alert warningAlert;

    private async Task CloseAlert() => await warningAlert?.CloseAsync();
}

See dismissable alerts demo.

NOTE

When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend subscribing to the OnClosed callback event and programmatically sets focus to the most appropriate location on the page.

- + \ No newline at end of file diff --git a/components/badge.html b/components/badge.html index d9afd6c47..15570c44e 100644 --- a/components/badge.html +++ b/components/badge.html @@ -10,14 +10,14 @@ - +

Blazor Badge

The Blazor Bootstrap Badge component shows the small count and labels.

Blazor Bootstrap: Badge Component

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the badge.1.7.0
ColorBadgeColorBadgeColor.Secondary✔️Gets or sets the badge color.1.7.0
IndicatorTypeBadgeIndicatorTypeBadgeIndicatorType.NoneGets or sets the badge indicator.1.7.0
PlacementBadgePlacementBadgePlacement.NoneGets or sets the badge placement.1.7.0
PositionPositionGets or sets the badge position.1.7.0
VisuallyHiddenTextstringGets or sets the visually hidden text.1.7.0

Examples​

Basic usage​

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of now, badges no longer have focus or hover styles for links.

Blazor Bootstrap: Badge Component - Basic usage
<h1>Example heading <Badge>New</Badge></h1>
<h2>Example heading <Badge>New</Badge></h2>
<h3>Example heading <Badge>New</Badge></h3>
<h4>Example heading <Badge>New</Badge></h4>
<h5>Example heading <Badge>New</Badge></h5>
<h6>Example heading <Badge>New</Badge></h6>

See demo here

Background colors​

Blazor Bootstrap: Badge Component - Background colors
<Badge Color="BadgeColor.Primary" VisuallyHiddenText="Visually hidden text for Primary">Primary</Badge>
<Badge Color="BadgeColor.Secondary" VisuallyHiddenText="Visually hidden text for Secondary">Secondary</Badge>
<Badge Color="BadgeColor.Success" VisuallyHiddenText="Visually hidden text for Success">Success</Badge>
<Badge Color="BadgeColor.Danger" VisuallyHiddenText="Visually hidden text for Danger">Danger</Badge>
<Badge Color="BadgeColor.Warning" VisuallyHiddenText="Visually hidden text for Warning">Warning</Badge>
<Badge Color="BadgeColor.Info" VisuallyHiddenText="Visually hidden text for Info">Info</Badge>
<Badge Color="BadgeColor.Light" VisuallyHiddenText="Visually hidden text for Light">Light</Badge>
<Badge Color="BadgeColor.Dark" VisuallyHiddenText="Visually hidden text for Dark">Dark</Badge>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the VisuallyHiddenText parameter.

See demo here

Pill badges​

Use the IndicatorType parameter to make badges more rounded with a larger border-radius.

Blazor Bootstrap: Badge Component - Pill badges
<Badge Color="BadgeColor.Primary" IndicatorType="BadgeIndicatorType.RoundedPill">Primary</Badge>
<Badge Color="BadgeColor.Secondary" IndicatorType="BadgeIndicatorType.RoundedPill">Secondary</Badge>
<Badge Color="BadgeColor.Success" IndicatorType="BadgeIndicatorType.RoundedPill">Success</Badge>
<Badge Color="BadgeColor.Danger" IndicatorType="BadgeIndicatorType.RoundedPill">Danger</Badge>
<Badge Color="BadgeColor.Warning" IndicatorType="BadgeIndicatorType.RoundedPill">Warning</Badge>
<Badge Color="BadgeColor.Info" IndicatorType="BadgeIndicatorType.RoundedPill">Info</Badge>
<Badge Color="BadgeColor.Light" IndicatorType="BadgeIndicatorType.RoundedPill">Light</Badge>
<Badge Color="BadgeColor.Dark" IndicatorType="BadgeIndicatorType.RoundedPill">Dark</Badge>

See demo here

Buttons​

Badges can be used as part of links or buttons to provide a counter.

Blazor Bootstrap: Badge Component - Buttons
<div class="mb-3">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary">
        Announcement <Badge Color="BadgeColor.Danger">2</Badge>
    </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary">
        Notifications <Badge> 4</Badge>
    </Button>
</div>
<div class="mb-3">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary">
        Announcement <Badge Color="BadgeColor.Danger"><Icon Name="IconName.MegaphoneFill" /> 2</Badge>
    </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary">
        Notifications <Badge><Icon Name="IconName.BellFill" /> 4</Badge>
    </Button>
</div>

See demo here

Positioned​

Use Position and Placement parameters to position it in the corner of a link or button.

Blazor Bootstrap: Badge Component - Positioned
<div class="mb-3">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.TopLeft"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>

    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.TopCenter"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>

    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.TopRight"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>
</div>
<div class="mb-3">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.MiddleLeft"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>

    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.MiddleCenter"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>

    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.MiddleRight"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>
</div>
<div class="mb-3">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.BottomLeft"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>

    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.BottomCenter"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>

    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
        Inbox
        <Badge Color="BadgeColor.Danger"
               Position="Position.Absolute"
               Placement="BadgePlacement.BottomRight"
               IndicatorType="BadgeIndicatorType.RoundedPill"
               VisuallyHiddenText="unread messages">99+</Badge>
    </Button>
</div>

See demo here

Generic indicator​

You can also replace the badge with a generic indicator without the count.

Blazor Bootstrap: Badge Component - Generic indicator
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Position="Position.Relative">
    Inbox
    <Badge Color="BadgeColor.Danger"
           Position="Position.Absolute"
           Placement="BadgePlacement.TopRight"
           IndicatorType="BadgeIndicatorType.RoundedPill"
           VisuallyHiddenText="unread messages"></Badge>
</Button>

See demo here

- + \ No newline at end of file diff --git a/components/breadcrumb.html b/components/breadcrumb.html index 5f151d636..a78e77eec 100644 --- a/components/breadcrumb.html +++ b/components/breadcrumb.html @@ -10,13 +10,13 @@ - +

Blazor Breadcrumb

Blazor Bootstrap breadcrumb component indicates the current page's location within a navigational hierarchy that automatically adds separators.

Parameters​

NameTypeDescriptionRequiredDefault
ItemsList<BreadcrumbItem>List of all the items.✔️

Examples​

Blazor Bootstrap: Breadcrumb Component
<div>
    <Breadcrumb Items="NavItems1"></Breadcrumb>
    <Breadcrumb Items="NavItems2"></Breadcrumb>
</div>
@code {
    private List<BreadcrumbItem> NavItems1 { get; set; }
    private List<BreadcrumbItem> NavItems2 { get; set; }

    protected override void OnInitialized()
    {
        NavItems1 = new List<BreadcrumbItem>
        {
            new BreadcrumbItem{ Text = "Home", Href ="/" },
            new BreadcrumbItem{ Text = "Breadcrumb", IsCurrentPage = true }
        };

        NavItems2 = new List<BreadcrumbItem>
        {
            new BreadcrumbItem{ Text = "Home", Href ="/" },
            new BreadcrumbItem{ Text = "Docs", Href ="/docs" },
            new BreadcrumbItem{ Text = "Breadcrumb", IsCurrentPage = true }
        };
    }
}

See breadcrumb demo here.

Dividers​

Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider.

Blazor Bootstrap: Breadcrumb Component - Dividers
<div>
    <Breadcrumb style="--bs-breadcrumb-divider: '>';" Items="NavItems2"></Breadcrumb>
</div>
@code {
    private List<BreadcrumbItem> NavItems2 { get; set; }

    protected override void OnInitialized()
    {
        NavItems2 = new List<BreadcrumbItem>
        {
            new BreadcrumbItem{ Text = "Home", Href ="/" },
            new BreadcrumbItem{ Text = "Docs", Href ="/docs" },
            new BreadcrumbItem{ Text = "Breadcrumb", IsCurrentPage = true }
        };
    }
}

See breadcrumb with dividers demo here.

Embedded SVG icon​

It's also possible to use an embedded SVG icon. Apply it via our CSS custom property

Blazor Bootstrap: Breadcrumb Component - Embedded SVG icon
<div>
    <Breadcrumb style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" Items="NavItems2"></Breadcrumb>
</div>
@code {
    private List<BreadcrumbItem> NavItems2 { get; set; }

    protected override void OnInitialized()
    {
        NavItems2 = new List<BreadcrumbItem>
        {
            new BreadcrumbItem{ Text = "Home", Href ="/" },
            new BreadcrumbItem{ Text = "Docs", Href ="/docs" },
            new BreadcrumbItem{ Text = "Breadcrumb", IsCurrentPage = true }
        };
    }
}

See breadcrumb with embedded svg icon demo here.

- + \ No newline at end of file diff --git a/components/buttons.html b/components/buttons.html index 565cb3d98..44026a7f1 100644 --- a/components/buttons.html +++ b/components/buttons.html @@ -10,13 +10,13 @@ - +

Blazor Buttons

Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc.

Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ActiveboolWhen set to true, places the component in the active state with active styling.false1.0.0
BlockboolMakes the button to span the full width of a parent.false1.0.0
ChildContentRenderFragmentSpecifies the content to be rendered inside this Button.1.0.0
ColorButtonColorGets or sets the button color.✔️1.0.0
DisabledboolWhen set to true, disables the component's functionality and places it in a disabled state.false1.0.0
LoadingboolShows the loading spinner or a LoadingTemplate.false1.0.0
LoadingTemplateRenderFragmentGets or sets the component loading template.1.0.0
LoadingTextstringGets or sets the loadgin text.Loading...1.0.0
OutlineboolMakes the button to have the outlines.false1.0.0
PositionPositionGets or sets the position.1.7.0
SizeSizeChanges the size of a button.1.0.0
TabIndexint?If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.1.0.0
TargetTargetThe target attribute specifies where to open the linked document for a ButtonType.Link.Target.None1.0.0
TostringDenotes the target route of the ButtonType.Link button.1.0.0
TooltipPlacementTooltipPlacementTooltip placementTooltipPlacement.Top1.0.0
TooltipTitlestringDisplays informative text when users hover, focus, or tap an element.1.0.0
TooltipColorTooltipColorGets or sets the tooltip color.TooltipColor.None1.10.0
TypeButtonTypeDefines the button type.ButtonType.Button1.0.0

Methods​

NameDescription
ShowLoadingShows the loading state and disables the button.
HideLoadingHides the loading state and enables the button.

Examples​

Buttons​

Blazor Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Blazor Bootstrap: Button Component
<p>
    <Button Color="ButtonColor.Primary"> Primary </Button>
    <Button Color="ButtonColor.Secondary"> Secondary </Button>
    <Button Color="ButtonColor.Success"> Success </Button>
    <Button Color="ButtonColor.Danger"> Danger </Button>
    <Button Color="ButtonColor.Warning"> Warning </Button>
    <Button Color="ButtonColor.Info"> Info </Button>
    <Button Color="ButtonColor.Light"> Light </Button>
    <Button Color="ButtonColor.Dark"> Dark </Button>
    <Button Color="ButtonColor.Link"> Link </Button>
</p>

See buttons demo here.

Button tags​

Blazor Bootstrap: Button Component - Button tags
<p>
    <Button Type="ButtonType.Link" Color="ButtonColor.Primary" To="#"> Link </Button>
    <Button Type="ButtonType.Submit" Color="ButtonColor.Primary" To="#"> Button </Button>
</p>

See button tags demo here.

Outline Buttons​

Blazor Bootstrap: Button Component - Outline Buttons
<p>
    <Button Color="ButtonColor.Primary" Outline="true"> Primary </Button>
    <Button Color="ButtonColor.Secondary" Outline="true"> Secondary </Button>
    <Button Color="ButtonColor.Success" Outline="true"> Success </Button>
    <Button Color="ButtonColor.Danger" Outline="true"> Danger </Button>
    <Button Color="ButtonColor.Warning" Outline="true"> Warning </Button>
    <Button Color="ButtonColor.Info" Outline="true"> Info </Button>
    <Button Color="ButtonColor.Dark" Outline="true"> Dark </Button>
</p>

See outline button demo here.

info

Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Sizes​

Fancy larger or smaller buttons? Add Size="Size.Large" or Size="Size.Small" for additional sizes.

Blazor Bootstrap: Button Component - Sizes
<p>
    <Button Color="ButtonColor.Primary" Size="Size.Large"> Large button </Button>
    <Button Color="ButtonColor.Secondary" Size="Size.Large"> Large button </Button>
</p>
<p>
    <Button Color="ButtonColor.Primary" Size="Size.Small"> Small button </Button>
    <Button Color="ButtonColor.Secondary" Size="Size.Small"> Small button </Button>
</p>

See buttons with different size demo here.

Disabled State​

Make buttons look inactive by adding the Disabled="true" boolean parameter to any <Button> component. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.

info

Disabled buttons using the Type="ButtonType.Link" parameter behave a bit different.

Blazor Bootstrap: Button Component - Disable State
<p>
    <Button Color="ButtonColor.Primary" Size="Size.Large" Disabled="true"> Large button </Button>
    <Button Color="ButtonColor.Secondary" Size="Size.Large" Disabled="true"> Large button </Button>
</p>
<p>
    <Button Type="ButtonType.Link" Color="ButtonColor.Primary" Size="Size.Large" Disabled="true"> Primary link </Button>
    <Button Type="ButtonType.Link" Color="ButtonColor.Secondary" Size="Size.Large" Disabled="true"> Link </Button>
</p>

See button disabled state demo here.

Disable and enable state dynamically​

Blazor Bootstrap: Button Component - Disable and enable state dynamically
<Button Type="ButtonType.Link" Color="ButtonColor.Primary" Disabled="@disableButton" TooltipTitle="@tooltip">Link Button</Button>
<Button Type="ButtonType.Submit" Color="ButtonColor.Primary" Disabled="@disableButton" TooltipTitle="@tooltip">Submit Button</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Disabled="@disableButton" TooltipTitle="@tooltip">Button</Button>
<Button Type="ButtonType.Reset" Color="ButtonColor.Primary" Disabled="@disableButton" TooltipTitle="@tooltip">Reset Button</Button>

<Button Color="ButtonColor.Danger" @onclick="() => SwapDisable()">Swap Disable</Button>
@code
{
    bool disableButton = true;
    string tooltip = "";

    public void SwapDisable()
    {
        disableButton = !disableButton;
        tooltip = $"Updated at {DateTime.Now}";
    }
}

See disable and enable state dynamically demo here.

Block Buttons​

Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

Blazor Bootstrap: Button Component - Block Buttons
<div class="d-grid gap-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
</div>
Blazor Bootstrap: Button Component - Block Buttons
<div class="d-grid gap-2 d-md-block mt-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
</div>
Blazor Bootstrap: Button Component - Block Buttons
<div class="d-grid gap-2 col-6 mx-auto mt-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
</div>
Blazor Bootstrap: Button Component - Block Buttons
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
</div>

See block buttons demo here.

Toogle States​

If you''re pre-toggling a button, you must manually add the Active="true" parameter.

Blazor Bootstrap: Button Component - Button Toogle States
<p>
    <Button Color="ButtonColor.Primary"> Toggle button </Button>
    <Button Color="ButtonColor.Primary" Active="true"> Active toggle button </Button>
    <Button Color="ButtonColor.Primary" Disabled="true"> Disabled toggle button </Button>
</p>

See button toogle states demo here.

Loading spinner​

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

Blazor Bootstrap: Button Component - Button with Loading Spinner
<p>
    <Button Color="ButtonColor.Primary" Loading="true" />
    <Button Color="ButtonColor.Primary" Loading="true" LoadingText="Saving..." />
    <Button Color="ButtonColor.Primary" Loading="true">
        <LoadingTemplate>
            <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            Loading...
        </LoadingTemplate>
    </Button>
</p>

See button with loading spinner demo here.

Show/Hide loading spinner​

Use ShowLoading() and HideLoading() methods to toggle the button state.

Blazor Bootstrap: Button Component - Show/Hide loading spinner
<Button @ref="saveButton" Color="ButtonColor.Primary" @onclick="async () => await OnSaveClick()">Save</Button>
@code {
    private Button saveButton;

    private async Task OnSaveClick()
    {
        saveButton?.ShowLoading("Saving details...");

        await Task.Delay(5000); // API call

        saveButton?.HideLoading();
    }
}

See button with loading spinner demo here.

Show Tooltip​

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

Blazor Bootstrap: Button Component - Buttons with Tooltip
<p>
    <Button Color="ButtonColor.Primary" TooltipTitle="Tooltip text" TooltipPlacement="TooltipPlacement.Top"> Tooltip Top </Button>

    <Button Color="ButtonColor.Primary" TooltipTitle="Tooltip text" TooltipPlacement="TooltipPlacement.Right"> Tooltip Right </Button>

    <Button Color="ButtonColor.Primary" TooltipTitle="Tooltip text" TooltipPlacement="TooltipPlacement.Bottom"> Tooltip Bottom </Button>

    <Button Color="ButtonColor.Primary" TooltipTitle="Tooltip text" TooltipPlacement="TooltipPlacement.Left"> Tooltip Left </Button>
</p>

See button with tooltip demo here.

NOTE

HTML tooltips not supported at this moment.

Dynamically update the tooltip text​

<div class="mb-3">
    <Button Color="ButtonColor.Primary" TooltipTitle="@text" TooltipPlacement="TooltipPlacement.Top"> Tooltip Top </Button>
</div>

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ChangeTooltip">Change Tooltip</Button>
@code {
    private string text = "Tooltip text";

    private void ChangeTooltip() => text = $"Updated {DateTime.Now.ToLongTimeString()}";
}

See demo here.

Events​

Click events​

<p>
    <Button Color="ButtonColor.Primary" @onclick="OnClick"> Click Event </Button>
</p>
@code{

    protected void OnClick(EventArgs args)
    {
        Console.WriteLine("click event");
    }

}

Double click event​

<p>
    <Button Color="ButtonColor.Primary" @ondblclick="OnDoubleClick"> Double Click Event </Button>
</p>
@code{

    protected void OnDoubleClick(EventArgs args)
    {
        Console.WriteLine("double click event");
    }

}

Click event with arguments​

<p>
    <Button Color="ButtonColor.Primary" @onclick="((args) => OnClickWithArgs(args, message))"> Click   Args </Button>
</p>
@code{

    public string message = "Test message";

    protected void OnClickWithArgs(EventArgs args, string message)
    {
        Console.WriteLine($"message: {message}");
    }

}

See button click events demo here.

- + \ No newline at end of file diff --git a/components/callout.html b/components/callout.html index 3f8b1ac3e..06f0b08c1 100644 --- a/components/callout.html +++ b/components/callout.html @@ -10,13 +10,13 @@ - +

Blazor Callout

Blazor Bootstrap callout component provides content presentation in a visually distinct manner.

Parameters​

NameTypeDefaultRequiredDescription
ChildContentRenderFragment✔️Specifies the content to be rendered inside this.
HeadingstringGets or sets the callout heading.
TypeenumCalloutType.DefaultUse CalloutType.Default or CalloutType.Info or CalloutType.Warning or CalloutType.Danger or CalloutType.Tip

Examples​

Callout​

Blazor Bootstrap: Callout Component - Examples
<Callout>
    <strong>This is an default callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Danger">
    <strong>This is an danger callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Warning">
    <strong>This is an warning callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Info">
    <strong>This is an info callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Tip">
    <strong>This is an tip callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

See callout default demo here.

Custom callout heading​

Blazor Bootstrap: Callout Component - Custom callout heading
<Callout Heading="Important">
    <strong>This is an default callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Danger" Heading="Important">
    <strong>This is an danger callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Warning" Heading="Important">
    <strong>This is an warning callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Info" Heading="Important">
    <strong>This is an info callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

<Callout Type="CalloutType.Tip" Heading="Important">
    <strong>This is an tip callout</strong>. Example text to show it in action. See <a href="https://getblazorbootstrap.com/docs/components/callout">callout documentation</a>.
</Callout>

See callout danger demo here.

Large text​

Blazor Bootstrap: Callout Component - Large text
<Callout>
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Type="CalloutType.Danger">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Type="CalloutType.Warning">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Type="CalloutType.Info">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

<Callout Type="CalloutType.Tip">
    <h4>Conveying meaning to assistive technologies</h4>
    <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
</Callout>

See callout warning demo here.

- + \ No newline at end of file diff --git a/components/card.html b/components/card.html index f1feb424c..a99ae260b 100644 --- a/components/card.html +++ b/components/card.html @@ -10,7 +10,7 @@ - + @@ -19,7 +19,7 @@ Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

Blazor Bootstrap: Card Component - Kitchen sink
<Card Style="width:18rem;">
    <img class="rounded-top" src="/images/placeholder.png" alt="placeholder" />
    <CardBody>
        <CardTitle>Card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
    <CardBody>
        <CardLink To="#">Card link</CardLink>
        <CardLink To="#">Another link</CardLink>
    </CardBody>
</Card>

See the demo here.

Add an optional header and/or footer within a card.

Blazor Bootstrap: Card Component - Header and footer
<Card Style="width:18rem;">
    <CardHeader>
        Featured
    </CardHeader>
    <CardBody>
        <CardTitle>Special title treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
    </CardBody>
</Card>

See the demo here.

Sizing​

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Blazor Bootstrap: Card Component - Sizing
<div class="row">
    <div class="col-sm-6">
        <Card>
            <CardBody>
                <CardTitle>Special title treatment</CardTitle>
                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                <Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
            </CardBody>
        </Card>
    </div>
    <div class="col-sm-6">
        <Card>
            <CardBody>
                <CardTitle>Special title treatment</CardTitle>
                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                <Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
            </CardBody>
        </Card>
    </div>
</div>

See the demo here.

Text alignment​

You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter.

Blazor Bootstrap: Card Component - Text alignment
<Card Class="mb-4" Style="width:18rem;">
    <CardBody>
        <CardTitle>Special title treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
    </CardBody>
</Card>

<Card TextAlignment="Alignment.Center" Class="mb-4" Style="width:18rem;">
    <CardBody>
        <CardTitle>Special title treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
    </CardBody>
</Card>

<Card TextAlignment="Alignment.End" Class="mb-4" Style="width:18rem;">
    <CardBody>
        <CardTitle>Special title treatment</CardTitle>
        <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
        <Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
    </CardBody>
</Card>

See the demo here.

Background and color​

Blazor Bootstrap: Card Component - Background and color - Primary, Secondary, SuccessBlazor Bootstrap: Card Component - Background and color - Danger, Warning, InfoBlazor Bootstrap: Card Component - Background and color - Light, Dark
<Card Color="CardColor.Primary" Class="mb-4" Style="width:18rem;">
    <CardHeader>Header</CardHeader>
    <CardBody>
        <CardTitle>Primary card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
</Card>

<Card Color="CardColor.Secondary" Class="mb-4" Style="width:18rem;">
    <CardHeader>Header</CardHeader>
    <CardBody>
        <CardTitle>Secondary card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
</Card>

<Card Color="CardColor.Success" Class="mb-4" Style="width:18rem;">
    <CardHeader>Header</CardHeader>
    <CardBody>
        <CardTitle>Success card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
</Card>

<Card Color="CardColor.Danger" Class="mb-4" Style="width:18rem;">
    <CardHeader>Header</CardHeader>
    <CardBody>
        <CardTitle>Danger card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
</Card>

<Card Color="CardColor.Warning" Class="mb-4" Style="width:18rem;">
    <CardHeader>Header</CardHeader>
    <CardBody>
        <CardTitle>Warning card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
</Card>

<Card Color="CardColor.Info" Class="mb-4" Style="width:18rem;">
    <CardHeader>Header</CardHeader>
    <CardBody>
        <CardTitle>Info card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
</Card>

<Card Color="CardColor.Light" Class="mb-4" Style="width:18rem;">
    <CardHeader>Header</CardHeader>
    <CardBody>
        <CardTitle>Light card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
</Card>

<Card Color="CardColor.Dark" Class="mb-4" Style="width:18rem;">
    <CardHeader>Header</CardHeader>
    <CardBody>
        <CardTitle>Dark card title</CardTitle>
        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
    </CardBody>
</Card>

See the demo here.

Card groups​

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

Blazor Bootstrap: Card Component - Card groups
<CardGroup>
    <Card Class="mb-4" Style="width:18rem;">
        <img src="/images/placeholder.png" alt="placeholder" />
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
            <CardText Class="text-muted">Last updated 3 mins ago</CardText>
        </CardBody>
    </Card>
    <Card Class="mb-4" Style="width:18rem;">
        <img src="/images/placeholder.png" alt="placeholder" />
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
            <CardText Class="text-muted">Last updated 3 mins ago</CardText>
        </CardBody>
    </Card>
    <Card Class="mb-4" Style="width:18rem;">
        <img src="/images/placeholder.png" alt="placeholder" />
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
            <CardText Class="text-muted">Last updated 3 mins ago</CardText>
        </CardBody>
    </Card>
</CardGroup>

See the demo here.

When using card groups with footers, their content will automatically line up.

Blazor Bootstrap: Card Component - Card groups with footer
<CardGroup>
    <Card Class="mb-4" Style="width:18rem;">
        <img src="/images/placeholder.png" alt="placeholder" />
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
        </CardBody>
        <CardFooter>
            <small class="text-muted">Last updated 3 mins ago</small>
        </CardFooter>
    </Card>
    <Card Class="mb-4" Style="width:18rem;">
        <img src="/images/placeholder.png" alt="placeholder" />
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
        </CardBody>
        <CardFooter>
            <small class="text-muted">Last updated 3 mins ago</small>
        </CardFooter>
    </Card>
    <Card Class="mb-4" Style="width:18rem;">
        <img src="/images/placeholder.png" alt="placeholder" />
        <CardBody>
            <CardTitle>Card title</CardTitle>
            <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
        </CardBody>
        <CardFooter>
            <small class="text-muted">Last updated 3 mins ago</small>
        </CardFooter>
    </Card>
</CardGroup>

See the demo here.

- + \ No newline at end of file diff --git a/components/charts.html b/components/charts.html index 76ada30ce..a8071886d 100644 --- a/components/charts.html +++ b/components/charts.html @@ -10,13 +10,13 @@ - +

Blazor Charts

Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.

Example​

Blazor Chart Component - Blazor Bar Chart Example
Blazor Chart Component - Blazor Line Chart Example
See blazor chart demo here.

Chart Types​

At this moment we are supporting four blazor chart types.

  1. Bar Chart
  2. Doughnut Chart
  3. Line Chart
  4. Pie Chart
info

We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions.

Bar Chart​

Blazor Chart Component - Blazor Bar Chart
See blazor bar chart demo here.
See blazor bar chart full documentation here.

Doughnut Chart​

Blazor Chart Component - Blazor Doughnut Chart
See blazor doughnut chart demo here.
See blazor doughnut chart full documentation here.

Line Chart​

Blazor Chart Component - Blazor Line Chart
See blazor line chart demo here.
See blazor line chart full documentation here.

Pie Chart​

Blazor Chart Component - Blazor Pie Chart
See blazor pie chart demo here.
See blazor pie chart full documentation here.
- + \ No newline at end of file diff --git a/components/collapse.html b/components/collapse.html index 2aeb077b1..64e966de2 100644 --- a/components/collapse.html +++ b/components/collapse.html @@ -10,7 +10,7 @@ - + @@ -19,7 +19,7 @@ Collapsing an element will animate the height from its current value to 0.

info

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Examples​

Click the buttons below to show and hide the content.

Blazor Bootstrap: Collapse Component - Examples
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ShowContentAsync">Show content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="HideContentAsync">Hide content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ToggleContentAsync">Toggle content</Button>

<Collapse @ref="collapse1">
    <Card>
        <CardBody>
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
        </CardBody>
    </Card>
</Collapse>
@code {
    Collapse collapse1 = default!;

    private async Task ShowContentAsync() => await collapse1.ShowAsync();
    private async Task HideContentAsync() => await collapse1.HideAsync();
    private async Task ToggleContentAsync() => await collapse1.ToggleAsync();
}

See demo here

Horizontal​

The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing.

Blazor Bootstrap: Collapse Component - Horizontal
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ShowContentAsync">Show content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="HideContentAsync">Hide content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ToggleContentAsync">Toggle content</Button>

<Collapse @ref="collapse1" Horizontal="true">
    <Card Style="width:300px;">
        <CardBody>
            This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
        </CardBody>
    </Card>
</Collapse>
@code {
    Collapse collapse1 = default!;

    private async Task ShowContentAsync() => await collapse1.ShowAsync();
    private async Task HideContentAsync() => await collapse1.HideAsync();
    private async Task ToggleContentAsync() => await collapse1.ToggleAsync();
}

See demo here

Events Example​

Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality.

Blazor Bootstrap: Collapse Component - Events
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ShowContentAsync">Show content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="HideContentAsync">Hide content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ToggleContentAsync">Toggle content</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" @onclick="ClearMessage">Clear Messages</Button>

<Collapse @ref="collapse1"
          Class="mt-3"
          OnShowing="OnCollapseShowingAsync"
          OnShown="OnCollapseShownAsync"
          OnHiding="OnCollapseHidingAsync"
          OnHidden="OnCollapseHiddenAsync">
    <Card>
        <CardBody>
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
        </CardBody>
    </Card>
</Collapse>

<div class="mt-3">
    @foreach (var item in messages)
    {
        <p>@item</p>
    }
</div>
@code {
    Collapse collapse1 = default!;

    List<string> messages = new List<string>();

    private async Task ShowContentAsync() => await collapse1.ShowAsync();
    private async Task HideContentAsync() => await collapse1.HideAsync();
    private async Task ToggleContentAsync() => await collapse1.ToggleAsync();

    private void OnCollapseShowingAsync() => messages.Add($"Event: OnShowing called {DateTime.Now.ToLocalTime()}");

    private void OnCollapseShownAsync() => messages.Add($"Event: OnShown called {DateTime.Now.ToLocalTime()}");

    private void OnCollapseHidingAsync() => messages.Add($"Event: OnHiding called {DateTime.Now.ToLocalTime()}");

    private void OnCollapseHiddenAsync() => messages.Add($"Event: OnHidden called {DateTime.Now.ToLocalTime()}");

    private void ClearMessage() => messages = new List<string>();
}
- + \ No newline at end of file diff --git a/components/confirm-dialog.html b/components/confirm-dialog.html index 1a9218e96..69249cd96 100644 --- a/components/confirm-dialog.html +++ b/components/confirm-dialog.html @@ -10,13 +10,13 @@ - +

Blazor Confirm Dialog

Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something.

Blazor Bootstrap: Confirm Dialog component

Methods​

NameReturn TypeDescriptionAdded Version
ShowAsync(string title, string message1, ConfirmDialogOptions confirmDialogOptions = null)Task<bool>Shows confirm dialog.1.1.0
ShowAsync(string title, string message1, string message2, ConfirmDialogOptions confirmDialogOptions = null)Task<bool>Shows confirm dialog.1.1.0
ShowAsync<T>(string title, Dictionary<string, object> parametres = null, ConfirmDialogOptions confirmDialogOptions = null)Task<bool>Shows confirm dialog. T is component.1.1.0

ConfirmDialogOptions Properties​

NameTypeDefaultDescriptionAdded Version
DialogCssClassstringAdditional CSS class for the dialog (div.modal-dialog element).1.1.0
DismissableboolAdds a dismissable close button to the confirm dialog.1.1.0
HeaderCssClassstringAdditional header CSS class (div.modal-header element).1.1.0
IsScrollableboolAllows confirm dialog body to be scrollable.1.1.0
IsVerticallyCenteredboolShows the confirm dialog vertically in the center of the page.1.1.0
NoButtonColorButtonColorGets or sets the 'No' button color.1.1.0
NoButtonTextstringNoGets or sets the 'No' button text.1.1.0
SizeDialogSizeModalSize.RegularSize of the modal.1.1.0
YesButtonColorButtonColorButtonColor.PrimaryGets or sets the 'Yes' button color.1.1.0
YesButtonTextstringYesGets or sets the 'Yes' button text.1.1.0

Examples​

Confirm Dialog​

Blazor Bootstrap: Confirm Dialog Component - Examples
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Danger" @onclick="ShowConfirmationAsync"> Delete Employee </Button>
@code {
    private ConfirmDialog dialog;

    private async Task ShowConfirmationAsync()
    {
        var confirmation = await dialog.ShowAsync(
            title: "Are you sure you want to delete this?",
            message1: "This will delete the record. Once deleted can not be rolled back.",
            message2: "Do you want to proceed?");

        if (confirmation)
        {
            // do whatever
        }
        else
        {
            // do whatever
        }
    }
}

See Confirm Dialog demo here.

Dynamic component as confirm dialog​

Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic.

If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value.

In the below example, we used Toast Service to show the user confirmation.

Blazor Bootstrap: Confirm Dialog Component - Dynamic component as confirm dialog
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Danger" @onclick="DeleteEmployeeAsync"> Delete Employee </Button>
@code {
    private ConfirmDialog dialog;

    [Inject] ToastService ToastService { get; set; }

    private async Task DeleteEmployeeAsync()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 321);

        var confirmation = await dialog.ShowAsync<EmployeeDemoComponent>("Are you sure you want to delete this employee?", parameters);

        if (confirmation)
        {
            // call API to delete the employee
            // show acknowledgment to the user
            ToastService.Notify(new ToastMessage(ToastType.Success, $"Employee deleted successfully."));
        }
        else
            ToastService.Notify(new ToastMessage(ToastType.Secondary, $"Delete action canceled."));
    }
}

EmployeeDemoComponent.razor

<div class="row">
    <div class="col-5 col-md-3 text-end">Employee Id :</div>
    <div class="col-7 col-md-9">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">First Name :</div>
    <div class="col-7 col-md-9">@employee.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">Last Name :</div>
    <div class="col-7 col-md-9">@employee.LastName</div>
</div>

@code {
    private Employee employee;

    [Parameter] public int EmployeeId { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };

        base.OnInitialized();
    }
}

See Confirm Dialog demo here.

Change buttons text and color​

Use ConfirmDialogOptions to change the text and color of the button.

Blazor Bootstrap: Confirm Dialog Component - Change buttons text and color
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowSaveConfirmationAsync"> Save Employee </Button>
@code {
    private ConfirmDialog dialog;

    private async Task ShowSaveConfirmationAsync()
    {
        var options = new ConfirmDialogOptions
            {
                YesButtonText = "OK",
                YesButtonColor = ButtonColor.Success,
                NoButtonText = "CANCEL",
                NoButtonColor = ButtonColor.Danger
            };

        var confirmation = await dialog.ShowAsync(
            title: "Simple Confirm Dialog",
            message1: "Do you want to proceed?",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do whatever
        }
        else
        {
            // do whatever
        }
    }
}

See Confirm Dialog demo here.

Optional sizes​

Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Confirm Dialog Component - Small Size

Blazor Bootstrap: Confirm Dialog Component - Optional sizes - Small

Confirm Dialog Component - Large Size

Blazor Bootstrap: Confirm Dialog Component - Optional sizes - Large

Confirm Dialog Component - Extra Large Size

Blazor Bootstrap: Confirm Dialog Component - Optional sizes - Extra Large
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowConfirmationAsync(DialogSize.Small)"> Small Confirm Dialog </Button>
<Button Color="ButtonColor.Primary" @onclick="() => ShowConfirmationAsync(DialogSize.Large)"> Large Confirm Dialog </Button>
<Button Color="ButtonColor.Primary" @onclick="() => ShowConfirmationAsync(DialogSize.ExtraLarge)"> Extra Large Confirm Dialog </Button>
@code {
    private ConfirmDialog dialog;

    private async Task ShowConfirmationAsync(DialogSize size)
    {
        var options = new ConfirmDialogOptions { Size = size };

        var confirmation = await dialog.ShowAsync(
            title: "Simple Confirm Dialog",
            message1: "Do you want to proceed?",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do whatever
        }
        else
        {
            // do whatever
        }
    }
}

See Confirm Dialog demo here.

Scrolling long content​

When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

Blazor Bootstrap: Confirm Dialog Component - Scrolling long content
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Confirm Dialog </Button>
@code {
    private ConfirmDialog dialog;

    private async Task ShowDialogAsync()
    {
        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(title: "Confirm dialog title");

        if (confirmation)
        {
            // do whatever
        }
        else
        {
            // do whatever
        }
    }
}

You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable="true".

Blazor Bootstrap: Confirm Dialog Component - Scrolling long content within the body
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Confirm Dialog </Button>
@code {
    private ConfirmDialog dialog;

    private async Task ShowDialogAsync()
    {
        var options = new ConfirmDialogOptions { IsScrollable = true };
        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(
            title: "Confirm dialog title",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do whatever
        }
        else
        {
            // do whatever
        }
    }
}

See Confirm Dialog demo here.

Vertically centered​

Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog.

Blazor Bootstrap: Confirm Dialog Component - Vertically centered
<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Vertically Centered Confirm Dialog </Button>
@code {
    private ConfirmDialog dialog;

    private async Task ShowDialogAsync()
    {
        var options = new ConfirmDialogOptions { IsVerticallyCentered = true };
        var confirmation = await dialog.ShowAsync(
            title: "Simple Confirm Dialog",
            message1: "Do you want to proceed?",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do whatever
        }
        else
        {
            // do whatever
        }
    }
}

You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable="true".

<ConfirmDialog @ref="dialog" />

<Button Color="ButtonColor.Primary" @onclick="ShowDialogAsync"> Launch Scrollable & Vertically Centered Confirm Dialog </Button>

@code {
    private ConfirmDialog dialog;

    private async Task ShowDialogAsync()
    {
        var options = new ConfirmDialogOptions { IsScrollable = true, IsVerticallyCentered = true };
        var confirmation = await dialog.ShowAsync<LongContentDemoComponent>(title: "Confirm dialog title",
            confirmDialogOptions: options);

        if (confirmation)
        {
            // do whatever
        }
        else
        {
            // do whatever
        }
    }
}

See Confirm Dialog demo here.

- + \ No newline at end of file diff --git a/components/dropdown.html b/components/dropdown.html index a47ad612b..6fb0cedff 100644 --- a/components/dropdown.html +++ b/components/dropdown.html @@ -10,14 +10,14 @@ - +

Blazor Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap.

Blazor Bootstrap: Dropdown component
NameTypeDescriptionRequiredDefaultAdded Version
AutoCloseboolEnables or disables the auto close.true1.10.0
AutoCloseBehaviorDropdownAutoCloseBehaviorGets or sets the auto close behavior of the dropdown.DropdownAutoCloseBehavior.Both1.10.0
ChildContentRenderFragmentSpecifies the content to be rendered inside the Dropdown.1.10.0
DirectionDropdownDirectionGets or sets the direction of the dropdown menu.DropdownDirection.Dropdown1.10.0
DisabledboolGets or sets whether the dropdown menu is disabled.false1.10.3
SizeSizeGets or sets the size of the dropdown.Size.None1.10.3
SplitboolGets or sets the toggle button split behavior.false1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownToggleButton.1.10.0
ColorButtonColorGets or sets the button color.1.10.0
TabIndexint?If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownActionButton.1.10.0
ColorButtonColorGets or sets the button color.1.10.0
TabIndexint?If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownMenu.1.10.0
PositionDropdownMenuPositionGets or sets the dropdown menu position.1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownHeader.1.10.0
NameTypeDescriptionRequiredDefaultAdded Version
ActiveboolWhen set to 'true', places the component in the active state with active styling.1.10.0
ChildContentRenderFragmentSpecifies the content to be rendered inside the DropdownMenu.1.10.0
DisabledboolWhen set to 'true', disables the component's functionality and places it in a disabled state.1.10.0
TabIndexint?If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.1.10.0
TargetTargetThe target attribute specifies where to open the linked document.Target.None1.10.0
Tostring?Denotes the target route of the link button.1.10.0
TypeButtonTypeDefines the button type.ButtonType.Button1.10.0
NameDescriptionAdded Version
HideAsyncHides the dropdown menu of a given navbar or tabbed navigation.1.10.0
ShowAsyncShows the dropdown menu of a given navbar or tabbed navigation.1.10.0
ToggleAsyncToggles the dropdown menu of a given navbar or tabbed navigation.1.10.0
UpdateAsyncUpdates the position of an element’s dropdown.1.10.0
Event TypeDescriptionAdded Version
OnHidingThis event is fired immediately when the hide method has been called.1.10.0
OnHiddenThis event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete).1.10.0
OnShowingThis event fires immediately when the show instance method is called.1.10.0
OnShownThis event is fired when an dropdown element has been made visible to the user (will wait for CSS transitions to complete).1.10.0

Examples​

Single button​

Blazor Bootstrap: Dropdown Component - Single button
<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

See the demo here.

Color​

Blazor Bootstrap: Dropdown Component - Color
<div class="d-flex gap-2 mb-4">
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Primary">Primary</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Secondary">Secondary</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Success">Success</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Info">Info</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Warning">Warning</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown>
        <DropdownToggleButton Color="ButtonColor.Danger">Danger</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

See the demo here.

Split button​

Blazor Bootstrap: Dropdown Component - Split button
<div class="d-flex gap-2 mb-4">
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Primary">Primary</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Primary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Secondary</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Success">Success</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Success" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Info">Info</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Info" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Warning">Warning</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Warning" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Split="true">
        <DropdownActionButton Color="ButtonColor.Danger">Danger</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Danger" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

See the demo here.

Sizing​

Blazor Bootstrap: Dropdown Component - Sizing - Large
<div class="d-flex gap-2 mb-4">
    <Dropdown Size="Size.Large">
        <DropdownToggleButton Color="ButtonColor.Secondary">Large button</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem Size="Size.Large" To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Size="Size.Large" Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Large split button</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>
Blazor Bootstrap: Dropdown Component - Sizing - Small
<div class="d-flex gap-2 mb-4">
    <Dropdown Size="Size.Small">
        <DropdownToggleButton Color="ButtonColor.Secondary">Small button</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Size="Size.Small" Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Small split button</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

See the demo here.

Directions​

Dropup​

To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component.

Blazor Bootstrap: Dropdown Component - Dropup
<div class="d-flex gap-2">
    <Dropdown Direction="DropdownDirection.Dropup">
        <DropdownToggleButton Color="ButtonColor.Secondary">Dropup button with text</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Direction="DropdownDirection.Dropup" Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Dropup split button</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

See the demo here.

Dropup centered​

To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component.

Blazor Bootstrap: Dropdown Component - Dropup centered
<div class="d-flex gap-2">
    <Dropdown Direction="DropdownDirection.DropupCentered">
        <DropdownToggleButton Color="ButtonColor.Secondary">Centered dropup</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

See the demo here.

Dropend​

To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component.

Blazor Bootstrap: Dropdown Component - Dropend
<div class="d-flex gap-2">
    <Dropdown Direction="DropdownDirection.Dropend">
        <DropdownToggleButton Color="ButtonColor.Secondary">Dropend</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Direction="DropdownDirection.Dropend" Split="true">
        <DropdownActionButton Color="ButtonColor.Secondary">Split dropend</DropdownActionButton>
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</div>

See the demo here.

Dropstart​

To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component.

Blazor Bootstrap: Dropdown Component - Dropstart
<div class="d-flex gap-2">
    <Dropdown Direction="DropdownDirection.Dropstart">
        <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
    </Dropdown>
    <Dropdown Direction="DropdownDirection.Dropstart" Split="true">
        <DropdownToggleButton Color="ButtonColor.Secondary" />
        <DropdownMenu>
            <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
            <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        </DropdownMenu>
        <DropdownActionButton Color="ButtonColor.Secondary">Split dropstart</DropdownActionButton>
    </Dropdown>
</div>

See the demo here.

Active​

To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu.

Blazor Bootstrap: Dropdown Component - Active
<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link" Active="true">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

See the demo here.

Disabled​

To disable the dropdown, set the Disabled parameter to true on the Dropdown component.

Blazor Bootstrap: Dropdown Component - Disabled
<Dropdown Disabled="@isDropdownDisabled">
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

<div class="mt-3">
    <Button Color="ButtonColor.Primary" Size="Size.Small" @onclick="EnableDropdown">Enable</Button>
    <Button Color="ButtonColor.Danger" Size="Size.Small" @onclick="DisableDropdown">Disable</Button>
</div>
@code
{
    private bool isDropdownDisabled = true;
    private void EnableDropdown() => isDropdownDisabled = false;
    private void DisableDropdown() => isDropdownDisabled = true;
}

To style a dropdown item as disabled, set the Disabled parameter to true on the DropdownItem element in the DropdownMenu component.

Blazor Bootstrap: Dropdown Component - Disabled (Dropdown Item)
<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropstart</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link" Disabled="true">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

See the demo here.

By default, a DropdownMenu is automatically positioned at 100% from the top and along the left side of its parent. You can change this with the Position parameter.

To right-align a DropdownMenu, add the Position="DropdownMenuPosition.End" parameter to the DropdownMenu component. Directions are mirrored when using Bootstrap in RTL.

Blazor Bootstrap: Dropdown Component - Menu position
<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Right-aligned menu example</DropdownToggleButton>
    <DropdownMenu Position="DropdownMenuPosition.End">
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

See the demo here.

Menu content​

Add a header to label sections of actions in any dropdown menu.

Blazor Bootstrap: Dropdown Component - Header
<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown</DropdownToggleButton>
    <DropdownMenu>
        <DropdownHeader>Dropdown header</DropdownHeader>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

See the demo here.

Dividers​

Separate groups of related menu items with a divider.

Blazor Bootstrap: Dropdown Component - Dividers
<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
        <DropdownDivider>Dropdown header</DropdownDivider>
        <DropdownItem To="#" Type="ButtonType.Link">Separated link</DropdownItem>
    </DropdownMenu>
</Dropdown>

See the demo here.

Text​

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that youll likely need additional sizing styles to constrain the menu width.

Blazor Bootstrap: Dropdown Component - Text
<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown</DropdownToggleButton>
    <DropdownMenu Class="p-4 text-muted" Style="width: 320px;">
        <p>Some example text that's free-flowing within the dropdown menu.</p>
        <p class="mb-0">And this is more example text.</p>
    </DropdownMenu>
</Dropdown>

See the demo here.

Forms​

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

Blazor Bootstrap: Dropdown Component - Forms
@using System.ComponentModel.DataAnnotations

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<Dropdown>
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown form</DropdownToggleButton>
    <DropdownMenu Class="px-4 py-3" Style="width:480px;">
        <EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
            <DataAnnotationsValidator />

            <div class="mb-3">
                <label class="form-label">Item Price: <span class="text-danger">*</span></label>
                <NumberInput TValue="decimal?" Value="invoice.Price" ValueExpression="() => invoice.Price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
                <ValidationMessage For="@(() => invoice.Price)" />
            </div>

            <div class="mb-3">
                <label class="form-label">Item Discount:</label>
                <NumberInput TValue="decimal?" Value="invoice.Discount" ValueExpression="() => invoice.Discount" ValueChanged="(value) => DiscountChanged(value)" Placeholder="Enter discount" />
                <ValidationMessage For="@(() => invoice.Discount)" />
            </div>

            <div class="mb-3">
                <label class="form-label">Total Amount: <span class="text-danger">*</span></label>
                <NumberInput TValue="decimal?" @bind-Value="invoice.Total" Disabled="true" Placeholder="Enter total" />
                <ValidationMessage For="@(() => invoice.Total)" />
            </div>

            <div class="row">
                <div class="col-md-12 text-right">
                    <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
                    <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
                </div>
            </div>
        </EditForm>
    </DropdownMenu>
</Dropdown>
@code {
    private Invoice invoice = new();
    private EditContext editContext = default!;

    protected override void OnInitialized()
    {
        editContext = new EditContext(invoice);
        base.OnInitialized();
    }

    protected override void OnParametersSet()
    {
        CalculateToatl();
        base.OnParametersSet();
    }

    private void PriceChanged(decimal? value)
    {
        invoice.Price = value;
        CalculateToatl();
    }

    private void DiscountChanged(decimal? value)
    {
        invoice.Discount = value;
        CalculateToatl();
    }

    private void CalculateToatl()
    {
        var price = invoice.Price.HasValue ? invoice.Price.Value : 0;
        var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0;
        invoice.Total = price - discount;
    }

    public void HandleOnValidSubmit()
    {
        Console.WriteLine($"Price: {invoice.Price}");
        Console.WriteLine($"Discount: {invoice.Discount}");
        Console.WriteLine($"Total: {invoice.Total}");
    }

    private void ResetForm()
    {
        invoice = new();
        editContext = new EditContext(invoice);
    }

    public class Invoice
    {
        [Required(ErrorMessage = "Price required.")]
        [Range(60, 500, ErrorMessage = "Price should be between 60 and 500.")]
        public decimal? Price { get; set; } = 232M;

        [Range(0, 50, ErrorMessage = "Discount should be between 0 and 50.")]
        public decimal? Discount { get; set; }

        [Required(ErrorMessage = "Amount required.")]
        [Range(10, 500, ErrorMessage = "Total should be between 60 and 500.")]
        public decimal? Total { get; set; }
    }
}

See the demo here.

Auto close behavior​

By default, the DropdownMenu is closed when clicking either inside or outside the DropdownMenu. You can use the AutoClose and AutoCloseBehavior parameters to change this behavior of the Dropdown.

Blazor Bootstrap: Dropdown Component - Auto close behavior
<Dropdown AutoClose="true">
    <DropdownToggleButton Color="ButtonColor.Secondary">Default dropdown</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>
<Dropdown AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Outside">
    <DropdownToggleButton Color="ButtonColor.Secondary">Clickable outside</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>
<Dropdown AutoClose="true" AutoCloseBehavior="DropdownAutoCloseBehavior.Inside">
    <DropdownToggleButton Color="ButtonColor.Secondary">Clickable inside</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>
<Dropdown AutoClose="false">
    <DropdownToggleButton Color="ButtonColor.Secondary">Manual close</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Menu item</DropdownItem>
    </DropdownMenu>
</Dropdown>

See the demo here.

Methods​

Blazor Bootstrap: Dropdown Component - Methods
<Dropdown @ref="dropdown1">
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>

<Button Color="ButtonColor.Primary" @onclick="ShowAsync">Show</Button>
<Button Color="ButtonColor.Primary" @onclick="HideAsync">Hide</Button>
<Button Color="ButtonColor.Primary" @onclick="ToggleAsync">Toggle</Button>
@code{
    private Dropdown dropdown1 = default!;

    private async Task ShowAsync() => await dropdown1.ShowAsync();
    private async Task HideAsync() => await dropdown1.HideAsync();
    private async Task ToggleAsync() => await dropdown1.ToggleAsync();
}

See the demo here.

Events​

All dropdown events are fired at the toggling element and then bubbled up.

Blazor Bootstrap: Dropdown Component - Events
<Dropdown OnHiding="OnDropdownHidingAsync"
          OnHidden="OnDropdownHiddenAsync"
          OnShowing="OnDropdownShowingAsync"
          OnShown="OnDropdownShownAsync">
    <DropdownToggleButton Color="ButtonColor.Secondary">Dropdown button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="ButtonType.Link">Action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Another action</DropdownItem>
        <DropdownItem To="#" Type="ButtonType.Link">Something else here</DropdownItem>
    </DropdownMenu>
</Dropdown>
@code {
    List<string> messages = new List<string>();

    private void OnDropdownHidingAsync() => messages.Add(new("OnHiding"));
    private void OnDropdownHiddenAsync() => messages.Add(new("OnHidden"));
    private void OnDropdownShowingAsync() => messages.Add(new("OnShowing"));
    private void OnDropdownShownAsync() => messages.Add(new("OnShown"));
}

See the demo here.

- + \ No newline at end of file diff --git a/components/grid.html b/components/grid.html index 57d7f5e1a..36fa4de31 100644 --- a/components/grid.html +++ b/components/grid.html @@ -10,7 +10,7 @@ - + @@ -28,7 +28,7 @@ For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. Also, disable check the row level checkbox if the employee Id is less than 105.

Blazor Bootstrap: Grid Component - Disable selection
<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowSelection="true"
      SelectionMode="GridSelectionMode.Multiple"
      DisableAllRowsSelection="DisableAllRowsSelectionHandler"
      DisableRowSelection="DisableRowSelectionHandler"
      SelectedItemsChanged="OnSelectedItemsChanged"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<div class="mt-3">
    Selected Items Count: @selectedEmployees.Count
</div>

<div class="mt-2">
    Selected Employees:
    <ul>
        @foreach (var emp in selectedEmployees)
        {
            <li>@emp.Name</li>
        }
    </ul>
</div>
@code {
    private IEnumerable<Employee1> employees = default!;

    private HashSet<Employee1> selectedEmployees = new();

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private bool DisableAllRowsSelectionHandler(IEnumerable<Employee1> employees)
    {
        return employees.Any(x => x.Id < 105); // disable selection if EmployeeId < 105
    }

    private bool DisableRowSelectionHandler(Employee1 emp)
    {
        return emp.Id < 105; // disable selection if EmployeeId < 105
    }

    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
    {
        selectedEmployees = employees is not null && employees.Any() ? employees : new();
        return Task.CompletedTask;
    }
}

See demo here

Dynamic page size​

Blazor Bootstrap: Grid Component - Dynamic page size
<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowPaging="true"
      PageSize="@pageSize"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Employee Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="DOJ">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Active">
        @context.IsActive
    </GridColumn>

</Grid>

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="() => ChangeSize(5)">Grid Size 5</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" @onclick="() => ChangeSize(10)">Grid Size 10</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" @onclick="() => ChangeSize(15)">Grid Size 15</Button>
@code {
    private int pageSize = 5;
    private IEnumerable<Employee1> employees = default!;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
        };
    }

    private void ChangeSize(int size) => pageSize = size;
}

See demo here

Page size selection​

Blazor Bootstrap: Grid Component - Page size selection
<Grid TItem="Employee1"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      AllowPaging="true"
      PageSize="10"
      PageSizeSelectorVisible="true"
      PageSizeSelectorItems="@(new int[] { 5,10,20 })"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Employee Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="DOJ">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Active">
        @context.IsActive
    </GridColumn>

</Grid>
@code {
    private IEnumerable<Employee1> employees = default!;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
        };
    }
}

See demo here

Header row css class​

Blazor Bootstrap: Grid Component - Header row css class
<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-primary text-white border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-primary text-white bg-opacity-75 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
             AllowSorting="true"
             Class="table table-hover"
             DataProvider="EmployeesDataProvider"
             HeaderRowCssClass="bg-success text-white border-bottom-0"
             Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-success text-white bg-opacity-75 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>
@code {
    private IEnumerable<Employee1> employees = default!;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
        };
    }
}

See demo here

Filters row css class​

Blazor Bootstrap: Grid Component - Filters row css class
<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-primary text-white border-bottom-0"
      FiltersRowCssClass="bg-primary text-white bg-opacity-25 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-warning text-white border-bottom-0"
      FiltersRowCssClass="bg-warning text-white bg-opacity-25 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-danger text-white border-bottom-0"
      FiltersRowCssClass="bg-danger text-white bg-opacity-25 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-success text-white border-bottom-0"
      FiltersRowCssClass="bg-success text-white bg-opacity-25 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-info text-white border-bottom-0"
      FiltersRowCssClass="bg-info text-white bg-opacity-25 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-dark text-white border-bottom-0"
      FiltersRowCssClass="bg-dark text-white bg-opacity-25 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-secondary text-white border-bottom-0"
      FiltersRowCssClass="bg-secondary text-white bg-opacity-25 border-bottom-0"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>
@code {
    private IEnumerable<Employee1> employees = default!;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
        };
    }
}

See demo here

Row click event​

<Grid TItem="Employee1"
      AllowRowClick="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-primary text-white border-bottom-0"
      OnRowClick="OnRowClick"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private IEnumerable<Employee1> employees = default!;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
        };
    }

    private async Task OnRowClick(GridRowEventArgs<Employee1> args)
    {
        await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = "Event: Row Click", Message = $"Id: {args.Item.Id}, Name: {args.Item.Name}" });
    }
}

See demo here

Row double click event​

<Grid TItem="Employee1"
      AllowRowClick="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="bg-danger text-white border-bottom-0"
      OnRowDoubleClick="OnRowDoubleClick"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>

    <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private IEnumerable<Employee1> employees = default!;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
        };
    }

    private async Task OnRowDoubleClick(GridRowEventArgs<Employee1> args)
    {
        await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = "Event: Row Double Click", Message = $"Id: {args.Item.Id}, Name: {args.Item.Name}" });
    }
}

See demo here

Translations​

In the example below, you will see translations related to pagination and filters in Dutch.

Blazor Bootstrap: Grid Component - Translations
<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowPaging="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      FiltersRowCssClass="bg-dark text-white bg-opacity-25 border-bottom-0"
      FiltersTranslationProvider="GridFiltersTranslationProvider"
      HeaderRowCssClass="bg-dark text-white border-bottom-0"
      PageSize="10"
      PageSizeSelectorVisible="true"
      PageSizeSelectorItems="@(new int[] { 5,10,20 })"
      PaginationItemsTextFormat="{0} - {1} van {2} artikelen"
      ItemsPerPageText="Artikelen per pagina"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>
@code {
    private IEnumerable<Employee1> employees = default!;

    private async Task<IEnumerable<FilterOperatorInfo>> GridFiltersTranslationProvider()
    {
        var filtersTranslation = new List<FilterOperatorInfo>();

        // number/date/boolean
        filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));
        filtersTranslation.Add(new("!=", "Niet gelijk", FilterOperator.NotEquals));
        // number/date
        filtersTranslation.Add(new("<", "Minder dan", FilterOperator.LessThan));
        filtersTranslation.Add(new("<=", "Kleiner dan of gelijk aan", FilterOperator.LessThanOrEquals));
        filtersTranslation.Add(new(">", "Groter dan", FilterOperator.GreaterThan));
        filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals));
        // string
        filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains));
        filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith));
        filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith));
        filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));
        // common
        filtersTranslation.Add(new("x", "Duidelijk", FilterOperator.Clear));

        return await Task.FromResult(filtersTranslation);
    }

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
        };
    }
}

See demo here

Fixed header​

To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. You can change the units to em, pt, px, or etc. by setting the Unit parameter.

Blazor Bootstrap: Grid Component - Fixed header
<Grid @ref="grid"
      TItem="Employee4"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      FixedHeader="true"
      Height="350"
      Responsive="true"
      Unit="Unit.px">

    <GridColumn TItem="Employee4" HeaderText="Id" PropertyName="Id">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Employee Name" PropertyName="Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="DOJ" PropertyName="DOJ">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
        @context.IsActive
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
        @context.IsActive
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
        @context.IsActive
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
        @context.IsActive
    </GridColumn>
    <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
        @context.IsActive
    </GridColumn>

</Grid>
@code {
    BlazorBootstrap.Grid<Employee4> grid = default!;
    private IEnumerable<Employee4> employees = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task<GridDataProviderResult<Employee4>> EmployeesDataProvider(GridDataProviderRequest<Employee4> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee4> GetEmployees()
    {
        return new List<Employee4>
        {
            new Employee4 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee4 { Id = null, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee4 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee4 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee4 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee4 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee4 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee4 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee4 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = null, IsActive = true },
            new Employee4 { Id = 110, Name = "Vijay", Designation = null, DOJ = new DateOnly(1990, 7, 1), IsActive = true },
        };
    }
}

See demo here

Fixed header with filters​

Blazor Bootstrap: Grid Component - Fixed header with filters
<Grid TItem="Customer2"
Class="table table-hover table-bordered"
      DataProvider="CustomersDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      AllowSorting="true"
      FixedHeader="true"
      Responsive="true"
      Unit="Unit.px">

    <GridColumn TItem="Customer2" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
        @context.CustomerId
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Customer Name" PropertyName="CustomerName" SortString="CustomerName" SortKeySelector="item => item.CustomerName" FilterTextboxWidth="80">
        @context.CustomerName
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Phone" PropertyName="Phone" SortString="Phone" SortKeySelector="item => item.Phone" FilterTextboxWidth="100">
        @context.Phone
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Email" PropertyName="Email" SortString="Email" SortKeySelector="item => item.Email" FilterTextboxWidth="120">
        @context.Email
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Address" PropertyName="Address" SortString="Address" SortKeySelector="item => item.Address" FilterTextboxWidth="150">
        @context.Address
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Postal Zip" PropertyName="PostalZip" SortString="PostalZip" SortKeySelector="item => item.PostalZip" FilterTextboxWidth="80">
        @context.PostalZip
    </GridColumn>
    <GridColumn TItem="Customer2" FreezeRightPosition="0" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
        @context.Country
    </GridColumn>

</Grid>
@code {
    [Inject] public ICustomerService _customerService { get; set; } = default!;

    private async Task<GridDataProviderResult<Customer2>> CustomersDataProvider(GridDataProviderRequest<Customer2> request)
    {
        string sortString = "";
        SortDirection sortDirection = SortDirection.None;

        if (request.Sorting is not null && request.Sorting.Any())
        {
            // Note: Multi column sorting is not supported at this moment
            sortString = request.Sorting.FirstOrDefault().SortString;
            sortDirection = request.Sorting.FirstOrDefault().SortDirection;
        }
        var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);
        return await Task.FromResult(new GridDataProviderResult<Customer2> { Data = result.Item1, TotalCount = result.Item2 });
    }
}

See demo here

Freeze columns​

Blazor Bootstrap: Grid Component - Freeze columns
<Grid TItem="Customer2"
      Class="table table-hover table-bordered text-nowrap"
      DataProvider="CustomersDataProvider"
      AllowPaging="true"
      AllowSorting="true"
      Responsive="true"
      Unit="Unit.px">

    <GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="0" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
        @context.CustomerId
    </GridColumn>
    <GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="55.98" HeaderText="Customer Name" PropertyName="CustomerName" SortString="CustomerName" SortKeySelector="item => item.CustomerName" FilterTextboxWidth="80">
        @context.CustomerName
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Phone" PropertyName="Phone" SortString="Phone" SortKeySelector="item => item.Phone" FilterTextboxWidth="100">
        @context.Phone
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Email" PropertyName="Email" SortString="Email" SortKeySelector="item => item.Email" FilterTextboxWidth="120">
        @context.Email
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Address" PropertyName="Address" SortString="Address" SortKeySelector="item => item.Address" FilterTextboxWidth="150">
        @context.Address
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Postal Zip" PropertyName="PostalZip" SortString="PostalZip" SortKeySelector="item => item.PostalZip" FilterTextboxWidth="80">
        @context.PostalZip
    </GridColumn>
    <GridColumn TItem="Customer2" Freeze="true" FreezeDirection="FreezeDirection.Right" FreezeRightPosition="0" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
        @context.Country
    </GridColumn>

</Grid>
@code {
    [Inject] public ICustomerService _customerService { get; set; } = default!;

    private async Task<GridDataProviderResult<Customer2>> CustomersDataProvider(GridDataProviderRequest<Customer2> request)
    {
        string sortString = "";
        SortDirection sortDirection = SortDirection.None;

        if (request.Sorting is not null && request.Sorting.Any())
        {
            // Note: Multi column sorting is not supported at this moment
            sortString = request.Sorting.FirstOrDefault().SortString;
            sortDirection = request.Sorting.FirstOrDefault().SortDirection;
        }
        var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);
        return await Task.FromResult(new GridDataProviderResult<Customer2> { Data = result.Item1, TotalCount = result.Item2 });
    }
}

See demo here

Freeze columns with fixed header​

Blazor Bootstrap: Grid Component - Freeze columns with fixed header
<Grid TItem="Customer2"
      Class="table table-hover table-bordered text-nowrap"
      DataProvider="CustomersDataProvider"
      AllowPaging="true"
      AllowSorting="true"
      FixedHeader="true"
      Responsive="true"
      Unit="Unit.px">

    <GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="0" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
        @context.CustomerId
    </GridColumn>
    <GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="55.98" HeaderText="Customer Name" PropertyName="CustomerName" SortString="CustomerName" SortKeySelector="item => item.CustomerName" FilterTextboxWidth="80">
        @context.CustomerName
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Phone" PropertyName="Phone" SortString="Phone" SortKeySelector="item => item.Phone" FilterTextboxWidth="100">
        @context.Phone
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Email" PropertyName="Email" SortString="Email" SortKeySelector="item => item.Email" FilterTextboxWidth="120">
        @context.Email
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Address" PropertyName="Address" SortString="Address" SortKeySelector="item => item.Address" FilterTextboxWidth="150">
        @context.Address
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Postal Zip" PropertyName="PostalZip" SortString="PostalZip" SortKeySelector="item => item.PostalZip" FilterTextboxWidth="80">
        @context.PostalZip
    </GridColumn>
    <GridColumn TItem="Customer2" Freeze="true" FreezeDirection="FreezeDirection.Right" FreezeRightPosition="0" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
        @context.Country
    </GridColumn>

</Grid>
@code {
    [Inject] public ICustomerService _customerService { get; set; } = default!;

    private async Task<GridDataProviderResult<Customer2>> CustomersDataProvider(GridDataProviderRequest<Customer2> request)
    {
        string sortString = "";
        SortDirection sortDirection = SortDirection.None;

        if (request.Sorting is not null && request.Sorting.Any())
        {
            // Note: Multi column sorting is not supported at this moment
            sortString = request.Sorting.FirstOrDefault().SortString;
            sortDirection = request.Sorting.FirstOrDefault().SortDirection;
        }
        var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);
        return await Task.FromResult(new GridDataProviderResult<Customer2> { Data = result.Item1, TotalCount = result.Item2 });
    }
}

See demo here

Freeze columns with fixed header and filters​

Blazor Bootstrap: Grid Component - Freeze columns with fixed header and filters
<Grid TItem="Customer2"
      Class="table table-hover table-bordered text-nowrap"
      DataProvider="CustomersDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      AllowSorting="true"
      FixedHeader="true"
      Responsive="true"
      Unit="Unit.px">

    <GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="0" HeaderText="Id" PropertyName="CustomerId" SortString="CustomerId" SortKeySelector="item => item.CustomerId" FilterTextboxWidth="50" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
        @context.CustomerId
    </GridColumn>
    <GridColumn TItem="Customer2" Freeze="true" FreezeLeftPosition="131.95" HeaderText="Customer Name" PropertyName="CustomerName" SortString="CustomerName" SortKeySelector="item => item.CustomerName" FilterTextboxWidth="80">
        @context.CustomerName
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Phone" PropertyName="Phone" SortString="Phone" SortKeySelector="item => item.Phone" FilterTextboxWidth="100">
        @context.Phone
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Email" PropertyName="Email" SortString="Email" SortKeySelector="item => item.Email" FilterTextboxWidth="120">
        @context.Email
    </GridColumn>
    <GridColumn TItem="Customer2" HeaderText="Address" PropertyName="Address" SortString="Address" SortKeySelector="item => item.Address" FilterTextboxWidth="150">
        @context.Address
    </GridColumn>
    <GridColumn TItem="Customer2" Freeze="true" FreezeDirection="FreezeDirection.Right" FreezeRightPosition="171" HeaderText="Postal Zip" PropertyName="PostalZip" SortString="PostalZip" SortKeySelector="item => item.PostalZip" FilterTextboxWidth="80">
        @context.PostalZip
    </GridColumn>
    <GridColumn TItem="Customer2" Freeze="true" FreezeDirection="FreezeDirection.Right" FreezeRightPosition="0" HeaderText="Country" PropertyName="Country" SortString="Country" SortKeySelector="item => item.Country" FilterTextboxWidth="80">
        @context.Country
    </GridColumn>

</Grid>
@code {
    [Inject] public ICustomerService _customerService { get; set; } = default!;

    private async Task<GridDataProviderResult<Customer2>> CustomersDataProvider(GridDataProviderRequest<Customer2> request)
    {
        string sortString = "";
        SortDirection sortDirection = SortDirection.None;

        if (request.Sorting is not null && request.Sorting.Any())
        {
            // Note: Multi column sorting is not supported at this moment
            sortString = request.Sorting.FirstOrDefault().SortString;
            sortDirection = request.Sorting.FirstOrDefault().SortDirection;
        }
        var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken);
        return await Task.FromResult(new GridDataProviderResult<Customer2> { Data = result.Item1, TotalCount = result.Item2 });
    }
}

See demo here

- + \ No newline at end of file diff --git a/components/modal.html b/components/modal.html index 663bcdd73..ab2cc4ede 100644 --- a/components/modal.html +++ b/components/modal.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@

Blazor Modal

Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
BodyCssClassstringAdditional body CSS class.1.0.0
BodyTemplateRenderFragmentBody template.✔️1.0.0
ChildContentRenderFragmentSpecifies the content to be rendered inside the alert.1.0.0
CloseOnEscapeboolIndicates whether the modal closes when escape key is pressed.true1.0.0
DialogCssClassstringAdditional CSS class for the dialog (div.modal-dialog element).1.0.0
FooterCssClassstringFooter css class.1.0.0
FooterTemplateRenderFragmentFooter template.✔️1.0.0
FullscreenModalFullscreenFullscreen behavior of the modal.ModalFullscreen.Disabled1.0.0
HeaderTemplateRenderFragmentHeader template.✔️1.0.0
HeaderCssClassstringAdditional header CSS class.1.0.0
IsScrollableboolAllows modal body scroll.false1.0.0
IsServiceModalboolIndicates whether the modal is related to a modal service or not.false1.9.4
IsVerticallyCenteredboolShows the modal vertically in the center.false1.0.0
ModalTypeModalTypeGets or sets the modal type.ModalType.Light1.9.5
SizeModalSizeSize of the modal.ModalSize.Regular1.0.0
ShowCloseButtonboolIndicates whether the modal shows close button in header.true1.0.0
TabIndexintGets or sets the tab index.-11.6.0
Titlestring✔️1.0.0
UseStaticBackdropboolIndicates whether the modal uses a static backdrop.false1.0.0

Methods​

NameDescriptionAdded Version
ShowAsyncOpens a modal.1.0.0
ShowAsync<T>(string title, Dictionary<string, object> parameters = null)Opens a modal. T is component.1.4.1
HideAsyncHides a modal.1.0.0
Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Callback Events​

EventDescription
OnShowingThis event fires immediately when the show instance method is called.
OnShownThis event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
OnHidingThis event is fired immediately when the hide method has been called.
OnHiddenThis event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).
OnHidePreventedThis event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-bs-keyboard set to false.

How it works​

Before getting started with BlazorBootstrap's modal component, be sure to read the following as our menu options have recently changed.

  • Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
  • Clicking on the modal "backdrop" will automatically close the modal.
  • BlazorBootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.

Examples​

Clicking the Show Modal button below, the modal will slide down and fade in from the top of the page.

Blazor Modal Component
<Modal @ref="modal" Title="Modal title">
    <BodyTemplate>
        Modal body text goes here.
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
        <Button Color="ButtonColor.Primary">Save changes</Button>
    </FooterTemplate>
</Modal>

<Button Color="ButtonColor.Primary" @onclick="OnShowModalClick">Show Modal</Button>
@code {
    private Modal modal;

    private async Task OnShowModalClick()
    {
        await modal?.ShowAsync();
    }

    private async Task OnHideModalClick()
    {
        await modal?.HideAsync();
    }
}

See demo here.

Dynamic component as modal​

Render different components dynamically within the modal without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value.

Blazor Modal Component - Dynamic component as modal
<Modal @ref="modal" />

<Button Color="ButtonColor.Primary" @onclick="OnShowModalClick">Show Employee Component</Button>

@code {
    private Modal modal = default!;
    private string? message;

    private async Task OnShowModalClick()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 321);
        await modal.ShowAsync<EmployeeDemoComponent1>(title: "Employee Details", parameters: parameters);
    }
}

EmployeeDemoComponent1.razor

<div class="row">
    <div class="col-5 col-md-3 text-end">Employee Id :</div>
    <div class="col-7 col-md-9">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">First Name :</div>
    <div class="col-7 col-md-9">@employee.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">Last Name :</div>
    <div class="col-7 col-md-9">@employee.LastName</div>
</div>

@code {
    private Employee employee;

    [Parameter] public int EmployeeId { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };

        base.OnInitialized();
    }
}

See demo here.

Pass event callbacks to a dynamic component​

Event callbacks (EventCallback) can be passed in its parameter dictionary. In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary:

  • The string key is the callback method's name, OnClickCallback.
  • The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
Blazor Modal Component - Pass event callbacks to a dynamic component
<Modal @ref="modal" />

<Button Color="ButtonColor.Primary" @onclick="OnShowModalClick">Show Employee Component</Button>

<div class="mt-3">
    @message
</div>

@code {
    private Modal modal = default!;
    private string? message;

    private async Task OnShowModalClick()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 322);
        parameters.Add("OnclickCallback", EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage));
        await modal.ShowAsync<EmployeeDemoComponent2>(title: "Employee Details", parameters: parameters);
    }

    private void ShowDTMessage(MouseEventArgs e) => message = $"The current DT is: {DateTime.Now}.";
}

EmployeeDemoComponent2.razor

<div class="row">
    <div class="col-5 col-md-3 text-end">Employee Id :</div>
    <div class="col-7 col-md-9">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">First Name :</div>
    <div class="col-7 col-md-9">@employee.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">Last Name :</div>
    <div class="col-7 col-md-9">@employee.LastName</div>
</div>

<Button class="mt-3" Color="ButtonColor.Success" Type="ButtonType.Button" @onclick="OnClickCallback">
    Trigger a Parent component method
</Button>

@code {
    private Employee employee;

    [Parameter] public int EmployeeId { get; set; }

    [Parameter] public EventCallback<MouseEventArgs> OnClickCallback { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Sagar", LastName = "Reddy" };

        base.OnInitialized();
    }
}

See demo here.

Static backdrop​

When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. CloseOnEscape should also be set to false to ignore the effect of pressing the Esc key and mimic the original behaviour of Bootstrap modal. Click the button below to try it.

Blazor Modal Component - Static backdrop
<Modal @ref="modal" title="Modal title" UseStaticBackdrop="true" CloseOnEscape="false">
    <BodyTemplate>
        I will not close if you click outside me. Don't even try to press escape key.
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
        <Button Color="ButtonColor.Primary">Understood</Button>
    </FooterTemplate>
</Modal>

<Button Color="ButtonColor.Primary" @onclick="OnShowModalClick">Launch static backdrop modal</Button>
@code {
    private Modal modal;

    private async Task OnShowModalClick()
    {
        await modal?.ShowAsync();
    }

    private async Task OnHideModalClick()
    {
        await modal?.HideAsync();
    }
}

See demo here.

Scrolling long content​

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

Blazor Modal Component - Scrolling long content
<Modal @ref="modal" title="Modal title" IsScrollable="true">
    <BodyTemplate>
        <p style="margin-bottom: 100vh;">This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
        <p>This content should appear at the bottom after you scroll.</p>
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
        <Button Color="ButtonColor.Primary">Save changes</Button>
    </FooterTemplate>
</Modal>

<Button Color="ButtonColor.Primary" @onclick="OnShowModalClick">Launch demo modal</Button>
@code {
    private Modal modal;

    private async Task OnShowModalClick()
    {
        await modal?.ShowAsync();
    }

    private async Task OnHideModalClick()
    {
        await modal?.HideAsync();
    }
}

See demo here.

Vertically centered​

Add IsVerticallyCentered="true" to vertically center the modal.

Blazor Modal Component - Vertically centered
<Modal @ref="modal" title="Modal title" IsVerticallyCentered="true">
    <BodyTemplate>
        This is a vertically centered modal.
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
        <Button Color="ButtonColor.Primary">Save changes</Button>
    </FooterTemplate>
</Modal>

<Button Color="ButtonColor.Primary" @onclick="OnShowModalClick">Vertically centered modal</Button>
@code {
    private Modal modal;

    private async Task OnShowModalClick()
    {
        await modal?.ShowAsync();
    }

    private async Task OnHideModalClick()
    {
        await modal?.HideAsync();
    }
}

See demo here.

Vertically centered and scrollable​

Blazor Modal Component - Vertically centered and scrollable
<Modal @ref="modal" title="Modal title" IsVerticallyCentered="true" IsScrollable="true">
    <BodyTemplate>
        <p style="margin-bottom: 100vh;">This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
        <p>This content should appear at the bottom after you scroll.</p>
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
        <Button Color="ButtonColor.Primary">Save changes</Button>
    </FooterTemplate>
</Modal>

<Button Color="ButtonColor.Primary" @onclick="OnShowModalClick">Vertically centered scrollable modal</Button>
@code {
    private Modal modal;

    private async Task OnShowModalClick()
    {
        await modal?.ShowAsync();
    }

    private async Task OnHideModalClick()
    {
        await modal?.HideAsync();
    }
}

See demo here.

Optional sizes​

Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Blazor Modal Component - Optional sizes
<Modal @ref="xlModal" title="Extra large modal" Size="ModalSize.ExtraLarge">
    <BodyTemplate>...</BodyTemplate>
</Modal>
<Modal @ref="lgModal" title="Large modal" Size="ModalSize.Large">
    <BodyTemplate>...</BodyTemplate>
</Modal>
<Modal @ref="smModal" title="Small modal" Size="ModalSize.Small">
    <BodyTemplate>...</BodyTemplate>
</Modal>

<Button Color="ButtonColor.Primary" @onclick="() => xlModal?.ShowAsync()">Extra large modal</Button>
<Button Color="ButtonColor.Primary" @onclick="() => lgModal?.ShowAsync()">Large modal</Button>
<Button Color="ButtonColor.Primary" @onclick="() => smModal?.ShowAsync()">Small modal</Button>
@code {
    private Modal xlModal;
    private Modal lgModal;
    private Modal smModal;
}

See demo here.

Fullscreen Modal​

Blazor Modal Component - Fullscreen Modal
<Modal @ref="modal" title="Full screen" Fullscreen="ModalFullscreen.Always">
    <BodyTemplate>...</BodyTemplate>
</Modal>
<Modal @ref="smModal" title="Full screen below sm" Fullscreen="ModalFullscreen.SmallDown">
    <BodyTemplate>...</BodyTemplate>
</Modal>
<Modal @ref="mdModal" title="Full screen below md" Fullscreen="ModalFullscreen.MediumDown">
    <BodyTemplate>...</BodyTemplate>
</Modal>
<Modal @ref="lgModal" title="Full screen below lg" Fullscreen="ModalFullscreen.LargeDown">
    <BodyTemplate>...</BodyTemplate>
</Modal>
<Modal @ref="xlModal" title="Full screen below xl" Fullscreen="ModalFullscreen.ExtraLargeDown">
    <BodyTemplate>...</BodyTemplate>
</Modal>
<Modal @ref="xxlModal" title="Full screen below xxl" Fullscreen="ModalFullscreen.ExtraExtraLargeDown">
    <BodyTemplate>...</BodyTemplate>
</Modal>

<Button Color="ButtonColor.Primary" @onclick="() => modal?.ShowAsync()">Full screen</Button>
<Button Color="ButtonColor.Primary" @onclick="() => smModal?.ShowAsync()">Full screen below sm</Button>
<Button Color="ButtonColor.Primary" @onclick="() => mdModal?.ShowAsync()">Full screen below md</Button>
<Button Color="ButtonColor.Primary" @onclick="() => lgModal?.ShowAsync()">Full screen below lg</Button>
<Button Color="ButtonColor.Primary" @onclick="() => xlModal?.ShowAsync()">Full screen below xl</Button>
<Button Color="ButtonColor.Primary" @onclick="() => xxlModal?.ShowAsync()">Full screen below xxl</Button>
@code {
    private Modal modal;
    private Modal smModal;
    private Modal mdModal;
    private Modal lgModal;
    private Modal xlModal;
    private Modal xxlModal;
}

See demo here.

Callback Events​

BlazorBootstrap's modal class exposes a few events for hooking into modal functionality.

<Modal @ref="modal"
       title="Modal title"
       OnShowing="OnModalShowingAsync"
       OnShown="OnModalShownAsync"
       OnHiding="OnModalHidingAsync"
       OnHidden="OnModalHiddenAsync"
       OnHidePrevented="OnModalHidePreventedAsync">

    <BodyTemplate>
        Modal body text goes here.
    </BodyTemplate>

    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
        <Button Color="ButtonColor.Primary">Save changes</Button>
    </FooterTemplate>

</Modal>

<Button Color="ButtonColor.Primary" @onclick="OnShowModalClick">Show Modal</Button>
@code {
    private Modal modal;

    private async Task OnModalShowingAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Showing"); });
    }

    private async Task OnModalShownAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Show"); });
    }

    private async Task OnModalHidingAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Hiding"); });
    }

    private async Task OnModalHiddenAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Hide"); });
    }

    private async Task OnModalHidePreventedAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Hide Prevented"); });
    }
}

See demo here.

- + \ No newline at end of file diff --git a/components/offcanvas.html b/components/offcanvas.html index 7d7c8b8a3..90696957d 100644 --- a/components/offcanvas.html +++ b/components/offcanvas.html @@ -10,14 +10,14 @@ - +

Blazor Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component.

Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
BodyCssClassstringAdditional body CSS class.1.0.0
BodyTemplateRenderFragmentBody content.✔️1.0.0
CloseOnEscapeboolIndicates whether the offcanvas closes when escape key is pressed.true1.0.0
FooterCssClassstringAdditional footer CSS class.1.0.0
FooterTemplateRenderFragmentFooter content.1.0.0
HeaderCssClassstringAdditional header CSS class.1.0.0
HeaderTemplateRenderFragmentContent for the header.1.0.0
IsScrollableboolIndicates whether body (page) scrolling is allowed while offcanvas is open.false1.0.0
PlacementPlacementGets or sets the offcanvas placement. By default, offcanvas is placed on the right of the viewport.Placement.End1.0.0
ShowCloseButtonboolIndicates whether the modal shows close button in header.true1.0.0
SizeOffcanvasSizeSize of the offcanvas.OffcanvasSize.Regular1.0.0
TabIndexintGets or sets the tab index.-11.6.0
TitlestringText for the title in header.✔️1.0.0
UseStaticBackdropboolWhen UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.false1.8.0

Methods​

MethodDescriptionAdded Version
ShowAsyncShows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the OnShown event occurs).1.0.0
HideAsyncHides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the OnHidden event occurs).1.0.0
Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Callback Events​

EventDescription
OnShowingThis event fires immediately when the show instance method is called.
OnShownThis event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
OnHidingThis event is fired immediately when the hide method has been called.
OnHiddenThis event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).

How it works​

Offcanvas is a sidebar component that can be toggled to appear from the left, right, or bottom edge of the viewport.

  • Conceptually, they are quite similar to the Modal component, but they are separate components.
  • When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
  • Similar to modals, only one offcanvas can be shown at a time.

Examples​

Offcanvas​

Below is an offcanvas example that is shown by default.

Offcanvas - Example
<Button Color="ButtonColor.Primary" @onclick="(async () => { await ShowOffcanvasAsync(); })">Show Offcanvas</Button>

<Offcanvas @ref="offcanvas">
  ... design your header and body
</Offcanvas>
@code {
    private Offcanvas offcanvas;

    private async Task ShowOffcanvasAsync()
    {
        await offcanvas?.ShowAsync();
    }

    private async Task HideOffcanvasAsync()
    {
        await offcanvas?.HideAsync();
    }
}

See demo here.

info

Default placement for the offcanvas component is right.

Dynamic component as offcanvas​

Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value.

<Offcanvas @ref="offcanvas" />

<Button Color="ButtonColor.Primary" @onclick="ShowEmployeeComponent">Show Employee Component</Button>

@code {
    private Offcanvas offcanvas = default!;
    private string? message;

    private async Task ShowEmployeeComponent()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 321);
        await offcanvas.ShowAsync<EmployeeDemoComponent1>(title: "Employee Details", parameters: parameters);
    }
}

EmployeeDemoComponent1.razor

<div class="row">
    <div class="col-5 col-md-4 text-end">Employee Id :</div>
    <div class="col-7 col-md-8">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-4 text-end">First Name :</div>
    <div class="col-7 col-md-8">@employee.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-4 text-end">Last Name :</div>
    <div class="col-7 col-md-8">@employee.LastName</div>
</div>

@code {
    private Employee employee = default!;

    [Parameter] public int EmployeeId { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };

        base.OnInitialized();
    }
}

See demo here.

Pass event callbacks to a dynamic component​

Event callbacks can be passed in its parameter dictionary.

In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary:

  • The string key is the callback method's name, OnClickCallback.
  • The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
<Offcanvas @ref="offcanvas" />

<Button Color="ButtonColor.Primary" @onclick="ShowEmployeeComponent">Show Employee Component</Button>

<div class="mt-3 bg-success text-white bg-opacity-75">
    @message
</div>

@code {
    private Offcanvas offcanvas = default!;
    private string? message;

    private async Task ShowEmployeeComponent()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 322);
        parameters.Add("OnclickCallback", EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage));
        await offcanvas.ShowAsync<EmployeeDemoComponent2>(title: "Employee Details", parameters: parameters);
    }

    private void ShowDTMessage(MouseEventArgs e) => message = $"The current date time is: {DateTime.Now}.";
}

EmployeeDemoComponent2.razor

<div class="row">
    <div class="col-5 col-md-4 text-end">Employee Id :</div>
    <div class="col-7 col-md-8">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-4 text-end">First Name :</div>
    <div class="col-7 col-md-8">@employee.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-4 text-end">Last Name :</div>
    <div class="col-7 col-md-8">@employee.LastName</div>
</div>

<Button class="mt-3" Color="ButtonColor.Success" Type="ButtonType.Button" @onclick="OnClickCallback">
    Trigger a Parent component method
</Button>

@code {
    private Employee employee = default!;

    [Parameter] public int EmployeeId { get; set; }

    [Parameter] public EventCallback<MouseEventArgs> OnClickCallback { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Sagar", LastName = "Reddy" };

        base.OnInitialized();
    }
}

See demo here.

Placement​

Try the top, bottom, and left examples out below.

Offcanvas - Top Placement
<Offcanvas @ref="offcanvas" Title="Offcanvas top" Placement="Placement.Top">
    <BodyTemplate>...</BodyTemplate>
</Offcanvas>

<Button Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show top offcanvas</Button>
@code {
    private Offcanvas offcanvas;

    private async Task OnShowOffcanvasClick()
    {
        await offcanvas?.ShowAsync();
    }
}

See demo here.

Static backdrop​

When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.

Offcanvas - Static backdrop
<Offcanvas @ref="offcanvas" Title="Offcanvas title" UseStaticBackdrop="true">
    <BodyTemplate>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.</p>
        <p>Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.</p>
        <p>Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.</p>
        <p>Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.</p>
        <p>Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.</p>
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="() => offcanvas?.HideAsync()">Close</Button>
    </FooterTemplate>
</Offcanvas>

<Button Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show offcanvas</Button>
@code {
    private Offcanvas offcanvas;

    private async Task OnShowOffcanvasClick()
    {
        await offcanvas?.ShowAsync();
    }
}

See demo here.

Sizes​

Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.

Small Offcanvas​

Offcanvas - Small Size
<Offcanvas @ref="offcanvas" Title="Offcanvas title" Size="OffcanvasSize.Small">
    <BodyTemplate>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.</p>
        <p>Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.</p>
        <p>Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.</p>
        <p>Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.</p>
        <p>Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.</p>
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="() => offcanvas?.HideAsync()">Close</Button>
    </FooterTemplate>
</Offcanvas>

<Button Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show small offcanvas</Button>
@code {
    private Offcanvas offcanvas;

    private async Task OnShowOffcanvasClick()
    {
        await offcanvas?.ShowAsync();
    }
}

See demo here.

Large Offcanvas​

Large Offcanvas
<Offcanvas @ref="offcanvas" Title="Offcanvas title" Size="OffcanvasSize.Large">
    <BodyTemplate>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.</p>
        <p>Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.</p>
        <p>Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.</p>
        <p>Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.</p>
        <p>Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.</p>
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="() => offcanvas?.HideAsync()">Close</Button>
    </FooterTemplate>
</Offcanvas>

<Button Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show large offcanvas</Button>
@code {
    private Offcanvas offcanvas;

    private async Task OnShowOffcanvasClick()
    {
        await offcanvas?.ShowAsync();
    }
}

Callback Events​

BlazorBootstrap's offcanvas component exposes a few events for hooking into offcanvas functionality.

<Offcanvas @ref="offcanvas" 
           title="Offcanvas title"
           OnShowing="OnOffcanvasShowingAsync"
           OnShown="OnOffcanvasShownAsync"
           OnHiding="OnOffcanvasHidingAsync"
           OnHidden="OnOffcanvasHiddenAsync">

   <BodyTemplate>
      <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
   </BodyTemplate>

   <FooterTemplate>
       <Button Color="ButtonColor.Primary" @onclick="OnHideOffcanvasClick">Hide Offcanvas</Button>
   </FooterTemplate>

</Offcanvas>

<Button Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show offcanvas</Button>
@code {
    private Offcanvas offcanvas;

    private async Task OnShowOffcanvasClick()
    {
        await offcanvas?.ShowAsync();
    }

    private async Task OnHideOffcanvasClick()
    {
        await offcanvas?.HideAsync();
    }

    private async Task OnOffcanvasShowingAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Showing"); });
    }

    private async Task OnOffcanvasShownAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Shown"); });
    }

    private async Task OnOffcanvasHidingAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Hiding"); });
    }

    private async Task OnOffcanvasHiddenAsync()
    {
        await Task.Run(() => { Console.WriteLine("Event: Hidden"); });
    }
}

See demo here.

- + \ No newline at end of file diff --git a/components/pagination.html b/components/pagination.html index 624879379..d687872fd 100644 --- a/components/pagination.html +++ b/components/pagination.html @@ -10,13 +10,13 @@ - +

Blazor Pagination

Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages.

Parameters​

NameTypeDescriptionRequiredDefault
ActivePageNumberintActive page number. Starts with 1.1
AlignmentAlignmentGets or sets the pagination alignment.Alignment.None
DisplayPagesintGets or sets the maximum page links to be displayed.5
FirstLinkIconIconNameGets or sets first link icon.
FirstLinkTextstringGets or sets first link text. FirstLinkText is ignored if FirstLinkIcon is specified.First
LastLinkIconIconNameGets or sets last link icon.
LastLinkTextstringGets or sets last link text. LastLinkText is ignored if LastLinkIcon is specified.Last
NextLinkIconIconNameGets or sets next link icon.
NextLinkTextstringGets or sets next link text. NextLinkText is ignored if NextLinkIcon is specified.Next
PreviousLinkIconIconNameGets or sets previous link icon.
PreviousLinkTextstringGets or sets previous link text. PreviousLinkText is ignored if PreviousLinkIcon is specified.Previous
SizePaginationSizeGets or sets the pagination size.
TotalPagesintTotal pages of data items.

Callback Events​

EventDescription
PageChangedThis event fires immediately when the page number is changed.

Examples​

Pagination​

We use a large block of connected links for our pagination, making links hard to miss and easily scalable - all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.

Pagination - Examples
<Pagination TotalPages="8" />
<Pagination TotalPages="10" />
<Pagination TotalPages="13" />
<Pagination TotalPages="25" />
<Pagination TotalPages="100" />

See demo here.

Working with icons​

Pagination - Working with icons
<Pagination ActivePageNumber="1"
            TotalPages="15"
            DisplayPages="5"
            FirstLinkIcon="IconName.ChevronDoubleLeft"
            PreviousLinkIcon="IconName.ChevronLeft"
            NextLinkIcon="IconName.ChevronRight"
            LastLinkIcon="IconName.ChevronDoubleRight" />

See demo here.

Disabled and active states​

Pagination - Disabled and active states
<Pagination ActivePageNumber="1" TotalPages="10" />
<Pagination ActivePageNumber="3" TotalPages="10" />
<Pagination ActivePageNumber="5" TotalPages="10" />

See demo here.

Sizing​

Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.

Pagination - Sizing
<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Small" />
<Pagination ActivePageNumber="5" TotalPages="5" />
<Pagination ActivePageNumber="5" TotalPages="5" Size="PaginationSize.Large" />

See demo here.

Alignment​

Pagination - Alignment
<Pagination ActivePageNumber="2" TotalPages="5" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="Alignment.Center" />
<Pagination ActivePageNumber="2" TotalPages="5" Alignment="Alignment.End" />

See demo here.

Callback Events​

Pagination - Callback Events
<Pagination ActivePageNumber="@currentPageNumber"
            TotalPages="10"
            PageChanged="OnPageChangedAsync" />

<text>Current Page Number: @currentPageNumber</text>
@code {
    int currentPageNumber = 2;

    private async Task OnPageChangedAsync(int newPageNumber)
    {
        await Task.Run(() => { currentPageNumber = newPageNumber; });
    }
}

See demo here.

- + \ No newline at end of file diff --git a/components/placeholders.html b/components/placeholders.html index 9e35b7f91..f20d6cd1f 100644 --- a/components/placeholders.html +++ b/components/placeholders.html @@ -10,13 +10,13 @@ - +

Blazor Placeholders

Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading.

PlaceholderContainer Parameters​

NameTypeDescriptionRequiredDefault
AnimationPlaceholderAnimationGets or sets the placeholder animation.PlaceholderAnimation.Glow
ChildContentRenderFragmentSpecifies the content to be rendered inside this.

Placeholder Parameters​

NameTypeDescriptionRequiredDefault
WidthPlaceholderWidthGets or sets the placeholder width.PlaceholderWidth.Col1
ColorPlaceholderColorGets or sets the placeholder color.PlaceholderColor.None
SizePlaceholderSizeGets or sets the placeholder size.PlaceholderSize.None

Examples​

Placeholders​

Placeholders - Example
<PlaceholderContainer Animation="PlaceholderAnimation.Glow">
    <Placeholder Width="PlaceholderWidth.Col7" />
    <Placeholder Width="PlaceholderWidth.Col9" />
    <Placeholder Width="PlaceholderWidth.Col6" />
    <Placeholder Width="PlaceholderWidth.Col7" />
</PlaceholderContainer>

See demo here.

Width​

You can change the width through PlaceholderWidth, width utilities, or inline styles.

Placeholders - Width Example
<Placeholder Width="PlaceholderWidth.Col6" />
<Placeholder Class="w-75" />
<Placeholder Style="width: 25%;" />

See demo here.

Color​

By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum.

Placeholders - Color Example
<Placeholder Width="PlaceholderWidth.Col12" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Primary" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Secondary" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Success" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Danger" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Warning" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Info" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Light" />
<Placeholder Width="PlaceholderWidth.Col12" Color="PlaceholderColor.Dark" />

See demo here.

Sizing​

The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum.

Placeholders - Sizing Example
<Placeholder Width="PlaceholderWidth.Col12" />
<Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Large" />
<Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Small" />
<Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.ExtraSmall" />

See demo here.

Animation​

Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.

Placeholders - Animation Example
<PlaceholderContainer Animation="PlaceholderAnimation.Glow">
    <Placeholder Width="PlaceholderWidth.Col12" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Large" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Small" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.ExtraSmall" />
</PlaceholderContainer>

<br />
<br />

<PlaceholderContainer Animation="PlaceholderAnimation.Wave">
    <Placeholder Width="PlaceholderWidth.Col12" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Large" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.Small" />
    <Placeholder Width="PlaceholderWidth.Col12" Size="PlaceholderSize.ExtraSmall" />
</PlaceholderContainer>

See demo here.

- + \ No newline at end of file diff --git a/components/preload.html b/components/preload.html index 5417086f0..2585c5a9c 100644 --- a/components/preload.html +++ b/components/preload.html @@ -10,13 +10,13 @@ - +

Blazor Preload

Indicate the loading state of a page with Blazor Bootstrap preload component.

Things to know when using the Preload component:

  • Add the Preload component to your current page or your layout page.
  • Inject PreloadService
  • Call PreloadService.Show() before you make any call to the API.
  • Call PreloadService.Hide() after you get the response from the API.
Blazor Bootstrap: Blazor Preload Component - Default

Parameters​

NameTypeDefaultDescriptionRequiredVersion Added
ChildContentRenderFragmentnullSpecifies the content to be rendered inside this.1.1.0
LoadingTextstring?nullGets or sets the loading text.1.10.4

Preload Service​

Methods​

NameReturn TypeDescriptionAdded Version
Show(SpinnerColor spinnerColor = SpinnerColor.Light)voidShows the preload.1.1.0
Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null)voidShows the preload.1.10.4
Hide()voidHides the preload.1.1.0

Global preload service for the application​

  1. Add the Preload component in MainLayout.razor page as shown below.
@using BlazorBootstrap
.
.

... MainLayout.razor code goes here ...

.
.
<Preload LoadingText="Loading..." />
  1. Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API call, respectively, as shown below.
@code {

    [Inject] protected PreloadService PreloadService { get; set; }

    private void GetEmployees()
    {
        try
        {
            PreloadService.Show();

            // call the service/api to get the employees
        }
        catch
        {
            // handle exception
        }
        finally
        {
            PreloadService.Hide();
        }
    }
}

See Preload demo here.

Change loading text​

Blazor Bootstrap: Blazor Preload Component - Change loading text
<Button Color="ButtonColor.Primary" @onclick="ShowLoadingDataAsync">Show Loading data...</Button>
<Button Color="ButtonColor.Dark" @onclick="ShowSavingDataAsync">Show Saving data...</Button>
@code {
    [Inject] protected PreloadService PreloadService { get; set; }

    private async Task ShowLoadingDataAsync()
    {
        PreloadService.Show(SpinnerColor.Light, "Loading data...");
        await Task.Delay(3000); // call the service/api
        PreloadService.Hide();
    }

    private async Task ShowSavingDataAsync()
    {
        PreloadService.Show(SpinnerColor.Light, "Saving data...");
        await Task.Delay(3000); // call the service/api
        PreloadService.Hide();
    }
}

See Preload demo here.

Change spinner color​

Change the default spinner color by passing the SpinnerColor enum to the Show(...) method. In the below example, we are using a global preload service, as shown in the above section.

Blazor Bootstrap: Blazor Preload Component - Change spinner color
<Button Color="ButtonColor.Primary" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Primary)">Primary Spinner</Button>
<Button Color="ButtonColor.Secondary" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Secondary)">Secondary Spinner</Button>
<Button Color="ButtonColor.Success" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Success)">Success Spinner</Button>
<Button Color="ButtonColor.Danger" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Danger)">Danger Spinner</Button>
<Button Color="ButtonColor.Warning" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Warning)">Warning Spinner</Button>
<Button Color="ButtonColor.Info" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Info)">Info Spinner</Button>
<Button Color="ButtonColor.Light" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Light)">Light Spinner</Button>
<Button Color="ButtonColor.Dark" @onclick="async () => await ShowSpinnerAsync(SpinnerColor.Dark)">Dark Spinner</Button>
@code {
    [Inject] protected PreloadService PreloadService { get; set; }

    private async Task ShowSpinnerAsync(SpinnerColor spinnerColor)
    {
        PreloadService.Show(spinnerColor);

        await Task.Delay(3000); // call the service/api

        PreloadService.Hide();
    }
}

See Preload demo here.

- + \ No newline at end of file diff --git a/components/progress.html b/components/progress.html index b04170ec2..5fab33bb7 100644 --- a/components/progress.html +++ b/components/progress.html @@ -10,13 +10,13 @@ - +

Blazor Progress

Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.

Blazor Progress

Progress Parameters​

NameTypeDefaultRequiredDescription
ChildContentRenderFragment✔️Specifies the content to be rendered inside this.
Heightdouble16Gets or sets the height of the Progress. Height is measured in pixels, and the default height is 16 pixels.

ProgressBar Parameters​

NameTypeDefaultRequiredDescription
ColorProgressColorGets or sets the progress color.
LabelstringGets or sets the progress bar label.
TypeProgressTypeGets or sets the progress bar type.
WidthdoubleGet or sets the progress bar width.

ProgressBar Methods​

NameDescription
DecreaseWidthDecrease the progress bar width.
GetWidthGet the progress bar width.
IncreaseWidthIncrease the progress bar width.
SetColorSet the progress bar color.
SetLabelSet the progress bar label.
SetWidthSet the progress bar width.

Examples​

How it works​

Blazor Progress - How it works
<Progress Class="mb-3">
    <ProgressBar />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Width="20" Label="20%" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Success" Width="40" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Warning" Width="60" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Danger" Width="70" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Dark" Width="80" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Success" Width="20" />
    <ProgressBar Color="ProgressColor.Info" Width="20" />
    <ProgressBar Color="ProgressColor.Warning" Width="20" />
    <ProgressBar Color="ProgressColor.Danger" Width="30" />
</Progress>

See demo here.

Labels​

Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method.

Blazor Progress - Labels
<Progress Class="mb-3">
    <ProgressBar Width="20" Label="20%" />
</Progress>

See demo here.

Set width programmatically​

Use IncreaseWidth() or DecreaseProgressBar() methods to increase or decrease the Blazor ProgressBar width.

Blazor Progress - Set width programmatically
<Progress Class="mb-3">
    <ProgressBar @ref="progressBar" />
</Progress>

<div class="mb-3">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="IncreaseProgressBar">Increase by 10%</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="DecreaseProgressBar">Decrease by 10%</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="ResetProgressBar">Reset</Button>
</div>
@code {
    ProgressBar progressBar;

    private void IncreaseProgressBar()
    {
        progressBar.IncreaseWidth(10);
        progressBar.SetLabel($"{progressBar.GetWidth()}%");
    }

    private void DecreaseProgressBar()
    {
        progressBar.DecreaseProgressBar(10);
        progressBar.SetLabel($"{progressBar.GetWidth()}%");
    }

    private void ResetProgressBar()
    {
        progressBar.SetWidth(0);
        progressBar.SetLabel($"{progressBar.GetWidth()}%");
    }
}

See demo here.

Height​

Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels.

Blazor Progress - Height
<Progress Class="mb-3" Height="1">
    <ProgressBar Width="20" />
</Progress>
<Progress Class="mb-3" Height="5">
    <ProgressBar Width="20" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Width="40" />
</Progress>
<Progress Class="mb-3" Height="20">
    <ProgressBar Width="40" />
</Progress>

See demo here.

Backgrounds​

Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components.

Blazor Progress - Backgrounds
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Success" Width="10" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Info" Width="20" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Warning" Width="30" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Danger" Width="40" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Primary" Width="60" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Secondary" Width="70" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Dark" Width="80" />
</Progress>

See demo here.

Set background programmatically​

You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.

Blazor Progress - Set background programmatically
<Progress Class="mb-3">
    <ProgressBar @ref="progressBar" Width="30" Label="30%" />
</Progress>

<div>
    <Button Type="ButtonType.Button" Color="ButtonColor.Success" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Success)">Set Color</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Info" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Info)">Set Color</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Warning" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Warning)">Set Color</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Danger" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Danger)">Set Color</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Primary)">Set Color</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Secondary)">Set Color</Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Dark" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Dark)">Set Color</Button>
</div>
@code {
    ProgressBar progressBar;
    private void SetColor(ProgressColor color) => progressBar.SetColor(color);
}

See demo here.

Multiple bars​

Include multiple Blazor ProgressBar components in a Blazor Progress component if needed.

Blazor Progress - Multiple bars
<Progress Class="mb-3">
    <ProgressBar Color="ProgressColor.Success" Width="20" />
    <ProgressBar Color="ProgressColor.Info" Width="20" />
    <ProgressBar Color="ProgressColor.Warning" Width="20" />
    <ProgressBar Color="ProgressColor.Danger" Width="10" />
</Progress>

See demo here.

Striped​

Add Type="ProgressType.Striped" to any Blazor ProgressBar component to apply a stripe.

Blazor Progress - Striped
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Success" Width="10" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Info" Width="20" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Warning" Width="30" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Danger" Width="40" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Primary" Width="60" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Secondary" Width="80" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Dark" Width="100" />
</Progress>

See demo here.

Animated stripes​

The stripes can also be animated. Add Type="ProgressType.StripedAndAnimated" to the Blazor ProgressBar component to animate the stripes right to the left.

Blazor Progress - Animated stripes
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Success" Width="10" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Info" Width="20" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Warning" Width="30" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Danger" Width="40" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Primary" Width="60" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Secondary" Width="80" />
</Progress>
<Progress Class="mb-3">
    <ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Dark" Width="100" />
</Progress>

See demo here.

- + \ No newline at end of file diff --git a/components/sidebar.html b/components/sidebar.html index 48d5ddd9a..68014fb28 100644 --- a/components/sidebar.html +++ b/components/sidebar.html @@ -10,13 +10,13 @@ - +

Blazor Sidebar

Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content.

Blazor Sidebar

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
BadgeTextstringGets or sets the badge text.1.4.0
CustomIconNamestringGets or sets the custom icon name.1.4.0
DataProviderdelegate✔️DataProvider is for items to render. The provider should always return an instance of 'SidebarDataProviderResult', and 'null' is not allowed.1.4.0
IconNameenumGets or sets the IconName.1.4.0
ImageSrcstringGets or sets the logo.1.4.0
Titlestring✔️Gets or sets the title.1.4.0

Methods​

NameDescriptionAdded Version
RefreshDataAsyncRefresh the sidebar data.1.4.0
ToggleSidebarToggles sidebar.1.4.0
NameTypeDefaultRequiredDescriptionAdded Version
Classstring?nullGets or sets an additional CSS class.1.10.3
CustomIconNamestring?nullGets or sets the custom icon name.1.4.0
Hrefstring?✔️Gets or sets the href.1.4.0
IconColorIconColorIconColor.NoneGets or sets the icon color.1.4.0
IconNameIconNameIconName.NoneGets or sets the icon name.1.4.0
Idstring?nullGets or sets the Id.1.4.0
MatchNavLinkMatchNavLinkMatch.PrefixGets or sets the URL matching behavior.1.4.0
ParentIdstring?nullGets or sets the parent Id.1.4.0
SequenceintGets or sets the sequence.1.4.0
TargetTargetTarget.NoneGets or sets the target.1.4.0
Textstring?✔️Gets or sets the navigation link text.1.4.0

Examples​

Basic usage​

Blazor Sidebar - Basic usage
<Sidebar @ref="sidebar"
         IconName="IconName.BootstrapFill"
         Title="Blazor Bootstrap"
         DataProvider="SidebarDataProvider" />

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},
            new NavItem { Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts"},
            new NavItem { Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete"},
            new NavItem { Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb"},
            new NavItem { Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar"},
        };
        return navItems;
    }
}

See demo here.

Two level navigation​

Use NavItem's Id and ParentId to set the parent-child relation.

Blazor Sidebar - Two level navigation
NOTE

At this moment, two levels of navigation are supported.

<Sidebar @ref="sidebar"
         IconName="IconName.BootstrapFill"
         Title="Blazor Bootstrap"
         DataProvider="SidebarDataProvider" />

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }
}

See demo here.

Change icons color​

Set IconColor property to change the color.

Blazor Sidebar - Change icons color
<Sidebar @ref="sidebar"
         IconName="IconName.BootstrapFill"
         Title="Blazor Bootstrap"
         DataProvider="SidebarDataProvider" />

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }
}

See demo here.

Full layout with sidebar​

Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.

Blazor Sidebar - Full layout with sidebar
<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">Page content goes here</div>
        </article>
    </main>

</div>

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }
}

See demo here.

Toggle sidebar to show icons only​

Call ToggleSidebar() method to toggle the Sidebar to show the icons only.

Blazor Sidebar - Toggle sidebar to show icons only
<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-between">
            <Icon Name="IconName.List" role="button" @onclick="ToogleSidebar" />
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">Page content goes here</div>
        </article>
    </main>

</div>

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }

    private void ToogleSidebar() => sidebar.ToggleSidebar();
}

See demo here.

Show badge​

A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.

Blazor Sidebar - Show badge
<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             BadgeText="v1.3.1"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-between">
            <Icon Name="IconName.List" role="button" @onclick="ToogleSidebar" />
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">Page content goes here</div>
        </article>
    </main>

</div>

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }

    private void ToogleSidebar() => sidebar.ToggleSidebar();
}

See demo here.

Custom brand icon​

Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.

Blazor Sidebar - Custom brand icon
<div class="bb-page">

    <Sidebar @ref="sidebar"
             CustomIconName="bi bi-apple"
             Title="Blazor Bootstrap"
             BadgeText="v1.3.1"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-between">
            <Icon Name="IconName.List" role="button" @onclick="ToogleSidebar" />
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">Page content goes here</div>
        </article>
    </main>

</div>

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }

    private void ToogleSidebar() => sidebar.ToggleSidebar();
}

See demo here.

Use the ImageSrc parameter to set the brand logo.

Blazor Sidebar - Show image as brand logo
<div class="bb-page">

    <Sidebar @ref="sidebar"
             ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-color.svg"
             Title="Blazor Bootstrap"
             BadgeText="v1.3.1"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-between">
            <Icon Name="IconName.List" role="button" @onclick="ToogleSidebar" />
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">Page content goes here</div>
        </article>
    </main>

</div>

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }

    private void ToogleSidebar() => sidebar.ToggleSidebar();
}

See demo here.

Customize sidebar​

Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.

Blazor Sidebar - Customize sidebar
<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             BadgeText="v1.3.1"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">
                <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="ToggleSidebarStyles">Toggle Sidebar styles</Button>
            </div>
        </article>
    </main>
     
</div>

@code {
    Sidebar sidebar;
    bool applyPurpleStyle = false;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content", IconColor = IconColor.Primary },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components", IconColor = IconColor.Success },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms", IconColor = IconColor.Danger },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }

    private void ToggleSidebarStyles() => applyPurpleStyle = !applyPurpleStyle;
}

@if (applyPurpleStyle)
{
    <style>
        :root {
            --bb-sidebar-width: 270px;
            --bb-sidebar-collapsed-width: 50px;
            --bb-sidebar-background-color: rgba(234, 234, 234, 1);
            --bb-sidebar-top-row-background-color: rgba(0,0,0,0.08);
            --bb-sidebar-top-row-border-color: rgb(194,192,192);
            --bb-sidebar-title-text-color: rgb(0,0,0);
            --bb-sidebar-brand-icon-color: #6f42c1;
            --bb-sidebar-brand-image-width: 24px;
            --bb-sidebar-brand-image-height: 24px;
            --bb-sidebar-title-badge-text-color: rgb(255,255,255);
            --bb-sidebar-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1));
            --bb-sidebar-navbar-toggler-icon-color: rgb(0,0,0);
            --bb-sidebar-navbar-toggler-background-color: rgba(0,0,0,0.08);
            --bb-sidebar-content-border-color: rgb(194,192,192);
            --bb-sidebar-nav-item-text-color: rgba(0,0,0,0.9);
            --bb-sidebar-nav-item-text-active-color-rgb: 0,0,0;
            --bb-sidebar-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
            --bb-sidebar-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
            --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
            --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
        }
    </style>
}

See demo here.

Apply custom CSS class to NavItem​

Set the Class property of a NavItem to apply a custom CSS class.

Blazor Sidebar - Apply custom CSS class to NavItem
<Sidebar @ref="sidebar"
         IconName="IconName.BootstrapFill"
         Title="Blazor Bootstrap"
         DataProvider="SidebarDataProvider" />
@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4", Class="px-3"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4", Class="px-3"},
            new NavItem { Id = "7", Href = "/sidebar", IconName = IconName.LayoutSidebarInset, Text = "Sidebar", ParentId="4", Class="px-3"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }
}

See demo here.

- + \ No newline at end of file diff --git a/components/tabs.html b/components/tabs.html index eaa49e184..735782ab5 100644 --- a/components/tabs.html +++ b/components/tabs.html @@ -10,13 +10,13 @@ - +

Blazor Tabs

Documentation and examples for how to use Blazor Bootstrap tabs components.

Tabs Parameters​

NameTypeDescriptionRequiredDefault
ChildContentRenderFragmentSpecifies the content to be rendered inside this.
EnableFadeEffectboolGets or sets the tabs fade effect.false
NavStyleNavStyleGet or sets the nav style.NavStyle.Tabs

Tabs Methods​

NameDescription
ShowFirstTabAsyncSelects the first tab and show its associated pane.
ShowLastTabAsyncSelects the last tab and show its associated pane.
ShowTabByNameAsync(string)Selects the tab by name and show its associated pane.
ShowTabByIndexAsync(int)Selects the tab by index and show its associated pane.

Tab Parameters​

NameTypeDescriptionRequiredDefault
TitlestringGets or sets the tab title.
TitleTemplateRenderFragmentGets or sets the tab title template.
ContentRenderFragmentSpecifies the content to be rendered inside the tab.✔️
IsActiveboolGets or sets the active tab.false
DisabledboolGets or sets the disabled.false
Note

Either Title or TitleTemplate is required.

Examples​

Tabs​

Blazor Tabs Component - Examples
<Tabs>
    <Tab Title="Home" IsActive="true">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Profile">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Contact">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
</Tabs>

See demo here.

Fade effect​

To make tabs fade in, add EnableFadeEffect="true". The first tab pane must also have IsActive="true" to make the initial content visible.

Blazor Tabs Component - Fade effect
<Tabs EnableFadeEffect="true">
    <Tab Title="Home" IsActive="true">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Profile">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Contact">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
</Tabs>

See demo here.

Title with icon​

To customize the tab title, use TitleTemplate, as shown in the below example.

Blazor Tabs Component - Title with icon
<Tabs EnableFadeEffect="true">
    <Tab IsActive="true">
        <TitleTemplate>
            <Icon Name="IconName.HouseFill" /> Home
        </TitleTemplate>
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab>
        <TitleTemplate>
            <Icon Name="IconName.PersonFill" /> Profile
        </TitleTemplate>
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab>
        <TitleTemplate>
            <Icon Name="IconName.PhoneFill" /> Contact
        </TitleTemplate>
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
</Tabs>

See demo here.

Disable Tab​

Disable specific tabs by adding Disabled="true" parameter.

Blazor Tabs Component - Disable Tab
<Tabs EnableFadeEffect="true">
    <Tab Title="Home" IsActive="true">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Profile">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Projects" Disabled="true">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Projects tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Contact">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
</Tabs>

See demo here.

Pills​

Use NavStyle="NavStyle.Pills" parameter to change the tabs to pills.

Blazor Tabs Component - Pills
<Tabs EnableFadeEffect="true" NavStyle="NavStyle.Pills">
    <Tab Title="Home" IsActive="true">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Home tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Profile">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Profile tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
    <Tab Title="Contact">
        <Content>
            <p class="mt-2">
                <b>This is some placeholder content the Contact tab's associated content.</b> Clicking another tab will toggle the visibility of this one for the next.
            </p>
        </Content>
    </Tab>
</Tabs>

See demo here.

Activate individual tabs​

You can activate individual tabs in several ways. Use predefined methods ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.

Blazor Tabs Component - Activate individual tabs
<Tabs @ref="tabs" EnableFadeEffect="true">
    <Tab Title="Home" IsActive="true">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
        </Content>
    </Tab>
    <Tab Title="Profile">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
        </Content>
    </Tab>
    <Tab Title="Contact">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
        </Content>
    </Tab>
    <Tab Title="Products" Name="Products">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>Products</b> tab.</p>
        </Content>
    </Tab>
    <Tab Title="FAQs" Name="FAQ">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>FAQs</b> tab.</p>
        </Content>
    </Tab>
    <Tab Title="About">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>About</b> tab.</p>
        </Content>
    </Tab>
</Tabs>

<Button Color="ButtonColor.Primary" @onclick="ShowFirstTabAsync">First Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowSecondTabAsync">Second Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowThirdTabAsync">Third Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowProductsTabAsync">Products Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowFaqsAsync">FAQs Tab</Button>
<Button Color="ButtonColor.Primary" @onclick="ShowLastTabAsync">Last Tab</Button>
@code{
    Tabs tabs;

    private async Task ShowFirstTabAsync() => await tabs.ShowFirstTabAsync();
    private async Task ShowSecondTabAsync() => await tabs.ShowTabByIndexAsync(1);
    private async Task ShowThirdTabAsync() => await tabs.ShowTabByIndexAsync(2);
    private async Task ShowProductsTabAsync() => await tabs.ShowTabByNameAsync("Products");
    private async Task ShowFaqsAsync() => await tabs.ShowTabByNameAsync("FAQ");
    private async Task ShowLastTabAsync() => await tabs.ShowLastTabAsync();
}

See demo here.

Callback Events​

When showing a new tab, the events fire in the following order:

  1. OnHiding (on the current active tab)
  2. OnShowing (on the to-be-shown tab)
  3. OnHidden (on the previous active tab, the same one as for the OnHiding event)
  4. OnShown (on the newly-active just-shown tab, the same one as for the OnShowing event)
Note

If no tab was already active, then the OnHiding and OnHidden events will not be fired.

See demo here.

Set active tab OnAfterRender​

Blazor Tabs Component - Activate individual tabs
<Tabs @ref="tabs">
    <Tab Title="Home">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
        </Content>
    </Tab>
    <Tab Title="Profile">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
        </Content>
    </Tab>
    <Tab Title="Contact">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
        </Content>
    </Tab>
    <Tab Title="About">
        <Content>
            <p class="mt-3">This is the placeholder content for the <b>About</b> tab.</p>
        </Content>
    </Tab>
</Tabs>
@code {
    Tabs tabs = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            string userDefaultPreferredTab = "Profile"; // Get the value from Service / API

            switch (userDefaultPreferredTab)
            {
                case "Home":
                    await tabs.ShowTabByIndexAsync(0);
                    break;
                case "Profile":
                    await tabs.ShowTabByIndexAsync(1);                    
                    break;
                case "Contact":
                    await tabs.ShowTabByIndexAsync(2);
                    break;
                case "About":
                    await tabs.ShowTabByIndexAsync(3);
                    break;
                default:
                    await tabs.ShowTabByIndexAsync(0);
                    break;
            }
        }
    }
}

See demo here.

- + \ No newline at end of file diff --git a/components/toasts.html b/components/toasts.html index 7fafb8366..4d982d569 100644 --- a/components/toasts.html +++ b/components/toasts.html @@ -10,13 +10,13 @@ - +

Blazor Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable Blazor Bootstrap toast message.

Blazor Toasts are lightweight notifications designed to mimic the push notifications that mobile and desktop operating systems have popularized. They're built with a flexbox, making it easy to align and position.

Blazor Bootstrap: Blazor Toasts Component - Example 1Blazor Bootstrap: Blazor Toasts Component - Example 2

Things to know when using the blazor toasts component:

  • Toasts will not hide automatically if you do not specify AutoHide="true".
  • Use global toasts service for the application instead of page level toasts.

Toasts Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
AutoHideboolAuto hide the toast.false1.0.0
DelayintDelay hiding the toast (milli seconds).50001.0.0
MessagesList<ToastMessage>List of all the toasts.✔️1.0.0
PlacementToastsPlacementSpecifies the toasts placement.ToastsPlacement.TopRight1.0.0
ShowCloseButtonboolShow close button.true1.0.0
StackLengthintSpecifies the toast container maximum capacity.51.0.0

ToastMessage Properties​

NameTypeDescriptionRequiredDefaultAdded Version
AutoHideboolGets or sets the auto hide behavior to a message.false1.9.0
CustomIconNamestringGets or sets the custom icon name.1.0.0
HelpTextstringGets or sets the help text.1.0.0
IconNameIconNameGets or sets the bootstarp icon name.1.0.0
IdGuidGets the toast id.1.0.0
MessagestringGets or sets the toast message.✔️1.0.0
TitlestringGets or sets the toast''s message title.1.0.0
TypeToastTypeGets or sets the type of the toast.✔️1.0.0

Examples:​

Toast​

To encourage extensible and predictable toasts, we recommend a header and body.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.

Blazor Bootstrap: Blazor Toasts Component - Example
<Toasts class="p-3" Messages="messages" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>
@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    => new ToastMessage
        {
            Type = toastType,
            Title = "Blazor Bootstrap",
            HelpText = $"{DateTime.Now}",
            Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
        };
}

See toasts demo here.

Toast without title​

Customize your toasts by removing sub-components, tweaking them with utilities.

Here we've created a simple toast. You can create different toast color schemes with the Color parameter.

Blazor Bootstrap: Toasts Component - Example
Blazor Bootstrap: Toasts Component - Example
<Toasts class="p-3" Messages="messages" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Light" @onclick="() => ShowMessage(ToastType.Light)">Light Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>
@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    => new ToastMessage
        {
            Type = toastType,
            Message = $"Hello, world! This is a simple toast message. DateTime: {DateTime.Now}",
        };
}

See toasts without title demo here.

Auto hide​

Add AutoHide="true" parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.

Blazor Bootstrap: Blazor Toasts Component - Auto hide
<Toasts class="p-3" Messages="messages" AutoHide="true" Delay="6000" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>
@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    => new ToastMessage
        {
            Type = toastType,
            Title = "Blazor Bootstrap",
            HelpText = $"{DateTime.Now}",
            Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
        };
}

See auto hide toasts demo here.

Auto hide individual messages​

Set AutoHide="true" property on ToastMessage to hide individual Blazor Toast message after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.

In the below example, AutoHide="false" for Danger and Warning messages.

<Toasts class="p-3" Messages="messages" Delay="6000" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>
@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    {
        var toastMessage = new ToastMessage();

        toastMessage.Type = toastType;
        toastMessage.Title = "Blazor Bootstrap";
        toastMessage.HelpText = $"{DateTime.Now}";
        toastMessage.Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}";
        // disable auto hide for `danger` and `warning` messages.
        toastMessage.AutoHide = !(toastType == ToastType.Danger || toastType == ToastType.Warning);

        return toastMessage;
    }
}

See auto hide individual toasts demo here.

Placement​

Change the Blazor Toasts placement according to your need. The default placement will be top right corner. Use the ToastsPlacement parameter to update the Blazor Toasts placement.

<Toasts class="p-3" Messages="messages" Placement="@toastsPlacement" />

<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.TopLeft)">Top Left</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.TopCenter)">Top Center</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.TopRight)">Top Right</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.MiddleLeft)">Middle Left</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.MiddleCenter)">Middle Center</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.MiddleRight)">Middle Right</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.BottomLeft)">Bottom Left</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.BottomCenter)">Bottom Center</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.BottomRight)">Bottom Right</Button>
@code {
    ToastsPlacement toastsPlacement = ToastsPlacement.TopRight;
    List<ToastMessage> messages = new();

    private void ChangePlacement(ToastsPlacement placement)
    {
        if (!messages.Any())
        {
            messages.Add(
                new ToastMessage()
                    {
                        Type = ToastType.Success,
                        Title = "Blazor Bootstrap",
                        HelpText = $"{DateTime.Now}",
                        Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
                    });
        }
        toastsPlacement = placement;
    }
}

See demo here.

Stack Length​

Blazor Toasts component shows a maximum of 5 toasts by default. If you add a new toast to the existing list, the first toast gets deleted like FIFO (First In First Out). Change the maximum capacity according to your need by using the StackLength parameter.

In the below example, StackLength is set to 3. It shows a maximum of 3 toast messages at any time.

<Toasts class="p-3" Messages="messages" AutoHide="true" StackLength="3" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>
@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    => new ToastMessage
        {
            Type = toastType,
            Title = "Blazor Bootstrap",
            HelpText = $"{DateTime.Now}",
            Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
        };
}

See demo here.

Global toasts service for the application​

  1. Add the Toasts component in MainLayout.razor page as shown below.
@inherits LayoutComponentBase

...

... MainLayour.razor code goes here ...

...

<Toasts class="p-3" AutoHide="true" Delay="4000" Placement="ToastsPlacement.TopRight" />
tip

Set the Toasts component parameters as per your requirement.

  1. Inject ToastService, then call the Notify(...) method as shown below.
@code {

    [Inject] protected ToastService ToastService { get; set; }

    private void SaveEmployee()
    {
        try
        {
            // TODO: call the service/api to save the employee details

            ToastService.Notify(new(ToastType.Success, $"Employee details saved successfully."));
        }
        catch(Exception ex)
        {
            // handle exception

            ToastService.Notify(new(ToastType.Danger, $"Error: {ex.Message}."));
        }
    }
}
- + \ No newline at end of file diff --git a/components/tooltips.html b/components/tooltips.html index b9e230036..aeb1c0fa6 100644 --- a/components/tooltips.html +++ b/components/tooltips.html @@ -10,13 +10,13 @@ - +

Blazor Tooltips

Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages.

Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.1.0.0
ColorTooltipColorGets or sets the tooltip color.TooltipColor.None1.10.0
PlacementTooltipPlacementSpecifies the tooltip placement. Default is top right.TooltipPlacement.Top1.0.0
TitlestringDisplays informative text when users hover, focus, or tap an element.✔️1.0.0

Examples​

Tooltips​

Blazor Bootstrap: Tooltip Component
Blazor Bootstrap: Tooltip Component
Blazor Bootstrap: Tooltip Component
Blazor Bootstrap: Tooltip Component
<div>
    <Tooltip Title="Tooltip Left" Placement="TooltipPlacement.Left">Tooltip Left</Tooltip>
</div>
<div>
    <Tooltip Title="Tooltip Top">Tooltip Top</Tooltip>
</div>
<div>
    <Tooltip Title="Tooltip Right" Placement="TooltipPlacement.Right">Tooltip Right</Tooltip>
</div>
<div>
    <Tooltip Title="Tooltip Bottom" Placement="TooltipPlacement.Bottom">Tooltip Bottom</Tooltip>
</div>

See tooltips demo here.

Disabled button with tooltip​

Blazor Bootstrap: Tooltip Component
<Tooltip Class="d-inline-block" Title="Disabled button"role="button">
    <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</Tooltip>

See disabled button with tooltip demo here.

Tooltip icon with click event​

Blazor Bootstrap: Tooltip Component
<Tooltip Title="Click here" @onclick="OnClick" role="button">
    <i class="bi bi-arrow-repeat text-danger"></i>
</Tooltip>
@code {
    private void OnClick()
    {
        Console.WriteLine($"clicked");
    }
}

See icon with tooltip demo here.

Dynamically update the tooltip text​

<div class="mb-3">
    <Tooltip Title="@text" Placement="TooltipPlacement.Top">Tooltip Bottom</Tooltip>
</div>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ChangeTooltip">Change Tooltip</Button>

@code {
    private string text = "Tooltip text";

    private void ChangeTooltip() => text = $"Updated {DateTime.Now.ToLongTimeString()}";
}

see demo here

- + \ No newline at end of file diff --git a/content/icons.html b/content/icons.html index 0f5ca0ab3..d82f311a7 100644 --- a/content/icons.html +++ b/content/icons.html @@ -10,13 +10,13 @@ - +

Blazor Icons

Blazor Bootstrap icon component will display an icon from any icon font.

Prerequisites​

  • Install Bootstrap Icons or other.

  • Include the icon fonts stylesheet in your website <head> or @import in CSS from CDN.

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet" />

Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ColorIconColorGets or sets the icon color.IconColor.None1.9.0
CustomIconNamestringSpecify custom icons of your own, like fontawesome. Example: fas fa-alarm-clock✔️1.0.0
NameIconNameGets or sets the icon name.✔️1.0.0
SizeIconSizeGets or sets the icon size.IconSize.None1.0.0
NOTE

Either Name or CustomIconName parameter is mandatory. For Font Awesome setup, please follow the Font Awesome website.

Examples​

Icons​

Blazor Bootstrap: Icon Component
<Icon Name="IconName.Alarm" />
<Icon Name="IconName.AlarmFill" />
<Icon Name="IconName.Window" />
<Icon Name="IconName.Apple" />

See icons demo here.

Sizes​

Blazor Bootstrap: Icon Component - Sizes
<Icon Name="IconName.Alarm" Size="IconSize.x2" />
<Icon Name="IconName.Alarm" Size="IconSize.x3" />
<Icon Name="IconName.Alarm" Size="IconSize.x4" />
<Icon Name="IconName.Alarm" Size="IconSize.x5" />

See icons with different size demo here.

Font awesome icons​

In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.

Blazor Bootstrap: Icon Component - Font awesome icons
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x1" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x2" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x3" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x4" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x5" />
<Icon CustomIconName="fa-solid fa-hands-clapping" Size="IconSize.x6" />

Colors​

Blazor Bootstrap: Icon Component - Colors
<Icon Name="IconName.Facebook" Size="IconSize.x2" Color="IconColor.Primary" />
<Icon Name="IconName.CloudLightningRainFill" Size="IconSize.x2" Color="IconColor.Secondary" />
<Icon Name="IconName.CheckAll" Size="IconSize.x2" Color="IconColor.Success" />
<Icon Name="IconName.Bug" Size="IconSize.x2" Color="IconColor.Danger" />
<Icon Name="IconName.ExclamationDiamondFill" Size="IconSize.x2" Color="IconColor.Warning" />
<Icon Name="IconName.InfoCircleFill" Size="IconSize.x2" Color="IconColor.Info" />
<Icon Name="IconName.CreditCard2FrontFill" Size="IconSize.x2" Color="IconColor.Light" />
<Icon Name="IconName.Apple" Size="IconSize.x2" Color="IconColor.Dark" />
<Icon Name="IconName.Asterisk" Size="IconSize.x2" Color="IconColor.Body" />
<Icon Name="IconName.VolumeMuteFill" Size="IconSize.x2" Color="IconColor.Muted" />
<Icon Name="IconName.BrowserSafari" Size="IconSize.x2" Color="IconColor.White" />

See icons with different size demo here.

Inline text with icon​

Blazor Bootstrap: Icon Component - Inline text with icon
Inline text <Icon Name="IconName.Alarm" />

See inline text with icon demo here.

Blazor Bootstrap: Icon Component - Link with icon
<a href="#" class="text-decoration-none">
    Example link text <Icon Name="IconName.Alarm" />
</a>

See link with icon demo here.

Blazor Bootstrap: Icon Component - Link with custom icon
<a href="#" class="text-decoration-none">
    Example link text <Icon CustomIconName="bi bi-bootstrap" />
</a>

See link with custom icon demo here.

Button with icon and text​

Blazor Bootstrap: Icon Component - Button with icon and text
<Button Color="ButtonColor.Primary"><Icon Name="IconName.Alarm" /> Button </Button>
<Button Color="ButtonColor.Success"><Icon Name="IconName.Alarm" /> Button </Button>
<Button Color="ButtonColor.Danger" Outline="true"><Icon Name="IconName.AlarmFill" /> Button </Button>

See button with icon and text demo here.

Button with icon only​

Blazor Bootstrap: Icon Component - Button with icon only
<Button Color="ButtonColor.Secondary"><Icon Name="IconName.Alarm" /></Button>

See button with icon only demo here.

Button with font awesome icon​

In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.

Blazor Bootstrap: Icon Component - Button with font awesome icon
<Button Color="ButtonColor.Secondary" TooltipTitle="Compare code">
    <Icon CustomIconName="fa-solid fa-code-compare"/>
</Button>
<Button Color="ButtonColor.Secondary" TooltipTitle="Create pull request">
    <Icon CustomIconName="fa-solid fa-code-pull-request" />
</Button>

Icon with tooltip​

Blazor Bootstrap: Icon Component - Icon with tooltip
<Tooltip Title="Info Tooltip" role="button">
    <Icon Name="IconName.InfoCircleFill"></Icon>
</Tooltip>

Bootstrap Icons​

Blazor Bootstrap: Icon Component - Bootstrap Icons

See all bootstrap icons demo here.

- + \ No newline at end of file diff --git a/data-visualization/bar-chart.html b/data-visualization/bar-chart.html index 11abe874a..9f2cd2d98 100644 --- a/data-visualization/bar-chart.html +++ b/data-visualization/bar-chart.html @@ -10,7 +10,7 @@ - + @@ -19,7 +19,7 @@ It is sometimes used to show trend data and to compare multiple data sets side by side.

Blazor Chart Component - Blazor Bar Chart

Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
HeightintGets or sets chart height.1.0.0
WidthintGets or sets chart width.1.0.0

Methods​

NameReturn typeDescriptionAdded Version
AddDataAsyncChartDataAdds data to bar chart.1.10.0
AddDatasetAsyncChartDataAdds dataset to bar chart.1.10.0
InitializeAsyncTaskInitialize Bar Chart.1.0.0
UpdateAsyncTaskUpdate Bar Chart.1.0.0

ChartData Members​

Property NameTypeDefaultRequiredDescriptionAdded Version
DatasetsList<IChartDataset>null✔️Gets or sets the Datasets.1.0.0
LabelsList<string>null✔️Gets or sets the Labels.1.0.0

BarChartDataset Members​

info

BarChartDataset implements IChartDataset.

Property NameTypeDefaultRequiredDescriptionAdded Version
BackgroundColorList<string>nullGet or sets the BackgroundColor.1.0.0
BarPercentagedouble0.8Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other.1.0.0
BorderColorList<string>nullGet or sets the BorderColor.1.0.0
BorderRadiusint0Border radius.1.0.0
BorderWidthList<double>nullGet or sets the BorderWidth.1.0.0
CategoryPercentagedouble0.8Percent (0-1) of the available width each category should be within the sample width.1.0.0
ClipstringnullHow to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}1.0.0
DatalabelsBarChartDatasetDataLabelsGet or sets the data labels
DataList<double>nullGet or sets the Data.1.0.0
HiddenboolfalseConfigures the visibility state of the dataset. Set it to true, to hide the dataset from the chart.1.0.0
HoverBackgroundColorList<string>null✔️Get or sets the HoverBackgroundColor.1.0.0
HoverBorderColorList<string>null✔️Get or sets the HoverBorderColor.1.0.0
HoverBorderWidthList<double>null✔️Get or sets the HoverBorderWidth.1.0.0
LabelstringnullThe label for the dataset which appears in the legend and tooltips.1.0.0
Typestringnull✔️Get or sets the chart type.1.0.0
XAxisIDstringnullThe ID of the x axis to plot this dataset on.1.0.0
YAxisIDstringnullThe ID of the y axis to plot this dataset on.1.0.0

BarChartDatasetDataLabels Members​

Property NameTypeDefaultRequiredDescriptionAdded Version
Alignstring?centerGets or sets the align.1.10.2
Anchorstring?centerGets or sets the anchor.1.10.2

BarChartOptions Members​

info

BarChartOptions implements ChartOptions.

Property NameTypeDefaultRequiredDescriptionAdded Version
IndexAxisstringxThe base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts.1.0.0
InteractionInteractionGets or sets the Interaction.1.0.0
LayoutChartLayoutGets or sets the ChartLayout.1.0.0
Localestring?Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on.1.10.0
PluginsBarChartPluginsGets or sets the Plugins.1.10.2
ResponsiveboolfalseGets or sets the Responsive.1.0.0
ScalesScalesGets or sets the Scales.1.0.0

Examples​

Prerequisites​

Refer to the getting started guide for setting up charts.

How it works​

In the following example, a categorical 12-color palette is used.

tip

For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.

Blazor Bootstrap: Bar Chart Component - How it works
<BarChart @ref="barChart" Width="800" Class="mb-4" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</Button>
@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount = 0;
    private int labelsCount = 0;
    private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is BarChartDataset barChartDataset
                && barChartDataset is not null
                && barChartDataset.Data is not null)
            {
                var count = barChartDataset.Data.Count;

                var newData = new List<double>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(200));
                }

                barChartDataset.Data = newData;
                newDatasets.Add(barChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null) return;

        if (datasetsCount >= 12)
            return;

        var chartDataset = GetRandomBarChartDataset();
        chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (chartData is null || chartData.Datasets is null)
            return;

        if (labelsCount >= 12)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is BarChartDataset barChartDataset)
                data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200)));
        }

        chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    }

    private async Task ShowHorizontalBarChartAsync()
    {
        barChartOptions.IndexAxis = "y";
        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    private async Task ShowVerticalBarChartAsync()
    {
        barChartOptions.IndexAxis = "x";
        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomBarChartDataset());
        }

        return datasets;
    }

    private BarChartDataset GetRandomBarChartDataset()
    {
        var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();

        datasetsCount += 1;

        return new BarChartDataset()
            {
                Label = $"Product {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = new List<string> { c.ToRgbString() },
                BorderColor = new List<string> { c.ToRgbString() },
                BorderWidth = new List<double> { 0 },
            };
    }

    private List<double> GetRandomData()
    {
        var data = new List<double>();
        for (var index = 0; index < labelsCount; index++)
        {
            data.Add(random.Next(200));
        }

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return months[labelsCount - 1];
    }

    #endregion Data Preparation
}

See the demo here.

Horizontal bar chart​

Blazor Bootstrap: Bar Chart Component - Horizontal bar chart
<BarChart @ref="barChart" Height="300" Class="mb-4" />
@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new BarChartDataset()
            {
                Data = new List<double> { 55000, 15000, 18000, 21000 },
                BackgroundColor = new List<string> { ColorBuilder.CategoricalTwelveColors[0] },
                BorderColor = new List<string> { ColorBuilder.CategoricalTwelveColors[0] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset1);

        chartData = new ChartData { 
            Labels = labels, 
            Datasets = datasets };

        barChartOptions = new BarChartOptions();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";

        barChartOptions.Scales.X.Title.Text = "Visitors";
        barChartOptions.Scales.X.Title.Display = true;

        barChartOptions.Scales.Y.Title.Text = "Browser";
        barChartOptions.Scales.Y.Title.Display = true;

        barChartOptions.Plugins.Legend.Display = false;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

See the demo here.

Stacked bar chart​

Blazor Bootstrap: Bar Chart Component - Stacked bar chart
<BarChart @ref="barChart" Height="300" Class="mb-4" />
@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.CategoricalTwelveColors;

        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new BarChartDataset()
            {
                Label = "Windows",
                Data = new List<double> { 28000, 8000, 2000, 17000 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset1);

        var dataset2 = new BarChartDataset()
            {
                Label = "macOS",
                Data = new List<double> { 8000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset2);

        var dataset3 = new BarChartDataset()
            {
                Label = "Other",
                Data = new List<double> { 28000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        barChartOptions = new();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";

        barChartOptions.Scales.X.Title.Text = "Visitors";
        barChartOptions.Scales.X.Title.Display = true;

        barChartOptions.Scales.Y.Title.Text = "Browser";
        barChartOptions.Scales.Y.Title.Display = true;

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

See the demo here.

Locale​

By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE).

Blazor Bootstrap: Bar Chart Component - Locale
<BarChart @ref="barChart" Height="300" Class="mb-4" />
@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.CategoricalTwelveColors;

        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new BarChartDataset()
            {
                Label = "Windows",
                Data = new List<double> { 28000, 8000, 2000, 17000 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset1);

        var dataset2 = new BarChartDataset()
            {
                Label = "macOS",
                Data = new List<double> { 8000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset2);

        var dataset3 = new BarChartDataset()
            {
                Label = "Other",
                Data = new List<double> { 28000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        barChartOptions = new();
        barChartOptions.Locale = "de-DE";
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";

        barChartOptions.Scales.X.Title.Text = "Visitors";
        barChartOptions.Scales.X.Title.Display = true;

        barChartOptions.Scales.Y.Title.Text = "Browser";
        barChartOptions.Scales.Y.Title.Display = true;

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

See the demo here.

Data labels​

Blazor Bootstrap: Bar Chart Component - Data labels
<BarChart @ref="barChart" Height="300" Class="mb-4" />
@code {
    private BarChart barChart = default!;
    private BarChartOptions barChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.CategoricalTwelveColors;

        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new BarChartDataset()
            {
                Label = "Windows",
                Data = new List<double> { 28000, 8000, 2000, 17000 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset1);

        var dataset2 = new BarChartDataset()
            {
                Label = "macOS",
                Data = new List<double> { 8000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset2);

        var dataset3 = new BarChartDataset()
            {
                Label = "Other",
                Data = new List<double> { 28000, 10000, 14000, 8000 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 0 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        barChartOptions = new();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
        barChartOptions.IndexAxis = "y";

        barChartOptions.Scales.X.Title.Text = "Visitors";
        barChartOptions.Scales.X.Title.Display = true;

        barChartOptions.Scales.Y.Title.Text = "Browser";
        barChartOptions.Scales.Y.Title.Display = true;

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // pass the plugin name to enable the data labels
            await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { "ChartDataLabels" });
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

See the demo here.

- + \ No newline at end of file diff --git a/data-visualization/doughnut-chart.html b/data-visualization/doughnut-chart.html index 20292c30f..2ba608968 100644 --- a/data-visualization/doughnut-chart.html +++ b/data-visualization/doughnut-chart.html @@ -10,7 +10,7 @@ - + @@ -19,7 +19,7 @@ It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.

Blazor Chart Component - Blazor Doughnut Chart

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
HeightintGets or sets chart height.1.0.0
WidthintGet or sets chart width.1.0.0

Methods​

NameReturn typeDescriptionAdded Version
AddDataAsyncChartDataAdds data to bar chart.1.10.0
AddDatasetAsyncChartDataAdds dataset to bar chart.1.10.0
InitializeAsyncTaskInitialize Bar Chart.1.0.0
UpdateAsyncTaskUpdate Bar Chart.1.0.0

ChartData Members​

Property NameTypeDefaultRequiredDescriptionAdded Version
DatasetsList<IChartDataset>null✔️Gets or sets the Datasets.1.0.0
LabelsList<string>null✔️Gets or sets the Labels.1.0.0

DoughnutChartDataset Members​

info

DoughnutChartDataset implements IChartDataset.

Property NameTypeDefaultRequiredDescriptionAdded Version
BackgroundColorList<string>nullGet or sets the BackgroundColor.1.0.0
BorderColorList<string>nullGet or sets the BorderColor.1.0.0
BorderWidthList<double>nullGet or sets the BorderWidth.1.0.0
ClipstringnullHow to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}1.0.0
DataList<double>nullGet or sets the Data.1.0.0
DatalabelsDoughnutChartDatasetDataLabelsGet or sets the data labels
HiddenboolfalseConfigures the visibility state of the dataset. Set it to true, to hide the dataset from the chart.1.0.0
HoverBackgroundColorList<string>null✔️Get or sets the HoverBackgroundColor.1.0.0
HoverBorderColorList<string>null✔️Get or sets the HoverBorderColor.1.0.0
HoverBorderWidthList<double>null✔️Get or sets the HoverBorderWidth.1.0.0
LabelstringnullThe label for the dataset which appears in the legend and tooltips.1.0.0
Typestringnull✔️Get or sets the chart type.1.0.0

DoughnutChartDatasetDataLabels Members​

Property NameTypeDefaultRequiredDescriptionAdded Version
Anchorstring?centerGets or sets the anchor.1.10.2
BorderWidthdouble?2Gets or sets the border width.1.10.2

DoughnutChartOptions Members​

info

DoughnutChartOptions implements ChartOptions.

Property NameTypeDefaultRequiredDescriptionAdded Version
Localestring?Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on.1.10.0
PluginsDoughnutChartPluginsGets or sets the Plugins.1.10.2
ResponsiveboolfalseGets or sets the Responsive.1.0.0

Examples​

Prerequisites​

Refer to the getting started guide for setting up charts.

How it works​

In the following example, a categorical 12-color palette is used.

tip

For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.

Blazor Bootstrap: Doughnut Chart Component - How it works
<DoughnutChart @ref="doughnutChart" Width="500" Class="mb-5" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>
@code {
    private DoughnutChart doughnutChart = default!;
    private DoughnutChartOptions doughnutChartOptions = default!;
    private ChartData chartData = default!;
    private string[]? backgroundColors;

    private int datasetsCount = 0;
    private int dataLabelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        backgroundColors = ColorBuilder.CategoricalTwelveColors;
        chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };

        doughnutChartOptions = new();
        doughnutChartOptions.Responsive = true;
        doughnutChartOptions.Plugins.Title.Text = "2022 - Sales";
        doughnutChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is DoughnutChartDataset doughnutChartDataset
                && doughnutChartDataset is not null
                && doughnutChartDataset.Data is not null)
            {
                var count = doughnutChartDataset.Data.Count;

                var newData = new List<double>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(0, 100));
                }

                doughnutChartDataset.Data = newData;
                newDatasets.Add(doughnutChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await doughnutChart.UpdateAsync(chartData, doughnutChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null) return;

        var chartDataset = GetRandomDoughnutChartDataset();
        chartData = await doughnutChart.AddDatasetAsync(chartData, chartDataset, doughnutChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (dataLabelsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is DoughnutChartDataset doughnutChartDataset)
            {
                data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));
            }
        }

        chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data);

        dataLabelsCount += 1;
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomDoughnutChartDataset());
        }

        return datasets;
    }

    private DoughnutChartDataset GetRandomDoughnutChartDataset()
    {
        datasetsCount += 1;
        return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
    }

    private List<double> GetRandomData()
    {
        var data = new List<double>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            data.Add(random.Next(0, 100));
        }

        return data;
    }

    private List<string> GetRandomBackgroundColors()
    {
        var colors = new List<string>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            colors.Add(backgroundColors![index]);
        }

        return colors;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
            dataLabelsCount += 1;
        }

        return labels;
    }

    private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";

    private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];

    #endregion  Data Preparation
}

See the demo here.

Locale​

By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE).

Blazor Bootstrap: Doughnut Chart Component - Locale
@using BlazorBootstrap.Extensions
@using Color = System.Drawing.Color

<LineChart @ref="lineChart" Width="800" Class="mb-4" />
@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.CategoricalTwelveColors;

        var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new LineChartDataset()
            {
                Label = "Windows",
                Data = new List<double> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[0] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset1);

        var dataset2 = new LineChartDataset()
            {
                Label = "macOS",
                Data = new List<double> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[1] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset2);

        var dataset3 = new LineChartDataset()
            {
                Label = "Other",
                Data = new List<double> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[2] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        lineChartOptions = new();
        lineChartOptions.Locale = "de-DE";
        lineChartOptions.Responsive = true;
        lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };

        lineChartOptions.Scales.X.Title.Text = "2019";
        lineChartOptions.Scales.X.Title.Display = true;

        lineChartOptions.Scales.Y.Title.Text = "Visitors";
        lineChartOptions.Scales.Y.Title.Display = true;

        lineChartOptions.Plugins.Title.Text = "Operating system";
        lineChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

See the demo here.

Data labels​

Blazor Bootstrap: Doughnut Chart Component - Data labels
<DoughnutChart @ref="doughnutChart" Width="500" Class="mb-5" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>

@code {
    private DoughnutChart doughnutChart = default!;
    private DoughnutChartOptions doughnutChartOptions = default!;
    private ChartData chartData = default!;
    private string[]? backgroundColors;

    private int datasetsCount = 0;
    private int dataLabelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        backgroundColors = ColorBuilder.CategoricalTwelveColors;
        chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) };

        doughnutChartOptions = new();
        doughnutChartOptions.Responsive = true;
        doughnutChartOptions.Plugins.Title.Text = "2022 - Sales";
        doughnutChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // pass the plugin name to enable the data labels
            await doughnutChart.InitializeAsync(chartData: chartData, chartOptions: doughnutChartOptions, plugins: new string[] { "ChartDataLabels" });
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        var datasetIndex = 0;
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is DoughnutChartDataset doughnutChartDataset
                && doughnutChartDataset is not null
                && doughnutChartDataset.Data is not null)
            {
                var count = doughnutChartDataset.Data.Count;

                var newData = new List<double>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(0, 100));
                }

                doughnutChartDataset.Data = newData;
                newDatasets.Add(doughnutChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await doughnutChart.UpdateAsync(chartData: chartData, chartOptions: doughnutChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (dataLabelsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is DoughnutChartDataset doughnutChartDataset)
            {
                data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));
            }
        }

        chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data);

        dataLabelsCount += 1;
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            var dataset = GetRandomDoughnutChartDataset();

            if (index == 0)
                dataset.Datalabels.Anchor = "end";
            else if (index == numberOfDatasets - 1)
                dataset.Datalabels.Anchor = "start";
            else
                dataset.Datalabels.Anchor = "center";

            datasets.Add(dataset);
        }

        return datasets;
    }

    private DoughnutChartDataset GetRandomDoughnutChartDataset()
    {
        datasetsCount += 1;
        return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
    }

    private List<double> GetRandomData()
    {
        var data = new List<double>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            data.Add(random.Next(0, 100));
        }

        return data;
    }

    private List<string> GetRandomBackgroundColors()
    {
        var colors = new List<string>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            colors.Add(backgroundColors![index]);
        }

        return colors;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
            dataLabelsCount += 1;
        }

        return labels;
    }

    private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";

    private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];

    #endregion  Data Preparation
}

See the demo here.

- + \ No newline at end of file diff --git a/data-visualization/line-chart.html b/data-visualization/line-chart.html index 1c89a0aa2..1b4788721 100644 --- a/data-visualization/line-chart.html +++ b/data-visualization/line-chart.html @@ -10,14 +10,14 @@ - +

Blazor Line Chart

A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.

Blazor Chart Component - Blazor Line Chart

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
HeightintGets or sets chart height.1.0.0
WidthintGet or sets chart width.1.0.0

Methods​

NameReturn typeDescriptionAdded Version
AddDataAsyncChartDataAdds data to bar chart.1.10.0
AddDatasetAsyncChartDataAdds dataset to bar chart.1.10.0
InitializeAsyncTaskInitialize Bar Chart.1.0.0
UpdateAsyncTaskUpdate Bar Chart.1.0.0

ChartData Members​

Property NameTypeDefaultRequiredDescriptionAdded Version
LabelsList<string>null✔️Gets or sets the Labels.1.0.0
DatasetsList<IChartDataset>null✔️Gets or sets the Datasets.1.0.0

LineChartDataset Members​

info

LineChartDataset implements IChartDataset.

Property NameTypeDefaultRequiredDescriptionAdded Version
BackgroundColorList<string>nullGet or sets the BackgroundColor.1.0.0
BorderColorList<string>nullGet or sets the BorderColor.1.0.0
BorderDashList<int>nullLine dash.1.0.0
BorderDashOffsetdouble0.0Line dash offset.1.0.0
BorderWidthList<double>nullGet or sets the BorderWidth.1.0.0
ClipstringnullHow to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}1.0.0
DataList<double>nullGet or sets the Data.1.0.0
DatalabelsLineChartDatasetDataLabelsGet or sets the data labels
FillboolfalseBoth line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end.1.0.0
HiddenboolfalseConfigures the visibility state of the dataset. Set it to true, to hide the dataset from the chart.1.0.0
HoverBackgroundColorList<string>null✔️Get or sets the HoverBackgroundColor.1.0.0
HoverBorderColorList<string>null✔️Get or sets the HoverBorderColor.1.0.0
HoverBorderDashList<int>nullHover line dash.1.0.0
HoverBorderWidthList<double>null✔️Get or sets the HoverBorderWidth.1.0.0
LabelstringnullThe label for the dataset which appears in the legend and tooltips.1.0.0
PointBackgroundColorList<string>new List<string> { "rgba(0, 0, 0, 0.1)" }The fill color for points.1.0.0
PointBorderColorList<string>new List<string> { "rgba(0, 0, 0, 0.1)" }The border color for points.1.0.0
PointBorderWidthList<double>new List<double> { 1 }The width of the point border in pixels.1.0.0
PointHitRadiusList<double>new List<double> { 1 }The pixel size of the non-displayed point that reacts to mouse events.1.0.0
PointHoverBackgroundColorList<string>nullPoint background color when hovered.1.0.0
PointHoverBorderColorList<string>nullPoint border color when hovered.1.0.0
PointHoverBorderWidthList<double>new List<double> { 1 }Border width of point when hovered.1.0.0
PointHoverRadiusnew List<int>new List<int> { 1 }The radius of the point when hovered.1.0.0
PointRadiusList<int>new List<int> { 1 }The radius of the point shape. If set to 0, the point is not rendered.1.0.0
PointRotationList<int>new List<int> { 0 }The rotation of the point in degrees.1.0.0
PointStyleList<string>new List<string> { "circle" }Style of the point. Use 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style the point.1.0.0
ShowLinebooltrueIf false, the lines between points are not drawn.1.0.0
SpanGapsboolfalseIf true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.1.0.0
Steppedboolfalsetrue to show the line as a stepped line (tension will be ignored).1.0.0
Tensiondouble0.2Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.1.0.0
Typestringnull✔️Get or sets the chart type.1.0.0
XAxisIDstringnullThe ID of the x axis to plot this dataset on.1.0.0
YAxisIDstringnullThe ID of the y axis to plot this dataset on.1.0.0

LineChartDatasetDataLabels Members​

Property NameTypeDefaultRequiredDescriptionAdded Version
Alignstring?startGets or sets the align.1.10.2
Anchorstring?startGets or sets the anchor.1.10.2

LineChartOptions Members​

info

LineChartOptions implements ChartOptions.

Property NameTypeDefaultRequiredDescriptionAdded Version
IndexAxisstringxThe base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts.1.0.0
InteractionInteractionGets or sets the Interaction.1.0.0
LayoutChartLayoutGets or sets the ChartLayout.1.0.0
Localestring?Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on.1.10.0
PluginsLineChartPluginsGets or sets the Plugins.1.10.2
ResponsiveboolfalseGets or sets the Responsive.1.0.0
ScalesScalesGets or sets the Scales.1.0.0

Examples​

Prerequisites​

Refer to the getting started guide for setting up charts.

How it works​

In the following example, a categorical 12-color palette is used.

tip

For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.

Blazor Bootstrap: Line Chart Component - How it works
@using BlazorBootstrap.Extensions
@using Color = System.Drawing.Color

<LineChart @ref="lineChart" Width="800" Class="mb-4" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount = 0;
    private int labelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is LineChartDataset lineChartDataset
                && lineChartDataset is not null
                && lineChartDataset.Data is not null)
            {
                var count = lineChartDataset.Data.Count;

                var newData = new List<double>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(200));
                }

                lineChartDataset.Data = newData;
                newDatasets.Add(lineChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null) return;

        var chartDataset = GetRandomLineChartDataset();
        chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is LineChartDataset lineChartDataset)
                data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200)));
        }

        chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    }

    private async Task ShowHorizontalLineChartAsync()
    {
        lineChartOptions.IndexAxis = "y";
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    private async Task ShowVerticalLineChartAsync()
    {
        lineChartOptions.IndexAxis = "x";
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomLineChartDataset());
        }

        return datasets;
    }

    private LineChartDataset GetRandomLineChartDataset()
    {
        var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();

        datasetsCount += 1;

        return new LineChartDataset()
            {
                Label = $"Team {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = new List<string> { c.ToRgbString() },
                BorderColor = new List<string> { c.ToRgbString() },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { c.ToRgbString() },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
    }

    private List<double> GetRandomData()
    {
        var data = new List<double>();
        for (var index = 0; index < labelsCount; index++)
        {
            data.Add(random.Next(200));
        }

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return $"Day {labelsCount}";
    }

    #endregion Data Preparation
}

Another example​

Blazor Bootstrap: Line Chart Component - Another example
@using BlazorBootstrap.Extensions
@using Color = System.Drawing.Color

<LineChart @ref="lineChart" Width="800" Class="mb-4" />
@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.CategoricalTwelveColors;

        var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new LineChartDataset()
            {
                Label = "Windows",
                Data = new List<double> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[0] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset1);

        var dataset2 = new LineChartDataset()
            {
                Label = "macOS",
                Data = new List<double> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[1] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset2);

        var dataset3 = new LineChartDataset()
            {
                Label = "Other",
                Data = new List<double> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[2] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 },
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        lineChartOptions = new();
        lineChartOptions.Responsive = true;
        lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };

        lineChartOptions.Scales.X.Title.Text = "2019";
        lineChartOptions.Scales.X.Title.Display = true;

        lineChartOptions.Scales.Y.Title.Text = "Visitors";
        lineChartOptions.Scales.Y.Title.Display = true;

        lineChartOptions.Plugins.Title.Text = "Operating system";
        lineChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

See the demo here.

Data labels​

Blazor Bootstrap: Line Chart Component - Data labels
<LineChart @ref="lineChart" Width="800" Class="mb-4" />
@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.CategoricalTwelveColors;

        var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new LineChartDataset
            {
                Label = "Windows",
                Data = new List<double> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[0] },
                PointRadius = new List<int> { 3 }, // show points
                PointHoverRadius = new List<int> { 4 },

                // datalabels
                Datalabels = new() { Align = "end", Anchor = "end" }
            };
        datasets.Add(dataset1);

        var dataset2 = new LineChartDataset
            {
                Label = "macOS",
                Data = new List<double> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
                BackgroundColor = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[1] },
                PointRadius = new List<int> { 3 }, // show points
                PointHoverRadius = new List<int> { 4 },

                // datalabels
                Datalabels = new() { Align = "end", Anchor = "end" }
            };
        datasets.Add(dataset2);

        var dataset3 = new LineChartDataset
            {
                Label = "Other",
                Data = new List<double> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
                BackgroundColor = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[2] },
                PointRadius = new List<int> { 3 }, // show points
                PointHoverRadius = new List<int> { 4 },

                // datalabels
                Datalabels = new() { Align = "start", Anchor = "start" }
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        lineChartOptions = new();
        lineChartOptions.Responsive = true;
        lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };

        lineChartOptions.Scales.X.Title.Text = "2019";
        lineChartOptions.Scales.X.Title.Display = true;

        lineChartOptions.Scales.Y.Title.Text = "Visitors";
        lineChartOptions.Scales.Y.Title.Display = true;

        lineChartOptions.Plugins.Title.Text = "Operating system";
        lineChartOptions.Plugins.Title.Display = true;

        // datalabels
        lineChartOptions.Plugins.Datalabels.Color = "white";
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // pass the plugin name to enable the data labels
            await lineChart.InitializeAsync(chartData: chartData, chartOptions: lineChartOptions, plugins: new string[] { "ChartDataLabels" });
        }
        await base.OnAfterRenderAsync(firstRender);
    }

}

See the demo here.

- + \ No newline at end of file diff --git a/data-visualization/pie-chart.html b/data-visualization/pie-chart.html index fe7405e9a..31a4e8e74 100644 --- a/data-visualization/pie-chart.html +++ b/data-visualization/pie-chart.html @@ -10,14 +10,14 @@ - +

Blazor Pie Chart

A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.

Blazor Chart Component - Blazor Pie Chart

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
HeightintGets or sets chart height.1.0.0
WidthintGet or sets chart width.1.0.0

Methods​

NameReturn typeDescriptionAdded Version
AddDataAsyncChartDataAdds data to bar chart.1.10.0
AddDatasetAsyncChartDataAdds dataset to bar chart.1.10.0
InitializeAsyncTaskInitialize Bar Chart.1.0.0
UpdateAsyncTaskUpdate Bar Chart.1.0.0

ChartData Members​

Property NameTypeDefaultRequiredDescriptionAdded Version
LabelsList<string>null✔️Gets or sets the Labels.1.0.0
DatasetsList<IChartDataset>null✔️Gets or sets the Datasets.1.0.0

PieChartDataset Members​

info

PieChartDataset implements IChartDataset.

Property NameTypeDefaultRequiredDescriptionAdded Version
BackgroundColorList<string>nullGet or sets the BackgroundColor.1.0.0
BorderColorList<string>nullGet or sets the BorderColor.1.0.0
BorderWidthList<double>nullGet or sets the BorderWidth.1.0.0
ClipstringnullHow to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}1.0.0
DataList<double>nullGet or sets the Data.1.0.0
DatalabelsPieChartDatasetDataLabelsGet or sets the data labels
HiddenboolfalseConfigures the visibility state of the dataset. Set it to true, to hide the dataset from the chart.1.0.0
HoverBackgroundColorList<string>null✔️Get or sets the HoverBackgroundColor.1.0.0
HoverBorderColorList<string>null✔️Get or sets the HoverBorderColor.1.0.0
HoverBorderWidthList<double>null✔️Get or sets the HoverBorderWidth.1.0.0
Typestringnull✔️Get or sets the chart type.1.0.0

PieChartDatasetDataLabels Members​

Property NameTypeDefaultRequiredDescriptionAdded Version
Anchorstring?centerGets or sets the anchor.1.10.2
BorderWidthdouble?2Gets or sets the border width.1.10.2

PieChartOptions Members​

info

PieChartOptions implements ChartOptions.

Property NameTypeDefaultRequiredDescriptionAdded Version
Localestring?Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on.1.10.0
PluginsPieChartPluginsGets or sets the Plugins.1.10.2
ResponsiveboolfalseGets or sets the Responsive.1.0.0

Examples​

Prerequisites​

Refer to the getting started guide for setting up charts.

How it works​

In the following example, a categorical 12-color palette is used.

tip

For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.

Blazor Bootstrap: Pie Chart Component - How it works
<PieChart @ref="pieChart" Width="500" Class="mb-5" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>
@code {
    private PieChart pieChart = default!;
    private PieChartOptions pieChartOptions = default!;
    private ChartData chartData = default!;
    private string[]? backgroundColors;

    private int datasetsCount = 0;
    private int dataLabelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        backgroundColors = ColorBuilder.CategoricalTwelveColors;
        chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };

        pieChartOptions = new();
        pieChartOptions.Responsive = true;
        pieChartOptions.Plugins.Title.Text = "2022 - Sales";
        pieChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await pieChart.InitializeAsync(chartData, pieChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is PieChartDataset pieChartDataset
                && pieChartDataset is not null
                && pieChartDataset.Data is not null)
            {
                var count = pieChartDataset.Data.Count;

                var newData = new List<double>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(0, 100));
                }

                pieChartDataset.Data = newData;
                newDatasets.Add(pieChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await pieChart.UpdateAsync(chartData, pieChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null) return;

        var chartDataset = GetRandomPieChartDataset();
        chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (dataLabelsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is PieChartDataset pieChartDataset)
                data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));
        }

        chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);

        dataLabelsCount += 1;
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomPieChartDataset());
        }

        return datasets;
    }

    private PieChartDataset GetRandomPieChartDataset()
    {
        datasetsCount += 1;
        return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
    }

    private List<double> GetRandomData()
    {
        var data = new List<double>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            data.Add(random.Next(0, 100));
        }

        return data;
    }

    private List<string> GetRandomBackgroundColors()
    {
        var colors = new List<string>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            colors.Add(backgroundColors![index]);
        }

        return colors;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
            dataLabelsCount += 1;
        }

        return labels;
    }

    private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";

    private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];

    #endregion  Data Preparation
}

See the demo here.

Data labels​

Blazor Bootstrap: Pie Chart Component - Data labels
<PieChart @ref="pieChart" Width="500" Class="mb-5" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>
@code {
    private PieChart pieChart = default!;
    private PieChartOptions pieChartOptions = default!;
    private ChartData chartData = default!;
    private string[]? backgroundColors;

    private int datasetsCount = 0;
    private int dataLabelsCount = 0;

    private Random random = new();

    protected override void OnInitialized()
    {
        backgroundColors = ColorBuilder.CategoricalTwelveColors;
        chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) };

        pieChartOptions = new();
        pieChartOptions.Responsive = true;
        pieChartOptions.Plugins.Title.Text = "2022 - Sales";
        pieChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // pass the plugin name to enable the data labels
            await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { "ChartDataLabels" });
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is PieChartDataset pieChartDataset
                && pieChartDataset is not null
                && pieChartDataset.Data is not null)
            {
                var count = pieChartDataset.Data.Count;

                var newData = new List<double>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(0, 100));
                }

                pieChartDataset.Data = newData;
                newDatasets.Add(pieChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await pieChart.UpdateAsync(chartData, pieChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (dataLabelsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is PieChartDataset pieChartDataset)
                data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount]));
        }

        chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data);

        dataLabelsCount += 1;
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            var dataset = GetRandomPieChartDataset();

            if (index == 0)
                dataset.Datalabels.Anchor = "end";
            else if (index == numberOfDatasets - 1)
                dataset.Datalabels.Anchor = "end";
            else
                dataset.Datalabels.Anchor = "center";

            datasets.Add(dataset);
        }

        return datasets;
    }

    private PieChartDataset GetRandomPieChartDataset()
    {
        datasetsCount += 1;
        return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
    }

    private List<double> GetRandomData()
    {
        var data = new List<double>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            data.Add(random.Next(0, 100));
        }

        return data;
    }

    private List<string> GetRandomBackgroundColors()
    {
        var colors = new List<string>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            colors.Add(backgroundColors![index]);
        }

        return colors;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
            dataLabelsCount += 1;
        }

        return labels;
    }

    private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";

    private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];

    #endregion  Data Preparation
}

See the demo here.

- + \ No newline at end of file diff --git a/forms/autocomplete.html b/forms/autocomplete.html index b8aa3c9b9..c0d618191 100644 --- a/forms/autocomplete.html +++ b/forms/autocomplete.html @@ -10,13 +10,13 @@ - +

Blazor Auto Complete

Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
DataProviderdelegatenull✔️DataProvider is for items to render. The provider should always return an instance of AutoCompleteDataProviderResult, and null is not allowed.0.4.0
DisabledboolfalseIs AutoComplete disabled.0.4.0
EmptyTextstringNo records found.✔️Gets or sets the empty text.1.10.2
LoadingTextstringLoading...✔️Gets or sets the loading text.1.10.2
PlaceholderstringnullAutoComplete placeholder.0.4.0
PropertyNamestringnull✔️AutoComplete data text property name.0.4.0
SizeenumAutoCompleteSize.DefaultUse AutoCompleteSize.Default or AutoCompleteSize.Large or AutoCompleteSize.Small0.4.0
StringComparisonenumStringComparison.OrdinalIgnoreCaseSpecifies the culture, case, and sort rules to be used. Use StringComparison.CurrentCulture or StringComparison.CurrentCultureIgnoreCase or StringComparison.InvariantCulture or StringComparison.InvariantCultureIgnoreCase or StringComparison.Ordinal or StringComparison.OrdinalIgnoreCase.0.4.1
StringFilterOperatorenumStringFilterOperator.ContainsUse StringFilterOperator.Equals or StringFilterOperator.Contains or StringFilterOperator.StartsWith or StringFilterOperator.EndsWith0.4.1
Valuestringnull✔️AutoComplete value.0.4.0
ValueExpressionexpressionnullAutoComplete value expression.0.4.0

Methods​

NameReturnsDescriptionAdded Version
Disable()voidDisables autocomplete.0.4.0
Enable()voidEnables autocomplete.0.4.0
RefreshDataAsync()TaskRefresh the autocomplete data.0.4.0
ResetAsync()TaskResets the autocomplete selection.0.4.0

Events​

NameDescriptionAdded Version
OnChangedThis event fires immediately when the autocomplete selection changes by the user.0.4.0
ValueChangedThis event fires on every user keystroke that changes the textbox value.0.4.0

Keyboard Navigation​

Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions.

KeyDescriptionAdded Version
EscCloses the popup list when it is in an open state.1.3.1
Up arrowFocuses on the previous item in the list.1.3.1
Down arrowFocuses on the next item in the list.1.3.1
HomeFocuses on the first item in the list.1.3.1
EndFocuses on the last item in the list.1.3.1
EnterSelects the currently focused item.1.3.1

Examples​

Client side data​

Blazor Bootstrap AutoComplete Component - Client side data
<div class="row">
    <div class="col-md-5 col-sm-12">
        <AutoComplete @bind-Value="customerName"
                      TItem="Customer"
                      DataProvider="CustomersDataProvider"
                      PropertyName="CustomerName"
                      Placeholder="Search a customer..."
                      OnChanged="(Customer customer) => OnAutoCompleteChanged(customer)" />
    </div>
</div>
@code {
    private string customerName;

    public IEnumerable<Customer> customers;

    private async Task<AutoCompleteDataProviderResult<Customer>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer> request)
    {
        if (customers is null) // pull customers only one time for client-side autocomplete
            customers = GetCustomers(); // call a service or an API to pull the customers

        return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));
    }

    private IEnumerable<Customer> GetCustomers()
    {
        return new List<Customer> {
            new(1, "Pich S"),
            new(2, "sfh Sobi"),
            new(3, "Jojo chan"),
            new(4, "Jee ja"),
            new(5, "Rose Canon"),
            new(6, "Manju A"),
            new(7, "Bandita PA"),
            new(8, "Sagar Adil"),
            new(9, "Isha Wang"),
            new(10, "Daina JJ"),
            new(11, "Komala Mug"),
            new(12, "Dikshita BD"),
            new(13, "Neha Gosar"),
            new(14, "Preeti S"),
            new(15, "Sagar Seth"),
            new(16, "Vinayak MM"),
            new(17, "Vijaya Lakhsmi"),
            new(18, "Jahan K"),
            new(19, "Joy B"),
            new(20, "Zaraiah C"),
            new(21, "Laura L"),
            new(22, "Punith ES")
        };
    }

    private void OnAutoCompleteChanged(Customer customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }
}
public record Customer(int CustomerId, string CustomerName);

See demo here

Client side data with StringComparision​

In the below example, StringComparision.Ordinal is used to make the filter case-sensitive.

info

By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.

Blazor Bootstrap AutoComplete Component - Client side data with StringComparision
<div class="row">
    <div class="col-md-5 col-sm-12">
        <AutoComplete @bind-Value="customerName"
                      TItem="Customer"
                      DataProvider="CustomersDataProvider"
                      PropertyName="CustomerName"
                      Placeholder="Search a customer..."
                      StringComparison="StringComparison.Ordinal"
                      OnChanged="(Customer customer) => OnAutoCompleteChanged(customer)" />
    </div>
</div>
@code {
    private string customerName;

    public IEnumerable<Customer> customers;

    private async Task<AutoCompleteDataProviderResult<Customer>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer> request)
    {
        if (customers is null) // pull customers only one time for client-side autocomplete
            customers = GetCustomers(); // call a service or an API to pull the customers

        return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));
    }

    private IEnumerable<Customer> GetCustomers()
    {
        return new List<Customer> {
            new(1, "Pich S"),
            new(2, "sfh Sobi"),
            new(3, "Jojo chan"),
            new(4, "Jee ja"),
            new(5, "Rose Canon"),
            new(6, "Manju A"),
            new(7, "Bandita PA"),
            new(8, "Sagar Adil"),
            new(9, "Isha Wang"),
            new(10, "Daina JJ"),
            new(11, "Komala Mug"),
            new(12, "Dikshita BD"),
            new(13, "Neha Gosar"),
            new(14, "Preeti S"),
            new(15, "Sagar Seth"),
            new(16, "Vinayak MM"),
            new(17, "Vijaya Lakhsmi"),
            new(18, "Jahan K"),
            new(19, "Joy B"),
            new(20, "Zaraiah C"),
            new(21, "Laura L"),
            new(22, "Punith ES")
        };
    }

    private void OnAutoCompleteChanged(Customer customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }
}
public record Customer(int CustomerId, string CustomerName);

See demo here

Server side data​

Blazor Bootstrap AutoComplete Component - Server side data
<div class="row">
    <div class="col-md-5 col-sm-12">
        <AutoComplete @bind-Value="customerName"
                      TItem="Customer"
                      DataProvider="CustomersDataProvider"
                      PropertyName="CustomerName"
                      Placeholder="Search a customer..."
                      OnChanged="(Customer customer) => OnAutoCompleteChanged(customer)" />
    </div>
</div>
@code {
    private string customerName;

    [Inject] ICustomerService _customerService { get; set; }

    private async Task<AutoCompleteDataProviderResult<Customer>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer> request)
    {
        var customers = await _customerService.GetCustomers(request.Filter, request.CancellationToken); // API call
        return await Task.FromResult(new AutoCompleteDataProviderResult<Customer> { Data = customers, TotalCount = customers.Count() });
    }

    private void OnAutoCompleteChanged(Customer customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }
}

See demo here

Set default value​

Blazor Bootstrap AutoComplete Component - Set default value
<div class="row">
    <div class="col-md-5 col-sm-12">
        <AutoComplete @bind-Value="customerName"
                      TItem="Customer"
                      DataProvider="CustomersDataProvider"
                      PropertyName="CustomerName"
                      Placeholder="Search a customer..."
                      OnChanged="(Customer customer) => OnAutoCompleteChanged(customer)" />
    </div>
</div>
@code {
    private string customerName;

    public IEnumerable<Customer> customers;

    protected override void OnInitialized()
    {
        customerName = "Pich S";
    }

    private async Task<AutoCompleteDataProviderResult<Customer>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer> request)
    {
        if (customers is null) // pull customers only one time for client-side autocomplete
            customers = GetCustomers(); // call a service or an API to pull the customers

        return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName)));
    }

    private IEnumerable<Customer> GetCustomers()
    {
        return new List<Customer> {
            new(1, "Pich S"),
            new(2, "sfh Sobi"),
            new(3, "Jojo chan"),
            new(4, "Jee ja"),
            new(5, "Rose Canon"),
            new(6, "Manju A"),
            new(7, "Bandita PA"),
            new(8, "Sagar Adil"),
            new(9, "Isha Wang"),
            new(10, "Daina JJ"),
            new(11, "Komala Mug"),
            new(12, "Dikshita BD"),
            new(13, "Neha Gosar"),
            new(14, "Preeti S"),
            new(15, "Sagar Seth"),
            new(16, "Vinayak MM"),
            new(17, "Vijaya Lakhsmi"),
            new(18, "Jahan K"),
            new(19, "Joy B"),
            new(20, "Zaraiah C"),
            new(21, "Laura L"),
            new(22, "Punith ES")
        };
    }

    private void OnAutoCompleteChanged(Customer customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }
}

See demo here

Validations​

Blazor Bootstrap AutoComplete Component - Validations - Data emptyBlazor Bootstrap AutoComplete Component - Validations - Item selected
@using System.ComponentModel.DataAnnotations
<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>
<EditForm EditContext="@_editContext" OnValidSubmit="HandleOnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row mb-2">
        <label for="supplier" class="col-md-2 col-form-label">Customer:</label>
        <div class="col-md-10">
            <AutoComplete @bind-Value="customerAddress.CustomerName"
                          TItem="Customer"
                          DataProvider="CustomersDataProvider"
                          PropertyName="CustomerName"
                          Placeholder="Search a customer..."
                          OnChanged="(Customer customer) => OnAutoCompleteChanged(customer)" />
            <ValidationMessage For="@(() => customerAddress.CustomerName)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label for="name" class="col-md-2 col-form-label">Address:</label>
        <div class="col-md-10">
            <InputText id="name" class="form-control" @bind-Value="customerAddress.Address" />
            <ValidationMessage For="@(() => customerAddress.Address)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <button type="submit" class="btn btn-success float-right">Submit</button>
        </div>
    </div>
</EditForm>
@code {
    private CustomerAddress customerAddress = new();
    private EditContext _editContext;

    [Inject] ICustomerService _customerService { get; set; }

    protected override void OnInitialized()
    {
        _editContext = new EditContext(customerAddress);
        base.OnInitialized();
    }

    public void HandleOnValidSubmit()
    {
        Console.WriteLine($"Customer name is {customerAddress.CustomerName} and address is {customerAddress.Address}");
    }

    private async Task<AutoCompleteDataProviderResult<Customer>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer> request)
    {
        var customers = await _customerService.GetCustomers(request.Filter); // API call
        return await Task.FromResult(new AutoCompleteDataProviderResult<Customer> { Data = customers, TotalCount = customers.Count() });
    }

    private void OnAutoCompleteChanged(Customer customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
        Console.WriteLine($"Data null: {customer is null}.");
    }

    public class CustomerAddress
    {
        [Required]
        public string CustomerName { get; set; }

        [Required]
        public string Address { get; set; }
    }
}

See demo here

Disable​

Use the Disabled parameter to disable the AutoComplete.

<div class="row mb-3">
    <div class="col-md-5 col-sm-12">
        <AutoComplete @bind-Value="customerName"
                      TItem="Customer2"
                      DataProvider="CustomersDataProvider"
                      PropertyName="CustomerName"
                      Placeholder="Search a customer..."
                      Disabled="@disabled"
                      OnChanged="(Customer2 customer) => OnAutoCompleteChanged(customer)" />
    </div>
</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
    private string customerName = default!;
    private bool disabled = true;

    [Inject] ICustomerService _customerService { get; set; } = default!;

    private async Task<AutoCompleteDataProviderResult<Customer2>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer2> request)
    {
        var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call
        return await Task.FromResult(new AutoCompleteDataProviderResult<Customer2> { Data = customers, TotalCount = customers.Count() });
    }

    private void OnAutoCompleteChanged(Customer2 customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}

Also, use Enable() and Disable() methods to enable and disable the AutoComplete.

NOTE

Do not use both the Disabled parameter and Enable() & Disable() methods.

<div class="row mb-3">
    <div class="col-md-5 col-sm-12">
        <AutoComplete @ref="autoComplete1" 
                      @bind-Value="customerName"
                      TItem="Customer2"
                      DataProvider="CustomersDataProvider"
                      PropertyName="CustomerName"
                      Placeholder="Search a customer..."
                      OnChanged="(Customer2 customer) => OnAutoCompleteChanged(customer)" />
    </div>
</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
    private AutoComplete<Customer2> autoComplete1 = default!;
    private string customerName = default!;

    [Inject] ICustomerService _customerService { get; set; } = default!;

    private async Task<AutoCompleteDataProviderResult<Customer2>> CustomersDataProvider(AutoCompleteDataProviderRequest<Customer2> request)
    {
        var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call
        return await Task.FromResult(new AutoCompleteDataProviderResult<Customer2> { Data = customers, TotalCount = customers.Count() });
    }

    private void OnAutoCompleteChanged(Customer2 customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }

    private void Disable() => autoComplete1.Disable();

    private void Enable() => autoComplete1.Enable();
}

See demo here

- + \ No newline at end of file diff --git a/forms/currency-input.html b/forms/currency-input.html index 0075c3c39..d34b5878d 100644 --- a/forms/currency-input.html +++ b/forms/currency-input.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@

Blazor Currency Input

Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol.

Blazor Bootstrap: Currency Input Component

Parameters​

NameTypeDefaultRequiredDescription
AllowNegativeNumbersboolfalseAllows negative numbers. By default, negative numbers are not allowed.
AutoCompleteboolfalseIndicates whether the NumberInput can complete the values automatically by the browser.
CurrencySignCurrencySignCurrencySign.Standard
DisabledboolfalseGets or sets the disabled.
EnableMinMaxboolfalseDetermines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input.
HideCurrencySymbolboolfalseDetermines whether to hide the currency symbol are not.
Localestringen-US✔️Gets or sets the locale.
MaxTValueGets or sets the max. Max ignored if EnableMinMax="false".
MaximumFractionDigitsbyte?nullThe maximum number of fraction digits to use.
MinTValueGets or sets the min. Min ignored if EnableMinMax="false".
MinimumFractionDigitsbyte?nullThe minimum number of fraction digits to use.
MinimumIntegerDigitsbyte1The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted.
Placeholderstring?nullGets or sets the placeholder.
TextAlignmentAlignmentAlignment.NoneGets or sets the text alignment.
ValueTValueGets or sets the value.

Methods​

NameDescription
Disable()Disables currency input.
Enable()Enables currency input.

Events​

NameDescription
ValueChangedThis event fired on every user keystroke that changes the CurrencyInput value.

Examples​

Basic usage​

By default, e + - are blocked. For all integral numeric types, dot . is blocked.

Blazor Bootstrap: Currency Input Component - Basic usage
<div class="mb-3">
    <CurrencyInput TValue="int" @bind-Value="@amount1" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount1</div>
@code {
    private int amount1 = 12345678;
}

See demo here

Show currency symbols for the different locales​

Blazor Bootstrap: Currency Input Component - Show currency symbols for the different locales
<div class="mb-3">
    <label class="form-label">Locale: <b>en-IN</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount1" Locale="en-IN" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount1</div>

<div class="mb-3">
    <label class="form-label">Locale: <b>en-US</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount2" Locale="en-US" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount2</div>

<div class="mb-3">
    <label class="form-label">Locale: <b>fr-FR</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount3" Locale="fr-FR" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount3</div>

<div class="mb-3">
    <label class="form-label">Locale: <b>es-ES</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount4" Locale="es-ES" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount4</div>

<div class="mb-3">
    <label class="form-label">Locale: <b>de-DE</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount5" Locale="de-DE" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount5</div>

<div class="mb-3">
    <label class="form-label">Locale: <b>fr-CA</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount6" Locale="fr-CA" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount6</div>

<div class="mb-3">
    <label class="form-label">Locale: <b>en-PH</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount7" Locale="en-PH" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount7</div>

<div class="mb-3">
    <label class="form-label">Locale: <b>en-SE</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount8" Locale="en-SE" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount8</div>

<div class="mb-3">
    <label class="form-label">Locale: <b>zh-CN</b></label>
    <CurrencyInput TValue="int" @bind-Value="@amount9" Locale="zh-CN" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount9</div>
@code {
    private int amount1 = 12345678;
    private int amount2 = 12345678;
    private int amount3 = 12345678;
    private int amount4 = 12345678;
    private int amount5 = 12345678;
    private int amount6 = 12345678;
    private int amount7 = 12345678;
    private int amount8 = 12345678;
    private int amount9 = 12345678;
}

See demo here

Hide currency symbol​

Set HideCurrencySymbol parameter value to true to hide the currency symbol.

Blazor Bootstrap: Currency Input Component - 
<div class="mb-3">
    <CurrencyInput 
        TValue="double" 
        @bind-Value="@amount1"
        HideCurrencySymbol="true"
        Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Value: @amount1</div>
@code {
    private double amount1 = 4.33;
}

See demo here

Using fraction digits and integer digits​

In the below example, formatting adds zeros to display minimum integers and fractions.

Blazor Bootstrap: Currency Input Component - Using fraction digits and integer digits
danger
MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only.
<div class="mb-3">
    <CurrencyInput 
        TValue="double" 
        @bind-Value="@amount1" 
        MinimumIntegerDigits="3" 
        MinimumFractionDigits="4" 
        Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Value: @amount1</div>
@code {
    private double amount1 = 4.33;
}

See demo here

Wrap the number with parentheses instead of appending a minus sign​

In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the CurrencySign option to Accounting. The default value is Standard.

Blazor Bootstrap: Currency Input Component - Wrap the number with parentheses instead of appending a minus sign
<div class="mb-3">
    <CurrencyInput 
        TValue="int" 
        @bind-Value="@amount1"
        CurrencySign="CurrencySign.Accounting"
        Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Value: @amount1</div>
@code {
    private int amount1 = -21231;
}

See demo here

Generic type​

CurrencyInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.

Blazor Bootstrap: Currency Input Component - Generic type
<div class="mb-3">
    <label class="form-label">Enter int number</label>
    <CurrencyInput TValue="int" @bind-Value="@amount" />
</div>

<div class="mb-3">
    <label class="form-label">Enter int? number</label>
    <CurrencyInput TValue="int?" @bind-Value="@amount2" />
</div>

<div class="mb-3">
    <label class="form-label">Enter float number</label>
    <CurrencyInput TValue="float" @bind-Value="@amount3" />
</div>

<div class="mb-3">
    <label class="form-label">Enter float? number</label>
    <CurrencyInput TValue="float?" @bind-Value="@amount4" />
</div>

<div class="mb-3">
    <label class="form-label">Enter double number</label>
    <CurrencyInput TValue="double" @bind-Value="@amount5" />
</div>

<div class="mb-3">
    <label class="form-label">Enter double? number</label>
    <CurrencyInput TValue="double?" @bind-Value="@amount6" />
</div>

<div class="mb-3">
    <label class="form-label">Enter decimal number</label>
    <CurrencyInput TValue="decimal" @bind-Value="@amount7" />
</div>

<div class="mb-3">
    <label class="form-label">Enter decimal? number</label>
    <CurrencyInput TValue="decimal?" @bind-Value="@amount8" />
</div>
@code {
    private int amount;
    private int? amount2;
    private float amount3;
    private float? amount4;
    private double amount5;
    private double? amount6;
    private decimal amount7;
    private decimal? amount8;
}

See demo here

Enable min and max​

Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.

Blazor Bootstrap: Currency Input Component - Enable min and max
NOTE

If the user tries to enter a number in the CurrencyInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.

<div class="mb-3">
    <label class="form-label">Amount</label>
    <CurrencyInput TValue="decimal?" @bind-Value="@amount" ShowCurrencySymbol="true" EnableMinMax="true" Min="10" Max="500" Placeholder="Enter amount" />
    <span class="form-text">Tip: The amount must be between 10 and 500.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>
@code {
    private decimal? amount;
}

See demo here

Text alignment​

You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.

Blazor Bootstrap: Currency Input Component - Text alignment
<div class="mb-3">
    <label class="form-label">Amount</label>
    <CurrencyInput TValue="int" @bind-Value="@amount" ShowCurrencySymbol="true" TextAlignment="Alignment.Center" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount</div>

<div class="mb-3">
    <label class="form-label">Amount</label>
    <CurrencyInput TValue="decimal" @bind-Value="@amount2" ShowCurrencySymbol="true" TextAlignment="Alignment.End" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount2</div>
@code {
    private int amount;
    private decimal amount2 = 2.34M;
}

See demo here

Allow negative numbers​

By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.

Blazor Bootstrap: Currency Input Component - Allow negative numbers
<div class="mb-3">
    <label class="form-label">Amount</label>
    <CurrencyInput TValue="int" @bind-Value="@amount" ShowCurrencySymbol="true" AllowNegativeNumbers="true" Placeholder="Enter amount" />
    <span class="form-text">Tip: Negative numbers are also allowed.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>
@code {
    private int amount;
}

See demo here

Disable​

Use the Disabled parameter to disable the CurrencyInput.

<div class="mb-3">
    <label class="form-label">Amount</label>
    <CurrencyInput TValue="int?"
                   @bind-Value="@amount"
                   Disabled="@disabled"
                   Placeholder="Enter amount" />
</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
    private int? amount;
    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}

Also, use Enable() and Disable() methods to enable and disable the CurrencyInput.

NOTE

Do not use both the Disabled parameter and Enable() & Disable() methods.

<div class="mb-3">
    <label class="form-label">Amount</label>
    <CurrencyInput @ref="currencyInput"
                   TValue="int?"
                   @bind-Value="@amount"
                   Placeholder="Enter amount" />
</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
    private CurrencyInput<int?> currencyInput = default!;
    private int? amount;

    private void Disable() => currencyInput.Disable();

    private void Enable() => currencyInput.Enable();
}

See demo here

Validations​

Like any other blazor input components, CurrencyInput supports validations. Add the DataAnnotations on the CurrencyInput component to validate the user input before submitting the form. In the below example, we used Required and Range attributes.

Blazor Bootstrap: Currency Input Component - Validations
@using System.ComponentModel.DataAnnotations

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Item Price: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <CurrencyInput TValue="decimal?" Value="invoice.Price" Locale="en-US" ShowCurrencySymbol="true" ValueExpression="() => invoice.Price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
            <ValidationMessage For="@(() => invoice.Price)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Item Discount:</label>
        <div class="col-md-10">
            <CurrencyInput TValue="decimal?" Value="invoice.Discount" Locale="en-US" ShowCurrencySymbol="true" ValueExpression="() => invoice.Discount" ValueChanged="(value) => DiscountChanged(value)" Placeholder="Enter discount" />
            <ValidationMessage For="@(() => invoice.Discount)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Total Amount: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <CurrencyInput TValue="decimal?" @bind-Value="invoice.Total" Locale="en-US" ShowCurrencySymbol="true" Disabled="true" Placeholder="Enter total" />
            <ValidationMessage For="@(() => invoice.Total)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
        </div>
    </div>
</EditForm>
@code {
    private Invoice invoice = new();
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(invoice);
        base.OnInitialized();
    }

    protected override void OnParametersSet()
    {
        CalculateToatl();
        base.OnParametersSet();
    }

    private void PriceChanged(decimal? value)
    {
        invoice.Price = value;
        CalculateToatl();
    }

    private void DiscountChanged(decimal? value)
    {
        invoice.Discount = value;
        CalculateToatl();
    }

    private void CalculateToatl()
    {
        var price = invoice.Price.HasValue ? invoice.Price.Value : 0;
        var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0;
        invoice.Total = price - discount;
    }

    public void HandleOnValidSubmit()
    {
        Console.WriteLine($"Price: {invoice.Price}");
        Console.WriteLine($"Discount: {invoice.Discount}");
        Console.WriteLine($"Total: {invoice.Total}");
    }

    private void ResetForm()
    {
        invoice = new();
        editContext = new EditContext(invoice);
    }

    public class Invoice
    {
        [Required(ErrorMessage = "Price required.")]
        [Range(60, 500, ErrorMessage = "Price should be between 60 and 500.")]
        public decimal? Price { get; set; } = 22M;

        [Range(0, 50, ErrorMessage = "Discount should be between 0 and 50.")]
        public decimal? Discount { get; set; }

        [Required(ErrorMessage = "Amount required.")]
        [Range(10, 500, ErrorMessage = "Total should be between 60 and 500.")]
        public decimal? Total { get; set; }
    }
}

See demo here

Events: ValueChanged​

This event fires on every user keystroke that changes the CurrencyInput value.

Blazor Bootstrap: Currency Input Component - ValueChanged
<div class="row mb-3">
    <label class="col-md-2 col-form-label">Item Price: <span class="text-danger">*</span></label>
    <div class="col-md-10">
        <CurrencyInput TValue="decimal?" Value="price" ValueExpression="() => price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
    </div>
</div>
<div>
    @displayPrice
</div>
@code {
    private decimal? price = 10M;
    private string displayPrice;

    private void PriceChanged(decimal? value)
    {
        price = value; // this is mandatory
        displayPrice = $"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.";
    }
}

See demo here

- + \ No newline at end of file diff --git a/forms/date-input.html b/forms/date-input.html index 5973ed431..ffd74e9cb 100644 --- a/forms/date-input.html +++ b/forms/date-input.html @@ -10,7 +10,7 @@ - + @@ -19,7 +19,7 @@ If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.

<div class="mb-3">
    <strong>DateOnly</strong>:
</div>
<div class="mb-3">
    <DateInput TValue="DateOnly" @bind-Value="@date1" EnableMinMax="true" Min="@min1" Max="@max1" Placeholder="Enter Date" />
</div>
<div class="mb-3">Min date: @min1</div>
<div class="mb-3">Max date: @max1</div>
<div class="mb-3">Entered date: @date1</div>

<div class="mb-3">
    <strong>DateOnly?</strong>:
</div>
<div class="mb-3">
    <DateInput TValue="DateOnly?" @bind-Value="@date2" EnableMinMax="true" Min="@min2" Max="@max2" Placeholder="Enter Date" />
</div>
<div class="mb-3">Min date: @min2</div>
<div class="mb-3">Max date: @max2</div>
<div class="mb-3">Entered date: @date2</div>

<div class="mb-3">
    <strong>DateTime</strong>:
</div>
<div class="mb-3">
    <DateInput TValue="DateTime" @bind-Value="@date3" EnableMinMax="true" Min="@min3" Max="@max3" Placeholder="Enter Date" />
</div>
<div class="mb-3">Min date: @min3</div>
<div class="mb-3">Max date: @max3</div>
<div class="mb-3">Entered date: @date3</div>

<div class="mb-3">
    <strong>DateTime?</strong>:
</div>
<div class="mb-3">
    <DateInput TValue="DateTime?" @bind-Value="@date4" EnableMinMax="true" Min="@min4" Max="@max4" Placeholder="Enter Date" />
</div>
<div class="mb-3">Min date: @min4</div>
<div class="mb-3">Max date: @max4</div>
<div class="mb-3">Entered date: @date4</div>
@code {
    private DateTime date = DateTime.Now.AddMonths(3);
    private DateTime min = DateTime.Now.AddMonths(-1);
    private DateTime max = DateTime.Now.AddYears(1);

    private DateOnly date1, min1, max1;
    private DateOnly? date2, min2, max2;
    private DateTime date3, min3, max3;
    private DateTime? date4, min4, max4;

    protected override void OnInitialized()
    {
        date1 = DateOnly.FromDateTime(date);
        min1 = DateOnly.FromDateTime(min);
        max1 = DateOnly.FromDateTime(max);

        date2 = null;
        min2 = DateOnly.FromDateTime(min);
        max2 = DateOnly.FromDateTime(max);

        date3 = DateTime.Now.AddMonths(3);
        min3 = min;
        max3 = max;

        date4 = null;
        min4 = min;
        max4 = max;
    }
}

See demo here

Disable​

Use the Disabled parameter to disable the DateInput.

<div class="mb-3">
    <DateInput TValue="DateOnly"
               @bind-Value="@date1"
               Disabled="@disabled"
               Placeholder="Enter Date" />
</div>
<div class="mb-3">Entered date: @date1</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
    private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);
    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}

Also, use Enable() and Disable() methods to enable and disable the DateInput.

NOTE

Do not use both the Disabled parameter and Enable() & Disable() methods.

<div class="mb-3">
    <DateInput @ref="dateInput"
               TValue="DateOnly"
               @bind-Value="@date1"
               Placeholder="Enter Date" />
</div>
<div class="mb-3">Entered date: @date1</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
    private DateInput<DateOnly> dateInput = default!;

    private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);

    private void Disable() => dateInput.Disable();

    private void Enable() => dateInput.Enable();
}

See demo here

Validations​

Like any other blazor input component, DateInput component supports validations. Use the Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes.

Blazor Bootstrap: Date Input Component - Validations
@using System.ComponentModel.DataAnnotations

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Invoice Date: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <DateInput TValue="DateOnly?" @bind-Value="invoice.InvoiceDate" />
            <ValidationMessage For="@(() => invoice.InvoiceDate)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Customer Name: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <InputText class="form-control" @bind-Value="invoice.CustomerName" Placeholder="Enter Customer Name" />
            <ValidationMessage For="@(() => invoice.CustomerName)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
        </div>
    </div>
</EditForm>
@code {
    private Invoice invoice = new();
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(invoice);
        base.OnInitialized();
    }

    public void HandleOnValidSubmit()
    {
        Console.WriteLine($"Invoice Date: {invoice.InvoiceDate}");
        Console.WriteLine($"Customer Name: {invoice.CustomerName}");
    }

    private void ResetForm()
    {
        invoice = new();
        editContext = new EditContext(invoice);
    }

    public class Invoice
    {
        [Required(ErrorMessage = "Invoice Date required.")]
        public DateOnly? InvoiceDate { get; set; }

        [Required(ErrorMessage = "Customer Name required.")]
        public string CustomerName { get; set; }
    }
}

See demo here

Events: ValueChanged​

This event fires on every user keystroke/selection that changes the DateInput value.

Blazor Bootstrap: Date Input Component - Events: ValueChanged
<div class="mb-3">
    <DateInput TValue="DateOnly" Value="date1" ValueExpression="() => date1" ValueChanged="(value) => DateChanged(value)" />
</div>
<div class="mb-3">Changed date: @date1</div>
@code {
    private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now);

    private void DateChanged(DateOnly dateOnly)
    {
        date1 = dateOnly;    
    }
}

See demo here

Restrict the date field based on the entry in another date field​

One common scenario is that the date fields are restricted based on the entry in another date field. In the example below, we restrict the course end time based on the selection of course start date.

Blazor Bootstrap:- Date Input Component - Restrict the date field based on the entry in another date field
@using System.ComponentModel.DataAnnotations
<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>
<EditForm EditContext="@editContext" OnValidSubmit="HandleValidSubmit" novalidate>
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Course Name: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <InputText class="form-control" @bind-Value="onlineCourseForm.CourseName" />
            <ValidationMessage For="@(() => onlineCourseForm.CourseName)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Start Date: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <DateInput TValue="DateTime?"
                       Value="onlineCourseForm.StartDate"
                       ValueExpression="() => onlineCourseForm.StartDate"
                       ValueChanged="(value) => StartDateChanged(value)" />
            <ValidationMessage For="@(() => onlineCourseForm.StartDate)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">End Date: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <DateInput @ref="endDateInput" TValue="DateTime?"
                       @bind-Value="onlineCourseForm.EndDate"
                       EnableMinMax="true"
                       Min="courseMinDate"
                       Max="courseMaxDate"
                       Disabled="true" />
            <ValidationMessage For="@(() => onlineCourseForm.EndDate)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
        </div>
    </div>
</EditForm>
@code {
    DateInput<DateTime?> endDateInput = default!;

    private OnlineCourseForm onlineCourseForm = new();
    private EditContext editContext;

    private DateTime? courseMinDate;
    private DateTime? courseMaxDate;

    [Inject] ToastService _toastService { get; set; }

    protected override void OnInitialized()
    {
        editContext = new EditContext(onlineCourseForm);
        base.OnInitialized();
    }

    private void StartDateChanged(DateTime? startDate)
    {
        if (startDate is null || !startDate.HasValue)
        {
            onlineCourseForm.StartDate = null;
            onlineCourseForm.EndDate = null;
            courseMinDate = null;
            courseMaxDate = null;
            endDateInput.Disable();

            return;
        }

        onlineCourseForm.StartDate = startDate;
        onlineCourseForm.EndDate = null;
        courseMinDate = startDate.Value;
        courseMaxDate = startDate.Value.AddDays(5);
        endDateInput.Enable();
    }

    public void HandleValidSubmit()
    {
        var toastMessage = new ToastMessage
        (
            type: ToastType.Success,
            iconName: IconName.Check2All,
            title: "Success!",
            helpText: $"{DateTime.Now.ToLocalTime()}",
            message: "Online course schedule created."
        );
        _toastService.Notify(toastMessage);
    }

    private void ResetForm()
    {
        onlineCourseForm = new();
        editContext = new EditContext(onlineCourseForm);
    }

    public class OnlineCourseForm
    {
        [Required(ErrorMessage = "Course Name required.")]
        public string CourseName { get; set; }

        [Required(ErrorMessage = "Start Date required.")]
        public DateTime? StartDate { get; set; }

        [Required(ErrorMessage = "End Date required.")]
        public DateTime? EndDate { get; set; }
    }
}
- + \ No newline at end of file diff --git a/forms/number-input.html b/forms/number-input.html index 6b7d04384..c8bf5860b 100644 --- a/forms/number-input.html +++ b/forms/number-input.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@

Blazor Number Input

Blazor Bootstrap NumberInput component is built around HTML input of type="number" that prevents the user input based on the parameters set.

Blazor Bootstrap: Number Input Component

Parameters​

NameTypeDefaultRequiredDescription
AllowNegativeNumbersboolfalseAllows negative numbers. By default, negative numbers are not allowed.
AutoCompleteboolfalseIndicates whether the NumberInput can complete the values automatically by the browser.
DisabledboolfalseGets or sets the disabled.
EnableMinMaxboolfalseDetermines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input.
MaxTValueGets or sets the max. Max ignored if EnableMinMax="false".
MinTValueGets or sets the min. Min ignored if EnableMinMax="false".
Placeholderstring?nullGets or sets the placeholder.
Stepdouble?nullGets or sets the step.
TextAlignmentAlignmentAlignment.NoneGets or sets the text alignment.
ValueTValueGets or sets the value.

Methods​

NameDescription
DisableDisables number input.
EnableEnables number input.

Events​

NameDescription
ValueChangedThis event fired on every user keystroke that changes the NumberInput value.

Examples​

Basic usage​

By default, e + - are blocked. For all integral numeric types, dot . is blocked.

Blazor Bootstrap: Number Input Component - Basic usage
<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int" @bind-Value="@amount" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount</div>
@code {
    private int amount;
}

See demo here

Generic type​

NumberInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.

Blazor Bootstrap: Number Input Component - Generic type
<div class="mb-3">
    <label class="form-label">Enter int number</label>
    <NumberInput TValue="int" @bind-Value="@amount" />
</div>

<div class="mb-3">
    <label class="form-label">Enter int? number</label>
    <NumberInput TValue="int?" @bind-Value="@amount2" />
</div>

<div class="mb-3">
    <label class="form-label">Enter float number</label>
    <NumberInput TValue="float" @bind-Value="@amount3" />
</div>

<div class="mb-3">
    <label class="form-label">Enter float? number</label>
    <NumberInput TValue="float?" @bind-Value="@amount4" />
</div>

<div class="mb-3">
    <label class="form-label">Enter double number</label>
    <NumberInput TValue="double" @bind-Value="@amount5" />
</div>

<div class="mb-3">
    <label class="form-label">Enter double? number</label>
    <NumberInput TValue="double?" @bind-Value="@amount6" />
</div>

<div class="mb-3">
    <label class="form-label">Enter decimal number</label>
    <NumberInput TValue="decimal" @bind-Value="@amount7" />
</div>

<div class="mb-3">
    <label class="form-label">Enter decimal? number</label>
    <NumberInput TValue="decimal?" @bind-Value="@amount8" />
</div>
@code {
    private int amount;
    private int? amount2;
    private float amount3;
    private float? amount4;
    private double amount5;
    private double? amount6;
    private decimal amount7;
    private decimal? amount8;
}

See demo here

Enable min and max​

Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.

Blazor Bootstrap: Number Input Component - Enable min and max
NOTE

If the user tries to enter a number in the NumberInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="decimal?" @bind-Value="@amount" EnableMinMax="true" Min="10" Max="500" Placeholder="Enter amount" />
    <span class="form-text">Tip: The amount must be between 10 and 500.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>
@code {
    private decimal? amount;
}

See demo here

Step​

The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.

Blazor Bootstrap: Number Input Component - Step
<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int?" @bind-Value="@amount" Step="10" Placeholder="Enter amount" />
    <span class="form-text">Info: Here <code>Step</code> parameter is set to <b>10</b>.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="decimal?" @bind-Value="@amount2" Step="2.5" Placeholder="Enter amount" />
    <span class="form-text">Info: Here <code>Step</code> parameter is set to <b>2.5</b>.</span>
</div>
<div class="mb-3">Entered Amount: @amount2</div>
@code {
    private int? amount;
    private decimal? amount2;
}

See demo here

Text alignment​

You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.

Blazor Bootstrap: Number Input Component - Text alignment
<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int" @bind-Value="@amount" TextAlignment="Alignment.Center" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount</div>

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="decimal" @bind-Value="@amount2" TextAlignment="Alignment.End" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount2</div>
@code {
    private int amount;
    private decimal amount2 = 2.34M;
}

See demo here

Allow negative numbers​

By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.

Blazor Bootstrap: Number Input Component - Allow negative numbers
<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int" @bind-Value="@amount" AllowNegativeNumbers="true" Placeholder="Enter amount" />
    <span class="form-text">Tip: Negative numbers are also allowed.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>
@code {
    private int amount;
}

See demo here

Disable​

Use the Disabled parameter to disable the NumberInput.

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int?"
                 @bind-Value="@amount"
                 Disabled="@disabled"
                 Placeholder="Enter amount" />
</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
    private int? amount;
    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}

Also, use Enable() and Disable() methods to enable and disable the NumberInput.

NOTE

Do not use both the Disabled parameter and Enable() & Disable() methods.

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput @ref="numberInput" 
                 TValue="int?" 
                 @bind-Value="@amount" 
                 Placeholder="Enter amount" />
</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
    private NumberInput<int?> numberInput = default!;
    private int? amount;

    private void Disable() => numberInput.Disable();

    private void Enable() => numberInput.Enable();
}

See demo here

Validations​

Like any other blazor input component, NumberInput supports validations. Add the DataAnnotations on the NumberInput component to validate the user input before submitting the form. In the below example, we used Required and Range attributes.

Blazor Bootstrap: Number Input Component - Validations
@using System.ComponentModel.DataAnnotations

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Item Price: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <NumberInput TValue="decimal?" Value="invoice.Price" ValueExpression="() => invoice.Price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
            <ValidationMessage For="@(() => invoice.Price)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Item Discount:</label>
        <div class="col-md-10">
            <NumberInput TValue="decimal?" Value="invoice.Discount" ValueExpression="() => invoice.Discount" ValueChanged="(value) => DiscountChanged(value)" Placeholder="Enter discount" />
            <ValidationMessage For="@(() => invoice.Discount)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Total Amount: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <NumberInput TValue="decimal?" @bind-Value="invoice.Total" Disabled="true" Placeholder="Enter total" />
            <ValidationMessage For="@(() => invoice.Total)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
        </div>
    </div>
</EditForm>
@code {
    private Invoice invoice = new();
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(invoice);
        base.OnInitialized();
    }

    protected override void OnParametersSet()
    {
        CalculateToatl();
        base.OnParametersSet();
    }

    private void PriceChanged(decimal? value)
    {
        invoice.Price = value;
        CalculateToatl();
    }

    private void DiscountChanged(decimal? value)
    {
        invoice.Discount = value;
        CalculateToatl();
    }

    private void CalculateToatl()
    {
        var price = invoice.Price.HasValue ? invoice.Price.Value : 0;
        var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0;
        invoice.Total = price - discount;
    }

    public void HandleOnValidSubmit()
    {
        Console.WriteLine($"Price: {invoice.Price}");
        Console.WriteLine($"Discount: {invoice.Discount}");
        Console.WriteLine($"Total: {invoice.Total}");
    }

    private void ResetForm()
    {
        invoice = new();
        editContext = new EditContext(invoice);
    }

    public class Invoice
    {
        [Required(ErrorMessage = "Price required.")]
        [Range(60, 500, ErrorMessage = "Price should be between 60 and 500.")]
        public decimal? Price { get; set; } = 232M;

        [Range(0, 50, ErrorMessage = "Discount should be between 0 and 50.")]
        public decimal? Discount { get; set; }

        [Required(ErrorMessage = "Amount required.")]
        [Range(10, 500, ErrorMessage = "Total should be between 60 and 500.")]
        public decimal? Total { get; set; }
    }
}

See demo here

Events: ValueChanged​

This event fires on every user keystroke that changes the NumberInput value.

Blazor Bootstrap: Number Input Component - Events: ValueChanged
<div class="row mb-3">
    <label class="col-md-2 col-form-label">Item Price: <span class="text-danger">*</span></label>
    <div class="col-md-10">
        <NumberInput TValue="decimal?" Value="price" ValueExpression="() => price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
    </div>
</div>
<div>
    @displayPrice
</div>
@code {
    private decimal? price = 10M;
    private string displayPrice;

    private void PriceChanged(decimal? value)
    {
        price = value; // this is mandatory
        displayPrice = $"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.";
    }
}

See demo here

- + \ No newline at end of file diff --git a/forms/switch.html b/forms/switch.html index 44dea7fa9..7c144a299 100644 --- a/forms/switch.html +++ b/forms/switch.html @@ -10,13 +10,13 @@ - +

Blazor Switch

Use the Blazor Bootstrap Switch component to show the consistent cross-browser and cross-device custom checkboxes.

Blazor Bootstrap: Switch Component

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
DisabledboolfalseGets or sets the disabled.1.3.0
LabelstringnullGets or sets the label.1.3.0
ReverseboolfalseDetermines whether to put the switch on the opposite side.1.3.0
Valueboolfalse✔️Gets or sets the value.1.3.0

Methods​

NameReturn TypeDescriptionAdded Version
Disable()voidDisables switch.1.3.0
Enable()voidEnables switch.1.3.0

Events​

NameDescriptionAdded Version
ValueChangedThis event fired when the switch selection changed.1.3.0

Examples​

Basic usage​

Blazor Bootstrap: Switch Component - Basic usage
<Switch @bind-Value="agree1" Label="Default switch checkbox input" />
<Switch @bind-Value="agree2" Label="Checked switch checkbox input" />

<div class="mt-3">Switch 1 Status: <b>@agree1</b></div>
<div>Switch 2 Status: <b>@agree2</b></div>
@code {
    bool agree1;
    bool agree2 = true;
}

See demo here

Disable​

Disable​

Use the Disabled parameter to disable the Switch.

<div class="mb-3">
    <Switch @bind-Value="agree" Disabled="@disabled" Label="Disabled switch checkbox input" />
</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
    private bool agree = true;
    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}

Also, use Enable() and Disable() methods to enable and disable the Switch.

NOTE

Do not use both the Disabled parameter and Enable() & Disable() methods.

<div class="mb-3">
    <Switch @ref="switch1" @bind-Value="agree" Label="Disabled switch checkbox input" />
</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
    private Switch switch1 = default!;
    private bool agree = true;

    private void Disable() => switch1.Disable();

    private void Enable() => switch1.Enable();
}

See demo here

Reverse​

Put your switches on the opposite side by using the Reverse parameter.

Blazor Bootstrap: Switch Component - Reverse
<Switch @bind-Value="agree" Label="Reverse switch checkbox input" Reverse="true" />
@code {
    bool agree;
}

See demo here

Events: ValueChanged​

This event fired when the Switch selection changed.

Blazor Bootstrap: Switch Component - Events: ValueChanged
<Switch Value="agree" Label="Default switch checkbox input" ValueExpression="() => agree" ValueChanged="SwitchChanged" />
<div class="mt-3">@displaySwitchStatus</div>
@code {
    private bool agree;
    private string displaySwitchStatus;

    private void SwitchChanged(bool value)
    {
        agree = value; // this is mandatory
        displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}.";
    }
}

See demo here

- + \ No newline at end of file diff --git a/forms/time-input.html b/forms/time-input.html index 05caa6156..ccbce3cd6 100644 --- a/forms/time-input.html +++ b/forms/time-input.html @@ -10,7 +10,7 @@ - + @@ -20,7 +20,7 @@ If the user input exceeds the Max value, it will override with the Max value.

<div class="mb-3">
    <strong>TimeOnly</strong>:
</div>
<div class="mb-3">
    <TimeInput TValue="TimeOnly" @bind-Value="@time1" EnableMinMax="true" Min="@min1" Max="@max1" />
</div>
<div class="mb-3">Min time: @min1</div>
<div class="mb-3">Max time: @max1</div>
<div class="mb-3">Entered time: @time1</div>

<div class="mb-3">
    <strong>TimeOnly?</strong>:
</div>
<div class="mb-3">
    <TimeInput TValue="TimeOnly?" @bind-Value="@time2" EnableMinMax="true" Min="@min2" Max="@max2" />
</div>
<div class="mb-3">Min time: @min2</div>
<div class="mb-3">Max time: @max2</div>
<div class="mb-3">Entered time: @time2</div>
@code {
    private TimeOnly time1, min1, max1;
    private TimeOnly? time2, min2, max2;

    protected override void OnInitialized()
    {
        time1 = new TimeOnly(10, 0); // 10:00 AM
        min1 = new TimeOnly(8, 0); // 08:00 AM
        max1 = new TimeOnly(18, 0); // 06:00 PM

        time2 = null;
        min2 = new TimeOnly(8, 0); // 08:00 AM
        max2 = new TimeOnly(18, 0); // 06:00 PM
    }
}

See demo here

Disable​

Use the Disabled parameter to disable the TimeInput.

<div class="mb-3">
    <TimeInput TValue="TimeOnly" @bind-Value="@time1" Disabled="@disabled" />
</div>
<div class="mb-3">Entered time: @time1</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
    private TimeOnly time1 = new TimeOnly(10, 50); // 10:50 AM
    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}

Also, use Enable() and Disable() methods to enable and disable the TimeInput.

NOTE

Do not use both the Disabled parameter and Enable() & Disable() methods.

<div class="mb-3">
    <TimeInput @ref="timeInput1" TValue="TimeOnly" @bind-Value="@time1" />
</div>
<div class="mb-3">Entered time: @time1</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
    private TimeInput<TimeOnly> timeInput1 = default!;

    private TimeOnly time1 = new TimeOnly(10, 50); // 10:50 AM

    private void Disable() => timeInput1.Disable();

    private void Enable() => timeInput1.Enable();
}

See demo here

Validations​

Like any other blazor input component, TimeInput component supports validations. Use the Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes.

Blazor Bootstrap: Time Input Component - Validations
@using System.ComponentModel.DataAnnotations

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleValidSubmit" novalidate>
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Flight Number: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <InputText class="form-control" @bind-Value="flightForm.FlightNumber" Placeholder="Enter Flight Number" />
            <ValidationMessage For="@(() => flightForm.FlightNumber)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Departure Date: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <DateInput TValue="DateOnly?" class="form-control" @bind-Value="flightForm.DepartureDate" />
            <ValidationMessage For="@(() => flightForm.DepartureDate)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Departure Time: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <TimeInput TValue="TimeOnly?" @bind-Value="flightForm.DepartureTime" />
            <ValidationMessage For="@(() => flightForm.DepartureTime)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Arrival Date: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <DateInput TValue="DateOnly?" class="form-control" @bind-Value="flightForm.ArrivalDate" />
            <ValidationMessage For="@(() => flightForm.ArrivalDate)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Arrival Time: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <TimeInput TValue="TimeOnly?" @bind-Value="flightForm.ArrivalTime" />
            <ValidationMessage For="@(() => flightForm.ArrivalTime)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
        </div>
    </div>
</EditForm>
@code {
    private FlightForm flightForm = new();
    private EditContext editContext;

    [Inject] ToastService _toastService { get; set; }

    protected override void OnInitialized()
    {
        editContext = new EditContext(flightForm);
        base.OnInitialized();
    }

    public void HandleValidSubmit()
    {
        var toastMessage = new ToastMessage
        (
            type: ToastType.Success,
            iconName: IconName.Check2All,
            title: "Success!",
            helpText: $"{DateTime.Now.ToLocalTime()}",
            message: "Flight schedule created."
        );
        _toastService.Notify(toastMessage);
    }

    private void ResetForm()
    {
        flightForm = new();
        editContext = new EditContext(flightForm);
    }

    public class FlightForm
    {
        [Required(ErrorMessage = "Flight Number required.")]
        public string FlightNumber { get; set; }

        [Required(ErrorMessage = "Departure Date required.")]
        public DateOnly? DepartureDate { get; set; }

        [Required(ErrorMessage = "Departure Time required.")]
        public TimeOnly? DepartureTime { get; set; }

        [Required(ErrorMessage = "Arrival Date required.")]
        public DateOnly? ArrivalDate { get; set; }

        [Required(ErrorMessage = "Arrival Time required.")]
        public TimeOnly? ArrivalTime { get; set; }
    }
}

See demo here

Events: ValueChanged​

This event fires on every user keystroke/selection that changes the TimeInput value.

Blazor Bootstrap: Time Input Component - Events: ValueChanged
<div class="mb-3">
    <TimeInput TValue="TimeOnly" Value="time1" ValueExpression="() => time1" ValueChanged="(value) => TimeChanged(value)" />
</div>
<div class="mb-3">Changed time: @time1</div>

@code {
    private TimeOnly time1 = new TimeOnly(10, 0); // 10:00 AM

    private void TimeChanged(TimeOnly timeOnly)
    {
        time1 = timeOnly;
    }
}

See demo here

Restrict the date field based on the entry in another date field​

One common scenario is that the time fields are restricted based on the entry in another time field. In the example below, we restrict the arrival time based on the selection of departure.

Blazor Bootstrap:- Time Input Component - Restrict the date field based on the entry in another date field
@using System.ComponentModel.DataAnnotations
<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>
<EditForm EditContext="@editContext" OnValidSubmit="HandleValidSubmit" novalidate>
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Departure Time: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <TimeInput TValue="TimeOnly?"
                       Value="flightForm.DepartureTime"
                       ValueExpression="() => flightForm.DepartureTime"
                       ValueChanged="(value) => DepartureTimeChanged(value)" />
            <ValidationMessage For="@(() => flightForm.DepartureTime)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Arrival Time: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <TimeInput @ref="arrivalTimeInput" TValue="TimeOnly?"
                       @bind-Value="flightForm.ArrivalTime"
                       EnableMinMax="true"
                       Min="arrivalMinTime"
                       Max="arrivalMaxTime"
                       Disabled="true" />
            <ValidationMessage For="@(() => flightForm.ArrivalTime)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
        </div>
    </div>
</EditForm>
@code {
    TimeInput<TimeOnly?> arrivalTimeInput = default!;

    private FlightForm flightForm = new();
    private EditContext editContext;

    private TimeOnly? arrivalMinTime;
    private TimeOnly? arrivalMaxTime;

    [Inject] ToastService _toastService { get; set; }

    protected override void OnInitialized()
    {
        editContext = new EditContext(flightForm);
        base.OnInitialized();
    }

    private void DepartureTimeChanged(TimeOnly? departureTime)
    {
        if (departureTime is null || !departureTime.HasValue)
        {
            flightForm.DepartureTime = null;
            flightForm.ArrivalTime = null;
            arrivalMinTime = null;
            arrivalMaxTime = null;
            arrivalTimeInput.Disable();

            return;
        }

        flightForm.DepartureTime = departureTime;
        flightForm.ArrivalTime = null;
        arrivalMinTime = departureTime.Value.AddHours(1);
        arrivalMaxTime = departureTime.Value.AddHours(12);
        arrivalTimeInput.Enable();
    }

    public void HandleValidSubmit()
    {
        var toastMessage = new ToastMessage
        (
            type: ToastType.Success,
            iconName: IconName.Check2All,
            title: "Success!",
            helpText: $"{DateTime.Now.ToLocalTime()}",
            message: "Flight schedule created."
        );
        _toastService.Notify(toastMessage);
    }

    private void ResetForm()
    {
        flightForm = new();
        editContext = new EditContext(flightForm);
    }

    public class FlightForm
    {
        [Required(ErrorMessage = "Departure Time required.")]
        public TimeOnly? DepartureTime { get; set; }

        [Required(ErrorMessage = "Arrival Time required.")]
        public TimeOnly? ArrivalTime { get; set; }
    }
}
- + \ No newline at end of file diff --git a/getting-started/blazor-server.html b/getting-started/blazor-server.html index 6564274f6..0b4ca5e4e 100644 --- a/getting-started/blazor-server.html +++ b/getting-started/blazor-server.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@

Getting started - Blazor Server

Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.

Install Nuget Package​

Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager.

Install-Package Blazor.Bootstrap -Version 1.10.4

Add CSS references​

Add the following references to the head section in the Pages/_Host.cshtml.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
note

If you use the Blazor Server App Empty* template (without demonstration code and Bootstrap), add the following references to the head section in the Pages/_Host.cshtml. There is a known GitHub issue Blazor empty template doesn't load scoped CSS.

<link href="_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css" rel="stylesheet" />
IMPORTANT

In .NET 6 Blazor Server App default template, you may see Pages/_Layout.cshtml. So, add these references in the Pages/_Layout.cshtml instead of in the Pages/_Host.cshtml.

Add script references​

Add the following references to the body section in the Pages/_Host.cshtml after the _framework/blazor.server.js reference.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- Add chart.js reference if chart components are used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
tip

chart.js reference is optional. Add when the Chart components are used in the application.

Register services​

Add Blazor Bootstrap service in the Program.cs

builder.Services.AddBlazorBootstrap(); // Add this line

Register tag helpers in _Imports.razor

@using BlazorBootstrap;

Remove default references​

In the Pages/_Host.cshtml file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed.

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />

Delete the default bootstrap and open-iconic folders from the wwwroot folder.

  1. wwwroot/css/bootstrap
  2. wwwroot/css/open-iconic

Either remove or keep the site.css file but make sure you clear it out of any content when the Sidebar component with full layout is used.

Starter templates​

.NET 6​

  1. Blazor Bootstrap - Blazor Server App

    Blazor Bootstrap - Blazor Server App

.NET 7​

  1. Blazor Bootstrap - Blazor Server App

    Blazor Bootstrap - Blazor Server App

  2. Blazor Bootstrap - Blazor Empty Server App

    Blazor Bootstrap - Blazor Empty Server App
- + \ No newline at end of file diff --git a/getting-started/blazor-webassembly.html b/getting-started/blazor-webassembly.html index c41817385..297530563 100644 --- a/getting-started/blazor-webassembly.html +++ b/getting-started/blazor-webassembly.html @@ -10,7 +10,7 @@ - + @@ -18,7 +18,7 @@

Getting started - Blazor WebAssembly

Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.

Install Nuget Package​

Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager.

Install-Package Blazor.Bootstrap -Version 1.10.4

Add CSS references​

Add the following references to the head section in the wwwroot/index.html.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
note

If you use the Blazor WebAssembly App Empty* template (without demonstration code and Bootstrap), add the following references to the head section in the wwwroot/index.html. There is a known GitHub issue Blazor empty template doesn't load scoped CSS.

<link href="_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css" rel="stylesheet" />

Add script references​

Add the following references to the body section in the wwwroot/index.html after the _framework/blazor.webassembly.js reference.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- Add chart.js reference if chart components are used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
tip

chart.js reference is optional. Add when the Chart components are used in the application.

Register services​

Add Blazor Bootstrap service in the Program.cs

builder.Services.AddBlazorBootstrap(); // Add this line

Register tag helpers in _Imports.razor

@using BlazorBootstrap;

Remove default references​

In the wwwroot/index.html file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed.

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />

Delete the default bootstrap and open-iconic folders from the wwwroot folder.

  1. wwwroot/css/bootstrap
  2. wwwroot/css/open-iconic

Either remove or keep the app.css file but make sure you clear it out of any content when the Sidebar component with full layout is used.

Starter templates​

.NET 6​

  1. Blazor Bootstrap - Blazor WebAssembly App

    Blazor Bootstrap - Blazor WebAssembly App

.NET 7​

  1. Blazor Bootstrap - Blazor WebAssembly App

    Blazor Bootstrap - Blazor WebAssembly App

  2. Blazor Bootstrap - Blazor Empty WebAssembly App

    Blazor Bootstrap - Blazor Empty WebAssembly App
- + \ No newline at end of file diff --git a/getting-started/maui-blazor.html b/getting-started/maui-blazor.html index 48ea86be9..c91716052 100644 --- a/getting-started/maui-blazor.html +++ b/getting-started/maui-blazor.html @@ -10,14 +10,14 @@ - +

Getting started - MAUI Blazor App

Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.

Install Nuget Package​

Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager.

Install-Package Blazor.Bootstrap -Version 1.10.4

Add CSS references​

Add the following references to the head section in the wwwroot/index.html.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />

Add script references​

Add the following references to the body section in the wwwroot/index.html after the _framework/blazor.webview.js reference.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- Add chart.js reference if chart components are used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
tip

chart.js reference is optional. Add when the Chart components are used in the application.

Register services​

Add Blazor Bootstrap service in the MauiProgram.cs

builder.Services.AddBlazorBootstrap(); // Add this line

Register tag helpers in _Imports.razor

@using BlazorBootstrap;

Remove default references​

In the wwwroot/index.html file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed.

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />

Delete the default bootstrap and open-iconic folders from the wwwroot folder.

  1. wwwroot/css/bootstrap
  2. wwwroot/css/open-iconic

Either remove or keep the app.css file but make sure you clear it out of any content when the Sidebar component with full layout is used.

Starter templates​

.NET 6​

  1. Blazor Bootstrap - Blazor WebAssembly App

    Blazor Bootstrap - Blazor WebAssembly App

.NET 7​

  1. Blazor Bootstrap - Blazor WebAssembly App

    Blazor Bootstrap - Blazor WebAssembly App

  2. Blazor Bootstrap - Blazor Empty WebAssembly App

    Blazor Bootstrap - Blazor Empty WebAssembly App
- + \ No newline at end of file diff --git a/index.html b/index.html index 3dc4990d0..9bb9c4e9e 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,13 @@ - +
- + \ No newline at end of file diff --git a/layout/blazor-server.html b/layout/blazor-server.html index 4646cd3fd..b846628a6 100644 --- a/layout/blazor-server.html +++ b/layout/blazor-server.html @@ -10,13 +10,13 @@ - +

Layout Setup - Blazor WebAssembly

Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.

Prerequisites​

Assuming you followed the getting started docs for the initial setup.

  1. Blazor WebAssembly Project: Follow the getting started steps for the initial setup.
  2. Blazor Server Project: Follow the getting started steps for the initial setup.

Steps​

Replace MainLayout.razor page code with the below code.

NOTE

Remove all the CSS content from the Shared/MainLayout.razor.css file.

@inherits LayoutComponentBase

<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">
                @Body
            </div>
        </article>
    </main>

</div>

@code {
    private Sidebar sidebar = default!;
    private IEnumerable<NavItem> navItems = default!;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
            new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
            new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
        };

        return navItems;
    }
}

Starter templates​

.NET 6​

  1. Blazor Bootstrap - Blazor WebAssembly App

    Blazor Bootstrap - Blazor WebAssembly App

.NET 7​

  1. Blazor Bootstrap - Blazor WebAssembly App

    Blazor Bootstrap - Blazor WebAssembly App

  2. Blazor Bootstrap - Blazor Empty WebAssembly App

    Blazor Bootstrap - Blazor Empty WebAssembly App
- + \ No newline at end of file diff --git a/layout/blazor-webassembly.html b/layout/blazor-webassembly.html index 5f875942c..f625e3379 100644 --- a/layout/blazor-webassembly.html +++ b/layout/blazor-webassembly.html @@ -10,13 +10,13 @@ - +

Layout Setup - Blazor WebAssembly

Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.

Prerequisites​

Assuming you followed the getting started docs for the initial setup.

  1. Blazor WebAssembly Project: Follow the getting started steps for the initial setup.
  2. Blazor Server Project: Follow the getting started steps for the initial setup.

Steps​

Replace MainLayout.razor page code with the below code.

NOTE

Remove all the CSS content from the Shared/MainLayout.razor.css file.

@inherits LayoutComponentBase

<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">
                @Body
            </div>
        </article>
    </main>

</div>

@code {
    private Sidebar sidebar = default!;
    private IEnumerable<NavItem> navItems = default!;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
            new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
            new NavItem { Id = "3", Href = "/fetchdata", IconName = IconName.Table, Text = "Fetch Data"},
        };

        return navItems;
    }
}

Starter templates​

.NET 6​

  1. Blazor Bootstrap - Blazor WebAssembly App

    Blazor Bootstrap - Blazor WebAssembly App

.NET 7​

  1. Blazor Bootstrap - Blazor WebAssembly App

    Blazor Bootstrap - Blazor WebAssembly App

  2. Blazor Bootstrap - Blazor Empty WebAssembly App

    Blazor Bootstrap - Blazor Empty WebAssembly App
- + \ No newline at end of file diff --git a/search-index.json b/search-index.json index 1d7b8bb05..2531b42b5 100644 --- a/search-index.json +++ b/search-index.json @@ -1 +1 @@ -[{"documents":[{"i":1,"t":"Blog | Blazor Bootstrap Docs","u":"/blog","b":[]},{"i":3,"t":"BlazorBootstrap v0.0.2","u":"/blog/2021/11/27/blazorbootstrap-0.0.2","b":[]},{"i":5,"t":"BlazorBootstrap v0.0.3","u":"/blog/2021/12/08/blazorbootstrap-0.0.3","b":[]},{"i":7,"t":"BlazorBootstrap v0.0.1","u":"/blog/2021/11/23/blazorbootstrap-0.0.1","b":[]},{"i":9,"t":"BlazorBootstrap v0.1.0","u":"/blog/2021/12/20/blazorbootstrap-0.1.0","b":[]},{"i":11,"t":"BlazorBootstrap v0.0.4","u":"/blog/2021/12/12/blazorbootstrap-0.0.4","b":[]},{"i":13,"t":"BlazorBootstrap v0.2.0","u":"/blog/2022/01/15/blazorbootstrap-0.2.0","b":[]},{"i":15,"t":"BlazorBootstrap v0.1.1","u":"/blog/2021/12/21/blazorbootstrap-0.1.1","b":[]},{"i":17,"t":"BlazorBootstrap v0.2.1","u":"/blog/2022/02/27/blazorbootstrap-0.2.1","b":[]},{"i":19,"t":"BlazorBootstrap v0.2.3","u":"/blog/2022/04/30/blazorbootstrap-0.2.3","b":[]},{"i":21,"t":"BlazorBootstrap v0.2.4","u":"/blog/2022/06/19/blazorbootstrap-0.2.4","b":[]},{"i":23,"t":"BlazorBootstrap v0.2.2","u":"/blog/2022/03/15/blazorbootstrap-0.2.2","b":[]},{"i":25,"t":"BlazorBootstrap v0.2.5","u":"/blog/2022/07/28/blazorbootstrap-0.2.5","b":[]},{"i":27,"t":"BlazorBootstrap v0.4.0","u":"/blog/2022/09/04/blazorbootstrap-0.4.0","b":[]},{"i":29,"t":"BlazorBootstrap v0.2.6","u":"/blog/2022/08/13/blazorbootstrap-0.2.6","b":[]},{"i":31,"t":"BlazorBootstrap v0.3.0","u":"/blog/2022/08/31/blazorbootstrap-0.3.0","b":[]},{"i":33,"t":"BlazorBootstrap v0.4.1","u":"/blog/2022/09/12/blazorbootstrap-0.4.1","b":[]},{"i":35,"t":"BlazorBootstrap v0.4.2","u":"/blog/2022/09/17/blazorbootstrap-0.4.2","b":[]},{"i":37,"t":"BlazorBootstrap v0.5.0","u":"/blog/2022/10/16/blazorbootstrap-0.5.0","b":[]},{"i":39,"t":"Blazor Bootstrap v0.5.1","u":"/blog/2022/10/22/blazorbootstrap-0.5.1","b":[]},{"i":41,"t":"Blazor Bootstrap v1.0.0","u":"/blog/2022/11/18/blazorbootstrap-1.0.0","b":[]},{"i":43,"t":"Blazor Bootstrap v1.0.1","u":"/blog/2022/11/22/blazorbootstrap-1.0.1","b":[]},{"i":45,"t":"Blazor Bootstrap v0.6.0","u":"/blog/2022/10/30/blazorbootstrap-0.6.0","b":[]},{"i":47,"t":"Blazor Bootstrap v1.1.0","u":"/blog/2022/11/28/blazorbootstrap-1.1.0","b":[]},{"i":49,"t":"Blazor Bootstrap v1.2.0","u":"/blog/2022/12/12/blazorbootstrap-1.2.0","b":[]},{"i":51,"t":"Blazor Bootstrap v1.3.0","u":"/blog/2022/12/15/blazorbootstrap-1.3.0","b":[]},{"i":53,"t":"Blazor Bootstrap v1.4.1","u":"/blog/2023/01/23/blazorbootstrap-1.4.1","b":[]},{"i":55,"t":"Blazor Bootstrap v1.4.0","u":"/blog/2023/01/15/blazorbootstrap-1.4.0","b":[]},{"i":57,"t":"Blazor Bootstrap v1.4.3","u":"/blog/2023/02/07/blazorbootstrap-1.4.3","b":[]},{"i":59,"t":"Blazor Bootstrap v1.3.1","u":"/blog/2022/12/18/blazorbootstrap-1.3.1","b":[]},{"i":61,"t":"Blazor Bootstrap v1.4.2","u":"/blog/2023/01/30/blazorbootstrap-1.4.2","b":[]},{"i":63,"t":"Blazor Bootstrap v1.4.4","u":"/blog/2023/02/10/blazorbootstrap-1.4.4","b":[]},{"i":65,"t":"Blazor Bootstrap v1.4.5","u":"/blog/2023/02/23/blazorbootstrap-1.4.5","b":[]},{"i":67,"t":"Blazor Bootstrap v1.5.0","u":"/blog/2023/03/05/blazorbootstrap-1.5.0","b":[]},{"i":69,"t":"Blazor Bootstrap v1.6.0","u":"/blog/2023/03/12/blazorbootstrap-1.6.0","b":[]},{"i":71,"t":"Blazor Bootstrap v1.7.0","u":"/blog/2023/04/10/blazorbootstrap-1.7.0","b":[]},{"i":73,"t":"Blazor Bootstrap v1.7.1","u":"/blog/2023/04/19/blazorbootstrap-1.7.1","b":[]},{"i":75,"t":"Blazor Bootstrap v1.7.2","u":"/blog/2023/04/24/blazorbootstrap-1.7.2","b":[]},{"i":77,"t":"Blazor Bootstrap v1.7.3","u":"/blog/2023/04/29/blazorbootstrap-1.7.3","b":[]},{"i":79,"t":"Blazor Bootstrap v1.8.1","u":"/blog/2023/05/31/blazorbootstrap-1.8.1","b":[]},{"i":81,"t":"Blazor Bootstrap v1.8.0","u":"/blog/2023/05/28/blazorbootstrap-1.8.0","b":[]},{"i":83,"t":"Blazor Bootstrap v1.8.2","u":"/blog/2023/06/11/blazorbootstrap-1.8.2","b":[]},{"i":85,"t":"Blazor Bootstrap v1.8.3","u":"/blog/2023/06/16/blazorbootstrap-1.8.3","b":[]},{"i":87,"t":"Blazor Bootstrap v1.9.0","u":"/blog/2023/06/30/blazorbootstrap-1.9.0","b":[]},{"i":89,"t":"Blazor Bootstrap v1.9.2","u":"/blog/2023/07/01/blazorbootstrap-1.9.2","b":[]},{"i":91,"t":"Blazor Bootstrap v1.9.3","u":"/blog/2023/07/04/blazorbootstrap-1.9.3","b":[]},{"i":93,"t":"Blazor Bootstrap v1.9.5","u":"/blog/2023/07/16/blazorbootstrap-1.9.5","b":[]},{"i":95,"t":"Blazor Bootstrap v1.10.0","u":"/blog/2023/08/13/blazorbootstrap-1.10.0","b":[]},{"i":97,"t":"Blazor Bootstrap v1.9.1","u":"/blog/2023/06/31/blazorbootstrap-1.9.1","b":[]},{"i":99,"t":"Blazor Bootstrap v1.10.1","u":"/blog/2023/08/29/blazorbootstrap-1.10.1","b":[]},{"i":101,"t":"Blazor Bootstrap v1.10.2","u":"/blog/2023/09/15/blazorbootstrap-1.10.2","b":[]},{"i":103,"t":"Blazor Bootstrap v1.9.4","u":"/blog/2023/07/05/blazorbootstrap-1.9.4","b":[]},{"i":105,"t":"Blazor Bootstrap v1.10.3","u":"/blog/2023/10/15/blazorbootstrap-1.10.3","b":[]},{"i":107,"t":"Blazor Bootstrap v1.10.4","u":"/blog/2023/11/18/blazorbootstrap-1.10.4","b":[]},{"i":109,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/2","b":[]},{"i":111,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/3","b":[]},{"i":113,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/4","b":[]},{"i":115,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/6","b":[]},{"i":117,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/5","b":[]},{"i":119,"t":"Tags","u":"/blog/tags","b":[]},{"i":121,"t":"One post tagged with \"accordion\"","u":"/blog/tags/accordion","b":[]},{"i":123,"t":"One post tagged with \"alert\"","u":"/blog/tags/alert","b":[]},{"i":125,"t":"8 posts tagged with \"autocomplete\"","u":"/blog/tags/autocomplete","b":[]},{"i":127,"t":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor","b":[]},{"i":129,"t":"One post tagged with \"blazor-autocomplete\"","u":"/blog/tags/blazor-autocomplete","b":[]},{"i":131,"t":"One post tagged with \"badge\"","u":"/blog/tags/badge","b":[]},{"i":133,"t":"One post tagged with \"blazor-bar-chart\"","u":"/blog/tags/blazor-bar-chart","b":[]},{"i":135,"t":"5 posts tagged with \"blazor-bootstrap\"","u":"/blog/tags/blazor-bootstrap","b":[]},{"i":137,"t":"One post tagged with \"blazor-charts\"","u":"/blog/tags/blazor-charts","b":[]},{"i":139,"t":"Archive","u":"/blog/archive","b":[]},{"i":141,"t":"One post tagged with \"blazor-currency-input\"","u":"/blog/tags/blazor-currency-input","b":[]},{"i":143,"t":"2 posts tagged with \"blazor-dialog\"","u":"/blog/tags/blazor-dialog","b":[]},{"i":145,"t":"2 posts tagged with \"blazor-confirm-dialog\"","u":"/blog/tags/blazor-confirm-dialog","b":[]},{"i":147,"t":"One post tagged with \"blazor-doughnut-chart\"","u":"/blog/tags/blazor-doughnut-chart","b":[]},{"i":149,"t":"3 posts tagged with \"blazor-grid\"","u":"/blog/tags/blazor-grid","b":[]},{"i":151,"t":"One post tagged with \"blazor-grid-filtering\"","u":"/blog/tags/blazor-grid-filtering","b":[]},{"i":153,"t":"One post tagged with \"blazor-grid-sorting\"","u":"/blog/tags/blazor-grid-sorting","b":[]},{"i":155,"t":"One post tagged with \"blazor-input-number\"","u":"/blog/tags/blazor-input-number","b":[]},{"i":157,"t":"One post tagged with \"blazor-grid-paging\"","u":"/blog/tags/blazor-grid-paging","b":[]},{"i":159,"t":"One post tagged with \"blazor-input\"","u":"/blog/tags/blazor-input","b":[]},{"i":161,"t":"One post tagged with \"blazor-line-chart\"","u":"/blog/tags/blazor-line-chart","b":[]},{"i":163,"t":"One post tagged with \"blazor-number\"","u":"/blog/tags/blazor-number","b":[]},{"i":165,"t":"One post tagged with \"blazor-offcanvas\"","u":"/blog/tags/blazor-offcanvas","b":[]},{"i":167,"t":"One post tagged with \"blazor-number-input\"","u":"/blog/tags/blazor-number-input","b":[]},{"i":169,"t":"One post tagged with \"blazor-progress\"","u":"/blog/tags/blazor-progress","b":[]},{"i":171,"t":"One post tagged with \"blazor-pie-chart\"","u":"/blog/tags/blazor-pie-chart","b":[]},{"i":173,"t":"2 posts tagged with \"blazor-preload\"","u":"/blog/tags/blazor-preload","b":[]},{"i":175,"t":"One post tagged with \"blazor-progress-bar\"","u":"/blog/tags/blazor-progress-bar","b":[]},{"i":177,"t":"One post tagged with \"blazor-sidemodal\"","u":"/blog/tags/blazor-sidemodal","b":[]},{"i":179,"t":"2 posts tagged with \"blazor-spinner\"","u":"/blog/tags/blazor-spinner","b":[]},{"i":181,"t":"One post tagged with \"blazor-starter-templates\"","u":"/blog/tags/blazor-starter-templates","b":[]},{"i":183,"t":"One post tagged with \"blazor-tabs\"","u":"/blog/tags/blazor-tabs","b":[]},{"i":185,"t":"One post tagged with \"blazor-templates\"","u":"/blog/tags/blazor-templates","b":[]},{"i":187,"t":"One post tagged with \"blazor-toast\"","u":"/blog/tags/blazor-toast","b":[]},{"i":189,"t":"2 posts tagged with \"blazor-toasts\"","u":"/blog/tags/blazor-toasts","b":[]},{"i":191,"t":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/2","b":[]},{"i":193,"t":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/3","b":[]},{"i":195,"t":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/4","b":[]},{"i":197,"t":"One post tagged with \"blazoraccordion\"","u":"/blog/tags/blazoraccordion","b":[]},{"i":199,"t":"4 posts tagged with \"blazorautocomplete\"","u":"/blog/tags/blazorautocomplete","b":[]},{"i":201,"t":"One post tagged with \"blazorbadge\"","u":"/blog/tags/blazorbadge","b":[]},{"i":203,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap","b":[]},{"i":205,"t":"One post tagged with \"blazorbootstrap-starter-templates\"","u":"/blog/tags/blazorbootstrap-starter-templates","b":[]},{"i":207,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/2","b":[]},{"i":209,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/6","b":[]},{"i":211,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/3","b":[]},{"i":213,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/4","b":[]},{"i":215,"t":"One post tagged with \"blazorbreadcrumb\"","u":"/blog/tags/blazorbreadcrumb","b":[]},{"i":217,"t":"2 posts tagged with \"blazorbutton\"","u":"/blog/tags/blazorbutton","b":[]},{"i":219,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/5","b":[]},{"i":221,"t":"3 posts tagged with \"blazorbuttons\"","u":"/blog/tags/blazorbuttons","b":[]},{"i":223,"t":"One post tagged with \"blazorchart\"","u":"/blog/tags/blazorchart","b":[]},{"i":225,"t":"One post tagged with \"blazorcollapse\"","u":"/blog/tags/blazorcollapse","b":[]},{"i":227,"t":"One post tagged with \"blazorconfirmmodal\"","u":"/blog/tags/blazorconfirmmodal","b":[]},{"i":229,"t":"One post tagged with \"blazorconfirmdialog\"","u":"/blog/tags/blazorconfirmdialog","b":[]},{"i":231,"t":"3 posts tagged with \"blazorcurrencyinput\"","u":"/blog/tags/blazorcurrencyinput","b":[]},{"i":233,"t":"One post tagged with \"blazordate\"","u":"/blog/tags/blazordate","b":[]},{"i":235,"t":"4 posts tagged with \"blazordateinput\"","u":"/blog/tags/blazordateinput","b":[]},{"i":237,"t":"One post tagged with \"blazordialog\"","u":"/blog/tags/blazordialog","b":[]},{"i":239,"t":"2 posts tagged with \"blazordatepicker\"","u":"/blog/tags/blazordatepicker","b":[]},{"i":241,"t":"One post tagged with \"blazordropdown\"","u":"/blog/tags/blazordropdown","b":[]},{"i":243,"t":"13 posts tagged with \"blazorgrid\"","u":"/blog/tags/blazorgrid","b":[]},{"i":245,"t":"13 posts tagged with \"blazorgrid\"","u":"/blog/tags/blazorgrid/page/2","b":[]},{"i":247,"t":"2 posts tagged with \"blazoricon\"","u":"/blog/tags/blazoricon","b":[]},{"i":249,"t":"One post tagged with \"blazornumber\"","u":"/blog/tags/blazornumber","b":[]},{"i":251,"t":"2 posts tagged with \"blazormodalservice\"","u":"/blog/tags/blazormodalservice","b":[]},{"i":253,"t":"8 posts tagged with \"blazormodal\"","u":"/blog/tags/blazormodal","b":[]},{"i":255,"t":"One post tagged with \"blazornumberinput\"","u":"/blog/tags/blazornumberinput","b":[]},{"i":257,"t":"2 posts tagged with \"blazorsidebar\"","u":"/blog/tags/blazorsidebar","b":[]},{"i":259,"t":"One post tagged with \"blazorprogress\"","u":"/blog/tags/blazorprogress","b":[]},{"i":261,"t":"3 posts tagged with \"blazoroffcanvas\"","u":"/blog/tags/blazoroffcanvas","b":[]},{"i":263,"t":"2 posts tagged with \"blazorswitch\"","u":"/blog/tags/blazorswitch","b":[]},{"i":265,"t":"One post tagged with \"blazortabs\"","u":"/blog/tags/blazortabs","b":[]},{"i":267,"t":"One post tagged with \"blazortimepicker\"","u":"/blog/tags/blazortimepicker","b":[]},{"i":269,"t":"One post tagged with \"blazortime\"","u":"/blog/tags/blazortime","b":[]},{"i":271,"t":"3 posts tagged with \"blazortimeinput\"","u":"/blog/tags/blazortimeinput","b":[]},{"i":273,"t":"2 posts tagged with \"blazortooltip\"","u":"/blog/tags/blazortooltip","b":[]},{"i":275,"t":"2 posts tagged with \"blazortoasts\"","u":"/blog/tags/blazortoasts","b":[]},{"i":277,"t":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5","b":[]},{"i":279,"t":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap","b":[]},{"i":281,"t":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5/page/2","b":[]},{"i":283,"t":"One post tagged with \"blazortoast\"","u":"/blog/tags/blazortoast","b":[]},{"i":285,"t":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5/page/3","b":[]},{"i":287,"t":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap/page/3","b":[]},{"i":289,"t":"One post tagged with \"breadcrumbservice\"","u":"/blog/tags/breadcrumbservice","b":[]},{"i":291,"t":"One post tagged with \"breadcrumb\"","u":"/blog/tags/breadcrumb","b":[]},{"i":293,"t":"3 posts tagged with \"button\"","u":"/blog/tags/button","b":[]},{"i":295,"t":"One post tagged with \"callout\"","u":"/blog/tags/callout","b":[]},{"i":297,"t":"One post tagged with \"chart\"","u":"/blog/tags/chart","b":[]},{"i":299,"t":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap/page/2","b":[]},{"i":301,"t":"One post tagged with \"charts\"","u":"/blog/tags/charts","b":[]},{"i":303,"t":"One post tagged with \"collapse\"","u":"/blog/tags/collapse","b":[]},{"i":305,"t":"3 posts tagged with \"buttons\"","u":"/blog/tags/buttons","b":[]},{"i":307,"t":"One post tagged with \"confirm dialog\"","u":"/blog/tags/confirm-dialog","b":[]},{"i":309,"t":"One post tagged with \"confirmdialog\"","u":"/blog/tags/confirmdialog","b":[]},{"i":311,"t":"One post tagged with \"currency\"","u":"/blog/tags/currency","b":[]},{"i":313,"t":"One post tagged with \"confirmmodal\"","u":"/blog/tags/confirmmodal","b":[]},{"i":315,"t":"One post tagged with \"date\"","u":"/blog/tags/date","b":[]},{"i":317,"t":"4 posts tagged with \"dateinput\"","u":"/blog/tags/dateinput","b":[]},{"i":319,"t":"2 posts tagged with \"currencyinput\"","u":"/blog/tags/currencyinput","b":[]},{"i":321,"t":"2 posts tagged with \"datepicker\"","u":"/blog/tags/datepicker","b":[]},{"i":323,"t":"One post tagged with \"dialog\"","u":"/blog/tags/dialog","b":[]},{"i":325,"t":"One post tagged with \"dropdown\"","u":"/blog/tags/dropdown","b":[]},{"i":327,"t":"5 posts tagged with \"docs\"","u":"/blog/tags/docs","b":[]},{"i":329,"t":"16 posts tagged with \"grid\"","u":"/blog/tags/grid","b":[]},{"i":331,"t":"16 posts tagged with \"grid\"","u":"/blog/tags/grid/page/2","b":[]},{"i":333,"t":"One post tagged with \"icons\"","u":"/blog/tags/icons","b":[]},{"i":335,"t":"2 posts tagged with \"icon\"","u":"/blog/tags/icon","b":[]},{"i":337,"t":"One post tagged with \"layout\"","u":"/blog/tags/layout","b":[]},{"i":339,"t":"One post tagged with \"input-number\"","u":"/blog/tags/input-number","b":[]},{"i":341,"t":"One post tagged with \"leftmenu\"","u":"/blog/tags/leftmenu","b":[]},{"i":343,"t":"11 posts tagged with \"modal\"","u":"/blog/tags/modal/page/2","b":[]},{"i":345,"t":"3 posts tagged with \"modalservice\"","u":"/blog/tags/modalservice","b":[]},{"i":347,"t":"One post tagged with \"navigation\"","u":"/blog/tags/navigation","b":[]},{"i":349,"t":"3 posts tagged with \"placeholders\"","u":"/blog/tags/placeholders","b":[]},{"i":351,"t":"One post tagged with \"numberinput\"","u":"/blog/tags/numberinput","b":[]},{"i":353,"t":"One post tagged with \"pagination\"","u":"/blog/tags/pagination","b":[]},{"i":355,"t":"5 posts tagged with \"offcanvas\"","u":"/blog/tags/offcanvas","b":[]},{"i":357,"t":"One post tagged with \"preload\"","u":"/blog/tags/preload","b":[]},{"i":359,"t":"11 posts tagged with \"modal\"","u":"/blog/tags/modal","b":[]},{"i":361,"t":"2 posts tagged with \"progress\"","u":"/blog/tags/progress","b":[]},{"i":363,"t":"One post tagged with \"progress-bar\"","u":"/blog/tags/progress-bar","b":[]},{"i":365,"t":"2 posts tagged with \"sidebar\"","u":"/blog/tags/sidebar","b":[]},{"i":367,"t":"2 posts tagged with \"input\"","u":"/blog/tags/input","b":[]},{"i":369,"t":"2 posts tagged with \"switch\"","u":"/blog/tags/switch","b":[]},{"i":371,"t":"One post tagged with \"tabs\"","u":"/blog/tags/tabs","b":[]},{"i":373,"t":"3 posts tagged with \"timeinput\"","u":"/blog/tags/timeinput","b":[]},{"i":375,"t":"One post tagged with \"toast\"","u":"/blog/tags/toast","b":[]},{"i":377,"t":"One post tagged with \"timepicker\"","u":"/blog/tags/timepicker","b":[]},{"i":379,"t":"One post tagged with \"toastservice\"","u":"/blog/tags/toastservice","b":[]},{"i":381,"t":"4 posts tagged with \"toasts\"","u":"/blog/tags/toasts","b":[]},{"i":383,"t":"One post tagged with \"v0.0.2\"","u":"/blog/tags/v-0-0-2","b":[]},{"i":385,"t":"2 posts tagged with \"tooltip\"","u":"/blog/tags/tooltip","b":[]},{"i":387,"t":"One post tagged with \"v0.0.3\"","u":"/blog/tags/v-0-0-3","b":[]},{"i":389,"t":"One post tagged with \"v0.1.0\"","u":"/blog/tags/v-0-1-0","b":[]},{"i":391,"t":"One post tagged with \"v0.0.4\"","u":"/blog/tags/v-0-0-4","b":[]},{"i":393,"t":"One post tagged with \"v0.1.1\"","u":"/blog/tags/v-0-1-1","b":[]},{"i":395,"t":"One post tagged with \"v0.0.1\"","u":"/blog/tags/v-0-0-1","b":[]},{"i":397,"t":"One post tagged with \"v0.2.0\"","u":"/blog/tags/v-0-2-0","b":[]},{"i":399,"t":"One post tagged with \"v0.2.1\"","u":"/blog/tags/v-0-2-1","b":[]},{"i":401,"t":"One post tagged with \"v0.2.3\"","u":"/blog/tags/v-0-2-3","b":[]},{"i":403,"t":"One post tagged with \"v0.2.2\"","u":"/blog/tags/v-0-2-2","b":[]},{"i":405,"t":"One post tagged with \"v0.2.4\"","u":"/blog/tags/v-0-2-4","b":[]},{"i":407,"t":"One post tagged with \"v0.2.5\"","u":"/blog/tags/v-0-2-5","b":[]},{"i":409,"t":"One post tagged with \"v0.2.6\"","u":"/blog/tags/v-0-2-6","b":[]},{"i":411,"t":"One post tagged with \"v0.3.0\"","u":"/blog/tags/v-0-3-0","b":[]},{"i":413,"t":"One post tagged with \"v0.4.0\"","u":"/blog/tags/v-0-4-0","b":[]},{"i":415,"t":"One post tagged with \"v0.4.1\"","u":"/blog/tags/v-0-4-1","b":[]},{"i":417,"t":"One post tagged with \"v0.4.2\"","u":"/blog/tags/v-0-4-2","b":[]},{"i":419,"t":"One post tagged with \"v0.5.0\"","u":"/blog/tags/v-0-5-0","b":[]},{"i":421,"t":"One post tagged with \"v0.5.1\"","u":"/blog/tags/v-0-5-1","b":[]},{"i":423,"t":"One post tagged with \"v0.6.0\"","u":"/blog/tags/v-0-6-0","b":[]},{"i":425,"t":"One post tagged with \"v1.0.0\"","u":"/blog/tags/v-1-0-0","b":[]},{"i":427,"t":"One post tagged with \"v1.0.1\"","u":"/blog/tags/v-1-0-1","b":[]},{"i":429,"t":"One post tagged with \"v1.1.0\"","u":"/blog/tags/v-1-1-0","b":[]},{"i":431,"t":"One post tagged with \"v1.10.0\"","u":"/blog/tags/v-1-10-0","b":[]},{"i":433,"t":"One post tagged with \"v1.10.1\"","u":"/blog/tags/v-1-10-1","b":[]},{"i":435,"t":"One post tagged with \"v1.10.2\"","u":"/blog/tags/v-1-10-2","b":[]},{"i":437,"t":"One post tagged with \"v1.10.3\"","u":"/blog/tags/v-1-10-3","b":[]},{"i":439,"t":"One post tagged with \"v1.2.0\"","u":"/blog/tags/v-1-2-0","b":[]},{"i":441,"t":"One post tagged with \"v1.3.0\"","u":"/blog/tags/v-1-3-0","b":[]},{"i":443,"t":"One post tagged with \"v1.10.4\"","u":"/blog/tags/v-1-10-4","b":[]},{"i":445,"t":"One post tagged with \"v1.3.1\"","u":"/blog/tags/v-1-3-1","b":[]},{"i":447,"t":"One post tagged with \"v1.4.1\"","u":"/blog/tags/v-1-4-1","b":[]},{"i":449,"t":"One post tagged with \"v1.4.0\"","u":"/blog/tags/v-1-4-0","b":[]},{"i":451,"t":"One post tagged with \"v1.4.2\"","u":"/blog/tags/v-1-4-2","b":[]},{"i":453,"t":"One post tagged with \"v1.4.3\"","u":"/blog/tags/v-1-4-3","b":[]},{"i":455,"t":"One post tagged with \"v1.4.4\"","u":"/blog/tags/v-1-4-4","b":[]},{"i":457,"t":"One post tagged with \"v1.5.0\"","u":"/blog/tags/v-1-5-0","b":[]},{"i":459,"t":"One post tagged with \"v1.4.5\"","u":"/blog/tags/v-1-4-5","b":[]},{"i":461,"t":"One post tagged with \"v1.7.0\"","u":"/blog/tags/v-1-7-0","b":[]},{"i":463,"t":"One post tagged with \"v1.6.0\"","u":"/blog/tags/v-1-6-0","b":[]},{"i":465,"t":"One post tagged with \"v1.7.1\"","u":"/blog/tags/v-1-7-1","b":[]},{"i":467,"t":"One post tagged with \"v1.7.3\"","u":"/blog/tags/v-1-7-3","b":[]},{"i":469,"t":"One post tagged with \"v1.7.2\"","u":"/blog/tags/v-1-7-2","b":[]},{"i":471,"t":"One post tagged with \"v1.8.0\"","u":"/blog/tags/v-1-8-0","b":[]},{"i":473,"t":"One post tagged with \"v1.8.2\"","u":"/blog/tags/v-1-8-2","b":[]},{"i":475,"t":"One post tagged with \"v1.8.1\"","u":"/blog/tags/v-1-8-1","b":[]},{"i":477,"t":"One post tagged with \"v1.8.3\"","u":"/blog/tags/v-1-8-3","b":[]},{"i":479,"t":"One post tagged with \"v1.9.0\"","u":"/blog/tags/v-1-9-0","b":[]},{"i":481,"t":"One post tagged with \"v1.9.1\"","u":"/blog/tags/v-1-9-1","b":[]},{"i":483,"t":"One post tagged with \"v1.9.3\"","u":"/blog/tags/v-1-9-3","b":[]},{"i":485,"t":"One post tagged with \"v1.9.2\"","u":"/blog/tags/v-1-9-2","b":[]},{"i":487,"t":"One post tagged with \"v1.9.4\"","u":"/blog/tags/v-1-9-4","b":[]},{"i":489,"t":"One post tagged with \"v1.9.5\"","u":"/blog/tags/v-1-9-5","b":[]},{"i":491,"t":"Blazor Alerts","u":"/components/alerts","b":[]},{"i":493,"t":"Blazor Breadcrumb","u":"/components/breadcrumb","b":[]},{"i":495,"t":"Blazor Callout","u":"/components/callout","b":[]},{"i":497,"t":"Blazor Badge","u":"/components/badge","b":[]},{"i":499,"t":"Blazor Charts","u":"/components/charts","b":[]},{"i":501,"t":"Blazor Card","u":"/components/card","b":[]},{"i":503,"t":"Blazor Buttons","u":"/components/buttons","b":[]},{"i":505,"t":"Blazor Collapse","u":"/components/collapse","b":[]},{"i":507,"t":"Blazor Accordion","u":"/components/accordion","b":[]},{"i":509,"t":"Blazor Confirm Dialog","u":"/components/confirm-dialog","b":[]},{"i":511,"t":"Blazor Offcanvas","u":"/components/offcanvas","b":[]},{"i":513,"t":"Blazor Pagination","u":"/components/pagination","b":[]},{"i":515,"t":"Blazor Modal","u":"/components/modal","b":[]},{"i":517,"t":"Blazor Placeholders","u":"/components/placeholders","b":[]},{"i":519,"t":"Blazor Progress","u":"/components/progress","b":[]},{"i":521,"t":"Blazor Preload","u":"/components/preload","b":[]},{"i":523,"t":"Blazor Toasts","u":"/components/toasts","b":[]},{"i":525,"t":"Blazor Icons","u":"/content/icons","b":[]},{"i":527,"t":"Blazor Tabs","u":"/components/tabs","b":[]},{"i":529,"t":"Blazor Tooltips","u":"/components/tooltips","b":[]},{"i":531,"t":"Blazor Bar Chart","u":"/data-visualization/bar-chart","b":[]},{"i":533,"t":"Blazor Line Chart","u":"/data-visualization/line-chart","b":[]},{"i":535,"t":"Blazor Pie Chart","u":"/data-visualization/pie-chart","b":[]},{"i":537,"t":"Blazor Auto Complete","u":"/forms/autocomplete","b":[]},{"i":539,"t":"Blazor Date Input","u":"/forms/date-input","b":[]},{"i":541,"t":"Blazor Currency Input","u":"/forms/currency-input","b":[]},{"i":543,"t":"Blazor Switch","u":"/forms/switch","b":[]},{"i":545,"t":"Blazor Number Input","u":"/forms/number-input","b":[]},{"i":547,"t":"Getting started - Blazor WebAssembly","u":"/getting-started/blazor-webassembly","b":[]},{"i":549,"t":"Getting started - Blazor Server","u":"/getting-started/blazor-server","b":[]},{"i":551,"t":"Layout Setup - Blazor WebAssembly","u":"/layout/blazor-webassembly","b":[]},{"i":553,"t":"Layout Setup - Blazor WebAssembly","u":"/layout/blazor-server","b":[]},{"i":555,"t":"Getting started - MAUI Blazor App","u":"/getting-started/maui-blazor","b":[]},{"i":557,"t":"Blazor Modal Service","u":"/services/modal","b":[]},{"i":559,"t":"Blazor Time Input","u":"/forms/time-input","b":[]},{"i":561,"t":"Blazor Doughnut Chart","u":"/data-visualization/doughnut-chart","b":[]},{"i":563,"t":"Blazor Dropdown","u":"/components/dropdown","b":[]},{"i":565,"t":"Blazor Sidebar","u":"/components/sidebar","b":[]},{"i":567,"t":"Blazor Grid","u":"/components/grid","b":[]}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/1",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/3",[5,2.977,6,5.84]],["t/5",[5,2.977,7,5.84]],["t/7",[5,2.977,8,5.84]],["t/9",[5,2.977,9,5.84]],["t/11",[5,2.977,10,5.84]],["t/13",[5,2.977,11,5.84]],["t/15",[5,2.977,12,5.84]],["t/17",[5,2.977,13,5.84]],["t/19",[5,2.977,14,5.84]],["t/21",[5,2.977,15,5.84]],["t/23",[5,2.977,16,5.84]],["t/25",[5,2.977,17,5.84]],["t/27",[5,2.977,18,5.84]],["t/29",[5,2.977,19,5.84]],["t/31",[5,2.977,20,5.84]],["t/33",[5,2.977,21,5.84]],["t/35",[5,2.977,22,5.84]],["t/37",[5,2.977,23,5.84]],["t/39",[2,1,3,1.992,24,5.143]],["t/41",[2,1,3,1.992,25,5.143]],["t/43",[2,1,3,1.992,26,5.143]],["t/45",[2,1,3,1.992,27,5.143]],["t/47",[2,1,3,1.992,28,5.143]],["t/49",[2,1,3,1.992,29,5.143]],["t/51",[2,1,3,1.992,30,5.143]],["t/53",[2,1,3,1.992,31,5.143]],["t/55",[2,1,3,1.992,32,5.143]],["t/57",[2,1,3,1.992,33,5.143]],["t/59",[2,1,3,1.992,34,5.143]],["t/61",[2,1,3,1.992,35,5.143]],["t/63",[2,1,3,1.992,36,5.143]],["t/65",[2,1,3,1.992,37,5.143]],["t/67",[2,1,3,1.992,38,5.143]],["t/69",[2,1,3,1.992,39,5.143]],["t/71",[2,1,3,1.992,40,5.143]],["t/73",[2,1,3,1.992,41,5.143]],["t/75",[2,1,3,1.992,42,5.143]],["t/77",[2,1,3,1.992,43,5.143]],["t/79",[2,1,3,1.992,44,5.143]],["t/81",[2,1,3,1.992,45,5.143]],["t/83",[2,1,3,1.992,46,5.143]],["t/85",[2,1,3,1.992,47,5.143]],["t/87",[2,1,3,1.992,48,5.143]],["t/89",[2,1,3,1.992,49,5.143]],["t/91",[2,1,3,1.992,50,5.143]],["t/93",[2,1,3,1.992,51,5.143]],["t/95",[2,1,3,1.992,52,5.143]],["t/97",[2,1,3,1.992,53,5.143]],["t/99",[2,1,3,1.992,54,5.143]],["t/101",[2,1,3,1.992,55,5.143]],["t/103",[2,1,3,1.992,56,5.143]],["t/105",[2,1,3,1.992,57,5.143]],["t/107",[2,1,3,1.992,58,5.143]],["t/109",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/111",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/113",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/115",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/117",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/119",[59,0.613]],["t/121",[59,0.417,60,0.819,61,0.422,62,4.594]],["t/123",[59,0.417,60,0.819,61,0.422,63,4.594]],["t/125",[59,0.417,61,0.422,64,4.594,65,4.594]],["t/127",[2,0.893,59,0.417,61,0.422,66,4.024]],["t/129",[2,0.807,59,0.376,60,0.74,61,0.381,65,4.151]],["t/131",[59,0.417,60,0.819,61,0.422,67,4.594]],["t/133",[2,0.736,59,0.343,60,0.675,61,0.348,68,3.316,69,2.499]],["t/135",[2,0.807,3,1.608,59,0.376,61,0.381,70,3.856]],["t/137",[2,0.807,59,0.376,60,0.74,61,0.381,69,2.74]],["t/139",[71,7.486]],["t/141",[2,0.736,59,0.343,60,0.675,61,0.348,72,3.517,73,2.639]],["t/143",[2,0.807,59,0.376,61,0.381,74,2.265,75,3.46]],["t/145",[2,0.736,59,0.343,61,0.348,74,2.066,75,3.156,76,3.517]],["t/147",[2,0.736,59,0.343,60,0.675,61,0.348,69,2.499,77,3.786]],["t/149",[2,0.807,59,0.376,61,0.381,78,2.893,79,3.188]],["t/151",[2,0.736,59,0.343,60,0.675,61,0.348,79,2.908,80,4.194]],["t/153",[2,0.736,59,0.343,60,0.675,61,0.348,79,2.908,81,4.194]],["t/155",[2,0.736,59,0.343,60,0.675,61,0.348,73,2.639,82,3.156]],["t/157",[2,0.736,59,0.343,60,0.675,61,0.348,79,2.908,83,4.194]],["t/159",[2,0.807,59,0.376,60,0.74,61,0.381,73,2.893]],["t/161",[2,0.736,59,0.343,60,0.675,61,0.348,69,2.499,84,3.786]],["t/163",[2,0.807,59,0.376,60,0.74,61,0.381,82,3.46]],["t/165",[2,0.807,59,0.376,60,0.74,61,0.381,85,3.856]],["t/167",[2,0.736,59,0.343,60,0.675,61,0.348,73,2.639,82,3.156]],["t/169",[2,0.807,59,0.376,60,0.74,61,0.381,86,3.46]],["t/171",[2,0.736,59,0.343,60,0.675,61,0.348,69,2.499,87,3.786]],["t/173",[2,0.807,59,0.376,61,0.381,74,2.265,88,3.856]],["t/175",[2,0.736,59,0.343,60,0.675,61,0.348,68,3.316,86,3.156]],["t/177",[2,0.807,59,0.376,60,0.74,61,0.381,89,4.599]],["t/179",[2,0.807,59,0.376,61,0.381,74,2.265,90,4.599]],["t/181",[2,0.736,59,0.343,60,0.675,61,0.348,91,3.786,92,3.517]],["t/183",[2,0.807,59,0.376,60,0.74,61,0.381,93,3.856]],["t/185",[2,0.807,59,0.376,60,0.74,61,0.381,92,3.856]],["t/187",[2,0.807,59,0.376,60,0.74,61,0.381,94,3.46]],["t/189",[2,0.807,59,0.376,61,0.381,74,2.265,94,3.46]],["t/191",[2,0.893,59,0.417,61,0.422,66,4.024]],["t/193",[2,0.893,59,0.417,61,0.422,66,4.024]],["t/195",[2,0.893,59,0.417,61,0.422,66,4.024]],["t/197",[59,0.417,60,0.819,61,0.422,95,5.089]],["t/199",[59,0.417,61,0.422,96,4.024,97,5.089]],["t/201",[59,0.417,60,0.819,61,0.422,98,5.089]],["t/203",[5,2.341,59,0.417,61,0.422,99,3.667]],["t/205",[5,1.929,59,0.343,60,0.675,61,0.348,91,3.786,92,3.517]],["t/207",[5,2.341,59,0.417,61,0.422,99,3.667]],["t/209",[5,2.341,59,0.417,61,0.422,99,3.667]],["t/211",[5,2.341,59,0.417,61,0.422,99,3.667]],["t/213",[5,2.341,59,0.417,61,0.422,99,3.667]],["t/215",[59,0.417,60,0.819,61,0.422,100,5.089]],["t/217",[59,0.417,61,0.422,74,2.507,101,4.594]],["t/219",[5,2.341,59,0.417,61,0.422,99,3.667]],["t/221",[59,0.417,61,0.422,78,3.202,101,4.594]],["t/223",[59,0.417,60,0.819,61,0.422,102,5.089]],["t/225",[59,0.417,60,0.819,61,0.422,103,5.089]],["t/227",[59,0.417,60,0.819,61,0.422,104,5.089]],["t/229",[59,0.417,60,0.819,61,0.422,105,5.089]],["t/231",[59,0.417,61,0.422,78,3.202,106,5.089]],["t/233",[59,0.417,60,0.819,61,0.422,107,5.089]],["t/235",[59,0.417,61,0.422,96,4.024,108,5.089]],["t/237",[59,0.417,60,0.819,61,0.422,109,5.089]],["t/239",[59,0.417,61,0.422,74,2.507,110,5.089]],["t/241",[59,0.417,60,0.819,61,0.422,111,5.089]],["t/243",[59,0.417,61,0.422,112,4.594,113,4.594]],["t/245",[59,0.417,61,0.422,112,4.594,113,4.594]],["t/247",[59,0.417,61,0.422,74,2.507,114,5.089]],["t/249",[59,0.417,60,0.819,61,0.422,115,5.089]],["t/251",[59,0.417,61,0.422,74,2.507,116,5.089]],["t/253",[59,0.417,61,0.422,64,4.594,117,5.089]],["t/255",[59,0.417,60,0.819,61,0.422,118,5.089]],["t/257",[59,0.417,61,0.422,74,2.507,119,5.089]],["t/259",[59,0.417,60,0.819,61,0.422,120,5.089]],["t/261",[59,0.417,61,0.422,78,3.202,121,5.089]],["t/263",[59,0.417,61,0.422,74,2.507,122,5.089]],["t/265",[59,0.417,60,0.819,61,0.422,123,5.089]],["t/267",[59,0.417,60,0.819,61,0.422,124,5.089]],["t/269",[59,0.417,60,0.819,61,0.422,125,5.089]],["t/271",[59,0.417,61,0.422,78,3.202,126,5.089]],["t/273",[59,0.417,61,0.422,74,2.507,127,5.089]],["t/275",[59,0.417,61,0.422,74,2.507,128,4.594]],["t/277",[59,0.417,61,0.422,129,3.667,130,4.267]],["t/279",[3,1.78,59,0.417,61,0.422,129,3.667]],["t/281",[59,0.417,61,0.422,129,3.667,130,4.267]],["t/283",[59,0.417,60,0.819,61,0.422,128,4.594]],["t/285",[59,0.417,61,0.422,129,3.667,130,4.267]],["t/287",[3,1.78,59,0.417,61,0.422,129,3.667]],["t/289",[59,0.417,60,0.819,61,0.422,131,5.089]],["t/291",[59,0.417,60,0.819,61,0.422,132,4.594]],["t/293",[59,0.417,61,0.422,78,3.202,133,4.267]],["t/295",[59,0.417,60,0.819,61,0.422,134,4.594]],["t/297",[59,0.417,60,0.819,61,0.422,69,3.033]],["t/299",[3,1.78,59,0.417,61,0.422,129,3.667]],["t/301",[59,0.417,60,0.819,61,0.422,69,3.033]],["t/303",[59,0.417,60,0.819,61,0.422,135,4.594]],["t/305",[59,0.417,61,0.422,78,3.202,133,4.267]],["t/307",[59,0.376,60,0.74,61,0.381,75,3.46,76,3.856]],["t/309",[59,0.417,60,0.819,61,0.422,136,5.089]],["t/311",[59,0.417,60,0.819,61,0.422,72,4.267]],["t/313",[59,0.417,60,0.819,61,0.422,137,5.089]],["t/315",[59,0.417,60,0.819,61,0.422,138,4.594]],["t/317",[59,0.417,61,0.422,96,4.024,139,5.089]],["t/319",[59,0.417,61,0.422,74,2.507,140,5.089]],["t/321",[59,0.417,61,0.422,74,2.507,141,5.089]],["t/323",[59,0.417,60,0.819,61,0.422,75,3.829]],["t/325",[59,0.417,60,0.819,61,0.422,142,4.594]],["t/327",[4,3.528,59,0.417,61,0.422,70,4.267]],["t/329",[59,0.417,61,0.422,79,3.528,143,4.594]],["t/331",[59,0.417,61,0.422,79,3.528,143,4.594]],["t/333",[59,0.417,60,0.819,61,0.422,144,4.267]],["t/335",[59,0.417,61,0.422,74,2.507,144,4.267]],["t/337",[59,0.417,60,0.819,61,0.422,145,4.267]],["t/339",[59,0.376,60,0.74,61,0.381,73,2.893,82,3.46]],["t/341",[59,0.417,60,0.819,61,0.422,146,5.089]],["t/343",[59,0.417,61,0.422,147,4.594,148,4.024]],["t/345",[59,0.417,61,0.422,78,3.202,149,5.089]],["t/347",[59,0.417,60,0.819,61,0.422,150,5.089]],["t/349",[59,0.417,61,0.422,78,3.202,151,4.594]],["t/351",[59,0.417,60,0.819,61,0.422,152,5.089]],["t/353",[59,0.417,60,0.819,61,0.422,153,4.594]],["t/355",[59,0.417,61,0.422,70,4.267,85,4.267]],["t/357",[59,0.417,60,0.819,61,0.422,88,4.267]],["t/359",[59,0.417,61,0.422,147,4.594,148,4.024]],["t/361",[59,0.417,61,0.422,74,2.507,86,3.829]],["t/363",[59,0.376,60,0.74,61,0.381,68,3.636,86,3.46]],["t/365",[59,0.417,61,0.422,74,2.507,154,4.594]],["t/367",[59,0.417,61,0.422,73,3.202,74,2.507]],["t/369",[59,0.417,61,0.422,74,2.507,155,4.594]],["t/371",[59,0.417,60,0.819,61,0.422,93,4.267]],["t/373",[59,0.417,61,0.422,78,3.202,156,5.089]],["t/375",[59,0.417,60,0.819,61,0.422,94,3.829]],["t/377",[59,0.417,60,0.819,61,0.422,157,5.089]],["t/379",[59,0.417,60,0.819,61,0.422,158,5.089]],["t/381",[59,0.417,61,0.422,94,3.829,96,4.024]],["t/383",[6,4.594,59,0.417,60,0.819,61,0.422]],["t/385",[59,0.417,61,0.422,74,2.507,159,4.594]],["t/387",[7,4.594,59,0.417,60,0.819,61,0.422]],["t/389",[9,4.594,59,0.417,60,0.819,61,0.422]],["t/391",[10,4.594,59,0.417,60,0.819,61,0.422]],["t/393",[12,4.594,59,0.417,60,0.819,61,0.422]],["t/395",[8,4.594,59,0.417,60,0.819,61,0.422]],["t/397",[11,4.594,59,0.417,60,0.819,61,0.422]],["t/399",[13,4.594,59,0.417,60,0.819,61,0.422]],["t/401",[14,4.594,59,0.417,60,0.819,61,0.422]],["t/403",[16,4.594,59,0.417,60,0.819,61,0.422]],["t/405",[15,4.594,59,0.417,60,0.819,61,0.422]],["t/407",[17,4.594,59,0.417,60,0.819,61,0.422]],["t/409",[19,4.594,59,0.417,60,0.819,61,0.422]],["t/411",[20,4.594,59,0.417,60,0.819,61,0.422]],["t/413",[18,4.594,59,0.417,60,0.819,61,0.422]],["t/415",[21,4.594,59,0.417,60,0.819,61,0.422]],["t/417",[22,4.594,59,0.417,60,0.819,61,0.422]],["t/419",[23,4.594,59,0.417,60,0.819,61,0.422]],["t/421",[24,4.594,59,0.417,60,0.819,61,0.422]],["t/423",[27,4.594,59,0.417,60,0.819,61,0.422]],["t/425",[25,4.594,59,0.417,60,0.819,61,0.422]],["t/427",[26,4.594,59,0.417,60,0.819,61,0.422]],["t/429",[28,4.594,59,0.417,60,0.819,61,0.422]],["t/431",[52,4.594,59,0.417,60,0.819,61,0.422]],["t/433",[54,4.594,59,0.417,60,0.819,61,0.422]],["t/435",[55,4.594,59,0.417,60,0.819,61,0.422]],["t/437",[57,4.594,59,0.417,60,0.819,61,0.422]],["t/439",[29,4.594,59,0.417,60,0.819,61,0.422]],["t/441",[30,4.594,59,0.417,60,0.819,61,0.422]],["t/443",[58,4.594,59,0.417,60,0.819,61,0.422]],["t/445",[34,4.594,59,0.417,60,0.819,61,0.422]],["t/447",[31,4.594,59,0.417,60,0.819,61,0.422]],["t/449",[32,4.594,59,0.417,60,0.819,61,0.422]],["t/451",[35,4.594,59,0.417,60,0.819,61,0.422]],["t/453",[33,4.594,59,0.417,60,0.819,61,0.422]],["t/455",[36,4.594,59,0.417,60,0.819,61,0.422]],["t/457",[38,4.594,59,0.417,60,0.819,61,0.422]],["t/459",[37,4.594,59,0.417,60,0.819,61,0.422]],["t/461",[40,4.594,59,0.417,60,0.819,61,0.422]],["t/463",[39,4.594,59,0.417,60,0.819,61,0.422]],["t/465",[41,4.594,59,0.417,60,0.819,61,0.422]],["t/467",[43,4.594,59,0.417,60,0.819,61,0.422]],["t/469",[42,4.594,59,0.417,60,0.819,61,0.422]],["t/471",[45,4.594,59,0.417,60,0.819,61,0.422]],["t/473",[46,4.594,59,0.417,60,0.819,61,0.422]],["t/475",[44,4.594,59,0.417,60,0.819,61,0.422]],["t/477",[47,4.594,59,0.417,60,0.819,61,0.422]],["t/479",[48,4.594,59,0.417,60,0.819,61,0.422]],["t/481",[53,4.594,59,0.417,60,0.819,61,0.422]],["t/483",[50,4.594,59,0.417,60,0.819,61,0.422]],["t/485",[49,4.594,59,0.417,60,0.819,61,0.422]],["t/487",[56,4.594,59,0.417,60,0.819,61,0.422]],["t/489",[51,4.594,59,0.417,60,0.819,61,0.422]],["t/491",[2,1.135,63,5.84]],["t/493",[2,1.135,132,5.84]],["t/495",[2,1.135,134,5.84]],["t/497",[2,1.135,67,5.84]],["t/499",[2,1.135,69,3.856]],["t/501",[2,1.135,160,6.47]],["t/503",[2,1.135,133,5.425]],["t/505",[2,1.135,135,5.84]],["t/507",[2,1.135,62,5.84]],["t/509",[2,1,75,4.286,76,4.777]],["t/511",[2,1.135,85,5.425]],["t/513",[2,1.135,153,5.84]],["t/515",[2,1.135,148,5.115]],["t/517",[2,1.135,151,5.84]],["t/519",[2,1.135,86,4.868]],["t/521",[2,1.135,88,5.425]],["t/523",[2,1.135,94,4.868]],["t/525",[2,1.135,144,5.425]],["t/527",[2,1.135,93,5.425]],["t/529",[2,1.135,159,5.84]],["t/531",[2,1,68,4.504,69,3.395]],["t/533",[2,1,69,3.395,84,5.143]],["t/535",[2,1,69,3.395,87,5.143]],["t/537",[2,1,161,5.697,162,5.697]],["t/539",[2,1,73,3.584,138,5.143]],["t/541",[2,1,72,4.777,73,3.584]],["t/543",[2,1.135,155,5.84]],["t/545",[2,1,73,3.584,82,4.286]],["t/547",[2,0.893,163,4.267,164,4.267,165,4.267]],["t/549",[2,0.893,163,4.267,164,4.267,166,5.089]],["t/551",[2,0.893,145,4.267,165,4.267,167,4.594]],["t/553",[2,0.893,145,4.267,165,4.267,167,4.594]],["t/555",[2,0.807,163,3.856,164,3.856,168,4.599,169,4.599]],["t/557",[2,1,148,4.504,170,5.697]],["t/559",[2,1,73,3.584,171,5.697]],["t/561",[2,1,69,3.395,77,5.143]],["t/563",[2,1.135,142,5.84]],["t/565",[2,1.135,154,5.84]],["t/567",[2,1.135,79,4.486]]],"invertedIndex":[["",{"_index":1,"t":{"1":{"position":[[5,1]]},"109":{"position":[[5,1]]},"111":{"position":[[5,1]]},"113":{"position":[[5,1]]},"115":{"position":[[5,1]]},"117":{"position":[[5,1]]}}}],["11",{"_index":147,"t":{"343":{"position":[[0,2]]},"359":{"position":[[0,2]]}}}],["13",{"_index":112,"t":{"243":{"position":[[0,2]]},"245":{"position":[[0,2]]}}}],["16",{"_index":143,"t":{"329":{"position":[[0,2]]},"331":{"position":[[0,2]]}}}],["2",{"_index":74,"t":{"143":{"position":[[0,1]]},"145":{"position":[[0,1]]},"173":{"position":[[0,1]]},"179":{"position":[[0,1]]},"189":{"position":[[0,1]]},"217":{"position":[[0,1]]},"239":{"position":[[0,1]]},"247":{"position":[[0,1]]},"251":{"position":[[0,1]]},"257":{"position":[[0,1]]},"263":{"position":[[0,1]]},"273":{"position":[[0,1]]},"275":{"position":[[0,1]]},"319":{"position":[[0,1]]},"321":{"position":[[0,1]]},"335":{"position":[[0,1]]},"361":{"position":[[0,1]]},"365":{"position":[[0,1]]},"367":{"position":[[0,1]]},"369":{"position":[[0,1]]},"385":{"position":[[0,1]]}}}],["26",{"_index":129,"t":{"277":{"position":[[0,2]]},"279":{"position":[[0,2]]},"281":{"position":[[0,2]]},"285":{"position":[[0,2]]},"287":{"position":[[0,2]]},"299":{"position":[[0,2]]}}}],["3",{"_index":78,"t":{"149":{"position":[[0,1]]},"221":{"position":[[0,1]]},"231":{"position":[[0,1]]},"261":{"position":[[0,1]]},"271":{"position":[[0,1]]},"293":{"position":[[0,1]]},"305":{"position":[[0,1]]},"345":{"position":[[0,1]]},"349":{"position":[[0,1]]},"373":{"position":[[0,1]]}}}],["33",{"_index":66,"t":{"127":{"position":[[0,2]]},"191":{"position":[[0,2]]},"193":{"position":[[0,2]]},"195":{"position":[[0,2]]}}}],["4",{"_index":96,"t":{"199":{"position":[[0,1]]},"235":{"position":[[0,1]]},"317":{"position":[[0,1]]},"381":{"position":[[0,1]]}}}],["5",{"_index":70,"t":{"135":{"position":[[0,1]]},"327":{"position":[[0,1]]},"355":{"position":[[0,1]]}}}],["53",{"_index":99,"t":{"203":{"position":[[0,2]]},"207":{"position":[[0,2]]},"209":{"position":[[0,2]]},"211":{"position":[[0,2]]},"213":{"position":[[0,2]]},"219":{"position":[[0,2]]}}}],["8",{"_index":64,"t":{"125":{"position":[[0,1]]},"253":{"position":[[0,1]]}}}],["accordion",{"_index":62,"t":{"121":{"position":[[21,11]]},"507":{"position":[[7,9]]}}}],["alert",{"_index":63,"t":{"123":{"position":[[21,7]]},"491":{"position":[[7,6]]}}}],["app",{"_index":169,"t":{"555":{"position":[[30,3]]}}}],["archiv",{"_index":71,"t":{"139":{"position":[[0,7]]}}}],["auto",{"_index":161,"t":{"537":{"position":[[7,4]]}}}],["autocomplet",{"_index":65,"t":{"125":{"position":[[20,14]]},"129":{"position":[[29,13]]}}}],["badg",{"_index":67,"t":{"131":{"position":[[21,7]]},"497":{"position":[[7,5]]}}}],["bar",{"_index":68,"t":{"133":{"position":[[29,3]]},"175":{"position":[[38,4]]},"363":{"position":[[31,4]]},"531":{"position":[[7,3]]}}}],["blazor",{"_index":2,"t":{"1":{"position":[[7,6]]},"39":{"position":[[0,6]]},"41":{"position":[[0,6]]},"43":{"position":[[0,6]]},"45":{"position":[[0,6]]},"47":{"position":[[0,6]]},"49":{"position":[[0,6]]},"51":{"position":[[0,6]]},"53":{"position":[[0,6]]},"55":{"position":[[0,6]]},"57":{"position":[[0,6]]},"59":{"position":[[0,6]]},"61":{"position":[[0,6]]},"63":{"position":[[0,6]]},"65":{"position":[[0,6]]},"67":{"position":[[0,6]]},"69":{"position":[[0,6]]},"71":{"position":[[0,6]]},"73":{"position":[[0,6]]},"75":{"position":[[0,6]]},"77":{"position":[[0,6]]},"79":{"position":[[0,6]]},"81":{"position":[[0,6]]},"83":{"position":[[0,6]]},"85":{"position":[[0,6]]},"87":{"position":[[0,6]]},"89":{"position":[[0,6]]},"91":{"position":[[0,6]]},"93":{"position":[[0,6]]},"95":{"position":[[0,6]]},"97":{"position":[[0,6]]},"99":{"position":[[0,6]]},"101":{"position":[[0,6]]},"103":{"position":[[0,6]]},"105":{"position":[[0,6]]},"107":{"position":[[0,6]]},"109":{"position":[[7,6]]},"111":{"position":[[7,6]]},"113":{"position":[[7,6]]},"115":{"position":[[7,6]]},"117":{"position":[[7,6]]},"127":{"position":[[21,8]]},"129":{"position":[[21,7]]},"133":{"position":[[21,7]]},"135":{"position":[[20,7]]},"137":{"position":[[21,7]]},"141":{"position":[[21,7]]},"143":{"position":[[20,7]]},"145":{"position":[[20,7]]},"147":{"position":[[21,7]]},"149":{"position":[[20,7]]},"151":{"position":[[21,7]]},"153":{"position":[[21,7]]},"155":{"position":[[21,7]]},"157":{"position":[[21,7]]},"159":{"position":[[21,7]]},"161":{"position":[[21,7]]},"163":{"position":[[21,7]]},"165":{"position":[[21,7]]},"167":{"position":[[21,7]]},"169":{"position":[[21,7]]},"171":{"position":[[21,7]]},"173":{"position":[[20,7]]},"175":{"position":[[21,7]]},"177":{"position":[[21,7]]},"179":{"position":[[20,7]]},"181":{"position":[[21,7]]},"183":{"position":[[21,7]]},"185":{"position":[[21,7]]},"187":{"position":[[21,7]]},"189":{"position":[[20,7]]},"191":{"position":[[21,8]]},"193":{"position":[[21,8]]},"195":{"position":[[21,8]]},"491":{"position":[[0,6]]},"493":{"position":[[0,6]]},"495":{"position":[[0,6]]},"497":{"position":[[0,6]]},"499":{"position":[[0,6]]},"501":{"position":[[0,6]]},"503":{"position":[[0,6]]},"505":{"position":[[0,6]]},"507":{"position":[[0,6]]},"509":{"position":[[0,6]]},"511":{"position":[[0,6]]},"513":{"position":[[0,6]]},"515":{"position":[[0,6]]},"517":{"position":[[0,6]]},"519":{"position":[[0,6]]},"521":{"position":[[0,6]]},"523":{"position":[[0,6]]},"525":{"position":[[0,6]]},"527":{"position":[[0,6]]},"529":{"position":[[0,6]]},"531":{"position":[[0,6]]},"533":{"position":[[0,6]]},"535":{"position":[[0,6]]},"537":{"position":[[0,6]]},"539":{"position":[[0,6]]},"541":{"position":[[0,6]]},"543":{"position":[[0,6]]},"545":{"position":[[0,6]]},"547":{"position":[[18,6]]},"549":{"position":[[18,6]]},"551":{"position":[[15,6]]},"553":{"position":[[15,6]]},"555":{"position":[[23,6]]},"557":{"position":[[0,6]]},"559":{"position":[[0,6]]},"561":{"position":[[0,6]]},"563":{"position":[[0,6]]},"565":{"position":[[0,6]]},"567":{"position":[[0,6]]}}}],["blazoraccordion",{"_index":95,"t":{"197":{"position":[[21,17]]}}}],["blazorautocomplet",{"_index":97,"t":{"199":{"position":[[20,20]]}}}],["blazorbadg",{"_index":98,"t":{"201":{"position":[[21,13]]}}}],["blazorbootstrap",{"_index":5,"t":{"3":{"position":[[0,15]]},"5":{"position":[[0,15]]},"7":{"position":[[0,15]]},"9":{"position":[[0,15]]},"11":{"position":[[0,15]]},"13":{"position":[[0,15]]},"15":{"position":[[0,15]]},"17":{"position":[[0,15]]},"19":{"position":[[0,15]]},"21":{"position":[[0,15]]},"23":{"position":[[0,15]]},"25":{"position":[[0,15]]},"27":{"position":[[0,15]]},"29":{"position":[[0,15]]},"31":{"position":[[0,15]]},"33":{"position":[[0,15]]},"35":{"position":[[0,15]]},"37":{"position":[[0,15]]},"203":{"position":[[21,17]]},"205":{"position":[[21,16]]},"207":{"position":[[21,17]]},"209":{"position":[[21,17]]},"211":{"position":[[21,17]]},"213":{"position":[[21,17]]},"219":{"position":[[21,17]]}}}],["blazorbreadcrumb",{"_index":100,"t":{"215":{"position":[[21,18]]}}}],["blazorbutton",{"_index":101,"t":{"217":{"position":[[20,14]]},"221":{"position":[[20,15]]}}}],["blazorchart",{"_index":102,"t":{"223":{"position":[[21,13]]}}}],["blazorcollaps",{"_index":103,"t":{"225":{"position":[[21,16]]}}}],["blazorconfirmdialog",{"_index":105,"t":{"229":{"position":[[21,21]]}}}],["blazorconfirmmod",{"_index":104,"t":{"227":{"position":[[21,20]]}}}],["blazorcurrencyinput",{"_index":106,"t":{"231":{"position":[[20,21]]}}}],["blazord",{"_index":107,"t":{"233":{"position":[[21,12]]}}}],["blazordateinput",{"_index":108,"t":{"235":{"position":[[20,17]]}}}],["blazordatepick",{"_index":110,"t":{"239":{"position":[[20,18]]}}}],["blazordialog",{"_index":109,"t":{"237":{"position":[[21,14]]}}}],["blazordropdown",{"_index":111,"t":{"241":{"position":[[21,16]]}}}],["blazorgrid",{"_index":113,"t":{"243":{"position":[[21,12]]},"245":{"position":[[21,12]]}}}],["blazoricon",{"_index":114,"t":{"247":{"position":[[20,12]]}}}],["blazormod",{"_index":117,"t":{"253":{"position":[[20,13]]}}}],["blazormodalservic",{"_index":116,"t":{"251":{"position":[[20,20]]}}}],["blazornumb",{"_index":115,"t":{"249":{"position":[[21,14]]}}}],["blazornumberinput",{"_index":118,"t":{"255":{"position":[[21,19]]}}}],["blazoroffcanva",{"_index":121,"t":{"261":{"position":[[20,17]]}}}],["blazorprogress",{"_index":120,"t":{"259":{"position":[[21,16]]}}}],["blazorsidebar",{"_index":119,"t":{"257":{"position":[[20,15]]}}}],["blazorswitch",{"_index":122,"t":{"263":{"position":[[20,14]]}}}],["blazortab",{"_index":123,"t":{"265":{"position":[[21,12]]}}}],["blazortim",{"_index":125,"t":{"269":{"position":[[21,12]]}}}],["blazortimeinput",{"_index":126,"t":{"271":{"position":[[20,17]]}}}],["blazortimepick",{"_index":124,"t":{"267":{"position":[[21,18]]}}}],["blazortoast",{"_index":128,"t":{"275":{"position":[[20,14]]},"283":{"position":[[21,13]]}}}],["blazortooltip",{"_index":127,"t":{"273":{"position":[[20,15]]}}}],["blog",{"_index":0,"t":{"1":{"position":[[0,4]]},"109":{"position":[[0,4]]},"111":{"position":[[0,4]]},"113":{"position":[[0,4]]},"115":{"position":[[0,4]]},"117":{"position":[[0,4]]}}}],["bootstrap",{"_index":3,"t":{"1":{"position":[[14,9]]},"39":{"position":[[7,9]]},"41":{"position":[[7,9]]},"43":{"position":[[7,9]]},"45":{"position":[[7,9]]},"47":{"position":[[7,9]]},"49":{"position":[[7,9]]},"51":{"position":[[7,9]]},"53":{"position":[[7,9]]},"55":{"position":[[7,9]]},"57":{"position":[[7,9]]},"59":{"position":[[7,9]]},"61":{"position":[[7,9]]},"63":{"position":[[7,9]]},"65":{"position":[[7,9]]},"67":{"position":[[7,9]]},"69":{"position":[[7,9]]},"71":{"position":[[7,9]]},"73":{"position":[[7,9]]},"75":{"position":[[7,9]]},"77":{"position":[[7,9]]},"79":{"position":[[7,9]]},"81":{"position":[[7,9]]},"83":{"position":[[7,9]]},"85":{"position":[[7,9]]},"87":{"position":[[7,9]]},"89":{"position":[[7,9]]},"91":{"position":[[7,9]]},"93":{"position":[[7,9]]},"95":{"position":[[7,9]]},"97":{"position":[[7,9]]},"99":{"position":[[7,9]]},"101":{"position":[[7,9]]},"103":{"position":[[7,9]]},"105":{"position":[[7,9]]},"107":{"position":[[7,9]]},"109":{"position":[[14,9]]},"111":{"position":[[14,9]]},"113":{"position":[[14,9]]},"115":{"position":[[14,9]]},"117":{"position":[[14,9]]},"135":{"position":[[28,10]]},"279":{"position":[[21,11]]},"287":{"position":[[21,11]]},"299":{"position":[[21,11]]}}}],["bootstrap5",{"_index":130,"t":{"277":{"position":[[21,12]]},"281":{"position":[[21,12]]},"285":{"position":[[21,12]]}}}],["breadcrumb",{"_index":132,"t":{"291":{"position":[[21,12]]},"493":{"position":[[7,10]]}}}],["breadcrumbservic",{"_index":131,"t":{"289":{"position":[[21,19]]}}}],["button",{"_index":133,"t":{"293":{"position":[[20,8]]},"305":{"position":[[20,9]]},"503":{"position":[[7,7]]}}}],["callout",{"_index":134,"t":{"295":{"position":[[21,9]]},"495":{"position":[[7,7]]}}}],["card",{"_index":160,"t":{"501":{"position":[[7,4]]}}}],["chart",{"_index":69,"t":{"133":{"position":[[33,6]]},"137":{"position":[[29,7]]},"147":{"position":[[38,6]]},"161":{"position":[[34,6]]},"171":{"position":[[33,6]]},"297":{"position":[[21,7]]},"301":{"position":[[21,8]]},"499":{"position":[[7,6]]},"531":{"position":[[11,5]]},"533":{"position":[[12,5]]},"535":{"position":[[11,5]]},"561":{"position":[[16,5]]}}}],["collaps",{"_index":135,"t":{"303":{"position":[[21,10]]},"505":{"position":[[7,8]]}}}],["complet",{"_index":162,"t":{"537":{"position":[[12,8]]}}}],["confirm",{"_index":76,"t":{"145":{"position":[[28,7]]},"307":{"position":[[21,8]]},"509":{"position":[[7,7]]}}}],["confirmdialog",{"_index":136,"t":{"309":{"position":[[21,15]]}}}],["confirmmod",{"_index":137,"t":{"313":{"position":[[21,14]]}}}],["currenc",{"_index":72,"t":{"141":{"position":[[29,8]]},"311":{"position":[[21,10]]},"541":{"position":[[7,8]]}}}],["currencyinput",{"_index":140,"t":{"319":{"position":[[20,15]]}}}],["date",{"_index":138,"t":{"315":{"position":[[21,6]]},"539":{"position":[[7,4]]}}}],["dateinput",{"_index":139,"t":{"317":{"position":[[20,11]]}}}],["datepick",{"_index":141,"t":{"321":{"position":[[20,12]]}}}],["dialog",{"_index":75,"t":{"143":{"position":[[28,7]]},"145":{"position":[[36,7]]},"307":{"position":[[30,7]]},"323":{"position":[[21,8]]},"509":{"position":[[15,6]]}}}],["doc",{"_index":4,"t":{"1":{"position":[[24,4]]},"109":{"position":[[24,4]]},"111":{"position":[[24,4]]},"113":{"position":[[24,4]]},"115":{"position":[[24,4]]},"117":{"position":[[24,4]]},"327":{"position":[[20,6]]}}}],["doughnut",{"_index":77,"t":{"147":{"position":[[29,8]]},"561":{"position":[[7,8]]}}}],["dropdown",{"_index":142,"t":{"325":{"position":[[21,10]]},"563":{"position":[[7,8]]}}}],["filter",{"_index":80,"t":{"151":{"position":[[34,10]]}}}],["get",{"_index":163,"t":{"547":{"position":[[0,7]]},"549":{"position":[[0,7]]},"555":{"position":[[0,7]]}}}],["grid",{"_index":79,"t":{"149":{"position":[[28,5]]},"151":{"position":[[29,4]]},"153":{"position":[[29,4]]},"157":{"position":[[29,4]]},"329":{"position":[[21,6]]},"331":{"position":[[21,6]]},"567":{"position":[[7,4]]}}}],["icon",{"_index":144,"t":{"333":{"position":[[21,7]]},"335":{"position":[[20,6]]},"525":{"position":[[7,5]]}}}],["input",{"_index":73,"t":{"141":{"position":[[38,6]]},"155":{"position":[[29,5]]},"159":{"position":[[29,6]]},"167":{"position":[[36,6]]},"339":{"position":[[21,6]]},"367":{"position":[[20,7]]},"539":{"position":[[12,5]]},"541":{"position":[[16,5]]},"545":{"position":[[14,5]]},"559":{"position":[[12,5]]}}}],["layout",{"_index":145,"t":{"337":{"position":[[21,8]]},"551":{"position":[[0,6]]},"553":{"position":[[0,6]]}}}],["leftmenu",{"_index":146,"t":{"341":{"position":[[21,10]]}}}],["line",{"_index":84,"t":{"161":{"position":[[29,4]]},"533":{"position":[[7,4]]}}}],["maui",{"_index":168,"t":{"555":{"position":[[18,4]]}}}],["modal",{"_index":148,"t":{"343":{"position":[[21,7]]},"359":{"position":[[21,7]]},"515":{"position":[[7,5]]},"557":{"position":[[7,5]]}}}],["modalservic",{"_index":149,"t":{"345":{"position":[[20,14]]}}}],["navig",{"_index":150,"t":{"347":{"position":[[21,12]]}}}],["number",{"_index":82,"t":{"155":{"position":[[35,7]]},"163":{"position":[[29,7]]},"167":{"position":[[29,6]]},"339":{"position":[[28,7]]},"545":{"position":[[7,6]]}}}],["numberinput",{"_index":152,"t":{"351":{"position":[[21,13]]}}}],["offcanva",{"_index":85,"t":{"165":{"position":[[29,10]]},"355":{"position":[[20,11]]},"511":{"position":[[7,9]]}}}],["on",{"_index":60,"t":{"121":{"position":[[0,3]]},"123":{"position":[[0,3]]},"129":{"position":[[0,3]]},"131":{"position":[[0,3]]},"133":{"position":[[0,3]]},"137":{"position":[[0,3]]},"141":{"position":[[0,3]]},"147":{"position":[[0,3]]},"151":{"position":[[0,3]]},"153":{"position":[[0,3]]},"155":{"position":[[0,3]]},"157":{"position":[[0,3]]},"159":{"position":[[0,3]]},"161":{"position":[[0,3]]},"163":{"position":[[0,3]]},"165":{"position":[[0,3]]},"167":{"position":[[0,3]]},"169":{"position":[[0,3]]},"171":{"position":[[0,3]]},"175":{"position":[[0,3]]},"177":{"position":[[0,3]]},"181":{"position":[[0,3]]},"183":{"position":[[0,3]]},"185":{"position":[[0,3]]},"187":{"position":[[0,3]]},"197":{"position":[[0,3]]},"201":{"position":[[0,3]]},"205":{"position":[[0,3]]},"215":{"position":[[0,3]]},"223":{"position":[[0,3]]},"225":{"position":[[0,3]]},"227":{"position":[[0,3]]},"229":{"position":[[0,3]]},"233":{"position":[[0,3]]},"237":{"position":[[0,3]]},"241":{"position":[[0,3]]},"249":{"position":[[0,3]]},"255":{"position":[[0,3]]},"259":{"position":[[0,3]]},"265":{"position":[[0,3]]},"267":{"position":[[0,3]]},"269":{"position":[[0,3]]},"283":{"position":[[0,3]]},"289":{"position":[[0,3]]},"291":{"position":[[0,3]]},"295":{"position":[[0,3]]},"297":{"position":[[0,3]]},"301":{"position":[[0,3]]},"303":{"position":[[0,3]]},"307":{"position":[[0,3]]},"309":{"position":[[0,3]]},"311":{"position":[[0,3]]},"313":{"position":[[0,3]]},"315":{"position":[[0,3]]},"323":{"position":[[0,3]]},"325":{"position":[[0,3]]},"333":{"position":[[0,3]]},"337":{"position":[[0,3]]},"339":{"position":[[0,3]]},"341":{"position":[[0,3]]},"347":{"position":[[0,3]]},"351":{"position":[[0,3]]},"353":{"position":[[0,3]]},"357":{"position":[[0,3]]},"363":{"position":[[0,3]]},"371":{"position":[[0,3]]},"375":{"position":[[0,3]]},"377":{"position":[[0,3]]},"379":{"position":[[0,3]]},"383":{"position":[[0,3]]},"387":{"position":[[0,3]]},"389":{"position":[[0,3]]},"391":{"position":[[0,3]]},"393":{"position":[[0,3]]},"395":{"position":[[0,3]]},"397":{"position":[[0,3]]},"399":{"position":[[0,3]]},"401":{"position":[[0,3]]},"403":{"position":[[0,3]]},"405":{"position":[[0,3]]},"407":{"position":[[0,3]]},"409":{"position":[[0,3]]},"411":{"position":[[0,3]]},"413":{"position":[[0,3]]},"415":{"position":[[0,3]]},"417":{"position":[[0,3]]},"419":{"position":[[0,3]]},"421":{"position":[[0,3]]},"423":{"position":[[0,3]]},"425":{"position":[[0,3]]},"427":{"position":[[0,3]]},"429":{"position":[[0,3]]},"431":{"position":[[0,3]]},"433":{"position":[[0,3]]},"435":{"position":[[0,3]]},"437":{"position":[[0,3]]},"439":{"position":[[0,3]]},"441":{"position":[[0,3]]},"443":{"position":[[0,3]]},"445":{"position":[[0,3]]},"447":{"position":[[0,3]]},"449":{"position":[[0,3]]},"451":{"position":[[0,3]]},"453":{"position":[[0,3]]},"455":{"position":[[0,3]]},"457":{"position":[[0,3]]},"459":{"position":[[0,3]]},"461":{"position":[[0,3]]},"463":{"position":[[0,3]]},"465":{"position":[[0,3]]},"467":{"position":[[0,3]]},"469":{"position":[[0,3]]},"471":{"position":[[0,3]]},"473":{"position":[[0,3]]},"475":{"position":[[0,3]]},"477":{"position":[[0,3]]},"479":{"position":[[0,3]]},"481":{"position":[[0,3]]},"483":{"position":[[0,3]]},"485":{"position":[[0,3]]},"487":{"position":[[0,3]]},"489":{"position":[[0,3]]}}}],["page",{"_index":83,"t":{"157":{"position":[[34,7]]}}}],["pagin",{"_index":153,"t":{"353":{"position":[[21,12]]},"513":{"position":[[7,10]]}}}],["pie",{"_index":87,"t":{"171":{"position":[[29,3]]},"535":{"position":[[7,3]]}}}],["placehold",{"_index":151,"t":{"349":{"position":[[20,14]]},"517":{"position":[[7,12]]}}}],["post",{"_index":61,"t":{"121":{"position":[[4,4]]},"123":{"position":[[4,4]]},"125":{"position":[[2,5]]},"127":{"position":[[3,5]]},"129":{"position":[[4,4]]},"131":{"position":[[4,4]]},"133":{"position":[[4,4]]},"135":{"position":[[2,5]]},"137":{"position":[[4,4]]},"141":{"position":[[4,4]]},"143":{"position":[[2,5]]},"145":{"position":[[2,5]]},"147":{"position":[[4,4]]},"149":{"position":[[2,5]]},"151":{"position":[[4,4]]},"153":{"position":[[4,4]]},"155":{"position":[[4,4]]},"157":{"position":[[4,4]]},"159":{"position":[[4,4]]},"161":{"position":[[4,4]]},"163":{"position":[[4,4]]},"165":{"position":[[4,4]]},"167":{"position":[[4,4]]},"169":{"position":[[4,4]]},"171":{"position":[[4,4]]},"173":{"position":[[2,5]]},"175":{"position":[[4,4]]},"177":{"position":[[4,4]]},"179":{"position":[[2,5]]},"181":{"position":[[4,4]]},"183":{"position":[[4,4]]},"185":{"position":[[4,4]]},"187":{"position":[[4,4]]},"189":{"position":[[2,5]]},"191":{"position":[[3,5]]},"193":{"position":[[3,5]]},"195":{"position":[[3,5]]},"197":{"position":[[4,4]]},"199":{"position":[[2,5]]},"201":{"position":[[4,4]]},"203":{"position":[[3,5]]},"205":{"position":[[4,4]]},"207":{"position":[[3,5]]},"209":{"position":[[3,5]]},"211":{"position":[[3,5]]},"213":{"position":[[3,5]]},"215":{"position":[[4,4]]},"217":{"position":[[2,5]]},"219":{"position":[[3,5]]},"221":{"position":[[2,5]]},"223":{"position":[[4,4]]},"225":{"position":[[4,4]]},"227":{"position":[[4,4]]},"229":{"position":[[4,4]]},"231":{"position":[[2,5]]},"233":{"position":[[4,4]]},"235":{"position":[[2,5]]},"237":{"position":[[4,4]]},"239":{"position":[[2,5]]},"241":{"position":[[4,4]]},"243":{"position":[[3,5]]},"245":{"position":[[3,5]]},"247":{"position":[[2,5]]},"249":{"position":[[4,4]]},"251":{"position":[[2,5]]},"253":{"position":[[2,5]]},"255":{"position":[[4,4]]},"257":{"position":[[2,5]]},"259":{"position":[[4,4]]},"261":{"position":[[2,5]]},"263":{"position":[[2,5]]},"265":{"position":[[4,4]]},"267":{"position":[[4,4]]},"269":{"position":[[4,4]]},"271":{"position":[[2,5]]},"273":{"position":[[2,5]]},"275":{"position":[[2,5]]},"277":{"position":[[3,5]]},"279":{"position":[[3,5]]},"281":{"position":[[3,5]]},"283":{"position":[[4,4]]},"285":{"position":[[3,5]]},"287":{"position":[[3,5]]},"289":{"position":[[4,4]]},"291":{"position":[[4,4]]},"293":{"position":[[2,5]]},"295":{"position":[[4,4]]},"297":{"position":[[4,4]]},"299":{"position":[[3,5]]},"301":{"position":[[4,4]]},"303":{"position":[[4,4]]},"305":{"position":[[2,5]]},"307":{"position":[[4,4]]},"309":{"position":[[4,4]]},"311":{"position":[[4,4]]},"313":{"position":[[4,4]]},"315":{"position":[[4,4]]},"317":{"position":[[2,5]]},"319":{"position":[[2,5]]},"321":{"position":[[2,5]]},"323":{"position":[[4,4]]},"325":{"position":[[4,4]]},"327":{"position":[[2,5]]},"329":{"position":[[3,5]]},"331":{"position":[[3,5]]},"333":{"position":[[4,4]]},"335":{"position":[[2,5]]},"337":{"position":[[4,4]]},"339":{"position":[[4,4]]},"341":{"position":[[4,4]]},"343":{"position":[[3,5]]},"345":{"position":[[2,5]]},"347":{"position":[[4,4]]},"349":{"position":[[2,5]]},"351":{"position":[[4,4]]},"353":{"position":[[4,4]]},"355":{"position":[[2,5]]},"357":{"position":[[4,4]]},"359":{"position":[[3,5]]},"361":{"position":[[2,5]]},"363":{"position":[[4,4]]},"365":{"position":[[2,5]]},"367":{"position":[[2,5]]},"369":{"position":[[2,5]]},"371":{"position":[[4,4]]},"373":{"position":[[2,5]]},"375":{"position":[[4,4]]},"377":{"position":[[4,4]]},"379":{"position":[[4,4]]},"381":{"position":[[2,5]]},"383":{"position":[[4,4]]},"385":{"position":[[2,5]]},"387":{"position":[[4,4]]},"389":{"position":[[4,4]]},"391":{"position":[[4,4]]},"393":{"position":[[4,4]]},"395":{"position":[[4,4]]},"397":{"position":[[4,4]]},"399":{"position":[[4,4]]},"401":{"position":[[4,4]]},"403":{"position":[[4,4]]},"405":{"position":[[4,4]]},"407":{"position":[[4,4]]},"409":{"position":[[4,4]]},"411":{"position":[[4,4]]},"413":{"position":[[4,4]]},"415":{"position":[[4,4]]},"417":{"position":[[4,4]]},"419":{"position":[[4,4]]},"421":{"position":[[4,4]]},"423":{"position":[[4,4]]},"425":{"position":[[4,4]]},"427":{"position":[[4,4]]},"429":{"position":[[4,4]]},"431":{"position":[[4,4]]},"433":{"position":[[4,4]]},"435":{"position":[[4,4]]},"437":{"position":[[4,4]]},"439":{"position":[[4,4]]},"441":{"position":[[4,4]]},"443":{"position":[[4,4]]},"445":{"position":[[4,4]]},"447":{"position":[[4,4]]},"449":{"position":[[4,4]]},"451":{"position":[[4,4]]},"453":{"position":[[4,4]]},"455":{"position":[[4,4]]},"457":{"position":[[4,4]]},"459":{"position":[[4,4]]},"461":{"position":[[4,4]]},"463":{"position":[[4,4]]},"465":{"position":[[4,4]]},"467":{"position":[[4,4]]},"469":{"position":[[4,4]]},"471":{"position":[[4,4]]},"473":{"position":[[4,4]]},"475":{"position":[[4,4]]},"477":{"position":[[4,4]]},"479":{"position":[[4,4]]},"481":{"position":[[4,4]]},"483":{"position":[[4,4]]},"485":{"position":[[4,4]]},"487":{"position":[[4,4]]},"489":{"position":[[4,4]]}}}],["preload",{"_index":88,"t":{"173":{"position":[[28,8]]},"357":{"position":[[21,9]]},"521":{"position":[[7,7]]}}}],["progress",{"_index":86,"t":{"169":{"position":[[29,9]]},"175":{"position":[[29,8]]},"361":{"position":[[20,10]]},"363":{"position":[[21,9]]},"519":{"position":[[7,8]]}}}],["server",{"_index":166,"t":{"549":{"position":[[25,6]]}}}],["servic",{"_index":170,"t":{"557":{"position":[[13,7]]}}}],["setup",{"_index":167,"t":{"551":{"position":[[7,5]]},"553":{"position":[[7,5]]}}}],["sidebar",{"_index":154,"t":{"365":{"position":[[20,9]]},"565":{"position":[[7,7]]}}}],["sidemod",{"_index":89,"t":{"177":{"position":[[29,10]]}}}],["sort",{"_index":81,"t":{"153":{"position":[[34,8]]}}}],["spinner",{"_index":90,"t":{"179":{"position":[[28,8]]}}}],["start",{"_index":164,"t":{"547":{"position":[[8,7]]},"549":{"position":[[8,7]]},"555":{"position":[[8,7]]}}}],["starter",{"_index":91,"t":{"181":{"position":[[29,7]]},"205":{"position":[[38,7]]}}}],["switch",{"_index":155,"t":{"369":{"position":[[20,8]]},"543":{"position":[[7,6]]}}}],["tab",{"_index":93,"t":{"183":{"position":[[29,5]]},"371":{"position":[[21,6]]},"527":{"position":[[7,4]]}}}],["tag",{"_index":59,"t":{"119":{"position":[[0,4]]},"121":{"position":[[9,6]]},"123":{"position":[[9,6]]},"125":{"position":[[8,6]]},"127":{"position":[[9,6]]},"129":{"position":[[9,6]]},"131":{"position":[[9,6]]},"133":{"position":[[9,6]]},"135":{"position":[[8,6]]},"137":{"position":[[9,6]]},"141":{"position":[[9,6]]},"143":{"position":[[8,6]]},"145":{"position":[[8,6]]},"147":{"position":[[9,6]]},"149":{"position":[[8,6]]},"151":{"position":[[9,6]]},"153":{"position":[[9,6]]},"155":{"position":[[9,6]]},"157":{"position":[[9,6]]},"159":{"position":[[9,6]]},"161":{"position":[[9,6]]},"163":{"position":[[9,6]]},"165":{"position":[[9,6]]},"167":{"position":[[9,6]]},"169":{"position":[[9,6]]},"171":{"position":[[9,6]]},"173":{"position":[[8,6]]},"175":{"position":[[9,6]]},"177":{"position":[[9,6]]},"179":{"position":[[8,6]]},"181":{"position":[[9,6]]},"183":{"position":[[9,6]]},"185":{"position":[[9,6]]},"187":{"position":[[9,6]]},"189":{"position":[[8,6]]},"191":{"position":[[9,6]]},"193":{"position":[[9,6]]},"195":{"position":[[9,6]]},"197":{"position":[[9,6]]},"199":{"position":[[8,6]]},"201":{"position":[[9,6]]},"203":{"position":[[9,6]]},"205":{"position":[[9,6]]},"207":{"position":[[9,6]]},"209":{"position":[[9,6]]},"211":{"position":[[9,6]]},"213":{"position":[[9,6]]},"215":{"position":[[9,6]]},"217":{"position":[[8,6]]},"219":{"position":[[9,6]]},"221":{"position":[[8,6]]},"223":{"position":[[9,6]]},"225":{"position":[[9,6]]},"227":{"position":[[9,6]]},"229":{"position":[[9,6]]},"231":{"position":[[8,6]]},"233":{"position":[[9,6]]},"235":{"position":[[8,6]]},"237":{"position":[[9,6]]},"239":{"position":[[8,6]]},"241":{"position":[[9,6]]},"243":{"position":[[9,6]]},"245":{"position":[[9,6]]},"247":{"position":[[8,6]]},"249":{"position":[[9,6]]},"251":{"position":[[8,6]]},"253":{"position":[[8,6]]},"255":{"position":[[9,6]]},"257":{"position":[[8,6]]},"259":{"position":[[9,6]]},"261":{"position":[[8,6]]},"263":{"position":[[8,6]]},"265":{"position":[[9,6]]},"267":{"position":[[9,6]]},"269":{"position":[[9,6]]},"271":{"position":[[8,6]]},"273":{"position":[[8,6]]},"275":{"position":[[8,6]]},"277":{"position":[[9,6]]},"279":{"position":[[9,6]]},"281":{"position":[[9,6]]},"283":{"position":[[9,6]]},"285":{"position":[[9,6]]},"287":{"position":[[9,6]]},"289":{"position":[[9,6]]},"291":{"position":[[9,6]]},"293":{"position":[[8,6]]},"295":{"position":[[9,6]]},"297":{"position":[[9,6]]},"299":{"position":[[9,6]]},"301":{"position":[[9,6]]},"303":{"position":[[9,6]]},"305":{"position":[[8,6]]},"307":{"position":[[9,6]]},"309":{"position":[[9,6]]},"311":{"position":[[9,6]]},"313":{"position":[[9,6]]},"315":{"position":[[9,6]]},"317":{"position":[[8,6]]},"319":{"position":[[8,6]]},"321":{"position":[[8,6]]},"323":{"position":[[9,6]]},"325":{"position":[[9,6]]},"327":{"position":[[8,6]]},"329":{"position":[[9,6]]},"331":{"position":[[9,6]]},"333":{"position":[[9,6]]},"335":{"position":[[8,6]]},"337":{"position":[[9,6]]},"339":{"position":[[9,6]]},"341":{"position":[[9,6]]},"343":{"position":[[9,6]]},"345":{"position":[[8,6]]},"347":{"position":[[9,6]]},"349":{"position":[[8,6]]},"351":{"position":[[9,6]]},"353":{"position":[[9,6]]},"355":{"position":[[8,6]]},"357":{"position":[[9,6]]},"359":{"position":[[9,6]]},"361":{"position":[[8,6]]},"363":{"position":[[9,6]]},"365":{"position":[[8,6]]},"367":{"position":[[8,6]]},"369":{"position":[[8,6]]},"371":{"position":[[9,6]]},"373":{"position":[[8,6]]},"375":{"position":[[9,6]]},"377":{"position":[[9,6]]},"379":{"position":[[9,6]]},"381":{"position":[[8,6]]},"383":{"position":[[9,6]]},"385":{"position":[[8,6]]},"387":{"position":[[9,6]]},"389":{"position":[[9,6]]},"391":{"position":[[9,6]]},"393":{"position":[[9,6]]},"395":{"position":[[9,6]]},"397":{"position":[[9,6]]},"399":{"position":[[9,6]]},"401":{"position":[[9,6]]},"403":{"position":[[9,6]]},"405":{"position":[[9,6]]},"407":{"position":[[9,6]]},"409":{"position":[[9,6]]},"411":{"position":[[9,6]]},"413":{"position":[[9,6]]},"415":{"position":[[9,6]]},"417":{"position":[[9,6]]},"419":{"position":[[9,6]]},"421":{"position":[[9,6]]},"423":{"position":[[9,6]]},"425":{"position":[[9,6]]},"427":{"position":[[9,6]]},"429":{"position":[[9,6]]},"431":{"position":[[9,6]]},"433":{"position":[[9,6]]},"435":{"position":[[9,6]]},"437":{"position":[[9,6]]},"439":{"position":[[9,6]]},"441":{"position":[[9,6]]},"443":{"position":[[9,6]]},"445":{"position":[[9,6]]},"447":{"position":[[9,6]]},"449":{"position":[[9,6]]},"451":{"position":[[9,6]]},"453":{"position":[[9,6]]},"455":{"position":[[9,6]]},"457":{"position":[[9,6]]},"459":{"position":[[9,6]]},"461":{"position":[[9,6]]},"463":{"position":[[9,6]]},"465":{"position":[[9,6]]},"467":{"position":[[9,6]]},"469":{"position":[[9,6]]},"471":{"position":[[9,6]]},"473":{"position":[[9,6]]},"475":{"position":[[9,6]]},"477":{"position":[[9,6]]},"479":{"position":[[9,6]]},"481":{"position":[[9,6]]},"483":{"position":[[9,6]]},"485":{"position":[[9,6]]},"487":{"position":[[9,6]]},"489":{"position":[[9,6]]}}}],["templat",{"_index":92,"t":{"181":{"position":[[37,10]]},"185":{"position":[[29,10]]},"205":{"position":[[46,10]]}}}],["time",{"_index":171,"t":{"559":{"position":[[7,4]]}}}],["timeinput",{"_index":156,"t":{"373":{"position":[[20,11]]}}}],["timepick",{"_index":157,"t":{"377":{"position":[[21,12]]}}}],["toast",{"_index":94,"t":{"187":{"position":[[29,6]]},"189":{"position":[[28,7]]},"375":{"position":[[21,7]]},"381":{"position":[[20,8]]},"523":{"position":[[7,6]]}}}],["toastservic",{"_index":158,"t":{"379":{"position":[[21,14]]}}}],["tooltip",{"_index":159,"t":{"385":{"position":[[20,9]]},"529":{"position":[[7,8]]}}}],["v0.0.1",{"_index":8,"t":{"7":{"position":[[16,6]]},"395":{"position":[[21,8]]}}}],["v0.0.2",{"_index":6,"t":{"3":{"position":[[16,6]]},"383":{"position":[[21,8]]}}}],["v0.0.3",{"_index":7,"t":{"5":{"position":[[16,6]]},"387":{"position":[[21,8]]}}}],["v0.0.4",{"_index":10,"t":{"11":{"position":[[16,6]]},"391":{"position":[[21,8]]}}}],["v0.1.0",{"_index":9,"t":{"9":{"position":[[16,6]]},"389":{"position":[[21,8]]}}}],["v0.1.1",{"_index":12,"t":{"15":{"position":[[16,6]]},"393":{"position":[[21,8]]}}}],["v0.2.0",{"_index":11,"t":{"13":{"position":[[16,6]]},"397":{"position":[[21,8]]}}}],["v0.2.1",{"_index":13,"t":{"17":{"position":[[16,6]]},"399":{"position":[[21,8]]}}}],["v0.2.2",{"_index":16,"t":{"23":{"position":[[16,6]]},"403":{"position":[[21,8]]}}}],["v0.2.3",{"_index":14,"t":{"19":{"position":[[16,6]]},"401":{"position":[[21,8]]}}}],["v0.2.4",{"_index":15,"t":{"21":{"position":[[16,6]]},"405":{"position":[[21,8]]}}}],["v0.2.5",{"_index":17,"t":{"25":{"position":[[16,6]]},"407":{"position":[[21,8]]}}}],["v0.2.6",{"_index":19,"t":{"29":{"position":[[16,6]]},"409":{"position":[[21,8]]}}}],["v0.3.0",{"_index":20,"t":{"31":{"position":[[16,6]]},"411":{"position":[[21,8]]}}}],["v0.4.0",{"_index":18,"t":{"27":{"position":[[16,6]]},"413":{"position":[[21,8]]}}}],["v0.4.1",{"_index":21,"t":{"33":{"position":[[16,6]]},"415":{"position":[[21,8]]}}}],["v0.4.2",{"_index":22,"t":{"35":{"position":[[16,6]]},"417":{"position":[[21,8]]}}}],["v0.5.0",{"_index":23,"t":{"37":{"position":[[16,6]]},"419":{"position":[[21,8]]}}}],["v0.5.1",{"_index":24,"t":{"39":{"position":[[17,6]]},"421":{"position":[[21,8]]}}}],["v0.6.0",{"_index":27,"t":{"45":{"position":[[17,6]]},"423":{"position":[[21,8]]}}}],["v1.0.0",{"_index":25,"t":{"41":{"position":[[17,6]]},"425":{"position":[[21,8]]}}}],["v1.0.1",{"_index":26,"t":{"43":{"position":[[17,6]]},"427":{"position":[[21,8]]}}}],["v1.1.0",{"_index":28,"t":{"47":{"position":[[17,6]]},"429":{"position":[[21,8]]}}}],["v1.10.0",{"_index":52,"t":{"95":{"position":[[17,7]]},"431":{"position":[[21,9]]}}}],["v1.10.1",{"_index":54,"t":{"99":{"position":[[17,7]]},"433":{"position":[[21,9]]}}}],["v1.10.2",{"_index":55,"t":{"101":{"position":[[17,7]]},"435":{"position":[[21,9]]}}}],["v1.10.3",{"_index":57,"t":{"105":{"position":[[17,7]]},"437":{"position":[[21,9]]}}}],["v1.10.4",{"_index":58,"t":{"107":{"position":[[17,7]]},"443":{"position":[[21,9]]}}}],["v1.2.0",{"_index":29,"t":{"49":{"position":[[17,6]]},"439":{"position":[[21,8]]}}}],["v1.3.0",{"_index":30,"t":{"51":{"position":[[17,6]]},"441":{"position":[[21,8]]}}}],["v1.3.1",{"_index":34,"t":{"59":{"position":[[17,6]]},"445":{"position":[[21,8]]}}}],["v1.4.0",{"_index":32,"t":{"55":{"position":[[17,6]]},"449":{"position":[[21,8]]}}}],["v1.4.1",{"_index":31,"t":{"53":{"position":[[17,6]]},"447":{"position":[[21,8]]}}}],["v1.4.2",{"_index":35,"t":{"61":{"position":[[17,6]]},"451":{"position":[[21,8]]}}}],["v1.4.3",{"_index":33,"t":{"57":{"position":[[17,6]]},"453":{"position":[[21,8]]}}}],["v1.4.4",{"_index":36,"t":{"63":{"position":[[17,6]]},"455":{"position":[[21,8]]}}}],["v1.4.5",{"_index":37,"t":{"65":{"position":[[17,6]]},"459":{"position":[[21,8]]}}}],["v1.5.0",{"_index":38,"t":{"67":{"position":[[17,6]]},"457":{"position":[[21,8]]}}}],["v1.6.0",{"_index":39,"t":{"69":{"position":[[17,6]]},"463":{"position":[[21,8]]}}}],["v1.7.0",{"_index":40,"t":{"71":{"position":[[17,6]]},"461":{"position":[[21,8]]}}}],["v1.7.1",{"_index":41,"t":{"73":{"position":[[17,6]]},"465":{"position":[[21,8]]}}}],["v1.7.2",{"_index":42,"t":{"75":{"position":[[17,6]]},"469":{"position":[[21,8]]}}}],["v1.7.3",{"_index":43,"t":{"77":{"position":[[17,6]]},"467":{"position":[[21,8]]}}}],["v1.8.0",{"_index":45,"t":{"81":{"position":[[17,6]]},"471":{"position":[[21,8]]}}}],["v1.8.1",{"_index":44,"t":{"79":{"position":[[17,6]]},"475":{"position":[[21,8]]}}}],["v1.8.2",{"_index":46,"t":{"83":{"position":[[17,6]]},"473":{"position":[[21,8]]}}}],["v1.8.3",{"_index":47,"t":{"85":{"position":[[17,6]]},"477":{"position":[[21,8]]}}}],["v1.9.0",{"_index":48,"t":{"87":{"position":[[17,6]]},"479":{"position":[[21,8]]}}}],["v1.9.1",{"_index":53,"t":{"97":{"position":[[17,6]]},"481":{"position":[[21,8]]}}}],["v1.9.2",{"_index":49,"t":{"89":{"position":[[17,6]]},"485":{"position":[[21,8]]}}}],["v1.9.3",{"_index":50,"t":{"91":{"position":[[17,6]]},"483":{"position":[[21,8]]}}}],["v1.9.4",{"_index":56,"t":{"103":{"position":[[17,6]]},"487":{"position":[[21,8]]}}}],["v1.9.5",{"_index":51,"t":{"93":{"position":[[17,6]]},"489":{"position":[[21,8]]}}}],["webassembl",{"_index":165,"t":{"547":{"position":[[25,11]]},"551":{"position":[[22,11]]},"553":{"position":[[22,11]]}}}]],"pipeline":["stemmer"]}},{"documents":[],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[],"invertedIndex":[],"pipeline":["stemmer"]}},{"documents":[{"i":2,"t":"Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog","h":"","p":1},{"i":4,"t":"BlazorBootstrap v0.0.2 November 27, 2021 · One min read Vikram Reddy Creator In this release, our focus was more on documenting the individual components. Initial documentation is available for the below components: Alert Button Icon Modal Offcanvas Tooltip Tags: v0.0.2 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.0.3 Older Post BlazorBootstrap v0.0.1","s":"BlazorBootstrap v0.0.2","u":"/blog/2021/11/27/blazorbootstrap-0.0.2","h":"","p":3},{"i":6,"t":"BlazorBootstrap v0.0.3 December 8, 2021 · One min read Vikram Reddy Creator In this release, we added the Toasts component and improved documentation. New Component​ Toasts Tags: v0.0.3 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.0.4 Older Post BlazorBootstrap v0.0.2","s":"BlazorBootstrap v0.0.3","u":"/blog/2021/12/08/blazorbootstrap-0.0.3","h":"","p":5},{"i":8,"t":"BlazorBootstrap v0.0.1 November 23, 2021 · One min read Vikram Reddy Creator Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers. New Components​ Alert Button Icon Modals Offcanvas Tooltip Tags: v0.0.1 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.0.2","s":"BlazorBootstrap v0.0.1","u":"/blog/2021/11/23/blazorbootstrap-0.0.1","h":"","p":7},{"i":10,"t":"BlazorBootstrap v0.1.0 December 20, 2021 · One min read Vikram Reddy Creator We are excited to release 0.1.0 with lots of updates. Major changes​ .NET 6 upgrade New components added Demo website created Four New Comoponents​ Preload Breadcrumb Confirm Dialog Callout Demo Website​ We are happy to share the demo website link. https://demos.getblazorbootstrap.com/ Tags: v0.1.0 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.1.1 Older Post BlazorBootstrap v0.0.4","s":"BlazorBootstrap v0.1.0","u":"/blog/2021/12/20/blazorbootstrap-0.1.0","h":"","p":9},{"i":12,"t":"BlazorBootstrap v0.0.4 December 12, 2021 · One min read Vikram Reddy Creator Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release. Changelog​ Code improvements Documentation updates Breaking changes​ Modal​ Callback events renamed Showing -> OnShowing Shown -> OnShown Hiding -> OnHiding Hidden -> OnHidden HidePrevented -> OnHidePrevented Offcanvas​ Callback events renamed Showing -> OnShowing Shown -> OnShown Hiding -> OnHiding Hidden -> OnHidden Tooltip​ Parameters renamed TooltipTitle -> Title TooltipPlacement -> Placement Docs update​ For the below components, documentation is updated. Alerts Buttons Icons Modal Offcanvas Toasts Tooltips Tags: v0.0.4 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.1.0 Older Post BlazorBootstrap v0.0.3","s":"BlazorBootstrap v0.0.4","u":"/blog/2021/12/12/blazorbootstrap-0.0.4","h":"","p":11},{"i":14,"t":"BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Major changes​ Modal component enhancements Offcanvas enhancements Demo website updates Two New Comoponents​ Grid Pagination Links​ Demo Website Modals Offcanvas Grid Pagination Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Edit this page Newer Post BlazorBootstrap v0.2.1 Older Post BlazorBootstrap v0.1.1","s":"BlazorBootstrap v0.2.0","u":"/blog/2022/01/15/blazorbootstrap-0.2.0","h":"","p":13},{"i":16,"t":"BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Component changes​ Alert Parameter renamed from Dismisable to Dismissable Docs update Demos update Demo Website​ https://demos.getblazorbootstrap.com/ Tags: v0.1.1 blazorbootstrap alert Edit this page Newer Post BlazorBootstrap v0.2.0 Older Post BlazorBootstrap v0.1.0","s":"BlazorBootstrap v0.1.1","u":"/blog/2021/12/21/blazorbootstrap-0.1.1","h":"","p":15},{"i":18,"t":"BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Minor Updates​ Toasts component UI alignment fix Confirm Dialog component docs update Bootstrap Icons updated to v1.8.0 Links​ Demo Website Confirm Dialog Icons Toasts Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Edit this page Newer Post BlazorBootstrap v0.2.2 Older Post BlazorBootstrap v0.2.0","s":"BlazorBootstrap v0.2.1","u":"/blog/2022/02/27/blazorbootstrap-0.2.1","h":"","p":17},{"i":20,"t":"BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Updates​ New Tabs component Other improvements Links​ Demo Website Tabs Component Tags: v0.2.3 blazorbootstrap placeholders Edit this page Newer Post BlazorBootstrap v0.2.4 Older Post BlazorBootstrap v0.2.2","s":"BlazorBootstrap v0.2.3","u":"/blog/2022/04/30/blazorbootstrap-0.2.3","h":"","p":19},{"i":22,"t":"BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Updates​ Alert component bug fixes Docs enhancement Links​ Demo Website Alert Component Tags: v0.2.4 blazorbootstrap placeholders Edit this page Newer Post BlazorBootstrap v0.2.5 Older Post BlazorBootstrap v0.2.3","s":"BlazorBootstrap v0.2.4","u":"/blog/2022/06/19/blazorbootstrap-0.2.4","h":"","p":21},{"i":24,"t":"BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Updates​ New Placeholders component .NET version upgrade from v6.0.1 to v6.0.3 Links​ Demo Website Placeholders Component Tags: v0.2.2 blazorbootstrap placeholders Edit this page Newer Post BlazorBootstrap v0.2.3 Older Post BlazorBootstrap v0.2.1","s":"BlazorBootstrap v0.2.2","u":"/blog/2022/03/15/blazorbootstrap-0.2.2","h":"","p":23},{"i":26,"t":"BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Updates​ Offcanvas component bug fix Modal component bug fix Docs enhancement Links​ Demo Website Offcanvas Component Modal Component Tags: v0.2.5 blazorbootstrap offcanvas modal Edit this page Newer Post BlazorBootstrap v0.2.6 Older Post BlazorBootstrap v0.2.4","s":"BlazorBootstrap v0.2.5","u":"/blog/2022/07/28/blazorbootstrap-0.2.5","h":"","p":25},{"i":28,"t":"BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. New Components​ AutoComplete component AutoComplete component features​ Client side data filtering Server side data filtering Validations Links​ Demo Website Blazor AutoComplete Component Demos Blazor AutoComplete Component Documentation Tags: v0.4.0 blazorbootstrap autocomplete docs Edit this page Newer Post BlazorBootstrap v0.4.1 Older Post BlazorBootstrap v0.3.0","s":"BlazorBootstrap v0.4.0","u":"/blog/2022/09/04/blazorbootstrap-0.4.0","h":"","p":27},{"i":30,"t":"BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Updates​ Bootstrap Icons v1.9.1 support Buttons component enhancements Docs enhancement Links​ Demo Website Icons Button Component Tags: v0.2.6 blazorbootstrap button Edit this page Newer Post BlazorBootstrap v0.3.0 Older Post BlazorBootstrap v0.2.5","s":"BlazorBootstrap v0.2.6","u":"/blog/2022/08/13/blazorbootstrap-0.2.6","h":"","p":29},{"i":32,"t":"BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Updates​ Grid component enhancements Grid component enhancements​ Multiple columns filtering (client side and server side) Set default filtering Disable specific column filter Increase filter textbox width Set default sorting Disable specific column sorting Header text alignment Cell alignment Cell formatting Cell nowrap Pagination alignment Empty data Responsive grid with horizontal scrolling Links​ Demo Website Grid Demos Grid Component Documentation Tags: v0.3.0 blazorbootstrap grid Edit this page Newer Post BlazorBootstrap v0.4.0 Older Post BlazorBootstrap v0.2.6","s":"BlazorBootstrap v0.3.0","u":"/blog/2022/08/31/blazorbootstrap-0.3.0","h":"","p":31},{"i":34,"t":"BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Enhancements​ AutoComplete component Callout component Grid component AutoComplete enhancements​ StringComparison support StringFilterOperator support Callout enhancements​ The default heading and default icon are displayed based on the callout type. Change the callout header according to your context. Callout breaking changes​ Renamed enum CalloutColor to CalloutType Renamed parameter Color to Type Grid enhancements​ StringComparison support Links​ Demo Website Blazor AutoComplete Component Documentation Blazor Callout Component Documentation Blazor Grid Component Documentation Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Edit this page Newer Post BlazorBootstrap v0.4.2 Older Post BlazorBootstrap v0.4.0","s":"BlazorBootstrap v0.4.1","u":"/blog/2022/09/12/blazorbootstrap-0.4.1","h":"","p":33},{"i":36,"t":"BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete Edit this page Newer Post BlazorBootstrap v0.5.0 Older Post BlazorBootstrap v0.4.1","s":"BlazorBootstrap v0.4.2","u":"/blog/2022/09/17/blazorbootstrap-0.4.2","h":"","p":35},{"i":38,"t":"BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. New blazor chart components​ Blazor Bar Chart component Blazor Doughnut Chart component Blazor Line Chart component Blazor Pie Chart component Links​ Demo Website Blazor Bar Chart Component Documentation Blazor Doughnut Chart Component Documentation Blazor Line Chart Component Documentation Blazor Pie Chart Component Documentation Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Edit this page Newer Post Blazor Bootstrap v0.5.1 Older Post BlazorBootstrap v0.4.2","s":"BlazorBootstrap v0.5.0","u":"/blog/2022/10/16/blazorbootstrap-0.5.0","h":"","p":37},{"i":40,"t":"Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Grid Enhancements​ Support for save/load Grid state. The state includes the page number, page size, and filters. Performance improvements by removing unnecessary conversions Links​ Demo Website Blazor Grid Component Documentation Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Edit this page Newer Post Blazor Bootstrap v0.6.0 Older Post BlazorBootstrap v0.5.0","s":"Blazor Bootstrap v0.5.1","u":"/blog/2022/10/22/blazorbootstrap-0.5.1","h":"","p":39},{"i":42,"t":"Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! New Components​ NumberInput component Blazor NumberInput component features​ Generic type support Enable min and max Step Text alignment Allow negative numbers Disable Validations Events: ValueChanged Blazor Tabs component features​ Fade effect Title with Icon Disable Tab Pills Activate individual tabs Events Demos site enhancements​ Brand new landing page The demo example and source code are split into two tabs for easy access. Links​ Demo Website Blazor NumberInput Component Documentation Blazor Tabs Component Documentation Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Edit this page Newer Post Blazor Bootstrap v1.0.1 Older Post Blazor Bootstrap v0.6.0","s":"Blazor Bootstrap v1.0.0","u":"/blog/2022/11/18/blazorbootstrap-1.0.0","h":"","p":41},{"i":44,"t":"Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! What's changed​ Confirmation Dialog component enhancements Offcanvas component enhancements Demos site examples​ New examples for 'Blazor Confirm Dialog Component' New examples for 'Blazor Offcanvas Component' New examples for 'Blazor Preload Component' SEO Updates Links​ Demo Website Blazor Confirm Dialog Component Documentation Blazor Offcanvas Component Documentation Blazor Preload Component Documentation Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Edit this page Newer Post Blazor Bootstrap v1.1.0 Older Post Blazor Bootstrap v1.0.0","s":"Blazor Bootstrap v1.0.1","u":"/blog/2022/11/22/blazorbootstrap-1.0.1","h":"","p":43},{"i":46,"t":"Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. New Components​ Progress component Progress component features​ Labels Backgrounds Multiple bars Striped Animated stripes Toasts component features​ Toasts with/without title Auto hide Placement Stack Length Links​ Demo Website Blazor Progress Component Documentation Blazor Toasts Component Documentation Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Edit this page Newer Post Blazor Bootstrap v1.0.0 Older Post Blazor Bootstrap v0.5.1","s":"Blazor Bootstrap v0.6.0","u":"/blog/2022/10/30/blazorbootstrap-0.6.0","h":"","p":45},{"i":48,"t":"Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component What's changed​ New ToastService ConfirmDialog component enhancements PreloadService enhancements Icon component enhancements Demos site examples​ New examples for 'Blazor ToastService' New examples for 'Blazor Confirm Dialog Component' New examples for 'Blazor Preload Component' New examples for 'Blazor Icon Component' Links​ Demo Website Blazor Toasts Component Documentation Blazor Confirm Dialog Component Documentation Blazor Preload Component Documentation Blazor Icon Component Documentation Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Edit this page Newer Post Blazor Bootstrap v1.2.0 Older Post Blazor Bootstrap v1.0.1","s":"Blazor Bootstrap v1.1.0","u":"/blog/2022/11/28/blazorbootstrap-1.1.0","h":"","p":47},{"i":50,"t":"Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component What's changed​ New CurrencyInput component Demos site updates​ New examples for 'Blazor CurrencyInput Component' New examples for 'Blazor Confirm Dialog Component' Links​ Demo Website - Blazor WebAssembly Demo Website - Blazor Server Blazor CurrencyInput Documentation Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Edit this page Newer Post Blazor Bootstrap v1.3.0 Older Post Blazor Bootstrap v1.1.0","s":"Blazor Bootstrap v1.2.0","u":"/blog/2022/12/12/blazorbootstrap-1.2.0","h":"","p":49},{"i":52,"t":"Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component What's changed​ New Switch component Demos site updates​ New examples for 'Blazor Switch Component' Updates to 'Blazor Auto Complete Component' examples Links​ Demo Website - Blazor WebAssembly Demo Website - Blazor Server Blazor Switch Documentation Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Edit this page Newer Post Blazor Bootstrap v1.3.1 Older Post Blazor Bootstrap v1.2.0","s":"Blazor Bootstrap v1.3.0","u":"/blog/2022/12/15/blazorbootstrap-1.3.0","h":"","p":51},{"i":54,"t":"Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component What's changed​ Modal component Render different components dynamically within the modal without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. Pass event callbacks to a dynamic component. Demos site updates​ New examples for Blazor Modal Component New examples for Blazor Confirm Dialog Component Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Modal Documentation Blazor Confirm Dialog Documentation Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Edit this page Newer Post Blazor Bootstrap v1.4.2 Older Post Blazor Bootstrap v1.4.0","s":"Blazor Bootstrap v1.4.1","u":"/blog/2023/01/23/blazorbootstrap-1.4.1","h":"","p":53},{"i":56,"t":"Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component What's changed​ Sidebar component Demos site updates​ New examples for 'Blazor Sidebar Component' Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Sidebar Documentation Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Edit this page Newer Post Blazor Bootstrap v1.4.1 Older Post Blazor Bootstrap v1.3.1","s":"Blazor Bootstrap v1.4.0","u":"/blog/2023/01/15/blazorbootstrap-1.4.0","h":"","p":55},{"i":58,"t":"Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! What's changed​ Grid component New Data parameter New ResetPageNumber() method Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.4.4 Older Post Blazor Bootstrap v1.4.2","s":"Blazor Bootstrap v1.4.3","u":"/blog/2023/02/07/blazorbootstrap-1.4.3","h":"","p":57},{"i":60,"t":"Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component What's changed​ AutoComplete component - keyboard navigation support AutoComplete component - CancellationToken support Demos site updates​ New examples for 'Blazor AutoComplete Component' Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor AutoComplete Documentation Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Edit this page Newer Post Blazor Bootstrap v1.4.0 Older Post Blazor Bootstrap v1.3.0","s":"Blazor Bootstrap v1.3.1","u":"/blog/2022/12/18/blazorbootstrap-1.3.1","h":"","p":59},{"i":62,"t":"Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates What's changed​ Auto Complete component Bug fix Starter Templates​ Blazor Bootstrap: Blazor WebAssembly Template Blazor Bootstrap: Blazor WebAssembly Empty Template Blazor Bootstrap: Blazor Server Template Blazor Bootstrap: Blazor Server Empty Template Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Auto Complete Documentation Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Edit this page Newer Post Blazor Bootstrap v1.4.3 Older Post Blazor Bootstrap v1.4.1","s":"Blazor Bootstrap v1.4.2","u":"/blog/2023/01/30/blazorbootstrap-1.4.2","h":"","p":61},{"i":64,"t":"Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! What's changed​ Grid component Filters have 300ms timeout for the debouncing CancellationToken support for the RefreshDataAsync() method Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.4.5 Older Post Blazor Bootstrap v1.4.3","s":"Blazor Bootstrap v1.4.4","u":"/blog/2023/02/10/blazorbootstrap-1.4.4","h":"","p":63},{"i":66,"t":"Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! What's changed​ Toasts component bug fixed Toast progress bar not working when the browser language is french Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Toasts Documentation Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Edit this page Newer Post Blazor Bootstrap v1.5.0 Older Post Blazor Bootstrap v1.4.4","s":"Blazor Bootstrap v1.4.5","u":"/blog/2023/02/23/blazorbootstrap-1.4.5","h":"","p":65},{"i":68,"t":"Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! What's new​ DateInput component Generic type: DateOnly, DateOnly?, DateTime, and DateTime? data types supported Max and Min range Disable Validations ValueChanged event What's changed​ Offcanvas component Render different components dynamically within the modal without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. Pass event callbacks to a dynamic component. Button component Dynamic tooltip support added Tooltip component Dynamic tooltip support added Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor DateInput Documentation Blazor Offcanvas Documentation Blazor Button Documentation Blazor Tooltip Documentation Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Edit this page Newer Post Blazor Bootstrap v1.6.0 Older Post Blazor Bootstrap v1.4.5","s":"Blazor Bootstrap v1.5.0","u":"/blog/2023/03/05/blazorbootstrap-1.5.0","h":"","p":67},{"i":70,"t":"Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! What's new​ TimeInput component Generic type: TimeOnly and TimeOnly? supported Max and Min range Disable Validations ValueChanged event Restrict the time field based on the entry in another field What's changed​ Grid component Conditional css class for grid row Conditional css class for grid column DateInput component Restrict the date field based on the entry in another field Modal component Modal CloseOnEscape not working - Fixed Offcanvas component Offcanvas CloseOnEscape not working #160 - Fixed Upgrade Bootstrap version from v5.1.3 to v5.2.3 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor TimeInput Documentation Blazor Grid Documentation Blazor DateInput Documentation Blazor Modal Documentation Blazor Offcanvas Documentation Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Edit this page Newer Post Blazor Bootstrap v1.7.0 Older Post Blazor Bootstrap v1.5.0","s":"Blazor Bootstrap v1.6.0","u":"/blog/2023/03/12/blazorbootstrap-1.6.0","h":"","p":69},{"i":72,"t":"Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! What's new​ Badge component Background colors Pill badges Buttons Positioned Generic indicator Collapse component Horizontal collapse Call back events: OnShowing, OnShown, OnHiding, and OnHidden Accordion component Title with Icon Flush Set default active accordion item Always open Activate individual accordion items Call back events: OnShowing, OnShown, OnHiding, and OnHidden What's changed​ Buttons component Disable and enable state dynamically #172 Documentation​ Layout setup docs Layout Setup - Blazor WebAssembly Layout Setup - Blazor Server Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Badge Documentation Blazor Collapse Documentation Blazor Accordion Documentation Blazor Buttons Documentation Layout Setup - Blazor WebAssembly Documentation Layout Setup - Blazor Server Documentation Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Edit this page Newer Post Blazor Bootstrap v1.7.1 Older Post Blazor Bootstrap v1.6.0","s":"Blazor Bootstrap v1.7.0","u":"/blog/2023/04/10/blazorbootstrap-1.7.0","h":"","p":71},{"i":74,"t":"Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! What's changed​ Auto Complete component Show Autocomplete reset button when default value set #183 Buttons component Button Disabled parameter doesn't work properly on first render in Tabs / Modal #182 CSS A CSS rule could be more targeted to not interfere with others #184 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Auto Complete Documentation Blazor Buttons Documentation Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Edit this page Newer Post Blazor Bootstrap v1.7.2 Older Post Blazor Bootstrap v1.7.0","s":"Blazor Bootstrap v1.7.1","u":"/blog/2023/04/19/blazorbootstrap-1.7.1","h":"","p":73},{"i":76,"t":"Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! What's changed​ Currency Input component CurrencyInput InvalidOperationException #192 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Currency Input Documentation Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Edit this page Newer Post Blazor Bootstrap v1.7.3 Older Post Blazor Bootstrap v1.7.1","s":"Blazor Bootstrap v1.7.2","u":"/blog/2023/04/24/blazorbootstrap-1.7.2","h":"","p":75},{"i":78,"t":"Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! What's changed​ Button component Button - id on Button is causing Unhandled error #194 Grid component Grid calls DataProvider method after input's onchange event #195 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Buttons Documentation Blazor Grid Documentation Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.8.0 Older Post Blazor Bootstrap v1.7.2","s":"Blazor Bootstrap v1.7.3","u":"/blog/2023/04/29/blazorbootstrap-1.7.3","h":"","p":77},{"i":80,"t":"Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! What's changed​ Grid component Selection and filters both active bug #214 Tooltip component Tooltip does not disappear #213 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Blazor Offcanvas Documentation Blazor Auto Complete Documentation Blazor Currency Input Documentation Blazor Date Input Documentation Blazor Number Input Documentation Blazor Switch Documentation Blazor Time Input Documentation Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Edit this page Newer Post Blazor Bootstrap v1.8.2 Older Post Blazor Bootstrap v1.8.0","s":"Blazor Bootstrap v1.8.1","u":"/blog/2023/05/31/blazorbootstrap-1.8.1","h":"","p":79},{"i":82,"t":"Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! What's changed​ Grid component Grid Selection #179 Single selection Multiple selection Disable selection Disable all rows selection Grid Paging #196 Dynamic Page Size Page Size Selection Offcanvas component Static backdrop #210 Auto Complete component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Currency Input component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Date Input component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Number Input component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Switch component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Time Input component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Blazor Bootstrap Templates Install with .NET CLI: dotnet new install Blazor.Bootstrap.Templates::1.8.0 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Blazor Offcanvas Documentation Blazor Auto Complete Documentation Blazor Currency Input Documentation Blazor Date Input Documentation Blazor Number Input Documentation Blazor Switch Documentation Blazor Time Input Documentation Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Edit this page Newer Post Blazor Bootstrap v1.8.1 Older Post Blazor Bootstrap v1.7.3","s":"Blazor Bootstrap v1.8.0","u":"/blog/2023/05/28/blazorbootstrap-1.8.0","h":"","p":81},{"i":84,"t":"Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! What's changed​ Grid component Grid local filter with null strings #227 Grid Single Select #230 Button component Button TooltipTitle does not disappear when clicked #222 DateInput component DateInput no reaction to null #221 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Blazor Buttons Documentation Blazor Date Input Documentation Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Edit this page Newer Post Blazor Bootstrap v1.8.3 Older Post Blazor Bootstrap v1.8.1","s":"Blazor Bootstrap v1.8.2","u":"/blog/2023/06/11/blazorbootstrap-1.8.2","h":"","p":83},{"i":86,"t":"Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! What's changed​ Grid component Select all/none refresh problem #217 Progress component Progress bar grid bind problem #229 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Blazor Progress Documentation Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Edit this page Newer Post Blazor Bootstrap v1.9.0 Older Post Blazor Bootstrap v1.8.2","s":"Blazor Bootstrap v1.8.3","u":"/blog/2023/06/16/blazorbootstrap-1.8.3","h":"","p":85},{"i":88,"t":"Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! What's new​ Modal service Global service for the application What's changed​ Modal component Dynamic modal title does not work when using static content #242 Icon component New Color parameter added Toasts component ToastService.Notify method does not have AutoHide #238 Tabs component ShowTabByIndexAsync not working after OnAfterRenderAsync #243 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Modal Documentation Blazor Modal Service Documentation Blazor Icon Documentation Blazor Toasts Documentation Blazor Tabs Documentation Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Edit this page Newer Post Blazor Bootstrap v1.9.2 Older Post Blazor Bootstrap v1.8.3","s":"Blazor Bootstrap v1.9.0","u":"/blog/2023/06/30/blazorbootstrap-1.9.0","h":"","p":87},{"i":90,"t":"Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! What's new​ Breadcrumb service Global service for the application What's changed​ Toast service ToastService not working anymore in version 1.9.1 #261 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Edit this page Newer Post Blazor Bootstrap v1.9.1 Older Post Blazor Bootstrap v1.9.0","s":"Blazor Bootstrap v1.9.2","u":"/blog/2023/07/01/blazorbootstrap-1.9.2","h":"","p":89},{"i":92,"t":"Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! What's changed​ Grid component New HeaderRowCssClass parameter New FiltersRowCssClass parameter Default sorting icon to indicate the column is sortable Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.9.4 Older Post Blazor Bootstrap v1.9.1","s":"Blazor Bootstrap v1.9.3","u":"/blog/2023/07/04/blazorbootstrap-1.9.3","h":"","p":91},{"i":94,"t":"Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! What's changed​ Grid component New OnRowClick event New OnRowDoubleClick event Grid Component: Row Click Event #264 Grid Component - Translatable page size selector #287 TimeInput component TimeInput: Changing value does not work #271 Switch component Switch class not applied to label #235 Modal component Cannot change modal type on static modals #278 Line Chart component Multiple of the same chart causing js exception #283 Sidebar component SidebarItem without childs, CustomIconName not passed to Icon #286 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Component Documentation Blazor TimeInput Component Documentation Blazor Switch Component Documentation Blazor Modal Component Documentation Blazor Line Chart Component Documentation Blazor Sidebar Component Documentation Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Edit this page Newer Post Blazor Bootstrap v1.10.0 Older Post Blazor Bootstrap v1.9.4","s":"Blazor Bootstrap v1.9.5","u":"/blog/2023/07/16/blazorbootstrap-1.9.5","h":"","p":93},{"i":96,"t":"Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! What's New​ Dropdown Component Single button Multiple colors Split button Sizing Directions (Dropup, Dropup centered, Dropend, and Dropstart) Active Disabled Menu content (Header, Dividers, Text, and Forms) Auto close behavior Card Component Content types (Body, Titles, text, and links) Images List groups Header and footer Sizing Text alignment Background and color Card groups Card groups with footer What's changed​ Bar Chart component New AddDataSetAsync and AddAsync methods Doughnut Chart component New AddDataSetAsync and AddAsync methods Line Chart component New AddDataSetAsync and AddAsync methods Pie Chart component New AddDataSetAsync and AddAsync methods Grid component Grid: Filters translation support #292 Button component Tooltip color support added Tooltip component Tooltip color support added Tooltip on button problem #296 Switch component Switch is invoking EditContext OnFieldChanged even the change was not from UI #297 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Card Component Documentation Blazor Dropdown Component Documentation Blazor Chart Components Documentation Blazor Grid Component Documentation Blazor Button Component Documentation Blazor Tooltip Component Documentation Blazor Switch Component Documentation Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.10.1 Older Post Blazor Bootstrap v1.9.5","s":"Blazor Bootstrap v1.10.0","u":"/blog/2023/08/13/blazorbootstrap-1.10.0","h":"","p":95},{"i":98,"t":"Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! What's changed​ Modal service Issue with new ModalService #258 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Modal Service Documentation Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Edit this page Newer Post Blazor Bootstrap v1.9.3 Older Post Blazor Bootstrap v1.9.2","s":"Blazor Bootstrap v1.9.1","u":"/blog/2023/06/31/blazorbootstrap-1.9.1","h":"","p":97},{"i":100,"t":"Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! What's changed​ We have made improvements to the base components Bar Chart component UpdateAsync method Doughnut Chart component UpdateAsync method Line Chart component UpdateAsync method Pie Chart component UpdateAsync method Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Chart Components Documentation Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.10.2 Older Post Blazor Bootstrap v1.10.0","s":"Blazor Bootstrap v1.10.1","u":"/blog/2023/08/29/blazorbootstrap-1.10.1","h":"","p":99},{"i":102,"t":"Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! What's changed​ AutoComplete component Autocomplete shows \"No Records Found\" Before Search is finished #352 Confirm Dialog component Confirm Dialog - No fade animation #334 Modal Service Callback support has been added Tooltip component Dispose issue fixed #327 Sidebar component Sidebar should close automatically on mobile #274 We have made improvements to all the charts to support data labels #317 Bar Chart, Doughnut Chart, Line Chart, and Pie Chart MAUI Blazor App - Getting started docs added Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Chart Components Documentation Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Edit this page Newer Post Blazor Bootstrap v1.10.3 Older Post Blazor Bootstrap v1.10.1","s":"Blazor Bootstrap v1.10.2","u":"/blog/2023/09/15/blazorbootstrap-1.10.2","h":"","p":101},{"i":104,"t":"Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! What's changed​ Modal service Blazor Modal Service problem #265 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Modal Service Documentation Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Edit this page Newer Post Blazor Bootstrap v1.9.5 Older Post Blazor Bootstrap v1.9.3","s":"Blazor Bootstrap v1.9.4","u":"/blog/2023/07/05/blazorbootstrap-1.9.4","h":"","p":103},{"i":106,"t":"Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! What's changed​ Grid component Grid: Fixed Header Support #53 Dropdown component Add feature to disable Dropdown #373 Icon component Sizing for icons in buttons is strange #346 Sidebar component Sidebar: Add option to space items #276 Docs updates Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Documentation Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Edit this page Newer Post Blazor Bootstrap v1.10.4 Older Post Blazor Bootstrap v1.10.2","s":"Blazor Bootstrap v1.10.3","u":"/blog/2023/10/15/blazorbootstrap-1.10.3","h":"","p":105},{"i":108,"t":"Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! What's changed​ Grid component Grid: Freeze Columns Support #246 Preload component Preload: Add text to preload component #414 Switch component Switch: Double click on switch selects the label #401 Charts component Chart size updates #384 Modal component Pressing Esc still closes the modal even with UseStaticBackdrop=\"true\" #416 Docs updates Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Documentation Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Edit this page Older Post Blazor Bootstrap v1.10.3","s":"Blazor Bootstrap v1.10.4","u":"/blog/2023/11/18/blazorbootstrap-1.10.4","h":"","p":107},{"i":110,"t":"Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/2","h":"","p":109},{"i":112,"t":"Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More Newer Entries Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/3","h":"","p":111},{"i":114,"t":"Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Tags: v0.3.0 blazorbootstrap grid Read More Newer Entries Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/4","h":"","p":113},{"i":116,"t":"BlazorBootstrap v0.0.3 December 8, 2021 · One min read Vikram Reddy Creator In this release, we added the Toasts component and improved documentation. Tags: v0.0.3 blazorbootstrap Read More BlazorBootstrap v0.0.2 November 27, 2021 · One min read Vikram Reddy Creator In this release, our focus was more on documenting the individual components. Tags: v0.0.2 blazorbootstrap Read More BlazorBootstrap v0.0.1 November 23, 2021 · One min read Vikram Reddy Creator Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers. Tags: v0.0.1 blazorbootstrap Read More Newer Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/6","h":"","p":115},{"i":118,"t":"BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Tags: v0.2.6 blazorbootstrap button Read More BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Tags: v0.2.4 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Tags: v0.2.3 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Tags: v0.2.2 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Tags: v0.1.1 blazorbootstrap alert Read More BlazorBootstrap v0.1.0 December 20, 2021 · One min read Vikram Reddy Creator We are excited to release 0.1.0 with lots of updates. Tags: v0.1.0 blazorbootstrap Read More BlazorBootstrap v0.0.4 December 12, 2021 · One min read Vikram Reddy Creator Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release. Tags: v0.0.4 blazorbootstrap Read More Newer Entries Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/5","h":"","p":117},{"i":120,"t":"Tags A accordion1 alert1 autocomplete8 B badge1 blazor33 blazor-autocomplete1 blazor-bar-chart1 blazor-bootstrap5 blazor-charts1 blazor-confirm-dialog2 blazor-currency-input1 blazor-dialog2 blazor-doughnut-chart1 blazor-grid3 blazor-grid-filtering1 blazor-grid-paging1 blazor-grid-sorting1 blazor-input1 blazor-input-number1 blazor-line-chart1 blazor-number1 blazor-number-input1 blazor-offcanvas1 blazor-pie-chart1 blazor-preload2 blazor-progress1 blazor-progress-bar1 blazor-sidemodal1 blazor-spinner2 blazor-starter-templates1 blazor-tabs1 blazor-templates1 blazor-toast1 blazor-toasts2 blazoraccordion1 blazorautocomplete4 blazorbadge1 blazorbootstrap53 blazorbootstrap-starter-templates1 blazorbreadcrumb1 blazorbutton2 blazorbuttons3 blazorchart1 blazorcollapse1 blazorconfirmdialog1 blazorconfirmmodal1 blazorcurrencyinput3 blazordate1 blazordateinput4 blazordatepicker2 blazordialog1 blazordropdown1 blazorgrid13 blazoricon2 blazormodal8 blazormodalservice2 blazornumber1 blazornumberinput1 blazoroffcanvas3 blazorprogress1 blazorsidebar2 blazorswitch2 blazortabs1 blazortime1 blazortimeinput3 blazortimepicker1 blazortoast1 blazortoasts2 blazortooltip2 bootstrap26 bootstrap526 breadcrumb1 breadcrumbservice1 button3 buttons3 C callout1 chart1 charts1 collapse1 confirm dialog1 confirmdialog1 confirmmodal1 currency1 currencyinput2 D date1 dateinput4 datepicker2 dialog1 docs5 dropdown1 G grid16 I icon2 icons1 input2 input-number1 L layout1 leftmenu1 M modal11 modalservice3 N navigation1 numberinput1 O offcanvas5 P pagination1 placeholders3 preload1 progress2 progress-bar1 S sidebar2 switch2 T tabs1 timeinput3 timepicker1 toast1 toasts4 toastservice1 tooltip2 V v0.0.11 v0.0.21 v0.0.31 v0.0.41 v0.1.01 v0.1.11 v0.2.01 v0.2.11 v0.2.21 v0.2.31 v0.2.41 v0.2.51 v0.2.61 v0.3.01 v0.4.01 v0.4.11 v0.4.21 v0.5.01 v0.5.11 v0.6.01 v1.0.01 v1.0.11 v1.1.01 v1.10.01 v1.10.11 v1.10.21 v1.10.31 v1.10.41 v1.2.01 v1.3.01 v1.3.11 v1.4.01 v1.4.11 v1.4.21 v1.4.31 v1.4.41 v1.4.51 v1.5.01 v1.6.01 v1.7.01 v1.7.11 v1.7.21 v1.7.31 v1.8.01 v1.8.11 v1.8.21 v1.8.31 v1.9.01 v1.9.11 v1.9.21 v1.9.31 v1.9.41 v1.9.51","s":"Tags","u":"/blog/tags","h":"","p":119},{"i":122,"t":"One post tagged with \"accordion\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"accordion\"","u":"/blog/tags/accordion","h":"","p":121},{"i":124,"t":"One post tagged with \"alert\" View All Tags BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Tags: v0.1.1 blazorbootstrap alert Read More","s":"One post tagged with \"alert\"","u":"/blog/tags/alert","h":"","p":123},{"i":126,"t":"8 posts tagged with \"autocomplete\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More","s":"8 posts tagged with \"autocomplete\"","u":"/blog/tags/autocomplete","h":"","p":125},{"i":128,"t":"33 posts tagged with \"blazor\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor","h":"","p":127},{"i":130,"t":"One post tagged with \"blazor-autocomplete\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"blazor-autocomplete\"","u":"/blog/tags/blazor-autocomplete","h":"","p":129},{"i":132,"t":"One post tagged with \"badge\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"badge\"","u":"/blog/tags/badge","h":"","p":131},{"i":134,"t":"One post tagged with \"blazor-bar-chart\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-bar-chart\"","u":"/blog/tags/blazor-bar-chart","h":"","p":133},{"i":136,"t":"5 posts tagged with \"blazor-bootstrap\" View All Tags Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"5 posts tagged with \"blazor-bootstrap\"","u":"/blog/tags/blazor-bootstrap","h":"","p":135},{"i":138,"t":"One post tagged with \"blazor-charts\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-charts\"","u":"/blog/tags/blazor-charts","h":"","p":137},{"i":140,"t":"2021 December 21, 2021 - BlazorBootstrap v0.1.1 December 20, 2021 - BlazorBootstrap v0.1.0 December 12, 2021 - BlazorBootstrap v0.0.4 December 8, 2021 - BlazorBootstrap v0.0.3 November 27, 2021 - BlazorBootstrap v0.0.2 November 23, 2021 - BlazorBootstrap v0.0.1 2022 December 18, 2022 - Blazor Bootstrap v1.3.1 December 15, 2022 - Blazor Bootstrap v1.3.0 December 12, 2022 - Blazor Bootstrap v1.2.0 November 28, 2022 - Blazor Bootstrap v1.1.0 November 22, 2022 - Blazor Bootstrap v1.0.1 November 18, 2022 - Blazor Bootstrap v1.0.0 October 30, 2022 - Blazor Bootstrap v0.6.0 October 22, 2022 - Blazor Bootstrap v0.5.1 October 16, 2022 - BlazorBootstrap v0.5.0 September 17, 2022 - BlazorBootstrap v0.4.2 September 12, 2022 - BlazorBootstrap v0.4.1 September 4, 2022 - BlazorBootstrap v0.4.0 August 31, 2022 - BlazorBootstrap v0.3.0 August 13, 2022 - BlazorBootstrap v0.2.6 July 28, 2022 - BlazorBootstrap v0.2.5 June 19, 2022 - BlazorBootstrap v0.2.4 April 30, 2022 - BlazorBootstrap v0.2.3 March 15, 2022 - BlazorBootstrap v0.2.2 February 27, 2022 - BlazorBootstrap v0.2.1 January 15, 2022 - BlazorBootstrap v0.2.0 2023 November 18, 2023 - Blazor Bootstrap v1.10.4 October 15, 2023 - Blazor Bootstrap v1.10.3 September 15, 2023 - Blazor Bootstrap v1.10.2 August 29, 2023 - Blazor Bootstrap v1.10.1 August 13, 2023 - Blazor Bootstrap v1.10.0 July 16, 2023 - Blazor Bootstrap v1.9.5 July 5, 2023 - Blazor Bootstrap v1.9.4 July 4, 2023 - Blazor Bootstrap v1.9.3 July 1, 2023 - Blazor Bootstrap v1.9.1 July 1, 2023 - Blazor Bootstrap v1.9.2 June 30, 2023 - Blazor Bootstrap v1.9.0 June 16, 2023 - Blazor Bootstrap v1.8.3 June 11, 2023 - Blazor Bootstrap v1.8.2 May 31, 2023 - Blazor Bootstrap v1.8.1 May 28, 2023 - Blazor Bootstrap v1.8.0 April 29, 2023 - Blazor Bootstrap v1.7.3 April 24, 2023 - Blazor Bootstrap v1.7.2 April 19, 2023 - Blazor Bootstrap v1.7.1 April 10, 2023 - Blazor Bootstrap v1.7.0 March 12, 2023 - Blazor Bootstrap v1.6.0 March 5, 2023 - Blazor Bootstrap v1.5.0 February 23, 2023 - Blazor Bootstrap v1.4.5 February 10, 2023 - Blazor Bootstrap v1.4.4 February 7, 2023 - Blazor Bootstrap v1.4.3 January 30, 2023 - Blazor Bootstrap v1.4.2 January 23, 2023 - Blazor Bootstrap v1.4.1 January 15, 2023 - Blazor Bootstrap v1.4.0","s":"Archive","u":"/blog/archive","h":"","p":139},{"i":142,"t":"One post tagged with \"blazor-currency-input\" View All Tags Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"One post tagged with \"blazor-currency-input\"","u":"/blog/tags/blazor-currency-input","h":"","p":141},{"i":144,"t":"2 posts tagged with \"blazor-dialog\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"2 posts tagged with \"blazor-dialog\"","u":"/blog/tags/blazor-dialog","h":"","p":143},{"i":146,"t":"2 posts tagged with \"blazor-confirm-dialog\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"2 posts tagged with \"blazor-confirm-dialog\"","u":"/blog/tags/blazor-confirm-dialog","h":"","p":145},{"i":148,"t":"One post tagged with \"blazor-doughnut-chart\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-doughnut-chart\"","u":"/blog/tags/blazor-doughnut-chart","h":"","p":147},{"i":150,"t":"3 posts tagged with \"blazor-grid\" View All Tags Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"3 posts tagged with \"blazor-grid\"","u":"/blog/tags/blazor-grid","h":"","p":149},{"i":152,"t":"One post tagged with \"blazor-grid-filtering\" View All Tags Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"One post tagged with \"blazor-grid-filtering\"","u":"/blog/tags/blazor-grid-filtering","h":"","p":151},{"i":154,"t":"One post tagged with \"blazor-grid-sorting\" View All Tags Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"One post tagged with \"blazor-grid-sorting\"","u":"/blog/tags/blazor-grid-sorting","h":"","p":153},{"i":156,"t":"One post tagged with \"blazor-input-number\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"blazor-input-number\"","u":"/blog/tags/blazor-input-number","h":"","p":155},{"i":158,"t":"One post tagged with \"blazor-grid-paging\" View All Tags Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"One post tagged with \"blazor-grid-paging\"","u":"/blog/tags/blazor-grid-paging","h":"","p":157},{"i":160,"t":"One post tagged with \"blazor-input\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"blazor-input\"","u":"/blog/tags/blazor-input","h":"","p":159},{"i":162,"t":"One post tagged with \"blazor-line-chart\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-line-chart\"","u":"/blog/tags/blazor-line-chart","h":"","p":161},{"i":164,"t":"One post tagged with \"blazor-number\" View All Tags Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"One post tagged with \"blazor-number\"","u":"/blog/tags/blazor-number","h":"","p":163},{"i":166,"t":"One post tagged with \"blazor-offcanvas\" View All Tags Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"One post tagged with \"blazor-offcanvas\"","u":"/blog/tags/blazor-offcanvas","h":"","p":165},{"i":168,"t":"One post tagged with \"blazor-number-input\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"blazor-number-input\"","u":"/blog/tags/blazor-number-input","h":"","p":167},{"i":170,"t":"One post tagged with \"blazor-progress\" View All Tags Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"One post tagged with \"blazor-progress\"","u":"/blog/tags/blazor-progress","h":"","p":169},{"i":172,"t":"One post tagged with \"blazor-pie-chart\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-pie-chart\"","u":"/blog/tags/blazor-pie-chart","h":"","p":171},{"i":174,"t":"2 posts tagged with \"blazor-preload\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"2 posts tagged with \"blazor-preload\"","u":"/blog/tags/blazor-preload","h":"","p":173},{"i":176,"t":"One post tagged with \"blazor-progress-bar\" View All Tags Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"One post tagged with \"blazor-progress-bar\"","u":"/blog/tags/blazor-progress-bar","h":"","p":175},{"i":178,"t":"One post tagged with \"blazor-sidemodal\" View All Tags Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"One post tagged with \"blazor-sidemodal\"","u":"/blog/tags/blazor-sidemodal","h":"","p":177},{"i":180,"t":"2 posts tagged with \"blazor-spinner\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"2 posts tagged with \"blazor-spinner\"","u":"/blog/tags/blazor-spinner","h":"","p":179},{"i":182,"t":"One post tagged with \"blazor-starter-templates\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"blazor-starter-templates\"","u":"/blog/tags/blazor-starter-templates","h":"","p":181},{"i":184,"t":"One post tagged with \"blazor-tabs\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"blazor-tabs\"","u":"/blog/tags/blazor-tabs","h":"","p":183},{"i":186,"t":"One post tagged with \"blazor-templates\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"blazor-templates\"","u":"/blog/tags/blazor-templates","h":"","p":185},{"i":188,"t":"One post tagged with \"blazor-toast\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More","s":"One post tagged with \"blazor-toast\"","u":"/blog/tags/blazor-toast","h":"","p":187},{"i":190,"t":"2 posts tagged with \"blazor-toasts\" View All Tags Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"2 posts tagged with \"blazor-toasts\"","u":"/blog/tags/blazor-toasts","h":"","p":189},{"i":192,"t":"33 posts tagged with \"blazor\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/2","h":"","p":191},{"i":194,"t":"33 posts tagged with \"blazor\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More Newer Entries Older Entries","s":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/3","h":"","p":193},{"i":196,"t":"33 posts tagged with \"blazor\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More Newer Entries","s":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/4","h":"","p":195},{"i":198,"t":"One post tagged with \"blazoraccordion\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"blazoraccordion\"","u":"/blog/tags/blazoraccordion","h":"","p":197},{"i":200,"t":"4 posts tagged with \"blazorautocomplete\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More","s":"4 posts tagged with \"blazorautocomplete\"","u":"/blog/tags/blazorautocomplete","h":"","p":199},{"i":202,"t":"One post tagged with \"blazorbadge\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"blazorbadge\"","u":"/blog/tags/blazorbadge","h":"","p":201},{"i":204,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap","h":"","p":203},{"i":206,"t":"One post tagged with \"blazorbootstrap-starter-templates\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"blazorbootstrap-starter-templates\"","u":"/blog/tags/blazorbootstrap-starter-templates","h":"","p":205},{"i":208,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/2","h":"","p":207},{"i":210,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags BlazorBootstrap v0.0.3 December 8, 2021 · One min read Vikram Reddy Creator In this release, we added the Toasts component and improved documentation. Tags: v0.0.3 blazorbootstrap Read More BlazorBootstrap v0.0.2 November 27, 2021 · One min read Vikram Reddy Creator In this release, our focus was more on documenting the individual components. Tags: v0.0.2 blazorbootstrap Read More BlazorBootstrap v0.0.1 November 23, 2021 · One min read Vikram Reddy Creator Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers. Tags: v0.0.1 blazorbootstrap Read More Newer Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/6","h":"","p":209},{"i":212,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More Newer Entries Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/3","h":"","p":211},{"i":214,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Tags: v0.3.0 blazorbootstrap grid Read More Newer Entries Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/4","h":"","p":213},{"i":216,"t":"One post tagged with \"blazorbreadcrumb\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"blazorbreadcrumb\"","u":"/blog/tags/blazorbreadcrumb","h":"","p":215},{"i":218,"t":"2 posts tagged with \"blazorbutton\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"2 posts tagged with \"blazorbutton\"","u":"/blog/tags/blazorbutton","h":"","p":217},{"i":220,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Tags: v0.2.6 blazorbootstrap button Read More BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Tags: v0.2.4 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Tags: v0.2.3 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Tags: v0.2.2 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Tags: v0.1.1 blazorbootstrap alert Read More BlazorBootstrap v0.1.0 December 20, 2021 · One min read Vikram Reddy Creator We are excited to release 0.1.0 with lots of updates. Tags: v0.1.0 blazorbootstrap Read More BlazorBootstrap v0.0.4 December 12, 2021 · One min read Vikram Reddy Creator Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release. Tags: v0.0.4 blazorbootstrap Read More Newer Entries Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/5","h":"","p":219},{"i":222,"t":"3 posts tagged with \"blazorbuttons\" View All Tags Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"3 posts tagged with \"blazorbuttons\"","u":"/blog/tags/blazorbuttons","h":"","p":221},{"i":224,"t":"One post tagged with \"blazorchart\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"blazorchart\"","u":"/blog/tags/blazorchart","h":"","p":223},{"i":226,"t":"One post tagged with \"blazorcollapse\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"blazorcollapse\"","u":"/blog/tags/blazorcollapse","h":"","p":225},{"i":228,"t":"One post tagged with \"blazorconfirmmodal\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"blazorconfirmmodal\"","u":"/blog/tags/blazorconfirmmodal","h":"","p":227},{"i":230,"t":"One post tagged with \"blazorconfirmdialog\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"blazorconfirmdialog\"","u":"/blog/tags/blazorconfirmdialog","h":"","p":229},{"i":232,"t":"3 posts tagged with \"blazorcurrencyinput\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"3 posts tagged with \"blazorcurrencyinput\"","u":"/blog/tags/blazorcurrencyinput","h":"","p":231},{"i":234,"t":"One post tagged with \"blazordate\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"blazordate\"","u":"/blog/tags/blazordate","h":"","p":233},{"i":236,"t":"4 posts tagged with \"blazordateinput\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"4 posts tagged with \"blazordateinput\"","u":"/blog/tags/blazordateinput","h":"","p":235},{"i":238,"t":"One post tagged with \"blazordialog\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"blazordialog\"","u":"/blog/tags/blazordialog","h":"","p":237},{"i":240,"t":"2 posts tagged with \"blazordatepicker\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"2 posts tagged with \"blazordatepicker\"","u":"/blog/tags/blazordatepicker","h":"","p":239},{"i":242,"t":"One post tagged with \"blazordropdown\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More","s":"One post tagged with \"blazordropdown\"","u":"/blog/tags/blazordropdown","h":"","p":241},{"i":244,"t":"13 posts tagged with \"blazorgrid\" View All Tags Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Older Entries","s":"13 posts tagged with \"blazorgrid\"","u":"/blog/tags/blazorgrid","h":"","p":243},{"i":246,"t":"13 posts tagged with \"blazorgrid\" View All Tags Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More Newer Entries","s":"13 posts tagged with \"blazorgrid\"","u":"/blog/tags/blazorgrid/page/2","h":"","p":245},{"i":248,"t":"2 posts tagged with \"blazoricon\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"2 posts tagged with \"blazoricon\"","u":"/blog/tags/blazoricon","h":"","p":247},{"i":250,"t":"One post tagged with \"blazornumber\" View All Tags Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"One post tagged with \"blazornumber\"","u":"/blog/tags/blazornumber","h":"","p":249},{"i":252,"t":"2 posts tagged with \"blazormodalservice\" View All Tags Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"2 posts tagged with \"blazormodalservice\"","u":"/blog/tags/blazormodalservice","h":"","p":251},{"i":254,"t":"8 posts tagged with \"blazormodal\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"8 posts tagged with \"blazormodal\"","u":"/blog/tags/blazormodal","h":"","p":253},{"i":256,"t":"One post tagged with \"blazornumberinput\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More","s":"One post tagged with \"blazornumberinput\"","u":"/blog/tags/blazornumberinput","h":"","p":255},{"i":258,"t":"2 posts tagged with \"blazorsidebar\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"2 posts tagged with \"blazorsidebar\"","u":"/blog/tags/blazorsidebar","h":"","p":257},{"i":260,"t":"One post tagged with \"blazorprogress\" View All Tags Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More","s":"One post tagged with \"blazorprogress\"","u":"/blog/tags/blazorprogress","h":"","p":259},{"i":262,"t":"3 posts tagged with \"blazoroffcanvas\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"3 posts tagged with \"blazoroffcanvas\"","u":"/blog/tags/blazoroffcanvas","h":"","p":261},{"i":264,"t":"2 posts tagged with \"blazorswitch\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More","s":"2 posts tagged with \"blazorswitch\"","u":"/blog/tags/blazorswitch","h":"","p":263},{"i":266,"t":"One post tagged with \"blazortabs\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"One post tagged with \"blazortabs\"","u":"/blog/tags/blazortabs","h":"","p":265},{"i":268,"t":"One post tagged with \"blazortimepicker\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"blazortimepicker\"","u":"/blog/tags/blazortimepicker","h":"","p":267},{"i":270,"t":"One post tagged with \"blazortime\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"blazortime\"","u":"/blog/tags/blazortime","h":"","p":269},{"i":272,"t":"3 posts tagged with \"blazortimeinput\" View All Tags Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"3 posts tagged with \"blazortimeinput\"","u":"/blog/tags/blazortimeinput","h":"","p":271},{"i":274,"t":"2 posts tagged with \"blazortooltip\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More","s":"2 posts tagged with \"blazortooltip\"","u":"/blog/tags/blazortooltip","h":"","p":273},{"i":276,"t":"2 posts tagged with \"blazortoasts\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More","s":"2 posts tagged with \"blazortoasts\"","u":"/blog/tags/blazortoasts","h":"","p":275},{"i":278,"t":"26 posts tagged with \"bootstrap5\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5","h":"","p":277},{"i":280,"t":"26 posts tagged with \"bootstrap\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap","h":"","p":279},{"i":282,"t":"26 posts tagged with \"bootstrap5\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5/page/2","h":"","p":281},{"i":284,"t":"One post tagged with \"blazortoast\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"blazortoast\"","u":"/blog/tags/blazortoast","h":"","p":283},{"i":286,"t":"26 posts tagged with \"bootstrap5\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Newer Entries","s":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5/page/3","h":"","p":285},{"i":288,"t":"26 posts tagged with \"bootstrap\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Newer Entries","s":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap/page/3","h":"","p":287},{"i":290,"t":"One post tagged with \"breadcrumbservice\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"breadcrumbservice\"","u":"/blog/tags/breadcrumbservice","h":"","p":289},{"i":292,"t":"One post tagged with \"breadcrumb\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"breadcrumb\"","u":"/blog/tags/breadcrumb","h":"","p":291},{"i":294,"t":"3 posts tagged with \"button\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Tags: v0.2.6 blazorbootstrap button Read More","s":"3 posts tagged with \"button\"","u":"/blog/tags/button","h":"","p":293},{"i":296,"t":"One post tagged with \"callout\" View All Tags BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More","s":"One post tagged with \"callout\"","u":"/blog/tags/callout","h":"","p":295},{"i":298,"t":"One post tagged with \"chart\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"chart\"","u":"/blog/tags/chart","h":"","p":297},{"i":300,"t":"26 posts tagged with \"bootstrap\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap/page/2","h":"","p":299},{"i":302,"t":"One post tagged with \"charts\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More","s":"One post tagged with \"charts\"","u":"/blog/tags/charts","h":"","p":301},{"i":304,"t":"One post tagged with \"collapse\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"collapse\"","u":"/blog/tags/collapse","h":"","p":303},{"i":306,"t":"3 posts tagged with \"buttons\" View All Tags Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"3 posts tagged with \"buttons\"","u":"/blog/tags/buttons","h":"","p":305},{"i":308,"t":"One post tagged with \"confirm dialog\" View All Tags BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More","s":"One post tagged with \"confirm dialog\"","u":"/blog/tags/confirm-dialog","h":"","p":307},{"i":310,"t":"One post tagged with \"confirmdialog\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"confirmdialog\"","u":"/blog/tags/confirmdialog","h":"","p":309},{"i":312,"t":"One post tagged with \"currency\" View All Tags Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More","s":"One post tagged with \"currency\"","u":"/blog/tags/currency","h":"","p":311},{"i":314,"t":"One post tagged with \"confirmmodal\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"confirmmodal\"","u":"/blog/tags/confirmmodal","h":"","p":313},{"i":316,"t":"One post tagged with \"date\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More","s":"One post tagged with \"date\"","u":"/blog/tags/date","h":"","p":315},{"i":318,"t":"4 posts tagged with \"dateinput\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"4 posts tagged with \"dateinput\"","u":"/blog/tags/dateinput","h":"","p":317},{"i":320,"t":"2 posts tagged with \"currencyinput\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More","s":"2 posts tagged with \"currencyinput\"","u":"/blog/tags/currencyinput","h":"","p":319},{"i":322,"t":"2 posts tagged with \"datepicker\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"2 posts tagged with \"datepicker\"","u":"/blog/tags/datepicker","h":"","p":321},{"i":324,"t":"One post tagged with \"dialog\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"dialog\"","u":"/blog/tags/dialog","h":"","p":323},{"i":326,"t":"One post tagged with \"dropdown\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More","s":"One post tagged with \"dropdown\"","u":"/blog/tags/dropdown","h":"","p":325},{"i":328,"t":"5 posts tagged with \"docs\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More","s":"5 posts tagged with \"docs\"","u":"/blog/tags/docs","h":"","p":327},{"i":330,"t":"16 posts tagged with \"grid\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Older Entries","s":"16 posts tagged with \"grid\"","u":"/blog/tags/grid","h":"","p":329},{"i":332,"t":"16 posts tagged with \"grid\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Tags: v0.3.0 blazorbootstrap grid Read More BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More Newer Entries","s":"16 posts tagged with \"grid\"","u":"/blog/tags/grid/page/2","h":"","p":331},{"i":334,"t":"One post tagged with \"icons\" View All Tags BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More","s":"One post tagged with \"icons\"","u":"/blog/tags/icons","h":"","p":333},{"i":336,"t":"2 posts tagged with \"icon\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"2 posts tagged with \"icon\"","u":"/blog/tags/icon","h":"","p":335},{"i":338,"t":"One post tagged with \"layout\" View All Tags Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"One post tagged with \"layout\"","u":"/blog/tags/layout","h":"","p":337},{"i":340,"t":"One post tagged with \"input-number\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"input-number\"","u":"/blog/tags/input-number","h":"","p":339},{"i":342,"t":"One post tagged with \"leftmenu\" View All Tags Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"One post tagged with \"leftmenu\"","u":"/blog/tags/leftmenu","h":"","p":341},{"i":344,"t":"11 posts tagged with \"modal\" View All Tags BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More Newer Entries","s":"11 posts tagged with \"modal\"","u":"/blog/tags/modal/page/2","h":"","p":343},{"i":346,"t":"3 posts tagged with \"modalservice\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"3 posts tagged with \"modalservice\"","u":"/blog/tags/modalservice","h":"","p":345},{"i":348,"t":"One post tagged with \"navigation\" View All Tags Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"One post tagged with \"navigation\"","u":"/blog/tags/navigation","h":"","p":347},{"i":350,"t":"3 posts tagged with \"placeholders\" View All Tags BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Tags: v0.2.4 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Tags: v0.2.3 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Tags: v0.2.2 blazorbootstrap placeholders Read More","s":"3 posts tagged with \"placeholders\"","u":"/blog/tags/placeholders","h":"","p":349},{"i":352,"t":"One post tagged with \"numberinput\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More","s":"One post tagged with \"numberinput\"","u":"/blog/tags/numberinput","h":"","p":351},{"i":354,"t":"One post tagged with \"pagination\" View All Tags BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More","s":"One post tagged with \"pagination\"","u":"/blog/tags/pagination","h":"","p":353},{"i":356,"t":"5 posts tagged with \"offcanvas\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More","s":"5 posts tagged with \"offcanvas\"","u":"/blog/tags/offcanvas","h":"","p":355},{"i":358,"t":"One post tagged with \"preload\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More","s":"One post tagged with \"preload\"","u":"/blog/tags/preload","h":"","p":357},{"i":360,"t":"11 posts tagged with \"modal\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More Older Entries","s":"11 posts tagged with \"modal\"","u":"/blog/tags/modal","h":"","p":359},{"i":362,"t":"2 posts tagged with \"progress\" View All Tags Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"2 posts tagged with \"progress\"","u":"/blog/tags/progress","h":"","p":361},{"i":364,"t":"One post tagged with \"progress-bar\" View All Tags Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"One post tagged with \"progress-bar\"","u":"/blog/tags/progress-bar","h":"","p":363},{"i":366,"t":"2 posts tagged with \"sidebar\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"2 posts tagged with \"sidebar\"","u":"/blog/tags/sidebar","h":"","p":365},{"i":368,"t":"2 posts tagged with \"input\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"2 posts tagged with \"input\"","u":"/blog/tags/input","h":"","p":367},{"i":370,"t":"2 posts tagged with \"switch\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More","s":"2 posts tagged with \"switch\"","u":"/blog/tags/switch","h":"","p":369},{"i":372,"t":"One post tagged with \"tabs\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"One post tagged with \"tabs\"","u":"/blog/tags/tabs","h":"","p":371},{"i":374,"t":"3 posts tagged with \"timeinput\" View All Tags Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"3 posts tagged with \"timeinput\"","u":"/blog/tags/timeinput","h":"","p":373},{"i":376,"t":"One post tagged with \"toast\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"toast\"","u":"/blog/tags/toast","h":"","p":375},{"i":378,"t":"One post tagged with \"timepicker\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"timepicker\"","u":"/blog/tags/timepicker","h":"","p":377},{"i":380,"t":"One post tagged with \"toastservice\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"toastservice\"","u":"/blog/tags/toastservice","h":"","p":379},{"i":382,"t":"4 posts tagged with \"toasts\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More","s":"4 posts tagged with \"toasts\"","u":"/blog/tags/toasts","h":"","p":381},{"i":384,"t":"One post tagged with \"v0.0.2\" View All Tags BlazorBootstrap v0.0.2 November 27, 2021 · One min read Vikram Reddy Creator In this release, our focus was more on documenting the individual components. Tags: v0.0.2 blazorbootstrap Read More","s":"One post tagged with \"v0.0.2\"","u":"/blog/tags/v-0-0-2","h":"","p":383},{"i":386,"t":"2 posts tagged with \"tooltip\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More","s":"2 posts tagged with \"tooltip\"","u":"/blog/tags/tooltip","h":"","p":385},{"i":388,"t":"One post tagged with \"v0.0.3\" View All Tags BlazorBootstrap v0.0.3 December 8, 2021 · One min read Vikram Reddy Creator In this release, we added the Toasts component and improved documentation. Tags: v0.0.3 blazorbootstrap Read More","s":"One post tagged with \"v0.0.3\"","u":"/blog/tags/v-0-0-3","h":"","p":387},{"i":390,"t":"One post tagged with \"v0.1.0\" View All Tags BlazorBootstrap v0.1.0 December 20, 2021 · One min read Vikram Reddy Creator We are excited to release 0.1.0 with lots of updates. Tags: v0.1.0 blazorbootstrap Read More","s":"One post tagged with \"v0.1.0\"","u":"/blog/tags/v-0-1-0","h":"","p":389},{"i":392,"t":"One post tagged with \"v0.0.4\" View All Tags BlazorBootstrap v0.0.4 December 12, 2021 · One min read Vikram Reddy Creator Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release. Tags: v0.0.4 blazorbootstrap Read More","s":"One post tagged with \"v0.0.4\"","u":"/blog/tags/v-0-0-4","h":"","p":391},{"i":394,"t":"One post tagged with \"v0.1.1\" View All Tags BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Tags: v0.1.1 blazorbootstrap alert Read More","s":"One post tagged with \"v0.1.1\"","u":"/blog/tags/v-0-1-1","h":"","p":393},{"i":396,"t":"One post tagged with \"v0.0.1\" View All Tags BlazorBootstrap v0.0.1 November 23, 2021 · One min read Vikram Reddy Creator Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers. Tags: v0.0.1 blazorbootstrap Read More","s":"One post tagged with \"v0.0.1\"","u":"/blog/tags/v-0-0-1","h":"","p":395},{"i":398,"t":"One post tagged with \"v0.2.0\" View All Tags BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More","s":"One post tagged with \"v0.2.0\"","u":"/blog/tags/v-0-2-0","h":"","p":397},{"i":400,"t":"One post tagged with \"v0.2.1\" View All Tags BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More","s":"One post tagged with \"v0.2.1\"","u":"/blog/tags/v-0-2-1","h":"","p":399},{"i":402,"t":"One post tagged with \"v0.2.3\" View All Tags BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Tags: v0.2.3 blazorbootstrap placeholders Read More","s":"One post tagged with \"v0.2.3\"","u":"/blog/tags/v-0-2-3","h":"","p":401},{"i":404,"t":"One post tagged with \"v0.2.2\" View All Tags BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Tags: v0.2.2 blazorbootstrap placeholders Read More","s":"One post tagged with \"v0.2.2\"","u":"/blog/tags/v-0-2-2","h":"","p":403},{"i":406,"t":"One post tagged with \"v0.2.4\" View All Tags BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Tags: v0.2.4 blazorbootstrap placeholders Read More","s":"One post tagged with \"v0.2.4\"","u":"/blog/tags/v-0-2-4","h":"","p":405},{"i":408,"t":"One post tagged with \"v0.2.5\" View All Tags BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More","s":"One post tagged with \"v0.2.5\"","u":"/blog/tags/v-0-2-5","h":"","p":407},{"i":410,"t":"One post tagged with \"v0.2.6\" View All Tags BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Tags: v0.2.6 blazorbootstrap button Read More","s":"One post tagged with \"v0.2.6\"","u":"/blog/tags/v-0-2-6","h":"","p":409},{"i":412,"t":"One post tagged with \"v0.3.0\" View All Tags BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Tags: v0.3.0 blazorbootstrap grid Read More","s":"One post tagged with \"v0.3.0\"","u":"/blog/tags/v-0-3-0","h":"","p":411},{"i":414,"t":"One post tagged with \"v0.4.0\" View All Tags BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More","s":"One post tagged with \"v0.4.0\"","u":"/blog/tags/v-0-4-0","h":"","p":413},{"i":416,"t":"One post tagged with \"v0.4.1\" View All Tags BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More","s":"One post tagged with \"v0.4.1\"","u":"/blog/tags/v-0-4-1","h":"","p":415},{"i":418,"t":"One post tagged with \"v0.4.2\" View All Tags BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete","s":"One post tagged with \"v0.4.2\"","u":"/blog/tags/v-0-4-2","h":"","p":417},{"i":420,"t":"One post tagged with \"v0.5.0\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"v0.5.0\"","u":"/blog/tags/v-0-5-0","h":"","p":419},{"i":422,"t":"One post tagged with \"v0.5.1\" View All Tags Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"One post tagged with \"v0.5.1\"","u":"/blog/tags/v-0-5-1","h":"","p":421},{"i":424,"t":"One post tagged with \"v0.6.0\" View All Tags Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"One post tagged with \"v0.6.0\"","u":"/blog/tags/v-0-6-0","h":"","p":423},{"i":426,"t":"One post tagged with \"v1.0.0\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"v1.0.0\"","u":"/blog/tags/v-1-0-0","h":"","p":425},{"i":428,"t":"One post tagged with \"v1.0.1\" View All Tags Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"One post tagged with \"v1.0.1\"","u":"/blog/tags/v-1-0-1","h":"","p":427},{"i":430,"t":"One post tagged with \"v1.1.0\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More","s":"One post tagged with \"v1.1.0\"","u":"/blog/tags/v-1-1-0","h":"","p":429},{"i":432,"t":"One post tagged with \"v1.10.0\" View All Tags Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More","s":"One post tagged with \"v1.10.0\"","u":"/blog/tags/v-1-10-0","h":"","p":431},{"i":434,"t":"One post tagged with \"v1.10.1\" View All Tags Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More","s":"One post tagged with \"v1.10.1\"","u":"/blog/tags/v-1-10-1","h":"","p":433},{"i":436,"t":"One post tagged with \"v1.10.2\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"v1.10.2\"","u":"/blog/tags/v-1-10-2","h":"","p":435},{"i":438,"t":"One post tagged with \"v1.10.3\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More","s":"One post tagged with \"v1.10.3\"","u":"/blog/tags/v-1-10-3","h":"","p":437},{"i":440,"t":"One post tagged with \"v1.2.0\" View All Tags Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"One post tagged with \"v1.2.0\"","u":"/blog/tags/v-1-2-0","h":"","p":439},{"i":442,"t":"One post tagged with \"v1.3.0\" View All Tags Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More","s":"One post tagged with \"v1.3.0\"","u":"/blog/tags/v-1-3-0","h":"","p":441},{"i":444,"t":"One post tagged with \"v1.10.4\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More","s":"One post tagged with \"v1.10.4\"","u":"/blog/tags/v-1-10-4","h":"","p":443},{"i":446,"t":"One post tagged with \"v1.3.1\" View All Tags Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More","s":"One post tagged with \"v1.3.1\"","u":"/blog/tags/v-1-3-1","h":"","p":445},{"i":448,"t":"One post tagged with \"v1.4.1\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"v1.4.1\"","u":"/blog/tags/v-1-4-1","h":"","p":447},{"i":450,"t":"One post tagged with \"v1.4.0\" View All Tags Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"One post tagged with \"v1.4.0\"","u":"/blog/tags/v-1-4-0","h":"","p":449},{"i":452,"t":"One post tagged with \"v1.4.2\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"v1.4.2\"","u":"/blog/tags/v-1-4-2","h":"","p":451},{"i":454,"t":"One post tagged with \"v1.4.3\" View All Tags Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More","s":"One post tagged with \"v1.4.3\"","u":"/blog/tags/v-1-4-3","h":"","p":453},{"i":456,"t":"One post tagged with \"v1.4.4\" View All Tags Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More","s":"One post tagged with \"v1.4.4\"","u":"/blog/tags/v-1-4-4","h":"","p":455},{"i":458,"t":"One post tagged with \"v1.5.0\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"One post tagged with \"v1.5.0\"","u":"/blog/tags/v-1-5-0","h":"","p":457},{"i":460,"t":"One post tagged with \"v1.4.5\" View All Tags Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More","s":"One post tagged with \"v1.4.5\"","u":"/blog/tags/v-1-4-5","h":"","p":459},{"i":462,"t":"One post tagged with \"v1.7.0\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"v1.7.0\"","u":"/blog/tags/v-1-7-0","h":"","p":461},{"i":464,"t":"One post tagged with \"v1.6.0\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"v1.6.0\"","u":"/blog/tags/v-1-6-0","h":"","p":463},{"i":466,"t":"One post tagged with \"v1.7.1\" View All Tags Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More","s":"One post tagged with \"v1.7.1\"","u":"/blog/tags/v-1-7-1","h":"","p":465},{"i":468,"t":"One post tagged with \"v1.7.3\" View All Tags Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More","s":"One post tagged with \"v1.7.3\"","u":"/blog/tags/v-1-7-3","h":"","p":467},{"i":470,"t":"One post tagged with \"v1.7.2\" View All Tags Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More","s":"One post tagged with \"v1.7.2\"","u":"/blog/tags/v-1-7-2","h":"","p":469},{"i":472,"t":"One post tagged with \"v1.8.0\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More","s":"One post tagged with \"v1.8.0\"","u":"/blog/tags/v-1-8-0","h":"","p":471},{"i":474,"t":"One post tagged with \"v1.8.2\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More","s":"One post tagged with \"v1.8.2\"","u":"/blog/tags/v-1-8-2","h":"","p":473},{"i":476,"t":"One post tagged with \"v1.8.1\" View All Tags Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More","s":"One post tagged with \"v1.8.1\"","u":"/blog/tags/v-1-8-1","h":"","p":475},{"i":478,"t":"One post tagged with \"v1.8.3\" View All Tags Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More","s":"One post tagged with \"v1.8.3\"","u":"/blog/tags/v-1-8-3","h":"","p":477},{"i":480,"t":"One post tagged with \"v1.9.0\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"One post tagged with \"v1.9.0\"","u":"/blog/tags/v-1-9-0","h":"","p":479},{"i":482,"t":"One post tagged with \"v1.9.1\" View All Tags Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More","s":"One post tagged with \"v1.9.1\"","u":"/blog/tags/v-1-9-1","h":"","p":481},{"i":484,"t":"One post tagged with \"v1.9.3\" View All Tags Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More","s":"One post tagged with \"v1.9.3\"","u":"/blog/tags/v-1-9-3","h":"","p":483},{"i":486,"t":"One post tagged with \"v1.9.2\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"v1.9.2\"","u":"/blog/tags/v-1-9-2","h":"","p":485},{"i":488,"t":"One post tagged with \"v1.9.4\" View All Tags Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More","s":"One post tagged with \"v1.9.4\"","u":"/blog/tags/v-1-9-4","h":"","p":487},{"i":490,"t":"One post tagged with \"v1.9.5\" View All Tags Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More","s":"One post tagged with \"v1.9.5\"","u":"/blog/tags/v-1-9-5","h":"","p":489},{"i":492,"t":"Components Alerts On this page Blazor Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages. Parameters​ Name Type Description Required Default ChildContent RenderFragment Specifies the content to be rendered inside the alert. Color AlertColor Gets or sets the alert color. AlertColor.None Dismissable bool Enables the alert to be closed by placing the padding for close button. false Methods​ Name Description CloseAsync Closes an alert by removing it from the DOM. Callback Events​ Name Description OnClose Fires immediately when the close instance method is called. OnClosed Fired when the alert has been closed and CSS transitions have completed. Examples​ Alerts​ Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
A simple primary alert - check it out! A simple secondary alert - check it out! A simple success alert - check it out! A simple danger alert - check it out! A simple warning alert - check it out! A simple info alert - check it out! A simple light alert - check it out! A simple dark alert - check it out!
See alerts demo here. Additional Content​ Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
See alerts with additional content demo. Icons​ Similarly, you can use Bootstrap Icons to create alerts with icons.
An example alert with an icon A simple success alert with an icon A simple danger alert with an icon A simple warning alert with an icon
See alerts with an icon demo. Dismissing​ Using the Dismissable=\"true\", it's possible to dismiss any alert inline. It's possible to dismiss any alert inline. Here's how:
Holy guacamole! You should check in on some of those fields below.
Manually we can close an alert with button click.
Holy guacamole! You should check in on some of those fields below.
@code { Alert warningAlert; private async Task CloseAlert() => await warningAlert?.CloseAsync(); } See dismissable alerts demo. NOTE When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend subscribing to the OnClosed callback event and programmatically sets focus to the most appropriate location on the page. Edit this page Previous Accordion Next Badge Parameters Methods Callback Events Examples Alerts Additional Content Icons Dismissing","s":"Blazor Alerts","u":"/components/alerts","h":"","p":491},{"i":494,"t":"Components Breadcrumb On this page Blazor Breadcrumb Blazor Bootstrap breadcrumb component indicates the current page's location within a navigational hierarchy that automatically adds separators. Parameters​ Name Type Description Required Default Items List List of all the items. ✔️ Examples​ Breadcrumb​
@code { private List NavItems1 { get; set; } private List NavItems2 { get; set; } protected override void OnInitialized() { NavItems1 = new List { new BreadcrumbItem{ Text = \"Home\", Href =\"/\" }, new BreadcrumbItem{ Text = \"Breadcrumb\", IsCurrentPage = true } }; NavItems2 = new List { new BreadcrumbItem{ Text = \"Home\", Href =\"/\" }, new BreadcrumbItem{ Text = \"Docs\", Href =\"/docs\" }, new BreadcrumbItem{ Text = \"Breadcrumb\", IsCurrentPage = true } }; } } See breadcrumb demo here. Dividers​ Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider.
';\" Items=\"NavItems2\">
@code { private List NavItems2 { get; set; } protected override void OnInitialized() { NavItems2 = new List { new BreadcrumbItem{ Text = \"Home\", Href =\"/\" }, new BreadcrumbItem{ Text = \"Docs\", Href =\"/docs\" }, new BreadcrumbItem{ Text = \"Breadcrumb\", IsCurrentPage = true } }; } } See breadcrumb with dividers demo here. Embedded SVG icon​ It's also possible to use an embedded SVG icon. Apply it via our CSS custom property
@code { private List NavItems2 { get; set; } protected override void OnInitialized() { NavItems2 = new List { new BreadcrumbItem{ Text = \"Home\", Href =\"/\" }, new BreadcrumbItem{ Text = \"Docs\", Href =\"/docs\" }, new BreadcrumbItem{ Text = \"Breadcrumb\", IsCurrentPage = true } }; } } See breadcrumb with embedded svg icon demo here. Edit this page Previous Badge Next Buttons Parameters Examples Breadcrumb Dividers Embedded SVG icon","s":"Blazor Breadcrumb","u":"/components/breadcrumb","h":"","p":493},{"i":496,"t":"Components Callout On this page Blazor Callout Blazor Bootstrap callout component provides content presentation in a visually distinct manner. Parameters​ Name Type Default Required Description ChildContent RenderFragment ✔️ Specifies the content to be rendered inside this. Heading string Gets or sets the callout heading. Type enum CalloutType.Default Use CalloutType.Default or CalloutType.Info or CalloutType.Warning or CalloutType.Danger or CalloutType.Tip Examples​ Callout​ This is an default callout. Example text to show it in action. See callout documentation. This is an danger callout. Example text to show it in action. See callout documentation. This is an warning callout. Example text to show it in action. See callout documentation. This is an info callout. Example text to show it in action. See callout documentation. This is an tip callout. Example text to show it in action. See callout documentation. See callout default demo here. Custom callout heading​ This is an default callout. Example text to show it in action. See callout documentation. This is an danger callout. Example text to show it in action. See callout documentation. This is an warning callout. Example text to show it in action. See callout documentation. This is an info callout. Example text to show it in action. See callout documentation. This is an tip callout. Example text to show it in action. See callout documentation. See callout danger demo here. Large text​

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

 See callout warning demo here. Edit this page Previous Buttons Next Card Parameters Examples Callout Custom callout heading Large text","s":"Blazor Callout","u":"/components/callout","h":"","p":495},{"i":498,"t":"Components Badge On this page Blazor Badge The Blazor Bootstrap Badge component shows the small count and labels. Parameters​ Name Type Default Required Description Added Version ChildContent RenderFragment Specifies the content to be rendered inside the badge. 1.7.0 Color BadgeColor BadgeColor.Secondary ✔️ Gets or sets the badge color. 1.7.0 IndicatorType BadgeIndicatorType BadgeIndicatorType.None Gets or sets the badge indicator. 1.7.0 Placement BadgePlacement BadgePlacement.None Gets or sets the badge placement. 1.7.0 Position Position Gets or sets the badge position. 1.7.0 VisuallyHiddenText string Gets or sets the visually hidden text. 1.7.0 Examples​ Basic usage​ Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of now, badges no longer have focus or hover styles for links.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
See demo here Background colors​ Conveying meaning to assistive technologies Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the VisuallyHiddenText parameter. See demo here Pill badges​ Use the IndicatorType parameter to make badges more rounded with a larger border-radius. Primary Secondary Success Danger Warning Info Light Dark See demo here Buttons​ Badges can be used as part of links or buttons to provide a counter.
See demo here Positioned​ Use Position and Placement parameters to position it in the corner of a link or button.
See demo here Generic indicator​ You can also replace the badge with a generic indicator without the count. See demo here Edit this page Previous Alerts Next Breadcrumb Parameters Examples Basic usage Background colors Pill badges Buttons Positioned Generic indicator","s":"Blazor Badge","u":"/components/badge","h":"","p":497},{"i":500,"t":"Components Charts On this page Blazor Charts Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. Example​ See blazor chart demo here. Chart Types​ At this moment we are supporting four blazor chart types. Bar Chart Doughnut Chart Line Chart Pie Chart info We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions. Bar Chart​ See blazor bar chart demo here. See blazor bar chart full documentation here. Doughnut Chart​ See blazor doughnut chart demo here. See blazor doughnut chart full documentation here. Line Chart​ See blazor line chart demo here. See blazor line chart full documentation here. Pie Chart​ See blazor pie chart demo here. See blazor pie chart full documentation here. Edit this page Previous Card Next Collapse Example Chart Types Bar Chart Doughnut Chart Line Chart Pie Chart","s":"Blazor Charts","u":"/components/charts","h":"","p":499},{"i":502,"t":"Components Card On this page Blazor Card BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options. About​ A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Parameters​ Card Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Color CardColor Gets or sets the card color. CardColor.None 1.10.0 TextAlignment Alignment Gets or sets the text alignment of the card. Alignment.None 1.10.0 CardBody Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 CardFooter Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 CardGroup Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 CardHeader Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Color CardColor Gets or sets the card color. CardColor.None 1.10.4 CardLink Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Disabled bool When set to 'true', disables the component's functionality and places it in a disabled state. 1.10.0 To string? Gets or sets the target route. ✔️ 1.10.0 Target Target The target attribute specifies where to open the linked document. Target.None 1.10.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.10.0 CardSubTitle Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Size HeadingSize Gets or sets the heading size. HeadingSize.H6 1.10.0 CardText Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 CardTitle Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Size HeadingSize Gets or sets the heading size. HeadingSize.H5 1.10.0 Examples​ Card​ Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. Card title Some quick example text to build on the card title and make up the bulk of the card's content. See the demo here. Content types​ Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported. Body​ The building block of a card is the CardBody. Use it whenever you need a padded section within a card. This is some text within a card body. See the demo here. Titles, text, and links​ Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content. Card link Another link See the demo here. Images​ \"placeholder\" Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content. Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content. \"placeholder\" See the demo here. List groups​ Create lists of content in a card with a flush list group.
  • An item
  • A second item
  • A third item
 See the demo here. Kitchen sink​ Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. \"placeholder\" Card title Some quick example text to build on the card title and make up the bulk of the card's content.
  • An item
  • A second item
  • A third item
Card link Another link See the demo here. Header and footer​ Add an optional header and/or footer within a card. Featured Special title treatment With supporting text below as a natural lead-in to additional content. See the demo here. Sizing​ Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
Special title treatment With supporting text below as a natural lead-in to additional content.
Special title treatment With supporting text below as a natural lead-in to additional content.
See the demo here. Text alignment​ You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter. Special title treatment With supporting text below as a natural lead-in to additional content. Special title treatment With supporting text below as a natural lead-in to additional content. Special title treatment With supporting text below as a natural lead-in to additional content. See the demo here. Background and color​ Header Primary card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Secondary card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Success card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Danger card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Warning card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Info card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Light card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Dark card title Some quick example text to build on the card title and make up the bulk of the card's content. See the demo here. Card groups​ Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. \"placeholder\" Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago \"placeholder\" Card title This card has supporting text below as a natural lead-in to additional content. Last updated 3 mins ago \"placeholder\" Card title This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. Last updated 3 mins ago See the demo here. Card groups with footer​ When using card groups with footers, their content will automatically line up. \"placeholder\" Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago \"placeholder\" Card title This card has supporting text below as a natural lead-in to additional content. Last updated 3 mins ago \"placeholder\" Card title This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. Last updated 3 mins ago See the demo here. Edit this page Previous Callout Next Charts About Parameters Card Parameters CardBody Parameters CardFooter Parameters CardGroup Parameters CardHeader Parameters CardLink Parameters CardSubTitle Parameters CardText Parameters CardTitle Parameters Examples Card Content types Body Titles, text, and links Images List groups Kitchen sink Header and footer Sizing Text alignment Background and color Card groups Card groups with footer","s":"Blazor Card","u":"/components/card","h":"","p":501},{"i":504,"t":"Components Buttons On this page Blazor Buttons Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc. Parameters​ Name Type Description Required Default Added Version Active bool When set to true, places the component in the active state with active styling. false 1.0.0 Block bool Makes the button to span the full width of a parent. false 1.0.0 ChildContent RenderFragment Specifies the content to be rendered inside this Button. 1.0.0 Color ButtonColor Gets or sets the button color. ✔️ 1.0.0 Disabled bool When set to true, disables the component's functionality and places it in a disabled state. false 1.0.0 Loading bool Shows the loading spinner or a LoadingTemplate. false 1.0.0 LoadingTemplate RenderFragment Gets or sets the component loading template. 1.0.0 LoadingText string Gets or sets the loadgin text. Loading... 1.0.0 Outline bool Makes the button to have the outlines. false 1.0.0 Position Position Gets or sets the position. 1.7.0 Size Size Changes the size of a button. 1.0.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.0.0 Target Target The target attribute specifies where to open the linked document for a ButtonType.Link. Target.None 1.0.0 To string Denotes the target route of the ButtonType.Link button. 1.0.0 TooltipPlacement TooltipPlacement Tooltip placement TooltipPlacement.Top 1.0.0 TooltipTitle string Displays informative text when users hover, focus, or tap an element. 1.0.0 TooltipColor TooltipColor Gets or sets the tooltip color. TooltipColor.None 1.10.0 Type ButtonType Defines the button type. ButtonType.Button 1.0.0 Methods​ Name Description ShowLoading Shows the loading state and disables the button. HideLoading Hides the loading state and enables the button. Examples​ Buttons​ Blazor Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

See buttons demo here. Button tags​

See button tags demo here. Outline Buttons​

See outline button demo here. info Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. Sizes​ Fancy larger or smaller buttons? Add Size=\"Size.Large\" or Size=\"Size.Small\" for additional sizes.

See buttons with different size demo here. Disabled State​ Make buttons look inactive by adding the Disabled=\"true\" boolean parameter to any

See button disabled state demo here. Disable and enable state dynamically​ @code { bool disableButton = true; string tooltip = \"\"; public void SwapDisable() { disableButton = !disableButton; tooltip = $\"Updated at {DateTime.Now}\"; } } See disable and enable state dynamically demo here. Block Buttons​ Create responsive stacks of full-width, \"block buttons\" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
See block buttons demo here. Toogle States​ If you''re pre-toggling a button, you must manually add the Active=\"true\" parameter.

See button toogle states demo here. Loading spinner​ Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

See button with loading spinner demo here. Show/Hide loading spinner​ Use ShowLoading() and HideLoading() methods to toggle the button state. @code { private Button saveButton; private async Task OnSaveClick() { saveButton?.ShowLoading(\"Saving details...\"); await Task.Delay(5000); // API call saveButton?.HideLoading(); } } See button with loading spinner demo here. Show Tooltip​ Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

See button with tooltip demo here. NOTE HTML tooltips not supported at this moment. Dynamically update the tooltip text​
@code { private string text = \"Tooltip text\"; private void ChangeTooltip() => text = $\"Updated {DateTime.Now.ToLongTimeString()}\"; } See demo here. Events​ Click events​

@code{ protected void OnClick(EventArgs args) { Console.WriteLine(\"click event\"); } } Double click event​

@code{ protected void OnDoubleClick(EventArgs args) { Console.WriteLine(\"double click event\"); } } Click event with arguments​

@code{ public string message = \"Test message\"; protected void OnClickWithArgs(EventArgs args, string message) { Console.WriteLine($\"message: {message}\"); } } See button click events demo here. Edit this page Previous Breadcrumb Next Callout Parameters Methods Examples Buttons Button tags Outline Buttons Sizes Disabled State Disable and enable state dynamically Block Buttons Toogle States Loading spinner Show/Hide loading spinner Show Tooltip Dynamically update the tooltip text Events","s":"Blazor Buttons","u":"/components/buttons","h":"","p":503},{"i":506,"t":"Components Collapse On this page Blazor Collapse Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component. Parameters​ Name Type Default Required Description Added Version ChildContent RenderFragment null ✔️ Specifies the content to be rendered inside the collapse. 1.7.0 Horizontal bool false Gets or sets the horizontal. 1.7.0 Parent string null Gets or sets the parent. 1.7.0 Toggle bool false Toggles the collapsible element on invocation. 1.7.0 Methods​ Name Description Added Version ShowAsync Shows a collapsible element. 1.7.0 HideAsync Hides a collapsible element. 1.7.0 ToggleAsync Toggles a collapsible element to shown or hidden. 1.7.0 Events​ Name Description Added Version OnShowing This event fires immediately when the show instance method is called. 1.7.0 OnShown This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). 1.7.0 OnHiding This event is fired immediately when the hide method has been called. 1.7.0 OnHidden This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). 1.7.0 How it works​ The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. Collapsing an element will animate the height from its current value to 0. info The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation. Examples​ Click the buttons below to show and hide the content. Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. @code { Collapse collapse1 = default!; private async Task ShowContentAsync() => await collapse1.ShowAsync(); private async Task HideContentAsync() => await collapse1.HideAsync(); private async Task ToggleContentAsync() => await collapse1.ToggleAsync(); } See demo here Horizontal​ The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing. This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. @code { Collapse collapse1 = default!; private async Task ShowContentAsync() => await collapse1.ShowAsync(); private async Task HideContentAsync() => await collapse1.HideAsync(); private async Task ToggleContentAsync() => await collapse1.ToggleAsync(); } See demo here Events Example​ Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality. Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
@foreach (var item in messages) {

@item

}
@code { Collapse collapse1 = default!; List messages = new List(); private async Task ShowContentAsync() => await collapse1.ShowAsync(); private async Task HideContentAsync() => await collapse1.HideAsync(); private async Task ToggleContentAsync() => await collapse1.ToggleAsync(); private void OnCollapseShowingAsync() => messages.Add($\"Event: OnShowing called {DateTime.Now.ToLocalTime()}\"); private void OnCollapseShownAsync() => messages.Add($\"Event: OnShown called {DateTime.Now.ToLocalTime()}\"); private void OnCollapseHidingAsync() => messages.Add($\"Event: OnHiding called {DateTime.Now.ToLocalTime()}\"); private void OnCollapseHiddenAsync() => messages.Add($\"Event: OnHidden called {DateTime.Now.ToLocalTime()}\"); private void ClearMessage() => messages = new List(); } Edit this page Previous Charts Next Confirm Dialog Parameters Methods Events How it works Examples Horizontal Events Example","s":"Blazor Collapse","u":"/components/collapse","h":"","p":505},{"i":508,"t":"Components Accordion On this page Blazor Accordion Build vertically collapsing accordions in combination with our Collapse component. Accordion Parameters​ Name Type Default Required Description Added Version ChildContent RenderFragment null ✔️ Specifies the content to be rendered inside this . 1.7.0 Flush bool false Removes borders and rounded corners to render accordions edge-to-edge with their parent container. 1.7.0 AlwaysOpen bool false It makes accordion items stay open when another item is opened. 1.7.0 Accordion Methods​ Name Description Added Version ShowFirstAccordionItemAsync Show the first AccordionItem. 1.7.0 ShowLastAccordionItemAsync Show the last AccordionItem. 1.7.0 ShowAccordionItemByNameAsync Show the AccordionItem by name. 1.7.0 ShowAccordionItemByIndexAsync Show the AccordionItem by index. 1.7.0 Accordion Events​ Name Description Added Version OnShowing This event fires immediately when the show method is called. 1.7.0 OnShown This event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete). 1.7.0 OnHiding This event is fired immediately when the hide method has been called. 1.7.0 OnHidden This event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete). 1.7.0 AccordionItem Parameters​ Name Type Default Required Description Added Version Content RenderFragment null ✔️ Specifies the content to be rendered inside the AccordionItem. 1.7.0 IsActive bool false Gets or sets the active AccordionItem. 1.7.0 Name string null Gets or sets the name. 1.7.0 Title string null Gets or sets the AccordionItem title. 1.7.0 TitleTemplate RenderFragment null Gets or sets the AccordionItem title template. 1.7.0 Examples​ Accordion​ Click the accordions below to expand/collapse the accordion content. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Title with Icon​ To customize the accordion title, use TitleTemplate, as shown in the below example. Accordion Item #1 This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. Accordion Item #2 This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. Accordion Item #3 This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Flush​ Set the Flush parameter to true to remove borders and rounded corners to render accordions edge-to-edge with their parent container. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Set default active accordion item​ Set the IsActive parameter to true to keep the accordion item open by default. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Always open​ Set the AlwaysOpen parameter to true to keep accordion items open when another item is opened. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Activate individual accordion items​ You can activate individual accordion items in several ways. Use predefined methods ShowFirstAccordionItemAsync, ShowLastAccordionItemAsync, ShowAccordionItemByNameAsync, and ShowAccordionItemByIndexAsync as shown below. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the fourth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the fifth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the sixth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. @code { private Accordion accordion1 = default!; private async Task ShowFirstAccordionItemAsync() => await accordion1.ShowFirstAccordionItemAsync(); private async Task ShowSecondAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(1); private async Task ShowThirdAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(2); private async Task ShowProductsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync(\"Products\"); private async Task ShowFaqsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync(\"FAQ\"); private async Task ShowLastAccordionItemAsync() => await accordion1.ShowLastAccordionItemAsync(); } See demo here. Events Example​ Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. @code { private Accordion accordion1 = default!; [Inject] ToastService ToastService { get; set; } = default!; private void OnShowingAsync(AccordionEventArgs args) { ToastService.Notify(new ToastMessage( type: ToastType.Primary, message: $\"Event Name: Showing, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}\")); } private void OnShownAsync(AccordionEventArgs args) { ToastService.Notify(new ToastMessage( type: ToastType.Primary, message: $\"Event Name: OnShown, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}\")); } private void OnHidingAsync(AccordionEventArgs args) { ToastService.Notify(new ToastMessage( type: ToastType.Primary, message: $\"Event Name: OnHiding, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}\")); } private void OnHiddenAsync(AccordionEventArgs args) { ToastService.Notify(new ToastMessage( type: ToastType.Primary, message: $\"Event Name: OnHidden, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}\")); } } See demo here. Edit this page Previous Time Input Next Alerts Accordion Parameters Accordion Methods Accordion Events AccordionItem Parameters Examples Accordion Title with Icon Flush Set default active accordion item Always open Activate individual accordion items Events Example","s":"Blazor Accordion","u":"/components/accordion","h":"","p":507},{"i":510,"t":"Components Confirm Dialog On this page Blazor Confirm Dialog Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something. Methods​ Name Return Type Description Added Version ShowAsync(string title, string message1, ConfirmDialogOptions confirmDialogOptions = null) Task Shows confirm dialog. 1.1.0 ShowAsync(string title, string message1, string message2, ConfirmDialogOptions confirmDialogOptions = null) Task Shows confirm dialog. 1.1.0 ShowAsync(string title, Dictionary parametres = null, ConfirmDialogOptions confirmDialogOptions = null) Task Shows confirm dialog. T is component. 1.1.0 ConfirmDialogOptions Properties​ Name Type Default Description Added Version DialogCssClass string Additional CSS class for the dialog (div.modal-dialog element). 1.1.0 Dismissable bool Adds a dismissable close button to the confirm dialog. 1.1.0 HeaderCssClass string Additional header CSS class (div.modal-header element). 1.1.0 IsScrollable bool Allows confirm dialog body to be scrollable. 1.1.0 IsVerticallyCentered bool Shows the confirm dialog vertically in the center of the page. 1.1.0 NoButtonColor ButtonColor Gets or sets the 'No' button color. 1.1.0 NoButtonText string No Gets or sets the 'No' button text. 1.1.0 Size DialogSize ModalSize.Regular Size of the modal. 1.1.0 YesButtonColor ButtonColor ButtonColor.Primary Gets or sets the 'Yes' button color. 1.1.0 YesButtonText string Yes Gets or sets the 'Yes' button text. 1.1.0 Examples​ Confirm Dialog​ @code { private ConfirmDialog dialog; private async Task ShowConfirmationAsync() { var confirmation = await dialog.ShowAsync( title: \"Are you sure you want to delete this?\", message1: \"This will delete the record. Once deleted can not be rolled back.\", message2: \"Do you want to proceed?\"); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Dynamic component as confirm dialog​ Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. In the below example, we used Toast Service to show the user confirmation. @code { private ConfirmDialog dialog; [Inject] ToastService ToastService { get; set; } private async Task DeleteEmployeeAsync() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 321); var confirmation = await dialog.ShowAsync(\"Are you sure you want to delete this employee?\", parameters); if (confirmation) { // call API to delete the employee // show acknowledgment to the user ToastService.Notify(new ToastMessage(ToastType.Success, $\"Employee deleted successfully.\")); } else ToastService.Notify(new ToastMessage(ToastType.Secondary, $\"Delete action canceled.\")); } } EmployeeDemoComponent.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee; [Parameter] public int EmployeeId { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Vikram\", LastName = \"Reddy\" }; base.OnInitialized(); } } See Confirm Dialog demo here. Change buttons text and color​ Use ConfirmDialogOptions to change the text and color of the button. @code { private ConfirmDialog dialog; private async Task ShowSaveConfirmationAsync() { var options = new ConfirmDialogOptions { YesButtonText = \"OK\", YesButtonColor = ButtonColor.Success, NoButtonText = \"CANCEL\", NoButtonColor = ButtonColor.Danger }; var confirmation = await dialog.ShowAsync( title: \"Simple Confirm Dialog\", message1: \"Do you want to proceed?\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Optional sizes​ Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. Confirm Dialog Component - Small Size Confirm Dialog Component - Large Size Confirm Dialog Component - Extra Large Size @code { private ConfirmDialog dialog; private async Task ShowConfirmationAsync(DialogSize size) { var options = new ConfirmDialogOptions { Size = size }; var confirmation = await dialog.ShowAsync( title: \"Simple Confirm Dialog\", message1: \"Do you want to proceed?\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Scrolling long content​ When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. @code { private ConfirmDialog dialog; private async Task ShowDialogAsync() { var confirmation = await dialog.ShowAsync(title: \"Confirm dialog title\"); if (confirmation) { // do whatever } else { // do whatever } } } You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable=\"true\". @code { private ConfirmDialog dialog; private async Task ShowDialogAsync() { var options = new ConfirmDialogOptions { IsScrollable = true }; var confirmation = await dialog.ShowAsync( title: \"Confirm dialog title\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Vertically centered​ Add DialogOptions.IsVerticallyCentered=\"true\" to vertically center the confirm dialog. @code { private ConfirmDialog dialog; private async Task ShowDialogAsync() { var options = new ConfirmDialogOptions { IsVerticallyCentered = true }; var confirmation = await dialog.ShowAsync( title: \"Simple Confirm Dialog\", message1: \"Do you want to proceed?\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable=\"true\". @code { private ConfirmDialog dialog; private async Task ShowDialogAsync() { var options = new ConfirmDialogOptions { IsScrollable = true, IsVerticallyCentered = true }; var confirmation = await dialog.ShowAsync(title: \"Confirm dialog title\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Edit this page Previous Collapse Next Dropdown Methods ConfirmDialogOptions Properties Examples Confirm Dialog Dynamic component as confirm dialog Change buttons text and color Optional sizes Scrolling long content Vertically centered","s":"Blazor Confirm Dialog","u":"/components/confirm-dialog","h":"","p":509},{"i":512,"t":"Components Offcanvas On this page Blazor Offcanvas Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component. Parameters​ Name Type Description Required Default Added Version BodyCssClass string Additional body CSS class. 1.0.0 BodyTemplate RenderFragment Body content. ✔️ 1.0.0 CloseOnEscape bool Indicates whether the offcanvas closes when escape key is pressed. true 1.0.0 FooterCssClass string Additional footer CSS class. 1.0.0 FooterTemplate RenderFragment Footer content. 1.0.0 HeaderCssClass string Additional header CSS class. 1.0.0 HeaderTemplate RenderFragment Content for the header. 1.0.0 IsScrollable bool Indicates whether body (page) scrolling is allowed while offcanvas is open. false 1.0.0 Placement Placement Gets or sets the offcanvas placement. By default, offcanvas is placed on the right of the viewport. Placement.End 1.0.0 ShowCloseButton bool Indicates whether the modal shows close button in header. true 1.0.0 Size OffcanvasSize Size of the offcanvas. OffcanvasSize.Regular 1.0.0 TabIndex int Gets or sets the tab index. -1 1.6.0 Title string Text for the title in header. ✔️ 1.0.0 UseStaticBackdrop bool When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it. false 1.8.0 Methods​ Method Description Added Version ShowAsync Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the OnShown event occurs). 1.0.0 HideAsync Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the OnHidden event occurs). 1.0.0 Asynchronous methods and transitions All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored. Callback Events​ Event Description OnShowing This event fires immediately when the show instance method is called. OnShown This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). OnHiding This event is fired immediately when the hide method has been called. OnHidden This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). How it works​ Offcanvas is a sidebar component that can be toggled to appear from the left, right, or bottom edge of the viewport. Conceptually, they are quite similar to the Modal component, but they are separate components. When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas. Similar to modals, only one offcanvas can be shown at a time. Examples​ Offcanvas​ Below is an offcanvas example that is shown by default. ... design your header and body @code { private Offcanvas offcanvas; private async Task ShowOffcanvasAsync() { await offcanvas?.ShowAsync(); } private async Task HideOffcanvasAsync() { await offcanvas?.HideAsync(); } } See demo here. info Default placement for the offcanvas component is right. Dynamic component as offcanvas​ Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @code { private Offcanvas offcanvas = default!; private string? message; private async Task ShowEmployeeComponent() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 321); await offcanvas.ShowAsync(title: \"Employee Details\", parameters: parameters); } } EmployeeDemoComponent1.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee = default!; [Parameter] public int EmployeeId { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Vikram\", LastName = \"Reddy\" }; base.OnInitialized(); } } See demo here. Pass event callbacks to a dynamic component​ Event callbacks can be passed in its parameter dictionary. In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary: The string key is the callback method's name, OnClickCallback. The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
@message
@code { private Offcanvas offcanvas = default!; private string? message; private async Task ShowEmployeeComponent() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 322); parameters.Add(\"OnclickCallback\", EventCallback.Factory.Create(this, ShowDTMessage)); await offcanvas.ShowAsync(title: \"Employee Details\", parameters: parameters); } private void ShowDTMessage(MouseEventArgs e) => message = $\"The current date time is: {DateTime.Now}.\"; } EmployeeDemoComponent2.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee = default!; [Parameter] public int EmployeeId { get; set; } [Parameter] public EventCallback OnClickCallback { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Sagar\", LastName = \"Reddy\" }; base.OnInitialized(); } } See demo here. Placement​ Try the top, bottom, and left examples out below. ... @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } } See demo here. Static backdrop​ When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

 @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } } See demo here. Sizes​ Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular. Small Offcanvas​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

 @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } } See demo here. Large Offcanvas​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

 @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } } Callback Events​ BlazorBootstrap's offcanvas component exposes a few events for hooking into offcanvas functionality.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
 @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } private async Task OnHideOffcanvasClick() { await offcanvas?.HideAsync(); } private async Task OnOffcanvasShowingAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Showing\"); }); } private async Task OnOffcanvasShownAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Shown\"); }); } private async Task OnOffcanvasHidingAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hiding\"); }); } private async Task OnOffcanvasHiddenAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hidden\"); }); } } See demo here. Edit this page Previous Modal Next Pagination Parameters Methods Callback Events How it works Examples Offcanvas Dynamic component as offcanvas Pass event callbacks to a dynamic component Placement Static backdrop Sizes Callback Events","s":"Blazor Offcanvas","u":"/components/offcanvas","h":"","p":511},{"i":514,"t":"Components Pagination On this page Blazor Pagination Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages. Parameters​ Name Type Description Required Default ActivePageNumber int Active page number. Starts with 1. 1 Alignment Alignment Gets or sets the pagination alignment. Alignment.None DisplayPages int Gets or sets the maximum page links to be displayed. 5 FirstLinkIcon IconName Gets or sets first link icon. FirstLinkText string Gets or sets first link text. FirstLinkText is ignored if FirstLinkIcon is specified. First LastLinkIcon IconName Gets or sets last link icon. LastLinkText string Gets or sets last link text. LastLinkText is ignored if LastLinkIcon is specified. Last NextLinkIcon IconName Gets or sets next link icon. NextLinkText string Gets or sets next link text. NextLinkText is ignored if NextLinkIcon is specified. Next PreviousLinkIcon IconName Gets or sets previous link icon. PreviousLinkText string Gets or sets previous link text. PreviousLinkText is ignored if PreviousLinkIcon is specified. Previous Size PaginationSize Gets or sets the pagination size. TotalPages int Total pages of data items. Callback Events​ Event Description PageChanged This event fires immediately when the page number is changed. Examples​ Pagination​ We use a large block of connected links for our pagination, making links hard to miss and easily scalable - all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. See demo here. Working with icons​ See demo here. Disabled and active states​ See demo here. Sizing​ Fancy larger or smaller pagination? Add Size=\"PaginationSize.Small\" or Size=\"PaginationSize.Large\" for additional sizes. See demo here. Alignment​ See demo here. Callback Events​ Current Page Number: @currentPageNumber @code { int currentPageNumber = 2; private async Task OnPageChangedAsync(int newPageNumber) { await Task.Run(() => { currentPageNumber = newPageNumber; }); } } See demo here. Edit this page Previous Offcanvas Next Placeholders Parameters Callback Events Examples Pagination Working with icons Disabled and active states Sizing Alignment Callback Events","s":"Blazor Pagination","u":"/components/pagination","h":"","p":513},{"i":516,"t":"Components Modal On this page Blazor Modal Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content. Parameters​ Name Type Description Required Default Added Version BodyCssClass string Additional body CSS class. 1.0.0 BodyTemplate RenderFragment Body template. ✔️ 1.0.0 ChildContent RenderFragment Specifies the content to be rendered inside the alert. 1.0.0 CloseOnEscape bool Indicates whether the modal closes when escape key is pressed. true 1.0.0 DialogCssClass string Additional CSS class for the dialog (div.modal-dialog element). 1.0.0 FooterCssClass string Footer css class. 1.0.0 FooterTemplate RenderFragment Footer template. ✔️ 1.0.0 Fullscreen ModalFullscreen Fullscreen behavior of the modal. ModalFullscreen.Disabled 1.0.0 HeaderTemplate RenderFragment Header template. ✔️ 1.0.0 HeaderCssClass string Additional header CSS class. 1.0.0 IsScrollable bool Allows modal body scroll. false 1.0.0 IsServiceModal bool Indicates whether the modal is related to a modal service or not. false 1.9.4 IsVerticallyCentered bool Shows the modal vertically in the center. false 1.0.0 ModalType ModalType Gets or sets the modal type. ModalType.Light 1.9.5 Size ModalSize Size of the modal. ModalSize.Regular 1.0.0 ShowCloseButton bool Indicates whether the modal shows close button in header. true 1.0.0 TabIndex int Gets or sets the tab index. -1 1.6.0 Title string ✔️ 1.0.0 UseStaticBackdrop bool Indicates whether the modal uses a static backdrop. false 1.0.0 Methods​ Name Description Added Version ShowAsync Opens a modal. 1.0.0 ShowAsync(string title, Dictionary parameters = null) Opens a modal. T is component. 1.4.1 HideAsync Hides a modal. 1.0.0 Asynchronous methods and transitions All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored. Callback Events​ Event Description OnShowing This event fires immediately when the show instance method is called. OnShown This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). OnHiding This event is fired immediately when the hide method has been called. OnHidden This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). OnHidePrevented This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-bs-keyboard set to false. How it works​ Before getting started with BlazorBootstrap's modal component, be sure to read the following as our menu options have recently changed. Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the so that modal content scrolls instead. Clicking on the modal \"backdrop\" will automatically close the modal. BlazorBootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. Examples​ Modal​ Clicking the Show Modal button below, the modal will slide down and fade in from the top of the page. Modal body text goes here. @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Dynamic component as modal​ Render different components dynamically within the modal without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @code { private Modal modal = default!; private string? message; private async Task OnShowModalClick() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 321); await modal.ShowAsync(title: \"Employee Details\", parameters: parameters); } } EmployeeDemoComponent1.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee; [Parameter] public int EmployeeId { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Vikram\", LastName = \"Reddy\" }; base.OnInitialized(); } } See demo here. Pass event callbacks to a dynamic component​ Event callbacks (EventCallback) can be passed in its parameter dictionary. In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary: The string key is the callback method's name, OnClickCallback. The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
@message
@code { private Modal modal = default!; private string? message; private async Task OnShowModalClick() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 322); parameters.Add(\"OnclickCallback\", EventCallback.Factory.Create(this, ShowDTMessage)); await modal.ShowAsync(title: \"Employee Details\", parameters: parameters); } private void ShowDTMessage(MouseEventArgs e) => message = $\"The current DT is: {DateTime.Now}.\"; } EmployeeDemoComponent2.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee; [Parameter] public int EmployeeId { get; set; } [Parameter] public EventCallback OnClickCallback { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Sagar\", LastName = \"Reddy\" }; base.OnInitialized(); } } See demo here. Static backdrop​ When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. CloseOnEscape should also be set to false to ignore the effect of pressing the Esc key and mimic the original behaviour of Bootstrap modal. Click the button below to try it. I will not close if you click outside me. Don't even try to press escape key. @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Scrolling long content​ When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.

This content should appear at the bottom after you scroll.

 @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Vertically centered​ Add IsVerticallyCentered=\"true\" to vertically center the modal. This is a vertically centered modal. @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Vertically centered and scrollable​

This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.

This content should appear at the bottom after you scroll.

 @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Optional sizes​ Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. ... ... ... @code { private Modal xlModal; private Modal lgModal; private Modal smModal; } See demo here. Fullscreen Modal​ ... ... ... ... ... ... @code { private Modal modal; private Modal smModal; private Modal mdModal; private Modal lgModal; private Modal xlModal; private Modal xxlModal; } See demo here. Callback Events​ BlazorBootstrap's modal class exposes a few events for hooking into modal functionality. Modal body text goes here. @code { private Modal modal; private async Task OnModalShowingAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Showing\"); }); } private async Task OnModalShownAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Show\"); }); } private async Task OnModalHidingAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hiding\"); }); } private async Task OnModalHiddenAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hide\"); }); } private async Task OnModalHidePreventedAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hide Prevented\"); }); } } See demo here. Edit this page Previous Grid Next Offcanvas Parameters Methods Callback Events How it works Examples Modal Dynamic component as modal Pass event callbacks to a dynamic component Static backdrop Scrolling long content Vertically centered Vertically centered and scrollable Optional sizes Fullscreen Modal Callback Events","s":"Blazor Modal","u":"/components/modal","h":"","p":515},{"i":518,"t":"Components Placeholders On this page Blazor Placeholders Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading. PlaceholderContainer Parameters​ Name Type Description Required Default Animation PlaceholderAnimation Gets or sets the placeholder animation. PlaceholderAnimation.Glow ChildContent RenderFragment Specifies the content to be rendered inside this. Placeholder Parameters​ Name Type Description Required Default Width PlaceholderWidth Gets or sets the placeholder width. PlaceholderWidth.Col1 Color PlaceholderColor Gets or sets the placeholder color. PlaceholderColor.None Size PlaceholderSize Gets or sets the placeholder size. PlaceholderSize.None Examples​ Placeholders​ See demo here. Width​ You can change the width through PlaceholderWidth, width utilities, or inline styles. See demo here. Color​ By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum. See demo here. Sizing​ The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum. See demo here. Animation​ Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.

See demo here. Edit this page Previous Pagination Next Preload PlaceholderContainer Parameters Placeholder Parameters Examples Placeholders Width Color Sizing Animation","s":"Blazor Placeholders","u":"/components/placeholders","h":"","p":517},{"i":520,"t":"Components Progress On this page Blazor Progress Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels. Progress Parameters​ Name Type Default Required Description ChildContent RenderFragment ✔️ Specifies the content to be rendered inside this. Height double 16 Gets or sets the height of the Progress. Height is measured in pixels, and the default height is 16 pixels. ProgressBar Parameters​ Name Type Default Required Description Color ProgressColor Gets or sets the progress color. Label string Gets or sets the progress bar label. Type ProgressType Gets or sets the progress bar type. Width double Get or sets the progress bar width. ProgressBar Methods​ Name Description DecreaseWidth Decrease the progress bar width. GetWidth Get the progress bar width. IncreaseWidth Increase the progress bar width. SetColor Set the progress bar color. SetLabel Set the progress bar label. SetWidth Set the progress bar width. Examples​ How it works​ See demo here. Labels​ Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method. See demo here. Set width programmatically​ Use IncreaseWidth() or DecreaseProgressBar() methods to increase or decrease the Blazor ProgressBar width.
@code { ProgressBar progressBar; private void IncreaseProgressBar() { progressBar.IncreaseWidth(10); progressBar.SetLabel($\"{progressBar.GetWidth()}%\"); } private void DecreaseProgressBar() { progressBar.DecreaseProgressBar(10); progressBar.SetLabel($\"{progressBar.GetWidth()}%\"); } private void ResetProgressBar() { progressBar.SetWidth(0); progressBar.SetLabel($\"{progressBar.GetWidth()}%\"); } } See demo here. Height​ Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels. See demo here. Backgrounds​ Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components. See demo here. Set background programmatically​ You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.
@code { ProgressBar progressBar; private void SetColor(ProgressColor color) => progressBar.SetColor(color); } See demo here. Multiple bars​ Include multiple Blazor ProgressBar components in a Blazor Progress component if needed. See demo here. Striped​ Add Type=\"ProgressType.Striped\" to any Blazor ProgressBar component to apply a stripe. See demo here. Animated stripes​ The stripes can also be animated. Add Type=\"ProgressType.StripedAndAnimated\" to the Blazor ProgressBar component to animate the stripes right to the left. See demo here. Edit this page Previous Preload Next Sidebar Progress Parameters ProgressBar Parameters ProgressBar Methods Examples How it works Labels Set width programmatically Height Backgrounds Set background programmatically Multiple bars Striped Animated stripes","s":"Blazor Progress","u":"/components/progress","h":"","p":519},{"i":522,"t":"Components Preload On this page Blazor Preload Indicate the loading state of a page with Blazor Bootstrap preload component. Things to know when using the Preload component: Add the Preload component to your current page or your layout page. Inject PreloadService Call PreloadService.Show() before you make any call to the API. Call PreloadService.Hide() after you get the response from the API. Parameters​ Name Type Default Description Required Version Added ChildContent RenderFragment null Specifies the content to be rendered inside this. 1.1.0 LoadingText string? null Gets or sets the loading text. 1.10.4 Preload Service​ Methods​ Name Return Type Description Added Version Show(SpinnerColor spinnerColor = SpinnerColor.Light) void Shows the preload. 1.1.0 Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null) void Shows the preload. 1.10.4 Hide() void Hides the preload. 1.1.0 Global preload service for the application​ Add the Preload component in MainLayout.razor page as shown below. @using BlazorBootstrap . . ... MainLayout.razor code goes here ... . . Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API call, respectively, as shown below. @code { [Inject] protected PreloadService PreloadService { get; set; } private void GetEmployees() { try { PreloadService.Show(); // call the service/api to get the employees } catch { // handle exception } finally { PreloadService.Hide(); } } } See Preload demo here. Change loading text​ @code { [Inject] protected PreloadService PreloadService { get; set; } private async Task ShowLoadingDataAsync() { PreloadService.Show(SpinnerColor.Light, \"Loading data...\"); await Task.Delay(3000); // call the service/api PreloadService.Hide(); } private async Task ShowSavingDataAsync() { PreloadService.Show(SpinnerColor.Light, \"Saving data...\"); await Task.Delay(3000); // call the service/api PreloadService.Hide(); } } See Preload demo here. Change spinner color​ Change the default spinner color by passing the SpinnerColor enum to the Show(...) method. In the below example, we are using a global preload service, as shown in the above section. @code { [Inject] protected PreloadService PreloadService { get; set; } private async Task ShowSpinnerAsync(SpinnerColor spinnerColor) { PreloadService.Show(spinnerColor); await Task.Delay(3000); // call the service/api PreloadService.Hide(); } } See Preload demo here. Edit this page Previous Placeholders Next Progress Parameters Preload Service Methods Global preload service for the application Change loading text Change spinner color","s":"Blazor Preload","u":"/components/preload","h":"","p":521},{"i":524,"t":"Components Toasts On this page Blazor Toasts Push notifications to your visitors with a toast, a lightweight and easily customizable Blazor Bootstrap toast message. Blazor Toasts are lightweight notifications designed to mimic the push notifications that mobile and desktop operating systems have popularized. They're built with a flexbox, making it easy to align and position. Things to know when using the blazor toasts component: Toasts will not hide automatically if you do not specify AutoHide=\"true\". Use global toasts service for the application instead of page level toasts. Toasts Parameters​ Name Type Description Required Default Added Version AutoHide bool Auto hide the toast. false 1.0.0 Delay int Delay hiding the toast (milli seconds). 5000 1.0.0 Messages List List of all the toasts. ✔️ 1.0.0 Placement ToastsPlacement Specifies the toasts placement. ToastsPlacement.TopRight 1.0.0 ShowCloseButton bool Show close button. true 1.0.0 StackLength int Specifies the toast container maximum capacity. 5 1.0.0 ToastMessage Properties​ Name Type Description Required Default Added Version AutoHide bool Gets or sets the auto hide behavior to a message. false 1.9.0 CustomIconName string Gets or sets the custom icon name. 1.0.0 HelpText string Gets or sets the help text. 1.0.0 IconName IconName Gets or sets the bootstarp icon name. 1.0.0 Id Guid Gets the toast id. 1.0.0 Message string Gets or sets the toast message. ✔️ 1.0.0 Title string Gets or sets the toast''s message title. 1.0.0 Type ToastType Gets or sets the type of the toast. ✔️ 1.0.0 Examples:​ Toast​ To encourage extensible and predictable toasts, we recommend a header and body. Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your \"toasted\" content and strongly encourage a dismiss button. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) => new ToastMessage { Type = toastType, Title = \"Blazor Bootstrap\", HelpText = $\"{DateTime.Now}\", Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\", }; } See toasts demo here. Toast without title​ Customize your toasts by removing sub-components, tweaking them with utilities. Here we've created a simple toast. You can create different toast color schemes with the Color parameter. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) => new ToastMessage { Type = toastType, Message = $\"Hello, world! This is a simple toast message. DateTime: {DateTime.Now}\", }; } See toasts without title demo here. Auto hide​ Add AutoHide=\"true\" parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) => new ToastMessage { Type = toastType, Title = \"Blazor Bootstrap\", HelpText = $\"{DateTime.Now}\", Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\", }; } See auto hide toasts demo here. Auto hide individual messages​ Set AutoHide=\"true\" property on ToastMessage to hide individual Blazor Toast message after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast. In the below example, AutoHide=\"false\" for Danger and Warning messages. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) { var toastMessage = new ToastMessage(); toastMessage.Type = toastType; toastMessage.Title = \"Blazor Bootstrap\"; toastMessage.HelpText = $\"{DateTime.Now}\"; toastMessage.Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\"; // disable auto hide for `danger` and `warning` messages. toastMessage.AutoHide = !(toastType == ToastType.Danger || toastType == ToastType.Warning); return toastMessage; } } See auto hide individual toasts demo here. Placement​ Change the Blazor Toasts placement according to your need. The default placement will be top right corner. Use the ToastsPlacement parameter to update the Blazor Toasts placement. @code { ToastsPlacement toastsPlacement = ToastsPlacement.TopRight; List messages = new(); private void ChangePlacement(ToastsPlacement placement) { if (!messages.Any()) { messages.Add( new ToastMessage() { Type = ToastType.Success, Title = \"Blazor Bootstrap\", HelpText = $\"{DateTime.Now}\", Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\", }); } toastsPlacement = placement; } } See demo here. Stack Length​ Blazor Toasts component shows a maximum of 5 toasts by default. If you add a new toast to the existing list, the first toast gets deleted like FIFO (First In First Out). Change the maximum capacity according to your need by using the StackLength parameter. In the below example, StackLength is set to 3. It shows a maximum of 3 toast messages at any time. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) => new ToastMessage { Type = toastType, Title = \"Blazor Bootstrap\", HelpText = $\"{DateTime.Now}\", Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\", }; } See demo here. Global toasts service for the application​ Add the Toasts component in MainLayout.razor page as shown below. @inherits LayoutComponentBase ... ... MainLayour.razor code goes here ... ... tip Set the Toasts component parameters as per your requirement. Inject ToastService, then call the Notify(...) method as shown below. @code { [Inject] protected ToastService ToastService { get; set; } private void SaveEmployee() { try { // TODO: call the service/api to save the employee details ToastService.Notify(new(ToastType.Success, $\"Employee details saved successfully.\")); } catch(Exception ex) { // handle exception ToastService.Notify(new(ToastType.Danger, $\"Error: {ex.Message}.\")); } } } Edit this page Previous Tabs Next Tooltips Toasts Parameters ToastMessage Properties Examples: Toast Toast without title Auto hide Auto hide individual messages Placement Stack Length Global toasts service for the application","s":"Blazor Toasts","u":"/components/toasts","h":"","p":523},{"i":526,"t":"Content Icons On this page Blazor Icons Blazor Bootstrap icon component will display an icon from any icon font. Prerequisites​ Install Bootstrap Icons or other. Refer: Bootstrap Icons Include the icon fonts stylesheet in your website or @import in CSS from CDN. Parameters​ Name Type Description Required Default Added Version Color IconColor Gets or sets the icon color. IconColor.None 1.9.0 CustomIconName string Specify custom icons of your own, like fontawesome. Example: fas fa-alarm-clock ✔️ 1.0.0 Name IconName Gets or sets the icon name. ✔️ 1.0.0 Size IconSize Gets or sets the icon size. IconSize.None 1.0.0 NOTE Either Name or CustomIconName parameter is mandatory. For Font Awesome setup, please follow the Font Awesome website. Examples​ Icons​ See icons demo here. Sizes​ See icons with different size demo here. Font awesome icons​ In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website. Colors​ See icons with different size demo here. Inline text with icon​ Inline text See inline text with icon demo here. Link with icon​ Example link text See link with icon demo here. Link with custom icon​ Example link text See link with custom icon demo here. Button with icon and text​ See button with icon and text demo here. Button with icon only​ See button with icon only demo here. Button with font awesome icon​ In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website. Icon with tooltip​ Bootstrap Icons​ See all bootstrap icons demo here. Edit this page Previous Blazor Server Next Auto Complete Prerequisites Parameters Examples Icons Sizes Font awesome icons Colors Inline text with icon Link with icon Link with custom icon Button with icon and text Button with icon only Button with font awesome icon Icon with tooltip Bootstrap Icons","s":"Blazor Icons","u":"/content/icons","h":"","p":525},{"i":528,"t":"Components Tabs On this page Blazor Tabs Documentation and examples for how to use Blazor Bootstrap tabs components. Tabs Parameters​ Name Type Description Required Default ChildContent RenderFragment Specifies the content to be rendered inside this. EnableFadeEffect bool Gets or sets the tabs fade effect. false NavStyle NavStyle Get or sets the nav style. NavStyle.Tabs Tabs Methods​ Name Description ShowFirstTabAsync Selects the first tab and show its associated pane. ShowLastTabAsync Selects the last tab and show its associated pane. ShowTabByNameAsync(string) Selects the tab by name and show its associated pane. ShowTabByIndexAsync(int) Selects the tab by index and show its associated pane. Tab Parameters​ Name Type Description Required Default Title string Gets or sets the tab title. TitleTemplate RenderFragment Gets or sets the tab title template. Content RenderFragment Specifies the content to be rendered inside the tab. ✔️ IsActive bool Gets or sets the active tab. false Disabled bool Gets or sets the disabled. false Note Either Title or TitleTemplate is required. Examples​ Tabs​

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Fade effect​ To make tabs fade in, add EnableFadeEffect=\"true\". The first tab pane must also have IsActive=\"true\" to make the initial content visible.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Title with icon​ To customize the tab title, use TitleTemplate, as shown in the below example. Home

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

Profile

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

Contact

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Disable Tab​ Disable specific tabs by adding Disabled=\"true\" parameter.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Projects tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Pills​ Use NavStyle=\"NavStyle.Pills\" parameter to change the tabs to pills.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Activate individual tabs​ You can activate individual tabs in several ways. Use predefined methods ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the Products tab.

This is the placeholder content for the FAQs tab.

This is the placeholder content for the About tab.

 @code{ Tabs tabs; private async Task ShowFirstTabAsync() => await tabs.ShowFirstTabAsync(); private async Task ShowSecondTabAsync() => await tabs.ShowTabByIndexAsync(1); private async Task ShowThirdTabAsync() => await tabs.ShowTabByIndexAsync(2); private async Task ShowProductsTabAsync() => await tabs.ShowTabByNameAsync(\"Products\"); private async Task ShowFaqsAsync() => await tabs.ShowTabByNameAsync(\"FAQ\"); private async Task ShowLastTabAsync() => await tabs.ShowLastTabAsync(); } See demo here. Callback Events​ When showing a new tab, the events fire in the following order: OnHiding (on the current active tab) OnShowing (on the to-be-shown tab) OnHidden (on the previous active tab, the same one as for the OnHiding event) OnShown (on the newly-active just-shown tab, the same one as for the OnShowing event) Note If no tab was already active, then the OnHiding and OnHidden events will not be fired. See demo here. Set active tab OnAfterRender​

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the About tab.

 @code { Tabs tabs = default!; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { string userDefaultPreferredTab = \"Profile\"; // Get the value from Service / API switch (userDefaultPreferredTab) { case \"Home\": await tabs.ShowTabByIndexAsync(0); break; case \"Profile\": await tabs.ShowTabByIndexAsync(1); break; case \"Contact\": await tabs.ShowTabByIndexAsync(2); break; case \"About\": await tabs.ShowTabByIndexAsync(3); break; default: await tabs.ShowTabByIndexAsync(0); break; } } } } See demo here. Edit this page Previous Sidebar Next Toasts Tabs Parameters Tabs Methods Tab Parameters Examples Tabs Fade effect Title with icon Disable Tab Pills Activate individual tabs Callback Events Set active tab OnAfterRender","s":"Blazor Tabs","u":"/components/tabs","h":"","p":527},{"i":530,"t":"Components Tooltips On this page Blazor Tooltips Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages. Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. 1.0.0 Color TooltipColor Gets or sets the tooltip color. TooltipColor.None 1.10.0 Placement TooltipPlacement Specifies the tooltip placement. Default is top right. TooltipPlacement.Top 1.0.0 Title string Displays informative text when users hover, focus, or tap an element. ✔️ 1.0.0 Examples​ Tooltips​
Tooltip Left
Tooltip Top
Tooltip Right
Tooltip Bottom
See tooltips demo here. Disabled button with tooltip​ See disabled button with tooltip demo here. Tooltip icon with click event​ @code { private void OnClick() { Console.WriteLine($\"clicked\"); } } See icon with tooltip demo here. Dynamically update the tooltip text​
Tooltip Bottom
@code { private string text = \"Tooltip text\"; private void ChangeTooltip() => text = $\"Updated {DateTime.Now.ToLongTimeString()}\"; } see demo here Edit this page Previous Toasts Next Bar Chart Parameters Examples Tooltips Disabled button with tooltip Tooltip icon with click event Dynamically update the tooltip text","s":"Blazor Tooltips","u":"/components/tooltips","h":"","p":529},{"i":532,"t":"Data Visualization Bar Chart On this page Blazor Bar Chart A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side. Parameters​ Name Type Description Required Default Added Version Height int Gets or sets chart height. 1.0.0 Width int Gets or sets chart width. 1.0.0 Methods​ Name Return type Description Added Version AddDataAsync ChartData Adds data to bar chart. 1.10.0 AddDatasetAsync ChartData Adds dataset to bar chart. 1.10.0 InitializeAsync Task Initialize Bar Chart. 1.0.0 UpdateAsync Task Update Bar Chart. 1.0.0 ChartData Members​ Property Name Type Default Required Description Added Version Datasets List null ✔️ Gets or sets the Datasets. 1.0.0 Labels List null ✔️ Gets or sets the Labels. 1.0.0 BarChartDataset Members​ info BarChartDataset implements IChartDataset. Property Name Type Default Required Description Added Version BackgroundColor List null Get or sets the BackgroundColor. 1.0.0 BarPercentage double 0.8 Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. 1.0.0 BorderColor List null Get or sets the BorderColor. 1.0.0 BorderRadius int 0 Border radius. 1.0.0 BorderWidth List null Get or sets the BorderWidth. 1.0.0 CategoryPercentage double 0.8 Percent (0-1) of the available width each category should be within the sample width. 1.0.0 Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0 Datalabels BarChartDatasetDataLabels Get or sets the data labels Data List null Get or sets the Data. 1.0.0 Hidden bool false Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. 1.0.0 HoverBackgroundColor List null ✔️ Get or sets the HoverBackgroundColor. 1.0.0 HoverBorderColor List null ✔️ Get or sets the HoverBorderColor. 1.0.0 HoverBorderWidth List null ✔️ Get or sets the HoverBorderWidth. 1.0.0 Label string null The label for the dataset which appears in the legend and tooltips. 1.0.0 Type string null ✔️ Get or sets the chart type. 1.0.0 XAxisID string null The ID of the x axis to plot this dataset on. 1.0.0 YAxisID string null The ID of the y axis to plot this dataset on. 1.0.0 BarChartDatasetDataLabels Members​ Property Name Type Default Required Description Added Version Align string? center Gets or sets the align. 1.10.2 Anchor string? center Gets or sets the anchor. 1.10.2 BarChartOptions Members​ info BarChartOptions implements ChartOptions. Property Name Type Default Required Description Added Version IndexAxis string x The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. 1.0.0 Interaction Interaction Gets or sets the Interaction. 1.0.0 Layout ChartLayout Gets or sets the ChartLayout. 1.0.0 Locale string? Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. 1.10.0 Plugins BarChartPlugins Gets or sets the Plugins. 1.10.2 Responsive bool false Gets or sets the Responsive. 1.0.0 Scales Scales Gets or sets the Scales. 1.0.0 Examples​ Prerequisites​ Refer to the getting started guide for setting up charts. How it works​ In the following example, a categorical 12-color palette is used. tip For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; private int datasetsCount = 0; private int labelsCount = 0; private string[] months = { \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" }; private Random random = new(); protected override void OnInitialized() { chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await barChart.InitializeAsync(chartData, barChartOptions); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is BarChartDataset barChartDataset && barChartDataset is not null && barChartDataset.Data is not null) { var count = barChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(200)); } barChartDataset.Data = newData; newDatasets.Add(barChartDataset); } } chartData.Datasets = newDatasets; await barChart.UpdateAsync(chartData, barChartOptions); } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; if (datasetsCount >= 12) return; var chartDataset = GetRandomBarChartDataset(); chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions); } private async Task AddDataAsync() { if (chartData is null || chartData.Datasets is null) return; if (labelsCount >= 12) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is BarChartDataset barChartDataset) data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200))); } chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data); } private async Task ShowHorizontalBarChartAsync() { barChartOptions.IndexAxis = \"y\"; await barChart.UpdateAsync(chartData, barChartOptions); } private async Task ShowVerticalBarChartAsync() { barChartOptions.IndexAxis = \"x\"; await barChart.UpdateAsync(chartData, barChartOptions); } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomBarChartDataset()); } return datasets; } private BarChartDataset GetRandomBarChartDataset() { var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); datasetsCount += 1; return new BarChartDataset() { Label = $\"Product {datasetsCount}\", Data = GetRandomData(), BackgroundColor = new List { c.ToRgbString() }, BorderColor = new List { c.ToRgbString() }, BorderWidth = new List { 0 }, }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < labelsCount; index++) { data.Add(random.Next(200)); } return data; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); } return labels; } private string GetNextDataLabel() { labelsCount += 1; return months[labelsCount - 1]; } #endregion Data Preparation } See the demo here. Horizontal bar chart​ @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var labels = new List { \"Chrome\", \"Firefox\", \"Safari\", \"Edge\" }; var datasets = new List(); var dataset1 = new BarChartDataset() { Data = new List { 55000, 15000, 18000, 21000 }, BackgroundColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, BorderColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset1); chartData = new ChartData { Labels = labels, Datasets = datasets }; barChartOptions = new BarChartOptions(); barChartOptions.Responsive = true; barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = \"y\"; barChartOptions.Scales.X.Title.Text = \"Visitors\"; barChartOptions.Scales.X.Title.Display = true; barChartOptions.Scales.Y.Title.Text = \"Browser\"; barChartOptions.Scales.Y.Title.Display = true; barChartOptions.Plugins.Legend.Display = false; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await barChart.InitializeAsync(chartData, barChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Stacked bar chart​ @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"Chrome\", \"Firefox\", \"Safari\", \"Edge\" }; var datasets = new List(); var dataset1 = new BarChartDataset() { Label = \"Windows\", Data = new List { 28000, 8000, 2000, 17000 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset1); var dataset2 = new BarChartDataset() { Label = \"macOS\", Data = new List { 8000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset2); var dataset3 = new BarChartDataset() { Label = \"Other\", Data = new List { 28000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; barChartOptions = new(); barChartOptions.Responsive = true; barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = \"y\"; barChartOptions.Scales.X.Title.Text = \"Visitors\"; barChartOptions.Scales.X.Title.Display = true; barChartOptions.Scales.Y.Title.Text = \"Browser\"; barChartOptions.Scales.Y.Title.Display = true; barChartOptions.Scales.X.Stacked = true; barChartOptions.Scales.Y.Stacked = true; barChartOptions.Plugins.Title.Text = \"Operating system\"; barChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await barChart.InitializeAsync(chartData, barChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Locale​ By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"Chrome\", \"Firefox\", \"Safari\", \"Edge\" }; var datasets = new List(); var dataset1 = new BarChartDataset() { Label = \"Windows\", Data = new List { 28000, 8000, 2000, 17000 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset1); var dataset2 = new BarChartDataset() { Label = \"macOS\", Data = new List { 8000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset2); var dataset3 = new BarChartDataset() { Label = \"Other\", Data = new List { 28000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; barChartOptions = new(); barChartOptions.Locale = \"de-DE\"; barChartOptions.Responsive = true; barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = \"y\"; barChartOptions.Scales.X.Title.Text = \"Visitors\"; barChartOptions.Scales.X.Title.Display = true; barChartOptions.Scales.Y.Title.Text = \"Browser\"; barChartOptions.Scales.Y.Title.Display = true; barChartOptions.Scales.X.Stacked = true; barChartOptions.Scales.Y.Stacked = true; barChartOptions.Plugins.Title.Text = \"Operating system\"; barChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await barChart.InitializeAsync(chartData, barChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Data labels​ @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"Chrome\", \"Firefox\", \"Safari\", \"Edge\" }; var datasets = new List(); var dataset1 = new BarChartDataset() { Label = \"Windows\", Data = new List { 28000, 8000, 2000, 17000 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset1); var dataset2 = new BarChartDataset() { Label = \"macOS\", Data = new List { 8000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset2); var dataset3 = new BarChartDataset() { Label = \"Other\", Data = new List { 28000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; barChartOptions = new(); barChartOptions.Responsive = true; barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = \"y\"; barChartOptions.Scales.X.Title.Text = \"Visitors\"; barChartOptions.Scales.X.Title.Display = true; barChartOptions.Scales.Y.Title.Text = \"Browser\"; barChartOptions.Scales.Y.Title.Display = true; barChartOptions.Scales.X.Stacked = true; barChartOptions.Scales.Y.Stacked = true; barChartOptions.Plugins.Title.Text = \"Operating system\"; barChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // pass the plugin name to enable the data labels await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { \"ChartDataLabels\" }); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Edit this page Previous Tooltips Next Doughnut Chart Parameters Methods ChartData Members BarChartDataset Members BarChartDatasetDataLabels Members BarChartOptions Members Examples Prerequisites How it works Horizontal bar chart Stacked bar chart Locale Data labels","s":"Blazor Bar Chart","u":"/data-visualization/bar-chart","h":"","p":531},{"i":534,"t":"Data Visualization Line Chart On this page Blazor Line Chart A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value. Parameters​ Name Type Default Required Description Added Version Height int Gets or sets chart height. 1.0.0 Width int Get or sets chart width. 1.0.0 Methods​ Name Return type Description Added Version AddDataAsync ChartData Adds data to bar chart. 1.10.0 AddDatasetAsync ChartData Adds dataset to bar chart. 1.10.0 InitializeAsync Task Initialize Bar Chart. 1.0.0 UpdateAsync Task Update Bar Chart. 1.0.0 ChartData Members​ Property Name Type Default Required Description Added Version Labels List null ✔️ Gets or sets the Labels. 1.0.0 Datasets List null ✔️ Gets or sets the Datasets. 1.0.0 LineChartDataset Members​ info LineChartDataset implements IChartDataset. Property Name Type Default Required Description Added Version BackgroundColor List null Get or sets the BackgroundColor. 1.0.0 BorderColor List null Get or sets the BorderColor. 1.0.0 BorderDash List null Line dash. 1.0.0 BorderDashOffset double 0.0 Line dash offset. 1.0.0 BorderWidth List null Get or sets the BorderWidth. 1.0.0 Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0 Data List null Get or sets the Data. 1.0.0 Datalabels LineChartDatasetDataLabels Get or sets the data labels Fill bool false Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end. 1.0.0 Hidden bool false Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. 1.0.0 HoverBackgroundColor List null ✔️ Get or sets the HoverBackgroundColor. 1.0.0 HoverBorderColor List null ✔️ Get or sets the HoverBorderColor. 1.0.0 HoverBorderDash List null Hover line dash. 1.0.0 HoverBorderWidth List null ✔️ Get or sets the HoverBorderWidth. 1.0.0 Label string null The label for the dataset which appears in the legend and tooltips. 1.0.0 PointBackgroundColor List new List { \"rgba(0, 0, 0, 0.1)\" } The fill color for points. 1.0.0 PointBorderColor List new List { \"rgba(0, 0, 0, 0.1)\" } The border color for points. 1.0.0 PointBorderWidth List new List { 1 } The width of the point border in pixels. 1.0.0 PointHitRadius List new List { 1 } The pixel size of the non-displayed point that reacts to mouse events. 1.0.0 PointHoverBackgroundColor List null Point background color when hovered. 1.0.0 PointHoverBorderColor List null Point border color when hovered. 1.0.0 PointHoverBorderWidth List new List { 1 } Border width of point when hovered. 1.0.0 PointHoverRadius new List new List { 1 } The radius of the point when hovered. 1.0.0 PointRadius List new List { 1 } The radius of the point shape. If set to 0, the point is not rendered. 1.0.0 PointRotation List new List { 0 } The rotation of the point in degrees. 1.0.0 PointStyle List new List { \"circle\" } Style of the point. Use 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style the point. 1.0.0 ShowLine bool true If false, the lines between points are not drawn. 1.0.0 SpanGaps bool false If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used. 1.0.0 Stepped bool false true to show the line as a stepped line (tension will be ignored). 1.0.0 Tension double 0.2 Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used. 1.0.0 Type string null ✔️ Get or sets the chart type. 1.0.0 XAxisID string null The ID of the x axis to plot this dataset on. 1.0.0 YAxisID string null The ID of the y axis to plot this dataset on. 1.0.0 LineChartDatasetDataLabels Members​ Property Name Type Default Required Description Added Version Align string? start Gets or sets the align. 1.10.2 Anchor string? start Gets or sets the anchor. 1.10.2 LineChartOptions Members​ info LineChartOptions implements ChartOptions. Property Name Type Default Required Description Added Version IndexAxis string x The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. 1.0.0 Interaction Interaction Gets or sets the Interaction. 1.0.0 Layout ChartLayout Gets or sets the ChartLayout. 1.0.0 Locale string? Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. 1.10.0 Plugins LineChartPlugins Gets or sets the Plugins. 1.10.2 Responsive bool false Gets or sets the Responsive. 1.0.0 Scales Scales Gets or sets the Scales. 1.0.0 Examples​ Prerequisites​ Refer to the getting started guide for setting up charts. How it works​ In the following example, a categorical 12-color palette is used. tip For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. @using BlazorBootstrap.Extensions @using Color = System.Drawing.Color @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; private int datasetsCount = 0; private int labelsCount = 0; private Random random = new(); protected override void OnInitialized() { chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await lineChart.InitializeAsync(chartData, lineChartOptions); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is LineChartDataset lineChartDataset && lineChartDataset is not null && lineChartDataset.Data is not null) { var count = lineChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(200)); } lineChartDataset.Data = newData; newDatasets.Add(lineChartDataset); } } chartData.Datasets = newDatasets; await lineChart.UpdateAsync(chartData, lineChartOptions); } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; var chartDataset = GetRandomLineChartDataset(); chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions); } private async Task AddDataAsync() { if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is LineChartDataset lineChartDataset) data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200))); } chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data); } private async Task ShowHorizontalLineChartAsync() { lineChartOptions.IndexAxis = \"y\"; await lineChart.UpdateAsync(chartData, lineChartOptions); } private async Task ShowVerticalLineChartAsync() { lineChartOptions.IndexAxis = \"x\"; await lineChart.UpdateAsync(chartData, lineChartOptions); } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomLineChartDataset()); } return datasets; } private LineChartDataset GetRandomLineChartDataset() { var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); datasetsCount += 1; return new LineChartDataset() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = new List { c.ToRgbString() }, BorderColor = new List { c.ToRgbString() }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { c.ToRgbString() }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < labelsCount; index++) { data.Add(random.Next(200)); } return data; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); } return labels; } private string GetNextDataLabel() { labelsCount += 1; return $\"Day {labelsCount}\"; } #endregion Data Preparation } Another example​ @using BlazorBootstrap.Extensions @using Color = System.Drawing.Color @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" }; var datasets = new List(); var dataset1 = new LineChartDataset() { Label = \"Windows\", Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[0] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset1); var dataset2 = new LineChartDataset() { Label = \"macOS\", Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[1] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset2); var dataset3 = new LineChartDataset() { Label = \"Other\", Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[2] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; lineChartOptions = new(); lineChartOptions.Responsive = true; lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; lineChartOptions.Scales.X.Title.Text = \"2019\"; lineChartOptions.Scales.X.Title.Display = true; lineChartOptions.Scales.Y.Title.Text = \"Visitors\"; lineChartOptions.Scales.Y.Title.Display = true; lineChartOptions.Plugins.Title.Text = \"Operating system\"; lineChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await lineChart.InitializeAsync(chartData, lineChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Data labels​ @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" }; var datasets = new List(); var dataset1 = new LineChartDataset { Label = \"Windows\", Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[0] }, PointRadius = new List { 3 }, // show points PointHoverRadius = new List { 4 }, // datalabels Datalabels = new() { Align = \"end\", Anchor = \"end\" } }; datasets.Add(dataset1); var dataset2 = new LineChartDataset { Label = \"macOS\", Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[1] }, PointRadius = new List { 3 }, // show points PointHoverRadius = new List { 4 }, // datalabels Datalabels = new() { Align = \"end\", Anchor = \"end\" } }; datasets.Add(dataset2); var dataset3 = new LineChartDataset { Label = \"Other\", Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[2] }, PointRadius = new List { 3 }, // show points PointHoverRadius = new List { 4 }, // datalabels Datalabels = new() { Align = \"start\", Anchor = \"start\" } }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; lineChartOptions = new(); lineChartOptions.Responsive = true; lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; lineChartOptions.Scales.X.Title.Text = \"2019\"; lineChartOptions.Scales.X.Title.Display = true; lineChartOptions.Scales.Y.Title.Text = \"Visitors\"; lineChartOptions.Scales.Y.Title.Display = true; lineChartOptions.Plugins.Title.Text = \"Operating system\"; lineChartOptions.Plugins.Title.Display = true; // datalabels lineChartOptions.Plugins.Datalabels.Color = \"white\"; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // pass the plugin name to enable the data labels await lineChart.InitializeAsync(chartData: chartData, chartOptions: lineChartOptions, plugins: new string[] { \"ChartDataLabels\" }); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Edit this page Previous Doughnut Chart Next Pie Chart Parameters Methods ChartData Members LineChartDataset Members LineChartDatasetDataLabels Members LineChartOptions Members Examples Prerequisites How it works Another example Data labels","s":"Blazor Line Chart","u":"/data-visualization/line-chart","h":"","p":533},{"i":536,"t":"Data Visualization Pie Chart On this page Blazor Pie Chart A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. Parameters​ Name Type Default Required Description Added Version Height int Gets or sets chart height. 1.0.0 Width int Get or sets chart width. 1.0.0 Methods​ Name Return type Description Added Version AddDataAsync ChartData Adds data to bar chart. 1.10.0 AddDatasetAsync ChartData Adds dataset to bar chart. 1.10.0 InitializeAsync Task Initialize Bar Chart. 1.0.0 UpdateAsync Task Update Bar Chart. 1.0.0 ChartData Members​ Property Name Type Default Required Description Added Version Labels List null ✔️ Gets or sets the Labels. 1.0.0 Datasets List null ✔️ Gets or sets the Datasets. 1.0.0 PieChartDataset Members​ info PieChartDataset implements IChartDataset. Property Name Type Default Required Description Added Version BackgroundColor List null Get or sets the BackgroundColor. 1.0.0 BorderColor List null Get or sets the BorderColor. 1.0.0 BorderWidth List null Get or sets the BorderWidth. 1.0.0 Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0 Data List null Get or sets the Data. 1.0.0 Datalabels PieChartDatasetDataLabels Get or sets the data labels Hidden bool false Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. 1.0.0 HoverBackgroundColor List null ✔️ Get or sets the HoverBackgroundColor. 1.0.0 HoverBorderColor List null ✔️ Get or sets the HoverBorderColor. 1.0.0 HoverBorderWidth List null ✔️ Get or sets the HoverBorderWidth. 1.0.0 Type string null ✔️ Get or sets the chart type. 1.0.0 PieChartDatasetDataLabels Members​ Property Name Type Default Required Description Added Version Anchor string? center Gets or sets the anchor. 1.10.2 BorderWidth double? 2 Gets or sets the border width. 1.10.2 PieChartOptions Members​ info PieChartOptions implements ChartOptions. Property Name Type Default Required Description Added Version Locale string? Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. 1.10.0 Plugins PieChartPlugins Gets or sets the Plugins. 1.10.2 Responsive bool false Gets or sets the Responsive. 1.0.0 Examples​ Prerequisites​ Refer to the getting started guide for setting up charts. How it works​ In the following example, a categorical 12-color palette is used. tip For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. @code { private PieChart pieChart = default!; private PieChartOptions pieChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; pieChartOptions = new(); pieChartOptions.Responsive = true; pieChartOptions.Plugins.Title.Text = \"2022 - Sales\"; pieChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await pieChart.InitializeAsync(chartData, pieChartOptions); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset && pieChartDataset is not null && pieChartDataset.Data is not null) { var count = pieChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(0, 100)); } pieChartDataset.Data = newData; newDatasets.Add(pieChartDataset); } } chartData.Datasets = newDatasets; await pieChart.UpdateAsync(chartData, pieChartOptions); } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; var chartDataset = GetRandomPieChartDataset(); chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions); } private async Task AddDataAsync() { if (dataLabelsCount >= 12) return; if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset) data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomPieChartDataset()); } return datasets; } private PieChartDataset GetRandomPieChartDataset() { datasetsCount += 1; return new() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $\"Product {dataLabelsCount + 1}\"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } See the demo here. Data labels​ @code { private PieChart pieChart = default!; private PieChartOptions pieChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) }; pieChartOptions = new(); pieChartOptions.Responsive = true; pieChartOptions.Plugins.Title.Text = \"2022 - Sales\"; pieChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // pass the plugin name to enable the data labels await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { \"ChartDataLabels\" }); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset && pieChartDataset is not null && pieChartDataset.Data is not null) { var count = pieChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(0, 100)); } pieChartDataset.Data = newData; newDatasets.Add(pieChartDataset); } } chartData.Datasets = newDatasets; await pieChart.UpdateAsync(chartData, pieChartOptions); } private async Task AddDataAsync() { if (dataLabelsCount >= 12) return; if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset) data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { var dataset = GetRandomPieChartDataset(); if (index == 0) dataset.Datalabels.Anchor = \"end\"; else if (index == numberOfDatasets - 1) dataset.Datalabels.Anchor = \"end\"; else dataset.Datalabels.Anchor = \"center\"; datasets.Add(dataset); } return datasets; } private PieChartDataset GetRandomPieChartDataset() { datasetsCount += 1; return new() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $\"Product {dataLabelsCount + 1}\"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } See the demo here. Edit this page Previous Line Chart Next Modal Service Parameters Methods ChartData Members PieChartDataset Members PieChartDatasetDataLabels Members PieChartOptions Members Examples Prerequisites How it works Data labels","s":"Blazor Pie Chart","u":"/data-visualization/pie-chart","h":"","p":535},{"i":538,"t":"Forms Auto Complete On this page Blazor Auto Complete Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering. Parameters​ Name Type Default Required Description Added Version DataProvider delegate null ✔️ DataProvider is for items to render. The provider should always return an instance of AutoCompleteDataProviderResult, and null is not allowed. 0.4.0 Disabled bool false Is AutoComplete disabled. 0.4.0 EmptyText string No records found. ✔️ Gets or sets the empty text. 1.10.2 LoadingText string Loading... ✔️ Gets or sets the loading text. 1.10.2 Placeholder string null AutoComplete placeholder. 0.4.0 PropertyName string null ✔️ AutoComplete data text property name. 0.4.0 Size enum AutoCompleteSize.Default Use AutoCompleteSize.Default or AutoCompleteSize.Large or AutoCompleteSize.Small 0.4.0 StringComparison enum StringComparison.OrdinalIgnoreCase Specifies the culture, case, and sort rules to be used. Use StringComparison.CurrentCulture or StringComparison.CurrentCultureIgnoreCase or StringComparison.InvariantCulture or StringComparison.InvariantCultureIgnoreCase or StringComparison.Ordinal or StringComparison.OrdinalIgnoreCase. 0.4.1 StringFilterOperator enum StringFilterOperator.Contains Use StringFilterOperator.Equals or StringFilterOperator.Contains or StringFilterOperator.StartsWith or StringFilterOperator.EndsWith 0.4.1 Value string null ✔️ AutoComplete value. 0.4.0 ValueExpression expression null AutoComplete value expression. 0.4.0 Methods​ Name Returns Description Added Version Disable() void Disables autocomplete. 0.4.0 Enable() void Enables autocomplete. 0.4.0 RefreshDataAsync() Task Refresh the autocomplete data. 0.4.0 ResetAsync() Task Resets the autocomplete selection. 0.4.0 Events​ Name Description Added Version OnChanged This event fires immediately when the autocomplete selection changes by the user. 0.4.0 ValueChanged This event fires on every user keystroke that changes the textbox value. 0.4.0 Keyboard Navigation​ Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions. Key Description Added Version Esc Closes the popup list when it is in an open state. 1.3.1 Up arrow Focuses on the previous item in the list. 1.3.1 Down arrow Focuses on the next item in the list. 1.3.1 Home Focuses on the first item in the list. 1.3.1 End Focuses on the last item in the list. 1.3.1 Enter Selects the currently focused item. 1.3.1 Examples​ Client side data​
OnAutoCompleteChanged(customer)\" />
@code { private string customerName; public IEnumerable customers; private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { if (customers is null) // pull customers only one time for client-side autocomplete customers = GetCustomers(); // call a service or an API to pull the customers return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName))); } private IEnumerable GetCustomers() { return new List { new(1, \"Pich S\"), new(2, \"sfh Sobi\"), new(3, \"Jojo chan\"), new(4, \"Jee ja\"), new(5, \"Rose Canon\"), new(6, \"Manju A\"), new(7, \"Bandita PA\"), new(8, \"Sagar Adil\"), new(9, \"Isha Wang\"), new(10, \"Daina JJ\"), new(11, \"Komala Mug\"), new(12, \"Dikshita BD\"), new(13, \"Neha Gosar\"), new(14, \"Preeti S\"), new(15, \"Sagar Seth\"), new(16, \"Vinayak MM\"), new(17, \"Vijaya Lakhsmi\"), new(18, \"Jahan K\"), new(19, \"Joy B\"), new(20, \"Zaraiah C\"), new(21, \"Laura L\"), new(22, \"Punith ES\") }; } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } } public record Customer(int CustomerId, string CustomerName); See demo here Client side data with StringComparision​ In the below example, StringComparision.Ordinal is used to make the filter case-sensitive. info By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
OnAutoCompleteChanged(customer)\" />
@code { private string customerName; public IEnumerable customers; private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { if (customers is null) // pull customers only one time for client-side autocomplete customers = GetCustomers(); // call a service or an API to pull the customers return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName))); } private IEnumerable GetCustomers() { return new List { new(1, \"Pich S\"), new(2, \"sfh Sobi\"), new(3, \"Jojo chan\"), new(4, \"Jee ja\"), new(5, \"Rose Canon\"), new(6, \"Manju A\"), new(7, \"Bandita PA\"), new(8, \"Sagar Adil\"), new(9, \"Isha Wang\"), new(10, \"Daina JJ\"), new(11, \"Komala Mug\"), new(12, \"Dikshita BD\"), new(13, \"Neha Gosar\"), new(14, \"Preeti S\"), new(15, \"Sagar Seth\"), new(16, \"Vinayak MM\"), new(17, \"Vijaya Lakhsmi\"), new(18, \"Jahan K\"), new(19, \"Joy B\"), new(20, \"Zaraiah C\"), new(21, \"Laura L\"), new(22, \"Punith ES\") }; } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } } public record Customer(int CustomerId, string CustomerName); See demo here Server side data​
OnAutoCompleteChanged(customer)\" />
@code { private string customerName; [Inject] ICustomerService _customerService { get; set; } private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { var customers = await _customerService.GetCustomers(request.Filter, request.CancellationToken); // API call return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() }); } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } } See demo here Set default value​
OnAutoCompleteChanged(customer)\" />
@code { private string customerName; public IEnumerable customers; protected override void OnInitialized() { customerName = \"Pich S\"; } private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { if (customers is null) // pull customers only one time for client-side autocomplete customers = GetCustomers(); // call a service or an API to pull the customers return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName))); } private IEnumerable GetCustomers() { return new List { new(1, \"Pich S\"), new(2, \"sfh Sobi\"), new(3, \"Jojo chan\"), new(4, \"Jee ja\"), new(5, \"Rose Canon\"), new(6, \"Manju A\"), new(7, \"Bandita PA\"), new(8, \"Sagar Adil\"), new(9, \"Isha Wang\"), new(10, \"Daina JJ\"), new(11, \"Komala Mug\"), new(12, \"Dikshita BD\"), new(13, \"Neha Gosar\"), new(14, \"Preeti S\"), new(15, \"Sagar Seth\"), new(16, \"Vinayak MM\"), new(17, \"Vijaya Lakhsmi\"), new(18, \"Jahan K\"), new(19, \"Joy B\"), new(20, \"Zaraiah C\"), new(21, \"Laura L\"), new(22, \"Punith ES\") }; } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } } See demo here Validations​ @using System.ComponentModel.DataAnnotations
OnAutoCompleteChanged(customer)\" /> customerAddress.CustomerName)\" />
customerAddress.Address)\" />
@code { private CustomerAddress customerAddress = new(); private EditContext _editContext; [Inject] ICustomerService _customerService { get; set; } protected override void OnInitialized() { _editContext = new EditContext(customerAddress); base.OnInitialized(); } public void HandleOnValidSubmit() { Console.WriteLine($\"Customer name is {customerAddress.CustomerName} and address is {customerAddress.Address}\"); } private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { var customers = await _customerService.GetCustomers(request.Filter); // API call return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() }); } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); Console.WriteLine($\"Data null: {customer is null}.\"); } public class CustomerAddress { [Required] public string CustomerName { get; set; } [Required] public string Address { get; set; } } } See demo here Disable​ Use the Disabled parameter to disable the AutoComplete.
OnAutoCompleteChanged(customer)\" />
@code { private string customerName = default!; private bool disabled = true; [Inject] ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() }); } private void OnAutoCompleteChanged(Customer2 customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the AutoComplete. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
OnAutoCompleteChanged(customer)\" />
@code { private AutoComplete autoComplete1 = default!; private string customerName = default!; [Inject] ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() }); } private void OnAutoCompleteChanged(Customer2 customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } private void Disable() => autoComplete1.Disable(); private void Enable() => autoComplete1.Enable(); } See demo here Edit this page Previous Icons Next Currency Input Parameters Methods Events Keyboard Navigation Examples Client side data Client side data with StringComparision Server side data Set default value Validations Disable","s":"Blazor Auto Complete","u":"/forms/autocomplete","h":"","p":537},{"i":540,"t":"Forms Date Input On this page Blazor Date Input Blazor Bootstrap DateInput component is constructed using an HTML input of type=\"date\" which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface. Parameters​ Name Type Default Required Description Added Version AutoComplete bool false Indicates whether the DateInput can complete the values automatically by the browser. 1.5.0 Disabled bool false Gets or sets the disabled. 1.5.0 EnableMinMax bool false Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. 1.5.0 Max TValue Gets or sets the max. Max ignored if EnableMinMax=\"false\". 1.5.0 Min TValue Gets or sets the min. Min ignored if EnableMinMax=\"false\". 1.5.0 Placeholder string? null Gets or sets the placeholder. 1.5.0 Value TValue Gets or sets the value. 1.5.0 ValueExpression Expression> Gets or sets the expression 1.6.0 Methods​ Name Description Added Version Disable Disables date input. 1.5.0 Enable Enables date input. 1.5.0 Events​ Name Description ValueChanged This event fired on every user keystroke that changes the DateInput value. Examples​ Basic usage​ NOTE The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type=\"text\".
Entered date: @date1
@code { private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddDays(1)); } See demo here Generic type​ The Blazor Bootstrap DateInput component supports several data types: DateOnly, DateOnly?, DateTime, and DateTime?. This allows flexible component usage to accommodate various data types in Blazor applications. In the below example, TValue is set to DateOnly, DateOnly?, DateTime, and DateTime?.
DateOnly:
Entered date: @date1
DateOnly?:
Entered date: @date2
DateTime:
Entered date: @date3
DateTime?:
Entered date: @date4
@code { private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddMonths(3)); private DateOnly? date2; private DateTime date3 = DateTime.Now.AddMonths(3); private DateTime? date4; } See demo here Enable min and max​ Set EnableMinMax=\"true\" and set the Min and Max parameters to restrict the user input between the Min and Max range. NOTE If the user tries to enter a number in the DateInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.
DateOnly:
Min date: @min1
Max date: @max1
Entered date: @date1
DateOnly?:
Min date: @min2
Max date: @max2
Entered date: @date2
DateTime:
Min date: @min3
Max date: @max3
Entered date: @date3
DateTime?:
Min date: @min4
Max date: @max4
Entered date: @date4
@code { private DateTime date = DateTime.Now.AddMonths(3); private DateTime min = DateTime.Now.AddMonths(-1); private DateTime max = DateTime.Now.AddYears(1); private DateOnly date1, min1, max1; private DateOnly? date2, min2, max2; private DateTime date3, min3, max3; private DateTime? date4, min4, max4; protected override void OnInitialized() { date1 = DateOnly.FromDateTime(date); min1 = DateOnly.FromDateTime(min); max1 = DateOnly.FromDateTime(max); date2 = null; min2 = DateOnly.FromDateTime(min); max2 = DateOnly.FromDateTime(max); date3 = DateTime.Now.AddMonths(3); min3 = min; max3 = max; date4 = null; min4 = min; max4 = max; } } See demo here Disable​ Use the Disabled parameter to disable the DateInput.
Entered date: @date1
@code { private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now); private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the DateInput. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
Entered date: @date1
@code { private DateInput dateInput = default!; private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now); private void Disable() => dateInput.Disable(); private void Enable() => dateInput.Enable(); } See demo here Validations​ Like any other blazor input component, DateInput component supports validations. Use the Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. @using System.ComponentModel.DataAnnotations
invoice.InvoiceDate)\" />
invoice.CustomerName)\" />
@code { private Invoice invoice = new(); private EditContext editContext; protected override void OnInitialized() { editContext = new EditContext(invoice); base.OnInitialized(); } public void HandleOnValidSubmit() { Console.WriteLine($\"Invoice Date: {invoice.InvoiceDate}\"); Console.WriteLine($\"Customer Name: {invoice.CustomerName}\"); } private void ResetForm() { invoice = new(); editContext = new EditContext(invoice); } public class Invoice { [Required(ErrorMessage = \"Invoice Date required.\")] public DateOnly? InvoiceDate { get; set; } [Required(ErrorMessage = \"Customer Name required.\")] public string CustomerName { get; set; } } } See demo here Events: ValueChanged​ This event fires on every user keystroke/selection that changes the DateInput value.
date1\" ValueChanged=\"(value) => DateChanged(value)\" />
Changed date: @date1
@code { private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now); private void DateChanged(DateOnly dateOnly) { date1 = dateOnly; } } See demo here Restrict the date field based on the entry in another date field​ One common scenario is that the date fields are restricted based on the entry in another date field. In the example below, we restrict the course end time based on the selection of course start date. @using System.ComponentModel.DataAnnotations
onlineCourseForm.CourseName)\" />
onlineCourseForm.StartDate\" ValueChanged=\"(value) => StartDateChanged(value)\" /> onlineCourseForm.StartDate)\" />
onlineCourseForm.EndDate)\" />
@code { DateInput endDateInput = default!; private OnlineCourseForm onlineCourseForm = new(); private EditContext editContext; private DateTime? courseMinDate; private DateTime? courseMaxDate; [Inject] ToastService _toastService { get; set; } protected override void OnInitialized() { editContext = new EditContext(onlineCourseForm); base.OnInitialized(); } private void StartDateChanged(DateTime? startDate) { if (startDate is null || !startDate.HasValue) { onlineCourseForm.StartDate = null; onlineCourseForm.EndDate = null; courseMinDate = null; courseMaxDate = null; endDateInput.Disable(); return; } onlineCourseForm.StartDate = startDate; onlineCourseForm.EndDate = null; courseMinDate = startDate.Value; courseMaxDate = startDate.Value.AddDays(5); endDateInput.Enable(); } public void HandleValidSubmit() { var toastMessage = new ToastMessage ( type: ToastType.Success, iconName: IconName.Check2All, title: \"Success!\", helpText: $\"{DateTime.Now.ToLocalTime()}\", message: \"Online course schedule created.\" ); _toastService.Notify(toastMessage); } private void ResetForm() { onlineCourseForm = new(); editContext = new EditContext(onlineCourseForm); } public class OnlineCourseForm { [Required(ErrorMessage = \"Course Name required.\")] public string CourseName { get; set; } [Required(ErrorMessage = \"Start Date required.\")] public DateTime? StartDate { get; set; } [Required(ErrorMessage = \"End Date required.\")] public DateTime? EndDate { get; set; } } } Edit this page Previous Currency Input Next Number Input Parameters Methods Events Examples Basic usage Generic type Enable min and max Disable Validations Events: ValueChanged Restrict the date field based on the entry in another date field","s":"Blazor Date Input","u":"/forms/date-input","h":"","p":539},{"i":542,"t":"Forms Currency Input On this page Blazor Currency Input Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol. Parameters​ Name Type Default Required Description AllowNegativeNumbers bool false Allows negative numbers. By default, negative numbers are not allowed. AutoComplete bool false Indicates whether the NumberInput can complete the values automatically by the browser. CurrencySign CurrencySign CurrencySign.Standard Disabled bool false Gets or sets the disabled. EnableMinMax bool false Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. HideCurrencySymbol bool false Determines whether to hide the currency symbol are not. Locale string en-US ✔️ Gets or sets the locale. Max TValue Gets or sets the max. Max ignored if EnableMinMax=\"false\". MaximumFractionDigits byte? null The maximum number of fraction digits to use. Min TValue Gets or sets the min. Min ignored if EnableMinMax=\"false\". MinimumFractionDigits byte? null The minimum number of fraction digits to use. MinimumIntegerDigits byte 1 The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted. Placeholder string? null Gets or sets the placeholder. TextAlignment Alignment Alignment.None Gets or sets the text alignment. Value TValue Gets or sets the value. Methods​ Name Description Disable() Disables currency input. Enable() Enables currency input. Events​ Name Description ValueChanged This event fired on every user keystroke that changes the CurrencyInput value. Examples​ Basic usage​ By default, e + - are blocked. For all integral numeric types, dot . is blocked.
Entered Amount: @amount1
@code { private int amount1 = 12345678; } See demo here Show currency symbols for the different locales​
Entered Amount: @amount1
Entered Amount: @amount2
Entered Amount: @amount3
Entered Amount: @amount4
Entered Amount: @amount5
Entered Amount: @amount6
Entered Amount: @amount7
Entered Amount: @amount8
Entered Amount: @amount9
@code { private int amount1 = 12345678; private int amount2 = 12345678; private int amount3 = 12345678; private int amount4 = 12345678; private int amount5 = 12345678; private int amount6 = 12345678; private int amount7 = 12345678; private int amount8 = 12345678; private int amount9 = 12345678; } See demo here Hide currency symbol​ Set HideCurrencySymbol parameter value to true to hide the currency symbol.
Entered Value: @amount1
@code { private double amount1 = 4.33; } See demo here Using fraction digits and integer digits​ In the below example, formatting adds zeros to display minimum integers and fractions. danger MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only.
Entered Value: @amount1
@code { private double amount1 = 4.33; } See demo here Wrap the number with parentheses instead of appending a minus sign​ In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the CurrencySign option to Accounting. The default value is Standard.
Entered Value: @amount1
@code { private int amount1 = -21231; } See demo here Generic type​ CurrencyInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
@code { private int amount; private int? amount2; private float amount3; private float? amount4; private double amount5; private double? amount6; private decimal amount7; private decimal? amount8; } See demo here Enable min and max​ Set EnableMinMax=\"true\" and set the Min and Max parameters to restrict the user input between the Min and Max range. NOTE If the user tries to enter a number in the CurrencyInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.
Tip: The amount must be between 10 and 500.
Entered Amount: @amount
@code { private decimal? amount; } See demo here Text alignment​ You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
Entered Amount: @amount
Entered Amount: @amount2
@code { private int amount; private decimal amount2 = 2.34M; } See demo here Allow negative numbers​ By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
Tip: Negative numbers are also allowed.
Entered Amount: @amount
@code { private int amount; } See demo here Disable​ Use the Disabled parameter to disable the CurrencyInput.
@code { private int? amount; private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the CurrencyInput. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
@code { private CurrencyInput currencyInput = default!; private int? amount; private void Disable() => currencyInput.Disable(); private void Enable() => currencyInput.Enable(); } See demo here Validations​ Like any other blazor input components, CurrencyInput supports validations. Add the DataAnnotations on the CurrencyInput component to validate the user input before submitting the form. In the below example, we used Required and Range attributes. @using System.ComponentModel.DataAnnotations
invoice.Price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" /> invoice.Price)\" />
invoice.Discount\" ValueChanged=\"(value) => DiscountChanged(value)\" Placeholder=\"Enter discount\" /> invoice.Discount)\" />
invoice.Total)\" />
@code { private Invoice invoice = new(); private EditContext editContext; protected override void OnInitialized() { editContext = new EditContext(invoice); base.OnInitialized(); } protected override void OnParametersSet() { CalculateToatl(); base.OnParametersSet(); } private void PriceChanged(decimal? value) { invoice.Price = value; CalculateToatl(); } private void DiscountChanged(decimal? value) { invoice.Discount = value; CalculateToatl(); } private void CalculateToatl() { var price = invoice.Price.HasValue ? invoice.Price.Value : 0; var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0; invoice.Total = price - discount; } public void HandleOnValidSubmit() { Console.WriteLine($\"Price: {invoice.Price}\"); Console.WriteLine($\"Discount: {invoice.Discount}\"); Console.WriteLine($\"Total: {invoice.Total}\"); } private void ResetForm() { invoice = new(); editContext = new EditContext(invoice); } public class Invoice { [Required(ErrorMessage = \"Price required.\")] [Range(60, 500, ErrorMessage = \"Price should be between 60 and 500.\")] public decimal? Price { get; set; } = 22M; [Range(0, 50, ErrorMessage = \"Discount should be between 0 and 50.\")] public decimal? Discount { get; set; } [Required(ErrorMessage = \"Amount required.\")] [Range(10, 500, ErrorMessage = \"Total should be between 60 and 500.\")] public decimal? Total { get; set; } } } See demo here Events: ValueChanged​ This event fires on every user keystroke that changes the CurrencyInput value.
price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" />
@displayPrice
@code { private decimal? price = 10M; private string displayPrice; private void PriceChanged(decimal? value) { price = value; // this is mandatory displayPrice = $\"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.\"; } } See demo here Edit this page Previous Auto Complete Next Date Input Parameters Methods Events Examples Basic usage Show currency symbols for the different locales Hide currency symbol Using fraction digits and integer digits Wrap the number with parentheses instead of appending a minus sign Generic type Enable min and max Text alignment Allow negative numbers Disable Validations Events: ValueChanged","s":"Blazor Currency Input","u":"/forms/currency-input","h":"","p":541},{"i":544,"t":"Forms Switch On this page Blazor Switch Use the Blazor Bootstrap Switch component to show the consistent cross-browser and cross-device custom checkboxes. Parameters​ Name Type Default Required Description Added Version Disabled bool false Gets or sets the disabled. 1.3.0 Label string null Gets or sets the label. 1.3.0 Reverse bool false Determines whether to put the switch on the opposite side. 1.3.0 Value bool false ✔️ Gets or sets the value. 1.3.0 Methods​ Name Return Type Description Added Version Disable() void Disables switch. 1.3.0 Enable() void Enables switch. 1.3.0 Events​ Name Description Added Version ValueChanged This event fired when the switch selection changed. 1.3.0 Examples​ Basic usage​
Switch 1 Status: @agree1
Switch 2 Status: @agree2
@code { bool agree1; bool agree2 = true; } See demo here Disable​ Disable​ Use the Disabled parameter to disable the Switch.
@code { private bool agree = true; private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the Switch. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
@code { private Switch switch1 = default!; private bool agree = true; private void Disable() => switch1.Disable(); private void Enable() => switch1.Enable(); } See demo here Reverse​ Put your switches on the opposite side by using the Reverse parameter. @code { bool agree; } See demo here Events: ValueChanged​ This event fired when the Switch selection changed. agree\" ValueChanged=\"SwitchChanged\" />
@displaySwitchStatus
@code { private bool agree; private string displaySwitchStatus; private void SwitchChanged(bool value) { agree = value; // this is mandatory displaySwitchStatus = $\"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}.\"; } } See demo here Edit this page Previous Number Input Next Time Input Parameters Methods Events Examples Basic usage Disable Disable Reverse Events: ValueChanged","s":"Blazor Switch","u":"/forms/switch","h":"","p":543},{"i":546,"t":"Forms Number Input On this page Blazor Number Input Blazor Bootstrap NumberInput component is built around HTML input of type=\"number\" that prevents the user input based on the parameters set. Parameters​ Name Type Default Required Description AllowNegativeNumbers bool false Allows negative numbers. By default, negative numbers are not allowed. AutoComplete bool false Indicates whether the NumberInput can complete the values automatically by the browser. Disabled bool false Gets or sets the disabled. EnableMinMax bool false Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. Max TValue Gets or sets the max. Max ignored if EnableMinMax=\"false\". Min TValue Gets or sets the min. Min ignored if EnableMinMax=\"false\". Placeholder string? null Gets or sets the placeholder. Step double? null Gets or sets the step. TextAlignment Alignment Alignment.None Gets or sets the text alignment. Value TValue Gets or sets the value. Methods​ Name Description Disable Disables number input. Enable Enables number input. Events​ Name Description ValueChanged This event fired on every user keystroke that changes the NumberInput value. Examples​ Basic usage​ By default, e + - are blocked. For all integral numeric types, dot . is blocked.
Entered Amount: @amount
@code { private int amount; } See demo here Generic type​ NumberInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
@code { private int amount; private int? amount2; private float amount3; private float? amount4; private double amount5; private double? amount6; private decimal amount7; private decimal? amount8; } See demo here Enable min and max​ Set EnableMinMax=\"true\" and set the Min and Max parameters to restrict the user input between the Min and Max range. NOTE If the user tries to enter a number in the NumberInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.
Tip: The amount must be between 10 and 500.
Entered Amount: @amount
@code { private decimal? amount; } See demo here Step​ The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.
Info: Here Step parameter is set to 10.
Entered Amount: @amount
Info: Here Step parameter is set to 2.5.
Entered Amount: @amount2
@code { private int? amount; private decimal? amount2; } See demo here Text alignment​ You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
Entered Amount: @amount
Entered Amount: @amount2
@code { private int amount; private decimal amount2 = 2.34M; } See demo here Allow negative numbers​ By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
Tip: Negative numbers are also allowed.
Entered Amount: @amount
@code { private int amount; } See demo here Disable​ Use the Disabled parameter to disable the NumberInput.
@code { private int? amount; private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the NumberInput. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
@code { private NumberInput numberInput = default!; private int? amount; private void Disable() => numberInput.Disable(); private void Enable() => numberInput.Enable(); } See demo here Validations​ Like any other blazor input component, NumberInput supports validations. Add the DataAnnotations on the NumberInput component to validate the user input before submitting the form. In the below example, we used Required and Range attributes. @using System.ComponentModel.DataAnnotations
invoice.Price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" /> invoice.Price)\" />
invoice.Discount\" ValueChanged=\"(value) => DiscountChanged(value)\" Placeholder=\"Enter discount\" /> invoice.Discount)\" />
invoice.Total)\" />
@code { private Invoice invoice = new(); private EditContext editContext; protected override void OnInitialized() { editContext = new EditContext(invoice); base.OnInitialized(); } protected override void OnParametersSet() { CalculateToatl(); base.OnParametersSet(); } private void PriceChanged(decimal? value) { invoice.Price = value; CalculateToatl(); } private void DiscountChanged(decimal? value) { invoice.Discount = value; CalculateToatl(); } private void CalculateToatl() { var price = invoice.Price.HasValue ? invoice.Price.Value : 0; var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0; invoice.Total = price - discount; } public void HandleOnValidSubmit() { Console.WriteLine($\"Price: {invoice.Price}\"); Console.WriteLine($\"Discount: {invoice.Discount}\"); Console.WriteLine($\"Total: {invoice.Total}\"); } private void ResetForm() { invoice = new(); editContext = new EditContext(invoice); } public class Invoice { [Required(ErrorMessage = \"Price required.\")] [Range(60, 500, ErrorMessage = \"Price should be between 60 and 500.\")] public decimal? Price { get; set; } = 232M; [Range(0, 50, ErrorMessage = \"Discount should be between 0 and 50.\")] public decimal? Discount { get; set; } [Required(ErrorMessage = \"Amount required.\")] [Range(10, 500, ErrorMessage = \"Total should be between 60 and 500.\")] public decimal? Total { get; set; } } } See demo here Events: ValueChanged​ This event fires on every user keystroke that changes the NumberInput value.
price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" />
@displayPrice
@code { private decimal? price = 10M; private string displayPrice; private void PriceChanged(decimal? value) { price = value; // this is mandatory displayPrice = $\"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.\"; } } See demo here Edit this page Previous Date Input Next Switch Parameters Methods Events Examples Basic usage Generic type Enable min and max Step Text alignment Allow negative numbers Disable Validations Events: ValueChanged","s":"Blazor Number Input","u":"/forms/number-input","h":"","p":545},{"i":548,"t":"Getting Started Blazor WebAssembly On this page Getting started - Blazor WebAssembly Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Install Nuget Package​ Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager. Install-Package Blazor.Bootstrap -Version 1.10.4 Add CSS references​ Add the following references to the head section in the wwwroot/index.html. note If you use the Blazor WebAssembly App Empty* template (without demonstration code and Bootstrap), add the following references to the head section in the wwwroot/index.html. There is a known GitHub issue Blazor empty template doesn't load scoped CSS. Add script references​ Add the following references to the body section in the wwwroot/index.html after the _framework/blazor.webassembly.js reference. tip chart.js reference is optional. Add when the Chart components are used in the application. Register services​ Add Blazor Bootstrap service in the Program.cs builder.Services.AddBlazorBootstrap(); // Add this line Register tag helpers in _Imports.razor @using BlazorBootstrap; Remove default references​ In the wwwroot/index.html file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed. Delete the default bootstrap and open-iconic folders from the wwwroot folder. wwwroot/css/bootstrap wwwroot/css/open-iconic Either remove or keep the app.css file but make sure you clear it out of any content when the Sidebar component with full layout is used. Starter templates​ .NET 6​ Blazor Bootstrap - Blazor WebAssembly App .NET 7​ Blazor Bootstrap - Blazor WebAssembly App Blazor Bootstrap - Blazor Empty WebAssembly App Edit this page Next Blazor Server Install Nuget Package Add CSS references Add script references Register services Remove default references Starter templates .NET 6 .NET 7","s":"Getting started - Blazor WebAssembly","u":"/getting-started/blazor-webassembly","h":"","p":547},{"i":550,"t":"Getting Started Blazor Server On this page Getting started - Blazor Server Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Install Nuget Package​ Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager. Install-Package Blazor.Bootstrap -Version 1.10.4 Add CSS references​ Add the following references to the head section in the Pages/_Host.cshtml. note If you use the Blazor Server App Empty* template (without demonstration code and Bootstrap), add the following references to the head section in the Pages/_Host.cshtml. There is a known GitHub issue Blazor empty template doesn't load scoped CSS. IMPORTANT In .NET 6 Blazor Server App default template, you may see Pages/_Layout.cshtml. So, add these references in the Pages/_Layout.cshtml instead of in the Pages/_Host.cshtml. Add script references​ Add the following references to the body section in the Pages/_Host.cshtml after the _framework/blazor.server.js reference. tip chart.js reference is optional. Add when the Chart components are used in the application. Register services​ Add Blazor Bootstrap service in the Program.cs builder.Services.AddBlazorBootstrap(); // Add this line Register tag helpers in _Imports.razor @using BlazorBootstrap; Remove default references​ In the Pages/_Host.cshtml file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed. Delete the default bootstrap and open-iconic folders from the wwwroot folder. wwwroot/css/bootstrap wwwroot/css/open-iconic Either remove or keep the site.css file but make sure you clear it out of any content when the Sidebar component with full layout is used. Starter templates​ .NET 6​ Blazor Bootstrap - Blazor Server App .NET 7​ Blazor Bootstrap - Blazor Server App Blazor Bootstrap - Blazor Empty Server App Edit this page Previous Blazor WebAssembly Next MAUI Blazor Install Nuget Package Add CSS references Add script references Register services Remove default references Starter templates .NET 6 .NET 7","s":"Getting started - Blazor Server","u":"/getting-started/blazor-server","h":"","p":549},{"i":552,"t":"Layout Blazor WebAssembly On this page Layout Setup - Blazor WebAssembly Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Prerequisites​ Assuming you followed the getting started docs for the initial setup. Blazor WebAssembly Project: Follow the getting started steps for the initial setup. Blazor Server Project: Follow the getting started steps for the initial setup. Steps​ Replace MainLayout.razor page code with the below code. NOTE Remove all the CSS content from the Shared/MainLayout.razor.css file. @inherits LayoutComponentBase
About
@Body
@code { private Sidebar sidebar = default!; private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/\", IconName = IconName.HouseDoorFill, Text = \"Home\", Match=NavLinkMatch.All}, new NavItem { Id = \"2\", Href = \"/counter\", IconName = IconName.PlusSquareFill, Text = \"Counter\"}, new NavItem { Id = \"3\", Href = \"/fetchdata\", IconName = IconName.Table, Text = \"Fetch Data\"}, }; return navItems; } } Starter templates​ .NET 6​ Blazor Bootstrap - Blazor WebAssembly App .NET 7​ Blazor Bootstrap - Blazor WebAssembly App Blazor Bootstrap - Blazor Empty WebAssembly App Edit this page Previous MAUI Blazor Next Blazor Server Prerequisites Steps Starter templates .NET 6 .NET 7","s":"Layout Setup - Blazor WebAssembly","u":"/layout/blazor-webassembly","h":"","p":551},{"i":554,"t":"Layout Blazor Server On this page Layout Setup - Blazor WebAssembly Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Prerequisites​ Assuming you followed the getting started docs for the initial setup. Blazor WebAssembly Project: Follow the getting started steps for the initial setup. Blazor Server Project: Follow the getting started steps for the initial setup. Steps​ Replace MainLayout.razor page code with the below code. NOTE Remove all the CSS content from the Shared/MainLayout.razor.css file. @inherits LayoutComponentBase
About
@Body
@code { private Sidebar sidebar = default!; private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/\", IconName = IconName.HouseDoorFill, Text = \"Home\", Match=NavLinkMatch.All}, new NavItem { Id = \"2\", Href = \"/counter\", IconName = IconName.PlusSquareFill, Text = \"Counter\"}, new NavItem { Id = \"3\", Href = \"/fetchdata\", IconName = IconName.Table, Text = \"Fetch Data\"}, }; return navItems; } } Starter templates​ .NET 6​ Blazor Bootstrap - Blazor WebAssembly App .NET 7​ Blazor Bootstrap - Blazor WebAssembly App Blazor Bootstrap - Blazor Empty WebAssembly App Edit this page Previous Blazor WebAssembly Next Icons Prerequisites Steps Starter templates .NET 6 .NET 7","s":"Layout Setup - Blazor WebAssembly","u":"/layout/blazor-server","h":"","p":553},{"i":556,"t":"Getting Started MAUI Blazor On this page Getting started - MAUI Blazor App Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Install Nuget Package​ Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager. Install-Package Blazor.Bootstrap -Version 1.10.4 Add CSS references​ Add the following references to the head section in the wwwroot/index.html. Add script references​ Add the following references to the body section in the wwwroot/index.html after the _framework/blazor.webview.js reference. tip chart.js reference is optional. Add when the Chart components are used in the application. Register services​ Add Blazor Bootstrap service in the MauiProgram.cs builder.Services.AddBlazorBootstrap(); // Add this line Register tag helpers in _Imports.razor @using BlazorBootstrap; Remove default references​ In the wwwroot/index.html file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed. Delete the default bootstrap and open-iconic folders from the wwwroot folder. wwwroot/css/bootstrap wwwroot/css/open-iconic Either remove or keep the app.css file but make sure you clear it out of any content when the Sidebar component with full layout is used. Starter templates​ .NET 6​ Blazor Bootstrap - Blazor WebAssembly App .NET 7​ Blazor Bootstrap - Blazor WebAssembly App Blazor Bootstrap - Blazor Empty WebAssembly App Edit this page Previous Blazor Server Next Blazor WebAssembly Install Nuget Package Add CSS references Add script references Register services Remove default references Starter templates .NET 6 .NET 7","s":"Getting started - MAUI Blazor App","u":"/getting-started/maui-blazor","h":"","p":555},{"i":558,"t":"Services Modal Service On this page Blazor Modal Service Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content. See blazor modal service demo here. Methods​ Name Return Type ShowAsync(ModalOption modalOption) Task ModalOption Members​ Property Name Type Description Required Default FooterButtonColor ButtonColor Gets or sets the footer button color. ButtonColor.Secondary FooterButtonCSSClass string Gets or sets the footer button custom CSS class. null FooterButtonText string Gets or sets the footer button text. OK IsVerticallyCentered bool Gets or sets the IsVerticallyCentered. false Message string Gets or sets the modal message. ✔️ null ShowFooterButton string Shows or hides the footer button. true Size ModalSize Gets or sets the modal size. ModalSize.Regular Title string Gets or sets the modal title. ✔️ null Type ModalType Gets or sets the modal type. ModalType.Light Examples​ How it works​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal(ModalType modalType) { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", Type = modalType, }; await ModalService.ShowAsync(modalOption); } } See demo here. Vertically Centered​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal(ModalType modalType) { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", Type = modalType, IsVerticallyCentered = true }; await ModalService.ShowAsync(modalOption); } } See demo here. Size​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal(ModalSize modalSize) { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", Size = modalSize }; await ModalService.ShowAsync(modalOption); } } See demo here. Change footer button color and text​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal() { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", FooterButtonColor = ButtonColor.Primary, FooterButtonText = \"Got it!\" }; await ModalService.ShowAsync(modalOption); } } See demo here. Hide footer button​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal() { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", ShowFooterButton = false }; await ModalService.ShowAsync(modalOption); } } See demo here. How to setup​ Add the Modal component in MainLayout.razor page as shown below. @inherits LayoutComponentBase ... ... MainLayour.razor code goes here ... ... Inject ModalService, then call the ShowAsync(...) method as shown below. ShowAsync method accepts ModalOption object as a parameter. @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task SaveEmployeeAsync() { try { // call the service/api to save the employee details var modalOption = new ModalOption { Title = \"Save Employee\", Message = \"Employee details saved.\", Type = ModalType.Success }; await ModalService.ShowAsync(modalOption); } catch(Exception ex) { // handle exception var modalOption = new ModalOption { Title = \"Save Employee\", Message = $\"Error: {ex.Message}.\", Type = ModalType.Danger }; await ModalService.ShowAsync(modalOption); } } } Edit this page Previous Pie Chart Methods ModalOption Members Examples How it works Vertically Centered Size Change footer button color and text Hide footer button How to setup","s":"Blazor Modal Service","u":"/services/modal","h":"","p":557},{"i":560,"t":"Forms Time Input On this page Blazor Time Input The Blazor Bootstrap TimeInput component is constructed using an HTML input of type=\"time\" which limits user input based on pre-defined parameters. This component enables users to input a time using a text box with validation or a special time picker interface. Parameters​ Name Type Default Required Description Added Version AutoComplete bool false Indicates whether the TimeInput can complete the values automatically by the browser. 1.6.0 Disabled bool false Gets or sets the disabled. 1.6.0 EnableMinMax bool false Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. 1.6.0 Max TValue Gets or sets the max. Max ignored if EnableMinMax=\"false\". 1.6.0 Min TValue Gets or sets the min. Min ignored if EnableMinMax=\"false\". 1.6.0 Placeholder string? null Gets or sets the placeholder. 1.6.0 Value TValue Gets or sets the value. 1.6.0 ValueExpression Expression> Gets or sets the expression 1.6.0 Methods​ Name Description Added Version Disable Disables time input. 1.6.0 Enable Enables time input. 1.6.0 Events​ Name Description ValueChanged This event fired on every user keystroke that changes the TimeInput value. Examples​ Basic usage​ NOTE The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type=\"text\".
Entered date: @date1
@code { private TimeOnly date1 = new TimeOnly(13, 14); } See demo here Generic type​ The Blazor Bootstrap TimeInput component supports TimeOnly and TimeOnly?. In the below example, TValue is set to TimeOnly and TimeOnly?.
TimeOnly:
Entered time: @time1
TimeOnly?:
Entered time: @time2
@code { private TimeOnly time1 = new TimeOnly(6, 40); private TimeOnly? time2; } See demo here Enable min and max​ Set EnableMinMax=\"true\" and set the Min and Max parameters to restrict the user input between the Min and Max range. NOTE If the user tries to enter a number in the TimeInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.
TimeOnly:
Min time: @min1
Max time: @max1
Entered time: @time1
TimeOnly?:
Min time: @min2
Max time: @max2
Entered time: @time2
@code { private TimeOnly time1, min1, max1; private TimeOnly? time2, min2, max2; protected override void OnInitialized() { time1 = new TimeOnly(10, 0); // 10:00 AM min1 = new TimeOnly(8, 0); // 08:00 AM max1 = new TimeOnly(18, 0); // 06:00 PM time2 = null; min2 = new TimeOnly(8, 0); // 08:00 AM max2 = new TimeOnly(18, 0); // 06:00 PM } } See demo here Disable​ Use the Disabled parameter to disable the TimeInput.
Entered time: @time1
@code { private TimeOnly time1 = new TimeOnly(10, 50); // 10:50 AM private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the TimeInput. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
Entered time: @time1
@code { private TimeInput timeInput1 = default!; private TimeOnly time1 = new TimeOnly(10, 50); // 10:50 AM private void Disable() => timeInput1.Disable(); private void Enable() => timeInput1.Enable(); } See demo here Validations​ Like any other blazor input component, TimeInput component supports validations. Use the Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. @using System.ComponentModel.DataAnnotations
flightForm.FlightNumber)\" />
flightForm.DepartureDate)\" />
flightForm.DepartureTime)\" />
flightForm.ArrivalDate)\" />
flightForm.ArrivalTime)\" />
@code { private FlightForm flightForm = new(); private EditContext editContext; [Inject] ToastService _toastService { get; set; } protected override void OnInitialized() { editContext = new EditContext(flightForm); base.OnInitialized(); } public void HandleValidSubmit() { var toastMessage = new ToastMessage ( type: ToastType.Success, iconName: IconName.Check2All, title: \"Success!\", helpText: $\"{DateTime.Now.ToLocalTime()}\", message: \"Flight schedule created.\" ); _toastService.Notify(toastMessage); } private void ResetForm() { flightForm = new(); editContext = new EditContext(flightForm); } public class FlightForm { [Required(ErrorMessage = \"Flight Number required.\")] public string FlightNumber { get; set; } [Required(ErrorMessage = \"Departure Date required.\")] public DateOnly? DepartureDate { get; set; } [Required(ErrorMessage = \"Departure Time required.\")] public TimeOnly? DepartureTime { get; set; } [Required(ErrorMessage = \"Arrival Date required.\")] public DateOnly? ArrivalDate { get; set; } [Required(ErrorMessage = \"Arrival Time required.\")] public TimeOnly? ArrivalTime { get; set; } } } See demo here Events: ValueChanged​ This event fires on every user keystroke/selection that changes the TimeInput value.
time1\" ValueChanged=\"(value) => TimeChanged(value)\" />
Changed time: @time1
@code { private TimeOnly time1 = new TimeOnly(10, 0); // 10:00 AM private void TimeChanged(TimeOnly timeOnly) { time1 = timeOnly; } } See demo here Restrict the date field based on the entry in another date field​ One common scenario is that the time fields are restricted based on the entry in another time field. In the example below, we restrict the arrival time based on the selection of departure. @using System.ComponentModel.DataAnnotations
flightForm.DepartureTime\" ValueChanged=\"(value) => DepartureTimeChanged(value)\" /> flightForm.DepartureTime)\" />
flightForm.ArrivalTime)\" />
@code { TimeInput arrivalTimeInput = default!; private FlightForm flightForm = new(); private EditContext editContext; private TimeOnly? arrivalMinTime; private TimeOnly? arrivalMaxTime; [Inject] ToastService _toastService { get; set; } protected override void OnInitialized() { editContext = new EditContext(flightForm); base.OnInitialized(); } private void DepartureTimeChanged(TimeOnly? departureTime) { if (departureTime is null || !departureTime.HasValue) { flightForm.DepartureTime = null; flightForm.ArrivalTime = null; arrivalMinTime = null; arrivalMaxTime = null; arrivalTimeInput.Disable(); return; } flightForm.DepartureTime = departureTime; flightForm.ArrivalTime = null; arrivalMinTime = departureTime.Value.AddHours(1); arrivalMaxTime = departureTime.Value.AddHours(12); arrivalTimeInput.Enable(); } public void HandleValidSubmit() { var toastMessage = new ToastMessage ( type: ToastType.Success, iconName: IconName.Check2All, title: \"Success!\", helpText: $\"{DateTime.Now.ToLocalTime()}\", message: \"Flight schedule created.\" ); _toastService.Notify(toastMessage); } private void ResetForm() { flightForm = new(); editContext = new EditContext(flightForm); } public class FlightForm { [Required(ErrorMessage = \"Departure Time required.\")] public TimeOnly? DepartureTime { get; set; } [Required(ErrorMessage = \"Arrival Time required.\")] public TimeOnly? ArrivalTime { get; set; } } } Edit this page Previous Switch Next Accordion Parameters Methods Events Examples Basic usage Generic type Enable min and max Disable Validations Events: ValueChanged Restrict the date field based on the entry in another date field","s":"Blazor Time Input","u":"/forms/time-input","h":"","p":559},{"i":562,"t":"Data Visualization Doughnut Chart On this page Blazor Doughnut Chart A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category. Parameters​ Name Type Default Required Description Added Version Height int Gets or sets chart height. 1.0.0 Width int Get or sets chart width. 1.0.0 Methods​ Name Return type Description Added Version AddDataAsync ChartData Adds data to bar chart. 1.10.0 AddDatasetAsync ChartData Adds dataset to bar chart. 1.10.0 InitializeAsync Task Initialize Bar Chart. 1.0.0 UpdateAsync Task Update Bar Chart. 1.0.0 ChartData Members​ Property Name Type Default Required Description Added Version Datasets List null ✔️ Gets or sets the Datasets. 1.0.0 Labels List null ✔️ Gets or sets the Labels. 1.0.0 DoughnutChartDataset Members​ info DoughnutChartDataset implements IChartDataset. Property Name Type Default Required Description Added Version BackgroundColor List null Get or sets the BackgroundColor. 1.0.0 BorderColor List null Get or sets the BorderColor. 1.0.0 BorderWidth List null Get or sets the BorderWidth. 1.0.0 Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0 Data List null Get or sets the Data. 1.0.0 Datalabels DoughnutChartDatasetDataLabels Get or sets the data labels Hidden bool false Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. 1.0.0 HoverBackgroundColor List null ✔️ Get or sets the HoverBackgroundColor. 1.0.0 HoverBorderColor List null ✔️ Get or sets the HoverBorderColor. 1.0.0 HoverBorderWidth List null ✔️ Get or sets the HoverBorderWidth. 1.0.0 Label string null The label for the dataset which appears in the legend and tooltips. 1.0.0 Type string null ✔️ Get or sets the chart type. 1.0.0 DoughnutChartDatasetDataLabels Members​ Property Name Type Default Required Description Added Version Anchor string? center Gets or sets the anchor. 1.10.2 BorderWidth double? 2 Gets or sets the border width. 1.10.2 DoughnutChartOptions Members​ info DoughnutChartOptions implements ChartOptions. Property Name Type Default Required Description Added Version Locale string? Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. 1.10.0 Plugins DoughnutChartPlugins Gets or sets the Plugins. 1.10.2 Responsive bool false Gets or sets the Responsive. 1.0.0 Examples​ Prerequisites​ Refer to the getting started guide for setting up charts. How it works​ In the following example, a categorical 12-color palette is used. tip For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. @code { private DoughnutChart doughnutChart = default!; private DoughnutChartOptions doughnutChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; doughnutChartOptions = new(); doughnutChartOptions.Responsive = true; doughnutChartOptions.Plugins.Title.Text = \"2022 - Sales\"; doughnutChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await doughnutChart.InitializeAsync(chartData, doughnutChartOptions); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset && doughnutChartDataset is not null && doughnutChartDataset.Data is not null) { var count = doughnutChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(0, 100)); } doughnutChartDataset.Data = newData; newDatasets.Add(doughnutChartDataset); } } chartData.Datasets = newDatasets; await doughnutChart.UpdateAsync(chartData, doughnutChartOptions); } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; var chartDataset = GetRandomDoughnutChartDataset(); chartData = await doughnutChart.AddDatasetAsync(chartData, chartDataset, doughnutChartOptions); } private async Task AddDataAsync() { if (dataLabelsCount >= 12) return; if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset) { data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } } chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomDoughnutChartDataset()); } return datasets; } private DoughnutChartDataset GetRandomDoughnutChartDataset() { datasetsCount += 1; return new() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $\"Product {dataLabelsCount + 1}\"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } See the demo here. Locale​ By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). @using BlazorBootstrap.Extensions @using Color = System.Drawing.Color @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" }; var datasets = new List(); var dataset1 = new LineChartDataset() { Label = \"Windows\", Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[0] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset1); var dataset2 = new LineChartDataset() { Label = \"macOS\", Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[1] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset2); var dataset3 = new LineChartDataset() { Label = \"Other\", Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[2] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; lineChartOptions = new(); lineChartOptions.Locale = \"de-DE\"; lineChartOptions.Responsive = true; lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; lineChartOptions.Scales.X.Title.Text = \"2019\"; lineChartOptions.Scales.X.Title.Display = true; lineChartOptions.Scales.Y.Title.Text = \"Visitors\"; lineChartOptions.Scales.Y.Title.Display = true; lineChartOptions.Plugins.Title.Text = \"Operating system\"; lineChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await lineChart.InitializeAsync(chartData, lineChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Data labels​ @code { private DoughnutChart doughnutChart = default!; private DoughnutChartOptions doughnutChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) }; doughnutChartOptions = new(); doughnutChartOptions.Responsive = true; doughnutChartOptions.Plugins.Title.Text = \"2022 - Sales\"; doughnutChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // pass the plugin name to enable the data labels await doughnutChart.InitializeAsync(chartData: chartData, chartOptions: doughnutChartOptions, plugins: new string[] { \"ChartDataLabels\" }); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); var datasetIndex = 0; foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset && doughnutChartDataset is not null && doughnutChartDataset.Data is not null) { var count = doughnutChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(0, 100)); } doughnutChartDataset.Data = newData; newDatasets.Add(doughnutChartDataset); } } chartData.Datasets = newDatasets; await doughnutChart.UpdateAsync(chartData: chartData, chartOptions: doughnutChartOptions); } private async Task AddDataAsync() { if (dataLabelsCount >= 12) return; if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset) { data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } } chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { var dataset = GetRandomDoughnutChartDataset(); if (index == 0) dataset.Datalabels.Anchor = \"end\"; else if (index == numberOfDatasets - 1) dataset.Datalabels.Anchor = \"start\"; else dataset.Datalabels.Anchor = \"center\"; datasets.Add(dataset); } return datasets; } private DoughnutChartDataset GetRandomDoughnutChartDataset() { datasetsCount += 1; return new() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $\"Product {dataLabelsCount + 1}\"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } See the demo here. Edit this page Previous Bar Chart Next Line Chart Parameters Methods ChartData Members DoughnutChartDataset Members DoughnutChartDatasetDataLabels Members DoughnutChartOptions Members Examples Prerequisites How it works Locale Data labels","s":"Blazor Doughnut Chart","u":"/data-visualization/doughnut-chart","h":"","p":561},{"i":564,"t":"Components Dropdown On this page Blazor Dropdown Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap. Dropdown Parameters​ Name Type Description Required Default Added Version AutoClose bool Enables or disables the auto close. true 1.10.0 AutoCloseBehavior DropdownAutoCloseBehavior Gets or sets the auto close behavior of the dropdown. DropdownAutoCloseBehavior.Both 1.10.0 ChildContent RenderFragment Specifies the content to be rendered inside the Dropdown. 1.10.0 Direction DropdownDirection Gets or sets the direction of the dropdown menu. DropdownDirection.Dropdown 1.10.0 Disabled bool Gets or sets whether the dropdown menu is disabled. false 1.10.3 Size Size Gets or sets the size of the dropdown. Size.None 1.10.3 Split bool Gets or sets the toggle button split behavior. false 1.10.0 DropdownToggleButton Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside the DropdownToggleButton. 1.10.0 Color ButtonColor Gets or sets the button color. 1.10.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.10.0 DropdownActionButton Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside the DropdownActionButton. 1.10.0 Color ButtonColor Gets or sets the button color. 1.10.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.10.0 DropdownMenu Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside the DropdownMenu. 1.10.0 Position DropdownMenuPosition Gets or sets the dropdown menu position. 1.10.0 DropdownHeader Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside the DropdownHeader. 1.10.0 DropdownItem Parameters​ Name Type Description Required Default Added Version Active bool When set to 'true', places the component in the active state with active styling. 1.10.0 ChildContent RenderFragment Specifies the content to be rendered inside the DropdownMenu. 1.10.0 Disabled bool When set to 'true', disables the component's functionality and places it in a disabled state. 1.10.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.10.0 Target Target The target attribute specifies where to open the linked document. Target.None 1.10.0 To string? Denotes the target route of the link button. 1.10.0 Type ButtonType Defines the button type. ButtonType.Button 1.10.0 Dropdown Methods​ Name Description Added Version HideAsync Hides the dropdown menu of a given navbar or tabbed navigation. 1.10.0 ShowAsync Shows the dropdown menu of a given navbar or tabbed navigation. 1.10.0 ToggleAsync Toggles the dropdown menu of a given navbar or tabbed navigation. 1.10.0 UpdateAsync Updates the position of an element’s dropdown. 1.10.0 Dropdown Events​ Event Type Description Added Version OnHiding This event is fired immediately when the hide method has been called. 1.10.0 OnHidden This event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete). 1.10.0 OnShowing This event fires immediately when the show instance method is called. 1.10.0 OnShown This event is fired when an dropdown element has been made visible to the user (will wait for CSS transitions to complete). 1.10.0 Examples​ Single button​ Dropdown button Action Another action Something else here See the demo here. Color​
Primary Action Another action Something else here Secondary Action Another action Something else here Success Action Another action Something else here Info Action Another action Something else here Warning Action Another action Something else here Danger Action Another action Something else here
See the demo here. Split button​
Primary Action Another action Something else here Secondary Action Another action Something else here Success Action Another action Something else here Info Action Another action Something else here Warning Action Another action Something else here Danger Action Another action Something else here
See the demo here. Sizing​
Large button Action Another action Something else here Large split button Action Another action Something else here
Small button Action Another action Something else here Small split button Action Another action Something else here
See the demo here. Directions​ Dropup​ To trigger DropdownMenu above elements, add the Direction=\"DropdownDirection.Dropup\" to the Dropdown component.
Dropup button with text Action Another action Something else here Dropup split button Action Another action Something else here
See the demo here. Dropup centered​ To center the DropdownMenu above the toggle, add the Direction=\"DropdownDirection.DropupCentered\" to the Dropdown component.
Centered dropup Action Another action Something else here
See the demo here. Dropend​ To trigger DropdownMenu at the right of elements, add the Direction=\"DropdownDirection.Dropend\" to the Dropdown component.
Dropend Action Another action Something else here Split dropend Action Another action Something else here
See the demo here. Dropstart​ To trigger DropdownMenu at the left of elements, you can add the Direction=\"DropdownDirection.Dropstart\" to the Dropdown component.
Dropstart Action Another action Something else here Action Another action Something else here Split dropstart
See the demo here. Active​ To style DropdownItem as active, add the Active=\"true\" parameter to the DropdownItem element in the DropdownMenu. Dropstart Action Another action Something else here See the demo here. Disabled​ To disable the dropdown, set the Disabled parameter to true on the Dropdown component. Dropstart Action Another action Something else here
@code { private bool isDropdownDisabled = true; private void EnableDropdown() => isDropdownDisabled = false; private void DisableDropdown() => isDropdownDisabled = true; } To style a dropdown item as disabled, set the Disabled parameter to true on the DropdownItem element in the DropdownMenu component. Dropstart Action Another action Something else here See the demo here. Menu position​ By default, a DropdownMenu is automatically positioned at 100% from the top and along the left side of its parent. You can change this with the Position parameter. To right-align a DropdownMenu, add the Position=\"DropdownMenuPosition.End\" parameter to the DropdownMenu component. Directions are mirrored when using Bootstrap in RTL. Right-aligned menu example Action Another action Something else here See the demo here. Menu content​ Header​ Add a header to label sections of actions in any dropdown menu. Dropdown Dropdown header Action Another action Something else here See the demo here. Dividers​ Separate groups of related menu items with a divider. Dropdown Action Another action Something else here Dropdown header Separated link See the demo here. Text​ Place any freeform text within a dropdown menu with text and use spacing utilities. Note that youll likely need additional sizing styles to constrain the menu width. Dropdown

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

 See the demo here. Forms​ Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require. @using System.ComponentModel.DataAnnotations Dropdown form
invoice.Price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" /> invoice.Price)\" />
invoice.Discount\" ValueChanged=\"(value) => DiscountChanged(value)\" Placeholder=\"Enter discount\" /> invoice.Discount)\" />
invoice.Total)\" />
@code { private Invoice invoice = new(); private EditContext editContext = default!; protected override void OnInitialized() { editContext = new EditContext(invoice); base.OnInitialized(); } protected override void OnParametersSet() { CalculateToatl(); base.OnParametersSet(); } private void PriceChanged(decimal? value) { invoice.Price = value; CalculateToatl(); } private void DiscountChanged(decimal? value) { invoice.Discount = value; CalculateToatl(); } private void CalculateToatl() { var price = invoice.Price.HasValue ? invoice.Price.Value : 0; var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0; invoice.Total = price - discount; } public void HandleOnValidSubmit() { Console.WriteLine($\"Price: {invoice.Price}\"); Console.WriteLine($\"Discount: {invoice.Discount}\"); Console.WriteLine($\"Total: {invoice.Total}\"); } private void ResetForm() { invoice = new(); editContext = new EditContext(invoice); } public class Invoice { [Required(ErrorMessage = \"Price required.\")] [Range(60, 500, ErrorMessage = \"Price should be between 60 and 500.\")] public decimal? Price { get; set; } = 232M; [Range(0, 50, ErrorMessage = \"Discount should be between 0 and 50.\")] public decimal? Discount { get; set; } [Required(ErrorMessage = \"Amount required.\")] [Range(10, 500, ErrorMessage = \"Total should be between 60 and 500.\")] public decimal? Total { get; set; } } } See the demo here. Auto close behavior​ By default, the DropdownMenu is closed when clicking either inside or outside the DropdownMenu. You can use the AutoClose and AutoCloseBehavior parameters to change this behavior of the Dropdown. Default dropdown Menu item Menu item Menu item Clickable outside Menu item Menu item Menu item Clickable inside Menu item Menu item Menu item Manual close Menu item Menu item Menu item See the demo here. Methods​ Dropdown button Action Another action Something else here @code{ private Dropdown dropdown1 = default!; private async Task ShowAsync() => await dropdown1.ShowAsync(); private async Task HideAsync() => await dropdown1.HideAsync(); private async Task ToggleAsync() => await dropdown1.ToggleAsync(); } See the demo here. Events​ All dropdown events are fired at the toggling element and then bubbled up. Dropdown button Action Another action Something else here @code { List messages = new List(); private void OnDropdownHidingAsync() => messages.Add(new(\"OnHiding\")); private void OnDropdownHiddenAsync() => messages.Add(new(\"OnHidden\")); private void OnDropdownShowingAsync() => messages.Add(new(\"OnShowing\")); private void OnDropdownShownAsync() => messages.Add(new(\"OnShown\")); } See the demo here. Edit this page Previous Confirm Dialog Next Grid Dropdown Parameters DropdownToggleButton Parameters DropdownActionButton Parameters DropdownMenu Parameters DropdownHeader Parameters DropdownItem Parameters Dropdown Methods Dropdown Events Examples Single button Color Split button Sizing Directions Dropup Dropup centered Dropend Dropstart Active Disabled Menu position Menu content Header Dividers Text Forms Auto close behavior Methods Events","s":"Blazor Dropdown","u":"/components/dropdown","h":"","p":563},{"i":566,"t":"Components Sidebar On this page Blazor Sidebar Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content. Parameters​ Name Type Default Required Description Added Version BadgeText string Gets or sets the badge text. 1.4.0 CustomIconName string Gets or sets the custom icon name. 1.4.0 DataProvider delegate ✔️ DataProvider is for items to render. The provider should always return an instance of 'SidebarDataProviderResult', and 'null' is not allowed. 1.4.0 IconName enum Gets or sets the IconName. 1.4.0 ImageSrc string Gets or sets the logo. 1.4.0 Title string ✔️ Gets or sets the title. 1.4.0 Methods​ Name Description Added Version RefreshDataAsync Refresh the sidebar data. 1.4.0 ToggleSidebar Toggles sidebar. 1.4.0 NavItem Properties​ Name Type Default Required Description Added Version Class string? null Gets or sets an additional CSS class. 1.10.3 CustomIconName string? null Gets or sets the custom icon name. 1.4.0 Href string? ✔️ Gets or sets the href. 1.4.0 IconColor IconColor IconColor.None Gets or sets the icon color. 1.4.0 IconName IconName IconName.None Gets or sets the icon name. 1.4.0 Id string? null Gets or sets the Id. 1.4.0 Match NavLinkMatch NavLinkMatch.Prefix Gets or sets the URL matching behavior. 1.4.0 ParentId string? null Gets or sets the parent Id. 1.4.0 Sequence int Gets or sets the sequence. 1.4.0 Target Target Target.None Gets or sets the target. 1.4.0 Text string? ✔️ Gets or sets the navigation link text. 1.4.0 Examples​ Basic usage​ @code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\"}, new NavItem { Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\"}, new NavItem { Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\"}, new NavItem { Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\"}, }; return navItems; } } See demo here. Two level navigation​ Use NavItem's Id and ParentId to set the parent-child relation. NOTE At this moment, two levels of navigation are supported. @code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\" }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\" }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\" }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } } See demo here. Change icons color​ Set IconColor property to change the color. @code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } } See demo here. Full layout with sidebar​ Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } } See demo here. Toggle sidebar to show icons only​ Call ToggleSidebar() method to toggle the Sidebar to show the icons only.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToogleSidebar() => sidebar.ToggleSidebar(); } See demo here. Show badge​ A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToogleSidebar() => sidebar.ToggleSidebar(); } See demo here. Custom brand icon​ Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToogleSidebar() => sidebar.ToggleSidebar(); } See demo here. Show image as brand logo​ Use the ImageSrc parameter to set the brand logo.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToogleSidebar() => sidebar.ToggleSidebar(); } See demo here. Customize sidebar​ Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.
About
@code { Sidebar sidebar; bool applyPurpleStyle = false; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToggleSidebarStyles() => applyPurpleStyle = !applyPurpleStyle; } @if (applyPurpleStyle) { } See demo here. Apply custom CSS class to NavItem​ Set the Class property of a NavItem to apply a custom CSS class. @code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\" }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\" }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\", Class=\"px-3\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\", Class=\"px-3\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\", Class=\"px-3\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\" }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } } See demo here. Edit this page Previous Progress Next Tabs Parameters Methods NavItem Properties Examples Basic usage Two level navigation Change icons color Full layout with sidebar Toggle sidebar to show icons only Show badge Custom brand icon Show image as brand logo Customize sidebar Apply custom CSS class to NavItem","s":"Blazor Sidebar","u":"/components/sidebar","h":"","p":565},{"i":568,"t":"Components Grid On this page Blazor Grid Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting. Grid Parameters​ Name Type Default Required Description Added Version AllowFiltering bool false Gets or sets the grid filtering. 1.0.0 AllowPaging bool false Gets or sets the grid paging. 1.0.0 AllowRowClick bool false Gets or sets the allow row click. 1.9.5 AllowSelection bool false Gets or sets the grid selection. 1.8.0 AllowSorting bool false Gets or sets the grid sorting. 1.0.0 ChildContent RenderFragment ✔️ Specifies the content to be rendered inside the grid. 1.0.0 Data IEnumerable Gets or sets the grid data. 1.4.3 DataProvider GridDataProviderDelegate DataProvider is for items to render. The provider should always return an instance of GridDataProviderResult, and null is not allowed. 1.0.0 DisableAllRowsSelection Func, bool>? Enable or disable the header checkbox selection. 1.8.0 DisableRowSelection Func? Enable or disable the row level checkbox selection. 1.8.0 EmptyDataTemplate RenderFragment ✔️ Template to render when there are no rows to display. 1.0.0 EmptyText string No records to display Shows text on no records. 1.0.0 FiltersRowCssClass string Gets or sets the filters row css class. 1.9.2 FiltersTranslationProvider GridFiltersTranslationDelegate Filters transalation is for grid filters to render. The provider should always return a 'FilterOperatorInfo' collection, and 'null' is not allowed. 1.10.0 FixedHeader bool false Gets or sets the grid fixed header. 1.10.3 HeaderRowCssClass string Gets or sets the header row css class but not the thead tag class. 1.9.2 Height float 320 pixels Gets or sets the grid height. 1.10.3 ItemsPerPageText string Items per page ✔️ Gets or sets the ItemsPerPageText. 1.9.5 PageSize int 10 Gets or sets the page size of the grid. 1.0.0 PageSizeSelectorItems int[] new int[] { 10, 20, 50 } ✔️ Gets or sets the page size selector items. 1.8.0 PageSizeSelectorVisible bool false ✔️ Gets or sets the page size selector visible. 1.8.0 PaginationItemsTextFormat string {0} - {1} of {2} items ✔️ Gets or sets the pagination items text format. 1.8.0 RowClass Func? Gets or sets the row class. 1.6.0 Responsive bool false Gets or sets a value indicating whether Grid is responsive. 1.0.0 SelectionMode GridSelectionMode Gets or sets the grid selection mode. 1.8.0 SettingsProvider GridSettingsProviderDelegate Settings are for the grid to render. The provider should always return an instance of 'GridSettings', and 'null' is not allowed. 1.0.0 THeadCssClass string? null Gets or sets the thead css class. 1.10.3 Unit Unit Unit.px Gets or sets the units. 1.10.3 IMPORTANT Grid requires either Data or DataProvider parameter, but not both. Grid Callback Events​ Name Type Description Added Version GridSettingsChanged EventCallback This event is fired when the grid state is changed. 1.0.0 OnRowClick EventCallback> This event is triggered when the user clicks on the row. Set AllowRowClick to true to enable row clicking. 1.9.5 OnRowDoubleClick EventCallback> This event is triggered when the user double clicks on the row. Set AllowRowClick to true to enable row double clicking. 1.9.5 SelectedItemsChanged EventCallback> This event is fired when the items selection changed. 1.8.0 Grid Methods​ Name Return Type Description Added Version GetFilters() IEnumerable Get filters. 1.0.0 RefreshDataAsync(CancellationToken cancellationToken = default) Task Refresh the grid data. 1.0.0 ResetPageNumber() ValueTask Reset the page number to 1 and refresh the grid. 1.4.3 GridColumn Parameters​ Name Type Default Required Description Added Version ChildContent RenderFragment ✔️ Specifies the content to be rendered inside the grid column. 1.0.0 ColumnClass Func? Gets or sets the column class. 1.6.0 Filterable bool true Enable or disable the filter on a specific column. The filter is enabled or disabled based on the grid AllowFiltering parameter. 1.0.0 FilterOperator enum Assigned based on the property type. Gets or sets the filter operator. 1.0.0 FilterTextboxWidth int Gets or sets the filter textbox width in pixels. 1.0.0 FilterValue string Gets or sets the filter value. 1.0.0 Freeze bool false Indicates whether the column is frozen. 1.10.4 FreezeDirection FreezeDirection FreezeDirection.Left Gets or sets the freeze direction of the column. 1.10.4 FreezeLeftPosition double 0 Gets or sets the horizontal position of the column from left. It has no effect on non-positioned columns. 1.10.4 FreezeRightPosition double 0 Gets or sets the horizontal position of the column from right. It has no effect on non-positioned columns. 1.10.4 HeaderContent RenderFragment Specifies the content to be rendered inside the grid column header. 1.7.3 HeaderText string ✔️ Gets or sets the table column header. 1.0.0 HeaderTextAlignment enum Alignment.Start Gets or sets the header text alignment. Use Alignment.Start or Alignment.Center or Alignment.End. 1.0.0 IsDefaultSortColumn bool false Gets or sets the default sort column. 1.0.0 PropertyName string Gets or sets the property name. This is required when AllowFiltering is true. 1.0.0 Sortable bool false Enable or disable the sorting on a specific column. The sorting is enabled or disabled based on the grid AllowSorting parameter. 1.0.0 SortDirection enum SortDirection.None Gets or sets the default sort direction of a column. Use SortDirection.Ascending or SortDirection.Descending 1.0.0 SortKeySelector Expression> Expression used for sorting. 1.0.0 SortString string Gets or sets the column sort string. This string is passed to the backend/API for sorting. And it is ignored for client-side sorting. 1.0.0 StringComparison enum StringComparison.OrdinalIgnoreCase Gets or sets the StringComparison. Use StringComparison.CurrentCulture or StringComparison.CurrentCultureIgnoreCase or StringComparison.InvariantCulture or StringComparison.InvariantCultureIgnoreCase or StringComparison.Ordinal or StringComparison.OrdinalIgnoreCase. 1.0.0 TextAlignment Alignment Alignment.Start Gets or sets the text alignment. Use Alignment.Start or Alignment.Center or Alignment.End. 1.0.0 TextNoWrap bool false Gets or sets text nowrap. 1.0.0 GridSettings Properties​ Name Type Default Required Description Added Version PageNumber int Page number. 1.0.0 PageSize int Size of the page. 1.0.0 Filters IEnumerable Current filters. 1.0.0 Examples​ Client side filtering​ For filtering, AllowFiltering and PropertyName parameters are required. Add AllowFiltering=\"true\" parameter to Grid and PropertyName parameter to all the GridColumns. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Client side filtering with string comparision​ In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here info By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching. Client side paging​ For paging, AllowPaging and PageSize parameters are required. Add AllowPaging=\"true\" and PageSize=\"20\" parameters to the Grid. PageSize parameter is optional. INFO The default page size is 10. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Client side sorting​ For sorting, AllowSorting and SortKeySelector parameters are required. Add AllowSorting=\"true\" parameter to Grid and SortKeySelector to all the GridColumns. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Client side filtering, paging, and sorting​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Set default filter​ FilterOperator and FilterValue parameters are required to set the default filter. TIP You can set the default filter on more than one GridColumn. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Disable specific column filter​ Filterable parameter is required to disable the filter on a specific column. Add Filterable=\"false\" parameter to GridColumn. INFO By default, Filterable=\"true\" on all the columns if the AllowFiltering parameter is set to true on the grid. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Increase filter textbox width​ Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional. NOTE Filter textbox width measured in pixels. @context.Id @context.FirstName @context.LastName @context.Email @context.Company @context.Designation @context.DOJ @context.Salary.ToString(\"N2\") @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee3 { Id = 107, FirstName = \"Alice\", LastName = \"Reddy\", Email = \"alice@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true }, new Employee3 { Id = 103, FirstName = \"Bob\", LastName = \"Roy\", Email = \"bob@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true }, new Employee3 { Id = 106, FirstName = \"John\", LastName = \"Papa\", Email = \"john@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true }, new Employee3 { Id = 104, FirstName = \"Pop\", LastName = \"Two\", Email = \"pop@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false }, new Employee3 { Id = 105, FirstName = \"Ronald\", LastName = \"Dire\", Email = \"ronald@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true }, new Employee3 { Id = 102, FirstName = \"Line\", LastName = \"K\", Email = \"line@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true }, new Employee3 { Id = 101, FirstName = \"Daniel\", LastName = \"Potter\", Email = \"daniel@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true }, new Employee3 { Id = 108, FirstName = \"Zayne\", LastName = \"Simmons\", Email = \"zayne@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true }, new Employee3 { Id = 109, FirstName = \"Isha\", LastName = \"Davison\", Email = \"isha@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Server side filtering, paging and sorting​ NOTE For server-side sorting, we need the SortString parameter on GridColumn along with the SortKeySelector parameter. item.Id\"> @context.Id item.FirstName\"> @context.FirstName item.LastName\"> @context.LastName item.Designation\"> @context.Designation item.Salary\"> @context.Salary item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { [Inject] public IEmployeeService _employeeService { get; set; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting[0].SortString; sortDirection = request.Sorting[0].SortDirection; } var result = _employeeService.GetEmployees(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Set default sorting​ IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn=\"true\" parameter to the GridColumn. The default sort direction will be ascending. To change the default sorting of a column, add SortDirection=\"SortDirection.Descending\" to the GridColumn. INFO If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column. item.Id)\"> @context.Id item.Name)\" IsDefaultSortColumn=\"true\" SortDirection=\"SortDirection.Descending\"> @context.Name item.Designation)\"> @context.Designation item.DOJ)\"> @context.DOJ item.IsActive)\"> @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Disable specific column sorting​ Add Sortable=\"false\" parameter the GridColumn to disable the sorting. INFO If sorting is disabled, then the SortKeySelector parameter is not required. item.Id)\"> @context.Id item.Name)\"> @context.Name @context.Designation item.DOJ)\"> @context.DOJ item.IsActive)\"> @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Header text alignment​ Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Cell alignment​ Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End. @context.Id @context.Name @context.Designation @context.Salary @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee2 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", Salary = 7700, IsActive = true }, new Employee2 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", Salary = 19000, IsActive = true }, new Employee2 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", Salary = 12000, IsActive = true }, new Employee2 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", Salary = 19000, IsActive = false }, new Employee2 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", Salary = 16500.50M, IsActive = true }, new Employee2 { Id = 102, Name = \"Line\", Designation = \"Architect\", Salary = 24000, IsActive = true }, new Employee2 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", Salary = 21000, IsActive = true }, new Employee2 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", Salary = 17850, IsActive = true }, new Employee2 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", Salary = 8000, IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Cell formating​ To format the cell data, use ToString method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET EXAMPLE @context.Salary.ToString(\"N2\") @context.Id @context.Name @context.Designation @context.Salary.ToString(\"N2\") @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee2 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", Salary = 7700, IsActive = true }, new Employee2 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", Salary = 19000, IsActive = true }, new Employee2 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", Salary = 12000, IsActive = true }, new Employee2 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", Salary = 19000, IsActive = false }, new Employee2 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", Salary = 16500.50M, IsActive = true }, new Employee2 { Id = 102, Name = \"Line\", Designation = \"Architect\", Salary = 24000, IsActive = true }, new Employee2 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", Salary = 21000, IsActive = true }, new Employee2 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", Salary = 17850, IsActive = true }, new Employee2 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", Salary = 8000, IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Cell nowrap​ To prevent text from wrapping, add TextNoWrap=\"true\" parameter to the GridColumn. TIP Add Responsive=\"true\" parameter to the grid to enable horizontal scrolling. @context.Id @context.FirstName @context.LastName @context.Email @context.Company @context.Designation @context.DOJ @context.Salary.ToString(\"N2\") @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee3 { Id = 107, FirstName = \"Alice\", LastName = \"Reddy\", Email = \"alice@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true }, new Employee3 { Id = 103, FirstName = \"Bob\", LastName = \"Roy\", Email = \"bob@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true }, new Employee3 { Id = 106, FirstName = \"John\", LastName = \"Papa\", Email = \"john@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true }, new Employee3 { Id = 104, FirstName = \"Pop\", LastName = \"Two\", Email = \"pop@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false }, new Employee3 { Id = 105, FirstName = \"Ronald\", LastName = \"Dire\", Email = \"ronald@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true }, new Employee3 { Id = 102, FirstName = \"Line\", LastName = \"K\", Email = \"line@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true }, new Employee3 { Id = 101, FirstName = \"Daniel\", LastName = \"Potter\", Email = \"daniel@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true }, new Employee3 { Id = 108, FirstName = \"Zayne\", LastName = \"Simmons\", Email = \"zayne@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true }, new Employee3 { Id = 109, FirstName = \"Isha\", LastName = \"Davison\", Email = \"isha@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Pagination alignment​ Change the alignment of pagination by adding the PaginationAlignment parameter to the Grid. By default, PaginationAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Empty data​ If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid. @context.Id @context.FirstName @context.LastName @context.Designation @code { private async Task> EmployeesDataProvider(GridDataProviderRequest request) { await Task.Delay(3000); return (new GridDataProviderResult { Data = new List(), TotalCount = 0 }); } } See demo here TIP Add Responsive=\"true\" parameter to the grid to enable horizontal scrolling. Save and Load Grid Settings​ This example shows how to save/load the Grid state. The state includes the page number, page size, and filters. IMPORTANT In version 0.5.1, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases. NOTE Browser local storage is used to persist the Grid state. Common locations exist for persisting state are Server-side storage, URL, Browser storage, and In-memory state container service. @using System.Text.Json item.Id\" FilterOperator=\"FilterOperator.GreaterThanOrEquals\" FilterValue=\"109\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { BlazorBootstrap.Grid grid; private IEnumerable employees; [Inject] public IJSRuntime JS { get; set; } public GridSettings Settings { get; set; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private async Task OnGridSettingsChanged(GridSettings settings) { if (settings is null) return; // NOTE: enable below two lines, if you want to set default values for PageNumber and PageSize all the time. //settings.PageNumber = 1; //settings.PageSize = 10; await JS.InvokeVoidAsync(\"window.localStorage.setItem\", \"grid-settings\", JsonSerializer.Serialize(settings)); } private async Task GridSettingsProvider() { var settingsJson = await JS.InvokeAsync(\"window.localStorage.getItem\", \"grid-settings\"); if (string.IsNullOrWhiteSpace(settingsJson)) return null; var settings = JsonSerializer.Deserialize(settingsJson); if (settings is null) return null; return settings; } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Data parameter - Assign collection​ Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid. @using BlazorBootstrap.Demo.Models; @foreach (var department in departments) {

@department.Name Employees:

@context.Id @context.Name @context.Designation @context.DOJ @context.IsActive } @code { Grid grid; private List departments = new List() { new Department(\"Product 1 - Research & Development\", new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true } }), new Department(\"Product 2 - Research & Development\", new List { new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true } }) }; } See demo here Data parameter - Update collection​ Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid. @using BlazorBootstrap.Demo.Models; @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { Grid grid; private List employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true } }; } private async Task AddEmployee() { // for the same employees collection, we are adding an object // explicit grid refresh required employees.Add(CreateEmployee()); await grid.RefreshDataAsync(); } private void AddEmployee2() { // creates a shallow copy var emps = employees.GetRange(0, employees.Count); emps.Add(CreateEmployee()); // now employees variable has a new reference. So no need to refresh the grid explicitly // explicit grid refresh is not required employees = emps; } private Employee1 CreateEmployee() { var emp = new Employee1(); emp.Id = employees.Max(x => x.Id) + 1; emp.Name = $\"Employee {emp.Id}\"; emp.Designation = $\"QA Engineer {emp.Id}\"; emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25)); emp.IsActive = true; return emp; } } note The Add Employee button click adds a new employee to the existing employees collection—so explicit grid refresh is required. The Add Employee 2 button click creates a shallow copy of the employees collection and adds a new employee. This new collection is assigned to the employees variable. Now, the employees variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required. See demo here Conditional css class for grid row​ In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private string GetRowClass(Employee1 emp) { if (!emp.IsActive) return \"table-danger\"; else if (emp.Designation == \"Architect\") return \"table-success\"; return string.Empty; } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Conditional css class for grid column​ In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\" ColumnClass=\"@(x => x.IsActive ? \"table-success\" : \"table-danger\")\"> @context.IsActive @code { private IEnumerable employees; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Custom column headers​ In the below example, we use and tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ @code { private IEnumerable employees; private bool IsAllChecked { get => employees.All(e => e.IsActive); set => Array.ForEach(employees.ToArray(), e => e.IsActive = value); } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } Selection​ Set AllowSelection=\"true\" to enable the selection on the Grid. By default, SelectionMode is Single. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive
Selected Items Count: @selectedEmployees.Count
Selected Employees:
    @foreach (var emp in selectedEmployees) {
  • @emp.Name
    • }
@code { private IEnumerable employees = default!; private HashSet selectedEmployees = new(); private async Task> EmployeesDataProvider(GridDataProviderRequest request) { Console.WriteLine(\"EmployeesDataProvider called...\"); if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private Task OnSelectedItemsChanged(HashSet employees) { selectedEmployees = employees is not null && employees.Any() ? employees : new(); return Task.CompletedTask; } } See demo here Multiple selection​ To select multiple rows, set SelectionMode=\"GridSelectionMode.Multiple\". @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive
Selected Items Count: @selectedEmployees.Count
Selected Employees:
    @foreach (var emp in selectedEmployees) {
  • @emp.Name
    • }
@code { private IEnumerable employees = default!; private HashSet selectedEmployees = new(); private async Task> EmployeesDataProvider(GridDataProviderRequest request) { Console.WriteLine(\"EmployeesDataProvider called...\"); if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private Task OnSelectedItemsChanged(HashSet employees) { selectedEmployees = employees is not null && employees.Any() ? employees : new(); return Task.CompletedTask; } } See demo here Disable selection​ We can disable the header checkbox or row level checkbox based on a condition. For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. Also, disable check the row level checkbox if the employee Id is less than 105. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive
Selected Items Count: @selectedEmployees.Count
Selected Employees:
    @foreach (var emp in selectedEmployees) {
  • @emp.Name
    • }
@code { private IEnumerable employees = default!; private HashSet selectedEmployees = new(); private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private bool DisableAllRowsSelectionHandler(IEnumerable employees) { return employees.Any(x => x.Id < 105); // disable selection if EmployeeId < 105 } private bool DisableRowSelectionHandler(Employee1 emp) { return emp.Id < 105; // disable selection if EmployeeId < 105 } private Task OnSelectedItemsChanged(HashSet employees) { selectedEmployees = employees is not null && employees.Any() ? employees : new(); return Task.CompletedTask; } } See demo here Dynamic page size​ @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private int pageSize = 5; private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } private void ChangeSize(int size) => pageSize = size; } See demo here Page size selection​ @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Header row css class​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, }; } } See demo here Filters row css class​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, }; } } See demo here Row click event​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { [Inject] ModalService ModalService { get; set; } = default!; private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, }; } private async Task OnRowClick(GridRowEventArgs args) { await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = \"Event: Row Click\", Message = $\"Id: {args.Item.Id}, Name: {args.Item.Name}\" }); } } See demo here Row double click event​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { [Inject] ModalService ModalService { get; set; } = default!; private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, }; } private async Task OnRowDoubleClick(GridRowEventArgs args) { await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = \"Event: Row Double Click\", Message = $\"Id: {args.Item.Id}, Name: {args.Item.Name}\" }); } } See demo here Translations​ In the example below, you will see translations related to pagination and filters in Dutch. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees = default!; private async Task> GridFiltersTranslationProvider() { var filtersTranslation = new List(); // number/date/boolean filtersTranslation.Add(new(\"=\", \"gelijk aan\", FilterOperator.Equals)); filtersTranslation.Add(new(\"!=\", \"Niet gelijk\", FilterOperator.NotEquals)); // number/date filtersTranslation.Add(new(\"<\", \"Minder dan\", FilterOperator.LessThan)); filtersTranslation.Add(new(\"<=\", \"Kleiner dan of gelijk aan\", FilterOperator.LessThanOrEquals)); filtersTranslation.Add(new(\">\", \"Groter dan\", FilterOperator.GreaterThan)); filtersTranslation.Add(new(\">=\", \"Groter dan of gelijk aan\", FilterOperator.GreaterThanOrEquals)); // string filtersTranslation.Add(new(\"*a*\", \"Bevat\", FilterOperator.Contains)); filtersTranslation.Add(new(\"a**\", \"Begint met\", FilterOperator.StartsWith)); filtersTranslation.Add(new(\"**a\", \"Eindigt met\", FilterOperator.EndsWith)); filtersTranslation.Add(new(\"=\", \"gelijk aan\", FilterOperator.Equals)); // common filtersTranslation.Add(new(\"x\", \"Duidelijk\", FilterOperator.Clear)); return await Task.FromResult(filtersTranslation); } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Fixed header​ To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. You can change the units to em, pt, px, or etc. by setting the Unit parameter. @context.Id @context.Name @context.Designation @context.Designation @context.Designation @context.Designation @context.DOJ @context.IsActive @context.IsActive @context.IsActive @context.IsActive @context.IsActive @code { BlazorBootstrap.Grid grid = default!; private IEnumerable employees = default!; protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee4 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee4 { Id = null, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee4 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee4 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee4 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee4 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee4 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee4 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee4 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = null, IsActive = true }, new Employee4 { Id = 110, Name = \"Vijay\", Designation = null, DOJ = new DateOnly(1990, 7, 1), IsActive = true }, }; } } See demo here Fixed header with filters​ item.CustomerId\" FilterTextboxWidth=\"50\" HeaderTextAlignment=\"Alignment.Center\" TextAlignment=\"Alignment.Center\"> @context.CustomerId item.CustomerName\" FilterTextboxWidth=\"80\"> @context.CustomerName item.Phone\" FilterTextboxWidth=\"100\"> @context.Phone item.Email\" FilterTextboxWidth=\"120\"> @context.Email item.Address\" FilterTextboxWidth=\"150\"> @context.Address item.PostalZip\" FilterTextboxWidth=\"80\"> @context.PostalZip item.Country\" FilterTextboxWidth=\"80\"> @context.Country @code { [Inject] public ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting.FirstOrDefault().SortString; sortDirection = request.Sorting.FirstOrDefault().SortDirection; } var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Freeze columns​ item.CustomerId\" FilterTextboxWidth=\"50\" HeaderTextAlignment=\"Alignment.Center\" TextAlignment=\"Alignment.Center\"> @context.CustomerId item.CustomerName\" FilterTextboxWidth=\"80\"> @context.CustomerName item.Phone\" FilterTextboxWidth=\"100\"> @context.Phone item.Email\" FilterTextboxWidth=\"120\"> @context.Email item.Address\" FilterTextboxWidth=\"150\"> @context.Address item.PostalZip\" FilterTextboxWidth=\"80\"> @context.PostalZip item.Country\" FilterTextboxWidth=\"80\"> @context.Country @code { [Inject] public ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting.FirstOrDefault().SortString; sortDirection = request.Sorting.FirstOrDefault().SortDirection; } var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Freeze columns with fixed header​ item.CustomerId\" FilterTextboxWidth=\"50\" HeaderTextAlignment=\"Alignment.Center\" TextAlignment=\"Alignment.Center\"> @context.CustomerId item.CustomerName\" FilterTextboxWidth=\"80\"> @context.CustomerName item.Phone\" FilterTextboxWidth=\"100\"> @context.Phone item.Email\" FilterTextboxWidth=\"120\"> @context.Email item.Address\" FilterTextboxWidth=\"150\"> @context.Address item.PostalZip\" FilterTextboxWidth=\"80\"> @context.PostalZip item.Country\" FilterTextboxWidth=\"80\"> @context.Country @code { [Inject] public ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting.FirstOrDefault().SortString; sortDirection = request.Sorting.FirstOrDefault().SortDirection; } var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Freeze columns with fixed header and filters​ item.CustomerId\" FilterTextboxWidth=\"50\" HeaderTextAlignment=\"Alignment.Center\" TextAlignment=\"Alignment.Center\"> @context.CustomerId item.CustomerName\" FilterTextboxWidth=\"80\"> @context.CustomerName item.Phone\" FilterTextboxWidth=\"100\"> @context.Phone item.Email\" FilterTextboxWidth=\"120\"> @context.Email item.Address\" FilterTextboxWidth=\"150\"> @context.Address item.PostalZip\" FilterTextboxWidth=\"80\"> @context.PostalZip item.Country\" FilterTextboxWidth=\"80\"> @context.Country @code { [Inject] public ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting.FirstOrDefault().SortString; sortDirection = request.Sorting.FirstOrDefault().SortDirection; } var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Edit this page Previous Dropdown Next Modal Grid Parameters Grid Callback Events Grid Methods GridColumn Parameters GridSettings Properties Examples Client side filtering Client side filtering with string comparision Client side paging Client side sorting Client side filtering, paging, and sorting Set default filter Disable specific column filter Increase filter textbox width Server side filtering, paging and sorting Set default sorting Disable specific column sorting Header text alignment Cell alignment Cell formating Cell nowrap Pagination alignment Empty data Save and Load Grid Settings Data parameter - Assign collection Data parameter - Update collection Conditional css class for grid row Conditional css class for grid column Custom column headers Selection Multiple selection Disable selection Dynamic page size Page size selection Header row css class Filters row css class Row click event Row double click event Translations Fixed header Fixed header with filters Freeze columns Freeze columns with fixed header Freeze columns with fixed header and filters","s":"Blazor Grid","u":"/components/grid","h":"","p":567}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/2",[0,0.314,1,0.364,2,3.653,3,1.591,4,1.879,5,1.208,6,0.024,7,0.251,8,0.262,9,0.297,10,0.277,11,0.27,12,0.301,13,0.406,14,0.293,15,2.354,16,1.556,17,1.794,18,2.724,19,2.041,20,2.534,21,0.254,22,1.272,23,0.239,24,2.797,25,2.294,26,0.607,27,3.653,28,1.712,29,2.147,30,2.555,31,3.928,32,1.807,33,2.889,34,2.744,35,2.052,36,3.079,37,1.828,38,2.084,39,1.667,40,1.519,41,1.332,42,2.448,43,1.501,44,1.879,45,2.268,46,2.166,47,2.448,48,2.358,49,1.961,50,1.99,51,2.268,52,3.923,53,3.028,54,2.354,55,2.985,56,2.354,57,0.434,58,2.31,59,1.017,60,1.962,61,3.923,62,2.5,63,1.251,64,2.4,65,0.72,66,2.676,67,1.007,68,3.575,69,3.384,70,1.853,71,2.555,72,2.388,73,1.691,74,3.737,75,1.691,76,2.744,77,2.53,78,2.153,79,3.923,80,1.905,81,2.985,82,3.826,83,2.613,84,2.897,85,3.575,86,2.614,87,3.431,88,1.753,89,2.676,90,2.676,91,1.757,92,2.354,93,1.201,94,1.933]],["t/4",[3,2.756,6,0.019,7,0.202,8,0.208,9,0.221,10,0.221,11,0.214,12,0.239,14,0.233,19,1.646,21,0.202,23,0.247,26,0.482,32,2.189,48,2.857,57,0.461,67,1.744,93,2.081,95,6.54,96,4.753,97,4.157,98,4.753,99,2.757,100,4.753,101,5.17,102,6.306,103,3.793,104,4.527,105,2.123,106,1.71,107,1.584,108,2.081,109,0.328,110,5.529,111,5.747]],["t/6",[6,0.019,7,0.206,8,0.212,9,0.225,10,0.225,11,0.219,12,0.244,14,0.238,21,0.206,23,0.249,57,0.467,58,4.08,65,0.89,88,2.541,93,2.122,95,5.638,97,4.239,99,2.377,106,1.744,107,1.616,108,2.122,109,0.332,110,6.616,112,3.273,113,5.272,114,3.273,115,5.638]],["t/8",[3,2.776,6,0.019,7,0.204,8,0.21,9,0.222,10,0.222,11,0.216,12,0.241,14,0.235,19,1.658,21,0.204,23,0.24,32,2.205,48,2.878,57,0.463,65,0.879,67,1.756,95,5.57,97,4.187,104,4.56,105,2.139,106,1.723,107,1.596,108,2.096,109,0.279,111,6.826,116,3.757,117,6.352,118,6.352,119,4.788,120,4.362,121,5.208,122,2.843,123,6.352,124,5.789]],["t/10",[6,0.018,7,0.195,8,0.201,9,0.213,10,0.213,11,0.207,12,0.231,13,0.311,14,0.225,18,3.185,21,0.195,23,0.245,40,2.538,41,2.225,57,0.376,59,0.824,65,1.011,87,4.011,93,2.008,97,4.011,106,1.65,107,1.529,108,2.008,109,0.321,112,3.097,114,3.097,115,5.335,120,4.179,125,6.402,126,5.545,127,6.084,128,4.842,129,4.368,130,2.298,131,4.988,132,4.368,133,6.453,134,2.142,135,3.12,136,6.453,137,6.946,138,4.586,139,7.696,140,7.696,141,2.225,142,6.946,143,5.152]],["t/12",[6,0.026,7,0.178,8,0.183,9,0.194,10,0.194,11,0.189,12,0.211,14,0.205,19,1.802,21,0.178,23,0.237,25,2.096,32,1.928,48,3.128,57,0.427,58,4.38,59,1.018,67,1.535,88,1.869,93,1.832,97,3.66,98,4.185,99,2.777,103,3.34,104,3.986,105,2.325,106,1.506,107,1.395,108,1.832,109,0.303,110,4.868,112,2.826,115,6.054,125,4.868,130,2.096,144,2.142,145,5.06,146,2.947,147,2.714,148,5.06,149,7.022,150,2.75,151,5.552,152,5.494,153,3.953,154,7.969,155,4.017,156,5.846,157,5.494,158,5.846,159,4.742,160,5.846,161,5.204,162,5.846,163,7.022,164,6.339,165,5.888,166,3.589,167,5.888,168,4.868]],["t/14",[6,0.018,7,0.196,8,0.201,9,0.213,10,0.213,11,0.207,12,0.231,13,0.312,14,0.225,16,1.873,17,1.771,19,2.044,21,0.196,23,0.245,29,2.515,57,0.377,59,0.99,65,0.844,93,2.012,105,2.637,106,1.654,107,1.532,108,2.012,109,0.321,128,4.853,129,4.378,130,2.303,134,2.002,135,2.916,137,6.963,141,2.231,143,5.164,169,5.658,170,2.905,171,1.547,172,5.164,173,5.804,174,5.757,175,4.853]],["t/16",[6,0.018,7,0.198,8,0.204,9,0.216,10,0.216,11,0.21,12,0.235,14,0.229,21,0.198,23,0.246,25,2.784,57,0.456,59,1.105,93,2.041,97,4.078,104,5.656,106,1.678,107,1.554,108,2.041,109,0.324,112,3.148,125,5.424,130,2.336,134,2.158,135,2.467,142,7.062,143,6.243,146,3.148,154,6.56,169,4.787,176,5.637,177,4.662,178,4.342,179,7.824,180,6.186]],["t/18",[1,0.312,6,0.018,7,0.193,8,0.199,9,0.211,10,0.211,11,0.205,12,0.229,13,0.308,14,0.223,21,0.193,23,0.244,25,2.276,32,2.808,40,3.25,41,2.85,57,0.449,59,1.121,88,2.624,93,1.989,96,4.543,106,1.635,107,1.515,108,1.989,109,0.319,134,1.651,135,2.404,141,2.205,169,4.665,171,1.529,175,5.778,178,5.096,181,3.398,182,5.286,183,3.747,184,5.736,185,4.328,186,3.068,187,5.104]],["t/20",[6,0.019,7,0.202,8,0.208,9,0.22,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,21,0.202,23,0.247,57,0.491,58,3.991,59,1.009,65,1.031,93,2.076,106,1.706,107,1.581,108,2.076,109,0.327,134,1.723,135,2.508,141,2.301,171,1.596,178,4.415,187,5.326,188,6.306,189,2.997,190,2.816,191,5.986,192,3.641,193,3.919,194,5.326]],["t/22",[6,0.019,7,0.201,8,0.207,9,0.219,10,0.219,11,0.213,12,0.237,13,0.32,14,0.231,16,1.902,21,0.201,23,0.247,25,2.804,57,0.459,59,0.848,93,2.066,104,5.332,106,1.698,107,1.573,108,2.066,109,0.326,134,1.714,135,2.496,141,2.29,171,1.588,186,3.78,188,5.3,193,3.9,194,6.288,195,2.944,196,4.211,197,5.957,198,4.06,199,5.133]],["t/24",[6,0.019,7,0.2,8,0.206,9,0.218,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,21,0.2,23,0.246,29,2.569,57,0.489,59,1.003,65,1.025,93,2.056,106,1.69,107,1.565,108,2.056,109,0.325,131,5.108,133,6.608,134,1.706,135,2.484,141,2.279,171,1.58,175,4.958,178,4.373,187,6.27,188,5.275,193,4.923,200,2.894,201,5.929,202,2.858,203,7.88,204,7.88]],["t/26",[6,0.018,7,0.197,8,0.203,9,0.215,10,0.215,11,0.209,12,0.234,13,0.315,14,0.227,16,1.883,19,2.052,21,0.197,23,0.245,25,2.777,57,0.504,59,0.834,69,2.971,93,2.031,105,2.647,106,1.67,107,1.547,108,2.031,109,0.323,134,1.686,135,2.455,141,2.252,171,1.562,186,4.002,194,5.213,198,4.299,199,6.028,205,2.896,206,5.611,207,5.213]],["t/28",[0,0.288,6,0.018,7,0.193,8,0.199,9,0.211,10,0.211,11,0.205,12,0.229,13,0.308,14,0.223,21,0.193,23,0.244,25,2.276,37,3.027,39,2.692,57,0.52,65,1.005,80,3.155,93,1.989,99,2.228,106,1.635,107,1.515,108,1.989,109,0.319,134,1.988,135,2.404,141,2.205,171,1.529,208,5.953,209,5.286,210,4.942,211,6.028,212,5.778,213,4.444,214,4.884,215,2.486,216,4.797,217,4.665,218,5.104]],["t/30",[1,0.267,6,0.019,7,0.199,8,0.205,9,0.217,10,0.217,11,0.211,12,0.236,13,0.318,14,0.23,16,2.022,21,0.199,23,0.246,25,2.347,32,2.567,53,3.616,57,0.457,59,0.842,62,4.269,67,2.183,82,4.569,93,2.051,106,1.686,107,1.562,108,2.051,109,0.325,134,1.702,135,2.478,141,2.273,171,1.577,186,3.164,198,3.398,199,5.096,207,6.261,218,5.262,219,5.915,220,3.253]],["t/32",[6,0.017,7,0.181,8,0.187,9,0.198,10,0.198,11,0.192,12,0.214,13,0.289,14,0.209,16,1.939,17,1.898,21,0.181,23,0.238,53,3.287,57,0.489,59,0.765,93,1.864,99,2.088,106,1.532,107,1.419,108,1.864,109,0.307,134,1.911,135,2.252,141,2.066,171,1.433,174,4.153,185,5.436,207,4.782,208,4.631,211,5.648,212,5.553,213,3.457,214,5.32,215,2.33,218,5.908,221,3.799,222,5.375,223,5.375,224,4.371,225,6.901,226,3.457,227,3.162,228,4.198,229,6.64,230,5.991,231,5.991,232,4.257,233,5.13,234,4.371,235,3.043,236,8.645,237,5.991,238,6.449,239,4.631,240,4.631,241,4.782,242,5.375]],["t/34",[0,0.28,6,0.017,7,0.181,8,0.186,9,0.197,10,0.197,11,0.192,12,0.214,13,0.288,14,0.208,16,2.08,17,1.788,21,0.181,23,0.238,25,2.128,32,1.957,37,2.83,39,2.531,56,3.644,57,0.512,93,1.86,99,2.796,106,1.529,107,1.416,108,1.86,109,0.306,130,2.631,134,1.544,135,2.248,138,6.32,141,2.061,144,2.175,146,2.406,151,5.636,154,7.391,171,1.43,208,4.621,217,5.393,220,3.959,227,3.158,234,4.361,243,4.621,244,7.391,245,6.435,246,4.621,247,4.361,248,3.237,249,5.636,250,5.363,251,4.942,252,7.129,253,7.129,254,3.128,255,4.772]],["t/36",[0,0.232,6,0.019,7,0.201,8,0.207,9,0.22,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.201,23,0.247,37,3.151,39,2.538,57,0.46,93,2.071,99,2.32,106,1.702,107,1.577,108,2.071,109,0.327,134,1.719,135,2.502,141,2.295,171,1.592,186,4.034,198,4.333,217,4.856,255,6.297,256,5.502,257,5.972,258,4.73]],["t/38",[0,0.325,1,0.243,6,0.017,7,0.181,8,0.187,9,0.198,10,0.198,11,0.192,12,0.214,13,0.289,14,0.209,21,0.181,23,0.228,24,3.496,28,2.657,57,0.532,65,0.966,70,2.875,93,1.864,99,2.924,106,1.532,107,1.419,108,1.864,109,0.307,134,1.547,135,2.252,141,2.066,171,1.433,255,4.782,258,5.26,259,4.631,260,4.079,261,5.093,262,4.555,263,4.992,264,4.257]],["t/40",[0,0.316,1,0.308,6,0.018,7,0.189,8,0.195,9,0.207,10,0.207,11,0.201,12,0.224,13,0.302,14,0.218,16,1.836,17,1.933,21,0.189,23,0.216,28,2.777,57,0.365,58,3.746,60,1.747,93,1.948,99,2.183,106,1.602,107,2.018,108,1.948,109,0.315,134,1.617,135,2.355,141,2.16,171,1.498,214,4.823,220,3.091,233,4.341,258,4.451,264,5.405,265,3.746,266,4.699,267,6.741,268,5.271,269,4.239,270,3.006,271,3.746,272,6.263,273,4.569,274,7.469,275,7.469,276,4.341]],["t/42",[0,0.319,1,0.332,3,2.313,4,2.731,6,0.016,7,0.215,8,0.221,9,0.185,10,0.185,11,0.18,12,0.201,13,0.271,14,0.196,16,1.716,21,0.17,23,0.16,26,0.405,32,1.837,57,0.512,65,1.017,93,1.746,99,2.476,100,3.989,106,1.436,107,1.683,108,1.746,109,0.294,129,3.799,134,2.013,135,2.11,141,1.936,150,2.622,153,3.836,166,3.422,171,1.342,173,5.036,185,3.799,192,3.981,202,2.428,210,5.493,216,4.211,220,2.77,228,4.03,235,2.851,248,2.458,270,3.933,276,3.891,277,4.702,278,3.183,279,3.714,280,4.144,281,4.339,282,3.489,283,4.64,284,5.036,285,3.799,286,4.481,287,4.339,288,5.292,289,5.036,290,5.292,291,3.891,292,4.211,293,6.042,294,6.694,295,1.463,296,5.613,297,5.613,298,6.042,299,6.042,300,3.325,301,3.714]],["t/44",[0,0.325,1,0.338,3,2.437,6,0.017,7,0.179,8,0.184,9,0.195,10,0.195,11,0.19,12,0.212,13,0.285,14,0.206,16,1.928,18,3.94,21,0.179,23,0.168,26,0.427,40,3.284,41,2.961,57,0.523,59,0.755,65,1.042,93,1.84,99,2.783,105,2.651,106,1.512,107,1.401,108,1.84,109,0.304,130,2.105,134,1.896,135,2.223,141,2.039,171,1.414,265,3.538,277,3.913,292,4.437,295,2.239,301,4.859,302,4.203,303,2.918,304,7.052,305,4.203,306,3.676,307,4.003]],["t/46",[0,0.318,1,0.326,6,0.017,7,0.183,8,0.188,9,0.199,10,0.199,11,0.194,12,0.216,13,0.292,14,0.211,16,1.459,21,0.183,23,0.172,28,2.68,57,0.525,65,0.971,88,2.793,93,1.88,99,2.593,106,1.546,107,1.432,108,1.88,109,0.308,134,1.561,135,2.272,141,2.084,159,3.913,166,3.684,168,4.996,171,1.445,190,2.551,210,5.752,224,4.409,260,4.095,264,4.295,276,5.158,277,3.999,308,4.534,309,4.939,310,3.615,311,4.672,312,7.441,313,5.422,314,7.207,315,2.9,316,5.193,317,5.193]],["t/48",[0,0.325,1,0.333,3,2.341,6,0.016,7,0.172,8,0.177,9,0.187,10,0.187,11,0.182,12,0.203,13,0.274,14,0.198,16,1.988,18,3.869,21,0.172,23,0.161,26,0.41,32,2.778,40,3.084,41,2.839,44,3.815,57,0.527,65,1.131,77,2.045,88,2.613,92,4.365,93,1.768,99,2.869,106,1.453,107,1.346,108,1.768,109,0.297,130,2.023,134,1.849,135,2.136,141,1.96,171,1.359,205,2.52,292,4.263,295,2.259,301,3.76,303,2.804,306,3.532,307,4.847,318,3.939,319,4.146,320,4.146,321,6.117,322,3.939]],["t/50",[0,0.323,1,0.342,6,0.017,7,0.185,8,0.191,9,0.202,10,0.202,11,0.196,12,0.219,13,0.295,14,0.213,21,0.185,23,0.174,26,0.442,40,2.409,41,2.112,57,0.506,59,0.782,65,1.103,93,1.905,99,2.134,106,1.566,107,1.451,108,1.905,109,0.311,112,2.939,130,2.18,134,2.094,135,2.821,141,2.112,144,2.228,171,1.465,215,2.381,270,2.939,292,4.594,295,2.114,300,2.409,303,3.022,307,4.145,322,5.2,323,4.594,324,4.051,325,2.523,326,4.594,327,2.899,328,3.306,329,4.594]],["t/52",[0,0.321,1,0.344,6,0.017,7,0.188,8,0.193,9,0.205,10,0.205,11,0.199,12,0.222,13,0.299,14,0.216,20,3.424,21,0.188,23,0.176,26,0.448,29,2.413,57,0.508,59,0.966,65,1.065,93,1.931,99,2.163,106,1.587,107,1.47,108,1.931,109,0.313,112,2.978,130,2.21,134,2.107,135,2.844,141,2.14,171,1.484,215,2.413,292,4.656,295,2.127,303,3.063,315,2.978,322,4.302,325,2.557,329,5.675,330,4.955,331,2.788,332,3.199,333,4.656]],["t/54",[0,0.318,1,0.335,5,0.828,6,0.016,7,0.174,8,0.18,9,0.19,10,0.19,11,0.185,12,0.206,13,0.278,14,0.201,19,2.172,21,0.174,22,0.872,23,0.164,26,0.416,40,2.842,41,2.722,46,1.776,57,0.52,59,0.923,65,0.943,93,1.794,99,2.519,106,1.475,107,1.366,108,1.794,109,0.299,116,3.215,122,2.433,130,2.053,134,2.038,135,2.717,141,1.988,146,2.321,152,4.326,153,3.113,170,2.59,215,2.242,248,2.525,292,4.326,295,2.058,303,2.845,325,2.376,334,4.68,335,3.903,336,4.03,337,3.903,338,5.609,339,4.097,340,4.326,341,5.173,342,4.457,343,4.767,344,4.767,345,4.954,346,5.136,347,6.206,348,4.603,349,3.996,350,3.996,351,3.996,352,3.815,353,3.996]],["t/56",[0,0.318,1,0.332,5,0.904,6,0.018,7,0.19,8,0.196,9,0.208,10,0.208,11,0.202,12,0.225,13,0.303,14,0.219,21,0.19,23,0.179,26,0.454,29,2.446,42,3.939,50,3.243,57,0.479,59,0.803,65,0.995,93,1.957,99,2.193,106,1.609,107,1.49,108,1.957,109,0.316,130,2.24,134,2.119,135,2.867,141,2.17,170,2.826,215,2.446,292,4.72,295,1.988,303,3.105,325,2.592,333,4.72,334,4.074,353,5.286,354,4.59,355,4.72,356,3.695,357,3.764]],["t/58",[0,0.316,1,0.346,5,0.912,6,0.018,7,0.192,8,0.198,9,0.209,10,0.209,11,0.204,12,0.227,13,0.306,14,0.221,16,1.533,17,1.869,21,0.192,22,0.96,23,0.18,26,0.458,57,0.37,60,1.772,65,1.001,93,1.975,99,2.213,106,1.624,107,1.504,108,1.975,109,0.318,130,2.261,134,1.98,135,2.883,141,2.19,146,2.556,181,3.374,213,3.664,215,2.469,295,1.655,303,3.133,325,2.616,352,4.202,358,5.315,359,3.729,360,4.632,361,6.835,362,3.133,363,4.401]],["t/60",[0,0.317,1,0.33,4,3.02,6,0.017,7,0.188,8,0.193,9,0.205,10,0.205,11,0.199,12,0.222,13,0.299,14,0.216,21,0.188,23,0.176,26,0.448,39,2.706,43,2.413,57,0.495,59,0.792,65,0.81,93,1.931,99,2.163,106,1.587,107,1.47,108,1.931,109,0.313,112,2.978,130,2.21,134,2.107,135,2.844,141,2.14,171,1.484,215,2.413,220,4.026,292,4.656,295,1.972,303,3.063,325,2.557,329,4.656,333,5.675,353,4.302,356,4.443,364,4.955,365,5.243,366,6.206]],["t/62",[0,0.327,1,0.365,5,0.831,6,0.016,7,0.175,8,0.18,9,0.191,10,0.191,11,0.186,12,0.207,13,0.279,14,0.202,21,0.175,22,0.876,23,0.206,39,2.187,57,0.338,59,0.739,65,0.756,93,1.801,99,2.018,106,1.481,107,1.372,108,1.801,109,0.3,130,2.061,134,1.871,135,2.724,141,1.997,170,2.6,186,2.778,190,2.444,198,2.984,215,3.318,239,5.601,303,2.857,315,3.795,325,3.516,331,3.552,334,3.749,352,4.795,358,4.013,367,4.114,368,5.304,369,5.144]],["t/64",[0,0.316,1,0.346,5,0.908,6,0.018,7,0.191,8,0.197,9,0.208,10,0.208,11,0.203,12,0.226,13,0.305,14,0.22,16,1.526,17,1.866,21,0.191,22,0.956,23,0.18,26,0.456,57,0.369,60,1.763,93,1.966,99,2.203,106,1.616,107,1.497,108,1.966,109,0.317,130,2.25,134,1.975,135,2.875,141,2.18,181,3.359,214,4.008,215,2.458,220,3.119,295,1.648,303,3.119,325,2.604,358,4.381,362,3.119,363,5.301,366,6.32,370,3.075,371,4.742,372,7.537,373,6.803,374,7.537,375,6.32,376,4.381]],["t/66",[0,0.316,1,0.346,5,0.906,6,0.018,7,0.191,8,0.196,9,0.208,10,0.208,11,0.202,12,0.226,13,0.304,14,0.22,21,0.191,22,0.954,23,0.179,57,0.445,88,2.822,91,2.869,93,1.962,99,2.198,106,1.613,107,1.494,108,1.962,109,0.316,116,3.517,130,2.245,134,1.972,135,2.871,141,2.175,181,3.351,186,3.665,198,3.937,215,2.452,260,3.203,303,3.112,309,3.459,325,2.598,363,4.371,376,5.293,377,4.731,378,3.999,379,4.731,380,7.52,381,7.52,382,3.772]],["t/68",[0,0.313,1,0.329,5,0.788,6,0.015,7,0.166,8,0.218,9,0.181,10,0.181,11,0.176,12,0.196,13,0.265,14,0.191,19,1.724,21,0.166,22,0.83,23,0.156,46,1.691,48,3.473,57,0.52,59,0.701,65,0.914,67,2.012,75,2.404,93,1.708,99,2.833,105,2.45,106,1.404,107,1.301,108,1.708,109,0.29,114,3.362,122,2.317,130,1.955,134,1.809,135,2.634,141,1.893,146,2.21,152,4.119,153,3.782,200,2.404,213,3.168,215,2.135,216,4.119,220,3.808,228,3.114,248,3.379,281,4.244,283,4.539,287,4.244,303,3.457,325,2.262,336,3.907,337,3.716,338,5.968,339,3.901,340,4.119,341,4.926,342,4.244,343,4.539,344,4.539,345,4.717,346,4.979,347,5.91,348,4.383,376,3.805,382,4.191,383,3.412,384,3.161,385,7.006,386,7.006,387,4.119,388,2.317,389,2.709,390,2.184,391,2.709,392,2.345,393,2.964]],["t/70",[0,0.314,1,0.338,5,0.773,6,0.015,7,0.163,8,0.215,9,0.178,10,0.178,11,0.173,12,0.193,13,0.26,14,0.188,17,1.78,19,1.986,21,0.163,22,0.814,23,0.153,46,1.658,56,4.217,57,0.498,59,0.687,60,1.502,65,0.903,72,3.49,73,2.357,93,1.675,94,3.463,99,2.909,105,2.562,106,1.377,107,1.275,108,1.675,109,0.287,130,1.917,133,5.383,134,1.787,135,2.601,141,1.856,144,1.958,153,2.906,186,3.32,200,2.357,202,2.328,215,2.093,216,4.039,220,2.656,225,4.625,228,3.053,248,2.357,281,4.161,283,4.45,287,4.161,303,3.414,325,2.218,344,5.72,378,4.388,382,3.22,384,2.973,387,4.039,389,2.656,390,2.142,391,2.656,392,2.3,393,3.735,394,2.817,395,7.447,396,6.208,397,3.731,398,6.934,399,5.945,400,4.139,401,3.992,402,3.825,403,3.002,404,6.918,405,6.419,406,6.419,407,6.419,408,3.053,409,3.053,410,3.053,411,3.053,412,3.346]],["t/72",[0,0.319,1,0.326,5,0.767,6,0.015,7,0.161,8,0.166,9,0.176,10,0.176,11,0.171,12,0.191,13,0.258,14,0.186,21,0.161,22,0.808,23,0.152,25,1.902,32,1.749,57,0.486,59,0.682,65,0.898,67,2.098,93,1.662,99,3.023,100,3.796,106,1.366,107,1.265,108,1.662,109,0.285,130,1.902,134,1.778,135,2.588,141,1.842,153,3.716,156,5.495,158,5.495,160,5.495,162,5.495,166,3.256,189,2.399,215,2.962,226,2.495,227,2.282,228,3.029,241,4.264,254,2.795,268,3.702,281,4.129,282,3.32,290,5.036,291,4.772,303,3.397,311,4.129,325,3.139,338,3.796,357,4.981,370,2.599,388,2.254,393,2.884,412,4.279,413,3.256,414,5.076,415,4.981,416,5.299,417,3.897,418,3.32,419,4.366,420,7.41,421,5.341,422,5.165,423,4.416,424,3.897,425,6.37,426,7.471,427,3.535,428,3.535,429,3.535,430,3.616]],["t/74",[0,0.313,1,0.339,5,0.855,6,0.021,7,0.18,8,0.185,9,0.196,10,0.196,11,0.191,12,0.213,13,0.287,14,0.207,19,1.465,21,0.18,22,0.9,23,0.169,26,0.429,33,3.115,39,2.225,43,2.314,57,0.43,59,0.76,67,2.285,93,1.852,99,2.569,106,1.522,107,1.41,108,1.852,109,0.305,119,4.23,130,2.119,134,1.903,135,2.772,141,2.053,146,2.396,155,3.265,189,2.673,192,2.744,196,3.775,215,2.314,226,2.78,227,2.543,228,3.376,303,2.937,315,3.843,325,2.453,331,3.597,336,3.319,378,3.775,388,2.512,400,4.41,412,3.699,430,4.99,431,4.343,432,5.612,433,3.628,434,7.098,435,5.952,436,7.098,437,7.098,438,6.407,439,5.34,440,7.098,441,7.098,442,4.126]],["t/76",[0,0.314,1,0.347,5,0.918,6,0.018,7,0.193,8,0.199,9,0.211,10,0.211,11,0.205,12,0.229,13,0.308,14,0.223,21,0.193,22,0.967,23,0.182,57,0.373,59,0.816,93,1.989,99,2.228,106,1.635,107,1.515,108,1.989,109,0.319,130,2.276,134,1.988,135,2.895,141,2.205,189,2.872,215,2.486,300,3.25,303,3.155,324,3.597,325,2.634,327,3.027,328,4.631,430,4.328,442,5.338,443,4.665,444,4.797,445,7.624,446,7.624,447,4.328]],["t/78",[0,0.315,1,0.343,5,0.885,6,0.017,7,0.186,8,0.192,9,0.203,10,0.203,11,0.198,12,0.22,13,0.297,14,0.215,17,1.853,21,0.186,22,0.932,23,0.175,54,3.758,57,0.439,59,0.787,60,1.72,67,2.305,93,1.918,99,2.625,106,1.577,107,1.46,108,1.918,109,0.312,130,2.195,134,1.945,135,2.832,141,2.126,153,3.328,183,3,189,2.769,215,2.397,303,3.042,325,2.54,362,3.042,388,2.602,419,3.91,442,4.273,447,5.099,448,4.381,449,4.498,450,6.636,451,7.352,452,6.165,453,7.352,454,5.812,455,7.352,456,6.636,457,7.352]],["t/80",[0,0.323,1,0.339,5,0.853,6,0.017,7,0.18,8,0.185,9,0.196,10,0.196,11,0.19,12,0.212,13,0.286,14,0.207,17,1.784,20,2.336,21,0.18,22,0.898,23,0.169,48,3.573,49,3.017,57,0.467,59,0.758,60,1.657,93,1.848,99,3.127,105,1.886,106,1.519,107,1.407,108,1.848,109,0.305,130,2.115,134,1.901,135,2.768,141,2.048,183,2.89,198,3.062,214,3.766,215,2.309,221,3.766,270,2.85,291,4.117,300,3.289,303,2.931,315,2.85,325,2.447,328,3.206,331,2.668,397,4.117,403,3.312,458,4.983,459,4.333,460,4.333,461,4.591,462,7.083,463,6.393,464,7.083,465,3.691]],["t/82",[0,0.315,1,0.324,5,0.677,6,0.013,8,0.147,9,0.155,10,0.155,11,0.151,12,0.169,13,0.227,14,0.164,17,1.756,20,2.817,21,0.142,22,0.713,23,0.134,39,1.423,43,1.832,57,0.527,59,0.602,60,1.315,63,1.527,65,0.615,72,2.038,73,2.063,93,1.466,99,2.981,105,2.432,106,1.205,107,1.815,108,1.466,109,0.263,122,3.755,130,1.678,131,3.642,134,1.637,135,2.383,141,1.625,146,3.581,183,3.084,205,2.09,215,1.832,224,3.438,228,5.215,270,3.042,271,3.792,280,2.504,282,5.117,300,3.364,303,2.325,315,3.042,324,2.201,325,1.942,327,2.231,328,3.422,331,2.847,332,2.429,338,3.348,362,4.063,369,2.672,384,1.832,390,1.875,392,2.013,397,4.393,402,3.348,403,3.535,447,3.189,458,3.189,460,6.007,466,2.585,467,2.293,468,5.619,469,3.895,470,5.619,471,4.228,472,4.712,473,5.619,474,9.818,475,5.687,476,5.619,477,5.619,478,5.619,479,2.672]],["t/84",[0,0.315,1,0.339,5,0.855,6,0.017,7,0.18,8,0.185,9,0.196,10,0.196,11,0.191,12,0.213,13,0.287,14,0.207,17,1.869,21,0.18,22,0.9,23,0.169,57,0.488,59,0.76,60,1.661,67,2.243,93,1.852,99,2.791,106,1.522,107,1.41,108,1.852,109,0.305,130,2.119,134,1.903,135,2.772,141,2.053,165,5.952,195,2.639,214,3.775,215,2.314,300,2.899,303,2.937,325,2.453,384,3.254,388,2.512,390,2.368,403,4.111,458,4.029,460,4.343,463,6.407,465,4.582,469,4.921,480,3.561,481,3.939,482,4.751,483,4.33,484,2.979,485,7.098,486,7.098,487,4.029,488,7.098,489,7.098,490,7.098,491,4.029]],["t/86",[0,0.315,1,0.344,5,0.891,6,0.017,7,0.188,8,0.193,9,0.205,10,0.205,11,0.199,12,0.222,13,0.299,14,0.216,17,1.857,21,0.188,22,0.939,23,0.176,57,0.476,59,0.792,60,1.732,70,2.978,93,1.931,99,2.636,106,1.587,107,1.47,108,1.931,109,0.313,130,2.21,134,1.953,135,2.844,141,2.14,195,2.752,215,2.413,260,3.152,303,3.063,309,4.776,325,2.557,460,4.528,465,3.858,491,5.12,492,4.528,493,7.401,494,5.852,495,7.563,496,7.401,497,4.798,498,7.401,499,4.528,500,3.713]],["t/88",[0,0.317,1,0.334,5,0.819,6,0.016,7,0.173,8,0.178,9,0.188,10,0.188,11,0.183,12,0.204,13,0.275,14,0.199,19,2.192,21,0.173,22,0.863,23,0.162,32,2.699,35,3.032,46,1.757,47,2.53,57,0.481,59,0.729,65,0.937,77,2.967,78,3.182,85,3.695,88,2.617,91,2.596,93,1.775,99,2.961,106,1.459,107,1.352,108,1.775,109,0.298,114,2.738,122,2.408,130,2.031,134,1.854,135,2.699,141,1.968,146,2.297,166,3.478,190,2.408,192,3.8,195,2.53,215,2.219,254,2.986,303,3.543,325,2.351,338,4.055,362,2.816,378,4.553,471,5.119,491,3.862,500,4.295,501,3.478,502,5.38,503,4.281,504,2.898,505,6.804,506,6.804,507,6.142,508,6.804,509,6.142,510,6.804,511,6.804,512,3.618]],["t/90",[0,0.309,1,0.344,5,0.895,6,0.018,7,0.188,8,0.194,9,0.206,10,0.206,11,0.2,12,0.223,13,0.301,14,0.217,21,0.188,22,0.943,23,0.177,59,0.796,65,0.99,69,2.837,77,3.137,82,4.321,83,2.951,84,4.678,85,4.911,86,4.22,87,5.081,88,2.595,89,4.321,90,4.321,91,2.837,92,4.623,93,1.94,106,1.594,107,1.477,108,1.94,109,0.314,130,2.22,134,1.958,135,2.852,141,2.15,202,2.696,215,2.424,303,3.743,325,2.569,378,3.954,500,3.73,502,5.878,503,4.678,513,7.435,514,7.435]],["t/92",[0,0.313,1,0.346,5,0.906,6,0.018,7,0.191,8,0.196,9,0.208,10,0.208,11,0.202,12,0.226,13,0.304,14,0.22,17,1.821,21,0.191,22,0.954,23,0.179,32,2.064,57,0.445,59,0.805,60,1.759,65,0.997,69,2.869,74,4.268,79,5.427,80,3.112,81,4.874,82,4.371,93,1.962,99,2.198,106,1.613,107,1.494,108,1.962,109,0.316,130,2.245,134,1.972,135,2.871,141,2.175,146,3.074,215,2.452,225,5.418,227,2.694,233,4.371,303,3.112,325,2.598,418,3.919,515,6.788,516,6.788,517,6.788]],["t/94",[0,0.316,1,0.326,5,0.772,6,0.015,7,0.162,8,0.167,9,0.177,10,0.177,11,0.172,12,0.192,13,0.259,14,0.187,17,1.821,19,2.102,20,3.004,21,0.162,22,0.813,23,0.153,24,2.872,32,1.759,42,3.064,46,1.655,57,0.536,59,0.686,60,1.499,61,3.818,65,0.902,68,4.474,69,2.444,70,2.578,71,3.555,72,3.608,73,2.353,74,3.637,93,1.671,99,2.976,106,1.374,107,1.637,108,1.671,109,0.286,130,2.72,134,1.784,135,2.598,141,1.853,153,4.124,215,2.089,224,3.92,248,2.353,262,3.919,271,3.214,303,2.651,310,3.214,325,2.214,340,4.031,346,3.818,378,3.407,401,3.1,402,3.818,433,3.275,450,5.783,471,4.82,487,3.637,518,5.783,519,5.783,520,6.407,521,5.372,522,5.783,523,6.407,524,6.407,525,4.031,526,6.407,527,6.407,528,5.372,529,5.783,530,5.065,531,6.407,532,6.407,533,5.783,534,5.065,535,6.407]],["t/96",[0,0.313,1,0.314,5,0.697,6,0.014,8,0.151,9,0.16,10,0.16,11,0.156,12,0.174,13,0.234,14,0.169,17,1.722,20,3.049,21,0.147,22,0.734,23,0.138,24,3.122,31,4.431,48,3.547,52,3.449,53,2.662,57,0.536,59,0.62,60,1.354,61,4.594,62,3.142,63,1.572,64,3.016,65,1.084,66,5.596,67,2.165,68,3.142,93,1.51,99,2.954,106,1.241,107,1.15,108,1.51,109,0.268,114,3.102,130,2.302,134,1.669,135,2.431,141,2.229,166,2.958,184,4.354,185,3.285,214,3.077,215,1.887,220,3.587,224,3.541,228,2.752,234,4.717,235,3.692,248,2.125,254,4.057,260,2.465,261,3.077,262,2.752,263,3.016,271,3.867,291,3.364,297,4.853,303,3.19,311,3.751,315,2.329,325,2,362,3.825,467,2.361,469,4.012,495,4.853,504,3.283,521,4.853,536,4.575,537,6.959,538,3.641,539,5.224,540,5.224,541,4.853,542,4.575,543,3.641,544,4.17,545,3.364,546,4.575,547,3.874,548,5.619,549,5.8,550,6.955,551,9.245,552,5.787,553,5.787,554,5.787,555,4.012,556,5.787,557,4.575,558,5.787]],["t/98",[0,0.314,1,0.348,5,0.92,6,0.018,7,0.194,8,0.2,9,0.211,10,0.211,11,0.205,12,0.229,13,0.309,14,0.223,19,2.113,21,0.194,22,0.969,23,0.182,46,1.974,47,2.842,59,0.818,65,0.836,69,2.916,77,2.977,79,4.554,82,5.345,83,3.034,84,4.808,85,4.15,93,1.994,99,2.233,106,1.639,107,1.518,108,1.994,109,0.32,130,2.282,134,1.991,135,2.899,141,2.21,215,2.492,303,3.162,325,2.641,559,6.042,560,7.642]],["t/100",[0,0.311,1,0.342,5,0.879,6,0.017,7,0.185,8,0.191,9,0.202,10,0.202,11,0.196,12,0.219,13,0.295,14,0.213,17,1.306,21,0.185,22,0.926,23,0.174,24,3.318,36,3.415,52,5.331,53,3.36,54,3.733,55,4.734,56,4.573,57,0.521,58,4.488,59,0.782,60,1.709,61,4.352,93,1.905,99,2.134,106,1.566,107,1.451,108,1.905,109,0.311,130,2.18,134,1.937,135,2.821,141,2.112,177,4.352,215,2.381,260,3.11,261,3.884,262,3.473,263,3.806,303,3.022,325,2.523,362,4.171,561,7.263]],["t/102",[0,0.308,1,0.33,5,0.795,6,0.016,7,0.167,8,0.172,9,0.183,10,0.183,11,0.177,12,0.198,13,0.267,14,0.193,16,1.336,19,1.733,21,0.167,22,0.837,23,0.157,24,3.328,25,2.507,27,3.662,29,2.152,33,2.896,36,3.927,37,2.62,38,2.988,39,2.461,40,3.046,41,2.671,42,3.616,43,2.152,44,2.693,45,3.251,46,1.705,47,2.454,48,3.009,49,2.811,50,2.853,51,3.251,52,3.933,57,0.491,58,3.311,77,1.992,93,1.722,99,1.929,106,1.415,107,1.311,108,1.722,109,0.292,114,3.38,130,1.97,134,1.818,135,2.648,141,1.908,152,4.152,155,3.036,177,3.933,186,2.656,213,3.193,215,2.152,220,3.475,260,2.811,261,3.51,262,3.139,263,3.44,288,5.218,303,2.731,310,3.311,313,4.965,325,2.28,543,4.152,559,5.218,562,5.218,563,5.957,564,4.278,565,6.6,566,6.6,567,6.6,568,6.6,569,6.6,570,6.6,571,4.038,572,5.957,573,6.6,574,6.6,575,5.218,576,4.575,577,2.518,578,3.51]],["t/104",[0,0.317,1,0.347,5,0.914,6,0.018,7,0.192,8,0.198,9,0.21,10,0.21,11,0.204,12,0.228,13,0.307,14,0.222,19,2.158,21,0.192,22,0.963,23,0.181,46,1.96,47,2.822,59,0.813,68,4.121,69,2.895,74,5.198,75,2.787,76,4.522,77,3.082,78,3.549,79,4.522,93,1.98,99,2.218,106,1.628,107,1.508,108,1.98,109,0.318,130,2.266,134,1.983,135,2.887,141,2.195,215,2.475,303,3.14,325,2.622,495,6.364,579,7.589]],["t/106",[0,0.306,1,0.34,2,3.99,5,0.866,6,0.017,7,0.182,8,0.188,9,0.199,10,0.199,11,0.193,12,0.216,13,0.291,14,0.21,16,1.456,17,1.718,21,0.182,22,0.912,23,0.171,25,2.646,27,4.917,28,2.674,29,2.345,30,3.99,31,5.125,32,2.752,33,3.156,34,4.285,35,3.205,36,3.363,42,3.295,57,0.49,59,0.77,67,1.572,93,1.876,99,2.102,106,1.542,107,1.429,108,1.876,109,0.308,130,2.147,134,1.919,135,2.794,141,2.079,186,2.894,210,4.661,215,2.345,220,2.976,228,3.42,234,4.399,271,3.607,303,2.976,325,2.485,422,4.524,580,4.985,581,3.831,582,7.191,583,7.191,584,7.191,585,4.399,586,5.685,587,7.191]],["t/108",[0,0.299,1,0.324,2,4.872,3,2.447,4,2.89,5,0.853,6,0.017,7,0.18,8,0.185,9,0.196,10,0.196,11,0.19,12,0.212,13,0.286,14,0.207,15,3.62,16,1.434,17,1.784,18,4.242,19,2.058,20,3.381,21,0.18,22,0.898,23,0.169,24,3.008,25,2.621,27,3.93,57,0.511,59,0.94,93,1.848,99,2.07,106,1.519,107,1.407,109,0.246,130,2.115,134,1.901,135,2.768,141,2.048,215,2.309,220,2.931,225,5.103,235,3.017,271,3.553,303,2.931,310,3.553,325,2.447,460,4.333,487,4.02,543,4.456,557,5.6,581,3.062,588,6.393,589,7.083,590,7.083,591,4.456,592,7.083,593,7.083,594,5.939,595,5.939,596,6.393,597,5.939,598,7.083]],["t/110",[0,0.313,1,0.363,5,1.201,6,0.023,7,0.249,8,0.26,9,0.296,10,0.276,11,0.268,12,0.299,13,0.403,14,0.291,17,1.806,19,1.709,20,1.477,21,0.253,22,1.265,23,0.238,26,0.603,32,1.772,35,1.996,39,1.634,43,2.104,46,1.667,47,1.666,48,2.312,49,1.908,54,2.29,57,0.447,59,1.068,60,2.139,63,1.217,65,0.706,67,2.06,70,1.803,72,2.744,73,2.37,77,1.352,78,2.095,88,1.718,91,1.709,93,1.169,94,2.709,105,2.014,108,1.169,144,1.366,183,2.633,189,3.118,190,1.585,192,2.495,195,2.814,196,2.382,200,1.645,205,1.666,221,2.382,280,1.996,300,2.129,309,2.969,315,1.803,324,2.528,327,2.562,328,2.922,331,1.687,332,1.936,370,1.828,384,2.7,388,2.93,389,1.853,390,2.524,391,1.853,392,2.312,393,2.922,394,1.966,403,2.095,408,2.13,409,2.13,410,2.13,411,2.13,412,3.364,413,2.29,414,3.299,415,3.238,416,3.364,427,2.486,428,2.486,429,2.486,430,3.663,431,2.74,442,3.751,443,2.74,444,2.818,447,3.663,448,2.669,458,3.663,459,2.74,465,3.364,466,2.061,467,1.828,479,2.13,480,2.247,481,2.486,491,3.663,492,2.74,499,2.74,500,3.238,501,2.29,512,2.382]],["t/112",[0,0.324,1,0.362,4,1.823,5,1.134,6,0.023,7,0.253,8,0.26,9,0.296,10,0.276,11,0.268,12,0.299,13,0.403,14,0.291,16,1.304,17,1.633,19,1.707,20,2.124,21,0.253,22,1.158,23,0.24,26,0.639,29,2.1,39,2.219,41,1.292,42,2.809,43,1.457,46,1.664,50,1.931,57,0.48,59,0.809,60,1.507,65,0.959,67,0.977,75,1.64,88,2.011,91,1.704,93,1.165,94,2.704,105,1.189,108,1.165,112,3.04,116,3.012,144,1.363,170,2.845,171,1.515,181,3.367,186,1.798,190,1.581,198,1.931,200,1.64,215,2.1,220,1.848,270,1.798,295,2.058,300,1.473,315,1.798,322,3.744,323,2.81,324,2.523,325,2.226,326,2.81,327,1.773,328,2.022,329,4.053,330,2.99,331,1.682,332,1.931,333,4.053,334,3.498,335,2.536,349,2.596,350,2.596,351,2.596,352,3.574,353,3.744,354,2.733,355,2.81,356,3.173,357,2.241,358,3.744,359,2.2,360,2.733,363,3.744,364,2.99,365,2.596,367,2.662,368,4.31,369,4.169,370,1.823,371,2.81,376,3.744,377,2.81,382,3.231,383,2.328,384,2.1,388,1.581,389,1.848,390,1.49,391,1.848,392,1.6]],["t/114",[0,0.326,1,0.327,3,2.616,4,1.83,6,0.023,7,0.256,8,0.261,9,0.295,10,0.276,11,0.268,12,0.299,13,0.403,14,0.291,16,1.908,17,1.725,18,2.673,21,0.253,23,0.249,24,2.883,25,1.929,26,0.617,28,2.816,32,1.773,37,3.006,39,2.315,40,2.131,41,2.396,44,2.636,53,2.063,57,0.48,60,1.049,65,0.961,70,1.805,77,1.354,80,1.856,88,2.435,93,1.17,94,2.712,99,1.311,105,1.194,107,0.891,108,1.17,129,2.546,134,0.971,135,1.414,138,2.673,141,1.297,144,1.368,171,2,186,3.047,190,1.587,192,1.734,198,3.273,202,1.627,205,1.668,208,4.188,209,3.109,214,2.385,217,3.952,218,4.325,221,2.385,222,3.375,223,3.375,233,2.607,243,2.907,255,4.325,256,3.109,257,3.375,258,3.85,259,2.907,260,3.225,261,2.385,262,2.133,263,2.338,264,3.85,265,3.241,266,2.822,270,3.047,276,3.755,277,3.585,278,2.133,279,2.489,295,1.412,300,2.896,301,3.585,302,2.673,305,2.673,306,3.367,307,3.667,308,2.822,309,4.039,318,2.607,319,2.744,320,2.744]],["t/116",[3,3.112,6,0.023,7,0.246,8,0.254,9,0.292,10,0.269,11,0.261,12,0.291,14,0.284,21,0.246,23,0.251,26,0.612,57,0.475,58,3.704,88,1.966,94,3.1,95,6.244,96,4.401,97,5.066,98,4.401,99,2.632,100,4.401,108,1.927,110,6.244,111,6.49,112,2.972,113,4.787,114,2.972,116,3.454,117,5.839,118,5.839,119,4.401,120,4.01,121,4.787,122,2.614,123,5.839,124,5.321]],["t/118",[1,0.177,6,0.024,7,0.261,8,0.269,9,0.301,10,0.285,11,0.277,12,0.309,13,0.405,14,0.301,16,1.663,17,0.932,19,1.482,21,0.261,23,0.259,25,2.452,26,0.623,29,2.341,32,1.971,40,1.718,41,1.507,53,2.397,57,0.433,58,2.613,59,1.073,62,2.829,65,0.786,67,1.139,69,1.988,88,1.387,93,1.359,94,3.014,96,3.105,97,4.281,98,3.105,99,1.523,104,4.075,105,1.911,108,1.359,112,3.306,115,4.977,125,4.977,126,3.754,127,4.119,128,4.517,134,1.128,143,4.806,144,1.589,145,3.754,146,2.423,147,2.014,148,3.754,169,4.392,170,1.962,171,1.973,172,3.487,174,3.028,175,4.517,176,3.754,177,3.105,178,4.913,181,2.322,182,3.612,183,2.126,186,3.306,187,4.806,188,4.806,189,1.962,190,1.844,191,3.92,193,4.046,194,4.806,195,1.937,196,2.77,197,3.92,198,3.551,199,4.654,200,1.913,201,3.92,205,1.937,206,3.754,207,4.806,219,3.92]],["t/120",[0,0.325,17,1.509,21,0.139,22,0.696,23,0.131,40,2.453,260,2.337,261,2.918,262,2.61,263,2.86,270,2.208,300,2.453,309,3.422,328,2.484,368,3.877,599,4.954,600,5.488,601,5.488,602,4.954,603,5.488,604,5.488,605,4.954,606,9.456,607,7.439,608,7.439,609,8.439,610,5.488,611,5.488,612,5.488,613,5.488,614,8.439,615,5.488,616,5.488,617,5.488,618,7.439,619,5.488,620,5.488,621,8.439,622,7.439,623,7.439,624,5.488,625,5.488,626,5.488,627,5.488,628,5.488,629,5.488,630,5.488,631,5.488,632,5.488,633,5.488,634,5.488,635,5.488,636,5.488,637,5.488,638,5.488,639,5.488,640,5.488,641,5.488,642,5.488,643,5.488,644,5.488,645,5.488,646,5.488,647,5.488,648,5.488,649,5.488,650,5.488,651,5.488,652,5.488,653,5.488,654,5.488,655,5.488,656,5.488,657,5.488,658,5.488,659,5.488,660,5.488,661,5.488,662,5.488,663,5.488,664,5.488,665,4.339,666,5.488,667,4.954,668,7.439,669,5.488,670,5.488,671,5.488,672,5.488,673,4.129,674,4.602,675,5.488,676,5.488,677,5.488,678,4.954,679,5.488,680,5.488,681,5.488,682,5.488,683,5.488,684,4.954,685,5.488,686,5.488,687,5.488,688,5.488,689,5.488,690,5.488,691,5.488,692,5.488,693,5.488,694,5.488,695,3.954,696,5.488,697,5.488,698,5.488,699,5.488,700,4.954,701,5.488,702,5.488,703,4.602,704,5.488,705,5.488,706,5.488,707,5.488,708,5.488,709,5.488,710,5.488,711,5.488,712,5.488,713,5.488,714,5.488,715,5.488,716,5.488,717,5.488,718,5.488,719,5.488,720,5.488,721,5.488,722,5.488,723,5.488,724,5.488,725,5.488,726,5.488,727,5.488,728,5.488,729,5.488,730,5.488,731,5.488,732,5.488,733,5.488,734,5.488,735,5.488,736,5.488,737,5.488,738,5.488,739,5.488,740,5.488,741,5.488,742,5.488,743,5.488,744,5.488,745,5.488,746,5.488,747,5.488,748,5.488,749,5.488,750,5.488,751,5.488,752,5.488,753,5.488,754,5.488,755,5.488,756,5.488,757,5.488,758,5.488,759,5.488,760,5.488,761,5.488,762,5.488]],["t/122",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,109,0.276,189,2.989,370,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,4.719,416,5.225,427,4.404,428,4.404,429,4.404,763,0.658]],["t/124",[6,0.019,7,0.242,8,0.212,9,0.264,10,0.225,11,0.219,12,0.244,14,0.238,21,0.257,23,0.227,25,2.428,26,0.492,57,0.398,59,1.022,97,4.239,104,5.749,109,0.283,112,3.273,134,1.761,143,6.388,146,2.745,176,5.86,177,4.847,178,4.513,763,0.674]],["t/126",[0,0.316,1,0.345,4,2.011,5,1.041,6,0.023,7,0.246,8,0.258,9,0.293,10,0.273,11,0.266,12,0.296,13,0.4,14,0.289,16,1.399,17,1.426,19,1.017,20,1.626,21,0.258,22,1.096,23,0.247,24,2.178,25,2.381,26,0.598,29,1.607,33,2.163,36,3.231,37,3.431,38,2.231,39,2.696,40,1.626,41,1.425,42,2.569,43,2.818,44,2.011,45,2.428,46,1.273,47,1.833,48,1.766,49,2.099,50,2.131,51,2.428,57,0.445,59,0.854,60,1.153,63,1.339,65,0.756,67,1.51,72,1.788,73,1.81,80,2.04,99,1.44,105,1.839,109,0.171,112,1.983,113,3.195,134,1.067,135,1.554,138,2.937,141,1.425,144,1.504,170,1.856,171,1.734,183,2.819,186,3.21,189,1.856,190,1.744,196,2.621,198,3.448,205,1.833,208,4.478,209,3.417,215,2.252,217,4.226,220,2.04,243,3.195,255,4.624,256,3.417,257,3.708,280,2.196,295,1.078,315,2.78,324,1.931,325,2.387,327,1.957,331,2.602,332,2.131,333,4.346,352,3.833,356,2.428,364,3.299,365,2.865,367,2.937,368,4.505,369,4.328,384,1.607,388,1.744,390,1.644,392,1.766,430,3.921,431,3.015,466,2.267,467,2.011,479,2.344,763,0.408]],["t/128",[0,0.314,1,0.364,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.25,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,1.549,17,1.791,18,2.708,19,2.037,20,2.522,21,0.26,22,1.27,23,0.239,24,2.788,25,2.283,26,0.606,27,3.631,28,1.698,29,2.134,30,2.534,31,3.909,32,1.796,33,2.872,34,2.721,35,2.035,36,3.06,37,1.813,38,2.067,39,1.657,40,1.506,41,1.32,42,2.433,43,1.489,44,1.863,45,2.249,46,2.157,47,2.433,48,2.344,49,1.945,50,1.974,51,2.249,52,3.9,53,3.01,54,2.334,55,2.96,56,2.334,57,0.432,58,2.291,59,1.015,60,1.954,61,3.9,62,2.479,63,1.241,64,2.38,65,0.716,66,2.654,67,0.998,68,3.553,69,3.373,70,1.838,71,2.534,72,2.373,73,1.677,74,3.714,75,1.677,76,2.721,77,2.521,78,2.135,79,3.9,80,1.89,81,2.96,82,3.804,83,2.598,84,2.873,85,3.553,86,2.592,87,3.411,88,1.742,89,2.654,90,2.654,91,1.742,92,2.334,93,1.191,94,1.917,109,0.159,763,0.378,764,3.61]],["t/130",[0,0.321,1,0.335,5,0.922,6,0.018,7,0.233,8,0.2,9,0.255,10,0.212,11,0.206,12,0.23,13,0.31,14,0.224,21,0.25,22,0.971,23,0.219,26,0.463,39,2.5,59,0.82,65,0.838,109,0.266,170,2.885,190,2.711,215,3.003,315,3.083,325,3.182,331,2.885,352,5.11,367,4.565,368,5.34,369,4.985,763,0.635]],["t/132",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,109,0.276,189,2.989,370,3.239,388,2.809,412,4.903,413,4.057,414,5.124,415,4.719,416,4.903,427,4.404,428,4.404,429,4.404,763,0.658]],["t/134",[0,0.316,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.414,26,0.478,28,2.937,57,0.386,65,0.864,70,3.179,109,0.274,171,1.584,258,5.589,259,5.12,260,3.995,261,4.201,262,3.757,263,4.117,763,0.655]],["t/136",[0,0.328,1,0.358,3,2.954,4,2.297,6,0.022,7,0.249,8,0.249,9,0.289,10,0.264,11,0.256,12,0.286,13,0.386,14,0.279,16,1.731,18,3.131,20,2.496,21,0.254,23,0.227,26,0.632,29,1.835,32,2.077,40,2.496,41,2.644,44,3.088,57,0.48,65,1,75,2.067,77,1.699,88,2.276,105,1.498,109,0.196,112,3.045,129,3.195,144,1.717,171,1.913,192,2.176,202,2.041,205,2.093,265,2.823,270,3.679,277,4.199,278,2.677,279,3.123,295,1.999,300,3.24,301,4.199,302,3.354,305,3.354,306,3.944,307,4.295,318,3.272,319,3.444,320,3.444,322,4.398,323,3.541,324,2.964,326,3.541,327,2.234,328,2.548,329,4.761,330,3.768,332,2.433,763,0.466]],["t/138",[0,0.316,6,0.019,7,0.238,8,0.207,9,0.26,10,0.219,11,0.213,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.416,26,0.479,28,2.944,57,0.387,65,0.866,70,3.186,109,0.275,171,1.588,258,5.597,259,5.133,260,3.372,261,4.211,262,3.766,263,4.127,763,0.656]],["t/140",[0,0.325,1,0.377,2,2.719,3,3.253,4,3.244,5,1.326,23,0.256,27,2.719,28,3.206,29,3.07,36,2.291,37,3.422,52,2.92,53,3.966,54,3.516,61,2.92,62,3.735,68,2.66,69,3.592,70,3.199,74,2.781,75,2.526,79,2.92,80,2.847,82,2.848,83,2.731,85,2.66,95,3.397,96,4.099,97,5.04,110,3.397,111,3.53,112,3.891,113,3.176,115,3.397,116,3.718,125,3.397,126,3.53,143,3.28,144,2.63,169,2.997,170,3.247,171,2.175,175,3.082,176,3.53,181,3.842,183,1.999,187,3.28,188,3.28,189,3.42,190,3.051,194,3.28,195,3.206,196,3.658,199,3.176,200,2.919,205,2.956,207,3.28,208,3.176,217,2.997,218,3.28,221,3.658,255,3.28,256,3.397,258,2.92,264,2.92,265,3.451,276,2.848,277,2.719,301,2.719,307,2.781,322,2.848,329,3.082,333,3.082,334,2.66,352,2.719,353,2.848,358,2.848,359,2.413,363,2.848,370,2.807,376,2.848,382,2.458,393,2.218,412,2.554,430,2.781,442,2.848,443,2.997,447,2.781,458,2.781,465,2.554,480,2.458,491,2.781,500,2.458]],["t/142",[0,0.316,1,0.318,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,21,0.253,23,0.188,26,0.567,57,0.458,65,0.862,109,0.274,112,3.171,144,2.404,171,1.58,270,3.171,295,1.723,300,3.089,322,5.444,323,4.958,324,3.669,326,4.958,327,3.128,328,4.24,763,0.653]],["t/144",[0,0.326,1,0.338,3,3.021,6,0.021,7,0.222,8,0.228,9,0.275,10,0.242,11,0.235,12,0.262,13,0.354,14,0.255,16,1.77,18,3.618,21,0.252,23,0.208,26,0.602,32,2.4,40,2.884,41,2.959,44,3.568,57,0.344,63,1.912,65,0.77,77,2.124,88,2.533,105,1.873,109,0.245,171,1.754,205,2.617,265,3.53,295,1.912,301,4.852,302,4.194,305,4.194,306,4.557,307,4.963,318,4.09,319,4.305,320,4.305,763,0.583]],["t/146",[0,0.326,1,0.338,3,3.017,6,0.021,7,0.221,8,0.228,9,0.275,10,0.242,11,0.235,12,0.262,13,0.353,14,0.255,16,1.768,18,3.613,21,0.252,23,0.208,26,0.601,32,2.397,40,3.134,41,2.957,44,3.563,57,0.343,63,1.908,65,0.768,77,2.119,88,2.53,105,1.869,109,0.244,171,1.751,205,2.611,265,3.523,295,1.909,301,4.846,302,4.185,305,4.185,306,4.551,307,4.957,318,4.082,319,4.296,320,4.296,763,0.582]],["t/148",[0,0.316,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.414,26,0.478,28,2.937,57,0.386,65,0.864,70,3.179,109,0.274,171,1.584,258,5.589,259,5.12,260,3.364,261,4.988,262,3.757,263,4.117,763,0.655]],["t/150",[0,0.321,1,0.345,5,1.039,6,0.022,7,0.239,8,0.246,9,0.287,10,0.261,11,0.253,12,0.283,13,0.381,14,0.275,16,1.908,17,1.955,21,0.258,22,1.094,23,0.225,26,0.615,28,2.562,60,2.204,107,1.369,109,0.239,171,1.382,181,3.846,214,3.664,233,4.005,264,5.142,265,3.456,266,4.335,295,1.887,358,5.016,359,3.394,360,4.215,363,5.016,370,2.811,371,4.335,763,0.571,765,2.811]],["t/152",[0,0.317,1,0.269,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,16,1.607,17,1.919,21,0.254,23,0.189,26,0.48,28,2.952,60,1.857,107,1.577,109,0.276,171,1.592,214,5.002,233,4.613,264,5.605,265,3.981,266,4.993,763,0.658]],["t/154",[0,0.317,1,0.269,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,16,1.607,17,1.919,21,0.254,23,0.189,26,0.48,28,2.952,60,1.857,107,1.577,109,0.276,171,1.592,214,4.221,233,5.467,264,5.605,265,3.981,266,4.993,763,0.658]],["t/156",[0,0.318,1,0.315,3,2.684,4,3.17,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.233,13,0.314,14,0.227,16,1.573,21,0.252,23,0.185,26,0.562,57,0.38,65,0.85,109,0.27,129,4.41,171,1.558,192,3.003,202,2.817,270,4.142,277,5.153,278,3.695,279,4.311,300,3.522,763,0.644]],["t/158",[0,0.317,1,0.269,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,16,1.607,17,1.919,21,0.254,23,0.189,26,0.48,28,2.952,60,1.857,107,1.869,109,0.276,171,1.592,214,4.221,233,4.613,264,5.605,265,3.981,266,4.993,763,0.658]],["t/160",[0,0.318,1,0.316,3,2.691,4,3.177,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.234,13,0.315,14,0.227,16,1.577,21,0.252,23,0.186,26,0.562,57,0.381,65,0.852,109,0.271,129,4.42,171,1.562,192,3.01,202,2.824,270,4.002,277,5.161,278,3.703,279,4.321,300,3.524,763,0.645]],["t/162",[0,0.316,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.414,26,0.478,28,2.937,57,0.386,65,0.864,70,3.179,109,0.274,171,1.584,258,5.589,259,5.12,260,3.364,261,4.201,262,4.461,263,4.117,763,0.655]],["t/164",[0,0.316,1,0.318,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.188,26,0.567,57,0.459,65,0.864,109,0.274,112,3.179,144,2.41,171,1.584,270,3.775,295,1.727,300,2.605,322,5.452,323,4.97,324,3.674,326,4.97,327,3.136,328,3.576,763,0.655]],["t/166",[0,0.322,1,0.318,3,2.723,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,16,1.596,18,3.261,21,0.253,23,0.188,26,0.567,40,2.599,41,2.709,105,2.494,109,0.274,171,1.58,265,3.953,295,1.723,301,5.197,302,4.696,305,4.696,306,4.107,763,0.653]],["t/168",[0,0.318,1,0.315,3,2.684,4,3.17,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.233,13,0.314,14,0.227,16,1.573,21,0.252,23,0.185,26,0.562,57,0.38,65,0.85,109,0.27,129,4.41,171,1.558,192,3.003,202,2.817,270,4.142,277,5.153,278,3.695,279,4.311,300,3.522,763,0.644]],["t/170",[0,0.316,1,0.268,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,16,1.596,21,0.253,23,0.188,26,0.477,28,2.93,57,0.458,65,0.862,88,2.661,109,0.274,171,1.58,190,2.789,260,3.989,276,5.444,308,4.958,309,4.929,763,0.653]],["t/172",[0,0.316,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.414,26,0.478,28,2.937,57,0.386,65,0.864,70,3.179,109,0.274,171,1.584,258,5.589,259,5.12,260,3.364,261,4.201,262,3.757,263,4.889,763,0.655]],["t/174",[0,0.326,1,0.338,3,3.021,6,0.021,7,0.222,8,0.228,9,0.275,10,0.242,11,0.235,12,0.262,13,0.354,14,0.255,16,1.77,18,3.937,21,0.252,23,0.208,26,0.602,32,2.4,40,2.884,41,2.877,44,3.568,57,0.344,63,1.912,65,0.77,77,2.124,88,2.533,105,1.873,109,0.245,171,1.754,205,2.617,265,3.53,295,1.912,301,4.852,302,4.194,305,4.194,306,4.557,307,4.963,318,4.09,319,4.305,320,4.305,763,0.583]],["t/176",[0,0.316,1,0.267,6,0.019,7,0.237,8,0.205,9,0.259,10,0.217,11,0.211,12,0.236,13,0.318,14,0.23,16,1.592,21,0.253,23,0.187,26,0.475,28,2.923,57,0.457,65,0.86,88,2.658,109,0.273,171,1.577,190,2.782,260,4.252,276,5.436,308,4.946,309,4.926,763,0.651]],["t/178",[0,0.322,1,0.318,3,2.723,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,16,1.596,18,3.261,21,0.253,23,0.188,26,0.567,40,2.599,41,2.709,105,2.098,109,0.274,171,1.58,265,3.953,295,1.723,301,5.197,302,4.696,305,5.581,306,4.107,763,0.653]],["t/180",[0,0.326,1,0.338,3,3.021,6,0.021,7,0.222,8,0.228,9,0.275,10,0.242,11,0.235,12,0.262,13,0.354,14,0.255,16,1.77,18,3.618,21,0.252,23,0.208,26,0.602,32,2.4,40,2.884,41,2.877,44,3.568,57,0.344,63,1.912,65,0.77,77,2.124,88,2.533,105,1.873,109,0.245,171,1.754,205,2.617,265,3.53,295,1.912,301,4.852,302,4.194,305,4.194,306,4.958,307,4.963,318,4.09,319,4.305,320,4.305,763,0.583]],["t/182",[0,0.321,1,0.335,5,0.92,6,0.018,7,0.233,8,0.2,9,0.254,10,0.211,11,0.205,12,0.229,13,0.309,14,0.223,21,0.25,22,0.969,23,0.219,26,0.462,39,2.328,59,0.818,65,0.836,109,0.266,170,2.878,190,2.705,215,2.999,315,3.075,325,3.178,331,2.878,352,5.103,367,4.554,368,5.459,369,5.06,763,0.633]],["t/184",[0,0.318,1,0.316,3,2.691,4,3.177,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.234,13,0.315,14,0.227,16,1.577,21,0.252,23,0.186,26,0.562,57,0.381,65,0.852,109,0.271,129,4.42,171,1.562,192,3.595,202,2.824,270,4.002,277,5.161,278,3.703,279,4.321,300,3.472,763,0.645]],["t/186",[0,0.321,1,0.335,5,0.922,6,0.018,7,0.233,8,0.2,9,0.255,10,0.212,11,0.206,12,0.23,13,0.31,14,0.224,21,0.25,22,0.971,23,0.219,26,0.463,39,2.331,59,0.82,65,0.838,109,0.266,170,2.885,190,2.711,215,3.003,315,3.083,325,3.182,331,2.885,352,5.11,367,4.565,368,5.34,369,5.062,763,0.635]],["t/188",[0,0.321,1,0.313,3,2.659,6,0.018,7,0.234,8,0.201,9,0.255,10,0.213,11,0.207,12,0.231,13,0.311,14,0.225,16,1.558,18,3.185,21,0.251,23,0.183,26,0.559,32,2.535,40,2.538,41,2.67,44,3.768,57,0.376,65,0.842,77,2.322,88,2.732,109,0.267,171,1.543,205,2.862,295,1.682,306,4.011,307,5.242,318,4.473,319,4.708,320,4.708,763,0.638]],["t/190",[0,0.319,1,0.329,5,0.881,6,0.021,7,0.227,8,0.234,9,0.279,10,0.248,11,0.241,12,0.269,13,0.362,14,0.262,16,1.482,21,0.256,22,0.928,23,0.213,26,0.542,28,2.722,57,0.473,63,1.989,65,0.801,88,2.839,91,2.792,109,0.254,116,3.423,171,1.468,181,3.262,186,2.945,190,2.59,198,3.164,260,3.815,276,5.207,308,4.605,309,4.761,376,5.207,377,4.605,763,0.607]],["t/192",[0,0.313,1,0.363,5,1.199,6,0.023,7,0.249,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,17,1.803,19,1.702,20,1.465,21,0.258,22,1.262,23,0.237,26,0.602,32,1.761,35,1.98,39,1.624,43,2.092,46,1.657,47,1.652,48,2.299,49,1.892,54,2.271,57,0.446,59,1.066,60,2.133,63,1.207,65,0.702,67,2.055,70,1.788,72,2.731,73,2.356,77,1.341,78,2.078,88,1.708,91,1.695,93,1.159,94,2.693,105,2.005,108,1.159,109,0.154,144,1.355,183,2.618,189,3.106,190,1.572,192,2.48,195,2.801,196,2.363,200,1.631,205,1.652,221,2.363,280,1.98,300,2.116,309,2.952,315,1.788,324,2.513,327,2.547,328,2.905,331,1.673,332,1.92,370,1.813,384,2.689,388,2.919,389,1.838,390,2.513,391,1.838,392,2.299,393,2.905,394,1.95,403,2.078,408,2.113,409,2.113,410,2.113,411,2.113,412,3.344,413,2.271,414,3.28,415,3.219,416,3.344,427,2.465,428,2.465,429,2.465,430,3.642,431,2.718,442,3.729,443,2.718,444,2.795,447,3.642,448,2.648,458,3.642,459,2.718,465,3.344,466,2.044,467,1.813,479,2.113,480,2.229,481,2.465,491,3.642,492,2.718,499,2.718,500,3.219,501,2.271,512,2.363,763,0.368,764,3.513]],["t/194",[0,0.324,1,0.361,4,1.808,5,1.131,6,0.023,7,0.252,8,0.26,9,0.296,10,0.275,11,0.267,12,0.298,13,0.402,14,0.291,16,1.297,17,1.629,19,1.7,20,2.112,21,0.258,22,1.155,23,0.24,26,0.638,29,2.088,39,2.212,41,1.281,42,2.796,43,1.445,46,1.654,50,1.915,57,0.479,59,0.805,60,1.498,65,0.956,67,0.969,75,1.627,88,2.002,91,1.69,93,1.156,94,2.688,105,1.18,108,1.156,109,0.154,112,3.026,116,2.995,144,1.352,170,2.832,171,1.508,181,3.351,186,1.783,190,1.568,198,1.915,200,1.627,215,2.088,220,1.834,270,1.783,295,2.053,300,1.461,315,1.783,322,3.722,323,2.788,324,2.508,325,2.213,326,2.788,327,1.759,328,2.006,329,4.029,330,2.966,331,1.669,332,1.915,333,4.029,334,3.477,335,2.515,349,2.575,350,2.575,351,2.575,352,3.554,353,3.722,354,2.711,355,2.788,356,3.154,357,2.223,358,3.722,359,2.182,360,2.711,363,3.722,364,2.966,365,2.575,367,2.64,368,4.293,369,4.156,370,1.808,371,2.788,376,3.722,377,2.788,382,3.212,383,2.309,384,2.088,388,1.568,389,1.834,390,1.478,391,1.834,392,1.587,763,0.367,764,3.503]],["t/196",[0,0.327,1,0.346,3,3.148,4,2.614,6,0.021,7,0.244,8,0.238,9,0.282,10,0.252,11,0.245,12,0.273,13,0.368,14,0.266,16,1.844,18,3.41,21,0.252,23,0.217,26,0.616,32,2.262,40,2.718,41,2.781,44,3.362,57,0.403,65,0.902,77,1.933,88,2.425,94,2.689,105,1.706,108,1.671,109,0.223,129,3.637,171,1.827,192,2.476,202,2.324,205,2.382,265,3.214,270,3.666,277,4.573,278,3.047,279,3.555,295,1.802,300,3.281,301,4.573,302,3.818,305,3.818,306,4.295,307,4.677,318,3.724,319,3.92,320,3.92,763,0.531,764,5.065]],["t/198",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,109,0.276,189,2.989,370,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,4.719,416,4.903,427,4.404,428,4.404,429,5.22,763,0.658]],["t/200",[0,0.308,1,0.349,4,2.53,5,1.08,6,0.022,7,0.227,8,0.248,9,0.288,10,0.263,11,0.255,12,0.285,13,0.384,14,0.277,16,1.256,17,1.443,19,1.28,20,2.045,21,0.256,22,1.137,23,0.226,24,2.544,25,1.851,26,0.596,29,2.022,33,2.721,36,3.773,37,2.462,38,2.807,39,2.602,40,2.045,41,1.793,42,3,43,3.211,44,2.53,45,3.055,46,1.602,47,2.306,48,2.222,49,2.641,50,2.681,51,3.055,57,0.395,59,0.864,60,1.451,63,1.685,67,1.764,72,2.249,73,2.277,80,2.566,105,2.148,109,0.215,112,2.496,171,1.244,183,3.292,189,2.336,196,3.298,205,2.306,220,2.566,280,2.764,295,1.356,315,2.496,324,2.429,327,2.462,331,2.336,332,2.681,333,5.076,356,3.055,364,4.151,365,3.605,384,2.022,388,2.195,390,2.069,392,2.222,430,4.58,431,3.794,466,2.853,467,2.53,479,2.949,763,0.514]],["t/202",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,109,0.276,189,2.989,370,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,4.719,416,4.903,427,5.22,428,4.404,429,4.404,763,0.658]],["t/204",[0,0.313,1,0.364,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.25,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,1.549,17,1.791,18,2.708,19,2.037,20,2.522,21,0.26,22,1.27,23,0.242,24,2.788,25,2.283,26,0.606,27,3.631,28,1.698,29,2.134,30,2.534,31,3.909,32,1.796,33,2.872,34,2.721,35,2.035,36,3.06,37,1.813,38,2.067,39,1.657,40,1.506,41,1.32,42,2.433,43,1.489,44,1.863,45,2.249,46,2.157,47,2.433,48,2.344,49,1.945,50,1.974,51,2.249,52,3.9,53,3.01,54,2.334,55,2.96,56,2.334,57,0.432,58,2.291,59,1.015,60,1.954,61,3.9,62,2.479,63,1.241,64,2.38,65,0.716,66,2.654,67,0.998,68,3.553,69,3.373,70,1.838,71,2.534,72,2.373,73,1.677,74,3.714,75,1.677,76,2.721,77,2.521,78,2.135,79,3.9,80,1.89,81,2.96,82,3.804,83,2.598,84,2.873,85,3.553,86,2.592,87,3.411,88,1.742,89,2.654,90,2.654,91,1.742,92,2.334,93,1.191,94,1.917,109,0.159,580,3.166,763,0.378]],["t/206",[0,0.319,1,0.335,5,0.92,6,0.018,7,0.233,8,0.2,9,0.254,10,0.211,11,0.205,12,0.229,13,0.309,14,0.223,21,0.25,22,0.969,23,0.235,26,0.462,39,2.328,59,0.818,65,0.836,109,0.266,170,2.878,190,2.705,215,2.999,315,3.075,325,3.178,331,2.878,352,5.103,367,4.554,368,5.459,369,5.06,763,0.633]],["t/208",[0,0.312,1,0.363,5,1.199,6,0.023,7,0.249,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,17,1.803,19,1.702,20,1.465,21,0.258,22,1.262,23,0.24,26,0.602,32,1.761,35,1.98,39,1.624,43,2.092,46,1.657,47,1.652,48,2.299,49,1.892,54,2.271,57,0.446,59,1.066,60,2.133,63,1.207,65,0.702,67,2.055,70,1.788,72,2.731,73,2.356,77,1.341,78,2.078,88,1.708,91,1.695,93,1.159,94,2.693,105,2.005,108,1.159,109,0.154,144,1.355,183,2.618,189,3.106,190,1.572,192,2.48,195,2.801,196,2.363,200,1.631,205,1.652,221,2.363,280,1.98,300,2.116,309,2.952,315,1.788,324,2.513,327,2.547,328,2.905,331,1.673,332,1.92,370,1.813,384,2.689,388,2.919,389,1.838,390,2.513,391,1.838,392,2.299,393,2.905,394,1.95,403,2.078,408,2.113,409,2.113,410,2.113,411,2.113,412,3.344,413,2.271,414,3.28,415,3.219,416,3.344,427,2.465,428,2.465,429,2.465,430,3.642,431,2.718,442,3.729,443,2.718,444,2.795,447,3.642,448,2.648,458,3.642,459,2.718,465,3.344,466,2.044,467,1.813,479,2.113,480,2.229,481,2.465,491,3.642,492,2.718,499,2.718,500,3.219,501,2.271,512,2.363,580,3.08,763,0.368]],["t/210",[3,3.087,6,0.023,7,0.245,8,0.252,9,0.291,10,0.267,11,0.26,12,0.29,14,0.282,21,0.262,23,0.254,26,0.609,57,0.472,58,3.655,88,1.94,94,3.059,95,6.194,96,4.342,97,5.036,98,4.342,99,2.611,100,4.342,108,1.901,109,0.253,110,6.194,111,6.437,112,2.932,113,4.723,114,2.932,116,3.408,117,5.761,118,5.761,119,4.342,120,3.957,121,4.723,122,2.579,123,5.761,124,5.25,580,5.052,763,0.604]],["t/212",[0,0.324,1,0.361,4,1.808,5,1.131,6,0.023,7,0.252,8,0.26,9,0.296,10,0.275,11,0.267,12,0.298,13,0.402,14,0.291,16,1.297,17,1.629,19,1.7,20,2.112,21,0.258,22,1.155,23,0.243,26,0.638,29,2.088,39,2.212,41,1.281,42,2.796,43,1.445,46,1.654,50,1.915,57,0.479,59,0.805,60,1.498,65,0.956,67,0.969,75,1.627,88,2.002,91,1.69,93,1.156,94,2.688,105,1.18,108,1.156,109,0.154,112,3.026,116,2.995,144,1.352,170,2.832,171,1.508,181,3.351,186,1.783,190,1.568,198,1.915,200,1.627,215,2.088,220,1.834,270,1.783,295,2.053,300,1.461,315,1.783,322,3.722,323,2.788,324,2.508,325,2.213,326,2.788,327,1.759,328,2.006,329,4.029,330,2.966,331,1.669,332,1.915,333,4.029,334,3.477,335,2.515,349,2.575,350,2.575,351,2.575,352,3.554,353,3.722,354,2.711,355,2.788,356,3.154,357,2.223,358,3.722,359,2.182,360,2.711,363,3.722,364,2.966,365,2.575,367,2.64,368,4.293,369,4.156,370,1.808,371,2.788,376,3.722,377,2.788,382,3.212,383,2.309,384,2.088,388,1.568,389,1.834,390,1.478,391,1.834,392,1.587,580,3.072,763,0.367]],["t/214",[0,0.326,1,0.327,3,2.604,4,1.815,6,0.023,7,0.256,8,0.26,9,0.295,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,16,1.904,17,1.721,18,2.658,21,0.258,23,0.25,24,2.875,25,1.917,26,0.616,28,2.803,32,1.763,37,2.992,39,2.309,40,2.118,41,2.387,44,2.621,53,2.047,57,0.48,60,1.041,65,0.958,70,1.79,77,1.343,80,1.841,88,2.428,93,1.161,94,2.696,99,1.3,105,1.184,107,0.884,108,1.161,109,0.155,129,2.525,134,0.963,135,1.403,138,2.651,141,1.287,144,1.357,171,1.997,186,3.033,190,1.575,192,1.72,198,3.258,202,1.614,205,1.654,208,4.163,209,3.084,214,2.366,217,3.929,218,4.299,221,2.366,222,3.347,223,3.347,233,2.586,243,2.884,255,4.299,256,3.084,257,3.347,258,3.827,259,2.884,260,3.21,261,2.366,262,2.116,263,2.319,264,3.827,265,3.222,266,2.799,270,3.033,276,3.733,277,3.564,278,2.116,279,2.469,295,1.404,300,2.887,301,3.564,302,2.651,305,2.651,306,3.347,307,3.646,308,2.799,309,4.026,318,2.586,319,2.722,320,2.722,580,3.084,763,0.369]],["t/216",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.511,89,4.636,90,5.483,91,3.043,92,4.077,109,0.277,763,0.661]],["t/218",[0,0.294,1,0.342,5,1.076,6,0.021,7,0.227,8,0.233,9,0.279,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,17,1.598,21,0.255,22,1.133,23,0.213,26,0.54,57,0.437,59,0.957,60,1.705,63,1.98,65,0.797,67,2.112,109,0.253,189,2.744,195,2.71,300,2.403,370,2.973,384,2.913,388,3.42,390,2.431,403,3.408,412,4.656,413,3.725,414,4.567,415,4.481,416,4.656,427,4.043,428,4.043,429,4.043,465,4.656,480,3.655,481,4.043,763,0.604]],["t/220",[1,0.175,6,0.024,7,0.26,8,0.268,9,0.301,10,0.284,11,0.276,12,0.308,13,0.404,14,0.3,16,1.655,17,0.923,19,1.472,21,0.265,23,0.26,25,2.44,26,0.621,29,2.326,32,1.958,40,1.702,41,1.492,53,2.374,57,0.431,58,2.589,59,1.07,62,2.802,65,0.781,67,1.128,69,1.969,88,1.374,93,1.346,94,2.994,96,3.075,97,4.26,98,3.075,99,1.508,104,4.049,105,1.899,108,1.346,109,0.179,112,3.289,115,4.945,125,4.945,126,3.718,127,4.08,128,4.487,134,1.117,143,4.775,144,1.574,145,3.718,146,2.407,147,1.995,148,3.718,169,4.364,170,1.944,171,1.967,172,3.455,174,3,175,4.487,176,3.718,177,3.075,178,4.893,181,2.3,182,3.578,183,2.106,186,3.289,187,4.775,188,4.775,189,1.944,190,1.826,191,3.883,193,4.026,194,4.775,195,1.919,196,2.744,197,3.883,198,3.533,199,4.623,200,1.895,201,3.883,205,1.919,206,3.718,207,4.775,219,3.883,580,3.578,763,0.428]],["t/222",[0,0.303,1,0.352,5,1.135,6,0.022,7,0.239,8,0.246,9,0.287,10,0.261,11,0.253,12,0.283,13,0.381,14,0.275,17,1.543,19,1.422,21,0.258,22,1.195,23,0.225,26,0.57,39,1.744,43,2.247,46,1.78,54,3.522,57,0.337,59,1.009,60,1.612,65,0.754,67,2.223,75,2.53,105,1.834,109,0.239,189,3.25,196,3.664,200,2.53,315,2.773,331,2.595,382,4.329,383,3.591,384,2.814,388,3.495,389,2.851,390,2.299,391,2.851,392,2.468,430,4.898,431,4.215,447,4.898,448,4.106,763,0.571,765,2.811]],["t/224",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,2.936,25,2.33,26,0.472,29,2.545,33,3.425,36,4.355,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.185,45,3.844,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,4.587,109,0.271,763,0.647]],["t/226",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,109,0.276,189,2.989,370,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,4.719,416,4.903,427,4.404,428,5.22,429,4.404,763,0.658]],["t/228",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.301,46,2.055,57,0.389,59,0.852,109,0.276,116,3.721,170,2.997,295,1.739,334,5.115,335,4.516,349,4.624,350,5.475,351,4.624,763,0.659]],["t/230",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,2.936,25,2.33,26,0.472,29,2.545,33,3.425,36,4.355,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.185,45,4.587,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,3.844,109,0.271,763,0.647]],["t/232",[0,0.315,1,0.35,5,1.023,6,0.022,7,0.215,8,0.243,9,0.285,10,0.258,11,0.25,12,0.279,13,0.377,14,0.272,17,1.519,20,2.217,21,0.256,22,1.077,23,0.222,26,0.592,39,1.702,43,2.192,57,0.456,59,0.91,60,1.572,63,1.826,65,0.735,72,2.438,73,2.468,105,2.262,109,0.234,112,2.705,144,2.05,171,1.348,183,3.466,189,2.531,205,2.499,270,2.705,280,2.995,295,1.469,300,2.802,322,4.938,323,4.228,324,3.834,326,4.228,327,3.886,328,4.217,332,2.905,384,2.192,390,2.242,392,2.408,442,4.938,443,4.112,444,4.228,466,3.092,467,2.742,479,3.196,763,0.557,765,2.742]],["t/234",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,105,2.083,109,0.272,144,2.387,200,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.222,394,3.433,408,3.721,409,3.721,410,3.721,411,4.436,763,0.648]],["t/236",[0,0.303,1,0.353,5,1.136,6,0.022,7,0.226,8,0.246,9,0.287,10,0.261,11,0.254,12,0.283,13,0.382,14,0.276,17,1.752,19,1.647,20,2.011,21,0.255,22,1.197,23,0.225,26,0.571,39,1.544,43,1.988,46,2.061,57,0.461,59,1.01,60,2.081,63,1.657,65,0.873,67,1.945,72,3.226,73,2.931,75,2.239,80,2.523,105,2.512,109,0.212,144,1.86,183,3.256,195,2.268,200,2.931,205,2.268,280,2.718,300,2.011,324,2.389,327,2.421,332,2.636,382,4.003,383,3.178,384,3.276,388,2.824,389,3.302,390,3.268,391,3.302,392,3.187,393,3.613,394,2.676,403,2.852,408,2.9,409,2.9,410,2.9,411,2.9,465,4.159,466,2.805,467,2.488,479,2.9,480,3.059,481,3.384,763,0.505]],["t/238",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.301,46,2.055,57,0.389,59,0.852,109,0.276,116,3.721,170,2.997,295,1.739,334,5.115,335,4.516,349,4.624,350,4.624,351,5.475,763,0.659]],["t/240",[0,0.293,1,0.34,5,1.066,6,0.021,7,0.224,8,0.231,9,0.277,10,0.245,11,0.238,12,0.265,13,0.358,14,0.259,17,1.283,19,1.827,21,0.254,22,1.122,23,0.211,26,0.535,46,2.286,57,0.433,59,0.948,60,1.679,63,1.95,65,0.968,67,1.569,72,3.21,73,2.635,75,2.635,105,2.356,109,0.249,144,2.189,200,3.25,382,4.439,383,3.74,384,3.129,388,2.539,389,3.662,390,2.952,391,3.971,392,3.17,393,4.006,394,3.149,408,3.413,409,3.413,410,3.413,411,3.413,763,0.595]],["t/242",[0,0.276,1,0.321,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,16,1.623,17,1.433,21,0.255,22,1.016,23,0.191,25,2.393,26,0.485,27,5.25,28,2.98,29,2.613,30,4.447,31,4.836,32,2.597,33,3.517,34,5.638,35,3.572,109,0.278,763,0.664]],["t/244",[0,0.313,1,0.364,5,1.203,6,0.024,7,0.245,8,0.261,9,0.296,10,0.276,11,0.268,12,0.3,13,0.404,14,0.292,17,1.9,19,1.568,20,2.139,21,0.259,22,1.266,23,0.238,24,2.045,26,0.604,31,2.305,39,1.142,43,1.471,46,1.675,48,2.721,49,1.921,52,3.865,53,2.984,54,3.315,55,2.923,56,2.305,57,0.488,58,2.262,59,1.069,60,2.365,61,3.865,62,3.522,63,1.762,64,2.351,65,0.71,66,2.621,67,1.924,68,3.522,69,2.474,70,2.61,71,2.503,72,3.191,73,2.789,79,3.865,80,1.866,81,2.923,93,1.177,94,1.893,105,2.022,109,0.157,144,1.376,183,2.646,189,1.699,195,2.412,200,1.656,205,1.677,221,2.398,280,2.01,300,1.487,309,2.984,324,1.766,327,1.79,332,1.949,384,2.708,388,2.295,389,1.866,390,2.534,391,1.866,392,2.324,393,2.936,394,1.979,403,2.109,408,2.145,409,2.145,410,2.145,411,2.145,447,3.681,448,2.687,458,3.681,459,2.759,465,3.38,466,2.075,467,1.84,479,2.145,480,2.262,481,2.503,491,3.681,492,2.759,499,2.759,763,0.374]],["t/246",[0,0.319,1,0.345,5,1.038,6,0.022,7,0.239,8,0.246,9,0.287,10,0.26,11,0.253,12,0.282,13,0.381,14,0.275,16,1.906,17,1.945,21,0.258,22,1.093,23,0.224,26,0.615,28,2.557,60,2.309,62,3.733,94,2.886,107,1.366,108,1.794,109,0.239,171,1.379,181,3.841,214,3.656,233,3.996,264,5.136,265,3.449,266,4.326,295,1.884,358,5.009,359,3.387,360,4.206,363,5.009,370,2.805,371,4.326,763,0.57]],["t/248",[0,0.294,1,0.342,5,1.076,6,0.021,7,0.227,8,0.233,9,0.279,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,16,1.475,17,1.303,19,1.994,21,0.255,22,1.133,23,0.213,25,2.175,26,0.54,27,4.958,28,2.71,29,2.376,30,4.043,31,4.567,32,2.765,33,3.198,34,4.342,35,4.306,46,1.882,47,2.71,59,0.78,63,1.98,77,2.199,78,3.408,88,2.378,91,2.78,109,0.253,190,2.579,192,3.453,195,2.71,500,4.481,501,3.725,512,3.875,763,0.604]],["t/250",[0,0.313,1,0.319,6,0.019,7,0.238,8,0.207,9,0.26,10,0.219,11,0.213,12,0.237,13,0.32,14,0.231,21,0.254,23,0.189,26,0.568,57,0.459,65,0.866,109,0.275,112,3.186,144,2.416,171,1.588,270,3.186,295,1.731,300,2.611,322,5.46,323,4.981,324,3.679,326,5.909,327,3.143,328,3.584,763,0.656]],["t/252",[0,0.295,1,0.343,5,1.08,6,0.021,7,0.227,8,0.234,9,0.279,10,0.248,11,0.241,12,0.269,13,0.363,14,0.262,19,2.137,21,0.256,22,1.138,23,0.214,26,0.543,32,2.462,35,3.269,46,2.317,47,3.336,59,0.96,63,1.993,69,2.799,74,5.092,75,2.694,76,4.371,77,2.707,78,4.532,88,2.388,91,2.799,109,0.255,190,2.596,192,3.467,195,2.728,500,4.5,501,3.75,512,3.901,763,0.608]],["t/254",[0,0.312,1,0.361,5,1.186,6,0.023,7,0.25,8,0.257,9,0.294,10,0.272,11,0.265,12,0.295,13,0.398,14,0.288,16,0.985,17,1.416,19,2.183,21,0.257,22,1.249,23,0.235,24,2.158,25,1.452,26,0.606,29,1.586,32,1.879,33,2.134,35,2.167,36,3.2,37,1.931,38,2.202,39,1.732,40,1.604,41,1.979,42,2.545,43,1.586,44,1.984,45,2.395,46,2.587,47,2.944,48,1.742,49,2.071,50,2.102,51,2.395,57,0.42,59,1.033,60,1.601,65,0.749,67,1.063,68,3.716,69,3.021,70,1.957,71,2.699,72,3.116,73,2.513,74,3.884,75,2.513,76,2.898,77,2.39,78,3.2,82,3.978,83,1.931,84,3.06,88,1.822,91,1.855,105,1.822,109,0.169,113,3.152,116,2.274,144,1.484,170,1.832,190,1.721,192,2.645,195,1.808,200,2.513,295,1.063,334,3.716,335,2.76,349,2.827,350,2.827,351,2.827,382,3.433,383,2.535,384,2.582,388,1.721,389,2.832,390,2.283,391,2.832,392,2.452,393,3.098,394,2.134,408,2.313,409,2.313,410,2.313,411,2.313,500,3.433,501,2.486,512,2.586,763,0.403]],["t/256",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.198,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.668,20,2.58,21,0.253,22,0.992,23,0.186,26,0.473,39,1.981,43,2.551,57,0.383,59,0.838,60,1.831,63,2.126,72,2.838,73,2.873,105,2.483,109,0.272,183,3.805,205,2.909,280,3.487,324,3.064,327,3.106,332,3.382,384,2.551,390,2.61,392,2.803,466,3.599,467,3.192,479,4.436,763,0.648]],["t/258",[0,0.301,1,0.327,5,1.07,6,0.021,7,0.225,8,0.232,9,0.278,10,0.246,11,0.239,12,0.267,13,0.359,14,0.26,16,1.462,19,1.491,21,0.255,22,0.916,23,0.212,24,2.801,25,2.156,26,0.582,29,2.897,33,3.17,36,4.155,37,2.867,38,3.27,39,2.25,40,2.382,41,2.089,42,3.834,43,2.355,44,2.947,45,3.558,46,1.865,47,2.686,48,2.587,49,3.076,50,4.16,51,3.558,57,0.353,63,1.962,65,0.79,109,0.251,170,2.72,295,1.579,353,5.165,354,4.419,355,4.544,356,3.558,357,3.623,763,0.599]],["t/260",[0,0.277,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,17,1.697,21,0.256,22,1.021,23,0.192,26,0.487,57,0.394,59,0.862,60,1.884,70,3.241,109,0.28,195,2.995,309,4.365,491,5.386,492,4.927,499,5.805,763,0.667]],["t/262",[0,0.299,1,0.348,5,1.108,6,0.022,7,0.212,8,0.24,9,0.283,10,0.255,11,0.247,12,0.276,13,0.372,14,0.269,17,1.646,19,1.724,20,2.159,21,0.254,22,1.167,23,0.219,26,0.557,39,1.657,43,2.135,46,2.158,57,0.45,59,0.985,60,1.955,63,1.779,65,0.914,67,1.431,72,3.338,73,3.068,75,2.404,105,2.581,109,0.227,144,1.997,183,3.409,200,3.068,205,2.435,280,2.918,324,2.564,327,2.599,332,2.83,382,4.191,383,3.412,384,3.161,388,2.317,389,3.457,390,3.07,391,3.457,392,3.473,393,3.782,394,2.873,408,3.114,409,3.114,410,3.114,411,3.114,466,3.012,467,2.671,479,3.114,763,0.543,765,2.671]],["t/264",[0,0.307,1,0.341,5,0.874,6,0.021,7,0.184,8,0.233,9,0.278,10,0.246,11,0.24,12,0.267,13,0.36,14,0.26,17,1.594,20,3.18,21,0.255,22,0.92,23,0.212,26,0.583,29,2.365,39,1.837,43,2.365,57,0.472,59,0.777,60,1.697,63,2.421,65,0.794,72,2.631,73,2.664,105,2.372,109,0.252,112,2.919,171,1.455,183,3.635,205,2.698,280,3.233,295,1.586,324,2.841,327,2.88,329,5.605,330,4.856,332,4.168,384,2.365,390,2.42,392,2.599,466,3.337,467,2.96,479,3.45,763,0.601]],["t/266",[0,0.274,1,0.318,5,0.949,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,19,2.063,21,0.253,22,0.999,23,0.188,26,0.477,32,2.571,35,3.512,46,2.035,47,2.93,59,0.844,77,2.378,78,3.685,88,2.494,91,3.006,109,0.274,190,2.789,192,3.62,195,2.93,500,4.698,501,4.028,512,4.981,763,0.653]],["t/268",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,105,2.083,109,0.272,144,2.387,200,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.222,394,3.433,408,3.721,409,4.436,410,3.721,411,3.721,763,0.648]],["t/270",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,105,2.083,109,0.272,144,2.387,200,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.222,394,3.433,408,3.721,409,3.721,410,4.436,411,3.721,763,0.648]],["t/272",[0,0.3,1,0.348,5,1.111,6,0.022,7,0.213,8,0.241,9,0.284,10,0.255,11,0.248,12,0.277,13,0.373,14,0.27,17,1.795,19,1.905,20,2.172,21,0.254,22,1.17,23,0.22,26,0.558,39,1.667,43,2.148,46,2.166,57,0.451,59,0.988,60,2.159,63,1.79,65,0.721,68,4.554,69,2.513,70,2.651,71,3.655,72,3.639,73,3.568,105,2.457,109,0.229,144,2.009,183,3.422,200,2.419,205,2.449,280,2.935,324,2.58,327,2.615,332,2.847,384,2.735,389,2.725,390,2.798,391,2.725,392,3.005,393,3.797,394,2.89,408,3.132,409,3.132,410,3.132,411,3.132,466,3.03,467,2.687,479,3.132,763,0.546,765,2.687]],["t/274",[0,0.294,1,0.342,5,1.074,6,0.021,7,0.226,8,0.233,9,0.278,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,16,1.472,17,1.596,19,1.501,21,0.255,22,1.132,23,0.213,24,2.813,25,2.171,26,0.54,29,2.371,33,3.191,36,4.172,37,2.886,38,3.291,39,2.259,40,2.398,41,2.102,42,3.318,43,2.371,44,2.967,45,3.581,46,1.878,47,2.704,48,3.458,49,4.111,50,3.143,51,3.581,57,0.356,59,0.778,60,1.701,63,1.975,109,0.253,221,3.866,458,5.064,459,4.448,763,0.603]],["t/276",[0,0.302,1,0.342,5,1.079,6,0.021,7,0.227,8,0.234,9,0.279,10,0.248,11,0.241,12,0.269,13,0.362,14,0.262,19,1.998,21,0.256,22,1.136,23,0.213,26,0.542,32,2.459,35,3.262,46,1.89,47,2.722,57,0.358,59,0.784,63,1.989,77,2.209,78,3.423,88,2.755,91,3.693,109,0.254,116,3.423,181,3.262,186,2.945,190,2.59,192,3.463,195,2.722,198,3.164,376,5.207,377,4.605,500,4.494,501,3.741,512,3.892,763,0.607]],["t/278",[0,0.313,1,0.364,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.25,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,1.549,17,1.791,18,2.708,19,2.037,20,2.522,21,0.26,22,1.285,23,0.239,24,2.788,25,2.283,26,0.606,27,3.631,28,1.698,29,2.134,30,2.534,31,3.909,32,1.796,33,2.872,34,2.721,35,2.035,36,3.06,37,1.813,38,2.067,39,1.657,40,1.506,41,1.32,42,2.433,43,1.489,44,1.863,45,2.249,46,2.157,47,2.433,48,2.344,49,1.945,50,1.974,51,2.249,52,3.9,53,3.01,54,2.334,55,2.96,56,2.334,57,0.432,58,2.291,59,1.015,60,1.954,61,3.9,62,2.479,63,1.241,64,2.38,65,0.716,66,2.654,67,0.998,68,3.553,69,3.373,70,1.838,71,2.534,72,2.373,73,1.677,74,3.714,75,1.677,76,2.721,77,2.521,78,2.135,79,3.9,80,1.89,81,2.96,82,3.804,83,2.598,84,2.873,85,3.553,86,2.592,87,3.411,88,1.742,89,2.654,90,2.654,91,1.742,92,2.334,93,1.191,94,1.917,109,0.159,763,0.378,766,3.29]],["t/280",[0,0.313,1,0.365,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.25,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,1.549,17,1.791,18,2.708,19,2.037,20,2.522,21,0.26,22,1.27,23,0.239,24,2.788,25,2.283,26,0.606,27,3.631,28,1.698,29,2.134,30,2.534,31,3.909,32,1.796,33,2.872,34,2.721,35,2.035,36,3.06,37,1.813,38,2.067,39,1.657,40,1.506,41,1.32,42,2.433,43,1.489,44,1.863,45,2.249,46,2.157,47,2.433,48,2.344,49,1.945,50,1.974,51,2.249,52,3.9,53,3.01,54,2.334,55,2.96,56,2.334,57,0.432,58,2.291,59,1.015,60,1.954,61,3.9,62,2.479,63,1.241,64,2.38,65,0.716,66,2.654,67,0.998,68,3.553,69,3.373,70,1.838,71,2.534,72,2.373,73,1.677,74,3.714,75,1.677,76,2.721,77,2.521,78,2.135,79,3.9,80,1.89,81,2.96,82,3.804,83,2.598,84,2.873,85,3.553,86,2.592,87,3.411,88,1.742,89,2.654,90,2.654,91,1.742,92,2.334,93,1.191,94,1.917,109,0.159,763,0.378,766,3.29]],["t/282",[0,0.312,1,0.363,5,1.199,6,0.023,7,0.249,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,17,1.803,19,1.702,20,1.465,21,0.258,22,1.278,23,0.237,26,0.602,32,1.761,35,1.98,39,1.624,43,2.092,46,1.657,47,1.652,48,2.299,49,1.892,54,2.271,57,0.446,59,1.066,60,2.133,63,1.207,65,0.702,67,2.055,70,1.788,72,2.731,73,2.356,77,1.341,78,2.078,88,1.708,91,1.695,93,1.159,94,2.693,105,2.005,108,1.159,109,0.154,144,1.355,183,2.618,189,3.106,190,1.572,192,2.48,195,2.801,196,2.363,200,1.631,205,1.652,221,2.363,280,1.98,300,2.116,309,2.952,315,1.788,324,2.513,327,2.547,328,2.905,331,1.673,332,1.92,370,1.813,384,2.689,388,2.919,389,1.838,390,2.513,391,1.838,392,2.299,393,2.905,394,1.95,403,2.078,408,2.113,409,2.113,410,2.113,411,2.113,412,3.344,413,2.271,414,3.28,415,3.219,416,3.344,427,2.465,428,2.465,429,2.465,430,3.642,431,2.718,442,3.729,443,2.718,444,2.795,447,3.642,448,2.648,458,3.642,459,2.718,465,3.344,466,2.044,467,1.813,479,2.113,480,2.229,481,2.465,491,3.642,492,2.718,499,2.718,500,3.219,501,2.271,512,2.363,763,0.368,766,3.201]],["t/284",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.511,89,4.636,90,4.636,91,3.599,92,4.077,109,0.277,763,0.661]],["t/286",[0,0.322,1,0.361,5,1.173,6,0.023,7,0.247,8,0.254,9,0.292,10,0.269,11,0.262,12,0.292,13,0.394,14,0.285,16,1.503,17,1.742,19,1.865,21,0.257,22,1.264,23,0.237,26,0.622,39,1.879,41,1.582,46,1.917,57,0.412,59,0.902,60,1.737,65,0.812,67,1.196,75,2.009,88,2.243,91,2.087,94,2.296,105,1.456,108,1.427,109,0.19,116,3.471,170,2.795,181,3.754,186,2.201,190,1.936,198,2.364,200,2.009,215,2.42,295,1.842,315,2.201,325,2.565,331,2.06,334,4.03,335,3.105,349,3.179,350,3.179,351,3.179,352,4.119,358,4.314,359,2.694,360,3.346,363,4.314,367,3.259,368,4.709,369,4.492,370,2.232,371,3.441,376,4.314,377,3.441,382,3.723,383,2.851,384,2.42,388,1.936,389,2.263,390,1.825,391,2.263,392,1.959,763,0.453,766,3.941]],["t/288",[0,0.322,1,0.363,5,1.173,6,0.023,7,0.247,8,0.254,9,0.292,10,0.269,11,0.262,12,0.292,13,0.394,14,0.285,16,1.503,17,1.742,19,1.865,21,0.257,22,1.235,23,0.237,26,0.622,39,1.879,41,1.582,46,1.917,57,0.412,59,0.902,60,1.737,65,0.812,67,1.196,75,2.009,88,2.243,91,2.087,94,2.296,105,1.456,108,1.427,109,0.19,116,3.471,170,2.795,181,3.754,186,2.201,190,1.936,198,2.364,200,2.009,215,2.42,295,1.842,315,2.201,325,2.565,331,2.06,334,4.03,335,3.105,349,3.179,350,3.179,351,3.179,352,4.119,358,4.314,359,2.694,360,3.346,363,4.314,367,3.259,368,4.709,369,4.492,370,2.232,371,3.441,376,4.314,377,3.441,382,3.723,383,2.851,384,2.42,388,1.936,389,2.263,390,1.825,391,2.263,392,1.959,763,0.453,766,3.941]],["t/290",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.511,89,5.483,90,4.636,91,3.043,92,4.077,109,0.277,763,0.661]],["t/292",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,5.236,88,2.511,89,4.636,90,4.636,91,3.043,92,4.077,109,0.277,763,0.661]],["t/294",[0,0.289,1,0.336,5,1.042,6,0.022,7,0.239,8,0.247,9,0.287,10,0.261,11,0.254,12,0.283,13,0.382,14,0.276,16,1.401,17,1.547,21,0.258,22,1.097,23,0.236,26,0.571,53,3.183,57,0.423,59,0.926,60,1.619,62,3.757,65,0.757,67,2.226,109,0.24,171,1.388,186,2.784,189,2.606,195,2.573,198,2.991,207,5.792,219,5.206,300,2.282,370,2.823,384,2.821,388,3.062,390,2.308,403,3.236,412,4.509,413,3.537,414,4.423,415,4.34,416,4.509,427,3.839,428,3.839,429,3.839,465,4.509,480,3.471,481,3.839,763,0.573,765,2.823]],["t/296",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,16,1.659,17,1.466,21,0.258,23,0.228,25,2.446,26,0.496,37,3.253,39,2.074,109,0.285,138,5.712,144,2.5,171,1.643,217,5.864,243,5.311,763,0.679]],["t/298",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,3.138,25,2.33,26,0.472,29,2.545,33,3.425,36,4.355,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.185,45,3.844,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,3.844,109,0.271,763,0.647]],["t/300",[0,0.312,1,0.364,5,1.199,6,0.023,7,0.249,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,17,1.803,19,1.702,20,1.465,21,0.258,22,1.262,23,0.237,26,0.602,32,1.761,35,1.98,39,1.624,43,2.092,46,1.657,47,1.652,48,2.299,49,1.892,54,2.271,57,0.446,59,1.066,60,2.133,63,1.207,65,0.702,67,2.055,70,1.788,72,2.731,73,2.356,77,1.341,78,2.078,88,1.708,91,1.695,93,1.159,94,2.693,105,2.005,108,1.159,109,0.154,144,1.355,183,2.618,189,3.106,190,1.572,192,2.48,195,2.801,196,2.363,200,1.631,205,1.652,221,2.363,280,1.98,300,2.116,309,2.952,315,1.788,324,2.513,327,2.547,328,2.905,331,1.673,332,1.92,370,1.813,384,2.689,388,2.919,389,1.838,390,2.513,391,1.838,392,2.299,393,2.905,394,1.95,403,2.078,408,2.113,409,2.113,410,2.113,411,2.113,412,3.344,413,2.271,414,3.28,415,3.219,416,3.344,427,2.465,428,2.465,429,2.465,430,3.642,431,2.718,442,3.729,443,2.718,444,2.795,447,3.642,448,2.648,458,3.642,459,2.718,465,3.344,466,2.044,467,1.813,479,2.113,480,2.229,481,2.465,491,3.642,492,2.718,499,2.718,500,3.219,501,2.271,512,2.363,763,0.368,766,3.201]],["t/302",[0,0.276,1,0.321,2,5.242,3,2.763,4,3.262,5,0.963,6,0.019,7,0.24,8,0.209,9,0.261,10,0.221,11,0.215,12,0.24,13,0.323,14,0.234,15,4.087,16,1.619,17,1.69,18,3.909,19,1.95,20,3.116,21,0.255,22,1.014,23,0.191,24,2.978,25,2.387,26,0.484,109,0.278,763,0.663]],["t/304",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,109,0.276,189,2.989,370,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,5.029,416,4.903,427,4.404,428,4.404,429,4.404,763,0.658]],["t/306",[0,0.303,1,0.352,5,1.135,6,0.022,7,0.239,8,0.246,9,0.287,10,0.261,11,0.253,12,0.283,13,0.381,14,0.275,17,1.543,19,1.422,21,0.258,22,1.195,23,0.225,26,0.57,39,1.744,43,2.247,46,1.78,54,3.522,57,0.337,59,1.009,60,1.612,65,0.754,67,2.268,75,2.53,105,1.834,109,0.239,189,3.25,196,3.664,200,2.53,315,2.773,331,2.595,382,4.329,383,3.591,384,2.814,388,3.335,389,2.851,390,2.299,391,2.851,392,2.468,430,4.898,431,4.215,447,4.898,448,4.106,763,0.571,765,2.811]],["t/308",[1,0.274,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,21,0.256,23,0.226,26,0.488,32,2.608,40,3.134,41,2.748,59,1.017,88,2.149,96,4.811,109,0.281,171,1.619,175,5.978,178,4.48,181,3.598,182,5.597,183,3.294,763,0.669]],["t/310",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,2.936,25,2.33,26,0.472,29,2.545,33,3.425,36,4.355,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.8,45,3.844,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,3.844,109,0.271,763,0.647]],["t/312",[0,0.278,1,0.323,5,0.975,6,0.019,7,0.241,8,0.211,9,0.263,10,0.224,11,0.218,12,0.243,13,0.327,14,0.236,21,0.256,22,1.026,23,0.193,26,0.49,59,0.867,109,0.281,189,3.048,300,2.669,324,3.17,327,3.213,328,4.576,442,5.531,443,4.951,444,5.092,763,0.671]],["t/314",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.301,46,2.055,57,0.389,59,0.852,109,0.276,116,3.721,170,2.997,295,1.739,334,5.115,335,4.516,349,5.475,350,4.624,351,4.624,763,0.659]],["t/316",[0,0.275,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,17,1.685,21,0.254,22,1.009,23,0.19,26,0.481,57,0.389,59,0.852,60,1.862,67,2.059,109,0.276,195,2.959,300,2.624,384,3.072,388,2.816,390,2.654,403,4.405,465,4.91,480,3.991,481,4.415,763,0.659]],["t/318",[0,0.303,1,0.353,5,1.136,6,0.022,7,0.226,8,0.246,9,0.287,10,0.261,11,0.254,12,0.283,13,0.382,14,0.276,17,1.752,19,1.647,20,2.011,21,0.255,22,1.197,23,0.225,26,0.571,39,1.544,43,1.988,46,2.061,57,0.461,59,1.01,60,2.081,63,1.657,65,0.873,67,1.945,72,3.226,73,2.931,75,2.239,80,2.523,105,2.512,109,0.212,144,1.86,183,3.256,195,2.268,200,2.931,205,2.268,280,2.718,300,2.011,324,2.389,327,2.421,332,2.636,382,4.003,383,3.178,384,3.338,388,2.824,389,3.302,390,3.148,391,3.302,392,3.187,393,3.613,394,2.676,403,2.852,408,2.9,409,2.9,410,2.9,411,2.9,465,4.159,466,2.805,467,2.488,479,2.9,480,3.059,481,3.384,763,0.505]],["t/320",[0,0.294,1,0.342,5,1.077,6,0.021,7,0.185,8,0.234,9,0.279,10,0.247,11,0.241,12,0.268,13,0.362,14,0.261,17,1.6,20,2.409,21,0.256,22,1.135,23,0.213,26,0.541,39,1.849,43,2.381,57,0.357,59,0.958,60,1.709,63,2.431,72,2.649,73,2.682,105,2.382,109,0.254,183,3.65,189,2.75,205,2.716,280,3.254,300,2.409,324,3.788,327,3.551,328,4.05,332,3.157,384,2.381,390,2.436,392,2.616,442,5.2,443,4.468,444,4.594,466,3.36,467,2.98,479,3.473,763,0.605]],["t/322",[0,0.293,1,0.34,5,1.066,6,0.021,7,0.224,8,0.231,9,0.277,10,0.245,11,0.238,12,0.265,13,0.358,14,0.259,17,1.283,19,1.827,21,0.254,22,1.122,23,0.211,26,0.535,46,2.286,57,0.433,59,0.948,60,1.679,63,1.95,65,0.968,67,1.569,72,3.21,73,2.635,75,2.635,105,2.356,109,0.249,144,2.189,200,3.25,382,4.439,383,3.74,384,3.129,388,2.539,389,3.971,390,2.952,391,3.662,392,3.17,393,4.006,394,3.149,408,3.413,409,3.413,410,3.413,411,3.413,763,0.595]],["t/324",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.724,46,2.055,57,0.389,59,0.852,109,0.276,116,3.721,170,2.997,295,1.739,334,5.115,335,4.516,349,4.624,350,4.624,351,4.624,763,0.659]],["t/326",[0,0.276,1,0.321,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,16,1.623,17,1.433,21,0.255,22,1.016,23,0.191,25,2.393,26,0.485,27,5.25,28,2.98,29,2.613,30,4.447,31,5.145,32,2.597,33,3.517,34,4.776,35,3.572,109,0.278,763,0.664]],["t/328",[0,0.299,1,0.341,2,4.418,3,2.099,4,2.479,5,1.069,6,0.023,7,0.248,8,0.256,9,0.293,10,0.271,11,0.263,12,0.293,13,0.396,14,0.286,15,3.106,16,1.908,17,1.685,18,3.294,19,1.833,20,2.626,21,0.259,22,1.126,23,0.244,24,2.8,25,2.997,26,0.592,27,4.418,28,2.259,29,2.596,30,3.371,31,4.069,32,2.185,33,3.494,34,3.62,35,2.708,36,3.723,37,3.525,38,2.75,39,2.477,40,2.004,41,1.757,42,2.96,43,1.981,44,2.479,45,2.993,46,1.569,47,2.259,48,2.177,49,2.588,50,2.626,51,2.993,57,0.297,65,0.665,75,2.231,80,2.514,109,0.211,138,3.62,144,1.853,171,1.597,208,5.16,209,4.212,217,4.871,243,3.938,763,0.504]],["t/330",[0,0.313,1,0.364,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.246,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,0.925,17,1.918,18,2.708,19,1.724,20,2.755,21,0.26,22,1.27,23,0.239,24,2.411,25,1.363,26,0.606,31,2.334,39,1.156,43,1.489,46,1.179,48,2.74,49,1.945,52,3.9,53,3.01,54,3.345,55,2.96,56,2.334,57,0.483,58,2.291,59,1.057,60,2.309,61,3.9,62,2.479,63,1.778,64,2.38,65,0.5,66,2.654,67,1.933,68,3.553,69,2.497,70,3.078,71,2.534,72,2.774,73,2.403,79,3.9,80,1.89,81,2.96,93,1.191,94,1.917,105,1.742,109,0.159,183,2.67,189,1.72,195,2.433,205,1.698,221,2.428,280,2.035,300,1.506,309,3.01,324,1.788,327,1.813,332,1.974,384,2.494,388,2.316,390,2.183,392,1.636,403,2.135,447,3.714,448,2.721,458,3.714,459,2.794,465,3.411,466,2.101,467,1.863,479,2.172,480,2.291,481,2.534,491,3.714,492,2.794,499,2.794,763,0.378]],["t/332",[0,0.301,1,0.337,5,1.05,6,0.023,7,0.252,8,0.259,9,0.295,10,0.275,11,0.267,12,0.298,13,0.402,14,0.29,16,1.88,17,1.91,19,1.602,21,0.261,22,1.105,23,0.248,25,1.746,26,0.622,29,1.907,37,2.322,39,1.481,46,1.511,53,2.691,57,0.38,59,0.831,60,2.039,65,0.64,70,2.354,72,2.816,73,2.148,94,2.455,105,2.067,108,1.526,109,0.203,128,3.68,138,3.485,144,2.368,169,4.75,170,2.203,171,1.748,172,3.915,174,3.4,181,3.46,200,2.148,217,4.75,218,5.197,221,3.11,222,4.4,223,4.4,243,3.791,295,1.697,358,4.513,359,2.881,360,3.578,363,4.513,370,2.386,371,3.68,384,1.907,389,2.42,390,1.951,391,2.42,392,2.095,393,3.515,394,2.567,408,2.782,409,2.782,410,2.782,411,2.782,763,0.485]],["t/334",[1,0.275,6,0.019,7,0.241,8,0.211,9,0.263,10,0.224,11,0.218,12,0.243,13,0.327,14,0.236,21,0.256,23,0.227,26,0.49,32,2.775,40,2.669,41,2.34,59,1.019,88,2.155,96,4.823,109,0.281,171,1.623,175,5.986,178,4.491,181,3.607,182,5.611,183,3.302,763,0.671]],["t/336",[0,0.294,1,0.342,5,1.076,6,0.021,7,0.227,8,0.233,9,0.279,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,16,1.475,17,1.303,19,1.994,21,0.255,22,1.133,23,0.213,25,2.175,26,0.54,27,4.958,28,2.71,29,2.376,30,4.043,31,4.567,32,2.837,33,3.198,34,4.342,35,3.981,46,1.882,47,2.71,59,0.78,63,1.98,77,2.199,78,3.408,88,2.378,91,2.78,109,0.253,190,2.579,192,3.453,195,2.71,500,4.481,501,3.725,512,3.875,763,0.604]],["t/338",[0,0.294,1,0.272,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.191,26,0.572,29,2.613,42,3.743,50,3.464,57,0.392,65,0.877,109,0.278,170,3.018,295,1.752,353,5.499,354,4.903,355,5.042,356,3.947,357,4.746,763,0.664]],["t/340",[0,0.315,1,0.316,3,2.691,4,3.177,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.234,13,0.315,14,0.227,16,1.577,21,0.252,23,0.186,26,0.562,57,0.381,65,0.852,109,0.271,129,4.42,171,1.562,192,3.01,202,2.824,270,4.145,277,5.161,278,3.703,279,4.321,300,3.524,763,0.645]],["t/342",[0,0.294,1,0.272,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.191,26,0.572,29,2.613,42,3.743,50,3.464,57,0.392,65,0.877,109,0.278,170,3.018,295,1.752,353,5.499,354,4.903,355,5.952,356,3.947,357,4.02,763,0.664]],["t/344",[6,0.019,7,0.206,8,0.212,9,0.264,10,0.225,11,0.219,12,0.244,13,0.329,14,0.238,17,1.455,19,1.97,21,0.257,23,0.227,26,0.492,29,2.652,59,0.871,94,3.414,105,2.165,108,2.122,109,0.283,128,5.117,169,5.838,170,3.063,171,1.631,172,5.444,174,4.727,480,4.08,763,0.674]],["t/346",[0,0.301,1,0.349,5,1.118,6,0.022,7,0.235,8,0.242,9,0.285,10,0.257,11,0.25,12,0.278,13,0.375,14,0.271,16,1.35,19,2.124,21,0.255,22,1.177,23,0.221,24,2.665,25,1.99,26,0.561,29,2.174,32,2.32,33,2.925,35,2.971,36,3.953,37,2.646,38,3.018,39,2.14,40,2.199,41,1.928,42,3.143,43,2.174,44,2.72,45,3.284,46,2.397,47,3.629,48,2.388,49,2.839,50,2.882,51,3.284,59,0.905,69,2.543,74,4.798,75,2.448,76,3.973,77,2.551,78,3.953,88,2.25,91,2.543,109,0.232,190,2.359,192,3.267,195,2.479,500,4.24,501,3.408,512,3.545,763,0.552,765,2.72]],["t/348",[0,0.294,1,0.272,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.191,26,0.572,29,2.613,42,3.743,50,3.464,57,0.392,65,0.877,109,0.278,170,3.018,295,1.752,353,5.499,354,4.903,355,5.042,356,4.66,357,4.02,763,0.664]],["t/350",[6,0.023,7,0.245,8,0.252,9,0.291,10,0.267,11,0.26,12,0.29,13,0.391,14,0.282,16,1.475,21,0.262,23,0.251,25,2.175,26,0.584,29,2.376,57,0.437,59,0.957,65,0.978,109,0.253,171,1.938,178,4.958,186,2.932,187,5.98,188,5.98,189,2.744,190,2.579,191,5.482,193,4.961,194,5.98,195,2.71,196,3.875,197,5.482,198,3.15,200,2.676,201,5.482,763,0.604,765,2.973]],["t/352",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.198,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.668,20,2.58,21,0.253,22,0.992,23,0.186,26,0.473,39,1.981,43,2.551,57,0.383,59,0.838,60,1.831,63,2.126,72,2.838,73,2.873,105,2.483,109,0.272,183,3.805,205,2.909,280,4.156,324,3.064,327,3.106,332,3.382,384,2.551,390,2.61,392,2.803,466,3.599,467,3.192,479,3.721,763,0.648]],["t/354",[6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,13,0.331,14,0.239,17,1.462,19,1.687,21,0.257,23,0.228,26,0.494,29,2.665,59,0.875,105,2.176,109,0.284,128,5.142,169,5.855,170,3.078,171,1.639,172,5.472,174,5.563,763,0.677]],["t/356",[0,0.291,1,0.339,5,1.057,6,0.023,7,0.237,8,0.254,9,0.292,10,0.269,11,0.261,12,0.291,13,0.393,14,0.284,16,1.201,17,1.67,19,1.927,20,1.957,21,0.258,22,1.113,23,0.242,25,1.771,26,0.587,29,1.935,39,1.502,43,1.935,46,2.024,57,0.429,59,1,60,1.834,63,1.612,65,0.858,67,1.297,69,2.264,72,3.183,73,2.878,75,2.878,105,2.707,109,0.206,128,3.733,144,1.81,169,4.795,170,2.235,171,1.572,172,3.972,174,3.449,183,3.198,186,2.388,198,2.565,199,5.081,200,2.878,205,2.915,206,4.275,280,2.644,324,2.324,327,2.355,332,2.565,382,3.932,383,3.092,384,3.044,388,2.1,389,3.243,390,2.928,391,3.243,392,3.144,393,3.548,394,2.604,408,2.822,409,2.822,410,2.822,411,2.822,466,2.729,467,2.421,479,2.822,763,0.492]],["t/358",[0,0.276,1,0.321,2,5.242,3,2.763,4,3.262,5,0.963,6,0.019,7,0.24,8,0.209,9,0.261,10,0.221,11,0.215,12,0.24,13,0.323,14,0.234,15,4.087,16,1.619,17,1.69,18,4.161,19,1.95,20,3.116,21,0.255,22,1.014,23,0.191,24,2.521,25,2.387,26,0.484,109,0.278,763,0.663]],["t/360",[0,0.311,1,0.36,2,3.564,3,1.537,4,1.815,5,1.181,6,0.023,7,0.252,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,15,2.274,16,1.526,17,1.565,18,2.658,19,2.198,20,2.118,21,0.258,22,1.244,23,0.24,24,2.376,25,2.25,26,0.61,29,1.451,32,1.763,33,1.952,35,1.983,36,3.004,37,1.766,38,2.014,39,1.626,40,1.467,41,1.857,42,2.388,43,1.451,44,1.815,45,2.191,46,2.486,47,2.803,48,1.594,49,1.895,50,1.923,51,2.191,57,0.404,59,1.007,60,1.503,65,0.703,67,0.973,68,3.487,69,3.149,70,1.79,71,2.469,72,2.993,73,2.358,74,3.646,75,2.358,76,2.651,77,2.275,78,3.004,82,3.733,83,1.766,84,2.799,88,1.71,91,1.697,93,1.161,94,1.867,105,2.007,109,0.155,116,2.081,144,1.357,170,1.676,171,0.892,186,1.79,190,1.575,192,2.483,195,1.654,198,1.923,199,4.163,200,2.358,205,1.654,206,3.206,295,0.973,334,3.487,335,2.525,349,2.586,350,2.586,351,2.586,382,3.222,383,2.319,384,2.458,388,1.575,389,2.658,390,2.143,391,2.658,392,2.301,393,2.907,394,1.952,408,2.116,409,2.116,410,2.116,411,2.116,480,2.232,500,3.222,501,2.274,512,2.366,763,0.369]],["t/362",[0,0.315,1,0.329,5,0.883,6,0.021,7,0.227,8,0.234,9,0.279,10,0.248,11,0.241,12,0.269,13,0.363,14,0.262,16,1.485,17,1.604,21,0.256,22,0.93,23,0.214,26,0.543,28,2.728,57,0.474,59,0.785,60,1.716,63,1.993,65,0.803,70,2.952,88,2.58,109,0.255,171,1.471,190,2.596,195,2.728,260,3.821,276,5.214,308,4.615,309,4.955,491,5.092,492,4.488,499,4.488,763,0.608]],["t/364",[0,0.313,1,0.268,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,16,1.596,21,0.253,23,0.188,26,0.477,28,2.93,57,0.458,65,0.862,88,2.661,109,0.274,171,1.58,190,2.789,260,4.257,276,5.444,308,4.958,309,4.929,763,0.653]],["t/366",[0,0.301,1,0.327,5,1.07,6,0.021,7,0.225,8,0.232,9,0.278,10,0.246,11,0.239,12,0.267,13,0.359,14,0.26,16,1.462,19,1.491,21,0.255,22,0.916,23,0.212,24,2.801,25,2.156,26,0.582,29,2.897,33,3.17,36,4.155,37,2.867,38,3.27,39,2.25,40,2.382,41,2.089,42,3.903,43,2.355,44,2.947,45,3.558,46,1.865,47,2.686,48,2.587,49,3.076,50,3.841,51,3.558,57,0.353,63,1.962,65,0.79,109,0.251,170,2.72,295,1.579,353,5.165,354,4.419,355,4.544,356,3.558,357,3.623,763,0.599]],["t/368",[0,0.316,1,0.34,3,2.479,4,2.928,5,0.864,6,0.021,7,0.243,8,0.231,9,0.277,10,0.245,11,0.238,12,0.265,13,0.358,14,0.259,16,1.453,17,1.583,21,0.254,22,0.91,23,0.211,26,0.58,57,0.433,59,0.768,60,1.679,63,1.95,65,0.785,67,1.935,109,0.249,129,4.073,171,1.439,192,2.774,195,2.668,202,2.602,270,3.862,277,4.911,278,3.413,279,3.982,300,3.503,384,2.886,388,2.539,390,2.394,403,3.356,465,4.612,480,3.599,481,3.982,763,0.595]],["t/370",[0,0.293,1,0.341,2,4.931,3,2.496,4,2.947,5,1.07,6,0.021,7,0.183,8,0.232,9,0.278,10,0.246,11,0.239,12,0.267,13,0.359,14,0.26,15,3.692,16,1.462,17,1.796,18,3.677,19,1.834,20,3.312,21,0.255,22,1.127,23,0.212,24,2.277,25,2.156,26,0.537,39,1.829,43,2.355,57,0.353,59,0.773,60,1.69,63,2.414,72,2.619,73,2.652,105,2.366,109,0.251,183,3.626,205,2.686,280,3.219,324,2.829,327,2.867,332,3.122,384,2.355,390,2.41,392,2.587,466,3.323,467,2.947,479,3.435,763,0.599]],["t/372",[0,0.274,1,0.318,5,0.949,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,19,2.063,21,0.253,22,0.999,23,0.188,26,0.477,32,2.571,35,3.512,46,2.035,47,2.93,59,0.844,77,2.378,78,3.685,88,2.494,91,3.006,109,0.274,190,2.789,192,3.863,195,2.93,500,4.698,501,4.028,512,4.19,763,0.653]],["t/374",[0,0.3,1,0.348,5,1.111,6,0.022,7,0.213,8,0.241,9,0.284,10,0.255,11,0.248,12,0.277,13,0.373,14,0.27,17,1.795,19,1.905,20,2.172,21,0.254,22,1.17,23,0.22,26,0.558,39,1.667,43,2.148,46,2.166,57,0.451,59,0.988,60,2.159,63,1.79,65,0.721,68,4.554,69,2.513,70,2.651,71,3.655,72,3.72,73,3.389,105,2.457,109,0.229,144,2.009,183,3.422,200,2.419,205,2.449,280,2.935,324,2.58,327,2.615,332,2.847,384,2.735,389,2.725,390,2.798,391,2.725,392,3.005,393,3.797,394,2.89,408,3.132,409,3.132,410,3.132,411,3.132,466,3.03,467,2.687,479,3.132,763,0.546,765,2.687]],["t/376",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.674,89,4.636,90,4.636,91,3.043,92,4.077,109,0.277,763,0.661]],["t/378",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,105,2.083,109,0.272,144,2.387,200,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.222,394,3.433,408,4.436,409,3.721,410,3.721,411,3.721,763,0.648]],["t/380",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.511,89,4.636,90,4.636,91,3.043,92,4.822,109,0.277,763,0.661]],["t/382",[0,0.314,1,0.345,5,0.985,6,0.023,7,0.243,8,0.25,9,0.29,10,0.265,11,0.257,12,0.287,13,0.387,14,0.28,16,1.282,19,1.87,21,0.257,22,1.037,23,0.236,26,0.579,28,2.355,32,2.628,35,2.822,40,2.089,41,1.831,46,1.636,47,2.355,57,0.443,59,0.97,65,0.693,77,1.911,78,2.962,80,2.621,88,2.839,91,3.12,96,3.774,109,0.22,116,2.962,171,1.64,175,5.146,178,3.514,181,3.645,182,4.39,183,2.584,186,2.548,190,2.895,192,3.161,195,2.355,198,2.737,260,3.483,276,4.754,308,3.984,309,4.56,376,4.754,377,3.984,500,4.103,501,3.237,512,3.368,763,0.525]],["t/384",[3,2.845,6,0.019,7,0.244,8,0.215,9,0.266,10,0.228,11,0.221,12,0.247,14,0.241,21,0.258,23,0.229,26,0.581,57,0.403,95,7.058,96,4.907,97,4.292,98,4.907,99,2.407,100,4.907,109,0.286,763,0.682]],["t/386",[0,0.294,1,0.342,5,1.074,6,0.021,7,0.226,8,0.233,9,0.278,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,16,1.472,17,1.596,19,1.501,21,0.255,22,1.132,23,0.213,24,2.813,25,2.171,26,0.54,29,2.371,33,3.191,36,4.172,37,2.886,38,3.291,39,2.259,40,2.398,41,2.102,42,3.318,43,2.371,44,2.967,45,3.581,46,1.878,47,2.704,48,3.606,49,3.8,50,3.143,51,3.581,57,0.356,59,0.778,60,1.701,63,1.975,109,0.253,221,3.866,458,5.064,459,4.448,763,0.603]],["t/388",[6,0.019,7,0.244,8,0.215,9,0.266,10,0.228,11,0.221,12,0.247,14,0.241,21,0.258,23,0.229,26,0.498,57,0.403,58,4.131,88,2.192,97,4.292,99,2.407,109,0.286,110,7.058,112,3.314,113,5.338,114,3.314,763,0.682]],["t/390",[6,0.019,7,0.244,8,0.216,9,0.266,10,0.228,11,0.222,12,0.248,13,0.334,14,0.241,21,0.258,23,0.229,26,0.499,59,0.884,97,4.303,109,0.287,112,3.322,125,7.065,126,5.949,127,6.527,128,5.194,763,0.684]],["t/392",[6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,14,0.239,21,0.257,23,0.228,26,0.494,57,0.4,58,4.1,97,4.26,98,4.871,99,2.389,109,0.284,112,3.289,115,7.036,144,2.494,145,5.889,146,2.759,147,3.159,148,5.889,763,0.677]],["t/394",[6,0.019,7,0.242,8,0.212,9,0.264,10,0.225,11,0.219,12,0.244,14,0.238,21,0.257,23,0.227,25,2.428,26,0.492,57,0.398,59,1.022,97,4.239,104,5.417,109,0.283,112,3.273,134,1.761,143,6.78,146,2.745,176,5.86,177,4.847,178,4.513,763,0.674]],["t/396",[3,2.817,6,0.019,7,0.242,8,0.213,9,0.264,10,0.226,11,0.219,12,0.245,14,0.238,21,0.257,23,0.228,26,0.493,57,0.399,97,4.249,109,0.283,111,7.305,116,3.813,117,6.446,118,6.446,119,4.859,120,4.427,121,5.285,122,2.886,123,6.446,124,5.875,763,0.676]],["t/398",[6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,13,0.331,14,0.239,17,1.462,19,1.687,21,0.257,23,0.228,26,0.494,29,2.665,59,0.875,105,2.176,109,0.284,128,5.142,169,6.209,170,3.078,171,1.639,172,5.472,174,4.751,763,0.677]],["t/400",[1,0.275,6,0.019,7,0.241,8,0.211,9,0.263,10,0.224,11,0.218,12,0.243,13,0.327,14,0.236,21,0.256,23,0.227,26,0.49,32,2.612,40,2.669,41,2.34,59,1.019,88,2.155,96,4.823,109,0.281,171,1.623,175,6.359,178,4.491,181,3.607,182,5.611,183,3.302,763,0.671]],["t/402",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,21,0.258,23,0.228,26,0.496,57,0.401,59,0.877,65,0.897,109,0.285,171,1.643,178,4.547,188,6.801,189,3.086,190,2.9,191,6.165,193,4.036,763,0.679]],["t/404",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,21,0.258,23,0.228,26,0.496,29,2.672,57,0.401,59,0.877,65,0.897,109,0.285,171,1.643,178,4.547,187,6.801,193,4.036,200,3.009,201,6.165,763,0.679]],["t/406",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,16,1.659,21,0.258,23,0.228,25,2.446,26,0.496,109,0.285,171,1.643,186,3.297,193,4.036,194,6.801,195,3.047,196,4.357,197,6.165,198,3.542,763,0.679]],["t/408",[6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,13,0.331,14,0.239,16,1.655,19,1.687,21,0.257,23,0.228,25,2.44,26,0.494,69,3.118,105,2.176,109,0.284,171,1.639,186,3.289,198,3.533,199,6.579,205,3.039,206,5.889,763,0.677]],["t/410",[6,0.019,7,0.243,8,0.215,9,0.265,10,0.227,11,0.221,12,0.246,13,0.332,14,0.24,16,1.663,21,0.258,23,0.229,26,0.497,53,3.779,62,4.46,67,1.796,109,0.285,171,1.647,186,3.306,198,3.551,207,6.808,219,6.18,763,0.681]],["t/412",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,16,1.659,17,1.714,21,0.258,23,0.228,26,0.496,53,3.77,57,0.401,109,0.285,171,1.643,218,6.801,221,4.357,222,6.165,223,6.165,763,0.679]],["t/414",[0,0.239,6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,13,0.331,14,0.239,21,0.257,23,0.228,25,2.44,26,0.494,37,3.245,39,2.423,57,0.4,65,0.894,80,3.382,109,0.284,171,1.639,208,6.579,209,5.667,763,0.677]],["t/416",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,16,1.659,17,1.466,21,0.258,23,0.228,25,2.446,26,0.496,37,3.253,39,2.074,109,0.285,138,4.883,144,2.5,171,1.643,217,6.215,243,5.311,763,0.679]],["t/418",[0,0.234,6,0.019,7,0.24,8,0.209,9,0.222,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.225,37,3.182,39,2.548,57,0.463,99,2.342,109,0.278,134,1.735,135,2.527,141,2.318,171,1.607,186,4.051,198,4.351,255,6.738,256,5.556,257,6.03,763,0.664]],["t/420",[0,0.313,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,23,0.224,24,3.383,26,0.48,28,2.952,57,0.388,65,0.869,70,3.194,109,0.276,171,1.592,258,5.974,259,5.145,260,3.38,261,4.221,262,3.775,263,4.137,763,0.658]],["t/422",[0,0.314,1,0.271,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,16,1.615,17,1.895,21,0.255,23,0.19,26,0.482,28,2.966,60,1.866,107,1.584,109,0.277,171,1.6,214,4.241,233,4.636,264,5.986,265,4.001,266,5.018,763,0.661]],["t/424",[0,0.313,1,0.268,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,16,1.599,21,0.254,23,0.188,26,0.478,28,2.937,57,0.459,65,0.864,88,2.663,109,0.274,171,1.584,190,2.796,260,3.995,276,5.815,308,4.97,309,4.862,763,0.655]],["t/426",[0,0.316,1,0.316,3,2.697,4,3.185,6,0.018,7,0.252,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,21,0.252,23,0.186,26,0.563,57,0.382,65,0.854,109,0.271,129,4.43,171,1.565,192,3.017,202,2.831,270,4.006,277,5.524,278,3.712,279,4.331,300,3.474,763,0.647]],["t/428",[0,0.321,1,0.318,3,2.729,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,16,1.599,18,3.269,21,0.254,23,0.188,26,0.567,40,2.605,41,2.712,105,2.103,109,0.274,171,1.584,265,3.962,295,1.727,301,5.552,302,4.707,305,4.707,306,4.117,763,0.655]],["t/430",[0,0.32,1,0.314,3,2.665,6,0.018,7,0.234,8,0.201,9,0.256,10,0.213,11,0.207,12,0.231,13,0.312,14,0.225,16,1.562,18,3.192,21,0.251,23,0.184,26,0.559,32,2.539,40,2.544,41,2.674,44,3.773,57,0.377,65,0.844,77,2.328,88,2.637,109,0.268,171,1.547,205,2.868,295,1.686,306,4.02,307,5.622,318,4.484,319,4.719,320,4.719,763,0.639]],["t/432",[0,0.275,1,0.32,5,0.958,6,0.019,7,0.202,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,17,1.685,20,2.624,21,0.254,22,1.009,23,0.19,24,2.508,26,0.481,31,4.067,48,2.85,53,3.66,57,0.461,59,0.852,60,1.862,61,5.98,62,4.32,63,2.162,64,4.147,65,0.871,66,4.624,67,1.739,109,0.276,763,0.659]],["t/434",[0,0.278,1,0.323,5,0.972,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,17,1.444,21,0.256,22,1.024,23,0.192,24,2.545,26,0.488,52,6.017,53,3.714,54,4.127,55,5.233,56,4.127,57,0.395,58,4.05,59,0.864,60,1.889,109,0.281,763,0.669]],["t/436",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,2.936,25,2.33,26,0.472,29,2.545,33,3.425,36,4.655,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.185,45,3.844,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,3.844,109,0.271,763,0.647]],["t/438",[0,0.276,1,0.321,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,16,1.623,17,1.433,21,0.255,22,1.016,23,0.191,25,2.393,26,0.485,27,5.586,28,2.98,29,2.613,30,4.447,31,4.836,32,2.597,33,3.517,34,4.776,35,3.572,109,0.278,763,0.664]],["t/440",[0,0.313,1,0.319,6,0.019,7,0.238,8,0.207,9,0.26,10,0.219,11,0.213,12,0.237,13,0.32,14,0.231,21,0.254,23,0.189,26,0.568,57,0.459,65,0.866,109,0.275,112,3.186,144,2.416,171,1.588,270,3.186,295,1.731,300,2.611,322,5.821,323,4.981,324,3.679,326,4.981,327,3.143,328,3.584,763,0.656]],["t/442",[0,0.304,1,0.322,6,0.019,7,0.24,8,0.21,9,0.262,10,0.222,11,0.216,12,0.241,13,0.325,14,0.235,20,3.125,21,0.255,23,0.191,26,0.573,29,2.62,57,0.463,65,0.879,109,0.279,112,3.233,171,1.611,295,1.756,329,6.339,330,5.378,332,3.473,763,0.666]],["t/444",[0,0.276,1,0.321,2,5.58,3,2.763,4,3.262,5,0.963,6,0.019,7,0.24,8,0.209,9,0.261,10,0.221,11,0.215,12,0.24,13,0.323,14,0.234,15,4.087,16,1.619,17,1.69,18,3.909,19,1.95,20,3.116,21,0.255,22,1.014,23,0.191,24,2.521,25,2.387,26,0.484,109,0.278,763,0.663]],["t/446",[0,0.294,1,0.273,4,3.278,6,0.019,7,0.24,8,0.21,9,0.262,10,0.222,11,0.216,12,0.241,13,0.325,14,0.235,21,0.255,23,0.191,26,0.573,39,2.551,43,2.62,57,0.393,109,0.279,112,3.233,171,1.611,220,3.324,295,1.756,333,6.339,356,3.957,364,5.378,365,4.67,763,0.666]],["t/448",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.301,46,2.055,57,0.389,59,0.852,109,0.276,116,3.721,170,2.997,295,1.739,334,5.449,335,4.516,349,4.624,350,4.624,351,4.624,763,0.659]],["t/450",[0,0.294,1,0.272,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.191,26,0.572,29,2.613,42,3.743,50,3.464,57,0.392,65,0.877,109,0.278,170,3.018,295,1.752,353,5.851,354,4.903,355,5.042,356,3.947,357,4.02,763,0.664]],["t/452",[0,0.319,1,0.336,5,0.925,6,0.018,7,0.234,8,0.201,9,0.255,10,0.212,11,0.206,12,0.23,13,0.311,14,0.224,21,0.251,22,0.974,23,0.22,26,0.464,39,2.335,59,0.822,65,0.84,109,0.267,170,2.892,190,2.717,215,3.007,315,3.09,325,3.186,331,2.892,352,5.485,367,4.575,368,5.344,369,4.988,763,0.636]],["t/454",[0,0.295,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,16,1.631,17,1.804,21,0.256,22,1.021,23,0.192,26,0.574,60,1.884,109,0.28,181,3.589,295,1.761,358,5.863,359,3.967,360,4.927,763,0.667]],["t/456",[0,0.295,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,16,1.631,17,1.804,21,0.256,22,1.021,23,0.192,26,0.574,60,1.884,109,0.28,181,3.589,295,1.761,363,5.863,370,3.286,371,5.067,763,0.667]],["t/458",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,19,1.638,21,0.254,22,1.007,23,0.189,26,0.48,46,2.05,57,0.388,59,0.85,65,0.869,67,1.735,75,2.915,105,2.113,109,0.276,200,2.915,382,5.029,383,4.137,384,3.067,388,2.809,389,3.284,390,2.648,391,3.284,392,2.843,763,0.658]],["t/460",[0,0.295,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,21,0.256,22,1.021,23,0.192,26,0.487,57,0.394,88,2.685,91,3.073,109,0.28,116,3.766,181,3.589,186,3.241,198,3.481,376,5.863,377,5.067,763,0.667]],["t/462",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,109,0.276,189,2.989,370,3.239,388,2.809,412,5.225,413,4.057,414,4.808,415,4.719,416,4.903,427,4.404,428,4.404,429,4.404,763,0.658]],["t/464",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,105,2.083,109,0.272,144,2.387,200,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.511,394,3.433,408,3.721,409,3.721,410,3.721,411,3.721,763,0.648]],["t/466",[0,0.277,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,21,0.256,22,1.021,23,0.192,26,0.487,39,2.039,43,2.626,59,0.862,67,2.074,109,0.28,189,3.033,196,4.283,315,3.241,331,3.033,388,2.85,430,5.725,431,4.927,763,0.667]],["t/468",[0,0.278,1,0.323,5,0.972,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,17,1.699,21,0.256,22,1.024,23,0.192,26,0.488,54,4.127,59,0.864,60,1.889,67,2.077,109,0.281,189,3.041,388,2.857,447,5.731,448,4.811,763,0.669]],["t/470",[0,0.278,1,0.323,5,0.975,6,0.019,7,0.241,8,0.211,9,0.263,10,0.224,11,0.218,12,0.243,13,0.327,14,0.236,21,0.256,22,1.026,23,0.193,26,0.49,59,0.867,109,0.281,189,3.048,300,2.669,324,3.17,327,3.213,328,4.308,442,5.875,443,4.951,444,5.092,763,0.671]],["t/472",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.198,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.668,20,2.58,21,0.253,22,0.992,23,0.186,26,0.473,39,1.981,43,2.551,57,0.383,59,0.838,60,1.831,63,2.126,72,2.838,73,2.873,105,2.483,109,0.272,183,4.066,205,2.909,280,3.487,324,3.064,327,3.106,332,3.382,384,2.551,390,2.61,392,2.803,466,3.599,467,3.192,479,3.721,763,0.648]],["t/474",[0,0.275,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,17,1.685,21,0.254,22,1.009,23,0.19,26,0.481,57,0.389,59,0.852,60,1.862,67,2.059,109,0.276,195,2.959,300,2.624,384,3.072,388,2.816,390,2.654,403,3.721,465,5.23,480,3.991,481,4.415,763,0.659]],["t/476",[0,0.278,1,0.323,5,0.972,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,17,1.699,21,0.256,22,1.024,23,0.192,26,0.488,48,3.404,49,3.439,57,0.395,59,0.864,60,1.889,109,0.281,221,4.293,458,5.731,459,4.939,763,0.669]],["t/478",[0,0.277,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,17,1.697,21,0.256,22,1.021,23,0.192,26,0.487,57,0.394,59,0.862,60,1.884,70,3.241,109,0.28,195,2.995,309,4.365,491,5.725,492,4.927,499,4.927,763,0.667]],["t/480",[0,0.274,1,0.318,5,0.949,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,19,2.063,21,0.253,22,0.999,23,0.188,26,0.477,32,2.571,35,3.512,46,2.035,47,2.93,59,0.844,77,2.378,78,3.685,88,2.494,91,3.006,109,0.274,190,2.789,192,3.62,195,2.93,500,5.014,501,4.028,512,4.19,763,0.653]],["t/482",[0,0.278,1,0.323,5,0.977,6,0.019,7,0.242,8,0.212,9,0.264,10,0.224,11,0.218,12,0.243,13,0.328,14,0.237,19,1.967,21,0.257,22,1.029,23,0.193,26,0.491,46,2.095,59,0.869,69,3.095,77,2.448,82,5.881,83,3.221,84,5.104,109,0.282,763,0.672]],["t/484",[0,0.278,1,0.323,5,0.977,6,0.019,7,0.242,8,0.212,9,0.264,10,0.224,11,0.218,12,0.243,13,0.328,14,0.237,17,1.704,21,0.257,22,1.029,23,0.193,26,0.491,57,0.397,59,0.869,60,1.898,69,3.095,79,6.029,80,3.357,81,5.259,109,0.282,763,0.672]],["t/486",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.455,86,4.527,87,4.917,88,2.511,89,4.636,90,4.636,91,3.043,92,4.077,109,0.277,763,0.661]],["t/488",[0,0.278,1,0.323,5,0.972,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,19,1.961,21,0.256,22,1.024,23,0.192,26,0.488,46,2.085,47,3.002,59,0.864,69,3.08,74,5.731,75,2.965,76,4.811,77,2.436,78,3.776,109,0.281,763,0.669]],["t/490",[0,0.276,1,0.321,5,0.963,6,0.019,7,0.24,8,0.209,9,0.261,10,0.221,11,0.215,12,0.24,13,0.323,14,0.234,17,1.69,19,1.95,21,0.255,22,1.014,23,0.191,26,0.484,46,2.065,57,0.391,59,0.856,60,1.871,68,5.46,69,3.05,70,3.217,71,4.436,72,3.426,73,2.936,109,0.278,763,0.663]],["t/492",[0,0.184,1,0.214,6,0.017,7,0.11,9,0.12,32,2.81,57,0.212,67,1.894,98,3.758,102,4.985,103,2.999,104,6.394,106,0.93,107,1.62,120,2.355,122,3.066,134,1.766,146,2.128,147,2.872,150,1.699,152,4.674,153,3.363,180,7.557,226,2.47,227,1.554,235,2.686,246,2.812,248,1.593,254,3.26,273,3.858,282,2.261,295,1.783,317,3.125,331,2.375,336,2.028,339,2.585,343,4.371,362,3.074,365,2.521,378,2.307,379,2.729,398,4.543,400,2.176,414,2.217,416,2.261,419,2.307,432,3.429,487,2.462,504,3.474,542,3.429,543,6.014,577,1.655,578,2.307,585,2.654,586,3.429,695,3.125,767,2.904,768,3.637,769,4.337,770,4.123,771,4.337,772,3.223,773,3.125,774,3.915,775,3.429,776,3.031,777,1.795,778,2.407,779,2.355,780,2.099,781,2.217,782,4.337,783,4.337,784,2.028,785,3.263,786,3.429,787,2.099,788,4.337,789,4.337,790,7.429,791,3.499,792,2.812,793,2.904,794,3.125,795,3.637,796,4.337,797,2.307,798,4.337,799,4.79,800,6.306,801,8.409,802,3.263,803,8.3,804,5.848,805,4.337,806,3.429,807,7.429,808,4.221,809,6.306,810,4.371,811,8.156,812,4.543,813,4.337,814,2.521,815,4.337,816,3.637,817,4.337,818,3.429,819,3.44,820,1.745,821,4.99,822,3.125,823,2.904,824,3.286,825,4.337,826,4.337,827,4.337,828,4.337,829,4.337,830,4.337,831,4.337,832,3.637,833,3.429,834,3.915,835,3.263,836,3.637,837,3.007,838,4.337,839,4.337,840,4.337,841,2.307,842,4.337,843,2.585,844,3.007,845,3.915,846,3.125,847,3.263,848,3.637,849,4.337,850,4.337,851,4.337,852,3.915,853,7.362,854,4.337,855,4.337,856,7.429,857,6.306,858,6.306,859,4.985,860,4.744,861,4.337,862,6.306,863,6.306,864,5.692,865,3.915,866,4.337,867,1.903,868,4.337,869,4.337,870,1.847,871,2.136,872,2.261,873,4.337,874,2.136,875,4.337,876,2.261,877,4.337,878,4.337,879,4.337,880,3.637,881,4.337,882,4.337,883,3.915,884,4.337,885,3.915,886,3.915,887,3.637,888,1.655,889,1.655]],["t/494",[0,0.201,1,0.167,6,0.027,25,2.814,32,2.37,57,0.337,65,1.159,67,1.074,80,3.295,83,1.951,87,5.618,106,1.054,107,1.369,114,1.978,122,1.739,130,1.467,134,1.724,146,2.327,147,1.899,150,3.119,226,3.381,227,1.76,235,4.379,248,1.805,295,1.507,339,2.928,342,3.185,343,3.407,356,2.42,400,3.994,414,2.512,418,2.561,422,4.337,482,3.289,504,2.093,525,3.092,542,7.652,547,3.289,564,3.185,571,4.217,581,2.124,776,2.005,777,2.033,797,3.666,799,4.56,819,3.161,820,3.204,859,3.885,870,3.676,887,4.12,888,1.875,889,1.875,890,3.185,891,4.914,892,4.914,893,4.12,894,10.039,895,4.914,896,7.963,897,6.893,898,9.424,899,4.07,900,4.234,901,3.724,902,4.419,903,10.282,904,6.495,905,7.282,906,8.632,907,4.177,908,4.436,909,3.743,910,4.108,911,6.677,912,8.632,913,8.632,914,4.436,915,4.914,916,4.914,917,4.914,918,4.914,919,4.914,920,4.914,921,4.914,922,4.914,923,4.914,924,4.914,925,4.914,926,4.914,927,4.914]],["t/496",[0,0.178,1,0.14,6,0.021,57,0.298,66,2.401,67,0.903,106,0.886,107,1.209,122,1.462,134,1.564,138,6.59,145,6.121,146,2.053,147,1.597,155,4.502,161,5.062,226,1.618,227,2.855,235,4.546,246,5.165,248,2.234,251,2.864,254,4.295,269,4.822,295,2.195,336,1.932,342,5.506,418,4.427,484,1.734,504,3.913,577,1.576,581,3.672,767,5.948,772,4.342,773,7.052,776,1.685,777,1.709,778,2.292,779,2.243,780,1.999,781,2.111,810,5.007,812,5.204,814,3.536,819,4.027,820,2.907,821,5.197,888,1.576,889,1.576,909,3.304,928,4.13,929,6.16,930,3.108,931,4.13,932,6.084,933,4.13,934,4.13,935,4.13,936,4.13,937,9.787,938,9.787,939,9.787,940,9.787,941,7.223,942,7.223,943,7.223,944,7.223,945,3.828,946,8.494,947,4.073,948,8.494,949,7.757,950,8.834,951,8.494,952,8.494,953,7.123,954,7.667,955,8.207,956,6.716,957,7.123,958,6.391,959,6.716,960,7.667,961,6.716,962,7.667,963,4.937,964,7.667,965,8.494,966,8.494,967,8.494]],["t/498",[0,0.169,1,0.131,6,0.018,26,0.234,57,0.284,67,2.377,87,2.018,98,2.308,104,2.198,106,0.831,107,1.152,114,1.559,122,2.926,134,1.879,141,2.011,145,2.79,146,2.791,147,1.497,155,1.782,161,5.742,168,4.82,202,1.405,226,3.239,227,1.387,235,4.166,246,5.626,248,1.422,254,3.808,269,2.198,271,2.909,281,4.507,290,4.585,295,1.268,310,1.943,311,3.759,336,1.811,340,2.437,342,2.51,413,4.436,414,5.646,417,5.505,418,4.309,484,1.626,504,2.47,577,3.154,581,1.674,765,3.374,767,3.882,772,1.98,776,1.58,777,1.603,778,2.149,779,2.103,780,1.874,781,1.98,792,2.51,797,2.059,799,4.662,819,3.445,820,3.492,821,2.369,824,2.018,837,2.685,841,4.397,867,4.438,888,1.478,889,1.478,929,4.021,949,5.231,950,5.235,953,4.863,954,5.235,955,4.863,956,3.062,957,3.247,958,2.914,959,3.062,960,3.496,961,3.062,962,3.496,963,2.251,964,3.496,968,2.79,969,4.179,970,3.873,971,3.873,972,5.8,973,3.873,974,3.873,975,3.873,976,3.873,977,5.8,978,3.882,979,4.021,980,3.247,981,2.914,982,2.437,983,2.79,984,3.247,985,3.496,986,3.247,987,3.496,988,2.685,989,3.873,990,3.873,991,3.873,992,3.873,993,3.873,994,3.873,995,3.873,996,3.873,997,3.873,998,3.873,999,3.873,1000,3.873,1001,5.8,1002,9.253,1003,3.873,1004,5.8,1005,3.873,1006,5.8,1007,3.873,1008,9.908,1009,3.873,1010,5.8,1011,3.873,1012,5.8,1013,3.873,1014,5.8,1015,3.873,1016,5.8,1017,3.873,1018,2.149,1019,3.496,1020,3.247,1021,2.592,1022,3.247,1023,3.873,1024,3.873,1025,3.873,1026,3.873,1027,3.873,1028,3.873,1029,3.873,1030,3.873,1031,3.496,1032,3.247,1033,5.271,1034,5.235,1035,3.873,1036,4.585,1037,5.8,1038,3.873,1039,3.873,1040,3.873,1041,3.873,1042,3.873,1043,3.247,1044,9.635,1045,9.635,1046,9.635,1047,3.873,1048,9.635,1049,9.635,1050,9.461,1051,3.873,1052,5.8,1053,3.873,1054,3.873,1055,3.873,1056,3.873,1057,3.873,1058,3.873,1059,3.062,1060,3.873]],["t/500",[0,0.316,1,0.216,24,3.557,57,0.401,66,3.695,99,2.802,106,1.363,107,1.629,134,2.149,136,5.331,184,4.783,202,2.306,213,3.967,220,3.393,248,3.333,260,4.227,261,5.278,262,4.72,263,5.172,272,5.331,295,1.793,336,2.973,415,3.189,581,2.748,795,5.331,814,3.695,819,4.202,820,4.259,822,4.581,888,2.425,889,2.425,929,4.407,947,4.256,1061,4.783,1062,3.528,1063,5.026,1064,6.357,1065,6.357,1066,6.357,1067,5.331,1068,6.357,1069,5.738,1070,5.026,1071,4.783,1072,5.026,1073,5.738,1074,6.357,1075,5.331,1076,5.738,1077,6.357,1078,5.331,1079,5.738,1080,6.647]],["t/502",[0,0.058,6,0.022,8,0.167,15,1.012,17,0.604,24,0.624,26,0.12,57,0.097,59,0.685,63,1.201,64,4.685,66,6.434,67,1.642,80,3.766,99,0.578,103,4.152,106,0.424,107,0.671,114,3.022,119,2.013,120,1.835,122,1.85,130,1.009,132,1.918,134,1.782,138,1.179,141,1.512,146,3.167,147,2.903,155,1.554,157,1.245,166,4.797,185,3.332,186,1.779,202,2.724,210,1.283,220,3.551,224,2.067,225,1.426,226,2.675,227,2.691,228,2.103,229,2.542,232,3.81,234,3.198,235,4.348,246,2.19,247,2.067,248,3.022,254,2.997,262,0.941,268,1.964,269,1.918,271,3.207,295,1.965,311,2.866,316,1.426,336,3.639,339,2.635,356,0.975,365,1.15,400,0.993,401,0.958,418,1.031,421,3.707,424,1.211,439,3.933,469,1.372,484,0.831,504,4.17,545,2.57,546,4.133,547,4.817,548,6.083,549,5.138,557,2.671,571,1.211,577,2.439,578,2.78,581,0.855,585,3.198,765,2.609,767,1.325,768,1.659,775,2.671,776,3.064,777,3.108,778,4.168,779,4.078,780,3.766,781,3.839,784,0.925,785,1.489,786,1.565,797,1.797,799,3.094,819,3.267,820,3.312,821,5.035,822,2.434,824,2.304,836,2.833,837,2.342,841,4.99,843,2.635,846,1.426,867,3.296,888,0.755,889,0.755,907,0.958,909,1.075,968,3.185,978,1.325,981,1.489,982,1.245,1018,4.67,1062,1.875,1071,1.489,1078,2.833,1080,1.372,1081,1.979,1082,3.05,1083,1.979,1084,4.421,1085,3.379,1086,1.979,1087,3.379,1088,3.379,1089,2.671,1090,1.565,1091,9.605,1092,7.196,1093,6.393,1094,5.227,1095,6.393,1096,1.659,1097,1.372,1098,1.659,1099,1.372,1100,1.565,1101,1.489,1102,1.075,1103,1.426,1104,1.565,1105,1.659,1106,1.659,1107,5.87,1108,3.379,1109,1.979,1110,5.87,1111,3.379,1112,1.979,1113,1.979,1114,8.415,1115,1.786,1116,9.608,1117,8.02,1118,9.203,1119,8.415,1120,7.596,1121,7.195,1122,5.744,1123,8.415,1124,8.415,1125,9.384,1126,7.51,1127,7.51,1128,1.979,1129,2.434,1130,1.979,1131,1.372,1132,4.421,1133,4.421,1134,3.379,1135,5.227,1136,3.379,1137,7.51,1138,4.421,1139,7.51,1140,7.51,1141,1.245,1142,4.718,1143,7.196,1144,6.393,1145,3.379,1146,6.393,1147,5.227,1148,2.833,1149,3.05,1150,3.379,1151,3.379,1152,1.979,1153,1.786,1154,1.979,1155,1.659,1156,1.979,1157,6.393,1158,6.393,1159,6.393,1160,8.229,1161,1.659,1162,1.979,1163,1.565,1164,1.979,1165,1.979,1166,1.979,1167,1.979,1168,1.245,1169,2.126,1170,3.495,1171,1.979,1172,1.979,1173,1.979,1174,1.565,1175,1.565,1176,1.979,1177,7.196,1178,1.979,1179,1.979,1180,1.979,1181,1.979,1182,1.979,1183,1.979,1184,1.979,1185,1.979,1186,1.979,1187,1.979,1188,1.979,1189,1.979,1190,1.979,1191,1.979,1192,1.979,1193,3.379,1194,4.421,1195,2.781,1196,1.426,1197,1.659,1198,1.979,1199,1.979,1200,1.659,1201,6.393,1202,5.227,1203,3.05,1204,3.379,1205,4.432,1206,6.393,1207,4.421,1208,3.379,1209,4.421]],["t/504",[0,0.151,1,0.175,6,0.025,17,1.07,21,0.131,26,0.244,41,0.708,48,3.393,57,0.293,59,0.641,63,2.049,64,1.275,67,2.468,80,1.013,87,1.275,98,1.458,99,0.715,103,1.164,106,0.525,107,0.802,114,1.625,120,1.329,121,1.586,122,2.668,130,0.731,132,1.389,134,1.944,136,2.052,138,1.458,141,1.915,146,2.235,147,1.561,150,2.792,153,3.906,155,2.752,159,1.329,165,2.052,167,3.386,168,1.696,185,1.389,202,0.887,220,1.671,224,1.497,226,2.953,227,0.877,228,4.269,229,1.841,232,2.406,235,3.823,240,2.617,247,2.47,248,1.893,254,2.626,268,5.445,269,1.389,271,3.953,278,4.455,282,3.118,291,3.848,295,0.883,306,4.386,311,1.586,315,0.985,316,1.763,336,1.144,337,2.292,338,3.945,339,1.458,356,1.205,362,2.133,365,1.422,369,1.164,401,1.184,413,1.251,417,3.154,418,2.105,419,1.301,424,1.497,439,4.502,467,0.998,484,3.165,487,4.474,504,1.72,525,1.539,536,1.935,544,1.763,577,2.526,581,1.745,586,1.935,591,2.54,673,3.038,695,7.277,765,0.998,770,3.674,772,1.251,773,2.91,776,1.648,777,1.013,778,1.358,779,2.193,780,1.954,781,1.251,784,3.333,785,3.879,787,3.204,797,3.182,799,4.072,802,3.879,804,1.497,806,3.193,808,2.703,810,2.799,812,2.91,814,3.478,816,3.386,818,4.076,819,3.621,820,3.612,821,1.497,823,1.638,824,2.687,836,2.052,841,1.301,843,1.458,846,3.715,864,2.209,865,2.209,867,4.592,870,2.548,871,1.205,872,1.275,874,1.989,876,1.275,888,0.934,889,0.934,890,1.586,899,2.635,901,3.096,907,2.495,947,4.005,958,1.841,959,1.935,968,2.91,982,1.539,983,1.763,988,3.574,1018,2.861,1020,2.052,1033,2.105,1062,2.861,1072,1.935,1078,2.052,1080,2.799,1096,2.052,1097,1.696,1098,2.052,1099,1.696,1100,1.935,1101,1.841,1102,1.329,1103,2.91,1104,1.935,1105,2.052,1106,2.052,1129,5.136,1141,2.54,1170,1.935,1196,1.763,1210,2.209,1211,2.799,1212,1.935,1213,6.223,1214,5.983,1215,2.052,1216,2.447,1217,4.59,1218,4.038,1219,2.209,1220,2.209,1221,3.645,1222,2.209,1223,2.209,1224,2.209,1225,4.038,1226,4.038,1227,1.935,1228,1.696,1229,1.935,1230,2.447,1231,2.447,1232,2.447,1233,2.209,1234,2.447,1235,3.038,1236,3.79,1237,2.406,1238,3.451,1239,2.406,1240,2.91,1241,1.935,1242,3.038,1243,2.447,1244,5.976,1245,2.91,1246,7.539,1247,2.447,1248,2.209,1249,2.447,1250,2.447,1251,2.209,1252,2.052,1253,6.805,1254,3.451,1255,1.935,1256,2.209,1257,4.941,1258,2.447,1259,2.447,1260,2.209,1261,1.935,1262,1.763,1263,2.447,1264,5.983,1265,2.447,1266,4.653,1267,2.447,1268,2.447,1269,2.447,1270,2.447,1271,1.586,1272,2.447,1273,2.447,1274,5.155,1275,2.47,1276,2.447,1277,1.935,1278,5.552,1279,1.841,1280,2.447,1281,2.447,1282,3.386,1283,5.017,1284,3.243,1285,4.653,1286,1.586,1287,2.447,1288,1.935,1289,1.358,1290,5.155,1291,2.447,1292,2.052,1293,3.945,1294,3.645,1295,2.447,1296,2.209,1297,2.447,1298,5.155,1299,2.447,1300,2.447,1301,4.038,1302,2.447,1303,2.447,1304,2.447,1305,4.038,1306,2.447,1307,1.763,1308,2.447,1309,2.447,1310,2.447,1311,2.447,1312,1.841,1313,2.447,1314,1.638,1315,2.447,1316,2.193,1317,2.47,1318,5.983,1319,4.038,1320,2.447,1321,2.447,1322,2.447,1323,2.447,1324,2.209,1325,2.209,1326,2.209,1327,2.209,1328,2.209,1329,2.447,1330,5.017,1331,2.447,1332,2.447,1333,2.447,1334,2.447,1335,2.447,1336,2.447,1337,2.447,1338,2.447,1339,2.447,1340,2.447]],["t/506",[0,0.205,1,0.2,6,0.025,24,1.243,40,1.3,41,1.14,57,0.455,65,0.643,66,5.078,67,2.147,99,1.152,103,1.875,106,0.845,107,1.168,114,2.828,121,2.556,122,2.08,134,1.273,146,2.372,147,2.716,150,2.752,153,4.304,155,3.583,156,3.934,157,3.698,158,3.934,159,4.229,160,3.934,161,4.965,162,3.934,177,2.349,193,3.461,202,2.549,220,1.631,226,2.752,227,3.242,241,6.227,248,1.448,282,2.055,289,2.966,291,3.416,295,1.703,299,3.559,313,4.422,331,2.214,336,1.844,362,3.447,378,3.126,400,2.948,413,5.021,415,5.43,419,4.646,422,2.48,433,2.015,483,2.895,484,1.655,487,2.238,504,3.962,577,2.242,667,6.343,765,2.398,770,3.9,772,3.981,776,2.867,777,1.631,778,2.188,779,2.141,780,1.908,781,2.015,784,2.749,787,2.844,791,4.322,792,3.81,793,2.639,794,4.235,799,2.844,814,2.291,819,2.79,820,2.365,824,4.717,859,3.117,867,4.172,870,4.321,871,4.683,872,4.955,874,4.683,880,3.306,888,1.504,889,1.504,890,2.556,901,3.896,907,1.908,963,3.416,982,3.698,1033,5.044,1091,7.886,1097,2.733,1131,2.733,1195,2.48,1236,2.097,1262,5.063,1293,4.965,1341,2.639,1342,3.942,1343,4.422,1344,4.647,1345,5.305,1346,4.422,1347,2.48,1348,3.942,1349,5.877,1350,5.877,1351,3.942,1352,3.942,1353,7.027,1354,9.507,1355,7.027,1356,7.027,1357,7.027,1358,5.877,1359,5.877,1360,5.877,1361,7.027,1362,7.027,1363,7.027,1364,7.027,1365,7.027,1366,7.027,1367,3.942,1368,3.942,1369,3.117,1370,3.117,1371,3.942,1372,3.942,1373,4.075,1374,3.942,1375,3.942,1376,3.942,1377,3.942,1378,2.841,1379,2.097,1380,3.942,1381,5.063,1382,3.942,1383,7.789,1384,5.612,1385,3.942,1386,3.942,1387,3.942,1388,3.942]],["t/508",[0,0.079,1,0.052,6,0.022,32,1.37,57,0.177,63,1.498,67,1.205,83,2.65,92,1.378,100,2.158,103,1.722,104,0.866,106,0.327,107,0.536,114,1.759,119,3.779,121,0.989,122,3.262,134,1.29,146,2.011,147,2.795,150,1.056,153,3.473,155,4.357,156,1.022,157,4.2,158,1.805,159,4.965,160,1.805,161,5.041,162,1.805,166,2.818,177,0.91,202,1.585,226,2.73,227,3.702,248,2.024,273,1.649,291,3.204,295,1.091,300,0.503,331,1.015,336,2.044,339,5.402,362,2.066,369,0.726,397,0.887,399,1.943,400,5.119,401,4.914,413,4.184,415,4.623,416,5.649,419,1.434,421,3.665,422,5.959,423,1.869,424,3.645,483,2.459,484,1.132,487,0.866,504,4.366,545,5.269,577,1.668,581,3.918,599,2.434,765,2.431,770,2.426,772,1.378,776,1.784,777,1.116,778,0.847,779,1.966,780,1.305,781,1.378,784,1.694,787,1.752,791,2.426,792,1.748,794,7.352,795,7.601,797,4.82,819,2.365,820,2.398,822,1.943,823,6.068,824,4.724,834,8.182,841,0.812,847,2.029,853,3.269,859,7.167,867,2.419,870,3.178,871,2.715,872,2.873,874,2.715,876,4.724,886,8.182,888,0.582,889,0.582,900,4.82,901,2.044,907,1.752,908,8.182,909,4.965,914,8.182,963,0.887,982,1.696,1018,0.847,1019,2.434,1021,1.805,1043,2.261,1097,1.058,1121,1.28,1148,4.996,1149,5.378,1227,1.207,1228,1.058,1229,7.167,1235,6.82,1330,3.665,1346,2.029,1369,1.207,1370,1.207,1389,1.1,1390,1.526,1391,3.665,1392,2.696,1393,1.526,1394,3.621,1395,10.37,1396,3.621,1397,1.207,1398,2.696,1399,2.696,1400,1.022,1401,2.261,1402,5.724,1403,1.526,1404,8.03,1405,8.182,1406,9.065,1407,9.065,1408,9.065,1409,6.068,1410,8.182,1411,6.284,1412,7.167,1413,9.065,1414,9.065,1415,7.601,1416,6.531,1417,1.378,1418,1.378,1419,1.378,1420,1.526,1421,1.378,1422,1.526,1423,1.378,1424,2.696,1425,1.378,1426,2.696,1427,1.378,1428,2.696,1429,1.378,1430,2.696,1431,1.378,1432,1.378,1433,1.526,1434,1.378,1435,1.378,1436,1.526,1437,1.378,1438,1.526,1439,1.526,1440,1.526,1441,5.513,1442,1.526,1443,1.526,1444,1.526,1445,1.526,1446,1.526,1447,1.526,1448,1.526,1449,1.526,1450,1.526,1451,1.526,1452,1.526,1453,1.526,1454,1.526,1455,1.526,1456,1.526,1457,1.526,1458,1.526,1459,1.526,1460,1.526,1461,0.989,1462,1.526,1463,3.946,1464,3.456,1465,4.371,1466,4.371,1467,4.371,1468,4.371,1469,4.371,1470,1.526,1471,1.526,1472,1.526]],["t/510",[0,0.123,1,0.088,6,0.027,10,0.071,11,0.069,19,0.532,31,1.318,40,3.581,41,3.133,44,3.87,57,0.429,59,0.451,65,0.844,67,2.245,75,1.964,77,0.778,88,0.687,92,2.155,103,2.005,106,0.553,107,1.227,114,1.697,120,2.29,122,2.186,130,1.597,134,1.67,146,2.085,147,2.632,150,3.262,155,3.363,166,4.484,180,3.334,202,1.529,226,2.863,227,0.924,234,2.58,235,3.428,241,1.727,242,5.124,248,1.964,254,2.988,271,4.49,285,3.036,295,1.169,318,5.294,336,1.972,337,1.464,338,3.681,339,1.537,340,1.623,341,1.941,342,1.672,343,1.788,344,1.788,345,1.859,346,1.537,348,3.58,359,2.634,362,1.745,400,2.115,401,2.04,415,1.294,419,1.372,420,2.328,433,1.318,449,1.578,483,3.042,484,3.378,504,1.796,538,4.599,543,1.623,545,3.109,562,2.039,577,2.357,581,1.823,585,5.573,703,2.163,765,2.182,772,2.734,773,1.859,776,1.72,784,2.501,799,4.535,801,4.484,819,3.062,820,2.942,821,2.58,824,2.198,832,2.163,844,2.923,867,3.532,870,4.082,871,3.964,872,4.194,874,3.964,888,0.984,889,0.984,899,1.318,900,1.372,901,1.206,902,1.431,907,2.989,910,2.513,947,4.135,949,1.941,961,2.039,968,3.038,1102,1.401,1168,3.365,1169,4.599,1197,2.163,1200,2.163,1212,3.334,1233,3.806,1238,2.823,1271,3.467,1275,1.578,1284,4.599,1286,4.738,1314,1.727,1379,4.918,1389,5.267,1461,1.672,1463,3.806,1473,6.963,1474,2.579,1475,1.859,1476,2.328,1477,1.344,1478,4.217,1479,7.31,1480,9.758,1481,5.348,1482,4.217,1483,2.328,1484,3.536,1485,2.579,1486,2.328,1487,3.806,1488,2.163,1489,4.484,1490,5.575,1491,4.484,1492,4.217,1493,4.217,1494,2.579,1495,2.163,1496,4.217,1497,2.328,1498,5.348,1499,4.217,1500,8.047,1501,2.579,1502,6.266,1503,6.081,1504,2.579,1505,6.177,1506,2.579,1507,2.579,1508,6.177,1509,9.248,1510,2.163,1511,3.536,1512,2.579,1513,2.579,1514,2.163,1515,2.163,1516,2.579,1517,2.579,1518,2.579,1519,2.579,1520,4.217,1521,2.579,1522,2.163,1523,2.328,1524,2.163,1525,2.328,1526,2.163,1527,2.328,1528,3.334,1529,2.163,1530,2.039,1531,2.039,1532,1.672,1533,2.579,1534,1.941,1535,2.579,1536,2.328,1537,2.579,1538,2.579,1539,2.328,1540,2.328,1541,2.328,1542,2.328,1543,2.328,1544,2.328,1545,3.536,1546,2.579,1547,2.579,1548,2.579,1549,2.579,1550,4.827,1551,2.328,1552,2.039,1553,2.163,1554,1.623,1555,6.177,1556,6.177,1557,6.177,1558,4.217,1559,4.217,1560,2.579,1561,2.579]],["t/512",[0,0.06,1,0.038,6,0.025,7,0.028,10,0.031,11,0.055,19,0.718,26,0.068,42,0.762,57,0.373,65,0.381,67,1.56,75,1.665,80,1.877,83,0.446,103,0.974,105,2.673,106,0.241,107,0.561,114,0.824,120,0.61,121,0.728,122,0.398,134,1.075,146,2.408,147,1.919,150,2.346,152,3.768,153,3.23,155,1.86,156,0.752,157,2.544,158,1.371,159,1.889,160,0.752,161,2.073,162,1.371,166,2.318,168,3.144,174,0.653,177,0.67,192,0.434,193,0.554,202,0.743,226,2.094,227,2.146,234,2.474,235,2.551,242,0.846,248,0.752,269,0.638,271,2.275,278,3.303,285,0.638,295,0.884,331,0.771,336,1.32,337,0.638,338,2.703,339,0.67,340,0.707,341,0.846,342,0.728,343,0.779,344,0.779,345,0.81,346,2.41,348,2.329,356,0.554,359,2.234,362,2.695,378,1.089,394,0.493,397,1.64,400,2.029,401,1.366,403,0.526,404,0.942,418,1.471,419,1.501,424,0.688,433,1.778,449,5.033,466,0.517,471,1.541,472,2.366,484,2.387,487,1.602,504,1.202,543,2.189,545,2.022,546,0.889,547,0.752,549,1.541,564,2.621,577,0.781,578,1.089,594,0.942,597,0.942,765,0.836,770,2.517,772,1.047,776,1.151,777,0.465,779,1.532,784,1.627,785,0.846,787,0.991,791,1.931,792,1.328,793,0.752,794,3.268,799,4.331,804,0.688,808,0.752,814,0.653,819,1.971,820,1.998,821,2.129,824,2.588,867,2.495,870,3.66,871,3.42,872,3.619,874,3.514,888,0.429,889,0.429,890,1.328,893,0.942,899,1.047,900,1.089,901,1.32,902,1.137,907,1.684,947,1.371,963,0.653,968,1.476,982,2.189,1033,0.586,1061,0.846,1062,1.566,1097,0.779,1101,0.846,1102,1.532,1121,0.942,1141,1.289,1168,2.853,1169,4.097,1236,1.501,1237,0.67,1262,0.81,1271,1.829,1275,1.726,1277,0.889,1284,4.097,1286,4.221,1289,0.624,1293,0.67,1312,1.541,1314,0.752,1316,1.532,1317,1.253,1341,0.752,1343,0.846,1344,0.889,1346,1.541,1369,0.889,1370,0.889,1373,1.42,1379,1.089,1391,0.942,1400,0.752,1411,0.779,1477,1.471,1484,1.717,1488,0.942,1489,0.942,1503,4.814,1510,0.942,1511,1.717,1514,1.717,1515,0.942,1522,1.717,1524,1.717,1526,1.717,1528,2.751,1529,1.717,1530,1.619,1531,1.619,1532,1.328,1545,1.717,1554,0.707,1562,1.124,1563,1.124,1564,1.014,1565,5.132,1566,1.829,1567,1.014,1568,1.717,1569,1.014,1570,5.132,1571,1.014,1572,1.124,1573,0.942,1574,1.124,1575,2.048,1576,2.547,1577,1.717,1578,2.547,1579,2.048,1580,1.849,1581,2.048,1582,1.849,1583,1.014,1584,0.728,1585,1.124,1586,1.124,1587,1.849,1588,1.124,1589,2.048,1590,4.966,1591,5.347,1592,4.535,1593,1.124,1594,2.048,1595,2.048,1596,1.849,1597,2.048,1598,1.124,1599,1.014,1600,2.048,1601,2.048,1602,2.048,1603,1.849,1604,0.638,1605,3.14,1606,0.942,1607,1.014,1608,1.849,1609,1.014,1610,1.717,1611,0.942,1612,1.014,1613,0.942,1614,1.014,1615,1.014,1616,1.014,1617,1.124,1618,1.014,1619,0.846,1620,1.014,1621,1.014,1622,1.014,1623,0.942,1624,4.044,1625,1.124,1626,1.014,1627,4.044,1628,4.044,1629,2.822,1630,7.619,1631,7.134,1632,8.327,1633,8.327,1634,7.619,1635,5.686,1636,8.327,1637,6.512,1638,5.686,1639,5.686,1640,7.619,1641,7.619,1642,8.327,1643,7.134,1644,8.593,1645,5.686,1646,7.134,1647,6.512,1648,6.512,1649,4.535,1650,5.686,1651,5.686,1652,7.134,1653,7.134,1654,9.326,1655,5.686,1656,8.327,1657,5.686,1658,6.512,1659,6.512,1660,4.535,1661,5.686,1662,9.012,1663,5.686,1664,2.822,1665,7.619,1666,6.512,1667,5.686,1668,2.822,1669,6.512,1670,6.512,1671,7.619,1672,2.822,1673,5.686,1674,5.686,1675,4.535,1676,6.512,1677,4.535,1678,7.134,1679,7.619,1680,6.512,1681,4.535,1682,7.619,1683,2.822,1684,6.512,1685,5.686,1686,9.012,1687,5.686,1688,2.822,1689,5.686,1690,5.686,1691,8.327,1692,5.686,1693,8.008,1694,6.512,1695,7.619,1696,7.134,1697,8.008,1698,4.535,1699,4.535,1700,2.822,1701,5.686,1702,6.512,1703,2.822,1704,4.535,1705,6.512,1706,2.822,1707,5.686,1708,6.512,1709,5.686,1710,7.619,1711,6.512,1712,7.134,1713,6.512,1714,4.535,1715,4.535,1716,4.768,1717,7.134,1718,2.822,1719,5.686,1720,6.512,1721,6.512,1722,5.686,1723,4.535,1724,4.535,1725,6.512,1726,5.686,1727,6.512,1728,6.512,1729,4.535,1730,6.512,1731,6.512,1732,2.822,1733,5.686,1734,2.822,1735,5.686,1736,5.686,1737,5.686,1738,2.822,1739,5.46,1740,5.686,1741,5.686,1742,5.686,1743,4.535,1744,5.686,1745,5.686,1746,2.822,1747,7.134,1748,2.547,1749,5.686,1750,2.822,1751,2.822,1752,6.512,1753,2.822,1754,4.535,1755,2.822,1756,2.822,1757,4.535,1758,2.822,1759,2.822,1760,2.822,1761,2.822,1762,4.535,1763,2.822,1764,2.822,1765,2.822,1766,2.822,1767,2.822,1768,2.822,1769,2.822,1770,4.535,1771,4.535,1772,2.822,1773,2.822,1774,2.822,1775,2.822,1776,2.822,1777,2.822,1778,1.124,1779,1.124,1780,1.014,1781,1.124,1782,1.124,1783,1.124,1784,1.124,1785,1.124,1786,1.124,1787,1.124,1788,1.124,1789,1.124,1790,1.124,1791,1.124,1792,1.124,1793,2.917,1794,3.14,1795,1.124,1796,1.124,1797,1.124]],["t/514",[0,0.196,1,0.16,6,0.026,32,2.554,57,0.328,63,1.283,75,1.735,83,2.661,102,3.735,105,1.258,106,1.013,107,1.943,119,4.644,122,2.373,130,1.41,134,2.015,141,2.98,146,2.263,147,1.826,150,1.85,152,5.336,153,4.212,174,6.357,185,5.084,193,2.327,213,2.286,224,2.89,226,3.997,227,1.692,228,3.188,235,3.613,247,2.89,248,1.735,268,3.897,270,3.413,271,4.493,279,2.621,291,4.53,295,1.466,378,3.565,418,2.462,422,2.972,484,3.56,504,2.012,547,3.162,577,3.893,578,2.512,581,2.042,767,3.162,776,2.735,777,1.955,780,4.104,791,2.621,792,3.062,819,3.694,820,3.744,821,2.89,823,3.162,824,2.462,870,2.012,871,2.327,872,2.462,874,2.327,888,3.236,889,3.236,947,4.488,956,3.735,957,3.961,1018,2.621,1020,3.961,1034,4.264,1075,3.961,1090,3.735,1102,4.606,1129,3.403,1251,4.264,1252,3.961,1397,6.161,1584,5.498,1793,3.961,1798,4.264,1799,3.554,1800,4.724,1801,4.724,1802,3.735,1803,6.704,1804,5.678,1805,6.704,1806,6.704,1807,6.704,1808,6.704,1809,6.704,1810,6.704,1811,6.704,1812,4.724,1813,4.724,1814,3.735,1815,4.724,1816,4.264,1817,4.724,1818,4.724,1819,4.264,1820,4.724,1821,4.724,1822,3.062,1823,4.724,1824,8.957,1825,4.724,1826,4.724,1827,4.724,1828,6.704,1829,4.724,1830,4.724,1831,4.724,1832,4.724,1833,4.724,1834,4.724,1835,4.724,1836,8.482,1837,6.704,1838,6.704,1839,9.304,1840,7.793,1841,4.724,1842,4.724,1843,4.724,1844,4.724,1845,4.724,1846,4.724,1847,6.704,1848,4.724,1849,6.704]],["t/516",[0,0.091,1,0.105,6,0.026,7,0.045,9,0.05,10,0.05,11,0.083,17,0.321,19,2.273,23,0.043,41,1.187,57,0.414,65,0.535,67,2.176,71,0.995,75,2.223,76,1.068,77,0.541,83,0.712,99,0.524,103,3.87,104,1.017,105,1.092,106,0.384,107,0.972,114,1.249,120,0.973,121,1.162,122,1.957,130,0.535,134,1.72,146,2.859,147,2.656,150,3.111,152,4.704,153,3.763,155,3.161,156,1.2,157,1.128,158,1.2,159,3.002,160,1.2,161,1.068,162,1.2,164,1.618,166,3.512,177,1.068,192,0.693,193,1.528,202,1.125,213,0.867,220,1.284,226,2.928,227,1.47,234,2.51,235,3.184,241,1.2,242,5.976,248,1.507,271,3.037,272,1.503,273,1.097,278,4.216,285,1.017,288,1.417,289,1.349,292,1.128,295,0.897,317,2.236,331,1.545,335,1.017,336,2.287,337,1.017,338,3.608,339,1.068,340,1.128,341,1.349,342,1.162,343,1.243,344,1.243,345,1.291,346,3.294,348,3.701,359,2.982,362,3.196,365,1.804,369,1.951,378,1.65,394,0.787,397,1.804,400,3.258,401,2.675,404,2.602,417,1.097,418,2.549,419,2.182,424,1.898,433,2.097,449,1.898,471,4.159,472,5.077,483,0.883,484,3.138,487,3.436,504,3.29,538,4.526,541,1.503,543,3.478,544,2.956,545,3.519,549,2.335,557,1.417,564,2.011,571,1.097,577,1.565,578,2.182,581,1.341,585,3.382,594,4.101,595,1.503,597,1.503,695,2.236,703,1.503,765,2.804,770,3.36,772,2.5,776,1.674,777,0.742,778,0.995,779,2.656,780,0.867,781,0.916,784,2.831,787,2.93,791,3.068,792,2.011,793,1.2,794,4.362,797,1.65,799,4.774,819,3.066,820,3.196,821,2.992,823,1.2,824,2.138,837,2.151,844,1.243,860,2.335,867,3.838,870,4.315,871,4.307,872,4.558,874,4.307,888,0.684,889,0.684,890,2.011,899,1.586,900,1.65,901,1.919,902,1.722,907,1.985,909,0.973,911,1.503,947,2.077,949,1.349,956,6.106,961,1.417,963,1.042,982,3.077,1033,0.934,1036,1.417,1062,0.995,1097,1.243,1101,1.349,1102,2.228,1141,3.077,1153,1.618,1168,3.809,1169,4.997,1170,1.417,1195,3.077,1197,3.44,1200,1.503,1236,3.22,1237,1.068,1261,1.417,1262,1.291,1271,4.664,1275,2.51,1277,1.417,1279,3.087,1282,1.503,1284,5.12,1286,5.149,1289,0.995,1312,2.335,1314,1.2,1343,1.349,1344,1.417,1346,2.335,1369,1.417,1370,1.417,1373,2.151,1379,1.65,1389,4.68,1400,1.2,1410,2.801,1411,2.151,1416,2.236,1477,0.934,1483,1.618,1484,3.44,1486,1.618,1487,1.618,1488,1.503,1489,1.503,1490,3.704,1491,1.503,1495,1.503,1503,5.763,1510,1.503,1511,2.602,1514,2.602,1515,1.503,1522,2.602,1523,2.801,1524,2.602,1525,2.801,1526,2.602,1527,2.801,1528,3.867,1529,2.602,1530,2.453,1531,2.453,1532,2.011,1539,1.618,1540,1.618,1541,1.618,1542,1.618,1543,1.618,1544,1.618,1545,4.101,1550,3.704,1552,1.417,1553,1.503,1554,2.581,1564,1.618,1565,7.346,1566,3.171,1567,3.704,1568,4.636,1569,1.618,1570,7.346,1571,1.618,1573,1.503,1576,2.801,1577,3.44,1578,1.618,1582,2.801,1583,1.618,1584,2.011,1596,2.801,1599,1.618,1603,2.801,1604,1.761,1605,4.415,1606,1.503,1607,1.618,1608,2.801,1609,1.618,1614,1.618,1615,1.618,1616,1.618,1618,1.618,1619,1.349,1620,1.618,1621,1.618,1622,1.618,1623,1.503,1626,6.494,1780,2.801,1793,4.636,1794,4.99,1799,1.349,1822,1.162,1850,1.618,1851,4.891,1852,1.792,1853,1.792,1854,1.792,1855,2.801,1856,1.618,1857,1.618,1858,1.792,1859,1.792,1860,1.618,1861,1.417,1862,1.792,1863,1.792,1864,1.792,1865,1.792,1866,1.792,1867,1.792,1868,1.503,1869,7.195,1870,6.054,1871,2.335,1872,6.054,1873,5.528,1874,5.528,1875,4.891,1876,6.494,1877,6.495,1878,5.528,1879,5.528,1880,5.528,1881,1.792,1882,1.792,1883,1.792,1884,1.792,1885,1.618,1886,1.618,1887,1.792,1888,1.792,1889,1.792,1890,1.792,1891,3.103,1892,1.792,1893,3.103,1894,3.103,1895,3.103,1896,2.801,1897,2.453,1898,3.103,1899,3.103,1900,2.453,1901,3.103,1902,3.103,1903,3.103,1904,3.103,1905,4.103,1906,3.103,1907,3.103,1908,1.792,1909,1.792,1910,3.103,1911,1.792,1912,1.792,1913,3.103,1914,1.792,1915,1.792,1916,1.792,1917,1.792,1918,1.792,1919,3.103,1920,3.103,1921,3.103,1922,6.054,1923,1.792,1924,1.792,1925,1.792,1926,1.792,1927,1.792,1928,1.792,1929,1.792,1930,1.792,1931,1.792,1932,1.792,1933,1.792,1934,1.792,1935,1.792,1936,1.792,1937,1.792,1938,1.792,1939,1.792,1940,1.792,1941,1.792,1942,1.792,1943,1.792,1944,1.792,1945,1.792,1946,1.792,1947,1.792,1948,1.792,1949,1.792,1950,1.792,1951,1.792,1952,1.792,1953,1.792,1954,1.792,1955,1.792,1956,1.792,1957,1.792]],["t/518",[0,0.211,1,0.178,6,0.026,18,2.17,56,2.68,57,0.353,106,1.124,107,1.637,122,2.552,130,1.565,134,2.015,146,2.996,147,2.787,174,3.047,193,5.528,226,3.477,227,2.953,232,5.731,248,3.26,251,4.999,254,4.084,271,4.824,291,3.047,295,1.576,313,7.002,336,2.452,342,3.399,418,2.733,504,2.233,577,3.387,596,4.732,776,2.942,777,2.984,778,2.909,779,2.847,780,2.537,781,2.68,797,3.835,819,3.695,820,3.745,824,2.733,846,3.778,860,3.945,888,2,889,2,909,2.847,910,4.297,953,4.396,982,3.299,1213,5.714,1476,6.509,1613,4.396,1958,10.036,1959,5.243,1960,7.211,1961,7.211,1962,5.243,1963,5.243,1964,5.243,1965,5.243,1966,5.243,1967,7.211,1968,7.211,1969,5.243,1970,7.211,1971,5.243,1972,4.732,1973,4.732,1974,5.243,1975,5.243,1976,10.919,1977,5.243,1978,5.243,1979,5.243,1980,5.243,1981,5.243,1982,5.243,1983,5.243,1984,5.243,1985,5.243,1986,8.242,1987,8.242,1988,8.242,1989,5.243,1990,5.243,1991,5.243,1992,5.243,1993,7.211,1994,5.243]],["t/520",[0,0.269,1,0.104,6,0.026,18,1.268,42,1.14,57,0.419,67,1.977,70,1.949,99,0.896,100,1.826,106,0.657,107,0.962,122,2.63,130,0.915,134,1.912,146,2.792,147,2.321,150,1.897,210,1.987,220,1.268,224,3.674,226,3.775,227,2.151,230,4.061,232,5.261,235,1.305,248,2.506,254,3.631,260,3.995,269,1.74,295,1.313,309,5.152,310,4.303,311,4.817,312,6.938,313,5.591,316,2.208,336,1.433,338,1.826,362,3.269,378,2.576,419,2.576,484,1.286,504,1.305,525,1.928,577,2.603,581,2.596,591,3.047,765,4.382,776,2.45,777,2.004,778,1.701,779,1.664,780,1.483,781,1.567,799,3.302,819,3.505,820,3.553,841,5.712,843,1.826,867,2.995,870,2.906,885,6.159,888,1.169,889,1.169,901,3.191,1033,4.713,1195,5.555,1236,1.63,1237,1.826,1238,2.052,1239,1.826,1240,2.208,1242,2.306,1254,6.053,1271,5.363,1316,1.664,1317,1.875,1411,2.125,1995,4.372,1996,4.327,1997,11.009,1998,3.065,1999,3.065,2000,3.065,2001,4.372,2002,3.065,2003,4.843,2004,4.843,2005,4.843,2006,3.065,2007,9.518,2008,4.843,2009,7.901,2010,7.901,2011,7.901,2012,6.824,2013,8.829,2014,7.901,2015,4.843,2016,8.829,2017,6.824,2018,6.824,2019,7.431,2020,7.431,2021,4.843,2022,4.843,2023,3.065,2024,4.843,2025,3.065,2026,3.065,2027,3.065,2028,3.065,2029,6.005,2030,3.065,2031,3.065,2032,3.065,2033,3.065,2034,3.065,2035,3.065,2036,4.843,2037,6.824,2038,6.005,2039,6.005,2040,3.065,2041,3.065,2042,8.274,2043,3.065,2044,3.065,2045,3.065,2046,3.065,2047,3.065,2048,3.065,2049,3.065,2050,4.843]],["t/522",[0,0.189,1,0.153,6,0.026,15,3.312,18,4.395,23,0.107,57,0.43,67,2.183,77,2.654,103,3.609,106,0.966,107,1.819,114,2.607,122,2.686,130,2.626,134,1.643,146,2.187,147,2.505,150,3.251,155,3.818,157,4.775,159,4.121,193,2.218,202,2.35,213,3.135,226,3.251,227,2.321,235,3.232,240,2.919,248,2.379,251,3.122,254,3.33,268,2.618,295,0.985,306,3.955,309,2.072,318,4.411,321,8.717,336,2.106,346,2.684,357,2.259,362,3.435,418,2.347,419,5.23,483,3.738,484,2.72,502,6,503,4.076,504,1.918,530,3.561,564,4.2,577,1.718,581,2.801,776,2.644,777,1.864,778,2.499,779,2.445,780,2.179,781,2.302,819,3.013,820,3.34,848,3.776,867,2.843,870,3.535,871,3.738,872,3.955,874,4.978,888,1.718,889,1.718,890,2.919,899,3.879,901,3.882,1018,2.499,1131,3.122,1213,6.349,1215,5.433,1236,2.395,1237,2.684,1238,3.015,1239,2.684,1240,3.245,1241,3.561,1242,4.875,1307,6.958,1314,4.337,1461,5.701,1477,2.347,1503,3.122,1534,4.875,1554,2.833,1871,3.388,2051,4.065,2052,6.479,2053,8.794,2054,6.479,2055,8.3,2056,6.479,2057,4.669,2058,4.504,2059,7.374,2060,4.504,2061,4.065,2062,4.504,2063,3.561,2064,4.504,2065,4.504,2066,6.479,2067,4.504,2068,4.504,2069,6.479,2070,6.85,2071,4.504,2072,4.065,2073,4.504,2074,9.657,2075,4.504,2076,4.504,2077,4.504,2078,4.504,2079,4.504,2080,4.504,2081,4.504,2082,4.504,2083,4.504]],["t/524",[0,0.262,1,0.235,6,0.026,9,0.106,32,1.052,48,0.823,57,0.338,59,0.528,65,0.965,67,2.325,75,1.407,77,1.487,88,2.883,92,2.519,100,3.428,103,2.736,106,0.493,107,1.143,114,1.542,119,2.937,120,2.08,122,2.036,130,1.144,134,1.496,146,2.473,147,2.224,150,3.008,155,2.267,157,2.41,159,4.786,166,4.077,168,5.529,180,1.816,185,1.304,192,0.888,202,1.389,226,3.31,227,2.475,228,1.092,234,1.405,235,0.978,248,2.929,249,3.029,254,1.681,273,1.405,278,4.192,279,1.274,295,1.258,298,2.073,315,3.21,316,2.76,317,2.76,337,1.304,340,3.101,362,0.95,373,3.458,386,5.792,397,2.865,417,1.405,419,2.037,449,2.344,452,1.926,469,1.592,484,2.415,501,1.174,502,3.897,503,3.101,504,0.978,507,3.458,530,1.816,534,1.816,543,1.445,544,1.655,545,1.335,547,2.565,571,1.405,572,2.073,577,3.043,581,2.131,765,3.254,770,5.625,772,1.958,775,1.816,776,1.563,777,2.646,780,2.385,784,2.305,787,1.854,801,3.212,804,1.405,810,2.656,812,2.76,819,2.742,820,3.09,822,2.76,824,1.197,832,1.926,843,2.937,844,2.656,846,1.655,848,1.926,867,2.806,870,3.681,883,2.073,888,0.876,889,0.876,899,1.174,901,3.427,907,1.111,909,2.08,910,2.937,945,1.445,1018,1.274,1036,3.897,1043,1.926,1061,1.728,1062,1.274,1069,2.073,1082,2.073,1102,2.08,1148,1.926,1203,2.073,1236,4.768,1237,3.81,1238,4.28,1239,3.81,1240,4.607,1241,1.816,1242,4.811,1271,6.868,1277,6.681,1279,1.728,1312,2.882,1316,1.247,1379,1.221,1461,2.483,1464,7.292,1477,1.197,1502,1.728,1503,2.656,1534,2.882,1554,1.445,1573,1.926,1739,1.926,1802,4.548,1804,2.565,1819,2.073,1822,1.489,1860,2.073,1871,1.728,1885,2.073,1897,1.816,2051,2.073,2057,1.655,2059,1.926,2063,1.816,2084,3.831,2085,1.816,2086,3.831,2087,2.297,2088,2.297,2089,1.728,2090,1.816,2091,2.297,2092,2.297,2093,6.908,2094,1.926,2095,7.679,2096,2.297,2097,4.929,2098,8.643,2099,6.394,2100,3.831,2101,4.929,2102,3.831,2103,5.362,2104,2.297,2105,1.728,2106,2.297,2107,9.433,2108,3.831,2109,2.297,2110,2.297,2111,2.297,2112,2.297,2113,6.615,2114,6.908,2115,6.908,2116,6.394,2117,10.382,2118,6.394,2119,6.394,2120,6.394,2121,6.394,2122,6.394,2123,6.394,2124,6.394,2125,6.394,2126,6.394,2127,6.908,2128,6.908,2129,2.297,2130,2.297,2131,2.297,2132,2.297,2133,2.297,2134,3.831,2135,3.831,2136,3.831,2137,2.297,2138,2.297,2139,2.297,2140,2.297,2141,2.297,2142,2.297,2143,2.297,2144,2.297,2145,2.297,2146,2.297,2147,4.929,2148,2.297,2149,4.929,2150,2.297,2151,4.929,2152,2.297,2153,2.297,2154,2.297,2155,2.297,2156,2.297,2157,2.297,2158,2.297,2159,2.297,2160,2.297,2161,1.926,2162,2.297,2163,2.297,2164,1.816,2165,1.816,2166,2.073,2167,2.297,2168,1.655,2169,2.297,2170,2.297,2171,2.073,2172,2.297,2173,2.073,2174,2.297,2175,2.073]],["t/526",[0,0.207,1,0.308,6,0.026,32,3.09,48,2.998,57,0.195,67,2.331,106,0.855,107,1.177,114,1.604,122,2.097,134,2.065,135,2.469,141,2.757,146,2.387,147,3.027,150,2.77,202,2.565,215,1.3,226,2.77,227,1.428,235,4.061,246,2.583,247,2.438,248,1.463,254,3.436,269,2.262,271,4.4,278,3.364,295,1.986,315,1.604,331,1.501,337,3.363,400,1.999,426,5.321,475,2.999,484,1.673,501,2.037,504,1.697,534,4.685,577,2.698,774,7.917,776,1.626,777,1.649,780,1.928,819,3.785,820,3.837,833,3.151,852,3.597,860,5.892,876,2.077,888,1.52,889,1.52,905,4.458,909,4.252,984,8.525,1205,4.108,1236,3.151,1238,2.668,1260,5.348,1604,4.751,1804,2.668,2176,4.108,2177,2.583,2178,3.985,2179,3.985,2180,3.151,2181,3.985,2182,3.151,2183,3.151,2184,3.597,2185,3.597,2186,3.985,2187,9.703,2188,3.985,2189,3.985,2190,3.985,2191,3.985,2192,3.151,2193,8.998,2194,7.073,2195,9.703,2196,5.925,2197,3.985,2198,5.925,2199,10.074,2200,5.925,2201,5.925,2202,5.925,2203,5.925,2204,5.348,2205,9.331,2206,6.469,2207,8.771,2208,3.985,2209,3.985,2210,3.985,2211,3.985,2212,3.985,2213,3.985,2214,3.985,2215,3.985,2216,3.985,2217,3.985,2218,3.985,2219,3.985,2220,3.985,2221,3.985,2222,3.985,2223,3.985,2224,3.985,2225,3.985,2226,3.985,2227,3.985,2228,3.985,2229,3.985,2230,5.925,2231,3.597,2232,3.342,2233,3.985,2234,3.985,2235,3.985,2236,3.985,2237,3.985,2238,3.151,2239,3.985,2240,4.968,2241,4.269,2242,3.985,2243,3.342,2244,3.985]],["t/528",[0,0.121,1,0.086,6,0.024,7,0.244,20,0.833,32,1.849,42,0.939,57,0.203,63,2.564,65,0.276,67,1.582,77,0.762,88,0.672,99,0.738,100,3.141,101,1.637,103,1.971,106,0.542,107,0.823,114,1.016,119,2.47,122,2.159,130,0.754,134,1.728,146,2.443,147,2.358,150,1.623,151,5.325,152,2.608,153,3.276,155,3.098,156,2.775,157,3.837,158,1.691,160,3.528,162,2.775,166,3.908,192,4.337,193,4.999,226,3.126,227,2.185,228,3.203,229,1.9,248,1.522,288,4.822,289,3.966,290,4.167,291,4.944,295,1.334,336,1.938,362,2.181,369,1.201,399,6.8,433,1.291,460,3.732,484,1.74,487,5.357,504,4.711,509,2.28,528,3.475,577,2.569,581,1.092,695,7.666,776,2.151,777,2.181,778,1.402,779,2.862,780,2.006,781,2.119,784,2.465,787,2.551,791,2.3,797,1.343,819,3.169,820,3.212,867,3.176,870,3.082,871,3.765,872,3.984,874,4.293,876,2.16,888,1.581,889,3.64,890,1.637,899,1.291,900,1.343,904,5.752,909,1.372,963,5.545,1018,2.3,1227,1.997,1228,1.751,1248,2.28,1257,2.873,1293,5.624,1314,1.691,1341,1.691,1373,7.037,1397,1.997,1400,1.691,1401,2.118,1402,7.46,1405,8.519,1417,2.28,1418,2.28,1419,2.28,1421,6.9,1423,2.28,1425,6.533,1427,6.533,1429,6.533,1431,2.28,1432,2.28,1434,2.28,1435,2.28,1437,3.741,1604,1.434,2245,2.526,2246,4.145,2247,2.28,2248,2.526,2249,5.271,2250,8.841,2251,6.735,2252,5.271,2253,2.526,2254,2.526,2255,9.438,2256,9.438,2257,7.982,2258,7.645,2259,7.237,2260,2.526,2261,4.145,2262,2.526,2263,4.145,2264,8.507,2265,4.145,2266,8.507,2267,4.145,2268,4.145,2269,2.526,2270,2.526,2271,4.145,2272,2.526,2273,7.237,2274,2.526,2275,2.526,2276,2.526,2277,2.526,2278,2.526,2279,2.526,2280,2.526,2281,4.145,2282,2.526,2283,4.145,2284,2.526,2285,2.526,2286,2.526,2287,2.526,2288,2.526,2289,2.526,2290,2.526,2291,4.145,2292,1.82,2293,2.986,2294,4.145,2295,5.115,2296,4.145,2297,2.526]],["t/530",[0,0.224,1,0.194,6,0.025,24,1.805,32,2.367,48,3.985,57,0.374,59,0.923,64,2.985,67,2.098,88,1.525,98,3.413,106,1.228,107,1.713,114,2.305,122,2.027,134,1.993,146,2.584,147,2.214,150,2.998,153,3.466,166,2.927,167,4.802,168,5.307,202,2.077,226,2.243,227,2.743,228,4.101,235,4.293,247,3.504,248,2.103,254,3.359,260,2.439,278,4.101,295,1.674,336,2.678,338,4.562,484,3.213,487,4.345,504,2.439,577,2.185,581,2.475,765,2.337,772,2.927,776,2.337,777,2.37,778,3.178,779,3.11,780,3.704,781,2.927,799,5.071,802,4.309,819,3.654,820,3.861,824,2.985,841,3.045,860,4.309,867,2.513,870,3.673,888,2.185,889,2.185,901,3.58,909,3.11,958,4.309,988,3.97,1033,2.985,1062,3.178,1129,4.126,1141,3.603,1219,5.169,1220,5.169,1221,5.169,1222,5.169,1266,5.169,1271,3.712,1283,4.802,1316,4.157,1317,3.504,1324,5.169,1325,5.169,1326,5.169,1327,5.169,1328,5.169,1896,5.169,2232,4.802,2243,4.802,2298,5.727,2299,9.206,2300,5.727,2301,5.727,2302,5.727,2303,5.727,2304,5.727,2305,5.727,2306,5.727,2307,7.655,2308,5.727,2309,5.727,2310,5.169,2311,5.169,2312,5.727,2313,5.727,2314,5.727,2315,5.727,2316,5.169,2317,5.727,2318,5.727,2319,5.727,2320,5.727]],["t/532",[0,0.076,1,0.05,3,0.509,6,0.027,24,2.806,28,0.548,37,0.585,38,1.595,48,0.937,53,0.678,56,0.754,57,0.072,59,0.158,63,0.401,64,1.836,65,1.169,67,1.277,69,0.562,75,0.541,80,2.019,83,1.937,101,0.956,102,2.067,106,0.316,107,0.519,112,0.593,114,2.172,122,1.911,132,0.837,134,1.056,144,1.301,146,0.882,147,2.258,150,1.911,155,0.678,159,0.801,161,0.879,170,0.555,181,0.657,185,1.484,189,0.555,195,0.548,200,0.541,202,1.958,212,2.216,213,4.55,224,0.902,226,3.52,227,3.219,232,3.482,240,2.284,241,2.358,248,2.287,254,2.564,260,3.446,261,0.784,268,0.857,278,4.382,282,0.768,285,0.837,286,0.987,295,0.932,310,4.798,316,1.884,337,0.837,339,1.558,346,0.879,357,0.74,362,1.082,378,1.39,379,2.682,387,0.928,417,0.902,433,1.801,449,1.6,482,3.911,483,4.339,484,3.088,525,0.928,538,1.645,550,2.651,561,1.062,577,2.887,578,0.784,581,1.523,591,1.645,665,1.166,776,2.203,777,2.019,781,0.754,784,1.223,787,2.063,814,1.52,819,2.143,820,1.963,824,0.768,835,1.967,841,2.595,867,2.141,870,3.979,871,3.378,872,3.834,874,4.238,888,0.562,889,0.998,899,3.506,900,3.648,901,2.282,902,2.707,907,4.307,910,2.541,929,2.956,930,1.109,945,0.928,963,0.857,969,1.884,980,2.954,983,1.062,1021,0.987,1022,1.236,1033,2.543,1062,0.818,1102,2.649,1122,0.987,1141,0.928,1195,1.645,1228,1.022,1229,2.785,1254,3.266,1296,1.331,1307,3.516,1316,1.42,1317,0.902,1347,5.542,1378,1.884,1379,5.16,1381,6.891,1389,1.884,1391,3.575,1400,4.393,1409,2.854,1411,1.022,1416,1.062,1477,3.712,1604,1.484,1861,2.785,1996,1.062,2085,3.371,2089,2.651,2090,2.785,2105,1.109,2168,1.062,2176,1.813,2177,0.956,2238,1.166,2292,3.516,2293,4.942,2321,2.067,2322,1.474,2323,1.474,2324,2.067,2325,7.434,2326,7.337,2327,1.166,2328,4.685,2329,4.923,2330,8.605,2331,2.067,2332,1.166,2333,5.983,2334,1.474,2335,2.615,2336,2.615,2337,3.371,2338,1.474,2339,1.474,2340,1.236,2341,5.983,2342,1.474,2343,5.983,2344,7.284,2345,1.474,2346,1.474,2347,4.268,2348,2.785,2349,1.109,2350,2.067,2351,1.166,2352,3.523,2353,2.067,2354,2.067,2355,2.067,2356,1.236,2357,1.331,2358,3.849,2359,3.18,2360,2.36,2361,1.331,2362,5.274,2363,2.067,2364,9.343,2365,2.067,2366,1.331,2367,5.503,2368,2.36,2369,2.067,2370,1.474,2371,1.166,2372,3.857,2373,3.371,2374,1.166,2375,1.109,2376,1.166,2377,7.932,2378,4.879,2379,1.236,2380,2.067,2381,2.785,2382,1.236,2383,1.236,2384,1.474,2385,2.615,2386,1.474,2387,3.371,2388,3.849,2389,1.474,2390,1.331,2391,1.166,2392,3.857,2393,1.236,2394,4.879,2395,3.671,2396,4.268,2397,1.166,2398,2.067,2399,2.615,2400,1.474,2401,2.067,2402,1.331,2403,1.474,2404,3.523,2405,2.067,2406,2.615,2407,1.474,2408,1.166,2409,1.166,2410,1.474,2411,1.331,2412,1.474,2413,2.067,2414,1.474,2415,5.398,2416,1.474,2417,1.166,2418,2.067,2419,1.166,2420,2.067,2421,1.474,2422,1.331,2423,1.236,2424,2.067,2425,2.36,2426,1.331,2427,1.166,2428,2.067,2429,1.166,2430,1.474,2431,1.166,2432,4.264,2433,4.264,2434,4.264,2435,4.264,2436,3.575,2437,1.474,2438,1.474,2439,1.474,2440,1.331,2441,2.615,2442,3.575,2443,4.264,2444,4.264,2445,4.264,2446,4.264,2447,4.264,2448,4.264,2449,4.264,2450,1.474,2451,5.398,2452,6.64,2453,3.18,2454,3.523,2455,4.527,2456,2.954,2457,2.954,2458,5.398,2459,5.398,2460,4.527,2461,2.954,2462,2.954,2463,4.527,2464,2.954,2465,3.523,2466,3.523,2467,3.523,2468,3.523,2469,1.331,2470,1.331,2471,1.474,2472,2.192,2473,1.166]],["t/534",[0,0.074,1,0.048,3,0.871,6,0.027,24,2.746,28,0.937,37,1.001,38,1.543,48,0.507,53,1.16,56,0.723,57,0.069,59,0.151,63,1.655,64,1.777,65,1.176,67,1.471,69,0.962,75,0.52,80,3.361,83,2.265,101,0.917,106,0.303,107,0.501,112,1.014,114,2.118,120,1.369,122,2.559,130,0.422,132,0.803,134,0.546,144,0.769,146,0.851,147,2.206,150,1.335,151,1.119,153,0.64,155,2.184,159,2.577,161,0.843,170,0.949,173,1.064,181,1.123,185,2.694,189,0.949,195,0.937,200,0.926,202,1.909,212,0.89,213,4.448,220,0.585,226,3.515,227,2.857,232,2.466,240,2.21,241,1.687,247,0.866,248,2.361,254,3.173,260,1.762,261,0.752,262,3.793,263,0.737,268,0.822,270,0.569,271,0.71,278,4.706,282,0.737,284,1.896,285,0.803,286,0.947,295,1.038,310,4.46,311,0.917,317,1.019,336,0.662,337,0.803,346,0.843,348,0.947,357,0.71,362,1.043,378,1.34,387,0.89,397,1.465,399,1.816,417,0.866,433,2.115,449,1.542,461,0.917,482,2.282,483,4.528,484,2.935,525,0.89,550,2.565,561,1.019,577,2.758,578,2.799,581,1.789,585,1.542,591,1.586,665,1.119,765,1.391,776,2.148,777,1.964,780,0.685,781,0.723,784,2.461,787,2.948,797,1.34,814,1.465,819,1.001,820,1.014,824,0.737,835,1.064,841,1.813,867,2.083,870,3.709,871,3.001,872,3.506,874,3.928,880,2.114,888,0.54,889,0.54,899,2.69,900,2.799,901,1.594,902,1.892,907,3.602,910,2.466,929,2.868,930,1.064,945,0.89,955,2.114,963,0.822,969,1.816,980,3.98,983,1.019,986,1.186,988,3.291,1021,2.77,1022,2.114,1033,2.474,1062,0.785,1075,1.186,1076,1.277,1102,2.247,1115,3.077,1122,0.947,1141,0.89,1195,1.586,1211,0.981,1228,0.981,1254,3.177,1278,1.186,1282,1.186,1289,2.634,1307,3.42,1316,0.768,1317,0.866,1347,5.275,1378,1.816,1379,4.852,1381,6.999,1389,1.816,1400,4.304,1409,2.77,1411,0.981,1412,1.993,1416,1.019,1477,3.351,1553,1.186,1580,1.277,1584,1.634,1604,0.803,1611,1.186,1716,1.186,1798,1.277,1802,1.119,1816,1.277,1861,1.993,1886,1.277,1996,2.456,2085,1.993,2089,1.896,2090,1.993,2105,1.064,2168,1.019,2176,1.747,2177,0.917,2292,2.456,2293,3.792,2321,2.695,2324,2.695,2325,6.886,2326,7.095,2327,1.119,2328,4.583,2329,4.161,2331,1.993,2332,1.119,2333,5.083,2337,1.119,2341,5.083,2343,5.083,2344,7.458,2347,4.161,2348,2.695,2349,1.064,2350,1.993,2351,4.816,2353,1.993,2354,1.993,2355,5.083,2356,1.186,2357,1.277,2358,4.751,2359,4.285,2360,2.275,2361,1.277,2362,4.285,2363,3.753,2365,1.993,2366,1.277,2367,4.785,2368,2.275,2369,1.119,2371,1.119,2372,3.753,2373,2.695,2374,1.119,2375,1.064,2376,1.119,2379,2.858,2380,1.993,2381,2.695,2387,2.695,2388,3.735,2390,1.277,2391,1.119,2392,2.695,2393,2.858,2395,2.565,2396,4.161,2397,1.119,2398,1.993,2401,1.993,2402,1.277,2405,1.993,2408,1.119,2409,1.119,2411,1.277,2413,1.993,2417,1.119,2418,1.993,2419,1.119,2420,1.993,2422,1.277,2424,1.993,2425,3.077,2426,1.277,2427,1.119,2428,1.993,2429,1.119,2431,1.119,2436,2.114,2442,2.114,2455,4.413,2456,2.114,2457,2.114,2460,4.413,2461,2.114,2462,2.114,2463,4.413,2464,2.114,2473,1.119,2474,1.415,2475,1.415,2476,7.455,2477,7.199,2478,1.415,2479,7.861,2480,4.138,2481,1.415,2482,1.415,2483,1.415,2484,3.409,2485,2.363,2486,1.415,2487,1.415,2488,5.499,2489,2.521,2490,2.521,2491,1.415,2492,1.415,2493,1.415,2494,1.415,2495,1.415,2496,1.415,2497,1.415,2498,1.415,2499,5.499,2500,5.499,2501,1.415,2502,1.415,2503,1.415,2504,1.415,2505,1.415,2506,2.521,2507,1.186,2508,1.415,2509,1.415,2510,1.415,2511,1.415,2512,1.415,2513,1.415,2514,1.415,2515,2.521,2516,1.415,2517,3.409,2518,1.415,2519,1.415,2520,1.415,2521,1.415,2522,1.415,2523,1.415,2524,1.415,2525,1.415,2526,7.568,2527,1.415,2528,2.275,2529,2.275,2530,5.803,2531,3.077,2532,2.521,2533,2.521,2534,3.077,2535,2.521,2536,1.415,2537,1.415,2538,3.409,2539,2.521,2540,1.415,2541,1.415,2542,1.415,2543,2.521,2544,1.415,2545,1.186,2546,1.415,2547,2.275,2548,2.275,2549,2.275,2550,2.275,2551,2.275,2552,2.275,2553,2.275,2554,2.275,2555,2.275,2556,2.275,2557,2.275,2558,2.275,2559,3.735,2560,2.275,2561,2.275,2562,2.275,2563,2.275,2564,2.275,2565,2.275,2566,2.275,2567,2.275,2568,2.275,2569,2.275,2570,2.275,2571,2.275,2572,2.275,2573,2.275,2574,2.275,2575,2.275,2576,2.275,2577,2.275,2578,2.275,2579,2.275,2580,2.275,2581,2.275,2582,2.275,2583,2.275,2584,2.275,2585,2.275,2586,2.275,2587,2.275,2588,2.275,2589,2.275,2590,2.275,2591,1.415]],["t/536",[0,0.106,1,0.073,6,0.027,19,0.447,24,2.823,38,2.137,57,0.106,59,0.232,63,0.99,64,2.461,65,1.063,67,1.637,75,1.734,77,0.653,83,3.093,101,1.403,106,0.464,107,0.724,114,2.697,122,1.671,132,1.228,134,0.789,144,1.69,146,1.23,147,2.755,150,1.427,155,0.995,159,1.175,161,1.289,171,0.731,202,2.431,212,1.361,213,4.731,226,3.716,227,3.101,232,2.813,240,2.362,248,2.749,254,3.285,260,2.359,262,1.029,263,2.461,268,1.258,278,4.375,282,1.128,285,1.228,286,1.448,295,1.032,310,4.421,337,2.069,346,1.289,362,1.508,378,1.938,387,1.361,417,1.324,433,2.413,482,3.16,483,4.846,484,3.476,525,1.361,538,2.293,550,3.552,561,1.559,577,2.972,578,1.151,581,2.041,591,1.361,776,2.734,777,2.559,781,1.106,784,1.704,787,2.285,814,2.118,819,1.447,820,1.467,824,1.128,835,1.628,841,1.938,867,2.713,870,4.346,871,3.511,872,4.061,874,4.341,888,0.826,889,0.826,899,2.832,900,2.946,901,1.704,902,2.022,907,2.992,910,3.301,929,3.841,930,1.628,945,1.361,963,1.258,969,3.992,983,1.559,1021,1.448,1033,3.222,1062,1.201,1102,3.639,1122,1.448,1141,1.361,1163,5.298,1195,2.293,1228,1.5,1254,4.139,1289,2.022,1307,4.455,1316,1.175,1317,1.324,1347,5.787,1378,3.992,1379,5.406,1381,6.238,1400,6.623,1409,3.708,1416,1.559,1477,4.849,1604,1.228,1996,1.559,2105,1.628,2168,1.559,2176,2.527,2177,1.403,2292,2.626,2293,3.992,2321,1.711,2324,3.733,2325,7.565,2326,7.565,2327,1.711,2328,5.633,2329,5.636,2331,2.881,2332,1.711,2333,5.919,2337,2.881,2341,2.881,2343,3.733,2344,6.16,2347,5.298,2348,3.733,2349,1.628,2350,2.881,2351,1.711,2353,2.881,2354,2.881,2355,2.881,2363,2.881,2365,2.881,2369,1.711,2371,1.711,2372,4.888,2373,3.733,2374,1.711,2375,1.628,2376,1.711,2380,4.38,2381,5.298,2382,3.056,2383,3.056,2387,5.298,2391,1.711,2395,2.742,2396,6.547,2397,2.881,2398,4.38,2401,4.38,2405,2.881,2408,2.881,2409,2.881,2413,4.38,2417,2.881,2418,4.38,2419,2.881,2420,4.888,2423,3.056,2424,4.38,2427,2.881,2428,4.38,2429,2.881,2431,2.881,2473,1.711,2545,3.056,2592,1.953,2593,1.953,2594,8.955,2595,4.721,2596,8.814,2597,2.164,2598,6.702,2599,3.644,2600,3.29,2601,7.956,2602,3.29,2603,1.953,2604,3.644,2605,3.644,2606,3.29,2607,3.644,2608,3.644,2609,5.54,2610,3.644,2611,3.29,2612,3.644,2613,3.644,2614,5.54,2615,2.164,2616,3.644,2617,3.29,2618,5,2619,3.644,2620,2.164,2621,5,2622,3.29,2623,3.29,2624,3.29,2625,4.262,2626,1.953]],["t/538",[0,0.125,1,0.11,6,0.026,7,0.108,32,0.518,38,1.469,39,2.409,57,0.159,63,1.16,65,0.625,67,1.723,75,2.288,77,1.288,101,1.224,103,0.898,106,0.405,107,0.645,114,2.039,119,1.125,122,2.703,130,0.969,134,1.349,144,2.035,146,1.71,147,2.206,150,2.613,153,2.294,193,1.598,202,1.837,209,5.743,211,5.568,212,4.958,213,4.009,214,1.726,215,1.392,216,2.685,220,1.343,226,2.992,227,2.637,228,4.415,231,2.721,233,1.097,235,2.158,239,1.224,243,2.104,244,1.583,245,1.704,248,1.192,251,2.959,254,0.829,268,1.097,271,0.947,282,3.836,285,1.072,287,1.224,295,0.933,296,1.583,300,0.623,310,1.628,315,1.306,328,0.855,331,1.222,336,0.883,345,4.806,356,1.598,362,2.096,364,4.172,365,2.481,370,1.324,375,1.583,397,2.481,401,0.914,402,1.934,419,3.547,422,3.921,423,1.309,424,1.155,432,1.493,433,3.186,438,1.704,454,2.566,456,1.704,460,4.673,461,1.224,467,1.741,483,4.428,484,3.672,494,1.493,497,4.565,543,1.188,547,3.82,548,2.104,555,1.309,562,3.374,563,1.704,577,1.238,595,1.583,602,3.853,605,1.704,665,3.374,684,3.853,700,6.021,765,1.741,767,1.264,770,1.048,772,2.182,773,1.36,776,2.067,777,1.766,780,0.914,784,1.518,787,1.57,791,1.801,792,1.224,793,1.264,797,1.726,799,4.891,803,5.593,808,1.264,814,1.097,819,2.474,820,2.508,867,1.424,870,4.239,871,3.286,872,1.691,874,3.881,876,3.67,888,1.238,889,1.238,890,1.224,899,1.659,900,1.726,901,4.15,902,1.801,904,1.421,907,1.57,909,5.628,910,1.125,981,1.421,1018,1.048,1104,4.512,1122,1.264,1168,4.197,1169,4.958,1170,4.927,1213,2.25,1215,1.583,1217,2.25,1235,1.421,1236,1.726,1239,1.125,1275,4.503,1284,4.958,1286,4.565,1289,1.048,1293,1.934,1314,4.465,1316,1.025,1379,2.694,1397,1.493,1461,3.284,1477,4.219,1532,1.224,1568,1.583,1604,1.072,1623,5.226,1868,1.583,2063,5.274,2171,6.021,2206,2.25,2238,1.493,2240,5.226,2241,4.806,2295,3.579,2310,1.704,2311,1.704,2316,2.929,2375,1.421,2627,1.888,2628,1.583,2629,1.888,2630,1.704,2631,1.704,2632,3.245,2633,1.888,2634,1.888,2635,3.853,2636,2.929,2637,1.704,2638,1.704,2639,1.704,2640,1.704,2641,1.704,2642,3.245,2643,1.888,2644,1.888,2645,1.888,2646,1.309,2647,2.566,2648,1.888,2649,1.421,2650,1.888,2651,1.704,2652,1.888,2653,1.421,2654,6.232,2655,5.707,2656,6.021,2657,6.021,2658,6.67,2659,5.707,2660,8.094,2661,6.894,2662,6.232,2663,5.707,2664,5.707,2665,6.232,2666,4.268,2667,4.268,2668,4.268,2669,4.268,2670,5.066,2671,4.268,2672,4.268,2673,4.268,2674,4.268,2675,4.268,2676,4.268,2677,4.268,2678,4.268,2679,4.268,2680,4.268,2681,4.268,2682,4.268,2683,4.268,2684,4.268,2685,4.268,2686,4.268,2687,4.268,2688,4.268,2689,4.268,2690,4.268,2691,3.853,2692,4.268,2693,4.268,2694,4.268,2695,4.268,2696,4.268,2697,4.268,2698,4.268,2699,4.268,2700,4.268,2701,4.268,2702,4.268,2703,4.268,2704,4.268,2705,4.268,2706,4.268,2707,4.268,2708,4.268,2709,4.268,2710,4.268,2711,4.268,2712,4.268,2713,4.268,2714,4.268,2715,4.268,2716,4.268,2717,3.853,2718,4.268,2719,4.268,2720,4.268,2721,4.268,2722,4.268,2723,4.268,2724,4.268,2725,4.268,2726,3.853,2727,6.67,2728,3.245,2729,3.245,2730,3.245,2731,1.704,2732,1.704,2733,1.704,2734,1.704,2735,1.704,2736,4.573,2737,4.573,2738,3.245,2739,3.853,2740,4.573,2741,3.245,2742,4.573,2743,5.066,2744,1.36,2745,1.36,2746,2.338,2747,1.36,2748,1.36,2749,2.338,2750,2.338,2751,1.888,2752,1.421,2753,1.36,2754,3.075,2755,3.65,2756,1.888,2757,1.888,2758,1.888,2759,2.338,2760,3.245,2761,1.888,2762,1.888,2763,1.583,2764,1.888,2765,1.888,2766,3.245,2767,1.888,2768,1.493,2769,1.888,2770,4.268,2771,3.245,2772,1.888,2773,1.421,2774,1.704,2775,3.245,2776,1.888,2777,2.929,2778,1.36,2779,3.245,2780,2.338,2781,2.338,2782,1.36,2783,3.245,2784,3.245,2785,2.929,2786,3.245,2787,3.245,2788,1.888,2789,1.888,2790,1.888,2791,1.888]],["t/540",[0,0.166,1,0.11,6,0.026,7,0.048,8,0.225,39,0.477,56,3.181,57,0.304,63,1.548,65,0.805,67,1.847,83,0.748,92,0.963,94,1.788,103,2.026,106,0.404,107,0.643,114,1.303,120,1.023,122,2.701,130,0.967,134,1.348,144,0.988,146,2.101,147,2.842,150,2.755,153,2.818,166,0.963,184,1.417,193,1.595,202,1.175,213,1.567,216,4.192,220,1.34,226,3.369,227,1.526,228,4.413,235,1.815,248,2.286,250,1.417,254,1.421,270,1.303,281,2.762,282,4.215,283,5.964,285,1.069,287,2.762,295,1.246,300,2.963,310,2.859,328,0.853,331,0.709,362,2.093,370,2.325,379,3.183,383,3.833,384,3.123,385,7.213,386,7.213,387,3.183,394,0.827,396,5.013,397,1.095,398,4.801,399,3.07,401,1.567,402,3.396,403,4.914,418,0.982,433,3.9,460,1.152,461,1.221,467,2.719,483,3.622,484,1.788,497,5.576,503,1.185,548,3.694,555,4.877,564,1.221,571,1.152,577,2.375,578,1.722,674,6.166,765,3.908,770,2.364,772,4.134,775,1.489,776,1.738,777,2.757,784,2.366,787,2.448,791,1.797,797,2.69,799,5.278,804,1.152,808,1.261,819,2.471,820,2.505,823,1.261,841,5.441,867,1.421,870,4.237,876,2.221,888,0.719,889,0.719,899,2.178,900,3.31,901,3.951,902,2.364,907,2.062,909,1.759,978,2.168,979,2.954,1033,1.688,1067,1.58,1099,1.306,1103,1.357,1168,2.038,1169,5.088,1205,3.951,1211,3.951,1217,3.507,1227,1.489,1235,3.206,1236,2.69,1237,1.93,1239,1.123,1245,2.334,1257,1.306,1275,4.499,1284,5.088,1286,3.694,1289,3.454,1292,1.58,1293,1.93,1316,1.759,1379,1.002,1384,1.357,1415,1.58,1461,1.221,1464,2.561,1475,1.357,1477,0.982,1532,2.1,1554,1.185,1566,2.1,1584,2.1,1804,1.261,2103,1.58,2161,1.58,2206,3.507,2485,2.245,2646,2.954,2647,1.489,2649,1.417,2651,1.7,2653,1.417,2661,1.7,2744,2.334,2745,2.334,2746,3.645,2747,2.334,2748,2.334,2749,3.645,2750,3.645,2752,1.417,2753,2.334,2754,4.801,2755,4.106,2759,4.106,2763,2.716,2773,1.417,2774,1.7,2778,1.357,2780,2.334,2781,2.334,2782,1.357,2792,1.7,2793,1.884,2794,1.7,2795,1.7,2796,1.7,2797,1.7,2798,1.489,2799,1.417,2800,3.999,2801,2.561,2802,1.7,2803,1.7,2804,1.7,2805,1.7,2806,1.7,2807,1.7,2808,6.638,2809,5.144,2810,6.085,2811,6.225,2812,5.618,2813,1.884,2814,1.884,2815,3.239,2816,3.239,2817,3.239,2818,3.239,2819,3.239,2820,6.224,2821,3.239,2822,3.239,2823,3.239,2824,3.239,2825,3.239,2826,1.884,2827,4.261,2828,4.261,2829,4.261,2830,4.261,2831,4.921,2832,1.417,2833,1.489,2834,1.7,2835,1.7,2836,4.566,2837,1.7,2838,4.566,2839,1.7,2840,1.7,2841,1.7,2842,1.7,2843,1.7,2844,1.884,2845,1.884,2846,1.884,2847,1.884,2848,1.884,2849,1.884,2850,1.884,2851,1.884,2852,1.884,2853,1.884,2854,2.924,2855,2.924,2856,2.924,2857,2.924,2858,3.239,2859,3.239,2860,3.239,2861,3.239,2862,1.884,2863,3.239,2864,3.239,2865,4.261,2866,1.884,2867,1.884,2868,1.884,2869,1.884,2870,1.489,2871,1.489,2872,2.437,2873,1.884,2874,4.288,2875,1.884,2876,3.239,2877,1.884,2878,1.884,2879,3.239,2880,3.806,2881,2.437,2882,2.437,2883,4.506,2884,2.561,2885,1.884,2886,2.437,2887,4.288,2888,1.884,2889,1.7,2890,1.884,2891,2.437,2892,1.884,2893,1.7,2894,1.884,2895,1.58,2896,5.059,2897,1.7,2898,1.7,2899,1.884,2900,1.884,2901,1.884,2902,1.884,2903,1.884,2904,5.059,2905,1.884,2906,1.884,2907,1.884,2908,1.884,2909,1.884,2910,1.884,2911,4.261,2912,1.884,2913,1.884,2914,5.059,2915,4.261,2916,4.261,2917,1.7,2918,3.239,2919,1.884,2920,5.059,2921,1.884,2922,1.884,2923,1.884,2924,1.884,2925,1.884,2926,1.7,2927,1.7,2928,1.884,2929,1.7,2930,1.7,2931,1.884,2932,1.884]],["t/542",[0,0.113,1,0.056,6,0.026,8,0.202,39,0.42,56,0.849,57,0.227,63,1.261,65,0.508,67,1.687,83,0.659,103,2.207,106,0.356,107,0.577,122,2.731,130,1.385,134,1.671,144,0.507,146,2.345,147,1.495,150,3.101,153,2.623,155,1.78,159,2.519,185,3.541,193,1.43,216,3.315,220,0.687,226,3.398,227,2.076,228,4.278,235,2.244,237,4.419,247,1.016,248,2.128,249,1.313,250,1.249,254,0.729,269,0.942,270,3.441,280,0.74,281,2.507,282,4.022,283,5.349,285,3.289,286,4.176,287,2.507,295,1.267,300,2.611,310,4.745,315,0.668,317,1.196,324,3.948,328,3.391,331,1.093,337,1.648,362,1.92,370,2.15,379,1.045,387,3.315,396,2.91,398,1.196,401,0.803,402,2.305,403,0.776,418,0.865,423,1.151,433,4.687,461,1.076,467,2.364,482,3.879,483,1.905,484,1.624,497,6.171,503,1.045,538,1.045,548,2.507,555,3.216,564,1.076,571,1.016,577,2.38,581,1.255,585,1.016,591,4.164,765,3.951,770,0.921,772,3.699,776,1.578,777,1.92,780,1.405,784,2.71,786,1.313,787,2.804,791,1.611,797,1.544,799,5.25,804,1.016,810,1.151,819,3.063,820,3.105,841,5.407,843,0.989,867,1.274,870,4.319,876,1.513,888,0.633,889,0.633,899,1.484,900,2.802,901,3.703,902,0.921,907,2.55,949,1.249,978,1.943,979,2.013,1033,0.865,1070,7.994,1089,2.295,1090,1.313,1099,1.151,1102,4.884,1129,2.092,1155,3.244,1168,1.826,1169,4.371,1174,1.313,1175,1.313,1205,2.682,1211,3.653,1217,2.013,1236,2.057,1237,0.989,1239,0.989,1245,1.196,1252,1.392,1257,1.151,1275,3.224,1279,2.91,1284,4.371,1286,3.007,1289,2.147,1293,1.73,1316,0.902,1317,1.016,1347,2.434,1379,1.544,1384,1.196,1475,1.196,1532,1.076,1551,1.499,1554,1.045,1566,2.507,1584,1.882,1619,1.249,1748,4.757,1802,1.313,1814,3.058,1897,3.058,2192,1.313,2206,2.013,2349,1.249,2472,1.392,2476,1.392,2485,4.017,2646,2.682,2649,2.184,2653,1.249,2726,1.499,2744,1.196,2745,1.196,2746,2.092,2747,1.196,2748,1.196,2749,2.092,2750,2.092,2752,1.249,2753,1.196,2754,6.859,2755,3.343,2759,2.787,2768,4.932,2773,1.249,2778,1.196,2780,2.092,2781,2.092,2782,1.196,2798,1.313,2799,2.184,2800,3.668,2801,2.295,2810,6.899,2811,6.76,2831,2.295,2832,1.249,2833,1.313,2870,1.313,2871,1.313,2872,1.249,2874,2.91,2880,2.184,2881,1.249,2882,1.249,2883,3.668,2884,2.295,2886,1.249,2887,2.184,2891,2.91,2933,6.239,2934,2.62,2935,3.868,2936,1.66,2937,2.903,2938,1.66,2939,2.903,2940,3.868,2941,5.27,2942,6.619,2943,2.903,2944,1.66,2945,2.903,2946,1.499,2947,2.62,2948,1.499,2949,7.717,2950,5.27,2951,5.27,2952,5.27,2953,7.236,2954,6.948,2955,4.639,2956,1.66,2957,6.239,2958,1.66,2959,3.492,2960,2.62,2961,2.903,2962,1.66,2963,2.62,2964,2.903,2965,1.66,2966,1.66,2967,1.66,2968,1.66,2969,2.62,2970,1.66,2971,1.66,2972,1.66,2973,1.66,2974,2.62,2975,1.66,2976,1.66,2977,1.66,2978,2.62,2979,1.66,2980,1.66,2981,1.66,2982,2.62,2983,1.66,2984,1.66,2985,1.66,2986,2.62,2987,1.66,2988,1.66,2989,1.66,2990,1.66,2991,1.66,2992,1.66,2993,1.66,2994,1.66,2995,3.492,2996,2.62,2997,2.62,2998,2.62,2999,2.62,3000,2.62,3001,2.62,3002,1.66,3003,4.188,3004,1.66,3005,2.903,3006,1.66,3007,1.66,3008,3.868,3009,3.868,3010,3.868,3011,3.868,3012,2.903,3013,1.66,3014,1.66,3015,1.66,3016,1.499,3017,6.47,3018,5.974,3019,5.974,3020,5.231,3021,2.62,3022,5.55,3023,5.231,3024,6.239,3025,1.499,3026,1.499,3027,2.62,3028,1.499,3029,3.492,3030,1.499,3031,1.499,3032,1.499,3033,1.66,3034,1.66,3035,1.66,3036,1.66,3037,3.244,3038,6.639,3039,1.392,3040,3.89,3041,2.434,3042,1.392,3043,1.392,3044,3.89,3045,1.392,3046,4.419,3047,1.392,3048,1.392,3049,3.244,3050,1.392,3051,3.89,3052,1.392,3053,2.434,3054,1.392,3055,1.392,3056,1.392,3057,1.392,3058,1.392,3059,1.392,3060,1.392,3061,1.392,3062,1.392,3063,3.89,3064,3.244,3065,2.434,3066,1.66,3067,1.392,3068,2.184,3069,1.392,3070,1.499,3071,3.492,3072,1.499]],["t/544",[0,0.19,1,0.154,6,0.026,20,3.585,57,0.221,63,1.229,67,2.185,83,1.795,106,0.97,107,1.291,114,3.061,122,3.117,130,2.271,134,1.801,146,2.973,147,2.94,148,3.258,150,3.45,153,4.151,155,2.08,202,2.759,212,4.089,226,2.979,227,2.328,228,5.143,248,2.386,270,1.82,282,5.131,287,4.931,295,1.421,300,3.188,310,3.26,330,6.325,362,3.441,379,2.845,397,2.629,433,4.502,460,3.976,461,2.931,467,1.845,483,2.227,484,2.728,497,5.71,577,2.902,765,2.652,776,3.104,777,1.871,784,4.673,787,4.024,791,3.606,799,4.437,819,3.301,820,3.346,841,3.456,867,2.852,870,4.353,876,2.357,888,1.725,889,1.725,901,4.521,907,4.262,909,2.456,978,4.35,979,4.505,1236,3.456,1239,2.695,1293,3.873,1373,4.505,1384,3.258,1477,2.357,1552,3.575,1566,2.931,2192,3.575,2340,5.449,2507,5.449,2646,3.135,2778,3.258,2780,4.682,2781,4.682,2782,3.258,2799,3.402,3073,8.528,3074,8.316,3075,6.499,3076,4.522,3077,6.499,3078,4.522,3079,4.522,3080,4.522,3081,7.607,3082,4.522,3083,4.522,3084,4.522,3085,4.522,3086,4.522,3087,8.316,3088,6.499,3089,9.17,3090,4.522,3091,4.522,3092,4.522,3093,4.522,3094,4.522,3095,4.522,3096,4.522,3097,4.522,3098,6.499,3099,4.522]],["t/546",[0,0.134,1,0.071,6,0.026,8,0.219,20,0.686,39,0.527,56,1.802,57,0.264,63,1.468,65,0.591,67,1.87,83,0.826,103,2.182,106,0.446,107,0.7,122,2.324,130,1.613,134,1.66,144,0.635,146,2.678,147,1.773,150,3.108,153,2.972,185,3.971,193,1.736,216,3.803,220,0.861,226,3.684,227,2.352,228,4.513,235,2.574,248,2.22,249,1.645,250,1.565,254,0.913,269,1.181,270,3.368,280,4.504,281,2.974,282,4.256,283,5.803,284,5.264,285,3.727,286,4.684,287,2.974,295,1.321,300,2.921,306,1.084,310,4.76,331,0.783,362,2.235,370,2.466,379,1.309,387,3.803,396,3.451,398,1.499,401,1.007,402,2.734,403,0.973,418,1.084,423,1.442,433,4.655,461,1.348,467,2.679,483,1.736,484,1.48,487,1.181,497,5.973,538,1.309,548,2.974,555,3.744,564,1.348,571,1.273,577,2.669,581,0.899,591,4.402,765,3.871,770,1.154,772,4.174,776,1.872,777,2.235,780,1.007,784,2.827,787,2.925,791,1.956,797,1.875,799,5.21,804,1.273,819,3.044,820,3.286,823,1.393,841,5.161,843,1.24,867,1.547,870,4.321,876,1.837,888,0.794,889,0.794,899,1.802,900,3.214,901,3.999,902,1.154,907,2.614,978,2.36,979,2.444,1033,1.084,1070,7.811,1089,2.787,1090,1.645,1099,1.442,1102,4.545,1122,1.393,1129,2.54,1168,2.218,1169,4.824,1174,1.645,1175,1.645,1205,3.18,1211,4.851,1217,2.444,1236,2.44,1237,1.24,1239,1.24,1245,1.499,1257,1.442,1261,1.645,1275,3.698,1284,4.824,1286,3.501,1289,2.546,1293,2.101,1316,1.13,1347,2.886,1379,1.875,1384,1.499,1475,1.499,1532,1.348,1554,1.309,1566,2.285,1584,2.285,1619,1.565,1814,3.627,1822,1.348,1868,1.744,2192,1.645,2206,2.444,2485,4.552,2646,3.18,2649,2.652,2653,1.565,2744,1.499,2745,1.499,2746,2.54,2747,1.499,2748,1.499,2749,2.54,2750,2.54,2752,1.565,2753,1.499,2754,6.992,2755,3.892,2759,3.305,2768,5.191,2773,1.565,2778,1.499,2780,2.54,2781,2.54,2782,1.499,2798,1.645,2799,1.565,2800,4.27,2801,2.787,2810,6.434,2811,5.532,2831,2.787,2832,1.565,2833,1.645,2870,1.645,2871,1.645,2872,1.565,2874,3.451,2880,2.652,2881,1.565,2882,1.565,2883,4.27,2884,2.787,2886,1.565,2887,2.652,2891,3.451,2934,3.182,2946,1.878,2947,1.878,2948,1.878,2949,6.643,2959,4.141,2960,3.182,2963,1.878,2969,1.878,2974,1.878,2978,1.878,2982,1.878,2986,1.878,2995,4.141,2996,1.878,2997,1.878,2998,1.878,2999,1.878,3000,1.878,3001,1.878,3003,3.182,3016,1.878,3017,7.17,3018,6.643,3019,6.643,3020,6.643,3021,3.182,3022,6.43,3023,6.921,3025,1.878,3026,1.878,3027,3.182,3028,1.878,3029,5.456,3030,1.878,3031,1.878,3032,1.878,3037,3.847,3038,7.17,3039,1.744,3040,4.529,3041,2.956,3042,1.744,3043,1.744,3044,4.529,3045,1.744,3046,5.068,3047,1.744,3048,1.744,3049,3.847,3050,1.744,3051,4.529,3052,1.744,3053,2.956,3054,1.744,3055,1.744,3056,1.744,3057,1.744,3058,1.744,3059,1.744,3060,1.744,3061,1.744,3062,1.744,3063,4.529,3064,3.847,3065,2.956,3067,1.744,3068,2.652,3069,1.744,3070,1.878,3071,4.141,3072,1.878,3100,2.08,3101,2.08,3102,2.08,3103,1.878,3104,2.08,3105,3.525,3106,3.525,3107,2.08,3108,2.08,3109,2.08,3110,2.08,3111,2.08,3112,2.08,3113,2.08,3114,1.878]],["t/548",[0,0.312,1,0.348,6,0.024,15,2.597,21,0.129,23,0.121,24,2.556,32,2.225,42,1.889,57,0.45,77,2.446,106,1.09,107,1.402,122,3.457,131,5.677,132,4.005,141,2.754,150,2.764,202,1.843,210,3.294,213,2.459,215,1.657,227,3.138,239,5.255,246,4.574,262,2.417,269,2.884,273,4.96,310,2.549,325,3.291,340,3.197,357,2.549,359,3.476,368,3.678,369,4.377,400,4.394,401,2.459,424,3.109,435,4.26,475,6.099,503,5.1,504,2.164,545,2.953,559,4.017,576,6.072,577,2.692,578,4.311,581,4.545,585,3.109,804,3.109,837,3.522,843,3.028,844,3.522,847,3.823,876,2.648,889,1.938,945,3.197,1018,2.819,1063,5.579,1071,3.823,1080,3.522,1131,5.62,1213,3.522,1255,4.017,1341,3.401,1409,5.427,1502,3.823,1604,4.601,1822,3.294,1900,5.579,2177,6.816,2180,4.017,2182,4.017,2183,7.53,3115,3.823,3116,3.823,3117,3.823,3118,6.797,3119,7.344,3120,4.26,3121,4.26,3122,7.906,3123,4.26,3124,5.917,3125,4.26,3126,6.797,3127,4.26,3128,4.26,3129,4.586,3130,4.586,3131,4.586,3132,4.586,3133,7.986,3134,5.081,3135,4.26,3136,4.26,3137,4.26,3138,4.26,3139,5.917,3140,4.26,3141,5.917,3142,5.917,3143,4.26,3144,5.917,3145,4.26,3146,4.26,3147,4.26,3148,4.26,3149,6.797,3150,4.586,3151,4.26,3152,4.26,3153,4.26,3154,6.099,3155,4.26,3156,4.586,3157,5.917,3158,4.26,3159,4.26,3160,4.26,3161,4.586,3162,4.26]],["t/550",[0,0.314,1,0.346,6,0.024,15,2.527,21,0.125,23,0.118,24,2.519,32,2.193,42,1.838,57,0.446,77,2.411,106,1.06,107,1.375,122,3.431,131,5.906,132,4.534,141,2.731,150,2.711,202,1.793,210,3.204,213,2.392,215,3.161,227,3.264,239,5.178,246,4.487,262,2.351,269,2.806,273,4.887,310,2.48,325,1.708,340,3.11,357,2.48,359,3.41,368,3.608,369,4.491,400,4.342,401,2.392,424,3.024,435,4.145,475,6.01,503,5.026,504,2.106,545,2.873,559,3.908,575,3.908,576,6.316,577,2.641,578,4.248,581,4.555,585,3.024,804,3.024,819,1.962,833,3.908,837,3.427,843,2.946,844,3.427,847,3.719,876,2.577,888,1.886,889,1.886,945,3.11,1018,2.743,1063,5.473,1071,3.719,1080,3.427,1131,5.538,1213,3.427,1255,3.908,1279,3.719,1341,3.309,1409,5.348,1502,3.719,1604,4.534,1822,3.204,1900,5.473,2177,6.831,2180,3.908,2182,3.908,2183,7.465,3115,3.719,3116,3.719,3117,3.719,3118,6.698,3119,7.257,3120,4.145,3121,4.145,3123,4.145,3124,5.805,3125,4.145,3126,6.698,3127,4.145,3128,4.145,3129,4.462,3130,4.462,3131,4.462,3132,4.462,3133,7.918,3135,4.145,3136,4.145,3137,4.145,3138,4.145,3139,5.805,3140,4.145,3141,5.805,3142,5.805,3143,4.145,3144,5.805,3145,4.145,3146,4.145,3147,4.145,3148,4.145,3149,6.698,3150,4.462,3151,4.145,3152,4.145,3153,4.145,3154,6.01,3155,4.145,3157,5.805,3158,4.145,3159,4.145,3160,4.145,3162,4.145,3163,9.111,3164,6.922,3165,4.944,3166,4.944,3167,4.944]],["t/552",[0,0.313,1,0.332,6,0.026,25,1.652,42,3.152,57,0.271,63,2.033,65,0.994,80,3.096,83,2.197,101,5.494,103,2.632,106,1.187,107,1.804,131,5.885,132,4.247,150,3.32,213,2.678,215,2.439,227,2.68,235,3.61,239,3.587,273,3.386,284,6.831,325,3.377,357,3.753,359,3.685,368,3.899,369,3.558,400,3.753,401,2.678,402,3.298,426,6.831,449,5.185,483,2.726,504,3.186,545,3.217,575,4.375,576,5.876,577,3.234,578,4.828,673,4.164,765,2.258,799,4.73,870,3.867,871,2.726,874,2.726,876,2.884,888,2.111,889,2.111,904,4.164,905,6.377,1032,6.273,1059,4.375,1062,3.071,1161,4.64,1196,3.987,1288,4.375,1289,3.071,1341,5.008,1477,3.899,1604,4.811,1804,5.674,1822,3.587,2057,3.987,2164,4.375,2165,4.375,2176,5.187,2241,3.987,3115,4.164,3116,4.164,3117,4.164,3154,4.164,3168,4.995,3169,6.273,3170,4.64,3171,4.64,3172,4.64,3173,4.64,3174,6.273,3175,5.915,3176,4.64,3177,4.64,3178,6.273,3179,4.64,3180,4.64,3181,6.273,3182,8.523,3183,4.64,3184,4.64,3185,6.273,3186,4.64,3187,4.64,3188,4.64,3189,4.995,3190,4.995,3191,4.995,3192,4.995,3193,4.995]],["t/554",[0,0.311,1,0.332,6,0.026,25,1.655,32,1.522,42,3.154,57,0.271,63,2.035,65,0.994,80,3.099,83,2.201,101,5.499,103,2.636,106,1.189,107,1.805,131,5.889,132,4.251,150,3.323,213,2.682,215,2.442,227,2.683,235,3.613,239,3.593,273,3.391,284,6.835,325,3.379,357,3.757,359,3.689,368,3.904,369,3.562,400,3.757,401,2.682,402,3.303,426,6.835,449,5.19,483,2.73,504,3.19,545,3.222,576,5.881,577,3.236,578,4.831,673,4.171,765,2.262,799,4.732,870,3.869,871,2.73,874,2.73,876,2.889,888,2.115,889,2.115,904,4.171,905,6.382,1032,6.28,1059,4.383,1062,3.076,1161,4.648,1196,3.994,1288,4.383,1289,3.076,1341,5.014,1477,3.904,1604,4.815,1804,5.678,1822,3.593,2057,3.994,2164,4.383,2165,4.383,2176,5.192,2241,3.994,3115,4.171,3116,4.171,3117,4.171,3154,4.171,3168,5.004,3169,6.28,3170,4.648,3171,4.648,3172,4.648,3173,4.648,3174,6.28,3175,5.922,3176,4.648,3177,4.648,3178,6.28,3179,4.648,3180,4.648,3181,6.28,3182,8.526,3183,4.648,3184,4.648,3185,6.28,3186,4.648,3187,4.648,3188,4.648,3189,5.004,3190,5.004,3191,5.004,3192,5.004,3193,5.004]],["t/556",[0,0.313,1,0.347,6,0.024,15,2.71,21,0.134,23,0.126,24,2.614,32,2.276,42,1.972,57,0.457,77,2.502,106,1.137,107,1.444,122,3.415,131,5.781,132,4.125,141,2.702,150,2.077,202,1.923,210,3.437,213,2.566,215,1.729,227,3.195,239,3.437,246,3.437,262,2.522,269,3.01,273,5.072,310,2.66,325,3.082,357,2.66,359,3.579,368,3.787,369,3.943,400,4.159,401,2.566,424,3.244,475,6.238,503,5.216,504,2.258,545,3.082,575,5.745,576,6.183,577,2.772,578,4.409,581,4.544,585,3.244,804,3.244,837,3.676,843,3.16,844,3.676,847,3.989,888,2.023,889,2.023,945,3.336,1018,2.942,1063,5.745,1071,3.989,1080,3.676,1131,5.038,1255,4.192,1341,3.549,1409,5.55,1502,3.989,1604,4.125,1822,3.437,1900,4.192,2177,6.814,2180,4.192,2182,4.192,2183,7.387,3115,3.989,3116,3.989,3117,3.989,3118,6.952,3119,7.479,3120,4.446,3121,4.446,3122,7.483,3123,4.446,3124,6.093,3125,4.446,3126,6.952,3127,4.446,3128,4.446,3133,8.092,3135,4.446,3136,4.446,3137,4.446,3138,4.446,3139,6.093,3140,4.446,3141,6.093,3142,6.093,3143,4.446,3144,6.093,3145,4.446,3146,4.446,3147,4.446,3148,4.446,3149,6.952,3151,4.446,3152,4.446,3153,4.446,3154,6.238,3155,4.446,3156,4.786,3157,6.093,3158,4.446,3159,4.446,3160,4.446,3161,4.786,3162,4.446,3194,5.302,3195,5.302]],["t/558",[0,0.184,1,0.112,6,0.027,19,2.118,24,1.041,41,0.955,47,3.601,57,0.161,65,0.931,67,2.33,77,2.324,103,2.442,106,0.708,107,1.252,122,1.168,130,1.533,134,1.765,146,1.114,147,1.985,150,3.333,155,2.362,157,3.23,159,3.421,166,5.008,226,3.837,227,3.048,235,3.747,248,3.231,254,2.765,263,1.721,271,3.862,292,2.077,295,1.123,331,1.243,348,2.21,362,2.941,378,2.73,400,1.656,401,1.598,419,2.73,426,3.863,452,2.768,483,3.103,484,3.232,504,1.406,530,2.61,538,3.23,545,4.475,549,6.619,577,3.357,581,1.427,770,5.015,772,1.688,776,1.347,777,1.366,784,1.544,787,2.485,802,3.863,806,4.059,808,3.437,810,3.56,812,3.7,814,2.984,816,4.305,818,4.059,819,3.236,820,3.845,867,3.379,870,3.472,871,4.015,872,4.435,874,4.191,888,1.26,907,2.485,909,2.788,910,1.967,947,2.21,968,2.379,1036,2.61,1120,2.98,1212,2.61,1236,3.351,1237,3.755,1238,4.218,1239,3.06,1240,3.7,1241,4.059,1242,3.863,1271,6.652,1312,3.863,1343,3.863,1379,4.525,1389,3.7,1461,5.516,1475,2.379,1477,1.721,1491,5.283,1495,2.768,1497,2.98,1503,4.927,1534,5.348,1536,2.98,1554,2.077,1739,2.768,1850,2.98,1855,6.95,1856,2.98,1857,5.687,1871,6.133,1876,9.358,2057,2.379,2059,2.768,2063,2.61,2164,2.61,2165,2.61,2166,2.98,2173,2.98,2175,2.98,2328,3.863,3196,3.301,3197,9.151,3198,5.134,3199,3.301,3200,3.301,3201,5.134,3202,5.134,3203,5.134,3204,5.134,3205,5.134,3206,5.134,3207,5.134,3208,5.134,3209,5.134,3210,5.134,3211,5.134,3212,8.509,3213,3.301,3214,3.301,3215,3.301,3216,3.301,3217,3.301,3218,3.301,3219,3.301,3220,5.134,3221,5.134,3222,3.301,3223,3.301,3224,3.301,3225,3.301]],["t/560",[0,0.151,1,0.113,6,0.026,7,0.049,8,0.213,20,0.64,39,0.491,56,3.233,57,0.284,63,1.837,65,1.013,67,1.865,72,3.388,92,1.698,94,1.829,103,2.072,106,0.416,107,0.66,114,1.337,120,1.804,122,2.733,130,0.992,134,1.37,144,1.014,146,2.135,147,1.684,150,2.793,153,2.864,166,1.698,184,1.46,193,1.636,202,1.205,216,4.255,220,1.375,226,3.546,227,1.561,228,4.443,235,1.856,248,2.13,250,1.46,254,1.458,270,2.076,281,2.824,282,4.26,283,5.666,287,2.824,295,1.268,300,2.908,310,3.392,331,0.731,362,2.135,370,2.759,379,3.246,384,1.083,385,2.786,387,3.246,394,3.389,395,8.353,396,5.088,397,5.702,398,4.873,399,3.139,401,1.608,402,4.03,403,3.483,416,1.011,418,1.011,433,3.947,460,1.187,461,1.258,467,3.039,483,3.513,484,1.395,497,5.419,548,4.384,555,4.944,564,1.258,571,1.187,577,2.413,674,1.627,765,3.737,770,2.863,772,4.178,776,1.778,777,3.082,784,2.413,787,2.497,791,1.844,797,2.744,799,5.226,804,1.187,808,2.224,819,2.511,820,2.546,823,1.299,841,5.089,867,1.458,870,4.104,876,2.271,888,0.74,889,0.74,899,2.227,900,3.364,901,3.988,902,2.418,907,2.108,978,2.224,979,2.303,1033,1.732,1067,1.627,1099,1.345,1103,1.398,1168,2.09,1169,5.547,1205,4.688,1211,4.688,1217,3.577,1235,3.882,1236,2.744,1237,1.98,1239,1.156,1245,2.394,1257,1.345,1275,4.871,1284,5.547,1286,4.384,1289,2.863,1292,1.627,1293,1.98,1316,1.804,1347,3.98,1379,1.767,1384,2.394,1415,1.627,1461,2.154,1464,4.079,1475,1.398,1477,1.011,1532,2.154,1554,1.221,1566,2.154,1584,2.154,1804,2.224,2103,2.786,2161,2.786,2206,3.577,2485,2.303,2646,3.02,2647,1.534,2649,1.46,2653,1.46,2744,2.394,2745,2.394,2746,3.718,2747,2.394,2748,2.394,2749,3.718,2750,3.718,2753,2.394,2754,5.564,2755,4.873,2759,4.873,2763,1.627,2778,1.398,2780,2.394,2781,2.394,2782,1.398,2792,1.751,2794,1.751,2795,1.751,2796,1.751,2797,1.751,2798,1.534,2799,1.46,2800,4.079,2801,2.627,2802,1.751,2803,1.751,2804,1.751,2805,1.751,2806,1.751,2807,1.751,2808,2.999,2809,1.751,2810,1.46,2811,5.347,2812,1.751,2831,4.079,2832,1.46,2833,1.534,2834,1.751,2835,1.751,2836,2.999,2837,1.751,2838,2.999,2839,1.751,2840,1.751,2841,1.751,2842,1.751,2843,1.751,2854,2.999,2855,2.999,2856,2.999,2857,2.999,2870,1.534,2871,1.534,2872,2.5,2874,5.088,2880,3.882,2881,2.5,2882,2.5,2886,2.5,2887,5.088,2889,1.751,2891,2.5,2893,1.751,2895,1.627,2897,2.999,2898,2.999,2917,2.999,2926,2.999,2927,2.999,2929,2.999,2930,2.999,3068,2.5,3226,1.94,3227,8.173,3228,1.94,3229,1.94,3230,3.322,3231,5.16,3232,5.801,3233,3.322,3234,3.322,3235,3.322,3236,7.132,3237,1.94,3238,1.94,3239,4.357,3240,5.16,3241,3.322,3242,3.322,3243,3.322,3244,3.322,3245,3.322,3246,3.322,3247,3.322,3248,1.94,3249,3.322,3250,1.94,3251,1.94,3252,1.94,3253,1.94,3254,1.94,3255,5.16,3256,1.94,3257,4.357,3258,1.94,3259,1.94,3260,3.322,3261,5.801,3262,4.357,3263,1.94,3264,1.94,3265,3.322,3266,5.16,3267,7.132,3268,5.16,3269,1.94,3270,5.16,3271,1.94,3272,5.801,3273,5.16,3274,1.94,3275,3.322,3276,1.94,3277,1.94,3278,1.94,3279,1.94,3280,1.94,3281,1.94,3282,1.94,3283,1.94,3284,4.357,3285,4.357,3286,1.94,3287,1.94,3288,1.94,3289,1.94,3290,1.94,3291,1.94]],["t/562",[0,0.086,1,0.057,3,0.585,6,0.027,24,2.819,28,0.629,37,0.672,38,1.778,48,0.606,53,0.779,57,0.083,59,0.181,63,1.449,64,2.047,65,1.142,67,1.461,69,0.646,75,1.442,80,2.608,83,2.783,100,1.009,101,1.097,106,0.363,107,0.587,112,0.681,114,2.358,122,2.074,132,0.961,134,0.85,144,1.435,146,0.997,147,2.436,150,1.538,155,0.779,159,2.553,161,1.009,170,0.638,171,0.592,181,0.754,189,0.638,195,0.629,200,0.622,202,2.125,212,1.065,213,4.595,226,3.502,227,3.125,232,2.34,240,1.914,248,2.454,254,3.202,260,2.272,261,1.57,262,0.805,263,0.882,268,0.984,278,4.149,282,0.882,285,0.961,286,1.133,295,1.028,310,4.579,337,1.676,346,1.009,362,1.222,378,1.57,387,1.065,417,1.036,433,2.404,482,4.22,483,4.646,484,3.263,525,1.065,538,2.47,550,2.954,561,1.22,577,2.675,578,1.57,581,1.697,591,1.065,776,2.391,777,2.208,781,0.865,784,1.381,787,1.9,814,1.716,819,2.118,820,1.58,824,0.882,835,2.221,841,2.088,867,2.341,870,4.232,871,3.292,872,3.803,874,4.169,888,0.646,889,0.646,899,2.995,900,3.116,901,1.836,902,2.179,907,3.392,910,2.802,929,3.26,930,1.274,945,1.065,963,0.984,969,3.388,983,1.22,1018,0.939,1021,1.133,1033,2.78,1062,0.939,1102,3.182,1122,1.133,1141,1.065,1163,4.633,1195,1.858,1228,1.174,1229,1.338,1254,3.571,1289,0.939,1307,3.844,1316,0.919,1317,1.036,1347,5.687,1378,3.388,1379,5.342,1381,6.638,1400,6.314,1409,3.148,1411,1.174,1416,1.22,1477,4.547,1587,1.528,1604,1.676,1861,1.338,1996,1.22,2085,1.338,2089,1.274,2090,1.338,2105,1.274,2168,1.22,2176,2.047,2177,1.097,2292,2.829,2293,4.222,2321,1.338,2324,3.105,2325,7.457,2326,7.403,2327,1.338,2328,5.028,2329,5.283,2331,2.334,2332,1.338,2333,5.969,2337,3.105,2341,4.218,2343,4.633,2344,6.897,2347,4.633,2348,3.105,2349,1.274,2350,2.334,2351,1.338,2353,2.334,2354,2.334,2355,4.218,2356,1.419,2363,2.334,2365,3.105,2367,1.419,2369,2.334,2371,1.338,2372,4.218,2373,3.718,2374,1.338,2375,1.274,2376,1.338,2379,1.419,2380,3.718,2381,4.633,2382,2.476,2383,2.476,2387,4.633,2391,1.338,2392,1.338,2393,1.419,2395,2.954,2396,5.969,2397,2.334,2398,3.718,2401,3.718,2405,2.334,2408,2.334,2409,2.334,2413,3.718,2417,2.334,2418,3.718,2419,2.334,2420,4.218,2423,2.476,2424,3.718,2427,2.334,2428,3.718,2429,2.334,2431,2.334,2436,1.419,2442,1.419,2455,3.293,2456,1.419,2457,1.419,2460,3.293,2461,1.419,2462,1.419,2463,3.293,2464,1.419,2469,1.528,2470,1.528,2472,2.476,2473,1.338,2476,3.293,2477,3.544,2479,5.29,2488,3.544,2499,3.544,2500,3.544,2526,4.245,2528,1.528,2529,1.528,2530,3.544,2531,1.528,2534,1.528,2545,2.476,2547,1.528,2548,1.528,2549,1.528,2550,1.528,2551,1.528,2552,1.528,2553,1.528,2554,1.528,2555,1.528,2556,1.528,2557,1.528,2558,1.528,2559,2.665,2560,1.528,2561,1.528,2562,1.528,2563,1.528,2564,1.528,2565,1.528,2566,1.528,2567,1.528,2568,1.528,2569,1.528,2570,1.528,2571,1.528,2572,1.528,2573,1.528,2574,1.528,2575,1.528,2576,1.528,2577,1.528,2578,1.528,2579,1.528,2580,1.528,2581,1.528,2582,1.528,2583,1.528,2584,1.528,2585,1.528,2586,1.528,2587,1.528,2588,1.528,2589,1.528,2590,1.528,2592,1.528,2593,1.528,2600,2.665,2601,7.36,2602,2.665,2603,1.528,2606,2.665,2611,2.665,2617,2.665,2618,4.245,2621,4.245,2622,2.665,2623,2.665,2624,2.665,2625,3.544,2626,1.528,3292,2.953,3293,1.693,3294,1.693,3295,8.317,3296,3.927,3297,8.154,3298,1.693,3299,5.86,3300,2.953,3301,2.953,3302,2.953,3303,2.953,3304,2.953,3305,4.702,3306,2.953,3307,2.953,3308,2.953,3309,4.702,3310,1.693,3311,2.953,3312,2.953,3313,1.693,3314,1.693,3315,1.693]],["t/564",[0,0.046,1,0.093,6,0.025,17,0.279,26,0.166,30,1.524,31,5.581,40,0.514,41,0.451,57,0.33,59,0.167,63,1.741,64,4.927,65,0.554,67,1.833,80,2.31,99,0.455,106,0.334,107,0.545,114,2.579,122,1.79,130,0.82,134,1.843,141,1.064,144,0.475,146,2.873,147,2.329,150,1.738,153,3.185,155,1.263,156,1.043,158,1.043,159,1.491,160,1.043,161,0.928,162,1.043,177,0.928,185,1.558,192,1.423,202,2.324,212,0.98,216,0.98,226,3.168,227,2.52,228,3.579,232,0.928,234,2.252,235,2.567,247,0.953,248,2.476,254,2.645,268,1.596,271,2.8,280,1.64,282,0.812,286,1.043,291,3.244,295,0.97,297,5.053,310,2.225,315,1.785,331,1.034,336,2.61,339,2.193,356,2.749,362,2.31,365,2.139,400,1.377,401,0.754,417,3.687,418,1.918,419,1.46,422,1.727,424,0.953,433,2.268,439,3.338,467,1.502,469,1.903,484,0.654,487,1.558,497,1.01,504,2.73,536,4,537,4.004,538,2.316,539,2.478,540,2.478,541,7.029,542,2.91,543,3.183,544,3.645,547,1.043,548,1.01,555,3.075,561,1.123,571,0.953,577,2.445,581,2.605,586,2.171,678,1.406,695,1.123,765,2.064,768,1.307,770,1.524,772,1.403,773,1.123,776,2.615,777,2.79,778,3.097,779,3.031,780,2.916,781,3.08,784,2.61,785,2.769,786,1.232,787,1.781,791,2.807,792,1.78,793,1.043,794,1.978,797,2.968,799,4.545,819,3.379,820,3.426,821,0.953,824,3.802,841,2.359,843,0.928,845,1.406,846,1.978,867,2.22,870,3.57,871,1.813,872,1.918,874,1.813,876,0.812,888,0.594,889,0.594,893,1.307,899,1.403,900,1.46,901,3.616,902,0.865,907,2.916,959,1.232,963,0.906,982,0.98,988,1.08,1018,0.865,1033,0.812,1061,1.172,1062,0.865,1070,2.171,1073,1.406,1096,1.307,1097,1.08,1098,1.307,1099,1.08,1100,1.232,1101,2.769,1102,1.999,1103,3.196,1104,2.91,1105,3.086,1106,3.086,1122,1.043,1131,1.08,1163,1.232,1168,0.98,1169,0.98,1196,4.618,1205,1.903,1211,1.903,1212,2.171,1217,1.903,1223,1.406,1224,1.406,1236,3.205,1237,1.636,1238,1.838,1239,0.928,1240,1.123,1244,2.478,1245,1.123,1253,3.322,1254,2.97,1257,1.08,1262,2.652,1275,3.095,1278,5.374,1283,5.374,1284,0.98,1289,1.524,1293,3.015,1294,1.406,1316,1.999,1317,1.68,1343,2.066,1344,2.171,1345,2.478,1346,2.066,1347,2.316,1373,1.08,1379,1.46,1381,1.978,1532,1.01,1566,1.01,1577,1.307,1799,1.172,1814,2.91,1972,1.406,2072,2.478,2113,1.406,2204,1.406,2206,1.903,2340,1.307,2485,2.552,2646,1.903,2744,1.123,2745,1.123,2746,1.978,2747,1.123,2748,1.123,2749,1.978,2750,1.978,2752,1.172,2753,1.123,2754,2.652,2755,3.196,2759,2.652,2773,1.172,2810,2.769,2872,1.172,2874,2.066,2880,2.066,2881,1.172,2882,1.172,2883,3.507,2884,2.171,2886,1.172,2887,2.066,2891,2.066,3017,3.086,3022,3.086,3037,2.302,3038,5.053,3039,1.307,3040,3.72,3041,1.307,3042,1.307,3043,1.307,3044,3.72,3045,1.307,3046,4.242,3047,1.307,3048,1.307,3049,3.086,3050,1.307,3051,3.72,3052,1.307,3053,1.307,3054,1.307,3055,1.307,3056,1.307,3057,1.307,3058,1.307,3059,1.307,3060,1.307,3061,1.307,3062,1.307,3063,3.72,3064,3.086,3065,2.302,3067,1.307,3068,2.066,3069,1.307,3114,1.406,3316,1.558,3317,1.558,3318,1.558,3319,1.558,3320,2.746,3321,2.746,3322,1.558,3323,1.558,3324,1.558,3325,1.558,3326,1.558,3327,9.983,3328,7.919,3329,10.784,3330,1.558,3331,3.681,3332,10.929,3333,3.681,3334,3.322,3335,1.558,3336,4.436,3337,5.059,3338,9.617,3339,9.512,3340,9.617,3341,9.617,3342,9.617,3343,1.558,3344,1.558,3345,1.558,3346,1.558,3347,1.558,3348,1.558,3349,7.294,3350,1.558,3351,1.558,3352,1.558,3353,1.558,3354,1.558,3355,1.558,3356,2.746,3357,3.681,3358,2.746,3359,3.681,3360,2.746,3361,1.558,3362,2.746,3363,1.558,3364,1.558,3365,3.681,3366,1.558,3367,2.746,3368,1.558,3369,3.681,3370,4.436,3371,1.558,3372,1.558,3373,1.558,3374,1.558,3375,1.558,3376,3.681,3377,1.558,3378,1.558,3379,1.558,3380,1.406,3381,2.746,3382,1.558,3383,1.558,3384,1.558,3385,1.558,3386,3.681,3387,1.558,3388,1.558,3389,1.558,3390,1.558,3391,1.558,3392,1.558,3393,1.558,3394,1.558,3395,1.558,3396,1.558,3397,1.558,3398,1.558,3399,1.558,3400,1.558,3401,1.558,3402,1.558,3403,1.558,3404,1.558,3405,1.558,3406,1.406,3407,1.558,3408,1.558,3409,3.681,3410,1.558,3411,1.558,3412,7.525,3413,7.525,3414,1.558,3415,2.746,3416,1.558,3417,1.558,3418,1.558,3419,1.558,3420,1.558,3421,1.558,3422,1.558,3423,1.558,3424,1.558,3425,1.558,3426,1.558,3427,1.558,3428,1.558,3429,1.558,3430,1.558,3431,1.558,3432,1.558,3433,1.558,3434,1.558,3435,1.558,3436,1.558,3437,1.558,3438,1.558,3439,1.558,3440,1.558]],["t/566",[0,0.052,1,0.196,6,0.027,20,2.361,30,0.533,32,2.441,39,1.39,42,3.82,57,0.282,63,1.492,65,1.159,67,0.21,75,1.905,80,3.133,83,2.18,87,3.879,103,0.843,104,4.224,106,0.206,107,1.031,113,3.363,114,0.994,122,1.587,124,0.692,130,0.918,132,2.945,134,1.189,141,0.513,144,1.583,146,1.216,147,1.573,148,0.692,150,2.258,155,2.387,166,1.841,173,1.858,192,0.371,202,1.115,213,0.465,220,0.397,226,2.965,227,0.635,232,1.472,235,4.521,240,0.622,247,0.587,248,0.651,251,0.666,254,3.516,270,2.881,285,0.545,291,2.365,293,4.382,295,0.672,300,2.915,309,0.442,311,2.637,315,2.21,328,3.241,331,2.172,336,0.449,354,4.38,356,1.774,357,1.239,359,2.556,362,1.022,370,2.117,375,0.805,379,0.604,400,1.807,401,1.969,402,2.893,414,2.292,415,0.482,419,0.511,422,3.628,423,0.666,439,1.858,449,6.43,454,1.402,467,2.117,480,2.603,483,3.277,484,2.305,494,0.759,503,0.604,504,3.275,525,1.554,533,0.867,534,1.953,544,0.692,546,2.43,548,0.622,577,3.372,578,3.958,673,3.061,765,2.455,767,0.643,776,1.008,777,0.734,784,0.449,787,0.465,793,0.643,797,0.943,799,4.121,819,2.18,820,2.21,821,1.085,867,0.421,870,3.412,871,2.705,874,2.705,876,0.5,888,0.366,889,0.366,901,1.685,905,7.718,909,3.131,910,1.832,911,0.805,958,1.334,978,1.187,979,1.229,981,1.334,982,1.115,984,0.805,988,1.229,1021,1.187,1033,0.5,1059,0.759,1062,2.694,1072,0.759,1080,1.229,1100,0.759,1102,0.521,1195,0.604,1196,2.932,1254,0.643,1288,3.217,1289,0.984,1293,1.832,1412,0.759,1477,3.945,1552,0.759,1610,0.805,1799,0.722,1804,7.062,1871,2.71,2057,0.692,2094,2.071,2184,7.14,2185,0.867,2193,0.867,2231,0.867,2232,0.805,2241,3.956,2243,2.577,2247,4.956,2485,2.131,2507,1.487,2628,0.805,3169,5.045,3170,4.604,3171,4.071,3172,4.604,3173,4.604,3174,5.045,3175,4.757,3176,3.412,3177,3.412,3178,5.045,3179,3.412,3180,3.412,3181,6.24,3182,9.083,3183,4.604,3184,4.604,3185,6.24,3186,4.604,3187,4.604,3188,4.604,3334,1.6,3406,2.229,3441,1.773,3442,0.96,3443,1.773,3444,3.602,3445,1.773,3446,0.96,3447,0.96,3448,0.96,3449,0.867,3450,1.773,3451,1.773,3452,5.491,3453,5.491,3454,5.491,3455,7.305,3456,0.96,3457,5.189,3458,5.189,3459,5.189,3460,8.197,3461,5.189,3462,5.189,3463,8.838,3464,5.189,3465,5.189,3466,5.189,3467,4.484,3468,4.484,3469,4.484,3470,3.602,3471,3.602,3472,3.074,3473,3.074,3474,3.074,3475,3.074,3476,0.96,3477,3.074,3478,0.96,3479,0.96,3480,0.96,3481,0.96,3482,0.96,3483,0.96,3484,3.074,3485,0.96,3486,0.96,3487,7.91,3488,0.96,3489,0.96,3490,0.96,3491,1.773,3492,1.773,3493,1.773,3494,1.773,3495,0.96,3496,1.773,3497,0.96,3498,0.96,3499,0.96,3500,1.773,3501,0.96,3502,0.96,3503,0.96,3504,3.074,3505,1.773,3506,1.773]],["t/568",[0,0.013,1,0.008,6,0.027,7,0.076,11,0.012,14,0.007,15,0.448,17,1.583,19,0.048,20,0.15,21,0.012,23,0.074,26,0.028,30,0.487,31,0.119,47,0.326,56,0.448,57,0.022,59,0.049,63,0.847,64,0.121,65,1.174,67,0.394,71,0.487,75,1.939,77,0.862,80,1.822,83,3.603,86,0.259,100,0.272,103,0.857,106,0.05,107,1.035,113,4.132,114,0.656,116,2.059,119,0.139,120,0.247,122,1.147,124,0.328,126,0.168,130,0.487,131,0.151,132,2.499,134,1.08,144,2.179,146,1.828,147,3.91,150,1.983,152,0.287,153,1.034,155,0.21,166,0.233,173,0.504,174,0.625,185,1.296,186,0.792,202,0.46,211,3.257,212,2.881,213,4.09,214,3.364,215,0.351,220,0.524,224,0.41,225,3.997,226,2.757,227,1.94,228,1.599,229,1.092,230,0.562,231,0.902,232,0.641,233,3.401,234,2.46,235,1.987,236,1.627,237,1.063,238,1.144,239,0.295,240,0.295,241,0.587,242,0.343,244,0.382,247,0.888,248,0.662,251,0.746,256,4.282,262,2.178,266,0.146,267,0.21,268,0.844,269,0.259,270,0.353,271,1.365,273,0.142,278,2.178,279,0.253,282,1.19,285,0.498,289,0.343,291,0.39,295,0.499,296,0.195,312,3.107,336,0.995,337,0.259,338,0.523,344,0.746,346,0.139,348,0.156,359,1.93,360,0.279,361,0.21,362,0.277,366,0.195,369,0.111,370,1.052,379,0.287,394,0.2,397,1.66,400,1.365,401,1.508,402,2.455,403,0.109,417,0.537,418,0.238,419,1.658,422,1.134,423,0.465,432,0.184,433,0.448,448,0.139,449,6.096,454,0.53,460,2.267,461,0.151,466,0.75,469,0.161,480,2.017,482,0.156,483,2.339,484,1.645,487,1.382,494,1.289,497,0.295,504,0.458,515,0.21,516,0.21,517,0.21,518,0.21,519,0.21,521,0.562,522,0.411,525,0.287,528,0.195,529,0.21,536,0.53,562,0.851,571,0.142,576,2.856,577,1.873,581,1.348,585,0.658,588,1.471,591,0.913,765,0.358,767,0.449,770,0.487,772,0.233,776,0.439,777,1.182,778,0.597,779,0.476,780,0.324,781,0.343,784,1.458,787,2.653,791,0.253,793,0.305,799,1.105,802,0.809,803,0.195,806,0.36,808,1.091,810,1.007,812,0.328,814,0.844,818,0.693,819,2.01,820,2.007,822,0.168,833,0.36,843,0.272,867,0.294,870,3.339,871,2.668,872,0.939,874,2.794,876,1.026,887,0.195,888,0.089,889,0.089,890,0.151,899,1.528,900,1.59,901,1.458,902,1.585,907,4.754,909,0.364,910,0.523,945,0.422,963,0.135,969,0.483,981,0.175,985,0.21,986,0.902,987,0.411,988,3.932,1018,0.129,1021,4.1,1031,0.21,1033,0.561,1061,7.487,1072,0.851,1079,0.21,1089,0.53,1102,0.978,1103,0.328,1141,2.261,1142,1.144,1155,0.195,1174,1.683,1175,0.693,1195,0.422,1210,0.21,1213,0.316,1236,0.242,1256,0.411,1261,0.184,1262,0.328,1271,0.435,1275,0.888,1285,0.21,1314,1.821,1316,0.126,1317,0.142,1330,0.382,1347,2.529,1373,0.879,1378,0.632,1379,1.372,1401,8.34,1412,0.53,1461,1.057,1473,0.21,1477,3.528,1503,5.971,1528,0.36,1530,2.465,1531,2.465,1534,0.343,1566,0.295,1584,0.151,1606,1.063,1610,1.65,1611,3.014,1612,1.776,1613,0.382,1619,0.175,1716,0.382,1799,0.175,1897,0.184,1973,1.627,1995,0.21,1996,0.632,2001,0.21,2061,3.974,2070,0.21,2089,0.175,2094,0.562,2168,0.328,2177,0.435,2238,0.184,2240,3.692,2241,3.537,2250,4.134,2292,0.168,2293,0.168,2295,0.382,2392,0.184,2395,0.175,2440,0.792,2452,0.792,2453,0.21,2628,0.195,2630,0.411,2631,0.605,2635,0.605,2636,0.21,2637,0.21,2638,0.21,2639,0.21,2640,0.21,2641,0.21,2647,0.184,2656,0.792,2657,0.792,2691,3.719,2717,0.411,2731,0.21,2732,0.21,2733,0.21,2734,0.21,2735,0.21,2736,0.792,2737,0.792,2739,0.792,2740,0.971,2742,1.144,2768,0.184,2777,4.134,2785,0.792,2832,0.343,2895,0.382,3068,0.175,3073,1.144,3103,0.21,3175,0.184,3197,0.411,3380,0.21,3449,0.21,3507,0.232,3508,1.076,3509,0.456,3510,0.67,3511,0.232,3512,0.67,3513,0.232,3514,0.232,3515,0.232,3516,0.456,3517,0.232,3518,0.456,3519,0.67,3520,0.232,3521,0.232,3522,0.232,3523,0.232,3524,0.232,3525,1.968,3526,0.456,3527,0.456,3528,0.456,3529,0.456,3530,1.452,3531,0.232,3532,0.232,3533,0.232,3534,0.232,3535,0.456,3536,0.232,3537,0.232,3538,0.232,3539,1.076,3540,0.232,3541,0.232,3542,0.232,3543,0.232,3544,0.456,3545,0.232,3546,0.232,3547,0.232,3548,0.456,3549,0.232,3550,0.232,3551,10.575,3552,0.232,3553,0.456,3554,0.67,3555,0.456,3556,0.232,3557,0.456,3558,0.232,3559,0.232,3560,0.232,3561,0.877,3562,0.232,3563,8.048,3564,0.67,3565,1.452,3566,1.076,3567,1.076,3568,0.67,3569,3.48,3570,1.267,3571,0.232,3572,0.232,3573,1.076,3574,0.232,3575,0.232,3576,2.989,3577,0.232,3578,0.232,3579,0.456,3580,3.594,3581,9.421,3582,5.672,3583,5.279,3584,5.279,3585,5.672,3586,3.813,3587,5.416,3588,5.136,3589,3.705,3590,5.136,3591,5.61,3592,4.217,3593,5.61,3594,5.208,3595,3.918,3596,5.208,3597,5.547,3598,4.217,3599,5.547,3600,5.136,3601,4.311,3602,9.718,3603,4.217,3604,4.217,3605,4.217,3606,8.485,3607,9.86,3608,4.02,3609,4.493,3610,4.58,3611,6.964,3612,4.58,3613,6.374,3614,4.58,3615,4.58,3616,4.403,3617,4.58,3618,4.58,3619,7.661,3620,5.062,3621,4.58,3622,6.125,3623,4.493,3624,6.278,3625,4.493,3626,4.493,3627,4.12,3628,4.12,3629,4.986,3630,4.12,3631,4.12,3632,3.813,3633,3.918,3634,3.918,3635,4.403,3636,0.456,3637,2.857,3638,0.232,3639,1.452,3640,1.968,3641,1.968,3642,1.968,3643,1.968,3644,1.968,3645,1.968,3646,3.363,3647,1.968,3648,1.968,3649,4.217,3650,8.469,3651,3.705,3652,3.594,3653,3.594,3654,3.705,3655,3.594,3656,0.456,3657,0.232,3658,0.877,3659,0.232,3660,3.363,3661,2.857,3662,1.076,3663,0.456,3664,0.877,3665,0.67,3666,0.456,3667,0.877,3668,1.267,3669,1.076,3670,1.267,3671,0.456,3672,1.076,3673,0.232,3674,0.456,3675,1.076,3676,1.076,3677,0.456,3678,0.877,3679,2.579,3680,0.456,3681,0.456,3682,3.117,3683,3.117,3684,0.456,3685,4.909,3686,4.909,3687,0.877,3688,0.456,3689,0.456,3690,1.63,3691,0.456,3692,0.456,3693,0.877,3694,0.456,3695,0.456,3696,0.456,3697,0.877,3698,0.456,3699,0.877,3700,0.456,3701,0.456,3702,0.456,3703,0.456,3704,0.877,3705,0.456,3706,0.456,3707,0.456,3708,0.456,3709,2.434,3710,0.232,3711,0.232,3712,0.232,3713,0.232,3714,0.232,3715,0.232,3716,0.232,3717,0.232,3718,0.456,3719,0.232,3720,0.232,3721,0.232,3722,0.232,3723,0.456,3724,0.456,3725,1.076,3726,1.076,3727,1.076,3728,0.232,3729,0.232,3730,1.076,3731,0.232,3732,1.076,3733,1.076,3734,0.456,3735,1.076,3736,1.076,3737,0.456,3738,0.232,3739,0.456,3740,0.232,3741,0.232,3742,1.802,3743,0.67,3744,2.284,3745,0.456,3746,0.456,3747,3.117,3748,0.456,3749,0.456,3750,0.232,3751,0.456,3752,0.232,3753,0.232,3754,0.232,3755,0.67,3756,0.456,3757,0.232,3758,0.232,3759,0.67,3760,0.232,3761,0.232,3762,0.232,3763,0.232,3764,0.232,3765,0.232,3766,0.232,3767,0.232,3768,0.232,3769,0.232,3770,0.232,3771,0.232,3772,0.232,3773,0.232,3774,0.232,3775,0.232,3776,0.232,3777,1.076,3778,0.456,3779,0.232,3780,0.232,3781,0.232,3782,0.456,3783,0.456,3784,0.456,3785,0.456,3786,0.232,3787,0.232,3788,0.232,3789,0.232,3790,0.877,3791,0.232,3792,0.232,3793,0.232,3794,0.456,3795,0.456,3796,1.802,3797,0.232,3798,0.232,3799,0.232,3800,0.232,3801,0.877,3802,0.232,3803,0.456,3804,0.232,3805,0.456,3806,0.232,3807,0.232,3808,0.232,3809,0.232,3810,0.456,3811,0.456,3812,0.232,3813,0.232,3814,0.232,3815,0.232,3816,0.232,3817,0.232,3818,0.232,3819,0.232,3820,0.232,3821,0.232,3822,0.456,3823,0.232,3824,0.877,3825,0.67,3826,0.67,3827,1.802,3828,0.67,3829,0.67,3830,0.456,3831,0.67,3832,0.67,3833,0.67,3834,0.67,3835,0.232,3836,0.232,3837,0.232,3838,0.232,3839,0.232,3840,0.232,3841,0.232,3842,0.232,3843,0.232,3844,0.232,3845,0.232,3846,0.232,3847,0.232,3848,0.456,3849,0.456,3850,0.456,3851,0.456,3852,2.579,3853,1.63,3854,0.456,3855,0.232,3856,0.232,3857,0.456,3858,0.456,3859,0.456,3860,0.456,3861,0.232,3862,0.232,3863,0.232,3864,0.232,3865,0.232,3866,0.232,3867,0.232,3868,0.232,3869,0.232,3870,0.232,3871,0.232,3872,0.232,3873,0.232,3874,0.232,3875,1.452,3876,1.076,3877,0.877,3878,0.456,3879,0.232,3880,0.232,3881,0.232,3882,0.232,3883,0.877,3884,0.232,3885,0.232,3886,0.232,3887,0.456,3888,0.232,3889,0.232,3890,0.232,3891,0.232,3892,0.232,3893,0.232,3894,0.232,3895,0.456,3896,0.232,3897,0.232,3898,0.232,3899,0.232,3900,0.232,3901,0.232,3902,0.232,3903,0.232,3904,0.232,3905,2.434,3906,0.877,3907,0.232,3908,1.076,3909,0.232,3910,0.456,3911,0.232,3912,0.232,3913,0.232,3914,1.968,3915,0.232,3916,0.232,3917,0.232,3918,0.877,3919,0.877,3920,0.877,3921,0.877,3922,0.877,3923,0.877,3924,0.877,3925,0.877,3926,0.877,3927,0.877,3928,0.877,3929,0.877,3930,0.877,3931,0.877,3932,0.877,3933,0.877,3934,0.877,3935,0.877,3936,0.877,3937,0.877,3938,0.877,3939,0.877,3940,0.877,3941,0.877,3942,0.877,3943,0.877,3944,0.877,3945,0.877,3946,0.877,3947,0.877,3948,0.877,3949,0.877,3950,0.877,3951,0.877,3952,0.877,3953,0.877,3954,0.877,3955,0.877,3956,0.877,3957,0.877,3958,0.877,3959,1.968,3960,0.67,3961,0.456,3962,0.877,3963,0.232,3964,0.232]]],"invertedIndex":[["",{"_index":6,"t":{"2":{"position":[[43,1],[317,1],[601,1],[1030,1],[1278,1],[1568,1],[1853,1],[2105,1],[2324,1],[2544,1]]},"4":{"position":[[41,1]]},"6":{"position":[[40,1]]},"8":{"position":[[41,1]]},"10":{"position":[[41,1]]},"12":{"position":[[41,1],[306,1],[325,1],[343,1],[362,1],[388,1],[450,1],[469,1],[487,1],[506,1],[559,1],[585,1]]},"14":{"position":[[40,1]]},"16":{"position":[[41,1]]},"18":{"position":[[41,1]]},"20":{"position":[[38,1]]},"22":{"position":[[37,1]]},"24":{"position":[[38,1]]},"26":{"position":[[37,1]]},"28":{"position":[[41,1]]},"30":{"position":[[39,1]]},"32":{"position":[[39,1]]},"34":{"position":[[42,1]]},"36":{"position":[[42,1]]},"38":{"position":[[40,1]]},"40":{"position":[[41,1]]},"42":{"position":[[42,1]]},"44":{"position":[[42,1]]},"46":{"position":[[41,1]]},"48":{"position":[[42,1]]},"50":{"position":[[42,1]]},"52":{"position":[[42,1]]},"54":{"position":[[41,1]]},"56":{"position":[[41,1]]},"58":{"position":[[41,1]]},"60":{"position":[[42,1]]},"62":{"position":[[41,1]]},"64":{"position":[[42,1]]},"66":{"position":[[42,1]]},"68":{"position":[[38,1]]},"70":{"position":[[39,1]]},"72":{"position":[[39,1]]},"74":{"position":[[39,1],[338,1]]},"76":{"position":[[39,1]]},"78":{"position":[[39,1]]},"80":{"position":[[37,1]]},"82":{"position":[[37,1]]},"84":{"position":[[38,1]]},"86":{"position":[[38,1]]},"88":{"position":[[38,1]]},"90":{"position":[[37,1]]},"92":{"position":[[37,1]]},"94":{"position":[[38,1]]},"96":{"position":[[41,1]]},"98":{"position":[[37,1]]},"100":{"position":[[41,1]]},"102":{"position":[[44,1]]},"104":{"position":[[37,1]]},"106":{"position":[[42,1]]},"108":{"position":[[43,1]]},"110":{"position":[[38,1],[376,1],[634,1],[933,1],[1187,1],[1621,1],[1866,1],[2114,1],[2384,1],[2718,1]]},"112":{"position":[[38,1],[385,1],[633,1],[882,1],[1131,1],[1580,1],[1890,1],[2159,1],[2448,1],[2707,1]]},"114":{"position":[[42,1],[448,1],[761,1],[1101,1],[1416,1],[1678,1],[1949,1],[2223,1],[2421,1],[2625,1]]},"116":{"position":[[40,1],[231,1],[425,1]]},"118":{"position":[[39,1],[223,1],[420,1],[615,1],[813,1],[1014,1],[1244,1],[1446,1],[1675,1],[1845,1]]},"122":{"position":[[86,1]]},"124":{"position":[[84,1]]},"126":{"position":[[93,1],[518,1],[952,1],[1224,1],[1674,1],[1963,1],[2237,1],[2435,1]]},"128":{"position":[[87,1],[361,1],[645,1],[1074,1],[1322,1],[1612,1],[1897,1],[2149,1],[2368,1],[2588,1]]},"130":{"position":[[98,1]]},"132":{"position":[[82,1]]},"134":{"position":[[94,1]]},"136":{"position":[[95,1],[354,1],[683,1],[1089,1],[1402,1]]},"138":{"position":[[91,1]]},"142":{"position":[[101,1]]},"144":{"position":[[92,1],[498,1]]},"146":{"position":[[100,1],[506,1]]},"148":{"position":[[99,1]]},"150":{"position":[[90,1],[339,1],[588,1]]},"152":{"position":[[100,1]]},"154":{"position":[[98,1]]},"156":{"position":[[99,1]]},"158":{"position":[[97,1]]},"160":{"position":[[92,1]]},"162":{"position":[[95,1]]},"164":{"position":[[93,1]]},"166":{"position":[[96,1]]},"168":{"position":[[99,1]]},"170":{"position":[[94,1]]},"172":{"position":[[94,1]]},"174":{"position":[[93,1],[499,1]]},"176":{"position":[[98,1]]},"178":{"position":[[96,1]]},"180":{"position":[[93,1],[499,1]]},"182":{"position":[[103,1]]},"184":{"position":[[91,1]]},"186":{"position":[[95,1]]},"188":{"position":[[92,1]]},"190":{"position":[[92,1],[339,1]]},"192":{"position":[[82,1],[420,1],[678,1],[977,1],[1231,1],[1665,1],[1910,1],[2158,1],[2428,1],[2762,1]]},"194":{"position":[[82,1],[429,1],[677,1],[926,1],[1175,1],[1624,1],[1934,1],[2203,1],[2492,1],[2751,1]]},"196":{"position":[[86,1],[492,1],[805,1]]},"198":{"position":[[92,1]]},"200":{"position":[[99,1],[524,1],[958,1],[1231,1]]},"202":{"position":[[88,1]]},"204":{"position":[[96,1],[370,1],[654,1],[1083,1],[1331,1],[1621,1],[1906,1],[2158,1],[2377,1],[2597,1]]},"206":{"position":[[112,1]]},"208":{"position":[[91,1],[429,1],[687,1],[986,1],[1240,1],[1674,1],[1919,1],[2167,1],[2437,1],[2771,1]]},"210":{"position":[[93,1],[284,1],[478,1]]},"212":{"position":[[91,1],[438,1],[686,1],[935,1],[1184,1],[1633,1],[1943,1],[2212,1],[2501,1],[2760,1]]},"214":{"position":[[95,1],[501,1],[814,1],[1154,1],[1469,1],[1731,1],[2002,1],[2276,1],[2474,1],[2678,1]]},"216":{"position":[[91,1]]},"218":{"position":[[87,1],[388,1]]},"220":{"position":[[92,1],[276,1],[473,1],[668,1],[866,1],[1067,1],[1297,1],[1499,1],[1728,1],[1898,1]]},"222":{"position":[[89,1],[334,1],[603,1]]},"224":{"position":[[93,1]]},"226":{"position":[[91,1]]},"228":{"position":[[97,1]]},"230":{"position":[[101,1]]},"232":{"position":[[93,1],[527,1],[778,1]]},"234":{"position":[[87,1]]},"236":{"position":[[90,1],[389,1],[823,1],[1236,1]]},"238":{"position":[[91,1]]},"240":{"position":[[92,1],[505,1]]},"242":{"position":[[94,1]]},"244":{"position":[[89,1],[337,1],[627,1],[912,1],[1132,1],[1390,1],[1689,1],[1943,1],[2377,1],[2622,1]]},"246":{"position":[[90,1],[339,1],[588,1]]},"248":{"position":[[89,1],[367,1]]},"250":{"position":[[92,1]]},"252":{"position":[[92,1],[345,1]]},"254":{"position":[[92,1],[518,1],[803,1],[1055,1],[1276,1],[1615,1],[2028,1],[2374,1]]},"256":{"position":[[92,1]]},"258":{"position":[[94,1],[523,1]]},"260":{"position":[[90,1]]},"262":{"position":[[89,1],[523,1],[936,1]]},"264":{"position":[[86,1],[523,1]]},"266":{"position":[[86,1]]},"268":{"position":[[93,1]]},"270":{"position":[[87,1]]},"272":{"position":[[90,1],[375,1],[809,1]]},"274":{"position":[[94,1],[519,1]]},"276":{"position":[[87,1],[429,1]]},"278":{"position":[[91,1],[365,1],[649,1],[1078,1],[1326,1],[1616,1],[1901,1],[2153,1],[2372,1],[2592,1]]},"280":{"position":[[90,1],[364,1],[648,1],[1077,1],[1325,1],[1615,1],[1900,1],[2152,1],[2371,1],[2591,1]]},"282":{"position":[[86,1],[424,1],[682,1],[981,1],[1235,1],[1669,1],[1914,1],[2162,1],[2432,1],[2766,1]]},"284":{"position":[[86,1]]},"286":{"position":[[86,1],[433,1],[681,1],[930,1],[1179,1],[1628,1]]},"288":{"position":[[85,1],[432,1],[680,1],[929,1],[1178,1],[1627,1]]},"290":{"position":[[92,1]]},"292":{"position":[[85,1]]},"294":{"position":[[81,1],[382,1],[716,1]]},"296":{"position":[[87,1]]},"298":{"position":[[87,1]]},"300":{"position":[[85,1],[423,1],[681,1],[980,1],[1234,1],[1668,1],[1913,1],[2161,1],[2431,1],[2765,1]]},"302":{"position":[[87,1]]},"304":{"position":[[85,1]]},"306":{"position":[[83,1],[328,1],[597,1]]},"308":{"position":[[93,1]]},"310":{"position":[[95,1]]},"312":{"position":[[85,1]]},"314":{"position":[[91,1]]},"316":{"position":[[80,1]]},"318":{"position":[[84,1],[383,1],[817,1],[1230,1]]},"320":{"position":[[87,1],[521,1]]},"322":{"position":[[86,1],[499,1]]},"324":{"position":[[85,1]]},"326":{"position":[[88,1]]},"328":{"position":[[84,1],[358,1],[642,1],[1072,1],[1270,1]]},"330":{"position":[[85,1],[358,1],[606,1],[896,1],[1181,1],[1401,1],[1659,1],[1958,1],[2212,1],[2646,1]]},"332":{"position":[[81,1],[498,1],[747,1],[997,1],[1193,1],[1398,1]]},"334":{"position":[[84,1]]},"336":{"position":[[83,1],[361,1]]},"338":{"position":[[85,1]]},"340":{"position":[[92,1]]},"342":{"position":[[87,1]]},"344":{"position":[[83,1]]},"346":{"position":[[93,1],[518,1],[771,1]]},"348":{"position":[[89,1]]},"350":{"position":[[86,1],[281,1],[479,1]]},"352":{"position":[[86,1]]},"354":{"position":[[88,1]]},"356":{"position":[[83,1],[517,1],[930,1],[1272,1],[1472,1]]},"358":{"position":[[88,1]]},"360":{"position":[[86,1],[362,1],[788,1],[1073,1],[1325,1],[1546,1],[1885,1],[2298,1],[2644,1],[2950,1]]},"362":{"position":[[83,1],[344,1]]},"364":{"position":[[91,1]]},"366":{"position":[[88,1],[517,1]]},"368":{"position":[[80,1],[384,1]]},"370":{"position":[[86,1],[355,1]]},"372":{"position":[[80,1]]},"374":{"position":[[84,1],[369,1],[803,1]]},"376":{"position":[[80,1]]},"378":{"position":[[87,1]]},"380":{"position":[[87,1]]},"382":{"position":[[81,1],[423,1],[670,1],[985,1]]},"384":{"position":[[85,1]]},"386":{"position":[[88,1],[513,1]]},"388":{"position":[[84,1]]},"390":{"position":[[85,1]]},"392":{"position":[[85,1]]},"394":{"position":[[85,1]]},"396":{"position":[[85,1]]},"398":{"position":[[84,1]]},"400":{"position":[[85,1]]},"402":{"position":[[82,1]]},"404":{"position":[[82,1]]},"406":{"position":[[81,1]]},"408":{"position":[[81,1]]},"410":{"position":[[83,1]]},"412":{"position":[[83,1]]},"414":{"position":[[85,1]]},"416":{"position":[[86,1]]},"418":{"position":[[86,1]]},"420":{"position":[[84,1]]},"422":{"position":[[85,1]]},"424":{"position":[[85,1]]},"426":{"position":[[86,1]]},"428":{"position":[[86,1]]},"430":{"position":[[86,1]]},"432":{"position":[[86,1]]},"434":{"position":[[86,1]]},"436":{"position":[[89,1]]},"438":{"position":[[87,1]]},"440":{"position":[[86,1]]},"442":{"position":[[86,1]]},"444":{"position":[[88,1]]},"446":{"position":[[86,1]]},"448":{"position":[[85,1]]},"450":{"position":[[85,1]]},"452":{"position":[[85,1]]},"454":{"position":[[85,1]]},"456":{"position":[[86,1]]},"458":{"position":[[82,1]]},"460":{"position":[[86,1]]},"462":{"position":[[83,1]]},"464":{"position":[[83,1]]},"466":{"position":[[83,1]]},"468":{"position":[[83,1]]},"470":{"position":[[83,1]]},"472":{"position":[[81,1]]},"474":{"position":[[82,1]]},"476":{"position":[[81,1]]},"478":{"position":[[82,1]]},"480":{"position":[[82,1]]},"482":{"position":[[81,1]]},"484":{"position":[[81,1]]},"486":{"position":[[81,1]]},"488":{"position":[[81,1]]},"490":{"position":[[82,1]]},"492":{"position":[[3397,1],[3451,2],[3488,1]]},"494":{"position":[[298,2],[430,1],[471,1],[483,1],[524,1],[536,1],[578,1],[590,1],[617,1],[644,1],[659,4],[664,2],[692,1],[722,1],[729,1],[731,2],[744,1],[771,1],[798,1],[813,4],[818,2],[846,1],[870,2],[898,1],[928,1],[935,1],[937,2],[940,1],[942,1],[1186,5],[1237,1],[1278,1],[1290,1],[1332,1],[1344,1],[1371,1],[1398,1],[1413,4],[1418,2],[1446,1],[1470,2],[1498,1],[1528,1],[1535,1],[1537,2],[1540,1],[1542,1],[1970,1],[2011,1],[2023,1],[2065,1],[2077,1],[2104,1],[2131,1],[2146,4],[2151,2],[2179,1],[2203,2],[2231,1],[2261,1],[2268,1],[2270,2],[2273,1],[2275,1]]},"496":{"position":[[222,2],[3022,1],[3510,1],[3999,1],[4485,1],[4970,1]]},"498":{"position":[[306,2],[2127,1],[3768,2],[3905,2]]},"502":{"position":[[510,2],[830,2],[994,2],[1157,2],[1321,2],[1550,2],[1717,2],[2113,2],[2345,2],[2508,2],[3969,2],[4740,2],[5392,2],[10908,2],[11284,2],[11611,2],[12181,2],[12578,2],[12926,2]]},"504":{"position":[[553,2],[5312,2],[5358,1],[5379,1],[5402,1],[5404,3],[5434,1],[5450,1],[5476,1],[5508,1],[5510,1],[7137,2],[7215,2],[7629,2],[7632,2],[7676,1],[7738,1],[7810,2],[7849,1],[7851,1],[8918,1],[8940,1],[8987,2],[8995,1],[9043,1],[9215,1],[9251,1],[9253,1],[9430,1],[9473,1],[9475,1],[9563,2],[9655,1],[9736,1],[9780,1],[9782,1]]},"506":{"position":[[246,2],[2185,1],[2206,1],[2256,2],[2326,2],[2398,2],[2432,1],[3154,1],[3175,1],[3225,2],[3295,2],[3367,2],[3401,1],[4397,1],[4412,1],[4427,1],[4448,1],[4482,1],[4542,2],[4612,2],[4684,2],[4756,2],[4866,2],[4975,2],[5085,2],[5186,2],[5198,1],[5220,1]]},"508":{"position":[[242,2],[294,1],[1413,2],[3715,2],[4338,2],[4962,2],[15318,1],[15349,1],[15410,2],[15511,2],[15614,2],[15720,2],[15830,2],[15935,2],[15985,1],[17983,1],[18014,1],[18061,1],[18073,1],[18075,1],[18140,1],[18306,1],[18359,1],[18525,1],[18579,1],[18746,1],[18800,1],[18967,1],[18969,1]]},"510":{"position":[[294,1],[441,1],[553,1],[603,1],[1564,2],[1668,1],[1743,1],[1762,1],[1971,1],[1973,2],[1988,1],[1995,1],[1997,2],[2012,1],[2014,1],[2016,1],[2492,2],[2594,1],[2661,1],[2673,1],[2716,1],[2733,1],[2821,1],[2950,1],[2952,2],[2987,2],[3115,1],[3210,1],[3212,1],[3644,1],[3707,1],[3719,1],[3761,1],[3763,2],[3814,1],[3829,1],[3841,1],[3862,1],[3872,2],[3897,1],[3899,1],[4060,2],[4167,1],[4246,1],[4260,1],[4287,1],[4303,1],[4326,1],[4362,1],[4388,1],[4409,2],[4429,1],[4574,1],[4576,2],[4591,1],[4598,1],[4600,2],[4615,1],[4617,1],[4619,1],[4955,2],[5007,2],[5132,2],[5257,2],[5350,1],[5440,1],[5454,1],[5481,1],[5488,1],[5495,2],[5515,1],[5660,1],[5662,2],[5677,1],[5684,1],[5686,2],[5701,1],[5703,1],[5705,1],[5938,2],[6043,1],[6112,1],[6131,1],[6232,1],[6234,2],[6249,1],[6256,1],[6258,2],[6273,1],[6275,1],[6277,1],[6430,2],[6535,1],[6604,1],[6618,1],[6645,1],[6660,1],[6667,2],[6687,1],[6820,1],[6822,2],[6837,1],[6844,1],[6846,2],[6861,1],[6863,1],[6865,1],[7034,2],[7159,1],[7228,1],[7242,1],[7269,1],[7292,1],[7299,2],[7319,1],[7464,1],[7466,2],[7481,1],[7488,1],[7490,2],[7505,1],[7507,1],[7509,1],[7662,2],[7747,1],[7800,1],[7869,1],[7883,1],[7910,1],[7925,1],[7954,1],[7961,2],[7981,1],[8113,1],[8115,2],[8130,1],[8137,1],[8139,2],[8154,1],[8156,1],[8158,1]]},"512":{"position":[[335,2],[1166,2],[2887,2],[2890,2],[2893,1],[2980,3],[3031,1],[3102,1],[3134,1],[3176,1],[3208,1],[3210,1],[3646,2],[3757,1],[3787,1],[3867,1],[3884,1],[4057,1],[4059,1],[4492,1],[4520,1],[4566,1],[4578,1],[4620,1],[4622,2],[4673,1],[4688,1],[4700,1],[4721,1],[4731,2],[4756,1],[4758,1],[5325,2],[5507,1],[5537,1],[5617,1],[5634,1],[5909,1],[5956,2],[5967,1],[6015,1],[6594,1],[6622,1],[6668,1],[6680,1],[6747,1],[6759,1],[6801,1],[6803,2],[6854,1],[6869,1],[6881,1],[6901,1],[6911,2],[6936,1],[6938,1],[7241,1],[7314,1],[7346,1],[7348,1],[11300,2],[11471,1],[11544,1],[11576,1],[11578,1],[15541,2],[15718,1],[15791,1],[15823,1],[15825,1],[19682,2],[19859,1],[19932,1],[19964,1],[19966,1],[20669,1],[20742,1],[20774,1],[20818,1],[20850,1],[20897,1],[20917,2],[20920,1],[20959,3],[20963,1],[21008,1],[21028,2],[21031,1],[21068,3],[21072,1],[21118,1],[21138,2],[21141,1],[21179,3],[21183,1],[21229,1],[21249,2],[21252,1],[21290,3],[21294,1],[21296,1]]},"514":{"position":[[1596,2],[1627,2],[1658,2],[1689,2],[1721,2],[1988,2],[2083,2],[2135,2],[2187,2],[2410,2],[2461,2],[2540,2],[2617,2],[2697,2],[2774,2],[2908,2],[2970,1],[2994,1],[3056,1],[3076,2],[3079,1],[3099,1],[3116,3],[3120,1],[3122,1]]},"516":{"position":[[335,2],[711,2],[859,2],[1441,2],[1673,1],[3690,1],[3751,1],[3779,1],[3819,1],[3847,1],[3849,1],[4208,2],[4314,1],[4336,1],[4411,1],[4428,1],[4597,1],[4599,1],[5032,1],[5095,1],[5107,1],[5149,1],[5151,2],[5202,1],[5217,1],[5229,1],[5250,1],[5260,2],[5285,1],[5287,1],[5862,2],[6003,1],[6025,1],[6100,1],[6117,1],[6388,1],[6435,2],[6446,1],[6487,1],[7066,1],[7129,1],[7141,1],[7208,1],[7220,1],[7262,1],[7264,2],[7315,1],[7330,1],[7342,1],[7362,1],[7372,2],[7397,1],[7399,1],[8183,1],[8244,1],[8272,1],[8312,1],[8340,1],[8342,1],[9361,1],[9422,1],[9450,1],[9490,1],[9518,1],[9520,1],[10047,1],[10108,1],[10136,1],[10176,1],[10204,1],[10206,1],[11137,1],[11198,1],[11226,1],[11266,1],[11294,1],[11296,1],[11844,2],[11945,2],[12040,2],[12092,1],[12163,1],[13049,2],[13142,2],[13246,2],[13350,2],[13454,2],[13558,2],[13621,1],[13760,1],[14419,1],[14483,1],[14503,2],[14506,1],[14545,3],[14549,1],[14590,1],[14610,2],[14613,1],[14649,3],[14653,1],[14695,1],[14715,2],[14718,1],[14756,3],[14760,1],[14802,1],[14822,2],[14825,1],[14861,3],[14865,1],[14914,1],[14934,2],[14937,1],[14983,3],[14987,1],[14989,1]]},"518":{"position":[[849,2],[895,2],[941,2],[987,2],[1165,2],[1194,2],[1230,2],[1407,2],[1487,2],[1569,2],[1649,2],[1728,2],[1808,2],[1885,2],[1963,2],[2040,2],[2241,2],[2317,2],[2393,2],[2474,2],[2757,2],[2833,2],[2909,2],[2990,2],[3021,2],[3028,2],[3136,2],[3212,2],[3288,2],[3369,2]]},"520":{"position":[[289,2],[1077,2],[1152,2],[1245,2],[1338,2],[1458,2],[1587,2],[1680,2],[1734,2],[1791,2],[1847,2],[2059,2],[2280,2],[2719,1],[2781,1],[2866,1],[2903,1],[2994,1],[3028,1],[3107,1],[3109,1],[3292,2],[3366,2],[3429,2],[3504,2],[3763,2],[3853,2],[3946,2],[4038,2],[4131,2],[4226,2],[4316,2],[4545,2],[4658,2],[4802,2],[4946,2],[5092,2],[5238,2],[5387,2],[5533,2],[5598,1],[5668,2],[5700,1],[5899,2],[5953,2],[6010,2],[6066,2],[6298,2],[6416,2],[6537,2],[6657,2],[6778,2],[6901,2],[7020,2],[7340,2],[7469,2],[7601,2],[7732,2],[7864,2],[7998,2],[8128,2]]},"522":{"position":[[713,1],[796,1],[838,1],[1048,1],[1050,1],[1052,3],[1088,3],[1092,1],[1094,1],[1130,2],[1271,1],[1322,1],[1334,1],[1364,1],[1370,1],[1395,2],[1440,1],[1448,1],[1450,2],[1470,1],[1480,1],[1505,1],[1507,1],[1509,1],[1752,1],[1803,1],[1815,1],[1859,1],[1945,2],[1992,1],[2035,1],[2120,2],[2167,1],[2169,1],[2451,2],[2454,2],[2582,2],[2585,2],[2715,2],[2718,2],[2843,2],[2846,2],[2970,2],[2973,2],[3096,2],[3099,2],[3217,2],[3220,2],[3339,2],[3342,2],[3416,1],[3467,1],[3479,1],[3544,1],[3605,2],[3652,1],[3654,1]]},"524":{"position":[[815,2],[1445,2],[1565,2],[1939,2],[1991,2],[2100,2],[2211,2],[2317,2],[2422,2],[2526,2],[2624,2],[2682,1],[2712,1],[2786,2],[2895,2],[2915,1],[2922,1],[2941,1],[2972,1],[3001,1],[3071,2],[3074,1],[3382,2],[3434,2],[3543,2],[3654,2],[3760,2],[3865,2],[3969,2],[4068,2],[4168,2],[4226,1],[4256,1],[4330,2],[4439,2],[4459,1],[4466,1],[4487,1],[4564,2],[4567,1],[4921,2],[4973,2],[5082,2],[5193,2],[5299,2],[5404,2],[5508,2],[5606,2],[5664,1],[5694,1],[5768,2],[5877,2],[5897,1],[5904,1],[5923,1],[5954,1],[5983,1],[6053,2],[6056,1],[6511,2],[6563,2],[6672,2],[6783,2],[6889,2],[6994,2],[7098,2],[7196,2],[7254,1],[7284,1],[7358,2],[7467,1],[7486,1],[7526,1],[7558,1],[7602,1],[7644,1],[7714,2],[7794,1],[7808,2],[7828,2],[7841,2],[7885,1],[7887,1],[8192,2],[8246,2],[8360,2],[8478,2],[8594,2],[8714,2],[8838,2],[8960,2],[9080,2],[9204,2],[9281,1],[9315,1],[9371,1],[9436,1],[9459,1],[9494,1],[9501,1],[9528,1],[9559,1],[9588,1],[9658,3],[9662,1],[9680,1],[9693,1],[9695,1],[10191,2],[10243,2],[10352,2],[10463,2],[10569,2],[10674,2],[10778,2],[10876,2],[10934,1],[10964,1],[11038,2],[11147,2],[11167,1],[11174,1],[11193,1],[11224,1],[11253,1],[11323,2],[11326,1],[11482,3],[11486,3],[11522,3],[11526,3],[11616,2],[11760,1],[11807,1],[11819,1],[11849,1],[11855,1],[11857,2],[12002,1],[12024,1],[12026,2],[12115,1],[12117,1],[12119,1]]},"526":{"position":[[377,2],[613,2],[664,2],[903,2],[938,2],[970,2],[1001,2],[1079,2],[1129,2],[1179,2],[1229,2],[1499,2],[1571,2],[1643,2],[1715,2],[1787,2],[1859,2],[1946,2],[2041,2],[2120,2],[2193,2],[2286,2],[2368,2],[2457,2],[2530,2],[2606,2],[2689,2],[2771,2],[2878,2],[3022,2],[3182,2],[3318,2],[3402,2],[3504,2],[4125,2]]},"528":{"position":[[941,2],[2899,2],[3178,2],[3462,2],[7222,2],[7297,2],[7374,2],[7454,2],[7535,2],[7614,2],[7648,1],[8662,1],[8674,1],[8753,1],[8772,1],[8805,1],[8818,2],[8848,1],[8887,1],[9167,1],[9169,1],[9171,1],[9173,1]]},"530":{"position":[[547,2],[1365,1],[1390,1],[1423,1],[1425,1],[1720,1],[1742,1],[1789,2],[1797,1],[1845,1]]},"532":{"position":[[759,2],[820,2],[1691,1],[2089,2],[2171,2],[2249,2],[2401,2],[3999,2],[4097,2],[4100,2],[4243,2],[4246,2],[4392,2],[4395,2],[4533,2],[4536,2],[4701,2],[4704,2],[4776,1],[4804,1],[4856,1],[4896,1],[4934,1],[4963,1],[4992,1],[4994,1],[5117,2],[5142,1],[5191,1],[5203,1],[5219,1],[5228,1],[5264,1],[5288,2],[5307,1],[5329,1],[5342,1],[5362,1],[5380,1],[5387,1],[5411,1],[5413,2],[5416,1],[5485,1],[5504,1],[5566,1],[5612,1],[5650,1],[5674,2],[5704,2],[5758,1],[5831,1],[5880,2],[5911,2],[5948,1],[5960,1],[6002,1],[6035,1],[6042,1],[6056,1],[6089,1],[6112,1],[6157,1],[6159,1],[6180,1],[6251,1],[6290,1],[6314,2],[6371,2],[6403,1],[6443,1],[6519,1],[6555,1],[6579,2],[6634,2],[6658,1],[6735,1],[6861,1],[6873,1],[6941,1],[6992,1],[7020,1],[7083,1],[7132,1],[7160,1],[7223,1],[7319,1],[7334,1],[7378,1],[7389,1],[7418,1],[7462,1],[7481,1],[7534,1],[7542,1],[7621,2],[7656,1],[7664,1],[7699,1],[7734,1],[7753,1],[7771,2],[7786,1],[7805,1],[7823,2],[7838,1],[7857,1],[7861,2],[7864,2],[7867,1],[7906,1],[7917,1],[7954,1],[7965,1],[7989,1],[8019,1],[8034,1],[8098,1],[8111,1],[8148,1],[8159,1],[8186,1],[8220,1],[8237,1],[8273,1],[8287,2],[8325,1],[8355,1],[8450,2],[8459,1],[8487,1],[8539,1],[8579,1],[8631,1],[8644,1],[8663,1],[8703,2],[8719,1],[8761,1],[8785,1],[8792,1],[8811,1],[8840,2],[8859,1],[8878,1],[8920,2],[8935,1],[8954,1],[8996,2],[9011,1],[9030,1],[9034,2],[9037,2],[9074,1],[9090,1],[9099,1],[9118,1],[9129,2],[9148,1],[9200,1],[9236,1],[9254,1],[9261,1],[9281,2],[9310,1],[9353,1],[9406,1],[9450,1],[9502,1],[9549,1],[9558,1],[9627,1],[9646,1],[9708,1],[9754,1],[9756,1],[9848,2],[9857,1],[9885,1],[9937,1],[9977,1],[10029,1],[10042,1],[10093,1],[10112,1],[10152,2],[10168,1],[10210,1],[10234,1],[10242,1],[10260,1],[10279,1],[10306,2],[10325,1],[10344,1],[10356,2],[10371,1],[10390,1],[10402,2],[10417,1],[10436,1],[10440,2],[10443,2],[10483,1],[10507,1],[10515,1],[10531,1],[10550,1],[10577,2],[10596,1],[10615,1],[10627,2],[10642,1],[10661,1],[10673,2],[10688,1],[10707,1],[10711,2],[10714,2],[10754,1],[10778,1],[10786,1],[10802,1],[10821,1],[10849,2],[10868,1],[10887,1],[10899,2],[10914,1],[10933,1],[10945,2],[10960,1],[10979,1],[10983,2],[10986,2],[11023,1],[11039,1],[11048,1],[11067,1],[11078,2],[11097,1],[11133,1],[11169,1],[11187,1],[11194,1],[11214,2],[11243,1],[11286,1],[11339,1],[11383,1],[11435,1],[11476,1],[11517,1],[11560,1],[11620,1],[11628,1],[11697,1],[11716,1],[11778,1],[11824,1],[11826,1],[12076,2],[12085,1],[12113,1],[12165,1],[12205,1],[12257,1],[12270,1],[12321,1],[12340,1],[12380,2],[12396,1],[12438,1],[12462,1],[12470,1],[12488,1],[12507,1],[12534,2],[12553,1],[12572,1],[12584,2],[12599,1],[12618,1],[12630,2],[12645,1],[12664,1],[12668,2],[12671,2],[12711,1],[12735,1],[12743,1],[12759,1],[12778,1],[12805,2],[12824,1],[12843,1],[12855,2],[12870,1],[12889,1],[12901,2],[12916,1],[12935,1],[12939,2],[12942,2],[12982,1],[13006,1],[13014,1],[13030,1],[13049,1],[13077,2],[13096,1],[13115,1],[13127,2],[13142,1],[13161,1],[13173,2],[13188,1],[13207,1],[13211,2],[13214,2],[13251,1],[13267,1],[13276,1],[13295,1],[13306,2],[13325,1],[13357,1],[13395,1],[13431,1],[13449,1],[13456,1],[13476,2],[13505,1],[13548,1],[13601,1],[13645,1],[13697,1],[13738,1],[13779,1],[13822,1],[13882,1],[13890,1],[13959,1],[13978,1],[14040,1],[14086,1],[14088,1],[14174,2],[14183,1],[14211,1],[14263,1],[14303,1],[14355,1],[14368,1],[14419,1],[14438,1],[14478,2],[14494,1],[14536,1],[14560,1],[14568,1],[14586,1],[14605,1],[14632,2],[14651,1],[14670,1],[14682,2],[14697,1],[14716,1],[14728,2],[14743,1],[14762,1],[14766,2],[14769,2],[14809,1],[14833,1],[14841,1],[14857,1],[14876,1],[14903,2],[14922,1],[14941,1],[14953,2],[14968,1],[14987,1],[14999,2],[15014,1],[15033,1],[15037,2],[15040,2],[15080,1],[15104,1],[15112,1],[15128,1],[15147,1],[15175,2],[15194,1],[15213,1],[15225,2],[15240,1],[15259,1],[15271,2],[15286,1],[15305,1],[15309,2],[15312,2],[15349,1],[15365,1],[15374,1],[15393,1],[15404,2],[15423,1],[15459,1],[15495,1],[15513,1],[15520,1],[15540,2],[15569,1],[15612,1],[15665,1],[15709,1],[15761,1],[15802,1],[15843,1],[15886,1],[15946,1],[15954,1],[16023,1],[16042,1],[16044,2],[16200,1],[16220,3],[16224,1],[16270,1],[16272,1]]},"534":{"position":[[894,2],[962,2],[1574,1],[2186,2],[2268,2],[2400,2],[2586,1],[2609,1],[2691,1],[2714,1],[2798,1],[2802,1],[2896,1],[2900,1],[3197,1],[3201,1],[3290,1],[3294,1],[3376,1],[3380,1],[3497,1],[3501,1],[3588,1],[3599,1],[4364,2],[5960,1],[6036,2],[6134,2],[6137,2],[6280,2],[6283,2],[6429,2],[6432,2],[6572,2],[6575,2],[6744,2],[6747,2],[6823,1],[6853,1],[6907,1],[6947,1],[6985,1],[7014,1],[7041,1],[7090,1],[7102,1],[7118,1],[7127,1],[7163,1],[7187,2],[7207,1],[7215,1],[7228,1],[7248,1],[7266,1],[7273,1],[7297,1],[7299,2],[7302,1],[7371,1],[7390,1],[7454,1],[7500,1],[7538,1],[7562,2],[7592,2],[7646,1],[7719,1],[7770,2],[7802,2],[7840,1],[7852,1],[7895,1],[7928,1],[7935,1],[7949,1],[7982,1],[8006,1],[8052,1],[8054,1],[8075,1],[8148,1],[8187,1],[8211,2],[8267,1],[8308,1],[8386,1],[8422,1],[8446,2],[8494,1],[8571,1],[8701,1],[8713,1],[8782,1],[8834,1],[8863,1],[8928,1],[8978,1],[9007,1],[9072,1],[9168,1],[9183,1],[9227,1],[9238,1],[9267,1],[9312,1],[9331,1],[9386,1],[9394,1],[9473,2],[9509,1],[9517,1],[9549,1],[9584,1],[9603,1],[9621,2],[9636,1],[9655,1],[9673,2],[9688,1],[9707,1],[9711,2],[9731,1],[9750,1],[9754,2],[9778,1],[9797,1],[9815,2],[9830,1],[9846,1],[9850,2],[9853,2],[9885,1],[9901,1],[9905,2],[9908,2],[9911,1],[9950,1],[9961,1],[9998,1],[10009,1],[10033,1],[10063,1],[10078,1],[10142,1],[10155,1],[10192,1],[10203,1],[10230,1],[10264,1],[10281,1],[10317,1],[10331,2],[10366,1],[10396,1],[10462,1],[10538,2],[10547,1],[10577,1],[10631,1],[10671,1],[10723,1],[10736,1],[10787,1],[10806,1],[10929,2],[10945,1],[10987,1],[11012,1],[11020,1],[11038,1],[11057,1],[11166,2],[11185,1],[11204,1],[11216,2],[11231,1],[11250,1],[11262,2],[11277,1],[11296,1],[11300,2],[11320,1],[11339,1],[11343,2],[11367,1],[11386,1],[11398,2],[11413,1],[11429,1],[11433,2],[11436,2],[11468,1],[11484,1],[11488,2],[11491,2],[11531,1],[11556,1],[11564,1],[11580,1],[11599,1],[11708,2],[11727,1],[11746,1],[11758,2],[11773,1],[11792,1],[11804,2],[11819,1],[11838,1],[11842,2],[11862,1],[11881,1],[11885,2],[11909,1],[11928,1],[11940,2],[11955,1],[11971,1],[11975,2],[11978,2],[12010,1],[12026,1],[12030,2],[12033,2],[12073,1],[12098,1],[12106,1],[12122,1],[12141,1],[12250,2],[12269,1],[12288,1],[12300,2],[12315,1],[12334,1],[12346,2],[12361,1],[12380,1],[12384,2],[12404,1],[12423,1],[12427,2],[12451,1],[12470,1],[12482,2],[12497,1],[12513,1],[12517,2],[12520,2],[12552,1],[12568,1],[12572,2],[12575,2],[12612,1],[12628,1],[12637,1],[12656,1],[12667,2],[12687,1],[12724,1],[12761,1],[12779,1],[12786,1],[12810,2],[12850,1],[12900,1],[12945,1],[12999,1],[13043,1],[13104,1],[13112,1],[13181,1],[13200,1],[13264,1],[13310,1],[13312,1],[13399,2],[13408,1],[13438,1],[13492,1],[13532,1],[13584,1],[13597,1],[13648,1],[13667,1],[13790,2],[13806,1],[13848,1],[13871,1],[13879,1],[13897,1],[13916,1],[14025,2],[14044,1],[14063,1],[14075,2],[14090,1],[14109,1],[14121,2],[14136,1],[14155,1],[14159,2],[14179,1],[14198,1],[14202,2],[14226,1],[14245,1],[14257,2],[14272,1],[14288,1],[14292,2],[14295,2],[14327,1],[14343,1],[14347,2],[14350,2],[14375,1],[14383,1],[14391,1],[14407,1],[14415,1],[14417,2],[14457,1],[14480,1],[14488,1],[14504,1],[14523,1],[14632,2],[14651,1],[14670,1],[14682,2],[14697,1],[14716,1],[14728,2],[14743,1],[14762,1],[14766,2],[14786,1],[14805,1],[14809,2],[14833,1],[14852,1],[14864,2],[14879,1],[14895,1],[14899,2],[14902,2],[14934,1],[14950,1],[14954,2],[14957,2],[14982,1],[14990,1],[14998,1],[15014,1],[15022,1],[15024,2],[15064,1],[15087,1],[15095,1],[15111,1],[15130,1],[15239,2],[15258,1],[15277,1],[15289,2],[15304,1],[15323,1],[15335,2],[15350,1],[15369,1],[15373,2],[15393,1],[15412,1],[15416,2],[15440,1],[15459,1],[15471,2],[15486,1],[15502,1],[15506,2],[15509,2],[15541,1],[15557,1],[15561,2],[15564,2],[15589,1],[15597,1],[15605,1],[15623,1],[15633,1],[15635,2],[15672,1],[15688,1],[15697,1],[15716,1],[15727,2],[15747,1],[15784,1],[15821,1],[15839,1],[15846,1],[15870,2],[15910,1],[15960,1],[16005,1],[16059,1],[16103,1],[16164,1],[16172,2],[16228,1],[16239,1],[16308,1],[16327,1],[16329,2],[16487,1],[16507,3],[16511,1],[16557,1],[16559,1]]},"536":{"position":[[690,2],[758,2],[1273,1],[1671,2],[1753,2],[1831,2],[1891,2],[3085,2],[3183,2],[3186,2],[3329,2],[3332,2],[3478,2],[3481,2],[3530,1],[3558,1],[3610,1],[3650,1],[3724,1],[3757,1],[3784,1],[3833,1],[3852,1],[3902,1],[3918,1],[3927,1],[3963,1],[3987,2],[4006,1],[4042,1],[4085,1],[4141,1],[4149,1],[4218,1],[4237,1],[4299,1],[4345,1],[4383,1],[4407,2],[4437,2],[4491,1],[4564,1],[4613,2],[4644,2],[4681,1],[4693,1],[4735,1],[4768,1],[4775,1],[4789,1],[4825,1],[4848,1],[4893,1],[4895,1],[4916,1],[4987,1],[5026,1],[5050,2],[5106,1],[5146,1],[5222,1],[5258,1],[5280,2],[5317,2],[5365,1],[5442,1],[5607,1],[5619,1],[5703,2],[5709,1],[5805,1],[5820,1],[5864,1],[5875,1],[5904,1],[5948,1],[5967,1],[6020,1],[6036,2],[6055,1],[6063,1],[6095,1],[6130,1],[6160,2],[6163,1],[6202,1],[6213,1],[6250,1],[6261,1],[6289,1],[6322,1],[6337,1],[6388,1],[6401,1],[6438,1],[6449,1],[6477,1],[6517,1],[6534,1],[6598,1],[6611,1],[6648,1],[6659,1],[6686,1],[6736,2],[6742,1],[6759,1],[6795,2],[6825,1],[6876,2],[6943,1],[7028,2],[7126,2],[7129,2],[7272,2],[7275,2],[7324,1],[7352,1],[7404,1],[7444,1],[7518,1],[7551,1],[7578,1],[7627,1],[7646,1],[7696,1],[7712,1],[7721,1],[7757,1],[7781,2],[7800,1],[7836,1],[7879,1],[7935,1],[7943,1],[8012,1],[8031,1],[8033,2],[8189,1],[8209,3],[8213,1],[8259,1],[8297,1],[8321,2],[8351,2],[8405,1],[8478,1],[8527,2],[8558,2],[8595,1],[8607,1],[8649,1],[8682,1],[8689,1],[8703,1],[8739,1],[8762,1],[8807,1],[8809,1],[8830,1],[8901,1],[8937,1],[8959,2],[8996,2],[9044,1],[9121,1],[9286,1],[9298,1],[9382,2],[9388,1],[9484,1],[9499,1],[9543,1],[9554,1],[9583,1],[9597,1],[9637,2],[9669,1],[9693,2],[9744,1],[9784,1],[9819,1],[9838,1],[9891,1],[9907,2],[9926,1],[9934,1],[9966,1],[10001,1],[10031,2],[10034,1],[10073,1],[10084,1],[10121,1],[10132,1],[10160,1],[10193,1],[10208,1],[10259,1],[10272,1],[10309,1],[10320,1],[10348,1],[10388,1],[10405,1],[10469,1],[10482,1],[10519,1],[10530,1],[10557,1],[10607,2],[10613,1],[10630,1],[10666,2],[10696,1],[10747,2],[10814,1]]},"538":{"position":[[323,2],[562,2],[631,2],[753,2],[1486,2],[2816,2],[2852,2],[2875,1],[3080,1],[3105,2],[3176,1],[3194,2],[3316,2],[3345,1],[3392,1],[3420,1],[3891,2],[3894,1],[3950,1],[3952,2],[3983,2],[4066,1],[4068,1],[4687,2],[4723,2],[4746,1],[4951,1],[4976,2],[5047,1],[5065,2],[5187,2],[5216,1],[5263,1],[5291,1],[5762,2],[5765,1],[5821,1],[5823,2],[5854,2],[5937,1],[5939,1],[6274,2],[6310,2],[6333,1],[6407,1],[6419,1],[6555,1],[6571,1],[6653,2],[6739,1],[6746,1],[6770,1],[6790,3],[6794,1],[6850,1],[6852,2],[6883,2],[6966,1],[6968,1],[7243,2],[7279,2],[7302,1],[7413,1],[7428,1],[7440,1],[7576,1],[7601,2],[7672,1],[7690,2],[7812,2],[7841,1],[7888,1],[7916,1],[8387,2],[8390,1],[8446,1],[8448,2],[8479,2],[8562,1],[8564,1],[8683,1],[8713,1],[8724,1],[8750,1],[8772,1],[8786,1],[8898,2],[9236,2],[9272,2],[9304,2],[9338,2],[9560,2],[9592,2],[9621,2],[9797,1],[9839,1],[9925,1],[9937,1],[9979,1],[9994,1],[10052,1],[10088,1],[10202,1],[10338,1],[10354,1],[10409,2],[10495,1],[10502,1],[10526,1],[10546,3],[10550,1],[10606,1],[10608,2],[10639,2],[10776,1],[10807,1],[10847,1],[10859,1],[10894,1],[10906,1],[10908,1],[10910,1],[11259,2],[11295,2],[11538,1],[11568,1],[11602,1],[11653,1],[11665,1],[11667,1],[11815,1],[11831,1],[11918,2],[12005,1],[12012,1],[12036,1],[12056,3],[12060,1],[12117,1],[12119,2],[12150,2],[12233,1],[12257,2],[12269,1],[12301,2],[12313,1],[12343,2],[12355,1],[12368,1],[12508,1],[12797,2],[12833,2],[13004,1],[13052,1],[13092,1],[13147,1],[13159,1],[13161,1],[13309,1],[13325,1],[13412,2],[13499,1],[13506,1],[13530,1],[13550,3],[13554,1],[13611,1],[13613,2],[13644,2],[13727,1],[13752,2],[13802,2],[13829,1]]},"540":{"position":[[1534,2],[1595,1],[1620,1],[1670,1],[2143,2],[2347,2],[2549,2],[2753,2],[2814,1],[2839,1],[2939,1],[2993,1],[3656,2],[3984,2],[4310,2],[4638,2],[4779,1],[4803,1],[4853,1],[4904,1],[5118,1],[5126,1],[5162,1],[5197,1],[5233,1],[5246,1],[5281,1],[5317,1],[5351,1],[5363,1],[5376,1],[5389,1],[5401,1],[5408,1],[5410,1],[5603,2],[5884,1],[5909,1],[5970,1],[6000,2],[6012,1],[6044,2],[6056,1],[6086,2],[6098,1],[6111,1],[6248,1],[6380,2],[6589,1],[6629,1],[6664,1],[6726,2],[6772,2],[6795,1],[7137,1],[7167,1],[7178,1],[7204,1],[7226,1],[7240,1],[7351,2],[7572,2],[7604,2],[7629,2],[7902,2],[7934,2],[7960,2],[8279,1],[8305,1],[8387,1],[8401,1],[8451,1],[8487,1],[8609,1],[8636,1],[8646,1],[8667,1],[8695,1],[8718,1],[8743,1],[8801,1],[8813,1],[8838,1],[8895,1],[8907,1],[8909,1],[8911,1],[9116,2],[9148,2],[9171,2],[9232,1],[9257,1],[9340,1],[9348,1],[9360,1],[9362,1],[9734,1],[9764,1],[9775,1],[9801,1],[9823,1],[9837,1],[9957,2],[10187,2],[10219,2],[10252,2],[10506,2],[10559,2],[10587,2],[10619,2],[10651,2],[10983,2],[11015,2],[11045,2],[11364,1],[11400,1],[11454,1],[11598,1],[11610,1],[11652,1],[11666,1],[11725,1],[11778,1],[11802,2],[11826,1],[11855,1],[11888,1],[11910,1],[11932,1],[11972,1],[12001,1],[12039,1],[12061,1],[12094,1],[12147,1],[12181,1],[12200,1],[12219,1],[12381,2],[12420,1],[12447,1],[12466,1],[12487,1],[12524,1],[12556,1],[12581,1],[12634,1],[12646,1],[12671,1],[12725,1],[12737,1],[12762,1],[12812,1],[12824,1],[12826,1],[12828,1]]},"542":{"position":[[838,2],[1787,1],[1840,1],[1951,2],[2016,1],[2038,1],[2050,1],[2282,2],[2508,2],[2734,2],[2960,2],[3186,2],[3412,2],[3638,2],[3864,2],[4090,2],[4155,1],[4177,1],[4209,1],[4241,1],[4273,1],[4305,1],[4337,1],[4369,1],[4401,1],[4433,1],[4445,1],[4685,2],[4749,1],[4774,1],[4782,1],[5198,2],[5262,1],[5287,1],[5295,1],[5739,2],[5803,1],[5825,1],[5835,1],[6158,2],[6291,2],[6426,2],[6563,2],[6700,2],[6839,2],[6978,2],[7119,2],[7135,1],[7326,1],[8009,2],[8148,1],[8175,1],[8573,2],[8829,2],[8894,1],[8940,1],[8949,1],[9304,2],[9439,1],[9461,1],[9702,2],[9938,1],[9983,1],[10013,2],[10025,1],[10057,2],[10069,1],[10099,2],[10111,1],[10124,1],[10265,1],[10445,2],[10609,1],[10653,1],[10709,2],[10759,2],[10786,1],[11152,1],[11182,1],[11193,1],[11219,1],[11241,1],[11255,1],[11366,2],[11637,2],[11677,2],[11727,2],[11759,2],[11778,2],[12034,2],[12077,2],[12133,2],[12165,2],[12187,2],[12502,2],[12534,2],[12553,2],[12872,1],[12898,1],[12980,1],[12994,1],[13044,1],[13088,1],[13132,1],[13176,1],[13192,1],[13219,1],[13266,1],[13285,1],[13312,1],[13344,1],[13356,1],[13381,1],[13403,1],[13421,1],[13449,1],[13474,1],[13493,1],[13513,1],[13549,1],[13695,1],[13722,1],[13732,1],[13753,1],[13781,1],[13804,1],[13829,1],[13880,1],[13944,1],[13956,1],[13958,1],[13992,1],[14060,1],[14072,1],[14097,1],[14149,1],[14213,1],[14225,1],[14227,1],[14229,1],[14554,2],[14586,2],[14636,2],[14686,1],[14711,1],[14789,1],[14797,1],[14806,2],[14840,1],[14903,1],[14905,1]]},"544":{"position":[[422,2],[781,2],[851,2],[959,1],[986,1],[994,1],[1185,2],[1421,1],[1442,1],[1472,1],[1502,2],[1514,1],[1546,2],[1558,1],[1588,2],[1600,1],[1613,1],[1747,1],[1869,2],[2033,1],[2058,1],[2089,1],[2120,2],[2164,2],[2185,1],[2362,2],[2371,1],[2385,1],[2555,2],[2594,2],[2648,1],[2745,1],[2753,1],[2762,2],[2803,1],[2874,1],[2876,1]]},"546":{"position":[[1275,1],[1328,1],[1477,2],[1541,1],[1563,1],[1882,2],[2013,2],[2146,2],[2281,2],[2416,2],[2553,2],[2690,2],[2829,2],[2845,1],[3036,1],[3689,2],[3828,1],[3855,1],[4154,2],[4455,2],[4612,1],[4661,1],[5031,2],[5259,2],[5324,1],[5370,1],[5379,1],[5706,2],[5841,1],[5863,1],[6100,2],[6336,1],[6381,1],[6411,2],[6423,1],[6455,2],[6467,1],[6497,2],[6509,1],[6522,1],[6661,1],[6837,2],[7001,1],[7041,1],[7097,2],[7145,2],[7170,1],[7531,1],[7561,1],[7572,1],[7598,1],[7620,1],[7634,1],[7745,2],[7973,2],[8013,2],[8063,2],[8095,2],[8114,2],[8327,2],[8370,2],[8426,2],[8458,2],[8480,2],[8752,2],[8784,2],[8803,2],[9122,1],[9148,1],[9230,1],[9244,1],[9294,1],[9338,1],[9382,1],[9426,1],[9442,1],[9469,1],[9516,1],[9535,1],[9562,1],[9594,1],[9606,1],[9631,1],[9653,1],[9671,1],[9699,1],[9724,1],[9743,1],[9763,1],[9799,1],[9945,1],[9972,1],[9982,1],[10003,1],[10031,1],[10054,1],[10079,1],[10130,1],[10194,1],[10206,1],[10208,1],[10243,1],[10311,1],[10323,1],[10348,1],[10400,1],[10464,1],[10476,1],[10478,1],[10480,1],[10801,2],[10833,2],[10883,2],[10933,1],[10958,1],[11036,1],[11044,1],[11053,2],[11087,1],[11150,1],[11152,1]]},"548":{"position":[[669,2],[779,2],[859,2],[1206,2],[1570,2],[1650,1],[1904,2],[2031,1],[2592,2],[2906,2],[2951,2]]},"550":{"position":[[659,2],[769,2],[849,2],[1191,2],[1731,2],[1811,1],[2065,2],[2192,1],[2753,2],[3067,2],[3113,2]]},"552":{"position":[[751,2],[991,1],[1017,1],[1067,1],[1181,1],[1214,1],[1288,1],[1333,1],[1344,1],[1364,1],[1378,1],[1383,1],[1395,1],[1397,4],[1411,1],[1442,1],[1489,1],[1494,1],[1506,1],[1529,1],[1561,1],[1587,1],[1592,1],[1604,1],[1629,1],[1652,1],[1669,2],[1689,1],[1691,1]]},"554":{"position":[[746,2],[986,1],[1012,1],[1062,1],[1176,1],[1209,1],[1283,1],[1328,1],[1339,1],[1359,1],[1373,1],[1378,1],[1390,1],[1392,4],[1406,1],[1437,1],[1484,1],[1489,1],[1501,1],[1524,1],[1556,1],[1582,1],[1587,1],[1599,1],[1624,1],[1647,1],[1664,2],[1684,1],[1686,1]]},"556":{"position":[[659,2],[769,2],[849,2],[1209,2],[1289,1],[1543,2],[1670,1],[2235,2],[2549,2],[2594,2]]},"558":{"position":[[718,2],[894,2],[1035,2],[1147,2],[1261,2],[1370,2],[1478,2],[1585,2],[1687,2],[1790,2],[1851,1],[1888,1],[1900,1],[1902,1],[1964,1],[1982,1],[2000,1],[2008,1],[2033,1],[2070,1],[2083,2],[2129,1],[2131,1],[2218,2],[2330,2],[2444,2],[2553,2],[2661,2],[2768,2],[2870,2],[2973,2],[3034,1],[3071,1],[3083,1],[3085,1],[3147,1],[3165,1],[3183,1],[3191,1],[3216,1],[3253,1],[3287,1],[3294,2],[3340,1],[3342,1],[3414,2],[3526,2],[3632,2],[3737,2],[3810,1],[3847,1],[3859,1],[3861,1],[3923,1],[3941,1],[3959,1],[3967,1],[3992,1],[4029,1],[4041,2],[4087,1],[4089,1],[4226,1],[4263,1],[4275,1],[4277,1],[4320,1],[4338,1],[4356,1],[4364,1],[4389,1],[4439,1],[4479,1],[4491,2],[4537,1],[4539,1],[4659,1],[4696,1],[4708,1],[4710,1],[4753,1],[4771,1],[4789,1],[4797,1],[4822,1],[4871,1],[4879,2],[4925,1],[4927,1],[5053,3],[5057,3],[5093,3],[5097,3],[5130,2],[5272,1],[5309,1],[5321,1],[5323,1],[5374,1],[5380,1],[5382,2],[5451,1],[5469,1],[5477,1],[5504,1],[5538,1],[5558,2],[5604,1],[5626,1],[5628,2],[5664,1],[5682,1],[5690,1],[5717,1],[5749,1],[5768,2],[5814,1],[5816,1],[5818,1]]},"560":{"position":[[1513,2],[1574,1],[1599,1],[1623,1],[1912,2],[2091,2],[2152,1],[2177,1],[2225,1],[2863,2],[3166,2],[3307,1],[3422,1],[3430,1],[3453,2],[3470,1],[3492,2],[3509,1],[3532,2],[3550,1],[3563,1],[3585,2],[3602,1],[3625,2],[3637,1],[3639,1],[3807,2],[4088,1],[4113,1],[4137,2],[4171,1],[4201,2],[4213,1],[4245,2],[4257,1],[4287,2],[4299,1],[4312,1],[4449,1],[4557,2],[4766,1],[4807,1],[4842,1],[4866,2],[4901,2],[4948,2],[4972,1],[5314,1],[5344,1],[5355,1],[5381,1],[5403,1],[5417,1],[5537,2],[5799,2],[5831,2],[5860,2],[6123,2],[6155,2],[6185,2],[6427,2],[6459,2],[6489,2],[6748,2],[6780,2],[6808,2],[7046,2],[7078,2],[7106,2],[7425,1],[7457,1],[7535,1],[7547,1],[7589,1],[7603,1],[7656,1],[7690,1],[7709,1],[7728,1],[7883,2],[7922,1],[7949,1],[7962,1],[7983,1],[8014,1],[8040,1],[8065,1],[8122,1],[8134,1],[8159,1],[8221,1],[8233,1],[8258,1],[8320,1],[8332,1],[8357,1],[8415,1],[8427,1],[8452,1],[8510,1],[8522,1],[8524,1],[8526,1],[8731,2],[8763,2],[8786,2],[8847,1],[8872,1],[8895,2],[8951,1],[8959,1],[8971,1],[8973,1],[9334,1],[9364,1],[9375,1],[9401,1],[9423,1],[9437,1],[9557,2],[9799,2],[9850,2],[9882,2],[9914,2],[9944,2],[10284,2],[10316,2],[10344,2],[10663,1],[10703,1],[10745,1],[10891,1],[10903,1],[10945,1],[10959,1],[11012,1],[11073,1],[11101,2],[11129,1],[11156,1],[11187,1],[11210,1],[11233,1],[11277,1],[11304,1],[11344,1],[11367,1],[11417,1],[11480,1],[11514,1],[11533,1],[11552,1],[11707,2],[11746,1],[11773,1],[11786,1],[11807,1],[11838,1],[11864,1],[11889,1],[11951,1],[11963,1],[11988,1],[12046,1],[12058,1],[12060,1],[12062,1]]},"562":{"position":[[854,2],[915,2],[1438,1],[1841,2],[1923,2],[2001,2],[2153,2],[3377,2],[3475,2],[3478,2],[3621,2],[3624,2],[3770,2],[3773,2],[3822,1],[3860,1],[3922,1],[3962,1],[4036,1],[4069,1],[4096,1],[4145,1],[4164,1],[4214,1],[4230,1],[4239,1],[4275,1],[4299,2],[4323,1],[4364,1],[4412,1],[4473,1],[4481,1],[4550,1],[4569,1],[4641,1],[4687,1],[4725,1],[4749,2],[4779,2],[4833,1],[4906,1],[4965,2],[5001,2],[5043,1],[5055,1],[5102,1],[5135,1],[5142,1],[5156,1],[5192,1],[5220,1],[5270,1],[5272,1],[5293,1],[5374,1],[5413,1],[5437,2],[5493,1],[5538,1],[5624,1],[5660,1],[5682,2],[5719,2],[5767,1],[5844,1],[5904,1],[6031,1],[6033,1],[6045,1],[6134,2],[6140,1],[6236,1],[6251,1],[6295,1],[6306,1],[6335,1],[6384,1],[6403,1],[6466,1],[6482,2],[6501,1],[6509,1],[6541,1],[6576,1],[6606,2],[6609,1],[6648,1],[6659,1],[6696,1],[6707,1],[6735,1],[6768,1],[6783,1],[6834,1],[6847,1],[6884,1],[6895,1],[6923,1],[6963,1],[6980,1],[7044,1],[7057,1],[7094,1],[7105,1],[7132,1],[7182,2],[7188,1],[7205,1],[7241,2],[7271,1],[7322,2],[7389,1],[7634,1],[7710,2],[7719,1],[7749,1],[7803,1],[7843,1],[7895,1],[7908,1],[7959,1],[7978,1],[8101,2],[8117,1],[8159,1],[8184,1],[8192,1],[8210,1],[8229,1],[8338,2],[8357,1],[8376,1],[8388,2],[8403,1],[8422,1],[8434,2],[8449,1],[8468,1],[8472,2],[8492,1],[8511,1],[8515,2],[8539,1],[8558,1],[8570,2],[8585,1],[8601,1],[8605,2],[8608,2],[8640,1],[8656,1],[8660,2],[8663,2],[8703,1],[8728,1],[8736,1],[8752,1],[8771,1],[8880,2],[8899,1],[8918,1],[8930,2],[8945,1],[8964,1],[8976,2],[8991,1],[9010,1],[9014,2],[9034,1],[9053,1],[9057,2],[9081,1],[9100,1],[9112,2],[9127,1],[9143,1],[9147,2],[9150,2],[9182,1],[9198,1],[9202,2],[9205,2],[9245,1],[9270,1],[9278,1],[9294,1],[9313,1],[9422,2],[9441,1],[9460,1],[9472,2],[9487,1],[9506,1],[9518,2],[9533,1],[9552,1],[9556,2],[9576,1],[9595,1],[9599,2],[9623,1],[9642,1],[9654,2],[9669,1],[9685,1],[9689,2],[9692,2],[9724,1],[9740,1],[9744,2],[9747,2],[9784,1],[9800,1],[9809,1],[9828,1],[9839,2],[9859,1],[9892,1],[9931,1],[9968,1],[9986,1],[9993,1],[10017,2],[10057,1],[10107,1],[10152,1],[10206,1],[10250,1],[10311,1],[10319,1],[10388,1],[10407,1],[10471,1],[10517,1],[10519,1],[10614,2],[10712,2],[10715,2],[10858,2],[10861,2],[10910,1],[10948,1],[11010,1],[11050,1],[11124,1],[11157,1],[11184,1],[11233,1],[11252,1],[11302,1],[11318,1],[11327,1],[11363,1],[11387,2],[11411,1],[11452,1],[11500,1],[11561,1],[11569,1],[11638,1],[11657,1],[11659,2],[11825,1],[11845,3],[11849,1],[11895,1],[11933,1],[11957,2],[11987,2],[12041,1],[12087,1],[12136,1],[12195,2],[12231,2],[12273,1],[12285,1],[12332,1],[12365,1],[12372,1],[12386,1],[12422,1],[12450,1],[12500,1],[12502,1],[12523,1],[12629,1],[12665,1],[12687,2],[12724,2],[12772,1],[12849,1],[12909,1],[13036,1],[13038,1],[13050,1],[13139,2],[13145,1],[13241,1],[13256,1],[13300,1],[13311,1],[13340,1],[13354,1],[13399,2],[13431,1],[13455,2],[13506,1],[13548,1],[13583,1],[13602,1],[13665,1],[13681,2],[13700,1],[13708,1],[13740,1],[13775,1],[13805,2],[13808,1],[13847,1],[13858,1],[13895,1],[13906,1],[13934,1],[13967,1],[13982,1],[14033,1],[14046,1],[14083,1],[14094,1],[14122,1],[14162,1],[14179,1],[14243,1],[14256,1],[14293,1],[14304,1],[14331,1],[14381,2],[14387,1],[14404,1],[14440,2],[14470,1],[14521,2],[14588,1]]},"564":{"position":[[6524,2],[6950,2],[7370,2],[7781,2],[8201,2],[8618,2],[9534,2],[10405,2],[11472,2],[13123,2],[14098,2],[15704,1],[15738,1],[15776,2],[15798,1],[15838,2],[15860,1],[15868,1],[18989,1],[19019,1],[19030,1],[19056,1],[19078,1],[19092,1],[19357,2],[19533,2],[19573,2],[19623,2],[19655,2],[19674,2],[19828,2],[19871,2],[19927,2],[19959,2],[19981,2],[20194,2],[20226,2],[20245,2],[20585,1],[20611,1],[20652,1],[20704,1],[20718,1],[20768,1],[20812,1],[20856,1],[20900,1],[20916,1],[20943,1],[20990,1],[21009,1],[21036,1],[21068,1],[21080,1],[21105,1],[21127,1],[21145,1],[21173,1],[21198,1],[21217,1],[21237,1],[21273,1],[21419,1],[21446,1],[21456,1],[21477,1],[21505,1],[21528,1],[21553,1],[21604,1],[21668,1],[21680,1],[21682,1],[21717,1],[21785,1],[21797,1],[21822,1],[21874,1],[21938,1],[21950,1],[21952,1],[21954,1],[24437,1],[24480,2],[24543,2],[24608,2],[24642,1],[25248,1],[25272,1],[25331,2],[25402,2],[25474,2],[25545,2],[25578,1]]},"566":{"position":[[414,2],[670,2],[1048,2],[1516,2],[1705,2],[1714,1],[1866,1],[1899,1],[1973,1],[2018,1],[2029,1],[2049,1],[2063,1],[2070,1],[2101,1],[2132,1],[2166,1],[2173,1],[2195,1],[2228,1],[2253,1],[2260,1],[2288,1],[2321,1],[2353,1],[2360,1],[2386,1],[2416,1],[2445,1],[2452,1],[2475,1],[2511,1],[2525,2],[2545,1],[2547,1],[2829,2],[2838,1],[2990,1],[3023,1],[3097,1],[3142,1],[3153,1],[3173,1],[3187,1],[3192,1],[3204,1],[3235,1],[3266,1],[3300,1],[3305,1],[3321,1],[3357,1],[3369,2],[3384,1],[3389,1],[3401,1],[3422,1],[3452,1],[3490,1],[3495,1],[3511,1],[3552,1],[3567,2],[3582,1],[3587,1],[3599,1],[3621,1],[3654,1],[3693,1],[3698,1],[3710,1],[3736,1],[3766,1],[3809,1],[3814,1],[3826,1],[3849,1],[3885,1],[3925,1],[3930,1],[3946,1],[3974,1],[3984,2],[3999,1],[4004,1],[4016,1],[4044,1],[4077,1],[4123,1],[4128,1],[4141,1],[4171,1],[4203,1],[4250,1],[4255,1],[4268,1],[4296,1],[4325,1],[4370,1],[4375,1],[4388,1],[4410,1],[4436,1],[4463,2],[4483,1],[4485,1],[4684,2],[4693,1],[4845,1],[4878,1],[4952,1],[4997,1],[5008,1],[5028,1],[5042,1],[5047,1],[5059,1],[5090,1],[5121,1],[5155,1],[5160,1],[5176,1],[5212,1],[5235,1],[5255,2],[5270,1],[5275,1],[5287,1],[5308,1],[5338,1],[5376,1],[5381,1],[5397,1],[5438,1],[5464,1],[5484,2],[5499,1],[5504,1],[5516,1],[5538,1],[5571,1],[5610,1],[5615,1],[5627,1],[5653,1],[5683,1],[5726,1],[5731,1],[5743,1],[5766,1],[5802,1],[5842,1],[5847,1],[5863,1],[5891,1],[5912,1],[5931,2],[5946,1],[5951,1],[5963,1],[5991,1],[6024,1],[6070,1],[6075,1],[6088,1],[6118,1],[6150,1],[6197,1],[6202,1],[6215,1],[6243,1],[6272,1],[6317,1],[6322,1],[6335,1],[6357,1],[6383,1],[6410,2],[6430,1],[6432,1],[6720,2],[6975,1],[7127,1],[7160,1],[7234,1],[7279,1],[7290,1],[7310,1],[7324,1],[7329,1],[7341,1],[7372,1],[7403,1],[7437,1],[7442,1],[7458,1],[7494,1],[7517,1],[7537,2],[7552,1],[7557,1],[7569,1],[7590,1],[7620,1],[7658,1],[7663,1],[7679,1],[7720,1],[7746,1],[7766,2],[7781,1],[7786,1],[7798,1],[7820,1],[7853,1],[7892,1],[7897,1],[7909,1],[7935,1],[7965,1],[8008,1],[8013,1],[8025,1],[8048,1],[8084,1],[8124,1],[8129,1],[8145,1],[8173,1],[8194,1],[8213,2],[8228,1],[8233,1],[8245,1],[8273,1],[8306,1],[8352,1],[8357,1],[8370,1],[8400,1],[8432,1],[8479,1],[8484,1],[8497,1],[8525,1],[8554,1],[8599,1],[8604,1],[8617,1],[8639,1],[8665,1],[8692,2],[8712,1],[8714,1],[8980,2],[9117,2],[9308,1],[9460,1],[9493,1],[9567,1],[9612,1],[9623,1],[9643,1],[9657,1],[9662,1],[9674,1],[9705,1],[9736,1],[9770,1],[9775,1],[9791,1],[9827,1],[9850,1],[9870,2],[9885,1],[9890,1],[9902,1],[9923,1],[9953,1],[9991,1],[9996,1],[10012,1],[10053,1],[10079,1],[10099,2],[10114,1],[10119,1],[10131,1],[10153,1],[10186,1],[10225,1],[10230,1],[10242,1],[10268,1],[10298,1],[10341,1],[10346,1],[10358,1],[10381,1],[10417,1],[10457,1],[10462,1],[10478,1],[10506,1],[10527,1],[10546,2],[10561,1],[10566,1],[10578,1],[10606,1],[10639,1],[10685,1],[10690,1],[10703,1],[10733,1],[10765,1],[10812,1],[10817,1],[10830,1],[10858,1],[10887,1],[10932,1],[10937,1],[10950,1],[10972,1],[10998,1],[11025,2],[11045,1],[11076,2],[11104,1],[11433,2],[11570,2],[11761,1],[11913,1],[11946,1],[12020,1],[12065,1],[12076,1],[12096,1],[12110,1],[12115,1],[12127,1],[12158,1],[12189,1],[12223,1],[12228,1],[12244,1],[12280,1],[12303,1],[12323,2],[12338,1],[12343,1],[12355,1],[12376,1],[12406,1],[12444,1],[12449,1],[12465,1],[12506,1],[12532,1],[12552,2],[12567,1],[12572,1],[12584,1],[12606,1],[12639,1],[12678,1],[12683,1],[12695,1],[12721,1],[12751,1],[12794,1],[12799,1],[12811,1],[12834,1],[12870,1],[12910,1],[12915,1],[12931,1],[12959,1],[12980,1],[12999,2],[13014,1],[13019,1],[13031,1],[13059,1],[13092,1],[13138,1],[13143,1],[13156,1],[13186,1],[13218,1],[13265,1],[13270,1],[13283,1],[13311,1],[13340,1],[13385,1],[13390,1],[13403,1],[13425,1],[13451,1],[13478,2],[13498,1],[13529,2],[13557,1],[13843,2],[13980,2],[14171,1],[14323,1],[14356,1],[14430,1],[14475,1],[14486,1],[14506,1],[14520,1],[14525,1],[14537,1],[14568,1],[14599,1],[14633,1],[14638,1],[14654,1],[14690,1],[14713,1],[14733,2],[14748,1],[14753,1],[14765,1],[14786,1],[14816,1],[14854,1],[14859,1],[14875,1],[14916,1],[14942,1],[14962,2],[14977,1],[14982,1],[14994,1],[15016,1],[15049,1],[15088,1],[15093,1],[15105,1],[15131,1],[15161,1],[15204,1],[15209,1],[15221,1],[15244,1],[15280,1],[15320,1],[15325,1],[15341,1],[15369,1],[15390,1],[15409,2],[15424,1],[15429,1],[15441,1],[15469,1],[15502,1],[15548,1],[15553,1],[15566,1],[15596,1],[15628,1],[15675,1],[15680,1],[15693,1],[15721,1],[15750,1],[15795,1],[15800,1],[15813,1],[15835,1],[15861,1],[15888,2],[15908,1],[15939,2],[15967,1],[16257,2],[16394,2],[16585,1],[16737,1],[16770,1],[16844,1],[16889,1],[16900,1],[16920,1],[16934,1],[16939,1],[16951,1],[16982,1],[17013,1],[17047,1],[17052,1],[17068,1],[17104,1],[17127,1],[17147,2],[17162,1],[17167,1],[17179,1],[17200,1],[17230,1],[17268,1],[17273,1],[17289,1],[17330,1],[17356,1],[17376,2],[17391,1],[17396,1],[17408,1],[17430,1],[17463,1],[17502,1],[17507,1],[17519,1],[17545,1],[17575,1],[17618,1],[17623,1],[17635,1],[17658,1],[17694,1],[17734,1],[17739,1],[17755,1],[17783,1],[17804,1],[17823,2],[17838,1],[17843,1],[17855,1],[17883,1],[17916,1],[17962,1],[17967,1],[17980,1],[18010,1],[18042,1],[18089,1],[18094,1],[18107,1],[18135,1],[18164,1],[18209,1],[18214,1],[18227,1],[18249,1],[18275,1],[18302,2],[18322,1],[18353,2],[18381,1],[18685,2],[19060,1],[19101,1],[19243,1],[19276,1],[19350,1],[19395,1],[19406,1],[19426,1],[19440,1],[19445,1],[19457,1],[19488,1],[19519,1],[19553,1],[19558,1],[19574,1],[19610,1],[19633,1],[19653,2],[19668,1],[19673,1],[19685,1],[19706,1],[19736,1],[19774,1],[19779,1],[19795,1],[19836,1],[19862,1],[19882,2],[19897,1],[19902,1],[19914,1],[19936,1],[19969,1],[20008,1],[20013,1],[20025,1],[20051,1],[20081,1],[20124,1],[20129,1],[20141,1],[20164,1],[20200,1],[20240,1],[20245,1],[20261,1],[20289,1],[20310,1],[20329,2],[20344,1],[20349,1],[20361,1],[20389,1],[20422,1],[20468,1],[20473,1],[20486,1],[20516,1],[20548,1],[20595,1],[20600,1],[20613,1],[20641,1],[20670,1],[20715,1],[20720,1],[20733,1],[20755,1],[20781,1],[20808,2],[20828,1],[20865,2],[20885,1],[20906,1],[20931,1],[20947,1],[22162,1],[22173,1],[22408,2],[22417,1],[22569,1],[22602,1],[22676,1],[22721,1],[22732,1],[22752,1],[22766,1],[22771,1],[22783,1],[22814,1],[22845,1],[22879,1],[22884,1],[22900,1],[22936,1],[22948,2],[22963,1],[22968,1],[22980,1],[23001,1],[23031,1],[23069,1],[23074,1],[23090,1],[23131,1],[23146,2],[23161,1],[23166,1],[23178,1],[23200,1],[23233,1],[23286,1],[23291,1],[23303,1],[23329,1],[23359,1],[23416,1],[23421,1],[23433,1],[23456,1],[23492,1],[23546,1],[23551,1],[23567,1],[23595,1],[23605,2],[23620,1],[23625,1],[23637,1],[23665,1],[23698,1],[23744,1],[23749,1],[23762,1],[23792,1],[23824,1],[23871,1],[23876,1],[23889,1],[23917,1],[23946,1],[23991,1],[23996,1],[24009,1],[24031,1],[24057,1],[24084,2],[24104,1],[24106,1]]},"568":{"position":[[174,1],[598,2],[1146,2],[1829,2],[1973,1],[1986,1],[1988,2],[2075,2],[2185,2],[3631,1],[3863,2],[4969,2],[7506,1],[7590,1],[7602,1],[7624,1],[7640,1],[7645,1],[7657,1],[7680,1],[7701,1],[7740,1],[7747,2],[7764,1],[7769,1],[7781,1],[7802,1],[7834,1],[7871,1],[7878,2],[7895,1],[7900,1],[7912,1],[7934,1],[7957,1],[7995,1],[8002,2],[8019,1],[8024,1],[8036,1],[8057,1],[8086,1],[8123,1],[8131,2],[8148,1],[8153,1],[8165,1],[8189,1],[8219,1],[8257,1],[8264,2],[8281,1],[8286,1],[8298,1],[8320,1],[8339,1],[8377,1],[8384,2],[8401,1],[8406,1],[8418,1],[8442,1],[8461,1],[8499,1],[8506,2],[8523,1],[8528,1],[8540,1],[8563,1],[8585,1],[8622,1],[8629,2],[8646,1],[8651,1],[8663,1],[8685,1],[8704,1],[8741,1],[8748,2],[8751,2],[8754,1],[8876,1],[8936,1],[8938,1],[9851,1],[9935,1],[9947,1],[9969,1],[9985,1],[9990,1],[10002,1],[10025,1],[10046,1],[10085,1],[10092,2],[10109,1],[10114,1],[10126,1],[10147,1],[10179,1],[10216,1],[10223,2],[10240,1],[10245,1],[10257,1],[10279,1],[10302,1],[10340,1],[10347,2],[10364,1],[10369,1],[10381,1],[10402,1],[10431,1],[10468,1],[10476,2],[10493,1],[10498,1],[10510,1],[10534,1],[10564,1],[10602,1],[10609,2],[10626,1],[10631,1],[10643,1],[10665,1],[10684,1],[10722,1],[10729,2],[10746,1],[10751,1],[10763,1],[10787,1],[10806,1],[10844,1],[10851,2],[10868,1],[10873,1],[10885,1],[10908,1],[10930,1],[10967,1],[10974,2],[10991,1],[10996,1],[11008,1],[11030,1],[11049,1],[11086,1],[11093,2],[11096,2],[11099,1],[11221,1],[11281,1],[11283,1],[12227,1],[12311,1],[12323,1],[12345,1],[12361,1],[12366,1],[12378,1],[12401,1],[12422,1],[12461,1],[12468,2],[12485,1],[12490,1],[12502,1],[12523,1],[12555,1],[12592,1],[12599,2],[12616,1],[12621,1],[12633,1],[12655,1],[12678,1],[12716,1],[12723,2],[12740,1],[12745,1],[12757,1],[12778,1],[12807,1],[12844,1],[12852,2],[12869,1],[12874,1],[12886,1],[12910,1],[12940,1],[12978,1],[12985,2],[13002,1],[13007,1],[13019,1],[13041,1],[13060,1],[13098,1],[13105,2],[13122,1],[13127,1],[13139,1],[13163,1],[13182,1],[13220,1],[13227,2],[13244,1],[13249,1],[13261,1],[13285,1],[13312,1],[13350,1],[13357,2],[13374,1],[13379,1],[13391,1],[13415,1],[13437,1],[13475,1],[13482,2],[13499,1],[13504,1],[13516,1],[13539,1],[13561,1],[13598,1],[13605,2],[13622,1],[13627,1],[13639,1],[13661,1],[13680,1],[13717,1],[13724,2],[13741,1],[13746,1],[13758,1],[13782,1],[13805,1],[13843,1],[13850,2],[13853,2],[13856,1],[13978,1],[14038,1],[14040,1],[14457,2],[14575,2],[14695,2],[14821,2],[14934,2],[14999,1],[15083,1],[15095,1],[15117,1],[15133,1],[15138,1],[15150,1],[15173,1],[15194,1],[15233,1],[15240,2],[15257,1],[15262,1],[15274,1],[15295,1],[15327,1],[15364,1],[15371,2],[15388,1],[15393,1],[15405,1],[15427,1],[15450,1],[15488,1],[15495,2],[15512,1],[15517,1],[15529,1],[15550,1],[15579,1],[15616,1],[15624,2],[15641,1],[15646,1],[15658,1],[15682,1],[15712,1],[15750,1],[15757,2],[15774,1],[15779,1],[15791,1],[15813,1],[15832,1],[15870,1],[15877,2],[15894,1],[15899,1],[15911,1],[15935,1],[15954,1],[15992,1],[15999,2],[16016,1],[16021,1],[16033,1],[16056,1],[16078,1],[16115,1],[16122,2],[16139,1],[16144,1],[16156,1],[16178,1],[16197,1],[16234,1],[16241,2],[16244,2],[16247,1],[16369,1],[16429,1],[16431,1],[16786,2],[16924,2],[17071,2],[17216,2],[17353,2],[17418,1],[17502,1],[17514,1],[17536,1],[17552,1],[17557,1],[17569,1],[17592,1],[17613,1],[17652,1],[17659,2],[17676,1],[17681,1],[17693,1],[17714,1],[17746,1],[17783,1],[17790,2],[17807,1],[17812,1],[17824,1],[17846,1],[17869,1],[17907,1],[17914,2],[17931,1],[17936,1],[17948,1],[17969,1],[17998,1],[18035,1],[18043,2],[18060,1],[18065,1],[18077,1],[18101,1],[18131,1],[18169,1],[18176,2],[18193,1],[18198,1],[18210,1],[18232,1],[18251,1],[18289,1],[18296,2],[18313,1],[18318,1],[18330,1],[18354,1],[18373,1],[18411,1],[18418,2],[18435,1],[18440,1],[18452,1],[18476,1],[18503,1],[18541,1],[18548,2],[18565,1],[18570,1],[18582,1],[18606,1],[18628,1],[18666,1],[18673,2],[18690,1],[18695,1],[18707,1],[18730,1],[18752,1],[18789,1],[18796,2],[18813,1],[18818,1],[18830,1],[18852,1],[18871,1],[18908,1],[18915,2],[18932,1],[18937,1],[18949,1],[18973,1],[18996,1],[19034,1],[19041,2],[19044,2],[19047,1],[19169,1],[19229,1],[19231,1],[20170,1],[20254,1],[20266,1],[20288,1],[20304,1],[20309,1],[20321,1],[20344,1],[20365,1],[20404,1],[20411,2],[20428,1],[20433,1],[20445,1],[20466,1],[20498,1],[20535,1],[20542,2],[20559,1],[20564,1],[20576,1],[20598,1],[20621,1],[20659,1],[20666,2],[20683,1],[20688,1],[20700,1],[20721,1],[20750,1],[20787,1],[20795,2],[20812,1],[20817,1],[20829,1],[20853,1],[20883,1],[20921,1],[20928,2],[20945,1],[20950,1],[20962,1],[20984,1],[21003,1],[21041,1],[21048,2],[21065,1],[21070,1],[21082,1],[21106,1],[21125,1],[21163,1],[21170,2],[21187,1],[21192,1],[21204,1],[21227,1],[21249,1],[21286,1],[21293,2],[21310,1],[21315,1],[21327,1],[21349,1],[21368,1],[21405,1],[21412,2],[21415,2],[21418,1],[21540,1],[21600,1],[21602,1],[22572,1],[22656,1],[22668,1],[22690,1],[22706,1],[22711,1],[22723,1],[22746,1],[22767,1],[22806,1],[22813,2],[22830,1],[22835,1],[22847,1],[22868,1],[22900,1],[22937,1],[22944,2],[22961,1],[22966,1],[22978,1],[23000,1],[23023,1],[23061,1],[23068,2],[23085,1],[23090,1],[23102,1],[23123,1],[23152,1],[23189,1],[23197,2],[23214,1],[23219,1],[23231,1],[23255,1],[23285,1],[23323,1],[23330,2],[23347,1],[23352,1],[23364,1],[23386,1],[23405,1],[23443,1],[23450,2],[23467,1],[23472,1],[23484,1],[23508,1],[23527,1],[23565,1],[23572,2],[23589,1],[23594,1],[23606,1],[23629,1],[23651,1],[23688,1],[23695,2],[23712,1],[23717,1],[23729,1],[23751,1],[23770,1],[23807,1],[23814,2],[23817,2],[23820,1],[23942,1],[24002,1],[24004,1],[25638,1],[25722,1],[25734,1],[25756,1],[25772,1],[25777,1],[25794,1],[25814,1],[25831,1],[25870,1],[25911,1],[25932,1],[25969,1],[25986,1],[25993,2],[26010,1],[26015,1],[26032,1],[26050,1],[26065,1],[26102,1],[26143,1],[26175,1],[26210,1],[26228,1],[26235,2],[26252,1],[26257,1],[26274,1],[26293,1],[26309,1],[26347,1],[26388,1],[26411,1],[26447,1],[26465,1],[26472,2],[26489,1],[26494,1],[26511,1],[26529,1],[26544,1],[26581,1],[26622,1],[26651,1],[26686,1],[26704,1],[26712,2],[26729,1],[26734,1],[26751,1],[26772,1],[26788,1],[26828,1],[26869,1],[26899,1],[26935,1],[26957,1],[26964,2],[26981,1],[26986,1],[27003,1],[27022,1],[27035,1],[27073,1],[27114,1],[27133,1],[27169,1],[27187,1],[27194,2],[27211,1],[27216,1],[27233,1],[27254,1],[27272,1],[27312,1],[27353,1],[27372,1],[27408,1],[27426,1],[27433,2],[27450,1],[27455,1],[27472,1],[27492,1],[27511,1],[27550,1],[27591,1],[27613,1],[27648,1],[27666,1],[27673,2],[27690,1],[27695,1],[27712,1],[27731,1],[27750,1],[27788,1],[27829,1],[27848,1],[27883,1],[27900,1],[27907,2],[27910,2],[27913,1],[28035,1],[28095,1],[28097,1],[28584,2],[28746,2],[28919,2],[29098,2],[29268,2],[29419,2],[29577,2],[29642,1],[29694,1],[29706,1],[29826,1],[29846,1],[29848,3],[29880,1],[29934,2],[29960,1],[29962,2],[30035,1],[30082,1],[30118,1],[30131,1],[30312,1],[30319,1],[30346,1],[30361,3],[30365,1],[30367,1],[31026,2],[31147,2],[31338,2],[31467,2],[31583,2],[31649,1],[31733,1],[31745,1],[31767,1],[31783,1],[31788,1],[31800,1],[31823,1],[31844,1],[31883,1],[31890,2],[31907,1],[31912,1],[31924,1],[31945,1],[31977,1],[32014,1],[32021,2],[32038,1],[32043,1],[32055,1],[32077,1],[32100,1],[32138,1],[32145,2],[32162,1],[32167,1],[32179,1],[32200,1],[32229,1],[32266,1],[32274,2],[32291,1],[32296,1],[32308,1],[32332,1],[32362,1],[32400,1],[32407,2],[32424,1],[32429,1],[32441,1],[32463,1],[32482,1],[32520,1],[32527,2],[32544,1],[32549,1],[32561,1],[32585,1],[32604,1],[32642,1],[32649,2],[32666,1],[32671,1],[32683,1],[32706,1],[32728,1],[32765,1],[32772,2],[32789,1],[32794,1],[32806,1],[32828,1],[32847,1],[32884,1],[32891,2],[32894,2],[32897,1],[33019,1],[33079,1],[33081,1],[33488,2],[33609,2],[33832,2],[33948,2],[34014,1],[34098,1],[34110,1],[34132,1],[34148,1],[34153,1],[34165,1],[34188,1],[34209,1],[34248,1],[34255,2],[34272,1],[34277,1],[34289,1],[34310,1],[34342,1],[34379,1],[34386,2],[34403,1],[34408,1],[34420,1],[34442,1],[34465,1],[34503,1],[34510,2],[34527,1],[34532,1],[34544,1],[34565,1],[34594,1],[34631,1],[34639,2],[34656,1],[34661,1],[34673,1],[34697,1],[34727,1],[34765,1],[34772,2],[34789,1],[34794,1],[34806,1],[34828,1],[34847,1],[34885,1],[34892,2],[34909,1],[34914,1],[34926,1],[34950,1],[34969,1],[35007,1],[35014,2],[35031,1],[35036,1],[35048,1],[35071,1],[35093,1],[35130,1],[35137,2],[35154,1],[35159,1],[35171,1],[35193,1],[35212,1],[35249,1],[35256,2],[35259,2],[35262,1],[35384,1],[35444,1],[35446,1],[36379,1],[36463,1],[36475,1],[36497,1],[36513,1],[36518,1],[36530,1],[36553,1],[36574,1],[36613,1],[36620,2],[36637,1],[36642,1],[36654,1],[36675,1],[36707,1],[36744,1],[36751,2],[36768,1],[36773,1],[36785,1],[36807,1],[36830,1],[36868,1],[36875,2],[36892,1],[36897,1],[36909,1],[36930,1],[36959,1],[36996,1],[37004,2],[37021,1],[37026,1],[37038,1],[37062,1],[37092,1],[37130,1],[37137,2],[37154,1],[37159,1],[37171,1],[37193,1],[37212,1],[37250,1],[37257,2],[37274,1],[37279,1],[37291,1],[37315,1],[37334,1],[37372,1],[37379,2],[37396,1],[37401,1],[37413,1],[37436,1],[37458,1],[37495,1],[37502,2],[37519,1],[37524,1],[37536,1],[37558,1],[37577,1],[37614,1],[37621,2],[37624,2],[37627,1],[37749,1],[37809,1],[37811,1],[38784,1],[38868,1],[38880,1],[38902,1],[38918,1],[38923,1],[38935,1],[38958,1],[38982,1],[38999,1],[39006,2],[39023,1],[39028,1],[39040,1],[39061,1],[39096,1],[39114,1],[39121,2],[39138,1],[39143,1],[39155,1],[39177,1],[39203,1],[39221,1],[39228,2],[39245,1],[39250,1],[39262,1],[39283,1],[39315,1],[39333,1],[39341,2],[39358,1],[39363,1],[39375,1],[39399,1],[39432,1],[39454,1],[39461,2],[39478,1],[39483,1],[39495,1],[39517,1],[39539,1],[39557,1],[39564,2],[39581,1],[39586,1],[39598,1],[39622,1],[39644,1],[39662,1],[39669,2],[39686,1],[39691,1],[39703,1],[39726,1],[39751,1],[39769,1],[39776,2],[39793,1],[39798,1],[39810,1],[39832,1],[39854,1],[39871,1],[39878,2],[39881,2],[39884,1],[40006,1],[40066,1],[40068,1],[41042,1],[41126,1],[41138,1],[41160,1],[41176,1],[41181,1],[41193,1],[41216,1],[41240,1],[41257,1],[41264,2],[41281,1],[41286,1],[41298,1],[41319,1],[41354,1],[41372,1],[41379,2],[41396,1],[41401,1],[41413,1],[41435,1],[41461,1],[41479,1],[41486,2],[41503,1],[41508,1],[41520,1],[41541,1],[41573,1],[41591,1],[41599,2],[41616,1],[41621,1],[41633,1],[41657,1],[41690,1],[41712,1],[41719,2],[41736,1],[41741,1],[41753,1],[41775,1],[41797,1],[41815,1],[41822,2],[41839,1],[41844,1],[41856,1],[41880,1],[41902,1],[41920,1],[41927,2],[41944,1],[41949,1],[41961,1],[41984,1],[42009,1],[42027,1],[42034,2],[42051,1],[42056,1],[42068,1],[42090,1],[42112,1],[42129,1],[42136,2],[42139,2],[42142,1],[42264,1],[42324,1],[42326,1],[43667,1],[43751,1],[43763,1],[43785,1],[43801,1],[43806,1],[43823,1],[43843,1],[43860,1],[43899,1],[43940,1],[43961,1],[43998,1],[44015,1],[44022,2],[44039,1],[44044,1],[44061,1],[44079,1],[44094,1],[44131,1],[44172,1],[44204,1],[44239,1],[44257,1],[44264,2],[44281,1],[44286,1],[44303,1],[44322,1],[44338,1],[44376,1],[44417,1],[44440,1],[44476,1],[44494,1],[44501,2],[44518,1],[44523,1],[44540,1],[44558,1],[44573,1],[44610,1],[44651,1],[44680,1],[44715,1],[44733,1],[44741,2],[44758,1],[44763,1],[44780,1],[44801,1],[44817,1],[44857,1],[44898,1],[44928,1],[44964,1],[44986,1],[44993,2],[45010,1],[45015,1],[45032,1],[45051,1],[45064,1],[45102,1],[45143,1],[45162,1],[45198,1],[45216,1],[45223,2],[45240,1],[45245,1],[45262,1],[45283,1],[45301,1],[45341,1],[45382,1],[45401,1],[45437,1],[45455,1],[45462,2],[45479,1],[45484,1],[45501,1],[45521,1],[45540,1],[45579,1],[45620,1],[45642,1],[45677,1],[45695,1],[45702,2],[45719,1],[45724,1],[45741,1],[45760,1],[45779,1],[45817,1],[45858,1],[45877,1],[45912,1],[45929,1],[45936,2],[45939,2],[45942,1],[46064,1],[46124,1],[46126,1],[47020,1],[47104,1],[47116,1],[47138,1],[47154,1],[47159,1],[47171,1],[47194,1],[47215,1],[47254,1],[47261,2],[47278,1],[47283,1],[47295,1],[47316,1],[47348,1],[47385,1],[47392,2],[47409,1],[47414,1],[47426,1],[47448,1],[47471,1],[47509,1],[47516,2],[47533,1],[47538,1],[47550,1],[47571,1],[47600,1],[47637,1],[47645,2],[47662,1],[47667,1],[47679,1],[47703,1],[47733,1],[47771,1],[47778,2],[47795,1],[47800,1],[47812,1],[47834,1],[47853,1],[47891,1],[47898,2],[47915,1],[47920,1],[47932,1],[47956,1],[47975,1],[48013,1],[48020,2],[48037,1],[48042,1],[48054,1],[48078,1],[48105,1],[48143,1],[48150,2],[48167,1],[48172,1],[48184,1],[48208,1],[48230,1],[48268,1],[48275,2],[48292,1],[48297,1],[48309,1],[48332,1],[48354,1],[48391,1],[48398,2],[48415,1],[48420,1],[48432,1],[48454,1],[48473,1],[48510,1],[48517,2],[48534,1],[48539,1],[48551,1],[48575,1],[48598,1],[48636,1],[48643,2],[48646,2],[48649,1],[48771,1],[48831,1],[48833,1],[49545,1],[49665,1],[49736,1],[49743,1],[49778,1],[49782,3],[49786,1],[49788,1],[50767,2],[50975,2],[51122,2],[51267,2],[51404,2],[51469,1],[51581,1],[51593,1],[51624,1],[51636,1],[51758,1],[51783,2],[51872,1],[51890,2],[51998,1],[52064,1],[52096,2],[52227,1],[52252,1],[52368,1],[52426,1],[52445,1],[52596,1],[52706,1],[52754,1],[52783,1],[52799,1],[52804,1],[52816,1],[52839,1],[52860,1],[52899,1],[52906,2],[52923,1],[52928,1],[52940,1],[52961,1],[52993,1],[53030,1],[53037,2],[53054,1],[53059,1],[53071,1],[53093,1],[53116,1],[53154,1],[53161,2],[53178,1],[53183,1],[53195,1],[53216,1],[53245,1],[53282,1],[53290,2],[53307,1],[53312,1],[53324,1],[53348,1],[53378,1],[53416,1],[53423,2],[53440,1],[53445,1],[53457,1],[53479,1],[53498,1],[53536,1],[53543,2],[53560,1],[53565,1],[53577,1],[53601,1],[53620,1],[53658,1],[53665,2],[53682,1],[53687,1],[53699,1],[53723,1],[53750,1],[53788,1],[53795,2],[53812,1],[53817,1],[53829,1],[53853,1],[53875,1],[53913,1],[53920,2],[53937,1],[53942,1],[53954,1],[53977,1],[53999,1],[54036,1],[54043,2],[54060,1],[54065,1],[54077,1],[54099,1],[54118,1],[54155,1],[54162,2],[54179,1],[54184,1],[54196,1],[54220,1],[54243,1],[54281,1],[54288,2],[54291,2],[54294,1],[54296,1],[54584,1],[55253,1],[55261,1],[55322,1],[55347,1],[55386,1],[55422,1],[55438,1],[55443,1],[55455,1],[55478,1],[55499,1],[55538,1],[55545,2],[55562,1],[55567,1],[55579,1],[55600,1],[55632,1],[55669,1],[55676,2],[55693,1],[55698,1],[55710,1],[55732,1],[55755,1],[55793,1],[55800,2],[55817,1],[55822,1],[55834,1],[55855,1],[55884,1],[55921,1],[55929,2],[55946,1],[55951,1],[55963,1],[55987,1],[56017,1],[56055,1],[56062,1],[56064,3],[56105,1],[56141,1],[56157,1],[56162,1],[56174,1],[56196,1],[56215,1],[56253,1],[56260,2],[56277,1],[56282,1],[56294,1],[56318,1],[56337,1],[56375,1],[56382,2],[56399,1],[56404,1],[56416,1],[56439,1],[56461,1],[56498,1],[56505,2],[56522,1],[56527,1],[56539,1],[56561,1],[56580,1],[56617,1],[56624,1],[56626,2],[56629,2],[56632,1],[57742,1],[57841,1],[57853,1],[57875,1],[57891,1],[57896,1],[57908,1],[57931,1],[57952,1],[57991,1],[57998,2],[58015,1],[58020,1],[58032,1],[58053,1],[58085,1],[58122,1],[58129,2],[58146,1],[58151,1],[58163,1],[58185,1],[58208,1],[58246,1],[58253,2],[58270,1],[58275,1],[58287,1],[58308,1],[58337,1],[58374,1],[58382,2],[58399,1],[58404,1],[58416,1],[58440,1],[58470,1],[58508,1],[58515,1],[58517,2],[58520,1],[58555,1],[58557,2],[58619,2],[58717,1],[58747,1],[58749,2],[58784,1],[58854,2],[58943,2],[58994,1],[59002,1],[59039,1],[59049,1],[59075,1],[59093,2],[59102,1],[59116,1],[59156,1],[59191,1],[59303,1],[59323,1],[59325,1],[60300,2],[60438,2],[60585,2],[60730,2],[60867,2],[60932,1],[61096,1],[61121,2],[61210,1],[61228,2],[61336,1],[61380,1],[61449,2],[61510,1],[61558,1],[61587,1],[61603,1],[61608,1],[61620,1],[61643,1],[61664,1],[61703,1],[61710,2],[61727,1],[61732,1],[61744,1],[61765,1],[61797,1],[61834,1],[61841,2],[61858,1],[61863,1],[61875,1],[61897,1],[61920,1],[61958,1],[61965,2],[61982,1],[61987,1],[61999,1],[62020,1],[62049,1],[62086,1],[62094,2],[62111,1],[62116,1],[62128,1],[62152,1],[62182,1],[62220,1],[62227,2],[62244,1],[62249,1],[62261,1],[62283,1],[62302,1],[62340,1],[62347,2],[62364,1],[62369,1],[62381,1],[62405,1],[62424,1],[62462,1],[62469,2],[62486,1],[62491,1],[62503,1],[62527,1],[62554,1],[62592,1],[62599,2],[62616,1],[62621,1],[62633,1],[62657,1],[62679,1],[62717,1],[62724,2],[62741,1],[62746,1],[62758,1],[62781,1],[62803,1],[62840,1],[62847,2],[62864,1],[62869,1],[62881,1],[62903,1],[62922,1],[62959,1],[62966,2],[62983,1],[62988,1],[63000,1],[63024,1],[63047,1],[63085,1],[63092,2],[63095,2],[63098,1],[63100,1],[63627,2],[63765,2],[63912,2],[64057,2],[64194,2],[64229,2],[64243,1],[64261,1],[64327,1],[64491,1],[64516,2],[64605,1],[64623,2],[64731,1],[64779,1],[64808,1],[64824,1],[64829,1],[64841,1],[64864,1],[64885,1],[64924,1],[64931,2],[64948,1],[64953,1],[64965,1],[64986,1],[65018,1],[65055,1],[65062,2],[65079,1],[65084,1],[65096,1],[65118,1],[65141,1],[65179,1],[65186,2],[65203,1],[65208,1],[65220,1],[65241,1],[65270,1],[65307,1],[65315,2],[65332,1],[65337,1],[65349,1],[65373,1],[65403,1],[65441,1],[65448,2],[65465,1],[65470,1],[65482,1],[65504,1],[65523,1],[65561,1],[65568,2],[65585,1],[65590,1],[65602,1],[65626,1],[65645,1],[65683,1],[65690,2],[65707,1],[65712,1],[65724,1],[65748,1],[65775,1],[65813,1],[65820,2],[65837,1],[65842,1],[65854,1],[65878,1],[65900,1],[65938,1],[65945,2],[65962,1],[65967,1],[65979,1],[66002,1],[66024,1],[66061,1],[66068,2],[66085,1],[66090,1],[66102,1],[66124,1],[66143,1],[66180,1],[66187,2],[66204,1],[66209,1],[66221,1],[66245,1],[66268,1],[66306,1],[66313,2],[66316,2],[66319,1],[66321,1],[66834,2],[66972,2],[67119,2],[67264,2],[67567,1],[67637,1],[67643,2],[67662,2],[67682,2],[67722,2],[67736,1],[67746,1],[67868,1],[67893,2],[67982,1],[68000,2],[68108,1],[68156,1],[68185,1],[68201,1],[68206,1],[68218,1],[68241,1],[68262,1],[68301,1],[68308,2],[68325,1],[68330,1],[68342,1],[68363,1],[68395,1],[68432,1],[68439,2],[68456,1],[68461,1],[68473,1],[68495,1],[68518,1],[68556,1],[68563,2],[68580,1],[68585,1],[68597,1],[68618,1],[68647,1],[68684,1],[68692,2],[68709,1],[68714,1],[68726,1],[68750,1],[68780,1],[68818,1],[68825,2],[68842,1],[68847,1],[68859,1],[68881,1],[68900,1],[68938,1],[68945,2],[68962,1],[68967,1],[68979,1],[69003,1],[69022,1],[69060,1],[69067,2],[69084,1],[69089,1],[69101,1],[69125,1],[69152,1],[69190,1],[69197,2],[69214,1],[69219,1],[69231,1],[69255,1],[69277,1],[69315,1],[69322,2],[69339,1],[69344,1],[69356,1],[69379,1],[69401,1],[69438,1],[69445,2],[69462,1],[69467,1],[69479,1],[69501,1],[69520,1],[69557,1],[69564,2],[69581,1],[69586,1],[69598,1],[69622,1],[69645,1],[69683,1],[69690,2],[69693,2],[69696,1],[69698,1],[70681,1],[70702,1],[70723,1],[70766,1],[70823,1],[70952,1],[71031,2],[71120,1],[71138,2],[71246,1],[71294,1],[71323,1],[71339,1],[71344,1],[71356,1],[71379,1],[71400,1],[71439,1],[71446,2],[71463,1],[71468,1],[71480,1],[71501,1],[71533,1],[71570,1],[71577,2],[71594,1],[71599,1],[71611,1],[71633,1],[71656,1],[71694,1],[71701,2],[71718,1],[71723,1],[71735,1],[71756,1],[71785,1],[71822,1],[71830,2],[71847,1],[71852,1],[71864,1],[71888,1],[71918,1],[71956,1],[71963,2],[71980,1],[71985,1],[71997,1],[72019,1],[72038,1],[72076,1],[72083,2],[72100,1],[72105,1],[72117,1],[72141,1],[72160,1],[72198,1],[72205,2],[72222,1],[72227,1],[72239,1],[72262,1],[72284,1],[72321,1],[72328,2],[72345,1],[72350,1],[72362,1],[72384,1],[72403,1],[72440,1],[72447,2],[72450,2],[72453,1],[72521,1],[72541,1],[72565,2],[72584,1],[72596,1],[72632,1],[72634,1],[73656,1],[73677,1],[73698,1],[73741,1],[73798,1],[73927,1],[74006,2],[74095,1],[74113,2],[74221,1],[74269,1],[74298,1],[74314,1],[74319,1],[74331,1],[74354,1],[74375,1],[74414,1],[74421,2],[74438,1],[74443,1],[74455,1],[74476,1],[74508,1],[74545,1],[74552,2],[74569,1],[74574,1],[74586,1],[74608,1],[74631,1],[74669,1],[74676,2],[74693,1],[74698,1],[74710,1],[74731,1],[74760,1],[74797,1],[74805,2],[74822,1],[74827,1],[74839,1],[74863,1],[74893,1],[74931,1],[74938,2],[74955,1],[74960,1],[74972,1],[74994,1],[75013,1],[75051,1],[75058,2],[75075,1],[75080,1],[75092,1],[75116,1],[75135,1],[75173,1],[75180,2],[75197,1],[75202,1],[75214,1],[75237,1],[75259,1],[75296,1],[75303,2],[75320,1],[75325,1],[75337,1],[75359,1],[75378,1],[75415,1],[75422,2],[75425,2],[75428,1],[75496,1],[75516,1],[75540,2],[75559,1],[75571,1],[75607,1],[75609,1],[77007,1],[77028,1],[77049,1],[77092,1],[77149,1],[77278,1],[77303,2],[77392,1],[77410,2],[77518,1],[77566,1],[77595,1],[77611,1],[77616,1],[77628,1],[77651,1],[77672,1],[77711,1],[77718,2],[77735,1],[77740,1],[77752,1],[77773,1],[77805,1],[77842,1],[77849,2],[77866,1],[77871,1],[77883,1],[77905,1],[77928,1],[77966,1],[77973,2],[77990,1],[77995,1],[78007,1],[78028,1],[78057,1],[78094,1],[78102,2],[78119,1],[78124,1],[78136,1],[78160,1],[78190,1],[78228,1],[78235,2],[78252,1],[78257,1],[78269,1],[78291,1],[78310,1],[78348,1],[78355,2],[78372,1],[78377,1],[78389,1],[78413,1],[78432,1],[78470,1],[78477,2],[78494,1],[78499,1],[78511,1],[78534,1],[78556,1],[78593,1],[78600,2],[78617,1],[78622,1],[78634,1],[78656,1],[78675,1],[78712,1],[78719,2],[78722,2],[78725,1],[78805,1],[78830,2],[78838,1],[78846,2],[78881,1],[78887,1],[78944,1],[78960,1],[78967,2],[79002,1],[79008,1],[79076,1],[79096,1],[79120,2],[79139,1],[79151,1],[79187,1],[79189,1],[79889,2],[80004,2],[80121,2],[80168,1],[80191,1],[80237,1],[80369,1],[80394,2],[80483,1],[80501,2],[80609,1],[80657,1],[80686,1],[80702,1],[80707,1],[80719,1],[80742,1],[80763,1],[80802,1],[80809,2],[80826,1],[80831,1],[80843,1],[80864,1],[80896,1],[80933,1],[80940,2],[80957,1],[80962,1],[80974,1],[80996,1],[81019,1],[81057,1],[81064,2],[81081,1],[81086,1],[81098,1],[81119,1],[81148,1],[81185,1],[81193,2],[81210,1],[81215,1],[81227,1],[81251,1],[81281,1],[81319,1],[81326,2],[81343,1],[81348,1],[81360,1],[81382,1],[81401,1],[81439,1],[81446,2],[81463,1],[81468,1],[81480,1],[81504,1],[81523,1],[81561,1],[81568,2],[81585,1],[81590,1],[81602,1],[81626,1],[81653,1],[81691,1],[81698,2],[81715,1],[81720,1],[81732,1],[81756,1],[81778,1],[81816,1],[81823,2],[81840,1],[81845,1],[81857,1],[81880,1],[81902,1],[81939,1],[81946,2],[81963,1],[81968,1],[81980,1],[82002,1],[82021,1],[82058,1],[82065,2],[82082,1],[82087,1],[82099,1],[82123,1],[82146,1],[82184,1],[82191,2],[82194,2],[82197,1],[82233,2],[82245,1],[82253,1],[82505,1],[82515,3],[82960,1],[83003,1],[83135,1],[83160,2],[83249,1],[83267,2],[83375,1],[83423,1],[83452,1],[83468,1],[83473,1],[83485,1],[83508,1],[83529,1],[83568,1],[83575,2],[83592,1],[83597,1],[83609,1],[83630,1],[83662,1],[83699,1],[83706,2],[83723,1],[83728,1],[83740,1],[83762,1],[83785,1],[83823,1],[83830,2],[83847,1],[83852,1],[83864,1],[83885,1],[83914,1],[83951,1],[83959,2],[83976,1],[83981,1],[83993,1],[84017,1],[84047,1],[84085,1],[84092,2],[84109,1],[84114,1],[84126,1],[84148,1],[84167,1],[84205,1],[84212,2],[84229,1],[84234,1],[84246,1],[84270,1],[84289,1],[84327,1],[84334,2],[84351,1],[84356,1],[84368,1],[84392,1],[84419,1],[84457,1],[84464,2],[84481,1],[84486,1],[84498,1],[84522,1],[84544,1],[84582,1],[84589,2],[84606,1],[84611,1],[84623,1],[84646,1],[84668,1],[84705,1],[84712,2],[84729,1],[84734,1],[84746,1],[84768,1],[84787,1],[84824,1],[84831,2],[84848,1],[84853,1],[84865,1],[84889,1],[84912,1],[84950,1],[84957,2],[84960,2],[84963,1],[84965,1],[85255,2],[85373,2],[85493,2],[85619,2],[85732,2],[86057,2],[86175,2],[86295,2],[86421,2],[86534,2],[86845,2],[86963,2],[87083,2],[87209,2],[87322,2],[87647,2],[87765,2],[87885,2],[88011,2],[88124,2],[88189,1],[88232,1],[88364,1],[88389,2],[88478,1],[88496,2],[88604,1],[88652,1],[88681,1],[88697,1],[88702,1],[88714,1],[88735,1],[88767,1],[88804,1],[88811,2],[88828,1],[88833,1],[88845,1],[88867,1],[88890,1],[88928,1],[88935,2],[88952,1],[88957,1],[88969,1],[88990,1],[89019,1],[89056,1],[89064,2],[89081,1],[89086,1],[89098,1],[89122,1],[89152,1],[89190,1],[89197,2],[89214,1],[89219,1],[89231,1],[89253,1],[89272,1],[89310,1],[89317,2],[89334,1],[89339,1],[89351,1],[89375,1],[89394,1],[89432,1],[89439,2],[89442,2],[89445,1],[89447,1],[89851,2],[89989,2],[90136,2],[90281,2],[90418,2],[90842,2],[90980,2],[91127,2],[91272,2],[91409,2],[91831,2],[91969,2],[92116,2],[92261,2],[92398,2],[92822,2],[92960,2],[93107,2],[93252,2],[93389,2],[93807,2],[93945,2],[94092,2],[94237,2],[94374,2],[94792,2],[94930,2],[95077,2],[95222,2],[95359,2],[95787,2],[95925,2],[96072,2],[96217,2],[96354,2],[96419,1],[96462,1],[96594,1],[96619,2],[96708,1],[96726,2],[96834,1],[96882,1],[96911,1],[96927,1],[96932,1],[96944,1],[96965,1],[96997,1],[97034,1],[97041,2],[97058,1],[97063,1],[97075,1],[97097,1],[97120,1],[97158,1],[97165,2],[97182,1],[97187,1],[97199,1],[97220,1],[97249,1],[97286,1],[97294,2],[97311,1],[97316,1],[97328,1],[97352,1],[97382,1],[97420,1],[97427,2],[97444,1],[97449,1],[97461,1],[97483,1],[97502,1],[97540,1],[97547,2],[97564,1],[97569,1],[97581,1],[97605,1],[97624,1],[97662,1],[97669,2],[97672,2],[97675,1],[97677,1],[98007,2],[98125,2],[98245,2],[98371,2],[98484,2],[98549,1],[98586,1],[98598,1],[98600,1],[98653,1],[98785,1],[98810,2],[98899,1],[98917,2],[99025,1],[99073,1],[99102,1],[99118,1],[99123,1],[99135,1],[99156,1],[99188,1],[99225,1],[99232,2],[99249,1],[99254,1],[99266,1],[99288,1],[99311,1],[99349,1],[99356,2],[99373,1],[99378,1],[99390,1],[99411,1],[99440,1],[99477,1],[99485,2],[99502,1],[99507,1],[99519,1],[99543,1],[99573,1],[99611,1],[99618,2],[99635,1],[99640,1],[99652,1],[99674,1],[99693,1],[99731,1],[99738,2],[99755,1],[99760,1],[99772,1],[99796,1],[99815,1],[99853,1],[99860,2],[99863,2],[99866,1],[99932,1],[99979,1],[99986,1],[100013,1],[100043,1],[100091,3],[100095,1],[100097,1],[100445,2],[100563,2],[100683,2],[100809,2],[100922,2],[100987,1],[101024,1],[101036,1],[101038,1],[101091,1],[101223,1],[101248,2],[101337,1],[101355,2],[101463,1],[101511,1],[101540,1],[101556,1],[101561,1],[101573,1],[101594,1],[101626,1],[101663,1],[101670,2],[101687,1],[101692,1],[101704,1],[101726,1],[101749,1],[101787,1],[101794,2],[101811,1],[101816,1],[101828,1],[101849,1],[101878,1],[101915,1],[101923,2],[101940,1],[101945,1],[101957,1],[101981,1],[102011,1],[102049,1],[102056,2],[102073,1],[102078,1],[102090,1],[102112,1],[102131,1],[102169,1],[102176,2],[102193,1],[102198,1],[102210,1],[102234,1],[102253,1],[102291,1],[102298,2],[102301,2],[102304,1],[102376,1],[102423,1],[102430,1],[102457,1],[102494,1],[102542,3],[102546,1],[102548,1],[103083,1],[103093,3],[103298,2],[103436,2],[103583,2],[103728,2],[103865,2],[103930,1],[103973,1],[104070,1],[104095,1],[104129,2],[104299,2],[104659,2],[104963,2],[105092,1],[105214,1],[105239,2],[105328,1],[105346,2],[105454,1],[105502,1],[105531,1],[105547,1],[105552,1],[105564,1],[105587,1],[105608,1],[105647,1],[105654,2],[105671,1],[105676,1],[105688,1],[105709,1],[105741,1],[105778,1],[105785,2],[105802,1],[105807,1],[105819,1],[105841,1],[105864,1],[105902,1],[105909,2],[105926,1],[105931,1],[105943,1],[105964,1],[105993,1],[106030,1],[106038,2],[106055,1],[106060,1],[106072,1],[106096,1],[106126,1],[106164,1],[106171,2],[106188,1],[106193,1],[106205,1],[106227,1],[106246,1],[106284,1],[106291,2],[106308,1],[106313,1],[106325,1],[106349,1],[106368,1],[106406,1],[106413,2],[106430,1],[106435,1],[106447,1],[106471,1],[106498,1],[106536,1],[106543,2],[106560,1],[106565,1],[106577,1],[106601,1],[106623,1],[106661,1],[106668,2],[106685,1],[106690,1],[106702,1],[106725,1],[106747,1],[106784,1],[106791,2],[106808,1],[106813,1],[106825,1],[106847,1],[106866,1],[106903,1],[106910,2],[106927,1],[106932,1],[106944,1],[106968,1],[106991,1],[107029,1],[107036,2],[107039,2],[107042,1],[107044,1],[108755,1],[108794,1],[108847,1],[108926,1],[108972,1],[109094,1],[109119,2],[109208,1],[109226,2],[109334,1],[109382,1],[109411,1],[109427,1],[109432,1],[109444,1],[109467,1],[109488,1],[109527,1],[109534,2],[109551,1],[109556,1],[109569,1],[109590,1],[109622,1],[109659,1],[109666,2],[109683,1],[109688,1],[109700,1],[109722,1],[109745,1],[109783,1],[109790,2],[109807,1],[109812,1],[109824,1],[109845,1],[109874,1],[109911,1],[109919,2],[109936,1],[109941,1],[109953,1],[109977,1],[110007,1],[110045,1],[110052,2],[110069,1],[110074,1],[110086,1],[110108,1],[110127,1],[110165,1],[110172,2],[110189,1],[110194,1],[110206,1],[110230,1],[110249,1],[110287,1],[110294,2],[110311,1],[110316,1],[110328,1],[110351,1],[110373,1],[110410,1],[110417,2],[110434,1],[110439,1],[110451,1],[110473,1],[110492,1],[110509,1],[110516,2],[110533,1],[110538,1],[110550,1],[110573,1],[110585,1],[110622,1],[110629,2],[110632,2],[110635,1],[110637,1],[111014,2],[111298,2],[111492,2],[111673,2],[111860,2],[112058,2],[112276,2],[112363,1],[112415,1],[112427,1],[112429,1],[112561,1],[112581,1],[112583,3],[112615,1],[112669,2],[112695,1],[112697,2],[112770,1],[112831,1],[112881,1],[112894,1],[113114,1],[113121,1],[113148,1],[113163,3],[113167,1],[113169,1],[113543,2],[113868,2],[114062,2],[114243,2],[114430,2],[114628,2],[114900,2],[114987,1],[115039,1],[115051,1],[115053,1],[115185,1],[115205,1],[115207,3],[115239,1],[115293,2],[115319,1],[115321,2],[115394,1],[115455,1],[115505,1],[115518,1],[115738,1],[115745,1],[115772,1],[115787,3],[115791,1],[115793,1],[116204,2],[116529,2],[116723,2],[116904,2],[117091,2],[117289,2],[117561,2],[117648,1],[117700,1],[117712,1],[117714,1],[117846,1],[117866,1],[117868,3],[117900,1],[117954,2],[117980,1],[117982,2],[118055,1],[118116,1],[118166,1],[118179,1],[118399,1],[118406,1],[118433,1],[118448,3],[118452,1],[118454,1],[118899,2],[119225,2],[119419,2],[119600,2],[119787,2],[120065,2],[120337,2],[120424,1],[120476,1],[120488,1],[120490,1],[120622,1],[120642,1],[120644,3],[120676,1],[120730,2],[120756,1],[120758,2],[120831,1],[120892,1],[120942,1],[120955,1],[121175,1],[121182,1],[121209,1],[121224,3],[121228,1],[121230,1]]}}}],["0",{"_index":1347,"t":{"506":{"position":[[1386,2]]},"532":{"position":[[1094,2],[1339,1],[1465,2],[1689,1],[1801,2],[4936,2],[4965,2],[6037,2],[7380,2],[7859,1],[7956,2],[8150,2],[9032,1],[10438,1],[10709,1],[10981,1],[12666,1],[12937,1],[13209,1],[14764,1],[15035,1],[15307,1]]},"534":{"position":[[1572,1],[1684,2],[2597,2],[2600,2],[2702,2],[2705,2],[3423,2],[3499,1],[4252,1],[6987,2],[7016,2],[7930,2],[9229,2],[9848,1],[10000,2],[10194,2],[11431,1],[11973,1],[12515,1]]},"536":{"position":[[1271,1],[1383,2],[3726,2],[3759,2],[4770,2],[5866,2],[6252,2],[6440,2],[6650,2],[7520,2],[7553,2],[8684,2],[9545,2],[9640,2],[10123,2],[10311,2],[10521,2]]},"542":{"position":[[13405,2],[13476,2],[14022,1]]},"546":{"position":[[9655,2],[9726,2],[10273,1]]},"560":{"position":[[3449,3],[3488,3],[3528,3],[3581,3],[3621,3],[8891,3]]},"562":{"position":[[1436,1],[1548,2],[4038,2],[4071,2],[5137,2],[6297,2],[6698,2],[6886,2],[7096,2],[8603,1],[9145,1],[9687,1],[11126,2],[11159,2],[12089,2],[12367,2],[13302,2],[13402,2],[13897,2],[14085,2],[14295,2]]},"564":{"position":[[21129,2],[21200,2],[21747,1]]},"568":{"position":[[2162,3],[4590,1],[4732,1],[49780,1],[85165,2],[85967,2],[86755,2],[87557,2],[89670,2],[89743,2],[90661,2],[90734,2],[91651,2],[91723,2],[92641,2],[92714,2],[93629,2],[93699,2],[94614,2],[94684,2],[95604,2],[95679,2],[97893,2],[100319,2],[102885,2],[103000,2]]}}}],["0\">and",{"_index":3402,"t":{"564":{"position":[[18660,6]]}}}],["0\">whenev",{"_index":842,"t":{"492":{"position":[[1982,11]]}}}],["0,0,0",{"_index":3503,"t":{"566":{"position":[[21740,6]]}}}],["0.0",{"_index":2482,"t":{"534":{"position":[[1339,3]]}}}],["0.1",{"_index":2490,"t":{"534":{"position":[[2603,5],[2708,5]]}}}],["0.1.0",{"_index":127,"t":{"10":{"position":[[103,5]]},"118":{"position":[[1737,5]]},"220":{"position":[[1790,5]]},"390":{"position":[[147,5]]}}}],["0.2",{"_index":2518,"t":{"534":{"position":[[4207,3]]}}}],["0.2.0",{"_index":172,"t":{"14":{"position":[[102,5]]},"118":{"position":[[1306,5]]},"220":{"position":[[1359,5]]},"332":{"position":[[1460,5]]},"344":{"position":[[145,5]]},"354":{"position":[[150,5]]},"356":{"position":[[1534,5]]},"398":{"position":[[146,5]]}}}],["0.2.1",{"_index":182,"t":{"18":{"position":[[103,5]]},"118":{"position":[[1076,5]]},"220":{"position":[[1129,5]]},"308":{"position":[[155,5]]},"334":{"position":[[146,5]]},"382":{"position":[[1047,5]]},"400":{"position":[[147,5]]}}}],["0.2.2",{"_index":201,"t":{"24":{"position":[[100,5]]},"118":{"position":[[875,5]]},"220":{"position":[[928,5]]},"350":{"position":[[541,5]]},"404":{"position":[[144,5]]}}}],["0.2.3",{"_index":191,"t":{"20":{"position":[[100,5]]},"118":{"position":[[677,5]]},"220":{"position":[[730,5]]},"350":{"position":[[343,5]]},"402":{"position":[[144,5]]}}}],["0.2.4",{"_index":197,"t":{"22":{"position":[[99,5]]},"118":{"position":[[482,5]]},"220":{"position":[[535,5]]},"350":{"position":[[148,5]]},"406":{"position":[[143,5]]}}}],["0.2.5",{"_index":206,"t":{"26":{"position":[[99,5]]},"118":{"position":[[285,5]]},"220":{"position":[[338,5]]},"356":{"position":[[1334,5]]},"360":{"position":[[3012,5]]},"408":{"position":[[143,5]]}}}],["0.2.6",{"_index":219,"t":{"30":{"position":[[101,5]]},"118":{"position":[[101,5]]},"220":{"position":[[154,5]]},"294":{"position":[[778,5]]},"410":{"position":[[145,5]]}}}],["0.3.0",{"_index":222,"t":{"32":{"position":[[101,5]]},"114":{"position":[[2687,5]]},"214":{"position":[[2740,5]]},"332":{"position":[[1255,5]]},"412":{"position":[[145,5]]}}}],["0.4.0",{"_index":209,"t":{"28":{"position":[[103,5]]},"114":{"position":[[2483,5]]},"126":{"position":[[2497,5]]},"214":{"position":[[2536,5]]},"328":{"position":[[1332,5]]},"414":{"position":[[147,5]]},"538":{"position":[[469,5],[521,5],[722,5],[794,5],[916,5],[1509,5],[1578,5],[1670,5],[1712,5],[1773,5],[1832,5],[1969,5],[2061,5]]}}}],["0.4.1",{"_index":243,"t":{"34":{"position":[[104,5]]},"114":{"position":[[2285,5]]},"126":{"position":[[2299,5]]},"214":{"position":[[2338,5]]},"296":{"position":[[149,5]]},"328":{"position":[[1134,5]]},"332":{"position":[[1059,5]]},"416":{"position":[[148,5]]},"538":{"position":[[1267,5],[1462,5]]}}}],["0.4.2",{"_index":257,"t":{"36":{"position":[[104,5]]},"114":{"position":[[2011,5]]},"126":{"position":[[2025,5]]},"214":{"position":[[2064,5]]},"418":{"position":[[148,5]]}}}],["0.5.0",{"_index":259,"t":{"38":{"position":[[102,5]]},"114":{"position":[[1740,5]]},"134":{"position":[[156,5]]},"138":{"position":[[153,5]]},"148":{"position":[[161,5]]},"162":{"position":[[157,5]]},"172":{"position":[[156,5]]},"214":{"position":[[1793,5]]},"420":{"position":[[146,5]]}}}],["0.5.1",{"_index":266,"t":{"40":{"position":[[103,5]]},"114":{"position":[[1478,5]]},"150":{"position":[[650,5]]},"152":{"position":[[162,5]]},"154":{"position":[[160,5]]},"158":{"position":[[159,5]]},"214":{"position":[[1531,5]]},"246":{"position":[[650,5]]},"422":{"position":[[147,5]]},"568":{"position":[[50046,6]]}}}],["0.6.0",{"_index":308,"t":{"46":{"position":[[103,5]]},"114":{"position":[[1163,5]]},"170":{"position":[[156,5]]},"176":{"position":[[160,5]]},"190":{"position":[[401,5]]},"214":{"position":[[1216,5]]},"362":{"position":[[406,5]]},"364":{"position":[[153,5]]},"382":{"position":[[732,5]]},"424":{"position":[[147,5]]}}}],["0.8",{"_index":2335,"t":{"532":{"position":[[1082,3],[1453,3]]}}}],["06:00",{"_index":3245,"t":{"560":{"position":[[3535,5],[3628,5]]}}}],["08:00",{"_index":3243,"t":{"560":{"position":[[3495,5],[3588,5]]}}}],["0l1",{"_index":920,"t":{"494":{"position":[[1847,3]]}}}],["1",{"_index":83,"t":{"2":{"position":[[2316,2],[2536,2]]},"90":{"position":[[29,2]]},"98":{"position":[[29,2]]},"128":{"position":[[2360,2],[2580,2]]},"140":{"position":[[1464,2],[1503,2]]},"204":{"position":[[2369,2],[2589,2]]},"216":{"position":[[83,2]]},"254":{"position":[[1047,2]]},"278":{"position":[[2364,2],[2584,2]]},"280":{"position":[[2363,2],[2583,2]]},"284":{"position":[[78,2]]},"290":{"position":[[84,2]]},"292":{"position":[[77,2]]},"360":{"position":[[1317,2]]},"376":{"position":[[72,2]]},"380":{"position":[[79,2]]},"482":{"position":[[73,2]]},"486":{"position":[[73,2]]},"494":{"position":[[1861,1]]},"508":{"position":[[1884,4],[3712,2],[3733,2],[4335,2],[4959,2],[5738,4],[7542,4],[9374,4],[16285,3]]},"512":{"position":[[1115,1]]},"514":{"position":[[269,2],[272,1]]},"516":{"position":[[1420,1]]},"532":{"position":[[1097,2],[1468,2],[7624,2],[8290,2],[8321,3]]},"534":{"position":[[2800,1],[2898,1],[3199,1],[3292,1],[3378,1],[9476,2],[10334,2]]},"536":{"position":[[5706,2],[6039,2],[6739,2],[6827,4],[9385,2],[9715,2],[9910,2],[10610,2],[10698,4]]},"540":{"position":[[4879,3]]},"542":{"position":[[1190,1]]},"544":{"position":[[879,1]]},"546":{"position":[[4005,2]]},"552":{"position":[[1385,4]]},"554":{"position":[[1380,4]]},"562":{"position":[[6137,2],[6485,2],[7185,2],[7273,4],[13142,2],[13477,2],[13684,2],[14384,2],[14472,4]]},"566":{"position":[[3194,4],[5049,4],[7331,4],[9664,4],[12117,4],[14527,4],[16941,4],[19447,4],[21063,3],[22773,4]]},"568":{"position":[[2168,3],[3729,1],[7855,2],[8360,2],[8482,2],[8606,2],[8609,3],[8728,3],[10200,2],[10705,2],[10827,2],[10951,2],[10954,3],[11073,3],[12576,2],[13081,2],[13203,2],[13582,2],[13585,3],[13704,3],[13826,2],[15348,2],[15853,2],[15975,2],[16099,2],[16102,3],[16221,3],[17767,2],[18272,2],[18394,2],[18773,2],[18776,3],[18895,3],[19017,2],[20519,2],[21024,2],[21146,2],[21270,2],[21273,3],[21392,3],[22921,2],[23426,2],[23548,2],[23672,2],[23675,3],[23794,3],[26196,2],[27154,2],[27393,2],[27634,2],[27637,3],[27872,3],[31998,2],[32503,2],[32625,2],[32749,2],[32752,3],[32871,3],[34363,2],[34868,2],[34990,2],[35114,2],[35117,3],[35236,3],[36728,2],[37233,2],[37355,2],[37479,2],[37482,3],[37601,3],[44225,2],[45183,2],[45422,2],[45663,2],[45666,3],[45901,3],[47369,2],[47874,2],[47996,2],[48375,2],[48378,3],[48497,3],[48619,2],[52229,2],[53014,2],[53519,2],[53641,2],[54020,2],[54023,3],[54142,3],[54264,2],[55373,1],[55653,2],[56236,2],[56358,2],[56482,2],[56485,3],[56604,3],[58106,2],[59104,2],[61818,2],[62323,2],[62445,2],[62824,2],[62827,3],[62946,3],[63068,2],[65039,2],[65544,2],[65666,2],[66045,2],[66048,3],[66167,3],[66289,2],[68416,2],[68921,2],[69043,2],[69422,2],[69425,3],[69544,3],[69666,2],[71554,2],[72059,2],[72181,2],[72305,2],[72308,3],[72427,3],[74529,2],[75034,2],[75156,2],[75280,2],[75283,3],[75402,3],[77826,2],[78331,2],[78453,2],[78577,2],[78580,3],[78699,3],[80917,2],[81422,2],[81544,2],[81923,2],[81926,3],[82045,3],[82167,2],[83683,2],[84188,2],[84310,2],[84689,2],[84692,3],[84811,3],[84933,2],[88788,2],[89293,2],[89415,2],[97018,2],[97523,2],[97645,2],[99209,2],[99714,2],[99836,2],[101647,2],[102152,2],[102274,2],[103130,3],[105762,2],[106267,2],[106389,2],[106768,2],[106771,3],[106890,3],[107012,2],[109643,2],[110148,2],[110270,2],[110394,2],[110397,3],[110609,3]]}}}],["1.0",{"_index":2338,"t":{"532":{"position":[[1169,3]]}}}],["1.0.0",{"_index":278,"t":{"42":{"position":[[123,6]]},"114":{"position":[[842,6]]},"136":{"position":[[1483,6]]},"156":{"position":[[180,6]]},"160":{"position":[[173,6]]},"168":{"position":[[180,6]]},"184":{"position":[[172,6]]},"196":{"position":[[886,6]]},"214":{"position":[[895,6]]},"340":{"position":[[173,6]]},"368":{"position":[[465,6]]},"426":{"position":[[167,6]]},"504":{"position":[[331,5],[407,5],[498,5],[556,5],[674,5],[747,5],[829,5],[896,5],[960,5],[1057,5],[1187,5],[1307,5],[1379,5],[1458,5],[1554,5],[1702,5]]},"512":{"position":[[287,5],[338,5],[435,5],[492,5],[544,5],[601,5],[661,5],[767,5],[907,5],[997,5],[1067,5],[1169,5],[1502,5],[1663,5]]},"516":{"position":[[286,5],[338,5],[427,5],[520,5],[612,5],[658,5],[714,5],[806,5],[862,5],[919,5],[975,5],[1153,5],[1282,5],[1372,5],[1444,5],[1531,5],[1602,5],[1743,5]]},"524":{"position":[[696,5],[757,5],[818,5],[907,5],[958,5],[1030,5],[1247,5],[1297,5],[1359,5],[1392,5],[1448,5],[1508,5],[1568,5]]},"526":{"position":[[616,5],[667,5],[729,5]]},"530":{"position":[[273,5],[458,5],[550,5]]},"532":{"position":[[340,5],[382,5],[597,5],[638,5],[789,5],[848,5],[1055,5],[1251,5],[1316,5],[1356,5],[1421,5],[1543,5],[1804,5],[1920,5],[2044,5],[2130,5],[2208,5],[2286,5],[2378,5],[2432,5],[2504,5],[2576,5],[3020,5],[3080,5],[3135,5],[3383,5],[3428,5]]},"534":{"position":[[485,5],[526,5],[741,5],[782,5],[922,5],[992,5],[1201,5],[1266,5],[1309,5],[1361,5],[1426,5],[1687,5],[1738,5],[2017,5],[2141,5],[2227,5],[2305,5],[2359,5],[2437,5],[2529,5],[2638,5],[2745,5],[2845,5],[2973,5],[3060,5],[3139,5],[3239,5],[3334,5],[3453,5],[3541,5],[3749,5],[3824,5],[4094,5],[4186,5],[4341,5],[4395,5],[4467,5],[4539,5],[4984,5],[5044,5],[5099,5],[5348,5],[5393,5]]},"536":{"position":[[281,5],[322,5],[537,5],[578,5],[718,5],[788,5],[995,5],[1060,5],[1125,5],[1386,5],[1437,5],[1626,5],[1712,5],[1790,5],[1868,5],[1922,5],[2514,5]]},"562":{"position":[[436,5],[477,5],[692,5],[733,5],[884,5],[943,5],[1160,5],[1225,5],[1290,5],[1551,5],[1602,5],[1796,5],[1882,5],[1960,5],[2038,5],[2130,5],[2184,5],[2796,5]]},"568":{"position":[[314,5],[373,5],[564,5],[655,5],[899,5],[1203,5],[1274,5],[1929,5],[2387,5],[2644,5],[3002,5],[3572,5],[3670,5],[3927,5],[4153,5],[4250,5],[4328,5],[4384,5],[5010,5],[5155,5],[5230,5],[5334,5],[5489,5],[5642,5],[5730,5],[5888,5],[6218,5],[6355,5],[6409,5],[6521,5],[6558,5],[6613,5]]}}}],["1.0.1",{"_index":302,"t":{"44":{"position":[[104,6]]},"114":{"position":[[510,6]]},"136":{"position":[[1151,6]]},"144":{"position":[[560,6]]},"146":{"position":[[568,6]]},"166":{"position":[[158,6]]},"174":{"position":[[561,6]]},"178":{"position":[[158,6]]},"180":{"position":[[561,6]]},"196":{"position":[[554,6]]},"214":{"position":[[563,6]]},"428":{"position":[[148,6]]}}}],["1.1.0",{"_index":318,"t":{"48":{"position":[[104,6]]},"114":{"position":[[104,6]]},"136":{"position":[[745,6]]},"144":{"position":[[154,6]]},"146":{"position":[[162,6]]},"174":{"position":[[155,6]]},"180":{"position":[[155,6]]},"188":{"position":[[154,6]]},"196":{"position":[[148,6]]},"214":{"position":[[157,6]]},"430":{"position":[[148,6]]},"510":{"position":[[335,5],[482,5],[660,5],[829,5],[907,5],[991,5],[1060,5],[1155,5],[1223,5],[1287,5],[1346,5],[1436,5],[1503,5]]},"522":{"position":[[544,5],[759,5],[908,5]]}}}],["1.10.0",{"_index":64,"t":{"2":{"position":[[1338,6]]},"96":{"position":[[101,6]]},"128":{"position":[[1382,6]]},"204":{"position":[[1391,6]]},"244":{"position":[[397,6]]},"278":{"position":[[1386,6]]},"280":{"position":[[1385,6]]},"330":{"position":[[666,6]]},"432":{"position":[[146,6]]},"502":{"position":[[513,6],[580,6],[671,6],[833,6],[997,6],[1160,6],[1324,6],[1553,6],[1668,6],[1720,6],[1819,6],[1950,6],[2116,6],[2186,6],[2348,6],[2511,6],[2581,6]]},"504":{"position":[[1636,6]]},"530":{"position":[[348,6]]},"532":{"position":[[487,6],[547,6],[3268,6]]},"534":{"position":[[631,6],[691,6],[5232,6]]},"536":{"position":[[427,6],[487,6],[2399,6]]},"562":{"position":[[582,6],[642,6],[2676,6]]},"564":{"position":[[365,6],[501,6],[594,6],[705,6],[921,6],[1112,6],[1168,6],[1299,6],[1490,6],[1546,6],[1677,6],[1852,6],[1930,6],[2109,6],[2288,6],[2385,6],[2500,6],[2631,6],[2730,6],[2793,6],[2859,6],[2989,6],[3070,6],[3155,6],[3221,6],[3361,6],[3497,6],[3584,6],[3723,6]]},"568":{"position":[[1558,6]]}}}],["1.10.1",{"_index":55,"t":{"2":{"position":[[1092,6]]},"100":{"position":[[103,6]]},"128":{"position":[[1136,6]]},"204":{"position":[[1145,6]]},"244":{"position":[[151,6]]},"278":{"position":[[1140,6]]},"280":{"position":[[1139,6]]},"330":{"position":[[420,6]]},"434":{"position":[[148,6]]}}}],["1.10.2",{"_index":38,"t":{"2":{"position":[[663,6]]},"102":{"position":[[106,6]]},"126":{"position":[[155,6]]},"128":{"position":[[707,6]]},"200":{"position":[[161,6]]},"204":{"position":[[716,6]]},"224":{"position":[[155,6]]},"230":{"position":[[163,6]]},"254":{"position":[[154,6]]},"258":{"position":[[156,6]]},"274":{"position":[[156,6]]},"278":{"position":[[711,6]]},"280":{"position":[[710,6]]},"298":{"position":[[149,6]]},"310":{"position":[[157,6]]},"328":{"position":[[704,6]]},"346":{"position":[[155,6]]},"360":{"position":[[424,6]]},"366":{"position":[[150,6]]},"386":{"position":[[150,6]]},"436":{"position":[[151,6]]},"532":{"position":[[2724,6],[2778,6],[3325,6]]},"534":{"position":[[4687,6],[4740,6],[5290,6]]},"536":{"position":[[2072,6],[2132,6],[2456,6]]},"538":{"position":[[594,6],[665,6]]},"562":{"position":[[2339,6],[2399,6],[2738,6]]}}}],["1.10.3",{"_index":30,"t":{"2":{"position":[[379,6]]},"106":{"position":[[104,6]]},"128":{"position":[[423,6]]},"204":{"position":[[432,6]]},"242":{"position":[[156,6]]},"248":{"position":[[151,6]]},"278":{"position":[[427,6]]},"280":{"position":[[426,6]]},"326":{"position":[[150,6]]},"328":{"position":[[420,6]]},"336":{"position":[[145,6]]},"438":{"position":[[149,6]]},"564":{"position":[[784,6],[850,6]]},"566":{"position":[[959,6]]},"568":{"position":[[1624,6],[1783,6],[2711,6],[2760,6]]}}}],["1.10.4",{"_index":15,"t":{"2":{"position":[[105,6]]},"108":{"position":[[105,6]]},"128":{"position":[[149,6]]},"204":{"position":[[158,6]]},"278":{"position":[[153,6]]},"280":{"position":[[152,6]]},"302":{"position":[[149,6]]},"328":{"position":[[146,6]]},"330":{"position":[[147,6]]},"358":{"position":[[150,6]]},"360":{"position":[[148,6]]},"370":{"position":[[148,6]]},"444":{"position":[[150,6]]},"502":{"position":[[1391,6]]},"522":{"position":[[606,6],[870,6]]},"548":{"position":[[356,6]]},"550":{"position":[[346,6]]},"556":{"position":[[346,6]]},"568":{"position":[[4448,6],[4557,6],[4698,6],[4841,6]]}}}],["1.2.0",{"_index":323,"t":{"50":{"position":[[104,6]]},"112":{"position":[[2769,6]]},"136":{"position":[[416,6]]},"142":{"position":[[163,6]]},"164":{"position":[[155,6]]},"194":{"position":[[2813,6]]},"212":{"position":[[2822,6]]},"232":{"position":[[840,6]]},"250":{"position":[[154,6]]},"440":{"position":[[148,6]]}}}],["1.3.0",{"_index":330,"t":{"52":{"position":[[104,6]]},"112":{"position":[[2510,6]]},"136":{"position":[[157,6]]},"194":{"position":[[2554,6]]},"212":{"position":[[2563,6]]},"264":{"position":[[585,6]]},"442":{"position":[[148,6]]},"544":{"position":[[267,5],[315,5],[399,5],[449,5],[539,5],[575,5],[685,5]]}}}],["1.3.1",{"_index":364,"t":{"60":{"position":[[104,6]]},"112":{"position":[[2221,6]]},"126":{"position":[[1736,6]]},"194":{"position":[[2265,6]]},"200":{"position":[[1293,6]]},"212":{"position":[[2274,6]]},"446":{"position":[[148,6]]},"538":{"position":[[2284,5],[2341,5],[2396,5],[2446,5],[2494,5],[2542,5]]}}}],["1.4.0",{"_index":354,"t":{"56":{"position":[[103,6]]},"112":{"position":[[1952,6]]},"194":{"position":[[1996,6]]},"212":{"position":[[2005,6]]},"258":{"position":[[585,6]]},"338":{"position":[[147,6]]},"342":{"position":[[149,6]]},"348":{"position":[[151,6]]},"366":{"position":[[579,6]]},"450":{"position":[[147,6]]},"566":{"position":[[323,5],[386,5],[559,5],[606,5],[651,5],[697,5],[786,5],[823,5],[1029,5],[1074,5],[1144,5],[1210,5],[1253,5],[1338,5],[1394,5],[1440,5],[1497,5],[1558,5]]}}}],["1.4.1",{"_index":335,"t":{"54":{"position":[[103,6]]},"112":{"position":[[1642,6]]},"194":{"position":[[1686,6]]},"212":{"position":[[1695,6]]},"228":{"position":[[159,6]]},"238":{"position":[[153,6]]},"254":{"position":[[2436,6]]},"286":{"position":[[1690,6]]},"288":{"position":[[1689,6]]},"314":{"position":[[153,6]]},"324":{"position":[[147,6]]},"360":{"position":[[2706,6]]},"448":{"position":[[147,6]]},"516":{"position":[[1712,5]]}}}],["1.4.2",{"_index":367,"t":{"62":{"position":[[103,6]]},"112":{"position":[[1193,6]]},"126":{"position":[[1286,6]]},"130":{"position":[[160,6]]},"182":{"position":[[165,6]]},"186":{"position":[[157,6]]},"194":{"position":[[1237,6]]},"206":{"position":[[174,6]]},"212":{"position":[[1246,6]]},"286":{"position":[[1241,6]]},"288":{"position":[[1240,6]]},"452":{"position":[[147,6]]}}}],["1.4.3",{"_index":360,"t":{"58":{"position":[[103,6]]},"112":{"position":[[944,6]]},"150":{"position":[[401,6]]},"194":{"position":[[988,6]]},"212":{"position":[[997,6]]},"246":{"position":[[401,6]]},"286":{"position":[[992,6]]},"288":{"position":[[991,6]]},"332":{"position":[[809,6]]},"454":{"position":[[147,6]]},"568":{"position":[[713,5],[3753,5]]}}}],["1.4.4",{"_index":371,"t":{"64":{"position":[[104,6]]},"112":{"position":[[695,6]]},"150":{"position":[[152,6]]},"194":{"position":[[739,6]]},"212":{"position":[[748,6]]},"246":{"position":[[152,6]]},"286":{"position":[[743,6]]},"288":{"position":[[742,6]]},"332":{"position":[[560,6]]},"456":{"position":[[148,6]]}}}],["1.4.5",{"_index":377,"t":{"66":{"position":[[104,5]]},"112":{"position":[[447,5]]},"190":{"position":[[154,5]]},"194":{"position":[[491,5]]},"212":{"position":[[500,5]]},"276":{"position":[[491,5]]},"286":{"position":[[495,5]]},"288":{"position":[[494,5]]},"382":{"position":[[485,5]]},"460":{"position":[[148,5]]}}}],["1.5",{"_index":921,"t":{"494":{"position":[[1851,3]]}}}],["1.5.0",{"_index":383,"t":{"68":{"position":[[100,5]]},"112":{"position":[[100,5]]},"194":{"position":[[144,5]]},"212":{"position":[[153,5]]},"222":{"position":[[665,5]]},"236":{"position":[[1298,5]]},"240":{"position":[[567,5]]},"254":{"position":[[2090,5]]},"262":{"position":[[998,5]]},"286":{"position":[[148,5]]},"288":{"position":[[147,5]]},"306":{"position":[[659,5]]},"318":{"position":[[1292,5]]},"322":{"position":[[561,5]]},"356":{"position":[[992,5]]},"360":{"position":[[2360,5]]},"458":{"position":[[144,5]]},"540":{"position":[[481,5],[534,5],[726,5],[802,5],[878,5],[939,5],[982,5],[1132,5],[1165,5]]}}}],["1.6.0",{"_index":394,"t":{"70":{"position":[[101,5]]},"110":{"position":[[2780,5]]},"192":{"position":[[2824,5]]},"208":{"position":[[2833,5]]},"234":{"position":[[149,5]]},"236":{"position":[[885,5]]},"240":{"position":[[154,5]]},"244":{"position":[[2684,5]]},"254":{"position":[[1677,5]]},"262":{"position":[[585,5]]},"268":{"position":[[155,5]]},"270":{"position":[[149,5]]},"272":{"position":[[871,5]]},"282":{"position":[[2828,5]]},"300":{"position":[[2827,5]]},"318":{"position":[[879,5]]},"322":{"position":[[148,5]]},"332":{"position":[[143,5]]},"356":{"position":[[579,5]]},"360":{"position":[[1947,5]]},"374":{"position":[[865,5]]},"378":{"position":[[149,5]]},"464":{"position":[[145,5]]},"512":{"position":[[1117,5]]},"516":{"position":[[1422,5]]},"540":{"position":[[1057,5]]},"560":{"position":[[485,5],[538,5],[730,5],[806,5],[882,5],[943,5],[986,5],[1061,5],[1136,5],[1169,5]]},"568":{"position":[[2299,5],[3997,5]]}}}],["1.7.0",{"_index":413,"t":{"72":{"position":[[101,5]]},"110":{"position":[[2446,5]]},"122":{"position":[[148,5]]},"132":{"position":[[144,5]]},"192":{"position":[[2490,5]]},"198":{"position":[[154,5]]},"202":{"position":[[150,5]]},"208":{"position":[[2499,5]]},"218":{"position":[[450,5]]},"226":{"position":[[153,5]]},"282":{"position":[[2494,5]]},"294":{"position":[[444,5]]},"300":{"position":[[2493,5]]},"304":{"position":[[147,5]]},"462":{"position":[[145,5]]},"498":{"position":[[262,5],[339,5],[436,5],[521,5],[578,5],[649,5]]},"504":{"position":[[1011,5]]},"506":{"position":[[307,5],[364,5],[414,5],[485,5],[570,5],[615,5],[683,5],[808,5],[945,5],[1030,5],[1164,5]]},"508":{"position":[[296,5],[418,5],[510,5],[624,5],[686,5],[753,5],[822,5],[948,5],[1083,5],[1168,5],[1300,5],[1479,5],[1544,5],[1590,5],[1652,5],[1739,5]]}}}],["1.7.1",{"_index":431,"t":{"74":{"position":[[101,5]]},"110":{"position":[[2176,5]]},"126":{"position":[[1014,5]]},"192":{"position":[[2220,5]]},"200":{"position":[[1020,5]]},"208":{"position":[[2229,5]]},"222":{"position":[[396,5]]},"282":{"position":[[2224,5]]},"300":{"position":[[2223,5]]},"306":{"position":[[390,5]]},"466":{"position":[[145,5]]}}}],["1.7.2",{"_index":444,"t":{"76":{"position":[[101,5]]},"110":{"position":[[1928,5]]},"192":{"position":[[1972,5]]},"208":{"position":[[1981,5]]},"232":{"position":[[589,5]]},"282":{"position":[[1976,5]]},"300":{"position":[[1975,5]]},"312":{"position":[[147,5]]},"320":{"position":[[583,5]]},"470":{"position":[[145,5]]}}}],["1.7.3",{"_index":448,"t":{"78":{"position":[[101,5]]},"110":{"position":[[1683,5]]},"192":{"position":[[1727,5]]},"208":{"position":[[1736,5]]},"222":{"position":[[151,5]]},"244":{"position":[[2439,5]]},"282":{"position":[[1731,5]]},"300":{"position":[[1730,5]]},"306":{"position":[[145,5]]},"330":{"position":[[2708,5]]},"468":{"position":[[145,5]]},"568":{"position":[[4945,5]]}}}],["1.8.0",{"_index":466,"t":{"82":{"position":[[97,5]]},"110":{"position":[[1247,5]]},"126":{"position":[[578,5]]},"192":{"position":[[1291,5]]},"200":{"position":[[584,5]]},"208":{"position":[[1300,5]]},"232":{"position":[[153,5]]},"236":{"position":[[449,5]]},"244":{"position":[[2003,5]]},"256":{"position":[[152,5]]},"262":{"position":[[149,5]]},"264":{"position":[[146,5]]},"272":{"position":[[435,5]]},"282":{"position":[[1295,5]]},"300":{"position":[[1294,5]]},"318":{"position":[[443,5]]},"320":{"position":[[147,5]]},"330":{"position":[[2272,5]]},"352":{"position":[[146,5]]},"356":{"position":[[143,5]]},"370":{"position":[[415,5]]},"374":{"position":[[429,5]]},"472":{"position":[[141,5]]},"512":{"position":[[1301,5]]},"568":{"position":[[503,5],[1010,5],[1107,5],[2034,5],[2123,5],[2235,5],[2463,5],[3459,5]]}}}],["1.8.1",{"_index":459,"t":{"80":{"position":[[99,5]]},"110":{"position":[[995,5]]},"192":{"position":[[1039,5]]},"208":{"position":[[1048,5]]},"244":{"position":[[1751,5]]},"274":{"position":[[581,5]]},"282":{"position":[[1043,5]]},"300":{"position":[[1042,5]]},"330":{"position":[[2020,5]]},"386":{"position":[[575,5]]},"476":{"position":[[143,5]]}}}],["1.8.2",{"_index":481,"t":{"84":{"position":[[100,5]]},"110":{"position":[[696,5]]},"192":{"position":[[740,5]]},"208":{"position":[[749,5]]},"218":{"position":[[149,5]]},"236":{"position":[[152,5]]},"244":{"position":[[1452,5]]},"282":{"position":[[744,5]]},"294":{"position":[[143,5]]},"300":{"position":[[743,5]]},"316":{"position":[[142,5]]},"318":{"position":[[146,5]]},"330":{"position":[[1721,5]]},"368":{"position":[[142,5]]},"474":{"position":[[144,5]]}}}],["1.8.3",{"_index":492,"t":{"86":{"position":[[100,5]]},"110":{"position":[[438,5]]},"192":{"position":[[482,5]]},"208":{"position":[[491,5]]},"244":{"position":[[1194,5]]},"260":{"position":[[152,5]]},"282":{"position":[[486,5]]},"300":{"position":[[485,5]]},"330":{"position":[[1463,5]]},"362":{"position":[[145,5]]},"478":{"position":[[144,5]]}}}],["1.9.0",{"_index":501,"t":{"88":{"position":[[100,5]]},"110":{"position":[[100,5]]},"192":{"position":[[144,5]]},"208":{"position":[[153,5]]},"248":{"position":[[429,5]]},"252":{"position":[[407,5]]},"254":{"position":[[1338,5]]},"266":{"position":[[148,5]]},"276":{"position":[[149,5]]},"282":{"position":[[148,5]]},"300":{"position":[[147,5]]},"336":{"position":[[423,5]]},"346":{"position":[[833,5]]},"360":{"position":[[1608,5]]},"372":{"position":[[142,5]]},"382":{"position":[[143,5]]},"480":{"position":[[144,5]]},"524":{"position":[[1184,5]]},"526":{"position":[[505,5]]}}}],["1.9.1",{"_index":84,"t":{"2":{"position":[[2386,5]]},"90":{"position":[[302,5]]},"98":{"position":[[99,5]]},"128":{"position":[[2430,5]]},"204":{"position":[[2439,5]]},"254":{"position":[[1117,5]]},"278":{"position":[[2434,5]]},"280":{"position":[[2433,5]]},"360":{"position":[[1387,5]]},"482":{"position":[[143,5]]}}}],["1.9.2",{"_index":86,"t":{"2":{"position":[[2606,5]]},"90":{"position":[[99,5]]},"128":{"position":[[2650,5]]},"204":{"position":[[2659,5]]},"216":{"position":[[153,5]]},"278":{"position":[[2654,5]]},"280":{"position":[[2653,5]]},"284":{"position":[[148,5]]},"290":{"position":[[154,5]]},"292":{"position":[[147,5]]},"376":{"position":[[142,5]]},"380":{"position":[[149,5]]},"486":{"position":[[143,5]]},"568":{"position":[[1346,5],[1723,5]]}}}],["1.9.3",{"_index":81,"t":{"2":{"position":[[2167,5]]},"92":{"position":[[99,5]]},"128":{"position":[[2211,5]]},"204":{"position":[[2220,5]]},"244":{"position":[[974,5]]},"278":{"position":[[2215,5]]},"280":{"position":[[2214,5]]},"330":{"position":[[1243,5]]},"484":{"position":[[143,5]]}}}],["1.9.4",{"_index":76,"t":{"2":{"position":[[1915,5]]},"104":{"position":[[99,5]]},"128":{"position":[[1959,5]]},"204":{"position":[[1968,5]]},"252":{"position":[[154,5]]},"254":{"position":[[865,5]]},"278":{"position":[[1963,5]]},"280":{"position":[[1962,5]]},"346":{"position":[[580,5]]},"360":{"position":[[1135,5]]},"488":{"position":[[143,5]]},"516":{"position":[[1073,5]]}}}],["1.9.5",{"_index":71,"t":{"2":{"position":[[1630,5]]},"94":{"position":[[100,5]]},"128":{"position":[[1674,5]]},"204":{"position":[[1683,5]]},"244":{"position":[[689,5]]},"254":{"position":[[580,5]]},"272":{"position":[[152,5]]},"278":{"position":[[1678,5]]},"280":{"position":[[1677,5]]},"330":{"position":[[958,5]]},"360":{"position":[[850,5]]},"374":{"position":[[146,5]]},"490":{"position":[[144,5]]},"516":{"position":[[1224,5]]},"568":{"position":[[438,5],[1867,5],[3165,5],[3348,5]]}}}],["10",{"_index":370,"t":{"64":{"position":[[33,3]]},"72":{"position":[[30,3]]},"110":{"position":[[2375,3]]},"112":{"position":[[624,3]]},"122":{"position":[[77,3]]},"132":{"position":[[73,3]]},"140":{"position":[[1864,3],[2033,3]]},"150":{"position":[[81,3]]},"192":{"position":[[2419,3]]},"194":{"position":[[668,3]]},"198":{"position":[[83,3]]},"202":{"position":[[79,3]]},"208":{"position":[[2428,3]]},"212":{"position":[[677,3]]},"218":{"position":[[379,3]]},"226":{"position":[[82,3]]},"246":{"position":[[81,3]]},"282":{"position":[[2423,3]]},"286":{"position":[[672,3]]},"288":{"position":[[671,3]]},"294":{"position":[[373,3]]},"300":{"position":[[2422,3]]},"304":{"position":[[76,3]]},"332":{"position":[[489,3]]},"456":{"position":[[77,3]]},"462":{"position":[[74,3]]},"538":{"position":[[9026,4],[9475,4]]},"540":{"position":[[7503,4],[7796,4],[10108,4],[10416,4],[10813,4]]},"542":{"position":[[8068,2],[11516,4],[11910,4],[12353,4],[14482,4]]},"546":{"position":[[3748,2],[7895,4],[8246,4],[8646,4],[10731,4]]},"560":{"position":[[5690,4],[6028,4],[6353,4],[6655,4],[6974,4],[9711,4],[10110,4]]},"566":{"position":[[4130,5],[6077,5],[8359,5],[10692,5],[13145,5],[15555,5],[17969,5],[20475,5],[23751,5]]},"568":{"position":[[1886,2],[1975,3],[11634,3],[13333,3],[18524,3],[48126,3],[52254,3],[53771,3],[62575,3],[65796,3],[69173,3],[81674,3],[84440,3],[106519,3]]}}}],["10%thi",{"_index":1895,"t":{"516":{"position":[[8631,12],[10388,12]]}}}],["101",{"_index":3625,"t":{"568":{"position":[[8408,4],[10753,4],[13129,4],[15901,4],[18320,4],[21072,4],[23474,4],[27218,4],[32551,4],[34916,4],[37281,4],[39588,4],[41846,4],[45247,4],[47922,4],[53567,4],[56284,4],[62371,4],[65592,4],[68969,4],[72107,4],[75082,4],[78379,4],[81470,4],[84236,4],[89341,4],[97571,4],[99762,4],[102200,4],[106315,4],[110196,4]]}}}],["102",{"_index":3623,"t":{"568":{"position":[[8288,4],[10633,4],[13009,4],[15781,4],[18200,4],[20952,4],[23354,4],[26988,4],[32431,4],[34796,4],[37161,4],[39485,4],[41743,4],[45017,4],[47802,4],[53447,4],[56164,4],[62251,4],[65472,4],[68849,4],[71987,4],[74962,4],[78259,4],[81350,4],[84116,4],[89221,4],[97451,4],[99642,4],[102080,4],[106195,4],[110076,4]]}}}],["103",{"_index":3609,"t":{"568":{"position":[[7771,4],[10116,4],[12492,4],[15264,4],[17683,4],[20435,4],[22837,4],[26017,4],[31914,4],[34279,4],[36644,4],[39030,4],[41288,4],[44046,4],[47285,4],[52930,4],[55569,4],[58022,4],[61734,4],[64955,4],[68332,4],[71470,4],[74445,4],[77742,4],[80833,4],[83599,4],[88704,4],[96934,4],[99125,4],[101563,4],[105678,4]]}}}],["104",{"_index":3617,"t":{"568":{"position":[[8026,4],[10371,4],[12747,4],[15519,4],[17938,4],[20690,4],[23092,4],[26496,4],[32169,4],[34534,4],[36899,4],[39252,4],[41510,4],[44525,4],[47540,4],[53185,4],[55824,4],[58277,4],[61989,4],[65210,4],[68587,4],[71725,4],[74700,4],[77997,4],[81088,4],[83854,4],[88959,4],[97189,4],[99380,4],[101818,4],[105933,4],[109814,4]]}}}],["105",{"_index":3620,"t":{"568":{"position":[[8155,4],[10500,4],[12876,4],[15648,4],[18067,4],[20819,4],[23221,4],[26736,4],[32298,4],[34663,4],[37028,4],[39365,4],[41623,4],[44765,4],[47669,4],[53314,4],[55953,4],[58406,4],[62118,4],[65339,4],[68716,4],[71854,4],[74829,4],[75903,4],[75983,4],[78126,4],[78840,5],[78883,3],[78962,4],[79004,3],[81217,4],[83983,4],[89088,4],[97318,4],[99509,4],[101947,4],[106062,4],[109943,4]]}}}],["106",{"_index":3614,"t":{"568":{"position":[[7902,4],[10247,4],[12623,4],[15395,4],[17814,4],[20566,4],[22968,4],[26259,4],[32045,4],[34410,4],[36775,4],[39145,4],[41403,4],[44288,4],[47416,4],[53061,4],[55700,4],[58153,4],[61865,4],[65086,4],[68463,4],[71601,4],[74576,4],[77873,4],[80964,4],[83730,4],[88835,4],[97065,4],[99256,4],[101694,4],[105809,4],[109690,4]]}}}],["107",{"_index":3603,"t":{"568":{"position":[[7647,4],[9992,4],[12368,4],[15140,4],[17559,4],[20311,4],[22713,4],[25779,4],[31790,4],[34155,4],[36520,4],[38925,4],[41183,4],[43808,4],[47161,4],[52806,4],[55445,4],[57898,4],[61610,4],[64831,4],[68208,4],[71346,4],[74321,4],[77618,4],[80709,4],[83475,4],[105554,4],[109434,4]]}}}],["1073255",{"_index":2573,"t":{"534":{"position":[[12170,8],[15159,8]]},"562":{"position":[[9342,8]]}}}],["108",{"_index":3627,"t":{"568":{"position":[[8530,4],[10875,4],[13506,4],[16023,4],[18697,4],[21194,4],[23596,4],[27457,4],[32673,4],[35038,4],[37403,4],[39693,4],[41951,4],[45486,4],[48299,4],[53944,4],[56406,4],[62748,4],[65969,4],[69346,4],[72229,4],[75204,4],[78501,4],[81847,4],[84613,4],[106692,4],[110318,4]]}}}],["1081241",{"_index":2570,"t":{"534":{"position":[[12143,8],[15132,8]]},"562":{"position":[[9315,8]]}}}],["109",{"_index":3630,"t":{"568":{"position":[[8653,4],[10998,4],[13629,4],[16146,4],[18820,4],[21317,4],[23719,4],[27697,4],[32796,4],[35161,4],[37526,4],[39800,4],[42058,4],[45726,4],[48422,4],[54067,4],[56529,4],[62871,4],[66092,4],[69469,4],[72352,4],[75327,4],[78624,4],[81970,4],[84736,4],[106815,4],[110441,4]]}}}],["10:00",{"_index":3241,"t":{"560":{"position":[[3456,5],[8898,5]]}}}],["10:50",{"_index":3247,"t":{"560":{"position":[[4140,5],[4869,5]]}}}],["10a",{"_index":856,"t":{"492":{"position":[[2425,11],[2570,11],[2715,11]]}}}],["2\">an",{"_index":854,"t":{"492":{"position":[[2293,12]]}}}],["2\">page",{"_index":3470,"t":{"566":{"position":[[6911,7],[9244,7],[11697,7],[14107,7],[16521,7]]}}}],["2\">submit@displayswitchstatuschang",{"_index":2893,"t":{"540":{"position":[[9196,10]]},"560":{"position":[[8811,10]]}}}],["3\">enter",{"_index":2811,"t":{"540":{"position":[[1559,10],[2168,10],[2372,10],[2574,10],[2778,10],[3761,10],[4089,10],[4415,10],[4743,10],[5628,10],[6405,10]]},"542":{"position":[[1976,10],[2307,10],[2533,10],[2759,10],[2985,10],[3211,10],[3437,10],[3663,10],[3889,10],[4115,10],[4710,10],[5223,10],[5764,10],[8109,10],[8598,10],[8854,10],[9400,10]]},"546":{"position":[[1502,10],[3789,10],[4270,10],[4572,10],[5056,10],[5284,10],[5802,10]]},"560":{"position":[[1538,10],[1937,10],[2116,10],[2968,10],[3271,10],[3832,10],[4582,10]]}}}],["3\">max",{"_index":2838,"t":{"540":{"position":[[3721,6],[4049,6],[4375,6],[4703,6]]},"560":{"position":[[2928,6],[3231,6]]}}}],["3\">min",{"_index":2836,"t":{"540":{"position":[[3681,6],[4009,6],[4335,6],[4663,6]]},"560":{"position":[[2888,6],[3191,6]]}}}],["3\">switch",{"_index":3080,"t":{"544":{"position":[[869,9]]}}}],["3\">thi",{"_index":2264,"t":{"528":{"position":[[5901,7],[6028,7],[6158,7],[6305,7],[6444,7],[6569,7],[8180,7],[8307,7],[8437,7],[8565,7]]}}}],["3.5",{"_index":922,"t":{"494":{"position":[[1855,3]]}}}],["30",{"_index":190,"t":{"20":{"position":[[29,3]]},"46":{"position":[[32,3]]},"62":{"position":[[32,3]]},"88":{"position":[[29,3]]},"110":{"position":[[29,3]]},"112":{"position":[[1122,3]]},"114":{"position":[[1092,3]]},"118":{"position":[[606,3]]},"126":{"position":[[1215,3]]},"130":{"position":[[89,3]]},"140":{"position":[[539,3],[956,3],[1542,3],[2119,3]]},"170":{"position":[[85,3]]},"176":{"position":[[89,3]]},"182":{"position":[[94,3]]},"186":{"position":[[86,3]]},"190":{"position":[[330,3]]},"192":{"position":[[73,3]]},"194":{"position":[[1166,3]]},"206":{"position":[[103,3]]},"208":{"position":[[82,3]]},"212":{"position":[[1175,3]]},"214":{"position":[[1145,3]]},"220":{"position":[[659,3]]},"248":{"position":[[358,3]]},"252":{"position":[[336,3]]},"254":{"position":[[1267,3]]},"266":{"position":[[77,3]]},"276":{"position":[[78,3]]},"282":{"position":[[77,3]]},"286":{"position":[[1170,3]]},"288":{"position":[[1169,3]]},"300":{"position":[[76,3]]},"336":{"position":[[352,3]]},"346":{"position":[[762,3]]},"350":{"position":[[272,3]]},"360":{"position":[[1537,3]]},"362":{"position":[[335,3]]},"364":{"position":[[82,3]]},"372":{"position":[[71,3]]},"382":{"position":[[72,3],[661,3]]},"402":{"position":[[73,3]]},"424":{"position":[[76,3]]},"452":{"position":[[76,3]]},"480":{"position":[[73,3]]}}}],["300m",{"_index":372,"t":{"64":{"position":[[199,5]]}}}],["31",{"_index":221,"t":{"32":{"position":[[30,3]]},"80":{"position":[[28,3]]},"110":{"position":[[924,3]]},"114":{"position":[[2616,3]]},"140":{"position":[[797,3],[1661,3]]},"192":{"position":[[968,3]]},"208":{"position":[[977,3]]},"214":{"position":[[2669,3]]},"244":{"position":[[1680,3]]},"274":{"position":[[510,3]]},"282":{"position":[[972,3]]},"300":{"position":[[971,3]]},"330":{"position":[[1949,3]]},"332":{"position":[[1184,3]]},"386":{"position":[[504,3]]},"412":{"position":[[74,3]]},"476":{"position":[[72,3]]}}}],["317",{"_index":574,"t":{"102":{"position":[[597,4]]}}}],["320",{"_index":3528,"t":{"568":{"position":[[1742,3],[107172,3]]}}}],["320px",{"_index":3397,"t":{"564":{"position":[[18567,8]]}}}],["321",{"_index":1515,"t":{"510":{"position":[[2798,5]]},"512":{"position":[[3949,5]]},"516":{"position":[[4493,5]]}}}],["322",{"_index":1614,"t":{"512":{"position":[[5699,5]]},"516":{"position":[[6182,5]]}}}],["327",{"_index":570,"t":{"102":{"position":[[457,4]]}}}],["33",{"_index":764,"t":{"128":{"position":[[0,2]]},"192":{"position":[[0,2]]},"194":{"position":[[0,2]]},"196":{"position":[[0,2]]}}}],["334",{"_index":568,"t":{"102":{"position":[[368,4]]}}}],["346",{"_index":584,"t":{"106":{"position":[[341,4]]}}}],["352",{"_index":567,"t":{"102":{"position":[[303,4]]}}}],["373",{"_index":582,"t":{"106":{"position":[[282,4]]}}}],["384",{"_index":593,"t":{"108":{"position":[[403,4]]}}}],["4",{"_index":80,"t":{"2":{"position":[[2097,2]]},"28":{"position":[[33,2]]},"92":{"position":[[29,2]]},"114":{"position":[[2413,2]]},"126":{"position":[[2427,2]]},"128":{"position":[[2141,2]]},"140":{"position":[[757,2],[1425,2]]},"200":{"position":[[0,1]]},"204":{"position":[[2150,2]]},"214":{"position":[[2466,2]]},"236":{"position":[[0,1]]},"244":{"position":[[904,2]]},"278":{"position":[[2145,2]]},"280":{"position":[[2144,2]]},"318":{"position":[[0,1]]},"328":{"position":[[1262,2]]},"330":{"position":[[1173,2]]},"382":{"position":[[0,1]]},"414":{"position":[[77,2]]},"484":{"position":[[73,2]]},"494":{"position":[[1859,1],[1875,1],[1877,1]]},"502":{"position":[[3871,2],[7269,2],[7601,2],[7930,2],[8296,2],[8586,2],[8876,2],[9163,2],[9450,2],[9735,2],[10018,2],[10301,2],[10830,2],[11206,2],[11533,2],[12103,2],[12500,2],[12848,2]]},"504":{"position":[[5659,1]]},"512":{"position":[[4133,1],[4261,1],[4396,1],[6089,1],[6217,1],[6352,1]]},"532":{"position":[[3996,2],[8447,2],[9845,2],[12073,2],[14171,2]]},"534":{"position":[[6033,2],[9752,1],[9903,1],[10535,2],[11341,1],[11486,1],[11883,1],[12028,1],[12425,1],[12570,1],[13396,2],[14200,1],[14345,1],[14807,1],[14952,1],[15414,1],[15559,1]]},"552":{"position":[[787,1],[923,3]]},"554":{"position":[[782,1],[918,3]]},"562":{"position":[[7707,2],[8513,1],[8658,1],[9055,1],[9200,1],[9597,1],[9742,1]]},"564":{"position":[[4173,3],[6365,3],[8945,3],[9834,3],[18539,1],[19227,1]]},"566":{"position":[[3497,4],[5383,4],[6756,1],[6892,3],[7665,4],[9016,1],[9225,3],[9998,4],[11469,1],[11678,3],[12451,4],[13879,1],[14088,3],[14861,4],[16293,1],[16502,3],[17275,4],[18721,1],[18857,3],[19781,4],[23076,4]]},"568":{"position":[[7978,2],[10323,2],[12699,2],[15471,2],[17890,2],[20642,2],[23044,2],[26432,2],[32121,2],[34486,2],[36851,2],[44461,2],[47492,2],[53137,2],[55776,2],[58229,2],[61941,2],[65162,2],[68539,2],[71677,2],[74652,2],[77949,2],[81040,2],[83806,2],[88911,2],[97141,2],[99332,2],[101770,2],[105885,2],[109766,2]]}}}],["4.33",{"_index":3005,"t":{"542":{"position":[[4776,5],[5289,5]]}}}],["40",{"_index":3238,"t":{"560":{"position":[[2195,4]]}}}],["401",{"_index":592,"t":{"108":{"position":[[362,4]]}}}],["414",{"_index":590,"t":{"108":{"position":[[291,4]]}}}],["416",{"_index":598,"t":{"108":{"position":[[495,4]]}}}],["4@employee.firstname@employee.lastname@employeeid@employee.firstname@employee.lastname@employeeidanoth",{"_index":3372,"t":{"564":{"position":[[14823,21]]}}}],["activepagenumb",{"_index":1800,"t":{"514":{"position":[[216,16]]}}}],["activepagenumber=\"1",{"_index":1828,"t":{"514":{"position":[[1771,20],[2046,20]]}}}],["activepagenumber=\"2",{"_index":1840,"t":{"514":{"position":[[2581,20],[2632,20],[2712,20]]}}}],["activepagenumber=\"3",{"_index":1835,"t":{"514":{"position":[[2098,20]]}}}],["activepagenumber=\"5",{"_index":1836,"t":{"514":{"position":[[2150,20],[2346,20],[2425,20],[2476,20]]}}}],["activepagenumber=\"@currentpagenumb",{"_index":1843,"t":{"514":{"position":[[2821,37]]}}}],["actual",{"_index":1579,"t":{"512":{"position":[[1442,8],[1601,8]]}}}],["ad",{"_index":114,"t":{"6":{"position":[[96,5]]},"10":{"position":[[176,5]]},"68":{"position":[[680,5],[728,5]]},"88":{"position":[[362,5]]},"96":{"position":[[972,5],[1018,5]]},"102":{"position":[[413,5],[694,5]]},"116":{"position":[[96,5]]},"210":{"position":[[149,5]]},"388":{"position":[[140,5]]},"494":{"position":[[1007,5]]},"498":{"position":[[165,5]]},"502":{"position":[[418,5],[738,5],[902,5],[1065,5],[1229,5],[1458,5],[2021,5],[2253,5],[2416,5]]},"504":{"position":[[219,5],[3962,6]]},"506":{"position":[[199,5],[517,5],[714,5]]},"508":{"position":[[195,5],[552,5],[863,5],[1371,5]]},"510":{"position":[[197,5],[729,5]]},"512":{"position":[[226,5],[1335,5]]},"516":{"position":[[225,5],[1563,5]]},"522":{"position":[[455,5],[668,5]]},"524":{"position":[[641,5],[1100,5]]},"526":{"position":[[431,5]]},"528":{"position":[[3753,6]]},"530":{"position":[[181,5]]},"532":{"position":[[288,5],[426,5],[711,5],[974,5],[2665,5],[2904,5]]},"534":{"position":[[433,5],[570,5],[855,5],[1120,5],[4629,5],[4868,5]]},"536":{"position":[[229,5],[366,5],[651,5],[914,5],[2011,5],[2258,5]]},"538":{"position":[[282,5],[1618,5],[1863,5],[2215,5]]},"540":{"position":[[357,5],[1089,5]]},"544":{"position":[[206,5],[493,5],[606,5]]},"560":{"position":[[361,5],[1093,5]]},"562":{"position":[[384,5],[521,5],[806,5],[1079,5],[2278,5],[2535,5]]},"564":{"position":[[295,5],[1000,5],[1378,5],[1748,5],[2003,5],[2180,5],[2901,5],[3268,5]]},"566":{"position":[[263,5],[729,5],[888,5]]},"568":{"position":[[241,5],[2888,5],[3508,5],[3821,5],[6479,5],[46202,6],[49003,6],[58602,6]]}}}],["add",{"_index":581,"t":{"106":{"position":[[250,3],[373,3]]},"108":{"position":[[261,3]]},"494":{"position":[[180,4]]},"496":{"position":[[2913,3],[3401,3],[3890,3],[4376,3],[4861,3]]},"498":{"position":[[2018,3]]},"500":{"position":[[452,3]]},"502":{"position":[[5897,3]]},"504":{"position":[[3474,3],[6578,3]]},"508":{"position":[[1997,4],[2548,4],[3098,4],[3861,4],[4486,4],[5109,4],[5851,4],[6402,4],[6952,4],[7655,4],[8222,4],[8772,4],[9487,4],[10038,4],[10588,4],[11475,4],[12038,4],[12600,4],[13158,4],[13706,4],[14266,4],[16420,4],[16993,4],[17565,4]]},"510":{"position":[[852,4],[6918,3]]},"514":{"position":[[2249,3]]},"516":{"position":[[83,3],[9558,3]]},"520":{"position":[[1885,3],[6105,3],[7102,3]]},"522":{"position":[[174,3],[958,3]]},"524":{"position":[[4616,3],[9797,3],[11386,3]]},"528":{"position":[[1851,3]]},"530":{"position":[[91,3]]},"532":{"position":[[463,4],[520,4],[4275,3]]},"534":{"position":[[607,4],[664,4],[6312,3],[6458,3]]},"536":{"position":[[403,4],[460,4],[3361,3]]},"542":{"position":[[4873,4],[10891,3]]},"546":{"position":[[7272,3]]},"548":{"position":[[249,3],[363,3],[383,3],[965,3],[1209,3],[1232,3],[1575,3],[1909,3],[2428,3],[2506,3],[2595,3],[3439,3],[3458,3]]},"550":{"position":[[239,3],[353,3],[373,3],[950,3],[1288,3],[1375,3],[1398,3],[1736,3],[2070,3],[2589,3],[2667,3],[2756,3],[3613,3],[3632,3]]},"556":{"position":[[239,3],[353,3],[373,3],[852,3],[875,3],[1214,3],[1548,3],[2067,3],[2145,3],[2238,3],[3110,3],[3129,3]]},"558":{"position":[[4958,3]]},"562":{"position":[[558,4],[615,4],[3653,3]]},"564":{"position":[[10756,3],[11825,3],[12426,3],[13482,3],[14521,3],[16605,3],[17195,3]]},"568":{"position":[[6724,3],[11507,3],[14148,3],[21727,3],[24051,3],[30474,3],[30623,3],[33130,3],[42386,3],[42441,3],[49808,3],[50125,3],[56964,3],[57073,3],[59336,3],[59362,4],[59461,3],[59544,4]]}}}],["addasync",{"_index":551,"t":{"96":{"position":[[673,8],[739,8],[801,8],[862,8]]}}}],["adddataasync",{"_index":2324,"t":{"532":{"position":[[440,12],[6540,14]]},"534":{"position":[[584,12],[6441,16],[8407,14]]},"536":{"position":[[380,12],[5243,14],[8922,14]]},"562":{"position":[[535,12],[5645,14],[12650,14]]}}}],["adddataasync()\">add",{"_index":2382,"t":{"532":{"position":[[4404,19]]},"536":{"position":[[3490,19],[7284,19]]},"562":{"position":[[3782,19],[10870,19]]}}}],["adddatasetasync",{"_index":550,"t":{"96":{"position":[[653,15],[719,15],[781,15],[842,15]]},"532":{"position":[[494,15],[4255,19],[6272,17]]},"534":{"position":[[638,15],[6292,19],[8169,17]]},"536":{"position":[[434,15],[3341,19],[5008,17]]},"562":{"position":[[589,15],[3633,19],[5395,17]]}}}],["addemploye",{"_index":3789,"t":{"568":{"position":[[58541,13]]}}}],["addemployee2",{"_index":3793,"t":{"568":{"position":[[58732,14]]}}}],["addit",{"_index":821,"t":{"492":{"position":[[1575,10],[1619,10],[2105,10],[4027,10]]},"496":{"position":[[3210,10],[3698,10],[4187,10],[4673,10],[5158,10]]},"498":{"position":[[2315,10]]},"502":{"position":[[6132,10],[6648,10],[6943,10],[7413,10],[7745,10],[8074,10],[11038,10],[11402,10],[11741,10],[12311,10],[12696,10],[13056,10]]},"504":{"position":[[3521,10]]},"510":{"position":[[765,10],[935,10]]},"512":{"position":[[260,10],[463,10],[572,10],[1849,9]]},"514":{"position":[[2316,10]]},"516":{"position":[[259,10],[548,10],[890,10],[1929,9]]},"564":{"position":[[18367,10]]},"566":{"position":[[170,10],[937,10]]}}}],["address",{"_index":2775,"t":{"538":{"position":[[10162,7],[10886,7]]}}}],["adil",{"_index":2689,"t":{"538":{"position":[[3576,7],[5447,7],[8072,7]]}}}],["adipisc",{"_index":1635,"t":{"512":{"position":[[7615,10],[8868,10],[10256,10],[11856,10],[13109,10],[14497,10],[15997,10],[17250,10],[18638,10]]}}}],["aenean",{"_index":1714,"t":{"512":{"position":[[8496,6],[9433,6],[12737,6],[13674,6],[16878,6],[17815,6]]}}}],["agnost",{"_index":2733,"t":{"538":{"position":[[4356,8]]},"568":{"position":[[11378,8]]}}}],["ago10.2.5.@agree1@agree2aboutcontactde",{"_index":2972,"t":{"542":{"position":[[3072,5]]}}}],["b>e",{"_index":2967,"t":{"542":{"position":[[2846,5]]}}}],["b>en",{"_index":2955,"t":{"542":{"position":[[2168,5],[2394,5],[3524,5],[3750,5]]}}}],["b>faqsfr",{"_index":2961,"t":{"542":{"position":[[2620,5],[3298,5]]}}}],["b>homeproductsprofilethi",{"_index":1405,"t":{"508":{"position":[[1899,7],[2448,7],[2999,7],[3763,7],[4386,7],[5010,7],[5753,7],[6302,7],[6853,7],[7557,7],[8122,7],[8673,7],[9389,7],[9938,7],[10489,7],[11377,7],[11938,7],[12501,7],[13058,7],[13607,7],[14167,7],[16322,7],[16893,7],[17466,7]]},"528":{"position":[[1173,7],[1394,7],[1618,7],[2060,7],[2281,7],[2505,7],[2951,7],[3233,7],[3517,7],[3880,7],[4101,7],[4342,7],[4567,7],[4960,7],[5181,7],[5405,7]]}}}],["b>zh",{"_index":2989,"t":{"542":{"position":[[3976,5]]}}}],["back",{"_index":420,"t":{"72":{"position":[[318,4],[503,4]]},"510":{"position":[[1907,7]]}}}],["backdrop",{"_index":472,"t":{"82":{"position":[[369,8]]},"512":{"position":[[2643,8],[7372,9],[21518,8]]},"516":{"position":[[1515,9],[2521,8],[3015,10],[7423,9],[8153,8],[15191,8]]}}}],["backend/api",{"_index":3577,"t":{"568":{"position":[[5820,11]]}}}],["background",{"_index":311,"t":{"46":{"position":[[268,11]]},"72":{"position":[[207,10]]},"96":{"position":[[556,10]]},"498":{"position":[[1129,10],[7353,10]]},"502":{"position":[[301,10],[8232,10],[13683,10]]},"504":{"position":[[3385,10]]},"520":{"position":[[171,12],[3534,12],[4350,10],[8329,11],[8345,10]]},"534":{"position":[[3029,10]]},"566":{"position":[[21025,10],[21088,10],[21417,10],[21555,10],[21970,10],[22083,10]]}}}],["backgroundcolor",{"_index":2333,"t":{"532":{"position":[[988,15],[1038,16],[7718,15],[8843,15],[10309,15],[10580,15],[10852,15],[12537,15],[12808,15],[13080,15],[14635,15],[14906,15],[15178,15]]},"534":{"position":[[1134,15],[1184,16],[9568,15],[11169,15],[11711,15],[12253,15],[14028,15],[14635,15],[15242,15]]},"536":{"position":[[928,15],[978,16],[3680,17],[3835,16],[6114,15],[7474,17],[7629,16],[9985,15]]},"562":{"position":[[1093,15],[1143,16],[3992,17],[4147,16],[6560,15],[8341,15],[8883,15],[9425,15],[11080,17],[11235,16],[13759,15]]}}}],["backgroundcolors![datalabelscount",{"_index":2618,"t":{"536":{"position":[[5569,37],[6879,35],[9248,37],[10750,35]]},"562":{"position":[[5993,37],[7325,35],[12998,37],[14524,35]]}}}],["badg",{"_index":414,"t":{"72":{"position":[[116,6],[191,5],[230,6],[808,5],[1066,5]]},"110":{"position":[[2461,6],[2581,5]]},"122":{"position":[[163,6],[283,5]]},"132":{"position":[[21,7],[159,6],[279,5]]},"192":{"position":[[2505,6],[2625,5]]},"198":{"position":[[169,6],[289,5]]},"202":{"position":[[165,6],[285,5]]},"208":{"position":[[2514,6],[2634,5]]},"218":{"position":[[465,6],[585,5]]},"226":{"position":[[168,6],[288,5]]},"282":{"position":[[2509,6],[2629,5]]},"294":{"position":[[459,6],[579,5]]},"300":{"position":[[2508,6],[2628,5]]},"304":{"position":[[162,6],[282,5]]},"462":{"position":[[160,6],[280,5]]},"492":{"position":[[3970,5]]},"494":{"position":[[2350,5]]},"498":{"position":[[11,5],[37,5],[64,5],[255,6],[326,5],[419,5],[504,5],[562,5],[678,6],[796,6],[1148,6],[1252,6],[1362,6],[1466,6],[1567,6],[1671,6],[1766,6],[1864,6],[2396,7],[2444,6],[2493,6],[2590,6],[2691,6],[2788,6],[2883,6],[2980,6],[3071,6],[3164,6],[3278,6],[3441,6],[3570,7],[3699,6],[4165,6],[4465,6],[4767,6],[5094,6],[5397,6],[5702,6],[6032,6],[6335,6],[6640,6],[6912,5],[7059,6],[7376,6]]},"566":{"position":[[311,5],[11126,6],[11135,5],[11267,6],[21356,5],[21411,5],[24329,5]]}}}],["badge1",{"_index":603,"t":{"120":{"position":[[41,6]]}}}],["badge>newnewnewnewnewnew...headersom",{"_index":1119,"t":{"502":{"position":[[2851,14],[3613,14],[4084,14],[4448,14],[5440,14],[8406,14],[8698,14],[8986,14],[9272,14],[9560,14],[9842,14],[10126,14],[10408,14]]}}}],["cardtext>thi",{"_index":1201,"t":{"502":{"position":[[10956,14],[11332,14],[11659,14],[12229,14],[12626,14],[12974,14]]}}}],["cardtext>with",{"_index":1159,"t":{"502":{"position":[[6071,14],[6587,14],[6882,14],[7352,14],[7684,14],[8013,14]]}}}],["cardtitl",{"_index":1111,"t":{"502":{"position":[[2355,9],[13533,9]]}}}],["cardtitle>card",{"_index":1117,"t":{"502":{"position":[[2817,15],[3512,15],[3983,15],[4347,15],[5406,15],[10922,15],[11298,15],[11625,15],[12195,15],[12592,15],[12940,15]]}}}],["cardtitle>dang",{"_index":1184,"t":{"502":{"position":[[9231,17]]}}}],["cardtitle>dark",{"_index":1192,"t":{"502":{"position":[[10369,15]]}}}],["cardtitle>info",{"_index":1188,"t":{"502":{"position":[[9803,15]]}}}],["cardtitle>light",{"_index":1190,"t":{"502":{"position":[[10086,16]]}}}],["cardtitle>primari",{"_index":1178,"t":{"502":{"position":[[8364,18]]}}}],["cardtitle>secondari",{"_index":1180,"t":{"502":{"position":[[8654,20]]}}}],["cardtitle>speci",{"_index":1157,"t":{"502":{"position":[[6024,18],[6540,18],[6835,18],[7305,18],[7637,18],[7966,18]]}}}],["cardtitle>success",{"_index":1182,"t":{"502":{"position":[[8944,18]]}}}],["cardtitle>warn",{"_index":1186,"t":{"502":{"position":[[9518,18]]}}}],["card—in",{"_index":1171,"t":{"502":{"position":[[7180,7]]}}}],["cart",{"_index":1563,"t":{"512":{"position":[[116,6]]}}}],["case",{"_index":2295,"t":{"528":{"position":[[8889,4],[8944,4],[9002,4],[9060,4]]},"538":{"position":[[1002,5],[4261,4],[4369,4]]},"568":{"position":[[9104,4],[11391,4]]}}}],["catch",{"_index":2062,"t":{"522":{"position":[[1442,5]]}}}],["catch(except",{"_index":2173,"t":{"524":{"position":[[12004,15]]},"558":{"position":[[5606,15]]}}}],["categor",{"_index":2371,"t":{"532":{"position":[[3559,11]]},"534":{"position":[[5524,11]]},"536":{"position":[[2645,11]]},"562":{"position":[[2927,11]]}}}],["categori",{"_index":2337,"t":{"532":{"position":[[1153,8],[1193,8],[1499,8],[3896,10]]},"534":{"position":[[5861,10]]},"536":{"position":[[166,11],[2982,10]]},"562":{"position":[[178,11],[323,9],[3264,10]]}}}],["categorypercentag",{"_index":2345,"t":{"532":{"position":[[1427,18]]}}}],["cater",{"_index":1066,"t":{"500":{"position":[[187,5]]}}}],["caus",{"_index":450,"t":{"78":{"position":[[198,7]]},"94":{"position":[[561,7]]}}}],["cdn",{"_index":2179,"t":{"526":{"position":[[265,4]]}}}],["cell",{"_index":236,"t":{"32":{"position":[[440,4],[455,4],[471,4]]},"568":{"position":[[37827,4],[37889,4],[40084,4],[40114,4],[42342,4],[66464,4],[121741,4],[121756,4],[121771,4]]}}}],["center",{"_index":538,"t":{"96":{"position":[[317,9]]},"510":{"position":[[1135,6],[6908,9],[6978,6],[7119,8],[7760,8],[8416,8]]},"516":{"position":[[1139,7],[9548,9],[9604,6],[9727,8],[10017,8],[10234,8],[11096,8],[15234,8],[15254,8]]},"532":{"position":[[2693,6],[2746,6]]},"536":{"position":[[2040,6],[9786,9]]},"542":{"position":[[8361,6]]},"546":{"position":[[4847,6]]},"558":{"position":[[2159,9],[5915,8]]},"562":{"position":[[228,6],[2307,6],[13550,9]]},"564":{"position":[[11770,9],[11783,6],[25913,8]]}}}],["centerbottom",{"_index":2156,"t":{"524":{"position":[[9083,53]]}}}],["changeplacement(toastsplacement.bottomleft)\">bottom",{"_index":2155,"t":{"524":{"position":[[8963,51]]}}}],["changeplacement(toastsplacement.bottomright)\">bottom",{"_index":2157,"t":{"524":{"position":[[9207,52]]}}}],["changeplacement(toastsplacement.middlecenter)\">middl",{"_index":2153,"t":{"524":{"position":[[8717,53]]}}}],["changeplacement(toastsplacement.middleleft)\">middl",{"_index":2152,"t":{"524":{"position":[[8597,51]]}}}],["changeplacement(toastsplacement.middleright)\">middl",{"_index":2154,"t":{"524":{"position":[[8841,52]]}}}],["changeplacement(toastsplacement.topcenter)\">top",{"_index":2148,"t":{"524":{"position":[[8363,47]]}}}],["changeplacement(toastsplacement.topleft)\">top",{"_index":2146,"t":{"524":{"position":[[8249,45]]}}}],["changeplacement(toastsplacement.topright)\">top",{"_index":2150,"t":{"524":{"position":[[8481,46]]}}}],["changesgrid",{"_index":3843,"t":{"568":{"position":[[80007,20]]}}}],["changesize(15)\">grid",{"_index":3845,"t":{"568":{"position":[[80124,20]]}}}],["changesize(5)\">grid",{"_index":3841,"t":{"568":{"position":[[79892,19]]}}}],["changesize(int",{"_index":3847,"t":{"568":{"position":[[82212,14]]}}}],["changetooltip",{"_index":1326,"t":{"504":{"position":[[8971,15]]},"530":{"position":[[1773,15]]}}}],["chart",{"_index":24,"t":{"2":{"position":[[247,6],[705,7],[956,5],[1136,5],[1383,7]]},"38":{"position":[[124,5],[153,5],[182,5],[214,5],[242,5],[269,5],[316,5],[362,5],[404,5],[445,5],[511,6],[529,5],[551,5],[569,5],[586,5]]},"94":{"position":[[518,5],[555,5],[906,5]]},"96":{"position":[[146,7],[633,5],[699,5],[761,5],[822,5],[1308,5]]},"100":{"position":[[147,5],[233,5],[277,5],[317,5],[356,5],[468,5]]},"102":{"position":[[148,7],[567,6],[606,6],[622,6],[634,6],[649,5],[777,5],[1007,5]]},"108":{"position":[[367,6],[384,5],[675,6]]},"114":{"position":[[1762,5],[1816,6],[1834,5],[1856,5],[1874,5],[1891,5]]},"126":{"position":[[197,7],[448,5]]},"128":{"position":[[291,6],[749,7],[1000,5],[1180,5],[1427,7]]},"134":{"position":[[33,6],[178,5],[232,6],[250,5],[272,5],[290,5],[307,5]]},"138":{"position":[[29,7],[175,5],[229,6],[247,5],[269,5],[287,5],[304,5]]},"148":{"position":[[38,6],[183,5],[237,6],[255,5],[277,5],[295,5],[312,5]]},"162":{"position":[[34,6],[179,5],[233,6],[251,5],[273,5],[291,5],[308,5]]},"172":{"position":[[33,6],[178,5],[232,6],[250,5],[272,5],[290,5],[307,5]]},"200":{"position":[[203,7],[454,5]]},"204":{"position":[[300,6],[758,7],[1009,5],[1189,5],[1436,7]]},"214":{"position":[[1815,5],[1869,6],[1887,5],[1909,5],[1927,5],[1944,5]]},"224":{"position":[[197,7],[448,5]]},"230":{"position":[[205,7],[456,5]]},"244":{"position":[[195,5],[442,7]]},"254":{"position":[[196,7],[447,5]]},"258":{"position":[[198,7],[449,5]]},"274":{"position":[[198,7],[449,5]]},"278":{"position":[[295,6],[753,7],[1004,5],[1184,5],[1431,7]]},"280":{"position":[[294,6],[752,7],[1003,5],[1183,5],[1430,7]]},"298":{"position":[[21,7],[191,7],[442,5]]},"302":{"position":[[21,8],[291,6]]},"310":{"position":[[199,7],[450,5]]},"328":{"position":[[288,6],[746,7],[997,5]]},"330":{"position":[[289,6],[464,5],[711,7]]},"346":{"position":[[197,7],[448,5]]},"358":{"position":[[292,6]]},"360":{"position":[[290,6],[466,7],[717,5]]},"366":{"position":[[192,7],[443,5]]},"370":{"position":[[290,6]]},"386":{"position":[[192,7],[443,5]]},"420":{"position":[[168,5],[222,6],[240,5],[262,5],[280,5],[297,5]]},"432":{"position":[[191,7]]},"434":{"position":[[192,5]]},"436":{"position":[[193,7],[444,5]]},"444":{"position":[[292,6]]},"500":{"position":[[11,6],[38,6],[62,6],[87,5],[175,6],[200,8],[305,5],[322,5],[380,5],[397,5],[412,5],[423,5],[433,5],[463,6],[481,6],[494,6],[509,6],[526,5],[572,6],[594,5],[626,5],[666,6],[693,5],[730,5],[766,6],[789,5],[822,5],[857,6],[879,5],[911,5],[993,5],[1009,5],[1024,5],[1035,5],[1045,5]]},"502":{"position":[[13344,6]]},"506":{"position":[[5246,6]]},"530":{"position":[[1901,5]]},"532":{"position":[[23,5],[53,5],[82,5],[326,5],[369,5],[480,6],[540,6],[590,6],[631,6],[2037,6],[2420,5],[2958,6],[2982,6],[3012,7],[3197,5],[3509,7],[8391,6],[9789,6],[11871,5],[11988,5],[16340,5],[16516,5],[16534,5]]},"534":{"position":[[24,5],[55,5],[85,5],[238,6],[471,5],[513,5],[624,6],[684,6],[734,6],[775,6],[1846,6],[2134,6],[4383,5],[4922,6],[4946,6],[4976,7],[5161,5],[5474,7],[6633,5],[6801,5],[16613,5],[16628,5]]},"536":{"position":[[23,5],[53,5],[82,5],[112,5],[267,5],[309,5],[420,6],[480,6],[530,6],[571,6],[1619,6],[1910,5],[2328,5],[2595,7],[10864,5]]},"548":{"position":[[1601,5],[1959,5],[2441,5]]},"550":{"position":[[1762,5],[2120,5],[2602,5]]},"556":{"position":[[1240,5],[1598,5],[2080,5]]},"558":{"position":[[5848,5]]},"562":{"position":[[28,5],[63,5],[94,5],[124,5],[213,6],[248,5],[422,5],[464,5],[575,6],[635,6],[685,6],[726,6],[1789,6],[2172,5],[2605,5],[2877,7],[7434,5],[7551,5],[14637,5],[14653,5]]}}}],["chart.j",{"_index":1063,"t":{"500":{"position":[[114,8]]},"548":{"position":[[1579,8],[2396,8]]},"550":{"position":[[1740,8],[2557,8]]},"556":{"position":[[1218,8],[2035,8]]}}}],["chart1",{"_index":606,"t":{"120":{"position":[[89,6],[206,6],[337,6],[409,6],[1246,6]]}}}],["chart.visu",{"_index":965,"t":{"496":{"position":[[3242,15],[3730,15],[4219,15],[4705,15],[5190,15]]}}}],["code>step2dangerdangerinfoinfoprimaryprimarysav",{"_index":1873,"t":{"516":{"position":[[3523,32],[9187,32],[9865,32],[10944,32],[14252,32]]}}}],["color=\"buttoncolor.primary\">understoodcent",{"_index":3363,"t":{"564":{"position":[[12010,38]]}}}],["color=\"buttoncolor.secondary\">click",{"_index":3415,"t":{"564":{"position":[[22666,39],[23090,39]]}}}],["color=\"buttoncolor.secondary\">default",{"_index":3410,"t":{"564":{"position":[[22242,37]]}}}],["color=\"buttoncolor.secondary\">dropdown",{"_index":3336,"t":{"564":{"position":[[3788,38],[19136,38],[23855,38],[24911,38]]}}}],["color=\"buttoncolor.secondary\">dropdowndropenddropstartdropup",{"_index":3360,"t":{"564":{"position":[[10925,36],[11347,36]]}}}],["color=\"buttoncolor.secondary\">larg",{"_index":3356,"t":{"564":{"position":[[9000,35],[9410,35]]}}}],["color=\"buttoncolor.secondary\">manu",{"_index":3420,"t":{"564":{"position":[[23461,36]]}}}],["color=\"buttoncolor.secondary\">right",{"_index":3384,"t":{"564":{"position":[[16776,35]]}}}],["color=\"buttoncolor.secondary\">secondarysecondarysmal",{"_index":3358,"t":{"564":{"position":[[9889,35],[10281,35]]}}}],["color=\"buttoncolor.secondary\">split",{"_index":3367,"t":{"564":{"position":[[13004,35],[14373,35]]}}}],["color=\"buttoncolor.success",{"_index":1237,"t":{"504":{"position":[[2145,28],[2916,27]]},"512":{"position":[[6463,27]]},"516":{"position":[[6935,27]]},"520":{"position":[[4599,27]]},"522":{"position":[[2671,27]]},"524":{"position":[[2170,27],[3613,27],[5152,27],[6742,27],[10422,27]]},"540":{"position":[[8180,27],[11265,27]]},"542":{"position":[[12773,27]]},"546":{"position":[[9023,27]]},"558":{"position":[[1220,27],[2403,27],[3591,27]]},"560":{"position":[[7326,27],[10564,27]]},"564":{"position":[[7342,27],[20458,27]]}}}],["color=\"buttoncolor.success\">successsuccesswarningwarning*dangerdark(\"ar",{"_index":1516,"t":{"510":{"position":[[2829,44]]}}}],["dialog.showasync(titl",{"_index":1558,"t":{"510":{"position":[[6139,49],[7989,49]]}}}],["dialog1",{"_index":668,"t":{"120":{"position":[[1279,7],[1372,7]]}}}],["dialog2",{"_index":608,"t":{"120":{"position":[[144,7],[182,7]]}}}],["dialogcssclass",{"_index":1486,"t":{"510":{"position":[[743,14]]},"516":{"position":[[526,14]]}}}],["dialogoptions.isscrollable=\"tru",{"_index":1559,"t":{"510":{"position":[[6366,34],[7598,34]]}}}],["dialogoptions.isverticallycentered=\"tru",{"_index":1561,"t":{"510":{"position":[[6922,41]]}}}],["dialogs",{"_index":1494,"t":{"510":{"position":[[1298,10]]}}}],["dictionari",{"_index":1603,"t":{"512":{"position":[[4867,11],[5116,11]]},"516":{"position":[[5412,11],[5661,11]]}}}],["dictionaryanoth",{"_index":3379,"t":{"564":{"position":[[16223,23]]}}}],["disabled>dis",{"_index":2313,"t":{"530":{"position":[[1119,17]]}}}],["disabledropdown",{"_index":3378,"t":{"564":{"position":[[15820,17]]}}}],["disablerowselect",{"_index":3518,"t":{"568":{"position":[[1016,19],[75769,19]]}}}],["disablerowselection=\"disablerowselectionhandl",{"_index":3836,"t":{"568":{"position":[[76212,48]]}}}],["disablerowselectionhandler(employee1",{"_index":3839,"t":{"568":{"position":[[78902,36]]}}}],["disappear",{"_index":463,"t":{"80":{"position":[[258,9]]},"84":{"position":[[302,9]]}}}],["discount",{"_index":3046,"t":{"542":{"position":[[12123,9],[13412,8],[13503,9],[13994,9],[14051,8]]},"546":{"position":[[8416,9],[9662,8],[9753,9],[10245,9],[10302,8]]},"564":{"position":[[19917,9],[21136,8],[21227,9],[21719,9],[21776,8]]}}}],["discount:som",{"_index":1785,"t":{"512":{"position":[[20290,9]]}}}],["div>switch",{"_index":3083,"t":{"544":{"position":[[910,11]]}}}],["divid",{"_index":542,"t":{"96":{"position":[[389,9]]},"492":{"position":[[1674,9]]},"494":{"position":[[970,9],[980,8],[1127,8],[1177,8],[1564,8],[1729,8],[2400,8]]},"564":{"position":[[17684,9],[17739,8],[25990,8]]}}}],["doc",{"_index":25,"t":{"2":{"position":[[260,4],[542,4],[974,4]]},"12":{"position":[[597,4]]},"16":{"position":[[156,4],[258,4]]},"18":{"position":[[238,4]]},"22":{"position":[[124,4],[177,4]]},"26":{"position":[[124,4],[203,4]]},"28":{"position":[[429,4]]},"30":{"position":[[211,4]]},"34":{"position":[[770,4]]},"72":{"position":[[663,4]]},"102":{"position":[[689,4],[1025,4]]},"106":{"position":[[404,4],[599,4]]},"108":{"position":[[500,4],[688,4]]},"114":{"position":[[2365,4],[2571,4]]},"118":{"position":[[310,4],[507,4],[1561,4]]},"124":{"position":[[199,4]]},"126":{"position":[[466,4],[2379,4],[2585,4]]},"128":{"position":[[304,4],[586,4],[1018,4]]},"200":{"position":[[472,4]]},"204":{"position":[[313,4],[595,4],[1027,4]]},"214":{"position":[[2418,4],[2624,4]]},"220":{"position":[[363,4],[560,4],[1614,4]]},"224":{"position":[[466,4]]},"230":{"position":[[474,4]]},"242":{"position":[[319,4]]},"248":{"position":[[314,4]]},"254":{"position":[[465,4]]},"258":{"position":[[467,4]]},"274":{"position":[[467,4]]},"278":{"position":[[308,4],[590,4],[1022,4]]},"280":{"position":[[307,4],[589,4],[1021,4]]},"296":{"position":[[229,4]]},"298":{"position":[[460,4]]},"302":{"position":[[304,4]]},"310":{"position":[[468,4]]},"326":{"position":[[313,4]]},"328":{"position":[[20,6],[301,4],[583,4],[1015,4],[1214,4],[1420,4]]},"330":{"position":[[302,4]]},"332":{"position":[[1139,4]]},"336":{"position":[[308,4]]},"346":{"position":[[466,4]]},"350":{"position":[[173,4]]},"356":{"position":[[1359,4]]},"358":{"position":[[305,4]]},"360":{"position":[[303,4],[735,4],[3037,4]]},"366":{"position":[[461,4]]},"370":{"position":[[303,4]]},"386":{"position":[[461,4]]},"394":{"position":[[200,4]]},"406":{"position":[[168,4]]},"408":{"position":[[168,4]]},"414":{"position":[[235,4]]},"416":{"position":[[228,4]]},"436":{"position":[[462,4]]},"438":{"position":[[312,4]]},"444":{"position":[[305,4]]},"494":{"position":[[848,7],[861,8],[1448,7],[1461,8],[2181,7],[2194,8]]},"552":{"position":[[252,4]]},"554":{"position":[[247,4]]}}}],["docs5",{"_index":677,"t":{"120":{"position":[[1380,5]]}}}],["document",{"_index":99,"t":{"4":{"position":[[116,11],[163,13]]},"6":{"position":[[136,14]]},"12":{"position":[[153,13],[226,13],[636,13]]},"28":{"position":[[373,13]]},"32":{"position":[[603,13]]},"34":{"position":[[626,13],[665,13],[701,13]]},"36":{"position":[[218,13]]},"38":{"position":[[332,13],[378,13],[420,13],[461,13]]},"40":{"position":[[356,13]]},"42":{"position":[[676,13],[712,13]]},"44":{"position":[[468,13],[509,13],[548,13]]},"46":{"position":[[451,13],[489,13]]},"48":{"position":[[630,13],[676,13],[715,13],[751,13]]},"50":{"position":[[453,13]]},"52":{"position":[[420,13]]},"54":{"position":[[675,13],[711,13]]},"56":{"position":[[356,13]]},"58":{"position":[[315,13]]},"60":{"position":[[490,13]]},"62":{"position":[[617,13]]},"64":{"position":[[374,13]]},"66":{"position":[[341,13]]},"68":{"position":[[821,13],[852,13],[880,13],[909,13]]},"70":{"position":[[797,13],[823,13],[854,13],[881,13],[912,13]]},"72":{"position":[[635,14],[814,13],[844,13],[875,13],[904,13],[952,13],[995,13]]},"74":{"position":[[514,13],[543,13]]},"76":{"position":[[316,13]]},"78":{"position":[[392,13],[418,13]]},"80":{"position":[[355,13],[386,13],[421,13],[457,13],[489,13],[523,13],[551,13],[583,13]]},"82":{"position":[[1431,13],[1462,13],[1497,13],[1533,13],[1565,13],[1599,13],[1627,13],[1659,13]]},"84":{"position":[[467,13],[496,13],[528,13]]},"86":{"position":[[356,13],[386,13]]},"88":{"position":[[600,13],[635,13],[661,13],[689,13],[715,13]]},"92":{"position":[[370,13]]},"94":{"position":[[764,13],[805,13],[843,13],[880,13],[922,13],[961,13]]},"96":{"position":[[1247,13],[1287,13],[1325,13],[1361,13],[1399,13],[1438,13],[1476,13]]},"98":{"position":[[289,13]]},"100":{"position":[[485,13]]},"102":{"position":[[794,13]]},"104":{"position":[[290,13]]},"106":{"position":[[487,13]]},"108":{"position":[[583,13]]},"114":{"position":[[2125,13]]},"116":{"position":[[136,14],[306,11]]},"118":{"position":[[1957,13]]},"126":{"position":[[2139,13]]},"210":{"position":[[189,14],[359,11]]},"214":{"position":[[2178,13]]},"220":{"position":[[2010,13]]},"384":{"position":[[160,11]]},"388":{"position":[[180,14]]},"392":{"position":[[197,13]]},"418":{"position":[[262,13]]},"500":{"position":[[637,13],[741,13],[833,13],[922,13]]},"502":{"position":[[1797,9]]},"504":{"position":[[1263,8]]},"506":{"position":[[1541,14]]},"516":{"position":[[2911,8]]},"520":{"position":[[49,13]]},"528":{"position":[[41,13]]},"564":{"position":[[2708,9]]}}}],["documentationdropdown",{"_index":3389,"t":{"564":{"position":[[18077,25]]}}}],["dropdownhead",{"_index":3331,"t":{"564":{"position":[[1937,14],[2093,15],[25756,14]]}}}],["dropdownheader>dropdown",{"_index":3387,"t":{"564":{"position":[[17369,24]]}}}],["dropdownitem",{"_index":3332,"t":{"564":{"position":[[2116,12],[3872,13],[3938,13],[4012,13],[4284,13],[4350,13],[4424,13],[4642,13],[4708,13],[4782,13],[4996,13],[5062,13],[5136,13],[5344,13],[5410,13],[5484,13],[5698,13],[5764,13],[5838,13],[6050,13],[6116,13],[6190,13],[6542,13],[6608,13],[6682,13],[6968,13],[7034,13],[7108,13],[7388,13],[7454,13],[7528,13],[7799,13],[7865,13],[7939,13],[8219,13],[8285,13],[8359,13],[8636,13],[8702,13],[8776,13],[9081,13],[9165,13],[9239,13],[9552,13],[9618,13],[9692,13],[9970,13],[10036,13],[10110,13],[10423,13],[10489,13],[10563,13],[11017,13],[11083,13],[11157,13],[11490,13],[11556,13],[11630,13],[12094,13],[12160,13],[12234,13],[12673,13],[12739,13],[12813,13],[13141,13],[13207,13],[13281,13],[13735,13],[13801,13],[13875,13],[14116,13],[14182,13],[14256,13],[14497,12],[14560,12],[14713,13],[14779,13],[14867,13],[15232,13],[15298,13],[15372,13],[15950,12],[16113,13],[16179,13],[16269,13],[16907,13],[16973,13],[17047,13],[17418,13],[17484,13],[17558,13],[17858,13],[17924,13],[17998,13],[18128,13],[22327,13],[22396,13],[22465,13],[22752,13],[22821,13],[22890,13],[23175,13],[23244,13],[23313,13],[23542,13],[23611,13],[23680,13],[23939,13],[24005,13],[24079,13],[24995,13],[25061,13],[25135,13],[25782,12]]}}}],["dropdownmenu",{"_index":3329,"t":{"564":{"position":[[1684,12],[1838,13],[2371,13],[3857,14],[4091,15],[4269,14],[4503,15],[4627,14],[4861,15],[4981,14],[5215,15],[5329,14],[5563,15],[5683,14],[5917,15],[6035,14],[6269,15],[6527,14],[6761,15],[6953,14],[7187,15],[7373,14],[7607,15],[7784,14],[8018,15],[8204,14],[8438,15],[8621,14],[8855,15],[9066,14],[9318,15],[9537,14],[9771,15],[9955,14],[10189,15],[10408,14],[10642,15],[10727,12],[11002,14],[11236,15],[11475,14],[11709,15],[11794,12],[12079,14],[12313,15],[12387,12],[12658,14],[12892,15],[13126,14],[13360,15],[13436,12],[13720,14],[13954,15],[14101,14],[14335,15],[14588,13],[14698,14],[14946,15],[15217,14],[15451,15],[15978,12],[16098,14],[16348,15],[16424,12],[16591,13],[16666,12],[16856,13],[17126,15],[17354,14],[17637,15],[17843,14],[18202,15],[18516,13],[18698,15],[19203,13],[20551,15],[22012,12],[22078,13],[22312,14],[22534,15],[22737,14],[22959,15],[23160,14],[23382,15],[23527,14],[23749,15],[23924,14],[24158,15],[24980,14],[25214,15],[25732,12]]}}}],["dropdownmenuposit",{"_index":3330,"t":{"564":{"position":[[1868,20]]}}}],["dropdowntogglebutton",{"_index":3327,"t":{"564":{"position":[[928,20],[1090,21],[3766,21],[4188,21],[4542,21],[4900,21],[5254,21],[5602,21],[5956,21],[6474,21],[6898,21],[7320,21],[7734,21],[8151,21],[8569,21],[8978,21],[9482,21],[9867,21],[10353,21],[10903,21],[11420,21],[11988,21],[12575,21],[13071,21],[13635,21],[14046,21],[14613,21],[15132,21],[16013,21],[16754,21],[17270,21],[17759,21],[18432,21],[19114,21],[22220,21],[22644,21],[23068,21],[23439,21],[23833,21],[24889,21],[25668,20]]}}}],["dropend",{"_index":539,"t":{"96":{"position":[[327,8]]},"564":{"position":[[12367,8],[25922,7]]}}}],["dropendemploye",{"_index":1522,"t":{"510":{"position":[[3292,13]]},"512":{"position":[[4140,13],[6096,13]]},"516":{"position":[[4680,13],[6568,13]]}}}],["end\">first",{"_index":1524,"t":{"510":{"position":[[3420,10]]},"512":{"position":[[4268,10],[6224,10]]},"516":{"position":[[4808,10],[6696,10]]}}}],["end\">last",{"_index":1526,"t":{"510":{"position":[[3555,9]]},"512":{"position":[[4403,9],[6359,9]]},"516":{"position":[[4943,9],[6831,9]]}}}],["enddat",{"_index":2932,"t":{"540":{"position":[[12804,7]]}}}],["enddateinput",{"_index":2913,"t":{"540":{"position":[[11387,12]]}}}],["enddateinput.dis",{"_index":2922,"t":{"540":{"position":[[11940,23]]}}}],["enddateinput.en",{"_index":2925,"t":{"540":{"position":[[12124,22]]}}}],["endregion",{"_index":2431,"t":{"532":{"position":[[8327,10]]},"534":{"position":[[10368,10]]},"536":{"position":[[6915,10],[10786,10]]},"562":{"position":[[7361,10],[14560,10]]}}}],["engin",{"_index":3606,"t":{"568":{"position":[[7686,10],[7819,10],[7942,10],[8204,10],[10031,10],[10164,10],[10287,10],[10549,10],[12407,10],[12540,10],[12663,10],[12925,10],[13790,10],[15179,10],[15312,10],[15435,10],[15697,10],[17598,10],[17731,10],[17854,10],[18116,10],[18981,10],[20350,10],[20483,10],[20606,10],[20868,10],[22752,10],[22885,10],[23008,10],[23270,10],[25917,10],[26160,10],[26396,10],[26884,10],[31829,10],[31962,10],[32085,10],[32347,10],[34194,10],[34327,10],[34450,10],[34712,10],[36559,10],[36692,10],[36815,10],[37077,10],[38964,10],[39078,10],[39185,10],[39414,10],[41222,10],[41336,10],[41443,10],[41672,10],[43946,10],[44189,10],[44425,10],[44913,10],[47200,10],[47333,10],[47456,10],[47718,10],[48583,10],[52845,10],[52978,10],[53101,10],[53363,10],[54228,10],[55484,10],[55617,10],[55740,10],[56002,10],[57937,10],[58070,10],[58193,10],[58455,10],[59163,8],[61649,10],[61782,10],[61905,10],[62167,10],[63032,10],[64870,10],[65003,10],[65126,10],[65388,10],[66253,10],[68247,10],[68380,10],[68503,10],[68765,10],[69630,10],[71385,10],[71518,10],[71641,10],[71903,10],[74360,10],[74493,10],[74616,10],[74878,10],[77657,10],[77790,10],[77913,10],[78175,10],[80748,10],[80881,10],[81004,10],[81266,10],[82131,10],[83514,10],[83647,10],[83770,10],[84032,10],[84897,10],[88752,10],[88875,10],[89137,10],[96982,10],[97105,10],[97367,10],[99173,10],[99296,10],[99558,10],[101611,10],[101734,10],[101996,10],[105593,10],[105726,10],[105849,10],[106111,10],[106976,10],[109473,10],[109607,10],[109730,10],[109992,10]]}}}],["enhanc",{"_index":16,"t":{"2":{"position":[[117,12],[391,12],[675,12]]},"14":{"position":[[161,12],[184,12]]},"22":{"position":[[129,12],[182,11]]},"26":{"position":[[129,12],[208,11]]},"30":{"position":[[112,12],[198,12],[216,11]]},"32":{"position":[[124,12],[184,12],[212,13]]},"34":{"position":[[115,13],[129,13],[212,13],[288,13],[537,13]]},"40":{"position":[[126,13],[145,13]]},"42":{"position":[[151,12],[516,13]]},"44":{"position":[[116,12],[196,12],[229,12]]},"46":{"position":[[152,12]]},"48":{"position":[[156,13],[321,12],[349,12],[377,12]]},"58":{"position":[[120,12]]},"64":{"position":[[121,12]]},"102":{"position":[[118,12]]},"106":{"position":[[116,12]]},"108":{"position":[[117,12]]},"112":{"position":[[712,12],[961,12]]},"114":{"position":[[156,13],[522,12],[870,12],[1212,12],[1501,13],[2296,13],[2710,12]]},"118":{"position":[[112,12],[315,12],[512,12]]},"126":{"position":[[167,12],[2310,13]]},"128":{"position":[[161,12],[435,12],[719,12]]},"136":{"position":[[797,13],[1163,12],[1511,12]]},"144":{"position":[[206,13],[572,12]]},"146":{"position":[[214,13],[580,12]]},"150":{"position":[[169,12],[418,12],[673,13]]},"152":{"position":[[185,13]]},"154":{"position":[[183,13]]},"156":{"position":[[208,12]]},"158":{"position":[[182,13]]},"160":{"position":[[201,12]]},"166":{"position":[[170,12]]},"168":{"position":[[208,12]]},"170":{"position":[[205,12]]},"174":{"position":[[207,13],[573,12]]},"176":{"position":[[209,12]]},"178":{"position":[[170,12]]},"180":{"position":[[207,13],[573,12]]},"184":{"position":[[200,12]]},"188":{"position":[[206,13]]},"190":{"position":[[450,12]]},"194":{"position":[[756,12],[1005,12]]},"196":{"position":[[200,13],[566,12],[914,12]]},"200":{"position":[[173,12]]},"204":{"position":[[170,12],[444,12],[728,12]]},"212":{"position":[[765,12],[1014,12]]},"214":{"position":[[209,13],[575,12],[923,12],[1265,12],[1554,13],[2349,13],[2763,12]]},"220":{"position":[[165,12],[368,12],[565,12]]},"224":{"position":[[167,12]]},"230":{"position":[[175,12]]},"242":{"position":[[168,12]]},"246":{"position":[[169,12],[418,12],[673,13]]},"248":{"position":[[163,12]]},"254":{"position":[[166,12]]},"258":{"position":[[168,12]]},"274":{"position":[[168,12]]},"278":{"position":[[165,12],[439,12],[723,12]]},"280":{"position":[[164,12],[438,12],[722,12]]},"286":{"position":[[760,12],[1009,12]]},"288":{"position":[[759,12],[1008,12]]},"294":{"position":[[789,12]]},"296":{"position":[[160,13]]},"298":{"position":[[161,12]]},"302":{"position":[[161,12]]},"310":{"position":[[169,12]]},"326":{"position":[[162,12]]},"328":{"position":[[158,12],[432,12],[716,12],[1145,13]]},"330":{"position":[[159,12]]},"332":{"position":[[577,12],[826,12],[1070,13],[1278,12]]},"336":{"position":[[157,12]]},"340":{"position":[[201,12]]},"346":{"position":[[167,12]]},"350":{"position":[[178,12]]},"356":{"position":[[1364,12]]},"358":{"position":[[162,12]]},"360":{"position":[[160,12],[436,12],[3042,12]]},"362":{"position":[[455,12]]},"364":{"position":[[202,12]]},"366":{"position":[[162,12]]},"368":{"position":[[493,12]]},"370":{"position":[[160,12]]},"382":{"position":[[781,12]]},"386":{"position":[[162,12]]},"406":{"position":[[173,12]]},"408":{"position":[[173,12]]},"410":{"position":[[156,12]]},"412":{"position":[[168,12]]},"416":{"position":[[159,13]]},"422":{"position":[[170,13]]},"424":{"position":[[196,12]]},"426":{"position":[[195,12]]},"428":{"position":[[160,12]]},"430":{"position":[[200,13]]},"436":{"position":[[163,12]]},"438":{"position":[[161,12]]},"444":{"position":[[162,12]]},"454":{"position":[[164,12]]},"456":{"position":[[165,12]]}}}],["enim",{"_index":1658,"t":{"512":{"position":[[7857,5],[8303,5],[8789,5],[10691,5],[12098,5],[12544,5],[13030,5],[14932,5],[16239,5],[16685,5],[17171,5],[19073,5]]}}}],["enough",{"_index":2135,"t":{"524":{"position":[[4784,6],[6318,6]]}}}],["ensur",{"_index":145,"t":{"12":{"position":[[94,8]]},"118":{"position":[[1898,8]]},"220":{"position":[[1951,8]]},"392":{"position":[[138,8]]},"496":{"position":[[3048,6],[3536,6],[4025,6],[4511,6],[4996,6]]},"498":{"position":[[2153,6]]}}}],["enter",{"_index":2653,"t":{"538":{"position":[[2500,5]]},"540":{"position":[[3172,5]]},"542":{"position":[[7505,5]]},"546":{"position":[[3215,5]]},"560":{"position":[[2404,5]]}}}],["enterpris",{"_index":3115,"t":{"548":{"position":[[106,10]]},"550":{"position":[[96,10]]},"552":{"position":[[94,10]]},"554":{"position":[[89,10]]},"556":{"position":[[96,10]]}}}],["entireti",{"_index":1172,"t":{"502":{"position":[[7192,8]]}}}],["entri",{"_index":94,"t":{"2":{"position":[[2819,7]]},"70":{"position":[[330,5],[514,5]]},"110":{"position":[[3099,7],[3113,7]]},"112":{"position":[[3000,7],[3014,7]]},"114":{"position":[[2796,7],[2810,7]]},"116":{"position":[[633,7]]},"118":{"position":[[2046,7],[2060,7]]},"128":{"position":[[2863,7]]},"192":{"position":[[3143,7],[3157,7]]},"194":{"position":[[3044,7],[3058,7]]},"196":{"position":[[1110,7]]},"204":{"position":[[2872,7]]},"208":{"position":[[3152,7],[3166,7]]},"210":{"position":[[686,7]]},"212":{"position":[[3053,7],[3067,7]]},"214":{"position":[[2849,7],[2863,7]]},"220":{"position":[[2099,7],[2113,7]]},"244":{"position":[[3003,7]]},"246":{"position":[[816,7]]},"278":{"position":[[2867,7]]},"280":{"position":[[2866,7]]},"282":{"position":[[3147,7],[3161,7]]},"286":{"position":[[1903,7]]},"288":{"position":[[1902,7]]},"300":{"position":[[3146,7],[3160,7]]},"330":{"position":[[2858,7]]},"332":{"position":[[1565,7]]},"344":{"position":[[250,7]]},"360":{"position":[[3116,7]]},"540":{"position":[[9415,5],[9516,5],[13044,5]]},"560":{"position":[[9026,5],[9127,5],[12267,5]]}}}],["enum",{"_index":251,"t":{"34":{"position":[[467,4]]},"496":{"position":[[329,4]]},"518":{"position":[[1357,5],[2191,5]]},"522":{"position":[[2277,4]]},"538":{"position":[[805,4],[939,4],[1294,4]]},"566":{"position":[[574,4]]},"568":{"position":[[4174,4],[5036,4],[5509,4],[5911,4],[40202,6]]}}}],["environ",{"_index":3476,"t":{"566":{"position":[[11192,12]]}}}],["equal",{"_index":1194,"t":{"502":{"position":[[10643,5],[11823,5],[13138,5]]}}}],["erat",{"_index":1702,"t":{"512":{"position":[[8322,5],[10188,4],[10511,4],[10894,4],[12563,5],[14429,4],[14752,4],[15135,4],[16704,5],[18570,4],[18893,4],[19276,4]]}}}],["ero",{"_index":1747,"t":{"512":{"position":[[9596,5],[9691,5],[9850,5],[10776,4],[11083,4],[13837,5],[13932,5],[14091,5],[15017,4],[15324,4],[17978,5],[18073,5],[18232,5],[19158,4],[19465,4]]}}}],["error",{"_index":452,"t":{"78":{"position":[[216,5]]},"524":{"position":[[12088,8]]},"558":{"position":[[5719,8]]}}}],["errormessag",{"_index":3064,"t":{"542":{"position":[[13867,12],[13979,12],[14136,12]]},"546":{"position":[[10117,12],[10230,12],[10387,12]]},"564":{"position":[[21591,12],[21704,12],[21861,12]]}}}],["es",{"_index":2726,"t":{"538":{"position":[[3886,4],[5757,4],[8382,4]]},"542":{"position":[[2929,3]]}}}],["es(thi",{"_index":1616,"t":{"512":{"position":[[5739,50]]},"516":{"position":[[6222,50]]}}}],["eventcallbackexampl",{"_index":989,"t":{"498":{"position":[[851,11]]}}}],["h2>exampl",{"_index":991,"t":{"498":{"position":[[895,11]]}}}],["h3>exampl",{"_index":993,"t":{"498":{"position":[[939,11]]}}}],["h4",{"_index":826,"t":{"492":{"position":[[1725,3]]}}}],["h4>convey",{"_index":948,"t":{"496":{"position":[[2842,13],[3330,13],[3819,13],[4305,13],[4790,13]]}}}],["h4>exampl",{"_index":995,"t":{"498":{"position":[[983,11]]}}}],["h5>exampl",{"_index":997,"t":{"498":{"position":[[1027,11]]}}}],["h6>exampl",{"_index":999,"t":{"498":{"position":[[1071,11]]}}}],["hand",{"_index":774,"t":{"492":{"position":[[116,7]]},"526":{"position":[[1464,5],[1536,5],[1608,5],[1680,5],[1752,5],[1824,5]]}}}],["handl",{"_index":2063,"t":{"522":{"position":[[1453,6]]},"524":{"position":[[12029,6]]},"538":{"position":[[3961,6],[5832,6],[6861,6],[8457,6],[10617,6],[12128,6],[13622,6]]},"558":{"position":[[5631,6]]}}}],["handleonvalidsubmit",{"_index":2773,"t":{"538":{"position":[[10066,21]]},"540":{"position":[[8465,21]]},"542":{"position":[[13527,21]]},"546":{"position":[[9777,21]]},"564":{"position":[[21251,21]]}}}],["handlevalidsubmit",{"_index":2926,"t":{"540":{"position":[[12161,19]]},"560":{"position":[[7670,19],[11494,19]]}}}],["happi",{"_index":139,"t":{"10":{"position":[[288,5]]}}}],["hard",{"_index":1817,"t":{"514":{"position":[[1391,4]]}}}],["hashsetwel",{"_index":828,"t":{"492":{"position":[[1742,13]]}}}],["heading=\"import",{"_index":946,"t":{"496":{"position":[[1622,20],[1865,20],[2108,20],[2349,20],[2586,20]]}}}],["headings",{"_index":1108,"t":{"502":{"position":[[2128,11],[2523,11]]}}}],["headingsize.h5",{"_index":1112,"t":{"502":{"position":[[2566,14]]}}}],["headingsize.h6",{"_index":1109,"t":{"502":{"position":[[2171,14]]}}}],["height",{"_index":1195,"t":{"502":{"position":[[10659,6],[11829,6],[13144,6]]},"506":{"position":[[1353,6]]},"516":{"position":[[8793,7],[8930,6],[10550,7],[10687,6]]},"520":{"position":[[342,6],[376,6],[400,6],[446,6],[3126,7],[3142,6],[3185,6],[3203,6],[8322,6]]},"532":{"position":[[302,6],[332,7]]},"534":{"position":[[447,6],[477,7]]},"536":{"position":[[243,6],[273,7]]},"562":{"position":[[398,6],[428,7]]},"566":{"position":[[21323,7]]},"568":{"position":[[1729,6],[1775,7],[107150,6]]}}}],["height=\"1",{"_index":2033,"t":{"520":{"position":[[3256,11]]}}}],["height=\"20",{"_index":2035,"t":{"520":{"position":[[3467,12]]}}}],["height=\"300",{"_index":2432,"t":{"532":{"position":[[8424,12],[9822,12],[12050,12],[14148,12]]}}}],["height=\"350",{"_index":3907,"t":{"568":{"position":[[107396,12]]}}}],["height=\"5",{"_index":2034,"t":{"520":{"position":[[3330,11]]}}}],["height='8'%3e%3cpath",{"_index":918,"t":{"494":{"position":[[1818,20]]}}}],["hello",{"_index":2127,"t":{"524":{"position":[[3003,8],[4489,8],[5985,8],[7646,8],[9590,8],[11255,8]]}}}],["help",{"_index":1069,"t":{"500":{"position":[[241,5]]},"524":{"position":[[1286,4]]}}}],["helper",{"_index":3152,"t":{"548":{"position":[[2622,7]]},"550":{"position":[[2783,7]]},"556":{"position":[[2265,7]]}}}],["helptext",{"_index":2103,"t":{"524":{"position":[[1253,8],[2963,8],[5945,8],[9550,8],[11215,8]]},"540":{"position":[[12295,9]]},"560":{"position":[[7804,9],[11628,9]]}}}],["hendrerit",{"_index":1765,"t":{"512":{"position":[[10364,9],[14605,9],[18746,9]]}}}],["here",{"_index":820,"t":{"492":{"position":[[1569,5]]},"494":{"position":[[964,5],[1578,5],[2320,5]]},"496":{"position":[[1583,5],[2814,5],[5267,5]]},"498":{"position":[[1124,4],[2386,4],[3264,4],[3944,4],[6863,4],[7269,4]]},"500":{"position":[[316,5],[605,5],[651,5],[704,5],[755,5],[800,5],[847,5],[890,5],[936,5]]},"502":{"position":[[3088,5],[3442,5],[3841,5],[4764,5],[5072,5],[5872,5],[6284,5],[7109,5],[8226,5],[10557,5],[11965,5],[13301,5]]},"504":{"position":[[2520,5],[2737,5],[3273,5],[3910,5],[4697,5],[5558,5],[6505,5],[6879,5],[7454,5],[7890,5],[8564,5],[9054,5],[9813,5]]},"506":{"position":[[2443,4],[3412,4]]},"508":{"position":[[3519,5],[5530,5],[7373,5],[9193,5],[11009,5],[15996,5],[18980,5]]},"510":{"position":[[2042,5],[3925,5],[4645,5],[5731,5],[6891,5],[8184,5]]},"512":{"position":[[3221,5],[4769,5],[6949,5],[7359,5],[11589,5],[15836,5],[21307,5]]},"514":{"position":[[1733,5],[2000,5],[2199,5],[2552,5],[2786,5],[3133,5]]},"516":{"position":[[3395,5],[3860,5],[5298,5],[7410,5],[8353,5],[9531,5],[10217,5],[11307,5],[12174,5],[13771,5],[14124,5],[15000,5]]},"518":{"position":[[1023,5],[1242,5],[2052,5],[2486,5],[3405,5]]},"520":{"position":[[1871,5],[2083,5],[3120,5],[3528,5],[4340,5],[5711,5],[6090,5],[7044,5],[8152,5]]},"522":{"position":[[1083,4],[1528,5],[2188,5],[3673,5]]},"524":{"position":[[3092,5],[3199,4],[4599,5],[6084,5],[7926,5],[9706,5],[11337,5],[11517,4]]},"526":{"position":[[1019,5],[1267,5],[2809,5],[2912,5],[3054,5],[3221,5],[3559,5],[3697,5],[4304,5]]},"528":{"position":[[1810,5],[2697,5],[3709,5],[4759,5],[5597,5],[7659,5],[8083,5],[9184,5]]},"530":{"position":[[967,5],[1202,5],[1261,5],[1454,5],[1856,4]]},"532":{"position":[[8370,5],[9771,5],[11841,5],[14103,5],[16287,5]]},"534":{"position":[[13327,5],[16574,5]]},"536":{"position":[[6958,5],[10829,5]]},"538":{"position":[[4140,4],[6011,4],[6979,4],[8575,4],[10921,4],[13840,4]]},"540":{"position":[[1681,4],[3004,4],[5421,4],[6806,4],[8922,4],[9373,4]]},"542":{"position":[[2061,4],[4456,4],[4793,4],[5306,4],[5846,4],[7337,4],[8186,4],[8960,4],[9472,4],[10797,4],[14240,4],[14916,4]]},"544":{"position":[[1005,4],[2196,4],[2396,4],[2887,4]]},"546":{"position":[[1574,4],[3047,4],[3866,4],[4187,4],[4488,4],[4672,4],[5390,4],[5874,4],[7181,4],[10491,4],[11163,4]]},"558":{"position":[[223,5],[2057,7],[2142,5],[3240,7],[3353,5],[4016,7],[4100,5],[4413,7],[4550,5],[4846,7],[4938,5],[5088,4]]},"560":{"position":[[1634,4],[2236,4],[3650,4],[4983,4],[8537,4],[8984,4]]},"562":{"position":[[7404,5],[10534,5],[14603,5]]},"564":{"position":[[4132,5],[6317,5],[8903,5],[10690,5],[11757,5],[12361,5],[13408,5],[14474,5],[14987,5],[16389,5],[17167,5],[17678,5],[18243,5],[18739,5],[21969,5],[23790,5],[24657,5],[25593,5]]},"566":{"position":[[2558,5],[4496,5],[6443,5],[8725,5],[11115,5],[13568,5],[15978,5],[18392,5],[22184,5],[24117,5]]},"568":{"position":[[8949,4],[11294,4],[14051,4],[16442,4],[19242,4],[21613,4],[24015,4],[28108,4],[30378,4],[33092,4],[35457,4],[37822,4],[40079,4],[42337,4],[46137,4],[48844,4],[49799,4],[54307,4],[56643,4],[59769,4],[63111,4],[66332,4],[72645,4],[75620,4],[79200,4],[82264,4],[84976,4],[89458,4],[97688,4],[100108,4],[102559,4],[107055,4],[110648,4],[113180,4],[115804,4],[118465,4],[121241,4]]}}}],["here'",{"_index":861,"t":{"492":{"position":[[2935,6]]}}}],["herecallout",{"_index":939,"t":{"496":{"position":[[578,69],[800,69],[1024,69],[1242,69],[1458,69],[1730,69],[1972,69],[2216,69],[2454,69],[2690,69]]}}}],["html",{"_index":823,"t":{"492":{"position":[[1630,4]]},"504":{"position":[[8575,4]]},"508":{"position":[[2285,4],[2836,4],[3386,4],[4149,4],[4774,4],[5397,4],[6139,4],[6690,4],[7240,4],[7943,4],[8510,4],[9060,4],[9775,4],[10326,4],[10876,4],[11763,4],[12326,4],[12888,4],[13446,4],[13994,4],[14554,4],[16708,4],[17281,4],[17853,4]]},"514":{"position":[[1493,4]]},"516":{"position":[[2837,5]]},"540":{"position":[[109,4]]},"546":{"position":[[107,4]]},"560":{"position":[[113,4]]}}}],["https://demos.getblazorbootstrap.com",{"_index":142,"t":{"10":{"position":[[326,37]]},"16":{"position":[[297,37]]}}}],["i.",{"_index":1580,"t":{"512":{"position":[[1462,5],[1622,5]]},"534":{"position":[[1980,4]]}}}],["iaculi",{"_index":1760,"t":{"512":{"position":[[10041,7],[14282,7],[18423,7]]}}}],["ichartdataset",{"_index":2332,"t":{"532":{"position":[[911,14]]},"534":{"position":[[1057,14]]},"536":{"position":[[851,14]]},"562":{"position":[[1016,14]]}}}],["icompar",{"_index":3575,"t":{"568":{"position":[[5687,13]]}}}],["icon",{"_index":32,"t":{"2":{"position":[[423,6],[526,4]]},"4":{"position":[[229,4]]},"8":{"position":[[233,4]]},"12":{"position":[[677,5]]},"18":{"position":[[139,5],[260,5],[319,5],[361,5]]},"30":{"position":[[159,5],[248,5]]},"34":{"position":[[334,4]]},"42":{"position":[[450,4]]},"48":{"position":[[150,5],[249,4],[362,4],[570,4],[736,4]]},"72":{"position":[[405,4]]},"88":{"position":[[134,6],[327,4],[656,4],[804,4]]},"92":{"position":[[248,4]]},"94":{"position":[[662,4]]},"106":{"position":[[148,6],[287,4],[313,5],[583,4]]},"110":{"position":[[134,6],[244,4]]},"114":{"position":[[150,5],[249,4]]},"118":{"position":[[1112,5],[1166,5]]},"128":{"position":[[467,6],[570,4]]},"136":{"position":[[791,5],[890,4]]},"144":{"position":[[200,5],[299,4]]},"146":{"position":[[208,5],[307,4]]},"174":{"position":[[201,5],[300,4]]},"180":{"position":[[201,5],[300,4]]},"188":{"position":[[200,5],[299,4]]},"192":{"position":[[178,6],[288,4]]},"196":{"position":[[194,5],[293,4]]},"204":{"position":[[476,6],[579,4]]},"208":{"position":[[187,6],[297,4]]},"214":{"position":[[203,5],[302,4]]},"220":{"position":[[1165,5],[1219,5]]},"242":{"position":[[200,6],[303,4]]},"248":{"position":[[195,6],[298,4],[463,6],[573,4]]},"252":{"position":[[441,6],[551,4]]},"254":{"position":[[1372,6],[1482,4]]},"266":{"position":[[182,6],[292,4]]},"276":{"position":[[183,6],[293,4]]},"278":{"position":[[471,6],[574,4]]},"280":{"position":[[470,6],[573,4]]},"282":{"position":[[182,6],[292,4]]},"300":{"position":[[181,6],[291,4]]},"308":{"position":[[191,5],[245,5]]},"326":{"position":[[194,6],[297,4]]},"328":{"position":[[464,6],[567,4]]},"334":{"position":[[21,7],[182,5],[236,5]]},"336":{"position":[[20,6],[189,6],[292,4],[457,6],[567,4]]},"346":{"position":[[867,6],[977,4]]},"360":{"position":[[1642,6],[1752,4]]},"372":{"position":[[176,6],[286,4]]},"382":{"position":[[177,6],[287,4],[1083,5],[1137,5]]},"400":{"position":[[183,5],[237,5]]},"430":{"position":[[194,5],[293,4]]},"438":{"position":[[193,6],[296,4]]},"480":{"position":[[178,6],[288,4]]},"492":{"position":[[2130,6],[2170,5],[2198,6],[2246,5],[2328,4],[2377,5],[2466,4],[2514,5],[2610,4],[2659,5],[2756,4],[2796,4],[4046,5]]},"494":{"position":[[1597,5],[1645,5],[2310,4],[2422,4]]},"508":{"position":[[3536,5],[3670,5],[4292,5],[4917,5],[19144,4]]},"514":{"position":[[467,5],[631,5],[790,5],[957,5],[1752,6],[3251,5]]},"524":{"position":[[1236,4],[1348,4]]},"526":{"position":[[8,5],[34,5],[57,4],[88,4],[102,4],[146,5],[179,5],[197,4],[478,4],[548,5],[653,4],[704,4],[868,6],[875,5],[906,5],[941,5],[973,5],[1008,5],[1032,5],[1082,5],[1132,5],[1182,5],[1236,5],[1286,6],[1359,6],[1430,5],[1502,5],[1574,5],[1646,5],[1718,5],[1790,5],[1870,5],[1949,5],[2044,5],[2123,5],[2196,5],[2289,5],[2371,5],[2460,5],[2533,5],[2609,5],[2692,5],[2778,5],[2832,5],[2850,5],[2902,4],[2928,5],[2994,5],[3044,4],[3077,5],[3143,5],[3211,4],[3239,4],[3540,4],[3577,4],[3682,4],[3728,5],[3800,6],[3938,5],[4072,5],[4138,4],[4202,5],[4268,6],[4293,5],[4401,5],[4426,5],[4456,4],[4471,4],[4493,4],[4510,4],[4536,4],[4571,4],[4576,4],[4604,5]]},"528":{"position":[[2714,5],[2867,5],[3145,5],[3430,5],[9315,4]]},"530":{"position":[[1216,4],[1431,4],[1973,4]]},"538":{"position":[[13869,5]]},"548":{"position":[[2788,6],[2992,6],[3071,6]]},"550":{"position":[[2949,6],[3154,6],[3233,6]]},"554":{"position":[[1903,5]]},"556":{"position":[[2431,6],[2635,6],[2714,6]]},"566":{"position":[[375,4],[1018,4],[1132,4],[1199,4],[3403,9],[3454,8],[4509,5],[5289,9],[5340,8],[7571,9],[7622,8],[8754,5],[8828,5],[9051,5],[9904,9],[9955,8],[11504,5],[12357,9],[12408,8],[13587,5],[13649,4],[13682,6],[13914,5],[14767,9],[14818,8],[16328,5],[17181,9],[17232,8],[19687,9],[19738,8],[21239,4],[21503,4],[22982,9],[23033,8],[24253,5],[24313,5],[24348,4]]}}}],["icon2",{"_index":681,"t":{"120":{"position":[[1407,5]]}}}],["iconcolor",{"_index":2184,"t":{"526":{"position":[[451,9]]},"566":{"position":[[1080,9],[1090,9],[4526,9],[5225,9],[5454,9],[5902,9],[7507,9],[7736,9],[8184,9],[9840,9],[10069,9],[10517,9],[12293,9],[12522,9],[12970,9],[14703,9],[14932,9],[15380,9],[17117,9],[17346,9],[17794,9],[19623,9],[19852,9],[20300,9]]}}}],["iconcolor.dang",{"_index":3469,"t":{"566":{"position":[[5914,16],[8196,16],[10529,16],[12982,16],[15392,16],[17806,16],[20312,16]]}}}],["iconcolor.non",{"_index":2185,"t":{"526":{"position":[[490,14]]},"566":{"position":[[1100,14]]}}}],["iconcolor.primari",{"_index":3467,"t":{"566":{"position":[[5237,17],[7519,17],[9852,17],[12305,17],[14715,17],[17129,17],[19635,17]]}}}],["iconcolor.success",{"_index":3468,"t":{"566":{"position":[[5466,17],[7748,17],[10081,17],[12534,17],[14944,17],[17358,17],[19864,17]]}}}],["iconnam",{"_index":1804,"t":{"514":{"position":[[434,8],[599,8],[758,8],[921,8]]},"524":{"position":[[1303,8],[1312,8]]},"526":{"position":[[627,8]]},"540":{"position":[[12246,9]]},"552":{"position":[[1402,8],[1520,8],[1620,8]]},"554":{"position":[[1397,8],[1515,8],[1615,8]]},"560":{"position":[[7755,9],[11579,9]]},"566":{"position":[[565,8],[596,9],[1150,8],[1159,8],[2092,8],[2186,8],[2279,8],[2377,8],[2466,8],[3226,8],[3312,8],[3413,8],[3502,8],[3612,8],[3727,8],[3840,8],[3937,8],[4035,8],[4162,8],[4287,8],[4401,8],[5081,8],[5167,8],[5299,8],[5388,8],[5529,8],[5644,8],[5757,8],[5854,8],[5982,8],[6109,8],[6234,8],[6348,8],[7363,8],[7449,8],[7581,8],[7670,8],[7811,8],[7926,8],[8039,8],[8136,8],[8264,8],[8391,8],[8516,8],[8630,8],[9696,8],[9782,8],[9914,8],[10003,8],[10144,8],[10259,8],[10372,8],[10469,8],[10597,8],[10724,8],[10849,8],[10963,8],[12149,8],[12235,8],[12367,8],[12456,8],[12597,8],[12712,8],[12825,8],[12922,8],[13050,8],[13177,8],[13302,8],[13416,8],[14559,8],[14645,8],[14777,8],[14866,8],[15007,8],[15122,8],[15235,8],[15332,8],[15460,8],[15587,8],[15712,8],[15826,8],[16973,8],[17059,8],[17191,8],[17280,8],[17421,8],[17536,8],[17649,8],[17746,8],[17874,8],[18001,8],[18126,8],[18240,8],[19479,8],[19565,8],[19697,8],[19786,8],[19927,8],[20042,8],[20155,8],[20252,8],[20380,8],[20507,8],[20632,8],[20746,8],[22805,8],[22891,8],[22992,8],[23081,8],[23191,8],[23320,8],[23447,8],[23558,8],[23656,8],[23783,8],[23908,8],[24022,8]]}}}],["iconname.check2al",{"_index":2927,"t":{"540":{"position":[[12256,19]]},"560":{"position":[[7765,19],[11589,19]]}}}],["iconname.checkcirclefil",{"_index":3452,"t":{"566":{"position":[[2197,25],[3623,25],[5540,25],[7822,25],[10155,25],[12608,25],[15018,25],[17432,25],[19938,25],[23202,25]]}}}],["iconname.currencydollar",{"_index":3464,"t":{"566":{"position":[[4173,24],[6120,24],[8402,24],[10735,24],[13188,24],[15598,24],[18012,24],[20518,24],[23794,24]]}}}],["iconname.exclamationtrianglefil",{"_index":3459,"t":{"566":{"position":[[3513,33],[5399,33],[7681,33],[10014,33],[12467,33],[14877,33],[17291,33],[19797,33],[23092,33]]}}}],["iconname.housedoorfil",{"_index":3188,"t":{"552":{"position":[[1413,23]]},"554":{"position":[[1408,23]]},"566":{"position":[[2103,23],[3237,23],[5092,23],[7374,23],[9707,23],[12160,23],[14570,23],[16984,23],[19490,23],[22816,23]]}}}],["iconname.inputcursor",{"_index":3465,"t":{"566":{"position":[[4298,21],[6245,21],[8527,21],[10860,21],[13313,21],[15723,21],[18137,21],[20643,21],[23919,21]]}}}],["iconname.inputcursortext",{"_index":3453,"t":{"566":{"position":[[2290,25],[4046,25],[5993,25],[8275,25],[10608,25],[13061,25],[15471,25],[17885,25],[20391,25],[23667,25]]}}}],["iconname.layoutsidebarinset",{"_index":3455,"t":{"566":{"position":[[2477,28],[3323,28],[3851,28],[5178,28],[5768,28],[7460,28],[8050,28],[9793,28],[10383,28],[12246,28],[12836,28],[14656,28],[15246,28],[17070,28],[17660,28],[19576,28],[20166,28],[22902,28],[23458,28]]}}}],["iconname.non",{"_index":3446,"t":{"566":{"position":[[1168,13]]}}}],["iconname.personsquar",{"_index":3457,"t":{"566":{"position":[[3424,22],[5310,22],[7592,22],[9925,22],[12378,22],[14788,22],[17202,22],[19708,22],[23003,22]]}}}],["iconname.plussquarefil",{"_index":3190,"t":{"552":{"position":[[1531,24]]},"554":{"position":[[1526,24]]}}}],["iconname.segmentednav",{"_index":3454,"t":{"566":{"position":[[2388,22],[3738,22],[5655,22],[7937,22],[10270,22],[12723,22],[15133,22],[17547,22],[20053,22],[23331,22]]}}}],["iconname.t",{"_index":3192,"t":{"552":{"position":[[1631,15]]},"554":{"position":[[1626,15]]}}}],["iconname.toggleon",{"_index":3466,"t":{"566":{"position":[[4412,18],[6359,18],[8641,18],[10974,18],[13427,18],[15837,18],[18251,18],[20757,18],[24033,18]]}}}],["iconname.windowplu",{"_index":3461,"t":{"566":{"position":[[3948,20],[5865,20],[8147,20],[10480,20],[12933,20],[15343,20],[17757,20],[20263,20],[23569,20]]}}}],["iconname=\"iconname.bootstrapfil",{"_index":3171,"t":{"552":{"position":[[657,33]]},"554":{"position":[[652,33]]},"566":{"position":[[1611,33],[2735,33],[4590,33],[6626,33],[8886,33],[11320,33],[18572,33],[22314,33]]}}}],["icons",{"_index":2190,"t":{"526":{"position":[[678,8]]}}}],["icons.css",{"_index":2182,"t":{"526":{"position":[[349,10]]},"548":{"position":[[751,10]]},"550":{"position":[[741,10]]},"556":{"position":[[741,10]]}}}],["icons1",{"_index":682,"t":{"120":{"position":[[1413,6]]}}}],["icons@1.10.3/font/bootstrap",{"_index":3127,"t":{"548":{"position":[[723,27]]},"550":{"position":[[713,27]]},"556":{"position":[[713,27]]}}}],["icons@1.11.0/font/bootstrap",{"_index":2181,"t":{"526":{"position":[[321,27]]}}}],["iconsize.non",{"_index":2191,"t":{"526":{"position":[[715,13]]}}}],["icustomerservic",{"_index":2736,"t":{"538":{"position":[[6373,16],[9891,16],[11619,16],[13113,16]]},"568":{"position":[[112381,16],[115005,16],[117666,16],[120442,16]]}}}],["id",{"_index":449,"t":{"78":{"position":[[182,2]]},"510":{"position":[[3306,2]]},"512":{"position":[[4154,2],[6110,2],[8084,2],[8621,2],[8818,2],[9333,3],[10290,2],[10994,2],[11176,2],[12325,2],[12862,2],[13059,2],[13574,3],[14531,2],[15235,2],[15417,2],[16466,2],[17003,2],[17200,2],[17715,3],[18672,2],[19376,2],[19558,2]]},"516":{"position":[[4694,2],[6582,2]]},"524":{"position":[[1365,2],[1388,3]]},"532":{"position":[[2462,2],[2534,2]]},"534":{"position":[[4425,2],[4497,2]]},"552":{"position":[[1380,2],[1491,2],[1589,2]]},"554":{"position":[[1375,2],[1486,2],[1584,2]]},"566":{"position":[[1216,2],[1249,3],[1390,3],[2600,2],[3189,2],[3302,2],[3386,2],[3492,2],[3584,2],[3695,2],[3811,2],[3927,2],[4001,2],[4125,2],[4252,2],[4372,2],[5044,2],[5157,2],[5272,2],[5378,2],[5501,2],[5612,2],[5728,2],[5844,2],[5948,2],[6072,2],[6199,2],[6319,2],[7326,2],[7439,2],[7554,2],[7660,2],[7783,2],[7894,2],[8010,2],[8126,2],[8230,2],[8354,2],[8481,2],[8601,2],[9659,2],[9772,2],[9887,2],[9993,2],[10116,2],[10227,2],[10343,2],[10459,2],[10563,2],[10687,2],[10814,2],[10934,2],[12112,2],[12225,2],[12340,2],[12446,2],[12569,2],[12680,2],[12796,2],[12912,2],[13016,2],[13140,2],[13267,2],[13387,2],[14522,2],[14635,2],[14750,2],[14856,2],[14979,2],[15090,2],[15206,2],[15322,2],[15426,2],[15550,2],[15677,2],[15797,2],[16936,2],[17049,2],[17164,2],[17270,2],[17393,2],[17504,2],[17620,2],[17736,2],[17840,2],[17964,2],[18091,2],[18211,2],[19442,2],[19555,2],[19670,2],[19776,2],[19899,2],[20010,2],[20126,2],[20242,2],[20346,2],[20470,2],[20597,2],[20717,2],[22768,2],[22881,2],[22965,2],[23071,2],[23163,2],[23288,2],[23418,2],[23548,2],[23622,2],[23746,2],[23873,2],[23993,2]]},"568":{"position":[[7642,2],[7766,2],[7897,2],[8021,2],[8150,2],[8283,2],[8403,2],[8525,2],[8648,2],[9987,2],[10111,2],[10242,2],[10366,2],[10495,2],[10628,2],[10748,2],[10870,2],[10993,2],[12363,2],[12487,2],[12618,2],[12742,2],[12871,2],[13004,2],[13124,2],[13246,2],[13376,2],[13501,2],[13624,2],[13743,2],[15135,2],[15259,2],[15390,2],[15514,2],[15643,2],[15776,2],[15896,2],[16018,2],[16141,2],[17554,2],[17678,2],[17809,2],[17933,2],[18062,2],[18195,2],[18315,2],[18437,2],[18567,2],[18692,2],[18815,2],[18934,2],[20306,2],[20430,2],[20561,2],[20685,2],[20814,2],[20947,2],[21067,2],[21189,2],[21312,2],[22708,2],[22832,2],[22963,2],[23087,2],[23216,2],[23349,2],[23469,2],[23591,2],[23714,2],[25774,2],[26012,2],[26254,2],[26491,2],[26731,2],[26983,2],[27213,2],[27452,2],[27692,2],[31785,2],[31909,2],[32040,2],[32164,2],[32293,2],[32426,2],[32546,2],[32668,2],[32791,2],[34150,2],[34274,2],[34405,2],[34529,2],[34658,2],[34791,2],[34911,2],[35033,2],[35156,2],[36515,2],[36639,2],[36770,2],[36894,2],[37023,2],[37156,2],[37276,2],[37398,2],[37521,2],[38920,2],[39025,2],[39140,2],[39247,2],[39360,2],[39480,2],[39583,2],[39688,2],[39795,2],[41178,2],[41283,2],[41398,2],[41505,2],[41618,2],[41738,2],[41841,2],[41946,2],[42053,2],[43803,2],[44041,2],[44283,2],[44520,2],[44760,2],[45012,2],[45242,2],[45481,2],[45721,2],[47156,2],[47280,2],[47411,2],[47535,2],[47664,2],[47797,2],[47917,2],[48039,2],[48169,2],[48294,2],[48417,2],[48536,2],[52801,2],[52925,2],[53056,2],[53180,2],[53309,2],[53442,2],[53562,2],[53684,2],[53814,2],[53939,2],[54062,2],[54181,2],[55440,2],[55564,2],[55695,2],[55819,2],[55948,2],[56159,2],[56279,2],[56401,2],[56524,2],[57893,2],[58017,2],[58148,2],[58272,2],[58401,2],[61605,2],[61729,2],[61860,2],[61984,2],[62113,2],[62246,2],[62366,2],[62488,2],[62618,2],[62743,2],[62866,2],[62985,2],[64826,2],[64950,2],[65081,2],[65205,2],[65334,2],[65467,2],[65587,2],[65709,2],[65839,2],[65964,2],[66087,2],[66206,2],[68203,2],[68327,2],[68458,2],[68582,2],[68711,2],[68844,2],[68964,2],[69086,2],[69216,2],[69341,2],[69464,2],[69583,2],[71341,2],[71465,2],[71596,2],[71720,2],[71849,2],[71982,2],[72102,2],[72224,2],[72347,2],[74316,2],[74440,2],[74571,2],[74695,2],[74824,2],[74957,2],[75077,2],[75199,2],[75322,2],[75887,2],[75967,2],[77613,2],[77737,2],[77868,2],[77992,2],[78121,2],[78254,2],[78374,2],[78496,2],[78619,2],[80704,2],[80828,2],[80959,2],[81083,2],[81212,2],[81345,2],[81465,2],[81587,2],[81717,2],[81842,2],[81965,2],[82084,2],[83470,2],[83594,2],[83725,2],[83849,2],[83978,2],[84111,2],[84231,2],[84353,2],[84483,2],[84608,2],[84731,2],[84850,2],[88699,2],[88830,2],[88954,2],[89083,2],[89216,2],[89336,2],[96929,2],[97060,2],[97184,2],[97313,2],[97446,2],[97566,2],[99120,2],[99251,2],[99375,2],[99504,2],[99637,2],[99757,2],[100045,5],[101558,2],[101689,2],[101813,2],[101942,2],[102075,2],[102195,2],[102496,5],[105549,2],[105673,2],[105804,2],[105928,2],[106057,2],[106190,2],[106310,2],[106432,2],[106562,2],[106687,2],[106810,2],[106929,2],[109429,2],[109553,2],[109685,2],[109809,2],[109938,2],[110071,2],[110191,2],[110313,2],[110436,2],[110535,2]]}}}],["id=\"nam",{"_index":2764,"t":{"538":{"position":[[9491,9]]}}}],["idictionari",{"_index":1510,"t":{"510":{"position":[[2298,12]]},"512":{"position":[[3528,12]]},"516":{"position":[[4098,12]]}}}],["idictionarydangerdarkinfolightprimarysecondarysuccesswarninginfoa",{"_index":1147,"t":{"502":{"position":[[4974,7],[5021,7],[5672,7],[5719,7]]}}}],["item\">an",{"_index":1145,"t":{"502":{"position":[[4933,8],[5631,8]]}}}],["item'",{"_index":1406,"t":{"508":{"position":[[1920,6],[2470,6],[3020,6],[3784,6],[4408,6],[5031,6],[5774,6],[6324,6],[6874,6],[7578,6],[8144,6],[8694,6],[9410,6],[9960,6],[10510,6],[11398,6],[11960,6],[12522,6],[13080,6],[13628,6],[14188,6],[16343,6],[16915,6],[17487,6]]}}}],["item.address",{"_index":3939,"t":{"568":{"position":[[111863,13],[114433,13],[117094,13],[119790,13]]}}}],["item.countri",{"_index":3952,"t":{"568":{"position":[[112279,13],[114903,13],[117564,13],[120340,13]]}}}],["item.customerid",{"_index":3920,"t":{"568":{"position":[[111017,16],[113546,16],[116207,16],[118902,16]]}}}],["item.customernam",{"_index":3925,"t":{"568":{"position":[[111301,18],[113871,18],[116532,18],[119228,18]]}}}],["item.design",{"_index":3653,"t":{"568":{"position":[[14698,18],[17074,18],[29101,18],[31341,19],[51125,18],[60588,18],[63915,18],[67122,18],[85496,18],[86298,18],[87086,18],[87888,18],[90139,18],[91130,18],[92119,18],[93110,18],[94095,18],[95080,18],[96075,18],[98248,18],[100686,18],[103586,18]]}}}],["item.doj",{"_index":3654,"t":{"568":{"position":[[14824,10],[17219,10],[29422,10],[31470,11],[33835,11],[51270,10],[60733,10],[64060,10],[67267,10],[85622,10],[86424,10],[87212,10],[88014,10],[90284,10],[91275,10],[92264,10],[93255,10],[94240,10],[95225,10],[96220,10],[98374,10],[100812,10],[103731,10]]}}}],["item.email",{"_index":3934,"t":{"568":{"position":[[111676,11],[114246,11],[116907,11],[119603,11]]}}}],["item.firstnam",{"_index":3712,"t":{"568":{"position":[[28749,16]]}}}],["item.id",{"_index":3651,"t":{"568":{"position":[[14460,9],[16789,9],[28587,9],[31029,10],[33491,10],[50770,8],[60303,9],[63630,9],[66837,9],[85258,9],[86060,9],[86848,9],[87650,9],[89854,9],[90845,9],[91834,9],[92825,9],[93810,9],[94795,9],[95790,9],[98010,9],[100448,9],[103301,9]]}}}],["item.isact",{"_index":3655,"t":{"568":{"position":[[14937,15],[17356,15],[29580,15],[31586,16],[33951,16],[51407,15],[60870,15],[64197,14],[85735,15],[86537,15],[87325,15],[88127,15],[90421,15],[91412,15],[92401,15],[93392,15],[94377,15],[95362,15],[96357,15],[98487,15],[100925,15],[103868,15]]}}}],["item.lastnam",{"_index":3714,"t":{"568":{"position":[[28922,15]]}}}],["item.nam",{"_index":3652,"t":{"568":{"position":[[14578,11],[16927,11],[31150,11],[33612,12],[50978,11],[60441,11],[63768,11],[66975,11],[85376,11],[86178,11],[86966,11],[87768,11],[89992,11],[90983,11],[91972,11],[92963,11],[93948,11],[94933,11],[95928,11],[98128,11],[100566,11],[103439,11]]}}}],["item.phon",{"_index":3930,"t":{"568":{"position":[[111495,11],[114065,11],[116726,11],[119422,11]]}}}],["item.postalzip",{"_index":3946,"t":{"568":{"position":[[112061,15],[114631,15],[117292,15],[120068,15]]}}}],["item.salari",{"_index":3717,"t":{"568":{"position":[[29271,13]]}}}],["item(\"window.localstorage.getitem",{"_index":3774,"t":{"568":{"position":[[52453,53]]}}}],["js.invokevoidasync(\"window.localstorage.setitem",{"_index":3769,"t":{"568":{"position":[[52264,49]]}}}],["jsonserializer.deserialize(settingsjson",{"_index":3776,"t":{"568":{"position":[[52598,55]]}}}],["jsonserializer.serialize(set",{"_index":3770,"t":{"568":{"position":[[52331,36]]}}}],["juli",{"_index":69,"t":{"2":{"position":[[1554,4],[1840,4],[2092,4],[2311,4],[2531,4]]},"26":{"position":[[23,4]]},"90":{"position":[[24,4]]},"92":{"position":[[24,4]]},"94":{"position":[[24,4]]},"98":{"position":[[24,4]]},"104":{"position":[[24,4]]},"118":{"position":[[209,4]]},"128":{"position":[[1598,4],[1884,4],[2136,4],[2355,4],[2575,4]]},"140":{"position":[[872,4],[1341,4],[1381,4],[1420,4],[1459,4],[1498,4]]},"204":{"position":[[1607,4],[1893,4],[2145,4],[2364,4],[2584,4]]},"216":{"position":[[78,4]]},"220":{"position":[[262,4]]},"244":{"position":[[613,4],[899,4]]},"252":{"position":[[79,4]]},"254":{"position":[[504,4],[790,4],[1042,4]]},"272":{"position":[[76,4]]},"278":{"position":[[1602,4],[1888,4],[2140,4],[2359,4],[2579,4]]},"280":{"position":[[1601,4],[1887,4],[2139,4],[2358,4],[2578,4]]},"284":{"position":[[73,4]]},"290":{"position":[[79,4]]},"292":{"position":[[72,4]]},"330":{"position":[[882,4],[1168,4]]},"346":{"position":[[505,4]]},"356":{"position":[[1258,4]]},"360":{"position":[[774,4],[1060,4],[1312,4],[2936,4]]},"374":{"position":[[70,4]]},"376":{"position":[[67,4]]},"380":{"position":[[74,4]]},"408":{"position":[[67,4]]},"482":{"position":[[68,4]]},"484":{"position":[[68,4]]},"486":{"position":[[68,4]]},"488":{"position":[[68,4]]},"490":{"position":[[68,4]]},"532":{"position":[[5052,7]]},"534":{"position":[[10864,7],[13725,7]]},"562":{"position":[[8036,7]]}}}],["june",{"_index":195,"t":{"22":{"position":[[23,4]]},"84":{"position":[[24,4]]},"86":{"position":[[24,4]]},"88":{"position":[[24,4]]},"110":{"position":[[24,4],[362,4],[620,4]]},"118":{"position":[[406,4]]},"140":{"position":[[911,4],[1537,4],[1577,4],[1617,4]]},"192":{"position":[[68,4],[406,4],[664,4]]},"208":{"position":[[77,4],[415,4],[673,4]]},"218":{"position":[[73,4]]},"220":{"position":[[459,4]]},"236":{"position":[[76,4]]},"244":{"position":[[1118,4],[1376,4]]},"248":{"position":[[353,4]]},"252":{"position":[[331,4]]},"254":{"position":[[1262,4]]},"260":{"position":[[76,4]]},"266":{"position":[[72,4]]},"276":{"position":[[73,4]]},"282":{"position":[[72,4],[410,4],[668,4]]},"294":{"position":[[67,4]]},"300":{"position":[[71,4],[409,4],[667,4]]},"316":{"position":[[66,4]]},"318":{"position":[[70,4]]},"330":{"position":[[1387,4],[1645,4]]},"336":{"position":[[347,4]]},"346":{"position":[[757,4]]},"350":{"position":[[72,4]]},"360":{"position":[[1532,4]]},"362":{"position":[[69,4]]},"368":{"position":[[66,4]]},"372":{"position":[[66,4]]},"382":{"position":[[67,4]]},"406":{"position":[[67,4]]},"474":{"position":[[68,4]]},"478":{"position":[[68,4]]},"480":{"position":[[68,4]]},"532":{"position":[[5044,7]]},"534":{"position":[[10856,7],[13717,7]]},"562":{"position":[[8028,7]]}}}],["justifi",{"_index":1288,"t":{"504":{"position":[[6337,7]]},"552":{"position":[[796,7]]},"554":{"position":[[791,7]]},"566":{"position":[[6765,7],[9025,7],[11478,7],[13888,7],[16302,7],[18730,7]]}}}],["justo",{"_index":1689,"t":{"512":{"position":[[8128,5],[10049,6],[10131,5],[12369,5],[14290,6],[14372,5],[16510,5],[18431,6],[18513,5]]}}}],["k",{"_index":2717,"t":{"538":{"position":[[3805,4],[5676,4],[8301,4]]},"568":{"position":[[27024,4],[45053,4]]}}}],["keep",{"_index":847,"t":{"492":{"position":[[2042,4]]},"508":{"position":[[7452,4],[9252,4]]},"548":{"position":[[3095,4]]},"550":{"position":[[3257,4]]},"556":{"position":[[2738,4]]}}}],["kenu1kfdbie4zvf0s0g1m5b4hcpxyd9f7jl+jjxkk+q2h455ryxk/7hauojl+0i4",{"_index":3136,"t":{"548":{"position":[[1470,65]]},"550":{"position":[[1631,65]]},"556":{"position":[[1109,65]]}}}],["key",{"_index":1568,"t":{"512":{"position":[[414,3],[5139,3]]},"516":{"position":[[499,3],[2583,3],[5684,3],[7606,3],[7873,4]]},"538":{"position":[[2199,3]]}}}],["keyboard",{"_index":365,"t":{"60":{"position":[[131,8],[252,8]]},"112":{"position":[[2248,8]]},"126":{"position":[[1763,8]]},"194":{"position":[[2292,8]]},"200":{"position":[[1320,8]]},"212":{"position":[[2301,8]]},"446":{"position":[[175,8]]},"492":{"position":[[3616,8]]},"502":{"position":[[1929,8]]},"504":{"position":[[1166,8]]},"516":{"position":[[2615,8],[2642,8]]},"538":{"position":[[2067,8],[2151,8],[13921,8]]},"564":{"position":[[1278,8],[1656,8],[2610,8]]}}}],["keystrok",{"_index":2649,"t":{"538":{"position":[[2019,9]]},"540":{"position":[[1240,9]]},"542":{"position":[[1702,9],[14298,9]]},"546":{"position":[[1192,9],[10549,9]]},"560":{"position":[[1244,9]]}}}],["keystroke/select",{"_index":2889,"t":{"540":{"position":[[8980,19]]},"560":{"position":[[8595,19]]}}}],["kick",{"_index":1540,"t":{"510":{"position":[[4721,4]]},"516":{"position":[[11375,4]]}}}],["kind",{"_index":838,"t":{"492":{"position":[[1943,4]]}}}],["kitchen",{"_index":1150,"t":{"502":{"position":[[5078,7],[13630,7]]}}}],["kleiner",{"_index":3885,"t":{"568":{"position":[[104420,8]]}}}],["know",{"_index":2051,"t":{"522":{"position":[[135,4]]},"524":{"position":[[388,4]]}}}],["known",{"_index":3129,"t":{"548":{"position":[[1052,5]]},"550":{"position":[[1037,5]]}}}],["komala",{"_index":2697,"t":{"538":{"position":[[3634,7],[5505,7],[8130,7]]}}}],["l",{"_index":684,"t":{"120":{"position":[[1441,1]]},"538":{"position":[[3865,4],[5736,4],[8361,4]]}}}],["label",{"_index":310,"t":{"46":{"position":[[261,6]]},"94":{"position":[[439,5]]},"102":{"position":[[590,6]]},"108":{"position":[[356,5]]},"498":{"position":[[106,7]]},"520":{"position":[[193,7],[583,5],[626,6],[972,6],[1877,7],[1889,6],[1943,5],[8288,6]]},"532":{"position":[[795,6],[840,7],[1868,6],[2292,5],[2314,5],[5221,6],[7658,5],[8104,6],[8229,7],[8637,6],[9092,6],[9101,7],[10086,6],[10236,5],[10509,5],[10780,5],[11041,6],[11050,7],[12314,6],[12464,5],[12737,5],[13008,5],[13269,6],[13278,7],[14114,7],[14412,6],[14562,5],[14835,5],[15106,5],[15367,6],[15376,7],[16087,6],[16552,6]]},"534":{"position":[[869,6],[914,7],[1803,6],[2443,5],[2465,5],[7120,6],[9511,5],[10148,6],[10273,7],[10780,6],[11014,5],[11558,5],[12100,5],[12630,6],[12639,7],[13338,7],[13641,6],[13873,5],[14482,5],[15089,5],[15690,6],[15699,7],[16372,6],[16813,6]]},"536":{"position":[[665,6],[710,7],[1501,6],[3920,6],[6057,5],[6604,6],[6751,7],[6969,7],[7714,6],[8076,6],[9928,5],[10475,6],[10622,7],[11049,6]]},"538":{"position":[[8935,6],[9389,6]]},"540":{"position":[[7388,6],[7680,6],[9994,6],[10303,6],[10702,6]]},"542":{"position":[[2134,6],[2360,6],[2586,6],[2812,6],[3038,6],[3264,6],[3490,6],[3716,6],[3942,6],[6057,6],[6187,6],[6320,6],[6455,6],[6592,6],[6729,6],[6868,6],[7007,6],[7821,6],[8396,6],[8650,6],[9132,6],[9562,6],[10305,6],[11403,6],[11829,6],[12238,6],[14369,6]]},"544":{"position":[[273,5],[308,6]]},"546":{"position":[[1361,6],[1783,6],[1911,6],[2042,6],[2175,6],[2310,6],[2445,6],[2582,6],[2719,6],[3529,6],[4027,6],[4322,6],[4882,6],[5108,6],[5562,6],[5962,6],[6701,6],[7782,6],[8165,6],[8531,6],[10618,6]]},"548":{"position":[[1986,5]]},"550":{"position":[[2147,5]]},"556":{"position":[[1625,5]]},"560":{"position":[[5574,6],[5911,6],[6236,6],[6540,6],[6859,6],[9594,6],[9995,6]]},"562":{"position":[[890,6],[935,7],[1671,6],[2044,5],[2066,5],[4232,6],[6503,5],[7050,6],[7197,7],[7952,6],[8186,5],[8730,5],[9272,5],[9802,6],[9811,7],[10545,7],[11320,6],[11702,6],[13702,5],[14249,6],[14396,7],[14841,6]]},"564":{"position":[[17211,5],[19379,6],[19703,6],[20010,6]]}}}],["label\">address:amountarriv",{"_index":3262,"t":{"560":{"position":[[6572,14],[6891,14],[10027,14]]}}}],["label\">cours",{"_index":2899,"t":{"540":{"position":[[10026,13]]}}}],["label\">custom",{"_index":2877,"t":{"540":{"position":[[7712,15]]}}}],["label\">customer:departur",{"_index":3257,"t":{"560":{"position":[[5943,16],[6268,16],[9626,16]]}}}],["label\">end",{"_index":2906,"t":{"540":{"position":[[10734,10]]}}}],["label\">ent",{"_index":3018,"t":{"542":{"position":[[6076,12],[6206,12],[6339,12],[6474,12],[6611,12],[6748,12],[6887,12],[7026,12]]},"546":{"position":[[1802,12],[1930,12],[2061,12],[2194,12],[2329,12],[2464,12],[2601,12],[2738,12]]}}}],["label\">flight",{"_index":3253,"t":{"560":{"position":[[5606,13]]}}}],["label\">invoic",{"_index":2873,"t":{"540":{"position":[[7420,14]]}}}],["label\">item",{"_index":3037,"t":{"542":{"position":[[11435,11],[11861,11],[14401,11]]},"546":{"position":[[7814,11],[8197,11],[10650,11]]},"564":{"position":[[19398,11],[19722,11]]}}}],["label\">local",{"_index":2954,"t":{"542":{"position":[[2153,14],[2379,14],[2605,14],[2831,14],[3057,14],[3283,14],[3509,14],[3735,14],[3961,14]]}}}],["label\">start",{"_index":2902,"t":{"540":{"position":[[10335,12]]}}}],["label\">tot",{"_index":3047,"t":{"542":{"position":[[12270,12]]},"546":{"position":[[8563,12]]},"564":{"position":[[20029,12]]}}}],["label=\"20",{"_index":2008,"t":{"520":{"position":[[1140,11],[2047,11]]}}}],["label=\"30",{"_index":2040,"t":{"520":{"position":[[4533,11]]}}}],["label=\"check",{"_index":3079,"t":{"544":{"position":[[813,14]]}}}],["label=\"default",{"_index":3077,"t":{"544":{"position":[[743,14],[2497,14]]}}}],["label=\"dis",{"_index":3088,"t":{"544":{"position":[[1146,15],[1830,15]]}}}],["label=\"revers",{"_index":3094,"t":{"544":{"position":[[2309,14]]}}}],["labels.add(getnextdatalabel",{"_index":2429,"t":{"532":{"position":[[8188,31]]},"534":{"position":[[10232,31]]},"536":{"position":[[6688,31],[10559,31]]},"562":{"position":[[7134,31],[14333,31]]}}}],["labelscount",{"_index":2388,"t":{"532":{"position":[[4951,11],[6621,12],[7967,12],[8275,11]]},"534":{"position":[[7002,11],[10011,12],[10319,11],[10350,15]]}}}],["lacinia",{"_index":1663,"t":{"512":{"position":[[7886,7],[8553,7],[8624,7],[12127,7],[12794,7],[12865,7],[16268,7],[16935,7],[17006,7]]}}}],["lacu",{"_index":1742,"t":{"512":{"position":[[9308,6],[9789,6],[10088,5],[13549,6],[14030,6],[14329,5],[17690,6],[18171,6],[18470,5]]}}}],["lakhsmi",{"_index":2714,"t":{"538":{"position":[[3779,10],[5650,10],[8275,10]]}}}],["land",{"_index":294,"t":{"42":{"position":[[540,7]]}}}],["languag",{"_index":380,"t":{"66":{"position":[[238,8]]}}}],["laoreet",{"_index":1643,"t":{"512":{"position":[[7687,8],[7696,7],[9396,8],[10495,8],[10608,7],[11928,8],[11937,7],[13637,8],[14736,8],[14849,7],[16069,8],[16078,7],[17778,8],[18877,8],[18990,7]]}}}],["larg",{"_index":947,"t":{"496":{"position":[[2820,5],[5366,5]]},"500":{"position":[[254,5]]},"504":{"position":[[3598,5],[3678,5],[4305,5],[4401,5]]},"510":{"position":[[4871,5],[4915,5],[5177,5],[5313,5]]},"512":{"position":[[15842,5],[19828,5]]},"514":{"position":[[1327,5],[1446,5]]},"516":{"position":[[11495,5],[11875,5]]},"558":{"position":[[3668,5]]}}}],["larger",{"_index":1020,"t":{"498":{"position":[[2471,6]]},"504":{"position":[[3447,6]]},"514":{"position":[[2219,6]]}}}],["last",{"_index":1397,"t":{"508":{"position":[[666,4]]},"514":{"position":[[621,4],[670,4],[740,4]]},"528":{"position":[[503,4]]},"538":{"position":[[2471,4]]}}}],["lastlinkicon",{"_index":1806,"t":{"514":{"position":[[586,12],[713,12]]}}}],["lastlinkicon=\"iconname.chevrondoubleright",{"_index":1834,"t":{"514":{"position":[[1945,42]]}}}],["lastlinktext",{"_index":1807,"t":{"514":{"position":[[637,12],[686,12]]}}}],["lastnam",{"_index":1531,"t":{"510":{"position":[[3853,8]]},"512":{"position":[[4712,8],[6892,8]]},"516":{"position":[[5241,8],[7353,8]]},"568":{"position":[[25805,8],[26041,8],[26284,8],[26520,8],[26763,8],[27013,8],[27245,8],[27483,8],[27722,8],[43834,8],[44070,8],[44313,8],[44549,8],[44792,8],[45042,8],[45274,8],[45512,8],[45751,8]]}}}],["launch",{"_index":1556,"t":{"510":{"position":[[6005,6],[6497,6],[7101,6],[7729,6]]}}}],["laura",{"_index":2723,"t":{"538":{"position":[[3858,6],[5729,6],[8354,6]]}}}],["layout",{"_index":357,"t":{"56":{"position":[[448,6]]},"72":{"position":[[650,6],[668,6],[702,6],[918,6],[966,6]]},"112":{"position":[[2100,6]]},"194":{"position":[[2144,6]]},"212":{"position":[[2153,6]]},"258":{"position":[[733,6]]},"338":{"position":[[21,8],[295,6]]},"342":{"position":[[297,6]]},"348":{"position":[[299,6]]},"366":{"position":[[727,6]]},"450":{"position":[[295,6]]},"522":{"position":[[229,6]]},"532":{"position":[[3086,6]]},"534":{"position":[[5050,6]]},"548":{"position":[[3200,6]]},"550":{"position":[[3363,6]]},"552":{"position":[[0,6],[39,6]]},"554":{"position":[[0,6],[34,6]]},"556":{"position":[[2843,6]]},"566":{"position":[[6454,6],[6557,6],[24270,6]]}}}],["layout1",{"_index":685,"t":{"120":{"position":[[1443,7]]}}}],["layoutcomponentbas",{"_index":2165,"t":{"524":{"position":[[11462,19]]},"552":{"position":[[591,19]]},"554":{"position":[[586,19]]},"558":{"position":[[5033,19]]}}}],["lead",{"_index":1160,"t":{"502":{"position":[[6121,4],[6637,4],[6932,4],[7402,4],[7734,4],[8063,4],[11027,4],[11391,4],[11730,4],[12300,4],[12685,4],[13045,4]]}}}],["lectu",{"_index":1711,"t":{"512":{"position":[[8450,7],[8763,6],[9614,7],[11063,7],[12691,7],[13004,6],[13855,7],[15304,7],[16832,7],[17145,6],[17996,7],[19445,7]]}}}],["left",{"_index":1317,"t":{"504":{"position":[[8000,5],[8515,4]]},"512":{"position":[[2462,5],[6991,4]]},"520":{"position":[[7217,5]]},"530":{"position":[[606,5]]},"532":{"position":[[1760,6]]},"534":{"position":[[1643,6]]},"536":{"position":[[1342,6]]},"542":{"position":[[1310,4]]},"562":{"position":[[1507,6]]},"564":{"position":[[13456,4],[16500,4]]},"568":{"position":[[4648,5]]}}}],["leftful",{"_index":1940,"t":{"516":{"position":[[13353,26]]}}}],["lgmodal?.showasync()\">larg",{"_index":1917,"t":{"516":{"position":[[11948,27]]}}}],["li",{"_index":1144,"t":{"502":{"position":[[4911,3],[4952,3],[4999,3],[5609,3],[5650,3],[5697,3]]}}}],["li>@emp.namelightful",{"_index":1938,"t":{"516":{"position":[[13249,26]]}}}],["mean",{"_index":949,"t":{"496":{"position":[[2856,7],[2917,7],[3195,6],[3344,7],[3405,7],[3683,6],[3833,7],[3894,7],[4172,6],[4319,7],[4380,7],[4658,6],[4804,7],[4865,7],[5143,6]]},"498":{"position":[[1969,7],[2022,7],[2300,6]]},"510":{"position":[[5903,5]]},"516":{"position":[[8524,5]]},"542":{"position":[[5414,5]]}}}],["measur",{"_index":1995,"t":{"520":{"position":[[410,8],[3213,8]]},"568":{"position":[[24220,8]]}}}],["media",{"_index":1351,"t":{"506":{"position":[[1476,5]]}}}],["member",{"_index":2328,"t":{"532":{"position":[[654,8],[870,8],[2608,8],[2801,8],[16375,7],[16399,7],[16433,7],[16457,7]]},"534":{"position":[[798,8],[1015,8],[4572,8],[4764,8],[16663,7],[16688,7],[16723,7],[16748,7]]},"536":{"position":[[594,8],[810,8],[1954,8],[2155,8],[10918,7],[10942,7],[10976,7],[11000,7]]},"558":{"position":[[307,8],[5874,7]]},"562":{"position":[[749,8],[970,8],[2221,8],[2427,8],[14688,7],[14717,7],[14756,7],[14785,7]]}}}],["memori",{"_index":3757,"t":{"568":{"position":[[50320,6]]}}}],["mention",{"_index":3481,"t":{"566":{"position":[[18494,9]]}}}],["menu",{"_index":541,"t":{"96":{"position":[[367,4]]},"516":{"position":[[2779,4]]},"564":{"position":[[672,5],[760,4],[1915,4],[2944,4],[3025,4],[3110,4],[16395,4],[16820,4],[17173,4],[17253,5],[17721,4],[18297,4],[18409,4],[18781,5],[18814,5],[25956,4],[25970,4]]}}}],["menu.99+(titl",{"_index":1881,"t":{"516":{"position":[[4505,46]]}}}],["modal.showasync(titl",{"_index":1883,"t":{"516":{"position":[[6296,46]]}}}],["modal11",{"_index":688,"t":{"120":{"position":[[1463,7]]}}}],["modalful",{"_index":1934,"t":{"516":{"position":[[13052,24]]}}}],["modalfullscreen",{"_index":1852,"t":{"516":{"position":[[731,15]]}}}],["modalfullscreen.dis",{"_index":1853,"t":{"516":{"position":[[781,24]]}}}],["modalopt",{"_index":3197,"t":{"558":{"position":[[277,12],[295,11],[1970,11],[1988,11],[3153,11],[3171,11],[3929,11],[3947,11],[4326,11],[4344,11],[4759,11],[4777,11],[5231,11],[5439,11],[5457,11],[5652,11],[5670,11],[5862,11]]},"568":{"position":[[99967,11],[102411,11]]}}}],["modals",{"_index":1857,"t":{"516":{"position":[[1235,9]]},"558":{"position":[[794,9],[3912,10],[4031,9]]}}}],["modalservic",{"_index":47,"t":{"2":{"position":[[899,12],[2014,12]]},"88":{"position":[[820,12]]},"98":{"position":[[180,12]]},"102":{"position":[[950,12]]},"104":{"position":[[367,12]]},"110":{"position":[[260,12]]},"126":{"position":[[391,12]]},"128":{"position":[[943,12],[2058,12]]},"192":{"position":[[304,12]]},"200":{"position":[[397,12]]},"204":{"position":[[952,12],[2067,12]]},"208":{"position":[[313,12]]},"224":{"position":[[391,12]]},"230":{"position":[[399,12]]},"248":{"position":[[589,12]]},"252":{"position":[[253,12],[567,12]]},"254":{"position":[[390,12],[964,12],[1498,12]]},"258":{"position":[[392,12]]},"266":{"position":[[308,12]]},"274":{"position":[[392,12]]},"276":{"position":[[309,12]]},"278":{"position":[[947,12],[2062,12]]},"280":{"position":[[946,12],[2061,12]]},"282":{"position":[[308,12]]},"298":{"position":[[385,12]]},"300":{"position":[[307,12]]},"310":{"position":[[393,12]]},"328":{"position":[[940,12]]},"336":{"position":[[583,12]]},"346":{"position":[[20,14],[391,12],[679,12],[993,12]]},"360":{"position":[[660,12],[1234,12],[1768,12]]},"366":{"position":[[386,12]]},"372":{"position":[[302,12]]},"382":{"position":[[303,12]]},"386":{"position":[[386,12]]},"436":{"position":[[387,12]]},"480":{"position":[[304,12]]},"488":{"position":[[242,12]]},"558":{"position":[[1862,12],[1875,12],[3045,12],[3058,12],[3821,12],[3834,12],[4237,12],[4250,12],[4670,12],[4683,12],[5140,13],[5283,12],[5296,12]]},"568":{"position":[[98560,12],[98573,12],[100998,12],[101011,12]]}}}],["modalservice.showasync(modalopt",{"_index":3212,"t":{"558":{"position":[[2092,36],[3303,36],[4050,36],[4500,36],[4888,36],[5567,36],[5777,36]]}}}],["modalservice.showasync(new",{"_index":3857,"t":{"568":{"position":[[99940,26],[102384,26]]}}}],["modalservice3",{"_index":689,"t":{"120":{"position":[[1471,13]]}}}],["modalsize.regular",{"_index":1495,"t":{"510":{"position":[[1309,17]]},"516":{"position":[[1264,17]]},"558":{"position":[[833,17]]}}}],["modaltyp",{"_index":1855,"t":{"516":{"position":[[1159,9],[1169,9]]},"558":{"position":[[907,9],[1953,10],[2072,10],[3136,10],[3255,10]]}}}],["modaltype.dang",{"_index":3225,"t":{"558":{"position":[[5751,16]]}}}],["modaltype.light",{"_index":1856,"t":{"516":{"position":[[1208,15]]},"558":{"position":[[946,15]]}}}],["modaltype.primari",{"_index":3858,"t":{"568":{"position":[[99988,18],[102432,18]]}}}],["modaltype.success",{"_index":3224,"t":{"558":{"position":[[5540,17]]}}}],["mode",{"_index":2392,"t":{"532":{"position":[[5382,4],[9256,4],[11189,4],[13451,4],[15515,4]]},"534":{"position":[[7268,4],[12781,4],[15841,4]]},"562":{"position":[[9988,4]]},"568":{"position":[[2457,5]]}}}],["modifi",{"_index":908,"t":{"494":{"position":[[1073,9]]},"508":{"position":[[2170,6],[2721,6],[3271,6],[4034,6],[4659,6],[5282,6],[6024,6],[6575,6],[7125,6],[7828,6],[8395,6],[8945,6],[9660,6],[10211,6],[10761,6],[11648,6],[12211,6],[12773,6],[13331,6],[13879,6],[14439,6],[16593,6],[17166,6],[17738,6]]}}}],["molesti",{"_index":1708,"t":{"512":{"position":[[8427,8],[9572,8],[9907,8],[9979,8],[12668,8],[13813,8],[14148,8],[14220,8],[16809,8],[17954,8],[18289,8],[18361,8]]}}}],["molli",{"_index":1647,"t":{"512":{"position":[[7733,6],[7821,7],[9376,6],[10097,6],[11974,6],[12062,7],[13617,6],[14338,6],[16115,6],[16203,7],[17758,6],[18479,6]]}}}],["moment",{"_index":1072,"t":{"500":{"position":[[343,6]]},"504":{"position":[[8611,7]]},"566":{"position":[[2663,7]]},"568":{"position":[[30017,6],[112752,6],[115376,6],[118037,6],[120813,6]]}}}],["monoton",{"_index":2523,"t":{"534":{"position":[[4303,8]]}}}],["month",{"_index":2389,"t":{"532":{"position":[[4985,6]]}}}],["months[labelscount",{"_index":2430,"t":{"532":{"position":[[8300,18]]}}}],["more",{"_index":26,"t":{"2":{"position":[[270,4],[552,4],[984,4],[1232,4],[1525,4],[1811,4],[2063,4],[2282,4],[2502,4],[2808,4]]},"4":{"position":[[108,4]]},"42":{"position":[[186,7]]},"44":{"position":[[133,4]]},"48":{"position":[[174,4]]},"50":{"position":[[149,4]]},"52":{"position":[[142,4]]},"54":{"position":[[133,4]]},"56":{"position":[[131,4]]},"58":{"position":[[137,4]]},"60":{"position":[[164,4]]},"64":{"position":[[138,4]]},"74":{"position":[[375,4]]},"110":{"position":[[333,4],[591,4],[891,4],[1145,4],[1577,4],[1822,4],[2070,4],[2340,4],[2674,4],[3088,4]]},"112":{"position":[[338,4],[586,4],[729,4],[836,4],[978,4],[1085,4],[1534,4],[1672,4],[1844,4],[1980,4],[2112,4],[2281,4],[2401,4],[2548,4],[2660,4],[2814,4],[2989,4]]},"114":{"position":[[174,4],[401,4],[539,4],[714,4],[905,7],[1055,4],[1370,4],[1633,4],[1902,4],[2375,4],[2581,4],[2785,4]]},"116":{"position":[[185,4],[298,4],[379,4],[622,4]]},"118":{"position":[[181,4],[378,4],[572,4],[770,4],[968,4],[1199,4],[1400,4],[1629,4],[1799,4],[2035,4]]},"122":{"position":[[376,4]]},"124":{"position":[[267,4]]},"126":{"position":[[476,4],[908,4],[1178,4],[1627,4],[1796,4],[1916,4],[2389,4],[2595,4]]},"128":{"position":[[314,4],[596,4],[1028,4],[1276,4],[1569,4],[1855,4],[2107,4],[2326,4],[2546,4],[2852,4]]},"130":{"position":[[501,4]]},"132":{"position":[[372,4]]},"134":{"position":[[318,4]]},"136":{"position":[[195,4],[307,4],[461,4],[636,4],[815,4],[1042,4],[1180,4],[1355,4],[1546,7],[1696,4]]},"138":{"position":[[315,4]]},"142":{"position":[[208,4],[383,4]]},"144":{"position":[[224,4],[451,4],[589,4],[764,4]]},"146":{"position":[[232,4],[459,4],[597,4],[772,4]]},"148":{"position":[[323,4]]},"150":{"position":[[186,4],[293,4],[435,4],[542,4],[805,4]]},"152":{"position":[[317,4]]},"154":{"position":[[315,4]]},"156":{"position":[[243,7],[393,4]]},"158":{"position":[[314,4]]},"160":{"position":[[236,7],[386,4]]},"162":{"position":[[319,4]]},"164":{"position":[[200,4],[375,4]]},"166":{"position":[[187,4],[362,4]]},"168":{"position":[[243,7],[393,4]]},"170":{"position":[[363,4]]},"172":{"position":[[318,4]]},"174":{"position":[[225,4],[452,4],[590,4],[765,4]]},"176":{"position":[[367,4]]},"178":{"position":[[187,4],[362,4]]},"180":{"position":[[225,4],[452,4],[590,4],[765,4]]},"182":{"position":[[506,4]]},"184":{"position":[[235,7],[385,4]]},"186":{"position":[[498,4]]},"188":{"position":[[224,4],[451,4]]},"190":{"position":[[293,4],[608,4]]},"192":{"position":[[377,4],[635,4],[935,4],[1189,4],[1621,4],[1866,4],[2114,4],[2384,4],[2718,4],[3132,4]]},"194":{"position":[[382,4],[630,4],[773,4],[880,4],[1022,4],[1129,4],[1578,4],[1716,4],[1888,4],[2024,4],[2156,4],[2325,4],[2445,4],[2592,4],[2704,4],[2858,4],[3033,4]]},"196":{"position":[[218,4],[445,4],[583,4],[758,4],[949,7],[1099,4]]},"198":{"position":[[382,4]]},"200":{"position":[[482,4],[914,4],[1184,4],[1353,4],[1473,4]]},"202":{"position":[[378,4]]},"204":{"position":[[323,4],[605,4],[1037,4],[1285,4],[1578,4],[1864,4],[2116,4],[2335,4],[2555,4],[2861,4]]},"206":{"position":[[515,4]]},"208":{"position":[[386,4],[644,4],[944,4],[1198,4],[1630,4],[1875,4],[2123,4],[2393,4],[2727,4],[3141,4]]},"210":{"position":[[238,4],[351,4],[432,4],[675,4]]},"212":{"position":[[391,4],[639,4],[782,4],[889,4],[1031,4],[1138,4],[1587,4],[1725,4],[1897,4],[2033,4],[2165,4],[2334,4],[2454,4],[2601,4],[2713,4],[2867,4],[3042,4]]},"214":{"position":[[227,4],[454,4],[592,4],[767,4],[958,7],[1108,4],[1423,4],[1686,4],[1955,4],[2428,4],[2634,4],[2838,4]]},"216":{"position":[[355,4]]},"218":{"position":[[344,4],[678,4]]},"220":{"position":[[234,4],[431,4],[625,4],[823,4],[1021,4],[1252,4],[1453,4],[1682,4],[1852,4],[2088,4]]},"222":{"position":[[290,4],[560,4],[903,4]]},"224":{"position":[[476,4]]},"226":{"position":[[381,4]]},"228":{"position":[[189,4],[361,4]]},"230":{"position":[[484,4]]},"232":{"position":[[483,4],[731,4],[885,4],[1060,4]]},"234":{"position":[[457,4]]},"236":{"position":[[347,4],[779,4],[1193,4],[1536,4]]},"238":{"position":[[183,4],[355,4]]},"240":{"position":[[462,4],[805,4]]},"242":{"position":[[329,4]]},"244":{"position":[[291,4],[584,4],[870,4],[1089,4],[1347,4],[1647,4],[1901,4],[2333,4],[2578,4],[2992,4]]},"246":{"position":[[186,4],[293,4],[435,4],[542,4],[805,4]]},"248":{"position":[[324,4],[662,4]]},"250":{"position":[[199,4],[374,4]]},"252":{"position":[[302,4],[640,4]]},"254":{"position":[[475,4],[761,4],[1013,4],[1233,4],[1571,4],[1985,4],[2328,4],[2466,4],[2638,4]]},"256":{"position":[[482,4]]},"258":{"position":[[477,4],[613,4],[745,4]]},"260":{"position":[[305,4]]},"262":{"position":[[479,4],[893,4],[1236,4]]},"264":{"position":[[476,4],[623,4],[735,4]]},"266":{"position":[[381,4]]},"268":{"position":[[463,4]]},"270":{"position":[[457,4]]},"272":{"position":[[333,4],[765,4],[1179,4]]},"274":{"position":[[477,4],[731,4]]},"276":{"position":[[382,4],[630,4]]},"278":{"position":[[318,4],[600,4],[1032,4],[1280,4],[1573,4],[1859,4],[2111,4],[2330,4],[2550,4],[2856,4]]},"280":{"position":[[317,4],[599,4],[1031,4],[1279,4],[1572,4],[1858,4],[2110,4],[2329,4],[2549,4],[2855,4]]},"282":{"position":[[381,4],[639,4],[939,4],[1193,4],[1625,4],[1870,4],[2118,4],[2388,4],[2722,4],[3136,4]]},"284":{"position":[[350,4]]},"286":{"position":[[386,4],[634,4],[777,4],[884,4],[1026,4],[1133,4],[1582,4],[1720,4],[1892,4]]},"288":{"position":[[385,4],[633,4],[776,4],[883,4],[1025,4],[1132,4],[1581,4],[1719,4],[1891,4]]},"290":{"position":[[356,4]]},"292":{"position":[[349,4]]},"294":{"position":[[338,4],[672,4],[858,4]]},"296":{"position":[[239,4]]},"298":{"position":[[470,4]]},"300":{"position":[[380,4],[638,4],[938,4],[1192,4],[1624,4],[1869,4],[2117,4],[2387,4],[2721,4],[3135,4]]},"302":{"position":[[314,4]]},"304":{"position":[[375,4]]},"306":{"position":[[284,4],[554,4],[897,4]]},"308":{"position":[[278,4]]},"310":{"position":[[478,4]]},"312":{"position":[[289,4]]},"314":{"position":[[183,4],[355,4]]},"316":{"position":[[337,4]]},"318":{"position":[[341,4],[773,4],[1187,4],[1530,4]]},"320":{"position":[[477,4],[725,4]]},"322":{"position":[[456,4],[799,4]]},"324":{"position":[[177,4],[349,4]]},"326":{"position":[[323,4]]},"328":{"position":[[311,4],[593,4],[1025,4],[1224,4],[1430,4]]},"330":{"position":[[312,4],[560,4],[853,4],[1139,4],[1358,4],[1616,4],[1916,4],[2170,4],[2602,4],[2847,4]]},"332":{"position":[[451,4],[594,4],[701,4],[843,4],[950,4],[1149,4],[1353,4],[1554,4]]},"334":{"position":[[269,4]]},"336":{"position":[[318,4],[656,4]]},"338":{"position":[[175,4],[307,4]]},"340":{"position":[[236,7],[386,4]]},"342":{"position":[[177,4],[309,4]]},"344":{"position":[[239,4]]},"346":{"position":[[476,4],[728,4],[1066,4]]},"348":{"position":[[179,4],[311,4]]},"350":{"position":[[238,4],[436,4],[634,4]]},"352":{"position":[[476,4]]},"354":{"position":[[244,4]]},"356":{"position":[[473,4],[887,4],[1230,4],[1427,4],[1628,4]]},"358":{"position":[[315,4]]},"360":{"position":[[313,4],[745,4],[1031,4],[1283,4],[1503,4],[1841,4],[2255,4],[2598,4],[2736,4],[2908,4],[3105,4]]},"362":{"position":[[298,4],[613,4]]},"364":{"position":[[360,4]]},"366":{"position":[[471,4],[607,4],[739,4]]},"368":{"position":[[337,4],[528,7],[678,4]]},"370":{"position":[[313,4],[745,4]]},"372":{"position":[[375,4]]},"374":{"position":[[327,4],[759,4],[1173,4]]},"376":{"position":[[344,4]]},"378":{"position":[[457,4]]},"380":{"position":[[351,4]]},"382":{"position":[[376,4],[624,4],[939,4],[1170,4]]},"384":{"position":[[152,4],[233,4]]},"386":{"position":[[471,4],[725,4]]},"388":{"position":[[229,4]]},"390":{"position":[[209,4]]},"392":{"position":[[275,4]]},"394":{"position":[[268,4]]},"396":{"position":[[282,4]]},"398":{"position":[[240,4]]},"400":{"position":[[270,4]]},"402":{"position":[[237,4]]},"404":{"position":[[237,4]]},"406":{"position":[[233,4]]},"408":{"position":[[236,4]]},"410":{"position":[[225,4]]},"412":{"position":[[243,4]]},"414":{"position":[[245,4]]},"416":{"position":[[238,4]]},"420":{"position":[[308,4]]},"422":{"position":[[302,4]]},"424":{"position":[[354,4]]},"426":{"position":[[230,7],[380,4]]},"428":{"position":[[177,4],[352,4]]},"430":{"position":[[218,4],[445,4]]},"432":{"position":[[333,4]]},"434":{"position":[[288,4]]},"436":{"position":[[472,4]]},"438":{"position":[[322,4]]},"440":{"position":[[193,4],[368,4]]},"442":{"position":[[186,4],[298,4]]},"444":{"position":[[315,4]]},"446":{"position":[[208,4],[328,4]]},"448":{"position":[[177,4],[349,4]]},"450":{"position":[[175,4],[307,4]]},"452":{"position":[[488,4]]},"454":{"position":[[181,4],[288,4]]},"456":{"position":[[182,4],[289,4]]},"458":{"position":[[382,4]]},"460":{"position":[[287,4]]},"462":{"position":[[373,4]]},"464":{"position":[[453,4]]},"466":{"position":[[309,4]]},"468":{"position":[[284,4]]},"470":{"position":[[287,4]]},"472":{"position":[[471,4]]},"474":{"position":[[339,4]]},"476":{"position":[[293,4]]},"478":{"position":[[297,4]]},"480":{"position":[[377,4]]},"482":{"position":[[259,4]]},"484":{"position":[[258,4]]},"486":{"position":[[345,4]]},"488":{"position":[[291,4]]},"490":{"position":[[325,4]]},"498":{"position":[[2451,4]]},"502":{"position":[[3198,5]]},"504":{"position":[[117,4],[2005,4]]},"512":{"position":[[127,4]]},"564":{"position":[[129,5],[18675,4]]},"568":{"position":[[19387,4],[30695,4]]}}}],["motion",{"_index":1350,"t":{"506":{"position":[[1469,6],[1505,6]]}}}],["mous",{"_index":2495,"t":{"534":{"position":[[2959,5]]}}}],["move",{"_index":1901,"t":{"516":{"position":[[8969,4],[10726,4]]}}}],["mt",{"_index":1285,"t":{"504":{"position":[[6019,2],[6180,2],[6360,2]]},"568":{"position":[[57188,2]]}}}],["much",{"_index":1280,"t":{"504":{"position":[[5769,4]]}}}],["mug",{"_index":2698,"t":{"538":{"position":[[3642,6],[5513,6],[8138,6]]}}}],["multi",{"_index":3727,"t":{"568":{"position":[[29971,5],[112706,5],[115330,5],[117991,5],[120767,5]]}}}],["multipl",{"_index":224,"t":{"32":{"position":[[226,8]]},"46":{"position":[[280,8]]},"82":{"position":[[223,8]]},"94":{"position":[[534,8]]},"96":{"position":[[254,8]]},"502":{"position":[[125,8],[5106,8]]},"504":{"position":[[139,8]]},"514":{"position":[[149,8]]},"520":{"position":[[5717,8],[5740,8],[8373,8]]},"532":{"position":[[204,8]]},"568":{"position":[[72650,8],[72680,8],[122018,8]]}}}],["mute",{"_index":3396,"t":{"564":{"position":[[18546,6]]}}}],["muted\">card",{"_index":1132,"t":{"502":{"position":[[3577,11],[4048,11],[4412,11]]}}}],["muted\">last",{"_index":1206,"t":{"502":{"position":[[11128,11],[11455,11],[11877,11],[12423,11],[12771,11],[13214,11]]}}}],["mx",{"_index":1287,"t":{"504":{"position":[[6172,2]]}}}],["n",{"_index":690,"t":{"120":{"position":[[1485,1]]}}}],["nam",{"_index":1683,"t":{"512":{"position":[[8080,3],[12321,3],[16462,3]]}}}],["name",{"_index":147,"t":{"12":{"position":[[127,5]]},"118":{"position":[[1931,5]]},"220":{"position":[[1984,5]]},"392":{"position":[[171,5]]},"492":{"position":[[195,4],[484,4],[574,4]]},"494":{"position":[[209,4]]},"496":{"position":[[155,4]]},"498":{"position":[[126,4]]},"502":{"position":[[379,4],[699,4],[863,4],[1026,4],[1190,4],[1419,4],[1982,4],[2214,4],[2377,4]]},"504":{"position":[[180,4],[1717,4]]},"506":{"position":[[160,4],[500,4],[697,4]]},"508":{"position":[[156,4],[535,4],[747,5],[846,4],[1332,4],[1550,4],[1584,5],[18222,5],[18441,5],[18661,5],[18882,5]]},"510":{"position":[[168,4],[699,4],[2341,5],[3431,4],[3565,4]]},"512":{"position":[[187,4],[3571,5],[4279,4],[4413,4],[5168,5],[6235,4],[6369,4]]},"514":{"position":[[177,4]]},"516":{"position":[[186,4],[1546,4],[4141,5],[4819,4],[4953,4],[5713,5],[6707,4],[6841,4]]},"518":{"position":[[205,4],[443,4]]},"520":{"position":[[222,4],[491,4],[757,4]]},"522":{"position":[[408,4],[639,4]]},"524":{"position":[[602,4],[1061,4],[1241,5],[1353,5]]},"526":{"position":[[392,4],[622,4],[658,5],[747,4]]},"528":{"position":[[134,4],[387,4],[588,4],[719,4]]},"530":{"position":[[142,4]]},"532":{"position":[[249,4],[397,4],[672,4],[935,4],[2626,4],[2865,4],[16063,4]]},"534":{"position":[[394,4],[541,4],[816,4],[1081,4],[4590,4],[4829,4],[16348,4]]},"536":{"position":[[190,4],[337,4],[612,4],[875,4],[1972,4],[2219,4],[8052,4]]},"538":{"position":[[243,4],[788,5],[1593,4],[1846,4],[10119,4]]},"540":{"position":[[318,4],[1072,4],[1179,4],[7728,5],[7896,5],[8577,5],[8850,4],[10040,5],[12591,4]]},"542":{"position":[[197,4],[1548,4],[1641,4]]},"544":{"position":[[167,4],[464,4],[589,4]]},"546":{"position":[[205,4],[1046,4],[1131,4]]},"558":{"position":[[238,4],[325,4]]},"560":{"position":[[322,4],[1076,4],[1183,4]]},"562":{"position":[[345,4],[492,4],[767,4],[1040,4],[2239,4],[2496,4],[11678,4]]},"564":{"position":[[256,4],[961,4],[1339,4],[1709,4],[1964,4],[2141,4],[2884,4]]},"566":{"position":[[224,4],[380,5],[712,4],[849,4],[1023,5],[1204,5]]},"568":{"position":[[202,4],[2866,4],[3479,4],[3782,4],[5282,5],[6440,4],[7118,5],[7652,4],[7776,4],[7907,4],[8031,4],[8160,4],[8293,4],[8413,4],[8535,4],[8658,4],[9073,4],[9419,5],[9997,4],[10121,4],[10252,4],[10376,4],[10505,4],[10638,4],[10758,4],[10880,4],[11003,4],[11929,6],[12373,4],[12497,4],[12628,4],[12752,4],[12881,4],[13014,4],[13134,4],[13256,4],[13386,4],[13511,4],[13634,4],[13753,4],[14547,5],[15145,4],[15269,4],[15400,4],[15524,4],[15653,4],[15786,4],[15906,4],[16028,4],[16151,4],[16876,5],[17564,4],[17688,4],[17819,4],[17943,4],[18072,4],[18205,4],[18325,4],[18447,4],[18577,4],[18702,4],[18825,4],[18944,4],[19782,5],[20316,4],[20440,4],[20571,4],[20695,4],[20824,4],[20957,4],[21077,4],[21199,4],[21322,4],[22189,5],[22718,4],[22842,4],[22973,4],[23097,4],[23226,4],[23359,4],[23479,4],[23601,4],[23724,4],[24560,5],[24696,5],[28670,5],[28845,5],[31117,5],[31795,4],[31919,4],[32050,4],[32174,4],[32303,4],[32436,4],[32556,4],[32678,4],[32801,4],[33579,5],[34160,4],[34284,4],[34415,4],[34539,4],[34668,4],[34801,4],[34921,4],[35043,4],[35166,4],[35967,6],[36525,4],[36649,4],[36780,4],[36904,4],[37033,4],[37166,4],[37286,4],[37408,4],[37531,4],[38342,6],[38930,4],[39035,4],[39150,4],[39257,4],[39370,4],[39490,4],[39593,4],[39698,4],[39805,4],[40585,6],[41188,4],[41293,4],[41408,4],[41515,4],[41628,4],[41748,4],[41851,4],[41956,4],[42063,4],[42845,6],[42933,6],[46722,6],[47166,4],[47290,4],[47421,4],[47545,4],[47674,4],[47807,4],[47927,4],[48049,4],[48179,4],[48304,4],[48427,4],[48546,4],[49316,6],[49402,6],[50927,5],[52811,4],[52935,4],[53066,4],[53190,4],[53319,4],[53452,4],[53572,4],[53694,4],[53824,4],[53949,4],[54072,4],[54191,4],[54871,5],[55450,4],[55574,4],[55705,4],[55829,4],[55958,4],[56169,4],[56289,4],[56411,4],[56534,4],[57354,5],[57903,4],[58027,4],[58158,4],[58282,4],[58411,4],[60390,5],[61615,4],[61739,4],[61870,4],[61994,4],[62123,4],[62256,4],[62376,4],[62498,4],[62628,4],[62753,4],[62876,4],[62995,4],[63717,5],[64836,4],[64960,4],[65091,4],[65215,4],[65344,4],[65477,4],[65597,4],[65719,4],[65849,4],[65974,4],[66097,4],[66216,4],[66924,5],[68213,4],[68337,4],[68468,4],[68592,4],[68721,4],[68854,4],[68974,4],[69096,4],[69226,4],[69351,4],[69474,4],[69593,4],[70142,5],[71351,4],[71475,4],[71606,4],[71730,4],[71859,4],[71992,4],[72112,4],[72234,4],[72357,4],[73117,5],[74326,4],[74450,4],[74581,4],[74705,4],[74834,4],[74967,4],[75087,4],[75209,4],[75332,4],[76468,5],[77623,4],[77747,4],[77878,4],[78002,4],[78131,4],[78264,4],[78384,4],[78506,4],[78629,4],[79523,6],[80714,4],[80838,4],[80969,4],[81093,4],[81222,4],[81355,4],[81475,4],[81597,4],[81727,4],[81852,4],[81975,4],[82094,4],[82662,6],[83480,4],[83604,4],[83735,4],[83859,4],[83988,4],[84121,4],[84241,4],[84363,4],[84493,4],[84618,4],[84741,4],[84860,4],[85345,5],[86147,5],[86935,5],[87737,5],[88709,4],[88840,4],[88964,4],[89093,4],[89226,4],[89346,4],[89941,5],[90932,5],[91921,5],[92912,5],[93897,5],[94882,5],[95877,5],[96939,4],[97070,4],[97194,4],[97323,4],[97456,4],[97576,4],[98097,5],[99130,4],[99261,4],[99385,4],[99514,4],[99647,4],[99767,4],[100067,5],[100535,5],[101568,4],[101699,4],[101823,4],[101952,4],[102085,4],[102205,4],[102518,5],[103388,5],[105559,4],[105683,4],[105814,4],[105938,4],[106067,4],[106200,4],[106320,4],[106442,4],[106572,4],[106697,4],[106820,4],[106939,4],[107585,5],[109439,4],[109564,4],[109695,4],[109819,4],[109948,4],[110081,4],[110201,4],[110323,4],[110446,4],[110545,4],[111216,5],[113786,5],[116447,5],[119143,5]]}}}],["name=\"accordionitem1",{"_index":1426,"t":{"508":{"position":[[11344,22],[16289,22]]}}}],["name=\"accordionitem2",{"_index":1428,"t":{"508":{"position":[[11905,22],[16860,22]]}}}],["name=\"accordionitem3",{"_index":1430,"t":{"508":{"position":[[12468,22],[17433,22]]}}}],["name=\"accordionitem6",{"_index":1438,"t":{"508":{"position":[[14134,22]]}}}],["name=\"faq",{"_index":1435,"t":{"508":{"position":[[13585,11]]},"528":{"position":[[6409,11]]}}}],["name=\"iconname.alarm",{"_index":2195,"t":{"526":{"position":[[881,21],[1038,21],[1088,21],[1138,21],[1188,21],[2856,21],[3000,21],[3296,21],[3380,21],[3632,21]]}}}],["name=\"iconname.alarmfil",{"_index":2196,"t":{"526":{"position":[[912,25],[3478,25]]}}}],["name=\"iconname.appl",{"_index":2198,"t":{"526":{"position":[[979,21],[2466,21]]}}}],["name=\"iconname.asterisk",{"_index":2224,"t":{"526":{"position":[[2539,24]]}}}],["name=\"iconname.bellfil",{"_index":1042,"t":{"498":{"position":[[3880,24]]}}}],["name=\"iconname.browsersafari",{"_index":2228,"t":{"526":{"position":[[2698,29]]}}}],["name=\"iconname.bug",{"_index":2216,"t":{"526":{"position":[[2129,19]]}}}],["name=\"iconname.checkal",{"_index":2214,"t":{"526":{"position":[[2050,24]]}}}],["name=\"iconname.checkcirclefil",{"_index":855,"t":{"492":{"position":[[2383,31]]}}}],["name=\"iconname.cloudlightningrainfil",{"_index":2212,"t":{"526":{"position":[[1955,38]]}}}],["name=\"iconname.creditcard2frontfil",{"_index":2221,"t":{"526":{"position":[[2377,36]]}}}],["name=\"iconname.exclamationdiamondfil",{"_index":2218,"t":{"526":{"position":[[2202,38]]}}}],["name=\"iconname.exclamationtrianglefil",{"_index":857,"t":{"492":{"position":[[2520,39],[2665,39]]}}}],["name=\"iconname.facebook",{"_index":2210,"t":{"526":{"position":[[1876,24]]}}}],["name=\"iconname.housefil",{"_index":1417,"t":{"508":{"position":[[3676,25]]},"528":{"position":[[2873,25]]}}}],["name=\"iconname.infocirclefil",{"_index":852,"t":{"492":{"position":[[2252,30]]},"526":{"position":[[2295,30]]}}}],["name=\"iconname.infocirclefill\">(titl",{"_index":1598,"t":{"512":{"position":[[3961,50]]}}}],["offcanvas.showasync(titl",{"_index":1617,"t":{"512":{"position":[[5813,50]]}}}],["offcanvas1",{"_index":615,"t":{"120":{"position":[[387,10]]}}}],["offcanvas5",{"_index":694,"t":{"120":{"position":[[1514,10]]}}}],["offcanvasclosechang",{"_index":1324,"t":{"504":{"position":[[8863,31]]},"530":{"position":[[1665,31]]}}}],["onclick=\"clearmessage\">clear",{"_index":1371,"t":{"506":{"position":[[3931,29]]}}}],["onclick=\"closealert\">closedecreas",{"_index":2025,"t":{"520":{"position":[[2528,39]]}}}],["onclick=\"deleteemployeeasync",{"_index":1512,"t":{"510":{"position":[[2530,31]]}}}],["onclick=\"dis",{"_index":2781,"t":{"538":{"position":[[11422,19],[12888,19]]},"540":{"position":[[5768,19],[6473,19]]},"542":{"position":[[9822,19],[10493,19]]},"544":{"position":[[1305,19],[1917,19]]},"546":{"position":[[6220,19],[6885,19]]},"560":{"position":[[3972,19],[4650,19]]}}}],["onclick=\"disabledropdown\">disableenablehidehid",{"_index":1355,"t":{"506":{"position":[[1792,32],[2757,32],[3703,32]]}}}],["onclick=\"increaseprogressbar\">increas",{"_index":2023,"t":{"520":{"position":[[2393,39]]}}}],["onclick=\"onclick",{"_index":1328,"t":{"504":{"position":[[9122,19]]},"530":{"position":[[1267,18]]}}}],["onclick=\"onclickcallback",{"_index":1621,"t":{"512":{"position":[[6516,27]]},"516":{"position":[[6988,27]]}}}],["onclick=\"onhidemodalclick\">closehid",{"_index":1790,"t":{"512":{"position":[[20484,36]]}}}],["onclick=\"onshowmodalclick\">launch",{"_index":1891,"t":{"516":{"position":[[8111,34],[9300,34]]}}}],["onclick=\"onshowmodalclick\">show",{"_index":1875,"t":{"516":{"position":[[3636,32],[4247,32],[5901,32],[14365,32]]}}}],["onclick=\"onshowmodalclick\">vert",{"_index":1906,"t":{"516":{"position":[[9978,38],[11057,38]]}}}],["onclick=\"onshowoffcanvasclick\">show",{"_index":1627,"t":{"512":{"position":[[7175,36],[11409,36],[15650,36],[19791,36],[20607,36]]}}}],["onclick=\"resetform\">resetresetshowshow",{"_index":1353,"t":{"506":{"position":[[1681,32],[2646,32],[3592,32]]}}}],["onclick=\"showdialogasync",{"_index":1555,"t":{"510":{"position":[[5977,27],[6469,27],[7073,27],[7701,27]]}}}],["onclick=\"showemployeecomponent\">show",{"_index":1595,"t":{"512":{"position":[[3685,37],[5364,37]]}}}],["onclick=\"showfaqsaccordionitemasync\">faq",{"_index":1445,"t":{"508":{"position":[[15142,42]]}}}],["onclick=\"showfaqsasync\">faq",{"_index":2277,"t":{"528":{"position":[[7040,29]]}}}],["onclick=\"showfirstaccordionitemasync\">first",{"_index":1440,"t":{"508":{"position":[[14714,44]]}}}],["onclick=\"showfirsttabasync\">first",{"_index":2272,"t":{"528":{"position":[[6696,34]]}}}],["onclick=\"showlastaccordionitemasync\">last",{"_index":1446,"t":{"508":{"position":[[15245,42]]}}}],["onclick=\"showlasttabasync\">last",{"_index":2278,"t":{"528":{"position":[[7119,32]]}}}],["onclick=\"showloadingdataasync\">show",{"_index":2065,"t":{"522":{"position":[[1591,36]]}}}],["onclick=\"showmodal\">show",{"_index":3220,"t":{"558":{"position":[[4179,25],[4612,25]]}}}],["onclick=\"showproductsaccordionitemasync\">product",{"_index":1444,"t":{"508":{"position":[[15031,50]]}}}],["onclick=\"showproductstabasync\">product",{"_index":2276,"t":{"528":{"position":[[6950,40]]}}}],["onclick=\"showsaveconfirmationasync",{"_index":1533,"t":{"510":{"position":[[4099,37]]}}}],["onclick=\"showsavingdataasync\">show",{"_index":2067,"t":{"522":{"position":[[1686,35]]}}}],["onclick=\"showsecondaccordionitemasync\">second",{"_index":1442,"t":{"508":{"position":[[14819,46]]}}}],["onclick=\"showsecondtabasync\">second",{"_index":2274,"t":{"528":{"position":[[6780,36]]}}}],["onclick=\"showthirdaccordionitemasync\">third",{"_index":1443,"t":{"508":{"position":[[14926,44]]}}}],["onclick=\"showthirdtabasync\">third",{"_index":2275,"t":{"528":{"position":[[6866,34]]}}}],["onclick=\"toggl",{"_index":2782,"t":{"538":{"position":[[11496,18]]},"540":{"position":[[5842,18]]},"542":{"position":[[9896,18]]},"544":{"position":[[1379,18]]},"546":{"position":[[6294,18]]},"560":{"position":[[4046,18]]}}}],["onclick=\"toggleasync\">toggletoggl",{"_index":1356,"t":{"506":{"position":[[1903,36],[2868,36],[3814,36]]}}}],["onclick=\"togglesidebarstyles\">toggl",{"_index":3482,"t":{"566":{"position":[[18959,37]]}}}],["onclick=\"tooglesidebar",{"_index":3473,"t":{"566":{"position":[[9092,24],[11545,24],[13955,24],[16369,24]]}}}],["onclickcallback",{"_index":1608,"t":{"512":{"position":[[5174,16],[6731,15]]},"516":{"position":[[5719,16],[7192,15]]}}}],["onclickwithargs(arg",{"_index":1337,"t":{"504":{"position":[[9566,21]]}}}],["onclickwithargs(eventarg",{"_index":1339,"t":{"504":{"position":[[9688,25]]}}}],["onclos",{"_index":790,"t":{"492":{"position":[[591,7],[659,8],[3829,8]]}}}],["oncollapsehiddenasync",{"_index":1387,"t":{"506":{"position":[[5061,23]]}}}],["oncollapsehidingasync",{"_index":1386,"t":{"506":{"position":[[4951,23]]}}}],["oncollapseshowingasync",{"_index":1382,"t":{"506":{"position":[[4731,24]]}}}],["oncollapseshownasync",{"_index":1385,"t":{"506":{"position":[[4843,22]]}}}],["ondblclick=\"ondoubleclick",{"_index":1332,"t":{"504":{"position":[[9315,28]]}}}],["ondoubleclick(eventarg",{"_index":1333,"t":{"504":{"position":[[9400,23]]}}}],["ondropdownhiddenasync",{"_index":3435,"t":{"564":{"position":[[25378,23]]}}}],["ondropdownhidingasync",{"_index":3433,"t":{"564":{"position":[[25307,23]]}}}],["ondropdownshowingasync",{"_index":3437,"t":{"564":{"position":[[25449,24]]}}}],["ondropdownshownasync",{"_index":3439,"t":{"564":{"position":[[25522,22]]}}}],["onfieldchang",{"_index":556,"t":{"96":{"position":[[1103,14]]}}}],["ongridsettingschanged(gridset",{"_index":3766,"t":{"568":{"position":[[52019,34]]}}}],["onhid",{"_index":160,"t":{"12":{"position":[[345,8],[489,8]]},"72":{"position":[[351,9],[536,9]]},"506":{"position":[[951,8],[5000,8]]},"508":{"position":[[1089,8],[18667,9]]},"512":{"position":[[2167,8]]},"516":{"position":[[2247,8]]},"528":{"position":[[7746,8],[7880,8],[8026,8]]},"564":{"position":[[3282,8]]}}}],["onhidden",{"_index":162,"t":{"12":{"position":[[364,8],[508,8]]},"72":{"position":[[365,8],[550,8]]},"506":{"position":[[1036,8],[5110,8]]},"508":{"position":[[1174,8],[18888,9]]},"512":{"position":[[1639,8],[2246,8]]},"516":{"position":[[2326,8]]},"528":{"position":[[7818,8],[8039,8]]},"564":{"position":[[3368,8]]}}}],["onhidden=\"oncollapsehiddenasync",{"_index":1377,"t":{"506":{"position":[[4118,33]]}}}],["onhidden=\"ondropdownhiddenasync",{"_index":3430,"t":{"564":{"position":[[24789,32]]}}}],["onhidden=\"onhiddenasync",{"_index":1460,"t":{"508":{"position":[[16222,25]]}}}],["onhidden=\"onmodalhiddenasync",{"_index":1951,"t":{"516":{"position":[[14013,29]]}}}],["onhidden=\"onoffcanvashiddenasync",{"_index":1784,"t":{"512":{"position":[[20240,34]]}}}],["onhiddenasync(accordioneventarg",{"_index":1472,"t":{"508":{"position":[[18761,32]]}}}],["onhidemodalclick",{"_index":1879,"t":{"516":{"position":[[3800,18],[8293,18],[9471,18],[10157,18],[11247,18]]}}}],["onhideoffcanvasclick",{"_index":1791,"t":{"512":{"position":[[20795,22]]}}}],["onhideprev",{"_index":164,"t":{"12":{"position":[[390,15]]},"516":{"position":[[2456,15]]}}}],["onhideprevented=\"onmodalhidepreventedasync",{"_index":1952,"t":{"516":{"position":[[14043,44]]}}}],["onhiding=\"oncollapsehidingasync",{"_index":1376,"t":{"506":{"position":[[4085,32]]}}}],["onhiding=\"ondropdownhidingasync",{"_index":3429,"t":{"564":{"position":[[24756,32]]}}}],["onhiding=\"onhidingasync",{"_index":1459,"t":{"508":{"position":[[16197,24]]}}}],["onhiding=\"onmodalhidingasync",{"_index":1950,"t":{"516":{"position":[[13983,29]]}}}],["onhiding=\"onoffcanvashidingasync",{"_index":1783,"t":{"512":{"position":[[20206,33]]}}}],["onhidingasync(accordioneventarg",{"_index":1471,"t":{"508":{"position":[[18540,32]]}}}],["oniniti",{"_index":902,"t":{"494":{"position":[[562,15],[1316,15],[2049,15]]},"510":{"position":[[3745,15]]},"512":{"position":[[4604,15],[6785,15]]},"516":{"position":[[5133,15],[7246,15]]},"532":{"position":[[5175,15],[8615,15],[10013,15],[12241,15],[14339,15]]},"534":{"position":[[7074,15],[10707,15],[13568,15]]},"536":{"position":[[3817,15],[7611,15]]},"538":{"position":[[7397,15],[9963,15]]},"540":{"position":[[5102,15],[8371,15],[11636,15]]},"542":{"position":[[12964,15]]},"546":{"position":[[9214,15]]},"560":{"position":[[3406,15],[7573,15],[10929,15]]},"562":{"position":[[4129,15],[7879,15],[11217,15]]},"564":{"position":[[20688,15]]},"568":{"position":[[7574,15],[9919,15],[12295,15],[15067,15],[17486,15],[20238,15],[22640,15],[25706,15],[31717,15],[34082,15],[36447,15],[38852,15],[41110,15],[43735,15],[47088,15],[57825,15]]}}}],["onlin",{"_index":2928,"t":{"540":{"position":[[12347,7]]}}}],["onlinecourseform",{"_index":2914,"t":{"540":{"position":[[11420,16],[11437,16],[12449,16],[12539,16]]}}}],["onlinecourseform.coursenam",{"_index":2901,"t":{"540":{"position":[[10222,29]]}}}],["onlinecourseform.endd",{"_index":2911,"t":{"540":{"position":[[11018,26],[11863,24],[12014,24]]}}}],["onlinecourseform.startd",{"_index":2904,"t":{"540":{"position":[[10509,27],[10622,28],[11828,26],[11974,26]]}}}],["onmodalhiddenasync",{"_index":1956,"t":{"516":{"position":[[14781,20]]}}}],["onmodalhidepreventedasync",{"_index":1957,"t":{"516":{"position":[[14886,27]]}}}],["onmodalhidingasync",{"_index":1955,"t":{"516":{"position":[[14674,20]]}}}],["onmodalshowingasync",{"_index":1953,"t":{"516":{"position":[[14461,21]]}}}],["onmodalshownasync",{"_index":1954,"t":{"516":{"position":[[14570,19]]}}}],["onoffcanvashiddenasync",{"_index":1797,"t":{"512":{"position":[[21204,24]]}}}],["onoffcanvashidingasync",{"_index":1796,"t":{"512":{"position":[[21093,24]]}}}],["onoffcanvasshowingasync",{"_index":1792,"t":{"512":{"position":[[20871,25]]}}}],["onoffcanvasshownasync",{"_index":1795,"t":{"512":{"position":[[20984,23]]}}}],["onpagechangedasync(int",{"_index":1848,"t":{"514":{"position":[[3018,22]]}}}],["onparametersset",{"_index":3050,"t":{"542":{"position":[[13070,17]]},"546":{"position":[[9320,17]]},"564":{"position":[[20794,17]]}}}],["onrowclick",{"_index":518,"t":{"94":{"position":[[194,10]]},"568":{"position":[[3008,10]]}}}],["onrowclick(gridroweventargssave@department.nam",{"_index":3779,"t":{"568":{"position":[[54586,19]]}}}],["p>@itemaww",{"_index":830,"t":{"492":{"position":[[1767,6]]}}}],["p>lorem",{"_index":1629,"t":{"512":{"position":[[7572,8],[11813,8],[15954,8]]}}}],["p>morbi",{"_index":1734,"t":{"512":{"position":[[9055,8],[13296,8],[17437,8]]}}}],["p>pellentesqu",{"_index":1759,"t":{"512":{"position":[[10021,15],[14262,15],[18403,15]]}}}],["p>proin",{"_index":1700,"t":{"512":{"position":[[8282,8],[12523,8],[16664,8]]}}}],["p>some",{"_index":3398,"t":{"564":{"position":[[18576,7]]}}}],["p>thi",{"_index":1903,"t":{"516":{"position":[[8999,7],[10756,7]]}}}],["p>use",{"_index":952,"t":{"496":{"position":[[2895,8],[3383,8],[3872,8],[4358,8],[4843,8]]}}}],["p>vestibulum",{"_index":1773,"t":{"512":{"position":[[10847,13],[15088,13],[19229,13]]}}}],["pa",{"_index":2687,"t":{"538":{"position":[[3556,5],[5427,5],[8052,5]]}}}],["packag",{"_index":3119,"t":{"548":{"position":[[221,8],[297,7],[322,7],[3431,7]]},"550":{"position":[[211,8],[287,7],[312,7],[3605,7]]},"556":{"position":[[211,8],[287,7],[312,7],[3102,7]]}}}],["pad",{"_index":786,"t":{"492":{"position":[[443,7]]},"502":{"position":[[3323,6]]},"542":{"position":[[1315,6]]},"564":{"position":[[18838,7]]}}}],["page",{"_index":107,"t":{"4":{"position":[[297,4]]},"6":{"position":[[212,4]]},"8":{"position":[[302,4]]},"10":{"position":[[403,4]]},"12":{"position":[[754,4]]},"14":{"position":[[379,4]]},"16":{"position":[[380,4]]},"18":{"position":[[399,4]]},"20":{"position":[[280,4]]},"22":{"position":[[282,4]]},"24":{"position":[[320,4]]},"26":{"position":[[331,4]]},"28":{"position":[[444,4]]},"30":{"position":[[317,4]]},"32":{"position":[[661,4]]},"34":{"position":[[785,4]]},"36":{"position":[[284,4]]},"38":{"position":[[602,4]]},"40":{"position":[[216,4],[229,4],[476,6],[493,4]]},"42":{"position":[[548,4],[873,4]]},"44":{"position":[[725,4]]},"46":{"position":[[621,4]]},"48":{"position":[[907,4]]},"50":{"position":[[599,4]]},"52":{"position":[[510,4]]},"54":{"position":[[862,4]]},"56":{"position":[[465,4]]},"58":{"position":[[424,4]]},"60":{"position":[[582,4]]},"62":{"position":[[807,4]]},"64":{"position":[[483,4]]},"66":{"position":[[456,4]]},"68":{"position":[[1110,4]]},"70":{"position":[[1183,4]]},"72":{"position":[[1164,4]]},"74":{"position":[[678,4]]},"76":{"position":[[440,4]]},"78":{"position":[[537,4]]},"80":{"position":[[702,4]]},"82":{"position":[[292,6],[312,4],[322,4],[1950,4]]},"84":{"position":[[682,4]]},"86":{"position":[[507,4]]},"88":{"position":[[898,4]]},"90":{"position":[[527,4]]},"92":{"position":[[467,4]]},"94":{"position":[[305,4],[1102,4]]},"96":{"position":[[1574,4]]},"98":{"position":[[388,4]]},"100":{"position":[[583,4]]},"102":{"position":[[1040,4]]},"104":{"position":[[421,4]]},"106":{"position":[[614,4]]},"108":{"position":[[703,4]]},"114":{"position":[[1621,6]]},"150":{"position":[[793,6]]},"152":{"position":[[305,6]]},"154":{"position":[[303,6]]},"158":{"position":[[34,7],[302,6]]},"214":{"position":[[1674,6]]},"246":{"position":[[793,6]]},"422":{"position":[[290,6]]},"492":{"position":[[26,4],[3595,4],[3925,5],[3941,4]]},"494":{"position":[[30,4],[2336,4]]},"496":{"position":[[27,4],[5283,4]]},"498":{"position":[[25,4],[7284,4]]},"500":{"position":[[26,4],[952,4]]},"502":{"position":[[24,4],[13317,4]]},"504":{"position":[[27,4],[9829,4]]},"506":{"position":[[28,4],[5232,4]]},"508":{"position":[[29,4],[18996,4]]},"510":{"position":[[34,4],[1149,5],[5856,4],[8200,4]]},"512":{"position":[[29,4],[708,6],[21323,4]]},"514":{"position":[[30,4],[158,6],[244,4],[390,4],[1166,5],[1272,4],[2925,4],[3149,4]]},"516":{"position":[[25,4],[3312,5],[8477,4],[15016,4]]},"518":{"position":[[32,4],[122,5],[3421,4]]},"520":{"position":[[28,4],[8168,4]]},"522":{"position":[[27,4],[79,4],[216,4],[236,5],[1004,4],[3689,4]]},"524":{"position":[[26,4],[564,4],[11431,4],[12131,4]]},"526":{"position":[[22,4],[4320,4]]},"528":{"position":[[24,4],[9200,4]]},"530":{"position":[[28,4],[123,6],[1871,4]]},"532":{"position":[[37,4],[16303,4]]},"534":{"position":[[38,4],[16590,4]]},"536":{"position":[[37,4],[10845,4]]},"538":{"position":[[28,4],[13855,4]]},"540":{"position":[[25,4],[12840,4]]},"542":{"position":[[29,4],[14931,4]]},"544":{"position":[[21,4],[2902,4]]},"546":{"position":[[27,4],[11178,4]]},"548":{"position":[[43,4],[3393,4]]},"550":{"position":[[38,4],[3541,4]]},"552":{"position":[[34,4],[475,4],[626,6],[1870,4]]},"554":{"position":[[29,4],[470,4],[621,6],[1865,4]]},"556":{"position":[[36,4],[3036,4]]},"558":{"position":[[31,4],[5002,4],[5830,4]]},"560":{"position":[[25,4],[12074,4]]},"562":{"position":[[42,4],[14619,4]]},"564":{"position":[[28,4],[25609,4]]},"566":{"position":[[27,4],[6505,4],[6595,6],[8855,6],[11289,6],[13704,6],[16075,6],[18541,6],[24133,4]]},"568":{"position":[[24,4],[167,6],[365,7],[1824,4],[1906,4],[2008,4],[2095,4],[3714,4],[6508,4],[6552,5],[11437,7],[11449,7],[11621,4],[16470,7],[28136,6],[49988,4],[50001,4],[51855,6],[61193,6],[64588,6],[67965,6],[71103,6],[74078,6],[77375,6],[79213,4],[80466,6],[82269,4],[83232,6],[88461,6],[96691,6],[98882,6],[101320,6],[105311,6],[109191,6],[121256,4],[121475,6],[121525,7],[121648,6],[122063,4],[122073,4]]}}}],["page'",{"_index":891,"t":{"494":{"position":[[113,6]]}}}],["page/docu",{"_index":881,"t":{"492":{"position":[[3765,14]]}}}],["pagechang",{"_index":1815,"t":{"514":{"position":[[1222,11]]}}}],["pagechanged=\"onpagechangedasync",{"_index":1844,"t":{"514":{"position":[[2875,32]]}}}],["pagenumb",{"_index":3579,"t":{"568":{"position":[[6493,10],[52167,10]]}}}],["pages",{"_index":3530,"t":{"568":{"position":[[1873,8],[6527,8],[11473,8],[11572,8],[52182,8],[80182,8],[82236,8]]}}}],["pages/_host.cshtml",{"_index":3163,"t":{"550":{"position":[[429,19],[1006,19],[1355,19],[1454,18],[2867,18]]}}}],["pages/_layout.cshtml",{"_index":3164,"t":{"550":{"position":[[1262,21],[1316,20]]}}}],["pagesize=\"10",{"_index":3848,"t":{"568":{"position":[[82425,13],[103003,13]]}}}],["pagesize=\"20",{"_index":3638,"t":{"568":{"position":[[11534,13]]}}}],["pagesize=\"5",{"_index":3639,"t":{"568":{"position":[[11773,12],[16648,12],[28431,12],[46530,12],[60139,12],[63489,12],[66696,12]]}}}],["pagesize=\"8",{"_index":3760,"t":{"568":{"position":[[50526,12]]}}}],["pagesize=\"@pages",{"_index":3840,"t":{"568":{"position":[[79359,20]]}}}],["pagesizeselectoritem",{"_index":3531,"t":{"568":{"position":[[1935,21]]}}}],["pagesizeselectoritems=\"@(new",{"_index":3850,"t":{"568":{"position":[[82470,28],[103048,28]]}}}],["pagesizeselectorvis",{"_index":3532,"t":{"568":{"position":[[2040,23]]}}}],["pagesizeselectorvisible=\"tru",{"_index":3849,"t":{"568":{"position":[[82439,30],[103017,30]]}}}],["pagin",{"_index":174,"t":{"14":{"position":[[244,10],[297,10],[358,10]]},"32":{"position":[[483,10]]},"118":{"position":[[1384,10]]},"220":{"position":[[1437,10]]},"332":{"position":[[1538,10]]},"344":{"position":[[223,10]]},"354":{"position":[[21,12],[228,10]]},"356":{"position":[[1612,10]]},"398":{"position":[[224,10]]},"512":{"position":[[21348,10]]},"514":{"position":[[11,10],[42,10],[74,10],[311,10],[1128,10],[1306,11],[1366,11],[1463,10],[1569,11],[1599,11],[1630,11],[1661,11],[1692,11],[1759,11],[2034,11],[2086,11],[2138,11],[2237,11],[2334,11],[2413,11],[2464,11],[2569,11],[2620,11],[2700,11],[2809,11],[3227,10]]},"518":{"position":[[3435,10]]},"568":{"position":[[2205,10],[46142,10],[46188,10],[102637,10],[121783,10]]}}}],["pagina",{"_index":3869,"t":{"568":{"position":[[103185,7]]}}}],["pagination1",{"_index":696,"t":{"120":{"position":[[1527,11]]}}}],["paginationalign",{"_index":3751,"t":{"568":{"position":[[46213,19],[46268,19]]}}}],["paginationalignment=\"alignment.end",{"_index":3752,"t":{"568":{"position":[[46543,35]]}}}],["paginationitemstextformat",{"_index":3533,"t":{"568":{"position":[[2129,25]]}}}],["paginationitemstextformat=\"{0",{"_index":3865,"t":{"568":{"position":[[103097,30]]}}}],["paginations",{"_index":1812,"t":{"514":{"position":[[1096,14]]}}}],["paging1",{"_index":612,"t":{"120":{"position":[[261,7]]}}}],["palett",{"_index":2372,"t":{"532":{"position":[[3580,7],[3652,8],[3713,7],[3773,8],[3788,8]]},"534":{"position":[[5545,7],[5617,8],[5678,7],[5738,8],[5753,8]]},"536":{"position":[[2666,7],[2738,8],[2799,7],[2859,8],[2874,8]]},"562":{"position":[[2948,7],[3020,8],[3081,7],[3141,8],[3156,8]]}}}],["pane",{"_index":2251,"t":{"528":{"position":[[468,5],[536,5],[617,5],[697,5],[1894,4]]}}}],["panel",{"_index":1358,"t":{"506":{"position":[[2061,5],[4228,5]]}}}],["papa",{"_index":3691,"t":{"568":{"position":[[26295,7],[44324,7]]}}}],["paragraph",{"_index":825,"t":{"492":{"position":[[1659,10]]}}}],["paramet",{"_index":146,"t":{"12":{"position":[[117,9],[526,10]]},"16":{"position":[[139,10],[209,9]]},"34":{"position":[[508,9]]},"54":{"position":[[381,11]]},"58":{"position":[[194,9]]},"68":{"position":[[537,11]]},"74":{"position":[[282,9]]},"82":{"position":[[415,9],[448,9],[562,9],[595,9],[705,9],[738,9],[850,9],[883,9],[989,9],[1022,9],[1132,9],[1165,9]]},"88":{"position":[[352,9]]},"92":{"position":[[189,9],[222,9]]},"118":{"position":[[1544,10],[1921,9]]},"124":{"position":[[182,10]]},"220":{"position":[[1597,10],[1974,9]]},"392":{"position":[[161,9]]},"394":{"position":[[183,10]]},"492":{"position":[[183,11],[3976,10]]},"494":{"position":[[197,11],[2369,10]]},"496":{"position":[[143,11],[5315,10]]},"498":{"position":[[114,11],[2366,10],[2426,9],[3988,10],[7321,10]]},"502":{"position":[[350,11],[367,11],[687,11],[851,11],[1014,11],[1178,11],[1407,11],[1970,11],[2202,11],[2365,11],[7242,10],[13357,10],[13373,10],[13393,10],[13415,10],[13436,10],[13458,10],[13478,10],[13502,10],[13522,10],[13543,10]]},"504":{"position":[[168,11],[3997,9],[4196,9],[6600,10],[9867,10]]},"506":{"position":[[148,11],[2534,9],[5273,10]]},"508":{"position":[[144,11],[1320,11],[5557,9],[7431,9],[9231,9],[19043,10],[19103,10]]},"510":{"position":[[2270,11],[2722,10],[2919,12],[3673,11]]},"512":{"position":[[175,11],[3500,11],[3873,10],[4032,11],[4044,12],[4532,11],[4857,9],[5106,9],[5623,10],[5884,11],[5896,12],[6634,11],[6682,11],[11646,10],[21359,10]]},"514":{"position":[[165,11],[3191,10]]},"516":{"position":[[174,11],[1662,10],[4070,11],[4417,10],[4572,11],[4584,12],[5061,11],[5402,9],[5651,9],[6106,10],[6363,11],[6375,12],[7095,11],[7143,11],[15050,10]]},"518":{"position":[[193,11],[431,11],[3480,10],[3503,10]]},"520":{"position":[[210,11],[479,11],[1949,9],[3192,10],[3561,9],[8212,10],[8235,10]]},"522":{"position":[[396,11],[3730,10]]},"524":{"position":[[590,11],[3294,10],[4636,9],[8074,9],[9972,10],[11648,10],[12171,10]]},"526":{"position":[[380,11],[770,9],[4381,10]]},"528":{"position":[[122,11],[707,11],[3776,10],[4802,9],[9239,10],[9267,10]]},"530":{"position":[[130,11],[1907,10]]},"532":{"position":[[237,11],[16346,10]]},"534":{"position":[[382,11],[16634,10]]},"536":{"position":[[178,11],[10889,10]]},"538":{"position":[[231,11],[10952,9],[12485,9],[13895,10]]},"540":{"position":[[180,11],[306,11],[3077,10],[5452,9],[6225,9],[12887,10]]},"542":{"position":[[185,11],[4506,9],[4982,10],[7410,10],[8287,9],[9064,9],[9503,9],[10242,9],[14975,10]]},"544":{"position":[[155,11],[1045,9],[1724,9],[2270,10],[2945,10]]},"546":{"position":[[177,10],[193,11],[3120,10],[4210,9],[4511,9],[4773,9],[5494,9],[5905,9],[6638,9],[11215,10]]},"558":{"position":[[5255,10]]},"560":{"position":[[184,11],[310,11],[2309,10],[3681,9],[4426,9],[12110,10]]},"562":{"position":[[333,11],[14659,10]]},"564":{"position":[[244,11],[949,11],[1327,11],[1697,11],[1952,11],[2129,11],[14543,9],[15045,9],[15925,9],[16563,10],[16649,9],[22140,10],[25657,10],[25689,10],[25721,10],[25745,10],[25771,10],[25795,10]]},"566":{"position":[[212,11],[11245,9],[13616,9],[16027,9],[24166,10]]},"568":{"position":[[190,11],[2819,10],[3770,11],[4142,10],[5478,10],[6699,10],[6750,9],[6785,9],[11482,10],[11548,10],[11581,9],[14123,10],[14172,9],[19298,10],[21661,9],[21750,9],[21851,9],[24074,9],[24171,9],[28209,9],[28264,10],[30424,9],[30505,9],[33151,9],[33254,9],[35513,9],[37865,9],[42408,9],[42463,9],[46233,9],[49024,9],[49830,9],[54317,9],[54380,9],[56653,9],[56716,9],[75798,11],[107119,9],[107252,10],[121295,10],[121351,10],[121848,9],[121883,9]]}}}],["parameter'",{"_index":1511,"t":{"510":{"position":[[2329,11],[2369,11]]},"512":{"position":[[3559,11],[3599,11]]},"516":{"position":[[4129,11],[4169,11]]}}}],["parameters.add(\"employeeid",{"_index":1514,"t":{"510":{"position":[[2769,28]]},"512":{"position":[[3920,28],[5670,28]]},"516":{"position":[[4464,28],[6153,28]]}}}],["parameters.add(\"onclickcallback",{"_index":1615,"t":{"512":{"position":[[5705,33]]},"516":{"position":[[6188,33]]}}}],["parametr",{"_index":1485,"t":{"510":{"position":[[542,10]]}}}],["paramt",{"_index":3740,"t":{"568":{"position":[[30748,9]]}}}],["parent",{"_index":982,"t":{"498":{"position":[[726,6]]},"502":{"position":[[2762,6]]},"504":{"position":[[393,7]]},"506":{"position":[[370,6],[406,7]]},"508":{"position":[[400,6],[5658,6]]},"512":{"position":[[4896,6],[5040,6],[5258,6],[6554,6]]},"516":{"position":[[5441,6],[5585,6],[5803,6],[7026,6]]},"518":{"position":[[2133,6]]},"564":{"position":[[16517,7]]},"566":{"position":[[1383,6],[2627,6]]}}}],["parenthes",{"_index":3008,"t":{"542":{"position":[[5332,11],[5444,11],[15153,11]]}}}],["parentid",{"_index":3450,"t":{"566":{"position":[[1344,8],[2607,8]]}}}],["parentid=\"2",{"_index":3458,"t":{"566":{"position":[[3463,14],[5349,14],[7631,14],[9964,14],[12417,14],[14827,14],[17241,14],[19747,14],[23042,14]]}}}],["parentid=\"4",{"_index":3460,"t":{"566":{"position":[[3666,14],[3782,14],[3898,14],[5583,14],[5699,14],[5815,14],[7865,14],[7981,14],[8097,14],[10198,14],[10314,14],[10430,14],[12651,14],[12767,14],[12883,14],[15061,14],[15177,14],[15293,14],[17475,14],[17591,14],[17707,14],[19981,14],[20097,14],[20213,14],[23245,13],[23375,13],[23505,13]]}}}],["parentid=\"8",{"_index":3463,"t":{"566":{"position":[[4096,14],[4223,14],[4343,14],[4448,14],[6043,14],[6170,14],[6290,14],[6395,14],[8325,14],[8452,14],[8572,14],[8677,14],[10658,14],[10785,14],[10905,14],[11010,14],[13111,14],[13238,14],[13358,14],[13463,14],[15521,14],[15648,14],[15768,14],[15873,14],[17935,14],[18062,14],[18182,14],[18287,14],[20441,14],[20568,14],[20688,14],[20793,14],[23717,14],[23844,14],[23964,14],[24069,14]]}}}],["part",{"_index":1031,"t":{"498":{"position":[[3300,4]]},"568":{"position":[[50095,4]]}}}],["particip",{"_index":1105,"t":{"502":{"position":[[1902,12]]},"504":{"position":[[1139,12]]},"564":{"position":[[1251,12],[1629,12],[2583,12]]}}}],["parts—with",{"_index":1173,"t":{"502":{"position":[[7213,10]]}}}],["pass",{"_index":346,"t":{"54":{"position":[[393,4],[438,4]]},"68":{"position":[[549,4],[594,4]]},"94":{"position":[[652,6]]},"510":{"position":[[2282,4]]},"512":{"position":[[3512,4],[4775,4],[4843,6],[5057,6],[21457,4]]},"516":{"position":[[4082,4],[5304,4],[5388,6],[5602,6],[15140,4]]},"522":{"position":[[2252,7]]},"532":{"position":[[16047,4]]},"534":{"position":[[16332,4]]},"536":{"position":[[8036,4]]},"562":{"position":[[11662,4]]},"568":{"position":[[5806,6]]}}}],["pellentesqu",{"_index":1678,"t":{"512":{"position":[[8022,12],[8466,12],[8776,12],[9960,13],[10433,12],[12263,12],[12707,12],[13017,12],[14201,13],[14674,12],[16404,12],[16848,12],[17158,12],[18342,13],[18815,12]]}}}],["per",{"_index":2168,"t":{"524":{"position":[[11662,3]]},"532":{"position":[[1744,3]]},"534":{"position":[[1627,3]]},"536":{"position":[[1326,3]]},"562":{"position":[[1491,3]]},"568":{"position":[[1820,3],[103181,3]]}}}],["percent",{"_index":2336,"t":{"532":{"position":[[1086,7],[1457,7]]}}}],["percept",{"_index":1991,"t":{"518":{"position":[[2605,10]]}}}],["perform",{"_index":272,"t":{"40":{"position":[[253,11]]},"500":{"position":[[229,11]]},"516":{"position":[[2596,9]]}}}],["persist",{"_index":3756,"t":{"568":{"position":[[50198,7],[50249,10]]}}}],["ph",{"_index":2983,"t":{"542":{"position":[[3607,3]]}}}],["phtooltip",{"_index":2306,"t":{"530":{"position":[[881,43]]}}}],["placement=\"tooltipplacement.left\">tooltip",{"_index":2300,"t":{"530":{"position":[[612,41]]}}}],["placement=\"tooltipplacement.right\">tooltip",{"_index":2304,"t":{"530":{"position":[[777,42]]}}}],["placement=\"tooltipplacement.top\">tooltip",{"_index":2320,"t":{"530":{"position":[[1539,40]]}}}],["placerat",{"_index":1645,"t":{"512":{"position":[[7713,8],[9507,9],[9678,8],[11954,8],[13748,9],[13919,8],[16095,8],[17889,9],[18060,8]]}}}],["placerat.primarysubmitsecondaryset",{"_index":2045,"t":{"520":{"position":[[5095,35]]}}}],["setcolor(progresscolor.dark)\">set",{"_index":2048,"t":{"520":{"position":[[5536,33]]}}}],["setcolor(progresscolor.info)\">set",{"_index":2043,"t":{"520":{"position":[[4805,33]]}}}],["setcolor(progresscolor.primary)\">set",{"_index":2046,"t":{"520":{"position":[[5241,36]]}}}],["setcolor(progresscolor.secondary)\">set",{"_index":2047,"t":{"520":{"position":[[5390,38]]}}}],["setcolor(progresscolor.success)\">set",{"_index":2041,"t":{"520":{"position":[[4661,36]]}}}],["setcolor(progresscolor.warning)\">set",{"_index":2044,"t":{"520":{"position":[[4949,36]]}}}],["seth",{"_index":2708,"t":{"538":{"position":[[3732,7],[5603,7],[8228,7]]}}}],["setlabel",{"_index":2005,"t":{"520":{"position":[[942,8],[1977,13]]}}}],["settings.pagenumb",{"_index":3767,"t":{"568":{"position":[[52205,21]]}}}],["settings.pages",{"_index":3768,"t":{"568":{"position":[[52232,19]]}}}],["settingsjson",{"_index":3773,"t":{"568":{"position":[[52432,12]]}}}],["settingsprovid",{"_index":3537,"t":{"568":{"position":[[2469,16]]}}}],["settingsprovider=\"gridsettingsprovid",{"_index":3762,"t":{"568":{"position":[[50640,40]]}}}],["setup",{"_index":426,"t":{"72":{"position":[[657,5],[675,5],[709,5],[925,5],[973,5]]},"526":{"position":[[811,6],[1383,6],[3824,6]]},"552":{"position":[[46,5],[273,6],[357,6],[436,6]]},"554":{"position":[[41,5],[268,6],[352,6],[431,6]]},"558":{"position":[[4951,6],[5991,5]]}}}],["setwidth",{"_index":2006,"t":{"520":{"position":[[979,8]]}}}],["sever",{"_index":1227,"t":{"504":{"position":[[1900,7]]},"508":{"position":[[11099,7]]},"528":{"position":[[5665,7]]},"540":{"position":[[1750,7]]}}}],["sfh",{"_index":2672,"t":{"538":{"position":[[3447,4],[5318,4],[7943,4]]}}}],["shallow",{"_index":3794,"t":{"568":{"position":[[58762,7],[59499,7]]}}}],["shape",{"_index":2501,"t":{"534":{"position":[[3406,6]]}}}],["share",{"_index":140,"t":{"10":{"position":[[297,5]]}}}],["shared/mainlayout.razor.css",{"_index":3168,"t":{"552":{"position":[[547,27]]},"554":{"position":[[542,27]]}}}],["sharna",{"_index":3645,"t":{"568":{"position":[[13393,9],[18584,9],[48186,9],[53831,9],[62635,9],[65856,9],[69233,9],[81734,9],[84500,9],[106579,9]]}}}],["shop",{"_index":1562,"t":{"512":{"position":[[107,8]]}}}],["shortcut",{"_index":2650,"t":{"538":{"position":[[2160,9]]}}}],["show",{"_index":155,"t":{"12":{"position":[[297,7],[441,7]]},"74":{"position":[[189,4]]},"102":{"position":[[252,5]]},"496":{"position":[[552,4],[774,4],[998,4],[1216,4],[1432,4],[1704,4],[1946,4],[2190,4],[2428,4],[2664,4]]},"498":{"position":[[80,5]]},"502":{"position":[[11813,4],[13128,4]]},"504":{"position":[[693,5],[1746,5],[7896,4],[10059,4]]},"506":{"position":[[541,5],[776,4],[1218,4],[1593,4]]},"508":{"position":[[594,4],[657,4],[721,4],[789,4],[925,4],[2122,7],[2673,7],[3223,7],[3986,7],[4611,7],[5234,7],[5976,7],[6527,7],[7077,7],[7780,7],[8347,7],[8897,7],[9612,7],[10163,7],[10713,7],[11600,7],[12163,7],[12725,7],[13283,7],[13831,7],[14391,7],[16545,7],[17118,7],[17690,7],[18228,8]]},"510":{"position":[[313,5],[460,5],[622,5],[1092,5],[2435,4],[2990,4]]},"512":{"position":[[962,5],[1359,5],[2002,4],[2923,8],[20948,10]]},"516":{"position":[[1105,5],[1337,5],[2082,4],[3229,4],[8675,4],[10432,4],[14534,10],[14641,7]]},"522":{"position":[[740,5],[851,5],[1170,6],[2289,9]]},"524":{"position":[[934,4],[9750,5],[10033,5]]},"528":{"position":[[448,4],[516,4],[597,4],[677,4],[7687,7]]},"532":{"position":[[173,4]]},"534":{"position":[[181,4],[4127,4],[14298,4],[14905,4],[15512,4]]},"536":{"position":[[123,5]]},"542":{"position":[[108,4],[2066,4],[15022,4]]},"544":{"position":[[85,4]]},"558":{"position":[[95,4],[750,5]]},"562":{"position":[[135,5]]},"564":{"position":[[3006,5],[3552,4]]},"566":{"position":[[93,4],[8749,4],[8819,4],[11121,4],[11258,4],[15984,4],[24308,4],[24324,4],[24353,4]]},"568":{"position":[[1248,5],[49926,5]]}}}],["show(spinnercolor",{"_index":2054,"t":{"522":{"position":[[682,17],[765,17]]}}}],["show/hid",{"_index":1305,"t":{"504":{"position":[[7460,9],[10033,9]]}}}],["showaccordionitembyindexasync",{"_index":1399,"t":{"508":{"position":[[759,29],[11227,29]]}}}],["showaccordionitembynameasync",{"_index":1398,"t":{"508":{"position":[[692,28],[11193,29]]}}}],["showasync",{"_index":1343,"t":{"506":{"position":[[531,9],[1245,10]]},"512":{"position":[[1349,9]]},"516":{"position":[[1577,9]]},"558":{"position":[[5168,14],[5206,9]]},"564":{"position":[[2996,9],[24468,11]]}}}],["showasync(modalopt",{"_index":3196,"t":{"558":{"position":[[255,21]]}}}],["showasync(str",{"_index":1478,"t":{"510":{"position":[[211,16],[341,16]]}}}],["showasync(str",{"_index":1483,"t":{"510":{"position":[[488,19]]},"516":{"position":[[1608,19]]}}}],["showclosebutton",{"_index":1573,"t":{"512":{"position":[[913,15]]},"516":{"position":[[1288,15]]},"524":{"position":[[913,15]]}}}],["showconfirmationasync",{"_index":1504,"t":{"510":{"position":[[1719,23]]}}}],["showconfirmationasync(dialogs",{"_index":1549,"t":{"510":{"position":[[5401,32]]}}}],["showconfirmationasync(dialogsize.extralarg",{"_index":1548,"t":{"510":{"position":[[5260,46]]}}}],["showconfirmationasync(dialogsize.larg",{"_index":1547,"t":{"510":{"position":[[5135,41]]}}}],["showconfirmationasync(dialogsize.smal",{"_index":1546,"t":{"510":{"position":[[5010,41]]}}}],["showcontentasync",{"_index":1361,"t":{"506":{"position":[[2237,18],[3206,18],[4523,18]]}}}],["showcurrencysymbol=\"tru",{"_index":3024,"t":{"542":{"position":[[7917,25],[8487,25],[8746,25],[9223,25],[11591,25],[11988,25],[12434,25]]}}}],["showdialogasync",{"_index":1557,"t":{"510":{"position":[[6094,17],[6586,17],[7210,17],[7851,17]]}}}],["showdtmessag",{"_index":1605,"t":{"512":{"position":[[4926,13],[5085,13],[5282,14],[5790,16]]},"516":{"position":[[5471,13],[5630,13],[5827,14],[6273,16]]}}}],["showdtmessage(mouseeventarg",{"_index":1618,"t":{"512":{"position":[[5924,28]]},"516":{"position":[[6403,28]]}}}],["showemployeecompon",{"_index":1597,"t":{"512":{"position":[[3843,23],[5593,23]]}}}],["showfaqsaccordionitemasync",{"_index":1454,"t":{"508":{"position":[[15801,28]]}}}],["showfaqsasync",{"_index":2286,"t":{"528":{"position":[[7519,15]]}}}],["showfirstaccordionitemasync",{"_index":1394,"t":{"508":{"position":[[566,27],[11136,28],[15380,29]]}}}],["showfirsttabasync",{"_index":2249,"t":{"528":{"position":[[404,17],[5702,18],[7202,19]]}}}],["showfooterbutton",{"_index":3202,"t":{"558":{"position":[[726,16],[4854,16]]}}}],["showhorizontalbarchartasync",{"_index":2414,"t":{"532":{"position":[[6962,29]]}}}],["showhorizontalbarchartasync()\">horizont",{"_index":2384,"t":{"532":{"position":[[4545,41]]}}}],["showhorizontallinechartasync",{"_index":2532,"t":{"534":{"position":[[6584,32],[8803,30]]}}}],["showlastaccordionitemasync",{"_index":1396,"t":{"508":{"position":[[630,26],[11165,27],[15906,28]]}}}],["showlasttabasync",{"_index":2252,"t":{"528":{"position":[[474,16],[5721,17],[7595,18]]}}}],["showlin",{"_index":2514,"t":{"534":{"position":[[3755,8]]}}}],["showload",{"_index":1225,"t":{"504":{"position":[[1734,11],[7491,13]]}}}],["showloadingdataasync",{"_index":2068,"t":{"522":{"position":[[1836,22]]}}}],["showmessage(toasttyp",{"_index":2124,"t":{"524":{"position":[[2753,21],[4297,21],[5735,21],[7325,21],[11005,21]]}}}],["showmessage(toasttype.danger)\">dang",{"_index":2120,"t":{"524":{"position":[[2320,37],[3763,37],[5302,37],[6892,37],[10572,37]]}}}],["showmessage(toasttype.dark)\">dark",{"_index":2123,"t":{"524":{"position":[[2627,33],[4171,33],[5609,33],[7199,33],[10879,33]]}}}],["showmessage(toasttype.info)\">info",{"_index":2122,"t":{"524":{"position":[[2529,33],[3972,33],[5511,33],[7101,33],[10781,33]]}}}],["showmessage(toasttype.light)\">light",{"_index":2133,"t":{"524":{"position":[[4071,35]]}}}],["showmessage(toasttype.primary)\">primari",{"_index":2116,"t":{"524":{"position":[[1994,39],[3437,39],[4976,39],[6566,39],[10246,39]]}}}],["showmessage(toasttype.secondary)\">secondari",{"_index":2118,"t":{"524":{"position":[[2103,43],[3546,43],[5085,43],[6675,43],[10355,43]]}}}],["showmessage(toasttype.success)\">success",{"_index":2119,"t":{"524":{"position":[[2214,39],[3657,39],[5196,39],[6786,39],[10466,39]]}}}],["showmessage(toasttype.warning)\">warn",{"_index":2121,"t":{"524":{"position":[[2425,39],[3868,39],[5407,39],[6997,39],[10677,39]]}}}],["showmod",{"_index":3221,"t":{"558":{"position":[[4308,11],[4741,11]]}}}],["showmodal(modals",{"_index":3219,"t":{"558":{"position":[[3892,19]]}}}],["showmodal(modalsize.extralarge)\">show",{"_index":3217,"t":{"558":{"position":[[3740,37]]}}}],["showmodal(modalsize.large)\">show",{"_index":3216,"t":{"558":{"position":[[3635,32]]}}}],["showmodal(modalsize.regular)\">show",{"_index":3213,"t":{"558":{"position":[[3417,34]]}}}],["showmodal(modalsize.small)\">show",{"_index":3215,"t":{"558":{"position":[[3529,32]]}}}],["showmodal(modaltyp",{"_index":3211,"t":{"558":{"position":[[1933,19],[3116,19]]}}}],["showmodal(modaltype.danger)\">show",{"_index":3206,"t":{"558":{"position":[[1373,33],[2556,33]]}}}],["showmodal(modaltype.dark)\">show",{"_index":3210,"t":{"558":{"position":[[1793,31],[2976,31]]}}}],["showmodal(modaltype.info)\">show",{"_index":3208,"t":{"558":{"position":[[1588,31],[2771,31]]}}}],["showmodal(modaltype.light)\">show",{"_index":3209,"t":{"558":{"position":[[1690,32],[2873,32]]}}}],["showmodal(modaltype.primary)\">show",{"_index":3203,"t":{"558":{"position":[[1038,34],[2221,34]]}}}],["showmodal(modaltype.secondary)\">show",{"_index":3204,"t":{"558":{"position":[[1150,36],[2333,36]]}}}],["showmodal(modaltype.success)\">show",{"_index":3205,"t":{"558":{"position":[[1264,34],[2447,34]]}}}],["showmodal(modaltype.warning)\">show",{"_index":3207,"t":{"558":{"position":[[1481,34],[2664,34]]}}}],["shown",{"_index":157,"t":{"12":{"position":[[318,5],[462,5]]},"502":{"position":[[5188,5]]},"506":{"position":[[666,5],[3094,5]]},"508":{"position":[[1953,5],[3598,5],[3817,5],[5807,5],[7611,5],[9443,5],[11260,5],[11431,5],[16376,5]]},"512":{"position":[[1456,5],[2607,6],[2740,5],[2816,5],[21059,8]]},"516":{"position":[[2510,6]]},"522":{"position":[[1012,5],[1252,5],[2371,5]]},"524":{"position":[[11439,5],[11741,5]]},"528":{"position":[[2770,5],[5787,5],[7807,5],[7930,5]]},"558":{"position":[[5010,5],[5193,5]]}}}],["showoffcanvasasync",{"_index":1589,"t":{"512":{"position":[[2901,21],[3081,20]]}}}],["showproductsaccordionitemasync",{"_index":1452,"t":{"508":{"position":[[15687,32]]}}}],["showproductstabasync",{"_index":2284,"t":{"528":{"position":[[7431,22]]}}}],["showsaveconfirmationasync",{"_index":1535,"t":{"510":{"position":[[4218,27]]}}}],["showsavingdataasync",{"_index":2071,"t":{"522":{"position":[[2013,21]]}}}],["showsecondaccordionitemasync",{"_index":1448,"t":{"508":{"position":[[15480,30]]}}}],["showsecondtabasync",{"_index":2280,"t":{"528":{"position":[[7276,20]]}}}],["showspinnerasync(spinnercolor",{"_index":2082,"t":{"522":{"position":[[3500,29]]}}}],["showspinnerasync(spinnercolor.danger)\">dang",{"_index":2077,"t":{"522":{"position":[[2855,45]]}}}],["showspinnerasync(spinnercolor.dark)\">dark",{"_index":2081,"t":{"522":{"position":[[3351,41]]}}}],["showspinnerasync(spinnercolor.info)\">info",{"_index":2079,"t":{"522":{"position":[[3108,41]]}}}],["showspinnerasync(spinnercolor.light)\">light",{"_index":2080,"t":{"522":{"position":[[3229,43]]}}}],["showspinnerasync(spinnercolor.primary)\">primari",{"_index":2073,"t":{"522":{"position":[[2463,47]]}}}],["showspinnerasync(spinnercolor.secondary)\">secondari",{"_index":2075,"t":{"522":{"position":[[2594,51]]}}}],["showspinnerasync(spinnercolor.success)\">success",{"_index":2076,"t":{"522":{"position":[[2727,47]]}}}],["showspinnerasync(spinnercolor.warning)\">warn",{"_index":2078,"t":{"522":{"position":[[2982,47]]}}}],["showtabbyindexasync",{"_index":509,"t":{"88":{"position":[[455,19]]},"528":{"position":[[5739,20]]}}}],["showtabbyindexasync(int",{"_index":2254,"t":{"528":{"position":[[623,24]]}}}],["showtabbynameasync",{"_index":2262,"t":{"528":{"position":[[5764,19]]}}}],["showtabbynameasync(str",{"_index":2253,"t":{"528":{"position":[[542,26]]}}}],["showthirdaccordionitemasync",{"_index":1450,"t":{"508":{"position":[[15584,29]]}}}],["showthirdtabasync",{"_index":2282,"t":{"528":{"position":[[7354,19]]}}}],["showverticalbarchartasync",{"_index":2416,"t":{"532":{"position":[[7104,27]]}}}],["showverticalbarchartasync()\">vert",{"_index":2386,"t":{"532":{"position":[[4713,37]]}}}],["showverticallinechartasync",{"_index":2533,"t":{"534":{"position":[[6756,30],[8949,28]]}}}],["side",{"_index":212,"t":{"28":{"position":[[228,4],[255,4]]},"32":{"position":[[261,4],[277,5]]},"532":{"position":[[223,4],[231,5],[1748,5]]},"534":{"position":[[1631,5]]},"536":{"position":[[1330,5]]},"538":{"position":[[199,4],[215,4],[2565,4],[3148,4],[4152,4],[5019,4],[6023,4],[7644,4],[13957,4],[13974,4],[14014,4]]},"544":{"position":[[393,5],[2244,4]]},"562":{"position":[[1495,5]]},"564":{"position":[[16505,4]]},"568":{"position":[[146,4],[162,4],[5874,4],[6636,4],[8961,4],[11432,4],[14063,4],[16454,4],[28120,4],[28172,4],[50277,4],[51826,4],[61164,4],[64559,4],[67936,4],[71074,4],[74049,4],[77346,4],[80437,4],[83203,4],[88432,4],[96662,4],[98853,4],[101291,4],[105282,4],[109162,4],[121402,4],[121424,4],[121470,4],[121489,4],[121509,4],[121632,4]]}}}],["sidebar",{"_index":42,"t":{"2":{"position":[[734,8],[934,7]]},"56":{"position":[[119,7],[155,7],[189,7],[252,7],[348,7],[406,7]]},"94":{"position":[[587,7],[943,7]]},"102":{"position":[[177,8],[462,7],[480,7],[985,7]]},"106":{"position":[[346,7],[364,8]]},"112":{"position":[[1968,7],[2004,7],[2058,7]]},"126":{"position":[[226,8],[426,7]]},"128":{"position":[[778,8],[978,7]]},"194":{"position":[[2012,7],[2048,7],[2102,7]]},"200":{"position":[[232,8],[432,7]]},"204":{"position":[[787,8],[987,7]]},"212":{"position":[[2021,7],[2057,7],[2111,7]]},"224":{"position":[[226,8],[426,7]]},"230":{"position":[[234,8],[434,7]]},"254":{"position":[[225,8],[425,7]]},"258":{"position":[[227,8],[427,7],[601,7],[637,7],[691,7]]},"274":{"position":[[227,8],[427,7]]},"278":{"position":[[782,8],[982,7]]},"280":{"position":[[781,8],[981,7]]},"298":{"position":[[220,8],[420,7]]},"310":{"position":[[228,8],[428,7]]},"328":{"position":[[775,8],[975,7]]},"338":{"position":[[163,7],[199,7],[253,7]]},"342":{"position":[[165,7],[201,7],[255,7]]},"346":{"position":[[226,8],[426,7]]},"348":{"position":[[167,7],[203,7],[257,7]]},"360":{"position":[[495,8],[695,7]]},"366":{"position":[[20,9],[221,8],[421,7],[595,7],[631,7],[685,7]]},"386":{"position":[[221,8],[421,7]]},"436":{"position":[[222,8],[422,7]]},"450":{"position":[[163,7],[199,7],[253,7]]},"512":{"position":[[64,8],[2405,7]]},"520":{"position":[[8195,7]]},"528":{"position":[[9214,7]]},"548":{"position":[[3172,7]]},"550":{"position":[[3335,7]]},"552":{"position":[[633,8],[1001,7],[1009,7]]},"554":{"position":[[628,8],[996,7],[1004,7]]},"556":{"position":[[2815,7]]},"566":{"position":[[11,7],[39,7],[72,7],[772,7],[814,8],[1587,8],[1716,7],[1724,8],[2454,11],[2513,11],[2711,8],[2840,7],[2848,8],[3828,11],[3887,10],[4566,8],[4695,7],[4703,8],[5745,11],[5804,10],[6466,8],[6571,8],[6602,8],[6977,7],[6985,8],[8027,11],[8086,10],[8738,7],[8808,7],[8862,8],[9310,7],[9318,8],[10360,11],[10419,10],[11296,8],[11763,7],[11771,8],[12813,11],[12872,10],[13711,8],[14173,7],[14181,8],[15223,11],[15282,10],[16082,8],[16587,7],[16595,8],[17637,11],[17696,10],[18408,8],[18446,7],[18548,8],[18997,7],[19062,7],[19070,8],[20143,11],[20202,10],[20954,7],[20981,7],[21017,7],[21072,7],[21129,7],[21182,7],[21225,7],[21265,7],[21303,7],[21342,7],[21397,7],[21480,7],[21532,7],[21596,7],[21649,7],[21700,7],[21752,7],[21801,7],[21852,7],[21902,7],[21953,7],[22008,7],[22060,7],[22115,7],[22290,8],[22419,7],[22427,8],[23435,11],[23494,10],[24282,7],[24297,7],[24388,7]]}}}],["sidebar.togglesidebar",{"_index":3475,"t":{"566":{"position":[[11079,24],[13532,24],[15942,24],[18356,24]]}}}],["sidebar2",{"_index":701,"t":{"120":{"position":[[1588,8]]}}}],["sidebardataprovider(sidebardataproviderrequest",{"_index":3184,"t":{"552":{"position":[[1125,46]]},"554":{"position":[[1120,46]]},"566":{"position":[[1810,46],[2934,46],[4789,46],[7071,46],[9404,46],[11857,46],[14267,46],[16681,46],[19187,46],[22513,46]]}}}],["sidebardataproviderresult",{"_index":3442,"t":{"566":{"position":[[503,28]]}}}],["sidebaritem",{"_index":532,"t":{"94":{"position":[[605,11]]}}}],["sidemod",{"_index":305,"t":{"44":{"position":[[639,9]]},"114":{"position":[[633,9]]},"136":{"position":[[1274,9]]},"144":{"position":[[683,9]]},"146":{"position":[[691,9]]},"166":{"position":[[281,9]]},"174":{"position":[[684,9]]},"178":{"position":[[29,10],[281,9]]},"180":{"position":[[684,9]]},"196":{"position":[[677,9]]},"214":{"position":[[686,9]]},"428":{"position":[[271,9]]}}}],["sidemodal1",{"_index":619,"t":{"120":{"position":[[477,10]]}}}],["sign",{"_index":3011,"t":{"542":{"position":[[5373,5],[5485,5],[15194,4]]}}}],["signific",{"_index":223,"t":{"32":{"position":[[112,11]]},"114":{"position":[[2698,11]]},"214":{"position":[[2751,11]]},"332":{"position":[[1266,11]]},"412":{"position":[[156,11]]}}}],["similar",{"_index":1587,"t":{"512":{"position":[[2536,7],[2695,7]]},"562":{"position":[[196,7]]}}}],["similarli",{"_index":851,"t":{"492":{"position":[[2137,10]]}}}],["simmon",{"_index":3702,"t":{"568":{"position":[[27494,10],[45523,10]]}}}],["simpl",{"_index":801,"t":{"492":{"position":[[933,6],[1018,6],[1103,6],[1185,6],[1267,6],[1347,6],[1425,6],[1503,6],[2437,6],[2582,6],[2727,6]]},"510":{"position":[[4462,7],[5548,7],[7352,7]]},"524":{"position":[[3220,6],[4515,6]]}}}],["singl",{"_index":469,"t":{"82":{"position":[[206,6]]},"84":{"position":[[237,6]]},"96":{"position":[[240,6]]},"502":{"position":[[10613,7]]},"524":{"position":[[1772,6]]},"564":{"position":[[3740,6],[25848,6]]},"568":{"position":[[69803,7]]}}}],["sink",{"_index":1151,"t":{"502":{"position":[[5086,5],[13638,4]]}}}],["sit",{"_index":1632,"t":{"512":{"position":[[7593,3],[7672,3],[7910,3],[8684,3],[8846,3],[10234,3],[10298,3],[10451,3],[11834,3],[11913,3],[12151,3],[12925,3],[13087,3],[14475,3],[14539,3],[14692,3],[15975,3],[16054,3],[16292,3],[17066,3],[17228,3],[18616,3],[18680,3],[18833,3]]}}}],["site",{"_index":292,"t":{"42":{"position":[[511,4]]},"44":{"position":[[248,4]]},"48":{"position":[[396,4]]},"50":{"position":[[247,4]]},"52":{"position":[[226,4]]},"54":{"position":[[489,4]]},"56":{"position":[[213,4]]},"60":{"position":[[337,4]]},"516":{"position":[[103,4]]},"558":{"position":[[122,4]]}}}],["site.css",{"_index":3167,"t":{"550":{"position":[[3266,8]]}}}],["sixth",{"_index":1439,"t":{"508":{"position":[[14182,5]]}}}],["size",{"_index":271,"t":{"40":{"position":[[234,5]]},"82":{"position":[[317,4],[327,4]]},"94":{"position":[[310,4]]},"96":{"position":[[283,6],[534,6]]},"106":{"position":[[302,6]]},"108":{"position":[[390,4]]},"498":{"position":[[704,4],[764,6]]},"502":{"position":[[2123,4],[2165,5],[2518,4],[2560,5],[6290,7],[13661,6]]},"504":{"position":[[148,6],[1017,4],[1022,4],[1039,4],[3434,6],[3532,6],[3900,4],[9931,5]]},"510":{"position":[[1293,4],[1327,4],[4660,6],[4702,6],[4715,5],[4839,4],[4877,4],[4921,4],[5434,5],[5483,4],[5490,4],[8376,5]]},"512":{"position":[[1003,4],[1022,4],[11595,6],[11610,4],[11641,4],[21527,5]]},"514":{"position":[[1091,4],[1139,5],[2205,7],[2327,6],[3284,6]]},"516":{"position":[[1230,4],[1245,4],[11322,6],[11356,6],[11369,5],[15287,5]]},"518":{"position":[[644,4],[694,5],[2058,7],[2070,4],[2169,4],[3548,6]]},"526":{"position":[[673,4],[709,5],[1025,6],[1257,4],[2799,4],[4407,5]]},"534":{"position":[[2912,4]]},"538":{"position":[[800,4]]},"558":{"position":[[789,4],[827,5],[3359,5],[4024,4],[5924,4]]},"564":{"position":[[791,4],[796,4],[818,4],[8909,7],[18378,6],[25881,6]]},"568":{"position":[[1911,4],[2013,4],[2100,4],[6540,4],[11626,4],[50006,5],[79218,5],[79912,4],[80028,4],[80145,4],[82227,5],[82247,5],[82274,4],[122068,4],[122078,4]]}}}],["size.non",{"_index":3326,"t":{"564":{"position":[[840,9]]}}}],["size=\"iconsize.x1",{"_index":2208,"t":{"526":{"position":[[1480,18]]}}}],["size=\"iconsize.x2",{"_index":2199,"t":{"526":{"position":[[1060,18],[1552,18],[1901,18],[1994,18],[2075,18],[2149,18],[2241,18],[2326,18],[2414,18],[2488,18],[2564,18],[2646,18],[2728,18]]}}}],["size=\"iconsize.x3",{"_index":2200,"t":{"526":{"position":[[1110,18],[1624,18]]}}}],["size=\"iconsize.x4",{"_index":2201,"t":{"526":{"position":[[1160,18],[1696,18]]}}}],["size=\"iconsize.x5",{"_index":2202,"t":{"526":{"position":[[1210,18],[1768,18]]}}}],["size=\"iconsize.x6",{"_index":2209,"t":{"526":{"position":[[1840,18]]}}}],["size=\"modalsize.extralarg",{"_index":1909,"t":{"516":{"position":[[11508,28]]}}}],["size=\"modalsize.larg",{"_index":1912,"t":{"516":{"position":[[11621,23]]}}}],["size=\"modalsize.smal",{"_index":1915,"t":{"516":{"position":[[11729,23]]}}}],["size=\"offcanvassize.larg",{"_index":1779,"t":{"512":{"position":[[15911,27]]}}}],["size=\"offcanvassize.smal",{"_index":1778,"t":{"512":{"position":[[11770,27]]}}}],["size=\"paginationsize.larg",{"_index":1838,"t":{"514":{"position":[[2284,27],[2512,27]]}}}],["size=\"paginationsize.smal",{"_index":1837,"t":{"514":{"position":[[2253,27],[2382,27]]}}}],["size=\"placeholdersize.extrasmal",{"_index":1988,"t":{"518":{"position":[[2440,33],[2956,33],[3335,33]]}}}],["size=\"placeholdersize.larg",{"_index":1986,"t":{"518":{"position":[[2288,28],[2804,28],[3183,28]]}}}],["size=\"placeholdersize.smal",{"_index":1987,"t":{"518":{"position":[[2364,28],[2880,28],[3259,28]]}}}],["size=\"size.larg",{"_index":1253,"t":{"504":{"position":[[3478,17],[3579,18],[3659,18],[4270,17],[4366,17],[4492,17],[4611,17]]},"564":{"position":[[8959,18],[9095,17],[9356,17]]}}}],["size=\"size.smal",{"_index":1254,"t":{"504":{"position":[[3499,17],[3746,18],[3826,18]]},"520":{"position":[[2375,17],[2510,17],[2645,17],[4627,17],[4771,17],[4915,17],[5061,17],[5207,17],[5356,17],[5502,17]]},"532":{"position":[[4063,17],[4209,17],[4358,17],[4499,17],[4667,17]]},"534":{"position":[[6100,17],[6246,17],[6395,17],[6538,17],[6710,17]]},"536":{"position":[[3149,17],[3295,17],[3444,17],[7092,17],[7238,17]]},"562":{"position":[[3441,17],[3587,17],[3736,17],[10678,17],[10824,17]]},"564":{"position":[[9848,18],[10227,17],[15534,17],[15629,17]]},"566":{"position":[[18941,17]]}}}],["slide",{"_index":1867,"t":{"516":{"position":[[3269,5]]}}}],["sm",{"_index":1170,"t":{"502":{"position":[[6515,2],[6810,2],[10787,2]]},"504":{"position":[[7327,3]]},"516":{"position":[[12364,3]]},"538":{"position":[[2619,2],[4446,2],[6077,2],[7046,2],[11039,2],[12577,2]]}}}],["smful",{"_index":1936,"t":{"516":{"position":[[13145,26]]}}}],["smmodal?.showasync()\">smal",{"_index":1918,"t":{"516":{"position":[[12043,27]]}}}],["sobi",{"_index":2673,"t":{"538":{"position":[[3452,7],[5323,7],[7948,7]]}}}],["sodal",{"_index":1651,"t":{"512":{"position":[[7779,7],[8994,7],[9526,7],[12020,7],[13235,7],[13767,7],[16161,7],[17376,7],[17908,7]]}}}],["solid",{"_index":2206,"t":{"526":{"position":[[1455,5],[1527,5],[1599,5],[1671,5],[1743,5],[1815,5],[3963,5],[4097,5]]},"538":{"position":[[8698,5],[8739,5]]},"540":{"position":[[7152,5],[7193,5],[9749,5],[9790,5]]},"542":{"position":[[11167,5],[11208,5]]},"546":{"position":[[7546,5],[7587,5]]},"560":{"position":[[5329,5],[5370,5],[9349,5],[9390,5]]},"564":{"position":[[19004,5],[19045,5]]}}}],["someth",{"_index":1476,"t":{"510":{"position":[[148,10]]},"518":{"position":[[140,9],[2619,9]]}}}],["sometim",{"_index":2322,"t":{"532":{"position":[[155,9]]}}}],["somewheredateonlydateonly?datetimedatetime?holi",{"_index":862,"t":{"492":{"position":[[3007,12],[3218,12]]}}}],["strong>thi",{"_index":937,"t":{"496":{"position":[[491,12],[714,12],[937,12],[1158,12],[1375,12],[1643,12],[1886,12],[2129,12],[2370,12],[2607,12]]}}}],["strong>timeonlytimeonly?successswap",{"_index":1272,"t":{"504":{"position":[[5315,19]]}}}],["switch",{"_index":20,"t":{"2":{"position":[[159,9],[240,6],[1418,6]]},"52":{"position":[[120,6],[166,6],[203,6],[265,6],[413,6]]},"80":{"position":[[544,6]]},"82":{"position":[[964,6],[1620,6],[1894,6]]},"94":{"position":[[394,6],[411,6],[826,6]]},"96":{"position":[[181,6],[1055,6],[1072,6],[1459,6]]},"108":{"position":[[159,9],[296,6],[313,7],[337,6],[668,6]]},"110":{"position":[[1526,6]]},"112":{"position":[[2526,6],[2572,6]]},"126":{"position":[[857,6]]},"128":{"position":[[203,9],[284,6],[1462,6]]},"136":{"position":[[173,6],[219,6]]},"192":{"position":[[1570,6]]},"194":{"position":[[2570,6],[2616,6]]},"200":{"position":[[863,6]]},"204":{"position":[[212,9],[293,6],[1471,6]]},"208":{"position":[[1579,6]]},"212":{"position":[[2579,6],[2625,6]]},"232":{"position":[[432,6]]},"236":{"position":[[728,6]]},"244":{"position":[[477,6],[2282,6]]},"256":{"position":[[431,6]]},"262":{"position":[[428,6]]},"264":{"position":[[425,6],[601,6],[647,6]]},"272":{"position":[[714,6]]},"278":{"position":[[207,9],[288,6],[1466,6]]},"280":{"position":[[206,9],[287,6],[1465,6]]},"282":{"position":[[1574,6]]},"300":{"position":[[1573,6]]},"302":{"position":[[203,9],[284,6]]},"318":{"position":[[722,6]]},"320":{"position":[[426,6]]},"328":{"position":[[200,9],[281,6]]},"330":{"position":[[201,9],[282,6],[746,6],[2551,6]]},"352":{"position":[[425,6]]},"356":{"position":[[422,6]]},"358":{"position":[[204,9],[285,6]]},"360":{"position":[[202,9],[283,6]]},"370":{"position":[[20,8],[202,9],[283,6],[694,6]]},"374":{"position":[[708,6]]},"432":{"position":[[226,6]]},"442":{"position":[[164,6],[210,6]]},"444":{"position":[[204,9],[285,6]]},"472":{"position":[[420,6]]},"528":{"position":[[8854,6]]},"544":{"position":[[6,6],[33,6],[65,6],[370,6],[531,7],[567,7],[659,6],[714,7],[758,6],[784,7],[828,6],[1070,7],[1097,7],[1162,6],[1682,7],[1787,7],[1846,6],[2043,6],[2219,8],[2281,7],[2324,6],[2449,6],[2475,7],[2512,6],[2805,8]]},"546":{"position":[[11208,6]]},"560":{"position":[[12088,6]]},"566":{"position":[[4390,10],[4438,9],[6337,10],[6385,9],[8619,10],[8667,9],[10952,10],[11000,9],[13405,10],[13453,9],[15815,10],[15863,9],[18229,10],[18277,9],[20735,10],[20783,9],[24011,10],[24059,9]]},"568":{"position":[[67412,7],[67481,7]]}}}],["switch1",{"_index":3091,"t":{"544":{"position":[[2050,7]]}}}],["switch1.dis",{"_index":3092,"t":{"544":{"position":[[2123,18]]}}}],["switch1.en",{"_index":3093,"t":{"544":{"position":[[2167,17]]}}}],["switch2",{"_index":702,"t":{"120":{"position":[[1597,7]]}}}],["switchchanged(bool",{"_index":3099,"t":{"544":{"position":[[2719,18]]}}}],["symbol",{"_index":2933,"t":{"542":{"position":[[177,7],[802,6],[2080,7],[4475,7],[4551,7],[15036,7],[15084,6]]}}}],["system",{"_index":2090,"t":{"524":{"position":[[284,7]]},"532":{"position":[[11573,8],[13835,8],[15899,8]]},"534":{"position":[[13056,8],[16116,8]]},"562":{"position":[[10263,8]]}}}],["system.componentmodel.dataannot",{"_index":2744,"t":{"538":{"position":[[8600,37]]},"540":{"position":[[7054,37],[9651,37]]},"542":{"position":[[11069,37]]},"546":{"position":[[7448,37]]},"560":{"position":[[5231,37],[9251,37]]},"564":{"position":[[18906,37]]}}}],["system.drawing.color",{"_index":2529,"t":{"534":{"position":[[5962,20],[10464,20]]},"562":{"position":[[7636,20]]}}}],["system.text.json",{"_index":3758,"t":{"568":{"position":[[50359,16]]}}}],["t",{"_index":703,"t":{"120":{"position":[[1605,1]]},"510":{"position":[[644,1]]},"516":{"position":[[1696,1]]}}}],["tab",{"_index":192,"t":{"20":{"position":[[159,4],[213,4]]},"42":{"position":[[402,4],[463,3],[493,4],[605,4],[697,4],[786,4]]},"74":{"position":[[333,4]]},"88":{"position":[[153,4],[440,4],[710,4],[872,4]]},"110":{"position":[[153,4],[312,4]]},"114":{"position":[[973,4]]},"136":{"position":[[1614,4]]},"156":{"position":[[311,4]]},"160":{"position":[[304,4]]},"168":{"position":[[311,4]]},"184":{"position":[[29,5],[303,4]]},"192":{"position":[[197,4],[356,4]]},"196":{"position":[[1017,4]]},"208":{"position":[[206,4],[365,4]]},"214":{"position":[[1026,4]]},"248":{"position":[[482,4],[641,4]]},"252":{"position":[[460,4],[619,4]]},"254":{"position":[[1391,4],[1550,4]]},"266":{"position":[[201,4],[360,4]]},"276":{"position":[[202,4],[361,4]]},"282":{"position":[[201,4],[360,4]]},"300":{"position":[[200,4],[359,4]]},"336":{"position":[[476,4],[635,4]]},"340":{"position":[[304,4]]},"346":{"position":[[886,4],[1045,4]]},"360":{"position":[[1661,4],[1820,4]]},"368":{"position":[[596,4]]},"372":{"position":[[21,6],[195,4],[354,4]]},"382":{"position":[[196,4],[355,4]]},"426":{"position":[[298,4]]},"480":{"position":[[197,4],[356,4]]},"512":{"position":[[1103,3]]},"516":{"position":[[1408,3]]},"524":{"position":[[12145,4]]},"528":{"position":[[11,4],[36,4],[100,4],[117,4],[290,4],[373,4],[440,3],[508,3],[581,3],[660,3],[703,3],[788,3],[845,3],[936,4],[982,4],[1098,5],[1104,6],[1111,4],[1265,3],[1338,6],[1345,4],[1489,3],[1562,6],[1569,4],[1713,3],[1786,6],[1793,7],[1837,4],[1890,3],[1967,5],[1998,4],[2152,3],[2225,6],[2232,4],[2376,3],[2449,6],[2456,4],[2600,3],[2673,6],[2680,7],[2737,3],[2798,5],[2829,4],[3043,3],[3116,6],[3123,5],[3328,3],[3401,6],[3408,5],[3612,3],[3685,6],[3692,7],[3723,4],[3745,4],[3787,5],[3818,4],[3972,3],[4045,6],[4052,4],[4196,3],[4269,6],[4276,4],[4438,3],[4511,6],[4518,4],[4662,3],[4735,6],[4742,7],[4826,4],[4841,5],[4898,4],[5052,3],[5125,6],[5132,4],[5276,3],[5349,6],[5356,4],[5500,3],[5573,6],[5580,7],[5623,5],[5657,4],[5800,5],[5843,4],[5976,6],[5983,4],[6106,6],[6113,4],[6236,6],[6243,4],[6384,6],[6391,4],[6519,6],[6526,4],[6645,6],[6652,7],[7172,4],[7177,5],[7701,4],[7778,4],[7813,4],[7851,4],[7936,4],[7993,3],[8100,3],[8119,5],[8138,4],[8255,6],[8262,4],[8385,6],[8392,4],[8515,6],[8522,4],[8641,6],[8648,7],[8664,4],[8669,4],[9234,4],[9250,4],[9263,3],[9287,4],[9328,3],[9358,4],[9390,3]]},"564":{"position":[[2970,6],[3051,6],[3136,6]]},"566":{"position":[[24161,4]]}}}],["tab'",{"_index":2255,"t":{"528":{"position":[[1218,5],[1442,5],[1666,5],[2105,5],[2329,5],[2553,5],[2996,5],[3281,5],[3565,5],[3925,5],[4149,5],[4391,5],[4615,5],[5005,5],[5229,5],[5453,5]]}}}],["tab.aboutinfo",{"_index":3105,"t":{"546":{"position":[[4175,11],[4476,11]]}}}],["text\">tip",{"_index":3027,"t":{"542":{"position":[[8030,10],[9325,10]]},"546":{"position":[[3710,10],[5727,10]]}}}],["text.curr",{"_index":1845,"t":{"514":{"position":[[2911,13]]}}}],["textalign",{"_index":1089,"t":{"502":{"position":[[587,13],[7228,13]]},"542":{"position":[[1430,13],[8273,13]]},"546":{"position":[[928,13],[4759,13]]},"568":{"position":[[6224,13],[37851,13],[37922,13]]}}}],["textalignment=\"alignment.cent",{"_index":1174,"t":{"502":{"position":[[7558,32]]},"542":{"position":[[8513,32]]},"546":{"position":[[4971,32]]},"568":{"position":[[25534,32],[38231,33],[38704,33],[40474,33],[40962,33],[42737,33],[43587,33],[111097,33],[113626,33],[116287,33],[118982,33]]}}}],["textalignment=\"alignment.end",{"_index":1175,"t":{"502":{"position":[[7890,29]]},"542":{"position":[[8772,29]]},"546":{"position":[[5202,29]]},"568":{"position":[[25323,29],[38554,30],[40797,30],[43422,30]]}}}],["textbox",{"_index":231,"t":{"32":{"position":[[352,7]]},"538":{"position":[[99,7],[2046,7]]},"568":{"position":[[4303,7],[24036,7],[24137,7],[24206,7],[121611,7]]}}}],["textnowrap",{"_index":3578,"t":{"568":{"position":[[6361,10]]}}}],["textnowrap=\"tru",{"_index":3672,"t":{"568":{"position":[[24934,17],[25062,17],[42390,17],[43102,18],[43207,18]]}}}],["that'",{"_index":3399,"t":{"564":{"position":[[18597,6]]}}}],["thead",{"_index":3527,"t":{"568":{"position":[[1706,5],[2694,5]]}}}],["theadcssclass",{"_index":3540,"t":{"568":{"position":[[2650,13]]}}}],["therebi",{"_index":1898,"t":{"516":{"position":[[8801,7],[10558,7]]}}}],["they'll",{"_index":1113,"t":{"502":{"position":[[2717,7]]}}}],["they'r",{"_index":1860,"t":{"516":{"position":[[2864,7]]},"524":{"position":[[310,7]]}}}],["they’ll",{"_index":1162,"t":{"502":{"position":[[6342,7]]}}}],["thing",{"_index":848,"t":{"492":{"position":[[2047,6]]},"522":{"position":[[125,6]]},"524":{"position":[[378,6]]}}}],["third",{"_index":1149,"t":{"502":{"position":[[5029,5],[5727,5]]},"508":{"position":[[3014,5],[5025,5],[6868,5],[8688,5],[10504,5],[12516,5],[17481,5]]}}}],["those",{"_index":864,"t":{"492":{"position":[[3071,5],[3282,5]]},"504":{"position":[[5640,5]]}}}],["though",{"_index":1414,"t":{"508":{"position":[[2325,6],[2876,6],[3426,6],[4189,6],[4814,6],[5437,6],[6179,6],[6730,6],[7280,6],[7983,6],[8550,6],[9100,6],[9815,6],[10366,6],[10916,6],[11803,6],[12366,6],[12928,6],[13486,6],[14034,6],[14594,6],[16748,6],[17321,6],[17893,6]]}}}],["three",{"_index":1539,"t":{"510":{"position":[[4687,5]]},"516":{"position":[[11341,5]]}}}],["through",{"_index":342,"t":{"54":{"position":[[280,7]]},"68":{"position":[[436,7]]},"494":{"position":[[1020,7]]},"496":{"position":[[3175,7],[3663,7],[4152,7],[4638,7],[5123,7]]},"498":{"position":[[2280,7]]},"510":{"position":[[2169,7]]},"512":{"position":[[3399,7]]},"516":{"position":[[3969,7]]},"518":{"position":[[1061,7]]}}}],["throw",{"_index":1152,"t":{"502":{"position":[[5161,5]]}}}],["thrown",{"_index":1234,"t":{"504":{"position":[[1991,6]]}}}],["tidy.anoth",{"_index":1136,"t":{"502":{"position":[[3777,14],[5808,14]]}}}],["to=\"#\">card",{"_index":1134,"t":{"502":{"position":[[3739,11],[5770,11]]}}}],["toast",{"_index":88,"t":{"2":{"position":[[2644,5],[2772,5]]},"6":{"position":[[106,6],[166,6]]},"12":{"position":[[699,6]]},"18":{"position":[[179,6],[325,6],[382,6]]},"46":{"position":[[179,6],[319,6],[346,6],[472,6],[539,6],[582,6]]},"48":{"position":[[120,5],[198,6],[613,6],[891,5]]},"66":{"position":[[119,6],[163,6],[190,5],[334,6],[412,6],[426,6]]},"88":{"position":[[141,7],[368,6],[682,6],[852,6]]},"90":{"position":[[137,5],[244,5],[486,5]]},"110":{"position":[[141,7],[292,6]]},"112":{"position":[[462,6],[547,6],[561,6]]},"114":{"position":[[120,5],[198,6],[390,5],[1239,6],[1293,6],[1336,6]]},"116":{"position":[[106,6]]},"118":{"position":[[1187,6]]},"128":{"position":[[2688,5],[2816,5]]},"136":{"position":[[761,5],[839,6],[1031,5]]},"144":{"position":[[170,5],[248,6],[440,5]]},"146":{"position":[[178,5],[256,6],[448,5]]},"170":{"position":[[232,6],[286,6],[329,6]]},"174":{"position":[[171,5],[249,6],[441,5]]},"176":{"position":[[236,6],[290,6],[333,6]]},"180":{"position":[[171,5],[249,6],[441,5]]},"188":{"position":[[29,6],[170,5],[248,6],[440,5]]},"190":{"position":[[28,7],[169,6],[254,6],[268,6],[477,6],[531,6],[574,6]]},"192":{"position":[[185,7],[336,6]]},"194":{"position":[[506,6],[591,6],[605,6]]},"196":{"position":[[164,5],[242,6],[434,5]]},"204":{"position":[[2697,5],[2825,5]]},"208":{"position":[[194,7],[345,6]]},"210":{"position":[[159,6]]},"212":{"position":[[515,6],[600,6],[614,6]]},"214":{"position":[[173,5],[251,6],[443,5],[1292,6],[1346,6],[1389,6]]},"216":{"position":[[191,5],[319,5]]},"220":{"position":[[1240,6]]},"248":{"position":[[470,7],[621,6]]},"252":{"position":[[448,7],[599,6]]},"254":{"position":[[1379,7],[1530,6]]},"266":{"position":[[189,7],[340,6]]},"276":{"position":[[190,7],[341,6],[506,6],[591,6],[605,6]]},"278":{"position":[[2692,5],[2820,5]]},"280":{"position":[[2691,5],[2819,5]]},"282":{"position":[[189,7],[340,6]]},"284":{"position":[[186,5],[314,5]]},"286":{"position":[[510,6],[595,6],[609,6]]},"288":{"position":[[509,6],[594,6],[608,6]]},"290":{"position":[[192,5],[320,5]]},"292":{"position":[[185,5],[313,5]]},"300":{"position":[[188,7],[339,6]]},"308":{"position":[[266,6]]},"334":{"position":[[257,6]]},"336":{"position":[[464,7],[615,6]]},"346":{"position":[[874,7],[1025,6]]},"360":{"position":[[1649,7],[1800,6]]},"362":{"position":[[482,6],[536,6],[579,6]]},"364":{"position":[[229,6],[283,6],[326,6]]},"372":{"position":[[183,7],[334,6]]},"376":{"position":[[21,7],[180,5],[308,5]]},"380":{"position":[[187,5],[315,5]]},"382":{"position":[[20,8],[184,7],[335,6],[500,6],[585,6],[599,6],[808,6],[862,6],[905,6],[1158,6]]},"388":{"position":[[150,6]]},"400":{"position":[[258,6]]},"424":{"position":[[223,6],[277,6],[320,6]]},"430":{"position":[[164,5],[242,6],[434,5]]},"460":{"position":[[163,6],[248,6],[262,6]]},"480":{"position":[[185,7],[336,6]]},"486":{"position":[[181,5],[309,5]]},"510":{"position":[[2418,5]]},"524":{"position":[[11,6],[38,6],[88,6],[150,5],[172,6],[415,6],[433,6],[518,6],[575,7],[583,6],[683,6],[729,5],[807,7],[864,6],[994,5],[1382,5],[1430,5],[1558,6],[1585,6],[1632,7],[1672,6],[1803,9],[1862,7],[3029,5],[3080,6],[3098,5],[3134,6],[3227,6],[3259,5],[3305,7],[4522,5],[4573,6],[4665,6],[4808,6],[4815,7],[6011,5],[6072,6],[6192,5],[6342,6],[6421,7],[7672,5],[7914,6],[7961,6],[8105,6],[8123,7],[9616,5],[9733,6],[9771,6],[9807,5],[9845,5],[10054,5],[10082,7],[11281,5],[11350,6],[11394,6],[11530,7],[11631,6],[12164,6],[12216,5],[12222,5],[12312,6]]},"528":{"position":[[9227,6]]},"530":{"position":[[1885,6]]}}}],["toast''",{"_index":2106,"t":{"524":{"position":[[1484,8]]}}}],["toast1",{"_index":623,"t":{"120":{"position":[[568,6],[1636,6]]}}}],["toastbuttonlink",{"_index":1265,"t":{"504":{"position":[[4826,28]]}}}],["tooltiptitle=\"@tooltip\">reset",{"_index":1270,"t":{"504":{"position":[[5218,29]]}}}],["tooltiptitle=\"@tooltip\">submit",{"_index":1267,"t":{"504":{"position":[[4958,30]]}}}],["tooltiptitle=\"compar",{"_index":2237,"t":{"526":{"position":[[3909,21]]}}}],["tooltiptitle=\"cr",{"_index":2239,"t":{"526":{"position":[[4036,20]]}}}],["tooltiptitle=\"tooltip",{"_index":1318,"t":{"504":{"position":[[8046,21],[8173,21],[8304,21],[8437,21]]}}}],["top",{"_index":1062,"t":{"500":{"position":[[107,3]]},"502":{"position":[[3916,4],[5339,4]]},"504":{"position":[[7976,4],[8123,3],[8781,3]]},"512":{"position":[[6974,4],[7061,4],[7212,3]]},"516":{"position":[[3301,3]]},"524":{"position":[[8032,3]]},"530":{"position":[[426,3]]},"532":{"position":[[1770,4]]},"534":{"position":[[1653,4]]},"536":{"position":[[1352,4]]},"552":{"position":[[776,3]]},"554":{"position":[[771,3]]},"562":{"position":[[1517,4]]},"564":{"position":[[16482,3]]},"566":{"position":[[6745,3],[9005,3],[11458,3],[13868,3],[16282,3],[18710,3],[21080,3],[21137,3]]}}}],["top\">tooltip",{"_index":2302,"t":{"530":{"position":[[706,12]]}}}],["topactionanoth",{"_index":3339,"t":{"564":{"position":[[3959,30],[4371,30],[4729,30],[5083,30],[5431,30],[5785,30],[6137,30],[6629,30],[7055,30],[7475,30],[7886,30],[8306,30],[8723,30],[9186,30],[9639,30],[10057,30],[10510,30],[11104,30],[11577,30],[12181,30],[12760,30],[13228,30],[13822,30],[14203,30],[15319,30],[16994,30],[17505,30],[17945,30],[24026,30],[25082,30]]}}}],["type=\"buttontype.link\">go",{"_index":1126,"t":{"502":{"position":[[3010,25],[4243,25],[4607,25],[6206,25],[6722,25],[7017,25],[7487,25],[7819,25],[8148,25]]}}}],["type=\"buttontype.link\">menu",{"_index":3412,"t":{"564":{"position":[[22348,27],[22417,27],[22486,27],[22773,27],[22842,27],[22911,27],[23196,27],[23265,27],[23334,27],[23563,27],[23632,27],[23701,27]]}}}],["type=\"buttontype.link\">separ",{"_index":3391,"t":{"564":{"position":[[18149,32]]}}}],["type=\"buttontype.link\">someth",{"_index":3341,"t":{"564":{"position":[[4033,32],[4445,32],[4803,32],[5157,32],[5505,32],[5859,32],[6211,32],[6703,32],[7129,32],[7549,32],[7960,32],[8380,32],[8797,32],[9260,32],[9713,32],[10131,32],[10584,32],[11178,32],[11651,32],[12255,32],[12834,32],[13302,32],[13896,32],[14277,32],[14888,32],[15393,32],[16290,32],[17068,32],[17579,32],[18019,32],[24100,32],[25156,32]]}}}],["type=\"buttontype.reset",{"_index":1269,"t":{"504":{"position":[[5140,23]]}}}],["type=\"buttontype.submit",{"_index":1245,"t":{"504":{"position":[[2633,24],[4879,24]]},"540":{"position":[[8155,24],[11240,24]]},"542":{"position":[[12748,24]]},"546":{"position":[[8998,24]]},"560":{"position":[[7301,24],[10539,24]]},"564":{"position":[[20433,24]]}}}],["type=\"callouttype.dang",{"_index":941,"t":{"496":{"position":[[687,26],[1839,25],[3303,26]]}}}],["type=\"callouttype.info",{"_index":943,"t":{"496":{"position":[[1133,24],[2325,23],[4280,24]]}}}],["type=\"callouttype.tip",{"_index":944,"t":{"496":{"position":[[1351,23],[2563,22],[4766,23]]}}}],["type=\"callouttype.warn",{"_index":942,"t":{"496":{"position":[[909,27],[2081,26],[3791,27]]}}}],["type=\"d",{"_index":2793,"t":{"540":{"position":[[123,11]]}}}],["type=\"numb",{"_index":3101,"t":{"546":{"position":[[121,13]]}}}],["type=\"progresstype.strip",{"_index":2013,"t":{"520":{"position":[[1390,27],[6109,27],[6229,27],[6350,27],[6468,27],[6589,27],[6709,27],[6830,27],[6953,27]]}}}],["type=\"progresstype.stripedandanim",{"_index":2016,"t":{"520":{"position":[[1510,38],[7106,38],[7260,38],[7392,38],[7521,38],[7653,38],[7784,38],[7916,38],[8050,38]]}}}],["type=\"submit",{"_index":2767,"t":{"538":{"position":[[9699,13]]}}}],["type=\"text",{"_index":2807,"t":{"540":{"position":[[1427,12]]},"560":{"position":[[1431,12]]}}}],["type=\"tim",{"_index":3226,"t":{"560":{"position":[[127,11]]}}}],["typic",{"_index":771,"t":{"492":{"position":[[86,7]]}}}],["typograph",{"_index":1985,"t":{"518":{"position":[[2108,11]]}}}],["ui",{"_index":184,"t":{"18":{"position":[[196,2]]},"96":{"position":[[1147,2]]},"500":{"position":[[161,2]]},"540":{"position":[[1322,2]]},"560":{"position":[[1326,2]]}}}],["ul",{"_index":1142,"t":{"502":{"position":[[4870,3],[5045,5],[5568,3],[5743,5]]},"568":{"position":[[70636,4],[70704,5],[73611,4],[73679,5],[76962,4],[77030,5]]}}}],["ullamcorp",{"_index":1735,"t":{"512":{"position":[[9064,11],[9093,11],[10882,11],[13305,11],[13334,11],[15123,11],[17446,11],[17475,11],[19264,11]]}}}],["ultric",{"_index":1717,"t":{"512":{"position":[[8528,8],[8723,9],[10329,8],[10380,8],[10728,8],[12769,8],[12964,9],[14570,8],[14621,8],[14969,8],[16910,8],[17105,9],[18711,8],[18762,8],[19110,8]]}}}],["ultrici",{"_index":1648,"t":{"512":{"position":[[7740,9],[8312,9],[8611,9],[10522,9],[11981,9],[12553,9],[12852,9],[14763,9],[16122,9],[16694,9],[16993,9],[18904,9]]}}}],["unhandl",{"_index":451,"t":{"78":{"position":[[206,9]]}}}],["uniform",{"_index":1198,"t":{"502":{"position":[[10752,7]]}}}],["unit",{"_index":986,"t":{"498":{"position":[[778,6]]},"534":{"position":[[4049,4]]},"568":{"position":[[2718,4],[2723,4],[2753,6],[107203,5],[107247,4]]}}}],["unit.px",{"_index":3541,"t":{"568":{"position":[[2728,7]]}}}],["unit=\"unit.px",{"_index":3908,"t":{"568":{"position":[[107427,15],[110880,15],[113372,15],[116033,15],[118728,15]]}}}],["unless",{"_index":1164,"t":{"502":{"position":[[6363,6]]}}}],["unnecessari",{"_index":274,"t":{"40":{"position":[[290,11]]}}}],["unsupport",{"_index":2804,"t":{"540":{"position":[[1370,11]]},"560":{"position":[[1374,11]]}}}],["until",{"_index":1408,"t":{"508":{"position":[[1971,5],[2522,5],[3072,5],[3835,5],[4460,5],[5083,5],[5825,5],[6376,5],[6926,5],[7629,5],[8196,5],[8746,5],[9461,5],[10012,5],[10562,5],[11449,5],[12012,5],[12574,5],[13132,5],[13680,5],[14240,5],[16394,5],[16967,5],[17539,5]]}}}],["up",{"_index":1122,"t":{"502":{"position":[[2921,2],[3683,2],[4154,2],[4518,2],[5510,2],[8476,2],[8768,2],[9056,2],[9342,2],[9630,2],[9912,2],[10196,2],[10478,2],[12071,3]]},"532":{"position":[[3506,2]]},"534":{"position":[[5471,2]]},"536":{"position":[[2592,2]]},"538":{"position":[[2290,2]]},"546":{"position":[[3931,2]]},"562":{"position":[[2874,2]]},"564":{"position":[[24742,3]]}}}],["updat",{"_index":59,"t":{"2":{"position":[[1142,10],[1435,10],[1678,10],[1940,10],[2193,10],[2411,10],[2658,10]]},"10":{"position":[[122,8]]},"12":{"position":[[240,7],[602,7],[653,8]]},"14":{"position":[[121,8],[210,7]]},"16":{"position":[[108,7],[175,8],[263,6],[276,6]]},"18":{"position":[[120,8],[145,7],[170,8],[243,6],[266,7]]},"20":{"position":[[137,8],[146,8]]},"22":{"position":[[142,8]]},"24":{"position":[[137,8],[146,8]]},"26":{"position":[[142,8]]},"30":{"position":[[140,8]]},"32":{"position":[[160,8]]},"44":{"position":[[408,7]]},"50":{"position":[[252,8]]},"52":{"position":[[231,8],[283,7]]},"54":{"position":[[121,7],[494,8]]},"56":{"position":[[218,8]]},"60":{"position":[[342,8]]},"62":{"position":[[129,7]]},"68":{"position":[[145,10]]},"70":{"position":[[146,10]]},"72":{"position":[[168,10]]},"74":{"position":[[138,10]]},"76":{"position":[[127,10]]},"78":{"position":[[129,10]]},"80":{"position":[[138,10]]},"82":{"position":[[144,10]]},"84":{"position":[[149,10]]},"86":{"position":[[140,10]]},"88":{"position":[[158,10]]},"90":{"position":[[151,10]]},"92":{"position":[[125,10]]},"94":{"position":[[148,10]]},"96":{"position":[[198,10]]},"98":{"position":[[124,10]]},"100":{"position":[[153,10]]},"104":{"position":[[124,10]]},"106":{"position":[[409,7]]},"108":{"position":[[395,7],[505,7]]},"110":{"position":[[158,10],[478,10],[745,10],[1034,10],[1294,10],[1711,10],[1954,10],[2213,10],[2513,10],[2825,10]]},"112":{"position":[[145,10],[1219,7],[1660,7]]},"118":{"position":[[714,8],[912,8],[1093,8],[1118,7],[1325,8],[1513,7],[1580,8],[1756,8]]},"122":{"position":[[215,10]]},"124":{"position":[[151,7],[218,8]]},"126":{"position":[[625,10],[1051,10],[1312,7]]},"128":{"position":[[1186,10],[1479,10],[1722,10],[1984,10],[2237,10],[2455,10],[2702,10]]},"130":{"position":[[186,7]]},"132":{"position":[[211,10]]},"182":{"position":[[191,7]]},"186":{"position":[[183,7]]},"192":{"position":[[202,10],[522,10],[789,10],[1078,10],[1338,10],[1755,10],[1998,10],[2257,10],[2557,10],[2869,10]]},"194":{"position":[[189,10],[1263,7],[1704,7]]},"198":{"position":[[221,10]]},"200":{"position":[[631,10],[1057,10]]},"202":{"position":[[217,10]]},"204":{"position":[[1195,10],[1488,10],[1731,10],[1993,10],[2246,10],[2464,10],[2711,10]]},"206":{"position":[[200,7]]},"208":{"position":[[211,10],[531,10],[798,10],[1087,10],[1347,10],[1764,10],[2007,10],[2266,10],[2566,10],[2878,10]]},"212":{"position":[[198,10],[1272,7],[1713,7]]},"216":{"position":[[205,10]]},"218":{"position":[[198,10],[517,10]]},"220":{"position":[[767,8],[965,8],[1146,8],[1171,7],[1378,8],[1566,7],[1633,8],[1809,8]]},"222":{"position":[[179,10],[433,10],[710,10]]},"226":{"position":[[220,10]]},"228":{"position":[[177,7]]},"232":{"position":[[200,10],[615,10]]},"234":{"position":[[194,10]]},"236":{"position":[[201,10],[496,10],[930,10],[1343,10]]},"238":{"position":[[171,7]]},"240":{"position":[[199,10],[612,10]]},"244":{"position":[[201,10],[494,10],[737,10],[1000,10],[1234,10],[1501,10],[1790,10],[2050,10],[2467,10],[2729,10]]},"248":{"position":[[487,10]]},"252":{"position":[[179,10],[465,10]]},"254":{"position":[[628,10],[890,10],[1142,10],[1396,10],[1722,10],[2135,10],[2454,7]]},"256":{"position":[[199,10]]},"260":{"position":[[192,10]]},"262":{"position":[[196,10],[630,10],[1043,10]]},"264":{"position":[[193,10]]},"266":{"position":[[206,10]]},"268":{"position":[[200,10]]},"270":{"position":[[194,10]]},"272":{"position":[[200,10],[482,10],[916,10]]},"274":{"position":[[620,10]]},"276":{"position":[[207,10]]},"278":{"position":[[1190,10],[1483,10],[1726,10],[1988,10],[2241,10],[2459,10],[2706,10]]},"280":{"position":[[1189,10],[1482,10],[1725,10],[1987,10],[2240,10],[2458,10],[2705,10]]},"282":{"position":[[206,10],[526,10],[793,10],[1082,10],[1342,10],[1759,10],[2002,10],[2261,10],[2561,10],[2873,10]]},"284":{"position":[[200,10]]},"286":{"position":[[193,10],[1267,7],[1708,7]]},"288":{"position":[[192,10],[1266,7],[1707,7]]},"290":{"position":[[206,10]]},"292":{"position":[[199,10]]},"294":{"position":[[192,10],[511,10]]},"300":{"position":[[205,10],[525,10],[792,10],[1081,10],[1341,10],[1758,10],[2001,10],[2260,10],[2560,10],[2872,10]]},"304":{"position":[[214,10]]},"306":{"position":[[173,10],[427,10],[704,10]]},"308":{"position":[[172,8],[197,7]]},"312":{"position":[[173,10]]},"314":{"position":[[171,7]]},"316":{"position":[[191,10]]},"318":{"position":[[195,10],[490,10],[924,10],[1337,10]]},"320":{"position":[[194,10],[609,10]]},"322":{"position":[[193,10],[606,10]]},"324":{"position":[[165,7]]},"330":{"position":[[470,10],[763,10],[1006,10],[1269,10],[1503,10],[1770,10],[2059,10],[2319,10],[2736,10]]},"332":{"position":[[188,10],[1479,8]]},"334":{"position":[[163,8],[188,7]]},"336":{"position":[[481,10]]},"344":{"position":[[164,8]]},"346":{"position":[[605,10],[891,10]]},"350":{"position":[[380,8],[578,8]]},"352":{"position":[[193,10]]},"354":{"position":[[169,8]]},"356":{"position":[[190,10],[624,10],[1037,10],[1553,8]]},"360":{"position":[[898,10],[1160,10],[1412,10],[1666,10],[1992,10],[2405,10],[2724,7]]},"362":{"position":[[185,10]]},"368":{"position":[[191,10]]},"370":{"position":[[462,10]]},"372":{"position":[[200,10]]},"374":{"position":[[194,10],[476,10],[910,10]]},"376":{"position":[[194,10]]},"378":{"position":[[194,10]]},"380":{"position":[[201,10]]},"382":{"position":[[201,10],[1064,8],[1089,7]]},"386":{"position":[[614,10]]},"390":{"position":[[166,8]]},"394":{"position":[[152,7],[219,8]]},"398":{"position":[[165,8]]},"400":{"position":[[164,8],[189,7]]},"402":{"position":[[181,8]]},"404":{"position":[[181,8]]},"432":{"position":[[243,10]]},"434":{"position":[[198,10]]},"448":{"position":[[165,7]]},"452":{"position":[[173,7]]},"458":{"position":[[189,10]]},"462":{"position":[[212,10]]},"464":{"position":[[190,10]]},"466":{"position":[[182,10]]},"468":{"position":[[173,10]]},"470":{"position":[[171,10]]},"472":{"position":[[188,10]]},"474":{"position":[[193,10]]},"476":{"position":[[182,10]]},"478":{"position":[[184,10]]},"480":{"position":[[202,10]]},"482":{"position":[[168,10]]},"484":{"position":[[169,10]]},"486":{"position":[[195,10]]},"488":{"position":[[168,10]]},"490":{"position":[[192,10]]},"502":{"position":[[11140,7],[11467,7],[11889,7],[12435,7],[12783,7],[13226,7]]},"504":{"position":[[5478,9],[8631,6],[8997,9],[10084,6]]},"510":{"position":[[6357,8],[7589,8]]},"524":{"position":[[4740,6],[6274,6],[8087,6]]},"530":{"position":[[1472,6],[1799,9],[2007,6]]},"532":{"position":[[620,6]]},"534":{"position":[[764,6]]},"536":{"position":[[560,6]]},"562":{"position":[[715,6]]},"564":{"position":[[3174,7]]},"568":{"position":[[56665,6],[121895,6]]}}}],["updateasync",{"_index":561,"t":{"100":{"position":[[249,11],[293,11],[333,11],[372,11]]},"532":{"position":[[603,11]]},"534":{"position":[[747,11]]},"536":{"position":[[543,11]]},"562":{"position":[[698,11]]},"564":{"position":[[3162,11]]}}}],["upgrad",{"_index":133,"t":{"10":{"position":[[153,7]]},"24":{"position":[[195,7]]},"70":{"position":[[662,7]]}}}],["url",{"_index":3449,"t":{"566":{"position":[[1315,3]]},"568":{"position":[[50291,4]]}}}],["url("data:image/svg+xml,%3csvg",{"_index":915,"t":{"494":{"position":[[1738,34]]}}}],["urna",{"_index":1725,"t":{"512":{"position":[[8678,5],[8952,5],[9303,4],[10873,5],[12919,5],[13193,5],[13544,4],[15114,5],[17060,5],[17334,5],[17685,4],[19255,5]]}}}],["us",{"_index":122,"t":{"8":{"position":[[164,4]]},"54":{"position":[[306,5]]},"68":{"position":[[462,5]]},"82":{"position":[[425,3],[461,3],[572,3],[608,3],[715,3],[751,3],[860,3],[896,3],[999,3],[1035,3],[1142,3],[1178,3]]},"88":{"position":[[301,5]]},"116":{"position":[[548,4]]},"210":{"position":[[601,4]]},"396":{"position":[[208,4]]},"492":{"position":[[861,3],[2018,3],[2156,3],[2819,5],[3650,5]]},"494":{"position":[[1625,3]]},"496":{"position":[[354,3]]},"498":{"position":[[744,5],[2003,5],[2404,3],[3292,4],[3961,3]]},"502":{"position":[[3296,3],[10576,3],[10709,3],[12001,5]]},"504":{"position":[[47,3],[3310,3],[3370,4],[4163,5],[5709,5],[6902,3],[7487,3]]},"506":{"position":[[1210,4],[1241,3]]},"508":{"position":[[2034,3],[2585,3],[3135,3],[3576,3],[3898,3],[4523,3],[5146,3],[5888,3],[6439,3],[6989,3],[7692,3],[8259,3],[8809,3],[9524,3],[10075,3],[10625,3],[11113,3],[11512,3],[12075,3],[12637,3],[13195,3],[13743,3],[14303,3],[16457,3],[17030,3],[17602,3]]},"510":{"position":[[61,3],[2195,5],[2413,4],[3962,3]]},"512":{"position":[[3425,5]]},"514":{"position":[[53,3],[1321,3]]},"516":{"position":[[43,3],[1501,4],[3995,5],[8759,3],[10516,3]]},"518":{"position":[[57,3],[1283,4]]},"520":{"position":[[80,5],[1933,5],[2117,3],[3175,5],[3547,3]]},"522":{"position":[[145,5],[1025,6],[2336,5]]},"524":{"position":[[398,5],[507,3],[8050,3],[9950,5]]},"526":{"position":[[1322,4],[3763,4]]},"528":{"position":[[79,3],[2748,3],[4772,3],[5679,3]]},"530":{"position":[[49,3]]},"532":{"position":[[101,4],[165,4],[3206,5],[3591,5],[3633,3],[11880,5]]},"534":{"position":[[144,4],[1910,4],[3621,3],[4088,5],[4335,5],[5170,5],[5556,5],[5598,3],[5913,6],[5947,6],[10415,6],[10449,6]]},"536":{"position":[[2337,5],[2677,5],[2719,3]]},"538":{"position":[[835,3],[1029,5],[1035,3],[1329,3],[4237,4],[4332,4],[8593,6],[10935,3],[12376,3],[12463,3]]},"540":{"position":[[100,5],[237,5],[5435,3],[6119,3],[6203,3],[6905,3],[6913,3],[7017,4],[7047,6],[9644,6]]},"542":{"position":[[56,3],[1010,4],[1159,4],[1232,4],[4798,5],[8265,3],[9486,3],[10132,3],[10220,3],[11026,4],[11062,6],[15091,5]]},"544":{"position":[[40,3],[1028,3],[1621,3],[1702,3],[2252,5]]},"546":{"position":[[4751,3],[5888,3],[6530,3],[6616,3],[7405,4],[7441,6]]},"548":{"position":[[287,3],[874,3],[1622,4],[2003,4],[2462,4],[2648,6],[3210,5]]},"550":{"position":[[277,3],[864,3],[1783,4],[2164,4],[2623,4],[2809,6],[3373,5]]},"556":{"position":[[277,3],[1261,4],[1642,4],[2101,4],[2291,6],[2853,5]]},"558":{"position":[[57,3]]},"560":{"position":[[104,5],[241,5],[3664,3],[4320,3],[4404,3],[5082,3],[5090,3],[5194,4],[5224,6],[9244,6]]},"562":{"position":[[2614,5],[2959,5],[3001,3],[7443,5],[7587,6],[7621,6]]},"564":{"position":[[16719,5],[18316,3],[18824,3],[18899,6],[22100,3]]},"566":{"position":[[47,3],[2586,3],[11144,6],[11227,3],[13593,3],[13654,5],[16010,3]]},"568":{"position":[[41,3],[5097,3],[5586,3],[5712,4],[5986,3],[6297,3],[9052,4],[11354,4],[35485,3],[35643,3],[37843,3],[37985,3],[40125,3],[46337,3],[50190,4],[50352,6],[54507,6],[56843,6],[66385,3]]}}}],["uswarningextra",{"_index":1916,"t":{"516":{"position":[[11847,27]]}}}],["xlmodal?.showasync()\">ful",{"_index":1942,"t":{"516":{"position":[[13457,26]]}}}],["xmlns='http://www.w3.org/2000/svg",{"_index":916,"t":{"494":{"position":[[1773,34]]}}}],["xxl",{"_index":1932,"t":{"516":{"position":[[12903,4]]}}}],["xxlful",{"_index":1944,"t":{"516":{"position":[[13561,27]]}}}],["y",{"_index":2362,"t":{"532":{"position":[[2544,1],[2993,3],[7022,4],[9312,4],[11245,4],[13507,4],[15571,4]]},"534":{"position":[[236,1],[321,1],[4507,1],[4957,3],[8865,4]]}}}],["yaxisid",{"_index":2361,"t":{"532":{"position":[[2510,7]]},"534":{"position":[[4473,7]]}}}],["ye",{"_index":1498,"t":{"510":{"position":[[1416,5],[1463,3],[1484,5]]}}}],["yeah",{"_index":831,"t":{"492":{"position":[[1774,5]]}}}],["yesbuttoncolor",{"_index":1496,"t":{"510":{"position":[[1352,14],[4311,14]]}}}],["yesbuttontext",{"_index":1499,"t":{"510":{"position":[[1442,13],[4289,13]]}}}],["you''r",{"_index":1291,"t":{"504":{"position":[[6529,7]]}}}],["youll",{"_index":3394,"t":{"564":{"position":[[18349,5]]}}}],["zaraiah",{"_index":2721,"t":{"538":{"position":[[3836,8],[5707,8],[8332,8]]}}}],["zayn",{"_index":3628,"t":{"568":{"position":[[8542,8],[10887,8],[13518,8],[16035,8],[18709,8],[21206,8],[23608,8],[27474,8],[32685,8],[35050,8],[37415,8],[39705,8],[41963,8],[45503,8],[48311,8],[53956,8],[56418,8],[62760,8],[65981,8],[69358,8],[72241,8],[75216,8],[78513,8],[81859,8],[84625,8],[106704,8],[110330,8]]}}}],["zayne@blazorbootstrap.com",{"_index":3703,"t":{"568":{"position":[[27513,28],[45542,28]]}}}],["zero",{"_index":2945,"t":{"542":{"position":[[1327,5],[4878,5]]}}}],["zip",{"_index":3943,"t":{"568":{"position":[[111983,4],[114553,4],[117214,4],[119990,4]]}}}]],"pipeline":["stemmer"]}}] \ No newline at end of file +[{"documents":[{"i":1,"t":"Blog | Blazor Bootstrap Docs","u":"/blog","b":[]},{"i":3,"t":"BlazorBootstrap v0.0.1","u":"/blog/2021/11/23/blazorbootstrap-0.0.1","b":[]},{"i":5,"t":"BlazorBootstrap v0.0.3","u":"/blog/2021/12/08/blazorbootstrap-0.0.3","b":[]},{"i":7,"t":"BlazorBootstrap v0.0.4","u":"/blog/2021/12/12/blazorbootstrap-0.0.4","b":[]},{"i":9,"t":"BlazorBootstrap v0.0.2","u":"/blog/2021/11/27/blazorbootstrap-0.0.2","b":[]},{"i":11,"t":"BlazorBootstrap v0.1.1","u":"/blog/2021/12/21/blazorbootstrap-0.1.1","b":[]},{"i":13,"t":"BlazorBootstrap v0.1.0","u":"/blog/2021/12/20/blazorbootstrap-0.1.0","b":[]},{"i":15,"t":"BlazorBootstrap v0.2.0","u":"/blog/2022/01/15/blazorbootstrap-0.2.0","b":[]},{"i":17,"t":"BlazorBootstrap v0.2.2","u":"/blog/2022/03/15/blazorbootstrap-0.2.2","b":[]},{"i":19,"t":"BlazorBootstrap v0.2.3","u":"/blog/2022/04/30/blazorbootstrap-0.2.3","b":[]},{"i":21,"t":"BlazorBootstrap v0.2.1","u":"/blog/2022/02/27/blazorbootstrap-0.2.1","b":[]},{"i":23,"t":"BlazorBootstrap v0.2.4","u":"/blog/2022/06/19/blazorbootstrap-0.2.4","b":[]},{"i":25,"t":"BlazorBootstrap v0.2.5","u":"/blog/2022/07/28/blazorbootstrap-0.2.5","b":[]},{"i":27,"t":"BlazorBootstrap v0.2.6","u":"/blog/2022/08/13/blazorbootstrap-0.2.6","b":[]},{"i":29,"t":"BlazorBootstrap v0.3.0","u":"/blog/2022/08/31/blazorbootstrap-0.3.0","b":[]},{"i":31,"t":"BlazorBootstrap v0.4.0","u":"/blog/2022/09/04/blazorbootstrap-0.4.0","b":[]},{"i":33,"t":"BlazorBootstrap v0.4.1","u":"/blog/2022/09/12/blazorbootstrap-0.4.1","b":[]},{"i":35,"t":"BlazorBootstrap v0.4.2","u":"/blog/2022/09/17/blazorbootstrap-0.4.2","b":[]},{"i":37,"t":"BlazorBootstrap v0.5.0","u":"/blog/2022/10/16/blazorbootstrap-0.5.0","b":[]},{"i":39,"t":"Blazor Bootstrap v0.5.1","u":"/blog/2022/10/22/blazorbootstrap-0.5.1","b":[]},{"i":41,"t":"Blazor Bootstrap v0.6.0","u":"/blog/2022/10/30/blazorbootstrap-0.6.0","b":[]},{"i":43,"t":"Blazor Bootstrap v1.0.1","u":"/blog/2022/11/22/blazorbootstrap-1.0.1","b":[]},{"i":45,"t":"Blazor Bootstrap v1.0.0","u":"/blog/2022/11/18/blazorbootstrap-1.0.0","b":[]},{"i":47,"t":"Blazor Bootstrap v1.1.0","u":"/blog/2022/11/28/blazorbootstrap-1.1.0","b":[]},{"i":49,"t":"Blazor Bootstrap v1.2.0","u":"/blog/2022/12/12/blazorbootstrap-1.2.0","b":[]},{"i":51,"t":"Blazor Bootstrap v1.3.0","u":"/blog/2022/12/15/blazorbootstrap-1.3.0","b":[]},{"i":53,"t":"Blazor Bootstrap v1.4.0","u":"/blog/2023/01/15/blazorbootstrap-1.4.0","b":[]},{"i":55,"t":"Blazor Bootstrap v1.4.2","u":"/blog/2023/01/30/blazorbootstrap-1.4.2","b":[]},{"i":57,"t":"Blazor Bootstrap v1.3.1","u":"/blog/2022/12/18/blazorbootstrap-1.3.1","b":[]},{"i":59,"t":"Blazor Bootstrap v1.4.1","u":"/blog/2023/01/23/blazorbootstrap-1.4.1","b":[]},{"i":61,"t":"Blazor Bootstrap v1.4.4","u":"/blog/2023/02/10/blazorbootstrap-1.4.4","b":[]},{"i":63,"t":"Blazor Bootstrap v1.4.3","u":"/blog/2023/02/07/blazorbootstrap-1.4.3","b":[]},{"i":65,"t":"Blazor Bootstrap v1.4.5","u":"/blog/2023/02/23/blazorbootstrap-1.4.5","b":[]},{"i":67,"t":"Blazor Bootstrap v1.5.0","u":"/blog/2023/03/05/blazorbootstrap-1.5.0","b":[]},{"i":69,"t":"Blazor Bootstrap v1.6.0","u":"/blog/2023/03/12/blazorbootstrap-1.6.0","b":[]},{"i":71,"t":"Blazor Bootstrap v1.7.0","u":"/blog/2023/04/10/blazorbootstrap-1.7.0","b":[]},{"i":73,"t":"Blazor Bootstrap v1.7.1","u":"/blog/2023/04/19/blazorbootstrap-1.7.1","b":[]},{"i":75,"t":"Blazor Bootstrap v1.7.2","u":"/blog/2023/04/24/blazorbootstrap-1.7.2","b":[]},{"i":77,"t":"Blazor Bootstrap v1.8.1","u":"/blog/2023/05/31/blazorbootstrap-1.8.1","b":[]},{"i":79,"t":"Blazor Bootstrap v1.8.0","u":"/blog/2023/05/28/blazorbootstrap-1.8.0","b":[]},{"i":81,"t":"Blazor Bootstrap v1.7.3","u":"/blog/2023/04/29/blazorbootstrap-1.7.3","b":[]},{"i":83,"t":"Blazor Bootstrap v1.8.2","u":"/blog/2023/06/11/blazorbootstrap-1.8.2","b":[]},{"i":85,"t":"Blazor Bootstrap v1.8.3","u":"/blog/2023/06/16/blazorbootstrap-1.8.3","b":[]},{"i":87,"t":"Blazor Bootstrap v1.9.0","u":"/blog/2023/06/30/blazorbootstrap-1.9.0","b":[]},{"i":89,"t":"Blazor Bootstrap v1.9.1","u":"/blog/2023/06/31/blazorbootstrap-1.9.1","b":[]},{"i":91,"t":"Blazor Bootstrap v1.9.3","u":"/blog/2023/07/04/blazorbootstrap-1.9.3","b":[]},{"i":93,"t":"Blazor Bootstrap v1.9.2","u":"/blog/2023/07/01/blazorbootstrap-1.9.2","b":[]},{"i":95,"t":"Blazor Bootstrap v1.9.5","u":"/blog/2023/07/16/blazorbootstrap-1.9.5","b":[]},{"i":97,"t":"Blazor Bootstrap v1.9.4","u":"/blog/2023/07/05/blazorbootstrap-1.9.4","b":[]},{"i":99,"t":"Blazor Bootstrap v1.10.0","u":"/blog/2023/08/13/blazorbootstrap-1.10.0","b":[]},{"i":101,"t":"Blazor Bootstrap v1.10.1","u":"/blog/2023/08/29/blazorbootstrap-1.10.1","b":[]},{"i":103,"t":"Blazor Bootstrap v1.10.2","u":"/blog/2023/09/15/blazorbootstrap-1.10.2","b":[]},{"i":105,"t":"Blazor Bootstrap v1.10.3","u":"/blog/2023/10/15/blazorbootstrap-1.10.3","b":[]},{"i":107,"t":"Archive","u":"/blog/archive","b":[]},{"i":109,"t":"Blazor Bootstrap v1.10.4","u":"/blog/2023/11/18/blazorbootstrap-1.10.4","b":[]},{"i":111,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/2","b":[]},{"i":113,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/3","b":[]},{"i":115,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/4","b":[]},{"i":117,"t":"One post tagged with \"accordion\"","u":"/blog/tags/accordion","b":[]},{"i":119,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/6","b":[]},{"i":121,"t":"Tags","u":"/blog/tags","b":[]},{"i":123,"t":"One post tagged with \"alert\"","u":"/blog/tags/alert","b":[]},{"i":125,"t":"8 posts tagged with \"autocomplete\"","u":"/blog/tags/autocomplete","b":[]},{"i":127,"t":"One post tagged with \"badge\"","u":"/blog/tags/badge","b":[]},{"i":129,"t":"Blog | Blazor Bootstrap Docs","u":"/blog/page/5","b":[]},{"i":131,"t":"One post tagged with \"blazor-bar-chart\"","u":"/blog/tags/blazor-bar-chart","b":[]},{"i":133,"t":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor","b":[]},{"i":135,"t":"One post tagged with \"blazor-charts\"","u":"/blog/tags/blazor-charts","b":[]},{"i":137,"t":"5 posts tagged with \"blazor-bootstrap\"","u":"/blog/tags/blazor-bootstrap","b":[]},{"i":139,"t":"2 posts tagged with \"blazor-confirm-dialog\"","u":"/blog/tags/blazor-confirm-dialog","b":[]},{"i":141,"t":"One post tagged with \"blazor-currency-input\"","u":"/blog/tags/blazor-currency-input","b":[]},{"i":143,"t":"2 posts tagged with \"blazor-dialog\"","u":"/blog/tags/blazor-dialog","b":[]},{"i":145,"t":"One post tagged with \"blazor-doughnut-chart\"","u":"/blog/tags/blazor-doughnut-chart","b":[]},{"i":147,"t":"One post tagged with \"blazor-autocomplete\"","u":"/blog/tags/blazor-autocomplete","b":[]},{"i":149,"t":"One post tagged with \"blazor-grid-paging\"","u":"/blog/tags/blazor-grid-paging","b":[]},{"i":151,"t":"3 posts tagged with \"blazor-grid\"","u":"/blog/tags/blazor-grid","b":[]},{"i":153,"t":"One post tagged with \"blazor-grid-filtering\"","u":"/blog/tags/blazor-grid-filtering","b":[]},{"i":155,"t":"One post tagged with \"blazor-grid-sorting\"","u":"/blog/tags/blazor-grid-sorting","b":[]},{"i":157,"t":"One post tagged with \"blazor-input\"","u":"/blog/tags/blazor-input","b":[]},{"i":159,"t":"One post tagged with \"blazor-input-number\"","u":"/blog/tags/blazor-input-number","b":[]},{"i":161,"t":"One post tagged with \"blazor-line-chart\"","u":"/blog/tags/blazor-line-chart","b":[]},{"i":163,"t":"One post tagged with \"blazor-number\"","u":"/blog/tags/blazor-number","b":[]},{"i":165,"t":"One post tagged with \"blazor-number-input\"","u":"/blog/tags/blazor-number-input","b":[]},{"i":167,"t":"One post tagged with \"blazor-pie-chart\"","u":"/blog/tags/blazor-pie-chart","b":[]},{"i":169,"t":"One post tagged with \"blazor-offcanvas\"","u":"/blog/tags/blazor-offcanvas","b":[]},{"i":171,"t":"2 posts tagged with \"blazor-preload\"","u":"/blog/tags/blazor-preload","b":[]},{"i":173,"t":"One post tagged with \"blazor-progress\"","u":"/blog/tags/blazor-progress","b":[]},{"i":175,"t":"One post tagged with \"blazor-progress-bar\"","u":"/blog/tags/blazor-progress-bar","b":[]},{"i":177,"t":"One post tagged with \"blazor-sidemodal\"","u":"/blog/tags/blazor-sidemodal","b":[]},{"i":179,"t":"2 posts tagged with \"blazor-spinner\"","u":"/blog/tags/blazor-spinner","b":[]},{"i":181,"t":"One post tagged with \"blazor-tabs\"","u":"/blog/tags/blazor-tabs","b":[]},{"i":183,"t":"One post tagged with \"blazor-starter-templates\"","u":"/blog/tags/blazor-starter-templates","b":[]},{"i":185,"t":"One post tagged with \"blazor-templates\"","u":"/blog/tags/blazor-templates","b":[]},{"i":187,"t":"One post tagged with \"blazor-toast\"","u":"/blog/tags/blazor-toast","b":[]},{"i":189,"t":"2 posts tagged with \"blazor-toasts\"","u":"/blog/tags/blazor-toasts","b":[]},{"i":191,"t":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/3","b":[]},{"i":193,"t":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/2","b":[]},{"i":195,"t":"One post tagged with \"blazoraccordion\"","u":"/blog/tags/blazoraccordion","b":[]},{"i":197,"t":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/4","b":[]},{"i":199,"t":"4 posts tagged with \"blazorautocomplete\"","u":"/blog/tags/blazorautocomplete","b":[]},{"i":201,"t":"One post tagged with \"blazorbadge\"","u":"/blog/tags/blazorbadge","b":[]},{"i":203,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap","b":[]},{"i":205,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/2","b":[]},{"i":207,"t":"One post tagged with \"blazorbootstrap-starter-templates\"","u":"/blog/tags/blazorbootstrap-starter-templates","b":[]},{"i":209,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/3","b":[]},{"i":211,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/5","b":[]},{"i":213,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/4","b":[]},{"i":215,"t":"One post tagged with \"blazorbreadcrumb\"","u":"/blog/tags/blazorbreadcrumb","b":[]},{"i":217,"t":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/6","b":[]},{"i":219,"t":"One post tagged with \"blazorcollapse\"","u":"/blog/tags/blazorcollapse","b":[]},{"i":221,"t":"2 posts tagged with \"blazorbutton\"","u":"/blog/tags/blazorbutton","b":[]},{"i":223,"t":"One post tagged with \"blazorchart\"","u":"/blog/tags/blazorchart","b":[]},{"i":225,"t":"3 posts tagged with \"blazorbuttons\"","u":"/blog/tags/blazorbuttons","b":[]},{"i":227,"t":"One post tagged with \"blazorconfirmdialog\"","u":"/blog/tags/blazorconfirmdialog","b":[]},{"i":229,"t":"One post tagged with \"blazorconfirmmodal\"","u":"/blog/tags/blazorconfirmmodal","b":[]},{"i":231,"t":"3 posts tagged with \"blazorcurrencyinput\"","u":"/blog/tags/blazorcurrencyinput","b":[]},{"i":233,"t":"One post tagged with \"blazordate\"","u":"/blog/tags/blazordate","b":[]},{"i":235,"t":"2 posts tagged with \"blazordatepicker\"","u":"/blog/tags/blazordatepicker","b":[]},{"i":237,"t":"One post tagged with \"blazordialog\"","u":"/blog/tags/blazordialog","b":[]},{"i":239,"t":"4 posts tagged with \"blazordateinput\"","u":"/blog/tags/blazordateinput","b":[]},{"i":241,"t":"One post tagged with \"blazordropdown\"","u":"/blog/tags/blazordropdown","b":[]},{"i":243,"t":"13 posts tagged with \"blazorgrid\"","u":"/blog/tags/blazorgrid","b":[]},{"i":245,"t":"13 posts tagged with \"blazorgrid\"","u":"/blog/tags/blazorgrid/page/2","b":[]},{"i":247,"t":"2 posts tagged with \"blazoricon\"","u":"/blog/tags/blazoricon","b":[]},{"i":249,"t":"8 posts tagged with \"blazormodal\"","u":"/blog/tags/blazormodal","b":[]},{"i":251,"t":"2 posts tagged with \"blazormodalservice\"","u":"/blog/tags/blazormodalservice","b":[]},{"i":253,"t":"One post tagged with \"blazornumber\"","u":"/blog/tags/blazornumber","b":[]},{"i":255,"t":"One post tagged with \"blazornumberinput\"","u":"/blog/tags/blazornumberinput","b":[]},{"i":257,"t":"3 posts tagged with \"blazoroffcanvas\"","u":"/blog/tags/blazoroffcanvas","b":[]},{"i":259,"t":"2 posts tagged with \"blazorsidebar\"","u":"/blog/tags/blazorsidebar","b":[]},{"i":261,"t":"One post tagged with \"blazorprogress\"","u":"/blog/tags/blazorprogress","b":[]},{"i":263,"t":"One post tagged with \"blazortabs\"","u":"/blog/tags/blazortabs","b":[]},{"i":265,"t":"3 posts tagged with \"blazortimeinput\"","u":"/blog/tags/blazortimeinput","b":[]},{"i":267,"t":"One post tagged with \"blazortimepicker\"","u":"/blog/tags/blazortimepicker","b":[]},{"i":269,"t":"One post tagged with \"blazortoast\"","u":"/blog/tags/blazortoast","b":[]},{"i":271,"t":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap","b":[]},{"i":273,"t":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5","b":[]},{"i":275,"t":"2 posts tagged with \"blazortooltip\"","u":"/blog/tags/blazortooltip","b":[]},{"i":277,"t":"2 posts tagged with \"blazortoasts\"","u":"/blog/tags/blazortoasts","b":[]},{"i":279,"t":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5/page/2","b":[]},{"i":281,"t":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5/page/3","b":[]},{"i":283,"t":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap/page/2","b":[]},{"i":285,"t":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap/page/3","b":[]},{"i":287,"t":"2 posts tagged with \"blazorswitch\"","u":"/blog/tags/blazorswitch","b":[]},{"i":289,"t":"One post tagged with \"breadcrumbservice\"","u":"/blog/tags/breadcrumbservice","b":[]},{"i":291,"t":"3 posts tagged with \"button\"","u":"/blog/tags/button","b":[]},{"i":293,"t":"One post tagged with \"breadcrumb\"","u":"/blog/tags/breadcrumb","b":[]},{"i":295,"t":"3 posts tagged with \"buttons\"","u":"/blog/tags/buttons","b":[]},{"i":297,"t":"One post tagged with \"charts\"","u":"/blog/tags/charts","b":[]},{"i":299,"t":"One post tagged with \"callout\"","u":"/blog/tags/callout","b":[]},{"i":301,"t":"One post tagged with \"chart\"","u":"/blog/tags/chart","b":[]},{"i":303,"t":"One post tagged with \"collapse\"","u":"/blog/tags/collapse","b":[]},{"i":305,"t":"One post tagged with \"confirm dialog\"","u":"/blog/tags/confirm-dialog","b":[]},{"i":307,"t":"One post tagged with \"confirmmodal\"","u":"/blog/tags/confirmmodal","b":[]},{"i":309,"t":"One post tagged with \"confirmdialog\"","u":"/blog/tags/confirmdialog","b":[]},{"i":311,"t":"One post tagged with \"currency\"","u":"/blog/tags/currency","b":[]},{"i":313,"t":"2 posts tagged with \"currencyinput\"","u":"/blog/tags/currencyinput","b":[]},{"i":315,"t":"One post tagged with \"date\"","u":"/blog/tags/date","b":[]},{"i":317,"t":"4 posts tagged with \"dateinput\"","u":"/blog/tags/dateinput","b":[]},{"i":319,"t":"2 posts tagged with \"datepicker\"","u":"/blog/tags/datepicker","b":[]},{"i":321,"t":"One post tagged with \"dialog\"","u":"/blog/tags/dialog","b":[]},{"i":323,"t":"5 posts tagged with \"docs\"","u":"/blog/tags/docs","b":[]},{"i":325,"t":"One post tagged with \"dropdown\"","u":"/blog/tags/dropdown","b":[]},{"i":327,"t":"16 posts tagged with \"grid\"","u":"/blog/tags/grid/page/2","b":[]},{"i":329,"t":"16 posts tagged with \"grid\"","u":"/blog/tags/grid","b":[]},{"i":331,"t":"One post tagged with \"icons\"","u":"/blog/tags/icons","b":[]},{"i":333,"t":"2 posts tagged with \"icon\"","u":"/blog/tags/icon","b":[]},{"i":335,"t":"2 posts tagged with \"input\"","u":"/blog/tags/input","b":[]},{"i":337,"t":"One post tagged with \"input-number\"","u":"/blog/tags/input-number","b":[]},{"i":339,"t":"One post tagged with \"leftmenu\"","u":"/blog/tags/leftmenu","b":[]},{"i":341,"t":"11 posts tagged with \"modal\"","u":"/blog/tags/modal","b":[]},{"i":343,"t":"One post tagged with \"layout\"","u":"/blog/tags/layout","b":[]},{"i":345,"t":"11 posts tagged with \"modal\"","u":"/blog/tags/modal/page/2","b":[]},{"i":347,"t":"3 posts tagged with \"modalservice\"","u":"/blog/tags/modalservice","b":[]},{"i":349,"t":"One post tagged with \"navigation\"","u":"/blog/tags/navigation","b":[]},{"i":351,"t":"One post tagged with \"numberinput\"","u":"/blog/tags/numberinput","b":[]},{"i":353,"t":"3 posts tagged with \"placeholders\"","u":"/blog/tags/placeholders","b":[]},{"i":355,"t":"One post tagged with \"preload\"","u":"/blog/tags/preload","b":[]},{"i":357,"t":"5 posts tagged with \"offcanvas\"","u":"/blog/tags/offcanvas","b":[]},{"i":359,"t":"One post tagged with \"pagination\"","u":"/blog/tags/pagination","b":[]},{"i":361,"t":"One post tagged with \"progress-bar\"","u":"/blog/tags/progress-bar","b":[]},{"i":363,"t":"2 posts tagged with \"progress\"","u":"/blog/tags/progress","b":[]},{"i":365,"t":"2 posts tagged with \"sidebar\"","u":"/blog/tags/sidebar","b":[]},{"i":367,"t":"One post tagged with \"tabs\"","u":"/blog/tags/tabs","b":[]},{"i":369,"t":"2 posts tagged with \"switch\"","u":"/blog/tags/switch","b":[]},{"i":371,"t":"One post tagged with \"timepicker\"","u":"/blog/tags/timepicker","b":[]},{"i":373,"t":"3 posts tagged with \"timeinput\"","u":"/blog/tags/timeinput","b":[]},{"i":375,"t":"One post tagged with \"toast\"","u":"/blog/tags/toast","b":[]},{"i":377,"t":"4 posts tagged with \"toasts\"","u":"/blog/tags/toasts","b":[]},{"i":379,"t":"One post tagged with \"toastservice\"","u":"/blog/tags/toastservice","b":[]},{"i":381,"t":"2 posts tagged with \"tooltip\"","u":"/blog/tags/tooltip","b":[]},{"i":383,"t":"One post tagged with \"v0.0.2\"","u":"/blog/tags/v-0-0-2","b":[]},{"i":385,"t":"One post tagged with \"v0.0.1\"","u":"/blog/tags/v-0-0-1","b":[]},{"i":387,"t":"One post tagged with \"v0.0.3\"","u":"/blog/tags/v-0-0-3","b":[]},{"i":389,"t":"One post tagged with \"v0.0.4\"","u":"/blog/tags/v-0-0-4","b":[]},{"i":391,"t":"One post tagged with \"v0.1.1\"","u":"/blog/tags/v-0-1-1","b":[]},{"i":393,"t":"One post tagged with \"v0.1.0\"","u":"/blog/tags/v-0-1-0","b":[]},{"i":395,"t":"One post tagged with \"v0.2.0\"","u":"/blog/tags/v-0-2-0","b":[]},{"i":397,"t":"One post tagged with \"v0.2.1\"","u":"/blog/tags/v-0-2-1","b":[]},{"i":399,"t":"One post tagged with \"v0.2.2\"","u":"/blog/tags/v-0-2-2","b":[]},{"i":401,"t":"One post tagged with \"v0.2.3\"","u":"/blog/tags/v-0-2-3","b":[]},{"i":403,"t":"One post tagged with \"v0.2.4\"","u":"/blog/tags/v-0-2-4","b":[]},{"i":405,"t":"One post tagged with \"v0.3.0\"","u":"/blog/tags/v-0-3-0","b":[]},{"i":407,"t":"One post tagged with \"v0.2.6\"","u":"/blog/tags/v-0-2-6","b":[]},{"i":409,"t":"One post tagged with \"v0.2.5\"","u":"/blog/tags/v-0-2-5","b":[]},{"i":411,"t":"One post tagged with \"v0.4.0\"","u":"/blog/tags/v-0-4-0","b":[]},{"i":413,"t":"One post tagged with \"v0.4.1\"","u":"/blog/tags/v-0-4-1","b":[]},{"i":415,"t":"One post tagged with \"v0.4.2\"","u":"/blog/tags/v-0-4-2","b":[]},{"i":417,"t":"One post tagged with \"v0.5.0\"","u":"/blog/tags/v-0-5-0","b":[]},{"i":419,"t":"One post tagged with \"v0.5.1\"","u":"/blog/tags/v-0-5-1","b":[]},{"i":421,"t":"One post tagged with \"v1.0.0\"","u":"/blog/tags/v-1-0-0","b":[]},{"i":423,"t":"One post tagged with \"v1.1.0\"","u":"/blog/tags/v-1-1-0","b":[]},{"i":425,"t":"One post tagged with \"v0.6.0\"","u":"/blog/tags/v-0-6-0","b":[]},{"i":427,"t":"One post tagged with \"v1.0.1\"","u":"/blog/tags/v-1-0-1","b":[]},{"i":429,"t":"One post tagged with \"v1.10.0\"","u":"/blog/tags/v-1-10-0","b":[]},{"i":431,"t":"One post tagged with \"v1.10.1\"","u":"/blog/tags/v-1-10-1","b":[]},{"i":433,"t":"One post tagged with \"v1.10.2\"","u":"/blog/tags/v-1-10-2","b":[]},{"i":435,"t":"One post tagged with \"v1.10.3\"","u":"/blog/tags/v-1-10-3","b":[]},{"i":437,"t":"One post tagged with \"v1.10.4\"","u":"/blog/tags/v-1-10-4","b":[]},{"i":439,"t":"One post tagged with \"v1.2.0\"","u":"/blog/tags/v-1-2-0","b":[]},{"i":441,"t":"One post tagged with \"v1.3.0\"","u":"/blog/tags/v-1-3-0","b":[]},{"i":443,"t":"One post tagged with \"v1.3.1\"","u":"/blog/tags/v-1-3-1","b":[]},{"i":445,"t":"One post tagged with \"v1.4.0\"","u":"/blog/tags/v-1-4-0","b":[]},{"i":447,"t":"One post tagged with \"v1.4.1\"","u":"/blog/tags/v-1-4-1","b":[]},{"i":449,"t":"One post tagged with \"v1.4.4\"","u":"/blog/tags/v-1-4-4","b":[]},{"i":451,"t":"One post tagged with \"v1.4.3\"","u":"/blog/tags/v-1-4-3","b":[]},{"i":453,"t":"One post tagged with \"v1.4.2\"","u":"/blog/tags/v-1-4-2","b":[]},{"i":455,"t":"One post tagged with \"v1.4.5\"","u":"/blog/tags/v-1-4-5","b":[]},{"i":457,"t":"One post tagged with \"v1.5.0\"","u":"/blog/tags/v-1-5-0","b":[]},{"i":459,"t":"One post tagged with \"v1.6.0\"","u":"/blog/tags/v-1-6-0","b":[]},{"i":461,"t":"One post tagged with \"v1.7.0\"","u":"/blog/tags/v-1-7-0","b":[]},{"i":463,"t":"One post tagged with \"v1.7.2\"","u":"/blog/tags/v-1-7-2","b":[]},{"i":465,"t":"One post tagged with \"v1.8.0\"","u":"/blog/tags/v-1-8-0","b":[]},{"i":467,"t":"One post tagged with \"v1.7.1\"","u":"/blog/tags/v-1-7-1","b":[]},{"i":469,"t":"One post tagged with \"v1.7.3\"","u":"/blog/tags/v-1-7-3","b":[]},{"i":471,"t":"One post tagged with \"v1.9.1\"","u":"/blog/tags/v-1-9-1","b":[]},{"i":473,"t":"One post tagged with \"v1.9.2\"","u":"/blog/tags/v-1-9-2","b":[]},{"i":475,"t":"One post tagged with \"v1.8.2\"","u":"/blog/tags/v-1-8-2","b":[]},{"i":477,"t":"One post tagged with \"v1.8.1\"","u":"/blog/tags/v-1-8-1","b":[]},{"i":479,"t":"One post tagged with \"v1.9.4\"","u":"/blog/tags/v-1-9-4","b":[]},{"i":481,"t":"One post tagged with \"v1.9.5\"","u":"/blog/tags/v-1-9-5","b":[]},{"i":483,"t":"One post tagged with \"v1.9.0\"","u":"/blog/tags/v-1-9-0","b":[]},{"i":485,"t":"Blazor Alerts","u":"/components/alerts","b":[]},{"i":487,"t":"One post tagged with \"v1.9.3\"","u":"/blog/tags/v-1-9-3","b":[]},{"i":489,"t":"One post tagged with \"v1.8.3\"","u":"/blog/tags/v-1-8-3","b":[]},{"i":491,"t":"Blazor Breadcrumb","u":"/components/breadcrumb","b":[]},{"i":493,"t":"Blazor Accordion","u":"/components/accordion","b":[]},{"i":495,"t":"Blazor Badge","u":"/components/badge","b":[]},{"i":497,"t":"Blazor Charts","u":"/components/charts","b":[]},{"i":499,"t":"Blazor Callout","u":"/components/callout","b":[]},{"i":501,"t":"Blazor Buttons","u":"/components/buttons","b":[]},{"i":503,"t":"Blazor Card","u":"/components/card","b":[]},{"i":505,"t":"Blazor Confirm Dialog","u":"/components/confirm-dialog","b":[]},{"i":507,"t":"Blazor Collapse","u":"/components/collapse","b":[]},{"i":509,"t":"Blazor Modal","u":"/components/modal","b":[]},{"i":511,"t":"Blazor Pagination","u":"/components/pagination","b":[]},{"i":513,"t":"Blazor Offcanvas","u":"/components/offcanvas","b":[]},{"i":515,"t":"Blazor Preload","u":"/components/preload","b":[]},{"i":517,"t":"Blazor Placeholders","u":"/components/placeholders","b":[]},{"i":519,"t":"Blazor Progress","u":"/components/progress","b":[]},{"i":521,"t":"Blazor Tabs","u":"/components/tabs","b":[]},{"i":523,"t":"Blazor Tooltips","u":"/components/tooltips","b":[]},{"i":525,"t":"Blazor Toasts","u":"/components/toasts","b":[]},{"i":527,"t":"Blazor Icons","u":"/content/icons","b":[]},{"i":529,"t":"Blazor Doughnut Chart","u":"/data-visualization/doughnut-chart","b":[]},{"i":531,"t":"Blazor Bar Chart","u":"/data-visualization/bar-chart","b":[]},{"i":533,"t":"Blazor Pie Chart","u":"/data-visualization/pie-chart","b":[]},{"i":535,"t":"Blazor Line Chart","u":"/data-visualization/line-chart","b":[]},{"i":537,"t":"Blazor Auto Complete","u":"/forms/autocomplete","b":[]},{"i":539,"t":"Blazor Switch","u":"/forms/switch","b":[]},{"i":541,"t":"Blazor Currency Input","u":"/forms/currency-input","b":[]},{"i":543,"t":"Blazor Date Input","u":"/forms/date-input","b":[]},{"i":545,"t":"Getting started - Blazor WebAssembly","u":"/getting-started/blazor-webassembly","b":[]},{"i":547,"t":"Getting started - Blazor Server","u":"/getting-started/blazor-server","b":[]},{"i":549,"t":"Getting started - MAUI Blazor App","u":"/getting-started/maui-blazor","b":[]},{"i":551,"t":"Layout Setup - Blazor WebAssembly","u":"/layout/blazor-server","b":[]},{"i":553,"t":"Layout Setup - Blazor WebAssembly","u":"/layout/blazor-webassembly","b":[]},{"i":555,"t":"Blazor Time Input","u":"/forms/time-input","b":[]},{"i":557,"t":"One post tagged with \"blazortime\"","u":"/blog/tags/blazortime","b":[]},{"i":559,"t":"Blazor Modal Service","u":"/services/modal","b":[]},{"i":561,"t":"Blazor Number Input","u":"/forms/number-input","b":[]},{"i":563,"t":"Blazor Dropdown","u":"/components/dropdown","b":[]},{"i":565,"t":"Blazor Sidebar","u":"/components/sidebar","b":[]},{"i":567,"t":"Blazor Grid","u":"/components/grid","b":[]}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/1",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/3",[5,2.977,6,5.84]],["t/5",[5,2.977,7,5.84]],["t/7",[5,2.977,8,5.84]],["t/9",[5,2.977,9,5.84]],["t/11",[5,2.977,10,5.84]],["t/13",[5,2.977,11,5.84]],["t/15",[5,2.977,12,5.84]],["t/17",[5,2.977,13,5.84]],["t/19",[5,2.977,14,5.84]],["t/21",[5,2.977,15,5.84]],["t/23",[5,2.977,16,5.84]],["t/25",[5,2.977,17,5.84]],["t/27",[5,2.977,18,5.84]],["t/29",[5,2.977,19,5.84]],["t/31",[5,2.977,20,5.84]],["t/33",[5,2.977,21,5.84]],["t/35",[5,2.977,22,5.84]],["t/37",[5,2.977,23,5.84]],["t/39",[2,1,3,1.992,24,5.143]],["t/41",[2,1,3,1.992,25,5.143]],["t/43",[2,1,3,1.992,26,5.143]],["t/45",[2,1,3,1.992,27,5.143]],["t/47",[2,1,3,1.992,28,5.143]],["t/49",[2,1,3,1.992,29,5.143]],["t/51",[2,1,3,1.992,30,5.143]],["t/53",[2,1,3,1.992,31,5.143]],["t/55",[2,1,3,1.992,32,5.143]],["t/57",[2,1,3,1.992,33,5.143]],["t/59",[2,1,3,1.992,34,5.143]],["t/61",[2,1,3,1.992,35,5.143]],["t/63",[2,1,3,1.992,36,5.143]],["t/65",[2,1,3,1.992,37,5.143]],["t/67",[2,1,3,1.992,38,5.143]],["t/69",[2,1,3,1.992,39,5.143]],["t/71",[2,1,3,1.992,40,5.143]],["t/73",[2,1,3,1.992,41,5.143]],["t/75",[2,1,3,1.992,42,5.143]],["t/77",[2,1,3,1.992,43,5.143]],["t/79",[2,1,3,1.992,44,5.143]],["t/81",[2,1,3,1.992,45,5.143]],["t/83",[2,1,3,1.992,46,5.143]],["t/85",[2,1,3,1.992,47,5.143]],["t/87",[2,1,3,1.992,48,5.143]],["t/89",[2,1,3,1.992,49,5.143]],["t/91",[2,1,3,1.992,50,5.143]],["t/93",[2,1,3,1.992,51,5.143]],["t/95",[2,1,3,1.992,52,5.143]],["t/97",[2,1,3,1.992,53,5.143]],["t/99",[2,1,3,1.992,54,5.143]],["t/101",[2,1,3,1.992,55,5.143]],["t/103",[2,1,3,1.992,56,5.143]],["t/105",[2,1,3,1.992,57,5.143]],["t/107",[58,7.486]],["t/109",[2,1,3,1.992,59,5.143]],["t/111",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/113",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/115",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/117",[60,0.819,61,0.422,62,0.417,63,4.594]],["t/119",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/121",[62,0.613]],["t/123",[60,0.819,61,0.422,62,0.417,64,4.594]],["t/125",[61,0.422,62,0.417,65,4.594,66,4.594]],["t/127",[60,0.819,61,0.422,62,0.417,67,4.594]],["t/129",[0,3.313,1,3.313,2,0.807,3,1.608,4,3.188]],["t/131",[2,0.736,60,0.675,61,0.348,62,0.343,68,3.316,69,2.499]],["t/133",[2,0.893,61,0.422,62,0.417,70,4.024]],["t/135",[2,0.807,60,0.74,61,0.381,62,0.376,69,2.74]],["t/137",[2,0.807,3,1.608,61,0.381,62,0.376,71,3.856]],["t/139",[2,0.736,61,0.348,62,0.343,72,2.066,73,3.517,74,3.156]],["t/141",[2,0.736,60,0.675,61,0.348,62,0.343,75,3.517,76,2.639]],["t/143",[2,0.807,61,0.381,62,0.376,72,2.265,74,3.46]],["t/145",[2,0.736,60,0.675,61,0.348,62,0.343,69,2.499,77,3.786]],["t/147",[2,0.807,60,0.74,61,0.381,62,0.376,66,4.151]],["t/149",[2,0.736,60,0.675,61,0.348,62,0.343,78,2.908,79,4.194]],["t/151",[2,0.807,61,0.381,62,0.376,78,3.188,80,2.893]],["t/153",[2,0.736,60,0.675,61,0.348,62,0.343,78,2.908,81,4.194]],["t/155",[2,0.736,60,0.675,61,0.348,62,0.343,78,2.908,82,4.194]],["t/157",[2,0.807,60,0.74,61,0.381,62,0.376,76,2.893]],["t/159",[2,0.736,60,0.675,61,0.348,62,0.343,76,2.639,83,3.156]],["t/161",[2,0.736,60,0.675,61,0.348,62,0.343,69,2.499,84,3.786]],["t/163",[2,0.807,60,0.74,61,0.381,62,0.376,83,3.46]],["t/165",[2,0.736,60,0.675,61,0.348,62,0.343,76,2.639,83,3.156]],["t/167",[2,0.736,60,0.675,61,0.348,62,0.343,69,2.499,85,3.786]],["t/169",[2,0.807,60,0.74,61,0.381,62,0.376,86,3.856]],["t/171",[2,0.807,61,0.381,62,0.376,72,2.265,87,3.856]],["t/173",[2,0.807,60,0.74,61,0.381,62,0.376,88,3.46]],["t/175",[2,0.736,60,0.675,61,0.348,62,0.343,68,3.316,88,3.156]],["t/177",[2,0.807,60,0.74,61,0.381,62,0.376,89,4.599]],["t/179",[2,0.807,61,0.381,62,0.376,72,2.265,90,4.599]],["t/181",[2,0.807,60,0.74,61,0.381,62,0.376,91,3.856]],["t/183",[2,0.736,60,0.675,61,0.348,62,0.343,92,3.786,93,3.517]],["t/185",[2,0.807,60,0.74,61,0.381,62,0.376,93,3.856]],["t/187",[2,0.807,60,0.74,61,0.381,62,0.376,94,3.46]],["t/189",[2,0.807,61,0.381,62,0.376,72,2.265,94,3.46]],["t/191",[2,0.893,61,0.422,62,0.417,70,4.024]],["t/193",[2,0.893,61,0.422,62,0.417,70,4.024]],["t/195",[60,0.819,61,0.422,62,0.417,95,5.089]],["t/197",[2,0.893,61,0.422,62,0.417,70,4.024]],["t/199",[61,0.422,62,0.417,96,4.024,97,5.089]],["t/201",[60,0.819,61,0.422,62,0.417,98,5.089]],["t/203",[5,2.341,61,0.422,62,0.417,99,3.667]],["t/205",[5,2.341,61,0.422,62,0.417,99,3.667]],["t/207",[5,1.929,60,0.675,61,0.348,62,0.343,92,3.786,93,3.517]],["t/209",[5,2.341,61,0.422,62,0.417,99,3.667]],["t/211",[5,2.341,61,0.422,62,0.417,99,3.667]],["t/213",[5,2.341,61,0.422,62,0.417,99,3.667]],["t/215",[60,0.819,61,0.422,62,0.417,100,5.089]],["t/217",[5,2.341,61,0.422,62,0.417,99,3.667]],["t/219",[60,0.819,61,0.422,62,0.417,101,5.089]],["t/221",[61,0.422,62,0.417,72,2.507,102,4.594]],["t/223",[60,0.819,61,0.422,62,0.417,103,5.089]],["t/225",[61,0.422,62,0.417,80,3.202,102,4.594]],["t/227",[60,0.819,61,0.422,62,0.417,104,5.089]],["t/229",[60,0.819,61,0.422,62,0.417,105,5.089]],["t/231",[61,0.422,62,0.417,80,3.202,106,5.089]],["t/233",[60,0.819,61,0.422,62,0.417,107,5.089]],["t/235",[61,0.422,62,0.417,72,2.507,108,5.089]],["t/237",[60,0.819,61,0.422,62,0.417,109,5.089]],["t/239",[61,0.422,62,0.417,96,4.024,110,5.089]],["t/241",[60,0.819,61,0.422,62,0.417,111,5.089]],["t/243",[61,0.422,62,0.417,112,4.594,113,4.594]],["t/245",[61,0.422,62,0.417,112,4.594,113,4.594]],["t/247",[61,0.422,62,0.417,72,2.507,114,5.089]],["t/249",[61,0.422,62,0.417,65,4.594,115,5.089]],["t/251",[61,0.422,62,0.417,72,2.507,116,5.089]],["t/253",[60,0.819,61,0.422,62,0.417,117,5.089]],["t/255",[60,0.819,61,0.422,62,0.417,118,5.089]],["t/257",[61,0.422,62,0.417,80,3.202,119,5.089]],["t/259",[61,0.422,62,0.417,72,2.507,120,5.089]],["t/261",[60,0.819,61,0.422,62,0.417,121,5.089]],["t/263",[60,0.819,61,0.422,62,0.417,122,5.089]],["t/265",[61,0.422,62,0.417,80,3.202,123,5.089]],["t/267",[60,0.819,61,0.422,62,0.417,124,5.089]],["t/269",[60,0.819,61,0.422,62,0.417,125,4.594]],["t/271",[3,1.78,61,0.422,62,0.417,126,3.667]],["t/273",[61,0.422,62,0.417,126,3.667,127,4.267]],["t/275",[61,0.422,62,0.417,72,2.507,128,5.089]],["t/277",[61,0.422,62,0.417,72,2.507,125,4.594]],["t/279",[61,0.422,62,0.417,126,3.667,127,4.267]],["t/281",[61,0.422,62,0.417,126,3.667,127,4.267]],["t/283",[3,1.78,61,0.422,62,0.417,126,3.667]],["t/285",[3,1.78,61,0.422,62,0.417,126,3.667]],["t/287",[61,0.422,62,0.417,72,2.507,129,5.089]],["t/289",[60,0.819,61,0.422,62,0.417,130,5.089]],["t/291",[61,0.422,62,0.417,80,3.202,131,4.267]],["t/293",[60,0.819,61,0.422,62,0.417,132,4.594]],["t/295",[61,0.422,62,0.417,80,3.202,131,4.267]],["t/297",[60,0.819,61,0.422,62,0.417,69,3.033]],["t/299",[60,0.819,61,0.422,62,0.417,133,4.594]],["t/301",[60,0.819,61,0.422,62,0.417,69,3.033]],["t/303",[60,0.819,61,0.422,62,0.417,134,4.594]],["t/305",[60,0.74,61,0.381,62,0.376,73,3.856,74,3.46]],["t/307",[60,0.819,61,0.422,62,0.417,135,5.089]],["t/309",[60,0.819,61,0.422,62,0.417,136,5.089]],["t/311",[60,0.819,61,0.422,62,0.417,75,4.267]],["t/313",[61,0.422,62,0.417,72,2.507,137,5.089]],["t/315",[60,0.819,61,0.422,62,0.417,138,4.594]],["t/317",[61,0.422,62,0.417,96,4.024,139,5.089]],["t/319",[61,0.422,62,0.417,72,2.507,140,5.089]],["t/321",[60,0.819,61,0.422,62,0.417,74,3.829]],["t/323",[4,3.528,61,0.422,62,0.417,71,4.267]],["t/325",[60,0.819,61,0.422,62,0.417,141,4.594]],["t/327",[61,0.422,62,0.417,78,3.528,142,4.594]],["t/329",[61,0.422,62,0.417,78,3.528,142,4.594]],["t/331",[60,0.819,61,0.422,62,0.417,143,4.267]],["t/333",[61,0.422,62,0.417,72,2.507,143,4.267]],["t/335",[61,0.422,62,0.417,72,2.507,76,3.202]],["t/337",[60,0.74,61,0.381,62,0.376,76,2.893,83,3.46]],["t/339",[60,0.819,61,0.422,62,0.417,144,5.089]],["t/341",[61,0.422,62,0.417,145,4.594,146,4.024]],["t/343",[60,0.819,61,0.422,62,0.417,147,4.267]],["t/345",[61,0.422,62,0.417,145,4.594,146,4.024]],["t/347",[61,0.422,62,0.417,80,3.202,148,5.089]],["t/349",[60,0.819,61,0.422,62,0.417,149,5.089]],["t/351",[60,0.819,61,0.422,62,0.417,150,5.089]],["t/353",[61,0.422,62,0.417,80,3.202,151,4.594]],["t/355",[60,0.819,61,0.422,62,0.417,87,4.267]],["t/357",[61,0.422,62,0.417,71,4.267,86,4.267]],["t/359",[60,0.819,61,0.422,62,0.417,152,4.594]],["t/361",[60,0.74,61,0.381,62,0.376,68,3.636,88,3.46]],["t/363",[61,0.422,62,0.417,72,2.507,88,3.829]],["t/365",[61,0.422,62,0.417,72,2.507,153,4.594]],["t/367",[60,0.819,61,0.422,62,0.417,91,4.267]],["t/369",[61,0.422,62,0.417,72,2.507,154,4.594]],["t/371",[60,0.819,61,0.422,62,0.417,155,5.089]],["t/373",[61,0.422,62,0.417,80,3.202,156,5.089]],["t/375",[60,0.819,61,0.422,62,0.417,94,3.829]],["t/377",[61,0.422,62,0.417,94,3.829,96,4.024]],["t/379",[60,0.819,61,0.422,62,0.417,157,5.089]],["t/381",[61,0.422,62,0.417,72,2.507,158,4.594]],["t/383",[9,4.594,60,0.819,61,0.422,62,0.417]],["t/385",[6,4.594,60,0.819,61,0.422,62,0.417]],["t/387",[7,4.594,60,0.819,61,0.422,62,0.417]],["t/389",[8,4.594,60,0.819,61,0.422,62,0.417]],["t/391",[10,4.594,60,0.819,61,0.422,62,0.417]],["t/393",[11,4.594,60,0.819,61,0.422,62,0.417]],["t/395",[12,4.594,60,0.819,61,0.422,62,0.417]],["t/397",[15,4.594,60,0.819,61,0.422,62,0.417]],["t/399",[13,4.594,60,0.819,61,0.422,62,0.417]],["t/401",[14,4.594,60,0.819,61,0.422,62,0.417]],["t/403",[16,4.594,60,0.819,61,0.422,62,0.417]],["t/405",[19,4.594,60,0.819,61,0.422,62,0.417]],["t/407",[18,4.594,60,0.819,61,0.422,62,0.417]],["t/409",[17,4.594,60,0.819,61,0.422,62,0.417]],["t/411",[20,4.594,60,0.819,61,0.422,62,0.417]],["t/413",[21,4.594,60,0.819,61,0.422,62,0.417]],["t/415",[22,4.594,60,0.819,61,0.422,62,0.417]],["t/417",[23,4.594,60,0.819,61,0.422,62,0.417]],["t/419",[24,4.594,60,0.819,61,0.422,62,0.417]],["t/421",[27,4.594,60,0.819,61,0.422,62,0.417]],["t/423",[28,4.594,60,0.819,61,0.422,62,0.417]],["t/425",[25,4.594,60,0.819,61,0.422,62,0.417]],["t/427",[26,4.594,60,0.819,61,0.422,62,0.417]],["t/429",[54,4.594,60,0.819,61,0.422,62,0.417]],["t/431",[55,4.594,60,0.819,61,0.422,62,0.417]],["t/433",[56,4.594,60,0.819,61,0.422,62,0.417]],["t/435",[57,4.594,60,0.819,61,0.422,62,0.417]],["t/437",[59,4.594,60,0.819,61,0.422,62,0.417]],["t/439",[29,4.594,60,0.819,61,0.422,62,0.417]],["t/441",[30,4.594,60,0.819,61,0.422,62,0.417]],["t/443",[33,4.594,60,0.819,61,0.422,62,0.417]],["t/445",[31,4.594,60,0.819,61,0.422,62,0.417]],["t/447",[34,4.594,60,0.819,61,0.422,62,0.417]],["t/449",[35,4.594,60,0.819,61,0.422,62,0.417]],["t/451",[36,4.594,60,0.819,61,0.422,62,0.417]],["t/453",[32,4.594,60,0.819,61,0.422,62,0.417]],["t/455",[37,4.594,60,0.819,61,0.422,62,0.417]],["t/457",[38,4.594,60,0.819,61,0.422,62,0.417]],["t/459",[39,4.594,60,0.819,61,0.422,62,0.417]],["t/461",[40,4.594,60,0.819,61,0.422,62,0.417]],["t/463",[42,4.594,60,0.819,61,0.422,62,0.417]],["t/465",[44,4.594,60,0.819,61,0.422,62,0.417]],["t/467",[41,4.594,60,0.819,61,0.422,62,0.417]],["t/469",[45,4.594,60,0.819,61,0.422,62,0.417]],["t/471",[49,4.594,60,0.819,61,0.422,62,0.417]],["t/473",[51,4.594,60,0.819,61,0.422,62,0.417]],["t/475",[46,4.594,60,0.819,61,0.422,62,0.417]],["t/477",[43,4.594,60,0.819,61,0.422,62,0.417]],["t/479",[53,4.594,60,0.819,61,0.422,62,0.417]],["t/481",[52,4.594,60,0.819,61,0.422,62,0.417]],["t/483",[48,4.594,60,0.819,61,0.422,62,0.417]],["t/485",[2,1.135,64,5.84]],["t/487",[50,4.594,60,0.819,61,0.422,62,0.417]],["t/489",[47,4.594,60,0.819,61,0.422,62,0.417]],["t/491",[2,1.135,132,5.84]],["t/493",[2,1.135,63,5.84]],["t/495",[2,1.135,67,5.84]],["t/497",[2,1.135,69,3.856]],["t/499",[2,1.135,133,5.84]],["t/501",[2,1.135,131,5.425]],["t/503",[2,1.135,159,6.47]],["t/505",[2,1,73,4.777,74,4.286]],["t/507",[2,1.135,134,5.84]],["t/509",[2,1.135,146,5.115]],["t/511",[2,1.135,152,5.84]],["t/513",[2,1.135,86,5.425]],["t/515",[2,1.135,87,5.425]],["t/517",[2,1.135,151,5.84]],["t/519",[2,1.135,88,4.868]],["t/521",[2,1.135,91,5.425]],["t/523",[2,1.135,158,5.84]],["t/525",[2,1.135,94,4.868]],["t/527",[2,1.135,143,5.425]],["t/529",[2,1,69,3.395,77,5.143]],["t/531",[2,1,68,4.504,69,3.395]],["t/533",[2,1,69,3.395,85,5.143]],["t/535",[2,1,69,3.395,84,5.143]],["t/537",[2,1,160,5.697,161,5.697]],["t/539",[2,1.135,154,5.84]],["t/541",[2,1,75,4.777,76,3.584]],["t/543",[2,1,76,3.584,138,5.143]],["t/545",[2,0.893,162,4.267,163,4.267,164,4.267]],["t/547",[2,0.893,162,4.267,163,4.267,165,5.089]],["t/549",[2,0.807,162,3.856,163,3.856,166,4.599,167,4.599]],["t/551",[2,0.893,147,4.267,164,4.267,168,4.594]],["t/553",[2,0.893,147,4.267,164,4.267,168,4.594]],["t/555",[2,1,76,3.584,169,5.697]],["t/557",[60,0.819,61,0.422,62,0.417,170,5.089]],["t/559",[2,1,146,4.504,171,5.697]],["t/561",[2,1,76,3.584,83,4.286]],["t/563",[2,1.135,141,5.84]],["t/565",[2,1.135,153,5.84]],["t/567",[2,1.135,78,4.486]]],"invertedIndex":[["",{"_index":1,"t":{"1":{"position":[[5,1]]},"111":{"position":[[5,1]]},"113":{"position":[[5,1]]},"115":{"position":[[5,1]]},"119":{"position":[[5,1]]},"129":{"position":[[5,1]]}}}],["11",{"_index":145,"t":{"341":{"position":[[0,2]]},"345":{"position":[[0,2]]}}}],["13",{"_index":112,"t":{"243":{"position":[[0,2]]},"245":{"position":[[0,2]]}}}],["16",{"_index":142,"t":{"327":{"position":[[0,2]]},"329":{"position":[[0,2]]}}}],["2",{"_index":72,"t":{"139":{"position":[[0,1]]},"143":{"position":[[0,1]]},"171":{"position":[[0,1]]},"179":{"position":[[0,1]]},"189":{"position":[[0,1]]},"221":{"position":[[0,1]]},"235":{"position":[[0,1]]},"247":{"position":[[0,1]]},"251":{"position":[[0,1]]},"259":{"position":[[0,1]]},"275":{"position":[[0,1]]},"277":{"position":[[0,1]]},"287":{"position":[[0,1]]},"313":{"position":[[0,1]]},"319":{"position":[[0,1]]},"333":{"position":[[0,1]]},"335":{"position":[[0,1]]},"363":{"position":[[0,1]]},"365":{"position":[[0,1]]},"369":{"position":[[0,1]]},"381":{"position":[[0,1]]}}}],["26",{"_index":126,"t":{"271":{"position":[[0,2]]},"273":{"position":[[0,2]]},"279":{"position":[[0,2]]},"281":{"position":[[0,2]]},"283":{"position":[[0,2]]},"285":{"position":[[0,2]]}}}],["3",{"_index":80,"t":{"151":{"position":[[0,1]]},"225":{"position":[[0,1]]},"231":{"position":[[0,1]]},"257":{"position":[[0,1]]},"265":{"position":[[0,1]]},"291":{"position":[[0,1]]},"295":{"position":[[0,1]]},"347":{"position":[[0,1]]},"353":{"position":[[0,1]]},"373":{"position":[[0,1]]}}}],["33",{"_index":70,"t":{"133":{"position":[[0,2]]},"191":{"position":[[0,2]]},"193":{"position":[[0,2]]},"197":{"position":[[0,2]]}}}],["4",{"_index":96,"t":{"199":{"position":[[0,1]]},"239":{"position":[[0,1]]},"317":{"position":[[0,1]]},"377":{"position":[[0,1]]}}}],["5",{"_index":71,"t":{"137":{"position":[[0,1]]},"323":{"position":[[0,1]]},"357":{"position":[[0,1]]}}}],["53",{"_index":99,"t":{"203":{"position":[[0,2]]},"205":{"position":[[0,2]]},"209":{"position":[[0,2]]},"211":{"position":[[0,2]]},"213":{"position":[[0,2]]},"217":{"position":[[0,2]]}}}],["8",{"_index":65,"t":{"125":{"position":[[0,1]]},"249":{"position":[[0,1]]}}}],["accordion",{"_index":63,"t":{"117":{"position":[[21,11]]},"493":{"position":[[7,9]]}}}],["alert",{"_index":64,"t":{"123":{"position":[[21,7]]},"485":{"position":[[7,6]]}}}],["app",{"_index":167,"t":{"549":{"position":[[30,3]]}}}],["archiv",{"_index":58,"t":{"107":{"position":[[0,7]]}}}],["auto",{"_index":160,"t":{"537":{"position":[[7,4]]}}}],["autocomplet",{"_index":66,"t":{"125":{"position":[[20,14]]},"147":{"position":[[29,13]]}}}],["badg",{"_index":67,"t":{"127":{"position":[[21,7]]},"495":{"position":[[7,5]]}}}],["bar",{"_index":68,"t":{"131":{"position":[[29,3]]},"175":{"position":[[38,4]]},"361":{"position":[[31,4]]},"531":{"position":[[7,3]]}}}],["blazor",{"_index":2,"t":{"1":{"position":[[7,6]]},"39":{"position":[[0,6]]},"41":{"position":[[0,6]]},"43":{"position":[[0,6]]},"45":{"position":[[0,6]]},"47":{"position":[[0,6]]},"49":{"position":[[0,6]]},"51":{"position":[[0,6]]},"53":{"position":[[0,6]]},"55":{"position":[[0,6]]},"57":{"position":[[0,6]]},"59":{"position":[[0,6]]},"61":{"position":[[0,6]]},"63":{"position":[[0,6]]},"65":{"position":[[0,6]]},"67":{"position":[[0,6]]},"69":{"position":[[0,6]]},"71":{"position":[[0,6]]},"73":{"position":[[0,6]]},"75":{"position":[[0,6]]},"77":{"position":[[0,6]]},"79":{"position":[[0,6]]},"81":{"position":[[0,6]]},"83":{"position":[[0,6]]},"85":{"position":[[0,6]]},"87":{"position":[[0,6]]},"89":{"position":[[0,6]]},"91":{"position":[[0,6]]},"93":{"position":[[0,6]]},"95":{"position":[[0,6]]},"97":{"position":[[0,6]]},"99":{"position":[[0,6]]},"101":{"position":[[0,6]]},"103":{"position":[[0,6]]},"105":{"position":[[0,6]]},"109":{"position":[[0,6]]},"111":{"position":[[7,6]]},"113":{"position":[[7,6]]},"115":{"position":[[7,6]]},"119":{"position":[[7,6]]},"129":{"position":[[7,6]]},"131":{"position":[[21,7]]},"133":{"position":[[21,8]]},"135":{"position":[[21,7]]},"137":{"position":[[20,7]]},"139":{"position":[[20,7]]},"141":{"position":[[21,7]]},"143":{"position":[[20,7]]},"145":{"position":[[21,7]]},"147":{"position":[[21,7]]},"149":{"position":[[21,7]]},"151":{"position":[[20,7]]},"153":{"position":[[21,7]]},"155":{"position":[[21,7]]},"157":{"position":[[21,7]]},"159":{"position":[[21,7]]},"161":{"position":[[21,7]]},"163":{"position":[[21,7]]},"165":{"position":[[21,7]]},"167":{"position":[[21,7]]},"169":{"position":[[21,7]]},"171":{"position":[[20,7]]},"173":{"position":[[21,7]]},"175":{"position":[[21,7]]},"177":{"position":[[21,7]]},"179":{"position":[[20,7]]},"181":{"position":[[21,7]]},"183":{"position":[[21,7]]},"185":{"position":[[21,7]]},"187":{"position":[[21,7]]},"189":{"position":[[20,7]]},"191":{"position":[[21,8]]},"193":{"position":[[21,8]]},"197":{"position":[[21,8]]},"485":{"position":[[0,6]]},"491":{"position":[[0,6]]},"493":{"position":[[0,6]]},"495":{"position":[[0,6]]},"497":{"position":[[0,6]]},"499":{"position":[[0,6]]},"501":{"position":[[0,6]]},"503":{"position":[[0,6]]},"505":{"position":[[0,6]]},"507":{"position":[[0,6]]},"509":{"position":[[0,6]]},"511":{"position":[[0,6]]},"513":{"position":[[0,6]]},"515":{"position":[[0,6]]},"517":{"position":[[0,6]]},"519":{"position":[[0,6]]},"521":{"position":[[0,6]]},"523":{"position":[[0,6]]},"525":{"position":[[0,6]]},"527":{"position":[[0,6]]},"529":{"position":[[0,6]]},"531":{"position":[[0,6]]},"533":{"position":[[0,6]]},"535":{"position":[[0,6]]},"537":{"position":[[0,6]]},"539":{"position":[[0,6]]},"541":{"position":[[0,6]]},"543":{"position":[[0,6]]},"545":{"position":[[18,6]]},"547":{"position":[[18,6]]},"549":{"position":[[23,6]]},"551":{"position":[[15,6]]},"553":{"position":[[15,6]]},"555":{"position":[[0,6]]},"559":{"position":[[0,6]]},"561":{"position":[[0,6]]},"563":{"position":[[0,6]]},"565":{"position":[[0,6]]},"567":{"position":[[0,6]]}}}],["blazoraccordion",{"_index":95,"t":{"195":{"position":[[21,17]]}}}],["blazorautocomplet",{"_index":97,"t":{"199":{"position":[[20,20]]}}}],["blazorbadg",{"_index":98,"t":{"201":{"position":[[21,13]]}}}],["blazorbootstrap",{"_index":5,"t":{"3":{"position":[[0,15]]},"5":{"position":[[0,15]]},"7":{"position":[[0,15]]},"9":{"position":[[0,15]]},"11":{"position":[[0,15]]},"13":{"position":[[0,15]]},"15":{"position":[[0,15]]},"17":{"position":[[0,15]]},"19":{"position":[[0,15]]},"21":{"position":[[0,15]]},"23":{"position":[[0,15]]},"25":{"position":[[0,15]]},"27":{"position":[[0,15]]},"29":{"position":[[0,15]]},"31":{"position":[[0,15]]},"33":{"position":[[0,15]]},"35":{"position":[[0,15]]},"37":{"position":[[0,15]]},"203":{"position":[[21,17]]},"205":{"position":[[21,17]]},"207":{"position":[[21,16]]},"209":{"position":[[21,17]]},"211":{"position":[[21,17]]},"213":{"position":[[21,17]]},"217":{"position":[[21,17]]}}}],["blazorbreadcrumb",{"_index":100,"t":{"215":{"position":[[21,18]]}}}],["blazorbutton",{"_index":102,"t":{"221":{"position":[[20,14]]},"225":{"position":[[20,15]]}}}],["blazorchart",{"_index":103,"t":{"223":{"position":[[21,13]]}}}],["blazorcollaps",{"_index":101,"t":{"219":{"position":[[21,16]]}}}],["blazorconfirmdialog",{"_index":104,"t":{"227":{"position":[[21,21]]}}}],["blazorconfirmmod",{"_index":105,"t":{"229":{"position":[[21,20]]}}}],["blazorcurrencyinput",{"_index":106,"t":{"231":{"position":[[20,21]]}}}],["blazord",{"_index":107,"t":{"233":{"position":[[21,12]]}}}],["blazordateinput",{"_index":110,"t":{"239":{"position":[[20,17]]}}}],["blazordatepick",{"_index":108,"t":{"235":{"position":[[20,18]]}}}],["blazordialog",{"_index":109,"t":{"237":{"position":[[21,14]]}}}],["blazordropdown",{"_index":111,"t":{"241":{"position":[[21,16]]}}}],["blazorgrid",{"_index":113,"t":{"243":{"position":[[21,12]]},"245":{"position":[[21,12]]}}}],["blazoricon",{"_index":114,"t":{"247":{"position":[[20,12]]}}}],["blazormod",{"_index":115,"t":{"249":{"position":[[20,13]]}}}],["blazormodalservic",{"_index":116,"t":{"251":{"position":[[20,20]]}}}],["blazornumb",{"_index":117,"t":{"253":{"position":[[21,14]]}}}],["blazornumberinput",{"_index":118,"t":{"255":{"position":[[21,19]]}}}],["blazoroffcanva",{"_index":119,"t":{"257":{"position":[[20,17]]}}}],["blazorprogress",{"_index":121,"t":{"261":{"position":[[21,16]]}}}],["blazorsidebar",{"_index":120,"t":{"259":{"position":[[20,15]]}}}],["blazorswitch",{"_index":129,"t":{"287":{"position":[[20,14]]}}}],["blazortab",{"_index":122,"t":{"263":{"position":[[21,12]]}}}],["blazortim",{"_index":170,"t":{"557":{"position":[[21,12]]}}}],["blazortimeinput",{"_index":123,"t":{"265":{"position":[[20,17]]}}}],["blazortimepick",{"_index":124,"t":{"267":{"position":[[21,18]]}}}],["blazortoast",{"_index":125,"t":{"269":{"position":[[21,13]]},"277":{"position":[[20,14]]}}}],["blazortooltip",{"_index":128,"t":{"275":{"position":[[20,15]]}}}],["blog",{"_index":0,"t":{"1":{"position":[[0,4]]},"111":{"position":[[0,4]]},"113":{"position":[[0,4]]},"115":{"position":[[0,4]]},"119":{"position":[[0,4]]},"129":{"position":[[0,4]]}}}],["bootstrap",{"_index":3,"t":{"1":{"position":[[14,9]]},"39":{"position":[[7,9]]},"41":{"position":[[7,9]]},"43":{"position":[[7,9]]},"45":{"position":[[7,9]]},"47":{"position":[[7,9]]},"49":{"position":[[7,9]]},"51":{"position":[[7,9]]},"53":{"position":[[7,9]]},"55":{"position":[[7,9]]},"57":{"position":[[7,9]]},"59":{"position":[[7,9]]},"61":{"position":[[7,9]]},"63":{"position":[[7,9]]},"65":{"position":[[7,9]]},"67":{"position":[[7,9]]},"69":{"position":[[7,9]]},"71":{"position":[[7,9]]},"73":{"position":[[7,9]]},"75":{"position":[[7,9]]},"77":{"position":[[7,9]]},"79":{"position":[[7,9]]},"81":{"position":[[7,9]]},"83":{"position":[[7,9]]},"85":{"position":[[7,9]]},"87":{"position":[[7,9]]},"89":{"position":[[7,9]]},"91":{"position":[[7,9]]},"93":{"position":[[7,9]]},"95":{"position":[[7,9]]},"97":{"position":[[7,9]]},"99":{"position":[[7,9]]},"101":{"position":[[7,9]]},"103":{"position":[[7,9]]},"105":{"position":[[7,9]]},"109":{"position":[[7,9]]},"111":{"position":[[14,9]]},"113":{"position":[[14,9]]},"115":{"position":[[14,9]]},"119":{"position":[[14,9]]},"129":{"position":[[14,9]]},"137":{"position":[[28,10]]},"271":{"position":[[21,11]]},"283":{"position":[[21,11]]},"285":{"position":[[21,11]]}}}],["bootstrap5",{"_index":127,"t":{"273":{"position":[[21,12]]},"279":{"position":[[21,12]]},"281":{"position":[[21,12]]}}}],["breadcrumb",{"_index":132,"t":{"293":{"position":[[21,12]]},"491":{"position":[[7,10]]}}}],["breadcrumbservic",{"_index":130,"t":{"289":{"position":[[21,19]]}}}],["button",{"_index":131,"t":{"291":{"position":[[20,8]]},"295":{"position":[[20,9]]},"501":{"position":[[7,7]]}}}],["callout",{"_index":133,"t":{"299":{"position":[[21,9]]},"499":{"position":[[7,7]]}}}],["card",{"_index":159,"t":{"503":{"position":[[7,4]]}}}],["chart",{"_index":69,"t":{"131":{"position":[[33,6]]},"135":{"position":[[29,7]]},"145":{"position":[[38,6]]},"161":{"position":[[34,6]]},"167":{"position":[[33,6]]},"297":{"position":[[21,8]]},"301":{"position":[[21,7]]},"497":{"position":[[7,6]]},"529":{"position":[[16,5]]},"531":{"position":[[11,5]]},"533":{"position":[[11,5]]},"535":{"position":[[12,5]]}}}],["collaps",{"_index":134,"t":{"303":{"position":[[21,10]]},"507":{"position":[[7,8]]}}}],["complet",{"_index":161,"t":{"537":{"position":[[12,8]]}}}],["confirm",{"_index":73,"t":{"139":{"position":[[28,7]]},"305":{"position":[[21,8]]},"505":{"position":[[7,7]]}}}],["confirmdialog",{"_index":136,"t":{"309":{"position":[[21,15]]}}}],["confirmmod",{"_index":135,"t":{"307":{"position":[[21,14]]}}}],["currenc",{"_index":75,"t":{"141":{"position":[[29,8]]},"311":{"position":[[21,10]]},"541":{"position":[[7,8]]}}}],["currencyinput",{"_index":137,"t":{"313":{"position":[[20,15]]}}}],["date",{"_index":138,"t":{"315":{"position":[[21,6]]},"543":{"position":[[7,4]]}}}],["dateinput",{"_index":139,"t":{"317":{"position":[[20,11]]}}}],["datepick",{"_index":140,"t":{"319":{"position":[[20,12]]}}}],["dialog",{"_index":74,"t":{"139":{"position":[[36,7]]},"143":{"position":[[28,7]]},"305":{"position":[[30,7]]},"321":{"position":[[21,8]]},"505":{"position":[[15,6]]}}}],["doc",{"_index":4,"t":{"1":{"position":[[24,4]]},"111":{"position":[[24,4]]},"113":{"position":[[24,4]]},"115":{"position":[[24,4]]},"119":{"position":[[24,4]]},"129":{"position":[[24,4]]},"323":{"position":[[20,6]]}}}],["doughnut",{"_index":77,"t":{"145":{"position":[[29,8]]},"529":{"position":[[7,8]]}}}],["dropdown",{"_index":141,"t":{"325":{"position":[[21,10]]},"563":{"position":[[7,8]]}}}],["filter",{"_index":81,"t":{"153":{"position":[[34,10]]}}}],["get",{"_index":162,"t":{"545":{"position":[[0,7]]},"547":{"position":[[0,7]]},"549":{"position":[[0,7]]}}}],["grid",{"_index":78,"t":{"149":{"position":[[29,4]]},"151":{"position":[[28,5]]},"153":{"position":[[29,4]]},"155":{"position":[[29,4]]},"327":{"position":[[21,6]]},"329":{"position":[[21,6]]},"567":{"position":[[7,4]]}}}],["icon",{"_index":143,"t":{"331":{"position":[[21,7]]},"333":{"position":[[20,6]]},"527":{"position":[[7,5]]}}}],["input",{"_index":76,"t":{"141":{"position":[[38,6]]},"157":{"position":[[29,6]]},"159":{"position":[[29,5]]},"165":{"position":[[36,6]]},"335":{"position":[[20,7]]},"337":{"position":[[21,6]]},"541":{"position":[[16,5]]},"543":{"position":[[12,5]]},"555":{"position":[[12,5]]},"561":{"position":[[14,5]]}}}],["layout",{"_index":147,"t":{"343":{"position":[[21,8]]},"551":{"position":[[0,6]]},"553":{"position":[[0,6]]}}}],["leftmenu",{"_index":144,"t":{"339":{"position":[[21,10]]}}}],["line",{"_index":84,"t":{"161":{"position":[[29,4]]},"535":{"position":[[7,4]]}}}],["maui",{"_index":166,"t":{"549":{"position":[[18,4]]}}}],["modal",{"_index":146,"t":{"341":{"position":[[21,7]]},"345":{"position":[[21,7]]},"509":{"position":[[7,5]]},"559":{"position":[[7,5]]}}}],["modalservic",{"_index":148,"t":{"347":{"position":[[20,14]]}}}],["navig",{"_index":149,"t":{"349":{"position":[[21,12]]}}}],["number",{"_index":83,"t":{"159":{"position":[[35,7]]},"163":{"position":[[29,7]]},"165":{"position":[[29,6]]},"337":{"position":[[28,7]]},"561":{"position":[[7,6]]}}}],["numberinput",{"_index":150,"t":{"351":{"position":[[21,13]]}}}],["offcanva",{"_index":86,"t":{"169":{"position":[[29,10]]},"357":{"position":[[20,11]]},"513":{"position":[[7,9]]}}}],["on",{"_index":60,"t":{"117":{"position":[[0,3]]},"123":{"position":[[0,3]]},"127":{"position":[[0,3]]},"131":{"position":[[0,3]]},"135":{"position":[[0,3]]},"141":{"position":[[0,3]]},"145":{"position":[[0,3]]},"147":{"position":[[0,3]]},"149":{"position":[[0,3]]},"153":{"position":[[0,3]]},"155":{"position":[[0,3]]},"157":{"position":[[0,3]]},"159":{"position":[[0,3]]},"161":{"position":[[0,3]]},"163":{"position":[[0,3]]},"165":{"position":[[0,3]]},"167":{"position":[[0,3]]},"169":{"position":[[0,3]]},"173":{"position":[[0,3]]},"175":{"position":[[0,3]]},"177":{"position":[[0,3]]},"181":{"position":[[0,3]]},"183":{"position":[[0,3]]},"185":{"position":[[0,3]]},"187":{"position":[[0,3]]},"195":{"position":[[0,3]]},"201":{"position":[[0,3]]},"207":{"position":[[0,3]]},"215":{"position":[[0,3]]},"219":{"position":[[0,3]]},"223":{"position":[[0,3]]},"227":{"position":[[0,3]]},"229":{"position":[[0,3]]},"233":{"position":[[0,3]]},"237":{"position":[[0,3]]},"241":{"position":[[0,3]]},"253":{"position":[[0,3]]},"255":{"position":[[0,3]]},"261":{"position":[[0,3]]},"263":{"position":[[0,3]]},"267":{"position":[[0,3]]},"269":{"position":[[0,3]]},"289":{"position":[[0,3]]},"293":{"position":[[0,3]]},"297":{"position":[[0,3]]},"299":{"position":[[0,3]]},"301":{"position":[[0,3]]},"303":{"position":[[0,3]]},"305":{"position":[[0,3]]},"307":{"position":[[0,3]]},"309":{"position":[[0,3]]},"311":{"position":[[0,3]]},"315":{"position":[[0,3]]},"321":{"position":[[0,3]]},"325":{"position":[[0,3]]},"331":{"position":[[0,3]]},"337":{"position":[[0,3]]},"339":{"position":[[0,3]]},"343":{"position":[[0,3]]},"349":{"position":[[0,3]]},"351":{"position":[[0,3]]},"355":{"position":[[0,3]]},"359":{"position":[[0,3]]},"361":{"position":[[0,3]]},"367":{"position":[[0,3]]},"371":{"position":[[0,3]]},"375":{"position":[[0,3]]},"379":{"position":[[0,3]]},"383":{"position":[[0,3]]},"385":{"position":[[0,3]]},"387":{"position":[[0,3]]},"389":{"position":[[0,3]]},"391":{"position":[[0,3]]},"393":{"position":[[0,3]]},"395":{"position":[[0,3]]},"397":{"position":[[0,3]]},"399":{"position":[[0,3]]},"401":{"position":[[0,3]]},"403":{"position":[[0,3]]},"405":{"position":[[0,3]]},"407":{"position":[[0,3]]},"409":{"position":[[0,3]]},"411":{"position":[[0,3]]},"413":{"position":[[0,3]]},"415":{"position":[[0,3]]},"417":{"position":[[0,3]]},"419":{"position":[[0,3]]},"421":{"position":[[0,3]]},"423":{"position":[[0,3]]},"425":{"position":[[0,3]]},"427":{"position":[[0,3]]},"429":{"position":[[0,3]]},"431":{"position":[[0,3]]},"433":{"position":[[0,3]]},"435":{"position":[[0,3]]},"437":{"position":[[0,3]]},"439":{"position":[[0,3]]},"441":{"position":[[0,3]]},"443":{"position":[[0,3]]},"445":{"position":[[0,3]]},"447":{"position":[[0,3]]},"449":{"position":[[0,3]]},"451":{"position":[[0,3]]},"453":{"position":[[0,3]]},"455":{"position":[[0,3]]},"457":{"position":[[0,3]]},"459":{"position":[[0,3]]},"461":{"position":[[0,3]]},"463":{"position":[[0,3]]},"465":{"position":[[0,3]]},"467":{"position":[[0,3]]},"469":{"position":[[0,3]]},"471":{"position":[[0,3]]},"473":{"position":[[0,3]]},"475":{"position":[[0,3]]},"477":{"position":[[0,3]]},"479":{"position":[[0,3]]},"481":{"position":[[0,3]]},"483":{"position":[[0,3]]},"487":{"position":[[0,3]]},"489":{"position":[[0,3]]},"557":{"position":[[0,3]]}}}],["page",{"_index":79,"t":{"149":{"position":[[34,7]]}}}],["pagin",{"_index":152,"t":{"359":{"position":[[21,12]]},"511":{"position":[[7,10]]}}}],["pie",{"_index":85,"t":{"167":{"position":[[29,3]]},"533":{"position":[[7,3]]}}}],["placehold",{"_index":151,"t":{"353":{"position":[[20,14]]},"517":{"position":[[7,12]]}}}],["post",{"_index":61,"t":{"117":{"position":[[4,4]]},"123":{"position":[[4,4]]},"125":{"position":[[2,5]]},"127":{"position":[[4,4]]},"131":{"position":[[4,4]]},"133":{"position":[[3,5]]},"135":{"position":[[4,4]]},"137":{"position":[[2,5]]},"139":{"position":[[2,5]]},"141":{"position":[[4,4]]},"143":{"position":[[2,5]]},"145":{"position":[[4,4]]},"147":{"position":[[4,4]]},"149":{"position":[[4,4]]},"151":{"position":[[2,5]]},"153":{"position":[[4,4]]},"155":{"position":[[4,4]]},"157":{"position":[[4,4]]},"159":{"position":[[4,4]]},"161":{"position":[[4,4]]},"163":{"position":[[4,4]]},"165":{"position":[[4,4]]},"167":{"position":[[4,4]]},"169":{"position":[[4,4]]},"171":{"position":[[2,5]]},"173":{"position":[[4,4]]},"175":{"position":[[4,4]]},"177":{"position":[[4,4]]},"179":{"position":[[2,5]]},"181":{"position":[[4,4]]},"183":{"position":[[4,4]]},"185":{"position":[[4,4]]},"187":{"position":[[4,4]]},"189":{"position":[[2,5]]},"191":{"position":[[3,5]]},"193":{"position":[[3,5]]},"195":{"position":[[4,4]]},"197":{"position":[[3,5]]},"199":{"position":[[2,5]]},"201":{"position":[[4,4]]},"203":{"position":[[3,5]]},"205":{"position":[[3,5]]},"207":{"position":[[4,4]]},"209":{"position":[[3,5]]},"211":{"position":[[3,5]]},"213":{"position":[[3,5]]},"215":{"position":[[4,4]]},"217":{"position":[[3,5]]},"219":{"position":[[4,4]]},"221":{"position":[[2,5]]},"223":{"position":[[4,4]]},"225":{"position":[[2,5]]},"227":{"position":[[4,4]]},"229":{"position":[[4,4]]},"231":{"position":[[2,5]]},"233":{"position":[[4,4]]},"235":{"position":[[2,5]]},"237":{"position":[[4,4]]},"239":{"position":[[2,5]]},"241":{"position":[[4,4]]},"243":{"position":[[3,5]]},"245":{"position":[[3,5]]},"247":{"position":[[2,5]]},"249":{"position":[[2,5]]},"251":{"position":[[2,5]]},"253":{"position":[[4,4]]},"255":{"position":[[4,4]]},"257":{"position":[[2,5]]},"259":{"position":[[2,5]]},"261":{"position":[[4,4]]},"263":{"position":[[4,4]]},"265":{"position":[[2,5]]},"267":{"position":[[4,4]]},"269":{"position":[[4,4]]},"271":{"position":[[3,5]]},"273":{"position":[[3,5]]},"275":{"position":[[2,5]]},"277":{"position":[[2,5]]},"279":{"position":[[3,5]]},"281":{"position":[[3,5]]},"283":{"position":[[3,5]]},"285":{"position":[[3,5]]},"287":{"position":[[2,5]]},"289":{"position":[[4,4]]},"291":{"position":[[2,5]]},"293":{"position":[[4,4]]},"295":{"position":[[2,5]]},"297":{"position":[[4,4]]},"299":{"position":[[4,4]]},"301":{"position":[[4,4]]},"303":{"position":[[4,4]]},"305":{"position":[[4,4]]},"307":{"position":[[4,4]]},"309":{"position":[[4,4]]},"311":{"position":[[4,4]]},"313":{"position":[[2,5]]},"315":{"position":[[4,4]]},"317":{"position":[[2,5]]},"319":{"position":[[2,5]]},"321":{"position":[[4,4]]},"323":{"position":[[2,5]]},"325":{"position":[[4,4]]},"327":{"position":[[3,5]]},"329":{"position":[[3,5]]},"331":{"position":[[4,4]]},"333":{"position":[[2,5]]},"335":{"position":[[2,5]]},"337":{"position":[[4,4]]},"339":{"position":[[4,4]]},"341":{"position":[[3,5]]},"343":{"position":[[4,4]]},"345":{"position":[[3,5]]},"347":{"position":[[2,5]]},"349":{"position":[[4,4]]},"351":{"position":[[4,4]]},"353":{"position":[[2,5]]},"355":{"position":[[4,4]]},"357":{"position":[[2,5]]},"359":{"position":[[4,4]]},"361":{"position":[[4,4]]},"363":{"position":[[2,5]]},"365":{"position":[[2,5]]},"367":{"position":[[4,4]]},"369":{"position":[[2,5]]},"371":{"position":[[4,4]]},"373":{"position":[[2,5]]},"375":{"position":[[4,4]]},"377":{"position":[[2,5]]},"379":{"position":[[4,4]]},"381":{"position":[[2,5]]},"383":{"position":[[4,4]]},"385":{"position":[[4,4]]},"387":{"position":[[4,4]]},"389":{"position":[[4,4]]},"391":{"position":[[4,4]]},"393":{"position":[[4,4]]},"395":{"position":[[4,4]]},"397":{"position":[[4,4]]},"399":{"position":[[4,4]]},"401":{"position":[[4,4]]},"403":{"position":[[4,4]]},"405":{"position":[[4,4]]},"407":{"position":[[4,4]]},"409":{"position":[[4,4]]},"411":{"position":[[4,4]]},"413":{"position":[[4,4]]},"415":{"position":[[4,4]]},"417":{"position":[[4,4]]},"419":{"position":[[4,4]]},"421":{"position":[[4,4]]},"423":{"position":[[4,4]]},"425":{"position":[[4,4]]},"427":{"position":[[4,4]]},"429":{"position":[[4,4]]},"431":{"position":[[4,4]]},"433":{"position":[[4,4]]},"435":{"position":[[4,4]]},"437":{"position":[[4,4]]},"439":{"position":[[4,4]]},"441":{"position":[[4,4]]},"443":{"position":[[4,4]]},"445":{"position":[[4,4]]},"447":{"position":[[4,4]]},"449":{"position":[[4,4]]},"451":{"position":[[4,4]]},"453":{"position":[[4,4]]},"455":{"position":[[4,4]]},"457":{"position":[[4,4]]},"459":{"position":[[4,4]]},"461":{"position":[[4,4]]},"463":{"position":[[4,4]]},"465":{"position":[[4,4]]},"467":{"position":[[4,4]]},"469":{"position":[[4,4]]},"471":{"position":[[4,4]]},"473":{"position":[[4,4]]},"475":{"position":[[4,4]]},"477":{"position":[[4,4]]},"479":{"position":[[4,4]]},"481":{"position":[[4,4]]},"483":{"position":[[4,4]]},"487":{"position":[[4,4]]},"489":{"position":[[4,4]]},"557":{"position":[[4,4]]}}}],["preload",{"_index":87,"t":{"171":{"position":[[28,8]]},"355":{"position":[[21,9]]},"515":{"position":[[7,7]]}}}],["progress",{"_index":88,"t":{"173":{"position":[[29,9]]},"175":{"position":[[29,8]]},"361":{"position":[[21,9]]},"363":{"position":[[20,10]]},"519":{"position":[[7,8]]}}}],["server",{"_index":165,"t":{"547":{"position":[[25,6]]}}}],["servic",{"_index":171,"t":{"559":{"position":[[13,7]]}}}],["setup",{"_index":168,"t":{"551":{"position":[[7,5]]},"553":{"position":[[7,5]]}}}],["sidebar",{"_index":153,"t":{"365":{"position":[[20,9]]},"565":{"position":[[7,7]]}}}],["sidemod",{"_index":89,"t":{"177":{"position":[[29,10]]}}}],["sort",{"_index":82,"t":{"155":{"position":[[34,8]]}}}],["spinner",{"_index":90,"t":{"179":{"position":[[28,8]]}}}],["start",{"_index":163,"t":{"545":{"position":[[8,7]]},"547":{"position":[[8,7]]},"549":{"position":[[8,7]]}}}],["starter",{"_index":92,"t":{"183":{"position":[[29,7]]},"207":{"position":[[38,7]]}}}],["switch",{"_index":154,"t":{"369":{"position":[[20,8]]},"539":{"position":[[7,6]]}}}],["tab",{"_index":91,"t":{"181":{"position":[[29,5]]},"367":{"position":[[21,6]]},"521":{"position":[[7,4]]}}}],["tag",{"_index":62,"t":{"117":{"position":[[9,6]]},"121":{"position":[[0,4]]},"123":{"position":[[9,6]]},"125":{"position":[[8,6]]},"127":{"position":[[9,6]]},"131":{"position":[[9,6]]},"133":{"position":[[9,6]]},"135":{"position":[[9,6]]},"137":{"position":[[8,6]]},"139":{"position":[[8,6]]},"141":{"position":[[9,6]]},"143":{"position":[[8,6]]},"145":{"position":[[9,6]]},"147":{"position":[[9,6]]},"149":{"position":[[9,6]]},"151":{"position":[[8,6]]},"153":{"position":[[9,6]]},"155":{"position":[[9,6]]},"157":{"position":[[9,6]]},"159":{"position":[[9,6]]},"161":{"position":[[9,6]]},"163":{"position":[[9,6]]},"165":{"position":[[9,6]]},"167":{"position":[[9,6]]},"169":{"position":[[9,6]]},"171":{"position":[[8,6]]},"173":{"position":[[9,6]]},"175":{"position":[[9,6]]},"177":{"position":[[9,6]]},"179":{"position":[[8,6]]},"181":{"position":[[9,6]]},"183":{"position":[[9,6]]},"185":{"position":[[9,6]]},"187":{"position":[[9,6]]},"189":{"position":[[8,6]]},"191":{"position":[[9,6]]},"193":{"position":[[9,6]]},"195":{"position":[[9,6]]},"197":{"position":[[9,6]]},"199":{"position":[[8,6]]},"201":{"position":[[9,6]]},"203":{"position":[[9,6]]},"205":{"position":[[9,6]]},"207":{"position":[[9,6]]},"209":{"position":[[9,6]]},"211":{"position":[[9,6]]},"213":{"position":[[9,6]]},"215":{"position":[[9,6]]},"217":{"position":[[9,6]]},"219":{"position":[[9,6]]},"221":{"position":[[8,6]]},"223":{"position":[[9,6]]},"225":{"position":[[8,6]]},"227":{"position":[[9,6]]},"229":{"position":[[9,6]]},"231":{"position":[[8,6]]},"233":{"position":[[9,6]]},"235":{"position":[[8,6]]},"237":{"position":[[9,6]]},"239":{"position":[[8,6]]},"241":{"position":[[9,6]]},"243":{"position":[[9,6]]},"245":{"position":[[9,6]]},"247":{"position":[[8,6]]},"249":{"position":[[8,6]]},"251":{"position":[[8,6]]},"253":{"position":[[9,6]]},"255":{"position":[[9,6]]},"257":{"position":[[8,6]]},"259":{"position":[[8,6]]},"261":{"position":[[9,6]]},"263":{"position":[[9,6]]},"265":{"position":[[8,6]]},"267":{"position":[[9,6]]},"269":{"position":[[9,6]]},"271":{"position":[[9,6]]},"273":{"position":[[9,6]]},"275":{"position":[[8,6]]},"277":{"position":[[8,6]]},"279":{"position":[[9,6]]},"281":{"position":[[9,6]]},"283":{"position":[[9,6]]},"285":{"position":[[9,6]]},"287":{"position":[[8,6]]},"289":{"position":[[9,6]]},"291":{"position":[[8,6]]},"293":{"position":[[9,6]]},"295":{"position":[[8,6]]},"297":{"position":[[9,6]]},"299":{"position":[[9,6]]},"301":{"position":[[9,6]]},"303":{"position":[[9,6]]},"305":{"position":[[9,6]]},"307":{"position":[[9,6]]},"309":{"position":[[9,6]]},"311":{"position":[[9,6]]},"313":{"position":[[8,6]]},"315":{"position":[[9,6]]},"317":{"position":[[8,6]]},"319":{"position":[[8,6]]},"321":{"position":[[9,6]]},"323":{"position":[[8,6]]},"325":{"position":[[9,6]]},"327":{"position":[[9,6]]},"329":{"position":[[9,6]]},"331":{"position":[[9,6]]},"333":{"position":[[8,6]]},"335":{"position":[[8,6]]},"337":{"position":[[9,6]]},"339":{"position":[[9,6]]},"341":{"position":[[9,6]]},"343":{"position":[[9,6]]},"345":{"position":[[9,6]]},"347":{"position":[[8,6]]},"349":{"position":[[9,6]]},"351":{"position":[[9,6]]},"353":{"position":[[8,6]]},"355":{"position":[[9,6]]},"357":{"position":[[8,6]]},"359":{"position":[[9,6]]},"361":{"position":[[9,6]]},"363":{"position":[[8,6]]},"365":{"position":[[8,6]]},"367":{"position":[[9,6]]},"369":{"position":[[8,6]]},"371":{"position":[[9,6]]},"373":{"position":[[8,6]]},"375":{"position":[[9,6]]},"377":{"position":[[8,6]]},"379":{"position":[[9,6]]},"381":{"position":[[8,6]]},"383":{"position":[[9,6]]},"385":{"position":[[9,6]]},"387":{"position":[[9,6]]},"389":{"position":[[9,6]]},"391":{"position":[[9,6]]},"393":{"position":[[9,6]]},"395":{"position":[[9,6]]},"397":{"position":[[9,6]]},"399":{"position":[[9,6]]},"401":{"position":[[9,6]]},"403":{"position":[[9,6]]},"405":{"position":[[9,6]]},"407":{"position":[[9,6]]},"409":{"position":[[9,6]]},"411":{"position":[[9,6]]},"413":{"position":[[9,6]]},"415":{"position":[[9,6]]},"417":{"position":[[9,6]]},"419":{"position":[[9,6]]},"421":{"position":[[9,6]]},"423":{"position":[[9,6]]},"425":{"position":[[9,6]]},"427":{"position":[[9,6]]},"429":{"position":[[9,6]]},"431":{"position":[[9,6]]},"433":{"position":[[9,6]]},"435":{"position":[[9,6]]},"437":{"position":[[9,6]]},"439":{"position":[[9,6]]},"441":{"position":[[9,6]]},"443":{"position":[[9,6]]},"445":{"position":[[9,6]]},"447":{"position":[[9,6]]},"449":{"position":[[9,6]]},"451":{"position":[[9,6]]},"453":{"position":[[9,6]]},"455":{"position":[[9,6]]},"457":{"position":[[9,6]]},"459":{"position":[[9,6]]},"461":{"position":[[9,6]]},"463":{"position":[[9,6]]},"465":{"position":[[9,6]]},"467":{"position":[[9,6]]},"469":{"position":[[9,6]]},"471":{"position":[[9,6]]},"473":{"position":[[9,6]]},"475":{"position":[[9,6]]},"477":{"position":[[9,6]]},"479":{"position":[[9,6]]},"481":{"position":[[9,6]]},"483":{"position":[[9,6]]},"487":{"position":[[9,6]]},"489":{"position":[[9,6]]},"557":{"position":[[9,6]]}}}],["templat",{"_index":93,"t":{"183":{"position":[[37,10]]},"185":{"position":[[29,10]]},"207":{"position":[[46,10]]}}}],["time",{"_index":169,"t":{"555":{"position":[[7,4]]}}}],["timeinput",{"_index":156,"t":{"373":{"position":[[20,11]]}}}],["timepick",{"_index":155,"t":{"371":{"position":[[21,12]]}}}],["toast",{"_index":94,"t":{"187":{"position":[[29,6]]},"189":{"position":[[28,7]]},"375":{"position":[[21,7]]},"377":{"position":[[20,8]]},"525":{"position":[[7,6]]}}}],["toastservic",{"_index":157,"t":{"379":{"position":[[21,14]]}}}],["tooltip",{"_index":158,"t":{"381":{"position":[[20,9]]},"523":{"position":[[7,8]]}}}],["v0.0.1",{"_index":6,"t":{"3":{"position":[[16,6]]},"385":{"position":[[21,8]]}}}],["v0.0.2",{"_index":9,"t":{"9":{"position":[[16,6]]},"383":{"position":[[21,8]]}}}],["v0.0.3",{"_index":7,"t":{"5":{"position":[[16,6]]},"387":{"position":[[21,8]]}}}],["v0.0.4",{"_index":8,"t":{"7":{"position":[[16,6]]},"389":{"position":[[21,8]]}}}],["v0.1.0",{"_index":11,"t":{"13":{"position":[[16,6]]},"393":{"position":[[21,8]]}}}],["v0.1.1",{"_index":10,"t":{"11":{"position":[[16,6]]},"391":{"position":[[21,8]]}}}],["v0.2.0",{"_index":12,"t":{"15":{"position":[[16,6]]},"395":{"position":[[21,8]]}}}],["v0.2.1",{"_index":15,"t":{"21":{"position":[[16,6]]},"397":{"position":[[21,8]]}}}],["v0.2.2",{"_index":13,"t":{"17":{"position":[[16,6]]},"399":{"position":[[21,8]]}}}],["v0.2.3",{"_index":14,"t":{"19":{"position":[[16,6]]},"401":{"position":[[21,8]]}}}],["v0.2.4",{"_index":16,"t":{"23":{"position":[[16,6]]},"403":{"position":[[21,8]]}}}],["v0.2.5",{"_index":17,"t":{"25":{"position":[[16,6]]},"409":{"position":[[21,8]]}}}],["v0.2.6",{"_index":18,"t":{"27":{"position":[[16,6]]},"407":{"position":[[21,8]]}}}],["v0.3.0",{"_index":19,"t":{"29":{"position":[[16,6]]},"405":{"position":[[21,8]]}}}],["v0.4.0",{"_index":20,"t":{"31":{"position":[[16,6]]},"411":{"position":[[21,8]]}}}],["v0.4.1",{"_index":21,"t":{"33":{"position":[[16,6]]},"413":{"position":[[21,8]]}}}],["v0.4.2",{"_index":22,"t":{"35":{"position":[[16,6]]},"415":{"position":[[21,8]]}}}],["v0.5.0",{"_index":23,"t":{"37":{"position":[[16,6]]},"417":{"position":[[21,8]]}}}],["v0.5.1",{"_index":24,"t":{"39":{"position":[[17,6]]},"419":{"position":[[21,8]]}}}],["v0.6.0",{"_index":25,"t":{"41":{"position":[[17,6]]},"425":{"position":[[21,8]]}}}],["v1.0.0",{"_index":27,"t":{"45":{"position":[[17,6]]},"421":{"position":[[21,8]]}}}],["v1.0.1",{"_index":26,"t":{"43":{"position":[[17,6]]},"427":{"position":[[21,8]]}}}],["v1.1.0",{"_index":28,"t":{"47":{"position":[[17,6]]},"423":{"position":[[21,8]]}}}],["v1.10.0",{"_index":54,"t":{"99":{"position":[[17,7]]},"429":{"position":[[21,9]]}}}],["v1.10.1",{"_index":55,"t":{"101":{"position":[[17,7]]},"431":{"position":[[21,9]]}}}],["v1.10.2",{"_index":56,"t":{"103":{"position":[[17,7]]},"433":{"position":[[21,9]]}}}],["v1.10.3",{"_index":57,"t":{"105":{"position":[[17,7]]},"435":{"position":[[21,9]]}}}],["v1.10.4",{"_index":59,"t":{"109":{"position":[[17,7]]},"437":{"position":[[21,9]]}}}],["v1.2.0",{"_index":29,"t":{"49":{"position":[[17,6]]},"439":{"position":[[21,8]]}}}],["v1.3.0",{"_index":30,"t":{"51":{"position":[[17,6]]},"441":{"position":[[21,8]]}}}],["v1.3.1",{"_index":33,"t":{"57":{"position":[[17,6]]},"443":{"position":[[21,8]]}}}],["v1.4.0",{"_index":31,"t":{"53":{"position":[[17,6]]},"445":{"position":[[21,8]]}}}],["v1.4.1",{"_index":34,"t":{"59":{"position":[[17,6]]},"447":{"position":[[21,8]]}}}],["v1.4.2",{"_index":32,"t":{"55":{"position":[[17,6]]},"453":{"position":[[21,8]]}}}],["v1.4.3",{"_index":36,"t":{"63":{"position":[[17,6]]},"451":{"position":[[21,8]]}}}],["v1.4.4",{"_index":35,"t":{"61":{"position":[[17,6]]},"449":{"position":[[21,8]]}}}],["v1.4.5",{"_index":37,"t":{"65":{"position":[[17,6]]},"455":{"position":[[21,8]]}}}],["v1.5.0",{"_index":38,"t":{"67":{"position":[[17,6]]},"457":{"position":[[21,8]]}}}],["v1.6.0",{"_index":39,"t":{"69":{"position":[[17,6]]},"459":{"position":[[21,8]]}}}],["v1.7.0",{"_index":40,"t":{"71":{"position":[[17,6]]},"461":{"position":[[21,8]]}}}],["v1.7.1",{"_index":41,"t":{"73":{"position":[[17,6]]},"467":{"position":[[21,8]]}}}],["v1.7.2",{"_index":42,"t":{"75":{"position":[[17,6]]},"463":{"position":[[21,8]]}}}],["v1.7.3",{"_index":45,"t":{"81":{"position":[[17,6]]},"469":{"position":[[21,8]]}}}],["v1.8.0",{"_index":44,"t":{"79":{"position":[[17,6]]},"465":{"position":[[21,8]]}}}],["v1.8.1",{"_index":43,"t":{"77":{"position":[[17,6]]},"477":{"position":[[21,8]]}}}],["v1.8.2",{"_index":46,"t":{"83":{"position":[[17,6]]},"475":{"position":[[21,8]]}}}],["v1.8.3",{"_index":47,"t":{"85":{"position":[[17,6]]},"489":{"position":[[21,8]]}}}],["v1.9.0",{"_index":48,"t":{"87":{"position":[[17,6]]},"483":{"position":[[21,8]]}}}],["v1.9.1",{"_index":49,"t":{"89":{"position":[[17,6]]},"471":{"position":[[21,8]]}}}],["v1.9.2",{"_index":51,"t":{"93":{"position":[[17,6]]},"473":{"position":[[21,8]]}}}],["v1.9.3",{"_index":50,"t":{"91":{"position":[[17,6]]},"487":{"position":[[21,8]]}}}],["v1.9.4",{"_index":53,"t":{"97":{"position":[[17,6]]},"479":{"position":[[21,8]]}}}],["v1.9.5",{"_index":52,"t":{"95":{"position":[[17,6]]},"481":{"position":[[21,8]]}}}],["webassembl",{"_index":164,"t":{"545":{"position":[[25,11]]},"551":{"position":[[22,11]]},"553":{"position":[[22,11]]}}}]],"pipeline":["stemmer"]}},{"documents":[],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[],"invertedIndex":[],"pipeline":["stemmer"]}},{"documents":[{"i":2,"t":"Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog","h":"","p":1},{"i":4,"t":"BlazorBootstrap v0.0.1 November 23, 2021 · One min read Vikram Reddy Creator Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers. New Components​ Alert Button Icon Modals Offcanvas Tooltip Tags: v0.0.1 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.0.2","s":"BlazorBootstrap v0.0.1","u":"/blog/2021/11/23/blazorbootstrap-0.0.1","h":"","p":3},{"i":6,"t":"BlazorBootstrap v0.0.3 December 8, 2021 · One min read Vikram Reddy Creator In this release, we added the Toasts component and improved documentation. New Component​ Toasts Tags: v0.0.3 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.0.4 Older Post BlazorBootstrap v0.0.2","s":"BlazorBootstrap v0.0.3","u":"/blog/2021/12/08/blazorbootstrap-0.0.3","h":"","p":5},{"i":8,"t":"BlazorBootstrap v0.0.4 December 12, 2021 · One min read Vikram Reddy Creator Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release. Changelog​ Code improvements Documentation updates Breaking changes​ Modal​ Callback events renamed Showing -> OnShowing Shown -> OnShown Hiding -> OnHiding Hidden -> OnHidden HidePrevented -> OnHidePrevented Offcanvas​ Callback events renamed Showing -> OnShowing Shown -> OnShown Hiding -> OnHiding Hidden -> OnHidden Tooltip​ Parameters renamed TooltipTitle -> Title TooltipPlacement -> Placement Docs update​ For the below components, documentation is updated. Alerts Buttons Icons Modal Offcanvas Toasts Tooltips Tags: v0.0.4 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.1.0 Older Post BlazorBootstrap v0.0.3","s":"BlazorBootstrap v0.0.4","u":"/blog/2021/12/12/blazorbootstrap-0.0.4","h":"","p":7},{"i":10,"t":"BlazorBootstrap v0.0.2 November 27, 2021 · One min read Vikram Reddy Creator In this release, our focus was more on documenting the individual components. Initial documentation is available for the below components: Alert Button Icon Modal Offcanvas Tooltip Tags: v0.0.2 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.0.3 Older Post BlazorBootstrap v0.0.1","s":"BlazorBootstrap v0.0.2","u":"/blog/2021/11/27/blazorbootstrap-0.0.2","h":"","p":9},{"i":12,"t":"BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Component changes​ Alert Parameter renamed from Dismisable to Dismissable Docs update Demos update Demo Website​ https://demos.getblazorbootstrap.com/ Tags: v0.1.1 blazorbootstrap alert Edit this page Newer Post BlazorBootstrap v0.2.0 Older Post BlazorBootstrap v0.1.0","s":"BlazorBootstrap v0.1.1","u":"/blog/2021/12/21/blazorbootstrap-0.1.1","h":"","p":11},{"i":14,"t":"BlazorBootstrap v0.1.0 December 20, 2021 · One min read Vikram Reddy Creator We are excited to release 0.1.0 with lots of updates. Major changes​ .NET 6 upgrade New components added Demo website created Four New Comoponents​ Preload Breadcrumb Confirm Dialog Callout Demo Website​ We are happy to share the demo website link. https://demos.getblazorbootstrap.com/ Tags: v0.1.0 blazorbootstrap Edit this page Newer Post BlazorBootstrap v0.1.1 Older Post BlazorBootstrap v0.0.4","s":"BlazorBootstrap v0.1.0","u":"/blog/2021/12/20/blazorbootstrap-0.1.0","h":"","p":13},{"i":16,"t":"BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Major changes​ Modal component enhancements Offcanvas enhancements Demo website updates Two New Comoponents​ Grid Pagination Links​ Demo Website Modals Offcanvas Grid Pagination Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Edit this page Newer Post BlazorBootstrap v0.2.1 Older Post BlazorBootstrap v0.1.1","s":"BlazorBootstrap v0.2.0","u":"/blog/2022/01/15/blazorbootstrap-0.2.0","h":"","p":15},{"i":18,"t":"BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Updates​ New Placeholders component .NET version upgrade from v6.0.1 to v6.0.3 Links​ Demo Website Placeholders Component Tags: v0.2.2 blazorbootstrap placeholders Edit this page Newer Post BlazorBootstrap v0.2.3 Older Post BlazorBootstrap v0.2.1","s":"BlazorBootstrap v0.2.2","u":"/blog/2022/03/15/blazorbootstrap-0.2.2","h":"","p":17},{"i":20,"t":"BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Updates​ New Tabs component Other improvements Links​ Demo Website Tabs Component Tags: v0.2.3 blazorbootstrap placeholders Edit this page Newer Post BlazorBootstrap v0.2.4 Older Post BlazorBootstrap v0.2.2","s":"BlazorBootstrap v0.2.3","u":"/blog/2022/04/30/blazorbootstrap-0.2.3","h":"","p":19},{"i":22,"t":"BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Minor Updates​ Toasts component UI alignment fix Confirm Dialog component docs update Bootstrap Icons updated to v1.8.0 Links​ Demo Website Confirm Dialog Icons Toasts Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Edit this page Newer Post BlazorBootstrap v0.2.2 Older Post BlazorBootstrap v0.2.0","s":"BlazorBootstrap v0.2.1","u":"/blog/2022/02/27/blazorbootstrap-0.2.1","h":"","p":21},{"i":24,"t":"BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Updates​ Alert component bug fixes Docs enhancement Links​ Demo Website Alert Component Tags: v0.2.4 blazorbootstrap placeholders Edit this page Newer Post BlazorBootstrap v0.2.5 Older Post BlazorBootstrap v0.2.3","s":"BlazorBootstrap v0.2.4","u":"/blog/2022/06/19/blazorbootstrap-0.2.4","h":"","p":23},{"i":26,"t":"BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Updates​ Offcanvas component bug fix Modal component bug fix Docs enhancement Links​ Demo Website Offcanvas Component Modal Component Tags: v0.2.5 blazorbootstrap offcanvas modal Edit this page Newer Post BlazorBootstrap v0.2.6 Older Post BlazorBootstrap v0.2.4","s":"BlazorBootstrap v0.2.5","u":"/blog/2022/07/28/blazorbootstrap-0.2.5","h":"","p":25},{"i":28,"t":"BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Updates​ Bootstrap Icons v1.9.1 support Buttons component enhancements Docs enhancement Links​ Demo Website Icons Button Component Tags: v0.2.6 blazorbootstrap button Edit this page Newer Post BlazorBootstrap v0.3.0 Older Post BlazorBootstrap v0.2.5","s":"BlazorBootstrap v0.2.6","u":"/blog/2022/08/13/blazorbootstrap-0.2.6","h":"","p":27},{"i":30,"t":"BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Updates​ Grid component enhancements Grid component enhancements​ Multiple columns filtering (client side and server side) Set default filtering Disable specific column filter Increase filter textbox width Set default sorting Disable specific column sorting Header text alignment Cell alignment Cell formatting Cell nowrap Pagination alignment Empty data Responsive grid with horizontal scrolling Links​ Demo Website Grid Demos Grid Component Documentation Tags: v0.3.0 blazorbootstrap grid Edit this page Newer Post BlazorBootstrap v0.4.0 Older Post BlazorBootstrap v0.2.6","s":"BlazorBootstrap v0.3.0","u":"/blog/2022/08/31/blazorbootstrap-0.3.0","h":"","p":29},{"i":32,"t":"BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. New Components​ AutoComplete component AutoComplete component features​ Client side data filtering Server side data filtering Validations Links​ Demo Website Blazor AutoComplete Component Demos Blazor AutoComplete Component Documentation Tags: v0.4.0 blazorbootstrap autocomplete docs Edit this page Newer Post BlazorBootstrap v0.4.1 Older Post BlazorBootstrap v0.3.0","s":"BlazorBootstrap v0.4.0","u":"/blog/2022/09/04/blazorbootstrap-0.4.0","h":"","p":31},{"i":34,"t":"BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Enhancements​ AutoComplete component Callout component Grid component AutoComplete enhancements​ StringComparison support StringFilterOperator support Callout enhancements​ The default heading and default icon are displayed based on the callout type. Change the callout header according to your context. Callout breaking changes​ Renamed enum CalloutColor to CalloutType Renamed parameter Color to Type Grid enhancements​ StringComparison support Links​ Demo Website Blazor AutoComplete Component Documentation Blazor Callout Component Documentation Blazor Grid Component Documentation Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Edit this page Newer Post BlazorBootstrap v0.4.2 Older Post BlazorBootstrap v0.4.0","s":"BlazorBootstrap v0.4.1","u":"/blog/2022/09/12/blazorbootstrap-0.4.1","h":"","p":33},{"i":36,"t":"BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete Edit this page Newer Post BlazorBootstrap v0.5.0 Older Post BlazorBootstrap v0.4.1","s":"BlazorBootstrap v0.4.2","u":"/blog/2022/09/17/blazorbootstrap-0.4.2","h":"","p":35},{"i":38,"t":"BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. New blazor chart components​ Blazor Bar Chart component Blazor Doughnut Chart component Blazor Line Chart component Blazor Pie Chart component Links​ Demo Website Blazor Bar Chart Component Documentation Blazor Doughnut Chart Component Documentation Blazor Line Chart Component Documentation Blazor Pie Chart Component Documentation Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Edit this page Newer Post Blazor Bootstrap v0.5.1 Older Post BlazorBootstrap v0.4.2","s":"BlazorBootstrap v0.5.0","u":"/blog/2022/10/16/blazorbootstrap-0.5.0","h":"","p":37},{"i":40,"t":"Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Grid Enhancements​ Support for save/load Grid state. The state includes the page number, page size, and filters. Performance improvements by removing unnecessary conversions Links​ Demo Website Blazor Grid Component Documentation Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Edit this page Newer Post Blazor Bootstrap v0.6.0 Older Post BlazorBootstrap v0.5.0","s":"Blazor Bootstrap v0.5.1","u":"/blog/2022/10/22/blazorbootstrap-0.5.1","h":"","p":39},{"i":42,"t":"Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. New Components​ Progress component Progress component features​ Labels Backgrounds Multiple bars Striped Animated stripes Toasts component features​ Toasts with/without title Auto hide Placement Stack Length Links​ Demo Website Blazor Progress Component Documentation Blazor Toasts Component Documentation Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Edit this page Newer Post Blazor Bootstrap v1.0.0 Older Post Blazor Bootstrap v0.5.1","s":"Blazor Bootstrap v0.6.0","u":"/blog/2022/10/30/blazorbootstrap-0.6.0","h":"","p":41},{"i":44,"t":"Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! What's changed​ Confirmation Dialog component enhancements Offcanvas component enhancements Demos site examples​ New examples for 'Blazor Confirm Dialog Component' New examples for 'Blazor Offcanvas Component' New examples for 'Blazor Preload Component' SEO Updates Links​ Demo Website Blazor Confirm Dialog Component Documentation Blazor Offcanvas Component Documentation Blazor Preload Component Documentation Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Edit this page Newer Post Blazor Bootstrap v1.1.0 Older Post Blazor Bootstrap v1.0.0","s":"Blazor Bootstrap v1.0.1","u":"/blog/2022/11/22/blazorbootstrap-1.0.1","h":"","p":43},{"i":46,"t":"Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! New Components​ NumberInput component Blazor NumberInput component features​ Generic type support Enable min and max Step Text alignment Allow negative numbers Disable Validations Events: ValueChanged Blazor Tabs component features​ Fade effect Title with Icon Disable Tab Pills Activate individual tabs Events Demos site enhancements​ Brand new landing page The demo example and source code are split into two tabs for easy access. Links​ Demo Website Blazor NumberInput Component Documentation Blazor Tabs Component Documentation Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Edit this page Newer Post Blazor Bootstrap v1.0.1 Older Post Blazor Bootstrap v0.6.0","s":"Blazor Bootstrap v1.0.0","u":"/blog/2022/11/18/blazorbootstrap-1.0.0","h":"","p":45},{"i":48,"t":"Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component What's changed​ New ToastService ConfirmDialog component enhancements PreloadService enhancements Icon component enhancements Demos site examples​ New examples for 'Blazor ToastService' New examples for 'Blazor Confirm Dialog Component' New examples for 'Blazor Preload Component' New examples for 'Blazor Icon Component' Links​ Demo Website Blazor Toasts Component Documentation Blazor Confirm Dialog Component Documentation Blazor Preload Component Documentation Blazor Icon Component Documentation Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Edit this page Newer Post Blazor Bootstrap v1.2.0 Older Post Blazor Bootstrap v1.0.1","s":"Blazor Bootstrap v1.1.0","u":"/blog/2022/11/28/blazorbootstrap-1.1.0","h":"","p":47},{"i":50,"t":"Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component What's changed​ New CurrencyInput component Demos site updates​ New examples for 'Blazor CurrencyInput Component' New examples for 'Blazor Confirm Dialog Component' Links​ Demo Website - Blazor WebAssembly Demo Website - Blazor Server Blazor CurrencyInput Documentation Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Edit this page Newer Post Blazor Bootstrap v1.3.0 Older Post Blazor Bootstrap v1.1.0","s":"Blazor Bootstrap v1.2.0","u":"/blog/2022/12/12/blazorbootstrap-1.2.0","h":"","p":49},{"i":52,"t":"Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component What's changed​ New Switch component Demos site updates​ New examples for 'Blazor Switch Component' Updates to 'Blazor Auto Complete Component' examples Links​ Demo Website - Blazor WebAssembly Demo Website - Blazor Server Blazor Switch Documentation Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Edit this page Newer Post Blazor Bootstrap v1.3.1 Older Post Blazor Bootstrap v1.2.0","s":"Blazor Bootstrap v1.3.0","u":"/blog/2022/12/15/blazorbootstrap-1.3.0","h":"","p":51},{"i":54,"t":"Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component What's changed​ Sidebar component Demos site updates​ New examples for 'Blazor Sidebar Component' Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Sidebar Documentation Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Edit this page Newer Post Blazor Bootstrap v1.4.1 Older Post Blazor Bootstrap v1.3.1","s":"Blazor Bootstrap v1.4.0","u":"/blog/2023/01/15/blazorbootstrap-1.4.0","h":"","p":53},{"i":56,"t":"Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates What's changed​ Auto Complete component Bug fix Starter Templates​ Blazor Bootstrap: Blazor WebAssembly Template Blazor Bootstrap: Blazor WebAssembly Empty Template Blazor Bootstrap: Blazor Server Template Blazor Bootstrap: Blazor Server Empty Template Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Auto Complete Documentation Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Edit this page Newer Post Blazor Bootstrap v1.4.3 Older Post Blazor Bootstrap v1.4.1","s":"Blazor Bootstrap v1.4.2","u":"/blog/2023/01/30/blazorbootstrap-1.4.2","h":"","p":55},{"i":58,"t":"Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component What's changed​ AutoComplete component - keyboard navigation support AutoComplete component - CancellationToken support Demos site updates​ New examples for 'Blazor AutoComplete Component' Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor AutoComplete Documentation Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Edit this page Newer Post Blazor Bootstrap v1.4.0 Older Post Blazor Bootstrap v1.3.0","s":"Blazor Bootstrap v1.3.1","u":"/blog/2022/12/18/blazorbootstrap-1.3.1","h":"","p":57},{"i":60,"t":"Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component What's changed​ Modal component Render different components dynamically within the modal without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. Pass event callbacks to a dynamic component. Demos site updates​ New examples for Blazor Modal Component New examples for Blazor Confirm Dialog Component Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Modal Documentation Blazor Confirm Dialog Documentation Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Edit this page Newer Post Blazor Bootstrap v1.4.2 Older Post Blazor Bootstrap v1.4.0","s":"Blazor Bootstrap v1.4.1","u":"/blog/2023/01/23/blazorbootstrap-1.4.1","h":"","p":59},{"i":62,"t":"Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! What's changed​ Grid component Filters have 300ms timeout for the debouncing CancellationToken support for the RefreshDataAsync() method Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.4.5 Older Post Blazor Bootstrap v1.4.3","s":"Blazor Bootstrap v1.4.4","u":"/blog/2023/02/10/blazorbootstrap-1.4.4","h":"","p":61},{"i":64,"t":"Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! What's changed​ Grid component New Data parameter New ResetPageNumber() method Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.4.4 Older Post Blazor Bootstrap v1.4.2","s":"Blazor Bootstrap v1.4.3","u":"/blog/2023/02/07/blazorbootstrap-1.4.3","h":"","p":63},{"i":66,"t":"Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! What's changed​ Toasts component bug fixed Toast progress bar not working when the browser language is french Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Toasts Documentation Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Edit this page Newer Post Blazor Bootstrap v1.5.0 Older Post Blazor Bootstrap v1.4.4","s":"Blazor Bootstrap v1.4.5","u":"/blog/2023/02/23/blazorbootstrap-1.4.5","h":"","p":65},{"i":68,"t":"Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! What's new​ DateInput component Generic type: DateOnly, DateOnly?, DateTime, and DateTime? data types supported Max and Min range Disable Validations ValueChanged event What's changed​ Offcanvas component Render different components dynamically within the modal without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. Pass event callbacks to a dynamic component. Button component Dynamic tooltip support added Tooltip component Dynamic tooltip support added Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor DateInput Documentation Blazor Offcanvas Documentation Blazor Button Documentation Blazor Tooltip Documentation Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Edit this page Newer Post Blazor Bootstrap v1.6.0 Older Post Blazor Bootstrap v1.4.5","s":"Blazor Bootstrap v1.5.0","u":"/blog/2023/03/05/blazorbootstrap-1.5.0","h":"","p":67},{"i":70,"t":"Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! What's new​ TimeInput component Generic type: TimeOnly and TimeOnly? supported Max and Min range Disable Validations ValueChanged event Restrict the time field based on the entry in another field What's changed​ Grid component Conditional css class for grid row Conditional css class for grid column DateInput component Restrict the date field based on the entry in another field Modal component Modal CloseOnEscape not working - Fixed Offcanvas component Offcanvas CloseOnEscape not working #160 - Fixed Upgrade Bootstrap version from v5.1.3 to v5.2.3 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor TimeInput Documentation Blazor Grid Documentation Blazor DateInput Documentation Blazor Modal Documentation Blazor Offcanvas Documentation Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Edit this page Newer Post Blazor Bootstrap v1.7.0 Older Post Blazor Bootstrap v1.5.0","s":"Blazor Bootstrap v1.6.0","u":"/blog/2023/03/12/blazorbootstrap-1.6.0","h":"","p":69},{"i":72,"t":"Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! What's new​ Badge component Background colors Pill badges Buttons Positioned Generic indicator Collapse component Horizontal collapse Call back events: OnShowing, OnShown, OnHiding, and OnHidden Accordion component Title with Icon Flush Set default active accordion item Always open Activate individual accordion items Call back events: OnShowing, OnShown, OnHiding, and OnHidden What's changed​ Buttons component Disable and enable state dynamically #172 Documentation​ Layout setup docs Layout Setup - Blazor WebAssembly Layout Setup - Blazor Server Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Badge Documentation Blazor Collapse Documentation Blazor Accordion Documentation Blazor Buttons Documentation Layout Setup - Blazor WebAssembly Documentation Layout Setup - Blazor Server Documentation Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Edit this page Newer Post Blazor Bootstrap v1.7.1 Older Post Blazor Bootstrap v1.6.0","s":"Blazor Bootstrap v1.7.0","u":"/blog/2023/04/10/blazorbootstrap-1.7.0","h":"","p":71},{"i":74,"t":"Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! What's changed​ Auto Complete component Show Autocomplete reset button when default value set #183 Buttons component Button Disabled parameter doesn't work properly on first render in Tabs / Modal #182 CSS A CSS rule could be more targeted to not interfere with others #184 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Auto Complete Documentation Blazor Buttons Documentation Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Edit this page Newer Post Blazor Bootstrap v1.7.2 Older Post Blazor Bootstrap v1.7.0","s":"Blazor Bootstrap v1.7.1","u":"/blog/2023/04/19/blazorbootstrap-1.7.1","h":"","p":73},{"i":76,"t":"Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! What's changed​ Currency Input component CurrencyInput InvalidOperationException #192 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Currency Input Documentation Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Edit this page Newer Post Blazor Bootstrap v1.7.3 Older Post Blazor Bootstrap v1.7.1","s":"Blazor Bootstrap v1.7.2","u":"/blog/2023/04/24/blazorbootstrap-1.7.2","h":"","p":75},{"i":78,"t":"Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! What's changed​ Grid component Selection and filters both active bug #214 Tooltip component Tooltip does not disappear #213 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Blazor Offcanvas Documentation Blazor Auto Complete Documentation Blazor Currency Input Documentation Blazor Date Input Documentation Blazor Number Input Documentation Blazor Switch Documentation Blazor Time Input Documentation Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Edit this page Newer Post Blazor Bootstrap v1.8.2 Older Post Blazor Bootstrap v1.8.0","s":"Blazor Bootstrap v1.8.1","u":"/blog/2023/05/31/blazorbootstrap-1.8.1","h":"","p":77},{"i":80,"t":"Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! What's changed​ Grid component Grid Selection #179 Single selection Multiple selection Disable selection Disable all rows selection Grid Paging #196 Dynamic Page Size Page Size Selection Offcanvas component Static backdrop #210 Auto Complete component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Currency Input component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Date Input component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Number Input component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Switch component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Time Input component Disable parameter Use either the Disable parameter or use Disable() and Enable() methods to disable/enable the component. Blazor Bootstrap Templates Install with .NET CLI: dotnet new install Blazor.Bootstrap.Templates::1.8.0 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Blazor Offcanvas Documentation Blazor Auto Complete Documentation Blazor Currency Input Documentation Blazor Date Input Documentation Blazor Number Input Documentation Blazor Switch Documentation Blazor Time Input Documentation Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Edit this page Newer Post Blazor Bootstrap v1.8.1 Older Post Blazor Bootstrap v1.7.3","s":"Blazor Bootstrap v1.8.0","u":"/blog/2023/05/28/blazorbootstrap-1.8.0","h":"","p":79},{"i":82,"t":"Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! What's changed​ Button component Button - id on Button is causing Unhandled error #194 Grid component Grid calls DataProvider method after input's onchange event #195 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Buttons Documentation Blazor Grid Documentation Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.8.0 Older Post Blazor Bootstrap v1.7.2","s":"Blazor Bootstrap v1.7.3","u":"/blog/2023/04/29/blazorbootstrap-1.7.3","h":"","p":81},{"i":84,"t":"Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! What's changed​ Grid component Grid local filter with null strings #227 Grid Single Select #230 Button component Button TooltipTitle does not disappear when clicked #222 DateInput component DateInput no reaction to null #221 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Blazor Buttons Documentation Blazor Date Input Documentation Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Edit this page Newer Post Blazor Bootstrap v1.8.3 Older Post Blazor Bootstrap v1.8.1","s":"Blazor Bootstrap v1.8.2","u":"/blog/2023/06/11/blazorbootstrap-1.8.2","h":"","p":83},{"i":86,"t":"Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! What's changed​ Grid component Select all/none refresh problem #217 Progress component Progress bar grid bind problem #229 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Blazor Progress Documentation Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Edit this page Newer Post Blazor Bootstrap v1.9.0 Older Post Blazor Bootstrap v1.8.2","s":"Blazor Bootstrap v1.8.3","u":"/blog/2023/06/16/blazorbootstrap-1.8.3","h":"","p":85},{"i":88,"t":"Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! What's new​ Modal service Global service for the application What's changed​ Modal component Dynamic modal title does not work when using static content #242 Icon component New Color parameter added Toasts component ToastService.Notify method does not have AutoHide #238 Tabs component ShowTabByIndexAsync not working after OnAfterRenderAsync #243 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Modal Documentation Blazor Modal Service Documentation Blazor Icon Documentation Blazor Toasts Documentation Blazor Tabs Documentation Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Edit this page Newer Post Blazor Bootstrap v1.9.2 Older Post Blazor Bootstrap v1.8.3","s":"Blazor Bootstrap v1.9.0","u":"/blog/2023/06/30/blazorbootstrap-1.9.0","h":"","p":87},{"i":90,"t":"Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! What's changed​ Modal service Issue with new ModalService #258 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Modal Service Documentation Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Edit this page Newer Post Blazor Bootstrap v1.9.3 Older Post Blazor Bootstrap v1.9.2","s":"Blazor Bootstrap v1.9.1","u":"/blog/2023/06/31/blazorbootstrap-1.9.1","h":"","p":89},{"i":92,"t":"Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! What's changed​ Grid component New HeaderRowCssClass parameter New FiltersRowCssClass parameter Default sorting icon to indicate the column is sortable Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Documentation Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.9.4 Older Post Blazor Bootstrap v1.9.1","s":"Blazor Bootstrap v1.9.3","u":"/blog/2023/07/04/blazorbootstrap-1.9.3","h":"","p":91},{"i":94,"t":"Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! What's new​ Breadcrumb service Global service for the application What's changed​ Toast service ToastService not working anymore in version 1.9.1 #261 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Edit this page Newer Post Blazor Bootstrap v1.9.1 Older Post Blazor Bootstrap v1.9.0","s":"Blazor Bootstrap v1.9.2","u":"/blog/2023/07/01/blazorbootstrap-1.9.2","h":"","p":93},{"i":96,"t":"Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! What's changed​ Grid component New OnRowClick event New OnRowDoubleClick event Grid Component: Row Click Event #264 Grid Component - Translatable page size selector #287 TimeInput component TimeInput: Changing value does not work #271 Switch component Switch class not applied to label #235 Modal component Cannot change modal type on static modals #278 Line Chart component Multiple of the same chart causing js exception #283 Sidebar component SidebarItem without childs, CustomIconName not passed to Icon #286 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Grid Component Documentation Blazor TimeInput Component Documentation Blazor Switch Component Documentation Blazor Modal Component Documentation Blazor Line Chart Component Documentation Blazor Sidebar Component Documentation Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Edit this page Newer Post Blazor Bootstrap v1.10.0 Older Post Blazor Bootstrap v1.9.4","s":"Blazor Bootstrap v1.9.5","u":"/blog/2023/07/16/blazorbootstrap-1.9.5","h":"","p":95},{"i":98,"t":"Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! What's changed​ Modal service Blazor Modal Service problem #265 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Modal Service Documentation Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Edit this page Newer Post Blazor Bootstrap v1.9.5 Older Post Blazor Bootstrap v1.9.3","s":"Blazor Bootstrap v1.9.4","u":"/blog/2023/07/05/blazorbootstrap-1.9.4","h":"","p":97},{"i":100,"t":"Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! What's New​ Dropdown Component Single button Multiple colors Split button Sizing Directions (Dropup, Dropup centered, Dropend, and Dropstart) Active Disabled Menu content (Header, Dividers, Text, and Forms) Auto close behavior Card Component Content types (Body, Titles, text, and links) Images List groups Header and footer Sizing Text alignment Background and color Card groups Card groups with footer What's changed​ Bar Chart component New AddDataSetAsync and AddAsync methods Doughnut Chart component New AddDataSetAsync and AddAsync methods Line Chart component New AddDataSetAsync and AddAsync methods Pie Chart component New AddDataSetAsync and AddAsync methods Grid component Grid: Filters translation support #292 Button component Tooltip color support added Tooltip component Tooltip color support added Tooltip on button problem #296 Switch component Switch is invoking EditContext OnFieldChanged even the change was not from UI #297 Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Card Component Documentation Blazor Dropdown Component Documentation Blazor Chart Components Documentation Blazor Grid Component Documentation Blazor Button Component Documentation Blazor Tooltip Component Documentation Blazor Switch Component Documentation Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.10.1 Older Post Blazor Bootstrap v1.9.5","s":"Blazor Bootstrap v1.10.0","u":"/blog/2023/08/13/blazorbootstrap-1.10.0","h":"","p":99},{"i":102,"t":"Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! What's changed​ We have made improvements to the base components Bar Chart component UpdateAsync method Doughnut Chart component UpdateAsync method Line Chart component UpdateAsync method Pie Chart component UpdateAsync method Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Chart Components Documentation Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Edit this page Newer Post Blazor Bootstrap v1.10.2 Older Post Blazor Bootstrap v1.10.0","s":"Blazor Bootstrap v1.10.1","u":"/blog/2023/08/29/blazorbootstrap-1.10.1","h":"","p":101},{"i":104,"t":"Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! What's changed​ AutoComplete component Autocomplete shows \"No Records Found\" Before Search is finished #352 Confirm Dialog component Confirm Dialog - No fade animation #334 Modal Service Callback support has been added Tooltip component Dispose issue fixed #327 Sidebar component Sidebar should close automatically on mobile #274 We have made improvements to all the charts to support data labels #317 Bar Chart, Doughnut Chart, Line Chart, and Pie Chart MAUI Blazor App - Getting started docs added Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Blazor Chart Components Documentation Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Edit this page Newer Post Blazor Bootstrap v1.10.3 Older Post Blazor Bootstrap v1.10.1","s":"Blazor Bootstrap v1.10.2","u":"/blog/2023/09/15/blazorbootstrap-1.10.2","h":"","p":103},{"i":106,"t":"Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! What's changed​ Grid component Grid: Fixed Header Support #53 Dropdown component Add feature to disable Dropdown #373 Icon component Sizing for icons in buttons is strange #346 Sidebar component Sidebar: Add option to space items #276 Docs updates Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Documentation Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Edit this page Newer Post Blazor Bootstrap v1.10.4 Older Post Blazor Bootstrap v1.10.2","s":"Blazor Bootstrap v1.10.3","u":"/blog/2023/10/15/blazorbootstrap-1.10.3","h":"","p":105},{"i":108,"t":"2021 December 21, 2021 - BlazorBootstrap v0.1.1 December 20, 2021 - BlazorBootstrap v0.1.0 December 12, 2021 - BlazorBootstrap v0.0.4 December 8, 2021 - BlazorBootstrap v0.0.3 November 27, 2021 - BlazorBootstrap v0.0.2 November 23, 2021 - BlazorBootstrap v0.0.1 2022 December 18, 2022 - Blazor Bootstrap v1.3.1 December 15, 2022 - Blazor Bootstrap v1.3.0 December 12, 2022 - Blazor Bootstrap v1.2.0 November 28, 2022 - Blazor Bootstrap v1.1.0 November 22, 2022 - Blazor Bootstrap v1.0.1 November 18, 2022 - Blazor Bootstrap v1.0.0 October 30, 2022 - Blazor Bootstrap v0.6.0 October 22, 2022 - Blazor Bootstrap v0.5.1 October 16, 2022 - BlazorBootstrap v0.5.0 September 17, 2022 - BlazorBootstrap v0.4.2 September 12, 2022 - BlazorBootstrap v0.4.1 September 4, 2022 - BlazorBootstrap v0.4.0 August 31, 2022 - BlazorBootstrap v0.3.0 August 13, 2022 - BlazorBootstrap v0.2.6 July 28, 2022 - BlazorBootstrap v0.2.5 June 19, 2022 - BlazorBootstrap v0.2.4 April 30, 2022 - BlazorBootstrap v0.2.3 March 15, 2022 - BlazorBootstrap v0.2.2 February 27, 2022 - BlazorBootstrap v0.2.1 January 15, 2022 - BlazorBootstrap v0.2.0 2023 November 18, 2023 - Blazor Bootstrap v1.10.4 October 15, 2023 - Blazor Bootstrap v1.10.3 September 15, 2023 - Blazor Bootstrap v1.10.2 August 29, 2023 - Blazor Bootstrap v1.10.1 August 13, 2023 - Blazor Bootstrap v1.10.0 July 16, 2023 - Blazor Bootstrap v1.9.5 July 5, 2023 - Blazor Bootstrap v1.9.4 July 4, 2023 - Blazor Bootstrap v1.9.3 July 1, 2023 - Blazor Bootstrap v1.9.1 July 1, 2023 - Blazor Bootstrap v1.9.2 June 30, 2023 - Blazor Bootstrap v1.9.0 June 16, 2023 - Blazor Bootstrap v1.8.3 June 11, 2023 - Blazor Bootstrap v1.8.2 May 31, 2023 - Blazor Bootstrap v1.8.1 May 28, 2023 - Blazor Bootstrap v1.8.0 April 29, 2023 - Blazor Bootstrap v1.7.3 April 24, 2023 - Blazor Bootstrap v1.7.2 April 19, 2023 - Blazor Bootstrap v1.7.1 April 10, 2023 - Blazor Bootstrap v1.7.0 March 12, 2023 - Blazor Bootstrap v1.6.0 March 5, 2023 - Blazor Bootstrap v1.5.0 February 23, 2023 - Blazor Bootstrap v1.4.5 February 10, 2023 - Blazor Bootstrap v1.4.4 February 7, 2023 - Blazor Bootstrap v1.4.3 January 30, 2023 - Blazor Bootstrap v1.4.2 January 23, 2023 - Blazor Bootstrap v1.4.1 January 15, 2023 - Blazor Bootstrap v1.4.0","s":"Archive","u":"/blog/archive","h":"","p":107},{"i":110,"t":"Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! What's changed​ Grid component Grid: Freeze Columns Support #246 Preload component Preload: Add text to preload component #414 Switch component Switch: Double click on switch selects the label #401 Charts component Chart size updates #384 Modal component Pressing Esc still closes the modal even with UseStaticBackdrop=\"true\" #416 Docs updates Links​ Demo Website - Blazor Server Demo Website - Blazor WebAssembly Documentation Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Edit this page Older Post Blazor Bootstrap v1.10.3","s":"Blazor Bootstrap v1.10.4","u":"/blog/2023/11/18/blazorbootstrap-1.10.4","h":"","p":109},{"i":112,"t":"Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/2","h":"","p":111},{"i":114,"t":"Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More Newer Entries Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/3","h":"","p":113},{"i":116,"t":"Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Tags: v0.3.0 blazorbootstrap grid Read More Newer Entries Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/4","h":"","p":115},{"i":118,"t":"One post tagged with \"accordion\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"accordion\"","u":"/blog/tags/accordion","h":"","p":117},{"i":120,"t":"BlazorBootstrap v0.0.3 December 8, 2021 · One min read Vikram Reddy Creator In this release, we added the Toasts component and improved documentation. Tags: v0.0.3 blazorbootstrap Read More BlazorBootstrap v0.0.2 November 27, 2021 · One min read Vikram Reddy Creator In this release, our focus was more on documenting the individual components. Tags: v0.0.2 blazorbootstrap Read More BlazorBootstrap v0.0.1 November 23, 2021 · One min read Vikram Reddy Creator Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers. Tags: v0.0.1 blazorbootstrap Read More Newer Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/6","h":"","p":119},{"i":122,"t":"Tags A accordion1 alert1 autocomplete8 B badge1 blazor33 blazor-autocomplete1 blazor-bar-chart1 blazor-bootstrap5 blazor-charts1 blazor-confirm-dialog2 blazor-currency-input1 blazor-dialog2 blazor-doughnut-chart1 blazor-grid3 blazor-grid-filtering1 blazor-grid-paging1 blazor-grid-sorting1 blazor-input1 blazor-input-number1 blazor-line-chart1 blazor-number1 blazor-number-input1 blazor-offcanvas1 blazor-pie-chart1 blazor-preload2 blazor-progress1 blazor-progress-bar1 blazor-sidemodal1 blazor-spinner2 blazor-starter-templates1 blazor-tabs1 blazor-templates1 blazor-toast1 blazor-toasts2 blazoraccordion1 blazorautocomplete4 blazorbadge1 blazorbootstrap53 blazorbootstrap-starter-templates1 blazorbreadcrumb1 blazorbutton2 blazorbuttons3 blazorchart1 blazorcollapse1 blazorconfirmdialog1 blazorconfirmmodal1 blazorcurrencyinput3 blazordate1 blazordateinput4 blazordatepicker2 blazordialog1 blazordropdown1 blazorgrid13 blazoricon2 blazormodal8 blazormodalservice2 blazornumber1 blazornumberinput1 blazoroffcanvas3 blazorprogress1 blazorsidebar2 blazorswitch2 blazortabs1 blazortime1 blazortimeinput3 blazortimepicker1 blazortoast1 blazortoasts2 blazortooltip2 bootstrap26 bootstrap526 breadcrumb1 breadcrumbservice1 button3 buttons3 C callout1 chart1 charts1 collapse1 confirm dialog1 confirmdialog1 confirmmodal1 currency1 currencyinput2 D date1 dateinput4 datepicker2 dialog1 docs5 dropdown1 G grid16 I icon2 icons1 input2 input-number1 L layout1 leftmenu1 M modal11 modalservice3 N navigation1 numberinput1 O offcanvas5 P pagination1 placeholders3 preload1 progress2 progress-bar1 S sidebar2 switch2 T tabs1 timeinput3 timepicker1 toast1 toasts4 toastservice1 tooltip2 V v0.0.11 v0.0.21 v0.0.31 v0.0.41 v0.1.01 v0.1.11 v0.2.01 v0.2.11 v0.2.21 v0.2.31 v0.2.41 v0.2.51 v0.2.61 v0.3.01 v0.4.01 v0.4.11 v0.4.21 v0.5.01 v0.5.11 v0.6.01 v1.0.01 v1.0.11 v1.1.01 v1.10.01 v1.10.11 v1.10.21 v1.10.31 v1.10.41 v1.2.01 v1.3.01 v1.3.11 v1.4.01 v1.4.11 v1.4.21 v1.4.31 v1.4.41 v1.4.51 v1.5.01 v1.6.01 v1.7.01 v1.7.11 v1.7.21 v1.7.31 v1.8.01 v1.8.11 v1.8.21 v1.8.31 v1.9.01 v1.9.11 v1.9.21 v1.9.31 v1.9.41 v1.9.51","s":"Tags","u":"/blog/tags","h":"","p":121},{"i":124,"t":"One post tagged with \"alert\" View All Tags BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Tags: v0.1.1 blazorbootstrap alert Read More","s":"One post tagged with \"alert\"","u":"/blog/tags/alert","h":"","p":123},{"i":126,"t":"8 posts tagged with \"autocomplete\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More","s":"8 posts tagged with \"autocomplete\"","u":"/blog/tags/autocomplete","h":"","p":125},{"i":128,"t":"One post tagged with \"badge\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"badge\"","u":"/blog/tags/badge","h":"","p":127},{"i":130,"t":"BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Tags: v0.2.6 blazorbootstrap button Read More BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Tags: v0.2.4 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Tags: v0.2.3 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Tags: v0.2.2 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Tags: v0.1.1 blazorbootstrap alert Read More BlazorBootstrap v0.1.0 December 20, 2021 · One min read Vikram Reddy Creator We are excited to release 0.1.0 with lots of updates. Tags: v0.1.0 blazorbootstrap Read More BlazorBootstrap v0.0.4 December 12, 2021 · One min read Vikram Reddy Creator Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release. Tags: v0.0.4 blazorbootstrap Read More Newer Entries Older Entries","s":"Blog | Blazor Bootstrap Docs","u":"/blog/page/5","h":"","p":129},{"i":132,"t":"One post tagged with \"blazor-bar-chart\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-bar-chart\"","u":"/blog/tags/blazor-bar-chart","h":"","p":131},{"i":134,"t":"33 posts tagged with \"blazor\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor","h":"","p":133},{"i":136,"t":"One post tagged with \"blazor-charts\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-charts\"","u":"/blog/tags/blazor-charts","h":"","p":135},{"i":138,"t":"5 posts tagged with \"blazor-bootstrap\" View All Tags Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"5 posts tagged with \"blazor-bootstrap\"","u":"/blog/tags/blazor-bootstrap","h":"","p":137},{"i":140,"t":"2 posts tagged with \"blazor-confirm-dialog\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"2 posts tagged with \"blazor-confirm-dialog\"","u":"/blog/tags/blazor-confirm-dialog","h":"","p":139},{"i":142,"t":"One post tagged with \"blazor-currency-input\" View All Tags Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"One post tagged with \"blazor-currency-input\"","u":"/blog/tags/blazor-currency-input","h":"","p":141},{"i":144,"t":"2 posts tagged with \"blazor-dialog\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"2 posts tagged with \"blazor-dialog\"","u":"/blog/tags/blazor-dialog","h":"","p":143},{"i":146,"t":"One post tagged with \"blazor-doughnut-chart\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-doughnut-chart\"","u":"/blog/tags/blazor-doughnut-chart","h":"","p":145},{"i":148,"t":"One post tagged with \"blazor-autocomplete\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"blazor-autocomplete\"","u":"/blog/tags/blazor-autocomplete","h":"","p":147},{"i":150,"t":"One post tagged with \"blazor-grid-paging\" View All Tags Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"One post tagged with \"blazor-grid-paging\"","u":"/blog/tags/blazor-grid-paging","h":"","p":149},{"i":152,"t":"3 posts tagged with \"blazor-grid\" View All Tags Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"3 posts tagged with \"blazor-grid\"","u":"/blog/tags/blazor-grid","h":"","p":151},{"i":154,"t":"One post tagged with \"blazor-grid-filtering\" View All Tags Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"One post tagged with \"blazor-grid-filtering\"","u":"/blog/tags/blazor-grid-filtering","h":"","p":153},{"i":156,"t":"One post tagged with \"blazor-grid-sorting\" View All Tags Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"One post tagged with \"blazor-grid-sorting\"","u":"/blog/tags/blazor-grid-sorting","h":"","p":155},{"i":158,"t":"One post tagged with \"blazor-input\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"blazor-input\"","u":"/blog/tags/blazor-input","h":"","p":157},{"i":160,"t":"One post tagged with \"blazor-input-number\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"blazor-input-number\"","u":"/blog/tags/blazor-input-number","h":"","p":159},{"i":162,"t":"One post tagged with \"blazor-line-chart\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-line-chart\"","u":"/blog/tags/blazor-line-chart","h":"","p":161},{"i":164,"t":"One post tagged with \"blazor-number\" View All Tags Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"One post tagged with \"blazor-number\"","u":"/blog/tags/blazor-number","h":"","p":163},{"i":166,"t":"One post tagged with \"blazor-number-input\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"blazor-number-input\"","u":"/blog/tags/blazor-number-input","h":"","p":165},{"i":168,"t":"One post tagged with \"blazor-pie-chart\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"blazor-pie-chart\"","u":"/blog/tags/blazor-pie-chart","h":"","p":167},{"i":170,"t":"One post tagged with \"blazor-offcanvas\" View All Tags Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"One post tagged with \"blazor-offcanvas\"","u":"/blog/tags/blazor-offcanvas","h":"","p":169},{"i":172,"t":"2 posts tagged with \"blazor-preload\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"2 posts tagged with \"blazor-preload\"","u":"/blog/tags/blazor-preload","h":"","p":171},{"i":174,"t":"One post tagged with \"blazor-progress\" View All Tags Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"One post tagged with \"blazor-progress\"","u":"/blog/tags/blazor-progress","h":"","p":173},{"i":176,"t":"One post tagged with \"blazor-progress-bar\" View All Tags Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"One post tagged with \"blazor-progress-bar\"","u":"/blog/tags/blazor-progress-bar","h":"","p":175},{"i":178,"t":"One post tagged with \"blazor-sidemodal\" View All Tags Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"One post tagged with \"blazor-sidemodal\"","u":"/blog/tags/blazor-sidemodal","h":"","p":177},{"i":180,"t":"2 posts tagged with \"blazor-spinner\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"2 posts tagged with \"blazor-spinner\"","u":"/blog/tags/blazor-spinner","h":"","p":179},{"i":182,"t":"One post tagged with \"blazor-tabs\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"blazor-tabs\"","u":"/blog/tags/blazor-tabs","h":"","p":181},{"i":184,"t":"One post tagged with \"blazor-starter-templates\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"blazor-starter-templates\"","u":"/blog/tags/blazor-starter-templates","h":"","p":183},{"i":186,"t":"One post tagged with \"blazor-templates\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"blazor-templates\"","u":"/blog/tags/blazor-templates","h":"","p":185},{"i":188,"t":"One post tagged with \"blazor-toast\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More","s":"One post tagged with \"blazor-toast\"","u":"/blog/tags/blazor-toast","h":"","p":187},{"i":190,"t":"2 posts tagged with \"blazor-toasts\" View All Tags Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"2 posts tagged with \"blazor-toasts\"","u":"/blog/tags/blazor-toasts","h":"","p":189},{"i":192,"t":"33 posts tagged with \"blazor\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More Newer Entries Older Entries","s":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/3","h":"","p":191},{"i":194,"t":"33 posts tagged with \"blazor\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/2","h":"","p":193},{"i":196,"t":"One post tagged with \"blazoraccordion\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"blazoraccordion\"","u":"/blog/tags/blazoraccordion","h":"","p":195},{"i":198,"t":"33 posts tagged with \"blazor\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More Newer Entries","s":"33 posts tagged with \"blazor\"","u":"/blog/tags/blazor/page/4","h":"","p":197},{"i":200,"t":"4 posts tagged with \"blazorautocomplete\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More","s":"4 posts tagged with \"blazorautocomplete\"","u":"/blog/tags/blazorautocomplete","h":"","p":199},{"i":202,"t":"One post tagged with \"blazorbadge\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"blazorbadge\"","u":"/blog/tags/blazorbadge","h":"","p":201},{"i":204,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap","h":"","p":203},{"i":206,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/2","h":"","p":205},{"i":208,"t":"One post tagged with \"blazorbootstrap-starter-templates\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"blazorbootstrap-starter-templates\"","u":"/blog/tags/blazorbootstrap-starter-templates","h":"","p":207},{"i":210,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More Newer Entries Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/3","h":"","p":209},{"i":212,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Tags: v0.2.6 blazorbootstrap button Read More BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Tags: v0.2.4 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Tags: v0.2.3 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Tags: v0.2.2 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Tags: v0.1.1 blazorbootstrap alert Read More BlazorBootstrap v0.1.0 December 20, 2021 · One min read Vikram Reddy Creator We are excited to release 0.1.0 with lots of updates. Tags: v0.1.0 blazorbootstrap Read More BlazorBootstrap v0.0.4 December 12, 2021 · One min read Vikram Reddy Creator Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release. Tags: v0.0.4 blazorbootstrap Read More Newer Entries Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/5","h":"","p":211},{"i":214,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Tags: v0.3.0 blazorbootstrap grid Read More Newer Entries Older Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/4","h":"","p":213},{"i":216,"t":"One post tagged with \"blazorbreadcrumb\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"blazorbreadcrumb\"","u":"/blog/tags/blazorbreadcrumb","h":"","p":215},{"i":218,"t":"53 posts tagged with \"blazorbootstrap\" View All Tags BlazorBootstrap v0.0.3 December 8, 2021 · One min read Vikram Reddy Creator In this release, we added the Toasts component and improved documentation. Tags: v0.0.3 blazorbootstrap Read More BlazorBootstrap v0.0.2 November 27, 2021 · One min read Vikram Reddy Creator In this release, our focus was more on documenting the individual components. Tags: v0.0.2 blazorbootstrap Read More BlazorBootstrap v0.0.1 November 23, 2021 · One min read Vikram Reddy Creator Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers. Tags: v0.0.1 blazorbootstrap Read More Newer Entries","s":"53 posts tagged with \"blazorbootstrap\"","u":"/blog/tags/blazorbootstrap/page/6","h":"","p":217},{"i":220,"t":"One post tagged with \"blazorcollapse\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"blazorcollapse\"","u":"/blog/tags/blazorcollapse","h":"","p":219},{"i":222,"t":"2 posts tagged with \"blazorbutton\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"2 posts tagged with \"blazorbutton\"","u":"/blog/tags/blazorbutton","h":"","p":221},{"i":224,"t":"One post tagged with \"blazorchart\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"blazorchart\"","u":"/blog/tags/blazorchart","h":"","p":223},{"i":226,"t":"3 posts tagged with \"blazorbuttons\" View All Tags Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"3 posts tagged with \"blazorbuttons\"","u":"/blog/tags/blazorbuttons","h":"","p":225},{"i":228,"t":"One post tagged with \"blazorconfirmdialog\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"blazorconfirmdialog\"","u":"/blog/tags/blazorconfirmdialog","h":"","p":227},{"i":230,"t":"One post tagged with \"blazorconfirmmodal\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"blazorconfirmmodal\"","u":"/blog/tags/blazorconfirmmodal","h":"","p":229},{"i":232,"t":"3 posts tagged with \"blazorcurrencyinput\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"3 posts tagged with \"blazorcurrencyinput\"","u":"/blog/tags/blazorcurrencyinput","h":"","p":231},{"i":234,"t":"One post tagged with \"blazordate\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"blazordate\"","u":"/blog/tags/blazordate","h":"","p":233},{"i":236,"t":"2 posts tagged with \"blazordatepicker\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"2 posts tagged with \"blazordatepicker\"","u":"/blog/tags/blazordatepicker","h":"","p":235},{"i":238,"t":"One post tagged with \"blazordialog\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"blazordialog\"","u":"/blog/tags/blazordialog","h":"","p":237},{"i":240,"t":"4 posts tagged with \"blazordateinput\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"4 posts tagged with \"blazordateinput\"","u":"/blog/tags/blazordateinput","h":"","p":239},{"i":242,"t":"One post tagged with \"blazordropdown\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More","s":"One post tagged with \"blazordropdown\"","u":"/blog/tags/blazordropdown","h":"","p":241},{"i":244,"t":"13 posts tagged with \"blazorgrid\" View All Tags Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Older Entries","s":"13 posts tagged with \"blazorgrid\"","u":"/blog/tags/blazorgrid","h":"","p":243},{"i":246,"t":"13 posts tagged with \"blazorgrid\" View All Tags Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More Newer Entries","s":"13 posts tagged with \"blazorgrid\"","u":"/blog/tags/blazorgrid/page/2","h":"","p":245},{"i":248,"t":"2 posts tagged with \"blazoricon\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"2 posts tagged with \"blazoricon\"","u":"/blog/tags/blazoricon","h":"","p":247},{"i":250,"t":"8 posts tagged with \"blazormodal\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"8 posts tagged with \"blazormodal\"","u":"/blog/tags/blazormodal","h":"","p":249},{"i":252,"t":"2 posts tagged with \"blazormodalservice\" View All Tags Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"2 posts tagged with \"blazormodalservice\"","u":"/blog/tags/blazormodalservice","h":"","p":251},{"i":254,"t":"One post tagged with \"blazornumber\" View All Tags Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"One post tagged with \"blazornumber\"","u":"/blog/tags/blazornumber","h":"","p":253},{"i":256,"t":"One post tagged with \"blazornumberinput\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More","s":"One post tagged with \"blazornumberinput\"","u":"/blog/tags/blazornumberinput","h":"","p":255},{"i":258,"t":"3 posts tagged with \"blazoroffcanvas\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"3 posts tagged with \"blazoroffcanvas\"","u":"/blog/tags/blazoroffcanvas","h":"","p":257},{"i":260,"t":"2 posts tagged with \"blazorsidebar\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"2 posts tagged with \"blazorsidebar\"","u":"/blog/tags/blazorsidebar","h":"","p":259},{"i":262,"t":"One post tagged with \"blazorprogress\" View All Tags Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More","s":"One post tagged with \"blazorprogress\"","u":"/blog/tags/blazorprogress","h":"","p":261},{"i":264,"t":"One post tagged with \"blazortabs\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"One post tagged with \"blazortabs\"","u":"/blog/tags/blazortabs","h":"","p":263},{"i":266,"t":"3 posts tagged with \"blazortimeinput\" View All Tags Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"3 posts tagged with \"blazortimeinput\"","u":"/blog/tags/blazortimeinput","h":"","p":265},{"i":268,"t":"One post tagged with \"blazortimepicker\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"blazortimepicker\"","u":"/blog/tags/blazortimepicker","h":"","p":267},{"i":270,"t":"One post tagged with \"blazortoast\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"blazortoast\"","u":"/blog/tags/blazortoast","h":"","p":269},{"i":272,"t":"26 posts tagged with \"bootstrap\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap","h":"","p":271},{"i":274,"t":"26 posts tagged with \"bootstrap5\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More Older Entries","s":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5","h":"","p":273},{"i":276,"t":"2 posts tagged with \"blazortooltip\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More","s":"2 posts tagged with \"blazortooltip\"","u":"/blog/tags/blazortooltip","h":"","p":275},{"i":278,"t":"2 posts tagged with \"blazortoasts\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More","s":"2 posts tagged with \"blazortoasts\"","u":"/blog/tags/blazortoasts","h":"","p":277},{"i":280,"t":"26 posts tagged with \"bootstrap5\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5/page/2","h":"","p":279},{"i":282,"t":"26 posts tagged with \"bootstrap5\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Newer Entries","s":"26 posts tagged with \"bootstrap5\"","u":"/blog/tags/bootstrap-5/page/3","h":"","p":281},{"i":284,"t":"26 posts tagged with \"bootstrap\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Newer Entries Older Entries","s":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap/page/2","h":"","p":283},{"i":286,"t":"26 posts tagged with \"bootstrap\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More Newer Entries","s":"26 posts tagged with \"bootstrap\"","u":"/blog/tags/bootstrap/page/3","h":"","p":285},{"i":288,"t":"2 posts tagged with \"blazorswitch\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More","s":"2 posts tagged with \"blazorswitch\"","u":"/blog/tags/blazorswitch","h":"","p":287},{"i":290,"t":"One post tagged with \"breadcrumbservice\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"breadcrumbservice\"","u":"/blog/tags/breadcrumbservice","h":"","p":289},{"i":292,"t":"3 posts tagged with \"button\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Tags: v0.2.6 blazorbootstrap button Read More","s":"3 posts tagged with \"button\"","u":"/blog/tags/button","h":"","p":291},{"i":294,"t":"One post tagged with \"breadcrumb\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"breadcrumb\"","u":"/blog/tags/breadcrumb","h":"","p":293},{"i":296,"t":"3 posts tagged with \"buttons\" View All Tags Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"3 posts tagged with \"buttons\"","u":"/blog/tags/buttons","h":"","p":295},{"i":298,"t":"One post tagged with \"charts\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More","s":"One post tagged with \"charts\"","u":"/blog/tags/charts","h":"","p":297},{"i":300,"t":"One post tagged with \"callout\" View All Tags BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More","s":"One post tagged with \"callout\"","u":"/blog/tags/callout","h":"","p":299},{"i":302,"t":"One post tagged with \"chart\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"chart\"","u":"/blog/tags/chart","h":"","p":301},{"i":304,"t":"One post tagged with \"collapse\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"collapse\"","u":"/blog/tags/collapse","h":"","p":303},{"i":306,"t":"One post tagged with \"confirm dialog\" View All Tags BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More","s":"One post tagged with \"confirm dialog\"","u":"/blog/tags/confirm-dialog","h":"","p":305},{"i":308,"t":"One post tagged with \"confirmmodal\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"confirmmodal\"","u":"/blog/tags/confirmmodal","h":"","p":307},{"i":310,"t":"One post tagged with \"confirmdialog\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"confirmdialog\"","u":"/blog/tags/confirmdialog","h":"","p":309},{"i":312,"t":"One post tagged with \"currency\" View All Tags Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More","s":"One post tagged with \"currency\"","u":"/blog/tags/currency","h":"","p":311},{"i":314,"t":"2 posts tagged with \"currencyinput\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More","s":"2 posts tagged with \"currencyinput\"","u":"/blog/tags/currencyinput","h":"","p":313},{"i":316,"t":"One post tagged with \"date\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More","s":"One post tagged with \"date\"","u":"/blog/tags/date","h":"","p":315},{"i":318,"t":"4 posts tagged with \"dateinput\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"4 posts tagged with \"dateinput\"","u":"/blog/tags/dateinput","h":"","p":317},{"i":320,"t":"2 posts tagged with \"datepicker\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"2 posts tagged with \"datepicker\"","u":"/blog/tags/datepicker","h":"","p":319},{"i":322,"t":"One post tagged with \"dialog\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"dialog\"","u":"/blog/tags/dialog","h":"","p":321},{"i":324,"t":"5 posts tagged with \"docs\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More","s":"5 posts tagged with \"docs\"","u":"/blog/tags/docs","h":"","p":323},{"i":326,"t":"One post tagged with \"dropdown\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More","s":"One post tagged with \"dropdown\"","u":"/blog/tags/dropdown","h":"","p":325},{"i":328,"t":"16 posts tagged with \"grid\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Tags: v0.3.0 blazorbootstrap grid Read More BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More Newer Entries","s":"16 posts tagged with \"grid\"","u":"/blog/tags/grid/page/2","h":"","p":327},{"i":330,"t":"16 posts tagged with \"grid\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More Older Entries","s":"16 posts tagged with \"grid\"","u":"/blog/tags/grid","h":"","p":329},{"i":332,"t":"One post tagged with \"icons\" View All Tags BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More","s":"One post tagged with \"icons\"","u":"/blog/tags/icons","h":"","p":331},{"i":334,"t":"2 posts tagged with \"icon\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"2 posts tagged with \"icon\"","u":"/blog/tags/icon","h":"","p":333},{"i":336,"t":"2 posts tagged with \"input\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"2 posts tagged with \"input\"","u":"/blog/tags/input","h":"","p":335},{"i":338,"t":"One post tagged with \"input-number\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"input-number\"","u":"/blog/tags/input-number","h":"","p":337},{"i":340,"t":"One post tagged with \"leftmenu\" View All Tags Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"One post tagged with \"leftmenu\"","u":"/blog/tags/leftmenu","h":"","p":339},{"i":342,"t":"11 posts tagged with \"modal\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More Older Entries","s":"11 posts tagged with \"modal\"","u":"/blog/tags/modal","h":"","p":341},{"i":344,"t":"One post tagged with \"layout\" View All Tags Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"One post tagged with \"layout\"","u":"/blog/tags/layout","h":"","p":343},{"i":346,"t":"11 posts tagged with \"modal\" View All Tags BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More Newer Entries","s":"11 posts tagged with \"modal\"","u":"/blog/tags/modal/page/2","h":"","p":345},{"i":348,"t":"3 posts tagged with \"modalservice\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"3 posts tagged with \"modalservice\"","u":"/blog/tags/modalservice","h":"","p":347},{"i":350,"t":"One post tagged with \"navigation\" View All Tags Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"One post tagged with \"navigation\"","u":"/blog/tags/navigation","h":"","p":349},{"i":352,"t":"One post tagged with \"numberinput\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More","s":"One post tagged with \"numberinput\"","u":"/blog/tags/numberinput","h":"","p":351},{"i":354,"t":"3 posts tagged with \"placeholders\" View All Tags BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Tags: v0.2.4 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Tags: v0.2.3 blazorbootstrap placeholders Read More BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Tags: v0.2.2 blazorbootstrap placeholders Read More","s":"3 posts tagged with \"placeholders\"","u":"/blog/tags/placeholders","h":"","p":353},{"i":356,"t":"One post tagged with \"preload\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More","s":"One post tagged with \"preload\"","u":"/blog/tags/preload","h":"","p":355},{"i":358,"t":"5 posts tagged with \"offcanvas\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More","s":"5 posts tagged with \"offcanvas\"","u":"/blog/tags/offcanvas","h":"","p":357},{"i":360,"t":"One post tagged with \"pagination\" View All Tags BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More","s":"One post tagged with \"pagination\"","u":"/blog/tags/pagination","h":"","p":359},{"i":362,"t":"One post tagged with \"progress-bar\" View All Tags Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"One post tagged with \"progress-bar\"","u":"/blog/tags/progress-bar","h":"","p":361},{"i":364,"t":"2 posts tagged with \"progress\" View All Tags Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"2 posts tagged with \"progress\"","u":"/blog/tags/progress","h":"","p":363},{"i":366,"t":"2 posts tagged with \"sidebar\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"2 posts tagged with \"sidebar\"","u":"/blog/tags/sidebar","h":"","p":365},{"i":368,"t":"One post tagged with \"tabs\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"One post tagged with \"tabs\"","u":"/blog/tags/tabs","h":"","p":367},{"i":370,"t":"2 posts tagged with \"switch\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More","s":"2 posts tagged with \"switch\"","u":"/blog/tags/switch","h":"","p":369},{"i":372,"t":"One post tagged with \"timepicker\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"timepicker\"","u":"/blog/tags/timepicker","h":"","p":371},{"i":374,"t":"3 posts tagged with \"timeinput\" View All Tags Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"3 posts tagged with \"timeinput\"","u":"/blog/tags/timeinput","h":"","p":373},{"i":376,"t":"One post tagged with \"toast\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"toast\"","u":"/blog/tags/toast","h":"","p":375},{"i":378,"t":"4 posts tagged with \"toasts\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More","s":"4 posts tagged with \"toasts\"","u":"/blog/tags/toasts","h":"","p":377},{"i":380,"t":"One post tagged with \"toastservice\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"toastservice\"","u":"/blog/tags/toastservice","h":"","p":379},{"i":382,"t":"2 posts tagged with \"tooltip\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More","s":"2 posts tagged with \"tooltip\"","u":"/blog/tags/tooltip","h":"","p":381},{"i":384,"t":"One post tagged with \"v0.0.2\" View All Tags BlazorBootstrap v0.0.2 November 27, 2021 · One min read Vikram Reddy Creator In this release, our focus was more on documenting the individual components. Tags: v0.0.2 blazorbootstrap Read More","s":"One post tagged with \"v0.0.2\"","u":"/blog/tags/v-0-0-2","h":"","p":383},{"i":386,"t":"One post tagged with \"v0.0.1\" View All Tags BlazorBootstrap v0.0.1 November 23, 2021 · One min read Vikram Reddy Creator Welcome to BlazorBoostrap! This is our first release. We have created a few components used most frequently by the developers. Tags: v0.0.1 blazorbootstrap Read More","s":"One post tagged with \"v0.0.1\"","u":"/blog/tags/v-0-0-1","h":"","p":385},{"i":388,"t":"One post tagged with \"v0.0.3\" View All Tags BlazorBootstrap v0.0.3 December 8, 2021 · One min read Vikram Reddy Creator In this release, we added the Toasts component and improved documentation. Tags: v0.0.3 blazorbootstrap Read More","s":"One post tagged with \"v0.0.3\"","u":"/blog/tags/v-0-0-3","h":"","p":387},{"i":390,"t":"One post tagged with \"v0.0.4\" View All Tags BlazorBootstrap v0.0.4 December 12, 2021 · One min read Vikram Reddy Creator Our focus was on ensuring the component parameter names were consistent and documentation improvements in this release. Tags: v0.0.4 blazorbootstrap Read More","s":"One post tagged with \"v0.0.4\"","u":"/blog/tags/v-0-0-4","h":"","p":389},{"i":392,"t":"One post tagged with \"v0.1.1\" View All Tags BlazorBootstrap v0.1.1 December 21, 2021 · One min read Vikram Reddy Creator In this release, we made minor updates to the Alert component parameter. Also, docs and demos are updated. Tags: v0.1.1 blazorbootstrap alert Read More","s":"One post tagged with \"v0.1.1\"","u":"/blog/tags/v-0-1-1","h":"","p":391},{"i":394,"t":"One post tagged with \"v0.1.0\" View All Tags BlazorBootstrap v0.1.0 December 20, 2021 · One min read Vikram Reddy Creator We are excited to release 0.1.0 with lots of updates. Tags: v0.1.0 blazorbootstrap Read More","s":"One post tagged with \"v0.1.0\"","u":"/blog/tags/v-0-1-0","h":"","p":393},{"i":396,"t":"One post tagged with \"v0.2.0\" View All Tags BlazorBootstrap v0.2.0 January 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.0 with lots of updates. Tags: v0.2.0 blazorbootstrap modal offcanvas grid pagination Read More","s":"One post tagged with \"v0.2.0\"","u":"/blog/tags/v-0-2-0","h":"","p":395},{"i":398,"t":"One post tagged with \"v0.2.1\" View All Tags BlazorBootstrap v0.2.1 February 27, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.1 with minor updates. Bootstrap Icons updated to v1.8.0​ Tags: v0.2.1 blazorbootstrap icons confirm dialog toasts Read More","s":"One post tagged with \"v0.2.1\"","u":"/blog/tags/v-0-2-1","h":"","p":397},{"i":400,"t":"One post tagged with \"v0.2.2\" View All Tags BlazorBootstrap v0.2.2 March 15, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.2 with a new component and minor updates. Tags: v0.2.2 blazorbootstrap placeholders Read More","s":"One post tagged with \"v0.2.2\"","u":"/blog/tags/v-0-2-2","h":"","p":399},{"i":402,"t":"One post tagged with \"v0.2.3\" View All Tags BlazorBootstrap v0.2.3 April 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.3 with a new component and minor updates. Tags: v0.2.3 blazorbootstrap placeholders Read More","s":"One post tagged with \"v0.2.3\"","u":"/blog/tags/v-0-2-3","h":"","p":401},{"i":404,"t":"One post tagged with \"v0.2.4\" View All Tags BlazorBootstrap v0.2.4 June 19, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.4 with bug fixes and docs enhancement. Tags: v0.2.4 blazorbootstrap placeholders Read More","s":"One post tagged with \"v0.2.4\"","u":"/blog/tags/v-0-2-4","h":"","p":403},{"i":406,"t":"One post tagged with \"v0.3.0\" View All Tags BlazorBootstrap v0.3.0 August 31, 2022 · One min read Vikram Reddy Creator We are excited to release 0.3.0 with significant enhancements to the grid component. Tags: v0.3.0 blazorbootstrap grid Read More","s":"One post tagged with \"v0.3.0\"","u":"/blog/tags/v-0-3-0","h":"","p":405},{"i":408,"t":"One post tagged with \"v0.2.6\" View All Tags BlazorBootstrap v0.2.6 August 13, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.6 with enhancements and bug fixes. Tags: v0.2.6 blazorbootstrap button Read More","s":"One post tagged with \"v0.2.6\"","u":"/blog/tags/v-0-2-6","h":"","p":407},{"i":410,"t":"One post tagged with \"v0.2.5\" View All Tags BlazorBootstrap v0.2.5 July 28, 2022 · One min read Vikram Reddy Creator We are excited to release 0.2.5 with bug fixes and docs enhancement. Tags: v0.2.5 blazorbootstrap offcanvas modal Read More","s":"One post tagged with \"v0.2.5\"","u":"/blog/tags/v-0-2-5","h":"","p":409},{"i":412,"t":"One post tagged with \"v0.4.0\" View All Tags BlazorBootstrap v0.4.0 September 4, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.0 with new blazor autocomplete component. Tags: v0.4.0 blazorbootstrap autocomplete docs Read More","s":"One post tagged with \"v0.4.0\"","u":"/blog/tags/v-0-4-0","h":"","p":411},{"i":414,"t":"One post tagged with \"v0.4.1\" View All Tags BlazorBootstrap v0.4.1 September 12, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.1 with enhancements. Tags: v0.4.1 blazorbootstrap callout autocomplete grid docs Read More","s":"One post tagged with \"v0.4.1\"","u":"/blog/tags/v-0-4-1","h":"","p":413},{"i":416,"t":"One post tagged with \"v0.4.2\" View All Tags BlazorBootstrap v0.4.2 September 17, 2022 · One min read Vikram Reddy Creator We are excited to release 0.4.2 with bug fixes. Bug fixes​ AutoComplete component bug fix Links​ Demo Website Blazor AutoComplete Component Documentation Tags: v0.4.2 blazorbootstrap autocomplete","s":"One post tagged with \"v0.4.2\"","u":"/blog/tags/v-0-4-2","h":"","p":415},{"i":418,"t":"One post tagged with \"v0.5.0\" View All Tags BlazorBootstrap v0.5.0 October 16, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.0 with new blazor chart components. Tags: v0.5.0 blazorbootstrap blazor-charts blazor-bar-chart blazor-doughnut-chart blazor-line-chart blazor-pie-chart Read More","s":"One post tagged with \"v0.5.0\"","u":"/blog/tags/v-0-5-0","h":"","p":417},{"i":420,"t":"One post tagged with \"v0.5.1\" View All Tags Blazor Bootstrap v0.5.1 October 22, 2022 · One min read Vikram Reddy Creator We are excited to release 0.5.1 with blazor grid enhancements. Tags: v0.5.1 blazorbootstrap blazorgrid blazor-grid blazor-grid-sorting blazor-grid-filtering blazor-grid-paging Read More","s":"One post tagged with \"v0.5.1\"","u":"/blog/tags/v-0-5-1","h":"","p":419},{"i":422,"t":"One post tagged with \"v1.0.0\" View All Tags Blazor Bootstrap v1.0.0 November 18, 2022 · One min read Vikram Reddy Creator We are excited to release our major version, 1.0.0, with new components, enhancements to existing ones, and more!!! Tags: v1.0.0 blazor blazorbootstrap blazor-bootstrap blazor-tabs blazor-input blazor-input-number blazor-number-input input input-number Read More","s":"One post tagged with \"v1.0.0\"","u":"/blog/tags/v-1-0-0","h":"","p":421},{"i":424,"t":"One post tagged with \"v1.1.0\" View All Tags Blazor Bootstrap v1.1.0 November 28, 2022 · One min read Vikram Reddy Creator We are excited to release 1.1.0, with new Toast Service, ConfirmDialog, Icons enhancements, and more examples!!! Blazor Toasts serviceBlazor ConfirmDialog componentBlazor Icon component Tags: v1.1.0 blazor blazorbootstrap blazor-bootstrap blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner blazor-toast Read More","s":"One post tagged with \"v1.1.0\"","u":"/blog/tags/v-1-1-0","h":"","p":423},{"i":426,"t":"One post tagged with \"v0.6.0\" View All Tags Blazor Bootstrap v0.6.0 October 30, 2022 · One min read Vikram Reddy Creator We are excited to release 0.6.0 with the new blazor progress component and enhancements to the blazor toasts component. Tags: v0.6.0 blazorbootstrap blazor-toasts blazor-progress blazor-progress-bar toasts progress progress-bar Read More","s":"One post tagged with \"v0.6.0\"","u":"/blog/tags/v-0-6-0","h":"","p":425},{"i":428,"t":"One post tagged with \"v1.0.1\" View All Tags Blazor Bootstrap v1.0.1 November 22, 2022 · One min read Vikram Reddy Creator We are excited to release 1.0.1, with enhancements and more examples!!! Tags: v1.0.1 blazor blazorbootstrap blazor-bootstrap blazor-offcanvas blazor-sidemodal blazor-dialog blazor-confirm-dialog blazor-preload blazor-spinner Read More","s":"One post tagged with \"v1.0.1\"","u":"/blog/tags/v-1-0-1","h":"","p":427},{"i":430,"t":"One post tagged with \"v1.10.0\" View All Tags Blazor Bootstrap v1.10.0 August 13, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.10.0 with new Card and Dropdown component. Charts, Grid, Button, Tooltip, and Switch component updates!!! Tags: v1.10.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More","s":"One post tagged with \"v1.10.0\"","u":"/blog/tags/v-1-10-0","h":"","p":429},{"i":432,"t":"One post tagged with \"v1.10.1\" View All Tags Blazor Bootstrap v1.10.1 August 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.1 with base component improvements and chart updates!!! Tags: v1.10.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More","s":"One post tagged with \"v1.10.1\"","u":"/blog/tags/v-1-10-1","h":"","p":431},{"i":434,"t":"One post tagged with \"v1.10.2\" View All Tags Blazor Bootstrap v1.10.2 September 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.2 with enhancements to autocomplete, charts, confirmation dialog, sidebar, and others!!! Tags: v1.10.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete confirmdialog blazorconfirmdialog modal blazormodal modalservice tooltip blazortooltip sidebar blazorsidebar chart blazorchart docs Read More","s":"One post tagged with \"v1.10.2\"","u":"/blog/tags/v-1-10-2","h":"","p":433},{"i":436,"t":"One post tagged with \"v1.10.3\" View All Tags Blazor Bootstrap v1.10.3 October 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.3 with enhancements to grid, dropdown, icons, and others!!! Tags: v1.10.3 blazor bootstrap bootstrap5 blazorbootstrap dropdown blazordropdown icon blazoricon docs Read More","s":"One post tagged with \"v1.10.3\"","u":"/blog/tags/v-1-10-3","h":"","p":435},{"i":438,"t":"One post tagged with \"v1.10.4\" View All Tags Blazor Bootstrap v1.10.4 November 18, 2023 · One min read Vikram Reddy Creator We are excited to release 1.10.4 with enhancements to grid, preload, modal, and switch!!! Tags: v1.10.4 blazor bootstrap bootstrap5 blazorbootstrap grid preload switch charts modal docs Read More","s":"One post tagged with \"v1.10.4\"","u":"/blog/tags/v-1-10-4","h":"","p":437},{"i":440,"t":"One post tagged with \"v1.2.0\" View All Tags Blazor Bootstrap v1.2.0 December 12, 2022 · One min read Vikram Reddy Creator We are excited to release 1.2.0, with new CurrencyInput component, and more examples!!! Blazor CurrencyInput component Tags: v1.2.0 blazor blazorbootstrap blazor-bootstrap blazornumber blazor-number blazorcurrencyinput blazor-currency-input Read More","s":"One post tagged with \"v1.2.0\"","u":"/blog/tags/v-1-2-0","h":"","p":439},{"i":442,"t":"One post tagged with \"v1.3.0\" View All Tags Blazor Bootstrap v1.3.0 December 15, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.0, with new Switch component, and more examples!!! Blazor Switch component Tags: v1.3.0 blazor blazorbootstrap blazor-bootstrap blazorswitch Read More","s":"One post tagged with \"v1.3.0\"","u":"/blog/tags/v-1-3-0","h":"","p":441},{"i":444,"t":"One post tagged with \"v1.3.1\" View All Tags Blazor Bootstrap v1.3.1 December 18, 2022 · One min read Vikram Reddy Creator We are excited to release 1.3.1, with AutoComplete - keyboard navigation support, and more examples!!! Blazor AutoComplete component Tags: v1.3.1 blazor blazorbootstrap autocomplete blazorautocomplete Read More","s":"One post tagged with \"v1.3.1\"","u":"/blog/tags/v-1-3-1","h":"","p":443},{"i":446,"t":"One post tagged with \"v1.4.0\" View All Tags Blazor Bootstrap v1.4.0 January 15, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.0, with new sidebar and more examples!!! Blazor Sidebar component Tags: v1.4.0 blazor blazorbootstrap sidebar blazorsidebar leftmenu navigation layout Read More","s":"One post tagged with \"v1.4.0\"","u":"/blog/tags/v-1-4-0","h":"","p":445},{"i":448,"t":"One post tagged with \"v1.4.1\" View All Tags Blazor Bootstrap v1.4.1 January 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.1, with modal updates and more examples!!! Blazor modal component Tags: v1.4.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal confirmmodal blazorconfirmmodal dialog blazordialog Read More","s":"One post tagged with \"v1.4.1\"","u":"/blog/tags/v-1-4-1","h":"","p":447},{"i":450,"t":"One post tagged with \"v1.4.4\" View All Tags Blazor Bootstrap v1.4.4 February 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.4, with Grid enhancements and more examples!!! Tags: v1.4.4 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More","s":"One post tagged with \"v1.4.4\"","u":"/blog/tags/v-1-4-4","h":"","p":449},{"i":452,"t":"One post tagged with \"v1.4.3\" View All Tags Blazor Bootstrap v1.4.3 February 7, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.3, with Grid enhancements and more examples!!! Tags: v1.4.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazor-grid blazorgrid Read More","s":"One post tagged with \"v1.4.3\"","u":"/blog/tags/v-1-4-3","h":"","p":451},{"i":454,"t":"One post tagged with \"v1.4.2\" View All Tags Blazor Bootstrap v1.4.2 January 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.2, with Auto Complete updates and new starter templates for blazor webassembly and blazor server!!! Blazor Bootstrap: Blazor WebAssembly and Server starter templates Tags: v1.4.2 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazor-autocomplete blazor-templates blazor-starter-templates blazorbootstrap-starter-templates Read More","s":"One post tagged with \"v1.4.2\"","u":"/blog/tags/v-1-4-2","h":"","p":453},{"i":456,"t":"One post tagged with \"v1.4.5\" View All Tags Blazor Bootstrap v1.4.5 February 23, 2023 · One min read Vikram Reddy Creator We are excited to release 1.4.5 with the Toasts component bug fix!!! Tags: v1.4.5 blazor bootstrap bootstrap5 blazorbootstrap toasts blazor-toasts blazortoasts Read More","s":"One post tagged with \"v1.4.5\"","u":"/blog/tags/v-1-4-5","h":"","p":455},{"i":458,"t":"One post tagged with \"v1.5.0\" View All Tags Blazor Bootstrap v1.5.0 March 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.5.0 with new DateInput component and other updates!!! Tags: v1.5.0 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons dateinput datepicker blazordateinput blazordatepicker offcanvas blazoroffcanvas modal blazormodal Read More","s":"One post tagged with \"v1.5.0\"","u":"/blog/tags/v-1-5-0","h":"","p":457},{"i":460,"t":"One post tagged with \"v1.6.0\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"v1.6.0\"","u":"/blog/tags/v-1-6-0","h":"","p":459},{"i":462,"t":"One post tagged with \"v1.7.0\" View All Tags Blazor Bootstrap v1.7.0 April 10, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.0 with new Badge, Collapse, and Accordion components and other updates!!! Tags: v1.7.0 blazor bootstrap bootstrap5 blazorbootstrap badge blazorbadge collapse blazorcollapse accordion blazoraccordion button blazorbutton Read More","s":"One post tagged with \"v1.7.0\"","u":"/blog/tags/v-1-7-0","h":"","p":461},{"i":464,"t":"One post tagged with \"v1.7.2\" View All Tags Blazor Bootstrap v1.7.2 April 24, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.2 with Currency Input updates!!! Tags: v1.7.2 blazor bootstrap bootstrap5 blazorbootstrap currency currencyinput blazorcurrencyinput Read More","s":"One post tagged with \"v1.7.2\"","u":"/blog/tags/v-1-7-2","h":"","p":463},{"i":466,"t":"One post tagged with \"v1.8.0\" View All Tags Blazor Bootstrap v1.8.0 May 28, 2023 · 2 min read Vikram Reddy Creator We are excited to release 1.8.0 with Grid, Offcanvas and Form components updates!!! Tags: v1.8.0 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid offcanvas blazoroffcanvas autocomplete blazorautocomplete currencyinput blazorcurrencyinput dateinput blazordateinput numberinput blazornumberinput switch blazorswitch timeinput blazortimeinput Read More","s":"One post tagged with \"v1.8.0\"","u":"/blog/tags/v-1-8-0","h":"","p":465},{"i":468,"t":"One post tagged with \"v1.7.1\" View All Tags Blazor Bootstrap v1.7.1 April 19, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.1 with Auto complete and Buttons updates!!! Tags: v1.7.1 blazor bootstrap bootstrap5 blazorbootstrap autocomplete blazorautocomplete buttons blazorbuttons Read More","s":"One post tagged with \"v1.7.1\"","u":"/blog/tags/v-1-7-1","h":"","p":467},{"i":470,"t":"One post tagged with \"v1.7.3\" View All Tags Blazor Bootstrap v1.7.3 April 29, 2023 · One min read Vikram Reddy Creator We are excited to release 1.7.3 with Buttons and Grid updates!!! Tags: v1.7.3 blazor bootstrap bootstrap5 blazorbootstrap buttons blazorbuttons grid blazorgrid Read More","s":"One post tagged with \"v1.7.3\"","u":"/blog/tags/v-1-7-3","h":"","p":469},{"i":472,"t":"One post tagged with \"v1.9.1\" View All Tags Blazor Bootstrap v1.9.1 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.1 with Modal Service updates!!! Tags: v1.9.1 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal Read More","s":"One post tagged with \"v1.9.1\"","u":"/blog/tags/v-1-9-1","h":"","p":471},{"i":474,"t":"One post tagged with \"v1.9.2\" View All Tags Blazor Bootstrap v1.9.2 July 1, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.2 with New Breadcrumb service and Toast Service updates!!! Tags: v1.9.2 blazor bootstrap bootstrap5 blazorbootstrap breadcrumbservice breadcrumb blazorbreadcrumb toast blazortoast toastservice Read More","s":"One post tagged with \"v1.9.2\"","u":"/blog/tags/v-1-9-2","h":"","p":473},{"i":476,"t":"One post tagged with \"v1.8.2\" View All Tags Blazor Bootstrap v1.8.2 June 11, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.2 with Grid, Button and DateInput components updates!!! Tags: v1.8.2 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid button blazorbutton date dateinput input blazordateinput Read More","s":"One post tagged with \"v1.8.2\"","u":"/blog/tags/v-1-8-2","h":"","p":475},{"i":478,"t":"One post tagged with \"v1.8.1\" View All Tags Blazor Bootstrap v1.8.1 May 31, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.1 with Grid and Tooltip components updates!!! Tags: v1.8.1 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid tooltip blazortooltip Read More","s":"One post tagged with \"v1.8.1\"","u":"/blog/tags/v-1-8-1","h":"","p":477},{"i":480,"t":"One post tagged with \"v1.9.4\" View All Tags Blazor Bootstrap v1.9.4 July 5, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.4 with Modal service updates!!! Tags: v1.9.4 blazor bootstrap bootstrap5 blazorbootstrap modal modalservice blazormodal blazormodalservice Read More","s":"One post tagged with \"v1.9.4\"","u":"/blog/tags/v-1-9-4","h":"","p":479},{"i":482,"t":"One post tagged with \"v1.9.5\" View All Tags Blazor Bootstrap v1.9.5 July 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.5 with Grid, TimeInput, and Modal component updates!!! Tags: v1.9.5 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid timeinput blazortimeinput modal blazormodal Read More","s":"One post tagged with \"v1.9.5\"","u":"/blog/tags/v-1-9-5","h":"","p":481},{"i":484,"t":"One post tagged with \"v1.9.0\" View All Tags Blazor Bootstrap v1.9.0 June 30, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.0 with Modal Service, Modals, Icons, Toasts, and Tabs updates!!! Tags: v1.9.0 blazor bootstrap bootstrap5 blazorbootstrap modal blazormodal icon blazoricon modalservice blazormodalservice toasts blazortoasts tabs blazortabs Read More","s":"One post tagged with \"v1.9.0\"","u":"/blog/tags/v-1-9-0","h":"","p":483},{"i":486,"t":"Components Alerts On this page Blazor Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages. Parameters​ Name Type Description Required Default ChildContent RenderFragment Specifies the content to be rendered inside the alert. Color AlertColor Gets or sets the alert color. AlertColor.None Dismissable bool Enables the alert to be closed by placing the padding for close button. false Methods​ Name Description CloseAsync Closes an alert by removing it from the DOM. Callback Events​ Name Description OnClose Fires immediately when the close instance method is called. OnClosed Fired when the alert has been closed and CSS transitions have completed. Examples​ Alerts​ Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
A simple primary alert - check it out! A simple secondary alert - check it out! A simple success alert - check it out! A simple danger alert - check it out! A simple warning alert - check it out! A simple info alert - check it out! A simple light alert - check it out! A simple dark alert - check it out!
See alerts demo here. Additional Content​ Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
See alerts with additional content demo. Icons​ Similarly, you can use Bootstrap Icons to create alerts with icons.
An example alert with an icon A simple success alert with an icon A simple danger alert with an icon A simple warning alert with an icon
See alerts with an icon demo. Dismissing​ Using the Dismissable=\"true\", it's possible to dismiss any alert inline. It's possible to dismiss any alert inline. Here's how:
Holy guacamole! You should check in on some of those fields below.
Manually we can close an alert with button click.
Holy guacamole! You should check in on some of those fields below.
@code { Alert warningAlert; private async Task CloseAlert() => await warningAlert?.CloseAsync(); } See dismissable alerts demo. NOTE When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend subscribing to the OnClosed callback event and programmatically sets focus to the most appropriate location on the page. Edit this page Previous Accordion Next Badge Parameters Methods Callback Events Examples Alerts Additional Content Icons Dismissing","s":"Blazor Alerts","u":"/components/alerts","h":"","p":485},{"i":488,"t":"One post tagged with \"v1.9.3\" View All Tags Blazor Bootstrap v1.9.3 July 4, 2023 · One min read Vikram Reddy Creator We are excited to release 1.9.3 with Grid component updates!!! Tags: v1.9.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid Read More","s":"One post tagged with \"v1.9.3\"","u":"/blog/tags/v-1-9-3","h":"","p":487},{"i":490,"t":"One post tagged with \"v1.8.3\" View All Tags Blazor Bootstrap v1.8.3 June 16, 2023 · One min read Vikram Reddy Creator We are excited to release 1.8.3 with Grid and Progress components updates!!! Tags: v1.8.3 blazor bootstrap bootstrap5 blazorbootstrap grid blazorgrid progress blazorprogress Read More","s":"One post tagged with \"v1.8.3\"","u":"/blog/tags/v-1-8-3","h":"","p":489},{"i":492,"t":"Components Breadcrumb On this page Blazor Breadcrumb Blazor Bootstrap breadcrumb component indicates the current page's location within a navigational hierarchy that automatically adds separators. Parameters​ Name Type Description Required Default Items List List of all the items. ✔️ Examples​ Breadcrumb​
@code { private List NavItems1 { get; set; } private List NavItems2 { get; set; } protected override void OnInitialized() { NavItems1 = new List { new BreadcrumbItem{ Text = \"Home\", Href =\"/\" }, new BreadcrumbItem{ Text = \"Breadcrumb\", IsCurrentPage = true } }; NavItems2 = new List { new BreadcrumbItem{ Text = \"Home\", Href =\"/\" }, new BreadcrumbItem{ Text = \"Docs\", Href =\"/docs\" }, new BreadcrumbItem{ Text = \"Breadcrumb\", IsCurrentPage = true } }; } } See breadcrumb demo here. Dividers​ Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider.
';\" Items=\"NavItems2\">
@code { private List NavItems2 { get; set; } protected override void OnInitialized() { NavItems2 = new List { new BreadcrumbItem{ Text = \"Home\", Href =\"/\" }, new BreadcrumbItem{ Text = \"Docs\", Href =\"/docs\" }, new BreadcrumbItem{ Text = \"Breadcrumb\", IsCurrentPage = true } }; } } See breadcrumb with dividers demo here. Embedded SVG icon​ It's also possible to use an embedded SVG icon. Apply it via our CSS custom property
@code { private List NavItems2 { get; set; } protected override void OnInitialized() { NavItems2 = new List { new BreadcrumbItem{ Text = \"Home\", Href =\"/\" }, new BreadcrumbItem{ Text = \"Docs\", Href =\"/docs\" }, new BreadcrumbItem{ Text = \"Breadcrumb\", IsCurrentPage = true } }; } } See breadcrumb with embedded svg icon demo here. Edit this page Previous Badge Next Buttons Parameters Examples Breadcrumb Dividers Embedded SVG icon","s":"Blazor Breadcrumb","u":"/components/breadcrumb","h":"","p":491},{"i":494,"t":"Components Accordion On this page Blazor Accordion Build vertically collapsing accordions in combination with our Collapse component. Accordion Parameters​ Name Type Default Required Description Added Version ChildContent RenderFragment null ✔️ Specifies the content to be rendered inside this . 1.7.0 Flush bool false Removes borders and rounded corners to render accordions edge-to-edge with their parent container. 1.7.0 AlwaysOpen bool false It makes accordion items stay open when another item is opened. 1.7.0 Accordion Methods​ Name Description Added Version ShowFirstAccordionItemAsync Show the first AccordionItem. 1.7.0 ShowLastAccordionItemAsync Show the last AccordionItem. 1.7.0 ShowAccordionItemByNameAsync Show the AccordionItem by name. 1.7.0 ShowAccordionItemByIndexAsync Show the AccordionItem by index. 1.7.0 Accordion Events​ Name Description Added Version OnShowing This event fires immediately when the show method is called. 1.7.0 OnShown This event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete). 1.7.0 OnHiding This event is fired immediately when the hide method has been called. 1.7.0 OnHidden This event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete). 1.7.0 AccordionItem Parameters​ Name Type Default Required Description Added Version Content RenderFragment null ✔️ Specifies the content to be rendered inside the AccordionItem. 1.7.0 IsActive bool false Gets or sets the active AccordionItem. 1.7.0 Name string null Gets or sets the name. 1.7.0 Title string null Gets or sets the AccordionItem title. 1.7.0 TitleTemplate RenderFragment null Gets or sets the AccordionItem title template. 1.7.0 Examples​ Accordion​ Click the accordions below to expand/collapse the accordion content. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Title with Icon​ To customize the accordion title, use TitleTemplate, as shown in the below example. Accordion Item #1 This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. Accordion Item #2 This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. Accordion Item #3 This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Flush​ Set the Flush parameter to true to remove borders and rounded corners to render accordions edge-to-edge with their parent container. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Set default active accordion item​ Set the IsActive parameter to true to keep the accordion item open by default. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Always open​ Set the AlwaysOpen parameter to true to keep accordion items open when another item is opened. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. See demo here. Activate individual accordion items​ You can activate individual accordion items in several ways. Use predefined methods ShowFirstAccordionItemAsync, ShowLastAccordionItemAsync, ShowAccordionItemByNameAsync, and ShowAccordionItemByIndexAsync as shown below. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the fourth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the fifth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the sixth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. @code { private Accordion accordion1 = default!; private async Task ShowFirstAccordionItemAsync() => await accordion1.ShowFirstAccordionItemAsync(); private async Task ShowSecondAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(1); private async Task ShowThirdAccordionItemAsync() => await accordion1.ShowAccordionItemByIndexAsync(2); private async Task ShowProductsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync(\"Products\"); private async Task ShowFaqsAccordionItemAsync() => await accordion1.ShowAccordionItemByNameAsync(\"FAQ\"); private async Task ShowLastAccordionItemAsync() => await accordion1.ShowLastAccordionItemAsync(); } See demo here. Events Example​ Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality. This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. @code { private Accordion accordion1 = default!; [Inject] ToastService ToastService { get; set; } = default!; private void OnShowingAsync(AccordionEventArgs args) { ToastService.Notify(new ToastMessage( type: ToastType.Primary, message: $\"Event Name: Showing, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}\")); } private void OnShownAsync(AccordionEventArgs args) { ToastService.Notify(new ToastMessage( type: ToastType.Primary, message: $\"Event Name: OnShown, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}\")); } private void OnHidingAsync(AccordionEventArgs args) { ToastService.Notify(new ToastMessage( type: ToastType.Primary, message: $\"Event Name: OnHiding, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}\")); } private void OnHiddenAsync(AccordionEventArgs args) { ToastService.Notify(new ToastMessage( type: ToastType.Primary, message: $\"Event Name: OnHidden, AccordionItemName: {args.Name}, AccordionItemTitle: {args.Title}\")); } } See demo here. Edit this page Previous Time Input Next Alerts Accordion Parameters Accordion Methods Accordion Events AccordionItem Parameters Examples Accordion Title with Icon Flush Set default active accordion item Always open Activate individual accordion items Events Example","s":"Blazor Accordion","u":"/components/accordion","h":"","p":493},{"i":496,"t":"Components Badge On this page Blazor Badge The Blazor Bootstrap Badge component shows the small count and labels. Parameters​ Name Type Default Required Description Added Version ChildContent RenderFragment Specifies the content to be rendered inside the badge. 1.7.0 Color BadgeColor BadgeColor.Secondary ✔️ Gets or sets the badge color. 1.7.0 IndicatorType BadgeIndicatorType BadgeIndicatorType.None Gets or sets the badge indicator. 1.7.0 Placement BadgePlacement BadgePlacement.None Gets or sets the badge placement. 1.7.0 Position Position Gets or sets the badge position. 1.7.0 VisuallyHiddenText string Gets or sets the visually hidden text. 1.7.0 Examples​ Basic usage​ Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of now, badges no longer have focus or hover styles for links.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
See demo here Background colors​ Conveying meaning to assistive technologies Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the VisuallyHiddenText parameter. See demo here Pill badges​ Use the IndicatorType parameter to make badges more rounded with a larger border-radius. Primary Secondary Success Danger Warning Info Light Dark See demo here Buttons​ Badges can be used as part of links or buttons to provide a counter.
See demo here Positioned​ Use Position and Placement parameters to position it in the corner of a link or button.
See demo here Generic indicator​ You can also replace the badge with a generic indicator without the count. See demo here Edit this page Previous Alerts Next Breadcrumb Parameters Examples Basic usage Background colors Pill badges Buttons Positioned Generic indicator","s":"Blazor Badge","u":"/components/badge","h":"","p":495},{"i":498,"t":"Components Charts On this page Blazor Charts Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. Example​ See blazor chart demo here. Chart Types​ At this moment we are supporting four blazor chart types. Bar Chart Doughnut Chart Line Chart Pie Chart info We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions. Bar Chart​ See blazor bar chart demo here. See blazor bar chart full documentation here. Doughnut Chart​ See blazor doughnut chart demo here. See blazor doughnut chart full documentation here. Line Chart​ See blazor line chart demo here. See blazor line chart full documentation here. Pie Chart​ See blazor pie chart demo here. See blazor pie chart full documentation here. Edit this page Previous Card Next Collapse Example Chart Types Bar Chart Doughnut Chart Line Chart Pie Chart","s":"Blazor Charts","u":"/components/charts","h":"","p":497},{"i":500,"t":"Components Callout On this page Blazor Callout Blazor Bootstrap callout component provides content presentation in a visually distinct manner. Parameters​ Name Type Default Required Description ChildContent RenderFragment ✔️ Specifies the content to be rendered inside this. Heading string Gets or sets the callout heading. Type enum CalloutType.Default Use CalloutType.Default or CalloutType.Info or CalloutType.Warning or CalloutType.Danger or CalloutType.Tip Examples​ Callout​ This is an default callout. Example text to show it in action. See callout documentation. This is an danger callout. Example text to show it in action. See callout documentation. This is an warning callout. Example text to show it in action. See callout documentation. This is an info callout. Example text to show it in action. See callout documentation. This is an tip callout. Example text to show it in action. See callout documentation. See callout default demo here. Custom callout heading​ This is an default callout. Example text to show it in action. See callout documentation. This is an danger callout. Example text to show it in action. See callout documentation. This is an warning callout. Example text to show it in action. See callout documentation. This is an info callout. Example text to show it in action. See callout documentation. This is an tip callout. Example text to show it in action. See callout documentation. See callout danger demo here. Large text​

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

 See callout warning demo here. Edit this page Previous Buttons Next Card Parameters Examples Callout Custom callout heading Large text","s":"Blazor Callout","u":"/components/callout","h":"","p":499},{"i":502,"t":"Components Buttons On this page Blazor Buttons Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc. Parameters​ Name Type Description Required Default Added Version Active bool When set to true, places the component in the active state with active styling. false 1.0.0 Block bool Makes the button to span the full width of a parent. false 1.0.0 ChildContent RenderFragment Specifies the content to be rendered inside this Button. 1.0.0 Color ButtonColor Gets or sets the button color. ✔️ 1.0.0 Disabled bool When set to true, disables the component's functionality and places it in a disabled state. false 1.0.0 Loading bool Shows the loading spinner or a LoadingTemplate. false 1.0.0 LoadingTemplate RenderFragment Gets or sets the component loading template. 1.0.0 LoadingText string Gets or sets the loadgin text. Loading... 1.0.0 Outline bool Makes the button to have the outlines. false 1.0.0 Position Position Gets or sets the position. 1.7.0 Size Size Changes the size of a button. 1.0.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.0.0 Target Target The target attribute specifies where to open the linked document for a ButtonType.Link. Target.None 1.0.0 To string Denotes the target route of the ButtonType.Link button. 1.0.0 TooltipPlacement TooltipPlacement Tooltip placement TooltipPlacement.Top 1.0.0 TooltipTitle string Displays informative text when users hover, focus, or tap an element. 1.0.0 TooltipColor TooltipColor Gets or sets the tooltip color. TooltipColor.None 1.10.0 Type ButtonType Defines the button type. ButtonType.Button 1.0.0 Methods​ Name Description ShowLoading Shows the loading state and disables the button. HideLoading Hides the loading state and enables the button. Examples​ Buttons​ Blazor Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

See buttons demo here. Button tags​

See button tags demo here. Outline Buttons​

See outline button demo here. info Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. Sizes​ Fancy larger or smaller buttons? Add Size=\"Size.Large\" or Size=\"Size.Small\" for additional sizes.

See buttons with different size demo here. Disabled State​ Make buttons look inactive by adding the Disabled=\"true\" boolean parameter to any

See button disabled state demo here. Disable and enable state dynamically​ @code { bool disableButton = true; string tooltip = \"\"; public void SwapDisable() { disableButton = !disableButton; tooltip = $\"Updated at {DateTime.Now}\"; } } See disable and enable state dynamically demo here. Block Buttons​ Create responsive stacks of full-width, \"block buttons\" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
See block buttons demo here. Toogle States​ If you''re pre-toggling a button, you must manually add the Active=\"true\" parameter.

See button toogle states demo here. Loading spinner​ Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

See button with loading spinner demo here. Show/Hide loading spinner​ Use ShowLoading() and HideLoading() methods to toggle the button state. @code { private Button saveButton; private async Task OnSaveClick() { saveButton?.ShowLoading(\"Saving details...\"); await Task.Delay(5000); // API call saveButton?.HideLoading(); } } See button with loading spinner demo here. Show Tooltip​ Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

See button with tooltip demo here. NOTE HTML tooltips not supported at this moment. Dynamically update the tooltip text​
@code { private string text = \"Tooltip text\"; private void ChangeTooltip() => text = $\"Updated {DateTime.Now.ToLongTimeString()}\"; } See demo here. Events​ Click events​

@code{ protected void OnClick(EventArgs args) { Console.WriteLine(\"click event\"); } } Double click event​

@code{ protected void OnDoubleClick(EventArgs args) { Console.WriteLine(\"double click event\"); } } Click event with arguments​

@code{ public string message = \"Test message\"; protected void OnClickWithArgs(EventArgs args, string message) { Console.WriteLine($\"message: {message}\"); } } See button click events demo here. Edit this page Previous Breadcrumb Next Callout Parameters Methods Examples Buttons Button tags Outline Buttons Sizes Disabled State Disable and enable state dynamically Block Buttons Toogle States Loading spinner Show/Hide loading spinner Show Tooltip Dynamically update the tooltip text Events","s":"Blazor Buttons","u":"/components/buttons","h":"","p":501},{"i":504,"t":"Components Card On this page Blazor Card BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options. About​ A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Parameters​ Card Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Color CardColor Gets or sets the card color. CardColor.None 1.10.0 TextAlignment Alignment Gets or sets the text alignment of the card. Alignment.None 1.10.0 CardBody Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 CardFooter Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 CardGroup Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 CardHeader Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Color CardColor Gets or sets the card color. CardColor.None 1.10.4 CardLink Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Disabled bool When set to 'true', disables the component's functionality and places it in a disabled state. 1.10.0 To string? Gets or sets the target route. ✔️ 1.10.0 Target Target The target attribute specifies where to open the linked document. Target.None 1.10.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.10.0 CardSubTitle Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Size HeadingSize Gets or sets the heading size. HeadingSize.H6 1.10.0 CardText Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 CardTitle Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. ✔️ 1.10.0 Size HeadingSize Gets or sets the heading size. HeadingSize.H5 1.10.0 Examples​ Card​ Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. Card title Some quick example text to build on the card title and make up the bulk of the card's content. See the demo here. Content types​ Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported. Body​ The building block of a card is the CardBody. Use it whenever you need a padded section within a card. This is some text within a card body. See the demo here. Titles, text, and links​ Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content. Card link Another link See the demo here. Images​ \"placeholder\" Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content. Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content. \"placeholder\" See the demo here. List groups​ Create lists of content in a card with a flush list group.
  • An item
  • A second item
  • A third item
 See the demo here. Kitchen sink​ Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. \"placeholder\" Card title Some quick example text to build on the card title and make up the bulk of the card's content.
  • An item
  • A second item
  • A third item
Card link Another link See the demo here. Header and footer​ Add an optional header and/or footer within a card. Featured Special title treatment With supporting text below as a natural lead-in to additional content. See the demo here. Sizing​ Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
Special title treatment With supporting text below as a natural lead-in to additional content.
Special title treatment With supporting text below as a natural lead-in to additional content.
See the demo here. Text alignment​ You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter. Special title treatment With supporting text below as a natural lead-in to additional content. Special title treatment With supporting text below as a natural lead-in to additional content. Special title treatment With supporting text below as a natural lead-in to additional content. See the demo here. Background and color​ Header Primary card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Secondary card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Success card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Danger card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Warning card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Info card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Light card title Some quick example text to build on the card title and make up the bulk of the card's content. Header Dark card title Some quick example text to build on the card title and make up the bulk of the card's content. See the demo here. Card groups​ Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. \"placeholder\" Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago \"placeholder\" Card title This card has supporting text below as a natural lead-in to additional content. Last updated 3 mins ago \"placeholder\" Card title This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. Last updated 3 mins ago See the demo here. Card groups with footer​ When using card groups with footers, their content will automatically line up. \"placeholder\" Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago \"placeholder\" Card title This card has supporting text below as a natural lead-in to additional content. Last updated 3 mins ago \"placeholder\" Card title This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. Last updated 3 mins ago See the demo here. Edit this page Previous Callout Next Charts About Parameters Card Parameters CardBody Parameters CardFooter Parameters CardGroup Parameters CardHeader Parameters CardLink Parameters CardSubTitle Parameters CardText Parameters CardTitle Parameters Examples Card Content types Body Titles, text, and links Images List groups Kitchen sink Header and footer Sizing Text alignment Background and color Card groups Card groups with footer","s":"Blazor Card","u":"/components/card","h":"","p":503},{"i":506,"t":"Components Confirm Dialog On this page Blazor Confirm Dialog Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something. Methods​ Name Return Type Description Added Version ShowAsync(string title, string message1, ConfirmDialogOptions confirmDialogOptions = null) Task Shows confirm dialog. 1.1.0 ShowAsync(string title, string message1, string message2, ConfirmDialogOptions confirmDialogOptions = null) Task Shows confirm dialog. 1.1.0 ShowAsync(string title, Dictionary parametres = null, ConfirmDialogOptions confirmDialogOptions = null) Task Shows confirm dialog. T is component. 1.1.0 ConfirmDialogOptions Properties​ Name Type Default Description Added Version DialogCssClass string Additional CSS class for the dialog (div.modal-dialog element). 1.1.0 Dismissable bool Adds a dismissable close button to the confirm dialog. 1.1.0 HeaderCssClass string Additional header CSS class (div.modal-header element). 1.1.0 IsScrollable bool Allows confirm dialog body to be scrollable. 1.1.0 IsVerticallyCentered bool Shows the confirm dialog vertically in the center of the page. 1.1.0 NoButtonColor ButtonColor Gets or sets the 'No' button color. 1.1.0 NoButtonText string No Gets or sets the 'No' button text. 1.1.0 Size DialogSize ModalSize.Regular Size of the modal. 1.1.0 YesButtonColor ButtonColor ButtonColor.Primary Gets or sets the 'Yes' button color. 1.1.0 YesButtonText string Yes Gets or sets the 'Yes' button text. 1.1.0 Examples​ Confirm Dialog​ @code { private ConfirmDialog dialog; private async Task ShowConfirmationAsync() { var confirmation = await dialog.ShowAsync( title: \"Are you sure you want to delete this?\", message1: \"This will delete the record. Once deleted can not be rolled back.\", message2: \"Do you want to proceed?\"); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Dynamic component as confirm dialog​ Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. In the below example, we used Toast Service to show the user confirmation. @code { private ConfirmDialog dialog; [Inject] ToastService ToastService { get; set; } private async Task DeleteEmployeeAsync() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 321); var confirmation = await dialog.ShowAsync(\"Are you sure you want to delete this employee?\", parameters); if (confirmation) { // call API to delete the employee // show acknowledgment to the user ToastService.Notify(new ToastMessage(ToastType.Success, $\"Employee deleted successfully.\")); } else ToastService.Notify(new ToastMessage(ToastType.Secondary, $\"Delete action canceled.\")); } } EmployeeDemoComponent.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee; [Parameter] public int EmployeeId { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Vikram\", LastName = \"Reddy\" }; base.OnInitialized(); } } See Confirm Dialog demo here. Change buttons text and color​ Use ConfirmDialogOptions to change the text and color of the button. @code { private ConfirmDialog dialog; private async Task ShowSaveConfirmationAsync() { var options = new ConfirmDialogOptions { YesButtonText = \"OK\", YesButtonColor = ButtonColor.Success, NoButtonText = \"CANCEL\", NoButtonColor = ButtonColor.Danger }; var confirmation = await dialog.ShowAsync( title: \"Simple Confirm Dialog\", message1: \"Do you want to proceed?\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Optional sizes​ Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. Confirm Dialog Component - Small Size Confirm Dialog Component - Large Size Confirm Dialog Component - Extra Large Size @code { private ConfirmDialog dialog; private async Task ShowConfirmationAsync(DialogSize size) { var options = new ConfirmDialogOptions { Size = size }; var confirmation = await dialog.ShowAsync( title: \"Simple Confirm Dialog\", message1: \"Do you want to proceed?\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Scrolling long content​ When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. @code { private ConfirmDialog dialog; private async Task ShowDialogAsync() { var confirmation = await dialog.ShowAsync(title: \"Confirm dialog title\"); if (confirmation) { // do whatever } else { // do whatever } } } You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable=\"true\". @code { private ConfirmDialog dialog; private async Task ShowDialogAsync() { var options = new ConfirmDialogOptions { IsScrollable = true }; var confirmation = await dialog.ShowAsync( title: \"Confirm dialog title\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Vertically centered​ Add DialogOptions.IsVerticallyCentered=\"true\" to vertically center the confirm dialog. @code { private ConfirmDialog dialog; private async Task ShowDialogAsync() { var options = new ConfirmDialogOptions { IsVerticallyCentered = true }; var confirmation = await dialog.ShowAsync( title: \"Simple Confirm Dialog\", message1: \"Do you want to proceed?\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable=\"true\". @code { private ConfirmDialog dialog; private async Task ShowDialogAsync() { var options = new ConfirmDialogOptions { IsScrollable = true, IsVerticallyCentered = true }; var confirmation = await dialog.ShowAsync(title: \"Confirm dialog title\", confirmDialogOptions: options); if (confirmation) { // do whatever } else { // do whatever } } } See Confirm Dialog demo here. Edit this page Previous Collapse Next Dropdown Methods ConfirmDialogOptions Properties Examples Confirm Dialog Dynamic component as confirm dialog Change buttons text and color Optional sizes Scrolling long content Vertically centered","s":"Blazor Confirm Dialog","u":"/components/confirm-dialog","h":"","p":505},{"i":508,"t":"Components Collapse On this page Blazor Collapse Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component. Parameters​ Name Type Default Required Description Added Version ChildContent RenderFragment null ✔️ Specifies the content to be rendered inside the collapse. 1.7.0 Horizontal bool false Gets or sets the horizontal. 1.7.0 Parent string null Gets or sets the parent. 1.7.0 Toggle bool false Toggles the collapsible element on invocation. 1.7.0 Methods​ Name Description Added Version ShowAsync Shows a collapsible element. 1.7.0 HideAsync Hides a collapsible element. 1.7.0 ToggleAsync Toggles a collapsible element to shown or hidden. 1.7.0 Events​ Name Description Added Version OnShowing This event fires immediately when the show instance method is called. 1.7.0 OnShown This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). 1.7.0 OnHiding This event is fired immediately when the hide method has been called. 1.7.0 OnHidden This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). 1.7.0 How it works​ The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. Collapsing an element will animate the height from its current value to 0. info The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation. Examples​ Click the buttons below to show and hide the content. Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. @code { Collapse collapse1 = default!; private async Task ShowContentAsync() => await collapse1.ShowAsync(); private async Task HideContentAsync() => await collapse1.HideAsync(); private async Task ToggleContentAsync() => await collapse1.ToggleAsync(); } See demo here Horizontal​ The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing. This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. @code { Collapse collapse1 = default!; private async Task ShowContentAsync() => await collapse1.ShowAsync(); private async Task HideContentAsync() => await collapse1.HideAsync(); private async Task ToggleContentAsync() => await collapse1.ToggleAsync(); } See demo here Events Example​ Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality. Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
@foreach (var item in messages) {

@item

}
@code { Collapse collapse1 = default!; List messages = new List(); private async Task ShowContentAsync() => await collapse1.ShowAsync(); private async Task HideContentAsync() => await collapse1.HideAsync(); private async Task ToggleContentAsync() => await collapse1.ToggleAsync(); private void OnCollapseShowingAsync() => messages.Add($\"Event: OnShowing called {DateTime.Now.ToLocalTime()}\"); private void OnCollapseShownAsync() => messages.Add($\"Event: OnShown called {DateTime.Now.ToLocalTime()}\"); private void OnCollapseHidingAsync() => messages.Add($\"Event: OnHiding called {DateTime.Now.ToLocalTime()}\"); private void OnCollapseHiddenAsync() => messages.Add($\"Event: OnHidden called {DateTime.Now.ToLocalTime()}\"); private void ClearMessage() => messages = new List(); } Edit this page Previous Charts Next Confirm Dialog Parameters Methods Events How it works Examples Horizontal Events Example","s":"Blazor Collapse","u":"/components/collapse","h":"","p":507},{"i":510,"t":"Components Modal On this page Blazor Modal Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content. Parameters​ Name Type Description Required Default Added Version BodyCssClass string Additional body CSS class. 1.0.0 BodyTemplate RenderFragment Body template. ✔️ 1.0.0 ChildContent RenderFragment Specifies the content to be rendered inside the alert. 1.0.0 CloseOnEscape bool Indicates whether the modal closes when escape key is pressed. true 1.0.0 DialogCssClass string Additional CSS class for the dialog (div.modal-dialog element). 1.0.0 FooterCssClass string Footer css class. 1.0.0 FooterTemplate RenderFragment Footer template. ✔️ 1.0.0 Fullscreen ModalFullscreen Fullscreen behavior of the modal. ModalFullscreen.Disabled 1.0.0 HeaderTemplate RenderFragment Header template. ✔️ 1.0.0 HeaderCssClass string Additional header CSS class. 1.0.0 IsScrollable bool Allows modal body scroll. false 1.0.0 IsServiceModal bool Indicates whether the modal is related to a modal service or not. false 1.9.4 IsVerticallyCentered bool Shows the modal vertically in the center. false 1.0.0 ModalType ModalType Gets or sets the modal type. ModalType.Light 1.9.5 Size ModalSize Size of the modal. ModalSize.Regular 1.0.0 ShowCloseButton bool Indicates whether the modal shows close button in header. true 1.0.0 TabIndex int Gets or sets the tab index. -1 1.6.0 Title string ✔️ 1.0.0 UseStaticBackdrop bool Indicates whether the modal uses a static backdrop. false 1.0.0 Methods​ Name Description Added Version ShowAsync Opens a modal. 1.0.0 ShowAsync(string title, Dictionary parameters = null) Opens a modal. T is component. 1.4.1 HideAsync Hides a modal. 1.0.0 Asynchronous methods and transitions All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored. Callback Events​ Event Description OnShowing This event fires immediately when the show instance method is called. OnShown This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). OnHiding This event is fired immediately when the hide method has been called. OnHidden This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). OnHidePrevented This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-bs-keyboard set to false. How it works​ Before getting started with BlazorBootstrap's modal component, be sure to read the following as our menu options have recently changed. Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the so that modal content scrolls instead. Clicking on the modal \"backdrop\" will automatically close the modal. BlazorBootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. Examples​ Modal​ Clicking the Show Modal button below, the modal will slide down and fade in from the top of the page. Modal body text goes here. @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Dynamic component as modal​ Render different components dynamically within the modal without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @code { private Modal modal = default!; private string? message; private async Task OnShowModalClick() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 321); await modal.ShowAsync(title: \"Employee Details\", parameters: parameters); } } EmployeeDemoComponent1.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee; [Parameter] public int EmployeeId { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Vikram\", LastName = \"Reddy\" }; base.OnInitialized(); } } See demo here. Pass event callbacks to a dynamic component​ Event callbacks (EventCallback) can be passed in its parameter dictionary. In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary: The string key is the callback method's name, OnClickCallback. The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
@message
@code { private Modal modal = default!; private string? message; private async Task OnShowModalClick() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 322); parameters.Add(\"OnclickCallback\", EventCallback.Factory.Create(this, ShowDTMessage)); await modal.ShowAsync(title: \"Employee Details\", parameters: parameters); } private void ShowDTMessage(MouseEventArgs e) => message = $\"The current DT is: {DateTime.Now}.\"; } EmployeeDemoComponent2.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee; [Parameter] public int EmployeeId { get; set; } [Parameter] public EventCallback OnClickCallback { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Sagar\", LastName = \"Reddy\" }; base.OnInitialized(); } } See demo here. Static backdrop​ When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. CloseOnEscape should also be set to false to ignore the effect of pressing the Esc key and mimic the original behaviour of Bootstrap modal. Click the button below to try it. I will not close if you click outside me. Don't even try to press escape key. @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Scrolling long content​ When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.

This content should appear at the bottom after you scroll.

 @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Vertically centered​ Add IsVerticallyCentered=\"true\" to vertically center the modal. This is a vertically centered modal. @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Vertically centered and scrollable​

This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.

This content should appear at the bottom after you scroll.

 @code { private Modal modal; private async Task OnShowModalClick() { await modal?.ShowAsync(); } private async Task OnHideModalClick() { await modal?.HideAsync(); } } See demo here. Optional sizes​ Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. ... ... ... @code { private Modal xlModal; private Modal lgModal; private Modal smModal; } See demo here. Fullscreen Modal​ ... ... ... ... ... ... @code { private Modal modal; private Modal smModal; private Modal mdModal; private Modal lgModal; private Modal xlModal; private Modal xxlModal; } See demo here. Callback Events​ BlazorBootstrap's modal class exposes a few events for hooking into modal functionality. Modal body text goes here. @code { private Modal modal; private async Task OnModalShowingAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Showing\"); }); } private async Task OnModalShownAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Show\"); }); } private async Task OnModalHidingAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hiding\"); }); } private async Task OnModalHiddenAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hide\"); }); } private async Task OnModalHidePreventedAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hide Prevented\"); }); } } See demo here. Edit this page Previous Grid Next Offcanvas Parameters Methods Callback Events How it works Examples Modal Dynamic component as modal Pass event callbacks to a dynamic component Static backdrop Scrolling long content Vertically centered Vertically centered and scrollable Optional sizes Fullscreen Modal Callback Events","s":"Blazor Modal","u":"/components/modal","h":"","p":509},{"i":512,"t":"Components Pagination On this page Blazor Pagination Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages. Parameters​ Name Type Description Required Default ActivePageNumber int Active page number. Starts with 1. 1 Alignment Alignment Gets or sets the pagination alignment. Alignment.None DisplayPages int Gets or sets the maximum page links to be displayed. 5 FirstLinkIcon IconName Gets or sets first link icon. FirstLinkText string Gets or sets first link text. FirstLinkText is ignored if FirstLinkIcon is specified. First LastLinkIcon IconName Gets or sets last link icon. LastLinkText string Gets or sets last link text. LastLinkText is ignored if LastLinkIcon is specified. Last NextLinkIcon IconName Gets or sets next link icon. NextLinkText string Gets or sets next link text. NextLinkText is ignored if NextLinkIcon is specified. Next PreviousLinkIcon IconName Gets or sets previous link icon. PreviousLinkText string Gets or sets previous link text. PreviousLinkText is ignored if PreviousLinkIcon is specified. Previous Size PaginationSize Gets or sets the pagination size. TotalPages int Total pages of data items. Callback Events​ Event Description PageChanged This event fires immediately when the page number is changed. Examples​ Pagination​ We use a large block of connected links for our pagination, making links hard to miss and easily scalable - all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. See demo here. Working with icons​ See demo here. Disabled and active states​ See demo here. Sizing​ Fancy larger or smaller pagination? Add Size=\"PaginationSize.Small\" or Size=\"PaginationSize.Large\" for additional sizes. See demo here. Alignment​ See demo here. Callback Events​ Current Page Number: @currentPageNumber @code { int currentPageNumber = 2; private async Task OnPageChangedAsync(int newPageNumber) { await Task.Run(() => { currentPageNumber = newPageNumber; }); } } See demo here. Edit this page Previous Offcanvas Next Placeholders Parameters Callback Events Examples Pagination Working with icons Disabled and active states Sizing Alignment Callback Events","s":"Blazor Pagination","u":"/components/pagination","h":"","p":511},{"i":514,"t":"Components Offcanvas On this page Blazor Offcanvas Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component. Parameters​ Name Type Description Required Default Added Version BodyCssClass string Additional body CSS class. 1.0.0 BodyTemplate RenderFragment Body content. ✔️ 1.0.0 CloseOnEscape bool Indicates whether the offcanvas closes when escape key is pressed. true 1.0.0 FooterCssClass string Additional footer CSS class. 1.0.0 FooterTemplate RenderFragment Footer content. 1.0.0 HeaderCssClass string Additional header CSS class. 1.0.0 HeaderTemplate RenderFragment Content for the header. 1.0.0 IsScrollable bool Indicates whether body (page) scrolling is allowed while offcanvas is open. false 1.0.0 Placement Placement Gets or sets the offcanvas placement. By default, offcanvas is placed on the right of the viewport. Placement.End 1.0.0 ShowCloseButton bool Indicates whether the modal shows close button in header. true 1.0.0 Size OffcanvasSize Size of the offcanvas. OffcanvasSize.Regular 1.0.0 TabIndex int Gets or sets the tab index. -1 1.6.0 Title string Text for the title in header. ✔️ 1.0.0 UseStaticBackdrop bool When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it. false 1.8.0 Methods​ Method Description Added Version ShowAsync Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the OnShown event occurs). 1.0.0 HideAsync Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the OnHidden event occurs). 1.0.0 Asynchronous methods and transitions All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored. Callback Events​ Event Description OnShowing This event fires immediately when the show instance method is called. OnShown This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). OnHiding This event is fired immediately when the hide method has been called. OnHidden This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). How it works​ Offcanvas is a sidebar component that can be toggled to appear from the left, right, or bottom edge of the viewport. Conceptually, they are quite similar to the Modal component, but they are separate components. When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas. Similar to modals, only one offcanvas can be shown at a time. Examples​ Offcanvas​ Below is an offcanvas example that is shown by default. ... design your header and body @code { private Offcanvas offcanvas; private async Task ShowOffcanvasAsync() { await offcanvas?.ShowAsync(); } private async Task HideOffcanvasAsync() { await offcanvas?.HideAsync(); } } See demo here. info Default placement for the offcanvas component is right. Dynamic component as offcanvas​ Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic. If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @code { private Offcanvas offcanvas = default!; private string? message; private async Task ShowEmployeeComponent() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 321); await offcanvas.ShowAsync(title: \"Employee Details\", parameters: parameters); } } EmployeeDemoComponent1.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee = default!; [Parameter] public int EmployeeId { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Vikram\", LastName = \"Reddy\" }; base.OnInitialized(); } } See demo here. Pass event callbacks to a dynamic component​ Event callbacks can be passed in its parameter dictionary. In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary: The string key is the callback method's name, OnClickCallback. The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
@message
@code { private Offcanvas offcanvas = default!; private string? message; private async Task ShowEmployeeComponent() { var parameters = new Dictionary(); parameters.Add(\"EmployeeId\", 322); parameters.Add(\"OnclickCallback\", EventCallback.Factory.Create(this, ShowDTMessage)); await offcanvas.ShowAsync(title: \"Employee Details\", parameters: parameters); } private void ShowDTMessage(MouseEventArgs e) => message = $\"The current date time is: {DateTime.Now}.\"; } EmployeeDemoComponent2.razor
Employee Id :
@EmployeeId
First Name :
@employee.FirstName
Last Name :
@employee.LastName
@code { private Employee employee = default!; [Parameter] public int EmployeeId { get; set; } [Parameter] public EventCallback OnClickCallback { get; set; } protected override void OnInitialized() { // get employee with {EmployeeId} from DB employee = new Employee { FirstName = \"Sagar\", LastName = \"Reddy\" }; base.OnInitialized(); } } See demo here. Placement​ Try the top, bottom, and left examples out below. ... @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } } See demo here. Static backdrop​ When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

 @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } } See demo here. Sizes​ Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular. Small Offcanvas​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

 @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } } See demo here. Large Offcanvas​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt blandit mauris. Aliquam sit amet lorem laoreet, laoreet elit ut, placerat tellus. In mollis ultricies elit, volutpat maximus ipsum sodales interdum. Suspendisse eget tellus mollis, rutrum mauris ac, vulputate enim. Cras porta neque vitae lacinia elementum. Nunc sit amet pulvinar nibh. Curabitur interdum eget odio in tempor. Nulla dictum orci quis ligula auctor fermentum. Pellentesque finibus tellus ac massa convallis malesuada. Nam id pharetra velit, sed eleifend mi. Sed sed justo lorem. Quisque et nulla ut dolor feugiat vestibulum. Nunc at porttitor orci, at dignissim metus. Donec vitae metus vitae felis semper placerat.

Proin quis congue enim, ut ultricies erat. Nulla facilisi. Fusce pretium, metus eget tempor vehicula, nisl lorem tincidunt metus, consectetur molestie lorem leo vel lectus. Vivamus pellentesque pharetra mattis. Aenean dignissim quam non velit ultrices rutrum. Aliquam lacinia faucibus sapien vel pretium. Nullam libero massa, ultricies id lacinia nec, scelerisque ut felis. Vivamus ac egestas urna, sit amet condimentum odio. Suspendisse ultrices, libero sed interdum pulvinar, lectus felis pellentesque enim, eu finibus magna massa id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget tempor libero. Cras ut interdum purus. Donec eu pulvinar urna, ut porttitor purus. Suspendisse sed sodales nunc. Quisque posuere augue sed luctus placerat.

Morbi ullamcorper risus turpis, et ullamcorper nulla semper vitae. Proin pharetra dolor dui, non condimentum ex fermentum in. Vestibulum pharetra, risus et pulvinar eleifend, nulla tortor blandit risus, ac imperdiet elit massa quis leo. Vivamus urna lacus, luctus eget felis id, eleifend tristique nisl. Sed dignissim mollis ligula vitae laoreet. Vestibulum eget magna nisi. Aenean auctor elit et turpis blandit, eget porttitor felis suscipit. Duis placerat, sapien a sodales tempus, odio orci malesuada neque, ac molestie ipsum nisi vel eros. Integer sem lectus, luctus vitae sapien ut, efficitur aliquam sem. Praesent placerat est eros, vulputate rutrum nunc imperdiet vitae. Fusce sed felis eget purus aliquet convallis eu eget lacus. Sed finibus nec magna et accumsan. Donec vitae tellus eros. Nullam et ex vitae est sagittis malesuada. Vivamus molestie malesuada libero, a consequat magna dapibus pellentesque. Cras molestie tortor vitae congue pretium.

Pellentesque nec iaculis justo, sed pretium sem. Mauris finibus lacus at mollis fringilla. Etiam auctor in justo ac bibendum. Vestibulum at lorem accumsan, maximus erat suscipit, suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim id quam sit amet varius. Etiam pretium ultrices dignissim. Cras at tortor hendrerit metus ultrices lobortis at ac est. Suspendisse consectetur pellentesque nunc sit amet scelerisque. Maecenas feugiat nunc laoreet, auctor erat eget, ultricies ex. Aliquam nisi nulla, cursus et ante ut, interdum volutpat leo. Phasellus laoreet aliquam maximus. Vestibulum eu neque porta, consectetur ipsum non, euismod enim. Vestibulum euismod purus elit, ultrices imperdiet nisl porttitor eget. Vivamus eros turpis, tincidunt a vulputate vel, malesuada tristique nulla.

Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.

 @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } } Callback Events​ BlazorBootstrap's offcanvas component exposes a few events for hooking into offcanvas functionality.
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
 @code { private Offcanvas offcanvas; private async Task OnShowOffcanvasClick() { await offcanvas?.ShowAsync(); } private async Task OnHideOffcanvasClick() { await offcanvas?.HideAsync(); } private async Task OnOffcanvasShowingAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Showing\"); }); } private async Task OnOffcanvasShownAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Shown\"); }); } private async Task OnOffcanvasHidingAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hiding\"); }); } private async Task OnOffcanvasHiddenAsync() { await Task.Run(() => { Console.WriteLine(\"Event: Hidden\"); }); } } See demo here. Edit this page Previous Modal Next Pagination Parameters Methods Callback Events How it works Examples Offcanvas Dynamic component as offcanvas Pass event callbacks to a dynamic component Placement Static backdrop Sizes Callback Events","s":"Blazor Offcanvas","u":"/components/offcanvas","h":"","p":513},{"i":516,"t":"Components Preload On this page Blazor Preload Indicate the loading state of a page with Blazor Bootstrap preload component. Things to know when using the Preload component: Add the Preload component to your current page or your layout page. Inject PreloadService Call PreloadService.Show() before you make any call to the API. Call PreloadService.Hide() after you get the response from the API. Parameters​ Name Type Default Description Required Version Added ChildContent RenderFragment null Specifies the content to be rendered inside this. 1.1.0 LoadingText string? null Gets or sets the loading text. 1.10.4 Preload Service​ Methods​ Name Return Type Description Added Version Show(SpinnerColor spinnerColor = SpinnerColor.Light) void Shows the preload. 1.1.0 Show(SpinnerColor spinnerColor = SpinnerColor.Light, string? loadingText = null) void Shows the preload. 1.10.4 Hide() void Hides the preload. 1.1.0 Global preload service for the application​ Add the Preload component in MainLayout.razor page as shown below. @using BlazorBootstrap . . ... MainLayout.razor code goes here ... . . Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API call, respectively, as shown below. @code { [Inject] protected PreloadService PreloadService { get; set; } private void GetEmployees() { try { PreloadService.Show(); // call the service/api to get the employees } catch { // handle exception } finally { PreloadService.Hide(); } } } See Preload demo here. Change loading text​ @code { [Inject] protected PreloadService PreloadService { get; set; } private async Task ShowLoadingDataAsync() { PreloadService.Show(SpinnerColor.Light, \"Loading data...\"); await Task.Delay(3000); // call the service/api PreloadService.Hide(); } private async Task ShowSavingDataAsync() { PreloadService.Show(SpinnerColor.Light, \"Saving data...\"); await Task.Delay(3000); // call the service/api PreloadService.Hide(); } } See Preload demo here. Change spinner color​ Change the default spinner color by passing the SpinnerColor enum to the Show(...) method. In the below example, we are using a global preload service, as shown in the above section. @code { [Inject] protected PreloadService PreloadService { get; set; } private async Task ShowSpinnerAsync(SpinnerColor spinnerColor) { PreloadService.Show(spinnerColor); await Task.Delay(3000); // call the service/api PreloadService.Hide(); } } See Preload demo here. Edit this page Previous Placeholders Next Progress Parameters Preload Service Methods Global preload service for the application Change loading text Change spinner color","s":"Blazor Preload","u":"/components/preload","h":"","p":515},{"i":518,"t":"Components Placeholders On this page Blazor Placeholders Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading. PlaceholderContainer Parameters​ Name Type Description Required Default Animation PlaceholderAnimation Gets or sets the placeholder animation. PlaceholderAnimation.Glow ChildContent RenderFragment Specifies the content to be rendered inside this. Placeholder Parameters​ Name Type Description Required Default Width PlaceholderWidth Gets or sets the placeholder width. PlaceholderWidth.Col1 Color PlaceholderColor Gets or sets the placeholder color. PlaceholderColor.None Size PlaceholderSize Gets or sets the placeholder size. PlaceholderSize.None Examples​ Placeholders​ See demo here. Width​ You can change the width through PlaceholderWidth, width utilities, or inline styles. See demo here. Color​ By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum. See demo here. Sizing​ The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum. See demo here. Animation​ Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.

See demo here. Edit this page Previous Pagination Next Preload PlaceholderContainer Parameters Placeholder Parameters Examples Placeholders Width Color Sizing Animation","s":"Blazor Placeholders","u":"/components/placeholders","h":"","p":517},{"i":520,"t":"Components Progress On this page Blazor Progress Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels. Progress Parameters​ Name Type Default Required Description ChildContent RenderFragment ✔️ Specifies the content to be rendered inside this. Height double 16 Gets or sets the height of the Progress. Height is measured in pixels, and the default height is 16 pixels. ProgressBar Parameters​ Name Type Default Required Description Color ProgressColor Gets or sets the progress color. Label string Gets or sets the progress bar label. Type ProgressType Gets or sets the progress bar type. Width double Get or sets the progress bar width. ProgressBar Methods​ Name Description DecreaseWidth Decrease the progress bar width. GetWidth Get the progress bar width. IncreaseWidth Increase the progress bar width. SetColor Set the progress bar color. SetLabel Set the progress bar label. SetWidth Set the progress bar width. Examples​ How it works​ See demo here. Labels​ Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method. See demo here. Set width programmatically​ Use IncreaseWidth() or DecreaseProgressBar() methods to increase or decrease the Blazor ProgressBar width.
@code { ProgressBar progressBar; private void IncreaseProgressBar() { progressBar.IncreaseWidth(10); progressBar.SetLabel($\"{progressBar.GetWidth()}%\"); } private void DecreaseProgressBar() { progressBar.DecreaseProgressBar(10); progressBar.SetLabel($\"{progressBar.GetWidth()}%\"); } private void ResetProgressBar() { progressBar.SetWidth(0); progressBar.SetLabel($\"{progressBar.GetWidth()}%\"); } } See demo here. Height​ Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels. See demo here. Backgrounds​ Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components. See demo here. Set background programmatically​ You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.
@code { ProgressBar progressBar; private void SetColor(ProgressColor color) => progressBar.SetColor(color); } See demo here. Multiple bars​ Include multiple Blazor ProgressBar components in a Blazor Progress component if needed. See demo here. Striped​ Add Type=\"ProgressType.Striped\" to any Blazor ProgressBar component to apply a stripe. See demo here. Animated stripes​ The stripes can also be animated. Add Type=\"ProgressType.StripedAndAnimated\" to the Blazor ProgressBar component to animate the stripes right to the left. See demo here. Edit this page Previous Preload Next Sidebar Progress Parameters ProgressBar Parameters ProgressBar Methods Examples How it works Labels Set width programmatically Height Backgrounds Set background programmatically Multiple bars Striped Animated stripes","s":"Blazor Progress","u":"/components/progress","h":"","p":519},{"i":522,"t":"Components Tabs On this page Blazor Tabs Documentation and examples for how to use Blazor Bootstrap tabs components. Tabs Parameters​ Name Type Description Required Default ChildContent RenderFragment Specifies the content to be rendered inside this. EnableFadeEffect bool Gets or sets the tabs fade effect. false NavStyle NavStyle Get or sets the nav style. NavStyle.Tabs Tabs Methods​ Name Description ShowFirstTabAsync Selects the first tab and show its associated pane. ShowLastTabAsync Selects the last tab and show its associated pane. ShowTabByNameAsync(string) Selects the tab by name and show its associated pane. ShowTabByIndexAsync(int) Selects the tab by index and show its associated pane. Tab Parameters​ Name Type Description Required Default Title string Gets or sets the tab title. TitleTemplate RenderFragment Gets or sets the tab title template. Content RenderFragment Specifies the content to be rendered inside the tab. ✔️ IsActive bool Gets or sets the active tab. false Disabled bool Gets or sets the disabled. false Note Either Title or TitleTemplate is required. Examples​ Tabs​

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Fade effect​ To make tabs fade in, add EnableFadeEffect=\"true\". The first tab pane must also have IsActive=\"true\" to make the initial content visible.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Title with icon​ To customize the tab title, use TitleTemplate, as shown in the below example. Home

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

Profile

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

Contact

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Disable Tab​ Disable specific tabs by adding Disabled=\"true\" parameter.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Projects tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Pills​ Use NavStyle=\"NavStyle.Pills\" parameter to change the tabs to pills.

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next.

See demo here. Activate individual tabs​ You can activate individual tabs in several ways. Use predefined methods ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the Products tab.

This is the placeholder content for the FAQs tab.

This is the placeholder content for the About tab.

 @code{ Tabs tabs; private async Task ShowFirstTabAsync() => await tabs.ShowFirstTabAsync(); private async Task ShowSecondTabAsync() => await tabs.ShowTabByIndexAsync(1); private async Task ShowThirdTabAsync() => await tabs.ShowTabByIndexAsync(2); private async Task ShowProductsTabAsync() => await tabs.ShowTabByNameAsync(\"Products\"); private async Task ShowFaqsAsync() => await tabs.ShowTabByNameAsync(\"FAQ\"); private async Task ShowLastTabAsync() => await tabs.ShowLastTabAsync(); } See demo here. Callback Events​ When showing a new tab, the events fire in the following order: OnHiding (on the current active tab) OnShowing (on the to-be-shown tab) OnHidden (on the previous active tab, the same one as for the OnHiding event) OnShown (on the newly-active just-shown tab, the same one as for the OnShowing event) Note If no tab was already active, then the OnHiding and OnHidden events will not be fired. See demo here. Set active tab OnAfterRender​

This is the placeholder content for the Home tab.

This is the placeholder content for the Profile tab.

This is the placeholder content for the Contact tab.

This is the placeholder content for the About tab.

 @code { Tabs tabs = default!; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { string userDefaultPreferredTab = \"Profile\"; // Get the value from Service / API switch (userDefaultPreferredTab) { case \"Home\": await tabs.ShowTabByIndexAsync(0); break; case \"Profile\": await tabs.ShowTabByIndexAsync(1); break; case \"Contact\": await tabs.ShowTabByIndexAsync(2); break; case \"About\": await tabs.ShowTabByIndexAsync(3); break; default: await tabs.ShowTabByIndexAsync(0); break; } } } } See demo here. Edit this page Previous Sidebar Next Toasts Tabs Parameters Tabs Methods Tab Parameters Examples Tabs Fade effect Title with icon Disable Tab Pills Activate individual tabs Callback Events Set active tab OnAfterRender","s":"Blazor Tabs","u":"/components/tabs","h":"","p":521},{"i":524,"t":"Components Tooltips On this page Blazor Tooltips Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages. Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside this. 1.0.0 Color TooltipColor Gets or sets the tooltip color. TooltipColor.None 1.10.0 Placement TooltipPlacement Specifies the tooltip placement. Default is top right. TooltipPlacement.Top 1.0.0 Title string Displays informative text when users hover, focus, or tap an element. ✔️ 1.0.0 Examples​ Tooltips​
Tooltip Left
Tooltip Top
Tooltip Right
Tooltip Bottom
See tooltips demo here. Disabled button with tooltip​ See disabled button with tooltip demo here. Tooltip icon with click event​ @code { private void OnClick() { Console.WriteLine($\"clicked\"); } } See icon with tooltip demo here. Dynamically update the tooltip text​
Tooltip Bottom
@code { private string text = \"Tooltip text\"; private void ChangeTooltip() => text = $\"Updated {DateTime.Now.ToLongTimeString()}\"; } see demo here Edit this page Previous Toasts Next Bar Chart Parameters Examples Tooltips Disabled button with tooltip Tooltip icon with click event Dynamically update the tooltip text","s":"Blazor Tooltips","u":"/components/tooltips","h":"","p":523},{"i":526,"t":"Components Toasts On this page Blazor Toasts Push notifications to your visitors with a toast, a lightweight and easily customizable Blazor Bootstrap toast message. Blazor Toasts are lightweight notifications designed to mimic the push notifications that mobile and desktop operating systems have popularized. They're built with a flexbox, making it easy to align and position. Things to know when using the blazor toasts component: Toasts will not hide automatically if you do not specify AutoHide=\"true\". Use global toasts service for the application instead of page level toasts. Toasts Parameters​ Name Type Description Required Default Added Version AutoHide bool Auto hide the toast. false 1.0.0 Delay int Delay hiding the toast (milli seconds). 5000 1.0.0 Messages List List of all the toasts. ✔️ 1.0.0 Placement ToastsPlacement Specifies the toasts placement. ToastsPlacement.TopRight 1.0.0 ShowCloseButton bool Show close button. true 1.0.0 StackLength int Specifies the toast container maximum capacity. 5 1.0.0 ToastMessage Properties​ Name Type Description Required Default Added Version AutoHide bool Gets or sets the auto hide behavior to a message. false 1.9.0 CustomIconName string Gets or sets the custom icon name. 1.0.0 HelpText string Gets or sets the help text. 1.0.0 IconName IconName Gets or sets the bootstarp icon name. 1.0.0 Id Guid Gets the toast id. 1.0.0 Message string Gets or sets the toast message. ✔️ 1.0.0 Title string Gets or sets the toast''s message title. 1.0.0 Type ToastType Gets or sets the type of the toast. ✔️ 1.0.0 Examples:​ Toast​ To encourage extensible and predictable toasts, we recommend a header and body. Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your \"toasted\" content and strongly encourage a dismiss button. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) => new ToastMessage { Type = toastType, Title = \"Blazor Bootstrap\", HelpText = $\"{DateTime.Now}\", Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\", }; } See toasts demo here. Toast without title​ Customize your toasts by removing sub-components, tweaking them with utilities. Here we've created a simple toast. You can create different toast color schemes with the Color parameter. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) => new ToastMessage { Type = toastType, Message = $\"Hello, world! This is a simple toast message. DateTime: {DateTime.Now}\", }; } See toasts without title demo here. Auto hide​ Add AutoHide=\"true\" parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) => new ToastMessage { Type = toastType, Title = \"Blazor Bootstrap\", HelpText = $\"{DateTime.Now}\", Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\", }; } See auto hide toasts demo here. Auto hide individual messages​ Set AutoHide=\"true\" property on ToastMessage to hide individual Blazor Toast message after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast. In the below example, AutoHide=\"false\" for Danger and Warning messages. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) { var toastMessage = new ToastMessage(); toastMessage.Type = toastType; toastMessage.Title = \"Blazor Bootstrap\"; toastMessage.HelpText = $\"{DateTime.Now}\"; toastMessage.Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\"; // disable auto hide for `danger` and `warning` messages. toastMessage.AutoHide = !(toastType == ToastType.Danger || toastType == ToastType.Warning); return toastMessage; } } See auto hide individual toasts demo here. Placement​ Change the Blazor Toasts placement according to your need. The default placement will be top right corner. Use the ToastsPlacement parameter to update the Blazor Toasts placement. @code { ToastsPlacement toastsPlacement = ToastsPlacement.TopRight; List messages = new(); private void ChangePlacement(ToastsPlacement placement) { if (!messages.Any()) { messages.Add( new ToastMessage() { Type = ToastType.Success, Title = \"Blazor Bootstrap\", HelpText = $\"{DateTime.Now}\", Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\", }); } toastsPlacement = placement; } } See demo here. Stack Length​ Blazor Toasts component shows a maximum of 5 toasts by default. If you add a new toast to the existing list, the first toast gets deleted like FIFO (First In First Out). Change the maximum capacity according to your need by using the StackLength parameter. In the below example, StackLength is set to 3. It shows a maximum of 3 toast messages at any time. @code { List messages = new List(); private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType)); private ToastMessage CreateToastMessage(ToastType toastType) => new ToastMessage { Type = toastType, Title = \"Blazor Bootstrap\", HelpText = $\"{DateTime.Now}\", Message = $\"Hello, world! This is a toast message. DateTime: {DateTime.Now}\", }; } See demo here. Global toasts service for the application​ Add the Toasts component in MainLayout.razor page as shown below. @inherits LayoutComponentBase ... ... MainLayour.razor code goes here ... ... tip Set the Toasts component parameters as per your requirement. Inject ToastService, then call the Notify(...) method as shown below. @code { [Inject] protected ToastService ToastService { get; set; } private void SaveEmployee() { try { // TODO: call the service/api to save the employee details ToastService.Notify(new(ToastType.Success, $\"Employee details saved successfully.\")); } catch(Exception ex) { // handle exception ToastService.Notify(new(ToastType.Danger, $\"Error: {ex.Message}.\")); } } } Edit this page Previous Tabs Next Tooltips Toasts Parameters ToastMessage Properties Examples: Toast Toast without title Auto hide Auto hide individual messages Placement Stack Length Global toasts service for the application","s":"Blazor Toasts","u":"/components/toasts","h":"","p":525},{"i":528,"t":"Content Icons On this page Blazor Icons Blazor Bootstrap icon component will display an icon from any icon font. Prerequisites​ Install Bootstrap Icons or other. Refer: Bootstrap Icons Include the icon fonts stylesheet in your website or @import in CSS from CDN. Parameters​ Name Type Description Required Default Added Version Color IconColor Gets or sets the icon color. IconColor.None 1.9.0 CustomIconName string Specify custom icons of your own, like fontawesome. Example: fas fa-alarm-clock ✔️ 1.0.0 Name IconName Gets or sets the icon name. ✔️ 1.0.0 Size IconSize Gets or sets the icon size. IconSize.None 1.0.0 NOTE Either Name or CustomIconName parameter is mandatory. For Font Awesome setup, please follow the Font Awesome website. Examples​ Icons​ See icons demo here. Sizes​ See icons with different size demo here. Font awesome icons​ In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website. Colors​ See icons with different size demo here. Inline text with icon​ Inline text See inline text with icon demo here. Link with icon​ Example link text See link with icon demo here. Link with custom icon​ Example link text See link with custom icon demo here. Button with icon and text​ See button with icon and text demo here. Button with icon only​ See button with icon only demo here. Button with font awesome icon​ In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website. Icon with tooltip​ Bootstrap Icons​ See all bootstrap icons demo here. Edit this page Previous Blazor Server Next Auto Complete Prerequisites Parameters Examples Icons Sizes Font awesome icons Colors Inline text with icon Link with icon Link with custom icon Button with icon and text Button with icon only Button with font awesome icon Icon with tooltip Bootstrap Icons","s":"Blazor Icons","u":"/content/icons","h":"","p":527},{"i":530,"t":"Data Visualization Doughnut Chart On this page Blazor Doughnut Chart A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category. Parameters​ Name Type Default Required Description Added Version Height int Gets or sets chart height. 1.0.0 Width int Get or sets chart width. 1.0.0 Methods​ Name Return type Description Added Version AddDataAsync ChartData Adds data to bar chart. 1.10.0 AddDatasetAsync ChartData Adds dataset to bar chart. 1.10.0 InitializeAsync Task Initialize Bar Chart. 1.0.0 UpdateAsync Task Update Bar Chart. 1.0.0 ChartData Members​ Property Name Type Default Required Description Added Version Datasets List null ✔️ Gets or sets the Datasets. 1.0.0 Labels List null ✔️ Gets or sets the Labels. 1.0.0 DoughnutChartDataset Members​ info DoughnutChartDataset implements IChartDataset. Property Name Type Default Required Description Added Version BackgroundColor List null Get or sets the BackgroundColor. 1.0.0 BorderColor List null Get or sets the BorderColor. 1.0.0 BorderWidth List null Get or sets the BorderWidth. 1.0.0 Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0 Data List null Get or sets the Data. 1.0.0 Datalabels DoughnutChartDatasetDataLabels Get or sets the data labels Hidden bool false Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. 1.0.0 HoverBackgroundColor List null ✔️ Get or sets the HoverBackgroundColor. 1.0.0 HoverBorderColor List null ✔️ Get or sets the HoverBorderColor. 1.0.0 HoverBorderWidth List null ✔️ Get or sets the HoverBorderWidth. 1.0.0 Label string null The label for the dataset which appears in the legend and tooltips. 1.0.0 Type string null ✔️ Get or sets the chart type. 1.0.0 DoughnutChartDatasetDataLabels Members​ Property Name Type Default Required Description Added Version Anchor string? center Gets or sets the anchor. 1.10.2 BorderWidth double? 2 Gets or sets the border width. 1.10.2 DoughnutChartOptions Members​ info DoughnutChartOptions implements ChartOptions. Property Name Type Default Required Description Added Version Locale string? Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. 1.10.0 Plugins DoughnutChartPlugins Gets or sets the Plugins. 1.10.2 Responsive bool false Gets or sets the Responsive. 1.0.0 Examples​ Prerequisites​ Refer to the getting started guide for setting up charts. How it works​ In the following example, a categorical 12-color palette is used. tip For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. @code { private DoughnutChart doughnutChart = default!; private DoughnutChartOptions doughnutChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; doughnutChartOptions = new(); doughnutChartOptions.Responsive = true; doughnutChartOptions.Plugins.Title.Text = \"2022 - Sales\"; doughnutChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await doughnutChart.InitializeAsync(chartData, doughnutChartOptions); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset && doughnutChartDataset is not null && doughnutChartDataset.Data is not null) { var count = doughnutChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(0, 100)); } doughnutChartDataset.Data = newData; newDatasets.Add(doughnutChartDataset); } } chartData.Datasets = newDatasets; await doughnutChart.UpdateAsync(chartData, doughnutChartOptions); } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; var chartDataset = GetRandomDoughnutChartDataset(); chartData = await doughnutChart.AddDatasetAsync(chartData, chartDataset, doughnutChartOptions); } private async Task AddDataAsync() { if (dataLabelsCount >= 12) return; if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset) { data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } } chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomDoughnutChartDataset()); } return datasets; } private DoughnutChartDataset GetRandomDoughnutChartDataset() { datasetsCount += 1; return new() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $\"Product {dataLabelsCount + 1}\"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } See the demo here. Locale​ By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). @using BlazorBootstrap.Extensions @using Color = System.Drawing.Color @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" }; var datasets = new List(); var dataset1 = new LineChartDataset() { Label = \"Windows\", Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[0] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset1); var dataset2 = new LineChartDataset() { Label = \"macOS\", Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[1] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset2); var dataset3 = new LineChartDataset() { Label = \"Other\", Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[2] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; lineChartOptions = new(); lineChartOptions.Locale = \"de-DE\"; lineChartOptions.Responsive = true; lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; lineChartOptions.Scales.X.Title.Text = \"2019\"; lineChartOptions.Scales.X.Title.Display = true; lineChartOptions.Scales.Y.Title.Text = \"Visitors\"; lineChartOptions.Scales.Y.Title.Display = true; lineChartOptions.Plugins.Title.Text = \"Operating system\"; lineChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await lineChart.InitializeAsync(chartData, lineChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Data labels​ @code { private DoughnutChart doughnutChart = default!; private DoughnutChartOptions doughnutChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) }; doughnutChartOptions = new(); doughnutChartOptions.Responsive = true; doughnutChartOptions.Plugins.Title.Text = \"2022 - Sales\"; doughnutChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // pass the plugin name to enable the data labels await doughnutChart.InitializeAsync(chartData: chartData, chartOptions: doughnutChartOptions, plugins: new string[] { \"ChartDataLabels\" }); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); var datasetIndex = 0; foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset && doughnutChartDataset is not null && doughnutChartDataset.Data is not null) { var count = doughnutChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(0, 100)); } doughnutChartDataset.Data = newData; newDatasets.Add(doughnutChartDataset); } } chartData.Datasets = newDatasets; await doughnutChart.UpdateAsync(chartData: chartData, chartOptions: doughnutChartOptions); } private async Task AddDataAsync() { if (dataLabelsCount >= 12) return; if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset) { data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } } chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { var dataset = GetRandomDoughnutChartDataset(); if (index == 0) dataset.Datalabels.Anchor = \"end\"; else if (index == numberOfDatasets - 1) dataset.Datalabels.Anchor = \"start\"; else dataset.Datalabels.Anchor = \"center\"; datasets.Add(dataset); } return datasets; } private DoughnutChartDataset GetRandomDoughnutChartDataset() { datasetsCount += 1; return new() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $\"Product {dataLabelsCount + 1}\"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } See the demo here. Edit this page Previous Bar Chart Next Line Chart Parameters Methods ChartData Members DoughnutChartDataset Members DoughnutChartDatasetDataLabels Members DoughnutChartOptions Members Examples Prerequisites How it works Locale Data labels","s":"Blazor Doughnut Chart","u":"/data-visualization/doughnut-chart","h":"","p":529},{"i":532,"t":"Data Visualization Bar Chart On this page Blazor Bar Chart A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side. Parameters​ Name Type Description Required Default Added Version Height int Gets or sets chart height. 1.0.0 Width int Gets or sets chart width. 1.0.0 Methods​ Name Return type Description Added Version AddDataAsync ChartData Adds data to bar chart. 1.10.0 AddDatasetAsync ChartData Adds dataset to bar chart. 1.10.0 InitializeAsync Task Initialize Bar Chart. 1.0.0 UpdateAsync Task Update Bar Chart. 1.0.0 ChartData Members​ Property Name Type Default Required Description Added Version Datasets List null ✔️ Gets or sets the Datasets. 1.0.0 Labels List null ✔️ Gets or sets the Labels. 1.0.0 BarChartDataset Members​ info BarChartDataset implements IChartDataset. Property Name Type Default Required Description Added Version BackgroundColor List null Get or sets the BackgroundColor. 1.0.0 BarPercentage double 0.8 Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. 1.0.0 BorderColor List null Get or sets the BorderColor. 1.0.0 BorderRadius int 0 Border radius. 1.0.0 BorderWidth List null Get or sets the BorderWidth. 1.0.0 CategoryPercentage double 0.8 Percent (0-1) of the available width each category should be within the sample width. 1.0.0 Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0 Datalabels BarChartDatasetDataLabels Get or sets the data labels Data List null Get or sets the Data. 1.0.0 Hidden bool false Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. 1.0.0 HoverBackgroundColor List null ✔️ Get or sets the HoverBackgroundColor. 1.0.0 HoverBorderColor List null ✔️ Get or sets the HoverBorderColor. 1.0.0 HoverBorderWidth List null ✔️ Get or sets the HoverBorderWidth. 1.0.0 Label string null The label for the dataset which appears in the legend and tooltips. 1.0.0 Type string null ✔️ Get or sets the chart type. 1.0.0 XAxisID string null The ID of the x axis to plot this dataset on. 1.0.0 YAxisID string null The ID of the y axis to plot this dataset on. 1.0.0 BarChartDatasetDataLabels Members​ Property Name Type Default Required Description Added Version Align string? center Gets or sets the align. 1.10.2 Anchor string? center Gets or sets the anchor. 1.10.2 BarChartOptions Members​ info BarChartOptions implements ChartOptions. Property Name Type Default Required Description Added Version IndexAxis string x The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. 1.0.0 Interaction Interaction Gets or sets the Interaction. 1.0.0 Layout ChartLayout Gets or sets the ChartLayout. 1.0.0 Locale string? Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. 1.10.0 Plugins BarChartPlugins Gets or sets the Plugins. 1.10.2 Responsive bool false Gets or sets the Responsive. 1.0.0 Scales Scales Gets or sets the Scales. 1.0.0 Examples​ Prerequisites​ Refer to the getting started guide for setting up charts. How it works​ In the following example, a categorical 12-color palette is used. tip For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; private int datasetsCount = 0; private int labelsCount = 0; private string[] months = { \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" }; private Random random = new(); protected override void OnInitialized() { chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await barChart.InitializeAsync(chartData, barChartOptions); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is BarChartDataset barChartDataset && barChartDataset is not null && barChartDataset.Data is not null) { var count = barChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(200)); } barChartDataset.Data = newData; newDatasets.Add(barChartDataset); } } chartData.Datasets = newDatasets; await barChart.UpdateAsync(chartData, barChartOptions); } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; if (datasetsCount >= 12) return; var chartDataset = GetRandomBarChartDataset(); chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions); } private async Task AddDataAsync() { if (chartData is null || chartData.Datasets is null) return; if (labelsCount >= 12) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is BarChartDataset barChartDataset) data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200))); } chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data); } private async Task ShowHorizontalBarChartAsync() { barChartOptions.IndexAxis = \"y\"; await barChart.UpdateAsync(chartData, barChartOptions); } private async Task ShowVerticalBarChartAsync() { barChartOptions.IndexAxis = \"x\"; await barChart.UpdateAsync(chartData, barChartOptions); } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomBarChartDataset()); } return datasets; } private BarChartDataset GetRandomBarChartDataset() { var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); datasetsCount += 1; return new BarChartDataset() { Label = $\"Product {datasetsCount}\", Data = GetRandomData(), BackgroundColor = new List { c.ToRgbString() }, BorderColor = new List { c.ToRgbString() }, BorderWidth = new List { 0 }, }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < labelsCount; index++) { data.Add(random.Next(200)); } return data; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); } return labels; } private string GetNextDataLabel() { labelsCount += 1; return months[labelsCount - 1]; } #endregion Data Preparation } See the demo here. Horizontal bar chart​ @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var labels = new List { \"Chrome\", \"Firefox\", \"Safari\", \"Edge\" }; var datasets = new List(); var dataset1 = new BarChartDataset() { Data = new List { 55000, 15000, 18000, 21000 }, BackgroundColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, BorderColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset1); chartData = new ChartData { Labels = labels, Datasets = datasets }; barChartOptions = new BarChartOptions(); barChartOptions.Responsive = true; barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = \"y\"; barChartOptions.Scales.X.Title.Text = \"Visitors\"; barChartOptions.Scales.X.Title.Display = true; barChartOptions.Scales.Y.Title.Text = \"Browser\"; barChartOptions.Scales.Y.Title.Display = true; barChartOptions.Plugins.Legend.Display = false; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await barChart.InitializeAsync(chartData, barChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Stacked bar chart​ @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"Chrome\", \"Firefox\", \"Safari\", \"Edge\" }; var datasets = new List(); var dataset1 = new BarChartDataset() { Label = \"Windows\", Data = new List { 28000, 8000, 2000, 17000 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset1); var dataset2 = new BarChartDataset() { Label = \"macOS\", Data = new List { 8000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset2); var dataset3 = new BarChartDataset() { Label = \"Other\", Data = new List { 28000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; barChartOptions = new(); barChartOptions.Responsive = true; barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = \"y\"; barChartOptions.Scales.X.Title.Text = \"Visitors\"; barChartOptions.Scales.X.Title.Display = true; barChartOptions.Scales.Y.Title.Text = \"Browser\"; barChartOptions.Scales.Y.Title.Display = true; barChartOptions.Scales.X.Stacked = true; barChartOptions.Scales.Y.Stacked = true; barChartOptions.Plugins.Title.Text = \"Operating system\"; barChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await barChart.InitializeAsync(chartData, barChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Locale​ By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"Chrome\", \"Firefox\", \"Safari\", \"Edge\" }; var datasets = new List(); var dataset1 = new BarChartDataset() { Label = \"Windows\", Data = new List { 28000, 8000, 2000, 17000 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset1); var dataset2 = new BarChartDataset() { Label = \"macOS\", Data = new List { 8000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset2); var dataset3 = new BarChartDataset() { Label = \"Other\", Data = new List { 28000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; barChartOptions = new(); barChartOptions.Locale = \"de-DE\"; barChartOptions.Responsive = true; barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = \"y\"; barChartOptions.Scales.X.Title.Text = \"Visitors\"; barChartOptions.Scales.X.Title.Display = true; barChartOptions.Scales.Y.Title.Text = \"Browser\"; barChartOptions.Scales.Y.Title.Display = true; barChartOptions.Scales.X.Stacked = true; barChartOptions.Scales.Y.Stacked = true; barChartOptions.Plugins.Title.Text = \"Operating system\"; barChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await barChart.InitializeAsync(chartData, barChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Data labels​ @code { private BarChart barChart = default!; private BarChartOptions barChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"Chrome\", \"Firefox\", \"Safari\", \"Edge\" }; var datasets = new List(); var dataset1 = new BarChartDataset() { Label = \"Windows\", Data = new List { 28000, 8000, 2000, 17000 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset1); var dataset2 = new BarChartDataset() { Label = \"macOS\", Data = new List { 8000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset2); var dataset3 = new BarChartDataset() { Label = \"Other\", Data = new List { 28000, 10000, 14000, 8000 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 0 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; barChartOptions = new(); barChartOptions.Responsive = true; barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = \"y\"; barChartOptions.Scales.X.Title.Text = \"Visitors\"; barChartOptions.Scales.X.Title.Display = true; barChartOptions.Scales.Y.Title.Text = \"Browser\"; barChartOptions.Scales.Y.Title.Display = true; barChartOptions.Scales.X.Stacked = true; barChartOptions.Scales.Y.Stacked = true; barChartOptions.Plugins.Title.Text = \"Operating system\"; barChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // pass the plugin name to enable the data labels await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { \"ChartDataLabels\" }); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Edit this page Previous Tooltips Next Doughnut Chart Parameters Methods ChartData Members BarChartDataset Members BarChartDatasetDataLabels Members BarChartOptions Members Examples Prerequisites How it works Horizontal bar chart Stacked bar chart Locale Data labels","s":"Blazor Bar Chart","u":"/data-visualization/bar-chart","h":"","p":531},{"i":534,"t":"Data Visualization Pie Chart On this page Blazor Pie Chart A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. Parameters​ Name Type Default Required Description Added Version Height int Gets or sets chart height. 1.0.0 Width int Get or sets chart width. 1.0.0 Methods​ Name Return type Description Added Version AddDataAsync ChartData Adds data to bar chart. 1.10.0 AddDatasetAsync ChartData Adds dataset to bar chart. 1.10.0 InitializeAsync Task Initialize Bar Chart. 1.0.0 UpdateAsync Task Update Bar Chart. 1.0.0 ChartData Members​ Property Name Type Default Required Description Added Version Labels List null ✔️ Gets or sets the Labels. 1.0.0 Datasets List null ✔️ Gets or sets the Datasets. 1.0.0 PieChartDataset Members​ info PieChartDataset implements IChartDataset. Property Name Type Default Required Description Added Version BackgroundColor List null Get or sets the BackgroundColor. 1.0.0 BorderColor List null Get or sets the BorderColor. 1.0.0 BorderWidth List null Get or sets the BorderWidth. 1.0.0 Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0 Data List null Get or sets the Data. 1.0.0 Datalabels PieChartDatasetDataLabels Get or sets the data labels Hidden bool false Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. 1.0.0 HoverBackgroundColor List null ✔️ Get or sets the HoverBackgroundColor. 1.0.0 HoverBorderColor List null ✔️ Get or sets the HoverBorderColor. 1.0.0 HoverBorderWidth List null ✔️ Get or sets the HoverBorderWidth. 1.0.0 Type string null ✔️ Get or sets the chart type. 1.0.0 PieChartDatasetDataLabels Members​ Property Name Type Default Required Description Added Version Anchor string? center Gets or sets the anchor. 1.10.2 BorderWidth double? 2 Gets or sets the border width. 1.10.2 PieChartOptions Members​ info PieChartOptions implements ChartOptions. Property Name Type Default Required Description Added Version Locale string? Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. 1.10.0 Plugins PieChartPlugins Gets or sets the Plugins. 1.10.2 Responsive bool false Gets or sets the Responsive. 1.0.0 Examples​ Prerequisites​ Refer to the getting started guide for setting up charts. How it works​ In the following example, a categorical 12-color palette is used. tip For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. @code { private PieChart pieChart = default!; private PieChartOptions pieChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; pieChartOptions = new(); pieChartOptions.Responsive = true; pieChartOptions.Plugins.Title.Text = \"2022 - Sales\"; pieChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await pieChart.InitializeAsync(chartData, pieChartOptions); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset && pieChartDataset is not null && pieChartDataset.Data is not null) { var count = pieChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(0, 100)); } pieChartDataset.Data = newData; newDatasets.Add(pieChartDataset); } } chartData.Datasets = newDatasets; await pieChart.UpdateAsync(chartData, pieChartOptions); } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; var chartDataset = GetRandomPieChartDataset(); chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions); } private async Task AddDataAsync() { if (dataLabelsCount >= 12) return; if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset) data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomPieChartDataset()); } return datasets; } private PieChartDataset GetRandomPieChartDataset() { datasetsCount += 1; return new() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $\"Product {dataLabelsCount + 1}\"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } See the demo here. Data labels​ @code { private PieChart pieChart = default!; private PieChartOptions pieChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) }; pieChartOptions = new(); pieChartOptions.Responsive = true; pieChartOptions.Plugins.Title.Text = \"2022 - Sales\"; pieChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // pass the plugin name to enable the data labels await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { \"ChartDataLabels\" }); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset && pieChartDataset is not null && pieChartDataset.Data is not null) { var count = pieChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(0, 100)); } pieChartDataset.Data = newData; newDatasets.Add(pieChartDataset); } } chartData.Datasets = newDatasets; await pieChart.UpdateAsync(chartData, pieChartOptions); } private async Task AddDataAsync() { if (dataLabelsCount >= 12) return; if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset) data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { var dataset = GetRandomPieChartDataset(); if (index == 0) dataset.Datalabels.Anchor = \"end\"; else if (index == numberOfDatasets - 1) dataset.Datalabels.Anchor = \"end\"; else dataset.Datalabels.Anchor = \"center\"; datasets.Add(dataset); } return datasets; } private PieChartDataset GetRandomPieChartDataset() { datasetsCount += 1; return new() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $\"Product {dataLabelsCount + 1}\"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } See the demo here. Edit this page Previous Line Chart Next Modal Service Parameters Methods ChartData Members PieChartDataset Members PieChartDatasetDataLabels Members PieChartOptions Members Examples Prerequisites How it works Data labels","s":"Blazor Pie Chart","u":"/data-visualization/pie-chart","h":"","p":533},{"i":536,"t":"Data Visualization Line Chart On this page Blazor Line Chart A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value. Parameters​ Name Type Default Required Description Added Version Height int Gets or sets chart height. 1.0.0 Width int Get or sets chart width. 1.0.0 Methods​ Name Return type Description Added Version AddDataAsync ChartData Adds data to bar chart. 1.10.0 AddDatasetAsync ChartData Adds dataset to bar chart. 1.10.0 InitializeAsync Task Initialize Bar Chart. 1.0.0 UpdateAsync Task Update Bar Chart. 1.0.0 ChartData Members​ Property Name Type Default Required Description Added Version Labels List null ✔️ Gets or sets the Labels. 1.0.0 Datasets List null ✔️ Gets or sets the Datasets. 1.0.0 LineChartDataset Members​ info LineChartDataset implements IChartDataset. Property Name Type Default Required Description Added Version BackgroundColor List null Get or sets the BackgroundColor. 1.0.0 BorderColor List null Get or sets the BorderColor. 1.0.0 BorderDash List null Line dash. 1.0.0 BorderDashOffset double 0.0 Line dash offset. 1.0.0 BorderWidth List null Get or sets the BorderWidth. 1.0.0 Clip string null How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} 1.0.0 Data List null Get or sets the Data. 1.0.0 Datalabels LineChartDatasetDataLabels Get or sets the data labels Fill bool false Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end. 1.0.0 Hidden bool false Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. 1.0.0 HoverBackgroundColor List null ✔️ Get or sets the HoverBackgroundColor. 1.0.0 HoverBorderColor List null ✔️ Get or sets the HoverBorderColor. 1.0.0 HoverBorderDash List null Hover line dash. 1.0.0 HoverBorderWidth List null ✔️ Get or sets the HoverBorderWidth. 1.0.0 Label string null The label for the dataset which appears in the legend and tooltips. 1.0.0 PointBackgroundColor List new List { \"rgba(0, 0, 0, 0.1)\" } The fill color for points. 1.0.0 PointBorderColor List new List { \"rgba(0, 0, 0, 0.1)\" } The border color for points. 1.0.0 PointBorderWidth List new List { 1 } The width of the point border in pixels. 1.0.0 PointHitRadius List new List { 1 } The pixel size of the non-displayed point that reacts to mouse events. 1.0.0 PointHoverBackgroundColor List null Point background color when hovered. 1.0.0 PointHoverBorderColor List null Point border color when hovered. 1.0.0 PointHoverBorderWidth List new List { 1 } Border width of point when hovered. 1.0.0 PointHoverRadius new List new List { 1 } The radius of the point when hovered. 1.0.0 PointRadius List new List { 1 } The radius of the point shape. If set to 0, the point is not rendered. 1.0.0 PointRotation List new List { 0 } The rotation of the point in degrees. 1.0.0 PointStyle List new List { \"circle\" } Style of the point. Use 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style the point. 1.0.0 ShowLine bool true If false, the lines between points are not drawn. 1.0.0 SpanGaps bool false If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used. 1.0.0 Stepped bool false true to show the line as a stepped line (tension will be ignored). 1.0.0 Tension double 0.2 Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used. 1.0.0 Type string null ✔️ Get or sets the chart type. 1.0.0 XAxisID string null The ID of the x axis to plot this dataset on. 1.0.0 YAxisID string null The ID of the y axis to plot this dataset on. 1.0.0 LineChartDatasetDataLabels Members​ Property Name Type Default Required Description Added Version Align string? start Gets or sets the align. 1.10.2 Anchor string? start Gets or sets the anchor. 1.10.2 LineChartOptions Members​ info LineChartOptions implements ChartOptions. Property Name Type Default Required Description Added Version IndexAxis string x The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. 1.0.0 Interaction Interaction Gets or sets the Interaction. 1.0.0 Layout ChartLayout Gets or sets the ChartLayout. 1.0.0 Locale string? Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. 1.10.0 Plugins LineChartPlugins Gets or sets the Plugins. 1.10.2 Responsive bool false Gets or sets the Responsive. 1.0.0 Scales Scales Gets or sets the Scales. 1.0.0 Examples​ Prerequisites​ Refer to the getting started guide for setting up charts. How it works​ In the following example, a categorical 12-color palette is used. tip For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. @using BlazorBootstrap.Extensions @using Color = System.Drawing.Color @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; private int datasetsCount = 0; private int labelsCount = 0; private Random random = new(); protected override void OnInitialized() { chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await lineChart.InitializeAsync(chartData, lineChartOptions); } await base.OnAfterRenderAsync(firstRender); } private async Task RandomizeAsync() { if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; var newDatasets = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is LineChartDataset lineChartDataset && lineChartDataset is not null && lineChartDataset.Data is not null) { var count = lineChartDataset.Data.Count; var newData = new List(); for (var i = 0; i < count; i++) { newData.Add(random.Next(200)); } lineChartDataset.Data = newData; newDatasets.Add(lineChartDataset); } } chartData.Datasets = newDatasets; await lineChart.UpdateAsync(chartData, lineChartOptions); } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; var chartDataset = GetRandomLineChartDataset(); chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions); } private async Task AddDataAsync() { if (chartData is null || chartData.Datasets is null) return; var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is LineChartDataset lineChartDataset) data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200))); } chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data); } private async Task ShowHorizontalLineChartAsync() { lineChartOptions.IndexAxis = \"y\"; await lineChart.UpdateAsync(chartData, lineChartOptions); } private async Task ShowVerticalLineChartAsync() { lineChartOptions.IndexAxis = \"x\"; await lineChart.UpdateAsync(chartData, lineChartOptions); } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomLineChartDataset()); } return datasets; } private LineChartDataset GetRandomLineChartDataset() { var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); datasetsCount += 1; return new LineChartDataset() { Label = $\"Team {datasetsCount}\", Data = GetRandomData(), BackgroundColor = new List { c.ToRgbString() }, BorderColor = new List { c.ToRgbString() }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { c.ToRgbString() }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < labelsCount; index++) { data.Add(random.Next(200)); } return data; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); } return labels; } private string GetNextDataLabel() { labelsCount += 1; return $\"Day {labelsCount}\"; } #endregion Data Preparation } Another example​ @using BlazorBootstrap.Extensions @using Color = System.Drawing.Color @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" }; var datasets = new List(); var dataset1 = new LineChartDataset() { Label = \"Windows\", Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[0] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset1); var dataset2 = new LineChartDataset() { Label = \"macOS\", Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[1] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset2); var dataset3 = new LineChartDataset() { Label = \"Other\", Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[2] }, PointRadius = new List { 0 }, // hide points PointHoverRadius = new List { 4 }, }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; lineChartOptions = new(); lineChartOptions.Responsive = true; lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; lineChartOptions.Scales.X.Title.Text = \"2019\"; lineChartOptions.Scales.X.Title.Display = true; lineChartOptions.Scales.Y.Title.Text = \"Visitors\"; lineChartOptions.Scales.Y.Title.Display = true; lineChartOptions.Plugins.Title.Text = \"Operating system\"; lineChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await lineChart.InitializeAsync(chartData, lineChartOptions); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Data labels​ @code { private LineChart lineChart = default!; private LineChartOptions lineChartOptions = default!; private ChartData chartData = default!; protected override void OnInitialized() { var colors = ColorBuilder.CategoricalTwelveColors; var labels = new List { \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" }; var datasets = new List(); var dataset1 = new LineChartDataset { Label = \"Windows\", Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, BackgroundColor = new List { colors[0] }, BorderColor = new List { colors[0] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[0] }, PointRadius = new List { 3 }, // show points PointHoverRadius = new List { 4 }, // datalabels Datalabels = new() { Align = \"end\", Anchor = \"end\" } }; datasets.Add(dataset1); var dataset2 = new LineChartDataset { Label = \"macOS\", Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, BackgroundColor = new List { colors[1] }, BorderColor = new List { colors[1] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[1] }, PointRadius = new List { 3 }, // show points PointHoverRadius = new List { 4 }, // datalabels Datalabels = new() { Align = \"end\", Anchor = \"end\" } }; datasets.Add(dataset2); var dataset3 = new LineChartDataset { Label = \"Other\", Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, BackgroundColor = new List { colors[2] }, BorderColor = new List { colors[2] }, BorderWidth = new List { 2 }, HoverBorderWidth = new List { 4 }, PointBackgroundColor = new List { colors[2] }, PointRadius = new List { 3 }, // show points PointHoverRadius = new List { 4 }, // datalabels Datalabels = new() { Align = \"start\", Anchor = \"start\" } }; datasets.Add(dataset3); chartData = new ChartData { Labels = labels, Datasets = datasets }; lineChartOptions = new(); lineChartOptions.Responsive = true; lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; lineChartOptions.Scales.X.Title.Text = \"2019\"; lineChartOptions.Scales.X.Title.Display = true; lineChartOptions.Scales.Y.Title.Text = \"Visitors\"; lineChartOptions.Scales.Y.Title.Display = true; lineChartOptions.Plugins.Title.Text = \"Operating system\"; lineChartOptions.Plugins.Title.Display = true; // datalabels lineChartOptions.Plugins.Datalabels.Color = \"white\"; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { // pass the plugin name to enable the data labels await lineChart.InitializeAsync(chartData: chartData, chartOptions: lineChartOptions, plugins: new string[] { \"ChartDataLabels\" }); } await base.OnAfterRenderAsync(firstRender); } } See the demo here. Edit this page Previous Doughnut Chart Next Pie Chart Parameters Methods ChartData Members LineChartDataset Members LineChartDatasetDataLabels Members LineChartOptions Members Examples Prerequisites How it works Another example Data labels","s":"Blazor Line Chart","u":"/data-visualization/line-chart","h":"","p":535},{"i":538,"t":"Forms Auto Complete On this page Blazor Auto Complete Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering. Parameters​ Name Type Default Required Description Added Version DataProvider delegate null ✔️ DataProvider is for items to render. The provider should always return an instance of AutoCompleteDataProviderResult, and null is not allowed. 0.4.0 Disabled bool false Is AutoComplete disabled. 0.4.0 EmptyText string No records found. ✔️ Gets or sets the empty text. 1.10.2 LoadingText string Loading... ✔️ Gets or sets the loading text. 1.10.2 Placeholder string null AutoComplete placeholder. 0.4.0 PropertyName string null ✔️ AutoComplete data text property name. 0.4.0 Size enum AutoCompleteSize.Default Use AutoCompleteSize.Default or AutoCompleteSize.Large or AutoCompleteSize.Small 0.4.0 StringComparison enum StringComparison.OrdinalIgnoreCase Specifies the culture, case, and sort rules to be used. Use StringComparison.CurrentCulture or StringComparison.CurrentCultureIgnoreCase or StringComparison.InvariantCulture or StringComparison.InvariantCultureIgnoreCase or StringComparison.Ordinal or StringComparison.OrdinalIgnoreCase. 0.4.1 StringFilterOperator enum StringFilterOperator.Contains Use StringFilterOperator.Equals or StringFilterOperator.Contains or StringFilterOperator.StartsWith or StringFilterOperator.EndsWith 0.4.1 Value string null ✔️ AutoComplete value. 0.4.0 ValueExpression expression null AutoComplete value expression. 0.4.0 Methods​ Name Returns Description Added Version Disable() void Disables autocomplete. 0.4.0 Enable() void Enables autocomplete. 0.4.0 RefreshDataAsync() Task Refresh the autocomplete data. 0.4.0 ResetAsync() Task Resets the autocomplete selection. 0.4.0 Events​ Name Description Added Version OnChanged This event fires immediately when the autocomplete selection changes by the user. 0.4.0 ValueChanged This event fires on every user keystroke that changes the textbox value. 0.4.0 Keyboard Navigation​ Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions. Key Description Added Version Esc Closes the popup list when it is in an open state. 1.3.1 Up arrow Focuses on the previous item in the list. 1.3.1 Down arrow Focuses on the next item in the list. 1.3.1 Home Focuses on the first item in the list. 1.3.1 End Focuses on the last item in the list. 1.3.1 Enter Selects the currently focused item. 1.3.1 Examples​ Client side data​
OnAutoCompleteChanged(customer)\" />
@code { private string customerName; public IEnumerable customers; private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { if (customers is null) // pull customers only one time for client-side autocomplete customers = GetCustomers(); // call a service or an API to pull the customers return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName))); } private IEnumerable GetCustomers() { return new List { new(1, \"Pich S\"), new(2, \"sfh Sobi\"), new(3, \"Jojo chan\"), new(4, \"Jee ja\"), new(5, \"Rose Canon\"), new(6, \"Manju A\"), new(7, \"Bandita PA\"), new(8, \"Sagar Adil\"), new(9, \"Isha Wang\"), new(10, \"Daina JJ\"), new(11, \"Komala Mug\"), new(12, \"Dikshita BD\"), new(13, \"Neha Gosar\"), new(14, \"Preeti S\"), new(15, \"Sagar Seth\"), new(16, \"Vinayak MM\"), new(17, \"Vijaya Lakhsmi\"), new(18, \"Jahan K\"), new(19, \"Joy B\"), new(20, \"Zaraiah C\"), new(21, \"Laura L\"), new(22, \"Punith ES\") }; } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } } public record Customer(int CustomerId, string CustomerName); See demo here Client side data with StringComparision​ In the below example, StringComparision.Ordinal is used to make the filter case-sensitive. info By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
OnAutoCompleteChanged(customer)\" />
@code { private string customerName; public IEnumerable customers; private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { if (customers is null) // pull customers only one time for client-side autocomplete customers = GetCustomers(); // call a service or an API to pull the customers return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName))); } private IEnumerable GetCustomers() { return new List { new(1, \"Pich S\"), new(2, \"sfh Sobi\"), new(3, \"Jojo chan\"), new(4, \"Jee ja\"), new(5, \"Rose Canon\"), new(6, \"Manju A\"), new(7, \"Bandita PA\"), new(8, \"Sagar Adil\"), new(9, \"Isha Wang\"), new(10, \"Daina JJ\"), new(11, \"Komala Mug\"), new(12, \"Dikshita BD\"), new(13, \"Neha Gosar\"), new(14, \"Preeti S\"), new(15, \"Sagar Seth\"), new(16, \"Vinayak MM\"), new(17, \"Vijaya Lakhsmi\"), new(18, \"Jahan K\"), new(19, \"Joy B\"), new(20, \"Zaraiah C\"), new(21, \"Laura L\"), new(22, \"Punith ES\") }; } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } } public record Customer(int CustomerId, string CustomerName); See demo here Server side data​
OnAutoCompleteChanged(customer)\" />
@code { private string customerName; [Inject] ICustomerService _customerService { get; set; } private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { var customers = await _customerService.GetCustomers(request.Filter, request.CancellationToken); // API call return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() }); } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } } See demo here Set default value​
OnAutoCompleteChanged(customer)\" />
@code { private string customerName; public IEnumerable customers; protected override void OnInitialized() { customerName = \"Pich S\"; } private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { if (customers is null) // pull customers only one time for client-side autocomplete customers = GetCustomers(); // call a service or an API to pull the customers return await Task.FromResult(request.ApplyTo(customers.OrderBy(customer => customer.CustomerName))); } private IEnumerable GetCustomers() { return new List { new(1, \"Pich S\"), new(2, \"sfh Sobi\"), new(3, \"Jojo chan\"), new(4, \"Jee ja\"), new(5, \"Rose Canon\"), new(6, \"Manju A\"), new(7, \"Bandita PA\"), new(8, \"Sagar Adil\"), new(9, \"Isha Wang\"), new(10, \"Daina JJ\"), new(11, \"Komala Mug\"), new(12, \"Dikshita BD\"), new(13, \"Neha Gosar\"), new(14, \"Preeti S\"), new(15, \"Sagar Seth\"), new(16, \"Vinayak MM\"), new(17, \"Vijaya Lakhsmi\"), new(18, \"Jahan K\"), new(19, \"Joy B\"), new(20, \"Zaraiah C\"), new(21, \"Laura L\"), new(22, \"Punith ES\") }; } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } } See demo here Validations​ @using System.ComponentModel.DataAnnotations
OnAutoCompleteChanged(customer)\" /> customerAddress.CustomerName)\" />
customerAddress.Address)\" />
@code { private CustomerAddress customerAddress = new(); private EditContext _editContext; [Inject] ICustomerService _customerService { get; set; } protected override void OnInitialized() { _editContext = new EditContext(customerAddress); base.OnInitialized(); } public void HandleOnValidSubmit() { Console.WriteLine($\"Customer name is {customerAddress.CustomerName} and address is {customerAddress.Address}\"); } private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { var customers = await _customerService.GetCustomers(request.Filter); // API call return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() }); } private void OnAutoCompleteChanged(Customer customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); Console.WriteLine($\"Data null: {customer is null}.\"); } public class CustomerAddress { [Required] public string CustomerName { get; set; } [Required] public string Address { get; set; } } } See demo here Disable​ Use the Disabled parameter to disable the AutoComplete.
OnAutoCompleteChanged(customer)\" />
@code { private string customerName = default!; private bool disabled = true; [Inject] ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() }); } private void OnAutoCompleteChanged(Customer2 customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the AutoComplete. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
OnAutoCompleteChanged(customer)\" />
@code { private AutoComplete autoComplete1 = default!; private string customerName = default!; [Inject] ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(AutoCompleteDataProviderRequest request) { var customers = await _customerService.GetCustomersAsync(request.Filter, request.CancellationToken); // API call return await Task.FromResult(new AutoCompleteDataProviderResult { Data = customers, TotalCount = customers.Count() }); } private void OnAutoCompleteChanged(Customer2 customer) { // TODO: handle your own logic // NOTE: do null check Console.WriteLine($\"'{customer?.CustomerName}' selected.\"); } private void Disable() => autoComplete1.Disable(); private void Enable() => autoComplete1.Enable(); } See demo here Edit this page Previous Icons Next Currency Input Parameters Methods Events Keyboard Navigation Examples Client side data Client side data with StringComparision Server side data Set default value Validations Disable","s":"Blazor Auto Complete","u":"/forms/autocomplete","h":"","p":537},{"i":540,"t":"Forms Switch On this page Blazor Switch Use the Blazor Bootstrap Switch component to show the consistent cross-browser and cross-device custom checkboxes. Parameters​ Name Type Default Required Description Added Version Disabled bool false Gets or sets the disabled. 1.3.0 Label string null Gets or sets the label. 1.3.0 Reverse bool false Determines whether to put the switch on the opposite side. 1.3.0 Value bool false ✔️ Gets or sets the value. 1.3.0 Methods​ Name Return Type Description Added Version Disable() void Disables switch. 1.3.0 Enable() void Enables switch. 1.3.0 Events​ Name Description Added Version ValueChanged This event fired when the switch selection changed. 1.3.0 Examples​ Basic usage​
Switch 1 Status: @agree1
Switch 2 Status: @agree2
@code { bool agree1; bool agree2 = true; } See demo here Disable​ Disable​ Use the Disabled parameter to disable the Switch.
@code { private bool agree = true; private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the Switch. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
@code { private Switch switch1 = default!; private bool agree = true; private void Disable() => switch1.Disable(); private void Enable() => switch1.Enable(); } See demo here Reverse​ Put your switches on the opposite side by using the Reverse parameter. @code { bool agree; } See demo here Events: ValueChanged​ This event fired when the Switch selection changed. agree\" ValueChanged=\"SwitchChanged\" />
@displaySwitchStatus
@code { private bool agree; private string displaySwitchStatus; private void SwitchChanged(bool value) { agree = value; // this is mandatory displaySwitchStatus = $\"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}.\"; } } See demo here Edit this page Previous Number Input Next Time Input Parameters Methods Events Examples Basic usage Disable Disable Reverse Events: ValueChanged","s":"Blazor Switch","u":"/forms/switch","h":"","p":539},{"i":542,"t":"Forms Currency Input On this page Blazor Currency Input Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol. Parameters​ Name Type Default Required Description AllowNegativeNumbers bool false Allows negative numbers. By default, negative numbers are not allowed. AutoComplete bool false Indicates whether the NumberInput can complete the values automatically by the browser. CurrencySign CurrencySign CurrencySign.Standard Disabled bool false Gets or sets the disabled. EnableMinMax bool false Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. HideCurrencySymbol bool false Determines whether to hide the currency symbol are not. Locale string en-US ✔️ Gets or sets the locale. Max TValue Gets or sets the max. Max ignored if EnableMinMax=\"false\". MaximumFractionDigits byte? null The maximum number of fraction digits to use. Min TValue Gets or sets the min. Min ignored if EnableMinMax=\"false\". MinimumFractionDigits byte? null The minimum number of fraction digits to use. MinimumIntegerDigits byte 1 The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted. Placeholder string? null Gets or sets the placeholder. TextAlignment Alignment Alignment.None Gets or sets the text alignment. Value TValue Gets or sets the value. Methods​ Name Description Disable() Disables currency input. Enable() Enables currency input. Events​ Name Description ValueChanged This event fired on every user keystroke that changes the CurrencyInput value. Examples​ Basic usage​ By default, e + - are blocked. For all integral numeric types, dot . is blocked.
Entered Amount: @amount1
@code { private int amount1 = 12345678; } See demo here Show currency symbols for the different locales​
Entered Amount: @amount1
Entered Amount: @amount2
Entered Amount: @amount3
Entered Amount: @amount4
Entered Amount: @amount5
Entered Amount: @amount6
Entered Amount: @amount7
Entered Amount: @amount8
Entered Amount: @amount9
@code { private int amount1 = 12345678; private int amount2 = 12345678; private int amount3 = 12345678; private int amount4 = 12345678; private int amount5 = 12345678; private int amount6 = 12345678; private int amount7 = 12345678; private int amount8 = 12345678; private int amount9 = 12345678; } See demo here Hide currency symbol​ Set HideCurrencySymbol parameter value to true to hide the currency symbol.
Entered Value: @amount1
@code { private double amount1 = 4.33; } See demo here Using fraction digits and integer digits​ In the below example, formatting adds zeros to display minimum integers and fractions. danger MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only.
Entered Value: @amount1
@code { private double amount1 = 4.33; } See demo here Wrap the number with parentheses instead of appending a minus sign​ In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the CurrencySign option to Accounting. The default value is Standard.
Entered Value: @amount1
@code { private int amount1 = -21231; } See demo here Generic type​ CurrencyInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
@code { private int amount; private int? amount2; private float amount3; private float? amount4; private double amount5; private double? amount6; private decimal amount7; private decimal? amount8; } See demo here Enable min and max​ Set EnableMinMax=\"true\" and set the Min and Max parameters to restrict the user input between the Min and Max range. NOTE If the user tries to enter a number in the CurrencyInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.
Tip: The amount must be between 10 and 500.
Entered Amount: @amount
@code { private decimal? amount; } See demo here Text alignment​ You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
Entered Amount: @amount
Entered Amount: @amount2
@code { private int amount; private decimal amount2 = 2.34M; } See demo here Allow negative numbers​ By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
Tip: Negative numbers are also allowed.
Entered Amount: @amount
@code { private int amount; } See demo here Disable​ Use the Disabled parameter to disable the CurrencyInput.
@code { private int? amount; private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the CurrencyInput. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
@code { private CurrencyInput currencyInput = default!; private int? amount; private void Disable() => currencyInput.Disable(); private void Enable() => currencyInput.Enable(); } See demo here Validations​ Like any other blazor input components, CurrencyInput supports validations. Add the DataAnnotations on the CurrencyInput component to validate the user input before submitting the form. In the below example, we used Required and Range attributes. @using System.ComponentModel.DataAnnotations
invoice.Price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" /> invoice.Price)\" />
invoice.Discount\" ValueChanged=\"(value) => DiscountChanged(value)\" Placeholder=\"Enter discount\" /> invoice.Discount)\" />
invoice.Total)\" />
@code { private Invoice invoice = new(); private EditContext editContext; protected override void OnInitialized() { editContext = new EditContext(invoice); base.OnInitialized(); } protected override void OnParametersSet() { CalculateToatl(); base.OnParametersSet(); } private void PriceChanged(decimal? value) { invoice.Price = value; CalculateToatl(); } private void DiscountChanged(decimal? value) { invoice.Discount = value; CalculateToatl(); } private void CalculateToatl() { var price = invoice.Price.HasValue ? invoice.Price.Value : 0; var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0; invoice.Total = price - discount; } public void HandleOnValidSubmit() { Console.WriteLine($\"Price: {invoice.Price}\"); Console.WriteLine($\"Discount: {invoice.Discount}\"); Console.WriteLine($\"Total: {invoice.Total}\"); } private void ResetForm() { invoice = new(); editContext = new EditContext(invoice); } public class Invoice { [Required(ErrorMessage = \"Price required.\")] [Range(60, 500, ErrorMessage = \"Price should be between 60 and 500.\")] public decimal? Price { get; set; } = 22M; [Range(0, 50, ErrorMessage = \"Discount should be between 0 and 50.\")] public decimal? Discount { get; set; } [Required(ErrorMessage = \"Amount required.\")] [Range(10, 500, ErrorMessage = \"Total should be between 60 and 500.\")] public decimal? Total { get; set; } } } See demo here Events: ValueChanged​ This event fires on every user keystroke that changes the CurrencyInput value.
price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" />
@displayPrice
@code { private decimal? price = 10M; private string displayPrice; private void PriceChanged(decimal? value) { price = value; // this is mandatory displayPrice = $\"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.\"; } } See demo here Edit this page Previous Auto Complete Next Date Input Parameters Methods Events Examples Basic usage Show currency symbols for the different locales Hide currency symbol Using fraction digits and integer digits Wrap the number with parentheses instead of appending a minus sign Generic type Enable min and max Text alignment Allow negative numbers Disable Validations Events: ValueChanged","s":"Blazor Currency Input","u":"/forms/currency-input","h":"","p":541},{"i":544,"t":"Forms Date Input On this page Blazor Date Input Blazor Bootstrap DateInput component is constructed using an HTML input of type=\"date\" which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface. Parameters​ Name Type Default Required Description Added Version AutoComplete bool false Indicates whether the DateInput can complete the values automatically by the browser. 1.5.0 Disabled bool false Gets or sets the disabled. 1.5.0 EnableMinMax bool false Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. 1.5.0 Max TValue Gets or sets the max. Max ignored if EnableMinMax=\"false\". 1.5.0 Min TValue Gets or sets the min. Min ignored if EnableMinMax=\"false\". 1.5.0 Placeholder string? null Gets or sets the placeholder. 1.5.0 Value TValue Gets or sets the value. 1.5.0 ValueExpression Expression> Gets or sets the expression 1.6.0 Methods​ Name Description Added Version Disable Disables date input. 1.5.0 Enable Enables date input. 1.5.0 Events​ Name Description ValueChanged This event fired on every user keystroke that changes the DateInput value. Examples​ Basic usage​ NOTE The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type=\"text\".
Entered date: @date1
@code { private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddDays(1)); } See demo here Generic type​ The Blazor Bootstrap DateInput component supports several data types: DateOnly, DateOnly?, DateTime, and DateTime?. This allows flexible component usage to accommodate various data types in Blazor applications. In the below example, TValue is set to DateOnly, DateOnly?, DateTime, and DateTime?.
DateOnly:
Entered date: @date1
DateOnly?:
Entered date: @date2
DateTime:
Entered date: @date3
DateTime?:
Entered date: @date4
@code { private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddMonths(3)); private DateOnly? date2; private DateTime date3 = DateTime.Now.AddMonths(3); private DateTime? date4; } See demo here Enable min and max​ Set EnableMinMax=\"true\" and set the Min and Max parameters to restrict the user input between the Min and Max range. NOTE If the user tries to enter a number in the DateInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.
DateOnly:
Min date: @min1
Max date: @max1
Entered date: @date1
DateOnly?:
Min date: @min2
Max date: @max2
Entered date: @date2
DateTime:
Min date: @min3
Max date: @max3
Entered date: @date3
DateTime?:
Min date: @min4
Max date: @max4
Entered date: @date4
@code { private DateTime date = DateTime.Now.AddMonths(3); private DateTime min = DateTime.Now.AddMonths(-1); private DateTime max = DateTime.Now.AddYears(1); private DateOnly date1, min1, max1; private DateOnly? date2, min2, max2; private DateTime date3, min3, max3; private DateTime? date4, min4, max4; protected override void OnInitialized() { date1 = DateOnly.FromDateTime(date); min1 = DateOnly.FromDateTime(min); max1 = DateOnly.FromDateTime(max); date2 = null; min2 = DateOnly.FromDateTime(min); max2 = DateOnly.FromDateTime(max); date3 = DateTime.Now.AddMonths(3); min3 = min; max3 = max; date4 = null; min4 = min; max4 = max; } } See demo here Disable​ Use the Disabled parameter to disable the DateInput.
Entered date: @date1
@code { private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now); private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the DateInput. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
Entered date: @date1
@code { private DateInput dateInput = default!; private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now); private void Disable() => dateInput.Disable(); private void Enable() => dateInput.Enable(); } See demo here Validations​ Like any other blazor input component, DateInput component supports validations. Use the Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. @using System.ComponentModel.DataAnnotations
invoice.InvoiceDate)\" />
invoice.CustomerName)\" />
@code { private Invoice invoice = new(); private EditContext editContext; protected override void OnInitialized() { editContext = new EditContext(invoice); base.OnInitialized(); } public void HandleOnValidSubmit() { Console.WriteLine($\"Invoice Date: {invoice.InvoiceDate}\"); Console.WriteLine($\"Customer Name: {invoice.CustomerName}\"); } private void ResetForm() { invoice = new(); editContext = new EditContext(invoice); } public class Invoice { [Required(ErrorMessage = \"Invoice Date required.\")] public DateOnly? InvoiceDate { get; set; } [Required(ErrorMessage = \"Customer Name required.\")] public string CustomerName { get; set; } } } See demo here Events: ValueChanged​ This event fires on every user keystroke/selection that changes the DateInput value.
date1\" ValueChanged=\"(value) => DateChanged(value)\" />
Changed date: @date1
@code { private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now); private void DateChanged(DateOnly dateOnly) { date1 = dateOnly; } } See demo here Restrict the date field based on the entry in another date field​ One common scenario is that the date fields are restricted based on the entry in another date field. In the example below, we restrict the course end time based on the selection of course start date. @using System.ComponentModel.DataAnnotations
onlineCourseForm.CourseName)\" />
onlineCourseForm.StartDate\" ValueChanged=\"(value) => StartDateChanged(value)\" /> onlineCourseForm.StartDate)\" />
onlineCourseForm.EndDate)\" />
@code { DateInput endDateInput = default!; private OnlineCourseForm onlineCourseForm = new(); private EditContext editContext; private DateTime? courseMinDate; private DateTime? courseMaxDate; [Inject] ToastService _toastService { get; set; } protected override void OnInitialized() { editContext = new EditContext(onlineCourseForm); base.OnInitialized(); } private void StartDateChanged(DateTime? startDate) { if (startDate is null || !startDate.HasValue) { onlineCourseForm.StartDate = null; onlineCourseForm.EndDate = null; courseMinDate = null; courseMaxDate = null; endDateInput.Disable(); return; } onlineCourseForm.StartDate = startDate; onlineCourseForm.EndDate = null; courseMinDate = startDate.Value; courseMaxDate = startDate.Value.AddDays(5); endDateInput.Enable(); } public void HandleValidSubmit() { var toastMessage = new ToastMessage ( type: ToastType.Success, iconName: IconName.Check2All, title: \"Success!\", helpText: $\"{DateTime.Now.ToLocalTime()}\", message: \"Online course schedule created.\" ); _toastService.Notify(toastMessage); } private void ResetForm() { onlineCourseForm = new(); editContext = new EditContext(onlineCourseForm); } public class OnlineCourseForm { [Required(ErrorMessage = \"Course Name required.\")] public string CourseName { get; set; } [Required(ErrorMessage = \"Start Date required.\")] public DateTime? StartDate { get; set; } [Required(ErrorMessage = \"End Date required.\")] public DateTime? EndDate { get; set; } } } Edit this page Previous Currency Input Next Number Input Parameters Methods Events Examples Basic usage Generic type Enable min and max Disable Validations Events: ValueChanged Restrict the date field based on the entry in another date field","s":"Blazor Date Input","u":"/forms/date-input","h":"","p":543},{"i":546,"t":"Getting Started Blazor WebAssembly On this page Getting started - Blazor WebAssembly Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Install Nuget Package​ Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager. Install-Package Blazor.Bootstrap -Version 1.10.4 Add CSS references​ Add the following references to the head section in the wwwroot/index.html. note If you use the Blazor WebAssembly App Empty* template (without demonstration code and Bootstrap), add the following references to the head section in the wwwroot/index.html. There is a known GitHub issue Blazor empty template doesn't load scoped CSS. Add script references​ Add the following references to the body section in the wwwroot/index.html after the _framework/blazor.webassembly.js reference. tip chart.js reference is optional. Add when the Chart components are used in the application. Register services​ Add Blazor Bootstrap service in the Program.cs builder.Services.AddBlazorBootstrap(); // Add this line Register tag helpers in _Imports.razor @using BlazorBootstrap; Remove default references​ In the wwwroot/index.html file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed. Delete the default bootstrap and open-iconic folders from the wwwroot folder. wwwroot/css/bootstrap wwwroot/css/open-iconic Either remove or keep the app.css file but make sure you clear it out of any content when the Sidebar component with full layout is used. Starter templates​ .NET 6​ Blazor Bootstrap - Blazor WebAssembly App .NET 7​ Blazor Bootstrap - Blazor WebAssembly App Blazor Bootstrap - Blazor Empty WebAssembly App Edit this page Next Blazor Server Install Nuget Package Add CSS references Add script references Register services Remove default references Starter templates .NET 6 .NET 7","s":"Getting started - Blazor WebAssembly","u":"/getting-started/blazor-webassembly","h":"","p":545},{"i":548,"t":"Getting Started Blazor Server On this page Getting started - Blazor Server Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Install Nuget Package​ Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager. Install-Package Blazor.Bootstrap -Version 1.10.4 Add CSS references​ Add the following references to the head section in the Pages/_Host.cshtml. note If you use the Blazor Server App Empty* template (without demonstration code and Bootstrap), add the following references to the head section in the Pages/_Host.cshtml. There is a known GitHub issue Blazor empty template doesn't load scoped CSS. IMPORTANT In .NET 6 Blazor Server App default template, you may see Pages/_Layout.cshtml. So, add these references in the Pages/_Layout.cshtml instead of in the Pages/_Host.cshtml. Add script references​ Add the following references to the body section in the Pages/_Host.cshtml after the _framework/blazor.server.js reference. tip chart.js reference is optional. Add when the Chart components are used in the application. Register services​ Add Blazor Bootstrap service in the Program.cs builder.Services.AddBlazorBootstrap(); // Add this line Register tag helpers in _Imports.razor @using BlazorBootstrap; Remove default references​ In the Pages/_Host.cshtml file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed. Delete the default bootstrap and open-iconic folders from the wwwroot folder. wwwroot/css/bootstrap wwwroot/css/open-iconic Either remove or keep the site.css file but make sure you clear it out of any content when the Sidebar component with full layout is used. Starter templates​ .NET 6​ Blazor Bootstrap - Blazor Server App .NET 7​ Blazor Bootstrap - Blazor Server App Blazor Bootstrap - Blazor Empty Server App Edit this page Previous Blazor WebAssembly Next MAUI Blazor Install Nuget Package Add CSS references Add script references Register services Remove default references Starter templates .NET 6 .NET 7","s":"Getting started - Blazor Server","u":"/getting-started/blazor-server","h":"","p":547},{"i":550,"t":"Getting Started MAUI Blazor On this page Getting started - MAUI Blazor App Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Install Nuget Package​ Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager. Install-Package Blazor.Bootstrap -Version 1.10.4 Add CSS references​ Add the following references to the head section in the wwwroot/index.html. Add script references​ Add the following references to the body section in the wwwroot/index.html after the _framework/blazor.webview.js reference. tip chart.js reference is optional. Add when the Chart components are used in the application. Register services​ Add Blazor Bootstrap service in the MauiProgram.cs builder.Services.AddBlazorBootstrap(); // Add this line Register tag helpers in _Imports.razor @using BlazorBootstrap; Remove default references​ In the wwwroot/index.html file, the default blazor template includes demonstration code, icons, and Bootstrap. These files are no longer needed. Delete the default bootstrap and open-iconic folders from the wwwroot folder. wwwroot/css/bootstrap wwwroot/css/open-iconic Either remove or keep the app.css file but make sure you clear it out of any content when the Sidebar component with full layout is used. Starter templates​ .NET 6​ Blazor Bootstrap - Blazor WebAssembly App .NET 7​ Blazor Bootstrap - Blazor WebAssembly App Blazor Bootstrap - Blazor Empty WebAssembly App Edit this page Previous Blazor Server Next Blazor WebAssembly Install Nuget Package Add CSS references Add script references Register services Remove default references Starter templates .NET 6 .NET 7","s":"Getting started - MAUI Blazor App","u":"/getting-started/maui-blazor","h":"","p":549},{"i":552,"t":"Layout Blazor Server On this page Layout Setup - Blazor WebAssembly Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Prerequisites​ Assuming you followed the getting started docs for the initial setup. Blazor WebAssembly Project: Follow the getting started steps for the initial setup. Blazor Server Project: Follow the getting started steps for the initial setup. Steps​ Replace MainLayout.razor page code with the below code. NOTE Remove all the CSS content from the Shared/MainLayout.razor.css file. @inherits LayoutComponentBase
About
@Body
@code { private Sidebar sidebar = default!; private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/\", IconName = IconName.HouseDoorFill, Text = \"Home\", Match=NavLinkMatch.All}, new NavItem { Id = \"2\", Href = \"/counter\", IconName = IconName.PlusSquareFill, Text = \"Counter\"}, new NavItem { Id = \"3\", Href = \"/fetchdata\", IconName = IconName.Table, Text = \"Fetch Data\"}, }; return navItems; } } Starter templates​ .NET 6​ Blazor Bootstrap - Blazor WebAssembly App .NET 7​ Blazor Bootstrap - Blazor WebAssembly App Blazor Bootstrap - Blazor Empty WebAssembly App Edit this page Previous Blazor WebAssembly Next Icons Prerequisites Steps Starter templates .NET 6 .NET 7","s":"Layout Setup - Blazor WebAssembly","u":"/layout/blazor-server","h":"","p":551},{"i":554,"t":"Layout Blazor WebAssembly On this page Layout Setup - Blazor WebAssembly Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework. Prerequisites​ Assuming you followed the getting started docs for the initial setup. Blazor WebAssembly Project: Follow the getting started steps for the initial setup. Blazor Server Project: Follow the getting started steps for the initial setup. Steps​ Replace MainLayout.razor page code with the below code. NOTE Remove all the CSS content from the Shared/MainLayout.razor.css file. @inherits LayoutComponentBase
About
@Body
@code { private Sidebar sidebar = default!; private IEnumerable navItems = default!; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/\", IconName = IconName.HouseDoorFill, Text = \"Home\", Match=NavLinkMatch.All}, new NavItem { Id = \"2\", Href = \"/counter\", IconName = IconName.PlusSquareFill, Text = \"Counter\"}, new NavItem { Id = \"3\", Href = \"/fetchdata\", IconName = IconName.Table, Text = \"Fetch Data\"}, }; return navItems; } } Starter templates​ .NET 6​ Blazor Bootstrap - Blazor WebAssembly App .NET 7​ Blazor Bootstrap - Blazor WebAssembly App Blazor Bootstrap - Blazor Empty WebAssembly App Edit this page Previous MAUI Blazor Next Blazor Server Prerequisites Steps Starter templates .NET 6 .NET 7","s":"Layout Setup - Blazor WebAssembly","u":"/layout/blazor-webassembly","h":"","p":553},{"i":556,"t":"Forms Time Input On this page Blazor Time Input The Blazor Bootstrap TimeInput component is constructed using an HTML input of type=\"time\" which limits user input based on pre-defined parameters. This component enables users to input a time using a text box with validation or a special time picker interface. Parameters​ Name Type Default Required Description Added Version AutoComplete bool false Indicates whether the TimeInput can complete the values automatically by the browser. 1.6.0 Disabled bool false Gets or sets the disabled. 1.6.0 EnableMinMax bool false Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. 1.6.0 Max TValue Gets or sets the max. Max ignored if EnableMinMax=\"false\". 1.6.0 Min TValue Gets or sets the min. Min ignored if EnableMinMax=\"false\". 1.6.0 Placeholder string? null Gets or sets the placeholder. 1.6.0 Value TValue Gets or sets the value. 1.6.0 ValueExpression Expression> Gets or sets the expression 1.6.0 Methods​ Name Description Added Version Disable Disables time input. 1.6.0 Enable Enables time input. 1.6.0 Events​ Name Description ValueChanged This event fired on every user keystroke that changes the TimeInput value. Examples​ Basic usage​ NOTE The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type=\"text\".
Entered date: @date1
@code { private TimeOnly date1 = new TimeOnly(13, 14); } See demo here Generic type​ The Blazor Bootstrap TimeInput component supports TimeOnly and TimeOnly?. In the below example, TValue is set to TimeOnly and TimeOnly?.
TimeOnly:
Entered time: @time1
TimeOnly?:
Entered time: @time2
@code { private TimeOnly time1 = new TimeOnly(6, 40); private TimeOnly? time2; } See demo here Enable min and max​ Set EnableMinMax=\"true\" and set the Min and Max parameters to restrict the user input between the Min and Max range. NOTE If the user tries to enter a number in the TimeInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.
TimeOnly:
Min time: @min1
Max time: @max1
Entered time: @time1
TimeOnly?:
Min time: @min2
Max time: @max2
Entered time: @time2
@code { private TimeOnly time1, min1, max1; private TimeOnly? time2, min2, max2; protected override void OnInitialized() { time1 = new TimeOnly(10, 0); // 10:00 AM min1 = new TimeOnly(8, 0); // 08:00 AM max1 = new TimeOnly(18, 0); // 06:00 PM time2 = null; min2 = new TimeOnly(8, 0); // 08:00 AM max2 = new TimeOnly(18, 0); // 06:00 PM } } See demo here Disable​ Use the Disabled parameter to disable the TimeInput.
Entered time: @time1
@code { private TimeOnly time1 = new TimeOnly(10, 50); // 10:50 AM private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the TimeInput. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
Entered time: @time1
@code { private TimeInput timeInput1 = default!; private TimeOnly time1 = new TimeOnly(10, 50); // 10:50 AM private void Disable() => timeInput1.Disable(); private void Enable() => timeInput1.Enable(); } See demo here Validations​ Like any other blazor input component, TimeInput component supports validations. Use the Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. @using System.ComponentModel.DataAnnotations
flightForm.FlightNumber)\" />
flightForm.DepartureDate)\" />
flightForm.DepartureTime)\" />
flightForm.ArrivalDate)\" />
flightForm.ArrivalTime)\" />
@code { private FlightForm flightForm = new(); private EditContext editContext; [Inject] ToastService _toastService { get; set; } protected override void OnInitialized() { editContext = new EditContext(flightForm); base.OnInitialized(); } public void HandleValidSubmit() { var toastMessage = new ToastMessage ( type: ToastType.Success, iconName: IconName.Check2All, title: \"Success!\", helpText: $\"{DateTime.Now.ToLocalTime()}\", message: \"Flight schedule created.\" ); _toastService.Notify(toastMessage); } private void ResetForm() { flightForm = new(); editContext = new EditContext(flightForm); } public class FlightForm { [Required(ErrorMessage = \"Flight Number required.\")] public string FlightNumber { get; set; } [Required(ErrorMessage = \"Departure Date required.\")] public DateOnly? DepartureDate { get; set; } [Required(ErrorMessage = \"Departure Time required.\")] public TimeOnly? DepartureTime { get; set; } [Required(ErrorMessage = \"Arrival Date required.\")] public DateOnly? ArrivalDate { get; set; } [Required(ErrorMessage = \"Arrival Time required.\")] public TimeOnly? ArrivalTime { get; set; } } } See demo here Events: ValueChanged​ This event fires on every user keystroke/selection that changes the TimeInput value.
time1\" ValueChanged=\"(value) => TimeChanged(value)\" />
Changed time: @time1
@code { private TimeOnly time1 = new TimeOnly(10, 0); // 10:00 AM private void TimeChanged(TimeOnly timeOnly) { time1 = timeOnly; } } See demo here Restrict the date field based on the entry in another date field​ One common scenario is that the time fields are restricted based on the entry in another time field. In the example below, we restrict the arrival time based on the selection of departure. @using System.ComponentModel.DataAnnotations
flightForm.DepartureTime\" ValueChanged=\"(value) => DepartureTimeChanged(value)\" /> flightForm.DepartureTime)\" />
flightForm.ArrivalTime)\" />
@code { TimeInput arrivalTimeInput = default!; private FlightForm flightForm = new(); private EditContext editContext; private TimeOnly? arrivalMinTime; private TimeOnly? arrivalMaxTime; [Inject] ToastService _toastService { get; set; } protected override void OnInitialized() { editContext = new EditContext(flightForm); base.OnInitialized(); } private void DepartureTimeChanged(TimeOnly? departureTime) { if (departureTime is null || !departureTime.HasValue) { flightForm.DepartureTime = null; flightForm.ArrivalTime = null; arrivalMinTime = null; arrivalMaxTime = null; arrivalTimeInput.Disable(); return; } flightForm.DepartureTime = departureTime; flightForm.ArrivalTime = null; arrivalMinTime = departureTime.Value.AddHours(1); arrivalMaxTime = departureTime.Value.AddHours(12); arrivalTimeInput.Enable(); } public void HandleValidSubmit() { var toastMessage = new ToastMessage ( type: ToastType.Success, iconName: IconName.Check2All, title: \"Success!\", helpText: $\"{DateTime.Now.ToLocalTime()}\", message: \"Flight schedule created.\" ); _toastService.Notify(toastMessage); } private void ResetForm() { flightForm = new(); editContext = new EditContext(flightForm); } public class FlightForm { [Required(ErrorMessage = \"Departure Time required.\")] public TimeOnly? DepartureTime { get; set; } [Required(ErrorMessage = \"Arrival Time required.\")] public TimeOnly? ArrivalTime { get; set; } } } Edit this page Previous Switch Next Accordion Parameters Methods Events Examples Basic usage Generic type Enable min and max Disable Validations Events: ValueChanged Restrict the date field based on the entry in another date field","s":"Blazor Time Input","u":"/forms/time-input","h":"","p":555},{"i":558,"t":"One post tagged with \"blazortime\" View All Tags Blazor Bootstrap v1.6.0 March 12, 2023 · One min read Vikram Reddy Creator We are excited to release 1.6.0 with new TimeInput component and other updates!!! Tags: v1.6.0 blazor bootstrap bootstrap5 blazorbootstrap timeinput timepicker blazortimeinput blazortimepicker blazortime dateinput datepicker blazordateinput blazordatepicker blazordate grid blazorgrid modal blazormodal offcanvas blazoroffcanvas Read More","s":"One post tagged with \"blazortime\"","u":"/blog/tags/blazortime","h":"","p":557},{"i":560,"t":"Services Modal Service On this page Blazor Modal Service Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content. See blazor modal service demo here. Methods​ Name Return Type ShowAsync(ModalOption modalOption) Task ModalOption Members​ Property Name Type Description Required Default FooterButtonColor ButtonColor Gets or sets the footer button color. ButtonColor.Secondary FooterButtonCSSClass string Gets or sets the footer button custom CSS class. null FooterButtonText string Gets or sets the footer button text. OK IsVerticallyCentered bool Gets or sets the IsVerticallyCentered. false Message string Gets or sets the modal message. ✔️ null ShowFooterButton string Shows or hides the footer button. true Size ModalSize Gets or sets the modal size. ModalSize.Regular Title string Gets or sets the modal title. ✔️ null Type ModalType Gets or sets the modal type. ModalType.Light Examples​ How it works​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal(ModalType modalType) { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", Type = modalType, }; await ModalService.ShowAsync(modalOption); } } See demo here. Vertically Centered​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal(ModalType modalType) { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", Type = modalType, IsVerticallyCentered = true }; await ModalService.ShowAsync(modalOption); } } See demo here. Size​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal(ModalSize modalSize) { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", Size = modalSize }; await ModalService.ShowAsync(modalOption); } } See demo here. Change footer button color and text​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal() { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", FooterButtonColor = ButtonColor.Primary, FooterButtonText = \"Got it!\" }; await ModalService.ShowAsync(modalOption); } } See demo here. Hide footer button​ @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task ShowModal() { var modalOption = new ModalOption { Title = \"Modal title\", Message = \"Modal body text goes here.\", ShowFooterButton = false }; await ModalService.ShowAsync(modalOption); } } See demo here. How to setup​ Add the Modal component in MainLayout.razor page as shown below. @inherits LayoutComponentBase ... ... MainLayour.razor code goes here ... ... Inject ModalService, then call the ShowAsync(...) method as shown below. ShowAsync method accepts ModalOption object as a parameter. @code { [Inject] ModalService ModalService { get; set; } = default!; private async Task SaveEmployeeAsync() { try { // call the service/api to save the employee details var modalOption = new ModalOption { Title = \"Save Employee\", Message = \"Employee details saved.\", Type = ModalType.Success }; await ModalService.ShowAsync(modalOption); } catch(Exception ex) { // handle exception var modalOption = new ModalOption { Title = \"Save Employee\", Message = $\"Error: {ex.Message}.\", Type = ModalType.Danger }; await ModalService.ShowAsync(modalOption); } } } Edit this page Previous Pie Chart Methods ModalOption Members Examples How it works Vertically Centered Size Change footer button color and text Hide footer button How to setup","s":"Blazor Modal Service","u":"/services/modal","h":"","p":559},{"i":562,"t":"Forms Number Input On this page Blazor Number Input Blazor Bootstrap NumberInput component is built around HTML input of type=\"number\" that prevents the user input based on the parameters set. Parameters​ Name Type Default Required Description AllowNegativeNumbers bool false Allows negative numbers. By default, negative numbers are not allowed. AutoComplete bool false Indicates whether the NumberInput can complete the values automatically by the browser. Disabled bool false Gets or sets the disabled. EnableMinMax bool false Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. Max TValue Gets or sets the max. Max ignored if EnableMinMax=\"false\". Min TValue Gets or sets the min. Min ignored if EnableMinMax=\"false\". Placeholder string? null Gets or sets the placeholder. Step double? null Gets or sets the step. TextAlignment Alignment Alignment.None Gets or sets the text alignment. Value TValue Gets or sets the value. Methods​ Name Description Disable Disables number input. Enable Enables number input. Events​ Name Description ValueChanged This event fired on every user keystroke that changes the NumberInput value. Examples​ Basic usage​ By default, e + - are blocked. For all integral numeric types, dot . is blocked.
Entered Amount: @amount
@code { private int amount; } See demo here Generic type​ NumberInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
@code { private int amount; private int? amount2; private float amount3; private float? amount4; private double amount5; private double? amount6; private decimal amount7; private decimal? amount8; } See demo here Enable min and max​ Set EnableMinMax=\"true\" and set the Min and Max parameters to restrict the user input between the Min and Max range. NOTE If the user tries to enter a number in the NumberInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.
Tip: The amount must be between 10 and 500.
Entered Amount: @amount
@code { private decimal? amount; } See demo here Step​ The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.
Info: Here Step parameter is set to 10.
Entered Amount: @amount
Info: Here Step parameter is set to 2.5.
Entered Amount: @amount2
@code { private int? amount; private decimal? amount2; } See demo here Text alignment​ You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
Entered Amount: @amount
Entered Amount: @amount2
@code { private int amount; private decimal amount2 = 2.34M; } See demo here Allow negative numbers​ By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
Tip: Negative numbers are also allowed.
Entered Amount: @amount
@code { private int amount; } See demo here Disable​ Use the Disabled parameter to disable the NumberInput.
@code { private int? amount; private bool disabled = true; private void Enable() => disabled = false; private void Disable() => disabled = true; private void Toggle() => disabled = !disabled; } Also, use Enable() and Disable() methods to enable and disable the NumberInput. NOTE Do not use both the Disabled parameter and Enable() & Disable() methods.
@code { private NumberInput numberInput = default!; private int? amount; private void Disable() => numberInput.Disable(); private void Enable() => numberInput.Enable(); } See demo here Validations​ Like any other blazor input component, NumberInput supports validations. Add the DataAnnotations on the NumberInput component to validate the user input before submitting the form. In the below example, we used Required and Range attributes. @using System.ComponentModel.DataAnnotations
invoice.Price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" /> invoice.Price)\" />
invoice.Discount\" ValueChanged=\"(value) => DiscountChanged(value)\" Placeholder=\"Enter discount\" /> invoice.Discount)\" />
invoice.Total)\" />
@code { private Invoice invoice = new(); private EditContext editContext; protected override void OnInitialized() { editContext = new EditContext(invoice); base.OnInitialized(); } protected override void OnParametersSet() { CalculateToatl(); base.OnParametersSet(); } private void PriceChanged(decimal? value) { invoice.Price = value; CalculateToatl(); } private void DiscountChanged(decimal? value) { invoice.Discount = value; CalculateToatl(); } private void CalculateToatl() { var price = invoice.Price.HasValue ? invoice.Price.Value : 0; var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0; invoice.Total = price - discount; } public void HandleOnValidSubmit() { Console.WriteLine($\"Price: {invoice.Price}\"); Console.WriteLine($\"Discount: {invoice.Discount}\"); Console.WriteLine($\"Total: {invoice.Total}\"); } private void ResetForm() { invoice = new(); editContext = new EditContext(invoice); } public class Invoice { [Required(ErrorMessage = \"Price required.\")] [Range(60, 500, ErrorMessage = \"Price should be between 60 and 500.\")] public decimal? Price { get; set; } = 232M; [Range(0, 50, ErrorMessage = \"Discount should be between 0 and 50.\")] public decimal? Discount { get; set; } [Required(ErrorMessage = \"Amount required.\")] [Range(10, 500, ErrorMessage = \"Total should be between 60 and 500.\")] public decimal? Total { get; set; } } } See demo here Events: ValueChanged​ This event fires on every user keystroke that changes the NumberInput value.
price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" />
@displayPrice
@code { private decimal? price = 10M; private string displayPrice; private void PriceChanged(decimal? value) { price = value; // this is mandatory displayPrice = $\"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.\"; } } See demo here Edit this page Previous Date Input Next Switch Parameters Methods Events Examples Basic usage Generic type Enable min and max Step Text alignment Allow negative numbers Disable Validations Events: ValueChanged","s":"Blazor Number Input","u":"/forms/number-input","h":"","p":561},{"i":564,"t":"Components Dropdown On this page Blazor Dropdown Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap. Dropdown Parameters​ Name Type Description Required Default Added Version AutoClose bool Enables or disables the auto close. true 1.10.0 AutoCloseBehavior DropdownAutoCloseBehavior Gets or sets the auto close behavior of the dropdown. DropdownAutoCloseBehavior.Both 1.10.0 ChildContent RenderFragment Specifies the content to be rendered inside the Dropdown. 1.10.0 Direction DropdownDirection Gets or sets the direction of the dropdown menu. DropdownDirection.Dropdown 1.10.0 Disabled bool Gets or sets whether the dropdown menu is disabled. false 1.10.3 Size Size Gets or sets the size of the dropdown. Size.None 1.10.3 Split bool Gets or sets the toggle button split behavior. false 1.10.0 DropdownToggleButton Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside the DropdownToggleButton. 1.10.0 Color ButtonColor Gets or sets the button color. 1.10.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.10.0 DropdownActionButton Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside the DropdownActionButton. 1.10.0 Color ButtonColor Gets or sets the button color. 1.10.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.10.0 DropdownMenu Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside the DropdownMenu. 1.10.0 Position DropdownMenuPosition Gets or sets the dropdown menu position. 1.10.0 DropdownHeader Parameters​ Name Type Description Required Default Added Version ChildContent RenderFragment Specifies the content to be rendered inside the DropdownHeader. 1.10.0 DropdownItem Parameters​ Name Type Description Required Default Added Version Active bool When set to 'true', places the component in the active state with active styling. 1.10.0 ChildContent RenderFragment Specifies the content to be rendered inside the DropdownMenu. 1.10.0 Disabled bool When set to 'true', disables the component's functionality and places it in a disabled state. 1.10.0 TabIndex int? If defined, indicates that its element can be focused and can participates in sequential keyboard navigation. 1.10.0 Target Target The target attribute specifies where to open the linked document. Target.None 1.10.0 To string? Denotes the target route of the link button. 1.10.0 Type ButtonType Defines the button type. ButtonType.Button 1.10.0 Dropdown Methods​ Name Description Added Version HideAsync Hides the dropdown menu of a given navbar or tabbed navigation. 1.10.0 ShowAsync Shows the dropdown menu of a given navbar or tabbed navigation. 1.10.0 ToggleAsync Toggles the dropdown menu of a given navbar or tabbed navigation. 1.10.0 UpdateAsync Updates the position of an element’s dropdown. 1.10.0 Dropdown Events​ Event Type Description Added Version OnHiding This event is fired immediately when the hide method has been called. 1.10.0 OnHidden This event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete). 1.10.0 OnShowing This event fires immediately when the show instance method is called. 1.10.0 OnShown This event is fired when an dropdown element has been made visible to the user (will wait for CSS transitions to complete). 1.10.0 Examples​ Single button​ Dropdown button Action Another action Something else here See the demo here. Color​
Primary Action Another action Something else here Secondary Action Another action Something else here Success Action Another action Something else here Info Action Another action Something else here Warning Action Another action Something else here Danger Action Another action Something else here
See the demo here. Split button​
Primary Action Another action Something else here Secondary Action Another action Something else here Success Action Another action Something else here Info Action Another action Something else here Warning Action Another action Something else here Danger Action Another action Something else here
See the demo here. Sizing​
Large button Action Another action Something else here Large split button Action Another action Something else here
Small button Action Another action Something else here Small split button Action Another action Something else here
See the demo here. Directions​ Dropup​ To trigger DropdownMenu above elements, add the Direction=\"DropdownDirection.Dropup\" to the Dropdown component.
Dropup button with text Action Another action Something else here Dropup split button Action Another action Something else here
See the demo here. Dropup centered​ To center the DropdownMenu above the toggle, add the Direction=\"DropdownDirection.DropupCentered\" to the Dropdown component.
Centered dropup Action Another action Something else here
See the demo here. Dropend​ To trigger DropdownMenu at the right of elements, add the Direction=\"DropdownDirection.Dropend\" to the Dropdown component.
Dropend Action Another action Something else here Split dropend Action Another action Something else here
See the demo here. Dropstart​ To trigger DropdownMenu at the left of elements, you can add the Direction=\"DropdownDirection.Dropstart\" to the Dropdown component.
Dropstart Action Another action Something else here Action Another action Something else here Split dropstart
See the demo here. Active​ To style DropdownItem as active, add the Active=\"true\" parameter to the DropdownItem element in the DropdownMenu. Dropstart Action Another action Something else here See the demo here. Disabled​ To disable the dropdown, set the Disabled parameter to true on the Dropdown component. Dropstart Action Another action Something else here
@code { private bool isDropdownDisabled = true; private void EnableDropdown() => isDropdownDisabled = false; private void DisableDropdown() => isDropdownDisabled = true; } To style a dropdown item as disabled, set the Disabled parameter to true on the DropdownItem element in the DropdownMenu component. Dropstart Action Another action Something else here See the demo here. Menu position​ By default, a DropdownMenu is automatically positioned at 100% from the top and along the left side of its parent. You can change this with the Position parameter. To right-align a DropdownMenu, add the Position=\"DropdownMenuPosition.End\" parameter to the DropdownMenu component. Directions are mirrored when using Bootstrap in RTL. Right-aligned menu example Action Another action Something else here See the demo here. Menu content​ Header​ Add a header to label sections of actions in any dropdown menu. Dropdown Dropdown header Action Another action Something else here See the demo here. Dividers​ Separate groups of related menu items with a divider. Dropdown Action Another action Something else here Dropdown header Separated link See the demo here. Text​ Place any freeform text within a dropdown menu with text and use spacing utilities. Note that youll likely need additional sizing styles to constrain the menu width. Dropdown

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

 See the demo here. Forms​ Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require. @using System.ComponentModel.DataAnnotations Dropdown form
invoice.Price\" ValueChanged=\"(value) => PriceChanged(value)\" Placeholder=\"Enter price\" /> invoice.Price)\" />
invoice.Discount\" ValueChanged=\"(value) => DiscountChanged(value)\" Placeholder=\"Enter discount\" /> invoice.Discount)\" />
invoice.Total)\" />
@code { private Invoice invoice = new(); private EditContext editContext = default!; protected override void OnInitialized() { editContext = new EditContext(invoice); base.OnInitialized(); } protected override void OnParametersSet() { CalculateToatl(); base.OnParametersSet(); } private void PriceChanged(decimal? value) { invoice.Price = value; CalculateToatl(); } private void DiscountChanged(decimal? value) { invoice.Discount = value; CalculateToatl(); } private void CalculateToatl() { var price = invoice.Price.HasValue ? invoice.Price.Value : 0; var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0; invoice.Total = price - discount; } public void HandleOnValidSubmit() { Console.WriteLine($\"Price: {invoice.Price}\"); Console.WriteLine($\"Discount: {invoice.Discount}\"); Console.WriteLine($\"Total: {invoice.Total}\"); } private void ResetForm() { invoice = new(); editContext = new EditContext(invoice); } public class Invoice { [Required(ErrorMessage = \"Price required.\")] [Range(60, 500, ErrorMessage = \"Price should be between 60 and 500.\")] public decimal? Price { get; set; } = 232M; [Range(0, 50, ErrorMessage = \"Discount should be between 0 and 50.\")] public decimal? Discount { get; set; } [Required(ErrorMessage = \"Amount required.\")] [Range(10, 500, ErrorMessage = \"Total should be between 60 and 500.\")] public decimal? Total { get; set; } } } See the demo here. Auto close behavior​ By default, the DropdownMenu is closed when clicking either inside or outside the DropdownMenu. You can use the AutoClose and AutoCloseBehavior parameters to change this behavior of the Dropdown. Default dropdown Menu item Menu item Menu item Clickable outside Menu item Menu item Menu item Clickable inside Menu item Menu item Menu item Manual close Menu item Menu item Menu item See the demo here. Methods​ Dropdown button Action Another action Something else here @code{ private Dropdown dropdown1 = default!; private async Task ShowAsync() => await dropdown1.ShowAsync(); private async Task HideAsync() => await dropdown1.HideAsync(); private async Task ToggleAsync() => await dropdown1.ToggleAsync(); } See the demo here. Events​ All dropdown events are fired at the toggling element and then bubbled up. Dropdown button Action Another action Something else here @code { List messages = new List(); private void OnDropdownHidingAsync() => messages.Add(new(\"OnHiding\")); private void OnDropdownHiddenAsync() => messages.Add(new(\"OnHidden\")); private void OnDropdownShowingAsync() => messages.Add(new(\"OnShowing\")); private void OnDropdownShownAsync() => messages.Add(new(\"OnShown\")); } See the demo here. Edit this page Previous Confirm Dialog Next Grid Dropdown Parameters DropdownToggleButton Parameters DropdownActionButton Parameters DropdownMenu Parameters DropdownHeader Parameters DropdownItem Parameters Dropdown Methods Dropdown Events Examples Single button Color Split button Sizing Directions Dropup Dropup centered Dropend Dropstart Active Disabled Menu position Menu content Header Dividers Text Forms Auto close behavior Methods Events","s":"Blazor Dropdown","u":"/components/dropdown","h":"","p":563},{"i":566,"t":"Components Sidebar On this page Blazor Sidebar Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content. Parameters​ Name Type Default Required Description Added Version BadgeText string Gets or sets the badge text. 1.4.0 CustomIconName string Gets or sets the custom icon name. 1.4.0 DataProvider delegate ✔️ DataProvider is for items to render. The provider should always return an instance of 'SidebarDataProviderResult', and 'null' is not allowed. 1.4.0 IconName enum Gets or sets the IconName. 1.4.0 ImageSrc string Gets or sets the logo. 1.4.0 Title string ✔️ Gets or sets the title. 1.4.0 Methods​ Name Description Added Version RefreshDataAsync Refresh the sidebar data. 1.4.0 ToggleSidebar Toggles sidebar. 1.4.0 NavItem Properties​ Name Type Default Required Description Added Version Class string? null Gets or sets an additional CSS class. 1.10.3 CustomIconName string? null Gets or sets the custom icon name. 1.4.0 Href string? ✔️ Gets or sets the href. 1.4.0 IconColor IconColor IconColor.None Gets or sets the icon color. 1.4.0 IconName IconName IconName.None Gets or sets the icon name. 1.4.0 Id string? null Gets or sets the Id. 1.4.0 Match NavLinkMatch NavLinkMatch.Prefix Gets or sets the URL matching behavior. 1.4.0 ParentId string? null Gets or sets the parent Id. 1.4.0 Sequence int Gets or sets the sequence. 1.4.0 Target Target Target.None Gets or sets the target. 1.4.0 Text string? ✔️ Gets or sets the navigation link text. 1.4.0 Examples​ Basic usage​ @code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\"}, new NavItem { Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\"}, new NavItem { Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\"}, new NavItem { Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\"}, }; return navItems; } } See demo here. Two level navigation​ Use NavItem's Id and ParentId to set the parent-child relation. NOTE At this moment, two levels of navigation are supported. @code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\" }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\" }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\" }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } } See demo here. Change icons color​ Set IconColor property to change the color. @code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } } See demo here. Full layout with sidebar​ Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } } See demo here. Toggle sidebar to show icons only​ Call ToggleSidebar() method to toggle the Sidebar to show the icons only.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToogleSidebar() => sidebar.ToggleSidebar(); } See demo here. Show badge​ A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToogleSidebar() => sidebar.ToggleSidebar(); } See demo here. Custom brand icon​ Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToogleSidebar() => sidebar.ToggleSidebar(); } See demo here. Show image as brand logo​ Use the ImageSrc parameter to set the brand logo.
About
Page content goes here
@code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToogleSidebar() => sidebar.ToggleSidebar(); } See demo here. Customize sidebar​ Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.
About
@code { Sidebar sidebar; bool applyPurpleStyle = false; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\", IconColor = IconColor.Primary }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\", IconColor = IconColor.Success }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\", IconColor = IconColor.Danger }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } private void ToggleSidebarStyles() => applyPurpleStyle = !applyPurpleStyle; } @if (applyPurpleStyle) { } See demo here. Apply custom CSS class to NavItem​ Set the Class property of a NavItem to apply a custom CSS class. @code { Sidebar sidebar; IEnumerable navItems; private async Task SidebarDataProvider(SidebarDataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable GetNavItems() { navItems = new List { new NavItem { Id = \"1\", Href = \"/getting-started\", IconName = IconName.HouseDoorFill, Text = \"Getting Started\"}, new NavItem { Id = \"2\", IconName = IconName.LayoutSidebarInset, Text = \"Content\" }, new NavItem { Id = \"3\", Href = \"/icons\", IconName = IconName.PersonSquare, Text = \"Icons\", ParentId=\"2\"}, new NavItem { Id = \"4\", IconName = IconName.ExclamationTriangleFill, Text = \"Components\" }, new NavItem { Id = \"5\", Href = \"/alerts\", IconName = IconName.CheckCircleFill, Text = \"Alerts\", ParentId=\"4\", Class=\"px-3\"}, new NavItem { Id = \"6\", Href = \"/breadcrumb\", IconName = IconName.SegmentedNav, Text = \"Breadcrumb\", ParentId=\"4\", Class=\"px-3\"}, new NavItem { Id = \"7\", Href = \"/sidebar\", IconName = IconName.LayoutSidebarInset, Text = \"Sidebar\", ParentId=\"4\", Class=\"px-3\"}, new NavItem { Id = \"8\", IconName = IconName.WindowPlus, Text = \"Forms\" }, new NavItem { Id = \"9\", Href = \"/autocomplete\", IconName = IconName.InputCursorText, Text = \"Auto Complete\", ParentId=\"8\"}, new NavItem { Id = \"10\", Href = \"/currency-input\", IconName = IconName.CurrencyDollar, Text = \"Currency Input\", ParentId=\"8\"}, new NavItem { Id = \"11\", Href = \"/number-input\", IconName = IconName.InputCursor, Text = \"Number Input\", ParentId=\"8\"}, new NavItem { Id = \"12\", Href = \"/switch\", IconName = IconName.ToggleOn, Text = \"Switch\", ParentId=\"8\"}, }; return navItems; } } See demo here. Edit this page Previous Progress Next Tabs Parameters Methods NavItem Properties Examples Basic usage Two level navigation Change icons color Full layout with sidebar Toggle sidebar to show icons only Show badge Custom brand icon Show image as brand logo Customize sidebar Apply custom CSS class to NavItem","s":"Blazor Sidebar","u":"/components/sidebar","h":"","p":565},{"i":568,"t":"Components Grid On this page Blazor Grid Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side paging & sorting. Grid Parameters​ Name Type Default Required Description Added Version AllowFiltering bool false Gets or sets the grid filtering. 1.0.0 AllowPaging bool false Gets or sets the grid paging. 1.0.0 AllowRowClick bool false Gets or sets the allow row click. 1.9.5 AllowSelection bool false Gets or sets the grid selection. 1.8.0 AllowSorting bool false Gets or sets the grid sorting. 1.0.0 ChildContent RenderFragment ✔️ Specifies the content to be rendered inside the grid. 1.0.0 Data IEnumerable Gets or sets the grid data. 1.4.3 DataProvider GridDataProviderDelegate DataProvider is for items to render. The provider should always return an instance of GridDataProviderResult, and null is not allowed. 1.0.0 DisableAllRowsSelection Func, bool>? Enable or disable the header checkbox selection. 1.8.0 DisableRowSelection Func? Enable or disable the row level checkbox selection. 1.8.0 EmptyDataTemplate RenderFragment ✔️ Template to render when there are no rows to display. 1.0.0 EmptyText string No records to display Shows text on no records. 1.0.0 FiltersRowCssClass string Gets or sets the filters row css class. 1.9.2 FiltersTranslationProvider GridFiltersTranslationDelegate Filters transalation is for grid filters to render. The provider should always return a 'FilterOperatorInfo' collection, and 'null' is not allowed. 1.10.0 FixedHeader bool false Gets or sets the grid fixed header. 1.10.3 HeaderRowCssClass string Gets or sets the header row css class but not the thead tag class. 1.9.2 Height float 320 pixels Gets or sets the grid height. 1.10.3 ItemsPerPageText string Items per page ✔️ Gets or sets the ItemsPerPageText. 1.9.5 PageSize int 10 Gets or sets the page size of the grid. 1.0.0 PageSizeSelectorItems int[] new int[] { 10, 20, 50 } ✔️ Gets or sets the page size selector items. 1.8.0 PageSizeSelectorVisible bool false ✔️ Gets or sets the page size selector visible. 1.8.0 PaginationItemsTextFormat string {0} - {1} of {2} items ✔️ Gets or sets the pagination items text format. 1.8.0 RowClass Func? Gets or sets the row class. 1.6.0 Responsive bool false Gets or sets a value indicating whether Grid is responsive. 1.0.0 SelectionMode GridSelectionMode Gets or sets the grid selection mode. 1.8.0 SettingsProvider GridSettingsProviderDelegate Settings are for the grid to render. The provider should always return an instance of 'GridSettings', and 'null' is not allowed. 1.0.0 THeadCssClass string? null Gets or sets the thead css class. 1.10.3 Unit Unit Unit.px Gets or sets the units. 1.10.3 IMPORTANT Grid requires either Data or DataProvider parameter, but not both. Grid Callback Events​ Name Type Description Added Version GridSettingsChanged EventCallback This event is fired when the grid state is changed. 1.0.0 OnRowClick EventCallback> This event is triggered when the user clicks on the row. Set AllowRowClick to true to enable row clicking. 1.9.5 OnRowDoubleClick EventCallback> This event is triggered when the user double clicks on the row. Set AllowRowClick to true to enable row double clicking. 1.9.5 SelectedItemsChanged EventCallback> This event is fired when the items selection changed. 1.8.0 Grid Methods​ Name Return Type Description Added Version GetFilters() IEnumerable Get filters. 1.0.0 RefreshDataAsync(CancellationToken cancellationToken = default) Task Refresh the grid data. 1.0.0 ResetPageNumber() ValueTask Reset the page number to 1 and refresh the grid. 1.4.3 GridColumn Parameters​ Name Type Default Required Description Added Version ChildContent RenderFragment ✔️ Specifies the content to be rendered inside the grid column. 1.0.0 ColumnClass Func? Gets or sets the column class. 1.6.0 Filterable bool true Enable or disable the filter on a specific column. The filter is enabled or disabled based on the grid AllowFiltering parameter. 1.0.0 FilterOperator enum Assigned based on the property type. Gets or sets the filter operator. 1.0.0 FilterTextboxWidth int Gets or sets the filter textbox width in pixels. 1.0.0 FilterValue string Gets or sets the filter value. 1.0.0 Freeze bool false Indicates whether the column is frozen. 1.10.4 FreezeDirection FreezeDirection FreezeDirection.Left Gets or sets the freeze direction of the column. 1.10.4 FreezeLeftPosition double 0 Gets or sets the horizontal position of the column from left. It has no effect on non-positioned columns. 1.10.4 FreezeRightPosition double 0 Gets or sets the horizontal position of the column from right. It has no effect on non-positioned columns. 1.10.4 HeaderContent RenderFragment Specifies the content to be rendered inside the grid column header. 1.7.3 HeaderText string ✔️ Gets or sets the table column header. 1.0.0 HeaderTextAlignment enum Alignment.Start Gets or sets the header text alignment. Use Alignment.Start or Alignment.Center or Alignment.End. 1.0.0 IsDefaultSortColumn bool false Gets or sets the default sort column. 1.0.0 PropertyName string Gets or sets the property name. This is required when AllowFiltering is true. 1.0.0 Sortable bool false Enable or disable the sorting on a specific column. The sorting is enabled or disabled based on the grid AllowSorting parameter. 1.0.0 SortDirection enum SortDirection.None Gets or sets the default sort direction of a column. Use SortDirection.Ascending or SortDirection.Descending 1.0.0 SortKeySelector Expression> Expression used for sorting. 1.0.0 SortString string Gets or sets the column sort string. This string is passed to the backend/API for sorting. And it is ignored for client-side sorting. 1.0.0 StringComparison enum StringComparison.OrdinalIgnoreCase Gets or sets the StringComparison. Use StringComparison.CurrentCulture or StringComparison.CurrentCultureIgnoreCase or StringComparison.InvariantCulture or StringComparison.InvariantCultureIgnoreCase or StringComparison.Ordinal or StringComparison.OrdinalIgnoreCase. 1.0.0 TextAlignment Alignment Alignment.Start Gets or sets the text alignment. Use Alignment.Start or Alignment.Center or Alignment.End. 1.0.0 TextNoWrap bool false Gets or sets text nowrap. 1.0.0 GridSettings Properties​ Name Type Default Required Description Added Version PageNumber int Page number. 1.0.0 PageSize int Size of the page. 1.0.0 Filters IEnumerable Current filters. 1.0.0 Examples​ Client side filtering​ For filtering, AllowFiltering and PropertyName parameters are required. Add AllowFiltering=\"true\" parameter to Grid and PropertyName parameter to all the GridColumns. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Client side filtering with string comparision​ In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here info By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching. Client side paging​ For paging, AllowPaging and PageSize parameters are required. Add AllowPaging=\"true\" and PageSize=\"20\" parameters to the Grid. PageSize parameter is optional. INFO The default page size is 10. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Client side sorting​ For sorting, AllowSorting and SortKeySelector parameters are required. Add AllowSorting=\"true\" parameter to Grid and SortKeySelector to all the GridColumns. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Client side filtering, paging, and sorting​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Set default filter​ FilterOperator and FilterValue parameters are required to set the default filter. TIP You can set the default filter on more than one GridColumn. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Disable specific column filter​ Filterable parameter is required to disable the filter on a specific column. Add Filterable=\"false\" parameter to GridColumn. INFO By default, Filterable=\"true\" on all the columns if the AllowFiltering parameter is set to true on the grid. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Increase filter textbox width​ Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional. NOTE Filter textbox width measured in pixels. @context.Id @context.FirstName @context.LastName @context.Email @context.Company @context.Designation @context.DOJ @context.Salary.ToString(\"N2\") @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee3 { Id = 107, FirstName = \"Alice\", LastName = \"Reddy\", Email = \"alice@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true }, new Employee3 { Id = 103, FirstName = \"Bob\", LastName = \"Roy\", Email = \"bob@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true }, new Employee3 { Id = 106, FirstName = \"John\", LastName = \"Papa\", Email = \"john@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true }, new Employee3 { Id = 104, FirstName = \"Pop\", LastName = \"Two\", Email = \"pop@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false }, new Employee3 { Id = 105, FirstName = \"Ronald\", LastName = \"Dire\", Email = \"ronald@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true }, new Employee3 { Id = 102, FirstName = \"Line\", LastName = \"K\", Email = \"line@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true }, new Employee3 { Id = 101, FirstName = \"Daniel\", LastName = \"Potter\", Email = \"daniel@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true }, new Employee3 { Id = 108, FirstName = \"Zayne\", LastName = \"Simmons\", Email = \"zayne@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true }, new Employee3 { Id = 109, FirstName = \"Isha\", LastName = \"Davison\", Email = \"isha@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Server side filtering, paging and sorting​ NOTE For server-side sorting, we need the SortString parameter on GridColumn along with the SortKeySelector parameter. item.Id\"> @context.Id item.FirstName\"> @context.FirstName item.LastName\"> @context.LastName item.Designation\"> @context.Designation item.Salary\"> @context.Salary item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { [Inject] public IEmployeeService _employeeService { get; set; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting[0].SortString; sortDirection = request.Sorting[0].SortDirection; } var result = _employeeService.GetEmployees(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Set default sorting​ IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn=\"true\" parameter to the GridColumn. The default sort direction will be ascending. To change the default sorting of a column, add SortDirection=\"SortDirection.Descending\" to the GridColumn. INFO If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column. item.Id)\"> @context.Id item.Name)\" IsDefaultSortColumn=\"true\" SortDirection=\"SortDirection.Descending\"> @context.Name item.Designation)\"> @context.Designation item.DOJ)\"> @context.DOJ item.IsActive)\"> @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Disable specific column sorting​ Add Sortable=\"false\" parameter the GridColumn to disable the sorting. INFO If sorting is disabled, then the SortKeySelector parameter is not required. item.Id)\"> @context.Id item.Name)\"> @context.Name @context.Designation item.DOJ)\"> @context.DOJ item.IsActive)\"> @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Header text alignment​ Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Cell alignment​ Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End. @context.Id @context.Name @context.Designation @context.Salary @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee2 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", Salary = 7700, IsActive = true }, new Employee2 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", Salary = 19000, IsActive = true }, new Employee2 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", Salary = 12000, IsActive = true }, new Employee2 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", Salary = 19000, IsActive = false }, new Employee2 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", Salary = 16500.50M, IsActive = true }, new Employee2 { Id = 102, Name = \"Line\", Designation = \"Architect\", Salary = 24000, IsActive = true }, new Employee2 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", Salary = 21000, IsActive = true }, new Employee2 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", Salary = 17850, IsActive = true }, new Employee2 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", Salary = 8000, IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Cell formating​ To format the cell data, use ToString method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET EXAMPLE @context.Salary.ToString(\"N2\") @context.Id @context.Name @context.Designation @context.Salary.ToString(\"N2\") @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee2 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", Salary = 7700, IsActive = true }, new Employee2 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", Salary = 19000, IsActive = true }, new Employee2 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", Salary = 12000, IsActive = true }, new Employee2 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", Salary = 19000, IsActive = false }, new Employee2 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", Salary = 16500.50M, IsActive = true }, new Employee2 { Id = 102, Name = \"Line\", Designation = \"Architect\", Salary = 24000, IsActive = true }, new Employee2 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", Salary = 21000, IsActive = true }, new Employee2 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", Salary = 17850, IsActive = true }, new Employee2 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", Salary = 8000, IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Cell nowrap​ To prevent text from wrapping, add TextNoWrap=\"true\" parameter to the GridColumn. TIP Add Responsive=\"true\" parameter to the grid to enable horizontal scrolling. @context.Id @context.FirstName @context.LastName @context.Email @context.Company @context.Designation @context.DOJ @context.Salary.ToString(\"N2\") @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee3 { Id = 107, FirstName = \"Alice\", LastName = \"Reddy\", Email = \"alice@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true }, new Employee3 { Id = 103, FirstName = \"Bob\", LastName = \"Roy\", Email = \"bob@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true }, new Employee3 { Id = 106, FirstName = \"John\", LastName = \"Papa\", Email = \"john@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true }, new Employee3 { Id = 104, FirstName = \"Pop\", LastName = \"Two\", Email = \"pop@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false }, new Employee3 { Id = 105, FirstName = \"Ronald\", LastName = \"Dire\", Email = \"ronald@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50M, IsActive = true }, new Employee3 { Id = 102, FirstName = \"Line\", LastName = \"K\", Email = \"line@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true }, new Employee3 { Id = 101, FirstName = \"Daniel\", LastName = \"Potter\", Email = \"daniel@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true }, new Employee3 { Id = 108, FirstName = \"Zayne\", LastName = \"Simmons\", Email = \"zayne@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), Salary = 17850, IsActive = true }, new Employee3 { Id = 109, FirstName = \"Isha\", LastName = \"Davison\", Email = \"isha@blazorbootstrap.com\", Company = \"BlazorBootstrap Company\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Pagination alignment​ Change the alignment of pagination by adding the PaginationAlignment parameter to the Grid. By default, PaginationAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { return await Task.FromResult(request.ApplyTo(employees)); } } See demo here Empty data​ If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid. @context.Id @context.FirstName @context.LastName @context.Designation @code { private async Task> EmployeesDataProvider(GridDataProviderRequest request) { await Task.Delay(3000); return (new GridDataProviderResult { Data = new List(), TotalCount = 0 }); } } See demo here TIP Add Responsive=\"true\" parameter to the grid to enable horizontal scrolling. Save and Load Grid Settings​ This example shows how to save/load the Grid state. The state includes the page number, page size, and filters. IMPORTANT In version 0.5.1, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases. NOTE Browser local storage is used to persist the Grid state. Common locations exist for persisting state are Server-side storage, URL, Browser storage, and In-memory state container service. @using System.Text.Json item.Id\" FilterOperator=\"FilterOperator.GreaterThanOrEquals\" FilterValue=\"109\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { BlazorBootstrap.Grid grid; private IEnumerable employees; [Inject] public IJSRuntime JS { get; set; } public GridSettings Settings { get; set; } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private async Task OnGridSettingsChanged(GridSettings settings) { if (settings is null) return; // NOTE: enable below two lines, if you want to set default values for PageNumber and PageSize all the time. //settings.PageNumber = 1; //settings.PageSize = 10; await JS.InvokeVoidAsync(\"window.localStorage.setItem\", \"grid-settings\", JsonSerializer.Serialize(settings)); } private async Task GridSettingsProvider() { var settingsJson = await JS.InvokeAsync(\"window.localStorage.getItem\", \"grid-settings\"); if (string.IsNullOrWhiteSpace(settingsJson)) return null; var settings = JsonSerializer.Deserialize(settingsJson); if (settings is null) return null; return settings; } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Data parameter - Assign collection​ Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid. @using BlazorBootstrap.Demo.Models; @foreach (var department in departments) {

@department.Name Employees:

@context.Id @context.Name @context.Designation @context.DOJ @context.IsActive } @code { Grid grid; private List departments = new List() { new Department(\"Product 1 - Research & Development\", new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true } }), new Department(\"Product 2 - Research & Development\", new List { new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true } }) }; } See demo here Data parameter - Update collection​ Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid. @using BlazorBootstrap.Demo.Models; @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { Grid grid; private List employees; protected override void OnInitialized() { employees = new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true } }; } private async Task AddEmployee() { // for the same employees collection, we are adding an object // explicit grid refresh required employees.Add(CreateEmployee()); await grid.RefreshDataAsync(); } private void AddEmployee2() { // creates a shallow copy var emps = employees.GetRange(0, employees.Count); emps.Add(CreateEmployee()); // now employees variable has a new reference. So no need to refresh the grid explicitly // explicit grid refresh is not required employees = emps; } private Employee1 CreateEmployee() { var emp = new Employee1(); emp.Id = employees.Max(x => x.Id) + 1; emp.Name = $\"Employee {emp.Id}\"; emp.Designation = $\"QA Engineer {emp.Id}\"; emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25)); emp.IsActive = true; return emp; } } note The Add Employee button click adds a new employee to the existing employees collection—so explicit grid refresh is required. The Add Employee 2 button click creates a shallow copy of the employees collection and adds a new employee. This new collection is assigned to the employees variable. Now, the employees variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required. See demo here Conditional css class for grid row​ In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private string GetRowClass(Employee1 emp) { if (!emp.IsActive) return \"table-danger\"; else if (emp.Designation == \"Architect\") return \"table-success\"; return string.Empty; } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Conditional css class for grid column​ In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\" ColumnClass=\"@(x => x.IsActive ? \"table-success\" : \"table-danger\")\"> @context.IsActive @code { private IEnumerable employees; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Custom column headers​ In the below example, we use and tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ @code { private IEnumerable employees; private bool IsAllChecked { get => employees.All(e => e.IsActive); set => Array.ForEach(employees.ToArray(), e => e.IsActive = value); } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } Selection​ Set AllowSelection=\"true\" to enable the selection on the Grid. By default, SelectionMode is Single. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive
Selected Items Count: @selectedEmployees.Count
Selected Employees:
    @foreach (var emp in selectedEmployees) {
  • @emp.Name
    • }
@code { private IEnumerable employees = default!; private HashSet selectedEmployees = new(); private async Task> EmployeesDataProvider(GridDataProviderRequest request) { Console.WriteLine(\"EmployeesDataProvider called...\"); if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private Task OnSelectedItemsChanged(HashSet employees) { selectedEmployees = employees is not null && employees.Any() ? employees : new(); return Task.CompletedTask; } } See demo here Multiple selection​ To select multiple rows, set SelectionMode=\"GridSelectionMode.Multiple\". @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive
Selected Items Count: @selectedEmployees.Count
Selected Employees:
    @foreach (var emp in selectedEmployees) {
  • @emp.Name
    • }
@code { private IEnumerable employees = default!; private HashSet selectedEmployees = new(); private async Task> EmployeesDataProvider(GridDataProviderRequest request) { Console.WriteLine(\"EmployeesDataProvider called...\"); if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private Task OnSelectedItemsChanged(HashSet employees) { selectedEmployees = employees is not null && employees.Any() ? employees : new(); return Task.CompletedTask; } } See demo here Disable selection​ We can disable the header checkbox or row level checkbox based on a condition. For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. Also, disable check the row level checkbox if the employee Id is less than 105. @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive
Selected Items Count: @selectedEmployees.Count
Selected Employees:
    @foreach (var emp in selectedEmployees) {
  • @emp.Name
    • }
@code { private IEnumerable employees = default!; private HashSet selectedEmployees = new(); private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, }; } private bool DisableAllRowsSelectionHandler(IEnumerable employees) { return employees.Any(x => x.Id < 105); // disable selection if EmployeeId < 105 } private bool DisableRowSelectionHandler(Employee1 emp) { return emp.Id < 105; // disable selection if EmployeeId < 105 } private Task OnSelectedItemsChanged(HashSet employees) { selectedEmployees = employees is not null && employees.Any() ? employees : new(); return Task.CompletedTask; } } See demo here Dynamic page size​ @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private int pageSize = 5; private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } private void ChangeSize(int size) => pageSize = size; } See demo here Page size selection​ @context.Id @context.Name @context.Designation @context.DOJ @context.IsActive @code { private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Header row css class​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, }; } } See demo here Filters row css class​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, }; } } See demo here Row click event​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { [Inject] ModalService ModalService { get; set; } = default!; private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, }; } private async Task OnRowClick(GridRowEventArgs args) { await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = \"Event: Row Click\", Message = $\"Id: {args.Item.Id}, Name: {args.Item.Name}\" }); } } See demo here Row double click event​ item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { [Inject] ModalService ModalService { get; set; } = default!; private IEnumerable employees = default!; private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, }; } private async Task OnRowDoubleClick(GridRowEventArgs args) { await ModalService.ShowAsync(new ModalOption { Type = ModalType.Primary, Title = \"Event: Row Double Click\", Message = $\"Id: {args.Item.Id}, Name: {args.Item.Name}\" }); } } See demo here Translations​ In the example below, you will see translations related to pagination and filters in Dutch. item.Id\"> @context.Id item.Name\"> @context.Name item.Designation\"> @context.Designation item.DOJ\"> @context.DOJ item.IsActive\"> @context.IsActive @code { private IEnumerable employees = default!; private async Task> GridFiltersTranslationProvider() { var filtersTranslation = new List(); // number/date/boolean filtersTranslation.Add(new(\"=\", \"gelijk aan\", FilterOperator.Equals)); filtersTranslation.Add(new(\"!=\", \"Niet gelijk\", FilterOperator.NotEquals)); // number/date filtersTranslation.Add(new(\"<\", \"Minder dan\", FilterOperator.LessThan)); filtersTranslation.Add(new(\"<=\", \"Kleiner dan of gelijk aan\", FilterOperator.LessThanOrEquals)); filtersTranslation.Add(new(\">\", \"Groter dan\", FilterOperator.GreaterThan)); filtersTranslation.Add(new(\">=\", \"Groter dan of gelijk aan\", FilterOperator.GreaterThanOrEquals)); // string filtersTranslation.Add(new(\"*a*\", \"Bevat\", FilterOperator.Contains)); filtersTranslation.Add(new(\"a**\", \"Begint met\", FilterOperator.StartsWith)); filtersTranslation.Add(new(\"**a\", \"Eindigt met\", FilterOperator.EndsWith)); filtersTranslation.Add(new(\"=\", \"gelijk aan\", FilterOperator.Equals)); // common filtersTranslation.Add(new(\"x\", \"Duidelijk\", FilterOperator.Clear)); return await Task.FromResult(filtersTranslation); } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee1 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee1 { Id = 103, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee1 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee1 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee1 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee1 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee1 { Id = 113, Name = \"Merlin\", Designation = \"Senior Consultant\", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, new Employee1 { Id = 117, Name = \"Sharna\", Designation = \"Data Analyst\", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, new Employee1 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee1 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, new Employee1 { Id = 111, Name = \"Glenda\", Designation = \"Data Engineer\", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, }; } } See demo here Fixed header​ To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. You can change the units to em, pt, px, or etc. by setting the Unit parameter. @context.Id @context.Name @context.Designation @context.Designation @context.Designation @context.Designation @context.DOJ @context.IsActive @context.IsActive @context.IsActive @context.IsActive @context.IsActive @code { BlazorBootstrap.Grid grid = default!; private IEnumerable employees = default!; protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); } private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging employees = GetEmployees(); // call a service or an API to pull the employees return await Task.FromResult(request.ApplyTo(employees)); } private IEnumerable GetEmployees() { return new List { new Employee4 { Id = 107, Name = \"Alice\", Designation = \"AI Engineer\", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, new Employee4 { Id = null, Name = \"Bob\", Designation = \"Senior DevOps Engineer\", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, new Employee4 { Id = 106, Name = \"John\", Designation = \"Data Engineer\", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, new Employee4 { Id = 104, Name = \"Pop\", Designation = \"Associate Architect\", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, new Employee4 { Id = 105, Name = \"Ronald\", Designation = \"Senior Data Engineer\", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, new Employee4 { Id = 102, Name = \"Line\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee4 { Id = 101, Name = \"Daniel\", Designation = \"Architect\", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, new Employee4 { Id = 108, Name = \"Zayne\", Designation = \"Data Analyst\", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, new Employee4 { Id = 109, Name = \"Isha\", Designation = \"App Maker\", DOJ = null, IsActive = true }, new Employee4 { Id = 110, Name = \"Vijay\", Designation = null, DOJ = new DateOnly(1990, 7, 1), IsActive = true }, }; } } See demo here Fixed header with filters​ item.CustomerId\" FilterTextboxWidth=\"50\" HeaderTextAlignment=\"Alignment.Center\" TextAlignment=\"Alignment.Center\"> @context.CustomerId item.CustomerName\" FilterTextboxWidth=\"80\"> @context.CustomerName item.Phone\" FilterTextboxWidth=\"100\"> @context.Phone item.Email\" FilterTextboxWidth=\"120\"> @context.Email item.Address\" FilterTextboxWidth=\"150\"> @context.Address item.PostalZip\" FilterTextboxWidth=\"80\"> @context.PostalZip item.Country\" FilterTextboxWidth=\"80\"> @context.Country @code { [Inject] public ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting.FirstOrDefault().SortString; sortDirection = request.Sorting.FirstOrDefault().SortDirection; } var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Freeze columns​ item.CustomerId\" FilterTextboxWidth=\"50\" HeaderTextAlignment=\"Alignment.Center\" TextAlignment=\"Alignment.Center\"> @context.CustomerId item.CustomerName\" FilterTextboxWidth=\"80\"> @context.CustomerName item.Phone\" FilterTextboxWidth=\"100\"> @context.Phone item.Email\" FilterTextboxWidth=\"120\"> @context.Email item.Address\" FilterTextboxWidth=\"150\"> @context.Address item.PostalZip\" FilterTextboxWidth=\"80\"> @context.PostalZip item.Country\" FilterTextboxWidth=\"80\"> @context.Country @code { [Inject] public ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting.FirstOrDefault().SortString; sortDirection = request.Sorting.FirstOrDefault().SortDirection; } var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Freeze columns with fixed header​ item.CustomerId\" FilterTextboxWidth=\"50\" HeaderTextAlignment=\"Alignment.Center\" TextAlignment=\"Alignment.Center\"> @context.CustomerId item.CustomerName\" FilterTextboxWidth=\"80\"> @context.CustomerName item.Phone\" FilterTextboxWidth=\"100\"> @context.Phone item.Email\" FilterTextboxWidth=\"120\"> @context.Email item.Address\" FilterTextboxWidth=\"150\"> @context.Address item.PostalZip\" FilterTextboxWidth=\"80\"> @context.PostalZip item.Country\" FilterTextboxWidth=\"80\"> @context.Country @code { [Inject] public ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting.FirstOrDefault().SortString; sortDirection = request.Sorting.FirstOrDefault().SortDirection; } var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Freeze columns with fixed header and filters​ item.CustomerId\" FilterTextboxWidth=\"50\" HeaderTextAlignment=\"Alignment.Center\" TextAlignment=\"Alignment.Center\"> @context.CustomerId item.CustomerName\" FilterTextboxWidth=\"80\"> @context.CustomerName item.Phone\" FilterTextboxWidth=\"100\"> @context.Phone item.Email\" FilterTextboxWidth=\"120\"> @context.Email item.Address\" FilterTextboxWidth=\"150\"> @context.Address item.PostalZip\" FilterTextboxWidth=\"80\"> @context.PostalZip item.Country\" FilterTextboxWidth=\"80\"> @context.Country @code { [Inject] public ICustomerService _customerService { get; set; } = default!; private async Task> CustomersDataProvider(GridDataProviderRequest request) { string sortString = \"\"; SortDirection sortDirection = SortDirection.None; if (request.Sorting is not null && request.Sorting.Any()) { // Note: Multi column sorting is not supported at this moment sortString = request.Sorting.FirstOrDefault().SortString; sortDirection = request.Sorting.FirstOrDefault().SortDirection; } var result = await _customerService.GetCustomersAsync(request.Filters, request.PageNumber, request.PageSize, sortString, sortDirection, request.CancellationToken); return await Task.FromResult(new GridDataProviderResult { Data = result.Item1, TotalCount = result.Item2 }); } } See demo here Edit this page Previous Dropdown Next Modal Grid Parameters Grid Callback Events Grid Methods GridColumn Parameters GridSettings Properties Examples Client side filtering Client side filtering with string comparision Client side paging Client side sorting Client side filtering, paging, and sorting Set default filter Disable specific column filter Increase filter textbox width Server side filtering, paging and sorting Set default sorting Disable specific column sorting Header text alignment Cell alignment Cell formating Cell nowrap Pagination alignment Empty data Save and Load Grid Settings Data parameter - Assign collection Data parameter - Update collection Conditional css class for grid row Conditional css class for grid column Custom column headers Selection Multiple selection Disable selection Dynamic page size Page size selection Header row css class Filters row css class Row click event Row double click event Translations Fixed header Fixed header with filters Freeze columns Freeze columns with fixed header Freeze columns with fixed header and filters","s":"Blazor Grid","u":"/components/grid","h":"","p":567}],"index":{"version":"2.3.9","fields":["t"],"fieldVectors":[["t/2",[0,0.314,1,0.364,2,3.653,3,1.591,4,1.879,5,1.208,6,0.024,7,0.251,8,0.262,9,0.297,10,0.277,11,0.27,12,0.301,13,0.406,14,0.293,15,2.354,16,1.556,17,1.794,18,2.724,19,2.041,20,2.534,21,0.254,22,1.272,23,0.239,24,2.797,25,2.294,26,0.607,27,3.653,28,1.712,29,2.147,30,2.555,31,3.928,32,1.807,33,2.889,34,2.744,35,2.052,36,3.079,37,1.828,38,2.084,39,1.667,40,1.519,41,1.332,42,2.448,43,1.501,44,1.879,45,2.268,46,2.166,47,2.448,48,2.358,49,1.961,50,1.99,51,2.268,52,3.923,53,3.028,54,2.354,55,2.985,56,2.354,57,0.434,58,2.31,59,1.017,60,1.962,61,3.923,62,2.5,63,1.251,64,2.4,65,0.72,66,2.676,67,1.007,68,3.575,69,3.384,70,1.853,71,2.555,72,2.388,73,1.691,74,3.737,75,1.691,76,2.744,77,2.53,78,2.153,79,3.923,80,1.905,81,2.985,82,3.826,83,2.613,84,2.897,85,3.575,86,2.614,87,3.431,88,1.753,89,2.676,90,2.676,91,1.757,92,2.354,93,1.201,94,1.933]],["t/4",[3,2.776,6,0.019,7,0.204,8,0.21,9,0.222,10,0.222,11,0.216,12,0.241,14,0.235,19,1.658,21,0.204,23,0.24,32,2.205,48,2.878,57,0.463,65,0.879,67,1.756,95,6.826,96,3.757,97,4.187,98,6.352,99,6.352,100,4.788,101,4.362,102,5.208,103,2.843,104,6.352,105,5.789,106,4.56,107,2.139,108,1.723,109,1.596,110,2.096,111,0.279,112,5.57]],["t/6",[6,0.019,7,0.206,8,0.212,9,0.225,10,0.225,11,0.219,12,0.244,14,0.238,21,0.206,23,0.249,57,0.467,58,4.08,65,0.89,88,2.541,93,2.122,97,4.239,108,1.744,109,1.616,110,2.122,111,0.332,112,5.638,113,6.616,114,3.273,115,5.272,116,3.273,117,2.377,118,5.638]],["t/8",[6,0.026,7,0.178,8,0.183,9,0.194,10,0.194,11,0.189,12,0.211,14,0.205,19,1.802,21,0.178,23,0.237,25,2.096,32,1.928,48,3.128,57,0.427,58,4.38,59,1.018,67,1.535,88,1.869,93,1.832,97,3.66,106,3.986,107,2.325,108,1.506,109,1.395,110,1.832,111,0.303,113,4.868,114,2.826,117,2.777,118,6.054,119,2.142,120,4.185,121,5.06,122,2.947,123,2.714,124,5.06,125,7.022,126,2.75,127,5.552,128,2.096,129,5.494,130,3.953,131,7.969,132,4.017,133,5.846,134,5.494,135,5.846,136,4.742,137,5.846,138,5.204,139,5.846,140,7.022,141,6.339,142,5.888,143,3.589,144,5.888,145,4.868,146,3.34,147,4.868]],["t/10",[3,2.756,6,0.019,7,0.202,8,0.208,9,0.221,10,0.221,11,0.214,12,0.239,14,0.233,19,1.646,21,0.202,23,0.247,26,0.482,32,2.189,48,2.857,57,0.461,67,1.744,93,2.081,95,5.747,97,4.157,106,4.527,107,2.123,108,1.71,109,1.584,110,2.081,111,0.328,112,6.54,113,5.529,117,2.757,120,4.753,146,3.793,148,4.753,149,4.753,150,5.17,151,6.306]],["t/12",[6,0.018,7,0.198,8,0.204,9,0.216,10,0.216,11,0.21,12,0.235,14,0.229,21,0.198,23,0.246,25,2.784,57,0.456,59,1.105,93,2.041,97,4.078,106,5.656,108,1.678,109,1.554,110,2.041,111,0.324,114,3.148,122,3.148,128,2.336,131,6.56,147,5.424,152,6.243,153,5.637,154,4.662,155,4.342,156,2.158,157,7.824,158,6.186,159,2.467,160,7.062,161,4.787]],["t/14",[6,0.018,7,0.195,8,0.201,9,0.213,10,0.213,11,0.207,12,0.231,13,0.311,14,0.225,18,3.185,21,0.195,23,0.245,40,2.538,41,2.225,57,0.376,59,0.824,65,1.011,87,4.011,93,2.008,97,4.011,101,4.179,108,1.65,109,1.529,110,2.008,111,0.321,114,3.097,116,3.097,118,5.335,128,2.298,147,6.402,152,5.152,156,2.142,159,3.12,160,6.946,162,5.545,163,6.084,164,4.842,165,4.368,166,4.988,167,4.368,168,6.453,169,6.453,170,6.946,171,4.586,172,7.696,173,7.696,174,2.225]],["t/16",[6,0.018,7,0.196,8,0.201,9,0.213,10,0.213,11,0.207,12,0.231,13,0.312,14,0.225,16,1.873,17,1.771,19,2.044,21,0.196,23,0.245,29,2.515,57,0.377,59,0.99,65,0.844,93,2.012,107,2.637,108,1.654,109,1.532,110,2.012,111,0.321,128,2.303,152,5.164,156,2.002,159,2.916,161,5.658,164,4.853,165,4.378,170,6.963,174,2.231,175,2.905,176,1.547,177,5.164,178,5.804,179,5.757,180,4.853]],["t/18",[6,0.019,7,0.2,8,0.206,9,0.218,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,21,0.2,23,0.246,29,2.569,57,0.489,59,1.003,65,1.025,93,2.056,108,1.69,109,1.565,110,2.056,111,0.325,155,4.373,156,1.706,159,2.484,166,5.108,168,6.608,174,2.279,176,1.58,180,4.958,181,6.27,182,2.894,183,5.929,184,4.923,185,2.858,186,7.88,187,7.88,188,5.275]],["t/20",[6,0.019,7,0.202,8,0.208,9,0.22,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,21,0.202,23,0.247,57,0.491,58,3.991,59,1.009,65,1.031,93,2.076,108,1.706,109,1.581,110,2.076,111,0.327,155,4.415,156,1.723,159,2.508,174,2.301,176,1.596,181,5.326,184,3.919,188,6.306,189,2.997,190,2.816,191,5.986,192,3.641,193,5.326]],["t/22",[1,0.312,6,0.018,7,0.193,8,0.199,9,0.211,10,0.211,11,0.205,12,0.229,13,0.308,14,0.223,21,0.193,23,0.244,25,2.276,32,2.808,40,3.25,41,2.85,57,0.449,59,1.121,88,2.624,93,1.989,108,1.635,109,1.515,110,1.989,111,0.319,148,4.543,155,5.096,156,1.651,159,2.404,161,4.665,174,2.205,176,1.529,180,5.778,181,5.104,194,3.398,195,5.286,196,3.747,197,5.736,198,4.328,199,3.068]],["t/24",[6,0.019,7,0.201,8,0.207,9,0.219,10,0.219,11,0.213,12,0.237,13,0.32,14,0.231,16,1.902,21,0.201,23,0.247,25,2.804,57,0.459,59,0.848,93,2.066,106,5.332,108,1.698,109,1.573,110,2.066,111,0.326,156,1.714,159,2.496,174,2.29,176,1.588,184,3.9,188,5.3,193,6.288,199,3.78,200,2.944,201,4.211,202,5.957,203,4.06,204,5.133]],["t/26",[6,0.018,7,0.197,8,0.203,9,0.215,10,0.215,11,0.209,12,0.234,13,0.315,14,0.227,16,1.883,19,2.052,21,0.197,23,0.245,25,2.777,57,0.504,59,0.834,69,2.971,93,2.031,107,2.647,108,1.67,109,1.547,110,2.031,111,0.323,156,1.686,159,2.455,174,2.252,176,1.562,193,5.213,199,4.002,203,4.299,204,6.028,205,2.896,206,5.611,207,5.213]],["t/28",[1,0.267,6,0.019,7,0.199,8,0.205,9,0.217,10,0.217,11,0.211,12,0.236,13,0.318,14,0.23,16,2.022,21,0.199,23,0.246,25,2.347,32,2.567,53,3.616,57,0.457,59,0.842,62,4.269,67,2.183,82,4.569,93,2.051,108,1.686,109,1.562,110,2.051,111,0.325,156,1.702,159,2.478,174,2.273,176,1.577,199,3.164,203,3.398,204,5.096,207,6.261,208,5.915,209,3.253,210,5.262]],["t/30",[6,0.017,7,0.181,8,0.187,9,0.198,10,0.198,11,0.192,12,0.214,13,0.289,14,0.209,16,1.939,17,1.898,21,0.181,23,0.238,53,3.287,57,0.489,59,0.765,93,1.864,108,1.532,109,1.419,110,1.864,111,0.307,117,2.088,156,1.911,159,2.252,174,2.066,176,1.433,179,4.153,198,5.436,207,4.782,210,5.908,211,3.799,212,5.375,213,5.375,214,4.371,215,6.901,216,5.32,217,5.648,218,5.553,219,2.33,220,3.457,221,3.162,222,4.198,223,6.64,224,5.991,225,5.991,226,4.257,227,5.13,228,4.371,229,3.043,230,8.645,231,5.991,232,6.449,233,4.631,234,3.457,235,4.631,236,4.782,237,5.375,238,4.631]],["t/32",[0,0.288,6,0.018,7,0.193,8,0.199,9,0.211,10,0.211,11,0.205,12,0.229,13,0.308,14,0.223,21,0.193,23,0.244,25,2.276,37,3.027,39,2.692,57,0.52,65,1.005,80,3.155,93,1.989,108,1.635,109,1.515,110,1.989,111,0.319,117,2.228,156,1.988,159,2.404,174,2.205,176,1.529,210,5.104,216,4.884,217,6.028,218,5.778,219,2.486,234,4.444,238,5.953,239,5.286,240,4.942,241,4.797,242,4.665]],["t/34",[0,0.28,6,0.017,7,0.181,8,0.186,9,0.197,10,0.197,11,0.192,12,0.214,13,0.288,14,0.208,16,2.08,17,1.788,21,0.181,23,0.238,25,2.128,32,1.957,37,2.83,39,2.531,56,3.644,57,0.512,93,1.86,108,1.529,109,1.416,110,1.86,111,0.306,117,2.796,119,2.175,122,2.406,127,5.636,128,2.631,131,7.391,156,1.544,159,2.248,171,6.32,174,2.061,176,1.43,209,3.959,221,3.158,228,4.361,238,4.621,242,5.393,243,4.621,244,7.391,245,6.435,246,4.621,247,4.361,248,3.237,249,5.636,250,5.363,251,4.942,252,7.129,253,7.129,254,3.128,255,4.772]],["t/36",[0,0.232,6,0.019,7,0.201,8,0.207,9,0.22,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.201,23,0.247,37,3.151,39,2.538,57,0.46,93,2.071,108,1.702,109,1.577,110,2.071,111,0.327,117,2.32,156,1.719,159,2.502,174,2.295,176,1.592,199,4.034,203,4.333,242,4.856,255,6.297,256,5.502,257,5.972,258,4.73]],["t/38",[0,0.325,1,0.243,6,0.017,7,0.181,8,0.187,9,0.198,10,0.198,11,0.192,12,0.214,13,0.289,14,0.209,21,0.181,23,0.228,24,3.496,28,2.657,57,0.532,65,0.966,70,2.875,93,1.864,108,1.532,109,1.419,110,1.864,111,0.307,117,2.924,156,1.547,159,2.252,174,2.066,176,1.433,255,4.782,258,5.26,259,4.631,260,4.079,261,5.093,262,4.555,263,4.992,264,4.257]],["t/40",[0,0.316,1,0.308,6,0.018,7,0.189,8,0.195,9,0.207,10,0.207,11,0.201,12,0.224,13,0.302,14,0.218,16,1.836,17,1.933,21,0.189,23,0.216,28,2.777,57,0.365,58,3.746,60,1.747,93,1.948,108,1.602,109,2.018,110,1.948,111,0.315,117,2.183,156,1.617,159,2.355,174,2.16,176,1.498,209,3.091,216,4.823,227,4.341,258,4.451,264,5.405,265,3.746,266,4.699,267,6.741,268,5.271,269,4.239,270,3.006,271,3.746,272,6.263,273,4.569,274,7.469,275,7.469,276,4.341]],["t/42",[0,0.318,1,0.326,6,0.017,7,0.183,8,0.188,9,0.199,10,0.199,11,0.194,12,0.216,13,0.292,14,0.211,16,1.459,21,0.183,23,0.172,28,2.68,57,0.525,65,0.971,88,2.793,93,1.88,108,1.546,109,1.432,110,1.88,111,0.308,117,2.593,136,3.913,143,3.684,145,4.996,156,1.561,159,2.272,174,2.084,176,1.445,190,2.551,214,4.409,240,5.752,260,4.095,264,4.295,276,5.158,277,4.534,278,4.939,279,3.615,280,4.672,281,7.441,282,5.422,283,7.207,284,2.9,285,5.193,286,5.193,287,3.999]],["t/44",[0,0.325,1,0.338,3,2.437,6,0.017,7,0.179,8,0.184,9,0.195,10,0.195,11,0.19,12,0.212,13,0.285,14,0.206,16,1.928,18,3.94,21,0.179,23,0.168,26,0.427,40,3.284,41,2.961,57,0.523,59,0.755,65,1.042,93,1.84,107,2.651,108,1.512,109,1.401,110,1.84,111,0.304,117,2.783,128,2.105,156,1.896,159,2.223,174,2.039,176,1.414,265,3.538,287,3.913,288,4.859,289,4.203,290,2.239,291,2.918,292,4.437,293,7.052,294,4.203,295,3.676,296,4.003]],["t/46",[0,0.319,1,0.332,3,2.313,4,2.731,6,0.016,7,0.215,8,0.221,9,0.185,10,0.185,11,0.18,12,0.201,13,0.271,14,0.196,16,1.716,21,0.17,23,0.16,26,0.405,32,1.837,57,0.512,65,1.017,93,1.746,108,1.436,109,1.683,110,1.746,111,0.294,117,2.476,126,2.622,130,3.836,143,3.422,149,3.989,156,2.013,159,2.11,165,3.799,174,1.936,176,1.342,178,5.036,185,2.428,192,3.981,198,3.799,209,2.77,222,4.03,229,2.851,240,5.493,241,4.211,248,2.458,270,3.933,276,3.891,287,4.702,288,3.714,290,1.463,292,4.211,297,3.183,298,3.714,299,4.144,300,4.339,301,3.489,302,4.64,303,5.036,304,3.799,305,4.481,306,4.339,307,5.292,308,5.036,309,5.292,310,3.891,311,6.042,312,6.694,313,5.613,314,5.613,315,6.042,316,6.042,317,3.325]],["t/48",[0,0.325,1,0.333,3,2.341,6,0.016,7,0.172,8,0.177,9,0.187,10,0.187,11,0.182,12,0.203,13,0.274,14,0.198,16,1.988,18,3.869,21,0.172,23,0.161,26,0.41,32,2.778,40,3.084,41,2.839,44,3.815,57,0.527,65,1.131,77,2.045,88,2.613,92,4.365,93,1.768,108,1.453,109,1.346,110,1.768,111,0.297,117,2.869,128,2.023,156,1.849,159,2.136,174,1.96,176,1.359,205,2.52,288,3.76,290,2.259,291,2.804,292,4.263,295,3.532,296,4.847,318,3.939,319,4.146,320,4.146,321,6.117,322,3.939]],["t/50",[0,0.323,1,0.342,6,0.017,7,0.185,8,0.191,9,0.202,10,0.202,11,0.196,12,0.219,13,0.295,14,0.213,21,0.185,23,0.174,26,0.442,40,2.409,41,2.112,57,0.506,59,0.782,65,1.103,93,1.905,108,1.566,109,1.451,110,1.905,111,0.311,114,2.939,117,2.134,119,2.228,128,2.18,156,2.094,159,2.821,174,2.112,176,1.465,219,2.381,270,2.939,290,2.114,291,3.022,292,4.594,296,4.145,317,2.409,322,5.2,323,4.594,324,4.051,325,2.523,326,4.594,327,2.899,328,3.306,329,4.594]],["t/52",[0,0.321,1,0.344,6,0.017,7,0.188,8,0.193,9,0.205,10,0.205,11,0.199,12,0.222,13,0.299,14,0.216,20,3.424,21,0.188,23,0.176,26,0.448,29,2.413,57,0.508,59,0.966,65,1.065,93,1.931,108,1.587,109,1.47,110,1.931,111,0.313,114,2.978,117,2.163,128,2.21,156,2.107,159,2.844,174,2.14,176,1.484,219,2.413,284,2.978,290,2.127,291,3.063,292,4.656,322,4.302,325,2.557,329,5.675,330,4.955,331,2.788,332,3.199,333,4.656]],["t/54",[0,0.318,1,0.332,5,0.904,6,0.018,7,0.19,8,0.196,9,0.208,10,0.208,11,0.202,12,0.225,13,0.303,14,0.219,21,0.19,23,0.179,26,0.454,29,2.446,42,3.939,50,3.243,57,0.479,59,0.803,65,0.995,93,1.957,108,1.609,109,1.49,110,1.957,111,0.316,117,2.193,128,2.24,156,2.119,159,2.867,174,2.17,175,2.826,219,2.446,290,1.988,291,3.105,292,4.72,325,2.592,333,4.72,334,5.286,335,4.59,336,4.72,337,3.695,338,3.764,339,4.074]],["t/56",[0,0.327,1,0.365,5,0.831,6,0.016,7,0.175,8,0.18,9,0.191,10,0.191,11,0.186,12,0.207,13,0.279,14,0.202,21,0.175,22,0.876,23,0.206,39,2.187,57,0.338,59,0.739,65,0.756,93,1.801,108,1.481,109,1.372,110,1.801,111,0.3,117,2.018,128,2.061,156,1.871,159,2.724,174,1.997,175,2.6,190,2.444,199,2.778,203,2.984,219,3.318,233,5.601,284,3.795,291,2.857,325,3.516,331,3.552,339,3.749,340,4.795,341,4.114,342,5.304,343,5.144,344,4.013]],["t/58",[0,0.317,1,0.33,4,3.02,6,0.017,7,0.188,8,0.193,9,0.205,10,0.205,11,0.199,12,0.222,13,0.299,14,0.216,21,0.188,23,0.176,26,0.448,39,2.706,43,2.413,57,0.495,59,0.792,65,0.81,93,1.931,108,1.587,109,1.47,110,1.931,111,0.313,114,2.978,117,2.163,128,2.21,156,2.107,159,2.844,174,2.14,176,1.484,209,4.026,219,2.413,290,1.972,291,3.063,292,4.656,325,2.557,329,4.656,333,5.675,334,4.302,337,4.443,345,4.955,346,5.243,347,6.206]],["t/60",[0,0.318,1,0.335,5,0.828,6,0.016,7,0.174,8,0.18,9,0.19,10,0.19,11,0.185,12,0.206,13,0.278,14,0.201,19,2.172,21,0.174,22,0.872,23,0.164,26,0.416,40,2.842,41,2.722,46,1.776,57,0.52,59,0.923,65,0.943,93,1.794,96,3.215,103,2.433,108,1.475,109,1.366,110,1.794,111,0.299,117,2.519,122,2.321,128,2.053,129,4.326,130,3.113,156,2.038,159,2.717,174,1.988,175,2.59,219,2.242,248,2.525,290,2.058,291,2.845,292,4.326,325,2.376,334,3.996,339,4.68,340,3.815,348,3.903,349,4.03,350,3.903,351,5.609,352,4.097,353,4.326,354,5.173,355,4.457,356,4.767,357,4.767,358,4.954,359,5.136,360,6.206,361,4.603,362,3.996,363,3.996,364,3.996]],["t/62",[0,0.316,1,0.346,5,0.908,6,0.018,7,0.191,8,0.197,9,0.208,10,0.208,11,0.203,12,0.226,13,0.305,14,0.22,16,1.526,17,1.866,21,0.191,22,0.956,23,0.18,26,0.456,57,0.369,60,1.763,93,1.966,108,1.616,109,1.497,110,1.966,111,0.317,117,2.203,128,2.25,156,1.975,159,2.875,174,2.18,194,3.359,209,3.119,216,4.008,219,2.458,290,1.648,291,3.119,325,2.604,344,4.381,347,6.32,365,5.301,366,3.075,367,4.742,368,7.537,369,6.803,370,7.537,371,6.32,372,3.119,373,4.381]],["t/64",[0,0.316,1,0.346,5,0.912,6,0.018,7,0.192,8,0.198,9,0.209,10,0.209,11,0.204,12,0.227,13,0.306,14,0.221,16,1.533,17,1.869,21,0.192,22,0.96,23,0.18,26,0.458,57,0.37,60,1.772,65,1.001,93,1.975,108,1.624,109,1.504,110,1.975,111,0.318,117,2.213,122,2.556,128,2.261,156,1.98,159,2.883,174,2.19,194,3.374,219,2.469,234,3.664,290,1.655,291,3.133,325,2.616,340,4.202,344,5.315,365,4.401,372,3.133,374,3.729,375,4.632,376,6.835]],["t/66",[0,0.316,1,0.346,5,0.906,6,0.018,7,0.191,8,0.196,9,0.208,10,0.208,11,0.202,12,0.226,13,0.304,14,0.22,21,0.191,22,0.954,23,0.179,57,0.445,88,2.822,91,2.869,93,1.962,96,3.517,108,1.613,109,1.494,110,1.962,111,0.316,117,2.198,128,2.245,156,1.972,159,2.871,174,2.175,194,3.351,199,3.665,203,3.937,219,2.452,260,3.203,278,3.459,291,3.112,325,2.598,365,4.371,373,5.293,377,4.731,378,3.999,379,4.731,380,7.52,381,7.52,382,3.772]],["t/68",[0,0.313,1,0.329,5,0.788,6,0.015,7,0.166,8,0.218,9,0.181,10,0.181,11,0.176,12,0.196,13,0.265,14,0.191,19,1.724,21,0.166,22,0.83,23,0.156,46,1.691,48,3.473,57,0.52,59,0.701,65,0.914,67,2.012,75,2.404,93,1.708,103,2.317,107,2.45,108,1.404,109,1.301,110,1.708,111,0.29,116,3.362,117,2.833,122,2.21,128,1.955,129,4.119,130,3.782,156,1.809,159,2.634,174,1.893,182,2.404,209,3.808,219,2.135,222,3.114,234,3.168,241,4.119,248,3.379,291,3.457,300,4.244,302,4.539,306,4.244,325,2.262,349,3.907,350,3.716,351,5.968,352,3.901,353,4.119,354,4.926,355,4.244,356,4.539,357,4.539,358,4.717,359,4.979,360,5.91,361,4.383,373,3.805,382,4.191,383,3.412,384,3.161,385,7.006,386,7.006,387,4.119,388,2.317,389,2.709,390,2.184,391,2.709,392,2.345,393,2.964]],["t/70",[0,0.314,1,0.338,5,0.773,6,0.015,7,0.163,8,0.215,9,0.178,10,0.178,11,0.173,12,0.193,13,0.26,14,0.188,17,1.78,19,1.986,21,0.163,22,0.814,23,0.153,46,1.658,56,4.217,57,0.498,59,0.687,60,1.502,65,0.903,72,3.49,73,2.357,93,1.675,94,3.463,107,2.562,108,1.377,109,1.275,110,1.675,111,0.287,117,2.909,119,1.958,128,1.917,130,2.906,156,1.787,159,2.601,168,5.383,174,1.856,182,2.357,185,2.328,199,3.32,209,2.656,215,4.625,219,2.093,222,3.053,241,4.039,248,2.357,291,3.414,300,4.161,302,4.45,306,4.161,325,2.218,357,5.72,378,4.388,382,3.22,384,2.973,387,4.039,389,2.656,390,2.142,391,2.656,392,2.3,393,3.735,394,2.817,395,7.447,396,6.208,397,3.731,398,6.934,399,5.945,400,4.139,401,3.992,402,3.825,403,3.002,404,6.918,405,6.419,406,6.419,407,6.419,408,3.053,409,3.053,410,3.053,411,3.053,412,3.346]],["t/72",[0,0.319,1,0.326,5,0.767,6,0.015,7,0.161,8,0.166,9,0.176,10,0.176,11,0.171,12,0.191,13,0.258,14,0.186,21,0.161,22,0.808,23,0.152,25,1.902,32,1.749,57,0.486,59,0.682,65,0.898,67,2.098,93,1.662,108,1.366,109,1.265,110,1.662,111,0.285,117,3.023,128,1.902,130,3.716,133,5.495,135,5.495,137,5.495,139,5.495,143,3.256,149,3.796,156,1.778,159,2.588,174,1.842,189,2.399,219,2.962,220,2.495,221,2.282,222,3.029,236,4.264,254,2.795,268,3.702,280,4.129,291,3.397,300,4.129,301,3.32,309,5.036,310,4.772,325,3.139,338,4.981,351,3.796,366,2.599,388,2.254,393,2.884,412,4.279,413,3.256,414,5.076,415,4.981,416,5.299,417,3.897,418,3.32,419,4.366,420,7.41,421,5.341,422,5.165,423,4.416,424,3.897,425,6.37,426,7.471,427,3.535,428,3.535,429,3.535,430,3.616]],["t/74",[0,0.313,1,0.339,5,0.855,6,0.021,7,0.18,8,0.185,9,0.196,10,0.196,11,0.191,12,0.213,13,0.287,14,0.207,19,1.465,21,0.18,22,0.9,23,0.169,26,0.429,33,3.115,39,2.225,43,2.314,57,0.43,59,0.76,67,2.285,93,1.852,100,4.23,108,1.522,109,1.41,110,1.852,111,0.305,117,2.569,122,2.396,128,2.119,132,3.265,156,1.903,159,2.772,174,2.053,189,2.673,192,2.744,201,3.775,219,2.314,220,2.78,221,2.543,222,3.376,284,3.843,291,2.937,325,2.453,331,3.597,349,3.319,378,3.775,388,2.512,400,4.41,412,3.699,430,4.99,431,4.343,432,5.612,433,3.628,434,7.098,435,5.952,436,7.098,437,7.098,438,6.407,439,5.34,440,7.098,441,7.098,442,4.126]],["t/76",[0,0.314,1,0.347,5,0.918,6,0.018,7,0.193,8,0.199,9,0.211,10,0.211,11,0.205,12,0.229,13,0.308,14,0.223,21,0.193,22,0.967,23,0.182,57,0.373,59,0.816,93,1.989,108,1.635,109,1.515,110,1.989,111,0.319,117,2.228,128,2.276,156,1.988,159,2.895,174,2.205,189,2.872,219,2.486,291,3.155,317,3.25,324,3.597,325,2.634,327,3.027,328,4.631,430,4.328,442,5.338,443,4.665,444,4.797,445,7.624,446,7.624,447,4.328]],["t/78",[0,0.323,1,0.339,5,0.853,6,0.017,7,0.18,8,0.185,9,0.196,10,0.196,11,0.19,12,0.212,13,0.286,14,0.207,17,1.784,20,2.336,21,0.18,22,0.898,23,0.169,48,3.573,49,3.017,57,0.467,59,0.758,60,1.657,93,1.848,107,1.886,108,1.519,109,1.407,110,1.848,111,0.305,117,3.127,128,2.115,156,1.901,159,2.768,174,2.048,196,2.89,203,3.062,211,3.766,216,3.766,219,2.309,270,2.85,284,2.85,291,2.931,310,4.117,317,3.289,325,2.447,328,3.206,331,2.668,397,4.117,403,3.312,448,4.983,449,4.333,450,4.333,451,4.591,452,7.083,453,6.393,454,7.083,455,3.691]],["t/80",[0,0.315,1,0.324,5,0.677,6,0.013,8,0.147,9,0.155,10,0.155,11,0.151,12,0.169,13,0.227,14,0.164,17,1.756,20,2.817,21,0.142,22,0.713,23,0.134,39,1.423,43,1.832,57,0.527,59,0.602,60,1.315,63,1.527,65,0.615,72,2.038,73,2.063,93,1.466,103,3.755,107,2.432,108,1.205,109,1.815,110,1.466,111,0.263,117,2.981,122,3.581,128,1.678,156,1.637,159,2.383,166,3.642,174,1.625,196,3.084,205,2.09,214,3.438,219,1.832,222,5.215,270,3.042,271,3.792,284,3.042,291,2.325,299,2.504,301,5.117,317,3.364,324,2.201,325,1.942,327,2.231,328,3.422,331,2.847,332,2.429,343,2.672,351,3.348,372,4.063,384,1.832,390,1.875,392,2.013,397,4.393,402,3.348,403,3.535,447,3.189,448,3.189,450,6.007,456,2.585,457,2.293,458,5.619,459,3.895,460,5.619,461,4.228,462,4.712,463,5.619,464,9.818,465,5.687,466,5.619,467,5.619,468,5.619,469,2.672]],["t/82",[0,0.315,1,0.343,5,0.885,6,0.017,7,0.186,8,0.192,9,0.203,10,0.203,11,0.198,12,0.22,13,0.297,14,0.215,17,1.853,21,0.186,22,0.932,23,0.175,54,3.758,57,0.439,59,0.787,60,1.72,67,2.305,93,1.918,108,1.577,109,1.46,110,1.918,111,0.312,117,2.625,128,2.195,130,3.328,156,1.945,159,2.832,174,2.126,189,2.769,196,3,219,2.397,291,3.042,325,2.54,372,3.042,388,2.602,419,3.91,442,4.273,447,5.099,470,4.381,471,4.498,472,6.636,473,7.352,474,6.165,475,7.352,476,5.812,477,7.352,478,6.636,479,7.352]],["t/84",[0,0.315,1,0.339,5,0.855,6,0.017,7,0.18,8,0.185,9,0.196,10,0.196,11,0.191,12,0.213,13,0.287,14,0.207,17,1.869,21,0.18,22,0.9,23,0.169,57,0.488,59,0.76,60,1.661,67,2.243,93,1.852,108,1.522,109,1.41,110,1.852,111,0.305,117,2.791,128,2.119,142,5.952,156,1.903,159,2.772,174,2.053,200,2.639,216,3.775,219,2.314,291,2.937,317,2.899,325,2.453,384,3.254,388,2.512,390,2.368,403,4.111,448,4.029,450,4.343,453,6.407,455,4.582,459,4.921,480,3.561,481,3.939,482,4.751,483,4.33,484,2.979,485,7.098,486,7.098,487,4.029,488,7.098,489,7.098,490,7.098,491,4.029]],["t/86",[0,0.315,1,0.344,5,0.891,6,0.017,7,0.188,8,0.193,9,0.205,10,0.205,11,0.199,12,0.222,13,0.299,14,0.216,17,1.857,21,0.188,22,0.939,23,0.176,57,0.476,59,0.792,60,1.732,70,2.978,93,1.931,108,1.587,109,1.47,110,1.931,111,0.313,117,2.636,128,2.21,156,1.953,159,2.844,174,2.14,200,2.752,219,2.413,260,3.152,278,4.776,291,3.063,325,2.557,450,4.528,455,3.858,491,5.12,492,4.528,493,7.401,494,5.852,495,7.563,496,7.401,497,4.798,498,7.401,499,4.528,500,3.713]],["t/88",[0,0.317,1,0.334,5,0.819,6,0.016,7,0.173,8,0.178,9,0.188,10,0.188,11,0.183,12,0.204,13,0.275,14,0.199,19,2.192,21,0.173,22,0.863,23,0.162,32,2.699,35,3.032,46,1.757,47,2.53,57,0.481,59,0.729,65,0.937,77,2.967,78,3.182,85,3.695,88,2.617,91,2.596,93,1.775,103,2.408,108,1.459,109,1.352,110,1.775,111,0.298,116,2.738,117,2.961,122,2.297,128,2.031,143,3.478,156,1.854,159,2.699,174,1.968,190,2.408,192,3.8,200,2.53,219,2.219,254,2.986,291,3.543,325,2.351,351,4.055,372,2.816,378,4.553,461,5.119,491,3.862,500,4.295,501,3.478,502,5.38,503,4.281,504,2.898,505,6.804,506,6.804,507,6.142,508,6.804,509,6.142,510,6.804,511,6.804,512,3.618]],["t/90",[0,0.314,1,0.348,5,0.92,6,0.018,7,0.194,8,0.2,9,0.211,10,0.211,11,0.205,12,0.229,13,0.309,14,0.223,19,2.113,21,0.194,22,0.969,23,0.182,46,1.974,47,2.842,59,0.818,65,0.836,69,2.916,77,2.977,79,4.554,82,5.345,83,3.034,84,4.808,85,4.15,93,1.994,108,1.639,109,1.518,110,1.994,111,0.32,117,2.233,128,2.282,156,1.991,159,2.899,174,2.21,219,2.492,291,3.162,325,2.641,513,6.042,514,7.642]],["t/92",[0,0.313,1,0.346,5,0.906,6,0.018,7,0.191,8,0.196,9,0.208,10,0.208,11,0.202,12,0.226,13,0.304,14,0.22,17,1.821,21,0.191,22,0.954,23,0.179,32,2.064,57,0.445,59,0.805,60,1.759,65,0.997,69,2.869,74,4.268,79,5.427,80,3.112,81,4.874,82,4.371,93,1.962,108,1.613,109,1.494,110,1.962,111,0.316,117,2.198,122,3.074,128,2.245,156,1.972,159,2.871,174,2.175,215,5.418,219,2.452,221,2.694,227,4.371,291,3.112,325,2.598,418,3.919,515,6.788,516,6.788,517,6.788]],["t/94",[0,0.309,1,0.344,5,0.895,6,0.018,7,0.188,8,0.194,9,0.206,10,0.206,11,0.2,12,0.223,13,0.301,14,0.217,21,0.188,22,0.943,23,0.177,59,0.796,65,0.99,69,2.837,77,3.137,82,4.321,83,2.951,84,4.678,85,4.911,86,4.22,87,5.081,88,2.595,89,4.321,90,4.321,91,2.837,92,4.623,93,1.94,108,1.594,109,1.477,110,1.94,111,0.314,128,2.22,156,1.958,159,2.852,174,2.15,185,2.696,219,2.424,291,3.743,325,2.569,378,3.954,500,3.73,502,5.878,503,4.678,518,7.435,519,7.435]],["t/96",[0,0.316,1,0.326,5,0.772,6,0.015,7,0.162,8,0.167,9,0.177,10,0.177,11,0.172,12,0.192,13,0.259,14,0.187,17,1.821,19,2.102,20,3.004,21,0.162,22,0.813,23,0.153,24,2.872,32,1.759,42,3.064,46,1.655,57,0.536,59,0.686,60,1.499,61,3.818,65,0.902,68,4.474,69,2.444,70,2.578,71,3.555,72,3.608,73,2.353,74,3.637,93,1.671,108,1.374,109,1.637,110,1.671,111,0.286,117,2.976,128,2.72,130,4.124,156,1.784,159,2.598,174,1.853,214,3.92,219,2.089,248,2.353,262,3.919,271,3.214,279,3.214,291,2.651,325,2.214,353,4.031,359,3.818,378,3.407,401,3.1,402,3.818,433,3.275,461,4.82,472,5.783,487,3.637,520,5.783,521,5.783,522,6.407,523,5.372,524,5.783,525,6.407,526,6.407,527,4.031,528,6.407,529,6.407,530,5.372,531,5.783,532,5.065,533,6.407,534,6.407,535,5.783,536,5.065,537,6.407]],["t/98",[0,0.317,1,0.347,5,0.914,6,0.018,7,0.192,8,0.198,9,0.21,10,0.21,11,0.204,12,0.228,13,0.307,14,0.222,19,2.158,21,0.192,22,0.963,23,0.181,46,1.96,47,2.822,59,0.813,68,4.121,69,2.895,74,5.198,75,2.787,76,4.522,77,3.082,78,3.549,79,4.522,93,1.98,108,1.628,109,1.508,110,1.98,111,0.318,117,2.218,128,2.266,156,1.983,159,2.887,174,2.195,219,2.475,291,3.14,325,2.622,495,6.364,538,7.589]],["t/100",[0,0.313,1,0.314,5,0.697,6,0.014,8,0.151,9,0.16,10,0.16,11,0.156,12,0.174,13,0.234,14,0.169,17,1.722,20,3.049,21,0.147,22,0.734,23,0.138,24,3.122,31,4.431,48,3.547,52,3.449,53,2.662,57,0.536,59,0.62,60,1.354,61,4.594,62,3.142,63,1.572,64,3.016,65,1.084,66,5.596,67,2.165,68,3.142,93,1.51,108,1.241,109,1.15,110,1.51,111,0.268,116,3.102,117,2.954,128,2.302,143,2.958,156,1.669,159,2.431,174,2.229,197,4.354,198,3.285,209,3.587,214,3.541,216,3.077,219,1.887,222,2.752,228,4.717,229,3.692,248,2.125,254,4.057,260,2.465,261,3.077,262,2.752,263,3.016,271,3.867,280,3.751,284,2.329,291,3.19,310,3.364,314,4.853,325,2,372,3.825,457,2.361,459,4.012,495,4.853,504,3.283,523,4.853,539,4.575,540,6.959,541,3.641,542,5.224,543,5.224,544,4.853,545,4.575,546,3.641,547,4.17,548,3.364,549,4.575,550,3.874,551,5.619,552,5.8,553,6.955,554,9.245,555,5.787,556,5.787,557,5.787,558,4.012,559,5.787,560,4.575,561,5.787]],["t/102",[0,0.311,1,0.342,5,0.879,6,0.017,7,0.185,8,0.191,9,0.202,10,0.202,11,0.196,12,0.219,13,0.295,14,0.213,17,1.306,21,0.185,22,0.926,23,0.174,24,3.318,36,3.415,52,5.331,53,3.36,54,3.733,55,4.734,56,4.573,57,0.521,58,4.488,59,0.782,60,1.709,61,4.352,93,1.905,108,1.566,109,1.451,110,1.905,111,0.311,117,2.134,128,2.18,154,4.352,156,1.937,159,2.821,174,2.112,219,2.381,260,3.11,261,3.884,262,3.473,263,3.806,291,3.022,325,2.523,372,4.171,562,7.263]],["t/104",[0,0.308,1,0.33,5,0.795,6,0.016,7,0.167,8,0.172,9,0.183,10,0.183,11,0.177,12,0.198,13,0.267,14,0.193,16,1.336,19,1.733,21,0.167,22,0.837,23,0.157,24,3.328,25,2.507,27,3.662,29,2.152,33,2.896,36,3.927,37,2.62,38,2.988,39,2.461,40,3.046,41,2.671,42,3.616,43,2.152,44,2.693,45,3.251,46,1.705,47,2.454,48,3.009,49,2.811,50,2.853,51,3.251,52,3.933,57,0.491,58,3.311,77,1.992,93,1.722,108,1.415,109,1.311,110,1.722,111,0.292,116,3.38,117,1.929,128,1.97,129,4.152,132,3.036,154,3.933,156,1.818,159,2.648,174,1.908,199,2.656,209,3.475,219,2.152,234,3.193,260,2.811,261,3.51,262,3.139,263,3.44,279,3.311,282,4.965,291,2.731,307,5.218,325,2.28,513,5.218,546,4.152,563,5.218,564,5.957,565,4.278,566,6.6,567,6.6,568,6.6,569,6.6,570,6.6,571,6.6,572,4.038,573,5.957,574,6.6,575,6.6,576,5.218,577,4.575,578,2.518,579,3.51]],["t/106",[0,0.306,1,0.34,2,3.99,5,0.866,6,0.017,7,0.182,8,0.188,9,0.199,10,0.199,11,0.193,12,0.216,13,0.291,14,0.21,16,1.456,17,1.718,21,0.182,22,0.912,23,0.171,25,2.646,27,4.917,28,2.674,29,2.345,30,3.99,31,5.125,32,2.752,33,3.156,34,4.285,35,3.205,36,3.363,42,3.295,57,0.49,59,0.77,67,1.572,93,1.876,108,1.542,109,1.429,110,1.876,111,0.308,117,2.102,128,2.147,156,1.919,159,2.794,174,2.079,199,2.894,209,2.976,219,2.345,222,3.42,228,4.399,240,4.661,271,3.607,291,2.976,325,2.485,422,4.524,580,4.985,581,3.831,582,7.191,583,7.191,584,7.191,585,4.399,586,5.685,587,7.191]],["t/108",[0,0.325,1,0.377,2,2.719,3,3.253,4,3.244,5,1.326,23,0.256,27,2.719,28,3.206,29,3.07,36,2.291,37,3.422,52,2.92,53,3.966,54,3.516,61,2.92,62,3.735,68,2.66,69,3.592,70,3.199,74,2.781,75,2.526,79,2.92,80,2.847,82,2.848,83,2.731,85,2.66,95,3.53,96,3.718,97,5.04,112,3.397,113,3.397,114,3.891,115,3.176,118,3.397,119,2.63,147,3.397,148,4.099,152,3.28,153,3.53,161,2.997,162,3.53,175,3.247,176,2.175,180,3.082,181,3.28,182,2.919,188,3.28,189,3.42,190,3.051,193,3.28,194,3.842,196,1.999,200,3.206,201,3.658,204,3.176,205,2.956,207,3.28,210,3.28,211,3.658,238,3.176,242,2.997,255,3.28,256,3.397,258,2.92,264,2.92,265,3.451,276,2.848,287,2.719,288,2.719,296,2.781,322,2.848,329,3.082,333,3.082,334,2.848,339,2.66,340,2.719,344,2.848,365,2.848,366,2.807,373,2.848,374,2.413,382,2.458,393,2.218,412,2.554,430,2.781,442,2.848,443,2.997,447,2.781,448,2.781,455,2.554,480,2.458,491,2.781,500,2.458]],["t/110",[0,0.299,1,0.324,2,4.872,3,2.447,4,2.89,5,0.853,6,0.017,7,0.18,8,0.185,9,0.196,10,0.196,11,0.19,12,0.212,13,0.286,14,0.207,15,3.62,16,1.434,17,1.784,18,4.242,19,2.058,20,3.381,21,0.18,22,0.898,23,0.169,24,3.008,25,2.621,27,3.93,57,0.511,59,0.94,93,1.848,108,1.519,109,1.407,111,0.246,117,2.07,128,2.115,156,1.901,159,2.768,174,2.048,209,2.931,215,5.103,219,2.309,229,3.017,271,3.553,279,3.553,291,2.931,325,2.447,450,4.333,487,4.02,546,4.456,560,5.6,581,3.062,588,6.393,589,7.083,590,7.083,591,4.456,592,7.083,593,7.083,594,5.939,595,5.939,596,6.393,597,5.939,598,7.083]],["t/112",[0,0.313,1,0.363,5,1.201,6,0.023,7,0.249,8,0.26,9,0.296,10,0.276,11,0.268,12,0.299,13,0.403,14,0.291,17,1.806,19,1.709,20,1.477,21,0.253,22,1.265,23,0.238,26,0.603,32,1.772,35,1.996,39,1.634,43,2.104,46,1.667,47,1.666,48,2.312,49,1.908,54,2.29,57,0.447,59,1.068,60,2.139,63,1.217,65,0.706,67,2.06,70,1.803,72,2.744,73,2.37,77,1.352,78,2.095,88,1.718,91,1.709,93,1.169,94,2.709,107,2.014,110,1.169,119,1.366,182,1.645,189,3.118,190,1.585,192,2.495,196,2.633,200,2.814,201,2.382,205,1.666,211,2.382,278,2.969,284,1.803,299,1.996,317,2.129,324,2.528,327,2.562,328,2.922,331,1.687,332,1.936,366,1.828,384,2.7,388,2.93,389,1.853,390,2.524,391,1.853,392,2.312,393,2.922,394,1.966,403,2.095,408,2.13,409,2.13,410,2.13,411,2.13,412,3.364,413,2.29,414,3.299,415,3.238,416,3.364,427,2.486,428,2.486,429,2.486,430,3.663,431,2.74,442,3.751,443,2.74,444,2.818,447,3.663,448,3.663,449,2.74,455,3.364,456,2.061,457,1.828,469,2.13,470,2.669,480,2.247,481,2.486,491,3.663,492,2.74,499,2.74,500,3.238,501,2.29,512,2.382]],["t/114",[0,0.324,1,0.362,4,1.823,5,1.134,6,0.023,7,0.253,8,0.26,9,0.296,10,0.276,11,0.268,12,0.299,13,0.403,14,0.291,16,1.304,17,1.633,19,1.707,20,2.124,21,0.253,22,1.158,23,0.24,26,0.639,29,2.1,39,2.219,41,1.292,42,2.809,43,1.457,46,1.664,50,1.931,57,0.48,59,0.809,60,1.507,65,0.959,67,0.977,75,1.64,88,2.011,91,1.704,93,1.165,94,2.704,96,3.012,107,1.189,110,1.165,114,3.04,119,1.363,175,2.845,176,1.515,182,1.64,190,1.581,194,3.367,199,1.798,203,1.931,209,1.848,219,2.1,270,1.798,284,1.798,290,2.058,317,1.473,322,3.744,323,2.81,324,2.523,325,2.226,326,2.81,327,1.773,328,2.022,329,4.053,330,2.99,331,1.682,332,1.931,333,4.053,334,3.744,335,2.733,336,2.81,337,3.173,338,2.241,339,3.498,340,3.574,341,2.662,342,4.31,343,4.169,344,3.744,345,2.99,346,2.596,348,2.536,362,2.596,363,2.596,364,2.596,365,3.744,366,1.823,367,2.81,373,3.744,374,2.2,375,2.733,377,2.81,382,3.231,383,2.328,384,2.1,388,1.581,389,1.848,390,1.49,391,1.848,392,1.6]],["t/116",[0,0.326,1,0.327,3,2.616,4,1.83,6,0.023,7,0.256,8,0.261,9,0.295,10,0.276,11,0.268,12,0.299,13,0.403,14,0.291,16,1.908,17,1.725,18,2.673,21,0.253,23,0.249,24,2.883,25,1.929,26,0.617,28,2.816,32,1.773,37,3.006,39,2.315,40,2.131,41,2.396,44,2.636,53,2.063,57,0.48,60,1.049,65,0.961,70,1.805,77,1.354,80,1.856,88,2.435,93,1.17,94,2.712,107,1.194,109,0.891,110,1.17,117,1.311,119,1.368,156,0.971,159,1.414,165,2.546,171,2.673,174,1.297,176,2,185,1.627,190,1.587,192,1.734,199,3.047,203,3.273,205,1.668,210,4.325,211,2.385,212,3.375,213,3.375,216,2.385,227,2.607,238,4.188,239,3.109,242,3.952,243,2.907,255,4.325,256,3.109,257,3.375,258,3.85,259,2.907,260,3.225,261,2.385,262,2.133,263,2.338,264,3.85,265,3.241,266,2.822,270,3.047,276,3.755,277,2.822,278,4.039,287,3.585,288,3.585,289,2.673,290,1.412,294,2.673,295,3.367,296,3.667,297,2.133,298,2.489,317,2.896,318,2.607,319,2.744,320,2.744]],["t/118",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,111,0.276,189,2.989,366,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,4.719,416,5.225,427,4.404,428,4.404,429,4.404,599,0.658]],["t/120",[3,3.112,6,0.023,7,0.246,8,0.254,9,0.292,10,0.269,11,0.261,12,0.291,14,0.284,21,0.246,23,0.251,26,0.612,57,0.475,58,3.704,88,1.966,94,3.1,95,6.49,96,3.454,97,5.066,98,5.839,99,5.839,100,4.401,101,4.01,102,4.787,103,2.614,104,5.839,105,5.321,110,1.927,112,6.244,113,6.244,114,2.972,115,4.787,116,2.972,117,2.632,120,4.401,148,4.401,149,4.401]],["t/122",[0,0.325,17,1.509,21,0.139,22,0.696,23,0.131,40,2.453,260,2.337,261,2.918,262,2.61,263,2.86,270,2.208,278,3.422,317,2.453,328,2.484,342,3.877,600,4.954,601,5.488,602,5.488,603,4.954,604,5.488,605,5.488,606,4.954,607,9.456,608,7.439,609,7.439,610,8.439,611,5.488,612,5.488,613,5.488,614,5.488,615,8.439,616,5.488,617,5.488,618,5.488,619,7.439,620,5.488,621,5.488,622,8.439,623,7.439,624,7.439,625,5.488,626,5.488,627,5.488,628,5.488,629,5.488,630,5.488,631,5.488,632,5.488,633,5.488,634,5.488,635,5.488,636,5.488,637,5.488,638,5.488,639,5.488,640,5.488,641,5.488,642,5.488,643,5.488,644,5.488,645,5.488,646,5.488,647,5.488,648,5.488,649,5.488,650,5.488,651,5.488,652,5.488,653,5.488,654,5.488,655,5.488,656,5.488,657,5.488,658,5.488,659,5.488,660,5.488,661,5.488,662,5.488,663,5.488,664,5.488,665,5.488,666,4.339,667,5.488,668,4.954,669,7.439,670,5.488,671,5.488,672,5.488,673,5.488,674,4.129,675,4.602,676,5.488,677,5.488,678,5.488,679,4.954,680,5.488,681,5.488,682,5.488,683,5.488,684,5.488,685,4.954,686,5.488,687,5.488,688,5.488,689,5.488,690,5.488,691,5.488,692,5.488,693,5.488,694,5.488,695,5.488,696,3.954,697,5.488,698,5.488,699,5.488,700,5.488,701,4.954,702,5.488,703,5.488,704,4.602,705,5.488,706,5.488,707,5.488,708,5.488,709,5.488,710,5.488,711,5.488,712,5.488,713,5.488,714,5.488,715,5.488,716,5.488,717,5.488,718,5.488,719,5.488,720,5.488,721,5.488,722,5.488,723,5.488,724,5.488,725,5.488,726,5.488,727,5.488,728,5.488,729,5.488,730,5.488,731,5.488,732,5.488,733,5.488,734,5.488,735,5.488,736,5.488,737,5.488,738,5.488,739,5.488,740,5.488,741,5.488,742,5.488,743,5.488,744,5.488,745,5.488,746,5.488,747,5.488,748,5.488,749,5.488,750,5.488,751,5.488,752,5.488,753,5.488,754,5.488,755,5.488,756,5.488,757,5.488,758,5.488,759,5.488,760,5.488,761,5.488,762,5.488,763,5.488]],["t/124",[6,0.019,7,0.242,8,0.212,9,0.264,10,0.225,11,0.219,12,0.244,14,0.238,21,0.257,23,0.227,25,2.428,26,0.492,57,0.398,59,1.022,97,4.239,106,5.749,111,0.283,114,3.273,122,2.745,152,6.388,153,5.86,154,4.847,155,4.513,156,1.761,599,0.674]],["t/126",[0,0.316,1,0.345,4,2.011,5,1.041,6,0.023,7,0.246,8,0.258,9,0.293,10,0.273,11,0.266,12,0.296,13,0.4,14,0.289,16,1.399,17,1.426,19,1.017,20,1.626,21,0.258,22,1.096,23,0.247,24,2.178,25,2.381,26,0.598,29,1.607,33,2.163,36,3.231,37,3.431,38,2.231,39,2.696,40,1.626,41,1.425,42,2.569,43,2.818,44,2.011,45,2.428,46,1.273,47,1.833,48,1.766,49,2.099,50,2.131,51,2.428,57,0.445,59,0.854,60,1.153,63,1.339,65,0.756,67,1.51,72,1.788,73,1.81,80,2.04,107,1.839,111,0.171,114,1.983,115,3.195,117,1.44,119,1.504,156,1.067,159,1.554,171,2.937,174,1.425,175,1.856,176,1.734,189,1.856,190,1.744,196,2.819,199,3.21,201,2.621,203,3.448,205,1.833,209,2.04,219,2.252,238,4.478,239,3.417,242,4.226,243,3.195,255,4.624,256,3.417,257,3.708,284,2.78,290,1.078,299,2.196,324,1.931,325,2.387,327,1.957,331,2.602,332,2.131,333,4.346,337,2.428,340,3.833,341,2.937,342,4.505,343,4.328,345,3.299,346,2.865,384,1.607,388,1.744,390,1.644,392,1.766,430,3.921,431,3.015,456,2.267,457,2.011,469,2.344,599,0.408]],["t/128",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,111,0.276,189,2.989,366,3.239,388,2.809,412,4.903,413,4.057,414,5.124,415,4.719,416,4.903,427,4.404,428,4.404,429,4.404,599,0.658]],["t/130",[1,0.177,6,0.024,7,0.261,8,0.269,9,0.301,10,0.285,11,0.277,12,0.309,13,0.405,14,0.301,16,1.663,17,0.932,19,1.482,21,0.261,23,0.259,25,2.452,26,0.623,29,2.341,32,1.971,40,1.718,41,1.507,53,2.397,57,0.433,58,2.613,59,1.073,62,2.829,65,0.786,67,1.139,69,1.988,88,1.387,93,1.359,94,3.014,97,4.281,106,4.075,107,1.911,110,1.359,114,3.306,117,1.523,118,4.977,119,1.589,120,3.105,121,3.754,122,2.423,123,2.014,124,3.754,147,4.977,148,3.105,152,4.806,153,3.754,154,3.105,155,4.913,156,1.128,161,4.392,162,3.754,163,4.119,164,4.517,175,1.962,176,1.973,177,3.487,179,3.028,180,4.517,181,4.806,182,1.913,183,3.92,184,4.046,188,4.806,189,1.962,190,1.844,191,3.92,193,4.806,194,2.322,195,3.612,196,2.126,199,3.306,200,1.937,201,2.77,202,3.92,203,3.551,204,4.654,205,1.937,206,3.754,207,4.806,208,3.92]],["t/132",[0,0.316,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.414,26,0.478,28,2.937,57,0.386,65,0.864,70,3.179,111,0.274,176,1.584,258,5.589,259,5.12,260,3.995,261,4.201,262,3.757,263,4.117,599,0.655]],["t/134",[0,0.314,1,0.364,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.25,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,1.549,17,1.791,18,2.708,19,2.037,20,2.522,21,0.26,22,1.27,23,0.239,24,2.788,25,2.283,26,0.606,27,3.631,28,1.698,29,2.134,30,2.534,31,3.909,32,1.796,33,2.872,34,2.721,35,2.035,36,3.06,37,1.813,38,2.067,39,1.657,40,1.506,41,1.32,42,2.433,43,1.489,44,1.863,45,2.249,46,2.157,47,2.433,48,2.344,49,1.945,50,1.974,51,2.249,52,3.9,53,3.01,54,2.334,55,2.96,56,2.334,57,0.432,58,2.291,59,1.015,60,1.954,61,3.9,62,2.479,63,1.241,64,2.38,65,0.716,66,2.654,67,0.998,68,3.553,69,3.373,70,1.838,71,2.534,72,2.373,73,1.677,74,3.714,75,1.677,76,2.721,77,2.521,78,2.135,79,3.9,80,1.89,81,2.96,82,3.804,83,2.598,84,2.873,85,3.553,86,2.592,87,3.411,88,1.742,89,2.654,90,2.654,91,1.742,92,2.334,93,1.191,94,1.917,111,0.159,599,0.378,764,3.61]],["t/136",[0,0.316,6,0.019,7,0.238,8,0.207,9,0.26,10,0.219,11,0.213,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.416,26,0.479,28,2.944,57,0.387,65,0.866,70,3.186,111,0.275,176,1.588,258,5.597,259,5.133,260,3.372,261,4.211,262,3.766,263,4.127,599,0.656]],["t/138",[0,0.328,1,0.358,3,2.954,4,2.297,6,0.022,7,0.249,8,0.249,9,0.289,10,0.264,11,0.256,12,0.286,13,0.386,14,0.279,16,1.731,18,3.131,20,2.496,21,0.254,23,0.227,26,0.632,29,1.835,32,2.077,40,2.496,41,2.644,44,3.088,57,0.48,65,1,75,2.067,77,1.699,88,2.276,107,1.498,111,0.196,114,3.045,119,1.717,165,3.195,176,1.913,185,2.041,192,2.176,205,2.093,265,2.823,270,3.679,287,4.199,288,4.199,289,3.354,290,1.999,294,3.354,295,3.944,296,4.295,297,2.677,298,3.123,317,3.24,318,3.272,319,3.444,320,3.444,322,4.398,323,3.541,324,2.964,326,3.541,327,2.234,328,2.548,329,4.761,330,3.768,332,2.433,599,0.466]],["t/140",[0,0.326,1,0.338,3,3.017,6,0.021,7,0.221,8,0.228,9,0.275,10,0.242,11,0.235,12,0.262,13,0.353,14,0.255,16,1.768,18,3.613,21,0.252,23,0.208,26,0.601,32,2.397,40,3.134,41,2.957,44,3.563,57,0.343,63,1.908,65,0.768,77,2.119,88,2.53,107,1.869,111,0.244,176,1.751,205,2.611,265,3.523,288,4.846,289,4.185,290,1.909,294,4.185,295,4.551,296,4.957,318,4.082,319,4.296,320,4.296,599,0.582]],["t/142",[0,0.316,1,0.318,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,21,0.253,23,0.188,26,0.567,57,0.458,65,0.862,111,0.274,114,3.171,119,2.404,176,1.58,270,3.171,290,1.723,317,3.089,322,5.444,323,4.958,324,3.669,326,4.958,327,3.128,328,4.24,599,0.653]],["t/144",[0,0.326,1,0.338,3,3.021,6,0.021,7,0.222,8,0.228,9,0.275,10,0.242,11,0.235,12,0.262,13,0.354,14,0.255,16,1.77,18,3.618,21,0.252,23,0.208,26,0.602,32,2.4,40,2.884,41,2.959,44,3.568,57,0.344,63,1.912,65,0.77,77,2.124,88,2.533,107,1.873,111,0.245,176,1.754,205,2.617,265,3.53,288,4.852,289,4.194,290,1.912,294,4.194,295,4.557,296,4.963,318,4.09,319,4.305,320,4.305,599,0.583]],["t/146",[0,0.316,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.414,26,0.478,28,2.937,57,0.386,65,0.864,70,3.179,111,0.274,176,1.584,258,5.589,259,5.12,260,3.364,261,4.988,262,3.757,263,4.117,599,0.655]],["t/148",[0,0.321,1,0.335,5,0.922,6,0.018,7,0.233,8,0.2,9,0.255,10,0.212,11,0.206,12,0.23,13,0.31,14,0.224,21,0.25,22,0.971,23,0.219,26,0.463,39,2.5,59,0.82,65,0.838,111,0.266,175,2.885,190,2.711,219,3.003,284,3.083,325,3.182,331,2.885,340,5.11,341,4.565,342,5.34,343,4.985,599,0.635]],["t/150",[0,0.317,1,0.269,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,16,1.607,17,1.919,21,0.254,23,0.189,26,0.48,28,2.952,60,1.857,109,1.869,111,0.276,176,1.592,216,4.221,227,4.613,264,5.605,265,3.981,266,4.993,599,0.658]],["t/152",[0,0.321,1,0.345,5,1.039,6,0.022,7,0.239,8,0.246,9,0.287,10,0.261,11,0.253,12,0.283,13,0.381,14,0.275,16,1.908,17,1.955,21,0.258,22,1.094,23,0.225,26,0.615,28,2.562,60,2.204,109,1.369,111,0.239,176,1.382,194,3.846,216,3.664,227,4.005,264,5.142,265,3.456,266,4.335,290,1.887,344,5.016,365,5.016,366,2.811,367,4.335,374,3.394,375,4.215,599,0.571,765,2.811]],["t/154",[0,0.317,1,0.269,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,16,1.607,17,1.919,21,0.254,23,0.189,26,0.48,28,2.952,60,1.857,109,1.577,111,0.276,176,1.592,216,5.002,227,4.613,264,5.605,265,3.981,266,4.993,599,0.658]],["t/156",[0,0.317,1,0.269,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,16,1.607,17,1.919,21,0.254,23,0.189,26,0.48,28,2.952,60,1.857,109,1.577,111,0.276,176,1.592,216,4.221,227,5.467,264,5.605,265,3.981,266,4.993,599,0.658]],["t/158",[0,0.318,1,0.316,3,2.691,4,3.177,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.234,13,0.315,14,0.227,16,1.577,21,0.252,23,0.186,26,0.562,57,0.381,65,0.852,111,0.271,165,4.42,176,1.562,185,2.824,192,3.01,270,4.002,287,5.161,297,3.703,298,4.321,317,3.524,599,0.645]],["t/160",[0,0.318,1,0.315,3,2.684,4,3.17,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.233,13,0.314,14,0.227,16,1.573,21,0.252,23,0.185,26,0.562,57,0.38,65,0.85,111,0.27,165,4.41,176,1.558,185,2.817,192,3.003,270,4.142,287,5.153,297,3.695,298,4.311,317,3.522,599,0.644]],["t/162",[0,0.316,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.414,26,0.478,28,2.937,57,0.386,65,0.864,70,3.179,111,0.274,176,1.584,258,5.589,259,5.12,260,3.364,261,4.201,262,4.461,263,4.117,599,0.655]],["t/164",[0,0.316,1,0.318,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.188,26,0.567,57,0.459,65,0.864,111,0.274,114,3.179,119,2.41,176,1.584,270,3.775,290,1.727,317,2.605,322,5.452,323,4.97,324,3.674,326,4.97,327,3.136,328,3.576,599,0.655]],["t/166",[0,0.318,1,0.315,3,2.684,4,3.17,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.233,13,0.314,14,0.227,16,1.573,21,0.252,23,0.185,26,0.562,57,0.38,65,0.85,111,0.27,165,4.41,176,1.558,185,2.817,192,3.003,270,4.142,287,5.153,297,3.695,298,4.311,317,3.522,599,0.644]],["t/168",[0,0.316,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,21,0.254,23,0.224,24,3.414,26,0.478,28,2.937,57,0.386,65,0.864,70,3.179,111,0.274,176,1.584,258,5.589,259,5.12,260,3.364,261,4.201,262,3.757,263,4.889,599,0.655]],["t/170",[0,0.322,1,0.318,3,2.723,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,16,1.596,18,3.261,21,0.253,23,0.188,26,0.567,40,2.599,41,2.709,107,2.494,111,0.274,176,1.58,265,3.953,288,5.197,289,4.696,290,1.723,294,4.696,295,4.107,599,0.653]],["t/172",[0,0.326,1,0.338,3,3.021,6,0.021,7,0.222,8,0.228,9,0.275,10,0.242,11,0.235,12,0.262,13,0.354,14,0.255,16,1.77,18,3.937,21,0.252,23,0.208,26,0.602,32,2.4,40,2.884,41,2.877,44,3.568,57,0.344,63,1.912,65,0.77,77,2.124,88,2.533,107,1.873,111,0.245,176,1.754,205,2.617,265,3.53,288,4.852,289,4.194,290,1.912,294,4.194,295,4.557,296,4.963,318,4.09,319,4.305,320,4.305,599,0.583]],["t/174",[0,0.316,1,0.268,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,16,1.596,21,0.253,23,0.188,26,0.477,28,2.93,57,0.458,65,0.862,88,2.661,111,0.274,176,1.58,190,2.789,260,3.989,276,5.444,277,4.958,278,4.929,599,0.653]],["t/176",[0,0.316,1,0.267,6,0.019,7,0.237,8,0.205,9,0.259,10,0.217,11,0.211,12,0.236,13,0.318,14,0.23,16,1.592,21,0.253,23,0.187,26,0.475,28,2.923,57,0.457,65,0.86,88,2.658,111,0.273,176,1.577,190,2.782,260,4.252,276,5.436,277,4.946,278,4.926,599,0.651]],["t/178",[0,0.322,1,0.318,3,2.723,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,16,1.596,18,3.261,21,0.253,23,0.188,26,0.567,40,2.599,41,2.709,107,2.098,111,0.274,176,1.58,265,3.953,288,5.197,289,4.696,290,1.723,294,5.581,295,4.107,599,0.653]],["t/180",[0,0.326,1,0.338,3,3.021,6,0.021,7,0.222,8,0.228,9,0.275,10,0.242,11,0.235,12,0.262,13,0.354,14,0.255,16,1.77,18,3.618,21,0.252,23,0.208,26,0.602,32,2.4,40,2.884,41,2.877,44,3.568,57,0.344,63,1.912,65,0.77,77,2.124,88,2.533,107,1.873,111,0.245,176,1.754,205,2.617,265,3.53,288,4.852,289,4.194,290,1.912,294,4.194,295,4.958,296,4.963,318,4.09,319,4.305,320,4.305,599,0.583]],["t/182",[0,0.318,1,0.316,3,2.691,4,3.177,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.234,13,0.315,14,0.227,16,1.577,21,0.252,23,0.186,26,0.562,57,0.381,65,0.852,111,0.271,165,4.42,176,1.562,185,2.824,192,3.595,270,4.002,287,5.161,297,3.703,298,4.321,317,3.472,599,0.645]],["t/184",[0,0.321,1,0.335,5,0.92,6,0.018,7,0.233,8,0.2,9,0.254,10,0.211,11,0.205,12,0.229,13,0.309,14,0.223,21,0.25,22,0.969,23,0.219,26,0.462,39,2.328,59,0.818,65,0.836,111,0.266,175,2.878,190,2.705,219,2.999,284,3.075,325,3.178,331,2.878,340,5.103,341,4.554,342,5.459,343,5.06,599,0.633]],["t/186",[0,0.321,1,0.335,5,0.922,6,0.018,7,0.233,8,0.2,9,0.255,10,0.212,11,0.206,12,0.23,13,0.31,14,0.224,21,0.25,22,0.971,23,0.219,26,0.463,39,2.331,59,0.82,65,0.838,111,0.266,175,2.885,190,2.711,219,3.003,284,3.083,325,3.182,331,2.885,340,5.11,341,4.565,342,5.34,343,5.062,599,0.635]],["t/188",[0,0.321,1,0.313,3,2.659,6,0.018,7,0.234,8,0.201,9,0.255,10,0.213,11,0.207,12,0.231,13,0.311,14,0.225,16,1.558,18,3.185,21,0.251,23,0.183,26,0.559,32,2.535,40,2.538,41,2.67,44,3.768,57,0.376,65,0.842,77,2.322,88,2.732,111,0.267,176,1.543,205,2.862,290,1.682,295,4.011,296,5.242,318,4.473,319,4.708,320,4.708,599,0.638]],["t/190",[0,0.319,1,0.329,5,0.881,6,0.021,7,0.227,8,0.234,9,0.279,10,0.248,11,0.241,12,0.269,13,0.362,14,0.262,16,1.482,21,0.256,22,0.928,23,0.213,26,0.542,28,2.722,57,0.473,63,1.989,65,0.801,88,2.839,91,2.792,96,3.423,111,0.254,176,1.468,190,2.59,194,3.262,199,2.945,203,3.164,260,3.815,276,5.207,277,4.605,278,4.761,373,5.207,377,4.605,599,0.607]],["t/192",[0,0.324,1,0.361,4,1.808,5,1.131,6,0.023,7,0.252,8,0.26,9,0.296,10,0.275,11,0.267,12,0.298,13,0.402,14,0.291,16,1.297,17,1.629,19,1.7,20,2.112,21,0.258,22,1.155,23,0.24,26,0.638,29,2.088,39,2.212,41,1.281,42,2.796,43,1.445,46,1.654,50,1.915,57,0.479,59,0.805,60,1.498,65,0.956,67,0.969,75,1.627,88,2.002,91,1.69,93,1.156,94,2.688,96,2.995,107,1.18,110,1.156,111,0.154,114,3.026,119,1.352,175,2.832,176,1.508,182,1.627,190,1.568,194,3.351,199,1.783,203,1.915,209,1.834,219,2.088,270,1.783,284,1.783,290,2.053,317,1.461,322,3.722,323,2.788,324,2.508,325,2.213,326,2.788,327,1.759,328,2.006,329,4.029,330,2.966,331,1.669,332,1.915,333,4.029,334,3.722,335,2.711,336,2.788,337,3.154,338,2.223,339,3.477,340,3.554,341,2.64,342,4.293,343,4.156,344,3.722,345,2.966,346,2.575,348,2.515,362,2.575,363,2.575,364,2.575,365,3.722,366,1.808,367,2.788,373,3.722,374,2.182,375,2.711,377,2.788,382,3.212,383,2.309,384,2.088,388,1.568,389,1.834,390,1.478,391,1.834,392,1.587,599,0.367,764,3.503]],["t/194",[0,0.313,1,0.363,5,1.199,6,0.023,7,0.249,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,17,1.803,19,1.702,20,1.465,21,0.258,22,1.262,23,0.237,26,0.602,32,1.761,35,1.98,39,1.624,43,2.092,46,1.657,47,1.652,48,2.299,49,1.892,54,2.271,57,0.446,59,1.066,60,2.133,63,1.207,65,0.702,67,2.055,70,1.788,72,2.731,73,2.356,77,1.341,78,2.078,88,1.708,91,1.695,93,1.159,94,2.693,107,2.005,110,1.159,111,0.154,119,1.355,182,1.631,189,3.106,190,1.572,192,2.48,196,2.618,200,2.801,201,2.363,205,1.652,211,2.363,278,2.952,284,1.788,299,1.98,317,2.116,324,2.513,327,2.547,328,2.905,331,1.673,332,1.92,366,1.813,384,2.689,388,2.919,389,1.838,390,2.513,391,1.838,392,2.299,393,2.905,394,1.95,403,2.078,408,2.113,409,2.113,410,2.113,411,2.113,412,3.344,413,2.271,414,3.28,415,3.219,416,3.344,427,2.465,428,2.465,429,2.465,430,3.642,431,2.718,442,3.729,443,2.718,444,2.795,447,3.642,448,3.642,449,2.718,455,3.344,456,2.044,457,1.813,469,2.113,470,2.648,480,2.229,481,2.465,491,3.642,492,2.718,499,2.718,500,3.219,501,2.271,512,2.363,599,0.368,764,3.513]],["t/196",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,111,0.276,189,2.989,366,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,4.719,416,4.903,427,4.404,428,4.404,429,5.22,599,0.658]],["t/198",[0,0.327,1,0.346,3,3.148,4,2.614,6,0.021,7,0.244,8,0.238,9,0.282,10,0.252,11,0.245,12,0.273,13,0.368,14,0.266,16,1.844,18,3.41,21,0.252,23,0.217,26,0.616,32,2.262,40,2.718,41,2.781,44,3.362,57,0.403,65,0.902,77,1.933,88,2.425,94,2.689,107,1.706,110,1.671,111,0.223,165,3.637,176,1.827,185,2.324,192,2.476,205,2.382,265,3.214,270,3.666,287,4.573,288,4.573,289,3.818,290,1.802,294,3.818,295,4.295,296,4.677,297,3.047,298,3.555,317,3.281,318,3.724,319,3.92,320,3.92,599,0.531,764,5.065]],["t/200",[0,0.308,1,0.349,4,2.53,5,1.08,6,0.022,7,0.227,8,0.248,9,0.288,10,0.263,11,0.255,12,0.285,13,0.384,14,0.277,16,1.256,17,1.443,19,1.28,20,2.045,21,0.256,22,1.137,23,0.226,24,2.544,25,1.851,26,0.596,29,2.022,33,2.721,36,3.773,37,2.462,38,2.807,39,2.602,40,2.045,41,1.793,42,3,43,3.211,44,2.53,45,3.055,46,1.602,47,2.306,48,2.222,49,2.641,50,2.681,51,3.055,57,0.395,59,0.864,60,1.451,63,1.685,67,1.764,72,2.249,73,2.277,80,2.566,107,2.148,111,0.215,114,2.496,176,1.244,189,2.336,196,3.292,201,3.298,205,2.306,209,2.566,284,2.496,290,1.356,299,2.764,324,2.429,327,2.462,331,2.336,332,2.681,333,5.076,337,3.055,345,4.151,346,3.605,384,2.022,388,2.195,390,2.069,392,2.222,430,4.58,431,3.794,456,2.853,457,2.53,469,2.949,599,0.514]],["t/202",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,111,0.276,189,2.989,366,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,4.719,416,4.903,427,5.22,428,4.404,429,4.404,599,0.658]],["t/204",[0,0.313,1,0.364,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.25,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,1.549,17,1.791,18,2.708,19,2.037,20,2.522,21,0.26,22,1.27,23,0.242,24,2.788,25,2.283,26,0.606,27,3.631,28,1.698,29,2.134,30,2.534,31,3.909,32,1.796,33,2.872,34,2.721,35,2.035,36,3.06,37,1.813,38,2.067,39,1.657,40,1.506,41,1.32,42,2.433,43,1.489,44,1.863,45,2.249,46,2.157,47,2.433,48,2.344,49,1.945,50,1.974,51,2.249,52,3.9,53,3.01,54,2.334,55,2.96,56,2.334,57,0.432,58,2.291,59,1.015,60,1.954,61,3.9,62,2.479,63,1.241,64,2.38,65,0.716,66,2.654,67,0.998,68,3.553,69,3.373,70,1.838,71,2.534,72,2.373,73,1.677,74,3.714,75,1.677,76,2.721,77,2.521,78,2.135,79,3.9,80,1.89,81,2.96,82,3.804,83,2.598,84,2.873,85,3.553,86,2.592,87,3.411,88,1.742,89,2.654,90,2.654,91,1.742,92,2.334,93,1.191,94,1.917,111,0.159,580,3.166,599,0.378]],["t/206",[0,0.312,1,0.363,5,1.199,6,0.023,7,0.249,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,17,1.803,19,1.702,20,1.465,21,0.258,22,1.262,23,0.24,26,0.602,32,1.761,35,1.98,39,1.624,43,2.092,46,1.657,47,1.652,48,2.299,49,1.892,54,2.271,57,0.446,59,1.066,60,2.133,63,1.207,65,0.702,67,2.055,70,1.788,72,2.731,73,2.356,77,1.341,78,2.078,88,1.708,91,1.695,93,1.159,94,2.693,107,2.005,110,1.159,111,0.154,119,1.355,182,1.631,189,3.106,190,1.572,192,2.48,196,2.618,200,2.801,201,2.363,205,1.652,211,2.363,278,2.952,284,1.788,299,1.98,317,2.116,324,2.513,327,2.547,328,2.905,331,1.673,332,1.92,366,1.813,384,2.689,388,2.919,389,1.838,390,2.513,391,1.838,392,2.299,393,2.905,394,1.95,403,2.078,408,2.113,409,2.113,410,2.113,411,2.113,412,3.344,413,2.271,414,3.28,415,3.219,416,3.344,427,2.465,428,2.465,429,2.465,430,3.642,431,2.718,442,3.729,443,2.718,444,2.795,447,3.642,448,3.642,449,2.718,455,3.344,456,2.044,457,1.813,469,2.113,470,2.648,480,2.229,481,2.465,491,3.642,492,2.718,499,2.718,500,3.219,501,2.271,512,2.363,580,3.08,599,0.368]],["t/208",[0,0.319,1,0.335,5,0.92,6,0.018,7,0.233,8,0.2,9,0.254,10,0.211,11,0.205,12,0.229,13,0.309,14,0.223,21,0.25,22,0.969,23,0.235,26,0.462,39,2.328,59,0.818,65,0.836,111,0.266,175,2.878,190,2.705,219,2.999,284,3.075,325,3.178,331,2.878,340,5.103,341,4.554,342,5.459,343,5.06,599,0.633]],["t/210",[0,0.324,1,0.361,4,1.808,5,1.131,6,0.023,7,0.252,8,0.26,9,0.296,10,0.275,11,0.267,12,0.298,13,0.402,14,0.291,16,1.297,17,1.629,19,1.7,20,2.112,21,0.258,22,1.155,23,0.243,26,0.638,29,2.088,39,2.212,41,1.281,42,2.796,43,1.445,46,1.654,50,1.915,57,0.479,59,0.805,60,1.498,65,0.956,67,0.969,75,1.627,88,2.002,91,1.69,93,1.156,94,2.688,96,2.995,107,1.18,110,1.156,111,0.154,114,3.026,119,1.352,175,2.832,176,1.508,182,1.627,190,1.568,194,3.351,199,1.783,203,1.915,209,1.834,219,2.088,270,1.783,284,1.783,290,2.053,317,1.461,322,3.722,323,2.788,324,2.508,325,2.213,326,2.788,327,1.759,328,2.006,329,4.029,330,2.966,331,1.669,332,1.915,333,4.029,334,3.722,335,2.711,336,2.788,337,3.154,338,2.223,339,3.477,340,3.554,341,2.64,342,4.293,343,4.156,344,3.722,345,2.966,346,2.575,348,2.515,362,2.575,363,2.575,364,2.575,365,3.722,366,1.808,367,2.788,373,3.722,374,2.182,375,2.711,377,2.788,382,3.212,383,2.309,384,2.088,388,1.568,389,1.834,390,1.478,391,1.834,392,1.587,580,3.072,599,0.367]],["t/212",[1,0.175,6,0.024,7,0.26,8,0.268,9,0.301,10,0.284,11,0.276,12,0.308,13,0.404,14,0.3,16,1.655,17,0.923,19,1.472,21,0.265,23,0.26,25,2.44,26,0.621,29,2.326,32,1.958,40,1.702,41,1.492,53,2.374,57,0.431,58,2.589,59,1.07,62,2.802,65,0.781,67,1.128,69,1.969,88,1.374,93,1.346,94,2.994,97,4.26,106,4.049,107,1.899,110,1.346,111,0.179,114,3.289,117,1.508,118,4.945,119,1.574,120,3.075,121,3.718,122,2.407,123,1.995,124,3.718,147,4.945,148,3.075,152,4.775,153,3.718,154,3.075,155,4.893,156,1.117,161,4.364,162,3.718,163,4.08,164,4.487,175,1.944,176,1.967,177,3.455,179,3,180,4.487,181,4.775,182,1.895,183,3.883,184,4.026,188,4.775,189,1.944,190,1.826,191,3.883,193,4.775,194,2.3,195,3.578,196,2.106,199,3.289,200,1.919,201,2.744,202,3.883,203,3.533,204,4.623,205,1.919,206,3.718,207,4.775,208,3.883,580,3.578,599,0.428]],["t/214",[0,0.326,1,0.327,3,2.604,4,1.815,6,0.023,7,0.256,8,0.26,9,0.295,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,16,1.904,17,1.721,18,2.658,21,0.258,23,0.25,24,2.875,25,1.917,26,0.616,28,2.803,32,1.763,37,2.992,39,2.309,40,2.118,41,2.387,44,2.621,53,2.047,57,0.48,60,1.041,65,0.958,70,1.79,77,1.343,80,1.841,88,2.428,93,1.161,94,2.696,107,1.184,109,0.884,110,1.161,111,0.155,117,1.3,119,1.357,156,0.963,159,1.403,165,2.525,171,2.651,174,1.287,176,1.997,185,1.614,190,1.575,192,1.72,199,3.033,203,3.258,205,1.654,210,4.299,211,2.366,212,3.347,213,3.347,216,2.366,227,2.586,238,4.163,239,3.084,242,3.929,243,2.884,255,4.299,256,3.084,257,3.347,258,3.827,259,2.884,260,3.21,261,2.366,262,2.116,263,2.319,264,3.827,265,3.222,266,2.799,270,3.033,276,3.733,277,2.799,278,4.026,287,3.564,288,3.564,289,2.651,290,1.404,294,2.651,295,3.347,296,3.646,297,2.116,298,2.469,317,2.887,318,2.586,319,2.722,320,2.722,580,3.084,599,0.369]],["t/216",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.511,89,4.636,90,5.483,91,3.043,92,4.077,111,0.277,599,0.661]],["t/218",[3,3.087,6,0.023,7,0.245,8,0.252,9,0.291,10,0.267,11,0.26,12,0.29,14,0.282,21,0.262,23,0.254,26,0.609,57,0.472,58,3.655,88,1.94,94,3.059,95,6.437,96,3.408,97,5.036,98,5.761,99,5.761,100,4.342,101,3.957,102,4.723,103,2.579,104,5.761,105,5.25,110,1.901,111,0.253,112,6.194,113,6.194,114,2.932,115,4.723,116,2.932,117,2.611,120,4.342,148,4.342,149,4.342,580,5.052,599,0.604]],["t/220",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,111,0.276,189,2.989,366,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,4.719,416,4.903,427,4.404,428,5.22,429,4.404,599,0.658]],["t/222",[0,0.294,1,0.342,5,1.076,6,0.021,7,0.227,8,0.233,9,0.279,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,17,1.598,21,0.255,22,1.133,23,0.213,26,0.54,57,0.437,59,0.957,60,1.705,63,1.98,65,0.797,67,2.112,111,0.253,189,2.744,200,2.71,317,2.403,366,2.973,384,2.913,388,3.42,390,2.431,403,3.408,412,4.656,413,3.725,414,4.567,415,4.481,416,4.656,427,4.043,428,4.043,429,4.043,455,4.656,480,3.655,481,4.043,599,0.604]],["t/224",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,2.936,25,2.33,26,0.472,29,2.545,33,3.425,36,4.355,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.185,45,3.844,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,4.587,111,0.271,599,0.647]],["t/226",[0,0.303,1,0.352,5,1.135,6,0.022,7,0.239,8,0.246,9,0.287,10,0.261,11,0.253,12,0.283,13,0.381,14,0.275,17,1.543,19,1.422,21,0.258,22,1.195,23,0.225,26,0.57,39,1.744,43,2.247,46,1.78,54,3.522,57,0.337,59,1.009,60,1.612,65,0.754,67,2.223,75,2.53,107,1.834,111,0.239,182,2.53,189,3.25,201,3.664,284,2.773,331,2.595,382,4.329,383,3.591,384,2.814,388,3.495,389,2.851,390,2.299,391,2.851,392,2.468,430,4.898,431,4.215,447,4.898,470,4.106,599,0.571,765,2.811]],["t/228",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,2.936,25,2.33,26,0.472,29,2.545,33,3.425,36,4.355,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.185,45,4.587,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,3.844,111,0.271,599,0.647]],["t/230",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.301,46,2.055,57,0.389,59,0.852,96,3.721,111,0.276,175,2.997,290,1.739,339,5.115,348,4.516,362,4.624,363,5.475,364,4.624,599,0.659]],["t/232",[0,0.315,1,0.35,5,1.023,6,0.022,7,0.215,8,0.243,9,0.285,10,0.258,11,0.25,12,0.279,13,0.377,14,0.272,17,1.519,20,2.217,21,0.256,22,1.077,23,0.222,26,0.592,39,1.702,43,2.192,57,0.456,59,0.91,60,1.572,63,1.826,65,0.735,72,2.438,73,2.468,107,2.262,111,0.234,114,2.705,119,2.05,176,1.348,189,2.531,196,3.466,205,2.499,270,2.705,290,1.469,299,2.995,317,2.802,322,4.938,323,4.228,324,3.834,326,4.228,327,3.886,328,4.217,332,2.905,384,2.192,390,2.242,392,2.408,442,4.938,443,4.112,444,4.228,456,3.092,457,2.742,469,3.196,599,0.557,765,2.742]],["t/234",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,107,2.083,111,0.272,119,2.387,182,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.222,394,3.433,408,3.721,409,3.721,410,3.721,411,4.436,599,0.648]],["t/236",[0,0.293,1,0.34,5,1.066,6,0.021,7,0.224,8,0.231,9,0.277,10,0.245,11,0.238,12,0.265,13,0.358,14,0.259,17,1.283,19,1.827,21,0.254,22,1.122,23,0.211,26,0.535,46,2.286,57,0.433,59,0.948,60,1.679,63,1.95,65,0.968,67,1.569,72,3.21,73,2.635,75,2.635,107,2.356,111,0.249,119,2.189,182,3.25,382,4.439,383,3.74,384,3.129,388,2.539,389,3.662,390,2.952,391,3.971,392,3.17,393,4.006,394,3.149,408,3.413,409,3.413,410,3.413,411,3.413,599,0.595]],["t/238",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.301,46,2.055,57,0.389,59,0.852,96,3.721,111,0.276,175,2.997,290,1.739,339,5.115,348,4.516,362,4.624,363,4.624,364,5.475,599,0.659]],["t/240",[0,0.303,1,0.353,5,1.136,6,0.022,7,0.226,8,0.246,9,0.287,10,0.261,11,0.254,12,0.283,13,0.382,14,0.276,17,1.752,19,1.647,20,2.011,21,0.255,22,1.197,23,0.225,26,0.571,39,1.544,43,1.988,46,2.061,57,0.461,59,1.01,60,2.081,63,1.657,65,0.873,67,1.945,72,3.226,73,2.931,75,2.239,80,2.523,107,2.512,111,0.212,119,1.86,182,2.931,196,3.256,200,2.268,205,2.268,299,2.718,317,2.011,324,2.389,327,2.421,332,2.636,382,4.003,383,3.178,384,3.276,388,2.824,389,3.302,390,3.268,391,3.302,392,3.187,393,3.613,394,2.676,403,2.852,408,2.9,409,2.9,410,2.9,411,2.9,455,4.159,456,2.805,457,2.488,469,2.9,480,3.059,481,3.384,599,0.505]],["t/242",[0,0.276,1,0.321,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,16,1.623,17,1.433,21,0.255,22,1.016,23,0.191,25,2.393,26,0.485,27,5.25,28,2.98,29,2.613,30,4.447,31,4.836,32,2.597,33,3.517,34,5.638,35,3.572,111,0.278,599,0.664]],["t/244",[0,0.313,1,0.364,5,1.203,6,0.024,7,0.245,8,0.261,9,0.296,10,0.276,11,0.268,12,0.3,13,0.404,14,0.292,17,1.9,19,1.568,20,2.139,21,0.259,22,1.266,23,0.238,24,2.045,26,0.604,31,2.305,39,1.142,43,1.471,46,1.675,48,2.721,49,1.921,52,3.865,53,2.984,54,3.315,55,2.923,56,2.305,57,0.488,58,2.262,59,1.069,60,2.365,61,3.865,62,3.522,63,1.762,64,2.351,65,0.71,66,2.621,67,1.924,68,3.522,69,2.474,70,2.61,71,2.503,72,3.191,73,2.789,79,3.865,80,1.866,81,2.923,93,1.177,94,1.893,107,2.022,111,0.157,119,1.376,182,1.656,189,1.699,196,2.646,200,2.412,205,1.677,211,2.398,278,2.984,299,2.01,317,1.487,324,1.766,327,1.79,332,1.949,384,2.708,388,2.295,389,1.866,390,2.534,391,1.866,392,2.324,393,2.936,394,1.979,403,2.109,408,2.145,409,2.145,410,2.145,411,2.145,447,3.681,448,3.681,449,2.759,455,3.38,456,2.075,457,1.84,469,2.145,470,2.687,480,2.262,481,2.503,491,3.681,492,2.759,499,2.759,599,0.374]],["t/246",[0,0.319,1,0.345,5,1.038,6,0.022,7,0.239,8,0.246,9,0.287,10,0.26,11,0.253,12,0.282,13,0.381,14,0.275,16,1.906,17,1.945,21,0.258,22,1.093,23,0.224,26,0.615,28,2.557,60,2.309,62,3.733,94,2.886,109,1.366,110,1.794,111,0.239,176,1.379,194,3.841,216,3.656,227,3.996,264,5.136,265,3.449,266,4.326,290,1.884,344,5.009,365,5.009,366,2.805,367,4.326,374,3.387,375,4.206,599,0.57]],["t/248",[0,0.294,1,0.342,5,1.076,6,0.021,7,0.227,8,0.233,9,0.279,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,16,1.475,17,1.303,19,1.994,21,0.255,22,1.133,23,0.213,25,2.175,26,0.54,27,4.958,28,2.71,29,2.376,30,4.043,31,4.567,32,2.765,33,3.198,34,4.342,35,4.306,46,1.882,47,2.71,59,0.78,63,1.98,77,2.199,78,3.408,88,2.378,91,2.78,111,0.253,190,2.579,192,3.453,200,2.71,500,4.481,501,3.725,512,3.875,599,0.604]],["t/250",[0,0.312,1,0.361,5,1.186,6,0.023,7,0.25,8,0.257,9,0.294,10,0.272,11,0.265,12,0.295,13,0.398,14,0.288,16,0.985,17,1.416,19,2.183,21,0.257,22,1.249,23,0.235,24,2.158,25,1.452,26,0.606,29,1.586,32,1.879,33,2.134,35,2.167,36,3.2,37,1.931,38,2.202,39,1.732,40,1.604,41,1.979,42,2.545,43,1.586,44,1.984,45,2.395,46,2.587,47,2.944,48,1.742,49,2.071,50,2.102,51,2.395,57,0.42,59,1.033,60,1.601,65,0.749,67,1.063,68,3.716,69,3.021,70,1.957,71,2.699,72,3.116,73,2.513,74,3.884,75,2.513,76,2.898,77,2.39,78,3.2,82,3.978,83,1.931,84,3.06,88,1.822,91,1.855,96,2.274,107,1.822,111,0.169,115,3.152,119,1.484,175,1.832,182,2.513,190,1.721,192,2.645,200,1.808,290,1.063,339,3.716,348,2.76,362,2.827,363,2.827,364,2.827,382,3.433,383,2.535,384,2.582,388,1.721,389,2.832,390,2.283,391,2.832,392,2.452,393,3.098,394,2.134,408,2.313,409,2.313,410,2.313,411,2.313,500,3.433,501,2.486,512,2.586,599,0.403]],["t/252",[0,0.295,1,0.343,5,1.08,6,0.021,7,0.227,8,0.234,9,0.279,10,0.248,11,0.241,12,0.269,13,0.363,14,0.262,19,2.137,21,0.256,22,1.138,23,0.214,26,0.543,32,2.462,35,3.269,46,2.317,47,3.336,59,0.96,63,1.993,69,2.799,74,5.092,75,2.694,76,4.371,77,2.707,78,4.532,88,2.388,91,2.799,111,0.255,190,2.596,192,3.467,200,2.728,500,4.5,501,3.75,512,3.901,599,0.608]],["t/254",[0,0.313,1,0.319,6,0.019,7,0.238,8,0.207,9,0.26,10,0.219,11,0.213,12,0.237,13,0.32,14,0.231,21,0.254,23,0.189,26,0.568,57,0.459,65,0.866,111,0.275,114,3.186,119,2.416,176,1.588,270,3.186,290,1.731,317,2.611,322,5.46,323,4.981,324,3.679,326,5.909,327,3.143,328,3.584,599,0.656]],["t/256",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.198,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.668,20,2.58,21,0.253,22,0.992,23,0.186,26,0.473,39,1.981,43,2.551,57,0.383,59,0.838,60,1.831,63,2.126,72,2.838,73,2.873,107,2.483,111,0.272,196,3.805,205,2.909,299,3.487,324,3.064,327,3.106,332,3.382,384,2.551,390,2.61,392,2.803,456,3.599,457,3.192,469,4.436,599,0.648]],["t/258",[0,0.299,1,0.348,5,1.108,6,0.022,7,0.212,8,0.24,9,0.283,10,0.255,11,0.247,12,0.276,13,0.372,14,0.269,17,1.646,19,1.724,20,2.159,21,0.254,22,1.167,23,0.219,26,0.557,39,1.657,43,2.135,46,2.158,57,0.45,59,0.985,60,1.955,63,1.779,65,0.914,67,1.431,72,3.338,73,3.068,75,2.404,107,2.581,111,0.227,119,1.997,182,3.068,196,3.409,205,2.435,299,2.918,324,2.564,327,2.599,332,2.83,382,4.191,383,3.412,384,3.161,388,2.317,389,3.457,390,3.07,391,3.457,392,3.473,393,3.782,394,2.873,408,3.114,409,3.114,410,3.114,411,3.114,456,3.012,457,2.671,469,3.114,599,0.543,765,2.671]],["t/260",[0,0.301,1,0.327,5,1.07,6,0.021,7,0.225,8,0.232,9,0.278,10,0.246,11,0.239,12,0.267,13,0.359,14,0.26,16,1.462,19,1.491,21,0.255,22,0.916,23,0.212,24,2.801,25,2.156,26,0.582,29,2.897,33,3.17,36,4.155,37,2.867,38,3.27,39,2.25,40,2.382,41,2.089,42,3.834,43,2.355,44,2.947,45,3.558,46,1.865,47,2.686,48,2.587,49,3.076,50,4.16,51,3.558,57,0.353,63,1.962,65,0.79,111,0.251,175,2.72,290,1.579,334,5.165,335,4.419,336,4.544,337,3.558,338,3.623,599,0.599]],["t/262",[0,0.277,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,17,1.697,21,0.256,22,1.021,23,0.192,26,0.487,57,0.394,59,0.862,60,1.884,70,3.241,111,0.28,200,2.995,278,4.365,491,5.386,492,4.927,499,5.805,599,0.667]],["t/264",[0,0.274,1,0.318,5,0.949,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,19,2.063,21,0.253,22,0.999,23,0.188,26,0.477,32,2.571,35,3.512,46,2.035,47,2.93,59,0.844,77,2.378,78,3.685,88,2.494,91,3.006,111,0.274,190,2.789,192,3.62,200,2.93,500,4.698,501,4.028,512,4.981,599,0.653]],["t/266",[0,0.3,1,0.348,5,1.111,6,0.022,7,0.213,8,0.241,9,0.284,10,0.255,11,0.248,12,0.277,13,0.373,14,0.27,17,1.795,19,1.905,20,2.172,21,0.254,22,1.17,23,0.22,26,0.558,39,1.667,43,2.148,46,2.166,57,0.451,59,0.988,60,2.159,63,1.79,65,0.721,68,4.554,69,2.513,70,2.651,71,3.655,72,3.639,73,3.568,107,2.457,111,0.229,119,2.009,182,2.419,196,3.422,205,2.449,299,2.935,324,2.58,327,2.615,332,2.847,384,2.735,389,2.725,390,2.798,391,2.725,392,3.005,393,3.797,394,2.89,408,3.132,409,3.132,410,3.132,411,3.132,456,3.03,457,2.687,469,3.132,599,0.546,765,2.687]],["t/268",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,107,2.083,111,0.272,119,2.387,182,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.222,394,3.433,408,3.721,409,4.436,410,3.721,411,3.721,599,0.648]],["t/270",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.511,89,4.636,90,4.636,91,3.599,92,4.077,111,0.277,599,0.661]],["t/272",[0,0.313,1,0.365,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.25,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,1.549,17,1.791,18,2.708,19,2.037,20,2.522,21,0.26,22,1.27,23,0.239,24,2.788,25,2.283,26,0.606,27,3.631,28,1.698,29,2.134,30,2.534,31,3.909,32,1.796,33,2.872,34,2.721,35,2.035,36,3.06,37,1.813,38,2.067,39,1.657,40,1.506,41,1.32,42,2.433,43,1.489,44,1.863,45,2.249,46,2.157,47,2.433,48,2.344,49,1.945,50,1.974,51,2.249,52,3.9,53,3.01,54,2.334,55,2.96,56,2.334,57,0.432,58,2.291,59,1.015,60,1.954,61,3.9,62,2.479,63,1.241,64,2.38,65,0.716,66,2.654,67,0.998,68,3.553,69,3.373,70,1.838,71,2.534,72,2.373,73,1.677,74,3.714,75,1.677,76,2.721,77,2.521,78,2.135,79,3.9,80,1.89,81,2.96,82,3.804,83,2.598,84,2.873,85,3.553,86,2.592,87,3.411,88,1.742,89,2.654,90,2.654,91,1.742,92,2.334,93,1.191,94,1.917,111,0.159,599,0.378,766,3.29]],["t/274",[0,0.313,1,0.364,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.25,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,1.549,17,1.791,18,2.708,19,2.037,20,2.522,21,0.26,22,1.285,23,0.239,24,2.788,25,2.283,26,0.606,27,3.631,28,1.698,29,2.134,30,2.534,31,3.909,32,1.796,33,2.872,34,2.721,35,2.035,36,3.06,37,1.813,38,2.067,39,1.657,40,1.506,41,1.32,42,2.433,43,1.489,44,1.863,45,2.249,46,2.157,47,2.433,48,2.344,49,1.945,50,1.974,51,2.249,52,3.9,53,3.01,54,2.334,55,2.96,56,2.334,57,0.432,58,2.291,59,1.015,60,1.954,61,3.9,62,2.479,63,1.241,64,2.38,65,0.716,66,2.654,67,0.998,68,3.553,69,3.373,70,1.838,71,2.534,72,2.373,73,1.677,74,3.714,75,1.677,76,2.721,77,2.521,78,2.135,79,3.9,80,1.89,81,2.96,82,3.804,83,2.598,84,2.873,85,3.553,86,2.592,87,3.411,88,1.742,89,2.654,90,2.654,91,1.742,92,2.334,93,1.191,94,1.917,111,0.159,599,0.378,766,3.29]],["t/276",[0,0.294,1,0.342,5,1.074,6,0.021,7,0.226,8,0.233,9,0.278,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,16,1.472,17,1.596,19,1.501,21,0.255,22,1.132,23,0.213,24,2.813,25,2.171,26,0.54,29,2.371,33,3.191,36,4.172,37,2.886,38,3.291,39,2.259,40,2.398,41,2.102,42,3.318,43,2.371,44,2.967,45,3.581,46,1.878,47,2.704,48,3.458,49,4.111,50,3.143,51,3.581,57,0.356,59,0.778,60,1.701,63,1.975,111,0.253,211,3.866,448,5.064,449,4.448,599,0.603]],["t/278",[0,0.302,1,0.342,5,1.079,6,0.021,7,0.227,8,0.234,9,0.279,10,0.248,11,0.241,12,0.269,13,0.362,14,0.262,19,1.998,21,0.256,22,1.136,23,0.213,26,0.542,32,2.459,35,3.262,46,1.89,47,2.722,57,0.358,59,0.784,63,1.989,77,2.209,78,3.423,88,2.755,91,3.693,96,3.423,111,0.254,190,2.59,192,3.463,194,3.262,199,2.945,200,2.722,203,3.164,373,5.207,377,4.605,500,4.494,501,3.741,512,3.892,599,0.607]],["t/280",[0,0.312,1,0.363,5,1.199,6,0.023,7,0.249,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,17,1.803,19,1.702,20,1.465,21,0.258,22,1.278,23,0.237,26,0.602,32,1.761,35,1.98,39,1.624,43,2.092,46,1.657,47,1.652,48,2.299,49,1.892,54,2.271,57,0.446,59,1.066,60,2.133,63,1.207,65,0.702,67,2.055,70,1.788,72,2.731,73,2.356,77,1.341,78,2.078,88,1.708,91,1.695,93,1.159,94,2.693,107,2.005,110,1.159,111,0.154,119,1.355,182,1.631,189,3.106,190,1.572,192,2.48,196,2.618,200,2.801,201,2.363,205,1.652,211,2.363,278,2.952,284,1.788,299,1.98,317,2.116,324,2.513,327,2.547,328,2.905,331,1.673,332,1.92,366,1.813,384,2.689,388,2.919,389,1.838,390,2.513,391,1.838,392,2.299,393,2.905,394,1.95,403,2.078,408,2.113,409,2.113,410,2.113,411,2.113,412,3.344,413,2.271,414,3.28,415,3.219,416,3.344,427,2.465,428,2.465,429,2.465,430,3.642,431,2.718,442,3.729,443,2.718,444,2.795,447,3.642,448,3.642,449,2.718,455,3.344,456,2.044,457,1.813,469,2.113,470,2.648,480,2.229,481,2.465,491,3.642,492,2.718,499,2.718,500,3.219,501,2.271,512,2.363,599,0.368,766,3.201]],["t/282",[0,0.322,1,0.361,5,1.173,6,0.023,7,0.247,8,0.254,9,0.292,10,0.269,11,0.262,12,0.292,13,0.394,14,0.285,16,1.503,17,1.742,19,1.865,21,0.257,22,1.264,23,0.237,26,0.622,39,1.879,41,1.582,46,1.917,57,0.412,59,0.902,60,1.737,65,0.812,67,1.196,75,2.009,88,2.243,91,2.087,94,2.296,96,3.471,107,1.456,110,1.427,111,0.19,175,2.795,182,2.009,190,1.936,194,3.754,199,2.201,203,2.364,219,2.42,284,2.201,290,1.842,325,2.565,331,2.06,339,4.03,340,4.119,341,3.259,342,4.709,343,4.492,344,4.314,348,3.105,362,3.179,363,3.179,364,3.179,365,4.314,366,2.232,367,3.441,373,4.314,374,2.694,375,3.346,377,3.441,382,3.723,383,2.851,384,2.42,388,1.936,389,2.263,390,1.825,391,2.263,392,1.959,599,0.453,766,3.941]],["t/284",[0,0.312,1,0.364,5,1.199,6,0.023,7,0.249,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,17,1.803,19,1.702,20,1.465,21,0.258,22,1.262,23,0.237,26,0.602,32,1.761,35,1.98,39,1.624,43,2.092,46,1.657,47,1.652,48,2.299,49,1.892,54,2.271,57,0.446,59,1.066,60,2.133,63,1.207,65,0.702,67,2.055,70,1.788,72,2.731,73,2.356,77,1.341,78,2.078,88,1.708,91,1.695,93,1.159,94,2.693,107,2.005,110,1.159,111,0.154,119,1.355,182,1.631,189,3.106,190,1.572,192,2.48,196,2.618,200,2.801,201,2.363,205,1.652,211,2.363,278,2.952,284,1.788,299,1.98,317,2.116,324,2.513,327,2.547,328,2.905,331,1.673,332,1.92,366,1.813,384,2.689,388,2.919,389,1.838,390,2.513,391,1.838,392,2.299,393,2.905,394,1.95,403,2.078,408,2.113,409,2.113,410,2.113,411,2.113,412,3.344,413,2.271,414,3.28,415,3.219,416,3.344,427,2.465,428,2.465,429,2.465,430,3.642,431,2.718,442,3.729,443,2.718,444,2.795,447,3.642,448,3.642,449,2.718,455,3.344,456,2.044,457,1.813,469,2.113,470,2.648,480,2.229,481,2.465,491,3.642,492,2.718,499,2.718,500,3.219,501,2.271,512,2.363,599,0.368,766,3.201]],["t/286",[0,0.322,1,0.363,5,1.173,6,0.023,7,0.247,8,0.254,9,0.292,10,0.269,11,0.262,12,0.292,13,0.394,14,0.285,16,1.503,17,1.742,19,1.865,21,0.257,22,1.235,23,0.237,26,0.622,39,1.879,41,1.582,46,1.917,57,0.412,59,0.902,60,1.737,65,0.812,67,1.196,75,2.009,88,2.243,91,2.087,94,2.296,96,3.471,107,1.456,110,1.427,111,0.19,175,2.795,182,2.009,190,1.936,194,3.754,199,2.201,203,2.364,219,2.42,284,2.201,290,1.842,325,2.565,331,2.06,339,4.03,340,4.119,341,3.259,342,4.709,343,4.492,344,4.314,348,3.105,362,3.179,363,3.179,364,3.179,365,4.314,366,2.232,367,3.441,373,4.314,374,2.694,375,3.346,377,3.441,382,3.723,383,2.851,384,2.42,388,1.936,389,2.263,390,1.825,391,2.263,392,1.959,599,0.453,766,3.941]],["t/288",[0,0.307,1,0.341,5,0.874,6,0.021,7,0.184,8,0.233,9,0.278,10,0.246,11,0.24,12,0.267,13,0.36,14,0.26,17,1.594,20,3.18,21,0.255,22,0.92,23,0.212,26,0.583,29,2.365,39,1.837,43,2.365,57,0.472,59,0.777,60,1.697,63,2.421,65,0.794,72,2.631,73,2.664,107,2.372,111,0.252,114,2.919,176,1.455,196,3.635,205,2.698,290,1.586,299,3.233,324,2.841,327,2.88,329,5.605,330,4.856,332,4.168,384,2.365,390,2.42,392,2.599,456,3.337,457,2.96,469,3.45,599,0.601]],["t/290",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.511,89,5.483,90,4.636,91,3.043,92,4.077,111,0.277,599,0.661]],["t/292",[0,0.289,1,0.336,5,1.042,6,0.022,7,0.239,8,0.247,9,0.287,10,0.261,11,0.254,12,0.283,13,0.382,14,0.276,16,1.401,17,1.547,21,0.258,22,1.097,23,0.236,26,0.571,53,3.183,57,0.423,59,0.926,60,1.619,62,3.757,65,0.757,67,2.226,111,0.24,176,1.388,189,2.606,199,2.784,200,2.573,203,2.991,207,5.792,208,5.206,317,2.282,366,2.823,384,2.821,388,3.062,390,2.308,403,3.236,412,4.509,413,3.537,414,4.423,415,4.34,416,4.509,427,3.839,428,3.839,429,3.839,455,4.509,480,3.471,481,3.839,599,0.573,765,2.823]],["t/294",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,5.236,88,2.511,89,4.636,90,4.636,91,3.043,92,4.077,111,0.277,599,0.661]],["t/296",[0,0.303,1,0.352,5,1.135,6,0.022,7,0.239,8,0.246,9,0.287,10,0.261,11,0.253,12,0.283,13,0.381,14,0.275,17,1.543,19,1.422,21,0.258,22,1.195,23,0.225,26,0.57,39,1.744,43,2.247,46,1.78,54,3.522,57,0.337,59,1.009,60,1.612,65,0.754,67,2.268,75,2.53,107,1.834,111,0.239,182,2.53,189,3.25,201,3.664,284,2.773,331,2.595,382,4.329,383,3.591,384,2.814,388,3.335,389,2.851,390,2.299,391,2.851,392,2.468,430,4.898,431,4.215,447,4.898,470,4.106,599,0.571,765,2.811]],["t/298",[0,0.276,1,0.321,2,5.242,3,2.763,4,3.262,5,0.963,6,0.019,7,0.24,8,0.209,9,0.261,10,0.221,11,0.215,12,0.24,13,0.323,14,0.234,15,4.087,16,1.619,17,1.69,18,3.909,19,1.95,20,3.116,21,0.255,22,1.014,23,0.191,24,2.978,25,2.387,26,0.484,111,0.278,599,0.663]],["t/300",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,16,1.659,17,1.466,21,0.258,23,0.228,25,2.446,26,0.496,37,3.253,39,2.074,111,0.285,119,2.5,171,5.712,176,1.643,242,5.864,243,5.311,599,0.679]],["t/302",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,3.138,25,2.33,26,0.472,29,2.545,33,3.425,36,4.355,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.185,45,3.844,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,3.844,111,0.271,599,0.647]],["t/304",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,111,0.276,189,2.989,366,3.239,388,2.809,412,4.903,413,4.057,414,4.808,415,5.029,416,4.903,427,4.404,428,4.404,429,4.404,599,0.658]],["t/306",[1,0.274,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,21,0.256,23,0.226,26,0.488,32,2.608,40,3.134,41,2.748,59,1.017,88,2.149,111,0.281,148,4.811,155,4.48,176,1.619,180,5.978,194,3.598,195,5.597,196,3.294,599,0.669]],["t/308",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.301,46,2.055,57,0.389,59,0.852,96,3.721,111,0.276,175,2.997,290,1.739,339,5.115,348,4.516,362,5.475,363,4.624,364,4.624,599,0.659]],["t/310",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,2.936,25,2.33,26,0.472,29,2.545,33,3.425,36,4.355,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.8,45,3.844,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,3.844,111,0.271,599,0.647]],["t/312",[0,0.278,1,0.323,5,0.975,6,0.019,7,0.241,8,0.211,9,0.263,10,0.224,11,0.218,12,0.243,13,0.327,14,0.236,21,0.256,22,1.026,23,0.193,26,0.49,59,0.867,111,0.281,189,3.048,317,2.669,324,3.17,327,3.213,328,4.576,442,5.531,443,4.951,444,5.092,599,0.671]],["t/314",[0,0.294,1,0.342,5,1.077,6,0.021,7,0.185,8,0.234,9,0.279,10,0.247,11,0.241,12,0.268,13,0.362,14,0.261,17,1.6,20,2.409,21,0.256,22,1.135,23,0.213,26,0.541,39,1.849,43,2.381,57,0.357,59,0.958,60,1.709,63,2.431,72,2.649,73,2.682,107,2.382,111,0.254,189,2.75,196,3.65,205,2.716,299,3.254,317,2.409,324,3.788,327,3.551,328,4.05,332,3.157,384,2.381,390,2.436,392,2.616,442,5.2,443,4.468,444,4.594,456,3.36,457,2.98,469,3.473,599,0.605]],["t/316",[0,0.275,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,17,1.685,21,0.254,22,1.009,23,0.19,26,0.481,57,0.389,59,0.852,60,1.862,67,2.059,111,0.276,200,2.959,317,2.624,384,3.072,388,2.816,390,2.654,403,4.405,455,4.91,480,3.991,481,4.415,599,0.659]],["t/318",[0,0.303,1,0.353,5,1.136,6,0.022,7,0.226,8,0.246,9,0.287,10,0.261,11,0.254,12,0.283,13,0.382,14,0.276,17,1.752,19,1.647,20,2.011,21,0.255,22,1.197,23,0.225,26,0.571,39,1.544,43,1.988,46,2.061,57,0.461,59,1.01,60,2.081,63,1.657,65,0.873,67,1.945,72,3.226,73,2.931,75,2.239,80,2.523,107,2.512,111,0.212,119,1.86,182,2.931,196,3.256,200,2.268,205,2.268,299,2.718,317,2.011,324,2.389,327,2.421,332,2.636,382,4.003,383,3.178,384,3.338,388,2.824,389,3.302,390,3.148,391,3.302,392,3.187,393,3.613,394,2.676,403,2.852,408,2.9,409,2.9,410,2.9,411,2.9,455,4.159,456,2.805,457,2.488,469,2.9,480,3.059,481,3.384,599,0.505]],["t/320",[0,0.293,1,0.34,5,1.066,6,0.021,7,0.224,8,0.231,9,0.277,10,0.245,11,0.238,12,0.265,13,0.358,14,0.259,17,1.283,19,1.827,21,0.254,22,1.122,23,0.211,26,0.535,46,2.286,57,0.433,59,0.948,60,1.679,63,1.95,65,0.968,67,1.569,72,3.21,73,2.635,75,2.635,107,2.356,111,0.249,119,2.189,182,3.25,382,4.439,383,3.74,384,3.129,388,2.539,389,3.971,390,2.952,391,3.662,392,3.17,393,4.006,394,3.149,408,3.413,409,3.413,410,3.413,411,3.413,599,0.595]],["t/322",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.724,46,2.055,57,0.389,59,0.852,96,3.721,111,0.276,175,2.997,290,1.739,339,5.115,348,4.516,362,4.624,363,4.624,364,4.624,599,0.659]],["t/324",[0,0.299,1,0.341,2,4.418,3,2.099,4,2.479,5,1.069,6,0.023,7,0.248,8,0.256,9,0.293,10,0.271,11,0.263,12,0.293,13,0.396,14,0.286,15,3.106,16,1.908,17,1.685,18,3.294,19,1.833,20,2.626,21,0.259,22,1.126,23,0.244,24,2.8,25,2.997,26,0.592,27,4.418,28,2.259,29,2.596,30,3.371,31,4.069,32,2.185,33,3.494,34,3.62,35,2.708,36,3.723,37,3.525,38,2.75,39,2.477,40,2.004,41,1.757,42,2.96,43,1.981,44,2.479,45,2.993,46,1.569,47,2.259,48,2.177,49,2.588,50,2.626,51,2.993,57,0.297,65,0.665,75,2.231,80,2.514,111,0.211,119,1.853,171,3.62,176,1.597,238,5.16,239,4.212,242,4.871,243,3.938,599,0.504]],["t/326",[0,0.276,1,0.321,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,16,1.623,17,1.433,21,0.255,22,1.016,23,0.191,25,2.393,26,0.485,27,5.25,28,2.98,29,2.613,30,4.447,31,5.145,32,2.597,33,3.517,34,4.776,35,3.572,111,0.278,599,0.664]],["t/328",[0,0.301,1,0.337,5,1.05,6,0.023,7,0.252,8,0.259,9,0.295,10,0.275,11,0.267,12,0.298,13,0.402,14,0.29,16,1.88,17,1.91,19,1.602,21,0.261,22,1.105,23,0.248,25,1.746,26,0.622,29,1.907,37,2.322,39,1.481,46,1.511,53,2.691,57,0.38,59,0.831,60,2.039,65,0.64,70,2.354,72,2.816,73,2.148,94,2.455,107,2.067,110,1.526,111,0.203,119,2.368,161,4.75,164,3.68,171,3.485,175,2.203,176,1.748,177,3.915,179,3.4,182,2.148,194,3.46,210,5.197,211,3.11,212,4.4,213,4.4,242,4.75,243,3.791,290,1.697,344,4.513,365,4.513,366,2.386,367,3.68,374,2.881,375,3.578,384,1.907,389,2.42,390,1.951,391,2.42,392,2.095,393,3.515,394,2.567,408,2.782,409,2.782,410,2.782,411,2.782,599,0.485]],["t/330",[0,0.313,1,0.364,2,3.631,3,1.578,4,1.863,5,1.206,6,0.024,7,0.246,8,0.262,9,0.297,10,0.277,11,0.269,12,0.3,13,0.405,14,0.293,15,2.334,16,0.925,17,1.918,18,2.708,19,1.724,20,2.755,21,0.26,22,1.27,23,0.239,24,2.411,25,1.363,26,0.606,31,2.334,39,1.156,43,1.489,46,1.179,48,2.74,49,1.945,52,3.9,53,3.01,54,3.345,55,2.96,56,2.334,57,0.483,58,2.291,59,1.057,60,2.309,61,3.9,62,2.479,63,1.778,64,2.38,65,0.5,66,2.654,67,1.933,68,3.553,69,2.497,70,3.078,71,2.534,72,2.774,73,2.403,79,3.9,80,1.89,81,2.96,93,1.191,94,1.917,107,1.742,111,0.159,189,1.72,196,2.67,200,2.433,205,1.698,211,2.428,278,3.01,299,2.035,317,1.506,324,1.788,327,1.813,332,1.974,384,2.494,388,2.316,390,2.183,392,1.636,403,2.135,447,3.714,448,3.714,449,2.794,455,3.411,456,2.101,457,1.863,469,2.172,470,2.721,480,2.291,481,2.534,491,3.714,492,2.794,499,2.794,599,0.378]],["t/332",[1,0.275,6,0.019,7,0.241,8,0.211,9,0.263,10,0.224,11,0.218,12,0.243,13,0.327,14,0.236,21,0.256,23,0.227,26,0.49,32,2.775,40,2.669,41,2.34,59,1.019,88,2.155,111,0.281,148,4.823,155,4.491,176,1.623,180,5.986,194,3.607,195,5.611,196,3.302,599,0.671]],["t/334",[0,0.294,1,0.342,5,1.076,6,0.021,7,0.227,8,0.233,9,0.279,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,16,1.475,17,1.303,19,1.994,21,0.255,22,1.133,23,0.213,25,2.175,26,0.54,27,4.958,28,2.71,29,2.376,30,4.043,31,4.567,32,2.837,33,3.198,34,4.342,35,3.981,46,1.882,47,2.71,59,0.78,63,1.98,77,2.199,78,3.408,88,2.378,91,2.78,111,0.253,190,2.579,192,3.453,200,2.71,500,4.481,501,3.725,512,3.875,599,0.604]],["t/336",[0,0.316,1,0.34,3,2.479,4,2.928,5,0.864,6,0.021,7,0.243,8,0.231,9,0.277,10,0.245,11,0.238,12,0.265,13,0.358,14,0.259,16,1.453,17,1.583,21,0.254,22,0.91,23,0.211,26,0.58,57,0.433,59,0.768,60,1.679,63,1.95,65,0.785,67,1.935,111,0.249,165,4.073,176,1.439,185,2.602,192,2.774,200,2.668,270,3.862,287,4.911,297,3.413,298,3.982,317,3.503,384,2.886,388,2.539,390,2.394,403,3.356,455,4.612,480,3.599,481,3.982,599,0.595]],["t/338",[0,0.315,1,0.316,3,2.691,4,3.177,6,0.018,7,0.252,8,0.203,9,0.257,10,0.215,11,0.209,12,0.234,13,0.315,14,0.227,16,1.577,21,0.252,23,0.186,26,0.562,57,0.381,65,0.852,111,0.271,165,4.42,176,1.562,185,2.824,192,3.01,270,4.145,287,5.161,297,3.703,298,4.321,317,3.524,599,0.645]],["t/340",[0,0.294,1,0.272,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.191,26,0.572,29,2.613,42,3.743,50,3.464,57,0.392,65,0.877,111,0.278,175,3.018,290,1.752,334,5.499,335,4.903,336,5.952,337,3.947,338,4.02,599,0.664]],["t/342",[0,0.311,1,0.36,2,3.564,3,1.537,4,1.815,5,1.181,6,0.023,7,0.252,8,0.26,9,0.296,10,0.275,11,0.268,12,0.299,13,0.403,14,0.291,15,2.274,16,1.526,17,1.565,18,2.658,19,2.198,20,2.118,21,0.258,22,1.244,23,0.24,24,2.376,25,2.25,26,0.61,29,1.451,32,1.763,33,1.952,35,1.983,36,3.004,37,1.766,38,2.014,39,1.626,40,1.467,41,1.857,42,2.388,43,1.451,44,1.815,45,2.191,46,2.486,47,2.803,48,1.594,49,1.895,50,1.923,51,2.191,57,0.404,59,1.007,60,1.503,65,0.703,67,0.973,68,3.487,69,3.149,70,1.79,71,2.469,72,2.993,73,2.358,74,3.646,75,2.358,76,2.651,77,2.275,78,3.004,82,3.733,83,1.766,84,2.799,88,1.71,91,1.697,93,1.161,94,1.867,96,2.081,107,2.007,111,0.155,119,1.357,175,1.676,176,0.892,182,2.358,190,1.575,192,2.483,199,1.79,200,1.654,203,1.923,204,4.163,205,1.654,206,3.206,290,0.973,339,3.487,348,2.525,362,2.586,363,2.586,364,2.586,382,3.222,383,2.319,384,2.458,388,1.575,389,2.658,390,2.143,391,2.658,392,2.301,393,2.907,394,1.952,408,2.116,409,2.116,410,2.116,411,2.116,480,2.232,500,3.222,501,2.274,512,2.366,599,0.369]],["t/344",[0,0.294,1,0.272,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.191,26,0.572,29,2.613,42,3.743,50,3.464,57,0.392,65,0.877,111,0.278,175,3.018,290,1.752,334,5.499,335,4.903,336,5.042,337,3.947,338,4.746,599,0.664]],["t/346",[6,0.019,7,0.206,8,0.212,9,0.264,10,0.225,11,0.219,12,0.244,13,0.329,14,0.238,17,1.455,19,1.97,21,0.257,23,0.227,26,0.492,29,2.652,59,0.871,94,3.414,107,2.165,110,2.122,111,0.283,161,5.838,164,5.117,175,3.063,176,1.631,177,5.444,179,4.727,480,4.08,599,0.674]],["t/348",[0,0.301,1,0.349,5,1.118,6,0.022,7,0.235,8,0.242,9,0.285,10,0.257,11,0.25,12,0.278,13,0.375,14,0.271,16,1.35,19,2.124,21,0.255,22,1.177,23,0.221,24,2.665,25,1.99,26,0.561,29,2.174,32,2.32,33,2.925,35,2.971,36,3.953,37,2.646,38,3.018,39,2.14,40,2.199,41,1.928,42,3.143,43,2.174,44,2.72,45,3.284,46,2.397,47,3.629,48,2.388,49,2.839,50,2.882,51,3.284,59,0.905,69,2.543,74,4.798,75,2.448,76,3.973,77,2.551,78,3.953,88,2.25,91,2.543,111,0.232,190,2.359,192,3.267,200,2.479,500,4.24,501,3.408,512,3.545,599,0.552,765,2.72]],["t/350",[0,0.294,1,0.272,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.191,26,0.572,29,2.613,42,3.743,50,3.464,57,0.392,65,0.877,111,0.278,175,3.018,290,1.752,334,5.499,335,4.903,336,5.042,337,4.66,338,4.02,599,0.664]],["t/352",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.198,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.668,20,2.58,21,0.253,22,0.992,23,0.186,26,0.473,39,1.981,43,2.551,57,0.383,59,0.838,60,1.831,63,2.126,72,2.838,73,2.873,107,2.483,111,0.272,196,3.805,205,2.909,299,4.156,324,3.064,327,3.106,332,3.382,384,2.551,390,2.61,392,2.803,456,3.599,457,3.192,469,3.721,599,0.648]],["t/354",[6,0.023,7,0.245,8,0.252,9,0.291,10,0.267,11,0.26,12,0.29,13,0.391,14,0.282,16,1.475,21,0.262,23,0.251,25,2.175,26,0.584,29,2.376,57,0.437,59,0.957,65,0.978,111,0.253,155,4.958,176,1.938,181,5.98,182,2.676,183,5.482,184,4.961,188,5.98,189,2.744,190,2.579,191,5.482,193,5.98,199,2.932,200,2.71,201,3.875,202,5.482,203,3.15,599,0.604,765,2.973]],["t/356",[0,0.276,1,0.321,2,5.242,3,2.763,4,3.262,5,0.963,6,0.019,7,0.24,8,0.209,9,0.261,10,0.221,11,0.215,12,0.24,13,0.323,14,0.234,15,4.087,16,1.619,17,1.69,18,4.161,19,1.95,20,3.116,21,0.255,22,1.014,23,0.191,24,2.521,25,2.387,26,0.484,111,0.278,599,0.663]],["t/358",[0,0.291,1,0.339,5,1.057,6,0.023,7,0.237,8,0.254,9,0.292,10,0.269,11,0.261,12,0.291,13,0.393,14,0.284,16,1.201,17,1.67,19,1.927,20,1.957,21,0.258,22,1.113,23,0.242,25,1.771,26,0.587,29,1.935,39,1.502,43,1.935,46,2.024,57,0.429,59,1,60,1.834,63,1.612,65,0.858,67,1.297,69,2.264,72,3.183,73,2.878,75,2.878,107,2.707,111,0.206,119,1.81,161,4.795,164,3.733,175,2.235,176,1.572,177,3.972,179,3.449,182,2.878,196,3.198,199,2.388,203,2.565,204,5.081,205,2.915,206,4.275,299,2.644,324,2.324,327,2.355,332,2.565,382,3.932,383,3.092,384,3.044,388,2.1,389,3.243,390,2.928,391,3.243,392,3.144,393,3.548,394,2.604,408,2.822,409,2.822,410,2.822,411,2.822,456,2.729,457,2.421,469,2.822,599,0.492]],["t/360",[6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,13,0.331,14,0.239,17,1.462,19,1.687,21,0.257,23,0.228,26,0.494,29,2.665,59,0.875,107,2.176,111,0.284,161,5.855,164,5.142,175,3.078,176,1.639,177,5.472,179,5.563,599,0.677]],["t/362",[0,0.313,1,0.268,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,16,1.596,21,0.253,23,0.188,26,0.477,28,2.93,57,0.458,65,0.862,88,2.661,111,0.274,176,1.58,190,2.789,260,4.257,276,5.444,277,4.958,278,4.929,599,0.653]],["t/364",[0,0.315,1,0.329,5,0.883,6,0.021,7,0.227,8,0.234,9,0.279,10,0.248,11,0.241,12,0.269,13,0.363,14,0.262,16,1.485,17,1.604,21,0.256,22,0.93,23,0.214,26,0.543,28,2.728,57,0.474,59,0.785,60,1.716,63,1.993,65,0.803,70,2.952,88,2.58,111,0.255,176,1.471,190,2.596,200,2.728,260,3.821,276,5.214,277,4.615,278,4.955,491,5.092,492,4.488,499,4.488,599,0.608]],["t/366",[0,0.301,1,0.327,5,1.07,6,0.021,7,0.225,8,0.232,9,0.278,10,0.246,11,0.239,12,0.267,13,0.359,14,0.26,16,1.462,19,1.491,21,0.255,22,0.916,23,0.212,24,2.801,25,2.156,26,0.582,29,2.897,33,3.17,36,4.155,37,2.867,38,3.27,39,2.25,40,2.382,41,2.089,42,3.903,43,2.355,44,2.947,45,3.558,46,1.865,47,2.686,48,2.587,49,3.076,50,3.841,51,3.558,57,0.353,63,1.962,65,0.79,111,0.251,175,2.72,290,1.579,334,5.165,335,4.419,336,4.544,337,3.558,338,3.623,599,0.599]],["t/368",[0,0.274,1,0.318,5,0.949,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,19,2.063,21,0.253,22,0.999,23,0.188,26,0.477,32,2.571,35,3.512,46,2.035,47,2.93,59,0.844,77,2.378,78,3.685,88,2.494,91,3.006,111,0.274,190,2.789,192,3.863,200,2.93,500,4.698,501,4.028,512,4.19,599,0.653]],["t/370",[0,0.293,1,0.341,2,4.931,3,2.496,4,2.947,5,1.07,6,0.021,7,0.183,8,0.232,9,0.278,10,0.246,11,0.239,12,0.267,13,0.359,14,0.26,15,3.692,16,1.462,17,1.796,18,3.677,19,1.834,20,3.312,21,0.255,22,1.127,23,0.212,24,2.277,25,2.156,26,0.537,39,1.829,43,2.355,57,0.353,59,0.773,60,1.69,63,2.414,72,2.619,73,2.652,107,2.366,111,0.251,196,3.626,205,2.686,299,3.219,324,2.829,327,2.867,332,3.122,384,2.355,390,2.41,392,2.587,456,3.323,457,2.947,469,3.435,599,0.599]],["t/372",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,107,2.083,111,0.272,119,2.387,182,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.222,394,3.433,408,4.436,409,3.721,410,3.721,411,3.721,599,0.648]],["t/374",[0,0.3,1,0.348,5,1.111,6,0.022,7,0.213,8,0.241,9,0.284,10,0.255,11,0.248,12,0.277,13,0.373,14,0.27,17,1.795,19,1.905,20,2.172,21,0.254,22,1.17,23,0.22,26,0.558,39,1.667,43,2.148,46,2.166,57,0.451,59,0.988,60,2.159,63,1.79,65,0.721,68,4.554,69,2.513,70,2.651,71,3.655,72,3.72,73,3.389,107,2.457,111,0.229,119,2.009,182,2.419,196,3.422,205,2.449,299,2.935,324,2.58,327,2.615,332,2.847,384,2.735,389,2.725,390,2.798,391,2.725,392,3.005,393,3.797,394,2.89,408,3.132,409,3.132,410,3.132,411,3.132,456,3.03,457,2.687,469,3.132,599,0.546,765,2.687]],["t/376",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.674,89,4.636,90,4.636,91,3.043,92,4.077,111,0.277,599,0.661]],["t/378",[0,0.314,1,0.345,5,0.985,6,0.023,7,0.243,8,0.25,9,0.29,10,0.265,11,0.257,12,0.287,13,0.387,14,0.28,16,1.282,19,1.87,21,0.257,22,1.037,23,0.236,26,0.579,28,2.355,32,2.628,35,2.822,40,2.089,41,1.831,46,1.636,47,2.355,57,0.443,59,0.97,65,0.693,77,1.911,78,2.962,80,2.621,88,2.839,91,3.12,96,2.962,111,0.22,148,3.774,155,3.514,176,1.64,180,5.146,190,2.895,192,3.161,194,3.645,195,4.39,196,2.584,199,2.548,200,2.355,203,2.737,260,3.483,276,4.754,277,3.984,278,4.56,373,4.754,377,3.984,500,4.103,501,3.237,512,3.368,599,0.525]],["t/380",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.122,86,4.527,87,4.917,88,2.511,89,4.636,90,4.636,91,3.043,92,4.822,111,0.277,599,0.661]],["t/382",[0,0.294,1,0.342,5,1.074,6,0.021,7,0.226,8,0.233,9,0.278,10,0.247,11,0.24,12,0.268,13,0.361,14,0.261,16,1.472,17,1.596,19,1.501,21,0.255,22,1.132,23,0.213,24,2.813,25,2.171,26,0.54,29,2.371,33,3.191,36,4.172,37,2.886,38,3.291,39,2.259,40,2.398,41,2.102,42,3.318,43,2.371,44,2.967,45,3.581,46,1.878,47,2.704,48,3.606,49,3.8,50,3.143,51,3.581,57,0.356,59,0.778,60,1.701,63,1.975,111,0.253,211,3.866,448,5.064,449,4.448,599,0.603]],["t/384",[3,2.845,6,0.019,7,0.244,8,0.215,9,0.266,10,0.228,11,0.221,12,0.247,14,0.241,21,0.258,23,0.229,26,0.581,57,0.403,97,4.292,111,0.286,112,7.058,117,2.407,120,4.907,148,4.907,149,4.907,599,0.682]],["t/386",[3,2.817,6,0.019,7,0.242,8,0.213,9,0.264,10,0.226,11,0.219,12,0.245,14,0.238,21,0.257,23,0.228,26,0.493,57,0.399,95,7.305,96,3.813,97,4.249,98,6.446,99,6.446,100,4.859,101,4.427,102,5.285,103,2.886,104,6.446,105,5.875,111,0.283,599,0.676]],["t/388",[6,0.019,7,0.244,8,0.215,9,0.266,10,0.228,11,0.221,12,0.247,14,0.241,21,0.258,23,0.229,26,0.498,57,0.403,58,4.131,88,2.192,97,4.292,111,0.286,113,7.058,114,3.314,115,5.338,116,3.314,117,2.407,599,0.682]],["t/390",[6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,14,0.239,21,0.257,23,0.228,26,0.494,57,0.4,58,4.1,97,4.26,111,0.284,114,3.289,117,2.389,118,7.036,119,2.494,120,4.871,121,5.889,122,2.759,123,3.159,124,5.889,599,0.677]],["t/392",[6,0.019,7,0.242,8,0.212,9,0.264,10,0.225,11,0.219,12,0.244,14,0.238,21,0.257,23,0.227,25,2.428,26,0.492,57,0.398,59,1.022,97,4.239,106,5.417,111,0.283,114,3.273,122,2.745,152,6.78,153,5.86,154,4.847,155,4.513,156,1.761,599,0.674]],["t/394",[6,0.019,7,0.244,8,0.216,9,0.266,10,0.228,11,0.222,12,0.248,13,0.334,14,0.241,21,0.258,23,0.229,26,0.499,59,0.884,97,4.303,111,0.287,114,3.322,147,7.065,162,5.949,163,6.527,164,5.194,599,0.684]],["t/396",[6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,13,0.331,14,0.239,17,1.462,19,1.687,21,0.257,23,0.228,26,0.494,29,2.665,59,0.875,107,2.176,111,0.284,161,6.209,164,5.142,175,3.078,176,1.639,177,5.472,179,4.751,599,0.677]],["t/398",[1,0.275,6,0.019,7,0.241,8,0.211,9,0.263,10,0.224,11,0.218,12,0.243,13,0.327,14,0.236,21,0.256,23,0.227,26,0.49,32,2.612,40,2.669,41,2.34,59,1.019,88,2.155,111,0.281,148,4.823,155,4.491,176,1.623,180,6.359,194,3.607,195,5.611,196,3.302,599,0.671]],["t/400",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,21,0.258,23,0.228,26,0.496,29,2.672,57,0.401,59,0.877,65,0.897,111,0.285,155,4.547,176,1.643,181,6.801,182,3.009,183,6.165,184,4.036,599,0.679]],["t/402",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,21,0.258,23,0.228,26,0.496,57,0.401,59,0.877,65,0.897,111,0.285,155,4.547,176,1.643,184,4.036,188,6.801,189,3.086,190,2.9,191,6.165,599,0.679]],["t/404",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,16,1.659,21,0.258,23,0.228,25,2.446,26,0.496,111,0.285,176,1.643,184,4.036,193,6.801,199,3.297,200,3.047,201,4.357,202,6.165,203,3.542,599,0.679]],["t/406",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,16,1.659,17,1.714,21,0.258,23,0.228,26,0.496,53,3.77,57,0.401,111,0.285,176,1.643,210,6.801,211,4.357,212,6.165,213,6.165,599,0.679]],["t/408",[6,0.019,7,0.243,8,0.215,9,0.265,10,0.227,11,0.221,12,0.246,13,0.332,14,0.24,16,1.663,21,0.258,23,0.229,26,0.497,53,3.779,62,4.46,67,1.796,111,0.285,176,1.647,199,3.306,203,3.551,207,6.808,208,6.18,599,0.681]],["t/410",[6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,13,0.331,14,0.239,16,1.655,19,1.687,21,0.257,23,0.228,25,2.44,26,0.494,69,3.118,107,2.176,111,0.284,176,1.639,199,3.289,203,3.533,204,6.579,205,3.039,206,5.889,599,0.677]],["t/412",[0,0.239,6,0.019,7,0.243,8,0.213,9,0.265,10,0.226,11,0.22,12,0.245,13,0.331,14,0.239,21,0.257,23,0.228,25,2.44,26,0.494,37,3.245,39,2.423,57,0.4,65,0.894,80,3.382,111,0.284,176,1.639,238,6.579,239,5.667,599,0.677]],["t/414",[6,0.019,7,0.243,8,0.214,9,0.265,10,0.227,11,0.22,12,0.246,13,0.331,14,0.239,16,1.659,17,1.466,21,0.258,23,0.228,25,2.446,26,0.496,37,3.253,39,2.074,111,0.285,119,2.5,171,4.883,176,1.643,242,6.215,243,5.311,599,0.679]],["t/416",[0,0.234,6,0.019,7,0.24,8,0.209,9,0.222,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.225,37,3.182,39,2.548,57,0.463,111,0.278,117,2.342,156,1.735,159,2.527,174,2.318,176,1.607,199,4.051,203,4.351,255,6.738,256,5.556,257,6.03,599,0.664]],["t/418",[0,0.313,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,23,0.224,24,3.383,26,0.48,28,2.952,57,0.388,65,0.869,70,3.194,111,0.276,176,1.592,258,5.974,259,5.145,260,3.38,261,4.221,262,3.775,263,4.137,599,0.658]],["t/420",[0,0.314,1,0.271,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,16,1.615,17,1.895,21,0.255,23,0.19,26,0.482,28,2.966,60,1.866,109,1.584,111,0.277,176,1.6,216,4.241,227,4.636,264,5.986,265,4.001,266,5.018,599,0.661]],["t/422",[0,0.316,1,0.316,3,2.697,4,3.185,6,0.018,7,0.252,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,21,0.252,23,0.186,26,0.563,57,0.382,65,0.854,111,0.271,165,4.43,176,1.565,185,2.831,192,3.017,270,4.006,287,5.524,297,3.712,298,4.331,317,3.474,599,0.647]],["t/424",[0,0.32,1,0.314,3,2.665,6,0.018,7,0.234,8,0.201,9,0.256,10,0.213,11,0.207,12,0.231,13,0.312,14,0.225,16,1.562,18,3.192,21,0.251,23,0.184,26,0.559,32,2.539,40,2.544,41,2.674,44,3.773,57,0.377,65,0.844,77,2.328,88,2.637,111,0.268,176,1.547,205,2.868,290,1.686,295,4.02,296,5.622,318,4.484,319,4.719,320,4.719,599,0.639]],["t/426",[0,0.313,1,0.268,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,16,1.599,21,0.254,23,0.188,26,0.478,28,2.937,57,0.459,65,0.864,88,2.663,111,0.274,176,1.584,190,2.796,260,3.995,276,5.815,277,4.97,278,4.862,599,0.655]],["t/428",[0,0.321,1,0.318,3,2.729,6,0.019,7,0.238,8,0.206,9,0.259,10,0.218,11,0.212,12,0.237,13,0.32,14,0.231,16,1.599,18,3.269,21,0.254,23,0.188,26,0.567,40,2.605,41,2.712,107,2.103,111,0.274,176,1.584,265,3.962,288,5.552,289,4.707,290,1.727,294,4.707,295,4.117,599,0.655]],["t/430",[0,0.275,1,0.32,5,0.958,6,0.019,7,0.202,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,17,1.685,20,2.624,21,0.254,22,1.009,23,0.19,24,2.508,26,0.481,31,4.067,48,2.85,53,3.66,57,0.461,59,0.852,60,1.862,61,5.98,62,4.32,63,2.162,64,4.147,65,0.871,66,4.624,67,1.739,111,0.276,599,0.659]],["t/432",[0,0.278,1,0.323,5,0.972,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,17,1.444,21,0.256,22,1.024,23,0.192,24,2.545,26,0.488,52,6.017,53,3.714,54,4.127,55,5.233,56,4.127,57,0.395,58,4.05,59,0.864,60,1.889,111,0.281,599,0.669]],["t/434",[0,0.272,1,0.316,5,0.94,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.234,13,0.316,14,0.228,16,1.58,19,1.611,21,0.252,22,0.99,23,0.186,24,2.936,25,2.33,26,0.472,29,2.545,33,3.425,36,4.655,37,3.099,38,3.533,39,2.358,40,2.574,41,2.257,42,3.463,43,2.545,44,3.185,45,3.844,46,2.016,47,2.902,48,2.796,49,3.324,50,3.374,51,3.844,111,0.271,599,0.647]],["t/436",[0,0.276,1,0.321,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,16,1.623,17,1.433,21,0.255,22,1.016,23,0.191,25,2.393,26,0.485,27,5.586,28,2.98,29,2.613,30,4.447,31,4.836,32,2.597,33,3.517,34,4.776,35,3.572,111,0.278,599,0.664]],["t/438",[0,0.276,1,0.321,2,5.58,3,2.763,4,3.262,5,0.963,6,0.019,7,0.24,8,0.209,9,0.261,10,0.221,11,0.215,12,0.24,13,0.323,14,0.234,15,4.087,16,1.619,17,1.69,18,3.909,19,1.95,20,3.116,21,0.255,22,1.014,23,0.191,24,2.521,25,2.387,26,0.484,111,0.278,599,0.663]],["t/440",[0,0.313,1,0.319,6,0.019,7,0.238,8,0.207,9,0.26,10,0.219,11,0.213,12,0.237,13,0.32,14,0.231,21,0.254,23,0.189,26,0.568,57,0.459,65,0.866,111,0.275,114,3.186,119,2.416,176,1.588,270,3.186,290,1.731,317,2.611,322,5.821,323,4.981,324,3.679,326,4.981,327,3.143,328,3.584,599,0.656]],["t/442",[0,0.304,1,0.322,6,0.019,7,0.24,8,0.21,9,0.262,10,0.222,11,0.216,12,0.241,13,0.325,14,0.235,20,3.125,21,0.255,23,0.191,26,0.573,29,2.62,57,0.463,65,0.879,111,0.279,114,3.233,176,1.611,290,1.756,329,6.339,330,5.378,332,3.473,599,0.666]],["t/444",[0,0.294,1,0.273,4,3.278,6,0.019,7,0.24,8,0.21,9,0.262,10,0.222,11,0.216,12,0.241,13,0.325,14,0.235,21,0.255,23,0.191,26,0.573,39,2.551,43,2.62,57,0.393,111,0.279,114,3.233,176,1.611,209,3.324,290,1.756,333,6.339,337,3.957,345,5.378,346,4.67,599,0.666]],["t/446",[0,0.294,1,0.272,5,0.965,6,0.019,7,0.24,8,0.209,9,0.262,10,0.222,11,0.215,12,0.24,13,0.324,14,0.234,21,0.255,23,0.191,26,0.572,29,2.613,42,3.743,50,3.464,57,0.392,65,0.877,111,0.278,175,3.018,290,1.752,334,5.851,335,4.903,336,5.042,337,3.947,338,4.02,599,0.664]],["t/448",[0,0.293,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,19,2.071,21,0.254,22,1.009,23,0.19,26,0.57,41,2.301,46,2.055,57,0.389,59,0.852,96,3.721,111,0.276,175,2.997,290,1.739,339,5.449,348,4.516,362,4.624,363,4.624,364,4.624,599,0.659]],["t/450",[0,0.295,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,16,1.631,17,1.804,21,0.256,22,1.021,23,0.192,26,0.574,60,1.884,111,0.28,194,3.589,290,1.761,365,5.863,366,3.286,367,5.067,599,0.667]],["t/452",[0,0.295,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,16,1.631,17,1.804,21,0.256,22,1.021,23,0.192,26,0.574,60,1.884,111,0.28,194,3.589,290,1.761,344,5.863,374,3.967,375,4.927,599,0.667]],["t/454",[0,0.319,1,0.336,5,0.925,6,0.018,7,0.234,8,0.201,9,0.255,10,0.212,11,0.206,12,0.23,13,0.311,14,0.224,21,0.251,22,0.974,23,0.22,26,0.464,39,2.335,59,0.822,65,0.84,111,0.267,175,2.892,190,2.717,219,3.007,284,3.09,325,3.186,331,2.892,340,5.485,341,4.575,342,5.344,343,4.988,599,0.636]],["t/456",[0,0.295,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,21,0.256,22,1.021,23,0.192,26,0.487,57,0.394,88,2.685,91,3.073,96,3.766,111,0.28,194,3.589,199,3.241,203,3.481,373,5.863,377,5.067,599,0.667]],["t/458",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,19,1.638,21,0.254,22,1.007,23,0.189,26,0.48,46,2.05,57,0.388,59,0.85,65,0.869,67,1.735,75,2.915,107,2.113,111,0.276,182,2.915,382,5.029,383,4.137,384,3.067,388,2.809,389,3.284,390,2.648,391,3.284,392,2.843,599,0.658]],["t/460",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,107,2.083,111,0.272,119,2.387,182,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.511,394,3.433,408,3.721,409,3.721,410,3.721,411,3.721,599,0.648]],["t/462",[0,0.275,1,0.319,5,0.956,6,0.019,7,0.238,8,0.207,9,0.26,10,0.22,11,0.213,12,0.238,13,0.321,14,0.232,21,0.254,22,1.007,23,0.189,26,0.48,57,0.388,59,0.85,65,0.869,67,1.735,111,0.276,189,2.989,366,3.239,388,2.809,412,5.225,413,4.057,414,4.808,415,4.719,416,4.903,427,4.404,428,4.404,429,4.404,599,0.658]],["t/464",[0,0.278,1,0.323,5,0.975,6,0.019,7,0.241,8,0.211,9,0.263,10,0.224,11,0.218,12,0.243,13,0.327,14,0.236,21,0.256,22,1.026,23,0.193,26,0.49,59,0.867,111,0.281,189,3.048,317,2.669,324,3.17,327,3.213,328,4.308,442,5.875,443,4.951,444,5.092,599,0.671]],["t/466",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.198,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.668,20,2.58,21,0.253,22,0.992,23,0.186,26,0.473,39,1.981,43,2.551,57,0.383,59,0.838,60,1.831,63,2.126,72,2.838,73,2.873,107,2.483,111,0.272,196,4.066,205,2.909,299,3.487,324,3.064,327,3.106,332,3.382,384,2.551,390,2.61,392,2.803,456,3.599,457,3.192,469,3.721,599,0.648]],["t/468",[0,0.277,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,21,0.256,22,1.021,23,0.192,26,0.487,39,2.039,43,2.626,59,0.862,67,2.074,111,0.28,189,3.033,201,4.283,284,3.241,331,3.033,388,2.85,430,5.725,431,4.927,599,0.667]],["t/470",[0,0.278,1,0.323,5,0.972,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,17,1.699,21,0.256,22,1.024,23,0.192,26,0.488,54,4.127,59,0.864,60,1.889,67,2.077,111,0.281,189,3.041,388,2.857,447,5.731,470,4.811,599,0.669]],["t/472",[0,0.278,1,0.323,5,0.977,6,0.019,7,0.242,8,0.212,9,0.264,10,0.224,11,0.218,12,0.243,13,0.328,14,0.237,19,1.967,21,0.257,22,1.029,23,0.193,26,0.491,46,2.095,59,0.869,69,3.095,77,2.448,82,5.881,83,3.221,84,5.104,111,0.282,599,0.672]],["t/474",[0,0.276,1,0.32,5,0.96,6,0.019,7,0.239,8,0.208,9,0.261,10,0.221,11,0.214,12,0.239,13,0.323,14,0.233,21,0.255,22,1.012,23,0.19,26,0.482,59,0.854,65,0.873,69,3.043,77,2.847,83,3.166,85,5.455,86,4.527,87,4.917,88,2.511,89,4.636,90,4.636,91,3.043,92,4.077,111,0.277,599,0.661]],["t/476",[0,0.275,1,0.32,5,0.958,6,0.019,7,0.239,8,0.208,9,0.261,10,0.22,11,0.214,12,0.239,13,0.322,14,0.232,17,1.685,21,0.254,22,1.009,23,0.19,26,0.481,57,0.389,59,0.852,60,1.862,67,2.059,111,0.276,200,2.959,317,2.624,384,3.072,388,2.816,390,2.654,403,3.721,455,5.23,480,3.991,481,4.415,599,0.659]],["t/478",[0,0.278,1,0.323,5,0.972,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,17,1.699,21,0.256,22,1.024,23,0.192,26,0.488,48,3.404,49,3.439,57,0.395,59,0.864,60,1.889,111,0.281,211,4.293,448,5.731,449,4.939,599,0.669]],["t/480",[0,0.278,1,0.323,5,0.972,6,0.019,7,0.241,8,0.211,9,0.263,10,0.223,11,0.217,12,0.242,13,0.327,14,0.236,19,1.961,21,0.256,22,1.024,23,0.192,26,0.488,46,2.085,47,3.002,59,0.864,69,3.08,74,5.731,75,2.965,76,4.811,77,2.436,78,3.776,111,0.281,599,0.669]],["t/482",[0,0.276,1,0.321,5,0.963,6,0.019,7,0.24,8,0.209,9,0.261,10,0.221,11,0.215,12,0.24,13,0.323,14,0.234,17,1.69,19,1.95,21,0.255,22,1.014,23,0.191,26,0.484,46,2.065,57,0.391,59,0.856,60,1.871,68,5.46,69,3.05,70,3.217,71,4.436,72,3.426,73,2.936,111,0.278,599,0.663]],["t/484",[0,0.274,1,0.318,5,0.949,6,0.019,7,0.237,8,0.206,9,0.259,10,0.218,11,0.212,12,0.236,13,0.319,14,0.23,19,2.063,21,0.253,22,0.999,23,0.188,26,0.477,32,2.571,35,3.512,46,2.035,47,2.93,59,0.844,77,2.378,78,3.685,88,2.494,91,3.006,111,0.274,190,2.789,192,3.62,200,2.93,500,5.014,501,4.028,512,4.19,599,0.653]],["t/486",[0,0.184,1,0.214,6,0.017,7,0.11,9,0.12,32,2.81,57,0.212,67,1.894,101,2.355,103,3.066,106,6.394,108,0.93,109,1.62,120,3.758,122,2.128,123,2.872,126,1.699,129,4.674,130,3.363,146,2.999,151,4.985,156,1.766,158,7.557,220,2.47,221,1.554,229,2.686,246,2.812,248,1.593,254,3.26,273,3.858,286,3.125,290,1.783,301,2.261,331,2.375,346,2.521,349,2.028,352,2.585,356,4.371,372,3.074,378,2.307,379,2.729,398,4.543,400,2.176,414,2.217,416,2.261,419,2.307,432,3.429,487,2.462,504,3.474,545,3.429,546,6.014,578,1.655,579,2.307,585,2.654,586,3.429,696,3.125,767,2.904,768,3.637,769,4.337,770,4.123,771,4.337,772,3.223,773,3.125,774,3.915,775,3.429,776,3.031,777,1.795,778,2.407,779,2.355,780,2.099,781,2.217,782,4.337,783,4.337,784,2.028,785,3.263,786,3.429,787,2.099,788,4.337,789,4.337,790,7.429,791,3.499,792,2.812,793,2.904,794,3.125,795,3.637,796,4.337,797,2.307,798,4.337,799,4.79,800,6.306,801,8.409,802,3.263,803,8.3,804,5.848,805,4.337,806,3.429,807,7.429,808,4.221,809,6.306,810,4.371,811,8.156,812,4.543,813,4.337,814,2.521,815,4.337,816,3.637,817,4.337,818,3.429,819,3.44,820,1.745,821,4.99,822,3.125,823,2.904,824,3.286,825,4.337,826,4.337,827,4.337,828,4.337,829,4.337,830,4.337,831,4.337,832,3.637,833,3.429,834,3.915,835,3.263,836,3.637,837,3.007,838,4.337,839,4.337,840,4.337,841,2.307,842,4.337,843,2.585,844,3.007,845,3.915,846,3.125,847,3.263,848,3.637,849,4.337,850,4.337,851,4.337,852,3.915,853,7.362,854,4.337,855,4.337,856,7.429,857,6.306,858,6.306,859,4.985,860,4.744,861,4.337,862,6.306,863,6.306,864,5.692,865,3.915,866,4.337,867,1.903,868,4.337,869,4.337,870,1.847,871,2.136,872,2.261,873,4.337,874,2.136,875,4.337,876,2.261,877,4.337,878,4.337,879,4.337,880,3.637,881,4.337,882,4.337,883,3.915,884,4.337,885,3.915,886,3.915,887,3.637,888,1.655,889,1.655]],["t/488",[0,0.278,1,0.323,5,0.977,6,0.019,7,0.242,8,0.212,9,0.264,10,0.224,11,0.218,12,0.243,13,0.328,14,0.237,17,1.704,21,0.257,22,1.029,23,0.193,26,0.491,57,0.397,59,0.869,60,1.898,69,3.095,79,6.029,80,3.357,81,5.259,111,0.282,599,0.672]],["t/490",[0,0.277,1,0.322,5,0.97,6,0.019,7,0.241,8,0.21,9,0.262,10,0.223,11,0.217,12,0.242,13,0.326,14,0.235,17,1.697,21,0.256,22,1.021,23,0.192,26,0.487,57,0.394,59,0.862,60,1.884,70,3.241,111,0.28,200,2.995,278,4.365,491,5.725,492,4.927,499,4.927,599,0.667]],["t/492",[0,0.201,1,0.167,6,0.027,25,2.814,32,2.37,57,0.337,65,1.159,67,1.074,80,3.295,83,1.951,87,5.618,103,1.739,108,1.054,109,1.369,116,1.978,122,2.327,123,1.899,126,3.119,128,1.467,156,1.724,220,3.381,221,1.76,229,4.379,248,1.805,290,1.507,337,2.42,352,2.928,355,3.185,356,3.407,400,3.994,414,2.512,418,2.561,422,4.337,482,3.289,504,2.093,527,3.092,545,7.652,550,3.289,565,3.185,572,4.217,581,2.124,776,2.005,777,2.033,797,3.666,799,4.56,819,3.161,820,3.204,859,3.885,870,3.676,887,4.12,888,1.875,889,1.875,890,3.185,891,4.914,892,4.914,893,4.12,894,10.039,895,4.914,896,7.963,897,6.893,898,9.424,899,4.07,900,4.234,901,3.724,902,4.419,903,10.282,904,6.495,905,7.282,906,8.632,907,4.177,908,4.436,909,3.743,910,4.108,911,6.677,912,8.632,913,8.632,914,4.436,915,4.914,916,4.914,917,4.914,918,4.914,919,4.914,920,4.914,921,4.914,922,4.914,923,4.914,924,4.914,925,4.914,926,4.914,927,4.914]],["t/494",[0,0.079,1,0.052,6,0.022,32,1.37,57,0.177,63,1.498,67,1.205,83,2.65,92,1.378,100,3.779,102,0.989,103,3.262,106,0.866,108,0.327,109,0.536,116,1.759,122,2.011,123,2.795,126,1.056,130,3.473,132,4.357,133,1.022,134,4.2,135,1.805,136,4.965,137,1.805,138,5.041,139,1.805,143,2.818,146,1.722,149,2.158,154,0.91,156,1.29,185,1.585,220,2.73,221,3.702,248,2.024,273,1.649,290,1.091,310,3.204,317,0.503,331,1.015,343,0.726,349,2.044,352,5.402,372,2.066,397,0.887,399,1.943,400,5.119,401,4.914,413,4.184,415,4.623,416,5.649,419,1.434,421,3.665,422,5.959,423,1.869,424,3.645,483,2.459,484,1.132,487,0.866,504,4.366,548,5.269,578,1.668,581,3.918,600,2.434,765,2.431,770,2.426,772,1.378,776,1.784,777,1.116,778,0.847,779,1.966,780,1.305,781,1.378,784,1.694,787,1.752,791,2.426,792,1.748,794,7.352,795,7.601,797,4.82,819,2.365,820,2.398,822,1.943,823,6.068,824,4.724,834,8.182,841,0.812,847,2.029,853,3.269,859,7.167,867,2.419,870,3.178,871,2.715,872,2.873,874,2.715,876,4.724,886,8.182,888,0.582,889,0.582,900,4.82,901,2.044,907,1.752,908,8.182,909,4.965,914,8.182,928,1.28,929,1.1,930,1.526,931,1.805,932,2.434,933,2.261,934,3.665,935,1.696,936,2.696,937,0.847,938,1.526,939,3.621,940,10.37,941,3.621,942,1.207,943,2.696,944,2.696,945,1.022,946,0.887,947,2.029,948,2.261,949,5.724,950,1.526,951,8.03,952,8.182,953,9.065,954,9.065,955,9.065,956,6.068,957,7.167,958,6.82,959,8.182,960,6.284,961,7.167,962,9.065,963,9.065,964,7.601,965,6.531,966,4.996,967,5.378,968,1.378,969,1.378,970,1.378,971,1.526,972,1.378,973,1.526,974,1.207,975,1.378,976,1.058,977,2.696,978,1.378,979,2.696,980,1.378,981,2.696,982,1.378,983,2.696,984,1.378,985,1.378,986,1.526,987,1.378,988,1.378,989,1.526,990,1.378,991,1.526,992,1.526,993,1.526,994,5.513,995,1.526,996,1.526,997,1.526,998,1.526,999,1.526,1000,1.526,1001,1.526,1002,1.526,1003,1.526,1004,1.526,1005,1.526,1006,1.526,1007,1.526,1008,1.526,1009,1.526,1010,1.207,1011,1.207,1012,1.058,1013,1.526,1014,1.526,1015,1.526,1016,1.526,1017,0.989,1018,1.526,1019,3.665,1020,3.946,1021,3.456,1022,4.371,1023,4.371,1024,4.371,1025,4.371,1026,4.371,1027,1.526,1028,1.526,1029,1.526]],["t/496",[0,0.169,1,0.131,6,0.018,26,0.234,57,0.284,67,2.377,87,2.018,103,2.926,106,2.198,108,0.831,109,1.152,116,1.559,120,2.308,121,2.79,122,2.791,123,1.497,132,1.782,138,5.742,145,4.82,156,1.879,174,2.011,185,1.405,220,3.239,221,1.387,229,4.166,246,5.626,248,1.422,254,3.808,269,2.198,271,2.909,279,1.943,280,3.759,290,1.268,300,4.507,309,4.585,349,1.811,353,2.437,355,2.51,413,4.436,414,5.646,417,5.505,418,4.309,484,1.626,504,2.47,578,3.154,581,1.674,765,3.374,767,3.882,772,1.98,776,1.58,777,1.603,778,2.149,779,2.103,780,1.874,781,1.98,792,2.51,797,2.059,799,4.662,819,3.445,820,3.492,821,2.369,824,2.018,837,2.685,841,4.397,867,4.438,888,1.478,889,1.478,931,2.592,932,3.496,933,3.247,935,2.437,937,2.149,946,2.251,1030,2.79,1031,4.179,1032,3.873,1033,3.873,1034,5.8,1035,3.873,1036,3.873,1037,3.873,1038,3.873,1039,5.8,1040,4.021,1041,3.882,1042,4.021,1043,3.247,1044,2.914,1045,2.79,1046,3.247,1047,3.496,1048,3.247,1049,3.496,1050,2.685,1051,3.873,1052,3.873,1053,3.873,1054,3.873,1055,3.873,1056,3.873,1057,3.873,1058,3.873,1059,3.873,1060,3.873,1061,3.873,1062,3.873,1063,5.8,1064,9.253,1065,3.873,1066,5.8,1067,3.873,1068,5.8,1069,3.873,1070,9.908,1071,3.873,1072,5.8,1073,3.873,1074,5.8,1075,3.873,1076,5.8,1077,3.873,1078,5.8,1079,3.873,1080,4.863,1081,5.231,1082,5.235,1083,5.235,1084,4.863,1085,3.062,1086,3.247,1087,2.914,1088,3.062,1089,3.496,1090,3.062,1091,3.496,1092,3.496,1093,3.247,1094,3.247,1095,3.873,1096,3.873,1097,3.873,1098,3.873,1099,3.873,1100,3.873,1101,3.873,1102,3.873,1103,3.496,1104,3.247,1105,5.271,1106,5.235,1107,3.873,1108,4.585,1109,5.8,1110,3.873,1111,3.873,1112,3.873,1113,3.873,1114,3.873,1115,9.635,1116,9.635,1117,9.635,1118,3.873,1119,9.635,1120,9.635,1121,9.461,1122,3.873,1123,5.8,1124,3.873,1125,3.873,1126,3.873,1127,3.873,1128,3.873,1129,3.873,1130,3.062,1131,3.873]],["t/498",[0,0.316,1,0.216,24,3.557,57,0.401,66,3.695,108,1.363,109,1.629,117,2.802,156,2.149,169,5.331,185,2.306,197,4.783,209,3.393,234,3.967,248,3.333,260,4.227,261,5.278,262,4.72,263,5.172,272,5.331,290,1.793,349,2.973,415,3.189,581,2.748,795,5.331,814,3.695,819,4.202,820,4.259,822,4.581,888,2.425,889,2.425,1040,4.407,1132,4.783,1133,3.528,1134,5.026,1135,6.357,1136,6.357,1137,6.357,1138,5.331,1139,6.357,1140,5.738,1141,4.256,1142,5.026,1143,4.783,1144,5.026,1145,5.738,1146,6.357,1147,5.331,1148,5.738,1149,6.357,1150,5.331,1151,5.738,1152,6.647]],["t/500",[0,0.178,1,0.14,6,0.021,57,0.298,66,2.401,67,0.903,103,1.462,108,0.886,109,1.209,121,6.121,122,2.053,123,1.597,132,4.502,138,5.062,156,1.564,171,6.59,220,1.618,221,2.855,229,4.546,246,5.165,248,2.234,251,2.864,254,4.295,269,4.822,290,2.195,349,1.932,355,5.506,418,4.427,484,1.734,504,3.913,578,1.576,581,3.672,767,5.948,772,4.342,773,7.052,776,1.685,777,1.709,778,2.292,779,2.243,780,1.999,781,2.111,810,5.007,812,5.204,814,3.536,819,4.027,820,2.907,821,5.197,888,1.576,889,1.576,909,3.304,946,4.937,1040,6.16,1080,7.123,1081,7.757,1082,8.834,1083,7.667,1084,8.207,1085,6.716,1086,7.123,1087,6.391,1088,6.716,1089,7.667,1090,6.716,1091,7.667,1092,7.667,1141,4.073,1153,4.13,1154,3.108,1155,4.13,1156,6.084,1157,4.13,1158,4.13,1159,4.13,1160,4.13,1161,9.787,1162,9.787,1163,9.787,1164,9.787,1165,7.223,1166,7.223,1167,7.223,1168,7.223,1169,3.828,1170,8.494,1171,8.494,1172,8.494,1173,8.494,1174,8.494,1175,8.494,1176,8.494]],["t/502",[0,0.151,1,0.175,6,0.025,17,1.07,21,0.131,26,0.244,41,0.708,48,3.393,57,0.293,59,0.641,63,2.049,64,1.275,67,2.468,80,1.013,87,1.275,101,1.329,102,1.586,103,2.668,108,0.525,109,0.802,116,1.625,117,0.715,120,1.458,122,2.235,123,1.561,126,2.792,128,0.731,130,3.906,132,2.752,136,1.329,142,2.052,144,3.386,145,1.696,146,1.164,156,1.944,167,1.389,169,2.052,171,1.458,174,1.915,185,0.887,198,1.389,209,1.671,214,1.497,220,2.953,221,0.877,222,4.269,223,1.841,226,2.406,229,3.823,235,2.617,247,2.47,248,1.893,254,2.626,268,5.445,269,1.389,271,3.953,280,1.586,284,0.985,285,1.763,290,0.883,295,4.386,297,4.455,301,3.118,310,3.848,337,1.205,343,1.164,346,1.422,349,1.144,350,2.292,351,3.945,352,1.458,372,2.133,401,1.184,413,1.251,417,3.154,418,2.105,419,1.301,424,1.497,439,4.502,457,0.998,484,3.165,487,4.474,504,1.72,527,1.539,539,1.935,547,1.763,578,2.526,581,1.745,586,1.935,591,2.54,674,3.038,696,7.277,765,0.998,770,3.674,772,1.251,773,2.91,776,1.648,777,1.013,778,1.358,779,2.193,780,1.954,781,1.251,784,3.333,785,3.879,787,3.204,797,3.182,799,4.072,802,3.879,804,1.497,806,3.193,808,2.703,810,2.799,812,2.91,814,3.478,816,3.386,818,4.076,819,3.621,820,3.612,821,1.497,823,1.638,824,2.687,836,2.052,841,1.301,843,1.458,846,3.715,864,2.209,865,2.209,867,4.592,870,2.548,871,1.205,872,1.275,874,1.989,876,1.275,888,0.934,889,0.934,890,1.586,899,2.635,901,3.096,907,2.495,935,1.539,937,2.861,957,1.935,958,3.038,974,1.935,976,1.696,1012,1.696,1019,5.017,1030,2.91,1045,1.763,1050,3.574,1087,1.841,1088,1.935,1093,2.052,1105,2.105,1133,2.861,1141,4.005,1144,1.935,1150,2.052,1152,2.799,1177,2.209,1178,5.136,1179,2.799,1180,1.935,1181,2.052,1182,6.223,1183,5.983,1184,2.052,1185,2.447,1186,4.59,1187,1.841,1188,1.329,1189,2.91,1190,1.935,1191,2.052,1192,2.052,1193,1.696,1194,4.038,1195,1.935,1196,2.052,1197,2.209,1198,2.209,1199,3.645,1200,2.209,1201,2.209,1202,2.209,1203,4.038,1204,4.038,1205,2.447,1206,2.447,1207,2.447,1208,2.209,1209,2.447,1210,3.79,1211,2.406,1212,3.451,1213,2.406,1214,2.91,1215,1.935,1216,3.038,1217,2.447,1218,5.976,1219,2.91,1220,7.539,1221,2.447,1222,2.209,1223,2.447,1224,2.447,1225,2.209,1226,2.052,1227,6.805,1228,3.451,1229,1.935,1230,2.209,1231,4.941,1232,2.447,1233,2.447,1234,2.209,1235,1.935,1236,1.763,1237,2.447,1238,5.983,1239,2.447,1240,4.653,1241,2.447,1242,2.447,1243,2.447,1244,2.447,1245,1.586,1246,2.447,1247,2.447,1248,5.155,1249,2.47,1250,2.447,1251,1.935,1252,5.552,1253,1.841,1254,2.447,1255,2.447,1256,3.386,1257,5.017,1258,3.243,1259,4.653,1260,1.586,1261,2.447,1262,1.763,1263,1.935,1264,1.358,1265,5.155,1266,2.447,1267,2.052,1268,3.945,1269,3.645,1270,2.447,1271,2.209,1272,2.447,1273,5.155,1274,2.447,1275,2.447,1276,4.038,1277,1.935,1278,2.447,1279,2.447,1280,2.447,1281,4.038,1282,2.447,1283,1.763,1284,2.447,1285,2.447,1286,2.447,1287,2.447,1288,1.841,1289,2.447,1290,1.638,1291,2.447,1292,2.193,1293,2.54,1294,2.47,1295,5.983,1296,4.038,1297,2.447,1298,2.447,1299,2.447,1300,2.447,1301,2.209,1302,2.209,1303,2.209,1304,2.209,1305,2.209,1306,2.447,1307,2.447,1308,2.447,1309,2.447,1310,2.447,1311,2.447,1312,2.447,1313,2.447,1314,2.447,1315,2.447,1316,2.447]],["t/504",[0,0.058,6,0.022,8,0.167,15,1.012,17,0.604,24,0.624,26,0.12,57,0.097,59,0.685,63,1.201,64,4.685,66,6.434,67,1.642,80,3.766,100,2.013,101,1.835,103,1.85,108,0.424,109,0.671,116,3.022,117,0.578,122,3.167,123,2.903,128,1.009,132,1.554,134,1.245,143,4.797,146,4.152,156,1.782,167,1.918,171,1.179,174,1.512,185,2.724,198,3.332,199,1.779,209,3.551,214,2.067,215,1.426,220,2.675,221,2.691,222,2.103,223,2.542,226,3.81,228,3.198,229,4.348,240,1.283,246,2.19,247,2.067,248,3.022,254,2.997,262,0.941,268,1.964,269,1.918,271,3.207,280,2.866,285,1.426,290,1.965,337,0.975,346,1.15,349,3.639,352,2.635,400,0.993,401,0.958,418,1.031,421,3.707,424,1.211,439,3.933,459,1.372,484,0.831,504,4.17,548,2.57,549,4.133,550,4.817,551,6.083,552,5.138,560,2.671,572,1.211,578,2.439,579,2.78,581,0.855,585,3.198,765,2.609,767,1.325,768,1.659,775,2.671,776,3.064,777,3.108,778,4.168,779,4.078,780,3.766,781,3.839,784,0.925,785,1.489,786,1.565,797,1.797,799,3.094,819,3.267,820,3.312,821,5.035,822,2.434,824,2.304,836,2.833,837,2.342,841,4.99,843,2.635,846,1.426,867,3.296,888,0.755,889,0.755,907,0.958,909,1.075,928,7.195,935,1.245,937,4.67,966,2.833,967,3.05,1012,1.372,1030,3.185,1041,1.325,1044,1.489,1133,1.875,1143,1.489,1150,2.833,1152,1.372,1178,2.434,1181,1.659,1187,1.489,1188,1.075,1189,1.426,1190,1.565,1191,1.659,1192,1.659,1193,1.372,1195,1.565,1196,1.659,1262,1.426,1277,3.495,1293,1.245,1317,1.979,1318,3.05,1319,1.979,1320,4.421,1321,3.379,1322,1.979,1323,3.379,1324,3.379,1325,2.671,1326,1.565,1327,9.605,1328,7.196,1329,6.393,1330,5.227,1331,6.393,1332,5.87,1333,3.379,1334,1.979,1335,5.87,1336,3.379,1337,1.979,1338,1.979,1339,8.415,1340,1.786,1341,9.608,1342,8.02,1343,9.203,1344,8.415,1345,7.596,1346,5.744,1347,8.415,1348,8.415,1349,9.384,1350,7.51,1351,7.51,1352,1.979,1353,1.979,1354,1.372,1355,4.421,1356,4.421,1357,3.379,1358,5.227,1359,3.379,1360,7.51,1361,4.421,1362,7.51,1363,7.51,1364,4.718,1365,7.196,1366,6.393,1367,3.379,1368,6.393,1369,5.227,1370,3.379,1371,3.379,1372,1.979,1373,1.786,1374,1.979,1375,1.659,1376,1.979,1377,6.393,1378,6.393,1379,6.393,1380,8.229,1381,1.659,1382,1.979,1383,1.565,1384,1.979,1385,1.979,1386,1.979,1387,1.979,1388,1.245,1389,2.126,1390,1.979,1391,1.979,1392,1.979,1393,1.565,1394,1.565,1395,1.979,1396,7.196,1397,1.979,1398,1.979,1399,1.979,1400,1.979,1401,1.979,1402,1.979,1403,1.979,1404,1.979,1405,1.979,1406,1.979,1407,1.979,1408,1.979,1409,1.979,1410,1.979,1411,1.979,1412,3.379,1413,4.421,1414,2.781,1415,1.659,1416,1.979,1417,1.979,1418,1.659,1419,6.393,1420,5.227,1421,3.05,1422,3.379,1423,4.432,1424,6.393,1425,4.421,1426,3.379,1427,4.421]],["t/506",[0,0.123,1,0.088,6,0.027,10,0.071,11,0.069,19,0.532,31,1.318,40,3.581,41,3.133,44,3.87,57,0.429,59,0.451,65,0.844,67,2.245,75,1.964,77,0.778,88,0.687,92,2.155,101,2.29,103,2.186,108,0.553,109,1.227,116,1.697,122,2.085,123,2.632,126,3.262,128,1.597,132,3.363,143,4.484,146,2.005,156,1.67,158,3.334,185,1.529,220,2.863,221,0.924,228,2.58,229,3.428,236,1.727,237,5.124,248,1.964,254,2.988,271,4.49,290,1.169,304,3.036,318,5.294,349,1.972,350,1.464,351,3.681,352,1.537,353,1.623,354,1.941,355,1.672,356,1.788,357,1.788,358,1.859,359,1.537,361,3.58,372,1.745,374,2.634,400,2.115,401,2.04,415,1.294,419,1.372,420,2.328,433,1.318,471,1.578,483,3.042,484,3.378,504,1.796,541,4.599,546,1.623,548,3.109,563,2.039,578,2.357,581,1.823,585,5.573,704,2.163,765,2.182,772,2.734,773,1.859,776,1.72,784,2.501,799,4.535,801,4.484,819,3.062,820,2.942,821,2.58,824,2.198,832,2.163,844,2.923,867,3.532,870,4.082,871,3.964,872,4.194,874,3.964,888,0.984,889,0.984,899,1.318,900,1.372,901,1.206,902,1.431,907,2.989,910,2.513,929,5.267,1017,1.672,1020,3.806,1030,3.038,1081,1.941,1090,2.039,1141,4.135,1180,3.334,1188,1.401,1208,3.806,1212,2.823,1245,3.467,1249,1.578,1258,4.599,1260,4.738,1290,1.727,1388,3.365,1389,4.599,1415,2.163,1418,2.163,1428,6.963,1429,2.579,1430,1.859,1431,2.328,1432,1.344,1433,4.217,1434,7.31,1435,9.758,1436,5.348,1437,4.217,1438,2.328,1439,3.536,1440,2.579,1441,2.328,1442,3.806,1443,2.163,1444,4.484,1445,5.575,1446,4.484,1447,4.217,1448,4.217,1449,2.579,1450,2.163,1451,4.217,1452,2.328,1453,5.348,1454,4.217,1455,8.047,1456,2.579,1457,6.266,1458,6.081,1459,2.579,1460,4.918,1461,6.177,1462,2.579,1463,2.579,1464,6.177,1465,9.248,1466,2.163,1467,3.536,1468,2.579,1469,2.579,1470,2.163,1471,2.163,1472,2.579,1473,2.579,1474,2.579,1475,2.579,1476,4.217,1477,2.579,1478,2.163,1479,2.328,1480,2.163,1481,2.328,1482,2.163,1483,2.328,1484,3.334,1485,2.163,1486,2.039,1487,2.039,1488,1.672,1489,2.579,1490,1.941,1491,2.579,1492,2.328,1493,2.579,1494,2.579,1495,2.328,1496,2.328,1497,2.328,1498,2.328,1499,2.328,1500,2.328,1501,3.536,1502,2.579,1503,2.579,1504,2.579,1505,2.579,1506,4.827,1507,2.328,1508,2.039,1509,2.163,1510,1.623,1511,6.177,1512,6.177,1513,6.177,1514,4.217,1515,4.217,1516,2.579,1517,2.579]],["t/508",[0,0.205,1,0.2,6,0.025,24,1.243,40,1.3,41,1.14,57,0.455,65,0.643,66,5.078,67,2.147,102,2.556,103,2.08,108,0.845,109,1.168,116,2.828,117,1.152,122,2.372,123,2.716,126,2.752,130,4.304,132,3.583,133,3.934,134,3.698,135,3.934,136,4.229,137,3.934,138,4.965,139,3.934,146,1.875,154,2.349,156,1.273,184,3.461,185,2.549,209,1.631,220,2.752,221,3.242,236,6.227,248,1.448,282,4.422,290,1.703,301,2.055,308,2.966,310,3.416,316,3.559,331,2.214,349,1.844,372,3.447,378,3.126,400,2.948,413,5.021,415,5.43,419,4.646,422,2.48,433,2.015,483,2.895,484,1.655,487,2.238,504,3.962,578,2.242,668,6.343,765,2.398,770,3.9,772,3.981,776,2.867,777,1.631,778,2.188,779,2.141,780,1.908,781,2.015,784,2.749,787,2.844,791,4.322,792,3.81,793,2.639,794,4.235,799,2.844,814,2.291,819,2.79,820,2.365,824,4.717,859,3.117,867,4.172,870,4.321,871,4.683,872,4.955,874,4.683,880,3.306,888,1.504,889,1.504,890,2.556,901,3.896,907,1.908,935,3.698,946,3.416,947,4.422,1010,3.117,1011,3.117,1012,2.733,1105,5.044,1210,2.097,1236,5.063,1268,4.965,1327,7.886,1354,2.733,1414,2.48,1460,2.097,1518,2.639,1519,3.942,1520,4.422,1521,4.647,1522,5.305,1523,2.48,1524,3.942,1525,5.877,1526,5.877,1527,3.942,1528,3.942,1529,7.027,1530,9.507,1531,7.027,1532,7.027,1533,7.027,1534,5.877,1535,5.877,1536,5.877,1537,7.027,1538,7.027,1539,7.027,1540,7.027,1541,7.027,1542,7.027,1543,3.942,1544,3.942,1545,3.942,1546,3.942,1547,4.075,1548,3.942,1549,3.942,1550,3.942,1551,3.942,1552,2.841,1553,3.942,1554,5.063,1555,3.942,1556,7.789,1557,5.612,1558,3.942,1559,3.942,1560,3.942,1561,3.942]],["t/510",[0,0.091,1,0.105,6,0.026,7,0.045,9,0.05,10,0.05,11,0.083,17,0.321,19,2.273,23,0.043,41,1.187,57,0.414,65,0.535,67,2.176,71,0.995,75,2.223,76,1.068,77,0.541,83,0.712,101,0.973,102,1.162,103,1.957,106,1.017,107,1.092,108,0.384,109,0.972,116,1.249,117,0.524,122,2.859,123,2.656,126,3.111,128,0.535,129,4.704,130,3.763,132,3.161,133,1.2,134,1.128,135,1.2,136,3.002,137,1.2,138,1.068,139,1.2,141,1.618,143,3.512,146,3.87,154,1.068,156,1.72,184,1.528,185,1.125,192,0.693,209,1.284,220,2.928,221,1.47,228,2.51,229,3.184,234,0.867,236,1.2,237,5.976,248,1.507,271,3.037,272,1.503,273,1.097,286,2.236,290,0.897,292,1.128,297,4.216,304,1.017,307,1.417,308,1.349,331,1.545,343,1.951,346,1.804,348,1.017,349,2.287,350,1.017,351,3.608,352,1.068,353,1.128,354,1.349,355,1.162,356,1.243,357,1.243,358,1.291,359,3.294,361,3.701,372,3.196,374,2.982,378,1.65,394,0.787,397,1.804,400,3.258,401,2.675,404,2.602,417,1.097,418,2.549,419,2.182,424,1.898,433,2.097,461,4.159,462,5.077,471,1.898,483,0.883,484,3.138,487,3.436,504,3.29,541,4.526,544,1.503,546,3.478,547,2.956,548,3.519,552,2.335,560,1.417,565,2.011,572,1.097,578,1.565,579,2.182,581,1.341,585,3.382,594,4.101,595,1.503,597,1.503,696,2.236,704,1.503,765,2.804,770,3.36,772,2.5,776,1.674,777,0.742,778,0.995,779,2.656,780,0.867,781,0.916,784,2.831,787,2.93,791,3.068,792,2.011,793,1.2,794,4.362,797,1.65,799,4.774,819,3.066,820,3.196,821,2.992,823,1.2,824,2.138,837,2.151,844,1.243,860,2.335,867,3.838,870,4.315,871,4.307,872,4.558,874,4.307,888,0.684,889,0.684,890,2.011,899,1.586,900,1.65,901,1.919,902,1.722,907,1.985,909,0.973,911,1.503,929,4.68,935,3.077,945,1.2,946,1.042,947,2.335,959,2.801,960,2.151,965,2.236,1010,1.417,1011,1.417,1012,1.243,1081,1.349,1085,6.106,1090,1.417,1105,0.934,1108,1.417,1133,0.995,1141,2.077,1187,1.349,1188,2.228,1210,3.22,1211,1.068,1235,1.417,1236,1.291,1245,4.664,1249,2.51,1251,1.417,1253,3.087,1256,1.503,1258,5.12,1260,5.149,1264,0.995,1277,1.417,1288,2.335,1290,1.2,1293,3.077,1373,1.618,1388,3.809,1389,4.997,1414,3.077,1415,3.44,1418,1.503,1432,0.934,1438,1.618,1439,3.44,1441,1.618,1442,1.618,1443,1.503,1444,1.503,1445,3.704,1446,1.503,1450,1.503,1458,5.763,1460,1.65,1466,1.503,1467,2.602,1470,2.602,1471,1.503,1478,2.602,1479,2.801,1480,2.602,1481,2.801,1482,2.602,1483,2.801,1484,3.867,1485,2.602,1486,2.453,1487,2.453,1488,2.011,1495,1.618,1496,1.618,1497,1.618,1498,1.618,1499,1.618,1500,1.618,1501,4.101,1506,3.704,1508,1.417,1509,1.503,1510,2.581,1520,1.349,1521,1.417,1547,2.151,1562,1.618,1563,1.618,1564,7.346,1565,3.171,1566,3.704,1567,4.636,1568,1.618,1569,7.346,1570,4.891,1571,1.792,1572,1.792,1573,1.618,1574,1.792,1575,1.349,1576,2.801,1577,1.618,1578,1.618,1579,1.503,1580,2.801,1581,2.801,1582,1.618,1583,1.618,1584,2.011,1585,3.44,1586,2.801,1587,1.761,1588,1.792,1589,1.162,1590,1.792,1591,1.618,1592,1.417,1593,1.792,1594,1.792,1595,1.792,1596,1.792,1597,1.792,1598,1.792,1599,1.503,1600,7.195,1601,6.054,1602,2.335,1603,6.054,1604,5.528,1605,5.528,1606,4.891,1607,6.494,1608,6.495,1609,5.528,1610,5.528,1611,5.528,1612,2.801,1613,1.792,1614,1.618,1615,1.792,1616,2.801,1617,4.415,1618,1.503,1619,1.618,1620,2.801,1621,1.618,1622,1.618,1623,1.618,1624,1.618,1625,1.792,1626,1.618,1627,1.349,1628,1.792,1629,1.618,1630,1.618,1631,1.618,1632,1.503,1633,1.618,1634,1.618,1635,1.792,1636,1.792,1637,1.792,1638,1.792,1639,3.103,1640,1.792,1641,3.103,1642,3.103,1643,3.103,1644,2.801,1645,2.453,1646,3.103,1647,3.103,1648,2.453,1649,3.103,1650,3.103,1651,3.103,1652,3.103,1653,4.103,1654,3.103,1655,3.103,1656,1.792,1657,1.792,1658,6.494,1659,3.103,1660,1.792,1661,1.792,1662,3.103,1663,1.792,1664,1.792,1665,1.792,1666,1.792,1667,1.792,1668,3.103,1669,3.103,1670,3.103,1671,6.054,1672,1.792,1673,1.792,1674,1.792,1675,1.792,1676,1.792,1677,1.792,1678,1.792,1679,1.792,1680,1.792,1681,1.792,1682,1.792,1683,1.792,1684,1.792,1685,1.792,1686,1.792,1687,1.792,1688,1.792,1689,1.792,1690,1.792,1691,1.792,1692,1.792,1693,1.792,1694,1.792,1695,1.792,1696,1.792,1697,1.792,1698,1.792,1699,1.792,1700,1.792,1701,1.792,1702,1.792,1703,4.636,1704,4.99,1705,1.792,1706,1.792,1707,1.792,1708,1.792]],["t/512",[0,0.196,1,0.16,6,0.026,32,2.554,57,0.328,63,1.283,75,1.735,83,2.661,100,4.644,103,2.373,107,1.258,108,1.013,109,1.943,122,2.263,123,1.826,126,1.85,128,1.41,129,5.336,130,4.212,151,3.735,156,2.015,174,2.98,179,6.357,184,2.327,198,5.084,214,2.89,220,3.997,221,1.692,222,3.188,229,3.613,234,2.286,247,2.89,248,1.735,268,3.897,270,3.413,271,4.493,290,1.466,298,2.621,310,4.53,378,3.565,418,2.462,422,2.972,484,3.56,504,2.012,550,3.162,578,3.893,579,2.512,581,2.042,767,3.162,776,2.735,777,1.955,780,4.104,791,2.621,792,3.062,819,3.694,820,3.744,821,2.89,823,3.162,824,2.462,870,2.012,871,2.327,872,2.462,874,2.327,888,3.236,889,3.236,937,2.621,942,6.161,1085,3.735,1086,3.961,1093,3.961,1106,4.264,1141,4.488,1147,3.961,1178,3.403,1188,4.606,1225,4.264,1226,3.961,1326,3.735,1575,3.554,1584,5.498,1589,3.062,1703,3.961,1709,4.264,1710,4.724,1711,4.724,1712,3.735,1713,6.704,1714,5.678,1715,6.704,1716,6.704,1717,6.704,1718,6.704,1719,6.704,1720,6.704,1721,6.704,1722,4.724,1723,4.724,1724,3.735,1725,4.724,1726,4.264,1727,4.724,1728,4.724,1729,4.264,1730,4.724,1731,4.724,1732,4.724,1733,8.957,1734,4.724,1735,4.724,1736,4.724,1737,6.704,1738,4.724,1739,4.724,1740,4.724,1741,4.724,1742,4.724,1743,4.724,1744,4.724,1745,8.482,1746,6.704,1747,6.704,1748,9.304,1749,7.793,1750,4.724,1751,4.724,1752,4.724,1753,4.724,1754,4.724,1755,4.724,1756,6.704,1757,4.724,1758,6.704]],["t/514",[0,0.06,1,0.038,6,0.025,7,0.028,10,0.031,11,0.055,19,0.718,26,0.068,42,0.762,57,0.373,65,0.381,67,1.56,75,1.665,80,1.877,83,0.446,101,0.61,102,0.728,103,0.398,107,2.673,108,0.241,109,0.561,116,0.824,122,2.408,123,1.919,126,2.346,129,3.768,130,3.23,132,1.86,133,0.752,134,2.544,135,1.371,136,1.889,137,0.752,138,2.073,139,1.371,143,2.318,145,3.144,146,0.974,154,0.67,156,1.075,179,0.653,184,0.554,185,0.743,192,0.434,220,2.094,221,2.146,228,2.474,229,2.551,237,0.846,248,0.752,269,0.638,271,2.275,290,0.884,297,3.303,304,0.638,331,0.771,337,0.554,349,1.32,350,0.638,351,2.703,352,0.67,353,0.707,354,0.846,355,0.728,356,0.779,357,0.779,358,0.81,359,2.41,361,2.329,372,2.695,374,2.234,378,1.089,394,0.493,397,1.64,400,2.029,401,1.366,403,0.526,404,0.942,418,1.471,419,1.501,424,0.688,433,1.778,456,0.517,461,1.541,462,2.366,471,5.033,484,2.387,487,1.602,504,1.202,546,2.189,548,2.022,549,0.889,550,0.752,552,1.541,565,2.621,578,0.781,579,1.089,594,0.942,597,0.942,765,0.836,770,2.517,772,1.047,776,1.151,777,0.465,779,1.532,784,1.627,785,0.846,787,0.991,791,1.931,792,1.328,793,0.752,794,3.268,799,4.331,804,0.688,808,0.752,814,0.653,819,1.971,820,1.998,821,2.129,824,2.588,867,2.495,870,3.66,871,3.42,872,3.619,874,3.514,888,0.429,889,0.429,890,1.328,893,0.942,899,1.047,900,1.089,901,1.32,902,1.137,907,1.684,928,0.942,934,0.942,935,2.189,945,0.752,946,0.653,947,1.541,960,0.779,1010,0.889,1011,0.889,1012,0.779,1030,1.476,1105,0.586,1132,0.846,1133,1.566,1141,1.371,1187,0.846,1188,1.532,1210,1.501,1211,0.67,1236,0.81,1245,1.829,1249,1.726,1251,0.889,1258,4.097,1260,4.221,1264,0.624,1268,0.67,1288,1.541,1290,0.752,1292,1.532,1293,1.289,1294,1.253,1388,2.853,1389,4.097,1432,1.471,1439,1.717,1443,0.942,1444,0.942,1458,4.814,1460,1.089,1466,0.942,1467,1.717,1470,1.717,1471,0.942,1478,1.717,1480,1.717,1482,1.717,1484,2.751,1485,1.717,1486,1.619,1487,1.619,1488,1.328,1501,1.717,1510,0.707,1518,0.752,1520,0.846,1521,0.889,1547,1.42,1563,1.014,1564,5.132,1565,1.829,1566,1.014,1567,1.717,1568,1.014,1569,5.132,1573,1.014,1579,0.942,1580,2.547,1581,1.849,1582,2.547,1583,1.014,1584,0.728,1585,1.717,1586,1.014,1587,0.638,1612,1.849,1614,1.014,1616,1.849,1617,3.14,1618,0.942,1619,1.014,1620,1.849,1621,1.014,1622,1.014,1623,1.014,1624,1.014,1626,1.014,1627,0.846,1629,1.014,1630,1.014,1631,1.014,1632,0.942,1658,1.014,1703,2.917,1704,3.14,1759,1.124,1760,1.124,1761,1.124,1762,1.124,1763,2.048,1764,2.048,1765,1.849,1766,2.048,1767,1.124,1768,1.124,1769,1.849,1770,1.124,1771,2.048,1772,4.966,1773,5.347,1774,4.535,1775,1.124,1776,2.048,1777,2.048,1778,2.048,1779,1.124,1780,2.048,1781,2.048,1782,2.048,1783,1.717,1784,0.942,1785,1.014,1786,0.942,1787,1.124,1788,4.044,1789,1.124,1790,4.044,1791,4.044,1792,2.822,1793,7.619,1794,7.134,1795,8.327,1796,8.327,1797,7.619,1798,5.686,1799,8.327,1800,6.512,1801,5.686,1802,5.686,1803,7.619,1804,7.619,1805,8.327,1806,7.134,1807,8.593,1808,5.686,1809,7.134,1810,6.512,1811,6.512,1812,4.535,1813,5.686,1814,5.686,1815,7.134,1816,7.134,1817,9.326,1818,5.686,1819,8.327,1820,5.686,1821,6.512,1822,6.512,1823,4.535,1824,5.686,1825,9.012,1826,5.686,1827,2.822,1828,7.619,1829,6.512,1830,5.686,1831,2.822,1832,6.512,1833,6.512,1834,7.619,1835,2.822,1836,5.686,1837,5.686,1838,4.535,1839,6.512,1840,4.535,1841,7.134,1842,7.619,1843,6.512,1844,4.535,1845,7.619,1846,2.822,1847,6.512,1848,5.686,1849,9.012,1850,5.686,1851,2.822,1852,5.686,1853,5.686,1854,8.327,1855,5.686,1856,8.008,1857,6.512,1858,7.619,1859,7.134,1860,8.008,1861,4.535,1862,4.535,1863,2.822,1864,5.686,1865,6.512,1866,2.822,1867,4.535,1868,6.512,1869,2.822,1870,5.686,1871,6.512,1872,5.686,1873,7.619,1874,6.512,1875,7.134,1876,6.512,1877,4.535,1878,4.535,1879,4.768,1880,7.134,1881,2.822,1882,5.686,1883,6.512,1884,6.512,1885,5.686,1886,4.535,1887,4.535,1888,6.512,1889,5.686,1890,6.512,1891,6.512,1892,4.535,1893,6.512,1894,6.512,1895,2.822,1896,5.686,1897,2.822,1898,5.686,1899,5.686,1900,5.686,1901,2.822,1902,5.46,1903,5.686,1904,5.686,1905,5.686,1906,4.535,1907,5.686,1908,5.686,1909,2.822,1910,7.134,1911,2.547,1912,5.686,1913,2.822,1914,2.822,1915,6.512,1916,2.822,1917,4.535,1918,2.822,1919,2.822,1920,4.535,1921,2.822,1922,2.822,1923,2.822,1924,2.822,1925,4.535,1926,2.822,1927,2.822,1928,2.822,1929,2.822,1930,2.822,1931,2.822,1932,2.822,1933,4.535,1934,4.535,1935,2.822,1936,2.822,1937,2.822,1938,2.822,1939,2.822,1940,2.822,1941,1.124,1942,1.124,1943,1.124,1944,1.124,1945,1.124,1946,1.124,1947,1.124,1948,1.124,1949,1.124,1950,1.124,1951,1.124,1952,1.124,1953,1.124,1954,1.124,1955,1.124,1956,1.124,1957,1.124]],["t/516",[0,0.189,1,0.153,6,0.026,15,3.312,18,4.395,23,0.107,57,0.43,67,2.183,77,2.654,103,2.686,108,0.966,109,1.819,116,2.607,122,2.187,123,2.505,126,3.251,128,2.626,132,3.818,134,4.775,136,4.121,146,3.609,156,1.643,184,2.218,185,2.35,220,3.251,221,2.321,229,3.232,234,3.135,235,2.919,248,2.379,251,3.122,254,3.33,268,2.618,278,2.072,290,0.985,295,3.955,318,4.411,321,8.717,338,2.259,349,2.106,359,2.684,372,3.435,418,2.347,419,5.23,483,3.738,484,2.72,502,6,503,4.076,504,1.918,532,3.561,565,4.2,578,1.718,581,2.801,776,2.644,777,1.864,778,2.499,779,2.445,780,2.179,781,2.302,819,3.013,820,3.34,848,3.776,867,2.843,870,3.535,871,3.738,872,3.955,874,4.978,888,1.718,889,1.718,890,2.919,899,3.879,901,3.882,937,2.499,1017,5.701,1182,6.349,1184,5.433,1210,2.395,1211,2.684,1212,3.015,1213,2.684,1214,3.245,1215,3.561,1216,4.875,1283,6.958,1290,4.337,1354,3.122,1432,2.347,1458,3.122,1490,4.875,1510,2.833,1602,3.388,1958,4.065,1959,6.479,1960,8.794,1961,6.479,1962,8.3,1963,6.479,1964,4.669,1965,4.504,1966,7.374,1967,4.504,1968,4.065,1969,4.504,1970,3.561,1971,4.504,1972,4.504,1973,6.479,1974,4.504,1975,4.504,1976,6.479,1977,6.85,1978,4.504,1979,4.065,1980,4.504,1981,9.657,1982,4.504,1983,4.504,1984,4.504,1985,4.504,1986,4.504,1987,4.504,1988,4.504,1989,4.504,1990,4.504]],["t/518",[0,0.211,1,0.178,6,0.026,18,2.17,56,2.68,57,0.353,103,2.552,108,1.124,109,1.637,122,2.996,123,2.787,128,1.565,156,2.015,179,3.047,184,5.528,220,3.477,221,2.953,226,5.731,248,3.26,251,4.999,254,4.084,271,4.824,282,7.002,290,1.576,310,3.047,349,2.452,355,3.399,418,2.733,504,2.233,578,3.387,596,4.732,776,2.942,777,2.984,778,2.909,779,2.847,780,2.537,781,2.68,797,3.835,819,3.695,820,3.745,824,2.733,846,3.778,860,3.945,888,2,889,2,909,2.847,910,4.297,935,3.299,1080,4.396,1182,5.714,1431,6.509,1786,4.396,1991,10.036,1992,5.243,1993,7.211,1994,7.211,1995,5.243,1996,5.243,1997,5.243,1998,5.243,1999,5.243,2000,7.211,2001,7.211,2002,5.243,2003,7.211,2004,5.243,2005,4.732,2006,4.732,2007,5.243,2008,5.243,2009,10.919,2010,5.243,2011,5.243,2012,5.243,2013,5.243,2014,5.243,2015,5.243,2016,5.243,2017,5.243,2018,5.243,2019,8.242,2020,8.242,2021,8.242,2022,5.243,2023,5.243,2024,5.243,2025,5.243,2026,7.211,2027,5.243]],["t/520",[0,0.269,1,0.104,6,0.026,18,1.268,42,1.14,57,0.419,67,1.977,70,1.949,103,2.63,108,0.657,109,0.962,117,0.896,122,2.792,123,2.321,126,1.897,128,0.915,149,1.826,156,1.912,209,1.268,214,3.674,220,3.775,221,2.151,224,4.061,226,5.261,229,1.305,240,1.987,248,2.506,254,3.631,260,3.995,269,1.74,278,5.152,279,4.303,280,4.817,281,6.938,282,5.591,285,2.208,290,1.313,349,1.433,351,1.826,372,3.269,378,2.576,419,2.576,484,1.286,504,1.305,527,1.928,578,2.603,581,2.596,591,3.047,765,4.382,776,2.45,777,2.004,778,1.701,779,1.664,780,1.483,781,1.567,799,3.302,819,3.505,820,3.553,841,5.712,843,1.826,867,2.995,870,2.906,885,6.159,888,1.169,889,1.169,901,3.191,960,2.125,1105,4.713,1210,1.63,1211,1.826,1212,2.052,1213,1.826,1214,2.208,1216,2.306,1228,6.053,1245,5.363,1292,1.664,1294,1.875,1414,5.555,2028,4.372,2029,4.327,2030,11.009,2031,3.065,2032,3.065,2033,3.065,2034,4.372,2035,3.065,2036,4.843,2037,4.843,2038,4.843,2039,3.065,2040,9.518,2041,4.843,2042,7.901,2043,7.901,2044,7.901,2045,6.824,2046,8.829,2047,7.901,2048,4.843,2049,8.829,2050,6.824,2051,6.824,2052,7.431,2053,7.431,2054,4.843,2055,4.843,2056,3.065,2057,4.843,2058,3.065,2059,3.065,2060,3.065,2061,3.065,2062,6.005,2063,3.065,2064,3.065,2065,3.065,2066,3.065,2067,3.065,2068,3.065,2069,4.843,2070,6.824,2071,6.005,2072,6.005,2073,3.065,2074,3.065,2075,8.274,2076,3.065,2077,3.065,2078,3.065,2079,3.065,2080,3.065,2081,3.065,2082,3.065,2083,4.843]],["t/522",[0,0.121,1,0.086,6,0.024,7,0.244,20,0.833,32,1.849,42,0.939,57,0.203,63,2.564,65,0.276,67,1.582,77,0.762,88,0.672,100,2.47,103,2.159,108,0.542,109,0.823,116,1.016,117,0.738,122,2.443,123,2.358,126,1.623,127,5.325,128,0.754,129,2.608,130,3.276,132,3.098,133,2.775,134,3.837,135,1.691,137,3.528,139,2.775,143,3.908,146,1.971,149,3.141,150,1.637,156,1.728,184,4.999,192,4.337,220,3.126,221,2.185,222,3.203,223,1.9,248,1.522,290,1.334,307,4.822,308,3.966,309,4.167,310,4.944,343,1.201,349,1.938,372,2.181,399,6.8,433,1.291,450,3.732,484,1.74,487,5.357,504,4.711,509,2.28,530,3.475,578,2.569,581,1.092,696,7.666,776,2.151,777,2.181,778,1.402,779,2.862,780,2.006,781,2.119,784,2.465,787,2.551,791,2.3,797,1.343,819,3.169,820,3.212,867,3.176,870,3.082,871,3.765,872,3.984,874,4.293,876,2.16,888,1.581,889,3.64,890,1.637,899,1.291,900,1.343,904,5.752,909,1.372,937,2.3,942,1.997,945,1.691,946,5.545,948,2.118,949,7.46,952,8.519,968,2.28,969,2.28,970,2.28,972,6.9,974,1.997,975,2.28,976,1.751,978,6.533,980,6.533,982,6.533,984,2.28,985,2.28,987,2.28,988,2.28,990,3.741,1222,2.28,1231,2.873,1268,5.624,1290,1.691,1518,1.691,1547,7.037,1587,1.434,2084,2.526,2085,4.145,2086,2.28,2087,2.526,2088,5.271,2089,8.841,2090,6.735,2091,5.271,2092,2.526,2093,2.526,2094,9.438,2095,9.438,2096,7.982,2097,7.645,2098,7.237,2099,2.526,2100,4.145,2101,2.526,2102,4.145,2103,8.507,2104,4.145,2105,8.507,2106,4.145,2107,4.145,2108,2.526,2109,2.526,2110,4.145,2111,2.526,2112,7.237,2113,2.526,2114,2.526,2115,2.526,2116,2.526,2117,2.526,2118,2.526,2119,2.526,2120,4.145,2121,2.526,2122,4.145,2123,2.526,2124,2.526,2125,2.526,2126,2.526,2127,2.526,2128,2.526,2129,2.526,2130,4.145,2131,1.82,2132,2.986,2133,4.145,2134,5.115,2135,4.145,2136,2.526]],["t/524",[0,0.224,1,0.194,6,0.025,24,1.805,32,2.367,48,3.985,57,0.374,59,0.923,64,2.985,67,2.098,88,1.525,103,2.027,108,1.228,109,1.713,116,2.305,120,3.413,122,2.584,123,2.214,126,2.998,130,3.466,143,2.927,144,4.802,145,5.307,156,1.993,185,2.077,220,2.243,221,2.743,222,4.101,229,4.293,247,3.504,248,2.103,254,3.359,260,2.439,290,1.674,297,4.101,349,2.678,351,4.562,484,3.213,487,4.345,504,2.439,578,2.185,581,2.475,765,2.337,772,2.927,776,2.337,777,2.37,778,3.178,779,3.11,780,3.704,781,2.927,799,5.071,802,4.309,819,3.654,820,3.861,824,2.985,841,3.045,860,4.309,867,2.513,870,3.673,888,2.185,889,2.185,901,3.58,909,3.11,1050,3.97,1087,4.309,1105,2.985,1133,3.178,1178,4.126,1197,5.169,1198,5.169,1199,5.169,1200,5.169,1240,5.169,1245,3.712,1257,4.802,1292,4.157,1293,3.603,1294,3.504,1301,5.169,1302,5.169,1303,5.169,1304,5.169,1305,5.169,1644,5.169,2137,5.727,2138,9.206,2139,5.727,2140,5.727,2141,5.727,2142,5.727,2143,5.727,2144,5.727,2145,5.727,2146,7.655,2147,5.727,2148,5.727,2149,5.169,2150,5.169,2151,5.727,2152,5.727,2153,5.727,2154,4.802,2155,5.727,2156,4.802,2157,5.169,2158,5.727,2159,5.727,2160,5.727,2161,5.727]],["t/526",[0,0.262,1,0.235,6,0.026,9,0.106,32,1.052,48,0.823,57,0.338,59,0.528,65,0.965,67,2.325,75,1.407,77,1.487,88,2.883,92,2.519,100,2.937,101,2.08,103,2.036,108,0.493,109,1.143,116,1.542,122,2.473,123,2.224,126,3.008,128,1.144,132,2.267,134,2.41,136,4.786,143,4.077,145,5.529,146,2.736,149,3.428,156,1.496,158,1.816,185,1.389,192,0.888,198,1.304,220,3.31,221,2.475,222,1.092,228,1.405,229,0.978,248,2.929,249,3.029,254,1.681,273,1.405,284,3.21,285,2.76,286,2.76,290,1.258,297,4.192,298,1.274,315,2.073,350,1.304,353,3.101,369,3.458,372,0.95,386,5.792,397,2.865,417,1.405,419,2.037,459,1.592,471,2.344,474,1.926,484,2.415,501,1.174,502,3.897,503,3.101,504,0.978,507,3.458,532,1.816,536,1.816,546,1.445,547,1.655,548,1.335,550,2.565,572,1.405,573,2.073,578,3.043,581,2.131,765,3.254,770,5.625,772,1.958,775,1.816,776,1.563,777,2.646,780,2.385,784,2.305,787,1.854,801,3.212,804,1.405,810,2.656,812,2.76,819,2.742,820,3.09,822,2.76,824,1.197,832,1.926,843,2.937,844,2.656,846,1.655,848,1.926,867,2.806,870,3.681,883,2.073,888,0.876,889,0.876,899,1.174,901,3.427,907,1.111,909,2.08,910,2.937,933,1.926,937,1.274,966,1.926,1017,2.483,1021,7.292,1108,3.897,1132,1.728,1133,1.274,1140,2.073,1169,1.445,1188,2.08,1210,4.768,1211,3.81,1212,4.28,1213,3.81,1214,4.607,1215,1.816,1216,4.811,1245,6.868,1251,6.681,1253,1.728,1288,2.882,1292,1.247,1318,2.073,1421,2.073,1432,1.197,1457,1.728,1458,2.656,1460,1.221,1490,2.882,1510,1.445,1579,1.926,1589,1.489,1591,2.073,1602,1.728,1633,2.073,1645,1.816,1712,4.548,1714,2.565,1729,2.073,1902,1.926,1958,2.073,1964,1.655,1966,1.926,1970,1.816,2162,3.831,2163,1.816,2164,3.831,2165,2.297,2166,2.297,2167,1.728,2168,1.816,2169,2.297,2170,2.297,2171,6.908,2172,1.926,2173,7.679,2174,2.297,2175,4.929,2176,8.643,2177,6.394,2178,3.831,2179,4.929,2180,3.831,2181,5.362,2182,2.297,2183,1.728,2184,2.297,2185,9.433,2186,3.831,2187,2.297,2188,2.297,2189,2.297,2190,2.297,2191,6.615,2192,6.908,2193,6.908,2194,6.394,2195,10.382,2196,6.394,2197,6.394,2198,6.394,2199,6.394,2200,6.394,2201,6.394,2202,6.394,2203,6.394,2204,6.394,2205,6.908,2206,6.908,2207,2.297,2208,2.297,2209,2.297,2210,2.297,2211,2.297,2212,3.831,2213,3.831,2214,3.831,2215,2.297,2216,2.297,2217,2.297,2218,2.297,2219,2.297,2220,2.297,2221,2.297,2222,2.297,2223,2.297,2224,2.297,2225,4.929,2226,2.297,2227,4.929,2228,2.297,2229,4.929,2230,2.297,2231,2.297,2232,2.297,2233,2.297,2234,2.297,2235,2.297,2236,2.297,2237,2.297,2238,2.297,2239,1.926,2240,2.297,2241,2.297,2242,1.816,2243,1.816,2244,2.073,2245,2.297,2246,1.655,2247,2.297,2248,2.297,2249,2.073,2250,2.297,2251,2.073,2252,2.297,2253,2.073]],["t/528",[0,0.207,1,0.308,6,0.026,32,3.09,48,2.998,57,0.195,67,2.331,103,2.097,108,0.855,109,1.177,116,1.604,122,2.387,123,3.027,126,2.77,156,2.065,159,2.469,174,2.757,185,2.565,219,1.3,220,2.77,221,1.428,229,4.061,246,2.583,247,2.438,248,1.463,254,3.436,269,2.262,271,4.4,284,1.604,290,1.986,297,3.364,331,1.501,350,3.363,400,1.999,426,5.321,465,2.999,484,1.673,501,2.037,504,1.697,536,4.685,578,2.698,774,7.917,776,1.626,777,1.649,780,1.928,819,3.785,820,3.837,833,3.151,852,3.597,860,5.892,876,2.077,888,1.52,889,1.52,905,4.458,909,4.252,1046,8.525,1210,3.151,1212,2.668,1234,5.348,1423,4.108,1587,4.751,1714,2.668,2154,3.342,2156,3.342,2254,4.108,2255,2.583,2256,3.985,2257,3.985,2258,3.151,2259,3.985,2260,3.151,2261,3.151,2262,3.597,2263,3.597,2264,3.985,2265,9.703,2266,3.985,2267,3.985,2268,3.985,2269,3.985,2270,3.151,2271,8.998,2272,7.073,2273,9.703,2274,5.925,2275,3.985,2276,5.925,2277,10.074,2278,5.925,2279,5.925,2280,5.925,2281,5.925,2282,5.348,2283,9.331,2284,6.469,2285,8.771,2286,3.985,2287,3.985,2288,3.985,2289,3.985,2290,3.985,2291,3.985,2292,3.985,2293,3.985,2294,3.985,2295,3.985,2296,3.985,2297,3.985,2298,3.985,2299,3.985,2300,3.985,2301,3.985,2302,3.985,2303,3.985,2304,3.985,2305,3.985,2306,3.985,2307,3.985,2308,5.925,2309,3.597,2310,3.985,2311,3.985,2312,3.985,2313,3.985,2314,3.985,2315,3.151,2316,3.985,2317,4.968,2318,4.269,2319,3.985,2320,3.985]],["t/530",[0,0.086,1,0.057,3,0.585,6,0.027,24,2.819,28,0.629,37,0.672,38,1.778,48,0.606,53,0.779,57,0.083,59,0.181,63,1.449,64,2.047,65,1.142,67,1.461,69,0.646,75,1.442,80,2.608,83,2.783,103,2.074,108,0.363,109,0.587,114,0.681,116,2.358,119,1.435,122,0.997,123,2.436,126,1.538,132,0.779,136,2.553,138,1.009,149,1.009,150,1.097,156,0.85,167,0.961,175,0.638,176,0.592,182,0.622,185,2.125,189,0.638,194,0.754,200,0.629,218,1.065,220,3.502,221,3.125,226,2.34,234,4.595,235,1.914,248,2.454,254,3.202,260,2.272,261,1.57,262,0.805,263,0.882,268,0.984,279,4.579,290,1.028,297,4.149,301,0.882,304,0.961,305,1.133,350,1.676,359,1.009,372,1.222,378,1.57,387,1.065,417,1.036,433,2.404,482,4.22,483,4.646,484,3.263,527,1.065,541,2.47,553,2.954,562,1.22,578,2.675,579,1.57,581,1.697,591,1.065,776,2.391,777,2.208,781,0.865,784,1.381,787,1.9,814,1.716,819,2.118,820,1.58,824,0.882,835,2.221,841,2.088,867,2.341,870,4.232,871,3.292,872,3.803,874,4.169,888,0.646,889,0.646,899,2.995,900,3.116,901,1.836,902,2.179,907,3.392,910,2.802,931,1.133,937,0.939,945,6.314,946,0.984,956,3.148,957,1.338,960,1.174,965,1.22,976,1.174,1031,3.388,1040,3.26,1045,1.22,1105,2.78,1133,0.939,1154,1.274,1169,1.065,1188,3.182,1228,3.571,1264,0.939,1283,3.844,1292,0.919,1293,1.065,1294,1.036,1346,1.133,1383,4.633,1414,1.858,1432,4.547,1460,5.342,1523,5.687,1552,3.388,1554,6.638,1587,1.676,1592,1.338,1769,1.528,2029,1.22,2131,2.829,2132,4.222,2163,1.338,2167,1.274,2168,1.338,2183,1.274,2246,1.22,2254,2.047,2255,1.097,2321,2.953,2322,1.528,2323,1.528,2324,3.105,2325,1.693,2326,1.693,2327,3.105,2328,7.457,2329,7.403,2330,1.338,2331,5.028,2332,5.283,2333,8.317,2334,2.334,2335,1.338,2336,5.969,2337,4.218,2338,4.633,2339,6.897,2340,4.633,2341,3.105,2342,1.274,2343,2.334,2344,1.338,2345,3.927,2346,2.334,2347,2.334,2348,4.218,2349,1.419,2350,2.334,2351,8.154,2352,3.105,2353,2.334,2354,1.693,2355,1.338,2356,4.218,2357,3.718,2358,1.338,2359,1.274,2360,1.338,2361,1.338,2362,5.86,2363,2.953,2364,2.665,2365,3.718,2366,4.633,2367,2.476,2368,2.476,2369,4.633,2370,7.36,2371,2.665,2372,1.528,2373,2.953,2374,2.953,2375,2.665,2376,2.953,2377,2.953,2378,2.954,2379,5.969,2380,2.334,2381,3.718,2382,4.702,2383,2.953,2384,3.718,2385,2.665,2386,2.953,2387,2.953,2388,2.334,2389,4.702,2390,1.693,2391,2.334,2392,2.334,2393,2.953,2394,2.665,2395,4.245,2396,2.953,2397,3.718,2398,2.334,2399,3.718,2400,2.334,2401,4.218,2402,1.693,2403,2.476,2404,3.718,2405,4.245,2406,2.665,2407,2.665,2408,2.334,2409,3.718,2410,2.334,2411,2.476,2412,2.665,2413,2.334,2414,1.528,2415,1.528,2416,1.528,2417,1.528,2418,3.544,2419,1.528,2420,1.419,2421,4.245,2422,1.419,2423,3.544,2424,1.528,2425,1.528,2426,1.528,2427,1.528,2428,1.528,2429,1.528,2430,1.528,2431,1.528,2432,1.528,2433,1.528,2434,1.528,2435,1.528,2436,3.293,2437,3.544,2438,3.544,2439,5.29,2440,3.293,2441,3.544,2442,1.419,2443,1.419,2444,1.419,2445,2.665,2446,1.528,2447,1.528,2448,1.528,2449,1.528,2450,1.528,2451,1.528,2452,1.528,2453,1.528,2454,1.528,2455,1.528,2456,3.293,2457,1.419,2458,1.419,2459,1.528,2460,1.528,2461,1.528,2462,1.528,2463,1.528,2464,1.528,2465,1.528,2466,1.528,2467,1.528,2468,1.528,2469,1.528,2470,1.528,2471,3.293,2472,1.419,2473,1.693,2474,2.476,2475,1.528,2476,1.528,2477,1.419,2478,1.338,2479,1.419,2480,1.528,2481,1.528,2482,1.528,2483,1.528,2484,1.528,2485,1.528,2486,1.528,2487,1.528,2488,1.338,2489,1.338,2490,1.693,2491,3.544,2492,1.528]],["t/532",[0,0.076,1,0.05,3,0.509,6,0.027,24,2.806,28,0.548,37,0.585,38,1.595,48,0.937,53,0.678,56,0.754,57,0.072,59,0.158,63,0.401,64,1.836,65,1.169,67,1.277,69,0.562,75,0.541,80,2.019,83,1.937,103,1.911,108,0.316,109,0.519,114,0.593,116,2.172,119,1.301,122,0.882,123,2.258,126,1.911,132,0.678,136,0.801,138,0.879,150,0.956,151,2.067,156,1.056,167,0.837,175,0.555,182,0.541,185,1.958,189,0.555,194,0.657,198,1.484,200,0.548,214,0.902,218,2.216,220,3.52,221,3.219,226,3.482,234,4.55,235,2.284,236,2.358,248,2.287,254,2.564,260,3.446,261,0.784,268,0.857,279,4.798,285,1.884,290,0.932,297,4.382,301,0.768,304,0.837,305,0.987,338,0.74,350,0.837,352,1.558,359,0.879,372,1.082,378,1.39,379,2.682,387,0.928,417,0.902,433,1.801,471,1.6,482,3.911,483,4.339,484,3.088,527,0.928,541,1.645,553,2.651,562,1.062,578,2.887,579,0.784,581,1.523,591,1.645,666,1.166,776,2.203,777,2.019,781,0.754,784,1.223,787,2.063,814,1.52,819,2.143,820,1.963,824,0.768,835,1.967,841,2.595,867,2.141,870,3.979,871,3.378,872,3.834,874,4.238,888,0.562,889,0.998,899,3.506,900,3.648,901,2.282,902,2.707,907,4.307,910,2.541,929,1.884,931,0.987,934,3.575,945,4.393,946,0.857,956,2.854,957,2.785,960,1.022,965,1.062,976,1.022,1031,1.884,1040,2.956,1043,2.954,1045,1.062,1094,1.236,1105,2.543,1133,0.818,1154,1.109,1169,0.928,1188,2.649,1228,3.266,1271,1.331,1283,3.516,1292,1.42,1293,0.928,1294,0.902,1346,0.987,1414,1.645,1432,3.712,1460,5.16,1523,5.542,1552,1.884,1554,6.891,1587,1.484,1592,2.785,2029,1.062,2131,3.516,2132,4.942,2163,3.371,2167,2.651,2168,2.785,2183,1.109,2246,1.062,2254,1.813,2255,0.956,2315,1.166,2324,3.371,2327,2.067,2328,7.434,2329,7.337,2330,1.166,2331,4.685,2332,4.923,2334,2.067,2335,1.166,2336,5.983,2337,5.983,2338,5.983,2339,7.284,2340,4.268,2341,2.785,2342,1.109,2343,2.067,2344,1.166,2346,2.067,2347,2.067,2348,2.067,2349,1.236,2350,2.067,2352,2.067,2353,2.067,2355,1.166,2356,3.857,2357,3.371,2358,1.166,2359,1.109,2360,1.166,2361,2.067,2365,2.067,2366,2.785,2367,1.236,2368,1.236,2369,3.371,2378,3.671,2379,4.268,2380,1.166,2381,2.067,2384,2.067,2388,2.067,2391,1.166,2392,1.166,2397,2.067,2398,1.166,2399,2.067,2400,1.166,2401,2.067,2404,2.067,2408,1.166,2409,2.067,2410,1.166,2411,1.236,2413,1.166,2414,1.331,2415,1.331,2420,1.236,2422,3.575,2436,4.527,2442,3.575,2443,2.954,2444,2.954,2456,4.527,2457,2.954,2458,2.954,2471,4.527,2472,2.954,2474,2.192,2477,5.503,2478,3.857,2479,1.236,2488,1.166,2489,1.166,2493,1.474,2494,1.474,2495,8.605,2496,1.474,2497,2.615,2498,2.615,2499,1.474,2500,1.474,2501,1.236,2502,1.474,2503,1.474,2504,1.474,2505,3.523,2506,1.331,2507,3.849,2508,3.18,2509,2.36,2510,1.331,2511,5.274,2512,9.343,2513,1.331,2514,2.36,2515,1.474,2516,7.932,2517,4.879,2518,1.474,2519,2.615,2520,1.474,2521,3.849,2522,1.474,2523,1.331,2524,4.879,2525,2.615,2526,1.474,2527,1.331,2528,1.474,2529,3.523,2530,2.615,2531,1.474,2532,1.474,2533,1.331,2534,1.474,2535,1.474,2536,5.398,2537,1.474,2538,1.474,2539,1.331,2540,2.36,2541,1.331,2542,1.474,2543,4.264,2544,4.264,2545,4.264,2546,4.264,2547,1.474,2548,1.474,2549,1.474,2550,1.331,2551,2.615,2552,4.264,2553,4.264,2554,4.264,2555,4.264,2556,4.264,2557,4.264,2558,4.264,2559,1.474,2560,5.398,2561,6.64,2562,3.18,2563,3.523,2564,5.398,2565,5.398,2566,3.523,2567,3.523,2568,3.523,2569,3.523,2570,1.474]],["t/534",[0,0.106,1,0.073,6,0.027,19,0.447,24,2.823,38,2.137,57,0.106,59,0.232,63,0.99,64,2.461,65,1.063,67,1.637,75,1.734,77,0.653,83,3.093,103,1.671,108,0.464,109,0.724,116,2.697,119,1.69,122,1.23,123,2.755,126,1.427,132,0.995,136,1.175,138,1.289,150,1.403,156,0.789,167,1.228,176,0.731,185,2.431,218,1.361,220,3.716,221,3.101,226,2.813,234,4.731,235,2.362,248,2.749,254,3.285,260,2.359,262,1.029,263,2.461,268,1.258,279,4.421,290,1.032,297,4.375,301,1.128,304,1.228,305,1.448,350,2.069,359,1.289,372,1.508,378,1.938,387,1.361,417,1.324,433,2.413,482,3.16,483,4.846,484,3.476,527,1.361,541,2.293,553,3.552,562,1.559,578,2.972,579,1.151,581,2.041,591,1.361,776,2.734,777,2.559,781,1.106,784,1.704,787,2.285,814,2.118,819,1.447,820,1.467,824,1.128,835,1.628,841,1.938,867,2.713,870,4.346,871,3.511,872,4.061,874,4.341,888,0.826,889,0.826,899,2.832,900,2.946,901,1.704,902,2.022,907,2.992,910,3.301,931,1.448,945,6.623,946,1.258,956,3.708,965,1.559,976,1.5,1031,3.992,1040,3.841,1045,1.559,1105,3.222,1133,1.201,1154,1.628,1169,1.361,1188,3.639,1228,4.139,1264,2.022,1283,4.455,1292,1.175,1293,1.361,1294,1.324,1346,1.448,1383,5.298,1414,2.293,1432,4.849,1460,5.406,1523,5.787,1552,3.992,1554,6.238,1587,1.228,2029,1.559,2131,2.626,2132,3.992,2183,1.628,2246,1.559,2254,2.527,2255,1.403,2322,1.953,2323,1.953,2324,2.881,2327,3.733,2328,7.565,2329,7.565,2330,1.711,2331,5.633,2332,5.636,2334,2.881,2335,1.711,2336,5.919,2337,2.881,2338,3.733,2339,6.16,2340,5.298,2341,3.733,2342,1.628,2343,2.881,2344,1.711,2346,2.881,2347,2.881,2348,2.881,2350,2.881,2352,2.881,2353,1.711,2355,1.711,2356,4.888,2357,3.733,2358,1.711,2359,1.628,2360,1.711,2361,1.711,2364,3.29,2365,4.38,2366,5.298,2367,3.056,2368,3.056,2369,5.298,2370,7.956,2371,3.29,2372,1.953,2375,3.29,2378,2.742,2379,6.547,2380,2.881,2381,4.38,2384,4.38,2385,3.29,2388,2.881,2391,2.881,2392,2.881,2394,3.29,2395,5,2397,4.38,2398,2.881,2399,4.38,2400,2.881,2401,4.888,2403,3.056,2404,4.38,2405,5,2406,3.29,2407,3.29,2408,2.881,2409,4.38,2410,2.881,2411,3.056,2412,3.29,2413,2.881,2488,1.711,2489,1.711,2491,4.262,2492,1.953,2571,8.955,2572,4.721,2573,8.814,2574,2.164,2575,6.702,2576,3.644,2577,3.644,2578,3.644,2579,3.644,2580,3.644,2581,5.54,2582,3.644,2583,3.644,2584,3.644,2585,5.54,2586,2.164,2587,3.644,2588,3.644,2589,2.164]],["t/536",[0,0.074,1,0.048,3,0.871,6,0.027,24,2.746,28,0.937,37,1.001,38,1.543,48,0.507,53,1.16,56,0.723,57,0.069,59,0.151,63,1.655,64,1.777,65,1.176,67,1.471,69,0.962,75,0.52,80,3.361,83,2.265,101,1.369,103,2.559,108,0.303,109,0.501,114,1.014,116,2.118,119,0.769,122,0.851,123,2.206,126,1.335,127,1.119,128,0.422,130,0.64,132,2.184,136,2.577,138,0.843,150,0.917,156,0.546,167,0.803,175,0.949,178,1.064,182,0.926,185,1.909,189,0.949,194,1.123,198,2.694,200,0.937,209,0.585,218,0.89,220,3.515,221,2.857,226,2.466,234,4.448,235,2.21,236,1.687,247,0.866,248,2.361,254,3.173,260,1.762,261,0.752,262,3.793,263,0.737,268,0.822,270,0.569,271,0.71,279,4.46,280,0.917,286,1.019,290,1.038,297,4.706,301,0.737,303,1.896,304,0.803,305,0.947,338,0.71,349,0.662,350,0.803,359,0.843,361,0.947,372,1.043,378,1.34,387,0.89,397,1.465,399,1.816,417,0.866,433,2.115,451,0.917,471,1.542,482,2.282,483,4.528,484,2.935,527,0.89,553,2.565,562,1.019,578,2.758,579,2.799,581,1.789,585,1.542,591,1.586,666,1.119,765,1.391,776,2.148,777,1.964,780,0.685,781,0.723,784,2.461,787,2.948,797,1.34,814,1.465,819,1.001,820,1.014,824,0.737,835,1.064,841,1.813,867,2.083,870,3.709,871,3.001,872,3.506,874,3.928,880,2.114,888,0.54,889,0.54,899,2.69,900,2.799,901,1.594,902,1.892,907,3.602,910,2.466,929,1.816,931,2.77,945,4.304,946,0.822,956,2.77,960,0.981,961,1.993,965,1.019,976,0.981,1031,1.816,1040,2.868,1043,3.98,1045,1.019,1048,1.186,1050,3.291,1084,2.114,1094,2.114,1105,2.474,1133,0.785,1147,1.186,1148,1.277,1154,1.064,1169,0.89,1179,0.981,1188,2.247,1228,3.177,1252,1.186,1256,1.186,1264,2.634,1283,3.42,1292,0.768,1293,0.89,1294,0.866,1340,3.077,1346,0.947,1414,1.586,1432,3.351,1460,4.852,1509,1.186,1523,5.275,1552,1.816,1554,6.999,1584,1.634,1587,0.803,1592,1.993,1634,1.277,1709,1.277,1712,1.119,1726,1.277,1765,1.277,1784,1.186,1879,1.186,2029,2.456,2131,2.456,2132,3.792,2163,1.993,2167,1.896,2168,1.993,2183,1.064,2246,1.019,2254,1.747,2255,0.917,2324,1.119,2327,2.695,2328,6.886,2329,7.095,2330,1.119,2331,4.583,2332,4.161,2334,1.993,2335,1.119,2336,5.083,2337,5.083,2338,5.083,2339,7.458,2340,4.161,2341,2.695,2342,1.064,2343,1.993,2344,4.816,2346,1.993,2347,1.993,2348,5.083,2349,1.186,2350,3.753,2352,1.993,2353,1.119,2355,1.119,2356,3.753,2357,2.695,2358,1.119,2359,1.064,2360,1.119,2361,2.695,2365,1.993,2366,2.695,2369,2.695,2378,2.565,2379,4.161,2380,1.119,2381,1.993,2384,1.993,2388,1.993,2391,1.119,2392,1.119,2397,1.993,2398,1.119,2399,1.993,2400,1.119,2401,1.993,2403,1.186,2404,1.993,2408,1.119,2409,1.993,2410,1.119,2413,1.119,2416,2.275,2417,2.275,2418,5.803,2419,3.077,2420,2.858,2421,7.568,2422,2.114,2423,7.199,2424,2.275,2425,2.275,2426,2.275,2427,2.275,2428,2.275,2429,2.275,2430,2.275,2431,2.275,2432,2.275,2433,2.275,2434,2.275,2435,2.275,2436,4.413,2437,5.499,2438,5.499,2439,7.861,2440,7.455,2441,5.499,2442,2.114,2443,2.114,2444,2.114,2445,3.735,2446,2.275,2447,2.275,2448,2.275,2449,2.275,2450,2.275,2451,2.275,2452,2.275,2453,2.275,2454,2.275,2455,2.275,2456,4.413,2457,2.114,2458,2.114,2459,2.275,2460,2.275,2461,2.275,2462,2.275,2463,2.275,2464,2.275,2465,2.275,2466,2.275,2467,2.275,2468,2.275,2469,2.275,2470,2.275,2471,4.413,2472,2.114,2475,2.275,2476,2.275,2477,4.785,2478,2.695,2479,2.858,2480,2.275,2481,2.275,2482,2.275,2483,2.275,2484,2.275,2485,2.275,2486,2.275,2487,3.077,2488,1.119,2489,1.119,2506,1.277,2507,4.751,2508,4.285,2509,2.275,2510,1.277,2511,4.285,2513,1.277,2514,2.275,2521,3.735,2523,1.277,2527,1.277,2533,1.277,2539,1.277,2540,3.077,2541,1.277,2590,1.415,2591,1.415,2592,1.415,2593,4.138,2594,1.415,2595,1.415,2596,1.415,2597,3.409,2598,2.363,2599,1.415,2600,1.415,2601,2.521,2602,2.521,2603,1.415,2604,1.415,2605,1.415,2606,1.415,2607,1.415,2608,1.415,2609,1.415,2610,1.415,2611,1.415,2612,1.415,2613,1.415,2614,1.415,2615,1.415,2616,2.521,2617,1.186,2618,1.415,2619,1.415,2620,1.415,2621,1.415,2622,1.415,2623,1.415,2624,1.415,2625,2.521,2626,1.415,2627,3.409,2628,1.415,2629,1.415,2630,1.415,2631,1.415,2632,1.415,2633,1.415,2634,1.415,2635,1.415,2636,1.415,2637,2.521,2638,2.521,2639,2.521,2640,1.415,2641,1.415,2642,3.409,2643,2.521,2644,1.415,2645,1.415,2646,1.415,2647,2.521,2648,1.415,2649,1.415,2650,1.415]],["t/538",[0,0.125,1,0.11,6,0.026,7,0.108,32,0.518,38,1.469,39,2.409,57,0.159,63,1.16,65,0.625,67,1.723,75,2.288,77,1.288,100,1.125,103,2.703,108,0.405,109,0.645,116,2.039,119,2.035,122,1.71,123,2.206,126,2.613,128,0.969,130,2.294,146,0.898,150,1.224,156,1.349,184,1.598,185,1.837,209,1.343,216,1.726,217,5.568,218,4.958,219,1.392,220,2.992,221,2.637,222,4.415,225,2.721,227,1.097,229,2.158,233,1.224,234,4.009,239,5.743,241,2.685,243,2.104,244,1.583,245,1.704,248,1.192,251,2.959,254,0.829,268,1.097,271,0.947,279,1.628,284,1.306,290,0.933,301,3.836,304,1.072,306,1.224,313,1.583,317,0.623,328,0.855,331,1.222,337,1.598,345,4.172,346,2.481,349,0.883,358,4.806,366,1.324,371,1.583,372,2.096,397,2.481,401,0.914,402,1.934,419,3.547,422,3.921,423,1.309,424,1.155,432,1.493,433,3.186,438,1.704,450,4.673,451,1.224,457,1.741,476,2.566,478,1.704,483,4.428,484,3.672,494,1.493,497,4.565,546,1.188,550,3.82,551,2.104,558,1.309,563,3.374,564,1.704,578,1.238,595,1.583,603,3.853,606,1.704,666,3.374,685,3.853,701,6.021,765,1.741,767,1.264,770,1.048,772,2.182,773,1.36,776,2.067,777,1.766,780,0.914,784,1.518,787,1.57,791,1.801,792,1.224,793,1.264,797,1.726,799,4.891,803,5.593,808,1.264,814,1.097,819,2.474,820,2.508,867,1.424,870,4.239,871,3.286,872,1.691,874,3.881,876,3.67,888,1.238,889,1.238,890,1.224,899,1.659,900,1.726,901,4.15,902,1.801,904,1.421,907,1.57,909,5.628,910,1.125,937,1.048,942,1.493,958,1.421,1017,3.284,1044,1.421,1182,2.25,1184,1.583,1186,2.25,1190,4.512,1210,1.726,1213,1.125,1249,4.503,1258,4.958,1260,4.565,1264,1.048,1268,1.934,1277,4.927,1290,4.465,1292,1.025,1346,1.264,1388,4.197,1389,4.958,1432,4.219,1460,2.694,1488,1.224,1567,1.583,1587,1.072,1599,1.583,1632,5.226,1970,5.274,2134,3.579,2149,1.704,2150,1.704,2157,2.929,2249,6.021,2284,2.25,2315,1.493,2317,5.226,2318,4.806,2359,1.421,2651,1.888,2652,1.583,2653,1.888,2654,1.704,2655,1.704,2656,3.245,2657,1.888,2658,1.888,2659,3.853,2660,2.929,2661,1.704,2662,1.704,2663,1.704,2664,1.704,2665,1.704,2666,3.245,2667,1.888,2668,1.888,2669,1.888,2670,1.309,2671,2.566,2672,1.888,2673,1.421,2674,1.888,2675,1.704,2676,1.888,2677,1.421,2678,6.232,2679,5.707,2680,6.021,2681,6.021,2682,6.67,2683,5.707,2684,8.094,2685,6.894,2686,6.232,2687,5.707,2688,5.707,2689,6.232,2690,4.268,2691,4.268,2692,4.268,2693,4.268,2694,5.066,2695,4.268,2696,4.268,2697,4.268,2698,4.268,2699,4.268,2700,4.268,2701,4.268,2702,4.268,2703,4.268,2704,4.268,2705,4.268,2706,4.268,2707,4.268,2708,4.268,2709,4.268,2710,4.268,2711,4.268,2712,4.268,2713,4.268,2714,4.268,2715,3.853,2716,4.268,2717,4.268,2718,4.268,2719,4.268,2720,4.268,2721,4.268,2722,4.268,2723,4.268,2724,4.268,2725,4.268,2726,4.268,2727,4.268,2728,4.268,2729,4.268,2730,4.268,2731,4.268,2732,4.268,2733,4.268,2734,4.268,2735,4.268,2736,4.268,2737,4.268,2738,4.268,2739,4.268,2740,4.268,2741,3.853,2742,4.268,2743,4.268,2744,4.268,2745,4.268,2746,4.268,2747,4.268,2748,4.268,2749,4.268,2750,3.853,2751,6.67,2752,3.245,2753,3.245,2754,3.245,2755,1.704,2756,1.704,2757,1.704,2758,1.704,2759,1.704,2760,4.573,2761,4.573,2762,3.245,2763,3.853,2764,4.573,2765,3.245,2766,4.573,2767,5.066,2768,1.36,2769,1.36,2770,2.338,2771,1.36,2772,1.36,2773,2.338,2774,2.338,2775,1.888,2776,1.421,2777,1.36,2778,3.075,2779,3.65,2780,1.888,2781,1.888,2782,1.888,2783,2.338,2784,3.245,2785,1.888,2786,1.888,2787,1.583,2788,1.888,2789,1.888,2790,3.245,2791,1.888,2792,1.493,2793,1.888,2794,4.268,2795,3.245,2796,1.888,2797,1.421,2798,1.704,2799,3.245,2800,1.888,2801,2.929,2802,1.36,2803,3.245,2804,2.338,2805,2.338,2806,1.36,2807,3.245,2808,3.245,2809,2.929,2810,3.245,2811,3.245,2812,1.888,2813,1.888,2814,1.888,2815,1.888]],["t/540",[0,0.19,1,0.154,6,0.026,20,3.585,57,0.221,63,1.229,67,2.185,83,1.795,103,3.117,108,0.97,109,1.291,116,3.061,122,2.973,123,2.94,124,3.258,126,3.45,128,2.271,130,4.151,132,2.08,156,1.801,185,2.759,218,4.089,220,2.979,221,2.328,222,5.143,248,2.386,270,1.82,279,3.26,290,1.421,301,5.131,306,4.931,317,3.188,330,6.325,372,3.441,379,2.845,397,2.629,433,4.502,450,3.976,451,2.931,457,1.845,483,2.227,484,2.728,497,5.71,578,2.902,765,2.652,776,3.104,777,1.871,784,4.673,787,4.024,791,3.606,799,4.437,819,3.301,820,3.346,841,3.456,867,2.852,870,4.353,876,2.357,888,1.725,889,1.725,901,4.521,907,4.262,909,2.456,1041,4.35,1042,4.505,1210,3.456,1213,2.695,1268,3.873,1432,2.357,1508,3.575,1547,4.505,1557,3.258,1565,2.931,2270,3.575,2501,5.449,2617,5.449,2670,3.135,2802,3.258,2804,4.682,2805,4.682,2806,3.258,2816,8.528,2817,8.316,2818,3.402,2819,6.499,2820,4.522,2821,6.499,2822,4.522,2823,4.522,2824,4.522,2825,7.607,2826,4.522,2827,4.522,2828,4.522,2829,4.522,2830,4.522,2831,8.316,2832,6.499,2833,9.17,2834,4.522,2835,4.522,2836,4.522,2837,4.522,2838,4.522,2839,4.522,2840,4.522,2841,4.522,2842,6.499,2843,4.522]],["t/542",[0,0.113,1,0.056,6,0.026,8,0.202,39,0.42,56,0.849,57,0.227,63,1.261,65,0.508,67,1.687,83,0.659,103,2.731,108,0.356,109,0.577,119,0.507,122,2.345,123,1.495,126,3.101,128,1.385,130,2.623,132,1.78,136,2.519,146,2.207,156,1.671,184,1.43,198,3.541,209,0.687,220,3.398,221,2.076,222,4.278,229,2.244,231,4.419,241,3.315,247,1.016,248,2.128,249,1.313,250,1.249,254,0.729,269,0.942,270,3.441,279,4.745,284,0.668,286,1.196,290,1.267,299,0.74,300,2.507,301,4.022,302,5.349,304,3.289,305,4.176,306,2.507,317,2.611,324,3.948,328,3.391,331,1.093,350,1.648,366,2.15,372,1.92,379,1.045,387,3.315,396,2.91,398,1.196,401,0.803,402,2.305,403,0.776,418,0.865,423,1.151,433,4.687,451,1.076,457,2.364,482,3.879,483,1.905,484,1.624,497,6.171,503,1.045,541,1.045,551,2.507,558,3.216,565,1.076,572,1.016,578,2.38,581,1.255,585,1.016,591,4.164,765,3.951,770,0.921,772,3.699,776,1.578,777,1.92,780,1.405,784,2.71,786,1.313,787,2.804,791,1.611,797,1.544,799,5.25,804,1.016,810,1.151,819,3.063,820,3.105,841,5.407,843,0.989,867,1.274,870,4.319,876,1.513,888,0.633,889,0.633,899,1.484,900,2.802,901,3.703,902,0.921,907,2.55,1041,1.943,1042,2.013,1081,1.249,1105,0.865,1142,7.994,1178,2.092,1179,3.653,1186,2.013,1188,4.884,1193,1.151,1210,2.057,1211,0.989,1213,0.989,1219,1.196,1226,1.392,1231,1.151,1249,3.224,1253,2.91,1258,4.371,1260,3.007,1264,2.147,1268,1.73,1292,0.902,1294,1.016,1325,2.295,1326,1.313,1375,3.244,1388,1.826,1389,4.371,1393,1.313,1394,1.313,1423,2.682,1430,1.196,1460,1.544,1488,1.076,1507,1.499,1510,1.045,1523,2.434,1557,1.196,1565,2.507,1584,1.882,1627,1.249,1645,3.058,1712,1.313,1724,3.058,1911,4.757,2270,1.313,2284,2.013,2342,1.249,2440,1.392,2474,1.392,2598,4.017,2670,2.682,2673,2.184,2677,1.249,2750,1.499,2768,1.196,2769,1.196,2770,2.092,2771,1.196,2772,1.196,2773,2.092,2774,2.092,2776,1.249,2777,1.196,2778,6.859,2779,3.343,2783,2.787,2792,4.932,2797,1.249,2802,1.196,2804,2.092,2805,2.092,2806,1.196,2818,2.184,2844,6.239,2845,2.62,2846,3.868,2847,1.66,2848,1.313,2849,2.903,2850,1.66,2851,3.668,2852,2.295,2853,2.903,2854,3.868,2855,5.27,2856,6.619,2857,2.903,2858,1.66,2859,2.903,2860,1.499,2861,2.62,2862,1.499,2863,7.717,2864,5.27,2865,6.899,2866,6.76,2867,5.27,2868,5.27,2869,7.236,2870,6.948,2871,4.639,2872,1.66,2873,6.239,2874,1.66,2875,3.492,2876,2.62,2877,2.903,2878,1.66,2879,2.62,2880,2.903,2881,1.66,2882,1.66,2883,1.66,2884,1.66,2885,2.62,2886,1.66,2887,1.66,2888,1.66,2889,1.66,2890,2.62,2891,1.66,2892,1.66,2893,1.66,2894,2.62,2895,1.66,2896,1.66,2897,1.66,2898,2.62,2899,1.66,2900,1.66,2901,1.66,2902,2.62,2903,1.66,2904,1.66,2905,1.66,2906,1.66,2907,1.66,2908,1.66,2909,1.66,2910,1.66,2911,3.492,2912,2.62,2913,2.62,2914,2.62,2915,2.62,2916,2.62,2917,2.62,2918,1.66,2919,4.188,2920,1.66,2921,2.903,2922,1.66,2923,1.66,2924,3.868,2925,3.868,2926,3.868,2927,3.868,2928,2.903,2929,1.66,2930,1.66,2931,1.66,2932,1.499,2933,6.47,2934,5.974,2935,5.974,2936,5.231,2937,2.62,2938,5.55,2939,2.295,2940,1.249,2941,1.313,2942,5.231,2943,6.239,2944,1.499,2945,1.499,2946,2.62,2947,1.499,2948,3.492,2949,1.499,2950,1.499,2951,1.499,2952,1.66,2953,1.66,2954,1.66,2955,1.66,2956,1.313,2957,1.313,2958,1.249,2959,3.244,2960,6.639,2961,2.91,2962,1.392,2963,3.89,2964,2.91,2965,2.434,2966,1.392,2967,1.392,2968,3.89,2969,1.392,2970,4.419,2971,1.392,2972,1.392,2973,3.244,2974,2.184,2975,1.249,2976,1.249,2977,3.668,2978,2.295,2979,1.392,2980,3.89,2981,1.392,2982,2.434,2983,1.392,2984,1.392,2985,1.392,2986,1.392,2987,1.392,2988,1.392,2989,1.392,2990,1.392,2991,1.249,2992,2.184,2993,1.392,2994,3.89,2995,3.244,2996,2.434,2997,1.66,2998,1.392,2999,2.184,3000,1.392,3001,1.499,3002,3.492,3003,1.499]],["t/544",[0,0.166,1,0.11,6,0.026,7,0.048,8,0.225,39,0.477,56,3.181,57,0.304,63,1.548,65,0.805,67,1.847,83,0.748,92,0.963,94,1.788,101,1.023,103,2.701,108,0.404,109,0.643,116,1.303,119,0.988,122,2.101,123,2.842,126,2.755,128,0.967,130,2.818,143,0.963,146,2.026,156,1.348,184,1.595,185,1.175,197,1.417,209,1.34,220,3.369,221,1.526,222,4.413,229,1.815,234,1.567,241,4.192,248,2.286,250,1.417,254,1.421,270,1.303,279,2.859,290,1.246,300,2.762,301,4.215,302,5.964,304,1.069,306,2.762,317,2.963,328,0.853,331,0.709,366,2.325,372,2.093,379,3.183,383,3.833,384,3.123,385,7.213,386,7.213,387,3.183,394,0.827,396,5.013,397,1.095,398,4.801,399,3.07,401,1.567,402,3.396,403,4.914,418,0.982,433,3.9,450,1.152,451,1.221,457,2.719,483,3.622,484,1.788,497,5.576,503,1.185,551,3.694,558,4.877,565,1.221,572,1.152,578,2.375,579,1.722,675,6.166,765,3.908,770,2.364,772,4.134,775,1.489,776,1.738,777,2.757,784,2.366,787,2.448,791,1.797,797,2.69,799,5.278,804,1.152,808,1.261,819,2.471,820,2.505,823,1.261,841,5.441,867,1.421,870,4.237,876,2.221,888,0.719,889,0.719,899,2.178,900,3.31,901,3.951,902,2.364,907,2.062,909,1.759,958,3.206,964,1.58,974,1.489,1017,1.221,1021,2.561,1041,2.168,1042,2.954,1105,1.688,1138,1.58,1179,3.951,1186,3.507,1189,1.357,1193,1.306,1210,2.69,1211,1.93,1213,1.123,1219,2.334,1231,1.306,1249,4.499,1258,5.088,1260,3.694,1264,3.454,1267,1.58,1268,1.93,1292,1.759,1388,2.038,1389,5.088,1423,3.951,1430,1.357,1432,0.982,1460,1.002,1488,2.1,1510,1.185,1557,1.357,1565,2.1,1584,2.1,1714,1.261,2181,1.58,2239,1.58,2284,3.507,2598,2.245,2670,2.954,2671,1.489,2673,1.417,2675,1.7,2677,1.417,2685,1.7,2768,2.334,2769,2.334,2770,3.645,2771,2.334,2772,2.334,2773,3.645,2774,3.645,2776,1.417,2777,2.334,2778,4.801,2779,4.106,2783,4.106,2787,2.716,2797,1.417,2798,1.7,2802,1.357,2804,2.334,2805,2.334,2806,1.357,2818,1.417,2848,1.489,2851,3.999,2852,2.561,2865,6.085,2866,6.225,2939,4.921,2940,1.417,2941,1.489,2956,1.489,2957,1.489,2958,2.437,2961,4.288,2964,2.437,2974,3.806,2975,2.437,2976,2.437,2977,4.506,2978,2.561,2991,2.437,2992,4.288,3004,1.7,3005,1.884,3006,1.7,3007,1.7,3008,1.7,3009,1.7,3010,1.7,3011,1.7,3012,1.7,3013,1.7,3014,1.7,3015,1.7,3016,6.638,3017,5.144,3018,5.618,3019,1.884,3020,1.884,3021,3.239,3022,3.239,3023,3.239,3024,3.239,3025,3.239,3026,6.224,3027,3.239,3028,3.239,3029,3.239,3030,3.239,3031,3.239,3032,1.884,3033,4.261,3034,4.261,3035,4.261,3036,4.261,3037,1.7,3038,1.7,3039,4.566,3040,1.7,3041,4.566,3042,1.7,3043,1.7,3044,1.7,3045,1.7,3046,1.7,3047,1.884,3048,1.884,3049,1.884,3050,1.884,3051,1.884,3052,1.884,3053,1.884,3054,1.884,3055,1.884,3056,1.884,3057,2.924,3058,2.924,3059,2.924,3060,2.924,3061,3.239,3062,3.239,3063,3.239,3064,3.239,3065,1.884,3066,3.239,3067,3.239,3068,4.261,3069,1.884,3070,1.884,3071,1.884,3072,1.884,3073,1.884,3074,1.884,3075,3.239,3076,1.884,3077,1.884,3078,3.239,3079,1.884,3080,1.884,3081,1.7,3082,1.884,3083,1.884,3084,1.7,3085,1.884,3086,1.58,3087,5.059,3088,1.7,3089,1.7,3090,1.884,3091,1.884,3092,1.884,3093,1.884,3094,1.884,3095,5.059,3096,1.884,3097,1.884,3098,1.884,3099,1.884,3100,1.884,3101,1.884,3102,4.261,3103,1.884,3104,1.884,3105,5.059,3106,4.261,3107,4.261,3108,1.7,3109,3.239,3110,1.884,3111,5.059,3112,1.884,3113,1.884,3114,1.884,3115,1.884,3116,1.884,3117,1.7,3118,1.7,3119,1.884,3120,1.7,3121,1.7,3122,1.884,3123,1.884]],["t/546",[0,0.312,1,0.348,6,0.024,15,2.597,21,0.129,23,0.121,24,2.556,32,2.225,42,1.889,57,0.45,77,2.446,103,3.457,108,1.09,109,1.402,126,2.764,166,5.677,167,4.005,174,2.754,185,1.843,219,1.657,221,3.138,233,5.255,234,2.459,240,3.294,246,4.574,262,2.417,269,2.884,273,4.96,279,2.549,325,3.291,338,2.549,342,3.678,343,4.377,353,3.197,374,3.476,400,4.394,401,2.459,424,3.109,435,4.26,465,6.099,503,5.1,504,2.164,513,4.017,548,2.953,577,6.072,578,2.692,579,4.311,581,4.545,585,3.109,804,3.109,837,3.522,843,3.028,844,3.522,847,3.823,876,2.648,889,1.938,937,2.819,956,5.427,1134,5.579,1143,3.823,1152,3.522,1169,3.197,1182,3.522,1229,4.017,1354,5.62,1457,3.823,1518,3.401,1587,4.601,1589,3.294,1648,5.579,2255,6.816,2258,4.017,2260,4.017,2261,7.53,3124,3.823,3125,3.823,3126,3.823,3127,6.797,3128,7.344,3129,4.26,3130,4.26,3131,7.906,3132,4.26,3133,5.917,3134,4.26,3135,6.797,3136,4.26,3137,4.26,3138,4.586,3139,4.586,3140,4.586,3141,4.586,3142,7.986,3143,5.081,3144,4.26,3145,4.26,3146,4.26,3147,4.26,3148,5.917,3149,4.26,3150,5.917,3151,5.917,3152,4.26,3153,5.917,3154,4.26,3155,4.26,3156,4.26,3157,4.26,3158,6.797,3159,4.586,3160,4.26,3161,4.26,3162,4.26,3163,6.099,3164,4.26,3165,4.586,3166,5.917,3167,4.26,3168,4.26,3169,4.26,3170,4.586,3171,4.26]],["t/548",[0,0.314,1,0.346,6,0.024,15,2.527,21,0.125,23,0.118,24,2.519,32,2.193,42,1.838,57,0.446,77,2.411,103,3.431,108,1.06,109,1.375,126,2.711,166,5.906,167,4.534,174,2.731,185,1.793,219,3.161,221,3.264,233,5.178,234,2.392,240,3.204,246,4.487,262,2.351,269,2.806,273,4.887,279,2.48,325,1.708,338,2.48,342,3.608,343,4.491,353,3.11,374,3.41,400,4.342,401,2.392,424,3.024,435,4.145,465,6.01,503,5.026,504,2.106,513,3.908,548,2.873,576,3.908,577,6.316,578,2.641,579,4.248,581,4.555,585,3.024,804,3.024,819,1.962,833,3.908,837,3.427,843,2.946,844,3.427,847,3.719,876,2.577,888,1.886,889,1.886,937,2.743,956,5.348,1134,5.473,1143,3.719,1152,3.427,1169,3.11,1182,3.427,1229,3.908,1253,3.719,1354,5.538,1457,3.719,1518,3.309,1587,4.534,1589,3.204,1648,5.473,2255,6.831,2258,3.908,2260,3.908,2261,7.465,3124,3.719,3125,3.719,3126,3.719,3127,6.698,3128,7.257,3129,4.145,3130,4.145,3132,4.145,3133,5.805,3134,4.145,3135,6.698,3136,4.145,3137,4.145,3138,4.462,3139,4.462,3140,4.462,3141,4.462,3142,7.918,3144,4.145,3145,4.145,3146,4.145,3147,4.145,3148,5.805,3149,4.145,3150,5.805,3151,5.805,3152,4.145,3153,5.805,3154,4.145,3155,4.145,3156,4.145,3157,4.145,3158,6.698,3159,4.462,3160,4.145,3161,4.145,3162,4.145,3163,6.01,3164,4.145,3166,5.805,3167,4.145,3168,4.145,3169,4.145,3171,4.145,3172,9.111,3173,6.922,3174,4.944,3175,4.944,3176,4.944]],["t/550",[0,0.313,1,0.347,6,0.024,15,2.71,21,0.134,23,0.126,24,2.614,32,2.276,42,1.972,57,0.457,77,2.502,103,3.415,108,1.137,109,1.444,126,2.077,166,5.781,167,4.125,174,2.702,185,1.923,219,1.729,221,3.195,233,3.437,234,2.566,240,3.437,246,3.437,262,2.522,269,3.01,273,5.072,279,2.66,325,3.082,338,2.66,342,3.787,343,3.943,374,3.579,400,4.159,401,2.566,424,3.244,465,6.238,503,5.216,504,2.258,548,3.082,576,5.745,577,6.183,578,2.772,579,4.409,581,4.544,585,3.244,804,3.244,837,3.676,843,3.16,844,3.676,847,3.989,888,2.023,889,2.023,937,2.942,956,5.55,1134,5.745,1143,3.989,1152,3.676,1169,3.336,1229,4.192,1354,5.038,1457,3.989,1518,3.549,1587,4.125,1589,3.437,1648,4.192,2255,6.814,2258,4.192,2260,4.192,2261,7.387,3124,3.989,3125,3.989,3126,3.989,3127,6.952,3128,7.479,3129,4.446,3130,4.446,3131,7.483,3132,4.446,3133,6.093,3134,4.446,3135,6.952,3136,4.446,3137,4.446,3142,8.092,3144,4.446,3145,4.446,3146,4.446,3147,4.446,3148,6.093,3149,4.446,3150,6.093,3151,6.093,3152,4.446,3153,6.093,3154,4.446,3155,4.446,3156,4.446,3157,4.446,3158,6.952,3160,4.446,3161,4.446,3162,4.446,3163,6.238,3164,4.446,3165,4.786,3166,6.093,3167,4.446,3168,4.446,3169,4.446,3170,4.786,3171,4.446,3177,5.302,3178,5.302]],["t/552",[0,0.311,1,0.332,6,0.026,25,1.655,32,1.522,42,3.154,57,0.271,63,2.035,65,0.994,80,3.099,83,2.201,108,1.189,109,1.805,126,3.323,146,2.636,150,5.499,166,5.889,167,4.251,219,2.442,221,2.683,229,3.613,233,3.593,234,2.682,273,3.391,303,6.835,325,3.379,338,3.757,342,3.904,343,3.562,374,3.689,400,3.757,401,2.682,402,3.303,426,6.835,471,5.19,483,2.73,504,3.19,548,3.222,577,5.881,578,3.236,579,4.831,674,4.171,765,2.262,799,4.732,870,3.869,871,2.73,874,2.73,876,2.889,888,2.115,889,2.115,904,4.171,905,6.382,1104,6.28,1130,4.383,1133,3.076,1262,3.994,1263,4.383,1264,3.076,1381,4.648,1432,3.904,1518,5.014,1587,4.815,1589,3.593,1714,5.678,1964,3.994,2242,4.383,2243,4.383,2254,5.192,2318,3.994,3124,4.171,3125,4.171,3126,4.171,3163,4.171,3179,5.004,3180,6.28,3181,4.648,3182,4.648,3183,4.648,3184,4.648,3185,6.28,3186,5.922,3187,4.648,3188,4.648,3189,6.28,3190,4.648,3191,4.648,3192,6.28,3193,8.526,3194,4.648,3195,4.648,3196,6.28,3197,4.648,3198,4.648,3199,4.648,3200,5.004,3201,5.004,3202,5.004,3203,5.004,3204,5.004]],["t/554",[0,0.313,1,0.332,6,0.026,25,1.652,42,3.152,57,0.271,63,2.033,65,0.994,80,3.096,83,2.197,108,1.187,109,1.804,126,3.32,146,2.632,150,5.494,166,5.885,167,4.247,219,2.439,221,2.68,229,3.61,233,3.587,234,2.678,273,3.386,303,6.831,325,3.377,338,3.753,342,3.899,343,3.558,374,3.685,400,3.753,401,2.678,402,3.298,426,6.831,471,5.185,483,2.726,504,3.186,548,3.217,576,4.375,577,5.876,578,3.234,579,4.828,674,4.164,765,2.258,799,4.73,870,3.867,871,2.726,874,2.726,876,2.884,888,2.111,889,2.111,904,4.164,905,6.377,1104,6.273,1130,4.375,1133,3.071,1262,3.987,1263,4.375,1264,3.071,1381,4.64,1432,3.899,1518,5.008,1587,4.811,1589,3.587,1714,5.674,1964,3.987,2242,4.375,2243,4.375,2254,5.187,2318,3.987,3124,4.164,3125,4.164,3126,4.164,3163,4.164,3179,4.995,3180,6.273,3181,4.64,3182,4.64,3183,4.64,3184,4.64,3185,6.273,3186,5.915,3187,4.64,3188,4.64,3189,6.273,3190,4.64,3191,4.64,3192,6.273,3193,8.523,3194,4.64,3195,4.64,3196,6.273,3197,4.64,3198,4.64,3199,4.64,3200,4.995,3201,4.995,3202,4.995,3203,4.995,3204,4.995]],["t/556",[0,0.151,1,0.113,6,0.026,7,0.049,8,0.213,20,0.64,39,0.491,56,3.233,57,0.284,63,1.837,65,1.013,67,1.865,72,3.388,92,1.698,94,1.829,101,1.804,103,2.733,108,0.416,109,0.66,116,1.337,119,1.014,122,2.135,123,1.684,126,2.793,128,0.992,130,2.864,143,1.698,146,2.072,156,1.37,184,1.636,185,1.205,197,1.46,209,1.375,220,3.546,221,1.561,222,4.443,229,1.856,241,4.255,248,2.13,250,1.46,254,1.458,270,2.076,279,3.392,290,1.268,300,2.824,301,4.26,302,5.666,306,2.824,317,2.908,331,0.731,366,2.759,372,2.135,379,3.246,384,1.083,385,2.786,387,3.246,394,3.389,395,8.353,396,5.088,397,5.702,398,4.873,399,3.139,401,1.608,402,4.03,403,3.483,416,1.011,418,1.011,433,3.947,450,1.187,451,1.258,457,3.039,483,3.513,484,1.395,497,5.419,551,4.384,558,4.944,565,1.258,572,1.187,578,2.413,675,1.627,765,3.737,770,2.863,772,4.178,776,1.778,777,3.082,784,2.413,787,2.497,791,1.844,797,2.744,799,5.226,804,1.187,808,2.224,819,2.511,820,2.546,823,1.299,841,5.089,867,1.458,870,4.104,876,2.271,888,0.74,889,0.74,899,2.227,900,3.364,901,3.988,902,2.418,907,2.108,958,3.882,964,1.627,1017,2.154,1021,4.079,1041,2.224,1042,2.303,1105,1.732,1138,1.627,1179,4.688,1186,3.577,1189,1.398,1193,1.345,1210,2.744,1211,1.98,1213,1.156,1219,2.394,1231,1.345,1249,4.871,1258,5.547,1260,4.384,1264,2.863,1267,1.627,1268,1.98,1292,1.804,1388,2.09,1389,5.547,1423,4.688,1430,1.398,1432,1.011,1460,1.767,1488,2.154,1510,1.221,1523,3.98,1557,2.394,1565,2.154,1584,2.154,1714,2.224,2181,2.786,2239,2.786,2284,3.577,2598,2.303,2670,3.02,2671,1.534,2673,1.46,2677,1.46,2768,2.394,2769,2.394,2770,3.718,2771,2.394,2772,2.394,2773,3.718,2774,3.718,2777,2.394,2778,5.564,2779,4.873,2783,4.873,2787,1.627,2802,1.398,2804,2.394,2805,2.394,2806,1.398,2818,1.46,2848,1.534,2851,4.079,2852,2.627,2865,1.46,2866,5.347,2939,4.079,2940,1.46,2941,1.534,2956,1.534,2957,1.534,2958,2.5,2961,5.088,2964,2.5,2974,3.882,2975,2.5,2976,2.5,2991,2.5,2992,5.088,2999,2.5,3004,1.751,3006,1.751,3007,1.751,3008,1.751,3009,1.751,3010,1.751,3011,1.751,3012,1.751,3013,1.751,3014,1.751,3015,1.751,3016,2.999,3017,1.751,3018,1.751,3037,1.751,3038,1.751,3039,2.999,3040,1.751,3041,2.999,3042,1.751,3043,1.751,3044,1.751,3045,1.751,3046,1.751,3057,2.999,3058,2.999,3059,2.999,3060,2.999,3081,1.751,3084,1.751,3086,1.627,3088,2.999,3089,2.999,3108,2.999,3117,2.999,3118,2.999,3120,2.999,3121,2.999,3205,1.94,3206,8.173,3207,1.94,3208,1.94,3209,3.322,3210,5.16,3211,5.801,3212,3.322,3213,3.322,3214,3.322,3215,7.132,3216,1.94,3217,1.94,3218,4.357,3219,5.16,3220,3.322,3221,3.322,3222,3.322,3223,3.322,3224,3.322,3225,3.322,3226,3.322,3227,1.94,3228,3.322,3229,1.94,3230,1.94,3231,1.94,3232,1.94,3233,1.94,3234,5.16,3235,1.94,3236,4.357,3237,1.94,3238,1.94,3239,3.322,3240,5.801,3241,4.357,3242,1.94,3243,1.94,3244,3.322,3245,5.16,3246,7.132,3247,5.16,3248,1.94,3249,5.16,3250,1.94,3251,5.801,3252,5.16,3253,1.94,3254,3.322,3255,1.94,3256,1.94,3257,1.94,3258,1.94,3259,1.94,3260,1.94,3261,1.94,3262,1.94,3263,4.357,3264,4.357,3265,1.94,3266,1.94,3267,1.94,3268,1.94,3269,1.94,3270,1.94]],["t/558",[0,0.272,1,0.317,5,0.942,6,0.018,7,0.236,8,0.204,9,0.258,10,0.216,11,0.21,12,0.235,13,0.316,14,0.229,17,1.399,19,1.615,21,0.253,22,0.992,23,0.186,26,0.473,46,2.021,57,0.383,59,0.838,60,1.831,65,0.856,72,3.382,73,2.873,107,2.083,111,0.272,119,2.387,182,2.873,384,2.551,389,3.238,390,2.61,391,3.238,392,2.803,393,4.222,394,3.433,408,3.721,409,3.721,410,4.436,411,3.721,599,0.648]],["t/560",[0,0.184,1,0.112,6,0.027,19,2.118,24,1.041,41,0.955,47,3.601,57,0.161,65,0.931,67,2.33,77,2.324,103,1.168,108,0.708,109,1.252,122,1.114,123,1.985,126,3.333,128,1.533,132,2.362,134,3.23,136,3.421,143,5.008,146,2.442,156,1.765,220,3.837,221,3.048,229,3.747,248,3.231,254,2.765,263,1.721,271,3.862,290,1.123,292,2.077,331,1.243,361,2.21,372,2.941,378,2.73,400,1.656,401,1.598,419,2.73,426,3.863,474,2.768,483,3.103,484,3.232,504,1.406,532,2.61,541,3.23,548,4.475,552,6.619,578,3.357,581,1.427,770,5.015,772,1.688,776,1.347,777,1.366,784,1.544,787,2.485,802,3.863,806,4.059,808,3.437,810,3.56,812,3.7,814,2.984,816,4.305,818,4.059,819,3.236,820,3.845,867,3.379,870,3.472,871,4.015,872,4.435,874,4.191,888,1.26,907,2.485,909,2.788,910,1.967,929,3.7,1017,5.516,1030,2.379,1108,2.61,1141,2.21,1180,2.61,1210,3.351,1211,3.755,1212,4.218,1213,3.06,1214,3.7,1215,4.059,1216,3.863,1245,6.652,1288,3.863,1345,2.98,1430,2.379,1432,1.721,1446,5.283,1450,2.768,1452,2.98,1458,4.927,1460,4.525,1490,5.348,1492,2.98,1510,2.077,1520,3.863,1562,2.98,1576,6.95,1577,2.98,1578,5.687,1602,6.133,1607,9.358,1902,2.768,1964,2.379,1966,2.768,1970,2.61,2242,2.61,2243,2.61,2244,2.98,2251,2.98,2253,2.98,2331,3.863,3271,3.301,3272,9.151,3273,5.134,3274,3.301,3275,3.301,3276,5.134,3277,5.134,3278,5.134,3279,5.134,3280,5.134,3281,5.134,3282,5.134,3283,5.134,3284,5.134,3285,5.134,3286,5.134,3287,8.509,3288,3.301,3289,3.301,3290,3.301,3291,3.301,3292,3.301,3293,3.301,3294,3.301,3295,5.134,3296,5.134,3297,3.301,3298,3.301,3299,3.301,3300,3.301]],["t/562",[0,0.134,1,0.071,6,0.026,8,0.219,20,0.686,39,0.527,56,1.802,57,0.264,63,1.468,65,0.591,67,1.87,83,0.826,103,2.324,108,0.446,109,0.7,119,0.635,122,2.678,123,1.773,126,3.108,128,1.613,130,2.972,146,2.182,156,1.66,184,1.736,198,3.971,209,0.861,220,3.684,221,2.352,222,4.513,229,2.574,241,3.803,248,2.22,249,1.645,250,1.565,254,0.913,269,1.181,270,3.368,279,4.76,290,1.321,295,1.084,299,4.504,300,2.974,301,4.256,302,5.803,303,5.264,304,3.727,305,4.684,306,2.974,317,2.921,331,0.783,366,2.466,372,2.235,379,1.309,387,3.803,396,3.451,398,1.499,401,1.007,402,2.734,403,0.973,418,1.084,423,1.442,433,4.655,451,1.348,457,2.679,483,1.736,484,1.48,487,1.181,497,5.973,541,1.309,551,2.974,558,3.744,565,1.348,572,1.273,578,2.669,581,0.899,591,4.402,765,3.871,770,1.154,772,4.174,776,1.872,777,2.235,780,1.007,784,2.827,787,2.925,791,1.956,797,1.875,799,5.21,804,1.273,819,3.044,820,3.286,823,1.393,841,5.161,843,1.24,867,1.547,870,4.321,876,1.837,888,0.794,889,0.794,899,1.802,900,3.214,901,3.999,902,1.154,907,2.614,1041,2.36,1042,2.444,1105,1.084,1142,7.811,1178,2.54,1179,4.851,1186,2.444,1188,4.545,1193,1.442,1210,2.44,1211,1.24,1213,1.24,1219,1.499,1231,1.442,1235,1.645,1249,3.698,1258,4.824,1260,3.501,1264,2.546,1268,2.101,1292,1.13,1325,2.787,1326,1.645,1346,1.393,1388,2.218,1389,4.824,1393,1.645,1394,1.645,1423,3.18,1430,1.499,1460,1.875,1488,1.348,1510,1.309,1523,2.886,1557,1.499,1565,2.285,1584,2.285,1589,1.348,1599,1.744,1627,1.565,1724,3.627,2270,1.645,2284,2.444,2598,4.552,2670,3.18,2673,2.652,2677,1.565,2768,1.499,2769,1.499,2770,2.54,2771,1.499,2772,1.499,2773,2.54,2774,2.54,2776,1.565,2777,1.499,2778,6.992,2779,3.892,2783,3.305,2792,5.191,2797,1.565,2802,1.499,2804,2.54,2805,2.54,2806,1.499,2818,1.565,2845,3.182,2848,1.645,2851,4.27,2852,2.787,2860,1.878,2861,1.878,2862,1.878,2863,6.643,2865,6.434,2866,5.532,2875,4.141,2876,3.182,2879,1.878,2885,1.878,2890,1.878,2894,1.878,2898,1.878,2902,1.878,2911,4.141,2912,1.878,2913,1.878,2914,1.878,2915,1.878,2916,1.878,2917,1.878,2919,3.182,2932,1.878,2933,7.17,2934,6.643,2935,6.643,2936,6.643,2937,3.182,2938,6.43,2939,2.787,2940,1.565,2941,1.645,2942,6.921,2944,1.878,2945,1.878,2946,3.182,2947,1.878,2948,5.456,2949,1.878,2950,1.878,2951,1.878,2956,1.645,2957,1.645,2958,1.565,2959,3.847,2960,7.17,2961,3.451,2962,1.744,2963,4.529,2964,3.451,2965,2.956,2966,1.744,2967,1.744,2968,4.529,2969,1.744,2970,5.068,2971,1.744,2972,1.744,2973,3.847,2974,2.652,2975,1.565,2976,1.565,2977,4.27,2978,2.787,2979,1.744,2980,4.529,2981,1.744,2982,2.956,2983,1.744,2984,1.744,2985,1.744,2986,1.744,2987,1.744,2988,1.744,2989,1.744,2990,1.744,2991,1.565,2992,2.652,2993,1.744,2994,4.529,2995,3.847,2996,2.956,2998,1.744,2999,2.652,3000,1.744,3001,1.878,3002,4.141,3003,1.878,3301,2.08,3302,2.08,3303,2.08,3304,1.878,3305,2.08,3306,3.525,3307,3.525,3308,2.08,3309,2.08,3310,2.08,3311,2.08,3312,2.08,3313,2.08,3314,2.08,3315,1.878]],["t/564",[0,0.046,1,0.093,6,0.025,17,0.279,26,0.166,30,1.524,31,5.581,40,0.514,41,0.451,57,0.33,59,0.167,63,1.741,64,4.927,65,0.554,67,1.833,80,2.31,103,1.79,108,0.334,109,0.545,116,2.579,117,0.455,119,0.475,122,2.873,123,2.329,126,1.738,128,0.82,130,3.185,132,1.263,133,1.043,135,1.043,136,1.491,137,1.043,138,0.928,139,1.043,154,0.928,156,1.843,174,1.064,185,2.324,192,1.423,198,1.558,218,0.98,220,3.168,221,2.52,222,3.579,226,0.928,228,2.252,229,2.567,241,0.98,247,0.953,248,2.476,254,2.645,268,1.596,271,2.8,279,2.225,284,1.785,290,0.97,299,1.64,301,0.812,305,1.043,310,3.244,314,5.053,331,1.034,337,2.749,346,2.139,349,2.61,352,2.193,372,2.31,400,1.377,401,0.754,417,3.687,418,1.918,419,1.46,422,1.727,424,0.953,433,2.268,439,3.338,457,1.502,459,1.903,484,0.654,487,1.558,497,1.01,504,2.73,539,4,540,4.004,541,2.316,542,2.478,543,2.478,544,7.029,545,2.91,546,3.183,547,3.645,550,1.043,551,1.01,558,3.075,562,1.123,572,0.953,578,2.445,581,2.605,586,2.171,679,1.406,696,1.123,765,2.064,768,1.307,770,1.524,772,1.403,773,1.123,776,2.615,777,2.79,778,3.097,779,3.031,780,2.916,781,3.08,784,2.61,785,2.769,786,1.232,787,1.781,791,2.807,792,1.78,793,1.043,794,1.978,797,2.968,799,4.545,819,3.379,820,3.426,821,0.953,824,3.802,841,2.359,843,0.928,845,1.406,846,1.978,867,2.22,870,3.57,871,1.813,872,1.918,874,1.813,876,0.812,888,0.594,889,0.594,893,1.307,899,1.403,900,1.46,901,3.616,902,0.865,907,2.916,935,0.98,937,0.865,946,0.906,947,2.066,1012,1.08,1050,1.08,1088,1.232,1105,0.812,1132,1.172,1133,0.865,1142,2.171,1145,1.406,1179,1.903,1180,2.171,1181,1.307,1186,1.903,1187,2.769,1188,1.999,1189,3.196,1190,2.91,1191,3.086,1192,3.086,1193,1.08,1195,1.232,1196,1.307,1201,1.406,1202,1.406,1210,3.205,1211,1.636,1212,1.838,1213,0.928,1214,1.123,1218,2.478,1219,1.123,1227,3.322,1228,2.97,1231,1.08,1236,2.652,1249,3.095,1252,5.374,1257,5.374,1258,0.98,1262,4.618,1264,1.524,1268,3.015,1269,1.406,1292,1.999,1294,1.68,1346,1.043,1354,1.08,1383,1.232,1388,0.98,1389,0.98,1423,1.903,1460,1.46,1488,1.01,1520,2.066,1521,2.171,1522,2.478,1523,2.316,1547,1.08,1554,1.978,1565,1.01,1575,1.172,1585,1.307,1724,2.91,1979,2.478,2005,1.406,2191,1.406,2282,1.406,2284,1.903,2501,1.307,2598,2.552,2670,1.903,2768,1.123,2769,1.123,2770,1.978,2771,1.123,2772,1.123,2773,1.978,2774,1.978,2776,1.172,2777,1.123,2778,2.652,2779,3.196,2783,2.652,2797,1.172,2865,2.769,2933,3.086,2938,3.086,2958,1.172,2959,2.302,2960,5.053,2961,2.066,2962,1.307,2963,3.72,2964,2.066,2965,1.307,2966,1.307,2967,1.307,2968,3.72,2969,1.307,2970,4.242,2971,1.307,2972,1.307,2973,3.086,2974,2.066,2975,1.172,2976,1.172,2977,3.507,2978,2.171,2979,1.307,2980,3.72,2981,1.307,2982,1.307,2983,1.307,2984,1.307,2985,1.307,2986,1.307,2987,1.307,2988,1.307,2989,1.307,2990,1.307,2991,1.172,2992,2.066,2993,1.307,2994,3.72,2995,3.086,2996,2.302,2998,1.307,2999,2.066,3000,1.307,3315,1.406,3316,1.558,3317,1.558,3318,1.558,3319,1.558,3320,2.746,3321,2.746,3322,1.558,3323,1.558,3324,1.558,3325,1.558,3326,1.558,3327,9.983,3328,7.919,3329,10.784,3330,1.558,3331,3.681,3332,10.929,3333,3.681,3334,3.322,3335,1.558,3336,4.436,3337,5.059,3338,9.617,3339,9.512,3340,9.617,3341,9.617,3342,9.617,3343,1.558,3344,1.558,3345,1.558,3346,1.558,3347,1.558,3348,1.558,3349,7.294,3350,1.558,3351,1.558,3352,1.558,3353,1.558,3354,1.558,3355,1.558,3356,2.746,3357,3.681,3358,2.746,3359,3.681,3360,2.746,3361,1.558,3362,2.746,3363,1.558,3364,1.558,3365,3.681,3366,1.558,3367,2.746,3368,1.558,3369,3.681,3370,4.436,3371,1.558,3372,1.558,3373,1.558,3374,1.558,3375,1.558,3376,3.681,3377,1.558,3378,1.558,3379,1.558,3380,1.406,3381,2.746,3382,1.558,3383,1.558,3384,1.558,3385,1.558,3386,3.681,3387,1.558,3388,1.558,3389,1.558,3390,1.558,3391,1.558,3392,1.558,3393,1.558,3394,1.558,3395,1.558,3396,1.558,3397,1.558,3398,1.558,3399,1.558,3400,1.558,3401,1.558,3402,1.558,3403,1.558,3404,1.558,3405,1.558,3406,1.406,3407,1.558,3408,1.558,3409,3.681,3410,1.558,3411,1.558,3412,7.525,3413,7.525,3414,1.558,3415,2.746,3416,1.558,3417,1.558,3418,1.558,3419,1.558,3420,1.558,3421,1.558,3422,1.558,3423,1.558,3424,1.558,3425,1.558,3426,1.558,3427,1.558,3428,1.558,3429,1.558,3430,1.558,3431,1.558,3432,1.558,3433,1.558,3434,1.558,3435,1.558,3436,1.558,3437,1.558,3438,1.558,3439,1.558,3440,1.558]],["t/566",[0,0.052,1,0.196,6,0.027,20,2.361,30,0.533,32,2.441,39,1.39,42,3.82,57,0.282,63,1.492,65,1.159,67,0.21,75,1.905,80,3.133,83,2.18,87,3.879,103,1.587,105,0.692,106,4.224,108,0.206,109,1.031,115,3.363,116,0.994,119,1.583,122,1.216,123,1.573,124,0.692,126,2.258,128,0.918,132,2.387,143,1.841,146,0.843,156,1.189,167,2.945,174,0.513,178,1.858,185,1.115,192,0.371,209,0.397,220,2.965,221,0.635,226,1.472,229,4.521,234,0.465,235,0.622,247,0.587,248,0.651,251,0.666,254,3.516,270,2.881,278,0.442,280,2.637,284,2.21,290,0.672,304,0.545,310,2.365,311,4.382,317,2.915,328,3.241,331,2.172,335,4.38,337,1.774,338,1.239,349,0.449,366,2.117,371,0.805,372,1.022,374,2.556,379,0.604,400,1.807,401,1.969,402,2.893,414,2.292,415,0.482,419,0.511,422,3.628,423,0.666,439,1.858,457,2.117,471,6.43,476,1.402,480,2.603,483,3.277,484,2.305,494,0.759,503,0.604,504,3.275,527,1.554,535,0.867,536,1.953,547,0.692,549,2.43,551,0.622,578,3.372,579,3.958,674,3.061,765,2.455,767,0.643,776,1.008,777,0.734,784,0.449,787,0.465,793,0.643,797,0.943,799,4.121,819,2.18,820,2.21,821,1.085,867,0.421,870,3.412,871,2.705,874,2.705,876,0.5,888,0.366,889,0.366,901,1.685,905,7.718,909,3.131,910,1.832,911,0.805,931,1.187,935,1.115,961,0.759,1041,1.187,1042,1.229,1044,1.334,1046,0.805,1050,1.229,1087,1.334,1105,0.5,1130,0.759,1133,2.694,1144,0.759,1152,1.229,1188,0.521,1195,0.759,1228,0.643,1262,2.932,1263,3.217,1264,0.984,1268,1.832,1414,0.604,1432,3.945,1508,0.759,1575,0.722,1602,2.71,1714,7.062,1783,0.805,1964,0.692,2086,4.956,2154,2.577,2156,0.805,2172,2.071,2262,7.14,2263,0.867,2271,0.867,2309,0.867,2318,3.956,2598,2.131,2617,1.487,2652,0.805,3180,5.045,3181,4.604,3182,4.071,3183,4.604,3184,4.604,3185,5.045,3186,4.757,3187,3.412,3188,3.412,3189,5.045,3190,3.412,3191,3.412,3192,6.24,3193,9.083,3194,4.604,3195,4.604,3196,6.24,3197,4.604,3198,4.604,3199,4.604,3334,1.6,3406,2.229,3441,1.773,3442,0.96,3443,1.773,3444,3.602,3445,1.773,3446,0.96,3447,0.96,3448,0.96,3449,0.867,3450,1.773,3451,1.773,3452,5.491,3453,5.491,3454,5.491,3455,7.305,3456,0.96,3457,5.189,3458,5.189,3459,5.189,3460,8.197,3461,5.189,3462,5.189,3463,8.838,3464,5.189,3465,5.189,3466,5.189,3467,4.484,3468,4.484,3469,4.484,3470,3.602,3471,3.602,3472,3.074,3473,3.074,3474,3.074,3475,3.074,3476,0.96,3477,3.074,3478,0.96,3479,0.96,3480,0.96,3481,0.96,3482,0.96,3483,0.96,3484,3.074,3485,0.96,3486,0.96,3487,7.91,3488,0.96,3489,0.96,3490,0.96,3491,1.773,3492,1.773,3493,1.773,3494,1.773,3495,0.96,3496,1.773,3497,0.96,3498,0.96,3499,0.96,3500,1.773,3501,0.96,3502,0.96,3503,0.96,3504,3.074,3505,1.773,3506,1.773]],["t/568",[0,0.013,1,0.008,6,0.027,7,0.076,11,0.012,14,0.007,15,0.448,17,1.583,19,0.048,20,0.15,21,0.012,23,0.074,26,0.028,30,0.487,31,0.119,47,0.326,56,0.448,57,0.022,59,0.049,63,0.847,64,0.121,65,1.174,67,0.394,71,0.487,75,1.939,77,0.862,80,1.822,83,3.603,86,0.259,96,2.059,100,0.139,101,0.247,103,1.147,105,0.328,108,0.05,109,1.035,115,4.132,116,0.656,119,2.179,122,1.828,123,3.91,126,1.983,128,0.487,129,0.287,130,1.034,132,0.21,143,0.233,146,0.857,149,0.272,156,1.08,162,0.168,166,0.151,167,2.499,178,0.504,179,0.625,185,0.46,198,1.296,199,0.792,209,0.524,214,0.41,215,3.997,216,3.364,217,3.257,218,2.881,219,0.351,220,2.757,221,1.94,222,1.599,223,1.092,224,0.562,225,0.902,226,0.641,227,3.401,228,2.46,229,1.987,230,1.627,231,1.063,232,1.144,233,0.295,234,4.09,235,0.295,236,0.587,237,0.343,244,0.382,247,0.888,248,0.662,251,0.746,256,4.282,262,2.178,266,0.146,267,0.21,268,0.844,269,0.259,270,0.353,271,1.365,273,0.142,281,3.107,290,0.499,297,2.178,298,0.253,301,1.19,304,0.498,308,0.343,310,0.39,313,0.195,343,0.111,347,0.195,349,0.995,350,0.259,351,0.523,357,0.746,359,0.139,361,0.156,366,1.052,372,0.277,374,1.93,375,0.279,376,0.21,379,0.287,394,0.2,397,1.66,400,1.365,401,1.508,402,2.455,403,0.109,417,0.537,418,0.238,419,1.658,422,1.134,423,0.465,432,0.184,433,0.448,450,2.267,451,0.151,456,0.75,459,0.161,470,0.139,471,6.096,476,0.53,480,2.017,482,0.156,483,2.339,484,1.645,487,1.382,494,1.289,497,0.295,504,0.458,515,0.21,516,0.21,517,0.21,520,0.21,521,0.21,523,0.562,524,0.411,527,0.287,530,0.195,531,0.21,539,0.53,563,0.851,572,0.142,577,2.856,578,1.873,581,1.348,585,0.658,588,1.471,591,0.913,765,0.358,767,0.449,770,0.487,772,0.233,776,0.439,777,1.182,778,0.597,779,0.476,780,0.324,781,0.343,784,1.458,787,2.653,791,0.253,793,0.305,799,1.105,802,0.809,803,0.195,806,0.36,808,1.091,810,1.007,812,0.328,814,0.844,818,0.693,819,2.01,820,2.007,822,0.168,833,0.36,843,0.272,867,0.294,870,3.339,871,2.668,872,0.939,874,2.794,876,1.026,887,0.195,888,0.089,889,0.089,890,0.151,899,1.528,900,1.59,901,1.458,902,1.585,907,4.754,909,0.364,910,0.523,931,4.1,937,0.129,946,0.135,948,8.34,961,0.53,1017,1.057,1019,0.382,1031,0.483,1044,0.175,1047,0.21,1048,0.902,1049,0.411,1050,3.932,1103,0.21,1105,0.561,1132,7.487,1144,0.851,1151,0.21,1169,0.422,1177,0.21,1182,0.316,1188,0.978,1189,0.328,1210,0.242,1230,0.411,1235,0.184,1236,0.328,1245,0.435,1249,0.888,1259,0.21,1290,1.821,1292,0.126,1293,2.261,1294,0.142,1325,0.53,1364,1.144,1375,0.195,1393,1.683,1394,0.693,1414,0.422,1428,0.21,1432,3.528,1458,5.971,1460,1.372,1484,0.36,1486,2.465,1487,2.465,1490,0.343,1523,2.529,1547,0.879,1552,0.632,1565,0.295,1575,0.175,1584,0.151,1618,1.063,1627,0.175,1645,0.184,1783,1.65,1784,3.014,1785,1.776,1786,0.382,1879,0.382,1968,3.974,1977,0.21,2006,1.627,2028,0.21,2029,0.632,2034,0.21,2089,4.134,2131,0.168,2132,0.168,2134,0.382,2167,0.175,2172,0.562,2246,0.328,2255,0.435,2315,0.184,2317,3.692,2318,3.537,2378,0.175,2478,0.184,2550,0.792,2561,0.792,2562,0.21,2652,0.195,2654,0.411,2655,0.605,2659,0.605,2660,0.21,2661,0.21,2662,0.21,2663,0.21,2664,0.21,2665,0.21,2671,0.184,2680,0.792,2681,0.792,2715,3.719,2741,0.411,2755,0.21,2756,0.21,2757,0.21,2758,0.21,2759,0.21,2760,0.792,2761,0.792,2763,0.792,2764,0.971,2766,1.144,2792,0.184,2801,4.134,2809,0.792,2816,1.144,2940,0.343,2999,0.175,3086,0.382,3186,0.184,3272,0.411,3304,0.21,3380,0.21,3449,0.21,3507,0.232,3508,1.076,3509,0.456,3510,0.67,3511,0.232,3512,0.67,3513,0.232,3514,0.232,3515,0.232,3516,0.456,3517,0.232,3518,0.456,3519,0.67,3520,0.232,3521,0.232,3522,0.232,3523,0.232,3524,0.232,3525,1.968,3526,0.456,3527,0.456,3528,0.456,3529,0.456,3530,1.452,3531,0.232,3532,0.232,3533,0.232,3534,0.232,3535,0.456,3536,0.232,3537,0.232,3538,0.232,3539,1.076,3540,0.232,3541,0.232,3542,0.232,3543,0.232,3544,0.456,3545,0.232,3546,0.232,3547,0.232,3548,0.456,3549,0.232,3550,0.232,3551,10.575,3552,0.232,3553,0.456,3554,0.67,3555,0.456,3556,0.232,3557,0.456,3558,0.232,3559,0.232,3560,0.232,3561,0.877,3562,0.232,3563,8.048,3564,0.67,3565,1.452,3566,1.076,3567,1.076,3568,0.67,3569,3.48,3570,1.267,3571,0.232,3572,0.232,3573,1.076,3574,0.232,3575,0.232,3576,2.989,3577,0.232,3578,0.232,3579,0.456,3580,3.594,3581,9.421,3582,5.672,3583,5.279,3584,5.279,3585,5.672,3586,3.813,3587,5.416,3588,5.136,3589,3.705,3590,5.136,3591,5.61,3592,4.217,3593,5.61,3594,5.208,3595,3.918,3596,5.208,3597,5.547,3598,4.217,3599,5.547,3600,5.136,3601,4.311,3602,9.718,3603,4.217,3604,4.217,3605,4.217,3606,8.485,3607,9.86,3608,4.02,3609,4.493,3610,4.58,3611,6.964,3612,4.58,3613,6.374,3614,4.58,3615,4.58,3616,4.403,3617,4.58,3618,4.58,3619,7.661,3620,5.062,3621,4.58,3622,6.125,3623,4.493,3624,6.278,3625,4.493,3626,4.493,3627,4.12,3628,4.12,3629,4.986,3630,4.12,3631,4.12,3632,3.813,3633,3.918,3634,3.918,3635,4.403,3636,0.456,3637,2.857,3638,0.232,3639,1.452,3640,1.968,3641,1.968,3642,1.968,3643,1.968,3644,1.968,3645,1.968,3646,3.363,3647,1.968,3648,1.968,3649,4.217,3650,8.469,3651,3.705,3652,3.594,3653,3.594,3654,3.705,3655,3.594,3656,0.456,3657,0.232,3658,0.877,3659,0.232,3660,3.363,3661,2.857,3662,1.076,3663,0.456,3664,0.877,3665,0.67,3666,0.456,3667,0.877,3668,1.267,3669,1.076,3670,1.267,3671,0.456,3672,1.076,3673,0.232,3674,0.456,3675,1.076,3676,1.076,3677,0.456,3678,0.877,3679,2.579,3680,0.456,3681,0.456,3682,3.117,3683,3.117,3684,0.456,3685,4.909,3686,4.909,3687,0.877,3688,0.456,3689,0.456,3690,1.63,3691,0.456,3692,0.456,3693,0.877,3694,0.456,3695,0.456,3696,0.456,3697,0.877,3698,0.456,3699,0.877,3700,0.456,3701,0.456,3702,0.456,3703,0.456,3704,0.877,3705,0.456,3706,0.456,3707,0.456,3708,0.456,3709,2.434,3710,0.232,3711,0.232,3712,0.232,3713,0.232,3714,0.232,3715,0.232,3716,0.232,3717,0.232,3718,0.456,3719,0.232,3720,0.232,3721,0.232,3722,0.232,3723,0.456,3724,0.456,3725,1.076,3726,1.076,3727,1.076,3728,0.232,3729,0.232,3730,1.076,3731,0.232,3732,1.076,3733,1.076,3734,0.456,3735,1.076,3736,1.076,3737,0.456,3738,0.232,3739,0.456,3740,0.232,3741,0.232,3742,1.802,3743,0.67,3744,2.284,3745,0.456,3746,0.456,3747,3.117,3748,0.456,3749,0.456,3750,0.232,3751,0.456,3752,0.232,3753,0.232,3754,0.232,3755,0.67,3756,0.456,3757,0.232,3758,0.232,3759,0.67,3760,0.232,3761,0.232,3762,0.232,3763,0.232,3764,0.232,3765,0.232,3766,0.232,3767,0.232,3768,0.232,3769,0.232,3770,0.232,3771,0.232,3772,0.232,3773,0.232,3774,0.232,3775,0.232,3776,0.232,3777,1.076,3778,0.456,3779,0.232,3780,0.232,3781,0.232,3782,0.456,3783,0.456,3784,0.456,3785,0.456,3786,0.232,3787,0.232,3788,0.232,3789,0.232,3790,0.877,3791,0.232,3792,0.232,3793,0.232,3794,0.456,3795,0.456,3796,1.802,3797,0.232,3798,0.232,3799,0.232,3800,0.232,3801,0.877,3802,0.232,3803,0.456,3804,0.232,3805,0.456,3806,0.232,3807,0.232,3808,0.232,3809,0.232,3810,0.456,3811,0.456,3812,0.232,3813,0.232,3814,0.232,3815,0.232,3816,0.232,3817,0.232,3818,0.232,3819,0.232,3820,0.232,3821,0.232,3822,0.456,3823,0.232,3824,0.877,3825,0.67,3826,0.67,3827,1.802,3828,0.67,3829,0.67,3830,0.456,3831,0.67,3832,0.67,3833,0.67,3834,0.67,3835,0.232,3836,0.232,3837,0.232,3838,0.232,3839,0.232,3840,0.232,3841,0.232,3842,0.232,3843,0.232,3844,0.232,3845,0.232,3846,0.232,3847,0.232,3848,0.456,3849,0.456,3850,0.456,3851,0.456,3852,2.579,3853,1.63,3854,0.456,3855,0.232,3856,0.232,3857,0.456,3858,0.456,3859,0.456,3860,0.456,3861,0.232,3862,0.232,3863,0.232,3864,0.232,3865,0.232,3866,0.232,3867,0.232,3868,0.232,3869,0.232,3870,0.232,3871,0.232,3872,0.232,3873,0.232,3874,0.232,3875,1.452,3876,1.076,3877,0.877,3878,0.456,3879,0.232,3880,0.232,3881,0.232,3882,0.232,3883,0.877,3884,0.232,3885,0.232,3886,0.232,3887,0.456,3888,0.232,3889,0.232,3890,0.232,3891,0.232,3892,0.232,3893,0.232,3894,0.232,3895,0.456,3896,0.232,3897,0.232,3898,0.232,3899,0.232,3900,0.232,3901,0.232,3902,0.232,3903,0.232,3904,0.232,3905,2.434,3906,0.877,3907,0.232,3908,1.076,3909,0.232,3910,0.456,3911,0.232,3912,0.232,3913,0.232,3914,1.968,3915,0.232,3916,0.232,3917,0.232,3918,0.877,3919,0.877,3920,0.877,3921,0.877,3922,0.877,3923,0.877,3924,0.877,3925,0.877,3926,0.877,3927,0.877,3928,0.877,3929,0.877,3930,0.877,3931,0.877,3932,0.877,3933,0.877,3934,0.877,3935,0.877,3936,0.877,3937,0.877,3938,0.877,3939,0.877,3940,0.877,3941,0.877,3942,0.877,3943,0.877,3944,0.877,3945,0.877,3946,0.877,3947,0.877,3948,0.877,3949,0.877,3950,0.877,3951,0.877,3952,0.877,3953,0.877,3954,0.877,3955,0.877,3956,0.877,3957,0.877,3958,0.877,3959,1.968,3960,0.67,3961,0.456,3962,0.877,3963,0.232,3964,0.232]]],"invertedIndex":[["",{"_index":6,"t":{"2":{"position":[[43,1],[317,1],[601,1],[1030,1],[1278,1],[1568,1],[1853,1],[2105,1],[2324,1],[2544,1]]},"4":{"position":[[41,1]]},"6":{"position":[[40,1]]},"8":{"position":[[41,1],[306,1],[325,1],[343,1],[362,1],[388,1],[450,1],[469,1],[487,1],[506,1],[559,1],[585,1]]},"10":{"position":[[41,1]]},"12":{"position":[[41,1]]},"14":{"position":[[41,1]]},"16":{"position":[[40,1]]},"18":{"position":[[38,1]]},"20":{"position":[[38,1]]},"22":{"position":[[41,1]]},"24":{"position":[[37,1]]},"26":{"position":[[37,1]]},"28":{"position":[[39,1]]},"30":{"position":[[39,1]]},"32":{"position":[[41,1]]},"34":{"position":[[42,1]]},"36":{"position":[[42,1]]},"38":{"position":[[40,1]]},"40":{"position":[[41,1]]},"42":{"position":[[41,1]]},"44":{"position":[[42,1]]},"46":{"position":[[42,1]]},"48":{"position":[[42,1]]},"50":{"position":[[42,1]]},"52":{"position":[[42,1]]},"54":{"position":[[41,1]]},"56":{"position":[[41,1]]},"58":{"position":[[42,1]]},"60":{"position":[[41,1]]},"62":{"position":[[42,1]]},"64":{"position":[[41,1]]},"66":{"position":[[42,1]]},"68":{"position":[[38,1]]},"70":{"position":[[39,1]]},"72":{"position":[[39,1]]},"74":{"position":[[39,1],[338,1]]},"76":{"position":[[39,1]]},"78":{"position":[[37,1]]},"80":{"position":[[37,1]]},"82":{"position":[[39,1]]},"84":{"position":[[38,1]]},"86":{"position":[[38,1]]},"88":{"position":[[38,1]]},"90":{"position":[[37,1]]},"92":{"position":[[37,1]]},"94":{"position":[[37,1]]},"96":{"position":[[38,1]]},"98":{"position":[[37,1]]},"100":{"position":[[41,1]]},"102":{"position":[[41,1]]},"104":{"position":[[44,1]]},"106":{"position":[[42,1]]},"110":{"position":[[43,1]]},"112":{"position":[[38,1],[376,1],[634,1],[933,1],[1187,1],[1621,1],[1866,1],[2114,1],[2384,1],[2718,1]]},"114":{"position":[[38,1],[385,1],[633,1],[882,1],[1131,1],[1580,1],[1890,1],[2159,1],[2448,1],[2707,1]]},"116":{"position":[[42,1],[448,1],[761,1],[1101,1],[1416,1],[1678,1],[1949,1],[2223,1],[2421,1],[2625,1]]},"118":{"position":[[86,1]]},"120":{"position":[[40,1],[231,1],[425,1]]},"124":{"position":[[84,1]]},"126":{"position":[[93,1],[518,1],[952,1],[1224,1],[1674,1],[1963,1],[2237,1],[2435,1]]},"128":{"position":[[82,1]]},"130":{"position":[[39,1],[223,1],[420,1],[615,1],[813,1],[1014,1],[1244,1],[1446,1],[1675,1],[1845,1]]},"132":{"position":[[94,1]]},"134":{"position":[[87,1],[361,1],[645,1],[1074,1],[1322,1],[1612,1],[1897,1],[2149,1],[2368,1],[2588,1]]},"136":{"position":[[91,1]]},"138":{"position":[[95,1],[354,1],[683,1],[1089,1],[1402,1]]},"140":{"position":[[100,1],[506,1]]},"142":{"position":[[101,1]]},"144":{"position":[[92,1],[498,1]]},"146":{"position":[[99,1]]},"148":{"position":[[98,1]]},"150":{"position":[[97,1]]},"152":{"position":[[90,1],[339,1],[588,1]]},"154":{"position":[[100,1]]},"156":{"position":[[98,1]]},"158":{"position":[[92,1]]},"160":{"position":[[99,1]]},"162":{"position":[[95,1]]},"164":{"position":[[93,1]]},"166":{"position":[[99,1]]},"168":{"position":[[94,1]]},"170":{"position":[[96,1]]},"172":{"position":[[93,1],[499,1]]},"174":{"position":[[94,1]]},"176":{"position":[[98,1]]},"178":{"position":[[96,1]]},"180":{"position":[[93,1],[499,1]]},"182":{"position":[[91,1]]},"184":{"position":[[103,1]]},"186":{"position":[[95,1]]},"188":{"position":[[92,1]]},"190":{"position":[[92,1],[339,1]]},"192":{"position":[[82,1],[429,1],[677,1],[926,1],[1175,1],[1624,1],[1934,1],[2203,1],[2492,1],[2751,1]]},"194":{"position":[[82,1],[420,1],[678,1],[977,1],[1231,1],[1665,1],[1910,1],[2158,1],[2428,1],[2762,1]]},"196":{"position":[[92,1]]},"198":{"position":[[86,1],[492,1],[805,1]]},"200":{"position":[[99,1],[524,1],[958,1],[1231,1]]},"202":{"position":[[88,1]]},"204":{"position":[[96,1],[370,1],[654,1],[1083,1],[1331,1],[1621,1],[1906,1],[2158,1],[2377,1],[2597,1]]},"206":{"position":[[91,1],[429,1],[687,1],[986,1],[1240,1],[1674,1],[1919,1],[2167,1],[2437,1],[2771,1]]},"208":{"position":[[112,1]]},"210":{"position":[[91,1],[438,1],[686,1],[935,1],[1184,1],[1633,1],[1943,1],[2212,1],[2501,1],[2760,1]]},"212":{"position":[[92,1],[276,1],[473,1],[668,1],[866,1],[1067,1],[1297,1],[1499,1],[1728,1],[1898,1]]},"214":{"position":[[95,1],[501,1],[814,1],[1154,1],[1469,1],[1731,1],[2002,1],[2276,1],[2474,1],[2678,1]]},"216":{"position":[[91,1]]},"218":{"position":[[93,1],[284,1],[478,1]]},"220":{"position":[[91,1]]},"222":{"position":[[87,1],[388,1]]},"224":{"position":[[93,1]]},"226":{"position":[[89,1],[334,1],[603,1]]},"228":{"position":[[101,1]]},"230":{"position":[[97,1]]},"232":{"position":[[93,1],[527,1],[778,1]]},"234":{"position":[[87,1]]},"236":{"position":[[92,1],[505,1]]},"238":{"position":[[91,1]]},"240":{"position":[[90,1],[389,1],[823,1],[1236,1]]},"242":{"position":[[94,1]]},"244":{"position":[[89,1],[337,1],[627,1],[912,1],[1132,1],[1390,1],[1689,1],[1943,1],[2377,1],[2622,1]]},"246":{"position":[[90,1],[339,1],[588,1]]},"248":{"position":[[89,1],[367,1]]},"250":{"position":[[92,1],[518,1],[803,1],[1055,1],[1276,1],[1615,1],[2028,1],[2374,1]]},"252":{"position":[[92,1],[345,1]]},"254":{"position":[[92,1]]},"256":{"position":[[92,1]]},"258":{"position":[[89,1],[523,1],[936,1]]},"260":{"position":[[94,1],[523,1]]},"262":{"position":[[90,1]]},"264":{"position":[[86,1]]},"266":{"position":[[90,1],[375,1],[809,1]]},"268":{"position":[[93,1]]},"270":{"position":[[86,1]]},"272":{"position":[[90,1],[364,1],[648,1],[1077,1],[1325,1],[1615,1],[1900,1],[2152,1],[2371,1],[2591,1]]},"274":{"position":[[91,1],[365,1],[649,1],[1078,1],[1326,1],[1616,1],[1901,1],[2153,1],[2372,1],[2592,1]]},"276":{"position":[[94,1],[519,1]]},"278":{"position":[[87,1],[429,1]]},"280":{"position":[[86,1],[424,1],[682,1],[981,1],[1235,1],[1669,1],[1914,1],[2162,1],[2432,1],[2766,1]]},"282":{"position":[[86,1],[433,1],[681,1],[930,1],[1179,1],[1628,1]]},"284":{"position":[[85,1],[423,1],[681,1],[980,1],[1234,1],[1668,1],[1913,1],[2161,1],[2431,1],[2765,1]]},"286":{"position":[[85,1],[432,1],[680,1],[929,1],[1178,1],[1627,1]]},"288":{"position":[[86,1],[523,1]]},"290":{"position":[[92,1]]},"292":{"position":[[81,1],[382,1],[716,1]]},"294":{"position":[[85,1]]},"296":{"position":[[83,1],[328,1],[597,1]]},"298":{"position":[[87,1]]},"300":{"position":[[87,1]]},"302":{"position":[[87,1]]},"304":{"position":[[85,1]]},"306":{"position":[[93,1]]},"308":{"position":[[91,1]]},"310":{"position":[[95,1]]},"312":{"position":[[85,1]]},"314":{"position":[[87,1],[521,1]]},"316":{"position":[[80,1]]},"318":{"position":[[84,1],[383,1],[817,1],[1230,1]]},"320":{"position":[[86,1],[499,1]]},"322":{"position":[[85,1]]},"324":{"position":[[84,1],[358,1],[642,1],[1072,1],[1270,1]]},"326":{"position":[[88,1]]},"328":{"position":[[81,1],[498,1],[747,1],[997,1],[1193,1],[1398,1]]},"330":{"position":[[85,1],[358,1],[606,1],[896,1],[1181,1],[1401,1],[1659,1],[1958,1],[2212,1],[2646,1]]},"332":{"position":[[84,1]]},"334":{"position":[[83,1],[361,1]]},"336":{"position":[[80,1],[384,1]]},"338":{"position":[[92,1]]},"340":{"position":[[87,1]]},"342":{"position":[[86,1],[362,1],[788,1],[1073,1],[1325,1],[1546,1],[1885,1],[2298,1],[2644,1],[2950,1]]},"344":{"position":[[85,1]]},"346":{"position":[[83,1]]},"348":{"position":[[93,1],[518,1],[771,1]]},"350":{"position":[[89,1]]},"352":{"position":[[86,1]]},"354":{"position":[[86,1],[281,1],[479,1]]},"356":{"position":[[88,1]]},"358":{"position":[[83,1],[517,1],[930,1],[1272,1],[1472,1]]},"360":{"position":[[88,1]]},"362":{"position":[[91,1]]},"364":{"position":[[83,1],[344,1]]},"366":{"position":[[88,1],[517,1]]},"368":{"position":[[80,1]]},"370":{"position":[[86,1],[355,1]]},"372":{"position":[[87,1]]},"374":{"position":[[84,1],[369,1],[803,1]]},"376":{"position":[[80,1]]},"378":{"position":[[81,1],[423,1],[670,1],[985,1]]},"380":{"position":[[87,1]]},"382":{"position":[[88,1],[513,1]]},"384":{"position":[[85,1]]},"386":{"position":[[85,1]]},"388":{"position":[[84,1]]},"390":{"position":[[85,1]]},"392":{"position":[[85,1]]},"394":{"position":[[85,1]]},"396":{"position":[[84,1]]},"398":{"position":[[85,1]]},"400":{"position":[[82,1]]},"402":{"position":[[82,1]]},"404":{"position":[[81,1]]},"406":{"position":[[83,1]]},"408":{"position":[[83,1]]},"410":{"position":[[81,1]]},"412":{"position":[[85,1]]},"414":{"position":[[86,1]]},"416":{"position":[[86,1]]},"418":{"position":[[84,1]]},"420":{"position":[[85,1]]},"422":{"position":[[86,1]]},"424":{"position":[[86,1]]},"426":{"position":[[85,1]]},"428":{"position":[[86,1]]},"430":{"position":[[86,1]]},"432":{"position":[[86,1]]},"434":{"position":[[89,1]]},"436":{"position":[[87,1]]},"438":{"position":[[88,1]]},"440":{"position":[[86,1]]},"442":{"position":[[86,1]]},"444":{"position":[[86,1]]},"446":{"position":[[85,1]]},"448":{"position":[[85,1]]},"450":{"position":[[86,1]]},"452":{"position":[[85,1]]},"454":{"position":[[85,1]]},"456":{"position":[[86,1]]},"458":{"position":[[82,1]]},"460":{"position":[[83,1]]},"462":{"position":[[83,1]]},"464":{"position":[[83,1]]},"466":{"position":[[81,1]]},"468":{"position":[[83,1]]},"470":{"position":[[83,1]]},"472":{"position":[[81,1]]},"474":{"position":[[81,1]]},"476":{"position":[[82,1]]},"478":{"position":[[81,1]]},"480":{"position":[[81,1]]},"482":{"position":[[82,1]]},"484":{"position":[[82,1]]},"486":{"position":[[3397,1],[3451,2],[3488,1]]},"488":{"position":[[81,1]]},"490":{"position":[[82,1]]},"492":{"position":[[298,2],[430,1],[471,1],[483,1],[524,1],[536,1],[578,1],[590,1],[617,1],[644,1],[659,4],[664,2],[692,1],[722,1],[729,1],[731,2],[744,1],[771,1],[798,1],[813,4],[818,2],[846,1],[870,2],[898,1],[928,1],[935,1],[937,2],[940,1],[942,1],[1186,5],[1237,1],[1278,1],[1290,1],[1332,1],[1344,1],[1371,1],[1398,1],[1413,4],[1418,2],[1446,1],[1470,2],[1498,1],[1528,1],[1535,1],[1537,2],[1540,1],[1542,1],[1970,1],[2011,1],[2023,1],[2065,1],[2077,1],[2104,1],[2131,1],[2146,4],[2151,2],[2179,1],[2203,2],[2231,1],[2261,1],[2268,1],[2270,2],[2273,1],[2275,1]]},"494":{"position":[[242,2],[294,1],[1413,2],[3715,2],[4338,2],[4962,2],[15318,1],[15349,1],[15410,2],[15511,2],[15614,2],[15720,2],[15830,2],[15935,2],[15985,1],[17983,1],[18014,1],[18061,1],[18073,1],[18075,1],[18140,1],[18306,1],[18359,1],[18525,1],[18579,1],[18746,1],[18800,1],[18967,1],[18969,1]]},"496":{"position":[[306,2],[2127,1],[3768,2],[3905,2]]},"500":{"position":[[222,2],[3022,1],[3510,1],[3999,1],[4485,1],[4970,1]]},"502":{"position":[[553,2],[5312,2],[5358,1],[5379,1],[5402,1],[5404,3],[5434,1],[5450,1],[5476,1],[5508,1],[5510,1],[7137,2],[7215,2],[7629,2],[7632,2],[7676,1],[7738,1],[7810,2],[7849,1],[7851,1],[8918,1],[8940,1],[8987,2],[8995,1],[9043,1],[9215,1],[9251,1],[9253,1],[9430,1],[9473,1],[9475,1],[9563,2],[9655,1],[9736,1],[9780,1],[9782,1]]},"504":{"position":[[510,2],[830,2],[994,2],[1157,2],[1321,2],[1550,2],[1717,2],[2113,2],[2345,2],[2508,2],[3969,2],[4740,2],[5392,2],[10908,2],[11284,2],[11611,2],[12181,2],[12578,2],[12926,2]]},"506":{"position":[[294,1],[441,1],[553,1],[603,1],[1564,2],[1668,1],[1743,1],[1762,1],[1971,1],[1973,2],[1988,1],[1995,1],[1997,2],[2012,1],[2014,1],[2016,1],[2492,2],[2594,1],[2661,1],[2673,1],[2716,1],[2733,1],[2821,1],[2950,1],[2952,2],[2987,2],[3115,1],[3210,1],[3212,1],[3644,1],[3707,1],[3719,1],[3761,1],[3763,2],[3814,1],[3829,1],[3841,1],[3862,1],[3872,2],[3897,1],[3899,1],[4060,2],[4167,1],[4246,1],[4260,1],[4287,1],[4303,1],[4326,1],[4362,1],[4388,1],[4409,2],[4429,1],[4574,1],[4576,2],[4591,1],[4598,1],[4600,2],[4615,1],[4617,1],[4619,1],[4955,2],[5007,2],[5132,2],[5257,2],[5350,1],[5440,1],[5454,1],[5481,1],[5488,1],[5495,2],[5515,1],[5660,1],[5662,2],[5677,1],[5684,1],[5686,2],[5701,1],[5703,1],[5705,1],[5938,2],[6043,1],[6112,1],[6131,1],[6232,1],[6234,2],[6249,1],[6256,1],[6258,2],[6273,1],[6275,1],[6277,1],[6430,2],[6535,1],[6604,1],[6618,1],[6645,1],[6660,1],[6667,2],[6687,1],[6820,1],[6822,2],[6837,1],[6844,1],[6846,2],[6861,1],[6863,1],[6865,1],[7034,2],[7159,1],[7228,1],[7242,1],[7269,1],[7292,1],[7299,2],[7319,1],[7464,1],[7466,2],[7481,1],[7488,1],[7490,2],[7505,1],[7507,1],[7509,1],[7662,2],[7747,1],[7800,1],[7869,1],[7883,1],[7910,1],[7925,1],[7954,1],[7961,2],[7981,1],[8113,1],[8115,2],[8130,1],[8137,1],[8139,2],[8154,1],[8156,1],[8158,1]]},"508":{"position":[[246,2],[2185,1],[2206,1],[2256,2],[2326,2],[2398,2],[2432,1],[3154,1],[3175,1],[3225,2],[3295,2],[3367,2],[3401,1],[4397,1],[4412,1],[4427,1],[4448,1],[4482,1],[4542,2],[4612,2],[4684,2],[4756,2],[4866,2],[4975,2],[5085,2],[5186,2],[5198,1],[5220,1]]},"510":{"position":[[335,2],[711,2],[859,2],[1441,2],[1673,1],[3690,1],[3751,1],[3779,1],[3819,1],[3847,1],[3849,1],[4208,2],[4314,1],[4336,1],[4411,1],[4428,1],[4597,1],[4599,1],[5032,1],[5095,1],[5107,1],[5149,1],[5151,2],[5202,1],[5217,1],[5229,1],[5250,1],[5260,2],[5285,1],[5287,1],[5862,2],[6003,1],[6025,1],[6100,1],[6117,1],[6388,1],[6435,2],[6446,1],[6487,1],[7066,1],[7129,1],[7141,1],[7208,1],[7220,1],[7262,1],[7264,2],[7315,1],[7330,1],[7342,1],[7362,1],[7372,2],[7397,1],[7399,1],[8183,1],[8244,1],[8272,1],[8312,1],[8340,1],[8342,1],[9361,1],[9422,1],[9450,1],[9490,1],[9518,1],[9520,1],[10047,1],[10108,1],[10136,1],[10176,1],[10204,1],[10206,1],[11137,1],[11198,1],[11226,1],[11266,1],[11294,1],[11296,1],[11844,2],[11945,2],[12040,2],[12092,1],[12163,1],[13049,2],[13142,2],[13246,2],[13350,2],[13454,2],[13558,2],[13621,1],[13760,1],[14419,1],[14483,1],[14503,2],[14506,1],[14545,3],[14549,1],[14590,1],[14610,2],[14613,1],[14649,3],[14653,1],[14695,1],[14715,2],[14718,1],[14756,3],[14760,1],[14802,1],[14822,2],[14825,1],[14861,3],[14865,1],[14914,1],[14934,2],[14937,1],[14983,3],[14987,1],[14989,1]]},"512":{"position":[[1596,2],[1627,2],[1658,2],[1689,2],[1721,2],[1988,2],[2083,2],[2135,2],[2187,2],[2410,2],[2461,2],[2540,2],[2617,2],[2697,2],[2774,2],[2908,2],[2970,1],[2994,1],[3056,1],[3076,2],[3079,1],[3099,1],[3116,3],[3120,1],[3122,1]]},"514":{"position":[[335,2],[1166,2],[2887,2],[2890,2],[2893,1],[2980,3],[3031,1],[3102,1],[3134,1],[3176,1],[3208,1],[3210,1],[3646,2],[3757,1],[3787,1],[3867,1],[3884,1],[4057,1],[4059,1],[4492,1],[4520,1],[4566,1],[4578,1],[4620,1],[4622,2],[4673,1],[4688,1],[4700,1],[4721,1],[4731,2],[4756,1],[4758,1],[5325,2],[5507,1],[5537,1],[5617,1],[5634,1],[5909,1],[5956,2],[5967,1],[6015,1],[6594,1],[6622,1],[6668,1],[6680,1],[6747,1],[6759,1],[6801,1],[6803,2],[6854,1],[6869,1],[6881,1],[6901,1],[6911,2],[6936,1],[6938,1],[7241,1],[7314,1],[7346,1],[7348,1],[11300,2],[11471,1],[11544,1],[11576,1],[11578,1],[15541,2],[15718,1],[15791,1],[15823,1],[15825,1],[19682,2],[19859,1],[19932,1],[19964,1],[19966,1],[20669,1],[20742,1],[20774,1],[20818,1],[20850,1],[20897,1],[20917,2],[20920,1],[20959,3],[20963,1],[21008,1],[21028,2],[21031,1],[21068,3],[21072,1],[21118,1],[21138,2],[21141,1],[21179,3],[21183,1],[21229,1],[21249,2],[21252,1],[21290,3],[21294,1],[21296,1]]},"516":{"position":[[713,1],[796,1],[838,1],[1048,1],[1050,1],[1052,3],[1088,3],[1092,1],[1094,1],[1130,2],[1271,1],[1322,1],[1334,1],[1364,1],[1370,1],[1395,2],[1440,1],[1448,1],[1450,2],[1470,1],[1480,1],[1505,1],[1507,1],[1509,1],[1752,1],[1803,1],[1815,1],[1859,1],[1945,2],[1992,1],[2035,1],[2120,2],[2167,1],[2169,1],[2451,2],[2454,2],[2582,2],[2585,2],[2715,2],[2718,2],[2843,2],[2846,2],[2970,2],[2973,2],[3096,2],[3099,2],[3217,2],[3220,2],[3339,2],[3342,2],[3416,1],[3467,1],[3479,1],[3544,1],[3605,2],[3652,1],[3654,1]]},"518":{"position":[[849,2],[895,2],[941,2],[987,2],[1165,2],[1194,2],[1230,2],[1407,2],[1487,2],[1569,2],[1649,2],[1728,2],[1808,2],[1885,2],[1963,2],[2040,2],[2241,2],[2317,2],[2393,2],[2474,2],[2757,2],[2833,2],[2909,2],[2990,2],[3021,2],[3028,2],[3136,2],[3212,2],[3288,2],[3369,2]]},"520":{"position":[[289,2],[1077,2],[1152,2],[1245,2],[1338,2],[1458,2],[1587,2],[1680,2],[1734,2],[1791,2],[1847,2],[2059,2],[2280,2],[2719,1],[2781,1],[2866,1],[2903,1],[2994,1],[3028,1],[3107,1],[3109,1],[3292,2],[3366,2],[3429,2],[3504,2],[3763,2],[3853,2],[3946,2],[4038,2],[4131,2],[4226,2],[4316,2],[4545,2],[4658,2],[4802,2],[4946,2],[5092,2],[5238,2],[5387,2],[5533,2],[5598,1],[5668,2],[5700,1],[5899,2],[5953,2],[6010,2],[6066,2],[6298,2],[6416,2],[6537,2],[6657,2],[6778,2],[6901,2],[7020,2],[7340,2],[7469,2],[7601,2],[7732,2],[7864,2],[7998,2],[8128,2]]},"522":{"position":[[941,2],[2899,2],[3178,2],[3462,2],[7222,2],[7297,2],[7374,2],[7454,2],[7535,2],[7614,2],[7648,1],[8662,1],[8674,1],[8753,1],[8772,1],[8805,1],[8818,2],[8848,1],[8887,1],[9167,1],[9169,1],[9171,1],[9173,1]]},"524":{"position":[[547,2],[1365,1],[1390,1],[1423,1],[1425,1],[1720,1],[1742,1],[1789,2],[1797,1],[1845,1]]},"526":{"position":[[815,2],[1445,2],[1565,2],[1939,2],[1991,2],[2100,2],[2211,2],[2317,2],[2422,2],[2526,2],[2624,2],[2682,1],[2712,1],[2786,2],[2895,2],[2915,1],[2922,1],[2941,1],[2972,1],[3001,1],[3071,2],[3074,1],[3382,2],[3434,2],[3543,2],[3654,2],[3760,2],[3865,2],[3969,2],[4068,2],[4168,2],[4226,1],[4256,1],[4330,2],[4439,2],[4459,1],[4466,1],[4487,1],[4564,2],[4567,1],[4921,2],[4973,2],[5082,2],[5193,2],[5299,2],[5404,2],[5508,2],[5606,2],[5664,1],[5694,1],[5768,2],[5877,2],[5897,1],[5904,1],[5923,1],[5954,1],[5983,1],[6053,2],[6056,1],[6511,2],[6563,2],[6672,2],[6783,2],[6889,2],[6994,2],[7098,2],[7196,2],[7254,1],[7284,1],[7358,2],[7467,1],[7486,1],[7526,1],[7558,1],[7602,1],[7644,1],[7714,2],[7794,1],[7808,2],[7828,2],[7841,2],[7885,1],[7887,1],[8192,2],[8246,2],[8360,2],[8478,2],[8594,2],[8714,2],[8838,2],[8960,2],[9080,2],[9204,2],[9281,1],[9315,1],[9371,1],[9436,1],[9459,1],[9494,1],[9501,1],[9528,1],[9559,1],[9588,1],[9658,3],[9662,1],[9680,1],[9693,1],[9695,1],[10191,2],[10243,2],[10352,2],[10463,2],[10569,2],[10674,2],[10778,2],[10876,2],[10934,1],[10964,1],[11038,2],[11147,2],[11167,1],[11174,1],[11193,1],[11224,1],[11253,1],[11323,2],[11326,1],[11482,3],[11486,3],[11522,3],[11526,3],[11616,2],[11760,1],[11807,1],[11819,1],[11849,1],[11855,1],[11857,2],[12002,1],[12024,1],[12026,2],[12115,1],[12117,1],[12119,1]]},"528":{"position":[[377,2],[613,2],[664,2],[903,2],[938,2],[970,2],[1001,2],[1079,2],[1129,2],[1179,2],[1229,2],[1499,2],[1571,2],[1643,2],[1715,2],[1787,2],[1859,2],[1946,2],[2041,2],[2120,2],[2193,2],[2286,2],[2368,2],[2457,2],[2530,2],[2606,2],[2689,2],[2771,2],[2878,2],[3022,2],[3182,2],[3318,2],[3402,2],[3504,2],[4125,2]]},"530":{"position":[[854,2],[915,2],[1438,1],[1841,2],[1923,2],[2001,2],[2153,2],[3377,2],[3475,2],[3478,2],[3621,2],[3624,2],[3770,2],[3773,2],[3822,1],[3860,1],[3922,1],[3962,1],[4036,1],[4069,1],[4096,1],[4145,1],[4164,1],[4214,1],[4230,1],[4239,1],[4275,1],[4299,2],[4323,1],[4364,1],[4412,1],[4473,1],[4481,1],[4550,1],[4569,1],[4641,1],[4687,1],[4725,1],[4749,2],[4779,2],[4833,1],[4906,1],[4965,2],[5001,2],[5043,1],[5055,1],[5102,1],[5135,1],[5142,1],[5156,1],[5192,1],[5220,1],[5270,1],[5272,1],[5293,1],[5374,1],[5413,1],[5437,2],[5493,1],[5538,1],[5624,1],[5660,1],[5682,2],[5719,2],[5767,1],[5844,1],[5904,1],[6031,1],[6033,1],[6045,1],[6134,2],[6140,1],[6236,1],[6251,1],[6295,1],[6306,1],[6335,1],[6384,1],[6403,1],[6466,1],[6482,2],[6501,1],[6509,1],[6541,1],[6576,1],[6606,2],[6609,1],[6648,1],[6659,1],[6696,1],[6707,1],[6735,1],[6768,1],[6783,1],[6834,1],[6847,1],[6884,1],[6895,1],[6923,1],[6963,1],[6980,1],[7044,1],[7057,1],[7094,1],[7105,1],[7132,1],[7182,2],[7188,1],[7205,1],[7241,2],[7271,1],[7322,2],[7389,1],[7634,1],[7710,2],[7719,1],[7749,1],[7803,1],[7843,1],[7895,1],[7908,1],[7959,1],[7978,1],[8101,2],[8117,1],[8159,1],[8184,1],[8192,1],[8210,1],[8229,1],[8338,2],[8357,1],[8376,1],[8388,2],[8403,1],[8422,1],[8434,2],[8449,1],[8468,1],[8472,2],[8492,1],[8511,1],[8515,2],[8539,1],[8558,1],[8570,2],[8585,1],[8601,1],[8605,2],[8608,2],[8640,1],[8656,1],[8660,2],[8663,2],[8703,1],[8728,1],[8736,1],[8752,1],[8771,1],[8880,2],[8899,1],[8918,1],[8930,2],[8945,1],[8964,1],[8976,2],[8991,1],[9010,1],[9014,2],[9034,1],[9053,1],[9057,2],[9081,1],[9100,1],[9112,2],[9127,1],[9143,1],[9147,2],[9150,2],[9182,1],[9198,1],[9202,2],[9205,2],[9245,1],[9270,1],[9278,1],[9294,1],[9313,1],[9422,2],[9441,1],[9460,1],[9472,2],[9487,1],[9506,1],[9518,2],[9533,1],[9552,1],[9556,2],[9576,1],[9595,1],[9599,2],[9623,1],[9642,1],[9654,2],[9669,1],[9685,1],[9689,2],[9692,2],[9724,1],[9740,1],[9744,2],[9747,2],[9784,1],[9800,1],[9809,1],[9828,1],[9839,2],[9859,1],[9892,1],[9931,1],[9968,1],[9986,1],[9993,1],[10017,2],[10057,1],[10107,1],[10152,1],[10206,1],[10250,1],[10311,1],[10319,1],[10388,1],[10407,1],[10471,1],[10517,1],[10519,1],[10614,2],[10712,2],[10715,2],[10858,2],[10861,2],[10910,1],[10948,1],[11010,1],[11050,1],[11124,1],[11157,1],[11184,1],[11233,1],[11252,1],[11302,1],[11318,1],[11327,1],[11363,1],[11387,2],[11411,1],[11452,1],[11500,1],[11561,1],[11569,1],[11638,1],[11657,1],[11659,2],[11825,1],[11845,3],[11849,1],[11895,1],[11933,1],[11957,2],[11987,2],[12041,1],[12087,1],[12136,1],[12195,2],[12231,2],[12273,1],[12285,1],[12332,1],[12365,1],[12372,1],[12386,1],[12422,1],[12450,1],[12500,1],[12502,1],[12523,1],[12629,1],[12665,1],[12687,2],[12724,2],[12772,1],[12849,1],[12909,1],[13036,1],[13038,1],[13050,1],[13139,2],[13145,1],[13241,1],[13256,1],[13300,1],[13311,1],[13340,1],[13354,1],[13399,2],[13431,1],[13455,2],[13506,1],[13548,1],[13583,1],[13602,1],[13665,1],[13681,2],[13700,1],[13708,1],[13740,1],[13775,1],[13805,2],[13808,1],[13847,1],[13858,1],[13895,1],[13906,1],[13934,1],[13967,1],[13982,1],[14033,1],[14046,1],[14083,1],[14094,1],[14122,1],[14162,1],[14179,1],[14243,1],[14256,1],[14293,1],[14304,1],[14331,1],[14381,2],[14387,1],[14404,1],[14440,2],[14470,1],[14521,2],[14588,1]]},"532":{"position":[[759,2],[820,2],[1691,1],[2089,2],[2171,2],[2249,2],[2401,2],[3999,2],[4097,2],[4100,2],[4243,2],[4246,2],[4392,2],[4395,2],[4533,2],[4536,2],[4701,2],[4704,2],[4776,1],[4804,1],[4856,1],[4896,1],[4934,1],[4963,1],[4992,1],[4994,1],[5117,2],[5142,1],[5191,1],[5203,1],[5219,1],[5228,1],[5264,1],[5288,2],[5307,1],[5329,1],[5342,1],[5362,1],[5380,1],[5387,1],[5411,1],[5413,2],[5416,1],[5485,1],[5504,1],[5566,1],[5612,1],[5650,1],[5674,2],[5704,2],[5758,1],[5831,1],[5880,2],[5911,2],[5948,1],[5960,1],[6002,1],[6035,1],[6042,1],[6056,1],[6089,1],[6112,1],[6157,1],[6159,1],[6180,1],[6251,1],[6290,1],[6314,2],[6371,2],[6403,1],[6443,1],[6519,1],[6555,1],[6579,2],[6634,2],[6658,1],[6735,1],[6861,1],[6873,1],[6941,1],[6992,1],[7020,1],[7083,1],[7132,1],[7160,1],[7223,1],[7319,1],[7334,1],[7378,1],[7389,1],[7418,1],[7462,1],[7481,1],[7534,1],[7542,1],[7621,2],[7656,1],[7664,1],[7699,1],[7734,1],[7753,1],[7771,2],[7786,1],[7805,1],[7823,2],[7838,1],[7857,1],[7861,2],[7864,2],[7867,1],[7906,1],[7917,1],[7954,1],[7965,1],[7989,1],[8019,1],[8034,1],[8098,1],[8111,1],[8148,1],[8159,1],[8186,1],[8220,1],[8237,1],[8273,1],[8287,2],[8325,1],[8355,1],[8450,2],[8459,1],[8487,1],[8539,1],[8579,1],[8631,1],[8644,1],[8663,1],[8703,2],[8719,1],[8761,1],[8785,1],[8792,1],[8811,1],[8840,2],[8859,1],[8878,1],[8920,2],[8935,1],[8954,1],[8996,2],[9011,1],[9030,1],[9034,2],[9037,2],[9074,1],[9090,1],[9099,1],[9118,1],[9129,2],[9148,1],[9200,1],[9236,1],[9254,1],[9261,1],[9281,2],[9310,1],[9353,1],[9406,1],[9450,1],[9502,1],[9549,1],[9558,1],[9627,1],[9646,1],[9708,1],[9754,1],[9756,1],[9848,2],[9857,1],[9885,1],[9937,1],[9977,1],[10029,1],[10042,1],[10093,1],[10112,1],[10152,2],[10168,1],[10210,1],[10234,1],[10242,1],[10260,1],[10279,1],[10306,2],[10325,1],[10344,1],[10356,2],[10371,1],[10390,1],[10402,2],[10417,1],[10436,1],[10440,2],[10443,2],[10483,1],[10507,1],[10515,1],[10531,1],[10550,1],[10577,2],[10596,1],[10615,1],[10627,2],[10642,1],[10661,1],[10673,2],[10688,1],[10707,1],[10711,2],[10714,2],[10754,1],[10778,1],[10786,1],[10802,1],[10821,1],[10849,2],[10868,1],[10887,1],[10899,2],[10914,1],[10933,1],[10945,2],[10960,1],[10979,1],[10983,2],[10986,2],[11023,1],[11039,1],[11048,1],[11067,1],[11078,2],[11097,1],[11133,1],[11169,1],[11187,1],[11194,1],[11214,2],[11243,1],[11286,1],[11339,1],[11383,1],[11435,1],[11476,1],[11517,1],[11560,1],[11620,1],[11628,1],[11697,1],[11716,1],[11778,1],[11824,1],[11826,1],[12076,2],[12085,1],[12113,1],[12165,1],[12205,1],[12257,1],[12270,1],[12321,1],[12340,1],[12380,2],[12396,1],[12438,1],[12462,1],[12470,1],[12488,1],[12507,1],[12534,2],[12553,1],[12572,1],[12584,2],[12599,1],[12618,1],[12630,2],[12645,1],[12664,1],[12668,2],[12671,2],[12711,1],[12735,1],[12743,1],[12759,1],[12778,1],[12805,2],[12824,1],[12843,1],[12855,2],[12870,1],[12889,1],[12901,2],[12916,1],[12935,1],[12939,2],[12942,2],[12982,1],[13006,1],[13014,1],[13030,1],[13049,1],[13077,2],[13096,1],[13115,1],[13127,2],[13142,1],[13161,1],[13173,2],[13188,1],[13207,1],[13211,2],[13214,2],[13251,1],[13267,1],[13276,1],[13295,1],[13306,2],[13325,1],[13357,1],[13395,1],[13431,1],[13449,1],[13456,1],[13476,2],[13505,1],[13548,1],[13601,1],[13645,1],[13697,1],[13738,1],[13779,1],[13822,1],[13882,1],[13890,1],[13959,1],[13978,1],[14040,1],[14086,1],[14088,1],[14174,2],[14183,1],[14211,1],[14263,1],[14303,1],[14355,1],[14368,1],[14419,1],[14438,1],[14478,2],[14494,1],[14536,1],[14560,1],[14568,1],[14586,1],[14605,1],[14632,2],[14651,1],[14670,1],[14682,2],[14697,1],[14716,1],[14728,2],[14743,1],[14762,1],[14766,2],[14769,2],[14809,1],[14833,1],[14841,1],[14857,1],[14876,1],[14903,2],[14922,1],[14941,1],[14953,2],[14968,1],[14987,1],[14999,2],[15014,1],[15033,1],[15037,2],[15040,2],[15080,1],[15104,1],[15112,1],[15128,1],[15147,1],[15175,2],[15194,1],[15213,1],[15225,2],[15240,1],[15259,1],[15271,2],[15286,1],[15305,1],[15309,2],[15312,2],[15349,1],[15365,1],[15374,1],[15393,1],[15404,2],[15423,1],[15459,1],[15495,1],[15513,1],[15520,1],[15540,2],[15569,1],[15612,1],[15665,1],[15709,1],[15761,1],[15802,1],[15843,1],[15886,1],[15946,1],[15954,1],[16023,1],[16042,1],[16044,2],[16200,1],[16220,3],[16224,1],[16270,1],[16272,1]]},"534":{"position":[[690,2],[758,2],[1273,1],[1671,2],[1753,2],[1831,2],[1891,2],[3085,2],[3183,2],[3186,2],[3329,2],[3332,2],[3478,2],[3481,2],[3530,1],[3558,1],[3610,1],[3650,1],[3724,1],[3757,1],[3784,1],[3833,1],[3852,1],[3902,1],[3918,1],[3927,1],[3963,1],[3987,2],[4006,1],[4042,1],[4085,1],[4141,1],[4149,1],[4218,1],[4237,1],[4299,1],[4345,1],[4383,1],[4407,2],[4437,2],[4491,1],[4564,1],[4613,2],[4644,2],[4681,1],[4693,1],[4735,1],[4768,1],[4775,1],[4789,1],[4825,1],[4848,1],[4893,1],[4895,1],[4916,1],[4987,1],[5026,1],[5050,2],[5106,1],[5146,1],[5222,1],[5258,1],[5280,2],[5317,2],[5365,1],[5442,1],[5607,1],[5619,1],[5703,2],[5709,1],[5805,1],[5820,1],[5864,1],[5875,1],[5904,1],[5948,1],[5967,1],[6020,1],[6036,2],[6055,1],[6063,1],[6095,1],[6130,1],[6160,2],[6163,1],[6202,1],[6213,1],[6250,1],[6261,1],[6289,1],[6322,1],[6337,1],[6388,1],[6401,1],[6438,1],[6449,1],[6477,1],[6517,1],[6534,1],[6598,1],[6611,1],[6648,1],[6659,1],[6686,1],[6736,2],[6742,1],[6759,1],[6795,2],[6825,1],[6876,2],[6943,1],[7028,2],[7126,2],[7129,2],[7272,2],[7275,2],[7324,1],[7352,1],[7404,1],[7444,1],[7518,1],[7551,1],[7578,1],[7627,1],[7646,1],[7696,1],[7712,1],[7721,1],[7757,1],[7781,2],[7800,1],[7836,1],[7879,1],[7935,1],[7943,1],[8012,1],[8031,1],[8033,2],[8189,1],[8209,3],[8213,1],[8259,1],[8297,1],[8321,2],[8351,2],[8405,1],[8478,1],[8527,2],[8558,2],[8595,1],[8607,1],[8649,1],[8682,1],[8689,1],[8703,1],[8739,1],[8762,1],[8807,1],[8809,1],[8830,1],[8901,1],[8937,1],[8959,2],[8996,2],[9044,1],[9121,1],[9286,1],[9298,1],[9382,2],[9388,1],[9484,1],[9499,1],[9543,1],[9554,1],[9583,1],[9597,1],[9637,2],[9669,1],[9693,2],[9744,1],[9784,1],[9819,1],[9838,1],[9891,1],[9907,2],[9926,1],[9934,1],[9966,1],[10001,1],[10031,2],[10034,1],[10073,1],[10084,1],[10121,1],[10132,1],[10160,1],[10193,1],[10208,1],[10259,1],[10272,1],[10309,1],[10320,1],[10348,1],[10388,1],[10405,1],[10469,1],[10482,1],[10519,1],[10530,1],[10557,1],[10607,2],[10613,1],[10630,1],[10666,2],[10696,1],[10747,2],[10814,1]]},"536":{"position":[[894,2],[962,2],[1574,1],[2186,2],[2268,2],[2400,2],[2586,1],[2609,1],[2691,1],[2714,1],[2798,1],[2802,1],[2896,1],[2900,1],[3197,1],[3201,1],[3290,1],[3294,1],[3376,1],[3380,1],[3497,1],[3501,1],[3588,1],[3599,1],[4364,2],[5960,1],[6036,2],[6134,2],[6137,2],[6280,2],[6283,2],[6429,2],[6432,2],[6572,2],[6575,2],[6744,2],[6747,2],[6823,1],[6853,1],[6907,1],[6947,1],[6985,1],[7014,1],[7041,1],[7090,1],[7102,1],[7118,1],[7127,1],[7163,1],[7187,2],[7207,1],[7215,1],[7228,1],[7248,1],[7266,1],[7273,1],[7297,1],[7299,2],[7302,1],[7371,1],[7390,1],[7454,1],[7500,1],[7538,1],[7562,2],[7592,2],[7646,1],[7719,1],[7770,2],[7802,2],[7840,1],[7852,1],[7895,1],[7928,1],[7935,1],[7949,1],[7982,1],[8006,1],[8052,1],[8054,1],[8075,1],[8148,1],[8187,1],[8211,2],[8267,1],[8308,1],[8386,1],[8422,1],[8446,2],[8494,1],[8571,1],[8701,1],[8713,1],[8782,1],[8834,1],[8863,1],[8928,1],[8978,1],[9007,1],[9072,1],[9168,1],[9183,1],[9227,1],[9238,1],[9267,1],[9312,1],[9331,1],[9386,1],[9394,1],[9473,2],[9509,1],[9517,1],[9549,1],[9584,1],[9603,1],[9621,2],[9636,1],[9655,1],[9673,2],[9688,1],[9707,1],[9711,2],[9731,1],[9750,1],[9754,2],[9778,1],[9797,1],[9815,2],[9830,1],[9846,1],[9850,2],[9853,2],[9885,1],[9901,1],[9905,2],[9908,2],[9911,1],[9950,1],[9961,1],[9998,1],[10009,1],[10033,1],[10063,1],[10078,1],[10142,1],[10155,1],[10192,1],[10203,1],[10230,1],[10264,1],[10281,1],[10317,1],[10331,2],[10366,1],[10396,1],[10462,1],[10538,2],[10547,1],[10577,1],[10631,1],[10671,1],[10723,1],[10736,1],[10787,1],[10806,1],[10929,2],[10945,1],[10987,1],[11012,1],[11020,1],[11038,1],[11057,1],[11166,2],[11185,1],[11204,1],[11216,2],[11231,1],[11250,1],[11262,2],[11277,1],[11296,1],[11300,2],[11320,1],[11339,1],[11343,2],[11367,1],[11386,1],[11398,2],[11413,1],[11429,1],[11433,2],[11436,2],[11468,1],[11484,1],[11488,2],[11491,2],[11531,1],[11556,1],[11564,1],[11580,1],[11599,1],[11708,2],[11727,1],[11746,1],[11758,2],[11773,1],[11792,1],[11804,2],[11819,1],[11838,1],[11842,2],[11862,1],[11881,1],[11885,2],[11909,1],[11928,1],[11940,2],[11955,1],[11971,1],[11975,2],[11978,2],[12010,1],[12026,1],[12030,2],[12033,2],[12073,1],[12098,1],[12106,1],[12122,1],[12141,1],[12250,2],[12269,1],[12288,1],[12300,2],[12315,1],[12334,1],[12346,2],[12361,1],[12380,1],[12384,2],[12404,1],[12423,1],[12427,2],[12451,1],[12470,1],[12482,2],[12497,1],[12513,1],[12517,2],[12520,2],[12552,1],[12568,1],[12572,2],[12575,2],[12612,1],[12628,1],[12637,1],[12656,1],[12667,2],[12687,1],[12724,1],[12761,1],[12779,1],[12786,1],[12810,2],[12850,1],[12900,1],[12945,1],[12999,1],[13043,1],[13104,1],[13112,1],[13181,1],[13200,1],[13264,1],[13310,1],[13312,1],[13399,2],[13408,1],[13438,1],[13492,1],[13532,1],[13584,1],[13597,1],[13648,1],[13667,1],[13790,2],[13806,1],[13848,1],[13871,1],[13879,1],[13897,1],[13916,1],[14025,2],[14044,1],[14063,1],[14075,2],[14090,1],[14109,1],[14121,2],[14136,1],[14155,1],[14159,2],[14179,1],[14198,1],[14202,2],[14226,1],[14245,1],[14257,2],[14272,1],[14288,1],[14292,2],[14295,2],[14327,1],[14343,1],[14347,2],[14350,2],[14375,1],[14383,1],[14391,1],[14407,1],[14415,1],[14417,2],[14457,1],[14480,1],[14488,1],[14504,1],[14523,1],[14632,2],[14651,1],[14670,1],[14682,2],[14697,1],[14716,1],[14728,2],[14743,1],[14762,1],[14766,2],[14786,1],[14805,1],[14809,2],[14833,1],[14852,1],[14864,2],[14879,1],[14895,1],[14899,2],[14902,2],[14934,1],[14950,1],[14954,2],[14957,2],[14982,1],[14990,1],[14998,1],[15014,1],[15022,1],[15024,2],[15064,1],[15087,1],[15095,1],[15111,1],[15130,1],[15239,2],[15258,1],[15277,1],[15289,2],[15304,1],[15323,1],[15335,2],[15350,1],[15369,1],[15373,2],[15393,1],[15412,1],[15416,2],[15440,1],[15459,1],[15471,2],[15486,1],[15502,1],[15506,2],[15509,2],[15541,1],[15557,1],[15561,2],[15564,2],[15589,1],[15597,1],[15605,1],[15623,1],[15633,1],[15635,2],[15672,1],[15688,1],[15697,1],[15716,1],[15727,2],[15747,1],[15784,1],[15821,1],[15839,1],[15846,1],[15870,2],[15910,1],[15960,1],[16005,1],[16059,1],[16103,1],[16164,1],[16172,2],[16228,1],[16239,1],[16308,1],[16327,1],[16329,2],[16487,1],[16507,3],[16511,1],[16557,1],[16559,1]]},"538":{"position":[[323,2],[562,2],[631,2],[753,2],[1486,2],[2816,2],[2852,2],[2875,1],[3080,1],[3105,2],[3176,1],[3194,2],[3316,2],[3345,1],[3392,1],[3420,1],[3891,2],[3894,1],[3950,1],[3952,2],[3983,2],[4066,1],[4068,1],[4687,2],[4723,2],[4746,1],[4951,1],[4976,2],[5047,1],[5065,2],[5187,2],[5216,1],[5263,1],[5291,1],[5762,2],[5765,1],[5821,1],[5823,2],[5854,2],[5937,1],[5939,1],[6274,2],[6310,2],[6333,1],[6407,1],[6419,1],[6555,1],[6571,1],[6653,2],[6739,1],[6746,1],[6770,1],[6790,3],[6794,1],[6850,1],[6852,2],[6883,2],[6966,1],[6968,1],[7243,2],[7279,2],[7302,1],[7413,1],[7428,1],[7440,1],[7576,1],[7601,2],[7672,1],[7690,2],[7812,2],[7841,1],[7888,1],[7916,1],[8387,2],[8390,1],[8446,1],[8448,2],[8479,2],[8562,1],[8564,1],[8683,1],[8713,1],[8724,1],[8750,1],[8772,1],[8786,1],[8898,2],[9236,2],[9272,2],[9304,2],[9338,2],[9560,2],[9592,2],[9621,2],[9797,1],[9839,1],[9925,1],[9937,1],[9979,1],[9994,1],[10052,1],[10088,1],[10202,1],[10338,1],[10354,1],[10409,2],[10495,1],[10502,1],[10526,1],[10546,3],[10550,1],[10606,1],[10608,2],[10639,2],[10776,1],[10807,1],[10847,1],[10859,1],[10894,1],[10906,1],[10908,1],[10910,1],[11259,2],[11295,2],[11538,1],[11568,1],[11602,1],[11653,1],[11665,1],[11667,1],[11815,1],[11831,1],[11918,2],[12005,1],[12012,1],[12036,1],[12056,3],[12060,1],[12117,1],[12119,2],[12150,2],[12233,1],[12257,2],[12269,1],[12301,2],[12313,1],[12343,2],[12355,1],[12368,1],[12508,1],[12797,2],[12833,2],[13004,1],[13052,1],[13092,1],[13147,1],[13159,1],[13161,1],[13309,1],[13325,1],[13412,2],[13499,1],[13506,1],[13530,1],[13550,3],[13554,1],[13611,1],[13613,2],[13644,2],[13727,1],[13752,2],[13802,2],[13829,1]]},"540":{"position":[[422,2],[781,2],[851,2],[959,1],[986,1],[994,1],[1185,2],[1421,1],[1442,1],[1472,1],[1502,2],[1514,1],[1546,2],[1558,1],[1588,2],[1600,1],[1613,1],[1747,1],[1869,2],[2033,1],[2058,1],[2089,1],[2120,2],[2164,2],[2185,1],[2362,2],[2371,1],[2385,1],[2555,2],[2594,2],[2648,1],[2745,1],[2753,1],[2762,2],[2803,1],[2874,1],[2876,1]]},"542":{"position":[[838,2],[1787,1],[1840,1],[1951,2],[2016,1],[2038,1],[2050,1],[2282,2],[2508,2],[2734,2],[2960,2],[3186,2],[3412,2],[3638,2],[3864,2],[4090,2],[4155,1],[4177,1],[4209,1],[4241,1],[4273,1],[4305,1],[4337,1],[4369,1],[4401,1],[4433,1],[4445,1],[4685,2],[4749,1],[4774,1],[4782,1],[5198,2],[5262,1],[5287,1],[5295,1],[5739,2],[5803,1],[5825,1],[5835,1],[6158,2],[6291,2],[6426,2],[6563,2],[6700,2],[6839,2],[6978,2],[7119,2],[7135,1],[7326,1],[8009,2],[8148,1],[8175,1],[8573,2],[8829,2],[8894,1],[8940,1],[8949,1],[9304,2],[9439,1],[9461,1],[9702,2],[9938,1],[9983,1],[10013,2],[10025,1],[10057,2],[10069,1],[10099,2],[10111,1],[10124,1],[10265,1],[10445,2],[10609,1],[10653,1],[10709,2],[10759,2],[10786,1],[11152,1],[11182,1],[11193,1],[11219,1],[11241,1],[11255,1],[11366,2],[11637,2],[11677,2],[11727,2],[11759,2],[11778,2],[12034,2],[12077,2],[12133,2],[12165,2],[12187,2],[12502,2],[12534,2],[12553,2],[12872,1],[12898,1],[12980,1],[12994,1],[13044,1],[13088,1],[13132,1],[13176,1],[13192,1],[13219,1],[13266,1],[13285,1],[13312,1],[13344,1],[13356,1],[13381,1],[13403,1],[13421,1],[13449,1],[13474,1],[13493,1],[13513,1],[13549,1],[13695,1],[13722,1],[13732,1],[13753,1],[13781,1],[13804,1],[13829,1],[13880,1],[13944,1],[13956,1],[13958,1],[13992,1],[14060,1],[14072,1],[14097,1],[14149,1],[14213,1],[14225,1],[14227,1],[14229,1],[14554,2],[14586,2],[14636,2],[14686,1],[14711,1],[14789,1],[14797,1],[14806,2],[14840,1],[14903,1],[14905,1]]},"544":{"position":[[1534,2],[1595,1],[1620,1],[1670,1],[2143,2],[2347,2],[2549,2],[2753,2],[2814,1],[2839,1],[2939,1],[2993,1],[3656,2],[3984,2],[4310,2],[4638,2],[4779,1],[4803,1],[4853,1],[4904,1],[5118,1],[5126,1],[5162,1],[5197,1],[5233,1],[5246,1],[5281,1],[5317,1],[5351,1],[5363,1],[5376,1],[5389,1],[5401,1],[5408,1],[5410,1],[5603,2],[5884,1],[5909,1],[5970,1],[6000,2],[6012,1],[6044,2],[6056,1],[6086,2],[6098,1],[6111,1],[6248,1],[6380,2],[6589,1],[6629,1],[6664,1],[6726,2],[6772,2],[6795,1],[7137,1],[7167,1],[7178,1],[7204,1],[7226,1],[7240,1],[7351,2],[7572,2],[7604,2],[7629,2],[7902,2],[7934,2],[7960,2],[8279,1],[8305,1],[8387,1],[8401,1],[8451,1],[8487,1],[8609,1],[8636,1],[8646,1],[8667,1],[8695,1],[8718,1],[8743,1],[8801,1],[8813,1],[8838,1],[8895,1],[8907,1],[8909,1],[8911,1],[9116,2],[9148,2],[9171,2],[9232,1],[9257,1],[9340,1],[9348,1],[9360,1],[9362,1],[9734,1],[9764,1],[9775,1],[9801,1],[9823,1],[9837,1],[9957,2],[10187,2],[10219,2],[10252,2],[10506,2],[10559,2],[10587,2],[10619,2],[10651,2],[10983,2],[11015,2],[11045,2],[11364,1],[11400,1],[11454,1],[11598,1],[11610,1],[11652,1],[11666,1],[11725,1],[11778,1],[11802,2],[11826,1],[11855,1],[11888,1],[11910,1],[11932,1],[11972,1],[12001,1],[12039,1],[12061,1],[12094,1],[12147,1],[12181,1],[12200,1],[12219,1],[12381,2],[12420,1],[12447,1],[12466,1],[12487,1],[12524,1],[12556,1],[12581,1],[12634,1],[12646,1],[12671,1],[12725,1],[12737,1],[12762,1],[12812,1],[12824,1],[12826,1],[12828,1]]},"546":{"position":[[669,2],[779,2],[859,2],[1206,2],[1570,2],[1650,1],[1904,2],[2031,1],[2592,2],[2906,2],[2951,2]]},"548":{"position":[[659,2],[769,2],[849,2],[1191,2],[1731,2],[1811,1],[2065,2],[2192,1],[2753,2],[3067,2],[3113,2]]},"550":{"position":[[659,2],[769,2],[849,2],[1209,2],[1289,1],[1543,2],[1670,1],[2235,2],[2549,2],[2594,2]]},"552":{"position":[[746,2],[986,1],[1012,1],[1062,1],[1176,1],[1209,1],[1283,1],[1328,1],[1339,1],[1359,1],[1373,1],[1378,1],[1390,1],[1392,4],[1406,1],[1437,1],[1484,1],[1489,1],[1501,1],[1524,1],[1556,1],[1582,1],[1587,1],[1599,1],[1624,1],[1647,1],[1664,2],[1684,1],[1686,1]]},"554":{"position":[[751,2],[991,1],[1017,1],[1067,1],[1181,1],[1214,1],[1288,1],[1333,1],[1344,1],[1364,1],[1378,1],[1383,1],[1395,1],[1397,4],[1411,1],[1442,1],[1489,1],[1494,1],[1506,1],[1529,1],[1561,1],[1587,1],[1592,1],[1604,1],[1629,1],[1652,1],[1669,2],[1689,1],[1691,1]]},"556":{"position":[[1513,2],[1574,1],[1599,1],[1623,1],[1912,2],[2091,2],[2152,1],[2177,1],[2225,1],[2863,2],[3166,2],[3307,1],[3422,1],[3430,1],[3453,2],[3470,1],[3492,2],[3509,1],[3532,2],[3550,1],[3563,1],[3585,2],[3602,1],[3625,2],[3637,1],[3639,1],[3807,2],[4088,1],[4113,1],[4137,2],[4171,1],[4201,2],[4213,1],[4245,2],[4257,1],[4287,2],[4299,1],[4312,1],[4449,1],[4557,2],[4766,1],[4807,1],[4842,1],[4866,2],[4901,2],[4948,2],[4972,1],[5314,1],[5344,1],[5355,1],[5381,1],[5403,1],[5417,1],[5537,2],[5799,2],[5831,2],[5860,2],[6123,2],[6155,2],[6185,2],[6427,2],[6459,2],[6489,2],[6748,2],[6780,2],[6808,2],[7046,2],[7078,2],[7106,2],[7425,1],[7457,1],[7535,1],[7547,1],[7589,1],[7603,1],[7656,1],[7690,1],[7709,1],[7728,1],[7883,2],[7922,1],[7949,1],[7962,1],[7983,1],[8014,1],[8040,1],[8065,1],[8122,1],[8134,1],[8159,1],[8221,1],[8233,1],[8258,1],[8320,1],[8332,1],[8357,1],[8415,1],[8427,1],[8452,1],[8510,1],[8522,1],[8524,1],[8526,1],[8731,2],[8763,2],[8786,2],[8847,1],[8872,1],[8895,2],[8951,1],[8959,1],[8971,1],[8973,1],[9334,1],[9364,1],[9375,1],[9401,1],[9423,1],[9437,1],[9557,2],[9799,2],[9850,2],[9882,2],[9914,2],[9944,2],[10284,2],[10316,2],[10344,2],[10663,1],[10703,1],[10745,1],[10891,1],[10903,1],[10945,1],[10959,1],[11012,1],[11073,1],[11101,2],[11129,1],[11156,1],[11187,1],[11210,1],[11233,1],[11277,1],[11304,1],[11344,1],[11367,1],[11417,1],[11480,1],[11514,1],[11533,1],[11552,1],[11707,2],[11746,1],[11773,1],[11786,1],[11807,1],[11838,1],[11864,1],[11889,1],[11951,1],[11963,1],[11988,1],[12046,1],[12058,1],[12060,1],[12062,1]]},"558":{"position":[[87,1]]},"560":{"position":[[718,2],[894,2],[1035,2],[1147,2],[1261,2],[1370,2],[1478,2],[1585,2],[1687,2],[1790,2],[1851,1],[1888,1],[1900,1],[1902,1],[1964,1],[1982,1],[2000,1],[2008,1],[2033,1],[2070,1],[2083,2],[2129,1],[2131,1],[2218,2],[2330,2],[2444,2],[2553,2],[2661,2],[2768,2],[2870,2],[2973,2],[3034,1],[3071,1],[3083,1],[3085,1],[3147,1],[3165,1],[3183,1],[3191,1],[3216,1],[3253,1],[3287,1],[3294,2],[3340,1],[3342,1],[3414,2],[3526,2],[3632,2],[3737,2],[3810,1],[3847,1],[3859,1],[3861,1],[3923,1],[3941,1],[3959,1],[3967,1],[3992,1],[4029,1],[4041,2],[4087,1],[4089,1],[4226,1],[4263,1],[4275,1],[4277,1],[4320,1],[4338,1],[4356,1],[4364,1],[4389,1],[4439,1],[4479,1],[4491,2],[4537,1],[4539,1],[4659,1],[4696,1],[4708,1],[4710,1],[4753,1],[4771,1],[4789,1],[4797,1],[4822,1],[4871,1],[4879,2],[4925,1],[4927,1],[5053,3],[5057,3],[5093,3],[5097,3],[5130,2],[5272,1],[5309,1],[5321,1],[5323,1],[5374,1],[5380,1],[5382,2],[5451,1],[5469,1],[5477,1],[5504,1],[5538,1],[5558,2],[5604,1],[5626,1],[5628,2],[5664,1],[5682,1],[5690,1],[5717,1],[5749,1],[5768,2],[5814,1],[5816,1],[5818,1]]},"562":{"position":[[1275,1],[1328,1],[1477,2],[1541,1],[1563,1],[1882,2],[2013,2],[2146,2],[2281,2],[2416,2],[2553,2],[2690,2],[2829,2],[2845,1],[3036,1],[3689,2],[3828,1],[3855,1],[4154,2],[4455,2],[4612,1],[4661,1],[5031,2],[5259,2],[5324,1],[5370,1],[5379,1],[5706,2],[5841,1],[5863,1],[6100,2],[6336,1],[6381,1],[6411,2],[6423,1],[6455,2],[6467,1],[6497,2],[6509,1],[6522,1],[6661,1],[6837,2],[7001,1],[7041,1],[7097,2],[7145,2],[7170,1],[7531,1],[7561,1],[7572,1],[7598,1],[7620,1],[7634,1],[7745,2],[7973,2],[8013,2],[8063,2],[8095,2],[8114,2],[8327,2],[8370,2],[8426,2],[8458,2],[8480,2],[8752,2],[8784,2],[8803,2],[9122,1],[9148,1],[9230,1],[9244,1],[9294,1],[9338,1],[9382,1],[9426,1],[9442,1],[9469,1],[9516,1],[9535,1],[9562,1],[9594,1],[9606,1],[9631,1],[9653,1],[9671,1],[9699,1],[9724,1],[9743,1],[9763,1],[9799,1],[9945,1],[9972,1],[9982,1],[10003,1],[10031,1],[10054,1],[10079,1],[10130,1],[10194,1],[10206,1],[10208,1],[10243,1],[10311,1],[10323,1],[10348,1],[10400,1],[10464,1],[10476,1],[10478,1],[10480,1],[10801,2],[10833,2],[10883,2],[10933,1],[10958,1],[11036,1],[11044,1],[11053,2],[11087,1],[11150,1],[11152,1]]},"564":{"position":[[6524,2],[6950,2],[7370,2],[7781,2],[8201,2],[8618,2],[9534,2],[10405,2],[11472,2],[13123,2],[14098,2],[15704,1],[15738,1],[15776,2],[15798,1],[15838,2],[15860,1],[15868,1],[18989,1],[19019,1],[19030,1],[19056,1],[19078,1],[19092,1],[19357,2],[19533,2],[19573,2],[19623,2],[19655,2],[19674,2],[19828,2],[19871,2],[19927,2],[19959,2],[19981,2],[20194,2],[20226,2],[20245,2],[20585,1],[20611,1],[20652,1],[20704,1],[20718,1],[20768,1],[20812,1],[20856,1],[20900,1],[20916,1],[20943,1],[20990,1],[21009,1],[21036,1],[21068,1],[21080,1],[21105,1],[21127,1],[21145,1],[21173,1],[21198,1],[21217,1],[21237,1],[21273,1],[21419,1],[21446,1],[21456,1],[21477,1],[21505,1],[21528,1],[21553,1],[21604,1],[21668,1],[21680,1],[21682,1],[21717,1],[21785,1],[21797,1],[21822,1],[21874,1],[21938,1],[21950,1],[21952,1],[21954,1],[24437,1],[24480,2],[24543,2],[24608,2],[24642,1],[25248,1],[25272,1],[25331,2],[25402,2],[25474,2],[25545,2],[25578,1]]},"566":{"position":[[414,2],[670,2],[1048,2],[1516,2],[1705,2],[1714,1],[1866,1],[1899,1],[1973,1],[2018,1],[2029,1],[2049,1],[2063,1],[2070,1],[2101,1],[2132,1],[2166,1],[2173,1],[2195,1],[2228,1],[2253,1],[2260,1],[2288,1],[2321,1],[2353,1],[2360,1],[2386,1],[2416,1],[2445,1],[2452,1],[2475,1],[2511,1],[2525,2],[2545,1],[2547,1],[2829,2],[2838,1],[2990,1],[3023,1],[3097,1],[3142,1],[3153,1],[3173,1],[3187,1],[3192,1],[3204,1],[3235,1],[3266,1],[3300,1],[3305,1],[3321,1],[3357,1],[3369,2],[3384,1],[3389,1],[3401,1],[3422,1],[3452,1],[3490,1],[3495,1],[3511,1],[3552,1],[3567,2],[3582,1],[3587,1],[3599,1],[3621,1],[3654,1],[3693,1],[3698,1],[3710,1],[3736,1],[3766,1],[3809,1],[3814,1],[3826,1],[3849,1],[3885,1],[3925,1],[3930,1],[3946,1],[3974,1],[3984,2],[3999,1],[4004,1],[4016,1],[4044,1],[4077,1],[4123,1],[4128,1],[4141,1],[4171,1],[4203,1],[4250,1],[4255,1],[4268,1],[4296,1],[4325,1],[4370,1],[4375,1],[4388,1],[4410,1],[4436,1],[4463,2],[4483,1],[4485,1],[4684,2],[4693,1],[4845,1],[4878,1],[4952,1],[4997,1],[5008,1],[5028,1],[5042,1],[5047,1],[5059,1],[5090,1],[5121,1],[5155,1],[5160,1],[5176,1],[5212,1],[5235,1],[5255,2],[5270,1],[5275,1],[5287,1],[5308,1],[5338,1],[5376,1],[5381,1],[5397,1],[5438,1],[5464,1],[5484,2],[5499,1],[5504,1],[5516,1],[5538,1],[5571,1],[5610,1],[5615,1],[5627,1],[5653,1],[5683,1],[5726,1],[5731,1],[5743,1],[5766,1],[5802,1],[5842,1],[5847,1],[5863,1],[5891,1],[5912,1],[5931,2],[5946,1],[5951,1],[5963,1],[5991,1],[6024,1],[6070,1],[6075,1],[6088,1],[6118,1],[6150,1],[6197,1],[6202,1],[6215,1],[6243,1],[6272,1],[6317,1],[6322,1],[6335,1],[6357,1],[6383,1],[6410,2],[6430,1],[6432,1],[6720,2],[6975,1],[7127,1],[7160,1],[7234,1],[7279,1],[7290,1],[7310,1],[7324,1],[7329,1],[7341,1],[7372,1],[7403,1],[7437,1],[7442,1],[7458,1],[7494,1],[7517,1],[7537,2],[7552,1],[7557,1],[7569,1],[7590,1],[7620,1],[7658,1],[7663,1],[7679,1],[7720,1],[7746,1],[7766,2],[7781,1],[7786,1],[7798,1],[7820,1],[7853,1],[7892,1],[7897,1],[7909,1],[7935,1],[7965,1],[8008,1],[8013,1],[8025,1],[8048,1],[8084,1],[8124,1],[8129,1],[8145,1],[8173,1],[8194,1],[8213,2],[8228,1],[8233,1],[8245,1],[8273,1],[8306,1],[8352,1],[8357,1],[8370,1],[8400,1],[8432,1],[8479,1],[8484,1],[8497,1],[8525,1],[8554,1],[8599,1],[8604,1],[8617,1],[8639,1],[8665,1],[8692,2],[8712,1],[8714,1],[8980,2],[9117,2],[9308,1],[9460,1],[9493,1],[9567,1],[9612,1],[9623,1],[9643,1],[9657,1],[9662,1],[9674,1],[9705,1],[9736,1],[9770,1],[9775,1],[9791,1],[9827,1],[9850,1],[9870,2],[9885,1],[9890,1],[9902,1],[9923,1],[9953,1],[9991,1],[9996,1],[10012,1],[10053,1],[10079,1],[10099,2],[10114,1],[10119,1],[10131,1],[10153,1],[10186,1],[10225,1],[10230,1],[10242,1],[10268,1],[10298,1],[10341,1],[10346,1],[10358,1],[10381,1],[10417,1],[10457,1],[10462,1],[10478,1],[10506,1],[10527,1],[10546,2],[10561,1],[10566,1],[10578,1],[10606,1],[10639,1],[10685,1],[10690,1],[10703,1],[10733,1],[10765,1],[10812,1],[10817,1],[10830,1],[10858,1],[10887,1],[10932,1],[10937,1],[10950,1],[10972,1],[10998,1],[11025,2],[11045,1],[11076,2],[11104,1],[11433,2],[11570,2],[11761,1],[11913,1],[11946,1],[12020,1],[12065,1],[12076,1],[12096,1],[12110,1],[12115,1],[12127,1],[12158,1],[12189,1],[12223,1],[12228,1],[12244,1],[12280,1],[12303,1],[12323,2],[12338,1],[12343,1],[12355,1],[12376,1],[12406,1],[12444,1],[12449,1],[12465,1],[12506,1],[12532,1],[12552,2],[12567,1],[12572,1],[12584,1],[12606,1],[12639,1],[12678,1],[12683,1],[12695,1],[12721,1],[12751,1],[12794,1],[12799,1],[12811,1],[12834,1],[12870,1],[12910,1],[12915,1],[12931,1],[12959,1],[12980,1],[12999,2],[13014,1],[13019,1],[13031,1],[13059,1],[13092,1],[13138,1],[13143,1],[13156,1],[13186,1],[13218,1],[13265,1],[13270,1],[13283,1],[13311,1],[13340,1],[13385,1],[13390,1],[13403,1],[13425,1],[13451,1],[13478,2],[13498,1],[13529,2],[13557,1],[13843,2],[13980,2],[14171,1],[14323,1],[14356,1],[14430,1],[14475,1],[14486,1],[14506,1],[14520,1],[14525,1],[14537,1],[14568,1],[14599,1],[14633,1],[14638,1],[14654,1],[14690,1],[14713,1],[14733,2],[14748,1],[14753,1],[14765,1],[14786,1],[14816,1],[14854,1],[14859,1],[14875,1],[14916,1],[14942,1],[14962,2],[14977,1],[14982,1],[14994,1],[15016,1],[15049,1],[15088,1],[15093,1],[15105,1],[15131,1],[15161,1],[15204,1],[15209,1],[15221,1],[15244,1],[15280,1],[15320,1],[15325,1],[15341,1],[15369,1],[15390,1],[15409,2],[15424,1],[15429,1],[15441,1],[15469,1],[15502,1],[15548,1],[15553,1],[15566,1],[15596,1],[15628,1],[15675,1],[15680,1],[15693,1],[15721,1],[15750,1],[15795,1],[15800,1],[15813,1],[15835,1],[15861,1],[15888,2],[15908,1],[15939,2],[15967,1],[16257,2],[16394,2],[16585,1],[16737,1],[16770,1],[16844,1],[16889,1],[16900,1],[16920,1],[16934,1],[16939,1],[16951,1],[16982,1],[17013,1],[17047,1],[17052,1],[17068,1],[17104,1],[17127,1],[17147,2],[17162,1],[17167,1],[17179,1],[17200,1],[17230,1],[17268,1],[17273,1],[17289,1],[17330,1],[17356,1],[17376,2],[17391,1],[17396,1],[17408,1],[17430,1],[17463,1],[17502,1],[17507,1],[17519,1],[17545,1],[17575,1],[17618,1],[17623,1],[17635,1],[17658,1],[17694,1],[17734,1],[17739,1],[17755,1],[17783,1],[17804,1],[17823,2],[17838,1],[17843,1],[17855,1],[17883,1],[17916,1],[17962,1],[17967,1],[17980,1],[18010,1],[18042,1],[18089,1],[18094,1],[18107,1],[18135,1],[18164,1],[18209,1],[18214,1],[18227,1],[18249,1],[18275,1],[18302,2],[18322,1],[18353,2],[18381,1],[18685,2],[19060,1],[19101,1],[19243,1],[19276,1],[19350,1],[19395,1],[19406,1],[19426,1],[19440,1],[19445,1],[19457,1],[19488,1],[19519,1],[19553,1],[19558,1],[19574,1],[19610,1],[19633,1],[19653,2],[19668,1],[19673,1],[19685,1],[19706,1],[19736,1],[19774,1],[19779,1],[19795,1],[19836,1],[19862,1],[19882,2],[19897,1],[19902,1],[19914,1],[19936,1],[19969,1],[20008,1],[20013,1],[20025,1],[20051,1],[20081,1],[20124,1],[20129,1],[20141,1],[20164,1],[20200,1],[20240,1],[20245,1],[20261,1],[20289,1],[20310,1],[20329,2],[20344,1],[20349,1],[20361,1],[20389,1],[20422,1],[20468,1],[20473,1],[20486,1],[20516,1],[20548,1],[20595,1],[20600,1],[20613,1],[20641,1],[20670,1],[20715,1],[20720,1],[20733,1],[20755,1],[20781,1],[20808,2],[20828,1],[20865,2],[20885,1],[20906,1],[20931,1],[20947,1],[22162,1],[22173,1],[22408,2],[22417,1],[22569,1],[22602,1],[22676,1],[22721,1],[22732,1],[22752,1],[22766,1],[22771,1],[22783,1],[22814,1],[22845,1],[22879,1],[22884,1],[22900,1],[22936,1],[22948,2],[22963,1],[22968,1],[22980,1],[23001,1],[23031,1],[23069,1],[23074,1],[23090,1],[23131,1],[23146,2],[23161,1],[23166,1],[23178,1],[23200,1],[23233,1],[23286,1],[23291,1],[23303,1],[23329,1],[23359,1],[23416,1],[23421,1],[23433,1],[23456,1],[23492,1],[23546,1],[23551,1],[23567,1],[23595,1],[23605,2],[23620,1],[23625,1],[23637,1],[23665,1],[23698,1],[23744,1],[23749,1],[23762,1],[23792,1],[23824,1],[23871,1],[23876,1],[23889,1],[23917,1],[23946,1],[23991,1],[23996,1],[24009,1],[24031,1],[24057,1],[24084,2],[24104,1],[24106,1]]},"568":{"position":[[174,1],[598,2],[1146,2],[1829,2],[1973,1],[1986,1],[1988,2],[2075,2],[2185,2],[3631,1],[3863,2],[4969,2],[7506,1],[7590,1],[7602,1],[7624,1],[7640,1],[7645,1],[7657,1],[7680,1],[7701,1],[7740,1],[7747,2],[7764,1],[7769,1],[7781,1],[7802,1],[7834,1],[7871,1],[7878,2],[7895,1],[7900,1],[7912,1],[7934,1],[7957,1],[7995,1],[8002,2],[8019,1],[8024,1],[8036,1],[8057,1],[8086,1],[8123,1],[8131,2],[8148,1],[8153,1],[8165,1],[8189,1],[8219,1],[8257,1],[8264,2],[8281,1],[8286,1],[8298,1],[8320,1],[8339,1],[8377,1],[8384,2],[8401,1],[8406,1],[8418,1],[8442,1],[8461,1],[8499,1],[8506,2],[8523,1],[8528,1],[8540,1],[8563,1],[8585,1],[8622,1],[8629,2],[8646,1],[8651,1],[8663,1],[8685,1],[8704,1],[8741,1],[8748,2],[8751,2],[8754,1],[8876,1],[8936,1],[8938,1],[9851,1],[9935,1],[9947,1],[9969,1],[9985,1],[9990,1],[10002,1],[10025,1],[10046,1],[10085,1],[10092,2],[10109,1],[10114,1],[10126,1],[10147,1],[10179,1],[10216,1],[10223,2],[10240,1],[10245,1],[10257,1],[10279,1],[10302,1],[10340,1],[10347,2],[10364,1],[10369,1],[10381,1],[10402,1],[10431,1],[10468,1],[10476,2],[10493,1],[10498,1],[10510,1],[10534,1],[10564,1],[10602,1],[10609,2],[10626,1],[10631,1],[10643,1],[10665,1],[10684,1],[10722,1],[10729,2],[10746,1],[10751,1],[10763,1],[10787,1],[10806,1],[10844,1],[10851,2],[10868,1],[10873,1],[10885,1],[10908,1],[10930,1],[10967,1],[10974,2],[10991,1],[10996,1],[11008,1],[11030,1],[11049,1],[11086,1],[11093,2],[11096,2],[11099,1],[11221,1],[11281,1],[11283,1],[12227,1],[12311,1],[12323,1],[12345,1],[12361,1],[12366,1],[12378,1],[12401,1],[12422,1],[12461,1],[12468,2],[12485,1],[12490,1],[12502,1],[12523,1],[12555,1],[12592,1],[12599,2],[12616,1],[12621,1],[12633,1],[12655,1],[12678,1],[12716,1],[12723,2],[12740,1],[12745,1],[12757,1],[12778,1],[12807,1],[12844,1],[12852,2],[12869,1],[12874,1],[12886,1],[12910,1],[12940,1],[12978,1],[12985,2],[13002,1],[13007,1],[13019,1],[13041,1],[13060,1],[13098,1],[13105,2],[13122,1],[13127,1],[13139,1],[13163,1],[13182,1],[13220,1],[13227,2],[13244,1],[13249,1],[13261,1],[13285,1],[13312,1],[13350,1],[13357,2],[13374,1],[13379,1],[13391,1],[13415,1],[13437,1],[13475,1],[13482,2],[13499,1],[13504,1],[13516,1],[13539,1],[13561,1],[13598,1],[13605,2],[13622,1],[13627,1],[13639,1],[13661,1],[13680,1],[13717,1],[13724,2],[13741,1],[13746,1],[13758,1],[13782,1],[13805,1],[13843,1],[13850,2],[13853,2],[13856,1],[13978,1],[14038,1],[14040,1],[14457,2],[14575,2],[14695,2],[14821,2],[14934,2],[14999,1],[15083,1],[15095,1],[15117,1],[15133,1],[15138,1],[15150,1],[15173,1],[15194,1],[15233,1],[15240,2],[15257,1],[15262,1],[15274,1],[15295,1],[15327,1],[15364,1],[15371,2],[15388,1],[15393,1],[15405,1],[15427,1],[15450,1],[15488,1],[15495,2],[15512,1],[15517,1],[15529,1],[15550,1],[15579,1],[15616,1],[15624,2],[15641,1],[15646,1],[15658,1],[15682,1],[15712,1],[15750,1],[15757,2],[15774,1],[15779,1],[15791,1],[15813,1],[15832,1],[15870,1],[15877,2],[15894,1],[15899,1],[15911,1],[15935,1],[15954,1],[15992,1],[15999,2],[16016,1],[16021,1],[16033,1],[16056,1],[16078,1],[16115,1],[16122,2],[16139,1],[16144,1],[16156,1],[16178,1],[16197,1],[16234,1],[16241,2],[16244,2],[16247,1],[16369,1],[16429,1],[16431,1],[16786,2],[16924,2],[17071,2],[17216,2],[17353,2],[17418,1],[17502,1],[17514,1],[17536,1],[17552,1],[17557,1],[17569,1],[17592,1],[17613,1],[17652,1],[17659,2],[17676,1],[17681,1],[17693,1],[17714,1],[17746,1],[17783,1],[17790,2],[17807,1],[17812,1],[17824,1],[17846,1],[17869,1],[17907,1],[17914,2],[17931,1],[17936,1],[17948,1],[17969,1],[17998,1],[18035,1],[18043,2],[18060,1],[18065,1],[18077,1],[18101,1],[18131,1],[18169,1],[18176,2],[18193,1],[18198,1],[18210,1],[18232,1],[18251,1],[18289,1],[18296,2],[18313,1],[18318,1],[18330,1],[18354,1],[18373,1],[18411,1],[18418,2],[18435,1],[18440,1],[18452,1],[18476,1],[18503,1],[18541,1],[18548,2],[18565,1],[18570,1],[18582,1],[18606,1],[18628,1],[18666,1],[18673,2],[18690,1],[18695,1],[18707,1],[18730,1],[18752,1],[18789,1],[18796,2],[18813,1],[18818,1],[18830,1],[18852,1],[18871,1],[18908,1],[18915,2],[18932,1],[18937,1],[18949,1],[18973,1],[18996,1],[19034,1],[19041,2],[19044,2],[19047,1],[19169,1],[19229,1],[19231,1],[20170,1],[20254,1],[20266,1],[20288,1],[20304,1],[20309,1],[20321,1],[20344,1],[20365,1],[20404,1],[20411,2],[20428,1],[20433,1],[20445,1],[20466,1],[20498,1],[20535,1],[20542,2],[20559,1],[20564,1],[20576,1],[20598,1],[20621,1],[20659,1],[20666,2],[20683,1],[20688,1],[20700,1],[20721,1],[20750,1],[20787,1],[20795,2],[20812,1],[20817,1],[20829,1],[20853,1],[20883,1],[20921,1],[20928,2],[20945,1],[20950,1],[20962,1],[20984,1],[21003,1],[21041,1],[21048,2],[21065,1],[21070,1],[21082,1],[21106,1],[21125,1],[21163,1],[21170,2],[21187,1],[21192,1],[21204,1],[21227,1],[21249,1],[21286,1],[21293,2],[21310,1],[21315,1],[21327,1],[21349,1],[21368,1],[21405,1],[21412,2],[21415,2],[21418,1],[21540,1],[21600,1],[21602,1],[22572,1],[22656,1],[22668,1],[22690,1],[22706,1],[22711,1],[22723,1],[22746,1],[22767,1],[22806,1],[22813,2],[22830,1],[22835,1],[22847,1],[22868,1],[22900,1],[22937,1],[22944,2],[22961,1],[22966,1],[22978,1],[23000,1],[23023,1],[23061,1],[23068,2],[23085,1],[23090,1],[23102,1],[23123,1],[23152,1],[23189,1],[23197,2],[23214,1],[23219,1],[23231,1],[23255,1],[23285,1],[23323,1],[23330,2],[23347,1],[23352,1],[23364,1],[23386,1],[23405,1],[23443,1],[23450,2],[23467,1],[23472,1],[23484,1],[23508,1],[23527,1],[23565,1],[23572,2],[23589,1],[23594,1],[23606,1],[23629,1],[23651,1],[23688,1],[23695,2],[23712,1],[23717,1],[23729,1],[23751,1],[23770,1],[23807,1],[23814,2],[23817,2],[23820,1],[23942,1],[24002,1],[24004,1],[25638,1],[25722,1],[25734,1],[25756,1],[25772,1],[25777,1],[25794,1],[25814,1],[25831,1],[25870,1],[25911,1],[25932,1],[25969,1],[25986,1],[25993,2],[26010,1],[26015,1],[26032,1],[26050,1],[26065,1],[26102,1],[26143,1],[26175,1],[26210,1],[26228,1],[26235,2],[26252,1],[26257,1],[26274,1],[26293,1],[26309,1],[26347,1],[26388,1],[26411,1],[26447,1],[26465,1],[26472,2],[26489,1],[26494,1],[26511,1],[26529,1],[26544,1],[26581,1],[26622,1],[26651,1],[26686,1],[26704,1],[26712,2],[26729,1],[26734,1],[26751,1],[26772,1],[26788,1],[26828,1],[26869,1],[26899,1],[26935,1],[26957,1],[26964,2],[26981,1],[26986,1],[27003,1],[27022,1],[27035,1],[27073,1],[27114,1],[27133,1],[27169,1],[27187,1],[27194,2],[27211,1],[27216,1],[27233,1],[27254,1],[27272,1],[27312,1],[27353,1],[27372,1],[27408,1],[27426,1],[27433,2],[27450,1],[27455,1],[27472,1],[27492,1],[27511,1],[27550,1],[27591,1],[27613,1],[27648,1],[27666,1],[27673,2],[27690,1],[27695,1],[27712,1],[27731,1],[27750,1],[27788,1],[27829,1],[27848,1],[27883,1],[27900,1],[27907,2],[27910,2],[27913,1],[28035,1],[28095,1],[28097,1],[28584,2],[28746,2],[28919,2],[29098,2],[29268,2],[29419,2],[29577,2],[29642,1],[29694,1],[29706,1],[29826,1],[29846,1],[29848,3],[29880,1],[29934,2],[29960,1],[29962,2],[30035,1],[30082,1],[30118,1],[30131,1],[30312,1],[30319,1],[30346,1],[30361,3],[30365,1],[30367,1],[31026,2],[31147,2],[31338,2],[31467,2],[31583,2],[31649,1],[31733,1],[31745,1],[31767,1],[31783,1],[31788,1],[31800,1],[31823,1],[31844,1],[31883,1],[31890,2],[31907,1],[31912,1],[31924,1],[31945,1],[31977,1],[32014,1],[32021,2],[32038,1],[32043,1],[32055,1],[32077,1],[32100,1],[32138,1],[32145,2],[32162,1],[32167,1],[32179,1],[32200,1],[32229,1],[32266,1],[32274,2],[32291,1],[32296,1],[32308,1],[32332,1],[32362,1],[32400,1],[32407,2],[32424,1],[32429,1],[32441,1],[32463,1],[32482,1],[32520,1],[32527,2],[32544,1],[32549,1],[32561,1],[32585,1],[32604,1],[32642,1],[32649,2],[32666,1],[32671,1],[32683,1],[32706,1],[32728,1],[32765,1],[32772,2],[32789,1],[32794,1],[32806,1],[32828,1],[32847,1],[32884,1],[32891,2],[32894,2],[32897,1],[33019,1],[33079,1],[33081,1],[33488,2],[33609,2],[33832,2],[33948,2],[34014,1],[34098,1],[34110,1],[34132,1],[34148,1],[34153,1],[34165,1],[34188,1],[34209,1],[34248,1],[34255,2],[34272,1],[34277,1],[34289,1],[34310,1],[34342,1],[34379,1],[34386,2],[34403,1],[34408,1],[34420,1],[34442,1],[34465,1],[34503,1],[34510,2],[34527,1],[34532,1],[34544,1],[34565,1],[34594,1],[34631,1],[34639,2],[34656,1],[34661,1],[34673,1],[34697,1],[34727,1],[34765,1],[34772,2],[34789,1],[34794,1],[34806,1],[34828,1],[34847,1],[34885,1],[34892,2],[34909,1],[34914,1],[34926,1],[34950,1],[34969,1],[35007,1],[35014,2],[35031,1],[35036,1],[35048,1],[35071,1],[35093,1],[35130,1],[35137,2],[35154,1],[35159,1],[35171,1],[35193,1],[35212,1],[35249,1],[35256,2],[35259,2],[35262,1],[35384,1],[35444,1],[35446,1],[36379,1],[36463,1],[36475,1],[36497,1],[36513,1],[36518,1],[36530,1],[36553,1],[36574,1],[36613,1],[36620,2],[36637,1],[36642,1],[36654,1],[36675,1],[36707,1],[36744,1],[36751,2],[36768,1],[36773,1],[36785,1],[36807,1],[36830,1],[36868,1],[36875,2],[36892,1],[36897,1],[36909,1],[36930,1],[36959,1],[36996,1],[37004,2],[37021,1],[37026,1],[37038,1],[37062,1],[37092,1],[37130,1],[37137,2],[37154,1],[37159,1],[37171,1],[37193,1],[37212,1],[37250,1],[37257,2],[37274,1],[37279,1],[37291,1],[37315,1],[37334,1],[37372,1],[37379,2],[37396,1],[37401,1],[37413,1],[37436,1],[37458,1],[37495,1],[37502,2],[37519,1],[37524,1],[37536,1],[37558,1],[37577,1],[37614,1],[37621,2],[37624,2],[37627,1],[37749,1],[37809,1],[37811,1],[38784,1],[38868,1],[38880,1],[38902,1],[38918,1],[38923,1],[38935,1],[38958,1],[38982,1],[38999,1],[39006,2],[39023,1],[39028,1],[39040,1],[39061,1],[39096,1],[39114,1],[39121,2],[39138,1],[39143,1],[39155,1],[39177,1],[39203,1],[39221,1],[39228,2],[39245,1],[39250,1],[39262,1],[39283,1],[39315,1],[39333,1],[39341,2],[39358,1],[39363,1],[39375,1],[39399,1],[39432,1],[39454,1],[39461,2],[39478,1],[39483,1],[39495,1],[39517,1],[39539,1],[39557,1],[39564,2],[39581,1],[39586,1],[39598,1],[39622,1],[39644,1],[39662,1],[39669,2],[39686,1],[39691,1],[39703,1],[39726,1],[39751,1],[39769,1],[39776,2],[39793,1],[39798,1],[39810,1],[39832,1],[39854,1],[39871,1],[39878,2],[39881,2],[39884,1],[40006,1],[40066,1],[40068,1],[41042,1],[41126,1],[41138,1],[41160,1],[41176,1],[41181,1],[41193,1],[41216,1],[41240,1],[41257,1],[41264,2],[41281,1],[41286,1],[41298,1],[41319,1],[41354,1],[41372,1],[41379,2],[41396,1],[41401,1],[41413,1],[41435,1],[41461,1],[41479,1],[41486,2],[41503,1],[41508,1],[41520,1],[41541,1],[41573,1],[41591,1],[41599,2],[41616,1],[41621,1],[41633,1],[41657,1],[41690,1],[41712,1],[41719,2],[41736,1],[41741,1],[41753,1],[41775,1],[41797,1],[41815,1],[41822,2],[41839,1],[41844,1],[41856,1],[41880,1],[41902,1],[41920,1],[41927,2],[41944,1],[41949,1],[41961,1],[41984,1],[42009,1],[42027,1],[42034,2],[42051,1],[42056,1],[42068,1],[42090,1],[42112,1],[42129,1],[42136,2],[42139,2],[42142,1],[42264,1],[42324,1],[42326,1],[43667,1],[43751,1],[43763,1],[43785,1],[43801,1],[43806,1],[43823,1],[43843,1],[43860,1],[43899,1],[43940,1],[43961,1],[43998,1],[44015,1],[44022,2],[44039,1],[44044,1],[44061,1],[44079,1],[44094,1],[44131,1],[44172,1],[44204,1],[44239,1],[44257,1],[44264,2],[44281,1],[44286,1],[44303,1],[44322,1],[44338,1],[44376,1],[44417,1],[44440,1],[44476,1],[44494,1],[44501,2],[44518,1],[44523,1],[44540,1],[44558,1],[44573,1],[44610,1],[44651,1],[44680,1],[44715,1],[44733,1],[44741,2],[44758,1],[44763,1],[44780,1],[44801,1],[44817,1],[44857,1],[44898,1],[44928,1],[44964,1],[44986,1],[44993,2],[45010,1],[45015,1],[45032,1],[45051,1],[45064,1],[45102,1],[45143,1],[45162,1],[45198,1],[45216,1],[45223,2],[45240,1],[45245,1],[45262,1],[45283,1],[45301,1],[45341,1],[45382,1],[45401,1],[45437,1],[45455,1],[45462,2],[45479,1],[45484,1],[45501,1],[45521,1],[45540,1],[45579,1],[45620,1],[45642,1],[45677,1],[45695,1],[45702,2],[45719,1],[45724,1],[45741,1],[45760,1],[45779,1],[45817,1],[45858,1],[45877,1],[45912,1],[45929,1],[45936,2],[45939,2],[45942,1],[46064,1],[46124,1],[46126,1],[47020,1],[47104,1],[47116,1],[47138,1],[47154,1],[47159,1],[47171,1],[47194,1],[47215,1],[47254,1],[47261,2],[47278,1],[47283,1],[47295,1],[47316,1],[47348,1],[47385,1],[47392,2],[47409,1],[47414,1],[47426,1],[47448,1],[47471,1],[47509,1],[47516,2],[47533,1],[47538,1],[47550,1],[47571,1],[47600,1],[47637,1],[47645,2],[47662,1],[47667,1],[47679,1],[47703,1],[47733,1],[47771,1],[47778,2],[47795,1],[47800,1],[47812,1],[47834,1],[47853,1],[47891,1],[47898,2],[47915,1],[47920,1],[47932,1],[47956,1],[47975,1],[48013,1],[48020,2],[48037,1],[48042,1],[48054,1],[48078,1],[48105,1],[48143,1],[48150,2],[48167,1],[48172,1],[48184,1],[48208,1],[48230,1],[48268,1],[48275,2],[48292,1],[48297,1],[48309,1],[48332,1],[48354,1],[48391,1],[48398,2],[48415,1],[48420,1],[48432,1],[48454,1],[48473,1],[48510,1],[48517,2],[48534,1],[48539,1],[48551,1],[48575,1],[48598,1],[48636,1],[48643,2],[48646,2],[48649,1],[48771,1],[48831,1],[48833,1],[49545,1],[49665,1],[49736,1],[49743,1],[49778,1],[49782,3],[49786,1],[49788,1],[50767,2],[50975,2],[51122,2],[51267,2],[51404,2],[51469,1],[51581,1],[51593,1],[51624,1],[51636,1],[51758,1],[51783,2],[51872,1],[51890,2],[51998,1],[52064,1],[52096,2],[52227,1],[52252,1],[52368,1],[52426,1],[52445,1],[52596,1],[52706,1],[52754,1],[52783,1],[52799,1],[52804,1],[52816,1],[52839,1],[52860,1],[52899,1],[52906,2],[52923,1],[52928,1],[52940,1],[52961,1],[52993,1],[53030,1],[53037,2],[53054,1],[53059,1],[53071,1],[53093,1],[53116,1],[53154,1],[53161,2],[53178,1],[53183,1],[53195,1],[53216,1],[53245,1],[53282,1],[53290,2],[53307,1],[53312,1],[53324,1],[53348,1],[53378,1],[53416,1],[53423,2],[53440,1],[53445,1],[53457,1],[53479,1],[53498,1],[53536,1],[53543,2],[53560,1],[53565,1],[53577,1],[53601,1],[53620,1],[53658,1],[53665,2],[53682,1],[53687,1],[53699,1],[53723,1],[53750,1],[53788,1],[53795,2],[53812,1],[53817,1],[53829,1],[53853,1],[53875,1],[53913,1],[53920,2],[53937,1],[53942,1],[53954,1],[53977,1],[53999,1],[54036,1],[54043,2],[54060,1],[54065,1],[54077,1],[54099,1],[54118,1],[54155,1],[54162,2],[54179,1],[54184,1],[54196,1],[54220,1],[54243,1],[54281,1],[54288,2],[54291,2],[54294,1],[54296,1],[54584,1],[55253,1],[55261,1],[55322,1],[55347,1],[55386,1],[55422,1],[55438,1],[55443,1],[55455,1],[55478,1],[55499,1],[55538,1],[55545,2],[55562,1],[55567,1],[55579,1],[55600,1],[55632,1],[55669,1],[55676,2],[55693,1],[55698,1],[55710,1],[55732,1],[55755,1],[55793,1],[55800,2],[55817,1],[55822,1],[55834,1],[55855,1],[55884,1],[55921,1],[55929,2],[55946,1],[55951,1],[55963,1],[55987,1],[56017,1],[56055,1],[56062,1],[56064,3],[56105,1],[56141,1],[56157,1],[56162,1],[56174,1],[56196,1],[56215,1],[56253,1],[56260,2],[56277,1],[56282,1],[56294,1],[56318,1],[56337,1],[56375,1],[56382,2],[56399,1],[56404,1],[56416,1],[56439,1],[56461,1],[56498,1],[56505,2],[56522,1],[56527,1],[56539,1],[56561,1],[56580,1],[56617,1],[56624,1],[56626,2],[56629,2],[56632,1],[57742,1],[57841,1],[57853,1],[57875,1],[57891,1],[57896,1],[57908,1],[57931,1],[57952,1],[57991,1],[57998,2],[58015,1],[58020,1],[58032,1],[58053,1],[58085,1],[58122,1],[58129,2],[58146,1],[58151,1],[58163,1],[58185,1],[58208,1],[58246,1],[58253,2],[58270,1],[58275,1],[58287,1],[58308,1],[58337,1],[58374,1],[58382,2],[58399,1],[58404,1],[58416,1],[58440,1],[58470,1],[58508,1],[58515,1],[58517,2],[58520,1],[58555,1],[58557,2],[58619,2],[58717,1],[58747,1],[58749,2],[58784,1],[58854,2],[58943,2],[58994,1],[59002,1],[59039,1],[59049,1],[59075,1],[59093,2],[59102,1],[59116,1],[59156,1],[59191,1],[59303,1],[59323,1],[59325,1],[60300,2],[60438,2],[60585,2],[60730,2],[60867,2],[60932,1],[61096,1],[61121,2],[61210,1],[61228,2],[61336,1],[61380,1],[61449,2],[61510,1],[61558,1],[61587,1],[61603,1],[61608,1],[61620,1],[61643,1],[61664,1],[61703,1],[61710,2],[61727,1],[61732,1],[61744,1],[61765,1],[61797,1],[61834,1],[61841,2],[61858,1],[61863,1],[61875,1],[61897,1],[61920,1],[61958,1],[61965,2],[61982,1],[61987,1],[61999,1],[62020,1],[62049,1],[62086,1],[62094,2],[62111,1],[62116,1],[62128,1],[62152,1],[62182,1],[62220,1],[62227,2],[62244,1],[62249,1],[62261,1],[62283,1],[62302,1],[62340,1],[62347,2],[62364,1],[62369,1],[62381,1],[62405,1],[62424,1],[62462,1],[62469,2],[62486,1],[62491,1],[62503,1],[62527,1],[62554,1],[62592,1],[62599,2],[62616,1],[62621,1],[62633,1],[62657,1],[62679,1],[62717,1],[62724,2],[62741,1],[62746,1],[62758,1],[62781,1],[62803,1],[62840,1],[62847,2],[62864,1],[62869,1],[62881,1],[62903,1],[62922,1],[62959,1],[62966,2],[62983,1],[62988,1],[63000,1],[63024,1],[63047,1],[63085,1],[63092,2],[63095,2],[63098,1],[63100,1],[63627,2],[63765,2],[63912,2],[64057,2],[64194,2],[64229,2],[64243,1],[64261,1],[64327,1],[64491,1],[64516,2],[64605,1],[64623,2],[64731,1],[64779,1],[64808,1],[64824,1],[64829,1],[64841,1],[64864,1],[64885,1],[64924,1],[64931,2],[64948,1],[64953,1],[64965,1],[64986,1],[65018,1],[65055,1],[65062,2],[65079,1],[65084,1],[65096,1],[65118,1],[65141,1],[65179,1],[65186,2],[65203,1],[65208,1],[65220,1],[65241,1],[65270,1],[65307,1],[65315,2],[65332,1],[65337,1],[65349,1],[65373,1],[65403,1],[65441,1],[65448,2],[65465,1],[65470,1],[65482,1],[65504,1],[65523,1],[65561,1],[65568,2],[65585,1],[65590,1],[65602,1],[65626,1],[65645,1],[65683,1],[65690,2],[65707,1],[65712,1],[65724,1],[65748,1],[65775,1],[65813,1],[65820,2],[65837,1],[65842,1],[65854,1],[65878,1],[65900,1],[65938,1],[65945,2],[65962,1],[65967,1],[65979,1],[66002,1],[66024,1],[66061,1],[66068,2],[66085,1],[66090,1],[66102,1],[66124,1],[66143,1],[66180,1],[66187,2],[66204,1],[66209,1],[66221,1],[66245,1],[66268,1],[66306,1],[66313,2],[66316,2],[66319,1],[66321,1],[66834,2],[66972,2],[67119,2],[67264,2],[67567,1],[67637,1],[67643,2],[67662,2],[67682,2],[67722,2],[67736,1],[67746,1],[67868,1],[67893,2],[67982,1],[68000,2],[68108,1],[68156,1],[68185,1],[68201,1],[68206,1],[68218,1],[68241,1],[68262,1],[68301,1],[68308,2],[68325,1],[68330,1],[68342,1],[68363,1],[68395,1],[68432,1],[68439,2],[68456,1],[68461,1],[68473,1],[68495,1],[68518,1],[68556,1],[68563,2],[68580,1],[68585,1],[68597,1],[68618,1],[68647,1],[68684,1],[68692,2],[68709,1],[68714,1],[68726,1],[68750,1],[68780,1],[68818,1],[68825,2],[68842,1],[68847,1],[68859,1],[68881,1],[68900,1],[68938,1],[68945,2],[68962,1],[68967,1],[68979,1],[69003,1],[69022,1],[69060,1],[69067,2],[69084,1],[69089,1],[69101,1],[69125,1],[69152,1],[69190,1],[69197,2],[69214,1],[69219,1],[69231,1],[69255,1],[69277,1],[69315,1],[69322,2],[69339,1],[69344,1],[69356,1],[69379,1],[69401,1],[69438,1],[69445,2],[69462,1],[69467,1],[69479,1],[69501,1],[69520,1],[69557,1],[69564,2],[69581,1],[69586,1],[69598,1],[69622,1],[69645,1],[69683,1],[69690,2],[69693,2],[69696,1],[69698,1],[70681,1],[70702,1],[70723,1],[70766,1],[70823,1],[70952,1],[71031,2],[71120,1],[71138,2],[71246,1],[71294,1],[71323,1],[71339,1],[71344,1],[71356,1],[71379,1],[71400,1],[71439,1],[71446,2],[71463,1],[71468,1],[71480,1],[71501,1],[71533,1],[71570,1],[71577,2],[71594,1],[71599,1],[71611,1],[71633,1],[71656,1],[71694,1],[71701,2],[71718,1],[71723,1],[71735,1],[71756,1],[71785,1],[71822,1],[71830,2],[71847,1],[71852,1],[71864,1],[71888,1],[71918,1],[71956,1],[71963,2],[71980,1],[71985,1],[71997,1],[72019,1],[72038,1],[72076,1],[72083,2],[72100,1],[72105,1],[72117,1],[72141,1],[72160,1],[72198,1],[72205,2],[72222,1],[72227,1],[72239,1],[72262,1],[72284,1],[72321,1],[72328,2],[72345,1],[72350,1],[72362,1],[72384,1],[72403,1],[72440,1],[72447,2],[72450,2],[72453,1],[72521,1],[72541,1],[72565,2],[72584,1],[72596,1],[72632,1],[72634,1],[73656,1],[73677,1],[73698,1],[73741,1],[73798,1],[73927,1],[74006,2],[74095,1],[74113,2],[74221,1],[74269,1],[74298,1],[74314,1],[74319,1],[74331,1],[74354,1],[74375,1],[74414,1],[74421,2],[74438,1],[74443,1],[74455,1],[74476,1],[74508,1],[74545,1],[74552,2],[74569,1],[74574,1],[74586,1],[74608,1],[74631,1],[74669,1],[74676,2],[74693,1],[74698,1],[74710,1],[74731,1],[74760,1],[74797,1],[74805,2],[74822,1],[74827,1],[74839,1],[74863,1],[74893,1],[74931,1],[74938,2],[74955,1],[74960,1],[74972,1],[74994,1],[75013,1],[75051,1],[75058,2],[75075,1],[75080,1],[75092,1],[75116,1],[75135,1],[75173,1],[75180,2],[75197,1],[75202,1],[75214,1],[75237,1],[75259,1],[75296,1],[75303,2],[75320,1],[75325,1],[75337,1],[75359,1],[75378,1],[75415,1],[75422,2],[75425,2],[75428,1],[75496,1],[75516,1],[75540,2],[75559,1],[75571,1],[75607,1],[75609,1],[77007,1],[77028,1],[77049,1],[77092,1],[77149,1],[77278,1],[77303,2],[77392,1],[77410,2],[77518,1],[77566,1],[77595,1],[77611,1],[77616,1],[77628,1],[77651,1],[77672,1],[77711,1],[77718,2],[77735,1],[77740,1],[77752,1],[77773,1],[77805,1],[77842,1],[77849,2],[77866,1],[77871,1],[77883,1],[77905,1],[77928,1],[77966,1],[77973,2],[77990,1],[77995,1],[78007,1],[78028,1],[78057,1],[78094,1],[78102,2],[78119,1],[78124,1],[78136,1],[78160,1],[78190,1],[78228,1],[78235,2],[78252,1],[78257,1],[78269,1],[78291,1],[78310,1],[78348,1],[78355,2],[78372,1],[78377,1],[78389,1],[78413,1],[78432,1],[78470,1],[78477,2],[78494,1],[78499,1],[78511,1],[78534,1],[78556,1],[78593,1],[78600,2],[78617,1],[78622,1],[78634,1],[78656,1],[78675,1],[78712,1],[78719,2],[78722,2],[78725,1],[78805,1],[78830,2],[78838,1],[78846,2],[78881,1],[78887,1],[78944,1],[78960,1],[78967,2],[79002,1],[79008,1],[79076,1],[79096,1],[79120,2],[79139,1],[79151,1],[79187,1],[79189,1],[79889,2],[80004,2],[80121,2],[80168,1],[80191,1],[80237,1],[80369,1],[80394,2],[80483,1],[80501,2],[80609,1],[80657,1],[80686,1],[80702,1],[80707,1],[80719,1],[80742,1],[80763,1],[80802,1],[80809,2],[80826,1],[80831,1],[80843,1],[80864,1],[80896,1],[80933,1],[80940,2],[80957,1],[80962,1],[80974,1],[80996,1],[81019,1],[81057,1],[81064,2],[81081,1],[81086,1],[81098,1],[81119,1],[81148,1],[81185,1],[81193,2],[81210,1],[81215,1],[81227,1],[81251,1],[81281,1],[81319,1],[81326,2],[81343,1],[81348,1],[81360,1],[81382,1],[81401,1],[81439,1],[81446,2],[81463,1],[81468,1],[81480,1],[81504,1],[81523,1],[81561,1],[81568,2],[81585,1],[81590,1],[81602,1],[81626,1],[81653,1],[81691,1],[81698,2],[81715,1],[81720,1],[81732,1],[81756,1],[81778,1],[81816,1],[81823,2],[81840,1],[81845,1],[81857,1],[81880,1],[81902,1],[81939,1],[81946,2],[81963,1],[81968,1],[81980,1],[82002,1],[82021,1],[82058,1],[82065,2],[82082,1],[82087,1],[82099,1],[82123,1],[82146,1],[82184,1],[82191,2],[82194,2],[82197,1],[82233,2],[82245,1],[82253,1],[82505,1],[82515,3],[82960,1],[83003,1],[83135,1],[83160,2],[83249,1],[83267,2],[83375,1],[83423,1],[83452,1],[83468,1],[83473,1],[83485,1],[83508,1],[83529,1],[83568,1],[83575,2],[83592,1],[83597,1],[83609,1],[83630,1],[83662,1],[83699,1],[83706,2],[83723,1],[83728,1],[83740,1],[83762,1],[83785,1],[83823,1],[83830,2],[83847,1],[83852,1],[83864,1],[83885,1],[83914,1],[83951,1],[83959,2],[83976,1],[83981,1],[83993,1],[84017,1],[84047,1],[84085,1],[84092,2],[84109,1],[84114,1],[84126,1],[84148,1],[84167,1],[84205,1],[84212,2],[84229,1],[84234,1],[84246,1],[84270,1],[84289,1],[84327,1],[84334,2],[84351,1],[84356,1],[84368,1],[84392,1],[84419,1],[84457,1],[84464,2],[84481,1],[84486,1],[84498,1],[84522,1],[84544,1],[84582,1],[84589,2],[84606,1],[84611,1],[84623,1],[84646,1],[84668,1],[84705,1],[84712,2],[84729,1],[84734,1],[84746,1],[84768,1],[84787,1],[84824,1],[84831,2],[84848,1],[84853,1],[84865,1],[84889,1],[84912,1],[84950,1],[84957,2],[84960,2],[84963,1],[84965,1],[85255,2],[85373,2],[85493,2],[85619,2],[85732,2],[86057,2],[86175,2],[86295,2],[86421,2],[86534,2],[86845,2],[86963,2],[87083,2],[87209,2],[87322,2],[87647,2],[87765,2],[87885,2],[88011,2],[88124,2],[88189,1],[88232,1],[88364,1],[88389,2],[88478,1],[88496,2],[88604,1],[88652,1],[88681,1],[88697,1],[88702,1],[88714,1],[88735,1],[88767,1],[88804,1],[88811,2],[88828,1],[88833,1],[88845,1],[88867,1],[88890,1],[88928,1],[88935,2],[88952,1],[88957,1],[88969,1],[88990,1],[89019,1],[89056,1],[89064,2],[89081,1],[89086,1],[89098,1],[89122,1],[89152,1],[89190,1],[89197,2],[89214,1],[89219,1],[89231,1],[89253,1],[89272,1],[89310,1],[89317,2],[89334,1],[89339,1],[89351,1],[89375,1],[89394,1],[89432,1],[89439,2],[89442,2],[89445,1],[89447,1],[89851,2],[89989,2],[90136,2],[90281,2],[90418,2],[90842,2],[90980,2],[91127,2],[91272,2],[91409,2],[91831,2],[91969,2],[92116,2],[92261,2],[92398,2],[92822,2],[92960,2],[93107,2],[93252,2],[93389,2],[93807,2],[93945,2],[94092,2],[94237,2],[94374,2],[94792,2],[94930,2],[95077,2],[95222,2],[95359,2],[95787,2],[95925,2],[96072,2],[96217,2],[96354,2],[96419,1],[96462,1],[96594,1],[96619,2],[96708,1],[96726,2],[96834,1],[96882,1],[96911,1],[96927,1],[96932,1],[96944,1],[96965,1],[96997,1],[97034,1],[97041,2],[97058,1],[97063,1],[97075,1],[97097,1],[97120,1],[97158,1],[97165,2],[97182,1],[97187,1],[97199,1],[97220,1],[97249,1],[97286,1],[97294,2],[97311,1],[97316,1],[97328,1],[97352,1],[97382,1],[97420,1],[97427,2],[97444,1],[97449,1],[97461,1],[97483,1],[97502,1],[97540,1],[97547,2],[97564,1],[97569,1],[97581,1],[97605,1],[97624,1],[97662,1],[97669,2],[97672,2],[97675,1],[97677,1],[98007,2],[98125,2],[98245,2],[98371,2],[98484,2],[98549,1],[98586,1],[98598,1],[98600,1],[98653,1],[98785,1],[98810,2],[98899,1],[98917,2],[99025,1],[99073,1],[99102,1],[99118,1],[99123,1],[99135,1],[99156,1],[99188,1],[99225,1],[99232,2],[99249,1],[99254,1],[99266,1],[99288,1],[99311,1],[99349,1],[99356,2],[99373,1],[99378,1],[99390,1],[99411,1],[99440,1],[99477,1],[99485,2],[99502,1],[99507,1],[99519,1],[99543,1],[99573,1],[99611,1],[99618,2],[99635,1],[99640,1],[99652,1],[99674,1],[99693,1],[99731,1],[99738,2],[99755,1],[99760,1],[99772,1],[99796,1],[99815,1],[99853,1],[99860,2],[99863,2],[99866,1],[99932,1],[99979,1],[99986,1],[100013,1],[100043,1],[100091,3],[100095,1],[100097,1],[100445,2],[100563,2],[100683,2],[100809,2],[100922,2],[100987,1],[101024,1],[101036,1],[101038,1],[101091,1],[101223,1],[101248,2],[101337,1],[101355,2],[101463,1],[101511,1],[101540,1],[101556,1],[101561,1],[101573,1],[101594,1],[101626,1],[101663,1],[101670,2],[101687,1],[101692,1],[101704,1],[101726,1],[101749,1],[101787,1],[101794,2],[101811,1],[101816,1],[101828,1],[101849,1],[101878,1],[101915,1],[101923,2],[101940,1],[101945,1],[101957,1],[101981,1],[102011,1],[102049,1],[102056,2],[102073,1],[102078,1],[102090,1],[102112,1],[102131,1],[102169,1],[102176,2],[102193,1],[102198,1],[102210,1],[102234,1],[102253,1],[102291,1],[102298,2],[102301,2],[102304,1],[102376,1],[102423,1],[102430,1],[102457,1],[102494,1],[102542,3],[102546,1],[102548,1],[103083,1],[103093,3],[103298,2],[103436,2],[103583,2],[103728,2],[103865,2],[103930,1],[103973,1],[104070,1],[104095,1],[104129,2],[104299,2],[104659,2],[104963,2],[105092,1],[105214,1],[105239,2],[105328,1],[105346,2],[105454,1],[105502,1],[105531,1],[105547,1],[105552,1],[105564,1],[105587,1],[105608,1],[105647,1],[105654,2],[105671,1],[105676,1],[105688,1],[105709,1],[105741,1],[105778,1],[105785,2],[105802,1],[105807,1],[105819,1],[105841,1],[105864,1],[105902,1],[105909,2],[105926,1],[105931,1],[105943,1],[105964,1],[105993,1],[106030,1],[106038,2],[106055,1],[106060,1],[106072,1],[106096,1],[106126,1],[106164,1],[106171,2],[106188,1],[106193,1],[106205,1],[106227,1],[106246,1],[106284,1],[106291,2],[106308,1],[106313,1],[106325,1],[106349,1],[106368,1],[106406,1],[106413,2],[106430,1],[106435,1],[106447,1],[106471,1],[106498,1],[106536,1],[106543,2],[106560,1],[106565,1],[106577,1],[106601,1],[106623,1],[106661,1],[106668,2],[106685,1],[106690,1],[106702,1],[106725,1],[106747,1],[106784,1],[106791,2],[106808,1],[106813,1],[106825,1],[106847,1],[106866,1],[106903,1],[106910,2],[106927,1],[106932,1],[106944,1],[106968,1],[106991,1],[107029,1],[107036,2],[107039,2],[107042,1],[107044,1],[108755,1],[108794,1],[108847,1],[108926,1],[108972,1],[109094,1],[109119,2],[109208,1],[109226,2],[109334,1],[109382,1],[109411,1],[109427,1],[109432,1],[109444,1],[109467,1],[109488,1],[109527,1],[109534,2],[109551,1],[109556,1],[109569,1],[109590,1],[109622,1],[109659,1],[109666,2],[109683,1],[109688,1],[109700,1],[109722,1],[109745,1],[109783,1],[109790,2],[109807,1],[109812,1],[109824,1],[109845,1],[109874,1],[109911,1],[109919,2],[109936,1],[109941,1],[109953,1],[109977,1],[110007,1],[110045,1],[110052,2],[110069,1],[110074,1],[110086,1],[110108,1],[110127,1],[110165,1],[110172,2],[110189,1],[110194,1],[110206,1],[110230,1],[110249,1],[110287,1],[110294,2],[110311,1],[110316,1],[110328,1],[110351,1],[110373,1],[110410,1],[110417,2],[110434,1],[110439,1],[110451,1],[110473,1],[110492,1],[110509,1],[110516,2],[110533,1],[110538,1],[110550,1],[110573,1],[110585,1],[110622,1],[110629,2],[110632,2],[110635,1],[110637,1],[111014,2],[111298,2],[111492,2],[111673,2],[111860,2],[112058,2],[112276,2],[112363,1],[112415,1],[112427,1],[112429,1],[112561,1],[112581,1],[112583,3],[112615,1],[112669,2],[112695,1],[112697,2],[112770,1],[112831,1],[112881,1],[112894,1],[113114,1],[113121,1],[113148,1],[113163,3],[113167,1],[113169,1],[113543,2],[113868,2],[114062,2],[114243,2],[114430,2],[114628,2],[114900,2],[114987,1],[115039,1],[115051,1],[115053,1],[115185,1],[115205,1],[115207,3],[115239,1],[115293,2],[115319,1],[115321,2],[115394,1],[115455,1],[115505,1],[115518,1],[115738,1],[115745,1],[115772,1],[115787,3],[115791,1],[115793,1],[116204,2],[116529,2],[116723,2],[116904,2],[117091,2],[117289,2],[117561,2],[117648,1],[117700,1],[117712,1],[117714,1],[117846,1],[117866,1],[117868,3],[117900,1],[117954,2],[117980,1],[117982,2],[118055,1],[118116,1],[118166,1],[118179,1],[118399,1],[118406,1],[118433,1],[118448,3],[118452,1],[118454,1],[118899,2],[119225,2],[119419,2],[119600,2],[119787,2],[120065,2],[120337,2],[120424,1],[120476,1],[120488,1],[120490,1],[120622,1],[120642,1],[120644,3],[120676,1],[120730,2],[120756,1],[120758,2],[120831,1],[120892,1],[120942,1],[120955,1],[121175,1],[121182,1],[121209,1],[121224,3],[121228,1],[121230,1]]}}}],["0",{"_index":1523,"t":{"508":{"position":[[1386,2]]},"530":{"position":[[1436,1],[1548,2],[4038,2],[4071,2],[5137,2],[6297,2],[6698,2],[6886,2],[7096,2],[8603,1],[9145,1],[9687,1],[11126,2],[11159,2],[12089,2],[12367,2],[13302,2],[13402,2],[13897,2],[14085,2],[14295,2]]},"532":{"position":[[1094,2],[1339,1],[1465,2],[1689,1],[1801,2],[4936,2],[4965,2],[6037,2],[7380,2],[7859,1],[7956,2],[8150,2],[9032,1],[10438,1],[10709,1],[10981,1],[12666,1],[12937,1],[13209,1],[14764,1],[15035,1],[15307,1]]},"534":{"position":[[1271,1],[1383,2],[3726,2],[3759,2],[4770,2],[5866,2],[6252,2],[6440,2],[6650,2],[7520,2],[7553,2],[8684,2],[9545,2],[9640,2],[10123,2],[10311,2],[10521,2]]},"536":{"position":[[1572,1],[1684,2],[2597,2],[2600,2],[2702,2],[2705,2],[3423,2],[3499,1],[4252,1],[6987,2],[7016,2],[7930,2],[9229,2],[9848,1],[10000,2],[10194,2],[11431,1],[11973,1],[12515,1]]},"542":{"position":[[13405,2],[13476,2],[14022,1]]},"556":{"position":[[3449,3],[3488,3],[3528,3],[3581,3],[3621,3],[8891,3]]},"562":{"position":[[9655,2],[9726,2],[10273,1]]},"564":{"position":[[21129,2],[21200,2],[21747,1]]},"568":{"position":[[2162,3],[4590,1],[4732,1],[49780,1],[85165,2],[85967,2],[86755,2],[87557,2],[89670,2],[89743,2],[90661,2],[90734,2],[91651,2],[91723,2],[92641,2],[92714,2],[93629,2],[93699,2],[94614,2],[94684,2],[95604,2],[95679,2],[97893,2],[100319,2],[102885,2],[103000,2]]}}}],["0\">and",{"_index":3402,"t":{"564":{"position":[[18660,6]]}}}],["0\">whenev",{"_index":842,"t":{"486":{"position":[[1982,11]]}}}],["0,0,0",{"_index":3503,"t":{"566":{"position":[[21740,6]]}}}],["0.0",{"_index":2595,"t":{"536":{"position":[[1339,3]]}}}],["0.1",{"_index":2602,"t":{"536":{"position":[[2603,5],[2708,5]]}}}],["0.1.0",{"_index":163,"t":{"14":{"position":[[103,5]]},"130":{"position":[[1737,5]]},"212":{"position":[[1790,5]]},"394":{"position":[[147,5]]}}}],["0.2",{"_index":2628,"t":{"536":{"position":[[4207,3]]}}}],["0.2.0",{"_index":177,"t":{"16":{"position":[[102,5]]},"130":{"position":[[1306,5]]},"212":{"position":[[1359,5]]},"328":{"position":[[1460,5]]},"346":{"position":[[145,5]]},"358":{"position":[[1534,5]]},"360":{"position":[[150,5]]},"396":{"position":[[146,5]]}}}],["0.2.1",{"_index":195,"t":{"22":{"position":[[103,5]]},"130":{"position":[[1076,5]]},"212":{"position":[[1129,5]]},"306":{"position":[[155,5]]},"332":{"position":[[146,5]]},"378":{"position":[[1047,5]]},"398":{"position":[[147,5]]}}}],["0.2.2",{"_index":183,"t":{"18":{"position":[[100,5]]},"130":{"position":[[875,5]]},"212":{"position":[[928,5]]},"354":{"position":[[541,5]]},"400":{"position":[[144,5]]}}}],["0.2.3",{"_index":191,"t":{"20":{"position":[[100,5]]},"130":{"position":[[677,5]]},"212":{"position":[[730,5]]},"354":{"position":[[343,5]]},"402":{"position":[[144,5]]}}}],["0.2.4",{"_index":202,"t":{"24":{"position":[[99,5]]},"130":{"position":[[482,5]]},"212":{"position":[[535,5]]},"354":{"position":[[148,5]]},"404":{"position":[[143,5]]}}}],["0.2.5",{"_index":206,"t":{"26":{"position":[[99,5]]},"130":{"position":[[285,5]]},"212":{"position":[[338,5]]},"342":{"position":[[3012,5]]},"358":{"position":[[1334,5]]},"410":{"position":[[143,5]]}}}],["0.2.6",{"_index":208,"t":{"28":{"position":[[101,5]]},"130":{"position":[[101,5]]},"212":{"position":[[154,5]]},"292":{"position":[[778,5]]},"408":{"position":[[145,5]]}}}],["0.3.0",{"_index":212,"t":{"30":{"position":[[101,5]]},"116":{"position":[[2687,5]]},"214":{"position":[[2740,5]]},"328":{"position":[[1255,5]]},"406":{"position":[[145,5]]}}}],["0.4.0",{"_index":239,"t":{"32":{"position":[[103,5]]},"116":{"position":[[2483,5]]},"126":{"position":[[2497,5]]},"214":{"position":[[2536,5]]},"324":{"position":[[1332,5]]},"412":{"position":[[147,5]]},"538":{"position":[[469,5],[521,5],[722,5],[794,5],[916,5],[1509,5],[1578,5],[1670,5],[1712,5],[1773,5],[1832,5],[1969,5],[2061,5]]}}}],["0.4.1",{"_index":243,"t":{"34":{"position":[[104,5]]},"116":{"position":[[2285,5]]},"126":{"position":[[2299,5]]},"214":{"position":[[2338,5]]},"300":{"position":[[149,5]]},"324":{"position":[[1134,5]]},"328":{"position":[[1059,5]]},"414":{"position":[[148,5]]},"538":{"position":[[1267,5],[1462,5]]}}}],["0.4.2",{"_index":257,"t":{"36":{"position":[[104,5]]},"116":{"position":[[2011,5]]},"126":{"position":[[2025,5]]},"214":{"position":[[2064,5]]},"416":{"position":[[148,5]]}}}],["0.5.0",{"_index":259,"t":{"38":{"position":[[102,5]]},"116":{"position":[[1740,5]]},"132":{"position":[[156,5]]},"136":{"position":[[153,5]]},"146":{"position":[[161,5]]},"162":{"position":[[157,5]]},"168":{"position":[[156,5]]},"214":{"position":[[1793,5]]},"418":{"position":[[146,5]]}}}],["0.5.1",{"_index":266,"t":{"40":{"position":[[103,5]]},"116":{"position":[[1478,5]]},"150":{"position":[[159,5]]},"152":{"position":[[650,5]]},"154":{"position":[[162,5]]},"156":{"position":[[160,5]]},"214":{"position":[[1531,5]]},"246":{"position":[[650,5]]},"420":{"position":[[147,5]]},"568":{"position":[[50046,6]]}}}],["0.6.0",{"_index":277,"t":{"42":{"position":[[103,5]]},"116":{"position":[[1163,5]]},"174":{"position":[[156,5]]},"176":{"position":[[160,5]]},"190":{"position":[[401,5]]},"214":{"position":[[1216,5]]},"362":{"position":[[153,5]]},"364":{"position":[[406,5]]},"378":{"position":[[732,5]]},"426":{"position":[[147,5]]}}}],["0.8",{"_index":2497,"t":{"532":{"position":[[1082,3],[1453,3]]}}}],["06:00",{"_index":3224,"t":{"556":{"position":[[3535,5],[3628,5]]}}}],["08:00",{"_index":3222,"t":{"556":{"position":[[3495,5],[3588,5]]}}}],["0l1",{"_index":920,"t":{"492":{"position":[[1847,3]]}}}],["1",{"_index":83,"t":{"2":{"position":[[2316,2],[2536,2]]},"90":{"position":[[29,2]]},"94":{"position":[[29,2]]},"108":{"position":[[1464,2],[1503,2]]},"134":{"position":[[2360,2],[2580,2]]},"204":{"position":[[2369,2],[2589,2]]},"216":{"position":[[83,2]]},"250":{"position":[[1047,2]]},"270":{"position":[[78,2]]},"272":{"position":[[2363,2],[2583,2]]},"274":{"position":[[2364,2],[2584,2]]},"290":{"position":[[84,2]]},"294":{"position":[[77,2]]},"342":{"position":[[1317,2]]},"376":{"position":[[72,2]]},"380":{"position":[[79,2]]},"472":{"position":[[73,2]]},"474":{"position":[[73,2]]},"492":{"position":[[1861,1]]},"494":{"position":[[1884,4],[3712,2],[3733,2],[4335,2],[4959,2],[5738,4],[7542,4],[9374,4],[16285,3]]},"510":{"position":[[1420,1]]},"512":{"position":[[269,2],[272,1]]},"514":{"position":[[1115,1]]},"530":{"position":[[6137,2],[6485,2],[7185,2],[7273,4],[13142,2],[13477,2],[13684,2],[14384,2],[14472,4]]},"532":{"position":[[1097,2],[1468,2],[7624,2],[8290,2],[8321,3]]},"534":{"position":[[5706,2],[6039,2],[6739,2],[6827,4],[9385,2],[9715,2],[9910,2],[10610,2],[10698,4]]},"536":{"position":[[2800,1],[2898,1],[3199,1],[3292,1],[3378,1],[9476,2],[10334,2]]},"540":{"position":[[879,1]]},"542":{"position":[[1190,1]]},"544":{"position":[[4879,3]]},"552":{"position":[[1380,4]]},"554":{"position":[[1385,4]]},"562":{"position":[[4005,2]]},"566":{"position":[[3194,4],[5049,4],[7331,4],[9664,4],[12117,4],[14527,4],[16941,4],[19447,4],[21063,3],[22773,4]]},"568":{"position":[[2168,3],[3729,1],[7855,2],[8360,2],[8482,2],[8606,2],[8609,3],[8728,3],[10200,2],[10705,2],[10827,2],[10951,2],[10954,3],[11073,3],[12576,2],[13081,2],[13203,2],[13582,2],[13585,3],[13704,3],[13826,2],[15348,2],[15853,2],[15975,2],[16099,2],[16102,3],[16221,3],[17767,2],[18272,2],[18394,2],[18773,2],[18776,3],[18895,3],[19017,2],[20519,2],[21024,2],[21146,2],[21270,2],[21273,3],[21392,3],[22921,2],[23426,2],[23548,2],[23672,2],[23675,3],[23794,3],[26196,2],[27154,2],[27393,2],[27634,2],[27637,3],[27872,3],[31998,2],[32503,2],[32625,2],[32749,2],[32752,3],[32871,3],[34363,2],[34868,2],[34990,2],[35114,2],[35117,3],[35236,3],[36728,2],[37233,2],[37355,2],[37479,2],[37482,3],[37601,3],[44225,2],[45183,2],[45422,2],[45663,2],[45666,3],[45901,3],[47369,2],[47874,2],[47996,2],[48375,2],[48378,3],[48497,3],[48619,2],[52229,2],[53014,2],[53519,2],[53641,2],[54020,2],[54023,3],[54142,3],[54264,2],[55373,1],[55653,2],[56236,2],[56358,2],[56482,2],[56485,3],[56604,3],[58106,2],[59104,2],[61818,2],[62323,2],[62445,2],[62824,2],[62827,3],[62946,3],[63068,2],[65039,2],[65544,2],[65666,2],[66045,2],[66048,3],[66167,3],[66289,2],[68416,2],[68921,2],[69043,2],[69422,2],[69425,3],[69544,3],[69666,2],[71554,2],[72059,2],[72181,2],[72305,2],[72308,3],[72427,3],[74529,2],[75034,2],[75156,2],[75280,2],[75283,3],[75402,3],[77826,2],[78331,2],[78453,2],[78577,2],[78580,3],[78699,3],[80917,2],[81422,2],[81544,2],[81923,2],[81926,3],[82045,3],[82167,2],[83683,2],[84188,2],[84310,2],[84689,2],[84692,3],[84811,3],[84933,2],[88788,2],[89293,2],[89415,2],[97018,2],[97523,2],[97645,2],[99209,2],[99714,2],[99836,2],[101647,2],[102152,2],[102274,2],[103130,3],[105762,2],[106267,2],[106389,2],[106768,2],[106771,3],[106890,3],[107012,2],[109643,2],[110148,2],[110270,2],[110394,2],[110397,3],[110609,3]]}}}],["1.0",{"_index":2499,"t":{"532":{"position":[[1169,3]]}}}],["1.0.0",{"_index":297,"t":{"46":{"position":[[123,6]]},"116":{"position":[[842,6]]},"138":{"position":[[1483,6]]},"158":{"position":[[173,6]]},"160":{"position":[[180,6]]},"166":{"position":[[180,6]]},"182":{"position":[[172,6]]},"198":{"position":[[886,6]]},"214":{"position":[[895,6]]},"336":{"position":[[465,6]]},"338":{"position":[[173,6]]},"422":{"position":[[167,6]]},"502":{"position":[[331,5],[407,5],[498,5],[556,5],[674,5],[747,5],[829,5],[896,5],[960,5],[1057,5],[1187,5],[1307,5],[1379,5],[1458,5],[1554,5],[1702,5]]},"510":{"position":[[286,5],[338,5],[427,5],[520,5],[612,5],[658,5],[714,5],[806,5],[862,5],[919,5],[975,5],[1153,5],[1282,5],[1372,5],[1444,5],[1531,5],[1602,5],[1743,5]]},"514":{"position":[[287,5],[338,5],[435,5],[492,5],[544,5],[601,5],[661,5],[767,5],[907,5],[997,5],[1067,5],[1169,5],[1502,5],[1663,5]]},"524":{"position":[[273,5],[458,5],[550,5]]},"526":{"position":[[696,5],[757,5],[818,5],[907,5],[958,5],[1030,5],[1247,5],[1297,5],[1359,5],[1392,5],[1448,5],[1508,5],[1568,5]]},"528":{"position":[[616,5],[667,5],[729,5]]},"530":{"position":[[436,5],[477,5],[692,5],[733,5],[884,5],[943,5],[1160,5],[1225,5],[1290,5],[1551,5],[1602,5],[1796,5],[1882,5],[1960,5],[2038,5],[2130,5],[2184,5],[2796,5]]},"532":{"position":[[340,5],[382,5],[597,5],[638,5],[789,5],[848,5],[1055,5],[1251,5],[1316,5],[1356,5],[1421,5],[1543,5],[1804,5],[1920,5],[2044,5],[2130,5],[2208,5],[2286,5],[2378,5],[2432,5],[2504,5],[2576,5],[3020,5],[3080,5],[3135,5],[3383,5],[3428,5]]},"534":{"position":[[281,5],[322,5],[537,5],[578,5],[718,5],[788,5],[995,5],[1060,5],[1125,5],[1386,5],[1437,5],[1626,5],[1712,5],[1790,5],[1868,5],[1922,5],[2514,5]]},"536":{"position":[[485,5],[526,5],[741,5],[782,5],[922,5],[992,5],[1201,5],[1266,5],[1309,5],[1361,5],[1426,5],[1687,5],[1738,5],[2017,5],[2141,5],[2227,5],[2305,5],[2359,5],[2437,5],[2529,5],[2638,5],[2745,5],[2845,5],[2973,5],[3060,5],[3139,5],[3239,5],[3334,5],[3453,5],[3541,5],[3749,5],[3824,5],[4094,5],[4186,5],[4341,5],[4395,5],[4467,5],[4539,5],[4984,5],[5044,5],[5099,5],[5348,5],[5393,5]]},"568":{"position":[[314,5],[373,5],[564,5],[655,5],[899,5],[1203,5],[1274,5],[1929,5],[2387,5],[2644,5],[3002,5],[3572,5],[3670,5],[3927,5],[4153,5],[4250,5],[4328,5],[4384,5],[5010,5],[5155,5],[5230,5],[5334,5],[5489,5],[5642,5],[5730,5],[5888,5],[6218,5],[6355,5],[6409,5],[6521,5],[6558,5],[6613,5]]}}}],["1.0.1",{"_index":289,"t":{"44":{"position":[[104,6]]},"116":{"position":[[510,6]]},"138":{"position":[[1151,6]]},"140":{"position":[[568,6]]},"144":{"position":[[560,6]]},"170":{"position":[[158,6]]},"172":{"position":[[561,6]]},"178":{"position":[[158,6]]},"180":{"position":[[561,6]]},"198":{"position":[[554,6]]},"214":{"position":[[563,6]]},"428":{"position":[[148,6]]}}}],["1.1.0",{"_index":318,"t":{"48":{"position":[[104,6]]},"116":{"position":[[104,6]]},"138":{"position":[[745,6]]},"140":{"position":[[162,6]]},"144":{"position":[[154,6]]},"172":{"position":[[155,6]]},"180":{"position":[[155,6]]},"188":{"position":[[154,6]]},"198":{"position":[[148,6]]},"214":{"position":[[157,6]]},"424":{"position":[[148,6]]},"506":{"position":[[335,5],[482,5],[660,5],[829,5],[907,5],[991,5],[1060,5],[1155,5],[1223,5],[1287,5],[1346,5],[1436,5],[1503,5]]},"516":{"position":[[544,5],[759,5],[908,5]]}}}],["1.10.0",{"_index":64,"t":{"2":{"position":[[1338,6]]},"100":{"position":[[101,6]]},"134":{"position":[[1382,6]]},"204":{"position":[[1391,6]]},"244":{"position":[[397,6]]},"272":{"position":[[1385,6]]},"274":{"position":[[1386,6]]},"330":{"position":[[666,6]]},"430":{"position":[[146,6]]},"502":{"position":[[1636,6]]},"504":{"position":[[513,6],[580,6],[671,6],[833,6],[997,6],[1160,6],[1324,6],[1553,6],[1668,6],[1720,6],[1819,6],[1950,6],[2116,6],[2186,6],[2348,6],[2511,6],[2581,6]]},"524":{"position":[[348,6]]},"530":{"position":[[582,6],[642,6],[2676,6]]},"532":{"position":[[487,6],[547,6],[3268,6]]},"534":{"position":[[427,6],[487,6],[2399,6]]},"536":{"position":[[631,6],[691,6],[5232,6]]},"564":{"position":[[365,6],[501,6],[594,6],[705,6],[921,6],[1112,6],[1168,6],[1299,6],[1490,6],[1546,6],[1677,6],[1852,6],[1930,6],[2109,6],[2288,6],[2385,6],[2500,6],[2631,6],[2730,6],[2793,6],[2859,6],[2989,6],[3070,6],[3155,6],[3221,6],[3361,6],[3497,6],[3584,6],[3723,6]]},"568":{"position":[[1558,6]]}}}],["1.10.1",{"_index":55,"t":{"2":{"position":[[1092,6]]},"102":{"position":[[103,6]]},"134":{"position":[[1136,6]]},"204":{"position":[[1145,6]]},"244":{"position":[[151,6]]},"272":{"position":[[1139,6]]},"274":{"position":[[1140,6]]},"330":{"position":[[420,6]]},"432":{"position":[[148,6]]}}}],["1.10.2",{"_index":38,"t":{"2":{"position":[[663,6]]},"104":{"position":[[106,6]]},"126":{"position":[[155,6]]},"134":{"position":[[707,6]]},"200":{"position":[[161,6]]},"204":{"position":[[716,6]]},"224":{"position":[[155,6]]},"228":{"position":[[163,6]]},"250":{"position":[[154,6]]},"260":{"position":[[156,6]]},"272":{"position":[[710,6]]},"274":{"position":[[711,6]]},"276":{"position":[[156,6]]},"302":{"position":[[149,6]]},"310":{"position":[[157,6]]},"324":{"position":[[704,6]]},"342":{"position":[[424,6]]},"348":{"position":[[155,6]]},"366":{"position":[[150,6]]},"382":{"position":[[150,6]]},"434":{"position":[[151,6]]},"530":{"position":[[2339,6],[2399,6],[2738,6]]},"532":{"position":[[2724,6],[2778,6],[3325,6]]},"534":{"position":[[2072,6],[2132,6],[2456,6]]},"536":{"position":[[4687,6],[4740,6],[5290,6]]},"538":{"position":[[594,6],[665,6]]}}}],["1.10.3",{"_index":30,"t":{"2":{"position":[[379,6]]},"106":{"position":[[104,6]]},"134":{"position":[[423,6]]},"204":{"position":[[432,6]]},"242":{"position":[[156,6]]},"248":{"position":[[151,6]]},"272":{"position":[[426,6]]},"274":{"position":[[427,6]]},"324":{"position":[[420,6]]},"326":{"position":[[150,6]]},"334":{"position":[[145,6]]},"436":{"position":[[149,6]]},"564":{"position":[[784,6],[850,6]]},"566":{"position":[[959,6]]},"568":{"position":[[1624,6],[1783,6],[2711,6],[2760,6]]}}}],["1.10.4",{"_index":15,"t":{"2":{"position":[[105,6]]},"110":{"position":[[105,6]]},"134":{"position":[[149,6]]},"204":{"position":[[158,6]]},"272":{"position":[[152,6]]},"274":{"position":[[153,6]]},"298":{"position":[[149,6]]},"324":{"position":[[146,6]]},"330":{"position":[[147,6]]},"342":{"position":[[148,6]]},"356":{"position":[[150,6]]},"370":{"position":[[148,6]]},"438":{"position":[[150,6]]},"504":{"position":[[1391,6]]},"516":{"position":[[606,6],[870,6]]},"546":{"position":[[356,6]]},"548":{"position":[[346,6]]},"550":{"position":[[346,6]]},"568":{"position":[[4448,6],[4557,6],[4698,6],[4841,6]]}}}],["1.2.0",{"_index":323,"t":{"50":{"position":[[104,6]]},"114":{"position":[[2769,6]]},"138":{"position":[[416,6]]},"142":{"position":[[163,6]]},"164":{"position":[[155,6]]},"192":{"position":[[2813,6]]},"210":{"position":[[2822,6]]},"232":{"position":[[840,6]]},"254":{"position":[[154,6]]},"440":{"position":[[148,6]]}}}],["1.3.0",{"_index":330,"t":{"52":{"position":[[104,6]]},"114":{"position":[[2510,6]]},"138":{"position":[[157,6]]},"192":{"position":[[2554,6]]},"210":{"position":[[2563,6]]},"288":{"position":[[585,6]]},"442":{"position":[[148,6]]},"540":{"position":[[267,5],[315,5],[399,5],[449,5],[539,5],[575,5],[685,5]]}}}],["1.3.1",{"_index":345,"t":{"58":{"position":[[104,6]]},"114":{"position":[[2221,6]]},"126":{"position":[[1736,6]]},"192":{"position":[[2265,6]]},"200":{"position":[[1293,6]]},"210":{"position":[[2274,6]]},"444":{"position":[[148,6]]},"538":{"position":[[2284,5],[2341,5],[2396,5],[2446,5],[2494,5],[2542,5]]}}}],["1.4.0",{"_index":335,"t":{"54":{"position":[[103,6]]},"114":{"position":[[1952,6]]},"192":{"position":[[1996,6]]},"210":{"position":[[2005,6]]},"260":{"position":[[585,6]]},"340":{"position":[[149,6]]},"344":{"position":[[147,6]]},"350":{"position":[[151,6]]},"366":{"position":[[579,6]]},"446":{"position":[[147,6]]},"566":{"position":[[323,5],[386,5],[559,5],[606,5],[651,5],[697,5],[786,5],[823,5],[1029,5],[1074,5],[1144,5],[1210,5],[1253,5],[1338,5],[1394,5],[1440,5],[1497,5],[1558,5]]}}}],["1.4.1",{"_index":348,"t":{"60":{"position":[[103,6]]},"114":{"position":[[1642,6]]},"192":{"position":[[1686,6]]},"210":{"position":[[1695,6]]},"230":{"position":[[159,6]]},"238":{"position":[[153,6]]},"250":{"position":[[2436,6]]},"282":{"position":[[1690,6]]},"286":{"position":[[1689,6]]},"308":{"position":[[153,6]]},"322":{"position":[[147,6]]},"342":{"position":[[2706,6]]},"448":{"position":[[147,6]]},"510":{"position":[[1712,5]]}}}],["1.4.2",{"_index":341,"t":{"56":{"position":[[103,6]]},"114":{"position":[[1193,6]]},"126":{"position":[[1286,6]]},"148":{"position":[[160,6]]},"184":{"position":[[165,6]]},"186":{"position":[[157,6]]},"192":{"position":[[1237,6]]},"208":{"position":[[174,6]]},"210":{"position":[[1246,6]]},"282":{"position":[[1241,6]]},"286":{"position":[[1240,6]]},"454":{"position":[[147,6]]}}}],["1.4.3",{"_index":375,"t":{"64":{"position":[[103,6]]},"114":{"position":[[944,6]]},"152":{"position":[[401,6]]},"192":{"position":[[988,6]]},"210":{"position":[[997,6]]},"246":{"position":[[401,6]]},"282":{"position":[[992,6]]},"286":{"position":[[991,6]]},"328":{"position":[[809,6]]},"452":{"position":[[147,6]]},"568":{"position":[[713,5],[3753,5]]}}}],["1.4.4",{"_index":367,"t":{"62":{"position":[[104,6]]},"114":{"position":[[695,6]]},"152":{"position":[[152,6]]},"192":{"position":[[739,6]]},"210":{"position":[[748,6]]},"246":{"position":[[152,6]]},"282":{"position":[[743,6]]},"286":{"position":[[742,6]]},"328":{"position":[[560,6]]},"450":{"position":[[148,6]]}}}],["1.4.5",{"_index":377,"t":{"66":{"position":[[104,5]]},"114":{"position":[[447,5]]},"190":{"position":[[154,5]]},"192":{"position":[[491,5]]},"210":{"position":[[500,5]]},"278":{"position":[[491,5]]},"282":{"position":[[495,5]]},"286":{"position":[[494,5]]},"378":{"position":[[485,5]]},"456":{"position":[[148,5]]}}}],["1.5",{"_index":921,"t":{"492":{"position":[[1851,3]]}}}],["1.5.0",{"_index":383,"t":{"68":{"position":[[100,5]]},"114":{"position":[[100,5]]},"192":{"position":[[144,5]]},"210":{"position":[[153,5]]},"226":{"position":[[665,5]]},"236":{"position":[[567,5]]},"240":{"position":[[1298,5]]},"250":{"position":[[2090,5]]},"258":{"position":[[998,5]]},"282":{"position":[[148,5]]},"286":{"position":[[147,5]]},"296":{"position":[[659,5]]},"318":{"position":[[1292,5]]},"320":{"position":[[561,5]]},"342":{"position":[[2360,5]]},"358":{"position":[[992,5]]},"458":{"position":[[144,5]]},"544":{"position":[[481,5],[534,5],[726,5],[802,5],[878,5],[939,5],[982,5],[1132,5],[1165,5]]}}}],["1.6.0",{"_index":394,"t":{"70":{"position":[[101,5]]},"112":{"position":[[2780,5]]},"194":{"position":[[2824,5]]},"206":{"position":[[2833,5]]},"234":{"position":[[149,5]]},"236":{"position":[[154,5]]},"240":{"position":[[885,5]]},"244":{"position":[[2684,5]]},"250":{"position":[[1677,5]]},"258":{"position":[[585,5]]},"266":{"position":[[871,5]]},"268":{"position":[[155,5]]},"280":{"position":[[2828,5]]},"284":{"position":[[2827,5]]},"318":{"position":[[879,5]]},"320":{"position":[[148,5]]},"328":{"position":[[143,5]]},"342":{"position":[[1947,5]]},"358":{"position":[[579,5]]},"372":{"position":[[149,5]]},"374":{"position":[[865,5]]},"460":{"position":[[145,5]]},"510":{"position":[[1422,5]]},"514":{"position":[[1117,5]]},"544":{"position":[[1057,5]]},"556":{"position":[[485,5],[538,5],[730,5],[806,5],[882,5],[943,5],[986,5],[1061,5],[1136,5],[1169,5]]},"558":{"position":[[149,5]]},"568":{"position":[[2299,5],[3997,5]]}}}],["1.7.0",{"_index":413,"t":{"72":{"position":[[101,5]]},"112":{"position":[[2446,5]]},"118":{"position":[[148,5]]},"128":{"position":[[144,5]]},"194":{"position":[[2490,5]]},"196":{"position":[[154,5]]},"202":{"position":[[150,5]]},"206":{"position":[[2499,5]]},"220":{"position":[[153,5]]},"222":{"position":[[450,5]]},"280":{"position":[[2494,5]]},"284":{"position":[[2493,5]]},"292":{"position":[[444,5]]},"304":{"position":[[147,5]]},"462":{"position":[[145,5]]},"494":{"position":[[296,5],[418,5],[510,5],[624,5],[686,5],[753,5],[822,5],[948,5],[1083,5],[1168,5],[1300,5],[1479,5],[1544,5],[1590,5],[1652,5],[1739,5]]},"496":{"position":[[262,5],[339,5],[436,5],[521,5],[578,5],[649,5]]},"502":{"position":[[1011,5]]},"508":{"position":[[307,5],[364,5],[414,5],[485,5],[570,5],[615,5],[683,5],[808,5],[945,5],[1030,5],[1164,5]]}}}],["1.7.1",{"_index":431,"t":{"74":{"position":[[101,5]]},"112":{"position":[[2176,5]]},"126":{"position":[[1014,5]]},"194":{"position":[[2220,5]]},"200":{"position":[[1020,5]]},"206":{"position":[[2229,5]]},"226":{"position":[[396,5]]},"280":{"position":[[2224,5]]},"284":{"position":[[2223,5]]},"296":{"position":[[390,5]]},"468":{"position":[[145,5]]}}}],["1.7.2",{"_index":444,"t":{"76":{"position":[[101,5]]},"112":{"position":[[1928,5]]},"194":{"position":[[1972,5]]},"206":{"position":[[1981,5]]},"232":{"position":[[589,5]]},"280":{"position":[[1976,5]]},"284":{"position":[[1975,5]]},"312":{"position":[[147,5]]},"314":{"position":[[583,5]]},"464":{"position":[[145,5]]}}}],["1.7.3",{"_index":470,"t":{"82":{"position":[[101,5]]},"112":{"position":[[1683,5]]},"194":{"position":[[1727,5]]},"206":{"position":[[1736,5]]},"226":{"position":[[151,5]]},"244":{"position":[[2439,5]]},"280":{"position":[[1731,5]]},"284":{"position":[[1730,5]]},"296":{"position":[[145,5]]},"330":{"position":[[2708,5]]},"470":{"position":[[145,5]]},"568":{"position":[[4945,5]]}}}],["1.8.0",{"_index":456,"t":{"80":{"position":[[97,5]]},"112":{"position":[[1247,5]]},"126":{"position":[[578,5]]},"194":{"position":[[1291,5]]},"200":{"position":[[584,5]]},"206":{"position":[[1300,5]]},"232":{"position":[[153,5]]},"240":{"position":[[449,5]]},"244":{"position":[[2003,5]]},"256":{"position":[[152,5]]},"258":{"position":[[149,5]]},"266":{"position":[[435,5]]},"280":{"position":[[1295,5]]},"284":{"position":[[1294,5]]},"288":{"position":[[146,5]]},"314":{"position":[[147,5]]},"318":{"position":[[443,5]]},"330":{"position":[[2272,5]]},"352":{"position":[[146,5]]},"358":{"position":[[143,5]]},"370":{"position":[[415,5]]},"374":{"position":[[429,5]]},"466":{"position":[[141,5]]},"514":{"position":[[1301,5]]},"568":{"position":[[503,5],[1010,5],[1107,5],[2034,5],[2123,5],[2235,5],[2463,5],[3459,5]]}}}],["1.8.1",{"_index":449,"t":{"78":{"position":[[99,5]]},"112":{"position":[[995,5]]},"194":{"position":[[1039,5]]},"206":{"position":[[1048,5]]},"244":{"position":[[1751,5]]},"276":{"position":[[581,5]]},"280":{"position":[[1043,5]]},"284":{"position":[[1042,5]]},"330":{"position":[[2020,5]]},"382":{"position":[[575,5]]},"478":{"position":[[143,5]]}}}],["1.8.2",{"_index":481,"t":{"84":{"position":[[100,5]]},"112":{"position":[[696,5]]},"194":{"position":[[740,5]]},"206":{"position":[[749,5]]},"222":{"position":[[149,5]]},"240":{"position":[[152,5]]},"244":{"position":[[1452,5]]},"280":{"position":[[744,5]]},"284":{"position":[[743,5]]},"292":{"position":[[143,5]]},"316":{"position":[[142,5]]},"318":{"position":[[146,5]]},"330":{"position":[[1721,5]]},"336":{"position":[[142,5]]},"476":{"position":[[144,5]]}}}],["1.8.3",{"_index":492,"t":{"86":{"position":[[100,5]]},"112":{"position":[[438,5]]},"194":{"position":[[482,5]]},"206":{"position":[[491,5]]},"244":{"position":[[1194,5]]},"262":{"position":[[152,5]]},"280":{"position":[[486,5]]},"284":{"position":[[485,5]]},"330":{"position":[[1463,5]]},"364":{"position":[[145,5]]},"490":{"position":[[144,5]]}}}],["1.9.0",{"_index":501,"t":{"88":{"position":[[100,5]]},"112":{"position":[[100,5]]},"194":{"position":[[144,5]]},"206":{"position":[[153,5]]},"248":{"position":[[429,5]]},"250":{"position":[[1338,5]]},"252":{"position":[[407,5]]},"264":{"position":[[148,5]]},"278":{"position":[[149,5]]},"280":{"position":[[148,5]]},"284":{"position":[[147,5]]},"334":{"position":[[423,5]]},"342":{"position":[[1608,5]]},"348":{"position":[[833,5]]},"368":{"position":[[142,5]]},"378":{"position":[[143,5]]},"484":{"position":[[144,5]]},"526":{"position":[[1184,5]]},"528":{"position":[[505,5]]}}}],["1.9.1",{"_index":84,"t":{"2":{"position":[[2386,5]]},"90":{"position":[[99,5]]},"94":{"position":[[302,5]]},"134":{"position":[[2430,5]]},"204":{"position":[[2439,5]]},"250":{"position":[[1117,5]]},"272":{"position":[[2433,5]]},"274":{"position":[[2434,5]]},"342":{"position":[[1387,5]]},"472":{"position":[[143,5]]}}}],["1.9.2",{"_index":86,"t":{"2":{"position":[[2606,5]]},"94":{"position":[[99,5]]},"134":{"position":[[2650,5]]},"204":{"position":[[2659,5]]},"216":{"position":[[153,5]]},"270":{"position":[[148,5]]},"272":{"position":[[2653,5]]},"274":{"position":[[2654,5]]},"290":{"position":[[154,5]]},"294":{"position":[[147,5]]},"376":{"position":[[142,5]]},"380":{"position":[[149,5]]},"474":{"position":[[143,5]]},"568":{"position":[[1346,5],[1723,5]]}}}],["1.9.3",{"_index":81,"t":{"2":{"position":[[2167,5]]},"92":{"position":[[99,5]]},"134":{"position":[[2211,5]]},"204":{"position":[[2220,5]]},"244":{"position":[[974,5]]},"272":{"position":[[2214,5]]},"274":{"position":[[2215,5]]},"330":{"position":[[1243,5]]},"488":{"position":[[143,5]]}}}],["1.9.4",{"_index":76,"t":{"2":{"position":[[1915,5]]},"98":{"position":[[99,5]]},"134":{"position":[[1959,5]]},"204":{"position":[[1968,5]]},"250":{"position":[[865,5]]},"252":{"position":[[154,5]]},"272":{"position":[[1962,5]]},"274":{"position":[[1963,5]]},"342":{"position":[[1135,5]]},"348":{"position":[[580,5]]},"480":{"position":[[143,5]]},"510":{"position":[[1073,5]]}}}],["1.9.5",{"_index":71,"t":{"2":{"position":[[1630,5]]},"96":{"position":[[100,5]]},"134":{"position":[[1674,5]]},"204":{"position":[[1683,5]]},"244":{"position":[[689,5]]},"250":{"position":[[580,5]]},"266":{"position":[[152,5]]},"272":{"position":[[1677,5]]},"274":{"position":[[1678,5]]},"330":{"position":[[958,5]]},"342":{"position":[[850,5]]},"374":{"position":[[146,5]]},"482":{"position":[[144,5]]},"510":{"position":[[1224,5]]},"568":{"position":[[438,5],[1867,5],[3165,5],[3348,5]]}}}],["10",{"_index":366,"t":{"62":{"position":[[33,3]]},"72":{"position":[[30,3]]},"108":{"position":[[1864,3],[2033,3]]},"112":{"position":[[2375,3]]},"114":{"position":[[624,3]]},"118":{"position":[[77,3]]},"128":{"position":[[73,3]]},"152":{"position":[[81,3]]},"192":{"position":[[668,3]]},"194":{"position":[[2419,3]]},"196":{"position":[[83,3]]},"202":{"position":[[79,3]]},"206":{"position":[[2428,3]]},"210":{"position":[[677,3]]},"220":{"position":[[82,3]]},"222":{"position":[[379,3]]},"246":{"position":[[81,3]]},"280":{"position":[[2423,3]]},"282":{"position":[[672,3]]},"284":{"position":[[2422,3]]},"286":{"position":[[671,3]]},"292":{"position":[[373,3]]},"304":{"position":[[76,3]]},"328":{"position":[[489,3]]},"450":{"position":[[77,3]]},"462":{"position":[[74,3]]},"538":{"position":[[9026,4],[9475,4]]},"542":{"position":[[8068,2],[11516,4],[11910,4],[12353,4],[14482,4]]},"544":{"position":[[7503,4],[7796,4],[10108,4],[10416,4],[10813,4]]},"556":{"position":[[5690,4],[6028,4],[6353,4],[6655,4],[6974,4],[9711,4],[10110,4]]},"562":{"position":[[3748,2],[7895,4],[8246,4],[8646,4],[10731,4]]},"566":{"position":[[4130,5],[6077,5],[8359,5],[10692,5],[13145,5],[15555,5],[17969,5],[20475,5],[23751,5]]},"568":{"position":[[1886,2],[1975,3],[11634,3],[13333,3],[18524,3],[48126,3],[52254,3],[53771,3],[62575,3],[65796,3],[69173,3],[81674,3],[84440,3],[106519,3]]}}}],["10%thi",{"_index":1643,"t":{"510":{"position":[[8631,12],[10388,12]]}}}],["101",{"_index":3625,"t":{"568":{"position":[[8408,4],[10753,4],[13129,4],[15901,4],[18320,4],[21072,4],[23474,4],[27218,4],[32551,4],[34916,4],[37281,4],[39588,4],[41846,4],[45247,4],[47922,4],[53567,4],[56284,4],[62371,4],[65592,4],[68969,4],[72107,4],[75082,4],[78379,4],[81470,4],[84236,4],[89341,4],[97571,4],[99762,4],[102200,4],[106315,4],[110196,4]]}}}],["102",{"_index":3623,"t":{"568":{"position":[[8288,4],[10633,4],[13009,4],[15781,4],[18200,4],[20952,4],[23354,4],[26988,4],[32431,4],[34796,4],[37161,4],[39485,4],[41743,4],[45017,4],[47802,4],[53447,4],[56164,4],[62251,4],[65472,4],[68849,4],[71987,4],[74962,4],[78259,4],[81350,4],[84116,4],[89221,4],[97451,4],[99642,4],[102080,4],[106195,4],[110076,4]]}}}],["103",{"_index":3609,"t":{"568":{"position":[[7771,4],[10116,4],[12492,4],[15264,4],[17683,4],[20435,4],[22837,4],[26017,4],[31914,4],[34279,4],[36644,4],[39030,4],[41288,4],[44046,4],[47285,4],[52930,4],[55569,4],[58022,4],[61734,4],[64955,4],[68332,4],[71470,4],[74445,4],[77742,4],[80833,4],[83599,4],[88704,4],[96934,4],[99125,4],[101563,4],[105678,4]]}}}],["104",{"_index":3617,"t":{"568":{"position":[[8026,4],[10371,4],[12747,4],[15519,4],[17938,4],[20690,4],[23092,4],[26496,4],[32169,4],[34534,4],[36899,4],[39252,4],[41510,4],[44525,4],[47540,4],[53185,4],[55824,4],[58277,4],[61989,4],[65210,4],[68587,4],[71725,4],[74700,4],[77997,4],[81088,4],[83854,4],[88959,4],[97189,4],[99380,4],[101818,4],[105933,4],[109814,4]]}}}],["105",{"_index":3620,"t":{"568":{"position":[[8155,4],[10500,4],[12876,4],[15648,4],[18067,4],[20819,4],[23221,4],[26736,4],[32298,4],[34663,4],[37028,4],[39365,4],[41623,4],[44765,4],[47669,4],[53314,4],[55953,4],[58406,4],[62118,4],[65339,4],[68716,4],[71854,4],[74829,4],[75903,4],[75983,4],[78126,4],[78840,5],[78883,3],[78962,4],[79004,3],[81217,4],[83983,4],[89088,4],[97318,4],[99509,4],[101947,4],[106062,4],[109943,4]]}}}],["106",{"_index":3614,"t":{"568":{"position":[[7902,4],[10247,4],[12623,4],[15395,4],[17814,4],[20566,4],[22968,4],[26259,4],[32045,4],[34410,4],[36775,4],[39145,4],[41403,4],[44288,4],[47416,4],[53061,4],[55700,4],[58153,4],[61865,4],[65086,4],[68463,4],[71601,4],[74576,4],[77873,4],[80964,4],[83730,4],[88835,4],[97065,4],[99256,4],[101694,4],[105809,4],[109690,4]]}}}],["107",{"_index":3603,"t":{"568":{"position":[[7647,4],[9992,4],[12368,4],[15140,4],[17559,4],[20311,4],[22713,4],[25779,4],[31790,4],[34155,4],[36520,4],[38925,4],[41183,4],[43808,4],[47161,4],[52806,4],[55445,4],[57898,4],[61610,4],[64831,4],[68208,4],[71346,4],[74321,4],[77618,4],[80709,4],[83475,4],[105554,4],[109434,4]]}}}],["1073255",{"_index":2462,"t":{"530":{"position":[[9342,8]]},"536":{"position":[[12170,8],[15159,8]]}}}],["108",{"_index":3627,"t":{"568":{"position":[[8530,4],[10875,4],[13506,4],[16023,4],[18697,4],[21194,4],[23596,4],[27457,4],[32673,4],[35038,4],[37403,4],[39693,4],[41951,4],[45486,4],[48299,4],[53944,4],[56406,4],[62748,4],[65969,4],[69346,4],[72229,4],[75204,4],[78501,4],[81847,4],[84613,4],[106692,4],[110318,4]]}}}],["1081241",{"_index":2459,"t":{"530":{"position":[[9315,8]]},"536":{"position":[[12143,8],[15132,8]]}}}],["109",{"_index":3630,"t":{"568":{"position":[[8653,4],[10998,4],[13629,4],[16146,4],[18820,4],[21317,4],[23719,4],[27697,4],[32796,4],[35161,4],[37526,4],[39800,4],[42058,4],[45726,4],[48422,4],[54067,4],[56529,4],[62871,4],[66092,4],[69469,4],[72352,4],[75327,4],[78624,4],[81970,4],[84736,4],[106815,4],[110441,4]]}}}],["10:00",{"_index":3220,"t":{"556":{"position":[[3456,5],[8898,5]]}}}],["10:50",{"_index":3226,"t":{"556":{"position":[[4140,5],[4869,5]]}}}],["10a",{"_index":856,"t":{"486":{"position":[[2425,11],[2570,11],[2715,11]]}}}],["2\">an",{"_index":854,"t":{"486":{"position":[[2293,12]]}}}],["2\">page",{"_index":3470,"t":{"566":{"position":[[6911,7],[9244,7],[11697,7],[14107,7],[16521,7]]}}}],["2\">submit@displayswitchstatuschang",{"_index":3084,"t":{"544":{"position":[[9196,10]]},"556":{"position":[[8811,10]]}}}],["3\">enter",{"_index":2866,"t":{"542":{"position":[[1976,10],[2307,10],[2533,10],[2759,10],[2985,10],[3211,10],[3437,10],[3663,10],[3889,10],[4115,10],[4710,10],[5223,10],[5764,10],[8109,10],[8598,10],[8854,10],[9400,10]]},"544":{"position":[[1559,10],[2168,10],[2372,10],[2574,10],[2778,10],[3761,10],[4089,10],[4415,10],[4743,10],[5628,10],[6405,10]]},"556":{"position":[[1538,10],[1937,10],[2116,10],[2968,10],[3271,10],[3832,10],[4582,10]]},"562":{"position":[[1502,10],[3789,10],[4270,10],[4572,10],[5056,10],[5284,10],[5802,10]]}}}],["3\">max",{"_index":3041,"t":{"544":{"position":[[3721,6],[4049,6],[4375,6],[4703,6]]},"556":{"position":[[2928,6],[3231,6]]}}}],["3\">min",{"_index":3039,"t":{"544":{"position":[[3681,6],[4009,6],[4335,6],[4663,6]]},"556":{"position":[[2888,6],[3191,6]]}}}],["3\">switch",{"_index":2824,"t":{"540":{"position":[[869,9]]}}}],["3\">thi",{"_index":2103,"t":{"522":{"position":[[5901,7],[6028,7],[6158,7],[6305,7],[6444,7],[6569,7],[8180,7],[8307,7],[8437,7],[8565,7]]}}}],["3.5",{"_index":922,"t":{"492":{"position":[[1855,3]]}}}],["30",{"_index":190,"t":{"20":{"position":[[29,3]]},"42":{"position":[[32,3]]},"56":{"position":[[32,3]]},"88":{"position":[[29,3]]},"108":{"position":[[539,3],[956,3],[1542,3],[2119,3]]},"112":{"position":[[29,3]]},"114":{"position":[[1122,3]]},"116":{"position":[[1092,3]]},"126":{"position":[[1215,3]]},"130":{"position":[[606,3]]},"148":{"position":[[89,3]]},"174":{"position":[[85,3]]},"176":{"position":[[89,3]]},"184":{"position":[[94,3]]},"186":{"position":[[86,3]]},"190":{"position":[[330,3]]},"192":{"position":[[1166,3]]},"194":{"position":[[73,3]]},"206":{"position":[[82,3]]},"208":{"position":[[103,3]]},"210":{"position":[[1175,3]]},"212":{"position":[[659,3]]},"214":{"position":[[1145,3]]},"248":{"position":[[358,3]]},"250":{"position":[[1267,3]]},"252":{"position":[[336,3]]},"264":{"position":[[77,3]]},"278":{"position":[[78,3]]},"280":{"position":[[77,3]]},"282":{"position":[[1170,3]]},"284":{"position":[[76,3]]},"286":{"position":[[1169,3]]},"334":{"position":[[352,3]]},"342":{"position":[[1537,3]]},"348":{"position":[[762,3]]},"354":{"position":[[272,3]]},"362":{"position":[[82,3]]},"364":{"position":[[335,3]]},"368":{"position":[[71,3]]},"378":{"position":[[72,3],[661,3]]},"402":{"position":[[73,3]]},"426":{"position":[[76,3]]},"454":{"position":[[76,3]]},"484":{"position":[[73,3]]}}}],["300m",{"_index":368,"t":{"62":{"position":[[199,5]]}}}],["31",{"_index":211,"t":{"30":{"position":[[30,3]]},"78":{"position":[[28,3]]},"108":{"position":[[797,3],[1661,3]]},"112":{"position":[[924,3]]},"116":{"position":[[2616,3]]},"194":{"position":[[968,3]]},"206":{"position":[[977,3]]},"214":{"position":[[2669,3]]},"244":{"position":[[1680,3]]},"276":{"position":[[510,3]]},"280":{"position":[[972,3]]},"284":{"position":[[971,3]]},"328":{"position":[[1184,3]]},"330":{"position":[[1949,3]]},"382":{"position":[[504,3]]},"406":{"position":[[74,3]]},"478":{"position":[[72,3]]}}}],["317",{"_index":575,"t":{"104":{"position":[[597,4]]}}}],["320",{"_index":3528,"t":{"568":{"position":[[1742,3],[107172,3]]}}}],["320px",{"_index":3397,"t":{"564":{"position":[[18567,8]]}}}],["321",{"_index":1471,"t":{"506":{"position":[[2798,5]]},"510":{"position":[[4493,5]]},"514":{"position":[[3949,5]]}}}],["322",{"_index":1622,"t":{"510":{"position":[[6182,5]]},"514":{"position":[[5699,5]]}}}],["327",{"_index":571,"t":{"104":{"position":[[457,4]]}}}],["33",{"_index":764,"t":{"134":{"position":[[0,2]]},"192":{"position":[[0,2]]},"194":{"position":[[0,2]]},"198":{"position":[[0,2]]}}}],["334",{"_index":569,"t":{"104":{"position":[[368,4]]}}}],["346",{"_index":584,"t":{"106":{"position":[[341,4]]}}}],["352",{"_index":568,"t":{"104":{"position":[[303,4]]}}}],["373",{"_index":582,"t":{"106":{"position":[[282,4]]}}}],["384",{"_index":593,"t":{"110":{"position":[[403,4]]}}}],["4",{"_index":80,"t":{"2":{"position":[[2097,2]]},"32":{"position":[[33,2]]},"92":{"position":[[29,2]]},"108":{"position":[[757,2],[1425,2]]},"116":{"position":[[2413,2]]},"126":{"position":[[2427,2]]},"134":{"position":[[2141,2]]},"200":{"position":[[0,1]]},"204":{"position":[[2150,2]]},"214":{"position":[[2466,2]]},"240":{"position":[[0,1]]},"244":{"position":[[904,2]]},"272":{"position":[[2144,2]]},"274":{"position":[[2145,2]]},"318":{"position":[[0,1]]},"324":{"position":[[1262,2]]},"330":{"position":[[1173,2]]},"378":{"position":[[0,1]]},"412":{"position":[[77,2]]},"488":{"position":[[73,2]]},"492":{"position":[[1859,1],[1875,1],[1877,1]]},"502":{"position":[[5659,1]]},"504":{"position":[[3871,2],[7269,2],[7601,2],[7930,2],[8296,2],[8586,2],[8876,2],[9163,2],[9450,2],[9735,2],[10018,2],[10301,2],[10830,2],[11206,2],[11533,2],[12103,2],[12500,2],[12848,2]]},"514":{"position":[[4133,1],[4261,1],[4396,1],[6089,1],[6217,1],[6352,1]]},"530":{"position":[[7707,2],[8513,1],[8658,1],[9055,1],[9200,1],[9597,1],[9742,1]]},"532":{"position":[[3996,2],[8447,2],[9845,2],[12073,2],[14171,2]]},"536":{"position":[[6033,2],[9752,1],[9903,1],[10535,2],[11341,1],[11486,1],[11883,1],[12028,1],[12425,1],[12570,1],[13396,2],[14200,1],[14345,1],[14807,1],[14952,1],[15414,1],[15559,1]]},"552":{"position":[[782,1],[918,3]]},"554":{"position":[[787,1],[923,3]]},"564":{"position":[[4173,3],[6365,3],[8945,3],[9834,3],[18539,1],[19227,1]]},"566":{"position":[[3497,4],[5383,4],[6756,1],[6892,3],[7665,4],[9016,1],[9225,3],[9998,4],[11469,1],[11678,3],[12451,4],[13879,1],[14088,3],[14861,4],[16293,1],[16502,3],[17275,4],[18721,1],[18857,3],[19781,4],[23076,4]]},"568":{"position":[[7978,2],[10323,2],[12699,2],[15471,2],[17890,2],[20642,2],[23044,2],[26432,2],[32121,2],[34486,2],[36851,2],[44461,2],[47492,2],[53137,2],[55776,2],[58229,2],[61941,2],[65162,2],[68539,2],[71677,2],[74652,2],[77949,2],[81040,2],[83806,2],[88911,2],[97141,2],[99332,2],[101770,2],[105885,2],[109766,2]]}}}],["4.33",{"_index":2921,"t":{"542":{"position":[[4776,5],[5289,5]]}}}],["40",{"_index":3217,"t":{"556":{"position":[[2195,4]]}}}],["401",{"_index":592,"t":{"110":{"position":[[362,4]]}}}],["414",{"_index":590,"t":{"110":{"position":[[291,4]]}}}],["416",{"_index":598,"t":{"110":{"position":[[495,4]]}}}],["4@employee.firstname@employee.lastname@employeeid@employee.firstname@employee.lastname@employeeidanoth",{"_index":3372,"t":{"564":{"position":[[14823,21]]}}}],["activepagenumb",{"_index":1710,"t":{"512":{"position":[[216,16]]}}}],["activepagenumber=\"1",{"_index":1737,"t":{"512":{"position":[[1771,20],[2046,20]]}}}],["activepagenumber=\"2",{"_index":1749,"t":{"512":{"position":[[2581,20],[2632,20],[2712,20]]}}}],["activepagenumber=\"3",{"_index":1744,"t":{"512":{"position":[[2098,20]]}}}],["activepagenumber=\"5",{"_index":1745,"t":{"512":{"position":[[2150,20],[2346,20],[2425,20],[2476,20]]}}}],["activepagenumber=\"@currentpagenumb",{"_index":1752,"t":{"512":{"position":[[2821,37]]}}}],["actual",{"_index":1764,"t":{"514":{"position":[[1442,8],[1601,8]]}}}],["ad",{"_index":116,"t":{"6":{"position":[[96,5]]},"14":{"position":[[176,5]]},"68":{"position":[[680,5],[728,5]]},"88":{"position":[[362,5]]},"100":{"position":[[972,5],[1018,5]]},"104":{"position":[[413,5],[694,5]]},"120":{"position":[[96,5]]},"218":{"position":[[149,5]]},"388":{"position":[[140,5]]},"492":{"position":[[1007,5]]},"494":{"position":[[195,5],[552,5],[863,5],[1371,5]]},"496":{"position":[[165,5]]},"502":{"position":[[219,5],[3962,6]]},"504":{"position":[[418,5],[738,5],[902,5],[1065,5],[1229,5],[1458,5],[2021,5],[2253,5],[2416,5]]},"506":{"position":[[197,5],[729,5]]},"508":{"position":[[199,5],[517,5],[714,5]]},"510":{"position":[[225,5],[1563,5]]},"514":{"position":[[226,5],[1335,5]]},"516":{"position":[[455,5],[668,5]]},"522":{"position":[[3753,6]]},"524":{"position":[[181,5]]},"526":{"position":[[641,5],[1100,5]]},"528":{"position":[[431,5]]},"530":{"position":[[384,5],[521,5],[806,5],[1079,5],[2278,5],[2535,5]]},"532":{"position":[[288,5],[426,5],[711,5],[974,5],[2665,5],[2904,5]]},"534":{"position":[[229,5],[366,5],[651,5],[914,5],[2011,5],[2258,5]]},"536":{"position":[[433,5],[570,5],[855,5],[1120,5],[4629,5],[4868,5]]},"538":{"position":[[282,5],[1618,5],[1863,5],[2215,5]]},"540":{"position":[[206,5],[493,5],[606,5]]},"544":{"position":[[357,5],[1089,5]]},"556":{"position":[[361,5],[1093,5]]},"564":{"position":[[295,5],[1000,5],[1378,5],[1748,5],[2003,5],[2180,5],[2901,5],[3268,5]]},"566":{"position":[[263,5],[729,5],[888,5]]},"568":{"position":[[241,5],[2888,5],[3508,5],[3821,5],[6479,5],[46202,6],[49003,6],[58602,6]]}}}],["add",{"_index":581,"t":{"106":{"position":[[250,3],[373,3]]},"110":{"position":[[261,3]]},"492":{"position":[[180,4]]},"494":{"position":[[1997,4],[2548,4],[3098,4],[3861,4],[4486,4],[5109,4],[5851,4],[6402,4],[6952,4],[7655,4],[8222,4],[8772,4],[9487,4],[10038,4],[10588,4],[11475,4],[12038,4],[12600,4],[13158,4],[13706,4],[14266,4],[16420,4],[16993,4],[17565,4]]},"496":{"position":[[2018,3]]},"498":{"position":[[452,3]]},"500":{"position":[[2913,3],[3401,3],[3890,3],[4376,3],[4861,3]]},"502":{"position":[[3474,3],[6578,3]]},"504":{"position":[[5897,3]]},"506":{"position":[[852,4],[6918,3]]},"510":{"position":[[83,3],[9558,3]]},"512":{"position":[[2249,3]]},"516":{"position":[[174,3],[958,3]]},"520":{"position":[[1885,3],[6105,3],[7102,3]]},"522":{"position":[[1851,3]]},"524":{"position":[[91,3]]},"526":{"position":[[4616,3],[9797,3],[11386,3]]},"530":{"position":[[558,4],[615,4],[3653,3]]},"532":{"position":[[463,4],[520,4],[4275,3]]},"534":{"position":[[403,4],[460,4],[3361,3]]},"536":{"position":[[607,4],[664,4],[6312,3],[6458,3]]},"542":{"position":[[4873,4],[10891,3]]},"546":{"position":[[249,3],[363,3],[383,3],[965,3],[1209,3],[1232,3],[1575,3],[1909,3],[2428,3],[2506,3],[2595,3],[3439,3],[3458,3]]},"548":{"position":[[239,3],[353,3],[373,3],[950,3],[1288,3],[1375,3],[1398,3],[1736,3],[2070,3],[2589,3],[2667,3],[2756,3],[3613,3],[3632,3]]},"550":{"position":[[239,3],[353,3],[373,3],[852,3],[875,3],[1214,3],[1548,3],[2067,3],[2145,3],[2238,3],[3110,3],[3129,3]]},"560":{"position":[[4958,3]]},"562":{"position":[[7272,3]]},"564":{"position":[[10756,3],[11825,3],[12426,3],[13482,3],[14521,3],[16605,3],[17195,3]]},"568":{"position":[[6724,3],[11507,3],[14148,3],[21727,3],[24051,3],[30474,3],[30623,3],[33130,3],[42386,3],[42441,3],[49808,3],[50125,3],[56964,3],[57073,3],[59336,3],[59362,4],[59461,3],[59544,4]]}}}],["addasync",{"_index":554,"t":{"100":{"position":[[673,8],[739,8],[801,8],[862,8]]}}}],["adddataasync",{"_index":2327,"t":{"530":{"position":[[535,12],[5645,14],[12650,14]]},"532":{"position":[[440,12],[6540,14]]},"534":{"position":[[380,12],[5243,14],[8922,14]]},"536":{"position":[[584,12],[6441,16],[8407,14]]}}}],["adddataasync()\">add",{"_index":2367,"t":{"530":{"position":[[3782,19],[10870,19]]},"532":{"position":[[4404,19]]},"534":{"position":[[3490,19],[7284,19]]}}}],["adddatasetasync",{"_index":553,"t":{"100":{"position":[[653,15],[719,15],[781,15],[842,15]]},"530":{"position":[[589,15],[3633,19],[5395,17]]},"532":{"position":[[494,15],[4255,19],[6272,17]]},"534":{"position":[[434,15],[3341,19],[5008,17]]},"536":{"position":[[638,15],[6292,19],[8169,17]]}}}],["addemploye",{"_index":3789,"t":{"568":{"position":[[58541,13]]}}}],["addemployee2",{"_index":3793,"t":{"568":{"position":[[58732,14]]}}}],["addit",{"_index":821,"t":{"486":{"position":[[1575,10],[1619,10],[2105,10],[4027,10]]},"496":{"position":[[2315,10]]},"500":{"position":[[3210,10],[3698,10],[4187,10],[4673,10],[5158,10]]},"502":{"position":[[3521,10]]},"504":{"position":[[6132,10],[6648,10],[6943,10],[7413,10],[7745,10],[8074,10],[11038,10],[11402,10],[11741,10],[12311,10],[12696,10],[13056,10]]},"506":{"position":[[765,10],[935,10]]},"510":{"position":[[259,10],[548,10],[890,10],[1929,9]]},"512":{"position":[[2316,10]]},"514":{"position":[[260,10],[463,10],[572,10],[1849,9]]},"564":{"position":[[18367,10]]},"566":{"position":[[170,10],[937,10]]}}}],["address",{"_index":2799,"t":{"538":{"position":[[10162,7],[10886,7]]}}}],["adil",{"_index":2713,"t":{"538":{"position":[[3576,7],[5447,7],[8072,7]]}}}],["adipisc",{"_index":1798,"t":{"514":{"position":[[7615,10],[8868,10],[10256,10],[11856,10],[13109,10],[14497,10],[15997,10],[17250,10],[18638,10]]}}}],["aenean",{"_index":1877,"t":{"514":{"position":[[8496,6],[9433,6],[12737,6],[13674,6],[16878,6],[17815,6]]}}}],["agnost",{"_index":2757,"t":{"538":{"position":[[4356,8]]},"568":{"position":[[11378,8]]}}}],["ago10.2.5.@agree1@agree2aboutcontactde",{"_index":2888,"t":{"542":{"position":[[3072,5]]}}}],["b>e",{"_index":2883,"t":{"542":{"position":[[2846,5]]}}}],["b>en",{"_index":2871,"t":{"542":{"position":[[2168,5],[2394,5],[3524,5],[3750,5]]}}}],["b>faqsfr",{"_index":2877,"t":{"542":{"position":[[2620,5],[3298,5]]}}}],["b>homeproductsprofilethi",{"_index":952,"t":{"494":{"position":[[1899,7],[2448,7],[2999,7],[3763,7],[4386,7],[5010,7],[5753,7],[6302,7],[6853,7],[7557,7],[8122,7],[8673,7],[9389,7],[9938,7],[10489,7],[11377,7],[11938,7],[12501,7],[13058,7],[13607,7],[14167,7],[16322,7],[16893,7],[17466,7]]},"522":{"position":[[1173,7],[1394,7],[1618,7],[2060,7],[2281,7],[2505,7],[2951,7],[3233,7],[3517,7],[3880,7],[4101,7],[4342,7],[4567,7],[4960,7],[5181,7],[5405,7]]}}}],["b>zh",{"_index":2905,"t":{"542":{"position":[[3976,5]]}}}],["back",{"_index":420,"t":{"72":{"position":[[318,4],[503,4]]},"506":{"position":[[1907,7]]}}}],["backdrop",{"_index":462,"t":{"80":{"position":[[369,8]]},"510":{"position":[[1515,9],[2521,8],[3015,10],[7423,9],[8153,8],[15191,8]]},"514":{"position":[[2643,8],[7372,9],[21518,8]]}}}],["backend/api",{"_index":3577,"t":{"568":{"position":[[5820,11]]}}}],["background",{"_index":280,"t":{"42":{"position":[[268,11]]},"72":{"position":[[207,10]]},"100":{"position":[[556,10]]},"496":{"position":[[1129,10],[7353,10]]},"502":{"position":[[3385,10]]},"504":{"position":[[301,10],[8232,10],[13683,10]]},"520":{"position":[[171,12],[3534,12],[4350,10],[8329,11],[8345,10]]},"536":{"position":[[3029,10]]},"566":{"position":[[21025,10],[21088,10],[21417,10],[21555,10],[21970,10],[22083,10]]}}}],["backgroundcolor",{"_index":2336,"t":{"530":{"position":[[1093,15],[1143,16],[3992,17],[4147,16],[6560,15],[8341,15],[8883,15],[9425,15],[11080,17],[11235,16],[13759,15]]},"532":{"position":[[988,15],[1038,16],[7718,15],[8843,15],[10309,15],[10580,15],[10852,15],[12537,15],[12808,15],[13080,15],[14635,15],[14906,15],[15178,15]]},"534":{"position":[[928,15],[978,16],[3680,17],[3835,16],[6114,15],[7474,17],[7629,16],[9985,15]]},"536":{"position":[[1134,15],[1184,16],[9568,15],[11169,15],[11711,15],[12253,15],[14028,15],[14635,15],[15242,15]]}}}],["backgroundcolors![datalabelscount",{"_index":2395,"t":{"530":{"position":[[5993,37],[7325,35],[12998,37],[14524,35]]},"534":{"position":[[5569,37],[6879,35],[9248,37],[10750,35]]}}}],["badg",{"_index":414,"t":{"72":{"position":[[116,6],[191,5],[230,6],[808,5],[1066,5]]},"112":{"position":[[2461,6],[2581,5]]},"118":{"position":[[163,6],[283,5]]},"128":{"position":[[21,7],[159,6],[279,5]]},"194":{"position":[[2505,6],[2625,5]]},"196":{"position":[[169,6],[289,5]]},"202":{"position":[[165,6],[285,5]]},"206":{"position":[[2514,6],[2634,5]]},"220":{"position":[[168,6],[288,5]]},"222":{"position":[[465,6],[585,5]]},"280":{"position":[[2509,6],[2629,5]]},"284":{"position":[[2508,6],[2628,5]]},"292":{"position":[[459,6],[579,5]]},"304":{"position":[[162,6],[282,5]]},"462":{"position":[[160,6],[280,5]]},"486":{"position":[[3970,5]]},"492":{"position":[[2350,5]]},"496":{"position":[[11,5],[37,5],[64,5],[255,6],[326,5],[419,5],[504,5],[562,5],[678,6],[796,6],[1148,6],[1252,6],[1362,6],[1466,6],[1567,6],[1671,6],[1766,6],[1864,6],[2396,7],[2444,6],[2493,6],[2590,6],[2691,6],[2788,6],[2883,6],[2980,6],[3071,6],[3164,6],[3278,6],[3441,6],[3570,7],[3699,6],[4165,6],[4465,6],[4767,6],[5094,6],[5397,6],[5702,6],[6032,6],[6335,6],[6640,6],[6912,5],[7059,6],[7376,6]]},"566":{"position":[[311,5],[11126,6],[11135,5],[11267,6],[21356,5],[21411,5],[24329,5]]}}}],["badge1",{"_index":604,"t":{"122":{"position":[[41,6]]}}}],["badge>newnewnewnewnewnew...headersom",{"_index":1344,"t":{"504":{"position":[[2851,14],[3613,14],[4084,14],[4448,14],[5440,14],[8406,14],[8698,14],[8986,14],[9272,14],[9560,14],[9842,14],[10126,14],[10408,14]]}}}],["cardtext>thi",{"_index":1419,"t":{"504":{"position":[[10956,14],[11332,14],[11659,14],[12229,14],[12626,14],[12974,14]]}}}],["cardtext>with",{"_index":1379,"t":{"504":{"position":[[6071,14],[6587,14],[6882,14],[7352,14],[7684,14],[8013,14]]}}}],["cardtitl",{"_index":1336,"t":{"504":{"position":[[2355,9],[13533,9]]}}}],["cardtitle>card",{"_index":1342,"t":{"504":{"position":[[2817,15],[3512,15],[3983,15],[4347,15],[5406,15],[10922,15],[11298,15],[11625,15],[12195,15],[12592,15],[12940,15]]}}}],["cardtitle>dang",{"_index":1403,"t":{"504":{"position":[[9231,17]]}}}],["cardtitle>dark",{"_index":1411,"t":{"504":{"position":[[10369,15]]}}}],["cardtitle>info",{"_index":1407,"t":{"504":{"position":[[9803,15]]}}}],["cardtitle>light",{"_index":1409,"t":{"504":{"position":[[10086,16]]}}}],["cardtitle>primari",{"_index":1397,"t":{"504":{"position":[[8364,18]]}}}],["cardtitle>secondari",{"_index":1399,"t":{"504":{"position":[[8654,20]]}}}],["cardtitle>speci",{"_index":1377,"t":{"504":{"position":[[6024,18],[6540,18],[6835,18],[7305,18],[7637,18],[7966,18]]}}}],["cardtitle>success",{"_index":1401,"t":{"504":{"position":[[8944,18]]}}}],["cardtitle>warn",{"_index":1405,"t":{"504":{"position":[[9518,18]]}}}],["card—in",{"_index":1390,"t":{"504":{"position":[[7180,7]]}}}],["cart",{"_index":1760,"t":{"514":{"position":[[116,6]]}}}],["case",{"_index":2134,"t":{"522":{"position":[[8889,4],[8944,4],[9002,4],[9060,4]]},"538":{"position":[[1002,5],[4261,4],[4369,4]]},"568":{"position":[[9104,4],[11391,4]]}}}],["catch",{"_index":1969,"t":{"516":{"position":[[1442,5]]}}}],["catch(except",{"_index":2251,"t":{"526":{"position":[[12004,15]]},"560":{"position":[[5606,15]]}}}],["categor",{"_index":2355,"t":{"530":{"position":[[2927,11]]},"532":{"position":[[3559,11]]},"534":{"position":[[2645,11]]},"536":{"position":[[5524,11]]}}}],["categori",{"_index":2324,"t":{"530":{"position":[[178,11],[323,9],[3264,10]]},"532":{"position":[[1153,8],[1193,8],[1499,8],[3896,10]]},"534":{"position":[[166,11],[2982,10]]},"536":{"position":[[5861,10]]}}}],["categorypercentag",{"_index":2503,"t":{"532":{"position":[[1427,18]]}}}],["cater",{"_index":1137,"t":{"498":{"position":[[187,5]]}}}],["caus",{"_index":472,"t":{"82":{"position":[[198,7]]},"96":{"position":[[561,7]]}}}],["cdn",{"_index":2257,"t":{"528":{"position":[[265,4]]}}}],["cell",{"_index":230,"t":{"30":{"position":[[440,4],[455,4],[471,4]]},"568":{"position":[[37827,4],[37889,4],[40084,4],[40114,4],[42342,4],[66464,4],[121741,4],[121756,4],[121771,4]]}}}],["center",{"_index":541,"t":{"100":{"position":[[317,9]]},"506":{"position":[[1135,6],[6908,9],[6978,6],[7119,8],[7760,8],[8416,8]]},"510":{"position":[[1139,7],[9548,9],[9604,6],[9727,8],[10017,8],[10234,8],[11096,8],[15234,8],[15254,8]]},"530":{"position":[[228,6],[2307,6],[13550,9]]},"532":{"position":[[2693,6],[2746,6]]},"534":{"position":[[2040,6],[9786,9]]},"542":{"position":[[8361,6]]},"560":{"position":[[2159,9],[5915,8]]},"562":{"position":[[4847,6]]},"564":{"position":[[11770,9],[11783,6],[25913,8]]}}}],["centerbottom",{"_index":2234,"t":{"526":{"position":[[9083,53]]}}}],["changeplacement(toastsplacement.bottomleft)\">bottom",{"_index":2233,"t":{"526":{"position":[[8963,51]]}}}],["changeplacement(toastsplacement.bottomright)\">bottom",{"_index":2235,"t":{"526":{"position":[[9207,52]]}}}],["changeplacement(toastsplacement.middlecenter)\">middl",{"_index":2231,"t":{"526":{"position":[[8717,53]]}}}],["changeplacement(toastsplacement.middleleft)\">middl",{"_index":2230,"t":{"526":{"position":[[8597,51]]}}}],["changeplacement(toastsplacement.middleright)\">middl",{"_index":2232,"t":{"526":{"position":[[8841,52]]}}}],["changeplacement(toastsplacement.topcenter)\">top",{"_index":2226,"t":{"526":{"position":[[8363,47]]}}}],["changeplacement(toastsplacement.topleft)\">top",{"_index":2224,"t":{"526":{"position":[[8249,45]]}}}],["changeplacement(toastsplacement.topright)\">top",{"_index":2228,"t":{"526":{"position":[[8481,46]]}}}],["changesgrid",{"_index":3843,"t":{"568":{"position":[[80007,20]]}}}],["changesize(15)\">grid",{"_index":3845,"t":{"568":{"position":[[80124,20]]}}}],["changesize(5)\">grid",{"_index":3841,"t":{"568":{"position":[[79892,19]]}}}],["changesize(int",{"_index":3847,"t":{"568":{"position":[[82212,14]]}}}],["changetooltip",{"_index":1303,"t":{"502":{"position":[[8971,15]]},"524":{"position":[[1773,15]]}}}],["chart",{"_index":24,"t":{"2":{"position":[[247,6],[705,7],[956,5],[1136,5],[1383,7]]},"38":{"position":[[124,5],[153,5],[182,5],[214,5],[242,5],[269,5],[316,5],[362,5],[404,5],[445,5],[511,6],[529,5],[551,5],[569,5],[586,5]]},"96":{"position":[[518,5],[555,5],[906,5]]},"100":{"position":[[146,7],[633,5],[699,5],[761,5],[822,5],[1308,5]]},"102":{"position":[[147,5],[233,5],[277,5],[317,5],[356,5],[468,5]]},"104":{"position":[[148,7],[567,6],[606,6],[622,6],[634,6],[649,5],[777,5],[1007,5]]},"110":{"position":[[367,6],[384,5],[675,6]]},"116":{"position":[[1762,5],[1816,6],[1834,5],[1856,5],[1874,5],[1891,5]]},"126":{"position":[[197,7],[448,5]]},"132":{"position":[[33,6],[178,5],[232,6],[250,5],[272,5],[290,5],[307,5]]},"134":{"position":[[291,6],[749,7],[1000,5],[1180,5],[1427,7]]},"136":{"position":[[29,7],[175,5],[229,6],[247,5],[269,5],[287,5],[304,5]]},"146":{"position":[[38,6],[183,5],[237,6],[255,5],[277,5],[295,5],[312,5]]},"162":{"position":[[34,6],[179,5],[233,6],[251,5],[273,5],[291,5],[308,5]]},"168":{"position":[[33,6],[178,5],[232,6],[250,5],[272,5],[290,5],[307,5]]},"200":{"position":[[203,7],[454,5]]},"204":{"position":[[300,6],[758,7],[1009,5],[1189,5],[1436,7]]},"214":{"position":[[1815,5],[1869,6],[1887,5],[1909,5],[1927,5],[1944,5]]},"224":{"position":[[197,7],[448,5]]},"228":{"position":[[205,7],[456,5]]},"244":{"position":[[195,5],[442,7]]},"250":{"position":[[196,7],[447,5]]},"260":{"position":[[198,7],[449,5]]},"272":{"position":[[294,6],[752,7],[1003,5],[1183,5],[1430,7]]},"274":{"position":[[295,6],[753,7],[1004,5],[1184,5],[1431,7]]},"276":{"position":[[198,7],[449,5]]},"298":{"position":[[21,8],[291,6]]},"302":{"position":[[21,7],[191,7],[442,5]]},"310":{"position":[[199,7],[450,5]]},"324":{"position":[[288,6],[746,7],[997,5]]},"330":{"position":[[289,6],[464,5],[711,7]]},"342":{"position":[[290,6],[466,7],[717,5]]},"348":{"position":[[197,7],[448,5]]},"356":{"position":[[292,6]]},"366":{"position":[[192,7],[443,5]]},"370":{"position":[[290,6]]},"382":{"position":[[192,7],[443,5]]},"418":{"position":[[168,5],[222,6],[240,5],[262,5],[280,5],[297,5]]},"430":{"position":[[191,7]]},"432":{"position":[[192,5]]},"434":{"position":[[193,7],[444,5]]},"438":{"position":[[292,6]]},"498":{"position":[[11,6],[38,6],[62,6],[87,5],[175,6],[200,8],[305,5],[322,5],[380,5],[397,5],[412,5],[423,5],[433,5],[463,6],[481,6],[494,6],[509,6],[526,5],[572,6],[594,5],[626,5],[666,6],[693,5],[730,5],[766,6],[789,5],[822,5],[857,6],[879,5],[911,5],[993,5],[1009,5],[1024,5],[1035,5],[1045,5]]},"504":{"position":[[13344,6]]},"508":{"position":[[5246,6]]},"524":{"position":[[1901,5]]},"530":{"position":[[28,5],[63,5],[94,5],[124,5],[213,6],[248,5],[422,5],[464,5],[575,6],[635,6],[685,6],[726,6],[1789,6],[2172,5],[2605,5],[2877,7],[7434,5],[7551,5],[14637,5],[14653,5]]},"532":{"position":[[23,5],[53,5],[82,5],[326,5],[369,5],[480,6],[540,6],[590,6],[631,6],[2037,6],[2420,5],[2958,6],[2982,6],[3012,7],[3197,5],[3509,7],[8391,6],[9789,6],[11871,5],[11988,5],[16340,5],[16516,5],[16534,5]]},"534":{"position":[[23,5],[53,5],[82,5],[112,5],[267,5],[309,5],[420,6],[480,6],[530,6],[571,6],[1619,6],[1910,5],[2328,5],[2595,7],[10864,5]]},"536":{"position":[[24,5],[55,5],[85,5],[238,6],[471,5],[513,5],[624,6],[684,6],[734,6],[775,6],[1846,6],[2134,6],[4383,5],[4922,6],[4946,6],[4976,7],[5161,5],[5474,7],[6633,5],[6801,5],[16613,5],[16628,5]]},"546":{"position":[[1601,5],[1959,5],[2441,5]]},"548":{"position":[[1762,5],[2120,5],[2602,5]]},"550":{"position":[[1240,5],[1598,5],[2080,5]]},"560":{"position":[[5848,5]]}}}],["chart.j",{"_index":1134,"t":{"498":{"position":[[114,8]]},"546":{"position":[[1579,8],[2396,8]]},"548":{"position":[[1740,8],[2557,8]]},"550":{"position":[[1218,8],[2035,8]]}}}],["chart1",{"_index":607,"t":{"122":{"position":[[89,6],[206,6],[337,6],[409,6],[1246,6]]}}}],["chart.visu",{"_index":1174,"t":{"500":{"position":[[3242,15],[3730,15],[4219,15],[4705,15],[5190,15]]}}}],["code>step2dangerdangerinfoinfoprimaryprimarysav",{"_index":1604,"t":{"510":{"position":[[3523,32],[9187,32],[9865,32],[10944,32],[14252,32]]}}}],["color=\"buttoncolor.primary\">understoodcent",{"_index":3363,"t":{"564":{"position":[[12010,38]]}}}],["color=\"buttoncolor.secondary\">click",{"_index":3415,"t":{"564":{"position":[[22666,39],[23090,39]]}}}],["color=\"buttoncolor.secondary\">default",{"_index":3410,"t":{"564":{"position":[[22242,37]]}}}],["color=\"buttoncolor.secondary\">dropdown",{"_index":3336,"t":{"564":{"position":[[3788,38],[19136,38],[23855,38],[24911,38]]}}}],["color=\"buttoncolor.secondary\">dropdowndropenddropstartdropup",{"_index":3360,"t":{"564":{"position":[[10925,36],[11347,36]]}}}],["color=\"buttoncolor.secondary\">larg",{"_index":3356,"t":{"564":{"position":[[9000,35],[9410,35]]}}}],["color=\"buttoncolor.secondary\">manu",{"_index":3420,"t":{"564":{"position":[[23461,36]]}}}],["color=\"buttoncolor.secondary\">right",{"_index":3384,"t":{"564":{"position":[[16776,35]]}}}],["color=\"buttoncolor.secondary\">secondarysecondarysmal",{"_index":3358,"t":{"564":{"position":[[9889,35],[10281,35]]}}}],["color=\"buttoncolor.secondary\">split",{"_index":3367,"t":{"564":{"position":[[13004,35],[14373,35]]}}}],["color=\"buttoncolor.success",{"_index":1211,"t":{"502":{"position":[[2145,28],[2916,27]]},"510":{"position":[[6935,27]]},"514":{"position":[[6463,27]]},"516":{"position":[[2671,27]]},"520":{"position":[[4599,27]]},"526":{"position":[[2170,27],[3613,27],[5152,27],[6742,27],[10422,27]]},"542":{"position":[[12773,27]]},"544":{"position":[[8180,27],[11265,27]]},"556":{"position":[[7326,27],[10564,27]]},"560":{"position":[[1220,27],[2403,27],[3591,27]]},"562":{"position":[[9023,27]]},"564":{"position":[[7342,27],[20458,27]]}}}],["color=\"buttoncolor.success\">successsuccesswarningwarning*dangerdark(\"ar",{"_index":1472,"t":{"506":{"position":[[2829,44]]}}}],["dialog.showasync(titl",{"_index":1514,"t":{"506":{"position":[[6139,49],[7989,49]]}}}],["dialog1",{"_index":669,"t":{"122":{"position":[[1279,7],[1372,7]]}}}],["dialog2",{"_index":609,"t":{"122":{"position":[[144,7],[182,7]]}}}],["dialogcssclass",{"_index":1441,"t":{"506":{"position":[[743,14]]},"510":{"position":[[526,14]]}}}],["dialogoptions.isscrollable=\"tru",{"_index":1515,"t":{"506":{"position":[[6366,34],[7598,34]]}}}],["dialogoptions.isverticallycentered=\"tru",{"_index":1517,"t":{"506":{"position":[[6922,41]]}}}],["dialogs",{"_index":1449,"t":{"506":{"position":[[1298,10]]}}}],["dictionari",{"_index":1616,"t":{"510":{"position":[[5412,11],[5661,11]]},"514":{"position":[[4867,11],[5116,11]]}}}],["dictionaryanoth",{"_index":3379,"t":{"564":{"position":[[16223,23]]}}}],["disabled>dis",{"_index":2152,"t":{"524":{"position":[[1119,17]]}}}],["disabledropdown",{"_index":3378,"t":{"564":{"position":[[15820,17]]}}}],["disablerowselect",{"_index":3518,"t":{"568":{"position":[[1016,19],[75769,19]]}}}],["disablerowselection=\"disablerowselectionhandl",{"_index":3836,"t":{"568":{"position":[[76212,48]]}}}],["disablerowselectionhandler(employee1",{"_index":3839,"t":{"568":{"position":[[78902,36]]}}}],["disappear",{"_index":453,"t":{"78":{"position":[[258,9]]},"84":{"position":[[302,9]]}}}],["discount",{"_index":2970,"t":{"542":{"position":[[12123,9],[13412,8],[13503,9],[13994,9],[14051,8]]},"562":{"position":[[8416,9],[9662,8],[9753,9],[10245,9],[10302,8]]},"564":{"position":[[19917,9],[21136,8],[21227,9],[21719,9],[21776,8]]}}}],["discount:som",{"_index":1947,"t":{"514":{"position":[[20290,9]]}}}],["div>switch",{"_index":2827,"t":{"540":{"position":[[910,11]]}}}],["divid",{"_index":545,"t":{"100":{"position":[[389,9]]},"486":{"position":[[1674,9]]},"492":{"position":[[970,9],[980,8],[1127,8],[1177,8],[1564,8],[1729,8],[2400,8]]},"564":{"position":[[17684,9],[17739,8],[25990,8]]}}}],["doc",{"_index":25,"t":{"2":{"position":[[260,4],[542,4],[974,4]]},"8":{"position":[[597,4]]},"12":{"position":[[156,4],[258,4]]},"22":{"position":[[238,4]]},"24":{"position":[[124,4],[177,4]]},"26":{"position":[[124,4],[203,4]]},"28":{"position":[[211,4]]},"32":{"position":[[429,4]]},"34":{"position":[[770,4]]},"72":{"position":[[663,4]]},"104":{"position":[[689,4],[1025,4]]},"106":{"position":[[404,4],[599,4]]},"110":{"position":[[500,4],[688,4]]},"116":{"position":[[2365,4],[2571,4]]},"124":{"position":[[199,4]]},"126":{"position":[[466,4],[2379,4],[2585,4]]},"130":{"position":[[310,4],[507,4],[1561,4]]},"134":{"position":[[304,4],[586,4],[1018,4]]},"200":{"position":[[472,4]]},"204":{"position":[[313,4],[595,4],[1027,4]]},"212":{"position":[[363,4],[560,4],[1614,4]]},"214":{"position":[[2418,4],[2624,4]]},"224":{"position":[[466,4]]},"228":{"position":[[474,4]]},"242":{"position":[[319,4]]},"248":{"position":[[314,4]]},"250":{"position":[[465,4]]},"260":{"position":[[467,4]]},"272":{"position":[[307,4],[589,4],[1021,4]]},"274":{"position":[[308,4],[590,4],[1022,4]]},"276":{"position":[[467,4]]},"298":{"position":[[304,4]]},"300":{"position":[[229,4]]},"302":{"position":[[460,4]]},"310":{"position":[[468,4]]},"324":{"position":[[20,6],[301,4],[583,4],[1015,4],[1214,4],[1420,4]]},"326":{"position":[[313,4]]},"328":{"position":[[1139,4]]},"330":{"position":[[302,4]]},"334":{"position":[[308,4]]},"342":{"position":[[303,4],[735,4],[3037,4]]},"348":{"position":[[466,4]]},"354":{"position":[[173,4]]},"356":{"position":[[305,4]]},"358":{"position":[[1359,4]]},"366":{"position":[[461,4]]},"370":{"position":[[303,4]]},"382":{"position":[[461,4]]},"392":{"position":[[200,4]]},"404":{"position":[[168,4]]},"410":{"position":[[168,4]]},"412":{"position":[[235,4]]},"414":{"position":[[228,4]]},"434":{"position":[[462,4]]},"436":{"position":[[312,4]]},"438":{"position":[[305,4]]},"492":{"position":[[848,7],[861,8],[1448,7],[1461,8],[2181,7],[2194,8]]},"552":{"position":[[247,4]]},"554":{"position":[[252,4]]}}}],["docs5",{"_index":678,"t":{"122":{"position":[[1380,5]]}}}],["document",{"_index":117,"t":{"6":{"position":[[136,14]]},"8":{"position":[[153,13],[226,13],[636,13]]},"10":{"position":[[116,11],[163,13]]},"30":{"position":[[603,13]]},"32":{"position":[[373,13]]},"34":{"position":[[626,13],[665,13],[701,13]]},"36":{"position":[[218,13]]},"38":{"position":[[332,13],[378,13],[420,13],[461,13]]},"40":{"position":[[356,13]]},"42":{"position":[[451,13],[489,13]]},"44":{"position":[[468,13],[509,13],[548,13]]},"46":{"position":[[676,13],[712,13]]},"48":{"position":[[630,13],[676,13],[715,13],[751,13]]},"50":{"position":[[453,13]]},"52":{"position":[[420,13]]},"54":{"position":[[356,13]]},"56":{"position":[[617,13]]},"58":{"position":[[490,13]]},"60":{"position":[[675,13],[711,13]]},"62":{"position":[[374,13]]},"64":{"position":[[315,13]]},"66":{"position":[[341,13]]},"68":{"position":[[821,13],[852,13],[880,13],[909,13]]},"70":{"position":[[797,13],[823,13],[854,13],[881,13],[912,13]]},"72":{"position":[[635,14],[814,13],[844,13],[875,13],[904,13],[952,13],[995,13]]},"74":{"position":[[514,13],[543,13]]},"76":{"position":[[316,13]]},"78":{"position":[[355,13],[386,13],[421,13],[457,13],[489,13],[523,13],[551,13],[583,13]]},"80":{"position":[[1431,13],[1462,13],[1497,13],[1533,13],[1565,13],[1599,13],[1627,13],[1659,13]]},"82":{"position":[[392,13],[418,13]]},"84":{"position":[[467,13],[496,13],[528,13]]},"86":{"position":[[356,13],[386,13]]},"88":{"position":[[600,13],[635,13],[661,13],[689,13],[715,13]]},"90":{"position":[[289,13]]},"92":{"position":[[370,13]]},"96":{"position":[[764,13],[805,13],[843,13],[880,13],[922,13],[961,13]]},"98":{"position":[[290,13]]},"100":{"position":[[1247,13],[1287,13],[1325,13],[1361,13],[1399,13],[1438,13],[1476,13]]},"102":{"position":[[485,13]]},"104":{"position":[[794,13]]},"106":{"position":[[487,13]]},"110":{"position":[[583,13]]},"116":{"position":[[2125,13]]},"120":{"position":[[136,14],[306,11]]},"126":{"position":[[2139,13]]},"130":{"position":[[1957,13]]},"212":{"position":[[2010,13]]},"214":{"position":[[2178,13]]},"218":{"position":[[189,14],[359,11]]},"384":{"position":[[160,11]]},"388":{"position":[[180,14]]},"390":{"position":[[197,13]]},"416":{"position":[[262,13]]},"498":{"position":[[637,13],[741,13],[833,13],[922,13]]},"502":{"position":[[1263,8]]},"504":{"position":[[1797,9]]},"508":{"position":[[1541,14]]},"510":{"position":[[2911,8]]},"520":{"position":[[49,13]]},"522":{"position":[[41,13]]},"564":{"position":[[2708,9]]}}}],["documentationdropdown",{"_index":3389,"t":{"564":{"position":[[18077,25]]}}}],["dropdownhead",{"_index":3331,"t":{"564":{"position":[[1937,14],[2093,15],[25756,14]]}}}],["dropdownheader>dropdown",{"_index":3387,"t":{"564":{"position":[[17369,24]]}}}],["dropdownitem",{"_index":3332,"t":{"564":{"position":[[2116,12],[3872,13],[3938,13],[4012,13],[4284,13],[4350,13],[4424,13],[4642,13],[4708,13],[4782,13],[4996,13],[5062,13],[5136,13],[5344,13],[5410,13],[5484,13],[5698,13],[5764,13],[5838,13],[6050,13],[6116,13],[6190,13],[6542,13],[6608,13],[6682,13],[6968,13],[7034,13],[7108,13],[7388,13],[7454,13],[7528,13],[7799,13],[7865,13],[7939,13],[8219,13],[8285,13],[8359,13],[8636,13],[8702,13],[8776,13],[9081,13],[9165,13],[9239,13],[9552,13],[9618,13],[9692,13],[9970,13],[10036,13],[10110,13],[10423,13],[10489,13],[10563,13],[11017,13],[11083,13],[11157,13],[11490,13],[11556,13],[11630,13],[12094,13],[12160,13],[12234,13],[12673,13],[12739,13],[12813,13],[13141,13],[13207,13],[13281,13],[13735,13],[13801,13],[13875,13],[14116,13],[14182,13],[14256,13],[14497,12],[14560,12],[14713,13],[14779,13],[14867,13],[15232,13],[15298,13],[15372,13],[15950,12],[16113,13],[16179,13],[16269,13],[16907,13],[16973,13],[17047,13],[17418,13],[17484,13],[17558,13],[17858,13],[17924,13],[17998,13],[18128,13],[22327,13],[22396,13],[22465,13],[22752,13],[22821,13],[22890,13],[23175,13],[23244,13],[23313,13],[23542,13],[23611,13],[23680,13],[23939,13],[24005,13],[24079,13],[24995,13],[25061,13],[25135,13],[25782,12]]}}}],["dropdownmenu",{"_index":3329,"t":{"564":{"position":[[1684,12],[1838,13],[2371,13],[3857,14],[4091,15],[4269,14],[4503,15],[4627,14],[4861,15],[4981,14],[5215,15],[5329,14],[5563,15],[5683,14],[5917,15],[6035,14],[6269,15],[6527,14],[6761,15],[6953,14],[7187,15],[7373,14],[7607,15],[7784,14],[8018,15],[8204,14],[8438,15],[8621,14],[8855,15],[9066,14],[9318,15],[9537,14],[9771,15],[9955,14],[10189,15],[10408,14],[10642,15],[10727,12],[11002,14],[11236,15],[11475,14],[11709,15],[11794,12],[12079,14],[12313,15],[12387,12],[12658,14],[12892,15],[13126,14],[13360,15],[13436,12],[13720,14],[13954,15],[14101,14],[14335,15],[14588,13],[14698,14],[14946,15],[15217,14],[15451,15],[15978,12],[16098,14],[16348,15],[16424,12],[16591,13],[16666,12],[16856,13],[17126,15],[17354,14],[17637,15],[17843,14],[18202,15],[18516,13],[18698,15],[19203,13],[20551,15],[22012,12],[22078,13],[22312,14],[22534,15],[22737,14],[22959,15],[23160,14],[23382,15],[23527,14],[23749,15],[23924,14],[24158,15],[24980,14],[25214,15],[25732,12]]}}}],["dropdownmenuposit",{"_index":3330,"t":{"564":{"position":[[1868,20]]}}}],["dropdowntogglebutton",{"_index":3327,"t":{"564":{"position":[[928,20],[1090,21],[3766,21],[4188,21],[4542,21],[4900,21],[5254,21],[5602,21],[5956,21],[6474,21],[6898,21],[7320,21],[7734,21],[8151,21],[8569,21],[8978,21],[9482,21],[9867,21],[10353,21],[10903,21],[11420,21],[11988,21],[12575,21],[13071,21],[13635,21],[14046,21],[14613,21],[15132,21],[16013,21],[16754,21],[17270,21],[17759,21],[18432,21],[19114,21],[22220,21],[22644,21],[23068,21],[23439,21],[23833,21],[24889,21],[25668,20]]}}}],["dropend",{"_index":542,"t":{"100":{"position":[[327,8]]},"564":{"position":[[12367,8],[25922,7]]}}}],["dropendemploye",{"_index":1478,"t":{"506":{"position":[[3292,13]]},"510":{"position":[[4680,13],[6568,13]]},"514":{"position":[[4140,13],[6096,13]]}}}],["end\">first",{"_index":1480,"t":{"506":{"position":[[3420,10]]},"510":{"position":[[4808,10],[6696,10]]},"514":{"position":[[4268,10],[6224,10]]}}}],["end\">last",{"_index":1482,"t":{"506":{"position":[[3555,9]]},"510":{"position":[[4943,9],[6831,9]]},"514":{"position":[[4403,9],[6359,9]]}}}],["enddat",{"_index":3123,"t":{"544":{"position":[[12804,7]]}}}],["enddateinput",{"_index":3104,"t":{"544":{"position":[[11387,12]]}}}],["enddateinput.dis",{"_index":3113,"t":{"544":{"position":[[11940,23]]}}}],["enddateinput.en",{"_index":3116,"t":{"544":{"position":[[12124,22]]}}}],["endregion",{"_index":2413,"t":{"530":{"position":[[7361,10],[14560,10]]},"532":{"position":[[8327,10]]},"534":{"position":[[6915,10],[10786,10]]},"536":{"position":[[10368,10]]}}}],["engin",{"_index":3606,"t":{"568":{"position":[[7686,10],[7819,10],[7942,10],[8204,10],[10031,10],[10164,10],[10287,10],[10549,10],[12407,10],[12540,10],[12663,10],[12925,10],[13790,10],[15179,10],[15312,10],[15435,10],[15697,10],[17598,10],[17731,10],[17854,10],[18116,10],[18981,10],[20350,10],[20483,10],[20606,10],[20868,10],[22752,10],[22885,10],[23008,10],[23270,10],[25917,10],[26160,10],[26396,10],[26884,10],[31829,10],[31962,10],[32085,10],[32347,10],[34194,10],[34327,10],[34450,10],[34712,10],[36559,10],[36692,10],[36815,10],[37077,10],[38964,10],[39078,10],[39185,10],[39414,10],[41222,10],[41336,10],[41443,10],[41672,10],[43946,10],[44189,10],[44425,10],[44913,10],[47200,10],[47333,10],[47456,10],[47718,10],[48583,10],[52845,10],[52978,10],[53101,10],[53363,10],[54228,10],[55484,10],[55617,10],[55740,10],[56002,10],[57937,10],[58070,10],[58193,10],[58455,10],[59163,8],[61649,10],[61782,10],[61905,10],[62167,10],[63032,10],[64870,10],[65003,10],[65126,10],[65388,10],[66253,10],[68247,10],[68380,10],[68503,10],[68765,10],[69630,10],[71385,10],[71518,10],[71641,10],[71903,10],[74360,10],[74493,10],[74616,10],[74878,10],[77657,10],[77790,10],[77913,10],[78175,10],[80748,10],[80881,10],[81004,10],[81266,10],[82131,10],[83514,10],[83647,10],[83770,10],[84032,10],[84897,10],[88752,10],[88875,10],[89137,10],[96982,10],[97105,10],[97367,10],[99173,10],[99296,10],[99558,10],[101611,10],[101734,10],[101996,10],[105593,10],[105726,10],[105849,10],[106111,10],[106976,10],[109473,10],[109607,10],[109730,10],[109992,10]]}}}],["enhanc",{"_index":16,"t":{"2":{"position":[[117,12],[391,12],[675,12]]},"16":{"position":[[161,12],[184,12]]},"24":{"position":[[129,12],[182,11]]},"26":{"position":[[129,12],[208,11]]},"28":{"position":[[112,12],[198,12],[216,11]]},"30":{"position":[[124,12],[184,12],[212,13]]},"34":{"position":[[115,13],[129,13],[212,13],[288,13],[537,13]]},"40":{"position":[[126,13],[145,13]]},"42":{"position":[[152,12]]},"44":{"position":[[116,12],[196,12],[229,12]]},"46":{"position":[[151,12],[516,13]]},"48":{"position":[[156,13],[321,12],[349,12],[377,12]]},"62":{"position":[[121,12]]},"64":{"position":[[120,12]]},"104":{"position":[[118,12]]},"106":{"position":[[116,12]]},"110":{"position":[[117,12]]},"114":{"position":[[712,12],[961,12]]},"116":{"position":[[156,13],[522,12],[870,12],[1212,12],[1501,13],[2296,13],[2710,12]]},"126":{"position":[[167,12],[2310,13]]},"130":{"position":[[112,12],[315,12],[512,12]]},"134":{"position":[[161,12],[435,12],[719,12]]},"138":{"position":[[797,13],[1163,12],[1511,12]]},"140":{"position":[[214,13],[580,12]]},"144":{"position":[[206,13],[572,12]]},"150":{"position":[[182,13]]},"152":{"position":[[169,12],[418,12],[673,13]]},"154":{"position":[[185,13]]},"156":{"position":[[183,13]]},"158":{"position":[[201,12]]},"160":{"position":[[208,12]]},"166":{"position":[[208,12]]},"170":{"position":[[170,12]]},"172":{"position":[[207,13],[573,12]]},"174":{"position":[[205,12]]},"176":{"position":[[209,12]]},"178":{"position":[[170,12]]},"180":{"position":[[207,13],[573,12]]},"182":{"position":[[200,12]]},"188":{"position":[[206,13]]},"190":{"position":[[450,12]]},"192":{"position":[[756,12],[1005,12]]},"198":{"position":[[200,13],[566,12],[914,12]]},"200":{"position":[[173,12]]},"204":{"position":[[170,12],[444,12],[728,12]]},"210":{"position":[[765,12],[1014,12]]},"212":{"position":[[165,12],[368,12],[565,12]]},"214":{"position":[[209,13],[575,12],[923,12],[1265,12],[1554,13],[2349,13],[2763,12]]},"224":{"position":[[167,12]]},"228":{"position":[[175,12]]},"242":{"position":[[168,12]]},"246":{"position":[[169,12],[418,12],[673,13]]},"248":{"position":[[163,12]]},"250":{"position":[[166,12]]},"260":{"position":[[168,12]]},"272":{"position":[[164,12],[438,12],[722,12]]},"274":{"position":[[165,12],[439,12],[723,12]]},"276":{"position":[[168,12]]},"282":{"position":[[760,12],[1009,12]]},"286":{"position":[[759,12],[1008,12]]},"292":{"position":[[789,12]]},"298":{"position":[[161,12]]},"300":{"position":[[160,13]]},"302":{"position":[[161,12]]},"310":{"position":[[169,12]]},"324":{"position":[[158,12],[432,12],[716,12],[1145,13]]},"326":{"position":[[162,12]]},"328":{"position":[[577,12],[826,12],[1070,13],[1278,12]]},"330":{"position":[[159,12]]},"334":{"position":[[157,12]]},"336":{"position":[[493,12]]},"338":{"position":[[201,12]]},"342":{"position":[[160,12],[436,12],[3042,12]]},"348":{"position":[[167,12]]},"354":{"position":[[178,12]]},"356":{"position":[[162,12]]},"358":{"position":[[1364,12]]},"362":{"position":[[202,12]]},"364":{"position":[[455,12]]},"366":{"position":[[162,12]]},"370":{"position":[[160,12]]},"378":{"position":[[781,12]]},"382":{"position":[[162,12]]},"404":{"position":[[173,12]]},"406":{"position":[[168,12]]},"408":{"position":[[156,12]]},"410":{"position":[[173,12]]},"414":{"position":[[159,13]]},"420":{"position":[[170,13]]},"422":{"position":[[195,12]]},"424":{"position":[[200,13]]},"426":{"position":[[196,12]]},"428":{"position":[[160,12]]},"434":{"position":[[163,12]]},"436":{"position":[[161,12]]},"438":{"position":[[162,12]]},"450":{"position":[[165,12]]},"452":{"position":[[164,12]]}}}],["enim",{"_index":1821,"t":{"514":{"position":[[7857,5],[8303,5],[8789,5],[10691,5],[12098,5],[12544,5],[13030,5],[14932,5],[16239,5],[16685,5],[17171,5],[19073,5]]}}}],["enough",{"_index":2213,"t":{"526":{"position":[[4784,6],[6318,6]]}}}],["ensur",{"_index":121,"t":{"8":{"position":[[94,8]]},"130":{"position":[[1898,8]]},"212":{"position":[[1951,8]]},"390":{"position":[[138,8]]},"496":{"position":[[2153,6]]},"500":{"position":[[3048,6],[3536,6],[4025,6],[4511,6],[4996,6]]}}}],["enter",{"_index":2677,"t":{"538":{"position":[[2500,5]]},"542":{"position":[[7505,5]]},"544":{"position":[[3172,5]]},"556":{"position":[[2404,5]]},"562":{"position":[[3215,5]]}}}],["enterpris",{"_index":3124,"t":{"546":{"position":[[106,10]]},"548":{"position":[[96,10]]},"550":{"position":[[96,10]]},"552":{"position":[[89,10]]},"554":{"position":[[94,10]]}}}],["entireti",{"_index":1391,"t":{"504":{"position":[[7192,8]]}}}],["entri",{"_index":94,"t":{"2":{"position":[[2819,7]]},"70":{"position":[[330,5],[514,5]]},"112":{"position":[[3099,7],[3113,7]]},"114":{"position":[[3000,7],[3014,7]]},"116":{"position":[[2796,7],[2810,7]]},"120":{"position":[[633,7]]},"130":{"position":[[2046,7],[2060,7]]},"134":{"position":[[2863,7]]},"192":{"position":[[3044,7],[3058,7]]},"194":{"position":[[3143,7],[3157,7]]},"198":{"position":[[1110,7]]},"204":{"position":[[2872,7]]},"206":{"position":[[3152,7],[3166,7]]},"210":{"position":[[3053,7],[3067,7]]},"212":{"position":[[2099,7],[2113,7]]},"214":{"position":[[2849,7],[2863,7]]},"218":{"position":[[686,7]]},"244":{"position":[[3003,7]]},"246":{"position":[[816,7]]},"272":{"position":[[2866,7]]},"274":{"position":[[2867,7]]},"280":{"position":[[3147,7],[3161,7]]},"282":{"position":[[1903,7]]},"284":{"position":[[3146,7],[3160,7]]},"286":{"position":[[1902,7]]},"328":{"position":[[1565,7]]},"330":{"position":[[2858,7]]},"342":{"position":[[3116,7]]},"346":{"position":[[250,7]]},"544":{"position":[[9415,5],[9516,5],[13044,5]]},"556":{"position":[[9026,5],[9127,5],[12267,5]]}}}],["enum",{"_index":251,"t":{"34":{"position":[[467,4]]},"500":{"position":[[329,4]]},"516":{"position":[[2277,4]]},"518":{"position":[[1357,5],[2191,5]]},"538":{"position":[[805,4],[939,4],[1294,4]]},"566":{"position":[[574,4]]},"568":{"position":[[4174,4],[5036,4],[5509,4],[5911,4],[40202,6]]}}}],["environ",{"_index":3476,"t":{"566":{"position":[[11192,12]]}}}],["equal",{"_index":1413,"t":{"504":{"position":[[10643,5],[11823,5],[13138,5]]}}}],["erat",{"_index":1865,"t":{"514":{"position":[[8322,5],[10188,4],[10511,4],[10894,4],[12563,5],[14429,4],[14752,4],[15135,4],[16704,5],[18570,4],[18893,4],[19276,4]]}}}],["ero",{"_index":1910,"t":{"514":{"position":[[9596,5],[9691,5],[9850,5],[10776,4],[11083,4],[13837,5],[13932,5],[14091,5],[15017,4],[15324,4],[17978,5],[18073,5],[18232,5],[19158,4],[19465,4]]}}}],["error",{"_index":474,"t":{"82":{"position":[[216,5]]},"526":{"position":[[12088,8]]},"560":{"position":[[5719,8]]}}}],["errormessag",{"_index":2995,"t":{"542":{"position":[[13867,12],[13979,12],[14136,12]]},"562":{"position":[[10117,12],[10230,12],[10387,12]]},"564":{"position":[[21591,12],[21704,12],[21861,12]]}}}],["es",{"_index":2750,"t":{"538":{"position":[[3886,4],[5757,4],[8382,4]]},"542":{"position":[[2929,3]]}}}],["es(thi",{"_index":1624,"t":{"510":{"position":[[6222,50]]},"514":{"position":[[5739,50]]}}}],["eventcallbackexampl",{"_index":1051,"t":{"496":{"position":[[851,11]]}}}],["h2>exampl",{"_index":1053,"t":{"496":{"position":[[895,11]]}}}],["h3>exampl",{"_index":1055,"t":{"496":{"position":[[939,11]]}}}],["h4",{"_index":826,"t":{"486":{"position":[[1725,3]]}}}],["h4>convey",{"_index":1171,"t":{"500":{"position":[[2842,13],[3330,13],[3819,13],[4305,13],[4790,13]]}}}],["h4>exampl",{"_index":1057,"t":{"496":{"position":[[983,11]]}}}],["h5>exampl",{"_index":1059,"t":{"496":{"position":[[1027,11]]}}}],["h6>exampl",{"_index":1061,"t":{"496":{"position":[[1071,11]]}}}],["hand",{"_index":774,"t":{"486":{"position":[[116,7]]},"528":{"position":[[1464,5],[1536,5],[1608,5],[1680,5],[1752,5],[1824,5]]}}}],["handl",{"_index":1970,"t":{"516":{"position":[[1453,6]]},"526":{"position":[[12029,6]]},"538":{"position":[[3961,6],[5832,6],[6861,6],[8457,6],[10617,6],[12128,6],[13622,6]]},"560":{"position":[[5631,6]]}}}],["handleonvalidsubmit",{"_index":2797,"t":{"538":{"position":[[10066,21]]},"542":{"position":[[13527,21]]},"544":{"position":[[8465,21]]},"562":{"position":[[9777,21]]},"564":{"position":[[21251,21]]}}}],["handlevalidsubmit",{"_index":3117,"t":{"544":{"position":[[12161,19]]},"556":{"position":[[7670,19],[11494,19]]}}}],["happi",{"_index":172,"t":{"14":{"position":[[288,5]]}}}],["hard",{"_index":1727,"t":{"512":{"position":[[1391,4]]}}}],["hashsetwel",{"_index":828,"t":{"486":{"position":[[1742,13]]}}}],["heading=\"import",{"_index":1170,"t":{"500":{"position":[[1622,20],[1865,20],[2108,20],[2349,20],[2586,20]]}}}],["headings",{"_index":1333,"t":{"504":{"position":[[2128,11],[2523,11]]}}}],["headingsize.h5",{"_index":1337,"t":{"504":{"position":[[2566,14]]}}}],["headingsize.h6",{"_index":1334,"t":{"504":{"position":[[2171,14]]}}}],["height",{"_index":1414,"t":{"504":{"position":[[10659,6],[11829,6],[13144,6]]},"508":{"position":[[1353,6]]},"510":{"position":[[8793,7],[8930,6],[10550,7],[10687,6]]},"520":{"position":[[342,6],[376,6],[400,6],[446,6],[3126,7],[3142,6],[3185,6],[3203,6],[8322,6]]},"530":{"position":[[398,6],[428,7]]},"532":{"position":[[302,6],[332,7]]},"534":{"position":[[243,6],[273,7]]},"536":{"position":[[447,6],[477,7]]},"566":{"position":[[21323,7]]},"568":{"position":[[1729,6],[1775,7],[107150,6]]}}}],["height=\"1",{"_index":2066,"t":{"520":{"position":[[3256,11]]}}}],["height=\"20",{"_index":2068,"t":{"520":{"position":[[3467,12]]}}}],["height=\"300",{"_index":2543,"t":{"532":{"position":[[8424,12],[9822,12],[12050,12],[14148,12]]}}}],["height=\"350",{"_index":3907,"t":{"568":{"position":[[107396,12]]}}}],["height=\"5",{"_index":2067,"t":{"520":{"position":[[3330,11]]}}}],["height='8'%3e%3cpath",{"_index":918,"t":{"492":{"position":[[1818,20]]}}}],["hello",{"_index":2205,"t":{"526":{"position":[[3003,8],[4489,8],[5985,8],[7646,8],[9590,8],[11255,8]]}}}],["help",{"_index":1140,"t":{"498":{"position":[[241,5]]},"526":{"position":[[1286,4]]}}}],["helper",{"_index":3161,"t":{"546":{"position":[[2622,7]]},"548":{"position":[[2783,7]]},"550":{"position":[[2265,7]]}}}],["helptext",{"_index":2181,"t":{"526":{"position":[[1253,8],[2963,8],[5945,8],[9550,8],[11215,8]]},"544":{"position":[[12295,9]]},"556":{"position":[[7804,9],[11628,9]]}}}],["hendrerit",{"_index":1928,"t":{"514":{"position":[[10364,9],[14605,9],[18746,9]]}}}],["here",{"_index":820,"t":{"486":{"position":[[1569,5]]},"492":{"position":[[964,5],[1578,5],[2320,5]]},"494":{"position":[[3519,5],[5530,5],[7373,5],[9193,5],[11009,5],[15996,5],[18980,5]]},"496":{"position":[[1124,4],[2386,4],[3264,4],[3944,4],[6863,4],[7269,4]]},"498":{"position":[[316,5],[605,5],[651,5],[704,5],[755,5],[800,5],[847,5],[890,5],[936,5]]},"500":{"position":[[1583,5],[2814,5],[5267,5]]},"502":{"position":[[2520,5],[2737,5],[3273,5],[3910,5],[4697,5],[5558,5],[6505,5],[6879,5],[7454,5],[7890,5],[8564,5],[9054,5],[9813,5]]},"504":{"position":[[3088,5],[3442,5],[3841,5],[4764,5],[5072,5],[5872,5],[6284,5],[7109,5],[8226,5],[10557,5],[11965,5],[13301,5]]},"506":{"position":[[2042,5],[3925,5],[4645,5],[5731,5],[6891,5],[8184,5]]},"508":{"position":[[2443,4],[3412,4]]},"510":{"position":[[3395,5],[3860,5],[5298,5],[7410,5],[8353,5],[9531,5],[10217,5],[11307,5],[12174,5],[13771,5],[14124,5],[15000,5]]},"512":{"position":[[1733,5],[2000,5],[2199,5],[2552,5],[2786,5],[3133,5]]},"514":{"position":[[3221,5],[4769,5],[6949,5],[7359,5],[11589,5],[15836,5],[21307,5]]},"516":{"position":[[1083,4],[1528,5],[2188,5],[3673,5]]},"518":{"position":[[1023,5],[1242,5],[2052,5],[2486,5],[3405,5]]},"520":{"position":[[1871,5],[2083,5],[3120,5],[3528,5],[4340,5],[5711,5],[6090,5],[7044,5],[8152,5]]},"522":{"position":[[1810,5],[2697,5],[3709,5],[4759,5],[5597,5],[7659,5],[8083,5],[9184,5]]},"524":{"position":[[967,5],[1202,5],[1261,5],[1454,5],[1856,4]]},"526":{"position":[[3092,5],[3199,4],[4599,5],[6084,5],[7926,5],[9706,5],[11337,5],[11517,4]]},"528":{"position":[[1019,5],[1267,5],[2809,5],[2912,5],[3054,5],[3221,5],[3559,5],[3697,5],[4304,5]]},"530":{"position":[[7404,5],[10534,5],[14603,5]]},"532":{"position":[[8370,5],[9771,5],[11841,5],[14103,5],[16287,5]]},"534":{"position":[[6958,5],[10829,5]]},"536":{"position":[[13327,5],[16574,5]]},"538":{"position":[[4140,4],[6011,4],[6979,4],[8575,4],[10921,4],[13840,4]]},"540":{"position":[[1005,4],[2196,4],[2396,4],[2887,4]]},"542":{"position":[[2061,4],[4456,4],[4793,4],[5306,4],[5846,4],[7337,4],[8186,4],[8960,4],[9472,4],[10797,4],[14240,4],[14916,4]]},"544":{"position":[[1681,4],[3004,4],[5421,4],[6806,4],[8922,4],[9373,4]]},"556":{"position":[[1634,4],[2236,4],[3650,4],[4983,4],[8537,4],[8984,4]]},"560":{"position":[[223,5],[2057,7],[2142,5],[3240,7],[3353,5],[4016,7],[4100,5],[4413,7],[4550,5],[4846,7],[4938,5],[5088,4]]},"562":{"position":[[1574,4],[3047,4],[3866,4],[4187,4],[4488,4],[4672,4],[5390,4],[5874,4],[7181,4],[10491,4],[11163,4]]},"564":{"position":[[4132,5],[6317,5],[8903,5],[10690,5],[11757,5],[12361,5],[13408,5],[14474,5],[14987,5],[16389,5],[17167,5],[17678,5],[18243,5],[18739,5],[21969,5],[23790,5],[24657,5],[25593,5]]},"566":{"position":[[2558,5],[4496,5],[6443,5],[8725,5],[11115,5],[13568,5],[15978,5],[18392,5],[22184,5],[24117,5]]},"568":{"position":[[8949,4],[11294,4],[14051,4],[16442,4],[19242,4],[21613,4],[24015,4],[28108,4],[30378,4],[33092,4],[35457,4],[37822,4],[40079,4],[42337,4],[46137,4],[48844,4],[49799,4],[54307,4],[56643,4],[59769,4],[63111,4],[66332,4],[72645,4],[75620,4],[79200,4],[82264,4],[84976,4],[89458,4],[97688,4],[100108,4],[102559,4],[107055,4],[110648,4],[113180,4],[115804,4],[118465,4],[121241,4]]}}}],["here'",{"_index":861,"t":{"486":{"position":[[2935,6]]}}}],["herecallout",{"_index":1163,"t":{"500":{"position":[[578,69],[800,69],[1024,69],[1242,69],[1458,69],[1730,69],[1972,69],[2216,69],[2454,69],[2690,69]]}}}],["html",{"_index":823,"t":{"486":{"position":[[1630,4]]},"494":{"position":[[2285,4],[2836,4],[3386,4],[4149,4],[4774,4],[5397,4],[6139,4],[6690,4],[7240,4],[7943,4],[8510,4],[9060,4],[9775,4],[10326,4],[10876,4],[11763,4],[12326,4],[12888,4],[13446,4],[13994,4],[14554,4],[16708,4],[17281,4],[17853,4]]},"502":{"position":[[8575,4]]},"510":{"position":[[2837,5]]},"512":{"position":[[1493,4]]},"544":{"position":[[109,4]]},"556":{"position":[[113,4]]},"562":{"position":[[107,4]]}}}],["https://demos.getblazorbootstrap.com",{"_index":160,"t":{"12":{"position":[[297,37]]},"14":{"position":[[326,37]]}}}],["i.",{"_index":1765,"t":{"514":{"position":[[1462,5],[1622,5]]},"536":{"position":[[1980,4]]}}}],["iaculi",{"_index":1923,"t":{"514":{"position":[[10041,7],[14282,7],[18423,7]]}}}],["ichartdataset",{"_index":2335,"t":{"530":{"position":[[1016,14]]},"532":{"position":[[911,14]]},"534":{"position":[[851,14]]},"536":{"position":[[1057,14]]}}}],["icompar",{"_index":3575,"t":{"568":{"position":[[5687,13]]}}}],["icon",{"_index":32,"t":{"2":{"position":[[423,6],[526,4]]},"4":{"position":[[233,4]]},"8":{"position":[[677,5]]},"10":{"position":[[229,4]]},"22":{"position":[[139,5],[260,5],[319,5],[361,5]]},"28":{"position":[[159,5],[248,5]]},"34":{"position":[[334,4]]},"46":{"position":[[450,4]]},"48":{"position":[[150,5],[249,4],[362,4],[570,4],[736,4]]},"72":{"position":[[405,4]]},"88":{"position":[[134,6],[327,4],[656,4],[804,4]]},"92":{"position":[[248,4]]},"96":{"position":[[662,4]]},"106":{"position":[[148,6],[287,4],[313,5],[583,4]]},"112":{"position":[[134,6],[244,4]]},"116":{"position":[[150,5],[249,4]]},"130":{"position":[[1112,5],[1166,5]]},"134":{"position":[[467,6],[570,4]]},"138":{"position":[[791,5],[890,4]]},"140":{"position":[[208,5],[307,4]]},"144":{"position":[[200,5],[299,4]]},"172":{"position":[[201,5],[300,4]]},"180":{"position":[[201,5],[300,4]]},"188":{"position":[[200,5],[299,4]]},"194":{"position":[[178,6],[288,4]]},"198":{"position":[[194,5],[293,4]]},"204":{"position":[[476,6],[579,4]]},"206":{"position":[[187,6],[297,4]]},"212":{"position":[[1165,5],[1219,5]]},"214":{"position":[[203,5],[302,4]]},"242":{"position":[[200,6],[303,4]]},"248":{"position":[[195,6],[298,4],[463,6],[573,4]]},"250":{"position":[[1372,6],[1482,4]]},"252":{"position":[[441,6],[551,4]]},"264":{"position":[[182,6],[292,4]]},"272":{"position":[[470,6],[573,4]]},"274":{"position":[[471,6],[574,4]]},"278":{"position":[[183,6],[293,4]]},"280":{"position":[[182,6],[292,4]]},"284":{"position":[[181,6],[291,4]]},"306":{"position":[[191,5],[245,5]]},"324":{"position":[[464,6],[567,4]]},"326":{"position":[[194,6],[297,4]]},"332":{"position":[[21,7],[182,5],[236,5]]},"334":{"position":[[20,6],[189,6],[292,4],[457,6],[567,4]]},"342":{"position":[[1642,6],[1752,4]]},"348":{"position":[[867,6],[977,4]]},"368":{"position":[[176,6],[286,4]]},"378":{"position":[[177,6],[287,4],[1083,5],[1137,5]]},"398":{"position":[[183,5],[237,5]]},"424":{"position":[[194,5],[293,4]]},"436":{"position":[[193,6],[296,4]]},"484":{"position":[[178,6],[288,4]]},"486":{"position":[[2130,6],[2170,5],[2198,6],[2246,5],[2328,4],[2377,5],[2466,4],[2514,5],[2610,4],[2659,5],[2756,4],[2796,4],[4046,5]]},"492":{"position":[[1597,5],[1645,5],[2310,4],[2422,4]]},"494":{"position":[[3536,5],[3670,5],[4292,5],[4917,5],[19144,4]]},"512":{"position":[[467,5],[631,5],[790,5],[957,5],[1752,6],[3251,5]]},"522":{"position":[[2714,5],[2867,5],[3145,5],[3430,5],[9315,4]]},"524":{"position":[[1216,4],[1431,4],[1973,4]]},"526":{"position":[[1236,4],[1348,4]]},"528":{"position":[[8,5],[34,5],[57,4],[88,4],[102,4],[146,5],[179,5],[197,4],[478,4],[548,5],[653,4],[704,4],[868,6],[875,5],[906,5],[941,5],[973,5],[1008,5],[1032,5],[1082,5],[1132,5],[1182,5],[1236,5],[1286,6],[1359,6],[1430,5],[1502,5],[1574,5],[1646,5],[1718,5],[1790,5],[1870,5],[1949,5],[2044,5],[2123,5],[2196,5],[2289,5],[2371,5],[2460,5],[2533,5],[2609,5],[2692,5],[2778,5],[2832,5],[2850,5],[2902,4],[2928,5],[2994,5],[3044,4],[3077,5],[3143,5],[3211,4],[3239,4],[3540,4],[3577,4],[3682,4],[3728,5],[3800,6],[3938,5],[4072,5],[4138,4],[4202,5],[4268,6],[4293,5],[4401,5],[4426,5],[4456,4],[4471,4],[4493,4],[4510,4],[4536,4],[4571,4],[4576,4],[4604,5]]},"538":{"position":[[13869,5]]},"546":{"position":[[2788,6],[2992,6],[3071,6]]},"548":{"position":[[2949,6],[3154,6],[3233,6]]},"550":{"position":[[2431,6],[2635,6],[2714,6]]},"552":{"position":[[1903,5]]},"566":{"position":[[375,4],[1018,4],[1132,4],[1199,4],[3403,9],[3454,8],[4509,5],[5289,9],[5340,8],[7571,9],[7622,8],[8754,5],[8828,5],[9051,5],[9904,9],[9955,8],[11504,5],[12357,9],[12408,8],[13587,5],[13649,4],[13682,6],[13914,5],[14767,9],[14818,8],[16328,5],[17181,9],[17232,8],[19687,9],[19738,8],[21239,4],[21503,4],[22982,9],[23033,8],[24253,5],[24313,5],[24348,4]]}}}],["icon2",{"_index":682,"t":{"122":{"position":[[1407,5]]}}}],["iconcolor",{"_index":2262,"t":{"528":{"position":[[451,9]]},"566":{"position":[[1080,9],[1090,9],[4526,9],[5225,9],[5454,9],[5902,9],[7507,9],[7736,9],[8184,9],[9840,9],[10069,9],[10517,9],[12293,9],[12522,9],[12970,9],[14703,9],[14932,9],[15380,9],[17117,9],[17346,9],[17794,9],[19623,9],[19852,9],[20300,9]]}}}],["iconcolor.dang",{"_index":3469,"t":{"566":{"position":[[5914,16],[8196,16],[10529,16],[12982,16],[15392,16],[17806,16],[20312,16]]}}}],["iconcolor.non",{"_index":2263,"t":{"528":{"position":[[490,14]]},"566":{"position":[[1100,14]]}}}],["iconcolor.primari",{"_index":3467,"t":{"566":{"position":[[5237,17],[7519,17],[9852,17],[12305,17],[14715,17],[17129,17],[19635,17]]}}}],["iconcolor.success",{"_index":3468,"t":{"566":{"position":[[5466,17],[7748,17],[10081,17],[12534,17],[14944,17],[17358,17],[19864,17]]}}}],["iconnam",{"_index":1714,"t":{"512":{"position":[[434,8],[599,8],[758,8],[921,8]]},"526":{"position":[[1303,8],[1312,8]]},"528":{"position":[[627,8]]},"544":{"position":[[12246,9]]},"552":{"position":[[1397,8],[1515,8],[1615,8]]},"554":{"position":[[1402,8],[1520,8],[1620,8]]},"556":{"position":[[7755,9],[11579,9]]},"566":{"position":[[565,8],[596,9],[1150,8],[1159,8],[2092,8],[2186,8],[2279,8],[2377,8],[2466,8],[3226,8],[3312,8],[3413,8],[3502,8],[3612,8],[3727,8],[3840,8],[3937,8],[4035,8],[4162,8],[4287,8],[4401,8],[5081,8],[5167,8],[5299,8],[5388,8],[5529,8],[5644,8],[5757,8],[5854,8],[5982,8],[6109,8],[6234,8],[6348,8],[7363,8],[7449,8],[7581,8],[7670,8],[7811,8],[7926,8],[8039,8],[8136,8],[8264,8],[8391,8],[8516,8],[8630,8],[9696,8],[9782,8],[9914,8],[10003,8],[10144,8],[10259,8],[10372,8],[10469,8],[10597,8],[10724,8],[10849,8],[10963,8],[12149,8],[12235,8],[12367,8],[12456,8],[12597,8],[12712,8],[12825,8],[12922,8],[13050,8],[13177,8],[13302,8],[13416,8],[14559,8],[14645,8],[14777,8],[14866,8],[15007,8],[15122,8],[15235,8],[15332,8],[15460,8],[15587,8],[15712,8],[15826,8],[16973,8],[17059,8],[17191,8],[17280,8],[17421,8],[17536,8],[17649,8],[17746,8],[17874,8],[18001,8],[18126,8],[18240,8],[19479,8],[19565,8],[19697,8],[19786,8],[19927,8],[20042,8],[20155,8],[20252,8],[20380,8],[20507,8],[20632,8],[20746,8],[22805,8],[22891,8],[22992,8],[23081,8],[23191,8],[23320,8],[23447,8],[23558,8],[23656,8],[23783,8],[23908,8],[24022,8]]}}}],["iconname.check2al",{"_index":3118,"t":{"544":{"position":[[12256,19]]},"556":{"position":[[7765,19],[11589,19]]}}}],["iconname.checkcirclefil",{"_index":3452,"t":{"566":{"position":[[2197,25],[3623,25],[5540,25],[7822,25],[10155,25],[12608,25],[15018,25],[17432,25],[19938,25],[23202,25]]}}}],["iconname.currencydollar",{"_index":3464,"t":{"566":{"position":[[4173,24],[6120,24],[8402,24],[10735,24],[13188,24],[15598,24],[18012,24],[20518,24],[23794,24]]}}}],["iconname.exclamationtrianglefil",{"_index":3459,"t":{"566":{"position":[[3513,33],[5399,33],[7681,33],[10014,33],[12467,33],[14877,33],[17291,33],[19797,33],[23092,33]]}}}],["iconname.housedoorfil",{"_index":3199,"t":{"552":{"position":[[1408,23]]},"554":{"position":[[1413,23]]},"566":{"position":[[2103,23],[3237,23],[5092,23],[7374,23],[9707,23],[12160,23],[14570,23],[16984,23],[19490,23],[22816,23]]}}}],["iconname.inputcursor",{"_index":3465,"t":{"566":{"position":[[4298,21],[6245,21],[8527,21],[10860,21],[13313,21],[15723,21],[18137,21],[20643,21],[23919,21]]}}}],["iconname.inputcursortext",{"_index":3453,"t":{"566":{"position":[[2290,25],[4046,25],[5993,25],[8275,25],[10608,25],[13061,25],[15471,25],[17885,25],[20391,25],[23667,25]]}}}],["iconname.layoutsidebarinset",{"_index":3455,"t":{"566":{"position":[[2477,28],[3323,28],[3851,28],[5178,28],[5768,28],[7460,28],[8050,28],[9793,28],[10383,28],[12246,28],[12836,28],[14656,28],[15246,28],[17070,28],[17660,28],[19576,28],[20166,28],[22902,28],[23458,28]]}}}],["iconname.non",{"_index":3446,"t":{"566":{"position":[[1168,13]]}}}],["iconname.personsquar",{"_index":3457,"t":{"566":{"position":[[3424,22],[5310,22],[7592,22],[9925,22],[12378,22],[14788,22],[17202,22],[19708,22],[23003,22]]}}}],["iconname.plussquarefil",{"_index":3201,"t":{"552":{"position":[[1526,24]]},"554":{"position":[[1531,24]]}}}],["iconname.segmentednav",{"_index":3454,"t":{"566":{"position":[[2388,22],[3738,22],[5655,22],[7937,22],[10270,22],[12723,22],[15133,22],[17547,22],[20053,22],[23331,22]]}}}],["iconname.t",{"_index":3203,"t":{"552":{"position":[[1626,15]]},"554":{"position":[[1631,15]]}}}],["iconname.toggleon",{"_index":3466,"t":{"566":{"position":[[4412,18],[6359,18],[8641,18],[10974,18],[13427,18],[15837,18],[18251,18],[20757,18],[24033,18]]}}}],["iconname.windowplu",{"_index":3461,"t":{"566":{"position":[[3948,20],[5865,20],[8147,20],[10480,20],[12933,20],[15343,20],[17757,20],[20263,20],[23569,20]]}}}],["iconname=\"iconname.bootstrapfil",{"_index":3182,"t":{"552":{"position":[[652,33]]},"554":{"position":[[657,33]]},"566":{"position":[[1611,33],[2735,33],[4590,33],[6626,33],[8886,33],[11320,33],[18572,33],[22314,33]]}}}],["icons",{"_index":2268,"t":{"528":{"position":[[678,8]]}}}],["icons.css",{"_index":2260,"t":{"528":{"position":[[349,10]]},"546":{"position":[[751,10]]},"548":{"position":[[741,10]]},"550":{"position":[[741,10]]}}}],["icons1",{"_index":683,"t":{"122":{"position":[[1413,6]]}}}],["icons@1.10.3/font/bootstrap",{"_index":3136,"t":{"546":{"position":[[723,27]]},"548":{"position":[[713,27]]},"550":{"position":[[713,27]]}}}],["icons@1.11.0/font/bootstrap",{"_index":2259,"t":{"528":{"position":[[321,27]]}}}],["iconsize.non",{"_index":2269,"t":{"528":{"position":[[715,13]]}}}],["icustomerservic",{"_index":2760,"t":{"538":{"position":[[6373,16],[9891,16],[11619,16],[13113,16]]},"568":{"position":[[112381,16],[115005,16],[117666,16],[120442,16]]}}}],["id",{"_index":471,"t":{"82":{"position":[[182,2]]},"506":{"position":[[3306,2]]},"510":{"position":[[4694,2],[6582,2]]},"514":{"position":[[4154,2],[6110,2],[8084,2],[8621,2],[8818,2],[9333,3],[10290,2],[10994,2],[11176,2],[12325,2],[12862,2],[13059,2],[13574,3],[14531,2],[15235,2],[15417,2],[16466,2],[17003,2],[17200,2],[17715,3],[18672,2],[19376,2],[19558,2]]},"526":{"position":[[1365,2],[1388,3]]},"532":{"position":[[2462,2],[2534,2]]},"536":{"position":[[4425,2],[4497,2]]},"552":{"position":[[1375,2],[1486,2],[1584,2]]},"554":{"position":[[1380,2],[1491,2],[1589,2]]},"566":{"position":[[1216,2],[1249,3],[1390,3],[2600,2],[3189,2],[3302,2],[3386,2],[3492,2],[3584,2],[3695,2],[3811,2],[3927,2],[4001,2],[4125,2],[4252,2],[4372,2],[5044,2],[5157,2],[5272,2],[5378,2],[5501,2],[5612,2],[5728,2],[5844,2],[5948,2],[6072,2],[6199,2],[6319,2],[7326,2],[7439,2],[7554,2],[7660,2],[7783,2],[7894,2],[8010,2],[8126,2],[8230,2],[8354,2],[8481,2],[8601,2],[9659,2],[9772,2],[9887,2],[9993,2],[10116,2],[10227,2],[10343,2],[10459,2],[10563,2],[10687,2],[10814,2],[10934,2],[12112,2],[12225,2],[12340,2],[12446,2],[12569,2],[12680,2],[12796,2],[12912,2],[13016,2],[13140,2],[13267,2],[13387,2],[14522,2],[14635,2],[14750,2],[14856,2],[14979,2],[15090,2],[15206,2],[15322,2],[15426,2],[15550,2],[15677,2],[15797,2],[16936,2],[17049,2],[17164,2],[17270,2],[17393,2],[17504,2],[17620,2],[17736,2],[17840,2],[17964,2],[18091,2],[18211,2],[19442,2],[19555,2],[19670,2],[19776,2],[19899,2],[20010,2],[20126,2],[20242,2],[20346,2],[20470,2],[20597,2],[20717,2],[22768,2],[22881,2],[22965,2],[23071,2],[23163,2],[23288,2],[23418,2],[23548,2],[23622,2],[23746,2],[23873,2],[23993,2]]},"568":{"position":[[7642,2],[7766,2],[7897,2],[8021,2],[8150,2],[8283,2],[8403,2],[8525,2],[8648,2],[9987,2],[10111,2],[10242,2],[10366,2],[10495,2],[10628,2],[10748,2],[10870,2],[10993,2],[12363,2],[12487,2],[12618,2],[12742,2],[12871,2],[13004,2],[13124,2],[13246,2],[13376,2],[13501,2],[13624,2],[13743,2],[15135,2],[15259,2],[15390,2],[15514,2],[15643,2],[15776,2],[15896,2],[16018,2],[16141,2],[17554,2],[17678,2],[17809,2],[17933,2],[18062,2],[18195,2],[18315,2],[18437,2],[18567,2],[18692,2],[18815,2],[18934,2],[20306,2],[20430,2],[20561,2],[20685,2],[20814,2],[20947,2],[21067,2],[21189,2],[21312,2],[22708,2],[22832,2],[22963,2],[23087,2],[23216,2],[23349,2],[23469,2],[23591,2],[23714,2],[25774,2],[26012,2],[26254,2],[26491,2],[26731,2],[26983,2],[27213,2],[27452,2],[27692,2],[31785,2],[31909,2],[32040,2],[32164,2],[32293,2],[32426,2],[32546,2],[32668,2],[32791,2],[34150,2],[34274,2],[34405,2],[34529,2],[34658,2],[34791,2],[34911,2],[35033,2],[35156,2],[36515,2],[36639,2],[36770,2],[36894,2],[37023,2],[37156,2],[37276,2],[37398,2],[37521,2],[38920,2],[39025,2],[39140,2],[39247,2],[39360,2],[39480,2],[39583,2],[39688,2],[39795,2],[41178,2],[41283,2],[41398,2],[41505,2],[41618,2],[41738,2],[41841,2],[41946,2],[42053,2],[43803,2],[44041,2],[44283,2],[44520,2],[44760,2],[45012,2],[45242,2],[45481,2],[45721,2],[47156,2],[47280,2],[47411,2],[47535,2],[47664,2],[47797,2],[47917,2],[48039,2],[48169,2],[48294,2],[48417,2],[48536,2],[52801,2],[52925,2],[53056,2],[53180,2],[53309,2],[53442,2],[53562,2],[53684,2],[53814,2],[53939,2],[54062,2],[54181,2],[55440,2],[55564,2],[55695,2],[55819,2],[55948,2],[56159,2],[56279,2],[56401,2],[56524,2],[57893,2],[58017,2],[58148,2],[58272,2],[58401,2],[61605,2],[61729,2],[61860,2],[61984,2],[62113,2],[62246,2],[62366,2],[62488,2],[62618,2],[62743,2],[62866,2],[62985,2],[64826,2],[64950,2],[65081,2],[65205,2],[65334,2],[65467,2],[65587,2],[65709,2],[65839,2],[65964,2],[66087,2],[66206,2],[68203,2],[68327,2],[68458,2],[68582,2],[68711,2],[68844,2],[68964,2],[69086,2],[69216,2],[69341,2],[69464,2],[69583,2],[71341,2],[71465,2],[71596,2],[71720,2],[71849,2],[71982,2],[72102,2],[72224,2],[72347,2],[74316,2],[74440,2],[74571,2],[74695,2],[74824,2],[74957,2],[75077,2],[75199,2],[75322,2],[75887,2],[75967,2],[77613,2],[77737,2],[77868,2],[77992,2],[78121,2],[78254,2],[78374,2],[78496,2],[78619,2],[80704,2],[80828,2],[80959,2],[81083,2],[81212,2],[81345,2],[81465,2],[81587,2],[81717,2],[81842,2],[81965,2],[82084,2],[83470,2],[83594,2],[83725,2],[83849,2],[83978,2],[84111,2],[84231,2],[84353,2],[84483,2],[84608,2],[84731,2],[84850,2],[88699,2],[88830,2],[88954,2],[89083,2],[89216,2],[89336,2],[96929,2],[97060,2],[97184,2],[97313,2],[97446,2],[97566,2],[99120,2],[99251,2],[99375,2],[99504,2],[99637,2],[99757,2],[100045,5],[101558,2],[101689,2],[101813,2],[101942,2],[102075,2],[102195,2],[102496,5],[105549,2],[105673,2],[105804,2],[105928,2],[106057,2],[106190,2],[106310,2],[106432,2],[106562,2],[106687,2],[106810,2],[106929,2],[109429,2],[109553,2],[109685,2],[109809,2],[109938,2],[110071,2],[110191,2],[110313,2],[110436,2],[110535,2]]}}}],["id=\"nam",{"_index":2788,"t":{"538":{"position":[[9491,9]]}}}],["idictionari",{"_index":1466,"t":{"506":{"position":[[2298,12]]},"510":{"position":[[4098,12]]},"514":{"position":[[3528,12]]}}}],["idictionarydangerdarkinfolightprimarysecondarysuccesswarninginfoa",{"_index":1369,"t":{"504":{"position":[[4974,7],[5021,7],[5672,7],[5719,7]]}}}],["item\">an",{"_index":1367,"t":{"504":{"position":[[4933,8],[5631,8]]}}}],["item'",{"_index":953,"t":{"494":{"position":[[1920,6],[2470,6],[3020,6],[3784,6],[4408,6],[5031,6],[5774,6],[6324,6],[6874,6],[7578,6],[8144,6],[8694,6],[9410,6],[9960,6],[10510,6],[11398,6],[11960,6],[12522,6],[13080,6],[13628,6],[14188,6],[16343,6],[16915,6],[17487,6]]}}}],["item.address",{"_index":3939,"t":{"568":{"position":[[111863,13],[114433,13],[117094,13],[119790,13]]}}}],["item.countri",{"_index":3952,"t":{"568":{"position":[[112279,13],[114903,13],[117564,13],[120340,13]]}}}],["item.customerid",{"_index":3920,"t":{"568":{"position":[[111017,16],[113546,16],[116207,16],[118902,16]]}}}],["item.customernam",{"_index":3925,"t":{"568":{"position":[[111301,18],[113871,18],[116532,18],[119228,18]]}}}],["item.design",{"_index":3653,"t":{"568":{"position":[[14698,18],[17074,18],[29101,18],[31341,19],[51125,18],[60588,18],[63915,18],[67122,18],[85496,18],[86298,18],[87086,18],[87888,18],[90139,18],[91130,18],[92119,18],[93110,18],[94095,18],[95080,18],[96075,18],[98248,18],[100686,18],[103586,18]]}}}],["item.doj",{"_index":3654,"t":{"568":{"position":[[14824,10],[17219,10],[29422,10],[31470,11],[33835,11],[51270,10],[60733,10],[64060,10],[67267,10],[85622,10],[86424,10],[87212,10],[88014,10],[90284,10],[91275,10],[92264,10],[93255,10],[94240,10],[95225,10],[96220,10],[98374,10],[100812,10],[103731,10]]}}}],["item.email",{"_index":3934,"t":{"568":{"position":[[111676,11],[114246,11],[116907,11],[119603,11]]}}}],["item.firstnam",{"_index":3712,"t":{"568":{"position":[[28749,16]]}}}],["item.id",{"_index":3651,"t":{"568":{"position":[[14460,9],[16789,9],[28587,9],[31029,10],[33491,10],[50770,8],[60303,9],[63630,9],[66837,9],[85258,9],[86060,9],[86848,9],[87650,9],[89854,9],[90845,9],[91834,9],[92825,9],[93810,9],[94795,9],[95790,9],[98010,9],[100448,9],[103301,9]]}}}],["item.isact",{"_index":3655,"t":{"568":{"position":[[14937,15],[17356,15],[29580,15],[31586,16],[33951,16],[51407,15],[60870,15],[64197,14],[85735,15],[86537,15],[87325,15],[88127,15],[90421,15],[91412,15],[92401,15],[93392,15],[94377,15],[95362,15],[96357,15],[98487,15],[100925,15],[103868,15]]}}}],["item.lastnam",{"_index":3714,"t":{"568":{"position":[[28922,15]]}}}],["item.nam",{"_index":3652,"t":{"568":{"position":[[14578,11],[16927,11],[31150,11],[33612,12],[50978,11],[60441,11],[63768,11],[66975,11],[85376,11],[86178,11],[86966,11],[87768,11],[89992,11],[90983,11],[91972,11],[92963,11],[93948,11],[94933,11],[95928,11],[98128,11],[100566,11],[103439,11]]}}}],["item.phon",{"_index":3930,"t":{"568":{"position":[[111495,11],[114065,11],[116726,11],[119422,11]]}}}],["item.postalzip",{"_index":3946,"t":{"568":{"position":[[112061,15],[114631,15],[117292,15],[120068,15]]}}}],["item.salari",{"_index":3717,"t":{"568":{"position":[[29271,13]]}}}],["item(\"window.localstorage.getitem",{"_index":3774,"t":{"568":{"position":[[52453,53]]}}}],["js.invokevoidasync(\"window.localstorage.setitem",{"_index":3769,"t":{"568":{"position":[[52264,49]]}}}],["jsonserializer.deserialize(settingsjson",{"_index":3776,"t":{"568":{"position":[[52598,55]]}}}],["jsonserializer.serialize(set",{"_index":3770,"t":{"568":{"position":[[52331,36]]}}}],["juli",{"_index":69,"t":{"2":{"position":[[1554,4],[1840,4],[2092,4],[2311,4],[2531,4]]},"26":{"position":[[23,4]]},"90":{"position":[[24,4]]},"92":{"position":[[24,4]]},"94":{"position":[[24,4]]},"96":{"position":[[24,4]]},"98":{"position":[[24,4]]},"108":{"position":[[872,4],[1341,4],[1381,4],[1420,4],[1459,4],[1498,4]]},"130":{"position":[[209,4]]},"134":{"position":[[1598,4],[1884,4],[2136,4],[2355,4],[2575,4]]},"204":{"position":[[1607,4],[1893,4],[2145,4],[2364,4],[2584,4]]},"212":{"position":[[262,4]]},"216":{"position":[[78,4]]},"244":{"position":[[613,4],[899,4]]},"250":{"position":[[504,4],[790,4],[1042,4]]},"252":{"position":[[79,4]]},"266":{"position":[[76,4]]},"270":{"position":[[73,4]]},"272":{"position":[[1601,4],[1887,4],[2139,4],[2358,4],[2578,4]]},"274":{"position":[[1602,4],[1888,4],[2140,4],[2359,4],[2579,4]]},"290":{"position":[[79,4]]},"294":{"position":[[72,4]]},"330":{"position":[[882,4],[1168,4]]},"342":{"position":[[774,4],[1060,4],[1312,4],[2936,4]]},"348":{"position":[[505,4]]},"358":{"position":[[1258,4]]},"374":{"position":[[70,4]]},"376":{"position":[[67,4]]},"380":{"position":[[74,4]]},"410":{"position":[[67,4]]},"472":{"position":[[68,4]]},"474":{"position":[[68,4]]},"480":{"position":[[68,4]]},"482":{"position":[[68,4]]},"488":{"position":[[68,4]]},"530":{"position":[[8036,7]]},"532":{"position":[[5052,7]]},"536":{"position":[[10864,7],[13725,7]]}}}],["june",{"_index":200,"t":{"24":{"position":[[23,4]]},"84":{"position":[[24,4]]},"86":{"position":[[24,4]]},"88":{"position":[[24,4]]},"108":{"position":[[911,4],[1537,4],[1577,4],[1617,4]]},"112":{"position":[[24,4],[362,4],[620,4]]},"130":{"position":[[406,4]]},"194":{"position":[[68,4],[406,4],[664,4]]},"206":{"position":[[77,4],[415,4],[673,4]]},"212":{"position":[[459,4]]},"222":{"position":[[73,4]]},"240":{"position":[[76,4]]},"244":{"position":[[1118,4],[1376,4]]},"248":{"position":[[353,4]]},"250":{"position":[[1262,4]]},"252":{"position":[[331,4]]},"262":{"position":[[76,4]]},"264":{"position":[[72,4]]},"278":{"position":[[73,4]]},"280":{"position":[[72,4],[410,4],[668,4]]},"284":{"position":[[71,4],[409,4],[667,4]]},"292":{"position":[[67,4]]},"316":{"position":[[66,4]]},"318":{"position":[[70,4]]},"330":{"position":[[1387,4],[1645,4]]},"334":{"position":[[347,4]]},"336":{"position":[[66,4]]},"342":{"position":[[1532,4]]},"348":{"position":[[757,4]]},"354":{"position":[[72,4]]},"364":{"position":[[69,4]]},"368":{"position":[[66,4]]},"378":{"position":[[67,4]]},"404":{"position":[[67,4]]},"476":{"position":[[68,4]]},"484":{"position":[[68,4]]},"490":{"position":[[68,4]]},"530":{"position":[[8028,7]]},"532":{"position":[[5044,7]]},"536":{"position":[[10856,7],[13717,7]]}}}],["justifi",{"_index":1263,"t":{"502":{"position":[[6337,7]]},"552":{"position":[[791,7]]},"554":{"position":[[796,7]]},"566":{"position":[[6765,7],[9025,7],[11478,7],[13888,7],[16302,7],[18730,7]]}}}],["justo",{"_index":1852,"t":{"514":{"position":[[8128,5],[10049,6],[10131,5],[12369,5],[14290,6],[14372,5],[16510,5],[18431,6],[18513,5]]}}}],["k",{"_index":2741,"t":{"538":{"position":[[3805,4],[5676,4],[8301,4]]},"568":{"position":[[27024,4],[45053,4]]}}}],["keep",{"_index":847,"t":{"486":{"position":[[2042,4]]},"494":{"position":[[7452,4],[9252,4]]},"546":{"position":[[3095,4]]},"548":{"position":[[3257,4]]},"550":{"position":[[2738,4]]}}}],["kenu1kfdbie4zvf0s0g1m5b4hcpxyd9f7jl+jjxkk+q2h455ryxk/7hauojl+0i4",{"_index":3145,"t":{"546":{"position":[[1470,65]]},"548":{"position":[[1631,65]]},"550":{"position":[[1109,65]]}}}],["key",{"_index":1567,"t":{"510":{"position":[[499,3],[2583,3],[5684,3],[7606,3],[7873,4]]},"514":{"position":[[414,3],[5139,3]]},"538":{"position":[[2199,3]]}}}],["keyboard",{"_index":346,"t":{"58":{"position":[[131,8],[252,8]]},"114":{"position":[[2248,8]]},"126":{"position":[[1763,8]]},"192":{"position":[[2292,8]]},"200":{"position":[[1320,8]]},"210":{"position":[[2301,8]]},"444":{"position":[[175,8]]},"486":{"position":[[3616,8]]},"502":{"position":[[1166,8]]},"504":{"position":[[1929,8]]},"510":{"position":[[2615,8],[2642,8]]},"538":{"position":[[2067,8],[2151,8],[13921,8]]},"564":{"position":[[1278,8],[1656,8],[2610,8]]}}}],["keystrok",{"_index":2673,"t":{"538":{"position":[[2019,9]]},"542":{"position":[[1702,9],[14298,9]]},"544":{"position":[[1240,9]]},"556":{"position":[[1244,9]]},"562":{"position":[[1192,9],[10549,9]]}}}],["keystroke/select",{"_index":3081,"t":{"544":{"position":[[8980,19]]},"556":{"position":[[8595,19]]}}}],["kick",{"_index":1496,"t":{"506":{"position":[[4721,4]]},"510":{"position":[[11375,4]]}}}],["kind",{"_index":838,"t":{"486":{"position":[[1943,4]]}}}],["kitchen",{"_index":1370,"t":{"504":{"position":[[5078,7],[13630,7]]}}}],["kleiner",{"_index":3885,"t":{"568":{"position":[[104420,8]]}}}],["know",{"_index":1958,"t":{"516":{"position":[[135,4]]},"526":{"position":[[388,4]]}}}],["known",{"_index":3138,"t":{"546":{"position":[[1052,5]]},"548":{"position":[[1037,5]]}}}],["komala",{"_index":2721,"t":{"538":{"position":[[3634,7],[5505,7],[8130,7]]}}}],["l",{"_index":685,"t":{"122":{"position":[[1441,1]]},"538":{"position":[[3865,4],[5736,4],[8361,4]]}}}],["label",{"_index":279,"t":{"42":{"position":[[261,6]]},"96":{"position":[[439,5]]},"104":{"position":[[590,6]]},"110":{"position":[[356,5]]},"496":{"position":[[106,7]]},"520":{"position":[[193,7],[583,5],[626,6],[972,6],[1877,7],[1889,6],[1943,5],[8288,6]]},"530":{"position":[[890,6],[935,7],[1671,6],[2044,5],[2066,5],[4232,6],[6503,5],[7050,6],[7197,7],[7952,6],[8186,5],[8730,5],[9272,5],[9802,6],[9811,7],[10545,7],[11320,6],[11702,6],[13702,5],[14249,6],[14396,7],[14841,6]]},"532":{"position":[[795,6],[840,7],[1868,6],[2292,5],[2314,5],[5221,6],[7658,5],[8104,6],[8229,7],[8637,6],[9092,6],[9101,7],[10086,6],[10236,5],[10509,5],[10780,5],[11041,6],[11050,7],[12314,6],[12464,5],[12737,5],[13008,5],[13269,6],[13278,7],[14114,7],[14412,6],[14562,5],[14835,5],[15106,5],[15367,6],[15376,7],[16087,6],[16552,6]]},"534":{"position":[[665,6],[710,7],[1501,6],[3920,6],[6057,5],[6604,6],[6751,7],[6969,7],[7714,6],[8076,6],[9928,5],[10475,6],[10622,7],[11049,6]]},"536":{"position":[[869,6],[914,7],[1803,6],[2443,5],[2465,5],[7120,6],[9511,5],[10148,6],[10273,7],[10780,6],[11014,5],[11558,5],[12100,5],[12630,6],[12639,7],[13338,7],[13641,6],[13873,5],[14482,5],[15089,5],[15690,6],[15699,7],[16372,6],[16813,6]]},"538":{"position":[[8935,6],[9389,6]]},"540":{"position":[[273,5],[308,6]]},"542":{"position":[[2134,6],[2360,6],[2586,6],[2812,6],[3038,6],[3264,6],[3490,6],[3716,6],[3942,6],[6057,6],[6187,6],[6320,6],[6455,6],[6592,6],[6729,6],[6868,6],[7007,6],[7821,6],[8396,6],[8650,6],[9132,6],[9562,6],[10305,6],[11403,6],[11829,6],[12238,6],[14369,6]]},"544":{"position":[[7388,6],[7680,6],[9994,6],[10303,6],[10702,6]]},"546":{"position":[[1986,5]]},"548":{"position":[[2147,5]]},"550":{"position":[[1625,5]]},"556":{"position":[[5574,6],[5911,6],[6236,6],[6540,6],[6859,6],[9594,6],[9995,6]]},"562":{"position":[[1361,6],[1783,6],[1911,6],[2042,6],[2175,6],[2310,6],[2445,6],[2582,6],[2719,6],[3529,6],[4027,6],[4322,6],[4882,6],[5108,6],[5562,6],[5962,6],[6701,6],[7782,6],[8165,6],[8531,6],[10618,6]]},"564":{"position":[[17211,5],[19379,6],[19703,6],[20010,6]]}}}],["label\">address:amountarriv",{"_index":3241,"t":{"556":{"position":[[6572,14],[6891,14],[10027,14]]}}}],["label\">cours",{"_index":3090,"t":{"544":{"position":[[10026,13]]}}}],["label\">custom",{"_index":3076,"t":{"544":{"position":[[7712,15]]}}}],["label\">customer:departur",{"_index":3236,"t":{"556":{"position":[[5943,16],[6268,16],[9626,16]]}}}],["label\">end",{"_index":3097,"t":{"544":{"position":[[10734,10]]}}}],["label\">ent",{"_index":2934,"t":{"542":{"position":[[6076,12],[6206,12],[6339,12],[6474,12],[6611,12],[6748,12],[6887,12],[7026,12]]},"562":{"position":[[1802,12],[1930,12],[2061,12],[2194,12],[2329,12],[2464,12],[2601,12],[2738,12]]}}}],["label\">flight",{"_index":3232,"t":{"556":{"position":[[5606,13]]}}}],["label\">invoic",{"_index":3073,"t":{"544":{"position":[[7420,14]]}}}],["label\">item",{"_index":2959,"t":{"542":{"position":[[11435,11],[11861,11],[14401,11]]},"562":{"position":[[7814,11],[8197,11],[10650,11]]},"564":{"position":[[19398,11],[19722,11]]}}}],["label\">local",{"_index":2870,"t":{"542":{"position":[[2153,14],[2379,14],[2605,14],[2831,14],[3057,14],[3283,14],[3509,14],[3735,14],[3961,14]]}}}],["label\">start",{"_index":3093,"t":{"544":{"position":[[10335,12]]}}}],["label\">tot",{"_index":2971,"t":{"542":{"position":[[12270,12]]},"562":{"position":[[8563,12]]},"564":{"position":[[20029,12]]}}}],["label=\"20",{"_index":2041,"t":{"520":{"position":[[1140,11],[2047,11]]}}}],["label=\"30",{"_index":2073,"t":{"520":{"position":[[4533,11]]}}}],["label=\"check",{"_index":2823,"t":{"540":{"position":[[813,14]]}}}],["label=\"default",{"_index":2821,"t":{"540":{"position":[[743,14],[2497,14]]}}}],["label=\"dis",{"_index":2832,"t":{"540":{"position":[[1146,15],[1830,15]]}}}],["label=\"revers",{"_index":2838,"t":{"540":{"position":[[2309,14]]}}}],["labels.add(getnextdatalabel",{"_index":2410,"t":{"530":{"position":[[7134,31],[14333,31]]},"532":{"position":[[8188,31]]},"534":{"position":[[6688,31],[10559,31]]},"536":{"position":[[10232,31]]}}}],["labelscount",{"_index":2521,"t":{"532":{"position":[[4951,11],[6621,12],[7967,12],[8275,11]]},"536":{"position":[[7002,11],[10011,12],[10319,11],[10350,15]]}}}],["lacinia",{"_index":1826,"t":{"514":{"position":[[7886,7],[8553,7],[8624,7],[12127,7],[12794,7],[12865,7],[16268,7],[16935,7],[17006,7]]}}}],["lacu",{"_index":1905,"t":{"514":{"position":[[9308,6],[9789,6],[10088,5],[13549,6],[14030,6],[14329,5],[17690,6],[18171,6],[18470,5]]}}}],["lakhsmi",{"_index":2738,"t":{"538":{"position":[[3779,10],[5650,10],[8275,10]]}}}],["land",{"_index":312,"t":{"46":{"position":[[540,7]]}}}],["languag",{"_index":380,"t":{"66":{"position":[[238,8]]}}}],["laoreet",{"_index":1806,"t":{"514":{"position":[[7687,8],[7696,7],[9396,8],[10495,8],[10608,7],[11928,8],[11937,7],[13637,8],[14736,8],[14849,7],[16069,8],[16078,7],[17778,8],[18877,8],[18990,7]]}}}],["larg",{"_index":1141,"t":{"498":{"position":[[254,5]]},"500":{"position":[[2820,5],[5366,5]]},"502":{"position":[[3598,5],[3678,5],[4305,5],[4401,5]]},"506":{"position":[[4871,5],[4915,5],[5177,5],[5313,5]]},"510":{"position":[[11495,5],[11875,5]]},"512":{"position":[[1327,5],[1446,5]]},"514":{"position":[[15842,5],[19828,5]]},"560":{"position":[[3668,5]]}}}],["larger",{"_index":1093,"t":{"496":{"position":[[2471,6]]},"502":{"position":[[3447,6]]},"512":{"position":[[2219,6]]}}}],["last",{"_index":942,"t":{"494":{"position":[[666,4]]},"512":{"position":[[621,4],[670,4],[740,4]]},"522":{"position":[[503,4]]},"538":{"position":[[2471,4]]}}}],["lastlinkicon",{"_index":1716,"t":{"512":{"position":[[586,12],[713,12]]}}}],["lastlinkicon=\"iconname.chevrondoubleright",{"_index":1743,"t":{"512":{"position":[[1945,42]]}}}],["lastlinktext",{"_index":1717,"t":{"512":{"position":[[637,12],[686,12]]}}}],["lastnam",{"_index":1487,"t":{"506":{"position":[[3853,8]]},"510":{"position":[[5241,8],[7353,8]]},"514":{"position":[[4712,8],[6892,8]]},"568":{"position":[[25805,8],[26041,8],[26284,8],[26520,8],[26763,8],[27013,8],[27245,8],[27483,8],[27722,8],[43834,8],[44070,8],[44313,8],[44549,8],[44792,8],[45042,8],[45274,8],[45512,8],[45751,8]]}}}],["launch",{"_index":1512,"t":{"506":{"position":[[6005,6],[6497,6],[7101,6],[7729,6]]}}}],["laura",{"_index":2747,"t":{"538":{"position":[[3858,6],[5729,6],[8354,6]]}}}],["layout",{"_index":338,"t":{"54":{"position":[[448,6]]},"72":{"position":[[650,6],[668,6],[702,6],[918,6],[966,6]]},"114":{"position":[[2100,6]]},"192":{"position":[[2144,6]]},"210":{"position":[[2153,6]]},"260":{"position":[[733,6]]},"340":{"position":[[297,6]]},"344":{"position":[[21,8],[295,6]]},"350":{"position":[[299,6]]},"366":{"position":[[727,6]]},"446":{"position":[[295,6]]},"516":{"position":[[229,6]]},"532":{"position":[[3086,6]]},"536":{"position":[[5050,6]]},"546":{"position":[[3200,6]]},"548":{"position":[[3363,6]]},"550":{"position":[[2843,6]]},"552":{"position":[[0,6],[34,6]]},"554":{"position":[[0,6],[39,6]]},"566":{"position":[[6454,6],[6557,6],[24270,6]]}}}],["layout1",{"_index":686,"t":{"122":{"position":[[1443,7]]}}}],["layoutcomponentbas",{"_index":2243,"t":{"526":{"position":[[11462,19]]},"552":{"position":[[586,19]]},"554":{"position":[[591,19]]},"560":{"position":[[5033,19]]}}}],["lead",{"_index":1380,"t":{"504":{"position":[[6121,4],[6637,4],[6932,4],[7402,4],[7734,4],[8063,4],[11027,4],[11391,4],[11730,4],[12300,4],[12685,4],[13045,4]]}}}],["lectu",{"_index":1874,"t":{"514":{"position":[[8450,7],[8763,6],[9614,7],[11063,7],[12691,7],[13004,6],[13855,7],[15304,7],[16832,7],[17145,6],[17996,7],[19445,7]]}}}],["left",{"_index":1294,"t":{"502":{"position":[[8000,5],[8515,4]]},"514":{"position":[[2462,5],[6991,4]]},"520":{"position":[[7217,5]]},"524":{"position":[[606,5]]},"530":{"position":[[1507,6]]},"532":{"position":[[1760,6]]},"534":{"position":[[1342,6]]},"536":{"position":[[1643,6]]},"542":{"position":[[1310,4]]},"564":{"position":[[13456,4],[16500,4]]},"568":{"position":[[4648,5]]}}}],["leftful",{"_index":1689,"t":{"510":{"position":[[13353,26]]}}}],["lgmodal?.showasync()\">larg",{"_index":1666,"t":{"510":{"position":[[11948,27]]}}}],["li",{"_index":1366,"t":{"504":{"position":[[4911,3],[4952,3],[4999,3],[5609,3],[5650,3],[5697,3]]}}}],["li>@emp.namelightful",{"_index":1687,"t":{"510":{"position":[[13249,26]]}}}],["mean",{"_index":1081,"t":{"496":{"position":[[1969,7],[2022,7],[2300,6]]},"500":{"position":[[2856,7],[2917,7],[3195,6],[3344,7],[3405,7],[3683,6],[3833,7],[3894,7],[4172,6],[4319,7],[4380,7],[4658,6],[4804,7],[4865,7],[5143,6]]},"506":{"position":[[5903,5]]},"510":{"position":[[8524,5]]},"542":{"position":[[5414,5]]}}}],["measur",{"_index":2028,"t":{"520":{"position":[[410,8],[3213,8]]},"568":{"position":[[24220,8]]}}}],["media",{"_index":1527,"t":{"508":{"position":[[1476,5]]}}}],["member",{"_index":2331,"t":{"530":{"position":[[749,8],[970,8],[2221,8],[2427,8],[14688,7],[14717,7],[14756,7],[14785,7]]},"532":{"position":[[654,8],[870,8],[2608,8],[2801,8],[16375,7],[16399,7],[16433,7],[16457,7]]},"534":{"position":[[594,8],[810,8],[1954,8],[2155,8],[10918,7],[10942,7],[10976,7],[11000,7]]},"536":{"position":[[798,8],[1015,8],[4572,8],[4764,8],[16663,7],[16688,7],[16723,7],[16748,7]]},"560":{"position":[[307,8],[5874,7]]}}}],["memori",{"_index":3757,"t":{"568":{"position":[[50320,6]]}}}],["mention",{"_index":3481,"t":{"566":{"position":[[18494,9]]}}}],["menu",{"_index":544,"t":{"100":{"position":[[367,4]]},"510":{"position":[[2779,4]]},"564":{"position":[[672,5],[760,4],[1915,4],[2944,4],[3025,4],[3110,4],[16395,4],[16820,4],[17173,4],[17253,5],[17721,4],[18297,4],[18409,4],[18781,5],[18814,5],[25956,4],[25970,4]]}}}],["menu.99+(titl",{"_index":1613,"t":{"510":{"position":[[4505,46]]}}}],["modal.showasync(titl",{"_index":1625,"t":{"510":{"position":[[6296,46]]}}}],["modal11",{"_index":689,"t":{"122":{"position":[[1463,7]]}}}],["modalful",{"_index":1683,"t":{"510":{"position":[[13052,24]]}}}],["modalfullscreen",{"_index":1571,"t":{"510":{"position":[[731,15]]}}}],["modalfullscreen.dis",{"_index":1572,"t":{"510":{"position":[[781,24]]}}}],["modalopt",{"_index":3272,"t":{"560":{"position":[[277,12],[295,11],[1970,11],[1988,11],[3153,11],[3171,11],[3929,11],[3947,11],[4326,11],[4344,11],[4759,11],[4777,11],[5231,11],[5439,11],[5457,11],[5652,11],[5670,11],[5862,11]]},"568":{"position":[[99967,11],[102411,11]]}}}],["modals",{"_index":1578,"t":{"510":{"position":[[1235,9]]},"560":{"position":[[794,9],[3912,10],[4031,9]]}}}],["modalservic",{"_index":47,"t":{"2":{"position":[[899,12],[2014,12]]},"88":{"position":[[820,12]]},"90":{"position":[[180,12]]},"98":{"position":[[367,12]]},"104":{"position":[[950,12]]},"112":{"position":[[260,12]]},"126":{"position":[[391,12]]},"134":{"position":[[943,12],[2058,12]]},"194":{"position":[[304,12]]},"200":{"position":[[397,12]]},"204":{"position":[[952,12],[2067,12]]},"206":{"position":[[313,12]]},"224":{"position":[[391,12]]},"228":{"position":[[399,12]]},"248":{"position":[[589,12]]},"250":{"position":[[390,12],[964,12],[1498,12]]},"252":{"position":[[253,12],[567,12]]},"260":{"position":[[392,12]]},"264":{"position":[[308,12]]},"272":{"position":[[946,12],[2061,12]]},"274":{"position":[[947,12],[2062,12]]},"276":{"position":[[392,12]]},"278":{"position":[[309,12]]},"280":{"position":[[308,12]]},"284":{"position":[[307,12]]},"302":{"position":[[385,12]]},"310":{"position":[[393,12]]},"324":{"position":[[940,12]]},"334":{"position":[[583,12]]},"342":{"position":[[660,12],[1234,12],[1768,12]]},"348":{"position":[[20,14],[391,12],[679,12],[993,12]]},"366":{"position":[[386,12]]},"368":{"position":[[302,12]]},"378":{"position":[[303,12]]},"382":{"position":[[386,12]]},"434":{"position":[[387,12]]},"480":{"position":[[242,12]]},"484":{"position":[[304,12]]},"560":{"position":[[1862,12],[1875,12],[3045,12],[3058,12],[3821,12],[3834,12],[4237,12],[4250,12],[4670,12],[4683,12],[5140,13],[5283,12],[5296,12]]},"568":{"position":[[98560,12],[98573,12],[100998,12],[101011,12]]}}}],["modalservice.showasync(modalopt",{"_index":3287,"t":{"560":{"position":[[2092,36],[3303,36],[4050,36],[4500,36],[4888,36],[5567,36],[5777,36]]}}}],["modalservice.showasync(new",{"_index":3857,"t":{"568":{"position":[[99940,26],[102384,26]]}}}],["modalservice3",{"_index":690,"t":{"122":{"position":[[1471,13]]}}}],["modalsize.regular",{"_index":1450,"t":{"506":{"position":[[1309,17]]},"510":{"position":[[1264,17]]},"560":{"position":[[833,17]]}}}],["modaltyp",{"_index":1576,"t":{"510":{"position":[[1159,9],[1169,9]]},"560":{"position":[[907,9],[1953,10],[2072,10],[3136,10],[3255,10]]}}}],["modaltype.dang",{"_index":3300,"t":{"560":{"position":[[5751,16]]}}}],["modaltype.light",{"_index":1577,"t":{"510":{"position":[[1208,15]]},"560":{"position":[[946,15]]}}}],["modaltype.primari",{"_index":3858,"t":{"568":{"position":[[99988,18],[102432,18]]}}}],["modaltype.success",{"_index":3299,"t":{"560":{"position":[[5540,17]]}}}],["mode",{"_index":2478,"t":{"530":{"position":[[9988,4]]},"532":{"position":[[5382,4],[9256,4],[11189,4],[13451,4],[15515,4]]},"536":{"position":[[7268,4],[12781,4],[15841,4]]},"568":{"position":[[2457,5]]}}}],["modifi",{"_index":908,"t":{"492":{"position":[[1073,9]]},"494":{"position":[[2170,6],[2721,6],[3271,6],[4034,6],[4659,6],[5282,6],[6024,6],[6575,6],[7125,6],[7828,6],[8395,6],[8945,6],[9660,6],[10211,6],[10761,6],[11648,6],[12211,6],[12773,6],[13331,6],[13879,6],[14439,6],[16593,6],[17166,6],[17738,6]]}}}],["molesti",{"_index":1871,"t":{"514":{"position":[[8427,8],[9572,8],[9907,8],[9979,8],[12668,8],[13813,8],[14148,8],[14220,8],[16809,8],[17954,8],[18289,8],[18361,8]]}}}],["molli",{"_index":1810,"t":{"514":{"position":[[7733,6],[7821,7],[9376,6],[10097,6],[11974,6],[12062,7],[13617,6],[14338,6],[16115,6],[16203,7],[17758,6],[18479,6]]}}}],["moment",{"_index":1144,"t":{"498":{"position":[[343,6]]},"502":{"position":[[8611,7]]},"566":{"position":[[2663,7]]},"568":{"position":[[30017,6],[112752,6],[115376,6],[118037,6],[120813,6]]}}}],["monoton",{"_index":2633,"t":{"536":{"position":[[4303,8]]}}}],["month",{"_index":2522,"t":{"532":{"position":[[4985,6]]}}}],["months[labelscount",{"_index":2542,"t":{"532":{"position":[[8300,18]]}}}],["more",{"_index":26,"t":{"2":{"position":[[270,4],[552,4],[984,4],[1232,4],[1525,4],[1811,4],[2063,4],[2282,4],[2502,4],[2808,4]]},"10":{"position":[[108,4]]},"44":{"position":[[133,4]]},"46":{"position":[[186,7]]},"48":{"position":[[174,4]]},"50":{"position":[[149,4]]},"52":{"position":[[142,4]]},"54":{"position":[[131,4]]},"58":{"position":[[164,4]]},"60":{"position":[[133,4]]},"62":{"position":[[138,4]]},"64":{"position":[[137,4]]},"74":{"position":[[375,4]]},"112":{"position":[[333,4],[591,4],[891,4],[1145,4],[1577,4],[1822,4],[2070,4],[2340,4],[2674,4],[3088,4]]},"114":{"position":[[338,4],[586,4],[729,4],[836,4],[978,4],[1085,4],[1534,4],[1672,4],[1844,4],[1980,4],[2112,4],[2281,4],[2401,4],[2548,4],[2660,4],[2814,4],[2989,4]]},"116":{"position":[[174,4],[401,4],[539,4],[714,4],[905,7],[1055,4],[1370,4],[1633,4],[1902,4],[2375,4],[2581,4],[2785,4]]},"118":{"position":[[376,4]]},"120":{"position":[[185,4],[298,4],[379,4],[622,4]]},"124":{"position":[[267,4]]},"126":{"position":[[476,4],[908,4],[1178,4],[1627,4],[1796,4],[1916,4],[2389,4],[2595,4]]},"128":{"position":[[372,4]]},"130":{"position":[[181,4],[378,4],[572,4],[770,4],[968,4],[1199,4],[1400,4],[1629,4],[1799,4],[2035,4]]},"132":{"position":[[318,4]]},"134":{"position":[[314,4],[596,4],[1028,4],[1276,4],[1569,4],[1855,4],[2107,4],[2326,4],[2546,4],[2852,4]]},"136":{"position":[[315,4]]},"138":{"position":[[195,4],[307,4],[461,4],[636,4],[815,4],[1042,4],[1180,4],[1355,4],[1546,7],[1696,4]]},"140":{"position":[[232,4],[459,4],[597,4],[772,4]]},"142":{"position":[[208,4],[383,4]]},"144":{"position":[[224,4],[451,4],[589,4],[764,4]]},"146":{"position":[[323,4]]},"148":{"position":[[501,4]]},"150":{"position":[[314,4]]},"152":{"position":[[186,4],[293,4],[435,4],[542,4],[805,4]]},"154":{"position":[[317,4]]},"156":{"position":[[315,4]]},"158":{"position":[[236,7],[386,4]]},"160":{"position":[[243,7],[393,4]]},"162":{"position":[[319,4]]},"164":{"position":[[200,4],[375,4]]},"166":{"position":[[243,7],[393,4]]},"168":{"position":[[318,4]]},"170":{"position":[[187,4],[362,4]]},"172":{"position":[[225,4],[452,4],[590,4],[765,4]]},"174":{"position":[[363,4]]},"176":{"position":[[367,4]]},"178":{"position":[[187,4],[362,4]]},"180":{"position":[[225,4],[452,4],[590,4],[765,4]]},"182":{"position":[[235,7],[385,4]]},"184":{"position":[[506,4]]},"186":{"position":[[498,4]]},"188":{"position":[[224,4],[451,4]]},"190":{"position":[[293,4],[608,4]]},"192":{"position":[[382,4],[630,4],[773,4],[880,4],[1022,4],[1129,4],[1578,4],[1716,4],[1888,4],[2024,4],[2156,4],[2325,4],[2445,4],[2592,4],[2704,4],[2858,4],[3033,4]]},"194":{"position":[[377,4],[635,4],[935,4],[1189,4],[1621,4],[1866,4],[2114,4],[2384,4],[2718,4],[3132,4]]},"196":{"position":[[382,4]]},"198":{"position":[[218,4],[445,4],[583,4],[758,4],[949,7],[1099,4]]},"200":{"position":[[482,4],[914,4],[1184,4],[1353,4],[1473,4]]},"202":{"position":[[378,4]]},"204":{"position":[[323,4],[605,4],[1037,4],[1285,4],[1578,4],[1864,4],[2116,4],[2335,4],[2555,4],[2861,4]]},"206":{"position":[[386,4],[644,4],[944,4],[1198,4],[1630,4],[1875,4],[2123,4],[2393,4],[2727,4],[3141,4]]},"208":{"position":[[515,4]]},"210":{"position":[[391,4],[639,4],[782,4],[889,4],[1031,4],[1138,4],[1587,4],[1725,4],[1897,4],[2033,4],[2165,4],[2334,4],[2454,4],[2601,4],[2713,4],[2867,4],[3042,4]]},"212":{"position":[[234,4],[431,4],[625,4],[823,4],[1021,4],[1252,4],[1453,4],[1682,4],[1852,4],[2088,4]]},"214":{"position":[[227,4],[454,4],[592,4],[767,4],[958,7],[1108,4],[1423,4],[1686,4],[1955,4],[2428,4],[2634,4],[2838,4]]},"216":{"position":[[355,4]]},"218":{"position":[[238,4],[351,4],[432,4],[675,4]]},"220":{"position":[[381,4]]},"222":{"position":[[344,4],[678,4]]},"224":{"position":[[476,4]]},"226":{"position":[[290,4],[560,4],[903,4]]},"228":{"position":[[484,4]]},"230":{"position":[[189,4],[361,4]]},"232":{"position":[[483,4],[731,4],[885,4],[1060,4]]},"234":{"position":[[457,4]]},"236":{"position":[[462,4],[805,4]]},"238":{"position":[[183,4],[355,4]]},"240":{"position":[[347,4],[779,4],[1193,4],[1536,4]]},"242":{"position":[[329,4]]},"244":{"position":[[291,4],[584,4],[870,4],[1089,4],[1347,4],[1647,4],[1901,4],[2333,4],[2578,4],[2992,4]]},"246":{"position":[[186,4],[293,4],[435,4],[542,4],[805,4]]},"248":{"position":[[324,4],[662,4]]},"250":{"position":[[475,4],[761,4],[1013,4],[1233,4],[1571,4],[1985,4],[2328,4],[2466,4],[2638,4]]},"252":{"position":[[302,4],[640,4]]},"254":{"position":[[199,4],[374,4]]},"256":{"position":[[482,4]]},"258":{"position":[[479,4],[893,4],[1236,4]]},"260":{"position":[[477,4],[613,4],[745,4]]},"262":{"position":[[305,4]]},"264":{"position":[[381,4]]},"266":{"position":[[333,4],[765,4],[1179,4]]},"268":{"position":[[463,4]]},"270":{"position":[[350,4]]},"272":{"position":[[317,4],[599,4],[1031,4],[1279,4],[1572,4],[1858,4],[2110,4],[2329,4],[2549,4],[2855,4]]},"274":{"position":[[318,4],[600,4],[1032,4],[1280,4],[1573,4],[1859,4],[2111,4],[2330,4],[2550,4],[2856,4]]},"276":{"position":[[477,4],[731,4]]},"278":{"position":[[382,4],[630,4]]},"280":{"position":[[381,4],[639,4],[939,4],[1193,4],[1625,4],[1870,4],[2118,4],[2388,4],[2722,4],[3136,4]]},"282":{"position":[[386,4],[634,4],[777,4],[884,4],[1026,4],[1133,4],[1582,4],[1720,4],[1892,4]]},"284":{"position":[[380,4],[638,4],[938,4],[1192,4],[1624,4],[1869,4],[2117,4],[2387,4],[2721,4],[3135,4]]},"286":{"position":[[385,4],[633,4],[776,4],[883,4],[1025,4],[1132,4],[1581,4],[1719,4],[1891,4]]},"288":{"position":[[476,4],[623,4],[735,4]]},"290":{"position":[[356,4]]},"292":{"position":[[338,4],[672,4],[858,4]]},"294":{"position":[[349,4]]},"296":{"position":[[284,4],[554,4],[897,4]]},"298":{"position":[[314,4]]},"300":{"position":[[239,4]]},"302":{"position":[[470,4]]},"304":{"position":[[375,4]]},"306":{"position":[[278,4]]},"308":{"position":[[183,4],[355,4]]},"310":{"position":[[478,4]]},"312":{"position":[[289,4]]},"314":{"position":[[477,4],[725,4]]},"316":{"position":[[337,4]]},"318":{"position":[[341,4],[773,4],[1187,4],[1530,4]]},"320":{"position":[[456,4],[799,4]]},"322":{"position":[[177,4],[349,4]]},"324":{"position":[[311,4],[593,4],[1025,4],[1224,4],[1430,4]]},"326":{"position":[[323,4]]},"328":{"position":[[451,4],[594,4],[701,4],[843,4],[950,4],[1149,4],[1353,4],[1554,4]]},"330":{"position":[[312,4],[560,4],[853,4],[1139,4],[1358,4],[1616,4],[1916,4],[2170,4],[2602,4],[2847,4]]},"332":{"position":[[269,4]]},"334":{"position":[[318,4],[656,4]]},"336":{"position":[[337,4],[528,7],[678,4]]},"338":{"position":[[236,7],[386,4]]},"340":{"position":[[177,4],[309,4]]},"342":{"position":[[313,4],[745,4],[1031,4],[1283,4],[1503,4],[1841,4],[2255,4],[2598,4],[2736,4],[2908,4],[3105,4]]},"344":{"position":[[175,4],[307,4]]},"346":{"position":[[239,4]]},"348":{"position":[[476,4],[728,4],[1066,4]]},"350":{"position":[[179,4],[311,4]]},"352":{"position":[[476,4]]},"354":{"position":[[238,4],[436,4],[634,4]]},"356":{"position":[[315,4]]},"358":{"position":[[473,4],[887,4],[1230,4],[1427,4],[1628,4]]},"360":{"position":[[244,4]]},"362":{"position":[[360,4]]},"364":{"position":[[298,4],[613,4]]},"366":{"position":[[471,4],[607,4],[739,4]]},"368":{"position":[[375,4]]},"370":{"position":[[313,4],[745,4]]},"372":{"position":[[457,4]]},"374":{"position":[[327,4],[759,4],[1173,4]]},"376":{"position":[[344,4]]},"378":{"position":[[376,4],[624,4],[939,4],[1170,4]]},"380":{"position":[[351,4]]},"382":{"position":[[471,4],[725,4]]},"384":{"position":[[152,4],[233,4]]},"386":{"position":[[282,4]]},"388":{"position":[[229,4]]},"390":{"position":[[275,4]]},"392":{"position":[[268,4]]},"394":{"position":[[209,4]]},"396":{"position":[[240,4]]},"398":{"position":[[270,4]]},"400":{"position":[[237,4]]},"402":{"position":[[237,4]]},"404":{"position":[[233,4]]},"406":{"position":[[243,4]]},"408":{"position":[[225,4]]},"410":{"position":[[236,4]]},"412":{"position":[[245,4]]},"414":{"position":[[238,4]]},"418":{"position":[[308,4]]},"420":{"position":[[302,4]]},"422":{"position":[[230,7],[380,4]]},"424":{"position":[[218,4],[445,4]]},"426":{"position":[[354,4]]},"428":{"position":[[177,4],[352,4]]},"430":{"position":[[333,4]]},"432":{"position":[[288,4]]},"434":{"position":[[472,4]]},"436":{"position":[[322,4]]},"438":{"position":[[315,4]]},"440":{"position":[[193,4],[368,4]]},"442":{"position":[[186,4],[298,4]]},"444":{"position":[[208,4],[328,4]]},"446":{"position":[[175,4],[307,4]]},"448":{"position":[[177,4],[349,4]]},"450":{"position":[[182,4],[289,4]]},"452":{"position":[[181,4],[288,4]]},"454":{"position":[[488,4]]},"456":{"position":[[287,4]]},"458":{"position":[[382,4]]},"460":{"position":[[453,4]]},"462":{"position":[[373,4]]},"464":{"position":[[287,4]]},"466":{"position":[[471,4]]},"468":{"position":[[309,4]]},"470":{"position":[[284,4]]},"472":{"position":[[259,4]]},"474":{"position":[[345,4]]},"476":{"position":[[339,4]]},"478":{"position":[[293,4]]},"480":{"position":[[291,4]]},"482":{"position":[[325,4]]},"484":{"position":[[377,4]]},"488":{"position":[[258,4]]},"490":{"position":[[297,4]]},"496":{"position":[[2451,4]]},"502":{"position":[[117,4],[2005,4]]},"504":{"position":[[3198,5]]},"514":{"position":[[127,4]]},"558":{"position":[[457,4]]},"564":{"position":[[129,5],[18675,4]]},"568":{"position":[[19387,4],[30695,4]]}}}],["motion",{"_index":1526,"t":{"508":{"position":[[1469,6],[1505,6]]}}}],["mous",{"_index":2607,"t":{"536":{"position":[[2959,5]]}}}],["move",{"_index":1649,"t":{"510":{"position":[[8969,4],[10726,4]]}}}],["mt",{"_index":1259,"t":{"502":{"position":[[6019,2],[6180,2],[6360,2]]},"568":{"position":[[57188,2]]}}}],["much",{"_index":1254,"t":{"502":{"position":[[5769,4]]}}}],["mug",{"_index":2722,"t":{"538":{"position":[[3642,6],[5513,6],[8138,6]]}}}],["multi",{"_index":3727,"t":{"568":{"position":[[29971,5],[112706,5],[115330,5],[117991,5],[120767,5]]}}}],["multipl",{"_index":214,"t":{"30":{"position":[[226,8]]},"42":{"position":[[280,8]]},"80":{"position":[[223,8]]},"96":{"position":[[534,8]]},"100":{"position":[[254,8]]},"502":{"position":[[139,8]]},"504":{"position":[[125,8],[5106,8]]},"512":{"position":[[149,8]]},"520":{"position":[[5717,8],[5740,8],[8373,8]]},"532":{"position":[[204,8]]},"568":{"position":[[72650,8],[72680,8],[122018,8]]}}}],["mute",{"_index":3396,"t":{"564":{"position":[[18546,6]]}}}],["muted\">card",{"_index":1355,"t":{"504":{"position":[[3577,11],[4048,11],[4412,11]]}}}],["muted\">last",{"_index":1424,"t":{"504":{"position":[[11128,11],[11455,11],[11877,11],[12423,11],[12771,11],[13214,11]]}}}],["mx",{"_index":1261,"t":{"502":{"position":[[6172,2]]}}}],["n",{"_index":691,"t":{"122":{"position":[[1485,1]]}}}],["nam",{"_index":1846,"t":{"514":{"position":[[8080,3],[12321,3],[16462,3]]}}}],["name",{"_index":123,"t":{"8":{"position":[[127,5]]},"130":{"position":[[1931,5]]},"212":{"position":[[1984,5]]},"390":{"position":[[171,5]]},"486":{"position":[[195,4],[484,4],[574,4]]},"492":{"position":[[209,4]]},"494":{"position":[[156,4],[535,4],[747,5],[846,4],[1332,4],[1550,4],[1584,5],[18222,5],[18441,5],[18661,5],[18882,5]]},"496":{"position":[[126,4]]},"500":{"position":[[155,4]]},"502":{"position":[[180,4],[1717,4]]},"504":{"position":[[379,4],[699,4],[863,4],[1026,4],[1190,4],[1419,4],[1982,4],[2214,4],[2377,4]]},"506":{"position":[[168,4],[699,4],[2341,5],[3431,4],[3565,4]]},"508":{"position":[[160,4],[500,4],[697,4]]},"510":{"position":[[186,4],[1546,4],[4141,5],[4819,4],[4953,4],[5713,5],[6707,4],[6841,4]]},"512":{"position":[[177,4]]},"514":{"position":[[187,4],[3571,5],[4279,4],[4413,4],[5168,5],[6235,4],[6369,4]]},"516":{"position":[[408,4],[639,4]]},"518":{"position":[[205,4],[443,4]]},"520":{"position":[[222,4],[491,4],[757,4]]},"522":{"position":[[134,4],[387,4],[588,4],[719,4]]},"524":{"position":[[142,4]]},"526":{"position":[[602,4],[1061,4],[1241,5],[1353,5]]},"528":{"position":[[392,4],[622,4],[658,5],[747,4]]},"530":{"position":[[345,4],[492,4],[767,4],[1040,4],[2239,4],[2496,4],[11678,4]]},"532":{"position":[[249,4],[397,4],[672,4],[935,4],[2626,4],[2865,4],[16063,4]]},"534":{"position":[[190,4],[337,4],[612,4],[875,4],[1972,4],[2219,4],[8052,4]]},"536":{"position":[[394,4],[541,4],[816,4],[1081,4],[4590,4],[4829,4],[16348,4]]},"538":{"position":[[243,4],[788,5],[1593,4],[1846,4],[10119,4]]},"540":{"position":[[167,4],[464,4],[589,4]]},"542":{"position":[[197,4],[1548,4],[1641,4]]},"544":{"position":[[318,4],[1072,4],[1179,4],[7728,5],[7896,5],[8577,5],[8850,4],[10040,5],[12591,4]]},"556":{"position":[[322,4],[1076,4],[1183,4]]},"560":{"position":[[238,4],[325,4]]},"562":{"position":[[205,4],[1046,4],[1131,4]]},"564":{"position":[[256,4],[961,4],[1339,4],[1709,4],[1964,4],[2141,4],[2884,4]]},"566":{"position":[[224,4],[380,5],[712,4],[849,4],[1023,5],[1204,5]]},"568":{"position":[[202,4],[2866,4],[3479,4],[3782,4],[5282,5],[6440,4],[7118,5],[7652,4],[7776,4],[7907,4],[8031,4],[8160,4],[8293,4],[8413,4],[8535,4],[8658,4],[9073,4],[9419,5],[9997,4],[10121,4],[10252,4],[10376,4],[10505,4],[10638,4],[10758,4],[10880,4],[11003,4],[11929,6],[12373,4],[12497,4],[12628,4],[12752,4],[12881,4],[13014,4],[13134,4],[13256,4],[13386,4],[13511,4],[13634,4],[13753,4],[14547,5],[15145,4],[15269,4],[15400,4],[15524,4],[15653,4],[15786,4],[15906,4],[16028,4],[16151,4],[16876,5],[17564,4],[17688,4],[17819,4],[17943,4],[18072,4],[18205,4],[18325,4],[18447,4],[18577,4],[18702,4],[18825,4],[18944,4],[19782,5],[20316,4],[20440,4],[20571,4],[20695,4],[20824,4],[20957,4],[21077,4],[21199,4],[21322,4],[22189,5],[22718,4],[22842,4],[22973,4],[23097,4],[23226,4],[23359,4],[23479,4],[23601,4],[23724,4],[24560,5],[24696,5],[28670,5],[28845,5],[31117,5],[31795,4],[31919,4],[32050,4],[32174,4],[32303,4],[32436,4],[32556,4],[32678,4],[32801,4],[33579,5],[34160,4],[34284,4],[34415,4],[34539,4],[34668,4],[34801,4],[34921,4],[35043,4],[35166,4],[35967,6],[36525,4],[36649,4],[36780,4],[36904,4],[37033,4],[37166,4],[37286,4],[37408,4],[37531,4],[38342,6],[38930,4],[39035,4],[39150,4],[39257,4],[39370,4],[39490,4],[39593,4],[39698,4],[39805,4],[40585,6],[41188,4],[41293,4],[41408,4],[41515,4],[41628,4],[41748,4],[41851,4],[41956,4],[42063,4],[42845,6],[42933,6],[46722,6],[47166,4],[47290,4],[47421,4],[47545,4],[47674,4],[47807,4],[47927,4],[48049,4],[48179,4],[48304,4],[48427,4],[48546,4],[49316,6],[49402,6],[50927,5],[52811,4],[52935,4],[53066,4],[53190,4],[53319,4],[53452,4],[53572,4],[53694,4],[53824,4],[53949,4],[54072,4],[54191,4],[54871,5],[55450,4],[55574,4],[55705,4],[55829,4],[55958,4],[56169,4],[56289,4],[56411,4],[56534,4],[57354,5],[57903,4],[58027,4],[58158,4],[58282,4],[58411,4],[60390,5],[61615,4],[61739,4],[61870,4],[61994,4],[62123,4],[62256,4],[62376,4],[62498,4],[62628,4],[62753,4],[62876,4],[62995,4],[63717,5],[64836,4],[64960,4],[65091,4],[65215,4],[65344,4],[65477,4],[65597,4],[65719,4],[65849,4],[65974,4],[66097,4],[66216,4],[66924,5],[68213,4],[68337,4],[68468,4],[68592,4],[68721,4],[68854,4],[68974,4],[69096,4],[69226,4],[69351,4],[69474,4],[69593,4],[70142,5],[71351,4],[71475,4],[71606,4],[71730,4],[71859,4],[71992,4],[72112,4],[72234,4],[72357,4],[73117,5],[74326,4],[74450,4],[74581,4],[74705,4],[74834,4],[74967,4],[75087,4],[75209,4],[75332,4],[76468,5],[77623,4],[77747,4],[77878,4],[78002,4],[78131,4],[78264,4],[78384,4],[78506,4],[78629,4],[79523,6],[80714,4],[80838,4],[80969,4],[81093,4],[81222,4],[81355,4],[81475,4],[81597,4],[81727,4],[81852,4],[81975,4],[82094,4],[82662,6],[83480,4],[83604,4],[83735,4],[83859,4],[83988,4],[84121,4],[84241,4],[84363,4],[84493,4],[84618,4],[84741,4],[84860,4],[85345,5],[86147,5],[86935,5],[87737,5],[88709,4],[88840,4],[88964,4],[89093,4],[89226,4],[89346,4],[89941,5],[90932,5],[91921,5],[92912,5],[93897,5],[94882,5],[95877,5],[96939,4],[97070,4],[97194,4],[97323,4],[97456,4],[97576,4],[98097,5],[99130,4],[99261,4],[99385,4],[99514,4],[99647,4],[99767,4],[100067,5],[100535,5],[101568,4],[101699,4],[101823,4],[101952,4],[102085,4],[102205,4],[102518,5],[103388,5],[105559,4],[105683,4],[105814,4],[105938,4],[106067,4],[106200,4],[106320,4],[106442,4],[106572,4],[106697,4],[106820,4],[106939,4],[107585,5],[109439,4],[109564,4],[109695,4],[109819,4],[109948,4],[110081,4],[110201,4],[110323,4],[110446,4],[110545,4],[111216,5],[113786,5],[116447,5],[119143,5]]}}}],["name=\"accordionitem1",{"_index":979,"t":{"494":{"position":[[11344,22],[16289,22]]}}}],["name=\"accordionitem2",{"_index":981,"t":{"494":{"position":[[11905,22],[16860,22]]}}}],["name=\"accordionitem3",{"_index":983,"t":{"494":{"position":[[12468,22],[17433,22]]}}}],["name=\"accordionitem6",{"_index":991,"t":{"494":{"position":[[14134,22]]}}}],["name=\"faq",{"_index":988,"t":{"494":{"position":[[13585,11]]},"522":{"position":[[6409,11]]}}}],["name=\"iconname.alarm",{"_index":2273,"t":{"528":{"position":[[881,21],[1038,21],[1088,21],[1138,21],[1188,21],[2856,21],[3000,21],[3296,21],[3380,21],[3632,21]]}}}],["name=\"iconname.alarmfil",{"_index":2274,"t":{"528":{"position":[[912,25],[3478,25]]}}}],["name=\"iconname.appl",{"_index":2276,"t":{"528":{"position":[[979,21],[2466,21]]}}}],["name=\"iconname.asterisk",{"_index":2302,"t":{"528":{"position":[[2539,24]]}}}],["name=\"iconname.bellfil",{"_index":1114,"t":{"496":{"position":[[3880,24]]}}}],["name=\"iconname.browsersafari",{"_index":2306,"t":{"528":{"position":[[2698,29]]}}}],["name=\"iconname.bug",{"_index":2294,"t":{"528":{"position":[[2129,19]]}}}],["name=\"iconname.checkal",{"_index":2292,"t":{"528":{"position":[[2050,24]]}}}],["name=\"iconname.checkcirclefil",{"_index":855,"t":{"486":{"position":[[2383,31]]}}}],["name=\"iconname.cloudlightningrainfil",{"_index":2290,"t":{"528":{"position":[[1955,38]]}}}],["name=\"iconname.creditcard2frontfil",{"_index":2299,"t":{"528":{"position":[[2377,36]]}}}],["name=\"iconname.exclamationdiamondfil",{"_index":2296,"t":{"528":{"position":[[2202,38]]}}}],["name=\"iconname.exclamationtrianglefil",{"_index":857,"t":{"486":{"position":[[2520,39],[2665,39]]}}}],["name=\"iconname.facebook",{"_index":2288,"t":{"528":{"position":[[1876,24]]}}}],["name=\"iconname.housefil",{"_index":968,"t":{"494":{"position":[[3676,25]]},"522":{"position":[[2873,25]]}}}],["name=\"iconname.infocirclefil",{"_index":852,"t":{"486":{"position":[[2252,30]]},"528":{"position":[[2295,30]]}}}],["name=\"iconname.infocirclefill\">(titl",{"_index":1779,"t":{"514":{"position":[[3961,50]]}}}],["offcanvas.showasync(titl",{"_index":1787,"t":{"514":{"position":[[5813,50]]}}}],["offcanvas1",{"_index":616,"t":{"122":{"position":[[387,10]]}}}],["offcanvas5",{"_index":695,"t":{"122":{"position":[[1514,10]]}}}],["offcanvasclosechang",{"_index":1301,"t":{"502":{"position":[[8863,31]]},"524":{"position":[[1665,31]]}}}],["onclick=\"clearmessage\">clear",{"_index":1545,"t":{"508":{"position":[[3931,29]]}}}],["onclick=\"closealert\">closedecreas",{"_index":2058,"t":{"520":{"position":[[2528,39]]}}}],["onclick=\"deleteemployeeasync",{"_index":1468,"t":{"506":{"position":[[2530,31]]}}}],["onclick=\"dis",{"_index":2805,"t":{"538":{"position":[[11422,19],[12888,19]]},"540":{"position":[[1305,19],[1917,19]]},"542":{"position":[[9822,19],[10493,19]]},"544":{"position":[[5768,19],[6473,19]]},"556":{"position":[[3972,19],[4650,19]]},"562":{"position":[[6220,19],[6885,19]]}}}],["onclick=\"disabledropdown\">disableenablehidehid",{"_index":1531,"t":{"508":{"position":[[1792,32],[2757,32],[3703,32]]}}}],["onclick=\"increaseprogressbar\">increas",{"_index":2056,"t":{"520":{"position":[[2393,39]]}}}],["onclick=\"onclick",{"_index":1305,"t":{"502":{"position":[[9122,19]]},"524":{"position":[[1267,18]]}}}],["onclick=\"onclickcallback",{"_index":1630,"t":{"510":{"position":[[6988,27]]},"514":{"position":[[6516,27]]}}}],["onclick=\"onhidemodalclick\">closehid",{"_index":1952,"t":{"514":{"position":[[20484,36]]}}}],["onclick=\"onshowmodalclick\">launch",{"_index":1639,"t":{"510":{"position":[[8111,34],[9300,34]]}}}],["onclick=\"onshowmodalclick\">show",{"_index":1606,"t":{"510":{"position":[[3636,32],[4247,32],[5901,32],[14365,32]]}}}],["onclick=\"onshowmodalclick\">vert",{"_index":1654,"t":{"510":{"position":[[9978,38],[11057,38]]}}}],["onclick=\"onshowoffcanvasclick\">show",{"_index":1790,"t":{"514":{"position":[[7175,36],[11409,36],[15650,36],[19791,36],[20607,36]]}}}],["onclick=\"resetform\">resetresetshowshow",{"_index":1529,"t":{"508":{"position":[[1681,32],[2646,32],[3592,32]]}}}],["onclick=\"showdialogasync",{"_index":1511,"t":{"506":{"position":[[5977,27],[6469,27],[7073,27],[7701,27]]}}}],["onclick=\"showemployeecomponent\">show",{"_index":1777,"t":{"514":{"position":[[3685,37],[5364,37]]}}}],["onclick=\"showfaqsaccordionitemasync\">faq",{"_index":998,"t":{"494":{"position":[[15142,42]]}}}],["onclick=\"showfaqsasync\">faq",{"_index":2116,"t":{"522":{"position":[[7040,29]]}}}],["onclick=\"showfirstaccordionitemasync\">first",{"_index":993,"t":{"494":{"position":[[14714,44]]}}}],["onclick=\"showfirsttabasync\">first",{"_index":2111,"t":{"522":{"position":[[6696,34]]}}}],["onclick=\"showlastaccordionitemasync\">last",{"_index":999,"t":{"494":{"position":[[15245,42]]}}}],["onclick=\"showlasttabasync\">last",{"_index":2117,"t":{"522":{"position":[[7119,32]]}}}],["onclick=\"showloadingdataasync\">show",{"_index":1972,"t":{"516":{"position":[[1591,36]]}}}],["onclick=\"showmodal\">show",{"_index":3295,"t":{"560":{"position":[[4179,25],[4612,25]]}}}],["onclick=\"showproductsaccordionitemasync\">product",{"_index":997,"t":{"494":{"position":[[15031,50]]}}}],["onclick=\"showproductstabasync\">product",{"_index":2115,"t":{"522":{"position":[[6950,40]]}}}],["onclick=\"showsaveconfirmationasync",{"_index":1489,"t":{"506":{"position":[[4099,37]]}}}],["onclick=\"showsavingdataasync\">show",{"_index":1974,"t":{"516":{"position":[[1686,35]]}}}],["onclick=\"showsecondaccordionitemasync\">second",{"_index":995,"t":{"494":{"position":[[14819,46]]}}}],["onclick=\"showsecondtabasync\">second",{"_index":2113,"t":{"522":{"position":[[6780,36]]}}}],["onclick=\"showthirdaccordionitemasync\">third",{"_index":996,"t":{"494":{"position":[[14926,44]]}}}],["onclick=\"showthirdtabasync\">third",{"_index":2114,"t":{"522":{"position":[[6866,34]]}}}],["onclick=\"toggl",{"_index":2806,"t":{"538":{"position":[[11496,18]]},"540":{"position":[[1379,18]]},"542":{"position":[[9896,18]]},"544":{"position":[[5842,18]]},"556":{"position":[[4046,18]]},"562":{"position":[[6294,18]]}}}],["onclick=\"toggleasync\">toggletoggl",{"_index":1532,"t":{"508":{"position":[[1903,36],[2868,36],[3814,36]]}}}],["onclick=\"togglesidebarstyles\">toggl",{"_index":3482,"t":{"566":{"position":[[18959,37]]}}}],["onclick=\"tooglesidebar",{"_index":3473,"t":{"566":{"position":[[9092,24],[11545,24],[13955,24],[16369,24]]}}}],["onclickcallback",{"_index":1620,"t":{"510":{"position":[[5719,16],[7192,15]]},"514":{"position":[[5174,16],[6731,15]]}}}],["onclickwithargs(arg",{"_index":1313,"t":{"502":{"position":[[9566,21]]}}}],["onclickwithargs(eventarg",{"_index":1315,"t":{"502":{"position":[[9688,25]]}}}],["onclos",{"_index":790,"t":{"486":{"position":[[591,7],[659,8],[3829,8]]}}}],["oncollapsehiddenasync",{"_index":1560,"t":{"508":{"position":[[5061,23]]}}}],["oncollapsehidingasync",{"_index":1559,"t":{"508":{"position":[[4951,23]]}}}],["oncollapseshowingasync",{"_index":1555,"t":{"508":{"position":[[4731,24]]}}}],["oncollapseshownasync",{"_index":1558,"t":{"508":{"position":[[4843,22]]}}}],["ondblclick=\"ondoubleclick",{"_index":1308,"t":{"502":{"position":[[9315,28]]}}}],["ondoubleclick(eventarg",{"_index":1309,"t":{"502":{"position":[[9400,23]]}}}],["ondropdownhiddenasync",{"_index":3435,"t":{"564":{"position":[[25378,23]]}}}],["ondropdownhidingasync",{"_index":3433,"t":{"564":{"position":[[25307,23]]}}}],["ondropdownshowingasync",{"_index":3437,"t":{"564":{"position":[[25449,24]]}}}],["ondropdownshownasync",{"_index":3439,"t":{"564":{"position":[[25522,22]]}}}],["onfieldchang",{"_index":559,"t":{"100":{"position":[[1103,14]]}}}],["ongridsettingschanged(gridset",{"_index":3766,"t":{"568":{"position":[[52019,34]]}}}],["onhid",{"_index":137,"t":{"8":{"position":[[345,8],[489,8]]},"72":{"position":[[351,9],[536,9]]},"494":{"position":[[1089,8],[18667,9]]},"508":{"position":[[951,8],[5000,8]]},"510":{"position":[[2247,8]]},"514":{"position":[[2167,8]]},"522":{"position":[[7746,8],[7880,8],[8026,8]]},"564":{"position":[[3282,8]]}}}],["onhidden",{"_index":139,"t":{"8":{"position":[[364,8],[508,8]]},"72":{"position":[[365,8],[550,8]]},"494":{"position":[[1174,8],[18888,9]]},"508":{"position":[[1036,8],[5110,8]]},"510":{"position":[[2326,8]]},"514":{"position":[[1639,8],[2246,8]]},"522":{"position":[[7818,8],[8039,8]]},"564":{"position":[[3368,8]]}}}],["onhidden=\"oncollapsehiddenasync",{"_index":1551,"t":{"508":{"position":[[4118,33]]}}}],["onhidden=\"ondropdownhiddenasync",{"_index":3430,"t":{"564":{"position":[[24789,32]]}}}],["onhidden=\"onhiddenasync",{"_index":1016,"t":{"494":{"position":[[16222,25]]}}}],["onhidden=\"onmodalhiddenasync",{"_index":1700,"t":{"510":{"position":[[14013,29]]}}}],["onhidden=\"onoffcanvashiddenasync",{"_index":1946,"t":{"514":{"position":[[20240,34]]}}}],["onhiddenasync(accordioneventarg",{"_index":1029,"t":{"494":{"position":[[18761,32]]}}}],["onhidemodalclick",{"_index":1610,"t":{"510":{"position":[[3800,18],[8293,18],[9471,18],[10157,18],[11247,18]]}}}],["onhideoffcanvasclick",{"_index":1953,"t":{"514":{"position":[[20795,22]]}}}],["onhideprev",{"_index":141,"t":{"8":{"position":[[390,15]]},"510":{"position":[[2456,15]]}}}],["onhideprevented=\"onmodalhidepreventedasync",{"_index":1701,"t":{"510":{"position":[[14043,44]]}}}],["onhiding=\"oncollapsehidingasync",{"_index":1550,"t":{"508":{"position":[[4085,32]]}}}],["onhiding=\"ondropdownhidingasync",{"_index":3429,"t":{"564":{"position":[[24756,32]]}}}],["onhiding=\"onhidingasync",{"_index":1015,"t":{"494":{"position":[[16197,24]]}}}],["onhiding=\"onmodalhidingasync",{"_index":1699,"t":{"510":{"position":[[13983,29]]}}}],["onhiding=\"onoffcanvashidingasync",{"_index":1945,"t":{"514":{"position":[[20206,33]]}}}],["onhidingasync(accordioneventarg",{"_index":1028,"t":{"494":{"position":[[18540,32]]}}}],["oniniti",{"_index":902,"t":{"492":{"position":[[562,15],[1316,15],[2049,15]]},"506":{"position":[[3745,15]]},"510":{"position":[[5133,15],[7246,15]]},"514":{"position":[[4604,15],[6785,15]]},"530":{"position":[[4129,15],[7879,15],[11217,15]]},"532":{"position":[[5175,15],[8615,15],[10013,15],[12241,15],[14339,15]]},"534":{"position":[[3817,15],[7611,15]]},"536":{"position":[[7074,15],[10707,15],[13568,15]]},"538":{"position":[[7397,15],[9963,15]]},"542":{"position":[[12964,15]]},"544":{"position":[[5102,15],[8371,15],[11636,15]]},"556":{"position":[[3406,15],[7573,15],[10929,15]]},"562":{"position":[[9214,15]]},"564":{"position":[[20688,15]]},"568":{"position":[[7574,15],[9919,15],[12295,15],[15067,15],[17486,15],[20238,15],[22640,15],[25706,15],[31717,15],[34082,15],[36447,15],[38852,15],[41110,15],[43735,15],[47088,15],[57825,15]]}}}],["onlin",{"_index":3119,"t":{"544":{"position":[[12347,7]]}}}],["onlinecourseform",{"_index":3105,"t":{"544":{"position":[[11420,16],[11437,16],[12449,16],[12539,16]]}}}],["onlinecourseform.coursenam",{"_index":3092,"t":{"544":{"position":[[10222,29]]}}}],["onlinecourseform.endd",{"_index":3102,"t":{"544":{"position":[[11018,26],[11863,24],[12014,24]]}}}],["onlinecourseform.startd",{"_index":3095,"t":{"544":{"position":[[10509,27],[10622,28],[11828,26],[11974,26]]}}}],["onmodalhiddenasync",{"_index":1707,"t":{"510":{"position":[[14781,20]]}}}],["onmodalhidepreventedasync",{"_index":1708,"t":{"510":{"position":[[14886,27]]}}}],["onmodalhidingasync",{"_index":1706,"t":{"510":{"position":[[14674,20]]}}}],["onmodalshowingasync",{"_index":1702,"t":{"510":{"position":[[14461,21]]}}}],["onmodalshownasync",{"_index":1705,"t":{"510":{"position":[[14570,19]]}}}],["onoffcanvashiddenasync",{"_index":1957,"t":{"514":{"position":[[21204,24]]}}}],["onoffcanvashidingasync",{"_index":1956,"t":{"514":{"position":[[21093,24]]}}}],["onoffcanvasshowingasync",{"_index":1954,"t":{"514":{"position":[[20871,25]]}}}],["onoffcanvasshownasync",{"_index":1955,"t":{"514":{"position":[[20984,23]]}}}],["onpagechangedasync(int",{"_index":1757,"t":{"512":{"position":[[3018,22]]}}}],["onparametersset",{"_index":2979,"t":{"542":{"position":[[13070,17]]},"562":{"position":[[9320,17]]},"564":{"position":[[20794,17]]}}}],["onrowclick",{"_index":520,"t":{"96":{"position":[[194,10]]},"568":{"position":[[3008,10]]}}}],["onrowclick(gridroweventargssave@department.nam",{"_index":3779,"t":{"568":{"position":[[54586,19]]}}}],["p>@itemaww",{"_index":830,"t":{"486":{"position":[[1767,6]]}}}],["p>lorem",{"_index":1792,"t":{"514":{"position":[[7572,8],[11813,8],[15954,8]]}}}],["p>morbi",{"_index":1897,"t":{"514":{"position":[[9055,8],[13296,8],[17437,8]]}}}],["p>pellentesqu",{"_index":1922,"t":{"514":{"position":[[10021,15],[14262,15],[18403,15]]}}}],["p>proin",{"_index":1863,"t":{"514":{"position":[[8282,8],[12523,8],[16664,8]]}}}],["p>some",{"_index":3398,"t":{"564":{"position":[[18576,7]]}}}],["p>thi",{"_index":1651,"t":{"510":{"position":[[8999,7],[10756,7]]}}}],["p>use",{"_index":1173,"t":{"500":{"position":[[2895,8],[3383,8],[3872,8],[4358,8],[4843,8]]}}}],["p>vestibulum",{"_index":1936,"t":{"514":{"position":[[10847,13],[15088,13],[19229,13]]}}}],["pa",{"_index":2711,"t":{"538":{"position":[[3556,5],[5427,5],[8052,5]]}}}],["packag",{"_index":3128,"t":{"546":{"position":[[221,8],[297,7],[322,7],[3431,7]]},"548":{"position":[[211,8],[287,7],[312,7],[3605,7]]},"550":{"position":[[211,8],[287,7],[312,7],[3102,7]]}}}],["pad",{"_index":786,"t":{"486":{"position":[[443,7]]},"504":{"position":[[3323,6]]},"542":{"position":[[1315,6]]},"564":{"position":[[18838,7]]}}}],["page",{"_index":109,"t":{"4":{"position":[[302,4]]},"6":{"position":[[212,4]]},"8":{"position":[[754,4]]},"10":{"position":[[297,4]]},"12":{"position":[[380,4]]},"14":{"position":[[403,4]]},"16":{"position":[[379,4]]},"18":{"position":[[320,4]]},"20":{"position":[[280,4]]},"22":{"position":[[399,4]]},"24":{"position":[[282,4]]},"26":{"position":[[331,4]]},"28":{"position":[[317,4]]},"30":{"position":[[661,4]]},"32":{"position":[[444,4]]},"34":{"position":[[785,4]]},"36":{"position":[[284,4]]},"38":{"position":[[602,4]]},"40":{"position":[[216,4],[229,4],[476,6],[493,4]]},"42":{"position":[[621,4]]},"44":{"position":[[725,4]]},"46":{"position":[[548,4],[873,4]]},"48":{"position":[[907,4]]},"50":{"position":[[599,4]]},"52":{"position":[[510,4]]},"54":{"position":[[465,4]]},"56":{"position":[[807,4]]},"58":{"position":[[582,4]]},"60":{"position":[[862,4]]},"62":{"position":[[483,4]]},"64":{"position":[[424,4]]},"66":{"position":[[456,4]]},"68":{"position":[[1110,4]]},"70":{"position":[[1183,4]]},"72":{"position":[[1164,4]]},"74":{"position":[[678,4]]},"76":{"position":[[440,4]]},"78":{"position":[[702,4]]},"80":{"position":[[292,6],[312,4],[322,4],[1950,4]]},"82":{"position":[[537,4]]},"84":{"position":[[682,4]]},"86":{"position":[[507,4]]},"88":{"position":[[898,4]]},"90":{"position":[[388,4]]},"92":{"position":[[467,4]]},"94":{"position":[[527,4]]},"96":{"position":[[305,4],[1102,4]]},"98":{"position":[[421,4]]},"100":{"position":[[1574,4]]},"102":{"position":[[583,4]]},"104":{"position":[[1040,4]]},"106":{"position":[[614,4]]},"110":{"position":[[703,4]]},"116":{"position":[[1621,6]]},"150":{"position":[[34,7],[302,6]]},"152":{"position":[[793,6]]},"154":{"position":[[305,6]]},"156":{"position":[[303,6]]},"214":{"position":[[1674,6]]},"246":{"position":[[793,6]]},"420":{"position":[[290,6]]},"486":{"position":[[26,4],[3595,4],[3925,5],[3941,4]]},"492":{"position":[[30,4],[2336,4]]},"494":{"position":[[29,4],[18996,4]]},"496":{"position":[[25,4],[7284,4]]},"498":{"position":[[26,4],[952,4]]},"500":{"position":[[27,4],[5283,4]]},"502":{"position":[[27,4],[9829,4]]},"504":{"position":[[24,4],[13317,4]]},"506":{"position":[[34,4],[1149,5],[5856,4],[8200,4]]},"508":{"position":[[28,4],[5232,4]]},"510":{"position":[[25,4],[3312,5],[8477,4],[15016,4]]},"512":{"position":[[30,4],[158,6],[244,4],[390,4],[1166,5],[1272,4],[2925,4],[3149,4]]},"514":{"position":[[29,4],[708,6],[21323,4]]},"516":{"position":[[27,4],[79,4],[216,4],[236,5],[1004,4],[3689,4]]},"518":{"position":[[32,4],[122,5],[3421,4]]},"520":{"position":[[28,4],[8168,4]]},"522":{"position":[[24,4],[9200,4]]},"524":{"position":[[28,4],[123,6],[1871,4]]},"526":{"position":[[26,4],[564,4],[11431,4],[12131,4]]},"528":{"position":[[22,4],[4320,4]]},"530":{"position":[[42,4],[14619,4]]},"532":{"position":[[37,4],[16303,4]]},"534":{"position":[[37,4],[10845,4]]},"536":{"position":[[38,4],[16590,4]]},"538":{"position":[[28,4],[13855,4]]},"540":{"position":[[21,4],[2902,4]]},"542":{"position":[[29,4],[14931,4]]},"544":{"position":[[25,4],[12840,4]]},"546":{"position":[[43,4],[3393,4]]},"548":{"position":[[38,4],[3541,4]]},"550":{"position":[[36,4],[3036,4]]},"552":{"position":[[29,4],[470,4],[621,6],[1865,4]]},"554":{"position":[[34,4],[475,4],[626,6],[1870,4]]},"556":{"position":[[25,4],[12074,4]]},"560":{"position":[[31,4],[5002,4],[5830,4]]},"562":{"position":[[27,4],[11178,4]]},"564":{"position":[[28,4],[25609,4]]},"566":{"position":[[27,4],[6505,4],[6595,6],[8855,6],[11289,6],[13704,6],[16075,6],[18541,6],[24133,4]]},"568":{"position":[[24,4],[167,6],[365,7],[1824,4],[1906,4],[2008,4],[2095,4],[3714,4],[6508,4],[6552,5],[11437,7],[11449,7],[11621,4],[16470,7],[28136,6],[49988,4],[50001,4],[51855,6],[61193,6],[64588,6],[67965,6],[71103,6],[74078,6],[77375,6],[79213,4],[80466,6],[82269,4],[83232,6],[88461,6],[96691,6],[98882,6],[101320,6],[105311,6],[109191,6],[121256,4],[121475,6],[121525,7],[121648,6],[122063,4],[122073,4]]}}}],["page'",{"_index":891,"t":{"492":{"position":[[113,6]]}}}],["page/docu",{"_index":881,"t":{"486":{"position":[[3765,14]]}}}],["pagechang",{"_index":1725,"t":{"512":{"position":[[1222,11]]}}}],["pagechanged=\"onpagechangedasync",{"_index":1753,"t":{"512":{"position":[[2875,32]]}}}],["pagenumb",{"_index":3579,"t":{"568":{"position":[[6493,10],[52167,10]]}}}],["pages",{"_index":3530,"t":{"568":{"position":[[1873,8],[6527,8],[11473,8],[11572,8],[52182,8],[80182,8],[82236,8]]}}}],["pages/_host.cshtml",{"_index":3172,"t":{"548":{"position":[[429,19],[1006,19],[1355,19],[1454,18],[2867,18]]}}}],["pages/_layout.cshtml",{"_index":3173,"t":{"548":{"position":[[1262,21],[1316,20]]}}}],["pagesize=\"10",{"_index":3848,"t":{"568":{"position":[[82425,13],[103003,13]]}}}],["pagesize=\"20",{"_index":3638,"t":{"568":{"position":[[11534,13]]}}}],["pagesize=\"5",{"_index":3639,"t":{"568":{"position":[[11773,12],[16648,12],[28431,12],[46530,12],[60139,12],[63489,12],[66696,12]]}}}],["pagesize=\"8",{"_index":3760,"t":{"568":{"position":[[50526,12]]}}}],["pagesize=\"@pages",{"_index":3840,"t":{"568":{"position":[[79359,20]]}}}],["pagesizeselectoritem",{"_index":3531,"t":{"568":{"position":[[1935,21]]}}}],["pagesizeselectoritems=\"@(new",{"_index":3850,"t":{"568":{"position":[[82470,28],[103048,28]]}}}],["pagesizeselectorvis",{"_index":3532,"t":{"568":{"position":[[2040,23]]}}}],["pagesizeselectorvisible=\"tru",{"_index":3849,"t":{"568":{"position":[[82439,30],[103017,30]]}}}],["pagin",{"_index":179,"t":{"16":{"position":[[244,10],[297,10],[358,10]]},"30":{"position":[[483,10]]},"130":{"position":[[1384,10]]},"212":{"position":[[1437,10]]},"328":{"position":[[1538,10]]},"346":{"position":[[223,10]]},"358":{"position":[[1612,10]]},"360":{"position":[[21,12],[228,10]]},"396":{"position":[[224,10]]},"512":{"position":[[11,10],[42,10],[74,10],[311,10],[1128,10],[1306,11],[1366,11],[1463,10],[1569,11],[1599,11],[1630,11],[1661,11],[1692,11],[1759,11],[2034,11],[2086,11],[2138,11],[2237,11],[2334,11],[2413,11],[2464,11],[2569,11],[2620,11],[2700,11],[2809,11],[3227,10]]},"514":{"position":[[21348,10]]},"518":{"position":[[3435,10]]},"568":{"position":[[2205,10],[46142,10],[46188,10],[102637,10],[121783,10]]}}}],["pagina",{"_index":3869,"t":{"568":{"position":[[103185,7]]}}}],["pagination1",{"_index":697,"t":{"122":{"position":[[1527,11]]}}}],["paginationalign",{"_index":3751,"t":{"568":{"position":[[46213,19],[46268,19]]}}}],["paginationalignment=\"alignment.end",{"_index":3752,"t":{"568":{"position":[[46543,35]]}}}],["paginationitemstextformat",{"_index":3533,"t":{"568":{"position":[[2129,25]]}}}],["paginationitemstextformat=\"{0",{"_index":3865,"t":{"568":{"position":[[103097,30]]}}}],["paginations",{"_index":1722,"t":{"512":{"position":[[1096,14]]}}}],["paging1",{"_index":613,"t":{"122":{"position":[[261,7]]}}}],["palett",{"_index":2356,"t":{"530":{"position":[[2948,7],[3020,8],[3081,7],[3141,8],[3156,8]]},"532":{"position":[[3580,7],[3652,8],[3713,7],[3773,8],[3788,8]]},"534":{"position":[[2666,7],[2738,8],[2799,7],[2859,8],[2874,8]]},"536":{"position":[[5545,7],[5617,8],[5678,7],[5738,8],[5753,8]]}}}],["pane",{"_index":2090,"t":{"522":{"position":[[468,5],[536,5],[617,5],[697,5],[1894,4]]}}}],["panel",{"_index":1534,"t":{"508":{"position":[[2061,5],[4228,5]]}}}],["papa",{"_index":3691,"t":{"568":{"position":[[26295,7],[44324,7]]}}}],["paragraph",{"_index":825,"t":{"486":{"position":[[1659,10]]}}}],["paramet",{"_index":122,"t":{"8":{"position":[[117,9],[526,10]]},"12":{"position":[[139,10],[209,9]]},"34":{"position":[[508,9]]},"60":{"position":[[381,11]]},"64":{"position":[[194,9]]},"68":{"position":[[537,11]]},"74":{"position":[[282,9]]},"80":{"position":[[415,9],[448,9],[562,9],[595,9],[705,9],[738,9],[850,9],[883,9],[989,9],[1022,9],[1132,9],[1165,9]]},"88":{"position":[[352,9]]},"92":{"position":[[189,9],[222,9]]},"124":{"position":[[182,10]]},"130":{"position":[[1544,10],[1921,9]]},"212":{"position":[[1597,10],[1974,9]]},"390":{"position":[[161,9]]},"392":{"position":[[183,10]]},"486":{"position":[[183,11],[3976,10]]},"492":{"position":[[197,11],[2369,10]]},"494":{"position":[[144,11],[1320,11],[5557,9],[7431,9],[9231,9],[19043,10],[19103,10]]},"496":{"position":[[114,11],[2366,10],[2426,9],[3988,10],[7321,10]]},"500":{"position":[[143,11],[5315,10]]},"502":{"position":[[168,11],[3997,9],[4196,9],[6600,10],[9867,10]]},"504":{"position":[[350,11],[367,11],[687,11],[851,11],[1014,11],[1178,11],[1407,11],[1970,11],[2202,11],[2365,11],[7242,10],[13357,10],[13373,10],[13393,10],[13415,10],[13436,10],[13458,10],[13478,10],[13502,10],[13522,10],[13543,10]]},"506":{"position":[[2270,11],[2722,10],[2919,12],[3673,11]]},"508":{"position":[[148,11],[2534,9],[5273,10]]},"510":{"position":[[174,11],[1662,10],[4070,11],[4417,10],[4572,11],[4584,12],[5061,11],[5402,9],[5651,9],[6106,10],[6363,11],[6375,12],[7095,11],[7143,11],[15050,10]]},"512":{"position":[[165,11],[3191,10]]},"514":{"position":[[175,11],[3500,11],[3873,10],[4032,11],[4044,12],[4532,11],[4857,9],[5106,9],[5623,10],[5884,11],[5896,12],[6634,11],[6682,11],[11646,10],[21359,10]]},"516":{"position":[[396,11],[3730,10]]},"518":{"position":[[193,11],[431,11],[3480,10],[3503,10]]},"520":{"position":[[210,11],[479,11],[1949,9],[3192,10],[3561,9],[8212,10],[8235,10]]},"522":{"position":[[122,11],[707,11],[3776,10],[4802,9],[9239,10],[9267,10]]},"524":{"position":[[130,11],[1907,10]]},"526":{"position":[[590,11],[3294,10],[4636,9],[8074,9],[9972,10],[11648,10],[12171,10]]},"528":{"position":[[380,11],[770,9],[4381,10]]},"530":{"position":[[333,11],[14659,10]]},"532":{"position":[[237,11],[16346,10]]},"534":{"position":[[178,11],[10889,10]]},"536":{"position":[[382,11],[16634,10]]},"538":{"position":[[231,11],[10952,9],[12485,9],[13895,10]]},"540":{"position":[[155,11],[1045,9],[1724,9],[2270,10],[2945,10]]},"542":{"position":[[185,11],[4506,9],[4982,10],[7410,10],[8287,9],[9064,9],[9503,9],[10242,9],[14975,10]]},"544":{"position":[[180,11],[306,11],[3077,10],[5452,9],[6225,9],[12887,10]]},"556":{"position":[[184,11],[310,11],[2309,10],[3681,9],[4426,9],[12110,10]]},"560":{"position":[[5255,10]]},"562":{"position":[[177,10],[193,11],[3120,10],[4210,9],[4511,9],[4773,9],[5494,9],[5905,9],[6638,9],[11215,10]]},"564":{"position":[[244,11],[949,11],[1327,11],[1697,11],[1952,11],[2129,11],[14543,9],[15045,9],[15925,9],[16563,10],[16649,9],[22140,10],[25657,10],[25689,10],[25721,10],[25745,10],[25771,10],[25795,10]]},"566":{"position":[[212,11],[11245,9],[13616,9],[16027,9],[24166,10]]},"568":{"position":[[190,11],[2819,10],[3770,11],[4142,10],[5478,10],[6699,10],[6750,9],[6785,9],[11482,10],[11548,10],[11581,9],[14123,10],[14172,9],[19298,10],[21661,9],[21750,9],[21851,9],[24074,9],[24171,9],[28209,9],[28264,10],[30424,9],[30505,9],[33151,9],[33254,9],[35513,9],[37865,9],[42408,9],[42463,9],[46233,9],[49024,9],[49830,9],[54317,9],[54380,9],[56653,9],[56716,9],[75798,11],[107119,9],[107252,10],[121295,10],[121351,10],[121848,9],[121883,9]]}}}],["parameter'",{"_index":1467,"t":{"506":{"position":[[2329,11],[2369,11]]},"510":{"position":[[4129,11],[4169,11]]},"514":{"position":[[3559,11],[3599,11]]}}}],["parameters.add(\"employeeid",{"_index":1470,"t":{"506":{"position":[[2769,28]]},"510":{"position":[[4464,28],[6153,28]]},"514":{"position":[[3920,28],[5670,28]]}}}],["parameters.add(\"onclickcallback",{"_index":1623,"t":{"510":{"position":[[6188,33]]},"514":{"position":[[5705,33]]}}}],["parametr",{"_index":1440,"t":{"506":{"position":[[542,10]]}}}],["paramt",{"_index":3740,"t":{"568":{"position":[[30748,9]]}}}],["parent",{"_index":935,"t":{"494":{"position":[[400,6],[5658,6]]},"496":{"position":[[726,6]]},"502":{"position":[[393,7]]},"504":{"position":[[2762,6]]},"508":{"position":[[370,6],[406,7]]},"510":{"position":[[5441,6],[5585,6],[5803,6],[7026,6]]},"514":{"position":[[4896,6],[5040,6],[5258,6],[6554,6]]},"518":{"position":[[2133,6]]},"564":{"position":[[16517,7]]},"566":{"position":[[1383,6],[2627,6]]}}}],["parenthes",{"_index":2924,"t":{"542":{"position":[[5332,11],[5444,11],[15153,11]]}}}],["parentid",{"_index":3450,"t":{"566":{"position":[[1344,8],[2607,8]]}}}],["parentid=\"2",{"_index":3458,"t":{"566":{"position":[[3463,14],[5349,14],[7631,14],[9964,14],[12417,14],[14827,14],[17241,14],[19747,14],[23042,14]]}}}],["parentid=\"4",{"_index":3460,"t":{"566":{"position":[[3666,14],[3782,14],[3898,14],[5583,14],[5699,14],[5815,14],[7865,14],[7981,14],[8097,14],[10198,14],[10314,14],[10430,14],[12651,14],[12767,14],[12883,14],[15061,14],[15177,14],[15293,14],[17475,14],[17591,14],[17707,14],[19981,14],[20097,14],[20213,14],[23245,13],[23375,13],[23505,13]]}}}],["parentid=\"8",{"_index":3463,"t":{"566":{"position":[[4096,14],[4223,14],[4343,14],[4448,14],[6043,14],[6170,14],[6290,14],[6395,14],[8325,14],[8452,14],[8572,14],[8677,14],[10658,14],[10785,14],[10905,14],[11010,14],[13111,14],[13238,14],[13358,14],[13463,14],[15521,14],[15648,14],[15768,14],[15873,14],[17935,14],[18062,14],[18182,14],[18287,14],[20441,14],[20568,14],[20688,14],[20793,14],[23717,14],[23844,14],[23964,14],[24069,14]]}}}],["part",{"_index":1103,"t":{"496":{"position":[[3300,4]]},"568":{"position":[[50095,4]]}}}],["particip",{"_index":1191,"t":{"502":{"position":[[1139,12]]},"504":{"position":[[1902,12]]},"564":{"position":[[1251,12],[1629,12],[2583,12]]}}}],["parts—with",{"_index":1392,"t":{"504":{"position":[[7213,10]]}}}],["pass",{"_index":359,"t":{"60":{"position":[[393,4],[438,4]]},"68":{"position":[[549,4],[594,4]]},"96":{"position":[[652,6]]},"506":{"position":[[2282,4]]},"510":{"position":[[4082,4],[5304,4],[5388,6],[5602,6],[15140,4]]},"514":{"position":[[3512,4],[4775,4],[4843,6],[5057,6],[21457,4]]},"516":{"position":[[2252,7]]},"530":{"position":[[11662,4]]},"532":{"position":[[16047,4]]},"534":{"position":[[8036,4]]},"536":{"position":[[16332,4]]},"568":{"position":[[5806,6]]}}}],["pellentesqu",{"_index":1841,"t":{"514":{"position":[[8022,12],[8466,12],[8776,12],[9960,13],[10433,12],[12263,12],[12707,12],[13017,12],[14201,13],[14674,12],[16404,12],[16848,12],[17158,12],[18342,13],[18815,12]]}}}],["per",{"_index":2246,"t":{"526":{"position":[[11662,3]]},"530":{"position":[[1491,3]]},"532":{"position":[[1744,3]]},"534":{"position":[[1326,3]]},"536":{"position":[[1627,3]]},"568":{"position":[[1820,3],[103181,3]]}}}],["percent",{"_index":2498,"t":{"532":{"position":[[1086,7],[1457,7]]}}}],["percept",{"_index":2024,"t":{"518":{"position":[[2605,10]]}}}],["perform",{"_index":272,"t":{"40":{"position":[[253,11]]},"498":{"position":[[229,11]]},"510":{"position":[[2596,9]]}}}],["persist",{"_index":3756,"t":{"568":{"position":[[50198,7],[50249,10]]}}}],["ph",{"_index":2899,"t":{"542":{"position":[[3607,3]]}}}],["phtooltip",{"_index":2145,"t":{"524":{"position":[[881,43]]}}}],["placement=\"tooltipplacement.left\">tooltip",{"_index":2139,"t":{"524":{"position":[[612,41]]}}}],["placement=\"tooltipplacement.right\">tooltip",{"_index":2143,"t":{"524":{"position":[[777,42]]}}}],["placement=\"tooltipplacement.top\">tooltip",{"_index":2161,"t":{"524":{"position":[[1539,40]]}}}],["placerat",{"_index":1808,"t":{"514":{"position":[[7713,8],[9507,9],[9678,8],[11954,8],[13748,9],[13919,8],[16095,8],[17889,9],[18060,8]]}}}],["placerat.primarysubmitsecondaryset",{"_index":2078,"t":{"520":{"position":[[5095,35]]}}}],["setcolor(progresscolor.dark)\">set",{"_index":2081,"t":{"520":{"position":[[5536,33]]}}}],["setcolor(progresscolor.info)\">set",{"_index":2076,"t":{"520":{"position":[[4805,33]]}}}],["setcolor(progresscolor.primary)\">set",{"_index":2079,"t":{"520":{"position":[[5241,36]]}}}],["setcolor(progresscolor.secondary)\">set",{"_index":2080,"t":{"520":{"position":[[5390,38]]}}}],["setcolor(progresscolor.success)\">set",{"_index":2074,"t":{"520":{"position":[[4661,36]]}}}],["setcolor(progresscolor.warning)\">set",{"_index":2077,"t":{"520":{"position":[[4949,36]]}}}],["seth",{"_index":2732,"t":{"538":{"position":[[3732,7],[5603,7],[8228,7]]}}}],["setlabel",{"_index":2038,"t":{"520":{"position":[[942,8],[1977,13]]}}}],["settings.pagenumb",{"_index":3767,"t":{"568":{"position":[[52205,21]]}}}],["settings.pages",{"_index":3768,"t":{"568":{"position":[[52232,19]]}}}],["settingsjson",{"_index":3773,"t":{"568":{"position":[[52432,12]]}}}],["settingsprovid",{"_index":3537,"t":{"568":{"position":[[2469,16]]}}}],["settingsprovider=\"gridsettingsprovid",{"_index":3762,"t":{"568":{"position":[[50640,40]]}}}],["setup",{"_index":426,"t":{"72":{"position":[[657,5],[675,5],[709,5],[925,5],[973,5]]},"528":{"position":[[811,6],[1383,6],[3824,6]]},"552":{"position":[[41,5],[268,6],[352,6],[431,6]]},"554":{"position":[[46,5],[273,6],[357,6],[436,6]]},"560":{"position":[[4951,6],[5991,5]]}}}],["setwidth",{"_index":2039,"t":{"520":{"position":[[979,8]]}}}],["sever",{"_index":974,"t":{"494":{"position":[[11099,7]]},"502":{"position":[[1900,7]]},"522":{"position":[[5665,7]]},"544":{"position":[[1750,7]]}}}],["sfh",{"_index":2696,"t":{"538":{"position":[[3447,4],[5318,4],[7943,4]]}}}],["shallow",{"_index":3794,"t":{"568":{"position":[[58762,7],[59499,7]]}}}],["shape",{"_index":2611,"t":{"536":{"position":[[3406,6]]}}}],["share",{"_index":173,"t":{"14":{"position":[[297,5]]}}}],["shared/mainlayout.razor.css",{"_index":3179,"t":{"552":{"position":[[542,27]]},"554":{"position":[[547,27]]}}}],["sharna",{"_index":3645,"t":{"568":{"position":[[13393,9],[18584,9],[48186,9],[53831,9],[62635,9],[65856,9],[69233,9],[81734,9],[84500,9],[106579,9]]}}}],["shop",{"_index":1759,"t":{"514":{"position":[[107,8]]}}}],["shortcut",{"_index":2674,"t":{"538":{"position":[[2160,9]]}}}],["show",{"_index":132,"t":{"8":{"position":[[297,7],[441,7]]},"74":{"position":[[189,4]]},"104":{"position":[[252,5]]},"494":{"position":[[594,4],[657,4],[721,4],[789,4],[925,4],[2122,7],[2673,7],[3223,7],[3986,7],[4611,7],[5234,7],[5976,7],[6527,7],[7077,7],[7780,7],[8347,7],[8897,7],[9612,7],[10163,7],[10713,7],[11600,7],[12163,7],[12725,7],[13283,7],[13831,7],[14391,7],[16545,7],[17118,7],[17690,7],[18228,8]]},"496":{"position":[[80,5]]},"500":{"position":[[552,4],[774,4],[998,4],[1216,4],[1432,4],[1704,4],[1946,4],[2190,4],[2428,4],[2664,4]]},"502":{"position":[[693,5],[1746,5],[7896,4],[10059,4]]},"504":{"position":[[11813,4],[13128,4]]},"506":{"position":[[313,5],[460,5],[622,5],[1092,5],[2435,4],[2990,4]]},"508":{"position":[[541,5],[776,4],[1218,4],[1593,4]]},"510":{"position":[[1105,5],[1337,5],[2082,4],[3229,4],[8675,4],[10432,4],[14534,10],[14641,7]]},"514":{"position":[[962,5],[1359,5],[2002,4],[2923,8],[20948,10]]},"516":{"position":[[740,5],[851,5],[1170,6],[2289,9]]},"522":{"position":[[448,4],[516,4],[597,4],[677,4],[7687,7]]},"526":{"position":[[934,4],[9750,5],[10033,5]]},"530":{"position":[[135,5]]},"532":{"position":[[173,4]]},"534":{"position":[[123,5]]},"536":{"position":[[181,4],[4127,4],[14298,4],[14905,4],[15512,4]]},"540":{"position":[[85,4]]},"542":{"position":[[108,4],[2066,4],[15022,4]]},"560":{"position":[[95,4],[750,5]]},"564":{"position":[[3006,5],[3552,4]]},"566":{"position":[[93,4],[8749,4],[8819,4],[11121,4],[11258,4],[15984,4],[24308,4],[24324,4],[24353,4]]},"568":{"position":[[1248,5],[49926,5]]}}}],["show(spinnercolor",{"_index":1961,"t":{"516":{"position":[[682,17],[765,17]]}}}],["show/hid",{"_index":1281,"t":{"502":{"position":[[7460,9],[10033,9]]}}}],["showaccordionitembyindexasync",{"_index":944,"t":{"494":{"position":[[759,29],[11227,29]]}}}],["showaccordionitembynameasync",{"_index":943,"t":{"494":{"position":[[692,28],[11193,29]]}}}],["showasync",{"_index":1520,"t":{"508":{"position":[[531,9],[1245,10]]},"510":{"position":[[1577,9]]},"514":{"position":[[1349,9]]},"560":{"position":[[5168,14],[5206,9]]},"564":{"position":[[2996,9],[24468,11]]}}}],["showasync(modalopt",{"_index":3271,"t":{"560":{"position":[[255,21]]}}}],["showasync(str",{"_index":1433,"t":{"506":{"position":[[211,16],[341,16]]}}}],["showasync(str",{"_index":1438,"t":{"506":{"position":[[488,19]]},"510":{"position":[[1608,19]]}}}],["showclosebutton",{"_index":1579,"t":{"510":{"position":[[1288,15]]},"514":{"position":[[913,15]]},"526":{"position":[[913,15]]}}}],["showconfirmationasync",{"_index":1459,"t":{"506":{"position":[[1719,23]]}}}],["showconfirmationasync(dialogs",{"_index":1505,"t":{"506":{"position":[[5401,32]]}}}],["showconfirmationasync(dialogsize.extralarg",{"_index":1504,"t":{"506":{"position":[[5260,46]]}}}],["showconfirmationasync(dialogsize.larg",{"_index":1503,"t":{"506":{"position":[[5135,41]]}}}],["showconfirmationasync(dialogsize.smal",{"_index":1502,"t":{"506":{"position":[[5010,41]]}}}],["showcontentasync",{"_index":1537,"t":{"508":{"position":[[2237,18],[3206,18],[4523,18]]}}}],["showcurrencysymbol=\"tru",{"_index":2943,"t":{"542":{"position":[[7917,25],[8487,25],[8746,25],[9223,25],[11591,25],[11988,25],[12434,25]]}}}],["showdialogasync",{"_index":1513,"t":{"506":{"position":[[6094,17],[6586,17],[7210,17],[7851,17]]}}}],["showdtmessag",{"_index":1617,"t":{"510":{"position":[[5471,13],[5630,13],[5827,14],[6273,16]]},"514":{"position":[[4926,13],[5085,13],[5282,14],[5790,16]]}}}],["showdtmessage(mouseeventarg",{"_index":1626,"t":{"510":{"position":[[6403,28]]},"514":{"position":[[5924,28]]}}}],["showemployeecompon",{"_index":1778,"t":{"514":{"position":[[3843,23],[5593,23]]}}}],["showfaqsaccordionitemasync",{"_index":1007,"t":{"494":{"position":[[15801,28]]}}}],["showfaqsasync",{"_index":2125,"t":{"522":{"position":[[7519,15]]}}}],["showfirstaccordionitemasync",{"_index":939,"t":{"494":{"position":[[566,27],[11136,28],[15380,29]]}}}],["showfirsttabasync",{"_index":2088,"t":{"522":{"position":[[404,17],[5702,18],[7202,19]]}}}],["showfooterbutton",{"_index":3277,"t":{"560":{"position":[[726,16],[4854,16]]}}}],["showhorizontalbarchartasync",{"_index":2535,"t":{"532":{"position":[[6962,29]]}}}],["showhorizontalbarchartasync()\">horizont",{"_index":2518,"t":{"532":{"position":[[4545,41]]}}}],["showhorizontallinechartasync",{"_index":2637,"t":{"536":{"position":[[6584,32],[8803,30]]}}}],["showlastaccordionitemasync",{"_index":941,"t":{"494":{"position":[[630,26],[11165,27],[15906,28]]}}}],["showlasttabasync",{"_index":2091,"t":{"522":{"position":[[474,16],[5721,17],[7595,18]]}}}],["showlin",{"_index":2624,"t":{"536":{"position":[[3755,8]]}}}],["showload",{"_index":1203,"t":{"502":{"position":[[1734,11],[7491,13]]}}}],["showloadingdataasync",{"_index":1975,"t":{"516":{"position":[[1836,22]]}}}],["showmessage(toasttyp",{"_index":2202,"t":{"526":{"position":[[2753,21],[4297,21],[5735,21],[7325,21],[11005,21]]}}}],["showmessage(toasttype.danger)\">dang",{"_index":2198,"t":{"526":{"position":[[2320,37],[3763,37],[5302,37],[6892,37],[10572,37]]}}}],["showmessage(toasttype.dark)\">dark",{"_index":2201,"t":{"526":{"position":[[2627,33],[4171,33],[5609,33],[7199,33],[10879,33]]}}}],["showmessage(toasttype.info)\">info",{"_index":2200,"t":{"526":{"position":[[2529,33],[3972,33],[5511,33],[7101,33],[10781,33]]}}}],["showmessage(toasttype.light)\">light",{"_index":2211,"t":{"526":{"position":[[4071,35]]}}}],["showmessage(toasttype.primary)\">primari",{"_index":2194,"t":{"526":{"position":[[1994,39],[3437,39],[4976,39],[6566,39],[10246,39]]}}}],["showmessage(toasttype.secondary)\">secondari",{"_index":2196,"t":{"526":{"position":[[2103,43],[3546,43],[5085,43],[6675,43],[10355,43]]}}}],["showmessage(toasttype.success)\">success",{"_index":2197,"t":{"526":{"position":[[2214,39],[3657,39],[5196,39],[6786,39],[10466,39]]}}}],["showmessage(toasttype.warning)\">warn",{"_index":2199,"t":{"526":{"position":[[2425,39],[3868,39],[5407,39],[6997,39],[10677,39]]}}}],["showmod",{"_index":3296,"t":{"560":{"position":[[4308,11],[4741,11]]}}}],["showmodal(modals",{"_index":3294,"t":{"560":{"position":[[3892,19]]}}}],["showmodal(modalsize.extralarge)\">show",{"_index":3292,"t":{"560":{"position":[[3740,37]]}}}],["showmodal(modalsize.large)\">show",{"_index":3291,"t":{"560":{"position":[[3635,32]]}}}],["showmodal(modalsize.regular)\">show",{"_index":3288,"t":{"560":{"position":[[3417,34]]}}}],["showmodal(modalsize.small)\">show",{"_index":3290,"t":{"560":{"position":[[3529,32]]}}}],["showmodal(modaltyp",{"_index":3286,"t":{"560":{"position":[[1933,19],[3116,19]]}}}],["showmodal(modaltype.danger)\">show",{"_index":3281,"t":{"560":{"position":[[1373,33],[2556,33]]}}}],["showmodal(modaltype.dark)\">show",{"_index":3285,"t":{"560":{"position":[[1793,31],[2976,31]]}}}],["showmodal(modaltype.info)\">show",{"_index":3283,"t":{"560":{"position":[[1588,31],[2771,31]]}}}],["showmodal(modaltype.light)\">show",{"_index":3284,"t":{"560":{"position":[[1690,32],[2873,32]]}}}],["showmodal(modaltype.primary)\">show",{"_index":3278,"t":{"560":{"position":[[1038,34],[2221,34]]}}}],["showmodal(modaltype.secondary)\">show",{"_index":3279,"t":{"560":{"position":[[1150,36],[2333,36]]}}}],["showmodal(modaltype.success)\">show",{"_index":3280,"t":{"560":{"position":[[1264,34],[2447,34]]}}}],["showmodal(modaltype.warning)\">show",{"_index":3282,"t":{"560":{"position":[[1481,34],[2664,34]]}}}],["shown",{"_index":134,"t":{"8":{"position":[[318,5],[462,5]]},"494":{"position":[[1953,5],[3598,5],[3817,5],[5807,5],[7611,5],[9443,5],[11260,5],[11431,5],[16376,5]]},"504":{"position":[[5188,5]]},"508":{"position":[[666,5],[3094,5]]},"510":{"position":[[2510,6]]},"514":{"position":[[1456,5],[2607,6],[2740,5],[2816,5],[21059,8]]},"516":{"position":[[1012,5],[1252,5],[2371,5]]},"522":{"position":[[2770,5],[5787,5],[7807,5],[7930,5]]},"526":{"position":[[11439,5],[11741,5]]},"560":{"position":[[5010,5],[5193,5]]}}}],["showoffcanvasasync",{"_index":1771,"t":{"514":{"position":[[2901,21],[3081,20]]}}}],["showproductsaccordionitemasync",{"_index":1005,"t":{"494":{"position":[[15687,32]]}}}],["showproductstabasync",{"_index":2123,"t":{"522":{"position":[[7431,22]]}}}],["showsaveconfirmationasync",{"_index":1491,"t":{"506":{"position":[[4218,27]]}}}],["showsavingdataasync",{"_index":1978,"t":{"516":{"position":[[2013,21]]}}}],["showsecondaccordionitemasync",{"_index":1001,"t":{"494":{"position":[[15480,30]]}}}],["showsecondtabasync",{"_index":2119,"t":{"522":{"position":[[7276,20]]}}}],["showspinnerasync(spinnercolor",{"_index":1989,"t":{"516":{"position":[[3500,29]]}}}],["showspinnerasync(spinnercolor.danger)\">dang",{"_index":1984,"t":{"516":{"position":[[2855,45]]}}}],["showspinnerasync(spinnercolor.dark)\">dark",{"_index":1988,"t":{"516":{"position":[[3351,41]]}}}],["showspinnerasync(spinnercolor.info)\">info",{"_index":1986,"t":{"516":{"position":[[3108,41]]}}}],["showspinnerasync(spinnercolor.light)\">light",{"_index":1987,"t":{"516":{"position":[[3229,43]]}}}],["showspinnerasync(spinnercolor.primary)\">primari",{"_index":1980,"t":{"516":{"position":[[2463,47]]}}}],["showspinnerasync(spinnercolor.secondary)\">secondari",{"_index":1982,"t":{"516":{"position":[[2594,51]]}}}],["showspinnerasync(spinnercolor.success)\">success",{"_index":1983,"t":{"516":{"position":[[2727,47]]}}}],["showspinnerasync(spinnercolor.warning)\">warn",{"_index":1985,"t":{"516":{"position":[[2982,47]]}}}],["showtabbyindexasync",{"_index":509,"t":{"88":{"position":[[455,19]]},"522":{"position":[[5739,20]]}}}],["showtabbyindexasync(int",{"_index":2093,"t":{"522":{"position":[[623,24]]}}}],["showtabbynameasync",{"_index":2101,"t":{"522":{"position":[[5764,19]]}}}],["showtabbynameasync(str",{"_index":2092,"t":{"522":{"position":[[542,26]]}}}],["showthirdaccordionitemasync",{"_index":1003,"t":{"494":{"position":[[15584,29]]}}}],["showthirdtabasync",{"_index":2121,"t":{"522":{"position":[[7354,19]]}}}],["showverticalbarchartasync",{"_index":2537,"t":{"532":{"position":[[7104,27]]}}}],["showverticalbarchartasync()\">vert",{"_index":2520,"t":{"532":{"position":[[4713,37]]}}}],["showverticallinechartasync",{"_index":2638,"t":{"536":{"position":[[6756,30],[8949,28]]}}}],["side",{"_index":218,"t":{"30":{"position":[[261,4],[277,5]]},"32":{"position":[[228,4],[255,4]]},"530":{"position":[[1495,5]]},"532":{"position":[[223,4],[231,5],[1748,5]]},"534":{"position":[[1330,5]]},"536":{"position":[[1631,5]]},"538":{"position":[[199,4],[215,4],[2565,4],[3148,4],[4152,4],[5019,4],[6023,4],[7644,4],[13957,4],[13974,4],[14014,4]]},"540":{"position":[[393,5],[2244,4]]},"564":{"position":[[16505,4]]},"568":{"position":[[146,4],[162,4],[5874,4],[6636,4],[8961,4],[11432,4],[14063,4],[16454,4],[28120,4],[28172,4],[50277,4],[51826,4],[61164,4],[64559,4],[67936,4],[71074,4],[74049,4],[77346,4],[80437,4],[83203,4],[88432,4],[96662,4],[98853,4],[101291,4],[105282,4],[109162,4],[121402,4],[121424,4],[121470,4],[121489,4],[121509,4],[121632,4]]}}}],["sidebar",{"_index":42,"t":{"2":{"position":[[734,8],[934,7]]},"54":{"position":[[119,7],[155,7],[189,7],[252,7],[348,7],[406,7]]},"96":{"position":[[587,7],[943,7]]},"104":{"position":[[177,8],[462,7],[480,7],[985,7]]},"106":{"position":[[346,7],[364,8]]},"114":{"position":[[1968,7],[2004,7],[2058,7]]},"126":{"position":[[226,8],[426,7]]},"134":{"position":[[778,8],[978,7]]},"192":{"position":[[2012,7],[2048,7],[2102,7]]},"200":{"position":[[232,8],[432,7]]},"204":{"position":[[787,8],[987,7]]},"210":{"position":[[2021,7],[2057,7],[2111,7]]},"224":{"position":[[226,8],[426,7]]},"228":{"position":[[234,8],[434,7]]},"250":{"position":[[225,8],[425,7]]},"260":{"position":[[227,8],[427,7],[601,7],[637,7],[691,7]]},"272":{"position":[[781,8],[981,7]]},"274":{"position":[[782,8],[982,7]]},"276":{"position":[[227,8],[427,7]]},"302":{"position":[[220,8],[420,7]]},"310":{"position":[[228,8],[428,7]]},"324":{"position":[[775,8],[975,7]]},"340":{"position":[[165,7],[201,7],[255,7]]},"342":{"position":[[495,8],[695,7]]},"344":{"position":[[163,7],[199,7],[253,7]]},"348":{"position":[[226,8],[426,7]]},"350":{"position":[[167,7],[203,7],[257,7]]},"366":{"position":[[20,9],[221,8],[421,7],[595,7],[631,7],[685,7]]},"382":{"position":[[221,8],[421,7]]},"434":{"position":[[222,8],[422,7]]},"446":{"position":[[163,7],[199,7],[253,7]]},"514":{"position":[[64,8],[2405,7]]},"520":{"position":[[8195,7]]},"522":{"position":[[9214,7]]},"546":{"position":[[3172,7]]},"548":{"position":[[3335,7]]},"550":{"position":[[2815,7]]},"552":{"position":[[628,8],[996,7],[1004,7]]},"554":{"position":[[633,8],[1001,7],[1009,7]]},"566":{"position":[[11,7],[39,7],[72,7],[772,7],[814,8],[1587,8],[1716,7],[1724,8],[2454,11],[2513,11],[2711,8],[2840,7],[2848,8],[3828,11],[3887,10],[4566,8],[4695,7],[4703,8],[5745,11],[5804,10],[6466,8],[6571,8],[6602,8],[6977,7],[6985,8],[8027,11],[8086,10],[8738,7],[8808,7],[8862,8],[9310,7],[9318,8],[10360,11],[10419,10],[11296,8],[11763,7],[11771,8],[12813,11],[12872,10],[13711,8],[14173,7],[14181,8],[15223,11],[15282,10],[16082,8],[16587,7],[16595,8],[17637,11],[17696,10],[18408,8],[18446,7],[18548,8],[18997,7],[19062,7],[19070,8],[20143,11],[20202,10],[20954,7],[20981,7],[21017,7],[21072,7],[21129,7],[21182,7],[21225,7],[21265,7],[21303,7],[21342,7],[21397,7],[21480,7],[21532,7],[21596,7],[21649,7],[21700,7],[21752,7],[21801,7],[21852,7],[21902,7],[21953,7],[22008,7],[22060,7],[22115,7],[22290,8],[22419,7],[22427,8],[23435,11],[23494,10],[24282,7],[24297,7],[24388,7]]}}}],["sidebar.togglesidebar",{"_index":3475,"t":{"566":{"position":[[11079,24],[13532,24],[15942,24],[18356,24]]}}}],["sidebar2",{"_index":702,"t":{"122":{"position":[[1588,8]]}}}],["sidebardataprovider(sidebardataproviderrequest",{"_index":3195,"t":{"552":{"position":[[1120,46]]},"554":{"position":[[1125,46]]},"566":{"position":[[1810,46],[2934,46],[4789,46],[7071,46],[9404,46],[11857,46],[14267,46],[16681,46],[19187,46],[22513,46]]}}}],["sidebardataproviderresult",{"_index":3442,"t":{"566":{"position":[[503,28]]}}}],["sidebaritem",{"_index":534,"t":{"96":{"position":[[605,11]]}}}],["sidemod",{"_index":294,"t":{"44":{"position":[[639,9]]},"116":{"position":[[633,9]]},"138":{"position":[[1274,9]]},"140":{"position":[[691,9]]},"144":{"position":[[683,9]]},"170":{"position":[[281,9]]},"172":{"position":[[684,9]]},"178":{"position":[[29,10],[281,9]]},"180":{"position":[[684,9]]},"198":{"position":[[677,9]]},"214":{"position":[[686,9]]},"428":{"position":[[271,9]]}}}],["sidemodal1",{"_index":620,"t":{"122":{"position":[[477,10]]}}}],["sign",{"_index":2927,"t":{"542":{"position":[[5373,5],[5485,5],[15194,4]]}}}],["signific",{"_index":213,"t":{"30":{"position":[[112,11]]},"116":{"position":[[2698,11]]},"214":{"position":[[2751,11]]},"328":{"position":[[1266,11]]},"406":{"position":[[156,11]]}}}],["similar",{"_index":1769,"t":{"514":{"position":[[2536,7],[2695,7]]},"530":{"position":[[196,7]]}}}],["similarli",{"_index":851,"t":{"486":{"position":[[2137,10]]}}}],["simmon",{"_index":3702,"t":{"568":{"position":[[27494,10],[45523,10]]}}}],["simpl",{"_index":801,"t":{"486":{"position":[[933,6],[1018,6],[1103,6],[1185,6],[1267,6],[1347,6],[1425,6],[1503,6],[2437,6],[2582,6],[2727,6]]},"506":{"position":[[4462,7],[5548,7],[7352,7]]},"526":{"position":[[3220,6],[4515,6]]}}}],["singl",{"_index":459,"t":{"80":{"position":[[206,6]]},"84":{"position":[[237,6]]},"100":{"position":[[240,6]]},"504":{"position":[[10613,7]]},"526":{"position":[[1772,6]]},"564":{"position":[[3740,6],[25848,6]]},"568":{"position":[[69803,7]]}}}],["sink",{"_index":1371,"t":{"504":{"position":[[5086,5],[13638,4]]}}}],["sit",{"_index":1795,"t":{"514":{"position":[[7593,3],[7672,3],[7910,3],[8684,3],[8846,3],[10234,3],[10298,3],[10451,3],[11834,3],[11913,3],[12151,3],[12925,3],[13087,3],[14475,3],[14539,3],[14692,3],[15975,3],[16054,3],[16292,3],[17066,3],[17228,3],[18616,3],[18680,3],[18833,3]]}}}],["site",{"_index":292,"t":{"44":{"position":[[248,4]]},"46":{"position":[[511,4]]},"48":{"position":[[396,4]]},"50":{"position":[[247,4]]},"52":{"position":[[226,4]]},"54":{"position":[[213,4]]},"58":{"position":[[337,4]]},"60":{"position":[[489,4]]},"510":{"position":[[103,4]]},"560":{"position":[[122,4]]}}}],["site.css",{"_index":3176,"t":{"548":{"position":[[3266,8]]}}}],["sixth",{"_index":992,"t":{"494":{"position":[[14182,5]]}}}],["size",{"_index":271,"t":{"40":{"position":[[234,5]]},"80":{"position":[[317,4],[327,4]]},"96":{"position":[[310,4]]},"100":{"position":[[283,6],[534,6]]},"106":{"position":[[302,6]]},"110":{"position":[[390,4]]},"496":{"position":[[704,4],[764,6]]},"502":{"position":[[148,6],[1017,4],[1022,4],[1039,4],[3434,6],[3532,6],[3900,4],[9931,5]]},"504":{"position":[[2123,4],[2165,5],[2518,4],[2560,5],[6290,7],[13661,6]]},"506":{"position":[[1293,4],[1327,4],[4660,6],[4702,6],[4715,5],[4839,4],[4877,4],[4921,4],[5434,5],[5483,4],[5490,4],[8376,5]]},"510":{"position":[[1230,4],[1245,4],[11322,6],[11356,6],[11369,5],[15287,5]]},"512":{"position":[[1091,4],[1139,5],[2205,7],[2327,6],[3284,6]]},"514":{"position":[[1003,4],[1022,4],[11595,6],[11610,4],[11641,4],[21527,5]]},"518":{"position":[[644,4],[694,5],[2058,7],[2070,4],[2169,4],[3548,6]]},"528":{"position":[[673,4],[709,5],[1025,6],[1257,4],[2799,4],[4407,5]]},"536":{"position":[[2912,4]]},"538":{"position":[[800,4]]},"560":{"position":[[789,4],[827,5],[3359,5],[4024,4],[5924,4]]},"564":{"position":[[791,4],[796,4],[818,4],[8909,7],[18378,6],[25881,6]]},"568":{"position":[[1911,4],[2013,4],[2100,4],[6540,4],[11626,4],[50006,5],[79218,5],[79912,4],[80028,4],[80145,4],[82227,5],[82247,5],[82274,4],[122068,4],[122078,4]]}}}],["size.non",{"_index":3326,"t":{"564":{"position":[[840,9]]}}}],["size=\"iconsize.x1",{"_index":2286,"t":{"528":{"position":[[1480,18]]}}}],["size=\"iconsize.x2",{"_index":2277,"t":{"528":{"position":[[1060,18],[1552,18],[1901,18],[1994,18],[2075,18],[2149,18],[2241,18],[2326,18],[2414,18],[2488,18],[2564,18],[2646,18],[2728,18]]}}}],["size=\"iconsize.x3",{"_index":2278,"t":{"528":{"position":[[1110,18],[1624,18]]}}}],["size=\"iconsize.x4",{"_index":2279,"t":{"528":{"position":[[1160,18],[1696,18]]}}}],["size=\"iconsize.x5",{"_index":2280,"t":{"528":{"position":[[1210,18],[1768,18]]}}}],["size=\"iconsize.x6",{"_index":2287,"t":{"528":{"position":[[1840,18]]}}}],["size=\"modalsize.extralarg",{"_index":1657,"t":{"510":{"position":[[11508,28]]}}}],["size=\"modalsize.larg",{"_index":1661,"t":{"510":{"position":[[11621,23]]}}}],["size=\"modalsize.smal",{"_index":1664,"t":{"510":{"position":[[11729,23]]}}}],["size=\"offcanvassize.larg",{"_index":1942,"t":{"514":{"position":[[15911,27]]}}}],["size=\"offcanvassize.smal",{"_index":1941,"t":{"514":{"position":[[11770,27]]}}}],["size=\"paginationsize.larg",{"_index":1747,"t":{"512":{"position":[[2284,27],[2512,27]]}}}],["size=\"paginationsize.smal",{"_index":1746,"t":{"512":{"position":[[2253,27],[2382,27]]}}}],["size=\"placeholdersize.extrasmal",{"_index":2021,"t":{"518":{"position":[[2440,33],[2956,33],[3335,33]]}}}],["size=\"placeholdersize.larg",{"_index":2019,"t":{"518":{"position":[[2288,28],[2804,28],[3183,28]]}}}],["size=\"placeholdersize.smal",{"_index":2020,"t":{"518":{"position":[[2364,28],[2880,28],[3259,28]]}}}],["size=\"size.larg",{"_index":1227,"t":{"502":{"position":[[3478,17],[3579,18],[3659,18],[4270,17],[4366,17],[4492,17],[4611,17]]},"564":{"position":[[8959,18],[9095,17],[9356,17]]}}}],["size=\"size.smal",{"_index":1228,"t":{"502":{"position":[[3499,17],[3746,18],[3826,18]]},"520":{"position":[[2375,17],[2510,17],[2645,17],[4627,17],[4771,17],[4915,17],[5061,17],[5207,17],[5356,17],[5502,17]]},"530":{"position":[[3441,17],[3587,17],[3736,17],[10678,17],[10824,17]]},"532":{"position":[[4063,17],[4209,17],[4358,17],[4499,17],[4667,17]]},"534":{"position":[[3149,17],[3295,17],[3444,17],[7092,17],[7238,17]]},"536":{"position":[[6100,17],[6246,17],[6395,17],[6538,17],[6710,17]]},"564":{"position":[[9848,18],[10227,17],[15534,17],[15629,17]]},"566":{"position":[[18941,17]]}}}],["slide",{"_index":1598,"t":{"510":{"position":[[3269,5]]}}}],["sm",{"_index":1277,"t":{"502":{"position":[[7327,3]]},"504":{"position":[[6515,2],[6810,2],[10787,2]]},"510":{"position":[[12364,3]]},"538":{"position":[[2619,2],[4446,2],[6077,2],[7046,2],[11039,2],[12577,2]]}}}],["smful",{"_index":1685,"t":{"510":{"position":[[13145,26]]}}}],["smmodal?.showasync()\">smal",{"_index":1667,"t":{"510":{"position":[[12043,27]]}}}],["sobi",{"_index":2697,"t":{"538":{"position":[[3452,7],[5323,7],[7948,7]]}}}],["sodal",{"_index":1814,"t":{"514":{"position":[[7779,7],[8994,7],[9526,7],[12020,7],[13235,7],[13767,7],[16161,7],[17376,7],[17908,7]]}}}],["solid",{"_index":2284,"t":{"528":{"position":[[1455,5],[1527,5],[1599,5],[1671,5],[1743,5],[1815,5],[3963,5],[4097,5]]},"538":{"position":[[8698,5],[8739,5]]},"542":{"position":[[11167,5],[11208,5]]},"544":{"position":[[7152,5],[7193,5],[9749,5],[9790,5]]},"556":{"position":[[5329,5],[5370,5],[9349,5],[9390,5]]},"562":{"position":[[7546,5],[7587,5]]},"564":{"position":[[19004,5],[19045,5]]}}}],["someth",{"_index":1431,"t":{"506":{"position":[[148,10]]},"518":{"position":[[140,9],[2619,9]]}}}],["sometim",{"_index":2493,"t":{"532":{"position":[[155,9]]}}}],["somewheredateonlydateonly?datetimedatetime?holi",{"_index":862,"t":{"486":{"position":[[3007,12],[3218,12]]}}}],["strong>thi",{"_index":1161,"t":{"500":{"position":[[491,12],[714,12],[937,12],[1158,12],[1375,12],[1643,12],[1886,12],[2129,12],[2370,12],[2607,12]]}}}],["strong>timeonlytimeonly?successswap",{"_index":1246,"t":{"502":{"position":[[5315,19]]}}}],["switch",{"_index":20,"t":{"2":{"position":[[159,9],[240,6],[1418,6]]},"52":{"position":[[120,6],[166,6],[203,6],[265,6],[413,6]]},"78":{"position":[[544,6]]},"80":{"position":[[964,6],[1620,6],[1894,6]]},"96":{"position":[[394,6],[411,6],[826,6]]},"100":{"position":[[181,6],[1055,6],[1072,6],[1459,6]]},"110":{"position":[[159,9],[296,6],[313,7],[337,6],[668,6]]},"112":{"position":[[1526,6]]},"114":{"position":[[2526,6],[2572,6]]},"126":{"position":[[857,6]]},"134":{"position":[[203,9],[284,6],[1462,6]]},"138":{"position":[[173,6],[219,6]]},"192":{"position":[[2570,6],[2616,6]]},"194":{"position":[[1570,6]]},"200":{"position":[[863,6]]},"204":{"position":[[212,9],[293,6],[1471,6]]},"206":{"position":[[1579,6]]},"210":{"position":[[2579,6],[2625,6]]},"232":{"position":[[432,6]]},"240":{"position":[[728,6]]},"244":{"position":[[477,6],[2282,6]]},"256":{"position":[[431,6]]},"258":{"position":[[428,6]]},"266":{"position":[[714,6]]},"272":{"position":[[206,9],[287,6],[1465,6]]},"274":{"position":[[207,9],[288,6],[1466,6]]},"280":{"position":[[1574,6]]},"284":{"position":[[1573,6]]},"288":{"position":[[425,6],[601,6],[647,6]]},"298":{"position":[[203,9],[284,6]]},"314":{"position":[[426,6]]},"318":{"position":[[722,6]]},"324":{"position":[[200,9],[281,6]]},"330":{"position":[[201,9],[282,6],[746,6],[2551,6]]},"342":{"position":[[202,9],[283,6]]},"352":{"position":[[425,6]]},"356":{"position":[[204,9],[285,6]]},"358":{"position":[[422,6]]},"370":{"position":[[20,8],[202,9],[283,6],[694,6]]},"374":{"position":[[708,6]]},"430":{"position":[[226,6]]},"438":{"position":[[204,9],[285,6]]},"442":{"position":[[164,6],[210,6]]},"466":{"position":[[420,6]]},"522":{"position":[[8854,6]]},"540":{"position":[[6,6],[33,6],[65,6],[370,6],[531,7],[567,7],[659,6],[714,7],[758,6],[784,7],[828,6],[1070,7],[1097,7],[1162,6],[1682,7],[1787,7],[1846,6],[2043,6],[2219,8],[2281,7],[2324,6],[2449,6],[2475,7],[2512,6],[2805,8]]},"556":{"position":[[12088,6]]},"562":{"position":[[11208,6]]},"566":{"position":[[4390,10],[4438,9],[6337,10],[6385,9],[8619,10],[8667,9],[10952,10],[11000,9],[13405,10],[13453,9],[15815,10],[15863,9],[18229,10],[18277,9],[20735,10],[20783,9],[24011,10],[24059,9]]},"568":{"position":[[67412,7],[67481,7]]}}}],["switch1",{"_index":2835,"t":{"540":{"position":[[2050,7]]}}}],["switch1.dis",{"_index":2836,"t":{"540":{"position":[[2123,18]]}}}],["switch1.en",{"_index":2837,"t":{"540":{"position":[[2167,17]]}}}],["switch2",{"_index":703,"t":{"122":{"position":[[1597,7]]}}}],["switchchanged(bool",{"_index":2843,"t":{"540":{"position":[[2719,18]]}}}],["symbol",{"_index":2844,"t":{"542":{"position":[[177,7],[802,6],[2080,7],[4475,7],[4551,7],[15036,7],[15084,6]]}}}],["system",{"_index":2168,"t":{"526":{"position":[[284,7]]},"530":{"position":[[10263,8]]},"532":{"position":[[11573,8],[13835,8],[15899,8]]},"536":{"position":[[13056,8],[16116,8]]}}}],["system.componentmodel.dataannot",{"_index":2768,"t":{"538":{"position":[[8600,37]]},"542":{"position":[[11069,37]]},"544":{"position":[[7054,37],[9651,37]]},"556":{"position":[[5231,37],[9251,37]]},"562":{"position":[[7448,37]]},"564":{"position":[[18906,37]]}}}],["system.drawing.color",{"_index":2417,"t":{"530":{"position":[[7636,20]]},"536":{"position":[[5962,20],[10464,20]]}}}],["system.text.json",{"_index":3758,"t":{"568":{"position":[[50359,16]]}}}],["t",{"_index":704,"t":{"122":{"position":[[1605,1]]},"506":{"position":[[644,1]]},"510":{"position":[[1696,1]]}}}],["tab",{"_index":192,"t":{"20":{"position":[[159,4],[213,4]]},"46":{"position":[[402,4],[463,3],[493,4],[605,4],[697,4],[786,4]]},"74":{"position":[[333,4]]},"88":{"position":[[153,4],[440,4],[710,4],[872,4]]},"112":{"position":[[153,4],[312,4]]},"116":{"position":[[973,4]]},"138":{"position":[[1614,4]]},"158":{"position":[[304,4]]},"160":{"position":[[311,4]]},"166":{"position":[[311,4]]},"182":{"position":[[29,5],[303,4]]},"194":{"position":[[197,4],[356,4]]},"198":{"position":[[1017,4]]},"206":{"position":[[206,4],[365,4]]},"214":{"position":[[1026,4]]},"248":{"position":[[482,4],[641,4]]},"250":{"position":[[1391,4],[1550,4]]},"252":{"position":[[460,4],[619,4]]},"264":{"position":[[201,4],[360,4]]},"278":{"position":[[202,4],[361,4]]},"280":{"position":[[201,4],[360,4]]},"284":{"position":[[200,4],[359,4]]},"334":{"position":[[476,4],[635,4]]},"336":{"position":[[596,4]]},"338":{"position":[[304,4]]},"342":{"position":[[1661,4],[1820,4]]},"348":{"position":[[886,4],[1045,4]]},"368":{"position":[[21,6],[195,4],[354,4]]},"378":{"position":[[196,4],[355,4]]},"422":{"position":[[298,4]]},"484":{"position":[[197,4],[356,4]]},"510":{"position":[[1408,3]]},"514":{"position":[[1103,3]]},"522":{"position":[[11,4],[36,4],[100,4],[117,4],[290,4],[373,4],[440,3],[508,3],[581,3],[660,3],[703,3],[788,3],[845,3],[936,4],[982,4],[1098,5],[1104,6],[1111,4],[1265,3],[1338,6],[1345,4],[1489,3],[1562,6],[1569,4],[1713,3],[1786,6],[1793,7],[1837,4],[1890,3],[1967,5],[1998,4],[2152,3],[2225,6],[2232,4],[2376,3],[2449,6],[2456,4],[2600,3],[2673,6],[2680,7],[2737,3],[2798,5],[2829,4],[3043,3],[3116,6],[3123,5],[3328,3],[3401,6],[3408,5],[3612,3],[3685,6],[3692,7],[3723,4],[3745,4],[3787,5],[3818,4],[3972,3],[4045,6],[4052,4],[4196,3],[4269,6],[4276,4],[4438,3],[4511,6],[4518,4],[4662,3],[4735,6],[4742,7],[4826,4],[4841,5],[4898,4],[5052,3],[5125,6],[5132,4],[5276,3],[5349,6],[5356,4],[5500,3],[5573,6],[5580,7],[5623,5],[5657,4],[5800,5],[5843,4],[5976,6],[5983,4],[6106,6],[6113,4],[6236,6],[6243,4],[6384,6],[6391,4],[6519,6],[6526,4],[6645,6],[6652,7],[7172,4],[7177,5],[7701,4],[7778,4],[7813,4],[7851,4],[7936,4],[7993,3],[8100,3],[8119,5],[8138,4],[8255,6],[8262,4],[8385,6],[8392,4],[8515,6],[8522,4],[8641,6],[8648,7],[8664,4],[8669,4],[9234,4],[9250,4],[9263,3],[9287,4],[9328,3],[9358,4],[9390,3]]},"526":{"position":[[12145,4]]},"564":{"position":[[2970,6],[3051,6],[3136,6]]},"566":{"position":[[24161,4]]}}}],["tab'",{"_index":2094,"t":{"522":{"position":[[1218,5],[1442,5],[1666,5],[2105,5],[2329,5],[2553,5],[2996,5],[3281,5],[3565,5],[3925,5],[4149,5],[4391,5],[4615,5],[5005,5],[5229,5],[5453,5]]}}}],["tab.aboutinfo",{"_index":3306,"t":{"562":{"position":[[4175,11],[4476,11]]}}}],["text\">tip",{"_index":2946,"t":{"542":{"position":[[8030,10],[9325,10]]},"562":{"position":[[3710,10],[5727,10]]}}}],["text.curr",{"_index":1754,"t":{"512":{"position":[[2911,13]]}}}],["textalign",{"_index":1325,"t":{"504":{"position":[[587,13],[7228,13]]},"542":{"position":[[1430,13],[8273,13]]},"562":{"position":[[928,13],[4759,13]]},"568":{"position":[[6224,13],[37851,13],[37922,13]]}}}],["textalignment=\"alignment.cent",{"_index":1393,"t":{"504":{"position":[[7558,32]]},"542":{"position":[[8513,32]]},"562":{"position":[[4971,32]]},"568":{"position":[[25534,32],[38231,33],[38704,33],[40474,33],[40962,33],[42737,33],[43587,33],[111097,33],[113626,33],[116287,33],[118982,33]]}}}],["textalignment=\"alignment.end",{"_index":1394,"t":{"504":{"position":[[7890,29]]},"542":{"position":[[8772,29]]},"562":{"position":[[5202,29]]},"568":{"position":[[25323,29],[38554,30],[40797,30],[43422,30]]}}}],["textbox",{"_index":225,"t":{"30":{"position":[[352,7]]},"538":{"position":[[99,7],[2046,7]]},"568":{"position":[[4303,7],[24036,7],[24137,7],[24206,7],[121611,7]]}}}],["textnowrap",{"_index":3578,"t":{"568":{"position":[[6361,10]]}}}],["textnowrap=\"tru",{"_index":3672,"t":{"568":{"position":[[24934,17],[25062,17],[42390,17],[43102,18],[43207,18]]}}}],["that'",{"_index":3399,"t":{"564":{"position":[[18597,6]]}}}],["thead",{"_index":3527,"t":{"568":{"position":[[1706,5],[2694,5]]}}}],["theadcssclass",{"_index":3540,"t":{"568":{"position":[[2650,13]]}}}],["therebi",{"_index":1646,"t":{"510":{"position":[[8801,7],[10558,7]]}}}],["they'll",{"_index":1338,"t":{"504":{"position":[[2717,7]]}}}],["they'r",{"_index":1591,"t":{"510":{"position":[[2864,7]]},"526":{"position":[[310,7]]}}}],["they’ll",{"_index":1382,"t":{"504":{"position":[[6342,7]]}}}],["thing",{"_index":848,"t":{"486":{"position":[[2047,6]]},"516":{"position":[[125,6]]},"526":{"position":[[378,6]]}}}],["third",{"_index":967,"t":{"494":{"position":[[3014,5],[5025,5],[6868,5],[8688,5],[10504,5],[12516,5],[17481,5]]},"504":{"position":[[5029,5],[5727,5]]}}}],["those",{"_index":864,"t":{"486":{"position":[[3071,5],[3282,5]]},"502":{"position":[[5640,5]]}}}],["though",{"_index":963,"t":{"494":{"position":[[2325,6],[2876,6],[3426,6],[4189,6],[4814,6],[5437,6],[6179,6],[6730,6],[7280,6],[7983,6],[8550,6],[9100,6],[9815,6],[10366,6],[10916,6],[11803,6],[12366,6],[12928,6],[13486,6],[14034,6],[14594,6],[16748,6],[17321,6],[17893,6]]}}}],["three",{"_index":1495,"t":{"506":{"position":[[4687,5]]},"510":{"position":[[11341,5]]}}}],["through",{"_index":355,"t":{"60":{"position":[[280,7]]},"68":{"position":[[436,7]]},"492":{"position":[[1020,7]]},"496":{"position":[[2280,7]]},"500":{"position":[[3175,7],[3663,7],[4152,7],[4638,7],[5123,7]]},"506":{"position":[[2169,7]]},"510":{"position":[[3969,7]]},"514":{"position":[[3399,7]]},"518":{"position":[[1061,7]]}}}],["throw",{"_index":1372,"t":{"504":{"position":[[5161,5]]}}}],["thrown",{"_index":1209,"t":{"502":{"position":[[1991,6]]}}}],["tidy.anoth",{"_index":1359,"t":{"504":{"position":[[3777,14],[5808,14]]}}}],["to=\"#\">card",{"_index":1357,"t":{"504":{"position":[[3739,11],[5770,11]]}}}],["toast",{"_index":88,"t":{"2":{"position":[[2644,5],[2772,5]]},"6":{"position":[[106,6],[166,6]]},"8":{"position":[[699,6]]},"22":{"position":[[179,6],[325,6],[382,6]]},"42":{"position":[[179,6],[319,6],[346,6],[472,6],[539,6],[582,6]]},"48":{"position":[[120,5],[198,6],[613,6],[891,5]]},"66":{"position":[[119,6],[163,6],[190,5],[334,6],[412,6],[426,6]]},"88":{"position":[[141,7],[368,6],[682,6],[852,6]]},"94":{"position":[[137,5],[244,5],[486,5]]},"112":{"position":[[141,7],[292,6]]},"114":{"position":[[462,6],[547,6],[561,6]]},"116":{"position":[[120,5],[198,6],[390,5],[1239,6],[1293,6],[1336,6]]},"120":{"position":[[106,6]]},"130":{"position":[[1187,6]]},"134":{"position":[[2688,5],[2816,5]]},"138":{"position":[[761,5],[839,6],[1031,5]]},"140":{"position":[[178,5],[256,6],[448,5]]},"144":{"position":[[170,5],[248,6],[440,5]]},"172":{"position":[[171,5],[249,6],[441,5]]},"174":{"position":[[232,6],[286,6],[329,6]]},"176":{"position":[[236,6],[290,6],[333,6]]},"180":{"position":[[171,5],[249,6],[441,5]]},"188":{"position":[[29,6],[170,5],[248,6],[440,5]]},"190":{"position":[[28,7],[169,6],[254,6],[268,6],[477,6],[531,6],[574,6]]},"192":{"position":[[506,6],[591,6],[605,6]]},"194":{"position":[[185,7],[336,6]]},"198":{"position":[[164,5],[242,6],[434,5]]},"204":{"position":[[2697,5],[2825,5]]},"206":{"position":[[194,7],[345,6]]},"210":{"position":[[515,6],[600,6],[614,6]]},"212":{"position":[[1240,6]]},"214":{"position":[[173,5],[251,6],[443,5],[1292,6],[1346,6],[1389,6]]},"216":{"position":[[191,5],[319,5]]},"218":{"position":[[159,6]]},"248":{"position":[[470,7],[621,6]]},"250":{"position":[[1379,7],[1530,6]]},"252":{"position":[[448,7],[599,6]]},"264":{"position":[[189,7],[340,6]]},"270":{"position":[[186,5],[314,5]]},"272":{"position":[[2691,5],[2819,5]]},"274":{"position":[[2692,5],[2820,5]]},"278":{"position":[[190,7],[341,6],[506,6],[591,6],[605,6]]},"280":{"position":[[189,7],[340,6]]},"282":{"position":[[510,6],[595,6],[609,6]]},"284":{"position":[[188,7],[339,6]]},"286":{"position":[[509,6],[594,6],[608,6]]},"290":{"position":[[192,5],[320,5]]},"294":{"position":[[185,5],[313,5]]},"306":{"position":[[266,6]]},"332":{"position":[[257,6]]},"334":{"position":[[464,7],[615,6]]},"342":{"position":[[1649,7],[1800,6]]},"348":{"position":[[874,7],[1025,6]]},"362":{"position":[[229,6],[283,6],[326,6]]},"364":{"position":[[482,6],[536,6],[579,6]]},"368":{"position":[[183,7],[334,6]]},"376":{"position":[[21,7],[180,5],[308,5]]},"378":{"position":[[20,8],[184,7],[335,6],[500,6],[585,6],[599,6],[808,6],[862,6],[905,6],[1158,6]]},"380":{"position":[[187,5],[315,5]]},"388":{"position":[[150,6]]},"398":{"position":[[258,6]]},"424":{"position":[[164,5],[242,6],[434,5]]},"426":{"position":[[223,6],[277,6],[320,6]]},"456":{"position":[[163,6],[248,6],[262,6]]},"474":{"position":[[181,5],[309,5]]},"484":{"position":[[185,7],[336,6]]},"506":{"position":[[2418,5]]},"522":{"position":[[9227,6]]},"524":{"position":[[1885,6]]},"526":{"position":[[11,6],[38,6],[88,6],[150,5],[172,6],[415,6],[433,6],[518,6],[575,7],[583,6],[683,6],[729,5],[807,7],[864,6],[994,5],[1382,5],[1430,5],[1558,6],[1585,6],[1632,7],[1672,6],[1803,9],[1862,7],[3029,5],[3080,6],[3098,5],[3134,6],[3227,6],[3259,5],[3305,7],[4522,5],[4573,6],[4665,6],[4808,6],[4815,7],[6011,5],[6072,6],[6192,5],[6342,6],[6421,7],[7672,5],[7914,6],[7961,6],[8105,6],[8123,7],[9616,5],[9733,6],[9771,6],[9807,5],[9845,5],[10054,5],[10082,7],[11281,5],[11350,6],[11394,6],[11530,7],[11631,6],[12164,6],[12216,5],[12222,5],[12312,6]]}}}],["toast''",{"_index":2184,"t":{"526":{"position":[[1484,8]]}}}],["toast1",{"_index":624,"t":{"122":{"position":[[568,6],[1636,6]]}}}],["toastbuttonlink",{"_index":1239,"t":{"502":{"position":[[4826,28]]}}}],["tooltiptitle=\"@tooltip\">reset",{"_index":1244,"t":{"502":{"position":[[5218,29]]}}}],["tooltiptitle=\"@tooltip\">submit",{"_index":1241,"t":{"502":{"position":[[4958,30]]}}}],["tooltiptitle=\"compar",{"_index":2314,"t":{"528":{"position":[[3909,21]]}}}],["tooltiptitle=\"cr",{"_index":2316,"t":{"528":{"position":[[4036,20]]}}}],["tooltiptitle=\"tooltip",{"_index":1295,"t":{"502":{"position":[[8046,21],[8173,21],[8304,21],[8437,21]]}}}],["top",{"_index":1133,"t":{"498":{"position":[[107,3]]},"502":{"position":[[7976,4],[8123,3],[8781,3]]},"504":{"position":[[3916,4],[5339,4]]},"510":{"position":[[3301,3]]},"514":{"position":[[6974,4],[7061,4],[7212,3]]},"524":{"position":[[426,3]]},"526":{"position":[[8032,3]]},"530":{"position":[[1517,4]]},"532":{"position":[[1770,4]]},"534":{"position":[[1352,4]]},"536":{"position":[[1653,4]]},"552":{"position":[[771,3]]},"554":{"position":[[776,3]]},"564":{"position":[[16482,3]]},"566":{"position":[[6745,3],[9005,3],[11458,3],[13868,3],[16282,3],[18710,3],[21080,3],[21137,3]]}}}],["top\">tooltip",{"_index":2141,"t":{"524":{"position":[[706,12]]}}}],["topactionanoth",{"_index":3339,"t":{"564":{"position":[[3959,30],[4371,30],[4729,30],[5083,30],[5431,30],[5785,30],[6137,30],[6629,30],[7055,30],[7475,30],[7886,30],[8306,30],[8723,30],[9186,30],[9639,30],[10057,30],[10510,30],[11104,30],[11577,30],[12181,30],[12760,30],[13228,30],[13822,30],[14203,30],[15319,30],[16994,30],[17505,30],[17945,30],[24026,30],[25082,30]]}}}],["type=\"buttontype.link\">go",{"_index":1350,"t":{"504":{"position":[[3010,25],[4243,25],[4607,25],[6206,25],[6722,25],[7017,25],[7487,25],[7819,25],[8148,25]]}}}],["type=\"buttontype.link\">menu",{"_index":3412,"t":{"564":{"position":[[22348,27],[22417,27],[22486,27],[22773,27],[22842,27],[22911,27],[23196,27],[23265,27],[23334,27],[23563,27],[23632,27],[23701,27]]}}}],["type=\"buttontype.link\">separ",{"_index":3391,"t":{"564":{"position":[[18149,32]]}}}],["type=\"buttontype.link\">someth",{"_index":3341,"t":{"564":{"position":[[4033,32],[4445,32],[4803,32],[5157,32],[5505,32],[5859,32],[6211,32],[6703,32],[7129,32],[7549,32],[7960,32],[8380,32],[8797,32],[9260,32],[9713,32],[10131,32],[10584,32],[11178,32],[11651,32],[12255,32],[12834,32],[13302,32],[13896,32],[14277,32],[14888,32],[15393,32],[16290,32],[17068,32],[17579,32],[18019,32],[24100,32],[25156,32]]}}}],["type=\"buttontype.reset",{"_index":1243,"t":{"502":{"position":[[5140,23]]}}}],["type=\"buttontype.submit",{"_index":1219,"t":{"502":{"position":[[2633,24],[4879,24]]},"542":{"position":[[12748,24]]},"544":{"position":[[8155,24],[11240,24]]},"556":{"position":[[7301,24],[10539,24]]},"562":{"position":[[8998,24]]},"564":{"position":[[20433,24]]}}}],["type=\"callouttype.dang",{"_index":1165,"t":{"500":{"position":[[687,26],[1839,25],[3303,26]]}}}],["type=\"callouttype.info",{"_index":1167,"t":{"500":{"position":[[1133,24],[2325,23],[4280,24]]}}}],["type=\"callouttype.tip",{"_index":1168,"t":{"500":{"position":[[1351,23],[2563,22],[4766,23]]}}}],["type=\"callouttype.warn",{"_index":1166,"t":{"500":{"position":[[909,27],[2081,26],[3791,27]]}}}],["type=\"d",{"_index":3005,"t":{"544":{"position":[[123,11]]}}}],["type=\"numb",{"_index":3302,"t":{"562":{"position":[[121,13]]}}}],["type=\"progresstype.strip",{"_index":2046,"t":{"520":{"position":[[1390,27],[6109,27],[6229,27],[6350,27],[6468,27],[6589,27],[6709,27],[6830,27],[6953,27]]}}}],["type=\"progresstype.stripedandanim",{"_index":2049,"t":{"520":{"position":[[1510,38],[7106,38],[7260,38],[7392,38],[7521,38],[7653,38],[7784,38],[7916,38],[8050,38]]}}}],["type=\"submit",{"_index":2791,"t":{"538":{"position":[[9699,13]]}}}],["type=\"text",{"_index":3015,"t":{"544":{"position":[[1427,12]]},"556":{"position":[[1431,12]]}}}],["type=\"tim",{"_index":3205,"t":{"556":{"position":[[127,11]]}}}],["typic",{"_index":771,"t":{"486":{"position":[[86,7]]}}}],["typograph",{"_index":2018,"t":{"518":{"position":[[2108,11]]}}}],["ui",{"_index":197,"t":{"22":{"position":[[196,2]]},"100":{"position":[[1147,2]]},"498":{"position":[[161,2]]},"544":{"position":[[1322,2]]},"556":{"position":[[1326,2]]}}}],["ul",{"_index":1364,"t":{"504":{"position":[[4870,3],[5045,5],[5568,3],[5743,5]]},"568":{"position":[[70636,4],[70704,5],[73611,4],[73679,5],[76962,4],[77030,5]]}}}],["ullamcorp",{"_index":1898,"t":{"514":{"position":[[9064,11],[9093,11],[10882,11],[13305,11],[13334,11],[15123,11],[17446,11],[17475,11],[19264,11]]}}}],["ultric",{"_index":1880,"t":{"514":{"position":[[8528,8],[8723,9],[10329,8],[10380,8],[10728,8],[12769,8],[12964,9],[14570,8],[14621,8],[14969,8],[16910,8],[17105,9],[18711,8],[18762,8],[19110,8]]}}}],["ultrici",{"_index":1811,"t":{"514":{"position":[[7740,9],[8312,9],[8611,9],[10522,9],[11981,9],[12553,9],[12852,9],[14763,9],[16122,9],[16694,9],[16993,9],[18904,9]]}}}],["unhandl",{"_index":473,"t":{"82":{"position":[[206,9]]}}}],["uniform",{"_index":1416,"t":{"504":{"position":[[10752,7]]}}}],["unit",{"_index":1048,"t":{"496":{"position":[[778,6]]},"536":{"position":[[4049,4]]},"568":{"position":[[2718,4],[2723,4],[2753,6],[107203,5],[107247,4]]}}}],["unit.px",{"_index":3541,"t":{"568":{"position":[[2728,7]]}}}],["unit=\"unit.px",{"_index":3908,"t":{"568":{"position":[[107427,15],[110880,15],[113372,15],[116033,15],[118728,15]]}}}],["unless",{"_index":1384,"t":{"504":{"position":[[6363,6]]}}}],["unnecessari",{"_index":274,"t":{"40":{"position":[[290,11]]}}}],["unsupport",{"_index":3012,"t":{"544":{"position":[[1370,11]]},"556":{"position":[[1374,11]]}}}],["until",{"_index":955,"t":{"494":{"position":[[1971,5],[2522,5],[3072,5],[3835,5],[4460,5],[5083,5],[5825,5],[6376,5],[6926,5],[7629,5],[8196,5],[8746,5],[9461,5],[10012,5],[10562,5],[11449,5],[12012,5],[12574,5],[13132,5],[13680,5],[14240,5],[16394,5],[16967,5],[17539,5]]}}}],["up",{"_index":1346,"t":{"504":{"position":[[2921,2],[3683,2],[4154,2],[4518,2],[5510,2],[8476,2],[8768,2],[9056,2],[9342,2],[9630,2],[9912,2],[10196,2],[10478,2],[12071,3]]},"530":{"position":[[2874,2]]},"532":{"position":[[3506,2]]},"534":{"position":[[2592,2]]},"536":{"position":[[5471,2]]},"538":{"position":[[2290,2]]},"562":{"position":[[3931,2]]},"564":{"position":[[24742,3]]}}}],["updat",{"_index":59,"t":{"2":{"position":[[1142,10],[1435,10],[1678,10],[1940,10],[2193,10],[2411,10],[2658,10]]},"8":{"position":[[240,7],[602,7],[653,8]]},"12":{"position":[[108,7],[175,8],[263,6],[276,6]]},"14":{"position":[[122,8]]},"16":{"position":[[121,8],[210,7]]},"18":{"position":[[137,8],[146,8]]},"20":{"position":[[137,8],[146,8]]},"22":{"position":[[120,8],[145,7],[170,8],[243,6],[266,7]]},"24":{"position":[[142,8]]},"26":{"position":[[142,8]]},"28":{"position":[[140,8]]},"30":{"position":[[160,8]]},"44":{"position":[[408,7]]},"50":{"position":[[252,8]]},"52":{"position":[[231,8],[283,7]]},"54":{"position":[[218,8]]},"56":{"position":[[129,7]]},"58":{"position":[[342,8]]},"60":{"position":[[121,7],[494,8]]},"68":{"position":[[145,10]]},"70":{"position":[[146,10]]},"72":{"position":[[168,10]]},"74":{"position":[[138,10]]},"76":{"position":[[127,10]]},"78":{"position":[[138,10]]},"80":{"position":[[144,10]]},"82":{"position":[[129,10]]},"84":{"position":[[149,10]]},"86":{"position":[[140,10]]},"88":{"position":[[158,10]]},"90":{"position":[[124,10]]},"92":{"position":[[125,10]]},"94":{"position":[[151,10]]},"96":{"position":[[148,10]]},"98":{"position":[[124,10]]},"100":{"position":[[198,10]]},"102":{"position":[[153,10]]},"106":{"position":[[409,7]]},"110":{"position":[[395,7],[505,7]]},"112":{"position":[[158,10],[478,10],[745,10],[1034,10],[1294,10],[1711,10],[1954,10],[2213,10],[2513,10],[2825,10]]},"114":{"position":[[145,10],[1219,7],[1660,7]]},"118":{"position":[[215,10]]},"124":{"position":[[151,7],[218,8]]},"126":{"position":[[625,10],[1051,10],[1312,7]]},"128":{"position":[[211,10]]},"130":{"position":[[714,8],[912,8],[1093,8],[1118,7],[1325,8],[1513,7],[1580,8],[1756,8]]},"134":{"position":[[1186,10],[1479,10],[1722,10],[1984,10],[2237,10],[2455,10],[2702,10]]},"148":{"position":[[186,7]]},"184":{"position":[[191,7]]},"186":{"position":[[183,7]]},"192":{"position":[[189,10],[1263,7],[1704,7]]},"194":{"position":[[202,10],[522,10],[789,10],[1078,10],[1338,10],[1755,10],[1998,10],[2257,10],[2557,10],[2869,10]]},"196":{"position":[[221,10]]},"200":{"position":[[631,10],[1057,10]]},"202":{"position":[[217,10]]},"204":{"position":[[1195,10],[1488,10],[1731,10],[1993,10],[2246,10],[2464,10],[2711,10]]},"206":{"position":[[211,10],[531,10],[798,10],[1087,10],[1347,10],[1764,10],[2007,10],[2266,10],[2566,10],[2878,10]]},"208":{"position":[[200,7]]},"210":{"position":[[198,10],[1272,7],[1713,7]]},"212":{"position":[[767,8],[965,8],[1146,8],[1171,7],[1378,8],[1566,7],[1633,8],[1809,8]]},"216":{"position":[[205,10]]},"220":{"position":[[220,10]]},"222":{"position":[[198,10],[517,10]]},"226":{"position":[[179,10],[433,10],[710,10]]},"230":{"position":[[177,7]]},"232":{"position":[[200,10],[615,10]]},"234":{"position":[[194,10]]},"236":{"position":[[199,10],[612,10]]},"238":{"position":[[171,7]]},"240":{"position":[[201,10],[496,10],[930,10],[1343,10]]},"244":{"position":[[201,10],[494,10],[737,10],[1000,10],[1234,10],[1501,10],[1790,10],[2050,10],[2467,10],[2729,10]]},"248":{"position":[[487,10]]},"250":{"position":[[628,10],[890,10],[1142,10],[1396,10],[1722,10],[2135,10],[2454,7]]},"252":{"position":[[179,10],[465,10]]},"256":{"position":[[199,10]]},"258":{"position":[[196,10],[630,10],[1043,10]]},"262":{"position":[[192,10]]},"264":{"position":[[206,10]]},"266":{"position":[[200,10],[482,10],[916,10]]},"268":{"position":[[200,10]]},"270":{"position":[[200,10]]},"272":{"position":[[1189,10],[1482,10],[1725,10],[1987,10],[2240,10],[2458,10],[2705,10]]},"274":{"position":[[1190,10],[1483,10],[1726,10],[1988,10],[2241,10],[2459,10],[2706,10]]},"276":{"position":[[620,10]]},"278":{"position":[[207,10]]},"280":{"position":[[206,10],[526,10],[793,10],[1082,10],[1342,10],[1759,10],[2002,10],[2261,10],[2561,10],[2873,10]]},"282":{"position":[[193,10],[1267,7],[1708,7]]},"284":{"position":[[205,10],[525,10],[792,10],[1081,10],[1341,10],[1758,10],[2001,10],[2260,10],[2560,10],[2872,10]]},"286":{"position":[[192,10],[1266,7],[1707,7]]},"288":{"position":[[193,10]]},"290":{"position":[[206,10]]},"292":{"position":[[192,10],[511,10]]},"294":{"position":[[199,10]]},"296":{"position":[[173,10],[427,10],[704,10]]},"304":{"position":[[214,10]]},"306":{"position":[[172,8],[197,7]]},"308":{"position":[[171,7]]},"312":{"position":[[173,10]]},"314":{"position":[[194,10],[609,10]]},"316":{"position":[[191,10]]},"318":{"position":[[195,10],[490,10],[924,10],[1337,10]]},"320":{"position":[[193,10],[606,10]]},"322":{"position":[[165,7]]},"328":{"position":[[188,10],[1479,8]]},"330":{"position":[[470,10],[763,10],[1006,10],[1269,10],[1503,10],[1770,10],[2059,10],[2319,10],[2736,10]]},"332":{"position":[[163,8],[188,7]]},"334":{"position":[[481,10]]},"336":{"position":[[191,10]]},"342":{"position":[[898,10],[1160,10],[1412,10],[1666,10],[1992,10],[2405,10],[2724,7]]},"346":{"position":[[164,8]]},"348":{"position":[[605,10],[891,10]]},"352":{"position":[[193,10]]},"354":{"position":[[380,8],[578,8]]},"358":{"position":[[190,10],[624,10],[1037,10],[1553,8]]},"360":{"position":[[169,8]]},"364":{"position":[[185,10]]},"368":{"position":[[200,10]]},"370":{"position":[[462,10]]},"372":{"position":[[194,10]]},"374":{"position":[[194,10],[476,10],[910,10]]},"376":{"position":[[194,10]]},"378":{"position":[[201,10],[1064,8],[1089,7]]},"380":{"position":[[201,10]]},"382":{"position":[[614,10]]},"392":{"position":[[152,7],[219,8]]},"394":{"position":[[166,8]]},"396":{"position":[[165,8]]},"398":{"position":[[164,8],[189,7]]},"400":{"position":[[181,8]]},"402":{"position":[[181,8]]},"430":{"position":[[243,10]]},"432":{"position":[[198,10]]},"448":{"position":[[165,7]]},"454":{"position":[[173,7]]},"458":{"position":[[189,10]]},"460":{"position":[[190,10]]},"462":{"position":[[212,10]]},"464":{"position":[[171,10]]},"466":{"position":[[188,10]]},"468":{"position":[[182,10]]},"470":{"position":[[173,10]]},"472":{"position":[[168,10]]},"474":{"position":[[195,10]]},"476":{"position":[[193,10]]},"478":{"position":[[182,10]]},"480":{"position":[[168,10]]},"482":{"position":[[192,10]]},"484":{"position":[[202,10]]},"488":{"position":[[169,10]]},"490":{"position":[[184,10]]},"502":{"position":[[5478,9],[8631,6],[8997,9],[10084,6]]},"504":{"position":[[11140,7],[11467,7],[11889,7],[12435,7],[12783,7],[13226,7]]},"506":{"position":[[6357,8],[7589,8]]},"524":{"position":[[1472,6],[1799,9],[2007,6]]},"526":{"position":[[4740,6],[6274,6],[8087,6]]},"530":{"position":[[715,6]]},"532":{"position":[[620,6]]},"534":{"position":[[560,6]]},"536":{"position":[[764,6]]},"558":{"position":[[194,10]]},"564":{"position":[[3174,7]]},"568":{"position":[[56665,6],[121895,6]]}}}],["updateasync",{"_index":562,"t":{"102":{"position":[[249,11],[293,11],[333,11],[372,11]]},"530":{"position":[[698,11]]},"532":{"position":[[603,11]]},"534":{"position":[[543,11]]},"536":{"position":[[747,11]]},"564":{"position":[[3162,11]]}}}],["upgrad",{"_index":168,"t":{"14":{"position":[[153,7]]},"18":{"position":[[195,7]]},"70":{"position":[[662,7]]}}}],["url",{"_index":3449,"t":{"566":{"position":[[1315,3]]},"568":{"position":[[50291,4]]}}}],["url("data:image/svg+xml,%3csvg",{"_index":915,"t":{"492":{"position":[[1738,34]]}}}],["urna",{"_index":1888,"t":{"514":{"position":[[8678,5],[8952,5],[9303,4],[10873,5],[12919,5],[13193,5],[13544,4],[15114,5],[17060,5],[17334,5],[17685,4],[19255,5]]}}}],["us",{"_index":103,"t":{"4":{"position":[[164,4]]},"60":{"position":[[306,5]]},"68":{"position":[[462,5]]},"80":{"position":[[425,3],[461,3],[572,3],[608,3],[715,3],[751,3],[860,3],[896,3],[999,3],[1035,3],[1142,3],[1178,3]]},"88":{"position":[[301,5]]},"120":{"position":[[548,4]]},"218":{"position":[[601,4]]},"386":{"position":[[208,4]]},"486":{"position":[[861,3],[2018,3],[2156,3],[2819,5],[3650,5]]},"492":{"position":[[1625,3]]},"494":{"position":[[2034,3],[2585,3],[3135,3],[3576,3],[3898,3],[4523,3],[5146,3],[5888,3],[6439,3],[6989,3],[7692,3],[8259,3],[8809,3],[9524,3],[10075,3],[10625,3],[11113,3],[11512,3],[12075,3],[12637,3],[13195,3],[13743,3],[14303,3],[16457,3],[17030,3],[17602,3]]},"496":{"position":[[744,5],[2003,5],[2404,3],[3292,4],[3961,3]]},"500":{"position":[[354,3]]},"502":{"position":[[47,3],[3310,3],[3370,4],[4163,5],[5709,5],[6902,3],[7487,3]]},"504":{"position":[[3296,3],[10576,3],[10709,3],[12001,5]]},"506":{"position":[[61,3],[2195,5],[2413,4],[3962,3]]},"508":{"position":[[1210,4],[1241,3]]},"510":{"position":[[43,3],[1501,4],[3995,5],[8759,3],[10516,3]]},"512":{"position":[[53,3],[1321,3]]},"514":{"position":[[3425,5]]},"516":{"position":[[145,5],[1025,6],[2336,5]]},"518":{"position":[[57,3],[1283,4]]},"520":{"position":[[80,5],[1933,5],[2117,3],[3175,5],[3547,3]]},"522":{"position":[[79,3],[2748,3],[4772,3],[5679,3]]},"524":{"position":[[49,3]]},"526":{"position":[[398,5],[507,3],[8050,3],[9950,5]]},"528":{"position":[[1322,4],[3763,4]]},"530":{"position":[[2614,5],[2959,5],[3001,3],[7443,5],[7587,6],[7621,6]]},"532":{"position":[[101,4],[165,4],[3206,5],[3591,5],[3633,3],[11880,5]]},"534":{"position":[[2337,5],[2677,5],[2719,3]]},"536":{"position":[[144,4],[1910,4],[3621,3],[4088,5],[4335,5],[5170,5],[5556,5],[5598,3],[5913,6],[5947,6],[10415,6],[10449,6]]},"538":{"position":[[835,3],[1029,5],[1035,3],[1329,3],[4237,4],[4332,4],[8593,6],[10935,3],[12376,3],[12463,3]]},"540":{"position":[[40,3],[1028,3],[1621,3],[1702,3],[2252,5]]},"542":{"position":[[56,3],[1010,4],[1159,4],[1232,4],[4798,5],[8265,3],[9486,3],[10132,3],[10220,3],[11026,4],[11062,6],[15091,5]]},"544":{"position":[[100,5],[237,5],[5435,3],[6119,3],[6203,3],[6905,3],[6913,3],[7017,4],[7047,6],[9644,6]]},"546":{"position":[[287,3],[874,3],[1622,4],[2003,4],[2462,4],[2648,6],[3210,5]]},"548":{"position":[[277,3],[864,3],[1783,4],[2164,4],[2623,4],[2809,6],[3373,5]]},"550":{"position":[[277,3],[1261,4],[1642,4],[2101,4],[2291,6],[2853,5]]},"556":{"position":[[104,5],[241,5],[3664,3],[4320,3],[4404,3],[5082,3],[5090,3],[5194,4],[5224,6],[9244,6]]},"560":{"position":[[57,3]]},"562":{"position":[[4751,3],[5888,3],[6530,3],[6616,3],[7405,4],[7441,6]]},"564":{"position":[[16719,5],[18316,3],[18824,3],[18899,6],[22100,3]]},"566":{"position":[[47,3],[2586,3],[11144,6],[11227,3],[13593,3],[13654,5],[16010,3]]},"568":{"position":[[41,3],[5097,3],[5586,3],[5712,4],[5986,3],[6297,3],[9052,4],[11354,4],[35485,3],[35643,3],[37843,3],[37985,3],[40125,3],[46337,3],[50190,4],[50352,6],[54507,6],[56843,6],[66385,3]]}}}],["uswarningextra",{"_index":1665,"t":{"510":{"position":[[11847,27]]}}}],["xlmodal?.showasync()\">ful",{"_index":1691,"t":{"510":{"position":[[13457,26]]}}}],["xmlns='http://www.w3.org/2000/svg",{"_index":916,"t":{"492":{"position":[[1773,34]]}}}],["xxl",{"_index":1681,"t":{"510":{"position":[[12903,4]]}}}],["xxlful",{"_index":1693,"t":{"510":{"position":[[13561,27]]}}}],["y",{"_index":2511,"t":{"532":{"position":[[2544,1],[2993,3],[7022,4],[9312,4],[11245,4],[13507,4],[15571,4]]},"536":{"position":[[236,1],[321,1],[4507,1],[4957,3],[8865,4]]}}}],["yaxisid",{"_index":2510,"t":{"532":{"position":[[2510,7]]},"536":{"position":[[4473,7]]}}}],["ye",{"_index":1453,"t":{"506":{"position":[[1416,5],[1463,3],[1484,5]]}}}],["yeah",{"_index":831,"t":{"486":{"position":[[1774,5]]}}}],["yesbuttoncolor",{"_index":1451,"t":{"506":{"position":[[1352,14],[4311,14]]}}}],["yesbuttontext",{"_index":1454,"t":{"506":{"position":[[1442,13],[4289,13]]}}}],["you''r",{"_index":1266,"t":{"502":{"position":[[6529,7]]}}}],["youll",{"_index":3394,"t":{"564":{"position":[[18349,5]]}}}],["zaraiah",{"_index":2745,"t":{"538":{"position":[[3836,8],[5707,8],[8332,8]]}}}],["zayn",{"_index":3628,"t":{"568":{"position":[[8542,8],[10887,8],[13518,8],[16035,8],[18709,8],[21206,8],[23608,8],[27474,8],[32685,8],[35050,8],[37415,8],[39705,8],[41963,8],[45503,8],[48311,8],[53956,8],[56418,8],[62760,8],[65981,8],[69358,8],[72241,8],[75216,8],[78513,8],[81859,8],[84625,8],[106704,8],[110330,8]]}}}],["zayne@blazorbootstrap.com",{"_index":3703,"t":{"568":{"position":[[27513,28],[45542,28]]}}}],["zero",{"_index":2859,"t":{"542":{"position":[[1327,5],[4878,5]]}}}],["zip",{"_index":3943,"t":{"568":{"position":[[111983,4],[114553,4],[117214,4],[119990,4]]}}}]],"pipeline":["stemmer"]}}] \ No newline at end of file diff --git a/search.html b/search.html index 1b5f9900f..cc939e547 100644 --- a/search.html +++ b/search.html @@ -10,13 +10,13 @@ - +

Search the documentation

- + \ No newline at end of file diff --git a/services/modal.html b/services/modal.html index f1220f31b..6ad254907 100644 --- a/services/modal.html +++ b/services/modal.html @@ -10,13 +10,13 @@ - +

Blazor Modal Service

Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content.

Blazor Modal Service
See blazor modal service demo here.

Methods​

NameReturn Type
ShowAsync(ModalOption modalOption)Task

ModalOption Members​

Property NameTypeDescriptionRequiredDefault
FooterButtonColorButtonColorGets or sets the footer button color.ButtonColor.Secondary
FooterButtonCSSClassstringGets or sets the footer button custom CSS class.null
FooterButtonTextstringGets or sets the footer button text.OK
IsVerticallyCenteredboolGets or sets the IsVerticallyCentered.false
MessagestringGets or sets the modal message.✔️null
ShowFooterButtonstringShows or hides the footer button.true
SizeModalSizeGets or sets the modal size.ModalSize.Regular
TitlestringGets or sets the modal title.✔️null
TypeModalTypeGets or sets the modal type.ModalType.Light

Examples​

How it works​

Blazor Modal Service: How it works
<Button Color="ButtonColor.Primary" @onclick="() => ShowModal(ModalType.Primary)">Show Primary Modal</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowModal(ModalType.Secondary)">Show Secondary Modal</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowModal(ModalType.Success)">Show Success Modal</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowModal(ModalType.Danger)">Show Danger Modal</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowModal(ModalType.Warning)">Show Warning Modal</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowModal(ModalType.Info)">Show Info Modal</Button>
<Button Color="ButtonColor.Light" @onclick="() => ShowModal(ModalType.Light)">Show Light Modal</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowModal(ModalType.Dark)">Show Dark Modal</Button>
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal(ModalType modalType)
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              Type = modalType,
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

See demo here.

Vertically Centered​

Blazor Modal Service: Vertically Centered
<Button Color="ButtonColor.Primary" @onclick="() => ShowModal(ModalType.Primary)">Show Primary Modal</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowModal(ModalType.Secondary)">Show Secondary Modal</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowModal(ModalType.Success)">Show Success Modal</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowModal(ModalType.Danger)">Show Danger Modal</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowModal(ModalType.Warning)">Show Warning Modal</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowModal(ModalType.Info)">Show Info Modal</Button>
<Button Color="ButtonColor.Light" @onclick="() => ShowModal(ModalType.Light)">Show Light Modal</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowModal(ModalType.Dark)">Show Dark Modal</Button>
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal(ModalType modalType)
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              Type = modalType,
                              IsVerticallyCentered = true
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

See demo here.

Size​

Blazor Modal Service: Size
<Button Color="ButtonColor.Primary" @onclick="() => ShowModal(ModalSize.Regular)">Show Regular Modal</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowModal(ModalSize.Small)">Show Small Modal</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowModal(ModalSize.Large)">Show Large Modal</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowModal(ModalSize.ExtraLarge)">Show ExtraLarge Modal</Button>
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal(ModalSize modalSize)
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              Size = modalSize
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

See demo here.

Change footer button color and text​

Blazor Modal Service: Change footer button color and text
<Button Color="ButtonColor.Primary" @onclick="ShowModal">Show Modal</Button>
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal()
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              FooterButtonColor = ButtonColor.Primary,
                              FooterButtonText = "Got it!"
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

See demo here.

Blazor Modal Service: Hide footer button
<Button Color="ButtonColor.Primary" @onclick="ShowModal">Show Modal</Button>
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal()
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              ShowFooterButton = false
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

See demo here.

How to setup​

  1. Add the Modal component in MainLayout.razor page as shown below.
@inherits LayoutComponentBase

...

... MainLayour.razor code goes here ...

...

<Modal IsServiceModal="true" />
  1. Inject ModalService, then call the ShowAsync(...) method as shown below.
  2. ShowAsync method accepts ModalOption object as a parameter.
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task SaveEmployeeAsync()
    {
        try
        {
            // call the service/api to save the employee details

            var modalOption = new ModalOption
                              {
                                  Title = "Save Employee",
                                  Message = "Employee details saved.",
                                  Type = ModalType.Success
                              };

            await ModalService.ShowAsync(modalOption);
        }
        catch(Exception ex)
        {
            // handle exception

            var modalOption = new ModalOption
                              {
                                  Title = "Save Employee",
                                  Message = $"Error: {ex.Message}.",
                                  Type = ModalType.Danger
                              };

            await ModalService.ShowAsync(modalOption);
        }
    }
}
- + \ No newline at end of file