From ec1a30dd174605b61c99fb7a794fd769b3248c69 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Tue, 19 Sep 2023 11:16:50 +0530 Subject: [PATCH] RCL demos update --- BlazorBootstrap.Demo.Server/App.razor | 6 +- .../BlazorBootstrap.Demo.Server.csproj | 26 +- .../Models/Customer.cs | 14 - .../Models/Department.cs | 13 - .../Models/Employee.cs | 12 - .../Models/Employee1.cs | 10 - .../Models/Employee2.cs | 10 - .../Models/Employee3.cs | 14 - .../Models/Employee4.cs | 10 - .../Accordion/AccordionDocumentation.razor | 99 ------- .../Accordion_Demo_01_Examples.razor | 17 -- .../Accordion_Demo_02_Title_with_Icon.razor | 26 -- .../Accordion/Accordion_Demo_03_Flush.razor | 17 -- ...Accordion_Demo_04_Set_Default_Active.razor | 17 -- .../Accordion_Demo_05_Always_Open.razor | 17 -- ...6_Activate_Individual_AccordionItems.razor | 49 --- .../Accordion/Accordion_Demo_07_Events.razor | 55 ---- .../Pages/Alerts/AlertDocumentation.razor | 42 --- .../Pages/Alerts/Alert_Demo_01_Examples.razor | 8 - .../Alert_Demo_02_Additional_Content.razor | 6 - .../Pages/Alerts/Alert_Demo_03_Icons.razor | 4 - .../Alerts/Alert_Demo_04_Dismissing_A.razor | 1 - .../Alerts/Alert_Demo_04_Dismissing_B.razor | 8 - ...emo_05_Switch_Alert_Type_Dynamically.razor | 33 --- .../Pages/Badge/BadgeDocumentation.razor | 59 ---- .../Pages/Badge/Badge_Demo_01_Examples.razor | 6 - .../Badge_Demo_02_Background_Colors.razor | 8 - .../Badge/Badge_Demo_03_Pill_Badges.razor | 8 - .../Pages/Badge/Badge_Demo_04_Buttons.razor | 16 - .../Badge/Badge_Demo_05_Positioned.razor | 84 ------ .../Badge_Demo_06_Generic_Indicator.razor | 8 - .../Breadcrumb/BreadcrumbDocumentation.razor | 26 -- .../Breadcrumb_Demo_01_Examples.razor | 23 -- .../Breadcrumb_Demo_02_Dividers.razor | 15 - .../Breadcrumb_Demo_03_Embedded_SVG.razor | 15 - .../Pages/Buttons/ButtonDocumentation.razor | 91 ------ .../Buttons/Button_Demo_01_Examples.razor | 9 - .../Buttons/Button_Demo_02_Button_Tags.razor | 2 - .../Button_Demo_03_Outline_Buttons.razor | 7 - .../Buttons/Button_Demo_04_Sizes_A.razor | 2 - .../Buttons/Button_Demo_04_Sizes_B.razor | 2 - .../Button_Demo_05_Disabled_State_A.razor | 2 - .../Button_Demo_05_Disabled_State_B.razor | 2 - .../Button_Demo_06_Block_Buttons_A.razor | 4 - .../Button_Demo_06_Block_Buttons_B.razor | 4 - .../Button_Demo_06_Block_Buttons_C.razor | 4 - .../Button_Demo_06_Block_Buttons_D.razor | 4 - .../Button_Demo_07_Toggle_States_A.razor | 3 - .../Button_Demo_07_Toggle_States_B.razor | 3 - .../Button_Demo_08_Loading_Spinner.razor | 8 - ...on_Demo_08_Show_Hide_Loading_Spinner.razor | 14 - .../Button_Demo_09_A_Show_Tooltip.razor | 7 - ..._Dynamically_update_the_tooltip_text.razor | 11 - .../Button_Demo_09_C_Tooltip_Color.razor | 9 - .../Buttons/Button_Demo_10_Click_Event.razor | 8 - .../Button_Demo_11_Double_Click_Event.razor | 8 - ...Button_Demo_12_Click_Event_With_Args.razor | 10 - ...n_Demo_13_Disable_Enable_Dynamically.razor | 18 -- .../Pages/Callout/CalloutDocumentation.razor | 26 -- .../Callout/Callout_Demo_01_Examples.razor | 19 -- .../Callout_Demo_02_Change_Heading.razor | 19 -- .../Callout/Callout_Demo_03_Large_Text.razor | 24 -- .../Pages/Card/CardDocumentation.razor | 95 ------ .../Pages/Card/Card_Demo_01_Examples.razor | 7 - .../Card_Demo_02_Content_Types_Body.razor | 5 - ..._Content_Types_Titles_Text_And_Links.razor | 9 - .../Card_Demo_04_Content_Types_Images.razor | 19 -- ...rd_Demo_05_Content_Types_List_Groups.razor | 7 - ...d_Demo_06_Content_Types_Kitchen_Sink.razor | 16 - .../Card/Card_Demo_07_Header_And_Footer.razor | 10 - .../Pages/Card/Card_Demo_08_Sizing.razor | 20 -- .../Card/Card_Demo_09_Text_Alignment.razor | 23 -- .../Card_Demo_10_Background_And_Color.razor | 63 ---- .../Pages/Card/Card_Demo_11_Card_Groups.razor | 26 -- ...Card_Demo_12_Card_Groups_With_Footer.razor | 32 -- .../BarCharts/BarChartDocumentation.razor | 48 --- .../BarCharts/BarChart_Demo_01_Examples.razor | 164 ----------- ...BarChart_Demo_02_Horizontal_BarChart.razor | 48 --- .../BarChart_Demo_03_Stacked_BarChart.razor | 77 ----- .../BarCharts/BarChart_Demo_04_Locale.razor | 78 ----- ..._05_Stacked_BarChart_with_Datalabels.razor | 78 ----- .../Pages/Charts/ChartsDocumentation.razor | 38 --- .../Charts/Charts_Demo_00_Examples.razor | 118 -------- .../DoughnutChartDocumentation.razor | 37 --- .../DoughnutChart_Demo_01_Examples.razor | 157 ---------- .../DoughnutChart_Demo_02_Datalabels.razor | 159 ---------- .../LineCharts/LineChartDocumentation.razor | 48 --- .../LineChart_Demo_01_A_Examples.razor | 163 ---------- .../LineChart_Demo_01_B_Examples.razor | 86 ------ .../LineCharts/LineChart_Demo_02_Locale.razor | 87 ------ ...neChart_Demo_03_Dynamically_add_data.razor | 106 ------- .../LineChart_Demo_04_Datalabels.razor | 99 ------- .../PieCharts/PieChartDocumentation.razor | 35 --- .../PieCharts/PieChart_Demo_01_Examples.razor | 155 ---------- .../PieChart_Demo_02_Datalabels.razor | 156 ---------- .../Pages/Charts/Utils_Colors.razor | 197 ------------- .../Collapse/CollapseDocumentation.razor | 72 ----- .../Collapse/Collapse_Demo_01_Examples.razor | 19 -- .../Collapse_Demo_02_Horizontal.razor | 19 -- .../Collapse/Collapse_Demo_03_Events.razor | 44 --- .../ConfirmDialogDocumentation.razor | 63 ---- .../ConfirmDialog_Demo_01_Examples.razor | 24 -- ..._Dynamic_Component_As_Confirm_Dialog.razor | 26 -- ...emo_04_Change_Buttons_Text_And_Color.razor | 32 -- ...ConfirmDialog_Demo_05_Optional_Sizes.razor | 28 -- ...og_Demo_06_Scrolling_Long_Content_01.razor | 21 -- ...og_Demo_06_Scrolling_Long_Content_02.razor | 24 -- ...ialog_Demo_07_Vertically_Centered_01.razor | 25 -- ...ialog_Demo_07_Vertically_Centered_02.razor | 23 -- .../ConfirmDialog/EmployeeDemoComponent.razor | 27 -- .../LongContentDemoComponent.razor | 2 - .../Dropdowns/DropdownDocumentation.razor | 175 ----------- .../Dropdown_Demo_01_Single_Button.razor | 8 - .../Dropdowns/Dropdown_Demo_02_Color.razor | 50 ---- .../Dropdown_Demo_03_Split_Button.razor | 56 ---- .../Dropdowns/Dropdown_Demo_04_A_Sizing.razor | 19 -- .../Dropdowns/Dropdown_Demo_04_B_Sizing.razor | 19 -- ...Dropdown_Demo_05_A_Directions_Dropup.razor | 19 -- ..._Demo_05_B_Directions_DropupCentered.razor | 10 - ...ropdown_Demo_05_C_Directions_Dropend.razor | 19 -- ...pdown_Demo_05_D_Directions_Dropstart.razor | 19 -- .../Dropdowns/Dropdown_Demo_06_Active.razor | 8 - .../Dropdowns/Dropdown_Demo_07_Disabled.razor | 8 - .../Dropdown_Demo_08_Menu_Position.razor | 8 - .../Dropdowns/Dropdown_Demo_09_Header.razor | 9 - .../Dropdowns/Dropdown_Demo_10_Dividers.razor | 10 - .../Dropdowns/Dropdown_Demo_11_Text.razor | 7 - .../Dropdowns/Dropdown_Demo_12_Forms.razor | 112 ------- .../Dropdown_Demo_13_AutoClose.razor | 32 -- .../Dropdowns/Dropdown_Demo_14_Methods.razor | 20 -- .../Dropdowns/Dropdown_Demo_15_Events.razor | 30 -- .../AutoCompleteDocumentation.razor | 89 ------ ...lete_Demo_01_A_Client_Side_Filtering.razor | 60 ---- ...ide_Filtering_With_StringComparision.razor | 61 ---- ...mplete_Demo_02_Server_Side_Filtering.razor | 30 -- ...toComplete_Demo_03_Set_Default_Value.razor | 65 ---- .../AutoComplete_Demo_04_Validations.razor | 87 ------ .../AutoComplete_Demo_05_A_Disable.razor | 42 --- .../AutoComplete_Demo_05_B_Disable.razor | 39 --- .../CurrencyInputDocumentation.razor | 84 ------ .../CurrencyInput_Demo_01_Basic_Usage.razor | 8 - ...cy_Symbols_for_the_Different_Locales.razor | 65 ---- ...cyInput_Demo_03_Hide_Currency_Symbol.razor | 12 - ...ing_FractionDigits_and_IntegerDigits.razor | 13 - ...es_Instead_of_Appending_A_Minus_Sign.razor | 12 - .../CurrencyInput_Demo_06_Generic_Type.razor | 50 ---- ...CurrencyInput_Demo_07_Enable_Min_Max.razor | 10 - ...CurrencyInput_Demo_08_Text_Alignment.razor | 16 - ...Input_Demo_09_Allow_Negative_Numbers.razor | 10 - ...Input_Demo_10_A_Disable_Number_Input.razor | 22 -- ...Input_Demo_10_B_Disable_Number_Input.razor | 19 -- ...cyInput_Demo_10_Disable_Number_Input.razor | 16 - .../CurrencyInput_Demo_11_Validations.razor | 113 ------- ...cyInput_Demo_12_Events_Value_Changed.razor | 20 -- .../DateInput/DateInputDocumentation.razor | 77 ----- .../DateInput_Demo_01_Basic_Usage.razor | 8 - .../DateInput_Demo_02_Generic_Type.razor | 38 --- .../DateInput/DateInput_Demo_03_Max_Min.razor | 69 ----- ...teInput_Demo_04_A_Disable_Date_Input.razor | 22 -- ...teInput_Demo_04_B_Disable_Date_Input.razor | 20 -- ...DateInput_Demo_04_Disable_Date_Input.razor | 17 -- .../DateInput_Demo_05_Validations.razor | 74 ----- ...teInput_Demo_06_Events_Value_Changed.razor | 17 -- ...d_On_The_Entry_In_Another_Date_Field.razor | 128 -------- .../NumberInputDocumentation.razor | 69 ----- .../NumberInput_Demo_01_Basic_Usage.razor | 9 - .../NumberInput_Demo_02_Generic_Type.razor | 50 ---- .../NumberInput_Demo_03_Enable_Min_Max.razor | 10 - .../NumberInput_Demo_04_Step.razor | 18 -- .../NumberInput_Demo_05_Text_Alignment.razor | 16 - ...Input_Demo_06_Allow_Negative_Numbers.razor | 10 - ...Input_Demo_07_A_Disable_Number_Input.razor | 22 -- ...Input_Demo_07_B_Disable_Number_Input.razor | 19 -- ...erInput_Demo_07_Disable_Number_Input.razor | 16 - .../NumberInput_Demo_08_Validations.razor | 113 ------- ...erInput_Demo_09_Events_Value_Changed.razor | 19 -- .../Form/Switch/SwitchDocumentation.razor | 45 --- .../Switch/Switch_Demo_01_Basic_Usage.razor | 10 - .../Switch/Switch_Demo_02_A_Disable.razor | 18 -- .../Switch/Switch_Demo_02_B_Disable.razor | 15 - .../Form/Switch/Switch_Demo_02_Disable.razor | 15 - .../Form/Switch/Switch_Demo_03_Reverse.razor | 5 - .../Switch_Demo_04_Events_Value_Changed.razor | 18 -- .../Form/Switch/Switch_Demo_05_Form.razor | 115 -------- .../TimeInput/TimeInputDocumentation.razor | 74 ----- .../TimeInput_Demo_01_Basic_Usage.razor | 8 - .../TimeInput_Demo_02_Generic_Type.razor | 20 -- .../TimeInput/TimeInput_Demo_03_Max_Min.razor | 35 --- .../TimeInput_Demo_04_A_Disable.razor | 19 -- .../TimeInput_Demo_04_B_Disable.razor | 17 -- ...TimeInput_Demo_04_Disable_Date_Input.razor | 17 -- .../TimeInput_Demo_05_Validations.razor | 116 -------- ...meInput_Demo_06_Events_Value_Changed.razor | 17 -- ...d_On_The_Entry_In_Another_Time_Field.razor | 117 -------- .../GettingStartedDocumentation.razor | 86 ------ ...ter_Template_Add_CSS_References_Index.html | 3 - ..._Template_Add_Script_References_Index.html | 6 - ...rter_Template_Register_services_Program.cs | 1 - .../Snippet_04_Starter_Template_Imports.razor | 1 - ...plate_Remove_Default_References_Index.html | 2 - .../server/GettingStartedDocumentation.razor | 94 ------ ...ter_Template_Add_CSS_References_Index.html | 3 - ...ter_Template_Add_CSS_References_Index.html | 1 - ..._Template_Add_Script_References_Index.html | 6 - ...rter_Template_Register_services_Program.cs | 1 - .../Snippet_04_Starter_Template_Imports.razor | 1 - ...plate_Remove_Default_References_Index.html | 2 - .../GettingStartedDocumentation.razor | 92 ------ ...ter_Template_Add_CSS_References_Index.html | 3 - ...ter_Template_Add_CSS_References_Index.html | 1 - ..._Template_Add_Script_References_Index.html | 6 - ...rter_Template_Register_services_Program.cs | 1 - .../Snippet_04_Starter_Template_Imports.razor | 1 - ...plate_Remove_Default_References_Index.html | 2 - .../Pages/Grid/GridDocumentation.razor | 189 ------------ ...Grid_Demo_01_A_Client_Side_Filtering.razor | 59 ---- ...ide_Filtering_With_StringComparision.razor | 45 --- .../Grid_Demo_02_Client_Side_Paging.razor | 55 ---- .../Grid_Demo_03_Client_Side_Sorting.razor | 56 ---- ...nt_Side_Filtering_Paging_And_Sorting.razor | 48 --- .../Grid_Demo_05_Set_Default_Filter.razor | 51 ---- ...mo_06_Disable_Specific_Column_Filter.razor | 45 --- ...emo_06_Increase_Filter_Textbox_Width.razor | 57 ---- ...er_Side_Filtering_Paging_And_Sorting.razor | 50 ---- .../Grid/Grid_Demo_08_Default_Sorting.razor | 45 --- ...o_09_Disable_Specific_Column_Sorting.razor | 45 --- .../Grid_Demo_10_Header_Text_Alignment.razor | 45 --- .../Grid_Demo_11_Grid_Cell_Alignment.razor | 45 --- .../Grid_Demo_12_Grid_Cell_Formating.razor | 45 --- .../Grid/Grid_Demo_13_Grid_Cell_Nowrap.razor | 57 ---- .../Grid_Demo_14_Pagination_Alignment.razor | 56 ---- .../Pages/Grid/Grid_Demo_15_Empty_Data.razor | 23 -- ..._Demo_16_Save_And_Load_Grid_Settings.razor | 85 ------ ...7_A_Data_Parameter_Assign_Collection.razor | 44 --- ...7_B_Data_Parameter_Update_Collection.razor | 68 ----- ...rid_Demo_18_Specify_Custom_Row_Class.razor | 68 ----- ..._Demo_19_Specify_Custom_Column_Class.razor | 61 ---- ...Demo_20_Specify_Custom_Column_Header.razor | 67 ----- .../Pages/Grid/Grid_Demo_21_Selection.razor | 76 ----- .../Grid_Demo_22_Multiple_Selection.razor | 78 ----- .../Grid/Grid_Demo_23_Disable_Selection.razor | 87 ------ .../Grid/Grid_Demo_24_Dynamic_Page_Size.razor | 62 ---- .../Grid_Demo_25_Page_Size_Selection.razor | 57 ---- .../Grid_Demo_26_Header_Row_CSS_Class.razor | 140 --------- .../Grid_Demo_27_Filters_Row_CSS_Class.razor | 241 --------------- .../Pages/Grid/Grid_Demo_28_Row_Click.razor | 62 ---- .../Grid/Grid_Demo_29_Row_Double_Click.razor | 62 ---- .../Grid/Grid_Demo_30_Translations.razor | 87 ------ .../Pages/Icons/IconDocumentation.razor | 47 --- .../Pages/Icons/Icon_Demo_01_Examples.razor | 4 - .../Pages/Icons/Icon_Demo_02_Sizes.razor | 4 - .../Pages/Icons/Icon_Demo_03_Colors.razor | 11 - .../Icon_Demo_04_Inline_Text_With_Icon.razor | 1 - .../Icons/Icon_Demo_05_Link_With_Icon.razor | 3 - .../Icon_Demo_06_Link_With_Custom_Icon.razor | 3 - ...on_Demo_07_Button_With_Icon_And_Text.razor | 3 - .../Icon_Demo_08_Button_With_Icon_Only.razor | 1 - .../Pages/Icons/Icon_Demo_09_Tooltip.razor | 3 - .../Icons/Icon_Demo_10_Bootstrap_Icons.razor | 13 - BlazorBootstrap.Demo.Server/Pages/Index.razor | 278 ------------------ .../server/LayoutServerDocumentation.razor | 44 --- .../Layout/server/Layout_Server_Demo_01.razor | 47 --- .../LayoutWebAssemblyDocumentation.razor | 45 --- .../Layout_WebAssembly_Demo_01.razor | 47 --- .../Pages/Modal/EmployeeDemoComponent1.razor | 27 -- .../Pages/Modal/EmployeeDemoComponent2.razor | 33 --- .../Pages/Modal/ModalDocumentation.razor | 70 ----- .../Pages/Modal/Modal_Demo_01_Examples.razor | 25 -- ...dal_Demo_02_A_Show_Dynamic_Component.razor | 15 - ...vent_Callback_to_a_Dynamic_Component.razor | 22 -- .../Modal/Modal_Demo_02_Static_Backdrop.razor | 25 -- ...dal_Demo_03_Scrolling_Long_Content_A.razor | 26 -- ...dal_Demo_03_Scrolling_Long_Content_B.razor | 26 -- .../Modal_Demo_04_Vertically_Centered.razor | 25 -- ...4_Vertically_Centered_And_Scrollable.razor | 26 -- .../Modal/Modal_Demo_05_Optional_Sizes.razor | 19 -- .../Modal_Demo_06_Fullscreen_Modal.razor | 34 --- .../Pages/Modal/Modal_Demo_07_Events.razor | 61 ---- .../Offcanvas/EmployeeDemoComponent1.razor | 27 -- .../Offcanvas/EmployeeDemoComponent2.razor | 33 --- .../Offcanvas/OffcanvasDocumentation.razor | 64 ---- .../Offcanvas_Demo_01_Examples.razor | 33 --- ...vas_Demo_02_A_Show_Dynamic_Component.razor | 15 - ...vent_Callback_to_a_Dynamic_Component.razor | 22 -- .../Offcanvas_Demo_03_Placement.razor | 18 -- .../Offcanvas_Demo_04_Static_Backdrop.razor | 23 -- .../Offcanvas_Demo_05_Sizes_A_Small.razor | 23 -- .../Offcanvas_Demo_05_Sizes_B_Large.razor | 23 -- .../Offcanvas/Offcanvas_Demo_06_Events.razor | 52 ---- .../Pagination/PaginationDocumentation.razor | 37 --- .../Pagination_Demo_01_Examples.razor | 5 - ...agination_Demo_02_Working_With_Icons.razor | 7 - ...n_Demo_03_Disabled_And_Active_States.razor | 3 - .../Pagination_Demo_04_Sizing.razor | 3 - .../Pagination_Demo_05_Alignment.razor | 3 - .../Pagination_Demo_06_Events.razor | 15 - .../PlaceholderDocumentation.razor | 41 --- .../Placeholder_Demo_01_Examples.razor | 6 - .../Placeholder_Demo_02_Width.razor | 3 - .../Placeholder_Demo_03_Color.razor | 9 - .../Placeholder_Demo_04_Sizing.razor | 4 - .../Placeholder_Demo_05_Animation.razor | 16 - .../Pages/Preload/PreloadDocumentation.razor | 55 ---- .../Preload/Preload_Demo_01_Examples.razor | 21 -- ...Preload_Demo_02_Change_Spinner_Color.razor | 21 -- ...03_Global_Preload_For_Application_01.razor | 9 - ...03_Global_Preload_For_Application_02.razor | 22 -- .../Progress/ProgressDocumentation.razor | 53 ---- .../Progress_Demo_01_How_It_Works.razor | 24 -- .../Progress/Progress_Demo_02_Labels.razor | 3 - ...s_Demo_03_Set_Width_Programmatically.razor | 29 -- .../Progress/Progress_Demo_04_Height.razor | 12 - .../Progress_Demo_05_Backgrounds.razor | 21 -- ...o_06_Set_Background_Programmatically.razor | 17 -- .../Progress_Demo_07_MultipleBars.razor | 6 - .../Progress/Progress_Demo_08_Striped.razor | 21 -- .../Progress_Demo_09_Animated_Stripes.razor | 21 -- .../Progress_Demo_10_Dynamic_Progress.razor | 78 ----- .../ModalServiceDocumentation.razor | 40 --- .../ModalService_Demo_01_How_It_Works.razor | 24 -- ...ce_Demo_02_Vertically_Centered_Modal.razor | 25 -- .../ModalService_Demo_03_Size.razor | 20 -- ..._Change_Footer_Button_Color_and_Text.razor | 18 -- ...alService_Demo_05_Hide_Footer_Button.razor | 17 -- .../ModalService_Demo_06_Callback.razor | 32 -- ...bal_Modal_Service_For_Application_01.razor | 9 - ...bal_Modal_Service_For_Application_02.razor | 33 --- ...bal_Modal_Service_For_Application_01.razor | 9 - ...bal_Modal_Service_For_Application_02.razor | 33 --- .../Pages/Sidebar/SidebarDocumentation.razor | 53 ---- .../Sidebar/Sidebar_Demo_01_Basic_Usage.razor | 30 -- ...Sidebar_Demo_02_Two_level_navigation.razor | 41 --- .../Sidebar_Demo_03_Change_Icons_Color.razor | 41 --- ...bar_Demo_04_Full_layout_with_sidebar.razor | 55 ---- ...05_Toggle_Sidebar_to_Show_Icons_Only.razor | 58 ---- .../Sidebar/Sidebar_Demo_06_Show_Badge.razor | 59 ---- .../Sidebar_Demo_07_Custom_Brand_Icon.razor | 59 ---- ...bar_Demo_08_Show_Image_as_Brand_Logo.razor | 59 ---- .../Sidebar_Demo_09_Customize_Sidebar.razor | 89 ------ .../Pages/Tabs/TabsDocumentation.razor | 87 ------ .../Pages/Tabs/Tabs_Demo_01_Examples.razor | 22 -- .../Tabs/Tabs_Demo_02_Enable_FadeEffect.razor | 17 -- .../Tabs/Tabs_Demo_03_Title_with_Icon.razor | 26 -- .../Pages/Tabs/Tabs_Demo_04_Disable_Tab.razor | 22 -- .../Tabs/Tabs_Demo_05_Nav_Style_Pills.razor | 17 -- ...abs_Demo_06_Activate_Individual_Tabs.razor | 50 ---- .../Tabs/Tabs_Demo_07_Events_Order.razor | 46 --- .../Tabs/Tabs_Demo_08_Events_Example.razor | 53 ---- ...Demo_09_Set_Active_Tab_OnAfterRender.razor | 53 ---- .../Pages/Toasts/ToastsDocumentation.razor | 55 ---- .../Toasts_Demo_01_Toast_With_Title.razor | 24 -- .../Toasts_Demo_02_Toast_Without_Title.razor | 23 -- .../Toasts/Toasts_Demo_03_A_Auto_Hide.razor | 24 -- ...o_03_B_Auto_Hide_Individual_Messages.razor | 29 -- .../Toasts/Toasts_Demo_04_Placement.razor | 32 -- .../Toasts/Toasts_Demo_05_StackLength.razor | 24 -- ...al_Toasts_Service_For_Application_01.razor | 9 - ...al_Toasts_Service_For_Application_02.razor | 20 -- .../Tooltips/TooltipsDocumentation.razor | 44 --- .../Tooltips/Tooltips_Demo_01_Examples.razor | 4 - ...Demo_02_Disabled_Button_With_Tooltip.razor | 3 - ...oltips_Demo_03_Icon_With_Click_Event.razor | 10 - ...o_04_Dynamically_update_tooltip_text.razor | 10 - ...Demo_05_Tooltip_with_navigation_link.razor | 11 - .../Tooltips/Tooltips_Demo_06_Colors.razor | 29 -- ...ips_Demo_07_Dynamically_Change_Color.razor | 31 -- BlazorBootstrap.Demo.Server/Program.cs | 11 +- .../Services/CustomerService.cs | 107 ------- .../Services/EmployeeService.cs | 106 ------- .../Services/ICustomerService.cs | 8 - .../Services/IEmployeeService.cs | 6 - .../Shared/Components/CodeSnippet.cs | 92 ------ .../Shared/Components/Demo.cs | 173 ----------- .../Shared/Components/MetaTags.razor | 26 -- .../Shared/Components/MetaTags.razor.cs | 45 --- .../Shared/Components/SectionHeading.razor | 32 -- .../Shared/Components/SectionHeading.razor.cs | 43 --- .../Shared/EmptyLayout.razor | 129 -------- .../Shared/EmptyLayout.razor.css | 3 - .../Shared/MainLayout.razor | 20 -- .../Shared/MainLayout.razor.cs | 88 ------ .../Shared/MainLayout.razor.css | 73 ----- BlazorBootstrap.Demo.Server/Usings.cs | 4 +- BlazorBootstrap.Demo.Server/_Imports.razor | 1 - 384 files changed, 11 insertions(+), 14215 deletions(-) delete mode 100644 BlazorBootstrap.Demo.Server/Models/Customer.cs delete mode 100644 BlazorBootstrap.Demo.Server/Models/Department.cs delete mode 100644 BlazorBootstrap.Demo.Server/Models/Employee.cs delete mode 100644 BlazorBootstrap.Demo.Server/Models/Employee1.cs delete mode 100644 BlazorBootstrap.Demo.Server/Models/Employee2.cs delete mode 100644 BlazorBootstrap.Demo.Server/Models/Employee3.cs delete mode 100644 BlazorBootstrap.Demo.Server/Models/Employee4.cs delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Accordion/AccordionDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_02_Title_with_Icon.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_03_Flush.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_04_Set_Default_Active.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_05_Always_Open.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_06_Activate_Individual_AccordionItems.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_07_Events.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Alerts/AlertDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_02_Additional_Content.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_03_Icons.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_04_Dismissing_A.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_04_Dismissing_B.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_05_Switch_Alert_Type_Dynamically.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Badge/BadgeDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_02_Background_Colors.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_03_Pill_Badges.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_04_Buttons.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_05_Positioned.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_06_Generic_Indicator.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Breadcrumb/BreadcrumbDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_02_Dividers.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_03_Embedded_SVG.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/ButtonDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_02_Button_Tags.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_03_Outline_Buttons.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_04_Sizes_A.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_04_Sizes_B.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_05_Disabled_State_A.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_05_Disabled_State_B.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_A.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_B.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_C.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_D.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_07_Toggle_States_A.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_07_Toggle_States_B.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_08_Loading_Spinner.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_A_Show_Tooltip.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_B_Dynamically_update_the_tooltip_text.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_C_Tooltip_Color.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_10_Click_Event.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_11_Double_Click_Event.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_12_Click_Event_With_Args.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_13_Disable_Enable_Dynamically.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Callout/CalloutDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_02_Change_Heading.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_03_Large_Text.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/CardDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_02_Content_Types_Body.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_03_Content_Types_Titles_Text_And_Links.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_04_Content_Types_Images.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_05_Content_Types_List_Groups.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_06_Content_Types_Kitchen_Sink.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_07_Header_And_Footer.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_08_Sizing.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_09_Text_Alignment.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_10_Background_And_Color.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_11_Card_Groups.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_12_Card_Groups_With_Footer.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChartDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/ChartsDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_00_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChartDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChartDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Utils_Colors.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Collapse/CollapseDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_02_Horizontal.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_03_Events.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_03_Dynamic_Component_As_Confirm_Dialog.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_04_Change_Buttons_Text_And_Color.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_05_Optional_Sizes.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_01.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_02.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_01.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_02.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/EmployeeDemoComponent.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/LongContentDemoComponent.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/DropdownDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_01_Single_Button.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_02_Color.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_03_Split_Button.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_A_Directions_Dropup.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_B_Directions_DropupCentered.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_C_Directions_Dropend.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_D_Directions_Dropstart.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_06_Active.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_07_Disabled.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_08_Menu_Position.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_09_Header.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_10_Dividers.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_11_Text.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_12_Forms.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_13_AutoClose.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_14_Methods.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_15_Events.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_01_A_Client_Side_Filtering.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_02_Server_Side_Filtering.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_03_Set_Default_Value.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_05_A_Disable.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_05_B_Disable.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_01_Basic_Usage.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_02_Show_Currency_Symbols_for_the_Different_Locales.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_03_Hide_Currency_Symbol.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_04_Using_FractionDigits_and_IntegerDigits.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_05_Parentheses_Instead_of_Appending_A_Minus_Sign.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_06_Generic_Type.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_07_Enable_Min_Max.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_08_Text_Alignment.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_09_Allow_Negative_Numbers.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_A_Disable_Number_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_B_Disable_Number_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_Disable_Number_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_12_Events_Value_Changed.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInputDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_01_Basic_Usage.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_02_Generic_Type.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_03_Max_Min.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_A_Disable_Date_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_B_Disable_Date_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_Disable_Date_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_05_Validations.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_06_Events_Value_Changed.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInputDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_01_Basic_Usage.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_03_Enable_Min_Max.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_04_Step.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_05_Text_Alignment.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_06_Allow_Negative_Numbers.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_A_Disable_Number_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_B_Disable_Number_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_Disable_Number_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_08_Validations.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_09_Events_Value_Changed.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/Switch/SwitchDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_01_Basic_Usage.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_A_Disable.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_B_Disable.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_Disable.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_03_Reverse.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_05_Form.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInputDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_01_Basic_Usage.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_02_Generic_Type.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_03_Max_Min.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_A_Disable.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_B_Disable.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_Disable_Date_Input.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_05_Validations.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_06_Events_Value_Changed.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/GettingStartedDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_02_Starter_Template_Add_Script_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_03_Starter_Template_Register_services_Program.cs delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_04_Starter_Template_Imports.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_05_Starter_Template_Remove_Default_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/GettingStartedDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_01_B_Starter_Template_Add_CSS_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_02_Starter_Template_Add_Script_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_03_Starter_Template_Register_services_Program.cs delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_04_Starter_Template_Imports.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_05_Starter_Template_Remove_Default_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/GettingStartedDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_01_B_Starter_Template_Add_CSS_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_02_Starter_Template_Add_Script_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_03_Starter_Template_Register_services_Program.cs delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_04_Starter_Template_Imports.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_05_Starter_Template_Remove_Default_References_Index.html delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/GridDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_01_A_Client_Side_Filtering.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_02_Client_Side_Paging.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_03_Client_Side_Sorting.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_04_Client_Side_Filtering_Paging_And_Sorting.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_05_Set_Default_Filter.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_06_Disable_Specific_Column_Filter.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_06_Increase_Filter_Textbox_Width.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_07_Server_Side_Filtering_Paging_And_Sorting.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_08_Default_Sorting.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_09_Disable_Specific_Column_Sorting.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_10_Header_Text_Alignment.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_11_Grid_Cell_Alignment.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_12_Grid_Cell_Formating.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_13_Grid_Cell_Nowrap.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_14_Pagination_Alignment.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_15_Empty_Data.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_16_Save_And_Load_Grid_Settings.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_17_A_Data_Parameter_Assign_Collection.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_17_B_Data_Parameter_Update_Collection.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_18_Specify_Custom_Row_Class.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_19_Specify_Custom_Column_Class.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_20_Specify_Custom_Column_Header.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_21_Selection.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_22_Multiple_Selection.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_23_Disable_Selection.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_24_Dynamic_Page_Size.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_25_Page_Size_Selection.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_26_Header_Row_CSS_Class.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_27_Filters_Row_CSS_Class.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_28_Row_Click.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_29_Row_Double_Click.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_30_Translations.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/IconDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_02_Sizes.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_03_Colors.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_04_Inline_Text_With_Icon.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_05_Link_With_Icon.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_06_Link_With_Custom_Icon.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_07_Button_With_Icon_And_Text.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_08_Button_With_Icon_Only.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_09_Tooltip.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_10_Bootstrap_Icons.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Index.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Layout/server/LayoutServerDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Layout/server/Layout_Server_Demo_01.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/EmployeeDemoComponent1.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/EmployeeDemoComponent2.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/ModalDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_A_Show_Dynamic_Component.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_Static_Backdrop.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_03_Scrolling_Long_Content_A.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_03_Scrolling_Long_Content_B.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_04_Vertically_Centered.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_04_Vertically_Centered_And_Scrollable.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_05_Optional_Sizes.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_06_Fullscreen_Modal.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_07_Events.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/EmployeeDemoComponent1.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/EmployeeDemoComponent2.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/OffcanvasDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_02_A_Show_Dynamic_Component.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_03_Placement.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_04_Static_Backdrop.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_05_Sizes_A_Small.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_05_Sizes_B_Large.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_06_Events.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Pagination/PaginationDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_02_Working_With_Icons.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_03_Disabled_And_Active_States.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_04_Sizing.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_05_Alignment.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_06_Events.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Placeholders/PlaceholderDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_02_Width.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_03_Color.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_04_Sizing.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_05_Animation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Preload/PreloadDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_02_Change_Spinner_Color.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_03_Global_Preload_For_Application_01.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_03_Global_Preload_For_Application_02.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/ProgressDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_01_How_It_Works.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_02_Labels.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_03_Set_Width_Programmatically.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_04_Height.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_05_Backgrounds.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_06_Set_Background_Programmatically.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_07_MultipleBars.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_08_Striped.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_09_Animated_Stripes.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_10_Dynamic_Progress.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalServiceDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_01_How_It_Works.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_02_Vertically_Centered_Modal.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_03_Size.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_04_Change_Footer_Button_Color_and_Text.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_05_Hide_Footer_Button.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Callback.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Global_Modal_Service_For_Application_01.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Global_Modal_Service_For_Application_02.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_100_Global_Modal_Service_For_Application_01.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_100_Global_Modal_Service_For_Application_02.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/SidebarDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/TabsDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_02_Enable_FadeEffect.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_03_Title_with_Icon.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_04_Disable_Tab.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_05_Nav_Style_Pills.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_06_Activate_Individual_Tabs.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_07_Events_Order.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_08_Events_Example.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_09_Set_Active_Tab_OnAfterRender.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/ToastsDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_01_Toast_With_Title.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_02_Toast_Without_Title.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_03_A_Auto_Hide.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_03_B_Auto_Hide_Individual_Messages.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_04_Placement.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_05_StackLength.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_06_Global_Toasts_Service_For_Application_01.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_06_Global_Toasts_Service_For_Application_02.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tooltips/TooltipsDocumentation.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_02_Disabled_Button_With_Tooltip.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_03_Icon_With_Click_Event.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_04_Dynamically_update_tooltip_text.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_05_Tooltip_with_navigation_link.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_06_Colors.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_07_Dynamically_Change_Color.razor delete mode 100644 BlazorBootstrap.Demo.Server/Services/CustomerService.cs delete mode 100644 BlazorBootstrap.Demo.Server/Services/EmployeeService.cs delete mode 100644 BlazorBootstrap.Demo.Server/Services/ICustomerService.cs delete mode 100644 BlazorBootstrap.Demo.Server/Services/IEmployeeService.cs delete mode 100644 BlazorBootstrap.Demo.Server/Shared/Components/CodeSnippet.cs delete mode 100644 BlazorBootstrap.Demo.Server/Shared/Components/Demo.cs delete mode 100644 BlazorBootstrap.Demo.Server/Shared/Components/MetaTags.razor delete mode 100644 BlazorBootstrap.Demo.Server/Shared/Components/MetaTags.razor.cs delete mode 100644 BlazorBootstrap.Demo.Server/Shared/Components/SectionHeading.razor delete mode 100644 BlazorBootstrap.Demo.Server/Shared/Components/SectionHeading.razor.cs delete mode 100644 BlazorBootstrap.Demo.Server/Shared/EmptyLayout.razor delete mode 100644 BlazorBootstrap.Demo.Server/Shared/EmptyLayout.razor.css delete mode 100644 BlazorBootstrap.Demo.Server/Shared/MainLayout.razor delete mode 100644 BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.cs delete mode 100644 BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.css diff --git a/BlazorBootstrap.Demo.Server/App.razor b/BlazorBootstrap.Demo.Server/App.razor index 6fd3ed1b5..94953bc3e 100644 --- a/BlazorBootstrap.Demo.Server/App.razor +++ b/BlazorBootstrap.Demo.Server/App.razor @@ -1,11 +1,11 @@ - + - + Not found - +

Sorry, there's nothing at this address.

 diff --git a/BlazorBootstrap.Demo.Server/BlazorBootstrap.Demo.Server.csproj b/BlazorBootstrap.Demo.Server/BlazorBootstrap.Demo.Server.csproj index 18e205922..e7fe3f7fd 100644 --- a/BlazorBootstrap.Demo.Server/BlazorBootstrap.Demo.Server.csproj +++ b/BlazorBootstrap.Demo.Server/BlazorBootstrap.Demo.Server.csproj @@ -7,31 +7,7 @@ - - - + - - - - - - - - - - - - - - - - - - - - - - diff --git a/BlazorBootstrap.Demo.Server/Models/Customer.cs b/BlazorBootstrap.Demo.Server/Models/Customer.cs deleted file mode 100644 index b6abcb285..000000000 --- a/BlazorBootstrap.Demo.Server/Models/Customer.cs +++ /dev/null @@ -1,14 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public record Customer(int CustomerId, string CustomerName); - -public record Customer2 -( - int CustomerId, - string CustomerName, - string Phone, - string Email, - string Address, - string PostalZip, - string Country -); \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Models/Department.cs b/BlazorBootstrap.Demo.Server/Models/Department.cs deleted file mode 100644 index 7e846650a..000000000 --- a/BlazorBootstrap.Demo.Server/Models/Department.cs +++ /dev/null @@ -1,13 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public class Department -{ - public string Name { get; set; } - public List Employees { get; set; } - - public Department(string name, List employees) - { - Name = name; - Employees = employees; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Models/Employee.cs b/BlazorBootstrap.Demo.Server/Models/Employee.cs deleted file mode 100644 index fb3e101e7..000000000 --- a/BlazorBootstrap.Demo.Server/Models/Employee.cs +++ /dev/null @@ -1,12 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public class Employee -{ - public int Id { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public string Designation { get; set; } - public decimal Salary { get; set; } - public DateTime DOJ { get; set; } - public bool IsActive { get; set; } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Models/Employee1.cs b/BlazorBootstrap.Demo.Server/Models/Employee1.cs deleted file mode 100644 index 7e2e8cd14..000000000 --- a/BlazorBootstrap.Demo.Server/Models/Employee1.cs +++ /dev/null @@ -1,10 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public record class Employee1 -{ - public int Id { get; set; } - public string Name { get; set; } - public string Designation { get; set; } - public DateOnly DOJ { get; set; } - public bool IsActive { get; set; } -} diff --git a/BlazorBootstrap.Demo.Server/Models/Employee2.cs b/BlazorBootstrap.Demo.Server/Models/Employee2.cs deleted file mode 100644 index 0df613f2a..000000000 --- a/BlazorBootstrap.Demo.Server/Models/Employee2.cs +++ /dev/null @@ -1,10 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public record class Employee2 -{ - public int Id { get; init; } - public string Name { get; init; } - public string Designation { get; init; } - public decimal Salary { get; init; } - public bool IsActive { get; init; } -} diff --git a/BlazorBootstrap.Demo.Server/Models/Employee3.cs b/BlazorBootstrap.Demo.Server/Models/Employee3.cs deleted file mode 100644 index 2fd2251cf..000000000 --- a/BlazorBootstrap.Demo.Server/Models/Employee3.cs +++ /dev/null @@ -1,14 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public record class Employee3 -{ - public int Id { get; init; } - public string FirstName { get; init; } - public string LastName { get; init; } - public string Email { get; set; } - public string Company { get; set; } - public string Designation { get; init; } - public DateOnly DOJ { get; init; } - public decimal Salary { get; init; } - public bool IsActive { get; init; } -} diff --git a/BlazorBootstrap.Demo.Server/Models/Employee4.cs b/BlazorBootstrap.Demo.Server/Models/Employee4.cs deleted file mode 100644 index c26c76450..000000000 --- a/BlazorBootstrap.Demo.Server/Models/Employee4.cs +++ /dev/null @@ -1,10 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public record class Employee4 -{ - public int? Id { get; set; } - public string Name { get; set; } - public string Designation { get; set; } - public DateOnly? DOJ { get; set; } - public bool IsActive { get; set; } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Accordion/AccordionDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Accordion/AccordionDocumentation.razor deleted file mode 100644 index 217009d6e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Accordion/AccordionDocumentation.razor +++ /dev/null @@ -1,99 +0,0 @@ -@page "/accordion" - -@title - - - -

Blazor Accordion

-
- Build vertically collapsing accordions in combination with our Collapse component. -
- - -
- The Accordion component uses the Collapse component internally to make it collapsible. -
- - - The animation effect of this component is dependent on the prefers-reduced-motion media query.
- See the reduced motion section of our accessibility documentation. - - - -
- Click the accordions below to expand/collapse the accordion content. -
- - - -
- To customize the accordion title, use TitleTemplate, as shown in the below example. -
- - - -
- Set the Flush parameter to true to remove borders and rounded corners to render accordions edge-to-edge with their parent container. -
- - - -
- Set the IsActive parameter to true to keep the accordion item open by default. -
- - - -
- Set the AlwaysOpen parameter to true to keep accordion items open when another item is opened. -
- - - -
- You can activate individual accordion items in several ways. - Use predefined methods ShowFirstAccordionItemAsync, ShowLastAccordionItemAsync, ShowAccordionItemByNameAsync, and ShowAccordionItemByIndexAsync, as shown below. -
- - - -
- Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality. - - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameDescription
OnHidingThis event is fired immediately when the hide method has been called.
OnHiddenThis event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete).
OnShowingThis event fires immediately when the show method is called.
OnShownThis event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete).
- - If no accordion item is active, then the OnHiding and OnHidden events will not be fired. - -
- - -@code { - private string pageUrl = "/accordion"; - private string title = "Blazor Accordion Component"; - private string description = "Build vertically collapsing accordions in combination with our Collapse component."; - private string imageUrl = "https://i.imgur.com/g4zpMXp.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_01_Examples.razor deleted file mode 100644 index 0303a22e2..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_01_Examples.razor +++ /dev/null @@ -1,17 +0,0 @@ - - - - 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. - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_02_Title_with_Icon.razor b/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_02_Title_with_Icon.razor deleted file mode 100644 index 743460343..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_02_Title_with_Icon.razor +++ /dev/null @@ -1,26 +0,0 @@ - - - - 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. - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_03_Flush.razor b/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_03_Flush.razor deleted file mode 100644 index b75355408..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_03_Flush.razor +++ /dev/null @@ -1,17 +0,0 @@ - - - - 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. - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_04_Set_Default_Active.razor b/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_04_Set_Default_Active.razor deleted file mode 100644 index 1f0dd3f06..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_04_Set_Default_Active.razor +++ /dev/null @@ -1,17 +0,0 @@ - - - - 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. - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_05_Always_Open.razor b/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_05_Always_Open.razor deleted file mode 100644 index fdcbf5994..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_05_Always_Open.razor +++ /dev/null @@ -1,17 +0,0 @@ - - - - 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. - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_06_Activate_Individual_AccordionItems.razor b/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_06_Activate_Individual_AccordionItems.razor deleted file mode 100644 index c40bb2eb5..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_06_Activate_Individual_AccordionItems.razor +++ /dev/null @@ -1,49 +0,0 @@ - - - - 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(); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_07_Events.razor b/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_07_Events.razor deleted file mode 100644 index e6ecffb83..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Accordion/Accordion_Demo_07_Events.razor +++ /dev/null @@ -1,55 +0,0 @@ - - - - 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}")); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Alerts/AlertDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Alerts/AlertDocumentation.razor deleted file mode 100644 index 06fd5e374..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Alerts/AlertDocumentation.razor +++ /dev/null @@ -1,42 +0,0 @@ -@page "/alerts" - -@title - - - -

Blazor Alerts

-
Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
- - -
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
- - - -
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
- - - -
Similarly, you can use Bootstrap Icons to create alerts with icons.
- - - -
1. Using the Dismissable="true", it’s possible to dismiss any alert inline.
- - -
2. Manually we can close an alert with button click.
- - - - 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. - - - - - -@code{ - private string pageUrl = "/alerts"; - private string title = "Blazor Alert Component"; - private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; - private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_01_Examples.razor deleted file mode 100644 index 1b4e5386a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_01_Examples.razor +++ /dev/null @@ -1,8 +0,0 @@ - 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! \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_02_Additional_Content.razor b/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_02_Additional_Content.razor deleted file mode 100644 index ba5c22c64..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_02_Additional_Content.razor +++ /dev/null @@ -1,6 +0,0 @@ - -

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.

- \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_03_Icons.razor b/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_03_Icons.razor deleted file mode 100644 index ac84b153b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_03_Icons.razor +++ /dev/null @@ -1,4 +0,0 @@ - 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 \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_04_Dismissing_A.razor b/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_04_Dismissing_A.razor deleted file mode 100644 index 4d7678c8d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_04_Dismissing_A.razor +++ /dev/null @@ -1 +0,0 @@ - Holy guacamole! You should check in on some of those fields below. \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_04_Dismissing_B.razor b/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_04_Dismissing_B.razor deleted file mode 100644 index c8657c8bd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_04_Dismissing_B.razor +++ /dev/null @@ -1,8 +0,0 @@ - - Holy guacamole! You should check in on some of those fields below. - - -@code { - Alert warningAlert; - private async Task CloseAlert() => await warningAlert?.CloseAsync(); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_05_Switch_Alert_Type_Dynamically.razor b/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_05_Switch_Alert_Type_Dynamically.razor deleted file mode 100644 index b354a3680..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Alerts/Alert_Demo_05_Switch_Alert_Type_Dynamically.razor +++ /dev/null @@ -1,33 +0,0 @@ - @alertMessage - - - - - -@code { - // alert - AlertColor alertColor = AlertColor.Primary; - IconName alertIconName = IconName.CheckCircleFill; - string alertMessage = "A simple alert - check it out!"; - - private void ShowSuccessAlert() - { - alertColor = AlertColor.Success; - alertIconName = IconName.CheckCircleFill; - alertMessage = "A simple success alert - check it out!"; - } - - private void ShowDangerAlert() - { - alertColor = AlertColor.Danger; - alertIconName = IconName.ExclamationTriangleFill; - alertMessage = "A simple danger alert - check it out!"; - } - - private void ShowInfoAlert() - { - alertColor = AlertColor.Info; - alertIconName = IconName.ExclamationCircleFill; - alertMessage = "A simple info alert - check it out!"; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Badge/BadgeDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Badge/BadgeDocumentation.razor deleted file mode 100644 index 78fc2c617..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Badge/BadgeDocumentation.razor +++ /dev/null @@ -1,59 +0,0 @@ -@page "/badge" - -@title - - - -

Blazor Badge

-
- The Blazor Bootstrap Badge component shows the small count and labels. -
- - -
- 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. -
- - - - - - 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. - - - -
- Use the IndicatorType parameter to make badges more rounded with a larger border-radius. -
- - - -
- Badges can be used as part of links or buttons to provide a counter. -
- -
-

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

-

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

-
- - -
- Use Position and Placement parameters to position it in the corner of a link or button. -
- - - -
- You can also replace the badge with a generic indicator without the count. -
- - -@code { - private string pageUrl = "/badge"; - private string title = "Blazor Badge Component"; - private string description = "The Blazor Bootstrap Badge component shows the small count and labels."; - private string imageUrl = "https://i.imgur.com/1mVjqQv.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_01_Examples.razor deleted file mode 100644 index c3c7ed3fb..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_01_Examples.razor +++ /dev/null @@ -1,6 +0,0 @@ -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
\ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_02_Background_Colors.razor b/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_02_Background_Colors.razor deleted file mode 100644 index e814da671..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_02_Background_Colors.razor +++ /dev/null @@ -1,8 +0,0 @@ -Primary -Secondary -Success -Danger -Warning -Info -Light -Dark \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_03_Pill_Badges.razor b/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_03_Pill_Badges.razor deleted file mode 100644 index 59a5548b5..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_03_Pill_Badges.razor +++ /dev/null @@ -1,8 +0,0 @@ -Primary -Secondary -Success -Danger -Warning -Info -Light -Dark \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_04_Buttons.razor b/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_04_Buttons.razor deleted file mode 100644 index 81087ae8c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_04_Buttons.razor +++ /dev/null @@ -1,16 +0,0 @@ -
- - -
-
- - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_05_Positioned.razor b/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_05_Positioned.razor deleted file mode 100644 index cfcc33338..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_05_Positioned.razor +++ /dev/null @@ -1,84 +0,0 @@ -
- - - - - -
-
- - - - - -
-
- - - - - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_06_Generic_Indicator.razor b/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_06_Generic_Indicator.razor deleted file mode 100644 index 8973c8a74..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Badge/Badge_Demo_06_Generic_Indicator.razor +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/BreadcrumbDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/BreadcrumbDocumentation.razor deleted file mode 100644 index c1835a2c6..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/BreadcrumbDocumentation.razor +++ /dev/null @@ -1,26 +0,0 @@ -@page "/breadcrumb" - -@title - - - -

Blazor Breadcrumb

-
- Indicate the current page's location within a navigational hierarchy that automatically adds separators. -
- - - - - - - - - - -@code { - private string pageUrl = "/breadcrumb"; - private string title = "Blazor Breadcrumb Component"; - private string description = "Indicate the current page's location within a navigational hierarchy that automatically adds separators."; - private string imageUrl = "https://i.imgur.com/hO90HoC.jpg"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_01_Examples.razor deleted file mode 100644 index 8ee170f2b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_01_Examples.razor +++ /dev/null @@ -1,23 +0,0 @@ - - - -@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 } - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_02_Dividers.razor b/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_02_Dividers.razor deleted file mode 100644 index 5bb2f9f81..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_02_Dividers.razor +++ /dev/null @@ -1,15 +0,0 @@ - - -@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 } - }; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_03_Embedded_SVG.razor b/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_03_Embedded_SVG.razor deleted file mode 100644 index e02c75068..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Breadcrumb/Breadcrumb_Demo_03_Embedded_SVG.razor +++ /dev/null @@ -1,15 +0,0 @@ - - -@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 } - }; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/ButtonDocumentation.razor deleted file mode 100644 index 67b947547..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/ButtonDocumentation.razor +++ /dev/null @@ -1,91 +0,0 @@ -@page "/buttons" - -@title - - - -

Blazor Buttons

-
- Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. -
- - -
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
- - - - - - - - - - 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. - - - -
Fancy larger or smaller buttons? Add Size="Size.Large" or Size="Size.Small" for additional sizes.
- - - - -
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.
- - - Disabled buttons using the Type="ButtonType.Link" parameter behave a bit different. - - - - - - - - - - - - - - - - - - - -
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.
- - - - - - -
- Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. -
- - - - - - -
- Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. - The TooltipColor parameter can be used to customize the color of the tooltip. -
- - - - Support for HTML tooltips is not available at this moment. - - - - - - - -@code { - private string pageUrl = "/buttons"; - private string title = "Blazor Button Component"; - private string description = "Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc."; - private string imageUrl = "https://i.imgur.com/Ne7FJ5H.jpg"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_01_Examples.razor deleted file mode 100644 index a2005c93d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_01_Examples.razor +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_02_Button_Tags.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_02_Button_Tags.razor deleted file mode 100644 index 34625fe8d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_02_Button_Tags.razor +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_03_Outline_Buttons.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_03_Outline_Buttons.razor deleted file mode 100644 index 5c66b6a3a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_03_Outline_Buttons.razor +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_04_Sizes_A.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_04_Sizes_A.razor deleted file mode 100644 index b2559ce9d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_04_Sizes_A.razor +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_04_Sizes_B.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_04_Sizes_B.razor deleted file mode 100644 index 8a6d60014..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_04_Sizes_B.razor +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_05_Disabled_State_A.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_05_Disabled_State_A.razor deleted file mode 100644 index fab821577..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_05_Disabled_State_A.razor +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_05_Disabled_State_B.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_05_Disabled_State_B.razor deleted file mode 100644 index b874a843d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_05_Disabled_State_B.razor +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_A.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_A.razor deleted file mode 100644 index 54e5070c9..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_A.razor +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_B.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_B.razor deleted file mode 100644 index 870826e2b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_B.razor +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_C.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_C.razor deleted file mode 100644 index 52ffc1edf..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_C.razor +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_D.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_D.razor deleted file mode 100644 index 9e69a359f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_06_Block_Buttons_D.razor +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_07_Toggle_States_A.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_07_Toggle_States_A.razor deleted file mode 100644 index d40e7889a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_07_Toggle_States_A.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_07_Toggle_States_B.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_07_Toggle_States_B.razor deleted file mode 100644 index 1f03616ec..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_07_Toggle_States_B.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_08_Loading_Spinner.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_08_Loading_Spinner.razor deleted file mode 100644 index 333e5a846..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_08_Loading_Spinner.razor +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor deleted file mode 100644 index 4c81de362..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor +++ /dev/null @@ -1,14 +0,0 @@ - - -@code { - private Button saveButton; - - private async Task OnSaveClick() - { - saveButton?.ShowLoading("Saving details..."); - - await Task.Delay(5000); // API call - - saveButton?.HideLoading(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_A_Show_Tooltip.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_A_Show_Tooltip.razor deleted file mode 100644 index 3f0b3f667..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_A_Show_Tooltip.razor +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_B_Dynamically_update_the_tooltip_text.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_B_Dynamically_update_the_tooltip_text.razor deleted file mode 100644 index 60ad8d261..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_B_Dynamically_update_the_tooltip_text.razor +++ /dev/null @@ -1,11 +0,0 @@ -
- -
- - - -@code { - private string text = "Tooltip text"; - - private void ChangeTooltip() => text = $"Updated {DateTime.Now.ToLongTimeString()}"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_C_Tooltip_Color.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_C_Tooltip_Color.razor deleted file mode 100644 index 1a4fc6cc3..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_09_C_Tooltip_Color.razor +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_10_Click_Event.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_10_Click_Event.razor deleted file mode 100644 index bdd786abe..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_10_Click_Event.razor +++ /dev/null @@ -1,8 +0,0 @@ - - -@code { - protected void OnClick(EventArgs args) - { - Console.WriteLine("click event"); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_11_Double_Click_Event.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_11_Double_Click_Event.razor deleted file mode 100644 index baff73b68..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_11_Double_Click_Event.razor +++ /dev/null @@ -1,8 +0,0 @@ - - -@code { - protected void OnDoubleClick(EventArgs args) - { - Console.WriteLine("double click event"); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_12_Click_Event_With_Args.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_12_Click_Event_With_Args.razor deleted file mode 100644 index 4270c38ef..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_12_Click_Event_With_Args.razor +++ /dev/null @@ -1,10 +0,0 @@ - - -@code { - public string message = "Test message"; - - protected void OnClickWithArgs(EventArgs args, string message) - { - Console.WriteLine($"message: {message}"); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_13_Disable_Enable_Dynamically.razor b/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_13_Disable_Enable_Dynamically.razor deleted file mode 100644 index d3dd74fba..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Buttons/Button_Demo_13_Disable_Enable_Dynamically.razor +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - -@code -{ - bool disableButton = true; - string tooltip = ""; - - public void SwapDisable() - { - disableButton = !disableButton; - tooltip = $"Updated at {DateTime.Now}"; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Callout/CalloutDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Callout/CalloutDocumentation.razor deleted file mode 100644 index ffb6f8a74..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Callout/CalloutDocumentation.razor +++ /dev/null @@ -1,26 +0,0 @@ -@page "/callout" - -@title - - - -

Blazor Callout

-
- Blazor Bootstrap callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content. -
- - - - - - - - - - -@code { - private string pageUrl = "/callout"; - private string title = "Blazor Callout Component"; - private string description = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner."; - private string imageUrl = "https://i.imgur.com/e9wy7fg.jpg"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_01_Examples.razor deleted file mode 100644 index 5536dbfa8..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_01_Examples.razor +++ /dev/null @@ -1,19 +0,0 @@ - - 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. - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_02_Change_Heading.razor b/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_02_Change_Heading.razor deleted file mode 100644 index 7e1582aa7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_02_Change_Heading.razor +++ /dev/null @@ -1,19 +0,0 @@ - - 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. - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_03_Large_Text.razor b/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_03_Large_Text.razor deleted file mode 100644 index 92d71d538..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Callout/Callout_Demo_03_Large_Text.razor +++ /dev/null @@ -1,24 +0,0 @@ - -

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.

- \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/CardDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Card/CardDocumentation.razor deleted file mode 100644 index 0fb206524..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/CardDocumentation.razor +++ /dev/null @@ -1,95 +0,0 @@ -@page "/card" - -@title - - - -

Blazor Card

-
- BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options. -
- - -
- 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. -
- - -
- 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. -
- - - -
- Cards support a wide variety of content, including images, text, list groups, links, and more. - Below are examples of what’s supported. -
- - -
- The building block of a card is the CardBody. Use it whenever you need a padded section within a card. -
- - - - - - - - - -
- Create lists of content in a card with a flush list group. -
- - - -
- 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. -
- - - -
- Add an optional header and/or footer within a card. -
- - - -
- 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. -
- - - -
- You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter. -
- - - - - - -
- 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. -
- - - -
- When using card groups with footers, their content will automatically line up. -
- - -@code { - private string pageUrl = "/card"; - private string title = "Blazor Card Component"; - private string description = "BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options."; - private string imageUrl = "https://i.imgur.com/RhytwPa.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_01_Examples.razor deleted file mode 100644 index 61232cd7a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_01_Examples.razor +++ /dev/null @@ -1,7 +0,0 @@ - - - Card title - Some quick example text to build on the card title and make up the bulk of the card's content. - - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_02_Content_Types_Body.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_02_Content_Types_Body.razor deleted file mode 100644 index 763af5725..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_02_Content_Types_Body.razor +++ /dev/null @@ -1,5 +0,0 @@ - - - This is some text within a card body. - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_03_Content_Types_Titles_Text_And_Links.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_03_Content_Types_Titles_Text_And_Links.razor deleted file mode 100644 index 966baea01..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_03_Content_Types_Titles_Text_And_Links.razor +++ /dev/null @@ -1,9 +0,0 @@ - - - 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 - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_04_Content_Types_Images.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_04_Content_Types_Images.razor deleted file mode 100644 index 39459cf5d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_04_Content_Types_Images.razor +++ /dev/null @@ -1,19 +0,0 @@ - - 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 - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_05_Content_Types_List_Groups.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_05_Content_Types_List_Groups.razor deleted file mode 100644 index 818a28327..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_05_Content_Types_List_Groups.razor +++ /dev/null @@ -1,7 +0,0 @@ - -
    -
  • An item
    • -
  • A second item
    • -
  • A third item
    • -
- diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_06_Content_Types_Kitchen_Sink.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_06_Content_Types_Kitchen_Sink.razor deleted file mode 100644 index 57f32412a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_06_Content_Types_Kitchen_Sink.razor +++ /dev/null @@ -1,16 +0,0 @@ - - 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 - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_07_Header_And_Footer.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_07_Header_And_Footer.razor deleted file mode 100644 index a98dae3ae..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_07_Header_And_Footer.razor +++ /dev/null @@ -1,10 +0,0 @@ - - - Featured - - - Special title treatment - With supporting text below as a natural lead-in to additional content. - - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_08_Sizing.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_08_Sizing.razor deleted file mode 100644 index 4c5b4d918..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_08_Sizing.razor +++ /dev/null @@ -1,20 +0,0 @@ -
-
- - - 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. - - - -
-
diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_09_Text_Alignment.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_09_Text_Alignment.razor deleted file mode 100644 index cbcefb459..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_09_Text_Alignment.razor +++ /dev/null @@ -1,23 +0,0 @@ - - - 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. - - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_10_Background_And_Color.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_10_Background_And_Color.razor deleted file mode 100644 index 1a7d78fc2..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_10_Background_And_Color.razor +++ /dev/null @@ -1,63 +0,0 @@ - - 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. - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_11_Card_Groups.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_11_Card_Groups.razor deleted file mode 100644 index e15a1b2cb..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_11_Card_Groups.razor +++ /dev/null @@ -1,26 +0,0 @@ - - - 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 - - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_12_Card_Groups_With_Footer.razor b/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_12_Card_Groups_With_Footer.razor deleted file mode 100644 index 963428b61..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Card/Card_Demo_12_Card_Groups_With_Footer.razor +++ /dev/null @@ -1,32 +0,0 @@ - - - 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 - - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChartDocumentation.razor deleted file mode 100644 index aea82b697..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChartDocumentation.razor +++ /dev/null @@ -1,48 +0,0 @@ -@page "/charts/bar-chart" - -@title - - - -

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. -
- - -
- Refer to the getting started guide for setting up charts. -
- - -
- In the following example, a categorical 12-color palette is used. -
- - 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. - - - - - - - - - - -
- 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 string pageUrl = "/charts/bar-chart"; - private string title = "Blazor Bar Chart"; - private string 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."; - private string imageUrl = "https://i.imgur.com/3qndkPO.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor deleted file mode 100644 index 31b7eaf60..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor +++ /dev/null @@ -1,164 +0,0 @@ - - - - - - - - -@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 -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor deleted file mode 100644 index fdab146fa..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor +++ /dev/null @@ -1,48 +0,0 @@ - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor deleted file mode 100644 index e0ca265da..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor +++ /dev/null @@ -1,77 +0,0 @@ - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor deleted file mode 100644 index 33f723cee..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor +++ /dev/null @@ -1,78 +0,0 @@ - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor deleted file mode 100644 index 02d232596..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor +++ /dev/null @@ -1,78 +0,0 @@ - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/ChartsDocumentation.razor deleted file mode 100644 index 99f8788bc..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/ChartsDocumentation.razor +++ /dev/null @@ -1,38 +0,0 @@ -@page "/charts" - -@title - - - -

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. -
- - - - - -
At this moment we are supporting four blazor chart types.
-
    -
  1. Bar Chart
    2. -
  2. Doughnut Chart
    3. -
  3. Line Chart
    4. -
  4. Pie Chart
    5. -
- - - We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions. - - - -
- Refer to the getting started guide for setting up charts. -
- -@code { - private string pageUrl = "/charts"; - private string title = "Blazor Charts"; - private string 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."; - private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_00_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_00_Examples.razor deleted file mode 100644 index e8fe864f6..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_00_Examples.razor +++ /dev/null @@ -1,118 +0,0 @@ - - - -@code { - private BarChart barChart; - private LineChart lineChart; - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await RenderManhattanAsync(); - await RenderWormAsync(); - } - - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RenderManhattanAsync() - { - var data = new ChartData - { - Labels = new List { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" }, - Datasets = new List() - { - new BarChartDataset() - { - Label = "India", - Data = new List{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 }, - BackgroundColor = new List{ "rgb(88, 80, 141)" }, - CategoryPercentage = 0.8, - BarPercentage = 1, - }, - new BarChartDataset() - { - Label = "England", - Data = new List{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 }, - BackgroundColor = new List { "rgb(255, 166, 0)" }, - CategoryPercentage = 0.8, - BarPercentage = 1, - } - } - }; - - var options = new BarChartOptions(); - - options.Interaction.Mode = InteractionMode.Index; - - options.Plugins.Title.Text = "MANHATTAN"; - options.Plugins.Title.Display = true; - options.Plugins.Title.Font.Size = 20; - - options.Responsive = true; - - options.Scales.X.Title.Text = "Overs"; - options.Scales.X.Title.Display = true; - - options.Scales.Y.Title.Text = "Runs"; - options.Scales.Y.Title.Display = true; - - await barChart.InitializeAsync(data, options); - } - - private async Task RenderWormAsync() - { - var data = new ChartData - { - Labels = new List { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" }, - Datasets = new List() - { - new LineChartDataset() - { - Label = "India", - Data = new List{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 }, - BackgroundColor = new List{ "rgb(88, 80, 141)" }, - BorderColor = new List{ "rgb(88, 80, 141)" }, - BorderWidth = new List{2}, - HoverBorderWidth = new List{4}, - PointBackgroundColor = new List{ "rgb(88, 80, 141)" }, - PointBorderColor = new List{ "rgb(88, 80, 141)" }, - PointRadius = new List{0}, // hide points - PointHoverRadius = new List{4}, - }, - new LineChartDataset() - { - Label = "England", - Data = new List{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 }, - BackgroundColor = new List{ "rgb(255, 166, 0)" }, - BorderColor = new List{ "rgb(255, 166, 0)" }, - BorderWidth = new List{2}, - HoverBorderWidth = new List{4}, - PointBackgroundColor = new List{ "rgb(255, 166, 0)" }, - PointBorderColor = new List{ "rgb(255, 166, 0)" }, - PointRadius = new List{0}, // hide points - PointHoverRadius = new List{4}, - } - } - }; - - var options = new LineChartOptions(); - - options.Interaction.Mode = InteractionMode.Index; - - options.Plugins.Title.Text = "WORM"; - options.Plugins.Title.Display = true; - options.Plugins.Title.Font.Size = 20; - - options.Responsive = true; - - options.Scales.X.Title.Text = "Overs"; - options.Scales.X.Title.Display = true; - - options.Scales.Y.Title.Text = "Runs"; - options.Scales.Y.Title.Display = true; - - await lineChart.InitializeAsync(data, options); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor deleted file mode 100644 index 9425ddddd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ /dev/null @@ -1,37 +0,0 @@ -@page "/charts/doughnut-chart" - -@title - - - -

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. -
- - -
- Refer to the getting started guide for setting up charts. -
- - -
- In the following example, a categorical 12-color palette is used. -
- - 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 string pageUrl = "/charts/doughnut-chart"; - private string title = "Blazor Doughnut Charts"; - private string description = "A Blazor 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."; - private string imageUrl = "https://i.imgur.com/Q1bBWPQ.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor deleted file mode 100644 index ed912a565..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor +++ /dev/null @@ -1,157 +0,0 @@ - - - - - - -@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 -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor deleted file mode 100644 index bac457b0b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor +++ /dev/null @@ -1,159 +0,0 @@ - - - - - -@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 -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChartDocumentation.razor deleted file mode 100644 index e6ef2fdc6..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ /dev/null @@ -1,48 +0,0 @@ -@page "/charts/line-chart" - -@title - - - -

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. -
- - -
- Refer to the getting started guide for setting up charts. -
- - -
- In the following example, a categorical 12-color palette is used. -
- - 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. - - -
- - - -
- 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 readonly string pageUrl = "/charts/line-chart"; - private readonly string title = "Blazor Line Chart"; - private readonly string 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."; - private readonly string imageUrl = "https://i.imgur.com/qetH0UX.png"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor deleted file mode 100644 index 18bdf6c4b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor +++ /dev/null @@ -1,163 +0,0 @@ - - - - - - - - -@code { - private LineChart lineChart = default!; - private LineChartOptions lineChartOptions = default!; - private ChartData chartData = default!; - - private int datasetsCount; - private int labelsCount; - - 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 - -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor deleted file mode 100644 index 1b6453993..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor +++ /dev/null @@ -1,86 +0,0 @@ - - -@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); - } - -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor deleted file mode 100644 index 21459edd6..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor +++ /dev/null @@ -1,87 +0,0 @@ - - -@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); - } - -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor deleted file mode 100644 index 690228899..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor +++ /dev/null @@ -1,106 +0,0 @@ - - - - - -@code { - private LineChart lineChart; - private LineChartOptions lineChartOptions; - private ChartData chartData; - private List labels; - - private List indiaRunsArray = new() { 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 }; - private List englandRunsArray = new() { 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 }; - - private int indiaCurrentOver; - private int englandCurrentOver; - - protected override void OnInitialized() - { - labels = new List { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" }; - lineChartOptions = GetLineChartOptions(); - chartData = new ChartData { Labels = labels, Datasets = GetDefaultDatasets() }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - await lineChart.InitializeAsync(chartData, lineChartOptions); - } - - private async Task UpdateIndiaNextOverRunsAsync() - { - if (indiaCurrentOver > 0 && indiaCurrentOver > indiaRunsArray.Count - 1) - return; - - chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver + 1}", new LineChartDatasetData("India", indiaRunsArray[indiaCurrentOver])); - indiaCurrentOver++; - } - - private async Task UpdateEnglandNextOverRunsAsync() - { - if (englandCurrentOver > 0 && englandCurrentOver > englandRunsArray.Count - 1) - return; - - chartData = await lineChart.AddDataAsync(chartData, $"{englandCurrentOver + 1}", new LineChartDatasetData("England", englandRunsArray[englandCurrentOver])); - englandCurrentOver++; - } - - private List GetDefaultDatasets() - { - var datasets = new List - { - new LineChartDataset - { - Label = "India", - Data = new List(), - BackgroundColor = new List { "rgb(88, 80, 141)" }, - BorderColor = new List { "rgb(88, 80, 141)" }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { "rgb(88, 80, 141)" }, - PointBorderColor = new List { "rgb(88, 80, 141)" }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 } - }, - new LineChartDataset - { - Label = "England", - Data = new List(), - BackgroundColor = new List { "rgb(255, 166, 0)" }, - BorderColor = new List { "rgb(255, 166, 0)" }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { "rgb(255, 166, 0)" }, - PointBorderColor = new List { "rgb(255, 166, 0)" }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 } - } - }; - - return datasets; - } - - private LineChartOptions GetLineChartOptions() - { - var options = new LineChartOptions(); - - options.Interaction.Mode = InteractionMode.Index; - - options.Plugins.Title.Text = "WORM"; - options.Plugins.Title.Display = true; - options.Plugins.Title.Font.Size = 20; - - options.Responsive = true; - - options.Scales.X.Title.Text = "Overs"; - options.Scales.X.Title.Display = true; - - options.Scales.Y.Title.Text = "Runs"; - options.Scales.Y.Title.Display = true; - options.Scales.Y.SuggestedMax = 150; - - return options; - } - -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor deleted file mode 100644 index d20a20223..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor +++ /dev/null @@ -1,99 +0,0 @@ - - -@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); - } - -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChartDocumentation.razor deleted file mode 100644 index 23ccd6735..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChartDocumentation.razor +++ /dev/null @@ -1,35 +0,0 @@ -@page "/charts/pie-chart" - -@title - - - -

Blazor Pie Chart

-
- A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. -
- - -
- Refer to the getting started guide for setting up charts. -
- - -
- In the following example, a categorical 12-color palette is used. -
- - 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 string pageUrl = "/charts/pie-chart"; - private string title = "Blazor Pie Chart"; - private string description = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; - private string imageUrl = "https://i.imgur.com/ieBupT2.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor deleted file mode 100644 index bf6153982..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor +++ /dev/null @@ -1,155 +0,0 @@ - - - - - - -@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 -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor deleted file mode 100644 index 8247a543c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor +++ /dev/null @@ -1,156 +0,0 @@ - - - - - -@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 -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Utils_Colors.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Utils_Colors.razor deleted file mode 100644 index 6aa0c9075..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Utils_Colors.razor +++ /dev/null @@ -1,197 +0,0 @@ - - - - - - - - - - - - @{ - var i = 1; - foreach (var color in chartColors) - { - - - - - - - - - i++; - } - } - -
#ColorColor NameHexaRgb
@i@color.Name@color.Hex@color.Rgb
- -@code { - readonly List chartColors = new(); - - protected override void OnInitialized() - { - chartColors.Add(new ChartColor(Color.AliceBlue)); - chartColors.Add(new ChartColor(Color.AntiqueWhite)); - chartColors.Add(new ChartColor(Color.Aqua)); - chartColors.Add(new ChartColor(Color.Aquamarine)); - chartColors.Add(new ChartColor(Color.Azure)); - chartColors.Add(new ChartColor(Color.Beige)); - chartColors.Add(new ChartColor(Color.Bisque)); - chartColors.Add(new ChartColor(Color.Black)); - chartColors.Add(new ChartColor(Color.BlanchedAlmond)); - chartColors.Add(new ChartColor(Color.Blue)); - chartColors.Add(new ChartColor(Color.BlueViolet)); - chartColors.Add(new ChartColor(Color.Brown)); - chartColors.Add(new ChartColor(Color.BurlyWood)); - chartColors.Add(new ChartColor(Color.CadetBlue)); - chartColors.Add(new ChartColor(Color.Chartreuse)); - chartColors.Add(new ChartColor(Color.Chocolate)); - chartColors.Add(new ChartColor(Color.Coral)); - chartColors.Add(new ChartColor(Color.CornflowerBlue)); - chartColors.Add(new ChartColor(Color.Cornsilk)); - chartColors.Add(new ChartColor(Color.Crimson)); - chartColors.Add(new ChartColor(Color.Cyan)); - chartColors.Add(new ChartColor(Color.DarkBlue)); - chartColors.Add(new ChartColor(Color.DarkCyan)); - chartColors.Add(new ChartColor(Color.DarkGoldenrod)); - chartColors.Add(new ChartColor(Color.DarkGray)); - chartColors.Add(new ChartColor(Color.DarkGreen)); - chartColors.Add(new ChartColor(Color.DarkKhaki)); - chartColors.Add(new ChartColor(Color.DarkMagenta)); - chartColors.Add(new ChartColor(Color.DarkOliveGreen)); - chartColors.Add(new ChartColor(Color.DarkOrange)); - chartColors.Add(new ChartColor(Color.DarkOrchid)); - chartColors.Add(new ChartColor(Color.DarkRed)); - chartColors.Add(new ChartColor(Color.DarkSalmon)); - chartColors.Add(new ChartColor(Color.DarkSeaGreen)); - chartColors.Add(new ChartColor(Color.DarkSlateBlue)); - chartColors.Add(new ChartColor(Color.DarkSlateGray)); - chartColors.Add(new ChartColor(Color.DarkTurquoise)); - chartColors.Add(new ChartColor(Color.DarkViolet)); - chartColors.Add(new ChartColor(Color.DeepPink)); - chartColors.Add(new ChartColor(Color.DeepSkyBlue)); - chartColors.Add(new ChartColor(Color.DimGray)); - chartColors.Add(new ChartColor(Color.DodgerBlue)); - chartColors.Add(new ChartColor(Color.Firebrick)); - chartColors.Add(new ChartColor(Color.FloralWhite)); - chartColors.Add(new ChartColor(Color.ForestGreen)); - chartColors.Add(new ChartColor(Color.Fuchsia)); - chartColors.Add(new ChartColor(Color.Gainsboro)); - chartColors.Add(new ChartColor(Color.GhostWhite)); - chartColors.Add(new ChartColor(Color.Gold)); - chartColors.Add(new ChartColor(Color.Goldenrod)); - chartColors.Add(new ChartColor(Color.Gray)); - chartColors.Add(new ChartColor(Color.Green)); - chartColors.Add(new ChartColor(Color.GreenYellow)); - chartColors.Add(new ChartColor(Color.Honeydew)); - chartColors.Add(new ChartColor(Color.HotPink)); - chartColors.Add(new ChartColor(Color.IndianRed)); - chartColors.Add(new ChartColor(Color.Indigo)); - chartColors.Add(new ChartColor(Color.Ivory)); - chartColors.Add(new ChartColor(Color.Khaki)); - chartColors.Add(new ChartColor(Color.Lavender)); - chartColors.Add(new ChartColor(Color.LavenderBlush)); - chartColors.Add(new ChartColor(Color.LawnGreen)); - chartColors.Add(new ChartColor(Color.LemonChiffon)); - chartColors.Add(new ChartColor(Color.LightBlue)); - chartColors.Add(new ChartColor(Color.LightCoral)); - chartColors.Add(new ChartColor(Color.LightCyan)); - chartColors.Add(new ChartColor(Color.LightGoldenrodYellow)); - chartColors.Add(new ChartColor(Color.LightGray)); - chartColors.Add(new ChartColor(Color.LightGreen)); - chartColors.Add(new ChartColor(Color.LightPink)); - chartColors.Add(new ChartColor(Color.LightSalmon)); - chartColors.Add(new ChartColor(Color.LightSeaGreen)); - chartColors.Add(new ChartColor(Color.LightSkyBlue)); - chartColors.Add(new ChartColor(Color.LightSlateGray)); - chartColors.Add(new ChartColor(Color.LightSteelBlue)); - chartColors.Add(new ChartColor(Color.LightYellow)); - chartColors.Add(new ChartColor(Color.Lime)); - chartColors.Add(new ChartColor(Color.LimeGreen)); - chartColors.Add(new ChartColor(Color.Linen)); - chartColors.Add(new ChartColor(Color.Magenta)); - chartColors.Add(new ChartColor(Color.Maroon)); - chartColors.Add(new ChartColor(Color.MediumAquamarine)); - chartColors.Add(new ChartColor(Color.MediumBlue)); - chartColors.Add(new ChartColor(Color.MediumOrchid)); - chartColors.Add(new ChartColor(Color.MediumPurple)); - chartColors.Add(new ChartColor(Color.MediumSeaGreen)); - chartColors.Add(new ChartColor(Color.MediumSlateBlue)); - chartColors.Add(new ChartColor(Color.MediumSpringGreen)); - chartColors.Add(new ChartColor(Color.MediumTurquoise)); - chartColors.Add(new ChartColor(Color.MediumVioletRed)); - chartColors.Add(new ChartColor(Color.MidnightBlue)); - chartColors.Add(new ChartColor(Color.MintCream)); - chartColors.Add(new ChartColor(Color.MistyRose)); - chartColors.Add(new ChartColor(Color.Moccasin)); - chartColors.Add(new ChartColor(Color.NavajoWhite)); - chartColors.Add(new ChartColor(Color.Navy)); - chartColors.Add(new ChartColor(Color.OldLace)); - chartColors.Add(new ChartColor(Color.Olive)); - chartColors.Add(new ChartColor(Color.OliveDrab)); - chartColors.Add(new ChartColor(Color.Orange)); - chartColors.Add(new ChartColor(Color.OrangeRed)); - chartColors.Add(new ChartColor(Color.Orchid)); - chartColors.Add(new ChartColor(Color.PaleGoldenrod)); - chartColors.Add(new ChartColor(Color.PaleGreen)); - chartColors.Add(new ChartColor(Color.PaleTurquoise)); - chartColors.Add(new ChartColor(Color.PaleVioletRed)); - chartColors.Add(new ChartColor(Color.PapayaWhip)); - chartColors.Add(new ChartColor(Color.PeachPuff)); - chartColors.Add(new ChartColor(Color.Peru)); - chartColors.Add(new ChartColor(Color.Pink)); - chartColors.Add(new ChartColor(Color.Plum)); - chartColors.Add(new ChartColor(Color.PowderBlue)); - chartColors.Add(new ChartColor(Color.Purple)); - chartColors.Add(new ChartColor(Color.RebeccaPurple)); - chartColors.Add(new ChartColor(Color.Red)); - chartColors.Add(new ChartColor(Color.RosyBrown)); - chartColors.Add(new ChartColor(Color.RoyalBlue)); - chartColors.Add(new ChartColor(Color.SaddleBrown)); - chartColors.Add(new ChartColor(Color.Salmon)); - chartColors.Add(new ChartColor(Color.SandyBrown)); - chartColors.Add(new ChartColor(Color.SeaGreen)); - chartColors.Add(new ChartColor(Color.SeaShell)); - chartColors.Add(new ChartColor(Color.Sienna)); - chartColors.Add(new ChartColor(Color.Silver)); - chartColors.Add(new ChartColor(Color.SkyBlue)); - chartColors.Add(new ChartColor(Color.SlateBlue)); - chartColors.Add(new ChartColor(Color.SlateGray)); - chartColors.Add(new ChartColor(Color.Snow)); - chartColors.Add(new ChartColor(Color.SpringGreen)); - chartColors.Add(new ChartColor(Color.SteelBlue)); - chartColors.Add(new ChartColor(Color.Tan)); - chartColors.Add(new ChartColor(Color.Teal)); - chartColors.Add(new ChartColor(Color.Thistle)); - chartColors.Add(new ChartColor(Color.Tomato)); - chartColors.Add(new ChartColor(Color.Transparent)); - chartColors.Add(new ChartColor(Color.Turquoise)); - chartColors.Add(new ChartColor(Color.Violet)); - chartColors.Add(new ChartColor(Color.Wheat)); - chartColors.Add(new ChartColor(Color.White)); - chartColors.Add(new ChartColor(Color.WhiteSmoke)); - chartColors.Add(new ChartColor(Color.Yellow)); - chartColors.Add(new ChartColor(Color.YellowGreen)); - } - - public class ChartColor - { - public ChartColor(Color color) - { - Name = color.Name; - Hex = color.ToHexString(); - Hexa = color.ToHexaString(); - Rgb = color.ToRgbString(); - Rgba = color.ToRgbaString(); - } - - public string Name { get; set; } - public string Hex { get; set; } - public string Hexa { get; set; } - public string Rgb { get; set; } - public string Rgba { get; set; } - } - -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Collapse/CollapseDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Collapse/CollapseDocumentation.razor deleted file mode 100644 index 5fb798655..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Collapse/CollapseDocumentation.razor +++ /dev/null @@ -1,72 +0,0 @@ -@page "/collapse" - -@title - - - -

Blazor Collapse

-
- Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component. -
- - -
- 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. -
- - - The animation effect of this component is dependent on the prefers-reduced-motion media query.
- See the reduced motion section of our accessibility documentation. - - - -
- Click the buttons below to show and hide the content. -
- - - -
- The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing. -
- - - -
- Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality. - - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameDescription
OnHidingThis event is fired immediately when the hide method has been called.
OnHiddenThis event is fired when a collapse component has been hidden from the user (will wait for CSS transitions to complete).
OnShowingThis event fires immediately when the show method is called.
OnShownThis event is fired when a collapse component has been made visible to the user (will wait for CSS transitions to complete).
-
- - -@code { - private string pageUrl = "/collapse"; - private string title = "Blazor Collapse Component"; - private string description = "Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component."; - private string imageUrl = "https://i.imgur.com/8A0emQe.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_01_Examples.razor deleted file mode 100644 index 9c6fc0184..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_01_Examples.razor +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - 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(); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_02_Horizontal.razor b/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_02_Horizontal.razor deleted file mode 100644 index d5d7be886..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_02_Horizontal.razor +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - 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(); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_03_Events.razor b/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_03_Events.razor deleted file mode 100644 index da71c0c9c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Collapse/Collapse_Demo_03_Events.razor +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - 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(); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor deleted file mode 100644 index 5448b2d27..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ /dev/null @@ -1,63 +0,0 @@ -@page "/confirm-dialog" - -@title - - - -

Blazor Confirm Dialog

-
- Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something. -
- - -
- - - -
- 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. -
- -EmployeeDemoComponent.razor - - - -
- Use ConfirmDialogOptions to change the text and color of the button. -
- - - -
- Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. -
- - - -
- 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. -
- -
You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable="true".
- - - -
- Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog. -
- -
- - -@code { - private string pageUrl = "/confirm-dialog"; - private string title = "Blazor Confirm Dialog Component"; - private string description = "Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something."; - private string imageUrl = "https://i.imgur.com/chdLk3D.jpg"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor deleted file mode 100644 index 80bdcfca7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor +++ /dev/null @@ -1,24 +0,0 @@ - - - - -@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 - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_03_Dynamic_Component_As_Confirm_Dialog.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_03_Dynamic_Component_As_Confirm_Dialog.razor deleted file mode 100644 index b41886f05..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_03_Dynamic_Component_As_Confirm_Dialog.razor +++ /dev/null @@ -1,26 +0,0 @@ - - - - -@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.")); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_04_Change_Buttons_Text_And_Color.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_04_Change_Buttons_Text_And_Color.razor deleted file mode 100644 index 899bdb4fe..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_04_Change_Buttons_Text_And_Color.razor +++ /dev/null @@ -1,32 +0,0 @@ - - - - -@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 - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_05_Optional_Sizes.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_05_Optional_Sizes.razor deleted file mode 100644 index 8b68a59b3..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_05_Optional_Sizes.razor +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - -@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 - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_01.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_01.razor deleted file mode 100644 index 7e3c56e88..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_01.razor +++ /dev/null @@ -1,21 +0,0 @@ - - - - -@code { - private ConfirmDialog dialog; - - private async Task ShowDialogAsync() - { - var confirmation = await dialog.ShowAsync(title: "Confirm dialog title"); - - if (confirmation) - { - // do whatever - } - else - { - // do whatever - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_02.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_02.razor deleted file mode 100644 index 9d2ecb7ad..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_02.razor +++ /dev/null @@ -1,24 +0,0 @@ - - - - -@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 - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_01.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_01.razor deleted file mode 100644 index 9b568e507..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_01.razor +++ /dev/null @@ -1,25 +0,0 @@ - - - - -@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 - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_02.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_02.razor deleted file mode 100644 index bad03f017..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_02.razor +++ /dev/null @@ -1,23 +0,0 @@ - - - - -@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 - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/EmployeeDemoComponent.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/EmployeeDemoComponent.razor deleted file mode 100644 index 28ae6819f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/EmployeeDemoComponent.razor +++ /dev/null @@ -1,27 +0,0 @@ -
-
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(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/LongContentDemoComponent.razor b/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/LongContentDemoComponent.razor deleted file mode 100644 index c3d78ec98..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/ConfirmDialog/LongContentDemoComponent.razor +++ /dev/null @@ -1,2 +0,0 @@ -

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.

\ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/DropdownDocumentation.razor deleted file mode 100644 index ccdbf42e9..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/DropdownDocumentation.razor +++ /dev/null @@ -1,175 +0,0 @@ -@page "/dropdown" - -@title - - - -

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. -
- - - - - - - - - - - - - - - - - -
- To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component. -
- - - -
- To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component. -
- - - -
- To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component. -
- - - -
- To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component. -
- - - -
- To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu. -
- - - -
- To style DropdownItem as disabled, add the Disabled="true" parameter to the DropdownItem element in the DropdownMenu component. -
- - - -
-

- 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. -

-
- - - - - -
Add a header to label sections of actions in any dropdown menu.
- - - -
Separate groups of related menu items with a divider.
- - - -
- 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. -
- - - -
- 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. -
- - - -
- 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. -
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
HideAsync Hides the dropdown menu of a given navbar or tabbed navigation.
ShowAsyncShows the dropdown menu of a given navbar or tabbed navigation.
ToggleAsyncToggles the dropdown menu of a given navbar or tabbed navigation.
UpdateAsyncUpdates the position of an element’s dropdown.
-
- - - -
- All dropdown events are fired at the toggling element and then bubbled up. - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
OnHidingThis event is fired immediately when the hide method has been called.
OnHiddenThis event is fired when an dropdown element has been hidden from the user (will wait for CSS transitions to complete).
OnShowingThis event fires immediately when the show instance method is called.
OnShownThis event is fired when an dropdown element has been made visible to the user (will wait for CSS transitions to complete).
-
- - -@code { - private string pageUrl = "/dropdown"; - private string title = "Blazor Dropdown Component"; - private string description = "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."; - private string imageUrl = "https://i.imgur.com/beAr31J.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_01_Single_Button.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_01_Single_Button.razor deleted file mode 100644 index 2f7f66231..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_01_Single_Button.razor +++ /dev/null @@ -1,8 +0,0 @@ - - Dropdown button - - Action - Another action - Something else here - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_02_Color.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_02_Color.razor deleted file mode 100644 index bf2326227..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_02_Color.razor +++ /dev/null @@ -1,50 +0,0 @@ -
- - 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 - - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_03_Split_Button.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_03_Split_Button.razor deleted file mode 100644 index 4d7c16681..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_03_Split_Button.razor +++ /dev/null @@ -1,56 +0,0 @@ -
- - 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 - - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor deleted file mode 100644 index 91f5aee69..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- - Large button - - Action - Another action - Something else here - - - - Large split button - - - Action - Another action - Something else here - - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor deleted file mode 100644 index 78ef2d4ea..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- - Small button - - Action - Another action - Something else here - - - - Small split button - - - Action - Another action - Something else here - - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_A_Directions_Dropup.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_A_Directions_Dropup.razor deleted file mode 100644 index 3388cef9b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_A_Directions_Dropup.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- - Dropup button with text - - Action - Another action - Something else here - - - - Dropup split button - - - Action - Another action - Something else here - - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_B_Directions_DropupCentered.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_B_Directions_DropupCentered.razor deleted file mode 100644 index 24c70ed3b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_B_Directions_DropupCentered.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- - Centered dropup - - Action - Another action - Something else here - - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_C_Directions_Dropend.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_C_Directions_Dropend.razor deleted file mode 100644 index 8c096878b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_C_Directions_Dropend.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- - Dropend - - Action - Another action - Something else here - - - - Split dropend - - - Action - Another action - Something else here - - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_D_Directions_Dropstart.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_D_Directions_Dropstart.razor deleted file mode 100644 index 74f41086c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_05_D_Directions_Dropstart.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- - Dropstart - - Action - Another action - Something else here - - - - - - Action - Another action - Something else here - - Split dropstart - -
diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_06_Active.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_06_Active.razor deleted file mode 100644 index 15a8a928e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_06_Active.razor +++ /dev/null @@ -1,8 +0,0 @@ - - Dropstart - - Action - Another action - Something else here - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_07_Disabled.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_07_Disabled.razor deleted file mode 100644 index dd9b69576..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_07_Disabled.razor +++ /dev/null @@ -1,8 +0,0 @@ - - Dropstart - - Action - Another action - Something else here - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_08_Menu_Position.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_08_Menu_Position.razor deleted file mode 100644 index 949c37504..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_08_Menu_Position.razor +++ /dev/null @@ -1,8 +0,0 @@ - - Right-aligned menu example - - Action - Another action - Something else here - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_09_Header.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_09_Header.razor deleted file mode 100644 index 4de7db2cd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_09_Header.razor +++ /dev/null @@ -1,9 +0,0 @@ - - Dropdown - - Dropdown header - Action - Another action - Something else here - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_10_Dividers.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_10_Dividers.razor deleted file mode 100644 index 2c9ec6319..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_10_Dividers.razor +++ /dev/null @@ -1,10 +0,0 @@ - - Dropdown - - Action - Another action - Something else here - Dropdown header - Separated link - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_11_Text.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_11_Text.razor deleted file mode 100644 index a4416a8d4..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_11_Text.razor +++ /dev/null @@ -1,7 +0,0 @@ - - Dropdown - -

Some example text that's free-flowing within the dropdown menu.

-

And this is more example text.

- - diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_12_Forms.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_12_Forms.razor deleted file mode 100644 index 79b273879..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_12_Forms.razor +++ /dev/null @@ -1,112 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - Dropdown form - - - - -
- - - -
- -
- - - -
- -
- - - -
- -
-
- - -
-
- - - - -@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; } - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_13_AutoClose.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_13_AutoClose.razor deleted file mode 100644 index 4508ab3d8..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_13_AutoClose.razor +++ /dev/null @@ -1,32 +0,0 @@ - - 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 - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_14_Methods.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_14_Methods.razor deleted file mode 100644 index 094b399b7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_14_Methods.razor +++ /dev/null @@ -1,20 +0,0 @@ - - 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(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_15_Events.razor b/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_15_Events.razor deleted file mode 100644 index 3bfb21220..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Dropdowns/Dropdown_Demo_15_Events.razor +++ /dev/null @@ -1,30 +0,0 @@ - - Dropdown button - - Action - Another action - Something else here - - - -
- @foreach (var item in messages) - { -

Event: @item

- } -
- -@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")); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor deleted file mode 100644 index 5446809cf..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor +++ /dev/null @@ -1,89 +0,0 @@ -@page "/autocomplete" -@page "/form/autocomplete" - -@title - - - -

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. -
- - - - - -
In the below example, StringComparision.Ordinal is used to make the filter case-sensitive.
- - -
By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
- - - - - - - - - - - - -
- Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions. -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyDescription
EscCloses the popup list when it is in an open state.
Up arrowFocuses on the previous item in the list.
Down arrowFocuses on the next item in the list.
HomeFocuses on the first item in the list.
EndFocuses on the last item in the list.
EnterSelects the currently focused item.
-
-
- - -
Use the Disabled parameter to disable the AutoComplete.
- -
Also, use Enable() and Disable() methods to enable and disable the AutoComplete.
- - Do not use both the Disabled parameter and Enable() & Disable() methods. - - - -@code { - private string pageUrl = "/autocomplete"; - private string title = "Blazor AutoComplete Component"; - private string 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."; - private string imageUrl = "https://i.imgur.com/36RsWZ3.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_01_A_Client_Side_Filtering.razor b/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_01_A_Client_Side_Filtering.razor deleted file mode 100644 index 772e52292..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_01_A_Client_Side_Filtering.razor +++ /dev/null @@ -1,60 +0,0 @@ -
-
- -
-
- -@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."); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor b/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor deleted file mode 100644 index db54ae245..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor +++ /dev/null @@ -1,61 +0,0 @@ -
-
- -
-
- -@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."); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_02_Server_Side_Filtering.razor b/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_02_Server_Side_Filtering.razor deleted file mode 100644 index 5daf4dbf6..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_02_Server_Side_Filtering.razor +++ /dev/null @@ -1,30 +0,0 @@ -
-
- -
-
- -@code { - private string customerName; - - [Inject] ICustomerService _customerService { get; set; } - - 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."); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_03_Set_Default_Value.razor b/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_03_Set_Default_Value.razor deleted file mode 100644 index 8be6022a9..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_03_Set_Default_Value.razor +++ /dev/null @@ -1,65 +0,0 @@ -
-
- -
-
- -@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."); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor b/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor deleted file mode 100644 index 8f7745b3d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor +++ /dev/null @@ -1,87 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - - -
- -
- - -
-
- -
- -
- - -
-
- -
-
- -
-
- - -@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.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."); - } - - public class CustomerAddress - { - [Required] - public string CustomerName { get; set; } - - [Required] - public string Address { get; set; } - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_05_A_Disable.razor b/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_05_A_Disable.razor deleted file mode 100644 index b90b97deb..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_05_A_Disable.razor +++ /dev/null @@ -1,42 +0,0 @@ -
-
- -
-
- - - - - -@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; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_05_B_Disable.razor b/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_05_B_Disable.razor deleted file mode 100644 index c0f78b357..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/AutoComplete/AutoComplete_Demo_05_B_Disable.razor +++ /dev/null @@ -1,39 +0,0 @@ -
-
- -
-
- - - - -@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(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor deleted file mode 100644 index 512cabd8a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor +++ /dev/null @@ -1,84 +0,0 @@ -@page "/currency-input" -@page "/form/currency-input" - -@title - - - -

Blazor Currency Input

-
- Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol. -
- - -
By default, e + - are blocked. For all integral numeric types, dot . is blocked.
- - The default locale is en-US. - - - - - - - -
Set HideCurrencySymbol parameter value to true to hide the currency symbol.
- - - -
In the below example, formatting adds zeros to display minimum integers and fractions.
- - MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only. - - - - -
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.
- - - -
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?.
- - - -
Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.
- - 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. - - - - -
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.
- - - -
By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
- - - -
Use the Disabled parameter to disable the CurrencyInput.
- -
Also, use Enable() and Disable() methods to enable and disable the CurrencyInput.
- - Do not use both the Disabled parameter and Enable() & Disable() methods. - - - - -
- 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. -
- - - -
This event fires on every user keystroke that changes the CurrencyInput value.
- - -@code { - private string pageUrl = "/form/currency-input"; - private string title = "Blazor CurrencyInput Component"; - private string description = "Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol."; - private string imageUrl = "https://i.imgur.com/iUNBkki.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_01_Basic_Usage.razor deleted file mode 100644 index 2fe7bceb1..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_01_Basic_Usage.razor +++ /dev/null @@ -1,8 +0,0 @@ -
- -
-
Entered Amount: @amount1
- -@code { - private int amount1 = 12345678; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_02_Show_Currency_Symbols_for_the_Different_Locales.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_02_Show_Currency_Symbols_for_the_Different_Locales.razor deleted file mode 100644 index 89bc7c445..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_02_Show_Currency_Symbols_for_the_Different_Locales.razor +++ /dev/null @@ -1,65 +0,0 @@ -
- - -
-
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; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_03_Hide_Currency_Symbol.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_03_Hide_Currency_Symbol.razor deleted file mode 100644 index 62b585a98..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_03_Hide_Currency_Symbol.razor +++ /dev/null @@ -1,12 +0,0 @@ -
- -
-
Entered Value: @amount1
- -@code { - private double amount1 = 4.33; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_04_Using_FractionDigits_and_IntegerDigits.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_04_Using_FractionDigits_and_IntegerDigits.razor deleted file mode 100644 index 157cd9cac..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_04_Using_FractionDigits_and_IntegerDigits.razor +++ /dev/null @@ -1,13 +0,0 @@ -
- -
-
Entered Value: @amount1
- -@code { - private double amount1 = 4.33; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_05_Parentheses_Instead_of_Appending_A_Minus_Sign.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_05_Parentheses_Instead_of_Appending_A_Minus_Sign.razor deleted file mode 100644 index 031aebbe7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_05_Parentheses_Instead_of_Appending_A_Minus_Sign.razor +++ /dev/null @@ -1,12 +0,0 @@ -
- -
-
Entered Value: @amount1
- -@code { - private int amount1 = -21231; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_06_Generic_Type.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_06_Generic_Type.razor deleted file mode 100644 index b0d42fe70..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_06_Generic_Type.razor +++ /dev/null @@ -1,50 +0,0 @@ -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -@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; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_07_Enable_Min_Max.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_07_Enable_Min_Max.razor deleted file mode 100644 index 324253f48..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_07_Enable_Min_Max.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- - - Tip: The amount must be between 10 and 500. -
-
Entered Amount: @amount
- -@code { - private decimal? amount; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_08_Text_Alignment.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_08_Text_Alignment.razor deleted file mode 100644 index e9d1f0e3d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_08_Text_Alignment.razor +++ /dev/null @@ -1,16 +0,0 @@ -
- - -
-
Entered Amount: @amount
- -
- - -
-
Entered Amount: @amount2
- -@code { - private int amount; - private decimal amount2 = 2.34M; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_09_Allow_Negative_Numbers.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_09_Allow_Negative_Numbers.razor deleted file mode 100644 index e27684b88..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_09_Allow_Negative_Numbers.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- - - Tip: Negative numbers are also allowed. -
-
Entered Amount: @amount
- -@code { - private int amount; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_A_Disable_Number_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_A_Disable_Number_Input.razor deleted file mode 100644 index 2609abc43..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_A_Disable_Number_Input.razor +++ /dev/null @@ -1,22 +0,0 @@ -
- - -
- - - - - -@code { - private int? amount; - private bool disabled = true; - - private void Enable() => disabled = false; - - private void Disable() => disabled = true; - - private void Toggle() => disabled = !disabled; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_B_Disable_Number_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_B_Disable_Number_Input.razor deleted file mode 100644 index 76a0b2858..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_B_Disable_Number_Input.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- - -
- - - - -@code { - private CurrencyInput currencyInput = default!; - private int? amount; - - private void Disable() => currencyInput.Disable(); - - private void Enable() => currencyInput.Enable(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_Disable_Number_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_Disable_Number_Input.razor deleted file mode 100644 index 82ed49329..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_Disable_Number_Input.razor +++ /dev/null @@ -1,16 +0,0 @@ -
- - -
- - - - -@code { - private CurrencyInput currencyInput; - private int? amount; - - private void enableNumberInput() => currencyInput.Enable(); - - private void disableNumberInput() => currencyInput.Disable(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor deleted file mode 100644 index 6a7c729cd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor +++ /dev/null @@ -1,113 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - - -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-
- -
-
- - -
-
- - -@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; } - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_12_Events_Value_Changed.razor b/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_12_Events_Value_Changed.razor deleted file mode 100644 index 74bbb60a8..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/CurrencyInput/CurrencyInput_Demo_12_Events_Value_Changed.razor +++ /dev/null @@ -1,20 +0,0 @@ -
- -
- -
-
-
- @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()}."; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInputDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInputDocumentation.razor deleted file mode 100644 index 7896b1272..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInputDocumentation.razor +++ /dev/null @@ -1,77 +0,0 @@ -@page "/date-input" -@page "/form/date-input" - -@title - - - -

Blazor Date Input

-
- The 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. -
- - - - The input UI generally varies from browser to browser. - In unsupported browsers, the control degrades gracefully to type="text". - - - - - -
-

- 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?. -

-
- - - -
- Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range. -
- - If the user tries to enter a number in the DateInput field which is out of range, then it will override with Max or Min value based on the context. - If the user input exceeds the Max value, it will override with the Max value. If the user input is less than the Min value, then it will override with the Min value. - - - - -
Use the Disabled parameter to disable the DateInput.
- -
Also, use Enable() and Disable() methods to enable and disable the DateInput.
- - Do not use both the Disabled parameter and Enable() & Disable() methods. - - - - -
- Like any other blazor input component, DateInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. -
- - - -
- This event fires on every user keystroke/selection that changes the DateInput value. -
- - - -
- 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. -
- - -@code { - private string pageUrl = "/form/date-input"; - private string title = "Blazor DateInput Component"; - private string description = "The 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."; - private string imageUrl = "https://i.imgur.com/1mVjqQv.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_01_Basic_Usage.razor deleted file mode 100644 index c4eb21b69..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_01_Basic_Usage.razor +++ /dev/null @@ -1,8 +0,0 @@ -
- -
-
Entered date: @date1
- -@code { - private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now.AddDays(1)); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_02_Generic_Type.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_02_Generic_Type.razor deleted file mode 100644 index 533b459d7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_02_Generic_Type.razor +++ /dev/null @@ -1,38 +0,0 @@ -
- 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; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_03_Max_Min.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_03_Max_Min.razor deleted file mode 100644 index ccf8713dd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_03_Max_Min.razor +++ /dev/null @@ -1,69 +0,0 @@ -
- 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; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_A_Disable_Date_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_A_Disable_Date_Input.razor deleted file mode 100644 index cc65de8e8..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_A_Disable_Date_Input.razor +++ /dev/null @@ -1,22 +0,0 @@ -
- -
-
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; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_B_Disable_Date_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_B_Disable_Date_Input.razor deleted file mode 100644 index ba17973fc..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_B_Disable_Date_Input.razor +++ /dev/null @@ -1,20 +0,0 @@ -
- -
-
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(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_Disable_Date_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_Disable_Date_Input.razor deleted file mode 100644 index 6f3217c63..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_04_Disable_Date_Input.razor +++ /dev/null @@ -1,17 +0,0 @@ -
- -
-
Entered date: @date1
- - - - -@code { - private DateInput dateInput; - - private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now); - - private void enableNumberInput() => dateInput.Enable(); - - private void disableNumberInput() => dateInput.Disable(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_05_Validations.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_05_Validations.razor deleted file mode 100644 index 8783e7849..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_05_Validations.razor +++ /dev/null @@ -1,74 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - - -
- -
- - -
-
- -
- -
- - -
-
- -
-
- - -
-
- - -@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; } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_06_Events_Value_Changed.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_06_Events_Value_Changed.razor deleted file mode 100644 index c07c9e5ad..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_06_Events_Value_Changed.razor +++ /dev/null @@ -1,17 +0,0 @@ -
- -
-
Changed date: @date1
- - - -@code { - private DateOnly date1 = DateOnly.FromDateTime(DateTime.Now); - - private void DateChanged(DateOnly dateOnly) - { - date1 = dateOnly; - } - - private void ChangeDate() => date1 = DateOnly.FromDateTime(DateTime.Now.AddDays(3)); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor b/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor deleted file mode 100644 index 60c7d2eae..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor +++ /dev/null @@ -1,128 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - - -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-
- -
-
- - -
-
- - -@code { - DateInput endDateInput = default!; - private bool disableEndDate = true; - - 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; - disableEndDate = true; - - return; - } - - onlineCourseForm.StartDate = startDate; - onlineCourseForm.EndDate = null; - courseMinDate = startDate.Value; - courseMaxDate = startDate.Value.AddDays(5); - disableEndDate = false; - } - - 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/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInputDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInputDocumentation.razor deleted file mode 100644 index 0a0b62b6b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInputDocumentation.razor +++ /dev/null @@ -1,69 +0,0 @@ -@page "/number-input" -@page "/form/number-input" - -@title - - - -

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. -
- - -
By default, e + - are blocked. For all integral numeric types, dot . is blocked.
- - - -
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?.
- - - -
- Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range. -
- - 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. - - - - -
The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.
- - - -
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.
- - - -
By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
- - - -
Use the Disabled parameter to disable the NumberInput.
- -
Also, use Enable() and Disable() methods to enable and disable the NumberInput.
- - Do not use both the Disabled parameter and Enable() & Disable() methods. - - - - -
- 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. -
- - - -
This event fires on every user keystroke that changes the NumberInput value.
- - -@code { - private string pageUrl = "/form/number-input"; - private string title = "Blazor NumberInput Component"; - private string description = "Blazor Bootstrap NumberInput component is built around HTML input of type=\"number\" that prevents the user input based on the parameters set."; - private string imageUrl = "https://i.imgur.com/iUNBkki.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_01_Basic_Usage.razor deleted file mode 100644 index 8dfde818c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_01_Basic_Usage.razor +++ /dev/null @@ -1,9 +0,0 @@ -
- - -
-
Entered Amount: @amount
- -@code { - private int amount; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor deleted file mode 100644 index ce7b01edc..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor +++ /dev/null @@ -1,50 +0,0 @@ -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -@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; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_03_Enable_Min_Max.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_03_Enable_Min_Max.razor deleted file mode 100644 index fbf7094ec..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_03_Enable_Min_Max.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- - - Tip: The amount must be between 10 and 500. -
-
Entered Amount: @amount
- -@code { - private decimal? amount; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_04_Step.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_04_Step.razor deleted file mode 100644 index 890cd987c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_04_Step.razor +++ /dev/null @@ -1,18 +0,0 @@ -
- - - 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; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_05_Text_Alignment.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_05_Text_Alignment.razor deleted file mode 100644 index 8a378b689..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_05_Text_Alignment.razor +++ /dev/null @@ -1,16 +0,0 @@ -
- - -
-
Entered Amount: @amount
- -
- - -
-
Entered Amount: @amount2
- -@code { - private int amount; - private decimal amount2 = 2.34M; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_06_Allow_Negative_Numbers.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_06_Allow_Negative_Numbers.razor deleted file mode 100644 index 459ac0a6e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_06_Allow_Negative_Numbers.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- - - Tip: Negative numbers are also allowed. -
-
Entered Amount: @amount
- -@code { - private int amount; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_A_Disable_Number_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_A_Disable_Number_Input.razor deleted file mode 100644 index d962420dd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_A_Disable_Number_Input.razor +++ /dev/null @@ -1,22 +0,0 @@ -
- - -
- - - - - -@code { - private int? amount; - private bool disabled = true; - - private void Enable() => disabled = false; - - private void Disable() => disabled = true; - - private void Toggle() => disabled = !disabled; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_B_Disable_Number_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_B_Disable_Number_Input.razor deleted file mode 100644 index 6a584c134..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_B_Disable_Number_Input.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- - -
- - - - -@code { - private NumberInput numberInput = default!; - private int? amount; - - private void Disable() => numberInput.Disable(); - - private void Enable() => numberInput.Enable(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_Disable_Number_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_Disable_Number_Input.razor deleted file mode 100644 index c339e4318..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_07_Disable_Number_Input.razor +++ /dev/null @@ -1,16 +0,0 @@ -
- - -
- - - - -@code { - private NumberInput numberInput; - private int? amount; - - private void enableNumberInput() => numberInput.Enable(); - - private void disableNumberInput() => numberInput.Disable(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_08_Validations.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_08_Validations.razor deleted file mode 100644 index d34df4855..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_08_Validations.razor +++ /dev/null @@ -1,113 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - - -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-
- -
-
- - -
-
- - -@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; } - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_09_Events_Value_Changed.razor b/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_09_Events_Value_Changed.razor deleted file mode 100644 index 5492bab9a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/NumberInput/NumberInput_Demo_09_Events_Value_Changed.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- -
- -
-
-
- @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()}."; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/SwitchDocumentation.razor deleted file mode 100644 index c240b8e2c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/SwitchDocumentation.razor +++ /dev/null @@ -1,45 +0,0 @@ -@page "/switch" -@page "/form/switch" - -@title - - - -

Blazor Switch

-
- Use the Blazor Bootstrap Switch component to show the consistent cross-browser and cross-device custom checkboxes. -
- - - - - -
Use the Disabled parameter to disable the Switch.
- -
Also, use Enable() and Disable() methods to enable and disable the Switch.
- - Do not use both the Disabled parameter and Enable() & Disable() methods. - - - - -
- Put your switches on the opposite side by using the Reverse parameter. -
- - - -
- This event fired when the Switch selection changed. -
- - - - - -@code { - private string pageUrl = "/form/switch"; - private string title = "Blazor Switch Component"; - private string description = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox."; - private string imageUrl = "https://i.imgur.com/ALKzreq.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_01_Basic_Usage.razor deleted file mode 100644 index 114200c07..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_01_Basic_Usage.razor +++ /dev/null @@ -1,10 +0,0 @@ - - - -
Switch 1 Status: @agree1
-
Switch 2 Status: @agree2
- -@code { - bool agree1; - bool agree2 = true; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_A_Disable.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_A_Disable.razor deleted file mode 100644 index 140ff74fa..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_A_Disable.razor +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- - - - - -@code { - private bool agree = true; - private bool disabled = true; - - private void Enable() => disabled = false; - - private void Disable() => disabled = true; - - private void Toggle() => disabled = !disabled; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_B_Disable.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_B_Disable.razor deleted file mode 100644 index 9c945db79..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_B_Disable.razor +++ /dev/null @@ -1,15 +0,0 @@ -
- -
- - - - -@code { - private Switch switch1 = default!; - private bool agree = true; - - private void Disable() => switch1.Disable(); - - private void Enable() => switch1.Enable(); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_Disable.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_Disable.razor deleted file mode 100644 index 91175b68a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_02_Disable.razor +++ /dev/null @@ -1,15 +0,0 @@ -
- -
- - - - -@code { - private Switch _switch; - private bool agree = true; - - private void enableSwitch() => _switch.Enable(); - - private void disableSwitch() => _switch.Disable(); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_03_Reverse.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_03_Reverse.razor deleted file mode 100644 index 1e2cbb7d7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_03_Reverse.razor +++ /dev/null @@ -1,5 +0,0 @@ - - -@code { - bool agree; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor deleted file mode 100644 index ff3f786e0..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor +++ /dev/null @@ -1,18 +0,0 @@ - - -
@displaySwitchStatus
- - - -@code { - private bool agree; - private string displaySwitchStatus = default!; - - private void SwitchChanged(bool value) - { - agree = value; // this is mandatory - displaySwitchStatus = $"Switch Status: {value}, changed at {DateTime.Now.ToLocalTime()}."; - } - - private void ToggleSwitch() => agree = !agree; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_05_Form.razor b/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_05_Form.razor deleted file mode 100644 index a2b51208f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/Switch/Switch_Demo_05_Form.razor +++ /dev/null @@ -1,115 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - - -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- -
-
- -
-
- - -
-
- - -@code { - private bool disableSave; - private Employee employee = new(); - private EditContext editContext; - - [Inject] private ToastService ToastService { get; set; } - - protected override void OnInitialized() - { - employee = new() { FirstName = "Vikram Reddy", LastName = "Gaddam", IsActive = true }; - editContext = new EditContext(employee); - editContext.OnFieldChanged += HandleFieldChanged; - - base.OnInitialized(); - } - - public void HandleOnValidSubmit() - { - disableSave = !editContext.Validate(); - - var toastMessage = new ToastMessage - { - Title = "Save Employee Details", - Message = $"Employee details saved successfully.", - AutoHide = true, - Type = ToastType.Success, - IconName = IconName.CheckCircleFill, - }; - - ToastService.Notify(toastMessage); - } - - private void HandleFieldChanged(object sender, FieldChangedEventArgs e) - { - disableSave = !editContext.Validate(); - - var toastMessage = new ToastMessage - { - Title = "Field Changed Notification", - Message = $"The field \"{e.FieldIdentifier.FieldName}\" was changed.", - AutoHide = true, - Type = ToastType.Info - }; - - ToastService.Notify(toastMessage); - } - - private void ResetForm() - { - employee = new(); - editContext = new EditContext(employee); - editContext.OnFieldChanged += HandleFieldChanged; - } - - public class Employee - { - [Required(ErrorMessage = "First name required.")] - public string? FirstName { get; set; } - - [Required(ErrorMessage = "Last name required.")] - public string? LastName { get; set; } - - public bool IsActive { get; set; } - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInputDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInputDocumentation.razor deleted file mode 100644 index 860ac55d1..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInputDocumentation.razor +++ /dev/null @@ -1,74 +0,0 @@ -@page "/time-input" -@page "/form/time-input" - -@title - - - -

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. -
- - - - The input UI generally varies from browser to browser. - In unsupported browsers, the control degrades gracefully to type="text". - - - - - -
-

- The Blazor Bootstrap TimeInput component supports TimeOnly and TimeOnly?. - In the below example, TValue is set to TimeOnly and TimeOnly?. -

-
- - - -
- Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range. -
- - If the user tries to enter a number in the TimeInput field which is out of range, then it will override with Max or Min value based on the context. - If the user input exceeds the Max value, it will override with the Max value. If the user input is less than the Min value, then it will override with the Min value. - - - - -
Use the Disabled parameter to disable the TimeInput.
- -
Also, use Enable() and Disable() methods to enable and disable the TimeInput.
- - Do not use both the Disabled parameter and Enable() & Disable() methods. - - - - -
- Like any other blazor input component, TimeInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. -
- - - -
- This event fires on every user keystroke/selection that changes the TimeInput value. -
- - - -
- 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. -
- - -@code { - private string pageUrl = "/form/time-input"; - private string title = "Blazor TimeInput Component"; - private string description = "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."; - private string imageUrl = "https://i.imgur.com/1mVjqQv.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_01_Basic_Usage.razor deleted file mode 100644 index b565c3ba5..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_01_Basic_Usage.razor +++ /dev/null @@ -1,8 +0,0 @@ -
- -
-
Entered date: @date1
- -@code { - private TimeOnly date1 = new TimeOnly(13, 14); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_02_Generic_Type.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_02_Generic_Type.razor deleted file mode 100644 index c2162fb5b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_02_Generic_Type.razor +++ /dev/null @@ -1,20 +0,0 @@ -
- TimeOnly: -
-
- -
-
Entered time: @time1
- -
- TimeOnly?: -
-
- -
-
Entered time: @time2
- -@code { - private TimeOnly time1 = new TimeOnly(6, 40); - private TimeOnly? time2; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_03_Max_Min.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_03_Max_Min.razor deleted file mode 100644 index b200d27f7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_03_Max_Min.razor +++ /dev/null @@ -1,35 +0,0 @@ -
- 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 - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_A_Disable.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_A_Disable.razor deleted file mode 100644 index 0ead67607..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_A_Disable.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- -
-
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; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_B_Disable.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_B_Disable.razor deleted file mode 100644 index 7ee6cc608..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_B_Disable.razor +++ /dev/null @@ -1,17 +0,0 @@ -
- -
-
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(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_Disable_Date_Input.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_Disable_Date_Input.razor deleted file mode 100644 index f9af76b5f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_04_Disable_Date_Input.razor +++ /dev/null @@ -1,17 +0,0 @@ -
- -
-
Entered time: @time1
- - - - -@code { - private TimeInput timeInput = default!; - - private TimeOnly time1 = new TimeOnly(10, 50); // 10:50 AM - - private void enableTimeInput() => timeInput.Enable(); - - private void disableTimeInput() => timeInput.Disable(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_05_Validations.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_05_Validations.razor deleted file mode 100644 index 66fb3140d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_05_Validations.razor +++ /dev/null @@ -1,116 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - - -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-
- -
-
- - -
-
- - -@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; } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_06_Events_Value_Changed.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_06_Events_Value_Changed.razor deleted file mode 100644 index 8e5c694b9..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_06_Events_Value_Changed.razor +++ /dev/null @@ -1,17 +0,0 @@ -
- -
-
Changed time: @time1
- - - -@code { - private TimeOnly time1 = new TimeOnly(10, 0); // 10:00 AM - - private void TimeChanged(TimeOnly timeOnly) - { - time1 = timeOnly; - } - - private void UpdateTime() => time1 = new TimeOnly(11, 0); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor b/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor deleted file mode 100644 index 1a8dcbad0..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor +++ /dev/null @@ -1,117 +0,0 @@ -@using System.ComponentModel.DataAnnotations - - - - - - -
- -
- - -
-
- -
- -
- - -
-
- -
-
- - -
-
- - -@code { - private TimeInput arrivalTimeInput = default!; - private bool disableArrivalTimeInput = true; - - 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; - disableArrivalTimeInput = true; - - return; - } - - flightForm.DepartureTime = departureTime; - flightForm.ArrivalTime = null; - arrivalMinTime = departureTime.Value.AddHours(1); - arrivalMaxTime = departureTime.Value.AddHours(12); - disableArrivalTimeInput = false; - } - - 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/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/GettingStartedDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/GettingStartedDocumentation.razor deleted file mode 100644 index d26b89bc0..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/GettingStartedDocumentation.razor +++ /dev/null @@ -1,86 +0,0 @@ -@page "/getting-started/maui-blazor" - -@title - - - -

Getting started - MAUI Blazor App

-
Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.
- - -
Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager.
-
Install-Package Blazor.Bootstrap -Version @version
- - -
- Add the following references to the head section in the wwwroot/index.html. -
- - - -
- Add the following references to the body section in the wwwroot/index.html after the _framework/blazor.webview.js reference. -
- - - - chart.js reference is optional. Add when the Chart components are used in the application. - - - -
Add Blazor Bootstrap service in the MauiProgram.cs
- - -
Register tag helpers in _Imports.razor
- - - -
-

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.

-

-

    -
  1. wwwroot/css/bootstrap
    2. -
  2. wwwroot/css/open-iconic
    3. -
-

-

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.

-
- - -
-

Blazor Bootstrap Templates make it easy to create Blazor projects in a minute. Just install the templates with the NuGet package manager and you're good to go!

-

dotnet new install Blazor.Bootstrap.Templates::1.9.1

-

- Check the Visual Studio project templates GitHub repo here. -

-

-

- Blazor Bootstrap - Visual Studio project templates -
-

-
- - - Upgrade the Blazor.Bootstrap NuGet package to the latest available version. - - -@code { - private string pageUrl = "/getting-started/blazor-webassembly"; - private string title = "Getting started with Blazor Bootstrap - Blazor WebAssembly Project Setup"; - private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; - - private string? version; - [Inject] public IConfiguration Configuration { get; set; } = default!; - - protected override void OnInitialized() - { - version = $"{Configuration.GetValue("version")}"; // example: v0.6.1 - base.OnInitialized(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html deleted file mode 100644 index 1fd5b84e4..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_02_Starter_Template_Add_Script_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_02_Starter_Template_Add_Script_References_Index.html deleted file mode 100644 index 0d8c4af90..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_02_Starter_Template_Add_Script_References_Index.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_03_Starter_Template_Register_services_Program.cs b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_03_Starter_Template_Register_services_Program.cs deleted file mode 100644 index 61e22dc3c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_03_Starter_Template_Register_services_Program.cs +++ /dev/null @@ -1 +0,0 @@ -builder.Services.AddBlazorBootstrap(); // Add this line \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_04_Starter_Template_Imports.razor b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_04_Starter_Template_Imports.razor deleted file mode 100644 index 6bbb29aa0..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_04_Starter_Template_Imports.razor +++ /dev/null @@ -1 +0,0 @@ -@using BlazorBootstrap \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_05_Starter_Template_Remove_Default_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_05_Starter_Template_Remove_Default_References_Index.html deleted file mode 100644 index 84770c949..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/maui-blazor/Snippet_05_Starter_Template_Remove_Default_References_Index.html +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/GettingStartedDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/GettingStartedDocumentation.razor deleted file mode 100644 index 826419ee9..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/GettingStartedDocumentation.razor +++ /dev/null @@ -1,94 +0,0 @@ -@page "/getting-started/blazor-server" - -@title - - - -

Getting started - Blazor Server

-
Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.
- - -
Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager.
-
Install-Package Blazor.Bootstrap -Version @version
- - -
- 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. -
- - - 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 the following references to the body section in the Pages/_Host.cshtml after the _framework/blazor.server.js reference. -
- - - - chart.js reference is optional. Add when the Chart components are used in the application. - - - -
Add Blazor Bootstrap service in the Program.cs
- - -
Register tag helpers in _Imports.razor
- - - -
-

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.

-

-

    -
  1. wwwroot/css/bootstrap
    2. -
  2. wwwroot/css/open-iconic
    3. -
-

-

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.

-
- - -
-

Blazor Bootstrap Templates make it easy to create Blazor projects in a minute. Just install the templates with the NuGet package manager and you're good to go!

-

dotnet new install Blazor.Bootstrap.Templates::1.9.1

-

- Check the Visual Studio project templates GitHub repo here. -

-

-

- Blazor Bootstrap - Visual Studio project templates -
-

-
- - - Upgrade the Blazor.Bootstrap NuGet package to the latest available version. - - -@code { - private string pageUrl = "/getting-started/blazor-server"; - private string title = "Getting started with Blazor Bootstrap - Blazor Server Project Setup"; - private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; - - private string? version; - [Inject] public IConfiguration Configuration { get; set; } = default!; - - protected override void OnInitialized() - { - version = $"{Configuration.GetValue("version")}"; // example: v0.6.1 - base.OnInitialized(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html deleted file mode 100644 index 1fd5b84e4..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_01_B_Starter_Template_Add_CSS_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_01_B_Starter_Template_Add_CSS_References_Index.html deleted file mode 100644 index 5f845ec80..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_01_B_Starter_Template_Add_CSS_References_Index.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_02_Starter_Template_Add_Script_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_02_Starter_Template_Add_Script_References_Index.html deleted file mode 100644 index 0d8c4af90..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_02_Starter_Template_Add_Script_References_Index.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_03_Starter_Template_Register_services_Program.cs b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_03_Starter_Template_Register_services_Program.cs deleted file mode 100644 index 61e22dc3c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_03_Starter_Template_Register_services_Program.cs +++ /dev/null @@ -1 +0,0 @@ -builder.Services.AddBlazorBootstrap(); // Add this line \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_04_Starter_Template_Imports.razor b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_04_Starter_Template_Imports.razor deleted file mode 100644 index 6bbb29aa0..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_04_Starter_Template_Imports.razor +++ /dev/null @@ -1 +0,0 @@ -@using BlazorBootstrap \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_05_Starter_Template_Remove_Default_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_05_Starter_Template_Remove_Default_References_Index.html deleted file mode 100644 index 45f507124..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/server/Snippet_05_Starter_Template_Remove_Default_References_Index.html +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/GettingStartedDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/GettingStartedDocumentation.razor deleted file mode 100644 index 105771274..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/GettingStartedDocumentation.razor +++ /dev/null @@ -1,92 +0,0 @@ -@page "/getting-started" -@page "/getting-started/blazor-webassembly" - -@title - - - -

Getting started - Blazor WebAssembly

-
Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.
- - -
Looking to quickly add Blazor Bootstrap to your project? Use NuGet package manager.
-
Install-Package Blazor.Bootstrap -Version @version
- - -
- 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 the following references to the body section in the wwwroot/index.html after the _framework/blazor.webassembly.js reference. -
- - - - chart.js reference is optional. Add when the Chart components are used in the application. - - - -
Add Blazor Bootstrap service in the Program.cs
- - -
Register tag helpers in _Imports.razor
- - - -
-

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.

-

-

    -
  1. wwwroot/css/bootstrap
    2. -
  2. wwwroot/css/open-iconic
    3. -
-

-

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.

-
- - -
-

Blazor Bootstrap Templates make it easy to create Blazor projects in a minute. Just install the templates with the NuGet package manager and you're good to go!

-

dotnet new install Blazor.Bootstrap.Templates::1.9.1

-

- Check the Visual Studio project templates GitHub repo here. -

-

-

- Blazor Bootstrap - Visual Studio project templates -
-

-
- - - Upgrade the Blazor.Bootstrap NuGet package to the latest available version. - - -@code { - private string pageUrl = "/getting-started/blazor-webassembly"; - private string title = "Getting started with Blazor Bootstrap - Blazor WebAssembly Project Setup"; - private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; - - private string? version; - [Inject] public IConfiguration Configuration { get; set; } = default!; - - protected override void OnInitialized() - { - version = $"{Configuration.GetValue("version")}"; // example: v0.6.1 - base.OnInitialized(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html deleted file mode 100644 index 1fd5b84e4..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_01_A_Starter_Template_Add_CSS_References_Index.html +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_01_B_Starter_Template_Add_CSS_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_01_B_Starter_Template_Add_CSS_References_Index.html deleted file mode 100644 index 5f845ec80..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_01_B_Starter_Template_Add_CSS_References_Index.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_02_Starter_Template_Add_Script_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_02_Starter_Template_Add_Script_References_Index.html deleted file mode 100644 index 0d8c4af90..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_02_Starter_Template_Add_Script_References_Index.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_03_Starter_Template_Register_services_Program.cs b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_03_Starter_Template_Register_services_Program.cs deleted file mode 100644 index 61e22dc3c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_03_Starter_Template_Register_services_Program.cs +++ /dev/null @@ -1 +0,0 @@ -builder.Services.AddBlazorBootstrap(); // Add this line \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_04_Starter_Template_Imports.razor b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_04_Starter_Template_Imports.razor deleted file mode 100644 index 6bbb29aa0..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_04_Starter_Template_Imports.razor +++ /dev/null @@ -1 +0,0 @@ -@using BlazorBootstrap \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_05_Starter_Template_Remove_Default_References_Index.html b/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_05_Starter_Template_Remove_Default_References_Index.html deleted file mode 100644 index 84770c949..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/GettingStarted/webassembly/Snippet_05_Starter_Template_Remove_Default_References_Index.html +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/GridDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/GridDocumentation.razor deleted file mode 100644 index 1585c7518..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/GridDocumentation.razor +++ /dev/null @@ -1,189 +0,0 @@ -@page "/grid" - -@title - - - -

Blazor Grid

-
- Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging & sorting. -
- - -
For filtering, AllowFiltering and PropertyName parameters are required.
-
Add AllowFiltering="true" parameter to Grid and PropertyName parameter to all the GridColumns.
- - - -
In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive.
- -
By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
- - - - -
For paging, AllowPaging and PageSize parameters are required.
-
Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.
-The default page size is 10. - - - -
For sorting, AllowSorting and SortKeySelector parameters are required.
-
Add AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.
- - - - - - -
- FilterOperator and FilterValue parameters are required to set the default filter. -
-You can set the default filter on more than one GridColumn. -
The default sorting is enabled on the Id column in the below example.
- - - -
- Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example. -
- - - -
Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.
-Filter textbox width measured in pixels. - - - - - - -
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.
-If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column. -
The default sorting is enabled on the Employee Name column in the below example, and the sort direction is descending.
- - - -
Add Sortable="false"parameter the GridColumn to disable the sorting. If sorting is disabled, then the SortKeySelector parameter is not required. The sorting is disabled on the Designation column in the below example.
- - - -
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.
- - - -
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.
- - - -
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"). - - - -
To prevent text from wrapping, add TextNoWrap="true" to the GridColumn.
- - - -
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.
- - - -
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.
- - - -
This example shows how to save/load the Grid state. The state includes the page number, page size, and filters.
-In version 0.5.1 and above, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases. -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. - - - -
Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid.
- - - -
You can update the collection assigned to the Data parameter. In the below example, the grid will render the updated collection.
- - - -

- 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. -

- - - -
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.
- - - -
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.
- - - -
In the below example, we use <HeaderContent> and <ChildContent> tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.
- - - -
- Set AllowSelection="true" to enable the selection on the Grid. - By default, SelectionMode is Single. -
- - - -
- To select multiple rows, set SelectionMode="GridSelectionMode.Multiple". -
- - -

Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.

- - - -
- 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. -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
In the example below, you will see translations related to pagination and filters in Dutch.
- - -@code { - private string pageUrl = "/grid"; - private string title = "Blazor Grid Component"; - private string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; - private string imageUrl = "https://i.imgur.com/kKNgo2I.png"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_01_A_Client_Side_Filtering.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_01_A_Client_Side_Filtering.razor deleted file mode 100644 index b503b28fc..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_01_A_Client_Side_Filtering.razor +++ /dev/null @@ -1,59 +0,0 @@ - - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor deleted file mode 100644 index e630fd27c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor +++ /dev/null @@ -1,45 +0,0 @@ - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_02_Client_Side_Paging.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_02_Client_Side_Paging.razor deleted file mode 100644 index a34fdaf62..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_02_Client_Side_Paging.razor +++ /dev/null @@ -1,55 +0,0 @@ - - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_03_Client_Side_Sorting.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_03_Client_Side_Sorting.razor deleted file mode 100644 index e6ee6c7f8..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_03_Client_Side_Sorting.razor +++ /dev/null @@ -1,56 +0,0 @@ - - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_04_Client_Side_Filtering_Paging_And_Sorting.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_04_Client_Side_Filtering_Paging_And_Sorting.razor deleted file mode 100644 index b6bf291e7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_04_Client_Side_Filtering_Paging_And_Sorting.razor +++ /dev/null @@ -1,48 +0,0 @@ - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_05_Set_Default_Filter.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_05_Set_Default_Filter.razor deleted file mode 100644 index 7db0c2d9e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_05_Set_Default_Filter.razor +++ /dev/null @@ -1,51 +0,0 @@ - - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_06_Disable_Specific_Column_Filter.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_06_Disable_Specific_Column_Filter.razor deleted file mode 100644 index 5768a2dc5..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_06_Disable_Specific_Column_Filter.razor +++ /dev/null @@ -1,45 +0,0 @@ - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_06_Increase_Filter_Textbox_Width.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_06_Increase_Filter_Textbox_Width.razor deleted file mode 100644 index 7901250fc..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_06_Increase_Filter_Textbox_Width.razor +++ /dev/null @@ -1,57 +0,0 @@ - - - @context.Id - - - @context.FirstName - - - @context.LastName - - - @context.Email - - - @context.Company - - - @context.Designation - - - @context.DOJ - - - @context.Salary.ToString("N2") - - - @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 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_07_Server_Side_Filtering_Paging_And_Sorting.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_07_Server_Side_Filtering_Paging_And_Sorting.razor deleted file mode 100644 index e4cec0174..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_07_Server_Side_Filtering_Paging_And_Sorting.razor +++ /dev/null @@ -1,50 +0,0 @@ - - - - @context.CustomerId - - - @context.CustomerName - - - @context.Phone - - - @context.Email - - - @context.Address - - - @context.PostalZip - - - @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 }); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_08_Default_Sorting.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_08_Default_Sorting.razor deleted file mode 100644 index 2e56952e2..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_08_Default_Sorting.razor +++ /dev/null @@ -1,45 +0,0 @@ - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_09_Disable_Specific_Column_Sorting.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_09_Disable_Specific_Column_Sorting.razor deleted file mode 100644 index 975339753..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_09_Disable_Specific_Column_Sorting.razor +++ /dev/null @@ -1,45 +0,0 @@ - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_10_Header_Text_Alignment.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_10_Header_Text_Alignment.razor deleted file mode 100644 index e822cfeca..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_10_Header_Text_Alignment.razor +++ /dev/null @@ -1,45 +0,0 @@ - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_11_Grid_Cell_Alignment.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_11_Grid_Cell_Alignment.razor deleted file mode 100644 index 608dd233f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_11_Grid_Cell_Alignment.razor +++ /dev/null @@ -1,45 +0,0 @@ - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.Salary - - - @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 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_12_Grid_Cell_Formating.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_12_Grid_Cell_Formating.razor deleted file mode 100644 index 850c5fa99..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_12_Grid_Cell_Formating.razor +++ /dev/null @@ -1,45 +0,0 @@ - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.Salary.ToString("N2") - - - @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 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_13_Grid_Cell_Nowrap.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_13_Grid_Cell_Nowrap.razor deleted file mode 100644 index bd3be7d98..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_13_Grid_Cell_Nowrap.razor +++ /dev/null @@ -1,57 +0,0 @@ - - - @context.Id - - - @context.FirstName - - - @context.LastName - - - @context.Email - - - @context.Company - - - @context.Designation - - - @context.DOJ - - - @context.Salary.ToString("N2") - - - @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 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_14_Pagination_Alignment.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_14_Pagination_Alignment.razor deleted file mode 100644 index 7d1156a2f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_14_Pagination_Alignment.razor +++ /dev/null @@ -1,56 +0,0 @@ - - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_15_Empty_Data.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_15_Empty_Data.razor deleted file mode 100644 index 854dfb401..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_15_Empty_Data.razor +++ /dev/null @@ -1,23 +0,0 @@ - - - @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 }); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_16_Save_And_Load_Grid_Settings.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_16_Save_And_Load_Grid_Settings.razor deleted file mode 100644 index 31d1311bd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_16_Save_And_Load_Grid_Settings.razor +++ /dev/null @@ -1,85 +0,0 @@ -@using System.Text.Json - - - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_17_A_Data_Parameter_Assign_Collection.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_17_A_Data_Parameter_Assign_Collection.razor deleted file mode 100644 index 936279d0e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_17_A_Data_Parameter_Assign_Collection.razor +++ /dev/null @@ -1,44 +0,0 @@ -@using BlazorBootstrap.Demo.Server; - -@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 } - }) - }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_17_B_Data_Parameter_Update_Collection.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_17_B_Data_Parameter_Update_Collection.razor deleted file mode 100644 index 7326b556a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_17_B_Data_Parameter_Update_Collection.razor +++ /dev/null @@ -1,68 +0,0 @@ -@using BlazorBootstrap.Demo.Server; - - - - - - - @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; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_18_Specify_Custom_Row_Class.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_18_Specify_Custom_Row_Class.razor deleted file mode 100644 index d73b33b22..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_18_Specify_Custom_Row_Class.razor +++ /dev/null @@ -1,68 +0,0 @@ - - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_19_Specify_Custom_Column_Class.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_19_Specify_Custom_Column_Class.razor deleted file mode 100644 index 4594a85ae..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_19_Specify_Custom_Column_Class.razor +++ /dev/null @@ -1,61 +0,0 @@ - - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_20_Specify_Custom_Column_Header.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_20_Specify_Custom_Column_Header.razor deleted file mode 100644 index fd8728298..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_20_Specify_Custom_Column_Header.razor +++ /dev/null @@ -1,67 +0,0 @@ - - - - @context.Id - - - @context.Name - - - @context.Designation - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_21_Selection.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_21_Selection.razor deleted file mode 100644 index 18e3193b1..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_21_Selection.razor +++ /dev/null @@ -1,76 +0,0 @@ - - - - @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; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_22_Multiple_Selection.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_22_Multiple_Selection.razor deleted file mode 100644 index 35534401f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_22_Multiple_Selection.razor +++ /dev/null @@ -1,78 +0,0 @@ - - - - @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; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_23_Disable_Selection.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_23_Disable_Selection.razor deleted file mode 100644 index 3dca7f74d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_23_Disable_Selection.razor +++ /dev/null @@ -1,87 +0,0 @@ - - - - @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; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_24_Dynamic_Page_Size.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_24_Dynamic_Page_Size.razor deleted file mode 100644 index 82bf6e755..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_24_Dynamic_Page_Size.razor +++ /dev/null @@ -1,62 +0,0 @@ - - - - @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; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_25_Page_Size_Selection.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_25_Page_Size_Selection.razor deleted file mode 100644 index d0404960b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_25_Page_Size_Selection.razor +++ /dev/null @@ -1,57 +0,0 @@ - - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_26_Header_Row_CSS_Class.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_26_Header_Row_CSS_Class.razor deleted file mode 100644 index c5d74a52b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_26_Header_Row_CSS_Class.razor +++ /dev/null @@ -1,140 +0,0 @@ - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_27_Filters_Row_CSS_Class.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_27_Filters_Row_CSS_Class.razor deleted file mode 100644 index 252e3174d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_27_Filters_Row_CSS_Class.razor +++ /dev/null @@ -1,241 +0,0 @@ - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @context.IsActive - - - - - - - - @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 = 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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_28_Row_Click.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_28_Row_Click.razor deleted file mode 100644 index d19691dee..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_28_Row_Click.razor +++ /dev/null @@ -1,62 +0,0 @@ - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @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}" }); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_29_Row_Double_Click.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_29_Row_Double_Click.razor deleted file mode 100644 index 75e2780aa..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_29_Row_Double_Click.razor +++ /dev/null @@ -1,62 +0,0 @@ - - - - @context.Id - - - - @context.Name - - - - @context.Designation - - - - @context.DOJ - - - - @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}" }); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_30_Translations.razor b/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_30_Translations.razor deleted file mode 100644 index 7329ae0a7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Grid/Grid_Demo_30_Translations.razor +++ /dev/null @@ -1,87 +0,0 @@ - - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @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 }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/IconDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/IconDocumentation.razor deleted file mode 100644 index 17e74b5ab..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/IconDocumentation.razor +++ /dev/null @@ -1,47 +0,0 @@ -@page "/icons" - -@title - - - -

Blazor Icons

-
- The Icon component will display an icon from any icon font. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -@code{ - private string pageUrl = "/icons"; - private string title = "Blazor Icon Component"; - private string description = "Blazor Bootstrap icon component will display an icon from any icon font."; - private string imageUrl = "https://i.imgur.com/273TamX.png"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_01_Examples.razor deleted file mode 100644 index 4932d3b8d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_01_Examples.razor +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_02_Sizes.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_02_Sizes.razor deleted file mode 100644 index 73b661b3d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_02_Sizes.razor +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_03_Colors.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_03_Colors.razor deleted file mode 100644 index 19bb4e340..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_03_Colors.razor +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_04_Inline_Text_With_Icon.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_04_Inline_Text_With_Icon.razor deleted file mode 100644 index 22259f6c1..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_04_Inline_Text_With_Icon.razor +++ /dev/null @@ -1 +0,0 @@ -Inline text \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_05_Link_With_Icon.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_05_Link_With_Icon.razor deleted file mode 100644 index 289ce5c70..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_05_Link_With_Icon.razor +++ /dev/null @@ -1,3 +0,0 @@ - - Example link text - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_06_Link_With_Custom_Icon.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_06_Link_With_Custom_Icon.razor deleted file mode 100644 index 0c8fed32f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_06_Link_With_Custom_Icon.razor +++ /dev/null @@ -1,3 +0,0 @@ - - Example link text - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_07_Button_With_Icon_And_Text.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_07_Button_With_Icon_And_Text.razor deleted file mode 100644 index c146cec90..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_07_Button_With_Icon_And_Text.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_08_Button_With_Icon_Only.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_08_Button_With_Icon_Only.razor deleted file mode 100644 index b51f43404..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_08_Button_With_Icon_Only.razor +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_09_Tooltip.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_09_Tooltip.razor deleted file mode 100644 index ca7c42492..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_09_Tooltip.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_10_Bootstrap_Icons.razor b/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_10_Bootstrap_Icons.razor deleted file mode 100644 index 5a6aec3de..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Icons/Icon_Demo_10_Bootstrap_Icons.razor +++ /dev/null @@ -1,13 +0,0 @@ -
    - @foreach (var item in Enum.GetValues().Where(x => x != IconName.None)) - { -
  • -
    -
    - -
    -
    @item.ToString()
    -
    -
    • - } -
\ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Index.razor b/BlazorBootstrap.Demo.Server/Pages/Index.razor deleted file mode 100644 index d9d4f8c3f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Index.razor +++ /dev/null @@ -1,278 +0,0 @@ -@page "/" -@layout EmptyLayout - -Blazor Bootstrap Components Examples & Demos | Blazor Bootstrap - - - -
-
-
- - New in @version - @releaseShortDescription - - Blazor Bootstrap -

Build fast, responsive sites with BlazorBootstrap

-

- High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers. -

-

- Currently @version - - Nuget - - Nuget -

-
-
-
- -
-
-

All Components

-
- -
-
- -

Accordion

- -
-
- -

Alerts

- -
-
- -

Auto Complete

- -
-
- -

Badge

- -
-
- -

Breadcrumb

- -
-
- -

Buttons Updated

- -
-
- -

Callout

- -
-
- -

Card New

- -
-
- -

Charts Updated

- -
-
- -

Collapse

- -
-
- -

Confirm Dialog

- -
-
- -

Dropdown New

- -
-
- -

Currency Input

- -
-
- -

Date Input

- -
-
- -

Grid Updated

- -
-
- -

Icons

- -
-
- -

Modals

- -
-
- -

Number Input

- -
-
- -

Offcanvas

- -
-
- -

Pagination

- -
-
- -

Placeholders

- -
-
- -

Preload

- -
-
- -

Progress

- -
-
- -

Sidebar

- -
-
- -

Switch Updated

- -
-
- -

Tabs

- -
-
- -

Time Input

- -
-
- -

Toasts

- -
-
- -

Tooltips

- -
-
-
- -
-
-

Form Components

-
- -
-
- -

Auto Complete

- -
-
- -

Currency Input

- -
-
- -

Date Input

- -
-
- -

Number Input

- -
-
- -

Switch Updated

- -
-
- -

Time Input

- -
-
-
- -
-
-

Data Visualization Components

-
- -
-
- -

Bar Chart Updated

- -
-
- -

Doughnut Chart Updated

- -
-
- -

Line Chart Updated

- -
-
- -

Pie Chart Updated

- -
-
-
- -
- - This demo website is built using the Blazor Bootstrap library and published on the Azure Static Web App. - See our source code on GitHub. - -
- -@code { - private string pageUrl = "/"; - private string title = "Blazor Bootstrap Component Library"; - private string description = "Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework."; - private string imageUrl = "https://i.imgur.com/MahdBbZ.png"; - - private string version = default!; - private string releaseShortDescription = default!; - - [Inject] public IConfiguration Configuration { get; set; } = default!; - - protected override void OnInitialized() - { - version = $"v{Configuration.GetValue("version")}"; // example: v0.6.1 - releaseShortDescription = $"{Configuration.GetValue("release:short_description")}"; - - base.OnInitialized(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Layout/server/LayoutServerDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Layout/server/LayoutServerDocumentation.razor deleted file mode 100644 index 20596ec68..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Layout/server/LayoutServerDocumentation.razor +++ /dev/null @@ -1,44 +0,0 @@ -@page "/layout-setup/blazor-server" - -@title - - - -

Layout Setup - Blazor Server

-
Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.
- - -
- 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. -
  2. Blazor Server Project: Follow the getting started steps for the initial setup.
    3. -
-
- - -
- 1. Replace MainLayout.razor page code with the below code. -
- - Remove all the CSS content from the Shared/MainLayout.razor.css file. - - - - -@code { - private string pageUrl = "/layout-setup/blazor-server"; - private string title = "Blazor Bootstrap Layout Setup - Blazor Server"; - private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; - - private string version = default!; - - [Inject] public IConfiguration Configuration { get; set; } = default!; - - protected override void OnInitialized() - { - version = $"{Configuration.GetValue("version")}"; // example: v0.6.1 - base.OnInitialized(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Layout/server/Layout_Server_Demo_01.razor b/BlazorBootstrap.Demo.Server/Pages/Layout/server/Layout_Server_Demo_01.razor deleted file mode 100644 index 9ea046b01..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Layout/server/Layout_Server_Demo_01.razor +++ /dev/null @@ -1,47 +0,0 @@ -@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; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor deleted file mode 100644 index 317b43956..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor +++ /dev/null @@ -1,45 +0,0 @@ -@page "/layout" -@page "/layout-setup/blazor-webassembly" - -@title - - - -

Layout Setup - Blazor WebAssembly

-
Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS framework.
- - -
- 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. -
  2. Blazor Server Project: Follow the getting started steps for the initial setup.
    3. -
-
- - -
- 1. Replace MainLayout.razor page code with the below code. -
- - Remove all the CSS content from the Shared/MainLayout.razor.css file. - - - - -@code { - private string pageUrl = "/layout-setup/blazor-webassembly"; - private string title = "Blazor Bootstrap Layout Setup - Blazor WebAssembly"; - private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; - - private string version = default!; - - [Inject] public IConfiguration Configuration { get; set; } = default!; - - protected override void OnInitialized() - { - version = $"{Configuration.GetValue("version")}"; // example: v0.6.1 - base.OnInitialized(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor b/BlazorBootstrap.Demo.Server/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor deleted file mode 100644 index 9ea046b01..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Layout/webassembly/Layout_WebAssembly_Demo_01.razor +++ /dev/null @@ -1,47 +0,0 @@ -@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; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/EmployeeDemoComponent1.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/EmployeeDemoComponent1.razor deleted file mode 100644 index 28ae6819f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/EmployeeDemoComponent1.razor +++ /dev/null @@ -1,27 +0,0 @@ -
-
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(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/EmployeeDemoComponent2.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/EmployeeDemoComponent2.razor deleted file mode 100644 index 1f30f5771..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/EmployeeDemoComponent2.razor +++ /dev/null @@ -1,33 +0,0 @@ -
-
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(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/ModalDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/ModalDocumentation.razor deleted file mode 100644 index f2e993a2f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/ModalDocumentation.razor +++ /dev/null @@ -1,70 +0,0 @@ -@page "/modals" - -@title - - - -

Blazor Modal

-
- Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content. -
- - - - - -
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. -
- -EmployeeDemoComponent1.razor - - - -
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.
    • -
-
- -EmployeeDemoComponent2.razor - - - -
When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. Click the button below to try it.
- - - -
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.
- - -
You can also create a scrollable modal that allows scroll the modal body by adding IsScrollable="true".
- - - -
Add IsVerticallyCentered="true" to vertically center the modal.
- - - - -
Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
- - - - - - -
Blazor Bootstrap modal class exposes a few events for hooking into modal functionality.
- - -@code { - private string pageUrl = "/modals"; - private string title = "Blazor Modal Component"; - private string description = "Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content."; - private string imageUrl = "https://i.imgur.com/aWbURjD.jpg"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_01_Examples.razor deleted file mode 100644 index b2272a5a2..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_01_Examples.razor +++ /dev/null @@ -1,25 +0,0 @@ - - - Modal body text goes here. - - - - - - - - - -@code { - private Modal modal = default!; - - private async Task OnShowModalClick() - { - await modal.ShowAsync(); - } - - private async Task OnHideModalClick() - { - await modal.HideAsync(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_A_Show_Dynamic_Component.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_A_Show_Dynamic_Component.razor deleted file mode 100644 index 74f810dbf..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_A_Show_Dynamic_Component.razor +++ /dev/null @@ -1,15 +0,0 @@ - - - - -@code { - private Modal modal = default!; - private string? message; - - private async Task ShowEmployeeComponent() - { - var parameters = new Dictionary(); - parameters.Add("EmployeeId", 321); - await modal.ShowAsync(title: "Employee Details", parameters: parameters); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component.razor deleted file mode 100644 index d7d453ebb..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component.razor +++ /dev/null @@ -1,22 +0,0 @@ - - - - -
- @message -
- -@code { - private Modal modal = 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 modal.ShowAsync(title: "Employee Details", parameters: parameters); - } - - private void ShowDTMessage(MouseEventArgs e) => message = $"The current DT is: {DateTime.Now}."; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_Static_Backdrop.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_Static_Backdrop.razor deleted file mode 100644 index c1e24b897..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_02_Static_Backdrop.razor +++ /dev/null @@ -1,25 +0,0 @@ - - - I will not close if you click outside me. Don't even try to press escape key. - - - - - - - - - -@code { - private Modal modal = default!; - - private async Task OnShowModalClick() - { - await modal.ShowAsync(); - } - - private async Task OnHideModalClick() - { - await modal.HideAsync(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_03_Scrolling_Long_Content_A.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_03_Scrolling_Long_Content_A.razor deleted file mode 100644 index 81dc0f36e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_03_Scrolling_Long_Content_A.razor +++ /dev/null @@ -1,26 +0,0 @@ - - -

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 = default!; - - private async Task OnShowModalClick() - { - await modal.ShowAsync(); - } - - private async Task OnHideModalClick() - { - await modal.HideAsync(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_03_Scrolling_Long_Content_B.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_03_Scrolling_Long_Content_B.razor deleted file mode 100644 index ea1caf435..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_03_Scrolling_Long_Content_B.razor +++ /dev/null @@ -1,26 +0,0 @@ - - -

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 = default!; - - private async Task OnShowModalClick() - { - await modal.ShowAsync(); - } - - private async Task OnHideModalClick() - { - await modal.HideAsync(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_04_Vertically_Centered.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_04_Vertically_Centered.razor deleted file mode 100644 index 07f8fe744..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_04_Vertically_Centered.razor +++ /dev/null @@ -1,25 +0,0 @@ - - - This is a vertically centered modal. - - - - - - - - - -@code { - private Modal modal = default!; - - private async Task OnShowModalClick() - { - await modal.ShowAsync(); - } - - private async Task OnHideModalClick() - { - await modal.HideAsync(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_04_Vertically_Centered_And_Scrollable.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_04_Vertically_Centered_And_Scrollable.razor deleted file mode 100644 index 1c537bec3..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_04_Vertically_Centered_And_Scrollable.razor +++ /dev/null @@ -1,26 +0,0 @@ - - -

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 = default!; - - private async Task OnShowModalClick() - { - await modal.ShowAsync(); - } - - private async Task OnHideModalClick() - { - await modal.HideAsync(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_05_Optional_Sizes.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_05_Optional_Sizes.razor deleted file mode 100644 index fb8b5e092..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_05_Optional_Sizes.razor +++ /dev/null @@ -1,19 +0,0 @@ - - ... - - - ... - - - ... - - - - - - -@code { - private Modal xlModal = default!; - private Modal lgModal = default!; - private Modal smModal = default!; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_06_Fullscreen_Modal.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_06_Fullscreen_Modal.razor deleted file mode 100644 index 5f964393d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_06_Fullscreen_Modal.razor +++ /dev/null @@ -1,34 +0,0 @@ - - ... - - - ... - - - ... - - - ... - - - ... - - - ... - - - - - - - - - -@code { - private Modal modal = default!; - private Modal smModal = default!; - private Modal mdModal = default!; - private Modal lgModal = default!; - private Modal xlModal = default!; - private Modal xxlModal = default!; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_07_Events.razor b/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_07_Events.razor deleted file mode 100644 index 650d42f1d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Modal/Modal_Demo_07_Events.razor +++ /dev/null @@ -1,61 +0,0 @@ - - - - Modal body text goes here. - - - - - - - - - - - -@code { - private Modal modal = default!; - - [Inject] ToastService ToastService { get; set; } = default!; - - private async Task OnShowModalClick() - { - await modal.ShowAsync(); - } - - private async Task OnHideModalClick() - { - await modal.HideAsync(); - } - - private void OnModalShowing() - { - ToastService.Notify(new (ToastType.Primary, $"Event: Showing called. DateTime: {DateTime.Now}")); - } - - private void OnModalShown() - { - ToastService.Notify(new (ToastType.Success, $"Event: Show called. DateTime: {DateTime.Now}")); - } - - private void OnModalHiding() - { - ToastService.Notify(new(ToastType.Danger, $"Event: Hiding called. DateTime: {DateTime.Now}")); - } - - private void OnModalHidden() - { - ToastService.Notify(new(ToastType.Warning, $"Event: Hide called. DateTime: {DateTime.Now}")); - } - - private void OnModalHidePrevented() - { - ToastService.Notify(new(ToastType.Info, $"Event: Hide Prevented called. DateTime: {DateTime.Now}")); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/EmployeeDemoComponent1.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/EmployeeDemoComponent1.razor deleted file mode 100644 index 5f6840fcd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/EmployeeDemoComponent1.razor +++ /dev/null @@ -1,27 +0,0 @@ -
-
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(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/EmployeeDemoComponent2.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/EmployeeDemoComponent2.razor deleted file mode 100644 index ad5135c19..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/EmployeeDemoComponent2.razor +++ /dev/null @@ -1,33 +0,0 @@ -
-
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(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/OffcanvasDocumentation.razor deleted file mode 100644 index f73bfeaf9..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/OffcanvasDocumentation.razor +++ /dev/null @@ -1,64 +0,0 @@ -@page "/offcanvas" - -@title - - - -

Blazor Offcanvas

-
- Build hidden sidebars into your project for navigation, shopping carts, and more with a offcanvas component. -
- -Similar to modals, only one offcanvas can be shown at a time. - - - - - -
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. -
- -EmployeeDemoComponent1.razor - - - -
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.
    • -
-
- -EmployeeDemoComponent2.razor - - - -
Try the top, bottom, and left examples out below.
- - -Default placement for the offcanvas component is right. - - -
When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.
- - - -
Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.
- - - - -
Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.
- - -@code { - private string pageUrl = "/offcanvas"; - private string title = "Blazor Offcanvas Component"; - private string description = "Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component."; - private string imageUrl = "https://i.imgur.com/1vNz5Ci.jpg"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_01_Examples.razor deleted file mode 100644 index a3e7a66df..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_01_Examples.razor +++ /dev/null @@ -1,33 +0,0 @@ - - -
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(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_02_A_Show_Dynamic_Component.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_02_A_Show_Dynamic_Component.razor deleted file mode 100644 index d2726f1b6..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_02_A_Show_Dynamic_Component.razor +++ /dev/null @@ -1,15 +0,0 @@ - - - - -@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); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component.razor deleted file mode 100644 index 179ff23ac..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_02_B_Pass_Event_Callback_to_a_Dynamic_Component.razor +++ /dev/null @@ -1,22 +0,0 @@ - - - - -
- @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}."; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_03_Placement.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_03_Placement.razor deleted file mode 100644 index f5ed18853..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_03_Placement.razor +++ /dev/null @@ -1,18 +0,0 @@ - - ... - - - - - - -@code { - private Offcanvas offcanvas; - private Placement placement; - - private async Task OnShowOffcanvasClick(Placement placement) - { - this.placement = placement; - await offcanvas?.ShowAsync(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_04_Static_Backdrop.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_04_Static_Backdrop.razor deleted file mode 100644 index a034fa5e7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_04_Static_Backdrop.razor +++ /dev/null @@ -1,23 +0,0 @@ - - -

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(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_05_Sizes_A_Small.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_05_Sizes_A_Small.razor deleted file mode 100644 index b6ed659df..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_05_Sizes_A_Small.razor +++ /dev/null @@ -1,23 +0,0 @@ - - -

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(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_05_Sizes_B_Large.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_05_Sizes_B_Large.razor deleted file mode 100644 index 9960f85e2..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_05_Sizes_B_Large.razor +++ /dev/null @@ -1,23 +0,0 @@ - - -

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(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_06_Events.razor b/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_06_Events.razor deleted file mode 100644 index 543c4720a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Offcanvas/Offcanvas_Demo_06_Events.razor +++ /dev/null @@ -1,52 +0,0 @@ - - - -
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"); }); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Pagination/PaginationDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Pagination/PaginationDocumentation.razor deleted file mode 100644 index 54bd38773..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Pagination/PaginationDocumentation.razor +++ /dev/null @@ -1,37 +0,0 @@ -@page "/pagination" - -@title - - - -

Blazor Pagination

-
- Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. -
- - -
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.
- - - - - - - - - -
Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.
- - - - - - - - -@code { - private string pageUrl = "/pagination"; - private string title = "Blazor Pagination Component"; - private string description = "Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_01_Examples.razor deleted file mode 100644 index b4cc81c32..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_01_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_02_Working_With_Icons.razor b/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_02_Working_With_Icons.razor deleted file mode 100644 index 9905c5ecb..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_02_Working_With_Icons.razor +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_03_Disabled_And_Active_States.razor b/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_03_Disabled_And_Active_States.razor deleted file mode 100644 index 69eee1ef7..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_03_Disabled_And_Active_States.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_04_Sizing.razor b/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_04_Sizing.razor deleted file mode 100644 index 1db78c068..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_04_Sizing.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_05_Alignment.razor b/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_05_Alignment.razor deleted file mode 100644 index fa64cb44d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_05_Alignment.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_06_Events.razor b/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_06_Events.razor deleted file mode 100644 index 87342ea6e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Pagination/Pagination_Demo_06_Events.razor +++ /dev/null @@ -1,15 +0,0 @@ - - -Current Page Number: @currentPageNumber - - -@code { - int currentPageNumber = 2; - - private async Task OnPageChangedAsync(int newPageNumber) - { - await Task.Run(() => { currentPageNumber = newPageNumber; }); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Placeholders/PlaceholderDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Placeholders/PlaceholderDocumentation.razor deleted file mode 100644 index 2a7537956..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Placeholders/PlaceholderDocumentation.razor +++ /dev/null @@ -1,41 +0,0 @@ -@page "/placeholders" - -@title - - - -

Blazor Placeholders

-
- Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading. -
- -

About

-
- Placeholders can be used to enhance the experience of your application. -
- - - - - -
You can change the width through PlaceholderWidth, width utilities, or inline styles.
- - - -
By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum.
- - - -
The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum.
- - - -
Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.
- - -@code { - private string pageUrl = "/placeholders"; - private string title = "Blazor Placeholder Component"; - private string description = "Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading."; - private string imageUrl = "https://i.imgur.com/JcLisSd.png"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_01_Examples.razor deleted file mode 100644 index 544945772..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_01_Examples.razor +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_02_Width.razor b/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_02_Width.razor deleted file mode 100644 index d908ac3e2..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_02_Width.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_03_Color.razor b/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_03_Color.razor deleted file mode 100644 index 6e4fe54b4..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_03_Color.razor +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_04_Sizing.razor b/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_04_Sizing.razor deleted file mode 100644 index 96f526a01..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_04_Sizing.razor +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_05_Animation.razor b/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_05_Animation.razor deleted file mode 100644 index bb5c8c6c4..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Placeholders/Placeholder_Demo_05_Animation.razor +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - -
-
- - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Preload/PreloadDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Preload/PreloadDocumentation.razor deleted file mode 100644 index 9eb5b433b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Preload/PreloadDocumentation.razor +++ /dev/null @@ -1,55 +0,0 @@ -@page "/preload" - -@title - - - -

Blazor Preload

-
Indicate the loading state of a page with Blazor Bootstrap 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.
    • -
-
-@* -
In the below example, when the page loads PreloadService.Show() is called to show the spinner.
-*@ - - -
1. Add the Preload component in MainLayout.razor page as shown below.
- -
2. Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API, respectively, as shown below.
- - - -
- 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 { - private string pageUrl = "/preload"; - private string title = "Blazor Preload Component"; - private string description = "Indicate the loading state of a page with Blazor Bootstrap preload component."; - private string imageUrl = "https://i.imgur.com/3pvzbXY.png"; - - [Inject] PreloadService PreloadService { get; set; } - - protected override void OnInitialized() - { - base.OnInitialized(); - - Task.Run(async () => - { - PreloadService.Show(); - await Task.Delay(3000); - PreloadService.Hide(); - }); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_01_Examples.razor deleted file mode 100644 index 3aae0e818..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_01_Examples.razor +++ /dev/null @@ -1,21 +0,0 @@ - - -@code { - [Inject] protected PreloadService PreloadService { get; set; } - - protected override void OnInitialized() - { - base.OnInitialized(); - - Task.Run(() => ShowSpinnerAsync()); - } - - private async Task ShowSpinnerAsync() - { - PreloadService.Show(); - - await Task.Delay(3000); // call the service/api - - PreloadService.Hide(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_02_Change_Spinner_Color.razor b/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_02_Change_Spinner_Color.razor deleted file mode 100644 index 2e124a437..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_02_Change_Spinner_Color.razor +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - -@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(); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_03_Global_Preload_For_Application_01.razor b/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_03_Global_Preload_For_Application_01.razor deleted file mode 100644 index ffb84ca6e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_03_Global_Preload_For_Application_01.razor +++ /dev/null @@ -1,9 +0,0 @@ -@using BlazorBootstrap -. -. - -... MainLayout.razor code goes here ... - -. -. - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_03_Global_Preload_For_Application_02.razor b/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_03_Global_Preload_For_Application_02.razor deleted file mode 100644 index f821f1a64..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Preload/Preload_Demo_03_Global_Preload_For_Application_02.razor +++ /dev/null @@ -1,22 +0,0 @@ -@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(); - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/ProgressDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/ProgressDocumentation.razor deleted file mode 100644 index 6943967f1..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/ProgressDocumentation.razor +++ /dev/null @@ -1,53 +0,0 @@ -@page "/progress" - -@title - - - -

Blazor Progress

-
Documentation and examples for using the Blazor Progress component featuring support for stacked bars, animated backgrounds, and text labels.
- - - - - -
Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method.
- - - -
Use IncreaseWidth() or DecreaseWidth() methods to increase or decrease the Blazor ProgressBar width.
- - - -
Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels.
- - - -
Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components.
- - - -
You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.
- - - -
Include multiple Blazor ProgressBar components in a Blazor Progress component if needed.
- - - -
Add Type="ProgressType.Striped" to any Blazor ProgressBar component to apply a stripe.
- - - -
The stripes can also be animated. Add Type="ProgressType.StripedAndAnimated" to the Blazor ProgressBar component to animate the stripes right to the left.
- - - - - -@code { - private string pageUrl = "/progress"; - private string title = "Blazor Progress Component"; - private string description = "Documentation and examples for using Blazor Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."; - private string imageUrl = "https://i.imgur.com/MK142lQ.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_01_How_It_Works.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_01_How_It_Works.razor deleted file mode 100644 index 7753c6d96..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_01_How_It_Works.razor +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_02_Labels.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_02_Labels.razor deleted file mode 100644 index f0bcbea50..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_02_Labels.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_03_Set_Width_Programmatically.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_03_Set_Width_Programmatically.razor deleted file mode 100644 index 9827e04bd..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_03_Set_Width_Programmatically.razor +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - -@code { - ProgressBar progressBar; - - private void IncreaseProgressBar() - { - progressBar.IncreaseWidth(10); - progressBar.SetLabel($"{progressBar.GetWidth()}%"); - } - - private void DecreaseProgressBar() - { - progressBar.DecreaseWidth(10); - progressBar.SetLabel($"{progressBar.GetWidth()}%"); - } - - private void ResetProgressBar() - { - progressBar.SetWidth(0); - progressBar.SetLabel($"{progressBar.GetWidth()}%"); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_04_Height.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_04_Height.razor deleted file mode 100644 index e7d46505a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_04_Height.razor +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_05_Backgrounds.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_05_Backgrounds.razor deleted file mode 100644 index 83bca8bf2..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_05_Backgrounds.razor +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_06_Set_Background_Programmatically.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_06_Set_Background_Programmatically.razor deleted file mode 100644 index 3201a8a2f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_06_Set_Background_Programmatically.razor +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - -@code { - ProgressBar progressBar; - private void SetColor(ProgressColor color) => progressBar.SetColor(color); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_07_MultipleBars.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_07_MultipleBars.razor deleted file mode 100644 index 6f183ad71..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_07_MultipleBars.razor +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_08_Striped.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_08_Striped.razor deleted file mode 100644 index a25d9fd6e..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_08_Striped.razor +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_09_Animated_Stripes.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_09_Animated_Stripes.razor deleted file mode 100644 index ec6c5bbd3..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_09_Animated_Stripes.razor +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_10_Dynamic_Progress.razor b/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_10_Dynamic_Progress.razor deleted file mode 100644 index c2823319f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Progress/Progress_Demo_10_Dynamic_Progress.razor +++ /dev/null @@ -1,78 +0,0 @@ -@using System.Globalization; - - - - - - - - -@code { - private double width = 10; - private string label = "10%"; - private ProgressType progressType = ProgressType.StripedAndAnimated; - private ProgressColor progressColor = ProgressColor.Secondary; - - private void IncreaseProgressBar() - { - if ((width + 10) > 100) - return; - - width += 10; - UpdateProgress(width); - } - - private void DecreaseProgressBar() - { - if ((width - 10) < 0) - return; - - width -= 10; - UpdateProgress(width); - } - - private void ResetProgressBar() - { - width = 0; - UpdateProgress(width); - } - - private void UpdateProgress(double w) - { - if(w == 100) - { - width = w; - label = $"{width.ToString(CultureInfo.InvariantCulture)}%"; - progressType = ProgressType.Striped; - progressColor = ProgressColor.Success; - } - else if (w > 66 && w < 100) - { - width = w; - label = $"{width.ToString(CultureInfo.InvariantCulture)}%"; - progressType = ProgressType.StripedAndAnimated; - progressColor = ProgressColor.Success; - } - else if (w <= 66 && w > 33) - { - width = w; - label = $"{width.ToString(CultureInfo.InvariantCulture)}%"; - progressType = ProgressType.StripedAndAnimated; - progressColor = ProgressColor.Warning; - } - else if (w <= 33 && w > 0) - { - width = w; - label = $"{width.ToString(CultureInfo.InvariantCulture)}%"; - progressType = ProgressType.StripedAndAnimated; - progressColor = ProgressColor.Secondary; - } - else if(w == 0) - { - width = w; - label = $"{width.ToString(CultureInfo.InvariantCulture)}%"; - progressType = ProgressType.Striped; - progressColor = ProgressColor.Danger; - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalServiceDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalServiceDocumentation.razor deleted file mode 100644 index f5a6b3c4b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalServiceDocumentation.razor +++ /dev/null @@ -1,40 +0,0 @@ -@page "/modal-service" - -@title - - - -

Blazor Modal Service

-
Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content.
- - - - - - - - - - - - - - - - - - - - -
1. Add the Modal component in MainLayout.razor page as shown below.
- - -
2. Inject ModalService, then call the ShowAsync(...) method as shown below. ShowAsync method accepts ModalOption object as a parameter.
- - -@code { - private string pageUrl = "/modal-service"; - private string title = "Blazor Modal Service"; - private string description = "Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content."; - private string imageUrl = "https://i.imgur.com/Tze7msN.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_01_How_It_Works.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_01_How_It_Works.razor deleted file mode 100644 index 15a83e582..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_01_How_It_Works.razor +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_02_Vertically_Centered_Modal.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_02_Vertically_Centered_Modal.razor deleted file mode 100644 index 2fe27f5e5..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_02_Vertically_Centered_Modal.razor +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_03_Size.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_03_Size.razor deleted file mode 100644 index e7c993207..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_03_Size.razor +++ /dev/null @@ -1,20 +0,0 @@ - - - - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_04_Change_Footer_Button_Color_and_Text.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_04_Change_Footer_Button_Color_and_Text.razor deleted file mode 100644 index bacccf693..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_04_Change_Footer_Button_Color_and_Text.razor +++ /dev/null @@ -1,18 +0,0 @@ - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_05_Hide_Footer_Button.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_05_Hide_Footer_Button.razor deleted file mode 100644 index 473f76fed..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_05_Hide_Footer_Button.razor +++ /dev/null @@ -1,17 +0,0 @@ - - -@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); - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Callback.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Callback.razor deleted file mode 100644 index b5ad78456..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Callback.razor +++ /dev/null @@ -1,32 +0,0 @@ - - -
- @callbackActionMessage -
- -@code { - - [Inject] ModalService ModalService { get; set; } = default!; - - private string callbackActionMessage = ""; - - 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, OnModalClose); - } - - private void OnModalClose() - { - // TODO: Do operations required after modal close. - callbackActionMessage = $"Modal closed at {DateTime.Now}"; - - StateHasChanged(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Global_Modal_Service_For_Application_01.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Global_Modal_Service_For_Application_01.razor deleted file mode 100644 index 489845f57..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Global_Modal_Service_For_Application_01.razor +++ /dev/null @@ -1,9 +0,0 @@ -@inherits LayoutComponentBase - -... - -... MainLayour.razor code goes here ... - -... - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Global_Modal_Service_For_Application_02.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Global_Modal_Service_For_Application_02.razor deleted file mode 100644 index 7c5224345..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_06_Global_Modal_Service_For_Application_02.razor +++ /dev/null @@ -1,33 +0,0 @@ -@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); - } - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_100_Global_Modal_Service_For_Application_01.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_100_Global_Modal_Service_For_Application_01.razor deleted file mode 100644 index 489845f57..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_100_Global_Modal_Service_For_Application_01.razor +++ /dev/null @@ -1,9 +0,0 @@ -@inherits LayoutComponentBase - -... - -... MainLayour.razor code goes here ... - -... - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_100_Global_Modal_Service_For_Application_02.razor b/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_100_Global_Modal_Service_For_Application_02.razor deleted file mode 100644 index 7c5224345..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Services/ModalService/ModalService_Demo_100_Global_Modal_Service_For_Application_02.razor +++ /dev/null @@ -1,33 +0,0 @@ -@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); - } - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/SidebarDocumentation.razor deleted file mode 100644 index 6d4e36679..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/SidebarDocumentation.razor +++ /dev/null @@ -1,53 +0,0 @@ -@page "/sidebar" - -@title - - - -

Blazor Sidebar

-
- Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content. -
- - - - - -
Use NavItem's Id and ParentId to set the parent-child relation.
- -At this moment, two levels of navigation are supported. - - -
Set IconColor property to change the color.
- - - -
Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
- - - -
Call ToggleSidebar() method to toggle the Sidebar to show the icons only.
- - - -
A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.
- - - -
Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
- - - -
Use the ImageSrc parameter to set the brand logo.
- - - -
Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.
- - -@code { - private string pageUrl = "/sidebar"; - private string title = "Blazor Sidebar Component"; - private string description = "Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content."; - private string imageUrl = "https://i.imgur.com/d91Q9Zt.png"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor deleted file mode 100644 index 426aa477c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_01_Basic_Usage.razor +++ /dev/null @@ -1,30 +0,0 @@ - - -@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; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor deleted file mode 100644 index 17aae064c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_02_Two_level_navigation.razor +++ /dev/null @@ -1,41 +0,0 @@ - - -@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; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor deleted file mode 100644 index bfe64662b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_03_Change_Icons_Color.razor +++ /dev/null @@ -1,41 +0,0 @@ - - -@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; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor deleted file mode 100644 index 60e9e0b55..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_04_Full_layout_with_sidebar.razor +++ /dev/null @@ -1,55 +0,0 @@ -
- - - -
-
- 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; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor deleted file mode 100644 index a05af1f4d..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_05_Toggle_Sidebar_to_Show_Icons_Only.razor +++ /dev/null @@ -1,58 +0,0 @@ -
- - - -
-
- - 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(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor deleted file mode 100644 index d1c3f2e00..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_06_Show_Badge.razor +++ /dev/null @@ -1,59 +0,0 @@ -
- - - -
-
- - 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(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor deleted file mode 100644 index 6239414fe..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_07_Custom_Brand_Icon.razor +++ /dev/null @@ -1,59 +0,0 @@ -
- - - -
-
- - 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(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor deleted file mode 100644 index 9bb62a7a1..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_08_Show_Image_as_Brand_Logo.razor +++ /dev/null @@ -1,59 +0,0 @@ -
- - - -
-
- - 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(); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor b/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor deleted file mode 100644 index 3c8feb1d9..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Sidebar/Sidebar_Demo_09_Customize_Sidebar.razor +++ /dev/null @@ -1,89 +0,0 @@ -
- - - -
-
- 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) -{ - -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/TabsDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/TabsDocumentation.razor deleted file mode 100644 index 25640f9af..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/TabsDocumentation.razor +++ /dev/null @@ -1,87 +0,0 @@ -@page "/tabs" - -@title - - - -

Blazor Tabs

-
- Documentation and examples for how to use Blazor Bootstrap Tabs components. -
- - - - - -
To make tabs fade in, add EnableFadeEffect="true" parameter. The first tab pane must also have IsActive="true" parameter to make the initial content visible.
- - - -
To customize the tab title, use TitleTemplate, as shown in the below example.
- - - -
Disable specific tabs by adding Disabled="true" parameter.
- - - -
Use NavStyle="NavStyle.Pills" parameter to change the tabs to pills.
- - - -
You can activate individual tabs in several ways. Use predefined methods ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.
- - - -
- 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)
-

- - - - - - - - - - - - - - - - - - - - - - - - - -
Event NameDescription
OnHidingThis event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).
OnHiddenThis event fires after a new tab is shown (and thus the previous active tab is hidden).
OnShowingThis event fires on tab show, but before the new tab has been shown.
OnShownThis event fires on tab show after a tab has been shown.
- - If no tab was already active, then the OnHiding and OnHidden events will not be fired. - -
- - - - - - - - -@code { - private string pageUrl = "/tabs"; - private string title = "Blazor Tabs Component"; - private string description = "Documentation and examples for how to use Blazor Bootstrap tabs components."; - private string imageUrl = "https://i.imgur.com/ranwriJ.png"; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_01_Examples.razor deleted file mode 100644 index 263a1dd07..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_01_Examples.razor +++ /dev/null @@ -1,22 +0,0 @@ - - - -

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.

- - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_02_Enable_FadeEffect.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_02_Enable_FadeEffect.razor deleted file mode 100644 index e5863270f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_02_Enable_FadeEffect.razor +++ /dev/null @@ -1,17 +0,0 @@ - - - -

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.

- - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_03_Title_with_Icon.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_03_Title_with_Icon.razor deleted file mode 100644 index 2a1d75043..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_03_Title_with_Icon.razor +++ /dev/null @@ -1,26 +0,0 @@ - - - - Home - - -

This is the placeholder content for the Home tab.

- - - - - Profile - - -

This is the placeholder content for the Profile tab.

- - - - - Contact - - -

This is the placeholder content for the Contact tab.

- - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_04_Disable_Tab.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_04_Disable_Tab.razor deleted file mode 100644 index ada7f04d4..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_04_Disable_Tab.razor +++ /dev/null @@ -1,22 +0,0 @@ - - - -

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 Projects tab.

- - - - -

This is the placeholder content for the Contact tab.

- - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_05_Nav_Style_Pills.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_05_Nav_Style_Pills.razor deleted file mode 100644 index bfe04755b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_05_Nav_Style_Pills.razor +++ /dev/null @@ -1,17 +0,0 @@ - - - -

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.

- - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_06_Activate_Individual_Tabs.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_06_Activate_Individual_Tabs.razor deleted file mode 100644 index 1eab90624..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_06_Activate_Individual_Tabs.razor +++ /dev/null @@ -1,50 +0,0 @@ - - - -

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(); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_07_Events_Order.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_07_Events_Order.razor deleted file mode 100644 index 9913fe9de..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_07_Events_Order.razor +++ /dev/null @@ -1,46 +0,0 @@ - - - -

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.

- - - - -
- @foreach (var item in messages) - { -

Event: @item.Event, Active Tab: @item.ActiveTabTitle, Previous Tab: @item.PreviousActiveTabTitle

- } -
- -@code { - record TabMessage(string Event, string ActiveTabTitle, string PreviousActiveTabTitle); - - List messages = new List(); - - private void OnTabShowingAsync(TabsEventArgs args) - => messages.Add(new("OnShowing", args.ActiveTabTitle, args.PreviousActiveTabTitle)); - - private void OnTabShownAsync(TabsEventArgs args) - => messages.Add(new("OnShown", args.ActiveTabTitle, args.PreviousActiveTabTitle)); - - private void OnTabHidingAsync(TabsEventArgs args) - => messages.Add(new("OnHiding", args.ActiveTabTitle, args.PreviousActiveTabTitle)); - - private void OnTabHiddenAsync(TabsEventArgs args) - => messages.Add(new("OnHidden", args.ActiveTabTitle, args.PreviousActiveTabTitle)); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_08_Events_Example.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_08_Events_Example.razor deleted file mode 100644 index 5094dfd7f..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_08_Events_Example.razor +++ /dev/null @@ -1,53 +0,0 @@ - - - -

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.

- - - - -

Current Active Tab: @activeTabTitle

-

Previous Active Tab: @previousActiveTabTitle

- -@code { - private string activeTabTitle; - private string previousActiveTabTitle; - - private void OnTabShowingAsync(TabsEventArgs args) - { - //activeTabTitle = args.ActiveTabTitle; - //previousActiveTabTitle = args.PreviousActiveTabTitle; - } - - private void OnTabShownAsync(TabsEventArgs args) - { - activeTabTitle = args.ActiveTabTitle; - previousActiveTabTitle = args.PreviousActiveTabTitle; - } - - private void OnTabHidingAsync(TabsEventArgs args) - { - //activeTabTitle = args.ActiveTabTitle; - //previousActiveTabTitle = args.PreviousActiveTabTitle; - } - - private void OnTabHiddenAsync(TabsEventArgs args) - { - //activeTabTitle = args.ActiveTabTitle; - //previousActiveTabTitle = args.PreviousActiveTabTitle; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_09_Set_Active_Tab_OnAfterRender.razor b/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_09_Set_Active_Tab_OnAfterRender.razor deleted file mode 100644 index a8611773b..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tabs/Tabs_Demo_09_Set_Active_Tab_OnAfterRender.razor +++ /dev/null @@ -1,53 +0,0 @@ - - - -

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; - } - } - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/ToastsDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/ToastsDocumentation.razor deleted file mode 100644 index ec4a17bed..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/ToastsDocumentation.razor +++ /dev/null @@ -1,55 +0,0 @@ -@page "/toasts" - -@title - - - -

Blazor Toasts

-
Push notifications to your visitors with a toast, a lightweight and easily customizable alert 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 Toasts will not hide automatically if you do not specify AutoHide="true".
    • -
  • Use global toasts service for the application instead of page level toasts.
    • -
- - - - - - - - -
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.
- - - -
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.
- - - -
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.
- - - -
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.
- - - -
1. Add the Toasts component in MainLayout.razor page as shown below.
- - - Set the Toasts component parameters as per your requirement. - -
2. Inject ToastService, then call the Notify(...) method as shown below.
- - -@code { - private string pageUrl = "/toasts"; - private string title = "Blazor Toasts Component"; - private string description = "Push notifications to your visitors with a toast, a lightweight and easily customizable Blazor Bootstrap alert message."; - private string imageUrl = "https://i.imgur.com/VRglJqU.jpg"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_01_Toast_With_Title.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_01_Toast_With_Title.razor deleted file mode 100644 index f2fdfdf8a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_01_Toast_With_Title.razor +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - -@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}", - }; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_02_Toast_Without_Title.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_02_Toast_Without_Title.razor deleted file mode 100644 index 306635fa6..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_02_Toast_Without_Title.razor +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - -@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}", - }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_03_A_Auto_Hide.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_03_A_Auto_Hide.razor deleted file mode 100644 index bad9ce3d3..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_03_A_Auto_Hide.razor +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - -@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}", - }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_03_B_Auto_Hide_Individual_Messages.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_03_B_Auto_Hide_Individual_Messages.razor deleted file mode 100644 index 714d0aeca..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_03_B_Auto_Hide_Individual_Messages.razor +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - -@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; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_04_Placement.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_04_Placement.razor deleted file mode 100644 index aef0475f3..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_04_Placement.razor +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - -@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; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_05_StackLength.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_05_StackLength.razor deleted file mode 100644 index bdcb45b42..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_05_StackLength.razor +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - -@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}", - }; -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_06_Global_Toasts_Service_For_Application_01.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_06_Global_Toasts_Service_For_Application_01.razor deleted file mode 100644 index b1ef6764c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_06_Global_Toasts_Service_For_Application_01.razor +++ /dev/null @@ -1,9 +0,0 @@ -@inherits LayoutComponentBase - -... - -... MainLayour.razor code goes here ... - -... - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_06_Global_Toasts_Service_For_Application_02.razor b/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_06_Global_Toasts_Service_For_Application_02.razor deleted file mode 100644 index 5e22af279..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Toasts/Toasts_Demo_06_Global_Toasts_Service_For_Application_02.razor +++ /dev/null @@ -1,20 +0,0 @@ -@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/BlazorBootstrap.Demo.Server/Pages/Tooltips/TooltipsDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Tooltips/TooltipsDocumentation.razor deleted file mode 100644 index 54c8cfe59..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tooltips/TooltipsDocumentation.razor +++ /dev/null @@ -1,44 +0,0 @@ -@page "/tooltips" - -@title - - - -

Blazor Tooltips

- - - - - - - - - By default, Button supports tooltips via TooltipTitle and TooltipPlacement parameters. - See Buttons - Tooltip. - - - - - -@* - - - -*@ - - -
- Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. - The Color parameter can be used to customize the color of the tooltip. -
- - - - - -@code { - private string pageUrl = "/tooltips"; - private string title = "Blazor Tooltip Component"; - private string description = "Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages."; - private string imageUrl = "https://i.imgur.com/PGlmZS3.jpg"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_01_Examples.razor deleted file mode 100644 index 1c81f1f9c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_01_Examples.razor +++ /dev/null @@ -1,4 +0,0 @@ -Tooltip Left -Tooltip Top -Tooltip Right -Tooltip Bottom diff --git a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_02_Disabled_Button_With_Tooltip.razor b/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_02_Disabled_Button_With_Tooltip.razor deleted file mode 100644 index 49193bd43..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_02_Disabled_Button_With_Tooltip.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_03_Icon_With_Click_Event.razor b/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_03_Icon_With_Click_Event.razor deleted file mode 100644 index 1116a9ac5..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_03_Icon_With_Click_Event.razor +++ /dev/null @@ -1,10 +0,0 @@ - - - - -@code{ - private void OnClick() - { - Console.WriteLine($"clicked"); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_04_Dynamically_update_tooltip_text.razor b/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_04_Dynamically_update_tooltip_text.razor deleted file mode 100644 index e6a8e7d4a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_04_Dynamically_update_tooltip_text.razor +++ /dev/null @@ -1,10 +0,0 @@ -
- Tooltip Bottom -
- - -@code { - private string text = "Tooltip text"; - - private void ChangeTooltip() => text = $"Updated {DateTime.Now.ToLongTimeString()}"; -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_05_Tooltip_with_navigation_link.razor b/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_05_Tooltip_with_navigation_link.razor deleted file mode 100644 index dad7fdf34..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_05_Tooltip_with_navigation_link.razor +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_06_Colors.razor b/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_06_Colors.razor deleted file mode 100644 index 75e99978a..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_06_Colors.razor +++ /dev/null @@ -1,29 +0,0 @@ -
-
- Default Tooltip -
-
- Primary Tooltip -
-
- Secondary Tooltip -
-
- Success Tooltip -
-
- Danger Tooltip -
-
- Warning Tooltip -
-
- Info Tooltip -
-
- Light Tooltip -
-
- Dark Tooltip -
-
diff --git a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_07_Dynamically_Change_Color.razor b/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_07_Dynamically_Change_Color.razor deleted file mode 100644 index 5108208c2..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Tooltips/Tooltips_Demo_07_Dynamically_Change_Color.razor +++ /dev/null @@ -1,31 +0,0 @@ -Tooltip Top - -
-
- - - - - -@code { - private string? title = "Tooltip Top"; - private TooltipColor tooltipColor; - - private void UpdateTooltipToPrimary() - { - tooltipColor = TooltipColor.Primary; - title = "Tooltip Top Primary"; - } - - private void UpdateTooltipToSuccess() - { - tooltipColor = TooltipColor.Success; - title = "Tooltip Top Success"; - } - - private void UpdateTooltipToDanger() - { - tooltipColor = TooltipColor.Danger; - title = "Tooltip Top Danger"; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Program.cs b/BlazorBootstrap.Demo.Server/Program.cs index 74c223a88..e14770867 100644 --- a/BlazorBootstrap.Demo.Server/Program.cs +++ b/BlazorBootstrap.Demo.Server/Program.cs @@ -1,12 +1,13 @@ -using BlazorBootstrap.Demo.Server; - var builder = WebApplication.CreateBuilder(args); // Add services to the container. -builder.Services.AddHttpClient(); +if (builder.Environment.IsDevelopment()) + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://localhost:5021/") }); +else + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://demos.blazorbootstrap.com/") }); + builder.Services.AddBlazorBootstrap(); -builder.Services.AddScoped(); -builder.Services.AddScoped(); +builder.Services.AddDemoServices(); builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); diff --git a/BlazorBootstrap.Demo.Server/Services/CustomerService.cs b/BlazorBootstrap.Demo.Server/Services/CustomerService.cs deleted file mode 100644 index b03ee03d3..000000000 --- a/BlazorBootstrap.Demo.Server/Services/CustomerService.cs +++ /dev/null @@ -1,107 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace BlazorBootstrap.Demo.Server; - -public class CustomerService : ICustomerService -{ - private readonly HttpClient _httpClient; - private readonly NavigationManager _navigationManager; - - public CustomerService(HttpClient httpClient, NavigationManager navigationManager) - { - _httpClient = httpClient; - _navigationManager = navigationManager; - _httpClient.BaseAddress = new Uri(navigationManager.BaseUri); - } - - public async Task> GetCustomersAsync(FilterItem filter, CancellationToken cancellationToken = default) - { - var customers = await _httpClient.GetFromJsonAsync("sample-data/customer/customer.json", cancellationToken); - if (customers is null) - return Enumerable.Empty(); - - var parameterExpression = Expression.Parameter(typeof(Customer2)); // second param optional - var lambda = ExpressionExtensions.GetExpressionDelegate(parameterExpression, filter); - return customers.Where(lambda.Compile()).OrderBy(customer => customer.CustomerName); - } - - public async Task, int>> GetCustomersAsync(IEnumerable filters, int pageNumber, int pageSize, string sortKey, SortDirection sortDirection, CancellationToken cancellationToken = default) - { - var customers = await _httpClient.GetFromJsonAsync>("sample-data/customer/customer.json", cancellationToken); - if (customers is null) - return new(Enumerable.Empty(), 0); - - // apply filters - if (filters is not null && filters.Any()) - { - var parameterExpression = Expression.Parameter(typeof(Customer2)); // second param optional - Expression> lambda = null; - - foreach (var filter in filters) - { - if (lambda is null) - lambda = ExpressionExtensions.GetExpressionDelegate(parameterExpression, filter); - else - lambda = lambda.And(ExpressionExtensions.GetExpressionDelegate(parameterExpression, filter)); - } - customers = customers.Where(lambda.Compile()); - } - - // apply sorting then paging - if (sortKey == "CustomerId") - { - if (sortDirection == SortDirection.Ascending) - return new(customers.OrderBy(e => e.CustomerId).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - else if (sortDirection == SortDirection.Descending) - return new(customers.OrderByDescending(e => e.CustomerId).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - } - else if (sortKey == "CustomerName") - { - if (sortDirection == SortDirection.Ascending) - return new(customers.OrderBy(e => e.CustomerName).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - else if (sortDirection == SortDirection.Descending) - return new(customers.OrderByDescending(e => e.CustomerName).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - } - else if (sortKey == "Phone") - { - if (sortDirection == SortDirection.Ascending) - return new(customers.OrderBy(e => e.Phone).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - else if (sortDirection == SortDirection.Descending) - return new(customers.OrderByDescending(e => e.Phone).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - } - else if (sortKey == "Email") - { - if (sortDirection == SortDirection.Ascending) - return new(customers.OrderBy(e => e.Email).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - else if (sortDirection == SortDirection.Descending) - return new(customers.OrderByDescending(e => e.Email).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - } - else if (sortKey == "Address") - { - if (sortDirection == SortDirection.Ascending) - return new(customers.OrderBy(e => e.Address).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - else if (sortDirection == SortDirection.Descending) - return new(customers.OrderByDescending(e => e.Address).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - } - else if (sortKey == "PostalZip") - { - if (sortDirection == SortDirection.Ascending) - return new(customers.OrderBy(e => e.PostalZip).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - else if (sortDirection == SortDirection.Descending) - return new(customers.OrderByDescending(e => e.PostalZip).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - } - else if (sortKey == "Country") - { - if (sortDirection == SortDirection.Ascending) - return new(customers.OrderBy(e => e.Country).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - else if (sortDirection == SortDirection.Descending) - return new(customers.OrderByDescending(e => e.Country).Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - } - else if (string.IsNullOrEmpty(sortKey)) - { - return new(customers.Skip((pageNumber - 1) * pageSize).Take(pageSize), customers.Count()); - } - - return new(customers, customers.Count()); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Services/EmployeeService.cs b/BlazorBootstrap.Demo.Server/Services/EmployeeService.cs deleted file mode 100644 index 1be31398f..000000000 --- a/BlazorBootstrap.Demo.Server/Services/EmployeeService.cs +++ /dev/null @@ -1,106 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public class EmployeeService : IEmployeeService -{ - public Tuple, int> GetEmployees( - IEnumerable filters, - int pageNumber, - int pageSize, - string sortKey, - SortDirection sortDirection) - { - IEnumerable employees = new List - { - new Employee { Id = 101, FirstName = "Eathan", LastName = "Ellis", Designation = "Associate Architect", Salary = 19000, DOJ = new DateTime(1998, 11, 17), IsActive = true }, - new Employee { Id = 103, FirstName = "Cohan", LastName = "Wheatley", Designation = "Senior DevOps Engineer", Salary = 19000, DOJ = new DateTime(1985, 1, 5), IsActive = true }, - new Employee { Id = 116, FirstName = "Charis", LastName = "Guerra", Designation = "Data Scientist", Salary = 12000, DOJ = new DateTime(1995, 4, 17), IsActive = true }, - new Employee { Id = 110, FirstName = "Julian", LastName = "Walmsley", Designation = "Senior AI Engineer", Salary = 16500.50M, DOJ = new DateTime(1985, 6, 8), IsActive = false }, - new Employee { Id = 115, FirstName = "Emer", LastName = "Strickland", Designation = "AI Engineer", Salary = 7700, DOJ = new DateTime(1991, 8, 23), IsActive = true }, - new Employee { Id = 102, FirstName = "Kornelia", LastName = "Lord", Designation = "Developer", Salary = 8000, DOJ = new DateTime(1977, 1, 12), IsActive = true }, - new Employee { Id = 112, FirstName = "Loretta", LastName = "Koch", Designation = "Administrator", Salary = 8000, DOJ = new DateTime(1977, 1, 12), IsActive = true }, - new Employee { Id = 105, FirstName = "Ivy", LastName = "Lloyd", Designation = "Solution Architect", Salary = 24000, DOJ = new DateTime(1989, 10, 2), IsActive = true }, - new Employee { Id = 109, FirstName = "Isha", LastName = "Davison", Designation = "App Maker", Salary = 8000, DOJ = new DateTime(1994, 5, 12), IsActive = true }, - new Employee { Id = 111, FirstName = "Glenda", LastName = "Potter", Designation = "Data Engineer", Salary = 12000, DOJ = new DateTime(1991, 1, 1), IsActive = true }, - new Employee { Id = 106, FirstName = "Chance", LastName = "Bowler", Designation = "Auditor", Salary = 8000, DOJ = new DateTime(1996, 7, 1), IsActive = true }, - new Employee { Id = 114, FirstName = "Ralphy", LastName = "Estrada", Designation = "QA", Salary = 8000, DOJ = new DateTime(1994, 1, 12), IsActive = true }, - new Employee { Id = 108, FirstName = "Zayne", LastName = "Simmons", Designation = "Data Analyst", Salary = 12000, DOJ = new DateTime(1994, 5, 12), IsActive = true }, - new Employee { Id = 118, FirstName = "Kristopher", LastName = "Lawrence", Designation = "QA", Salary = 8000, DOJ = new DateTime(1995, 4, 17), IsActive = true }, - new Employee { Id = 107, FirstName = "Roisin", LastName = "Farmer", Designation = "Solutions Architect", Salary = 24000, DOJ = new DateTime(1989, 10, 2), IsActive = true }, - new Employee { Id = 113, FirstName = "Merlin", LastName = "Correa", Designation = "Content Developer", Salary = 8000, DOJ = new DateTime(1994, 5, 12), IsActive = true }, - new Employee { Id = 117, FirstName = "Sharna", LastName = "Macleod", Designation = "Data Analyst", Salary = 12000, DOJ = new DateTime(1995, 4, 17), IsActive = true }, - }; - - // apply filters - if (filters is not null && filters.Any()) - { - var parameterExpression = Expression.Parameter(typeof(Employee)); // second param optional - Expression> lambda = null; - - foreach (var filter in filters) - { - if (lambda is null) - lambda = ExpressionExtensions.GetExpressionDelegate(parameterExpression, filter); - else - lambda = lambda.And(ExpressionExtensions.GetExpressionDelegate(parameterExpression, filter)); - } - employees = employees.Where(lambda.Compile()); - } - - // apply sorting then paging - if (sortKey == "Id") - { - if (sortDirection == SortDirection.Ascending) - return new(employees.OrderBy(e => e.Id).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - else if (sortDirection == SortDirection.Descending) - return new(employees.OrderByDescending(e => e.Id).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - } - else if (sortKey == "FirstName") - { - if (sortDirection == SortDirection.Ascending) - return new(employees.OrderBy(e => e.FirstName).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - else if (sortDirection == SortDirection.Descending) - return new(employees.OrderByDescending(e => e.FirstName).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - } - else if (sortKey == "LastName") - { - if (sortDirection == SortDirection.Ascending) - return new(employees.OrderBy(e => e.LastName).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - else if (sortDirection == SortDirection.Descending) - return new(employees.OrderByDescending(e => e.LastName).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - } - else if (sortKey == "Designation") - { - if (sortDirection == SortDirection.Ascending) - return new(employees.OrderBy(e => e.Designation).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - else if (sortDirection == SortDirection.Descending) - return new(employees.OrderByDescending(e => e.Designation).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - } - else if (sortKey == "Salary") - { - if (sortDirection == SortDirection.Ascending) - return new(employees.OrderBy(e => e.Salary).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - else if (sortDirection == SortDirection.Descending) - return new(employees.OrderByDescending(e => e.Salary).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - } - else if (sortKey == "DOJ") - { - if (sortDirection == SortDirection.Ascending) - return new(employees.OrderBy(e => e.DOJ).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - else if (sortDirection == SortDirection.Descending) - return new(employees.OrderByDescending(e => e.DOJ).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - } - else if (sortKey == "IsActive") - { - if (sortDirection == SortDirection.Ascending) - return new(employees.OrderBy(e => e.IsActive).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - else if (sortDirection == SortDirection.Descending) - return new(employees.OrderByDescending(e => e.IsActive).Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - } - else if (string.IsNullOrEmpty(sortKey)) - { - return new(employees.Skip((pageNumber - 1) * pageSize).Take(pageSize), employees.Count()); - } - - return new(employees, employees.Count()); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Services/ICustomerService.cs b/BlazorBootstrap.Demo.Server/Services/ICustomerService.cs deleted file mode 100644 index 18ba19999..000000000 --- a/BlazorBootstrap.Demo.Server/Services/ICustomerService.cs +++ /dev/null @@ -1,8 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public interface ICustomerService -{ - public Task> GetCustomersAsync(FilterItem filter, CancellationToken cancellationToken = default); - - public Task, int>> GetCustomersAsync(IEnumerable filters, int pageNumber, int pageSize, string sortKey, SortDirection sortDirection, CancellationToken cancellationToken = default); -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Services/IEmployeeService.cs b/BlazorBootstrap.Demo.Server/Services/IEmployeeService.cs deleted file mode 100644 index 374fe5eee..000000000 --- a/BlazorBootstrap.Demo.Server/Services/IEmployeeService.cs +++ /dev/null @@ -1,6 +0,0 @@ -namespace BlazorBootstrap.Demo.Server; - -public interface IEmployeeService -{ - public Tuple, int> GetEmployees(IEnumerable filters, int pageNumber, int pageSize, string sortKey, SortDirection sortDirection); -} diff --git a/BlazorBootstrap.Demo.Server/Shared/Components/CodeSnippet.cs b/BlazorBootstrap.Demo.Server/Shared/Components/CodeSnippet.cs deleted file mode 100644 index 31ab5d9d4..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/Components/CodeSnippet.cs +++ /dev/null @@ -1,92 +0,0 @@ -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Rendering; -using Microsoft.JSInterop; - -namespace BlazorBootstrap.Demo.Server; - -public class CodeSnippet : ComponentBase -{ - #region Members - - private string code; - - #endregion - - #region Methods - - protected override async Task OnParametersSetAsync() - { - if (code is null) - { - if (!string.IsNullOrWhiteSpace(File)) - { - var resourceName = File.Replace("~", typeof(CodeSnippet).Assembly.GetName().Name).Replace("/", ".").Replace("\\", "."); - - using (Stream stream = typeof(CodeSnippet).Assembly.GetManifestResourceStream(resourceName)) - { - using (StreamReader reader = new StreamReader(stream)) - { - code = await reader.ReadToEndAsync(); - } - } - } - } - } - - private string? GetLanguageFromFileExtension() - { - if (string.IsNullOrWhiteSpace(File)) - return null; - - return Path.GetExtension(File).ToLower() switch - { - ".razor" => "cshtml", - ".cshtml" => "cshtml", - ".html" => "html", - ".css" => "css", - ".cs" => "csharp", - ".txt" => "none", - ".js" => "js", - _ => null - }; - } - - protected override void BuildRenderTree(RenderTreeBuilder builder) - { - // no base call - builder.AddMarkupContent(0, ""); - - builder.OpenElement(300, "div"); - builder.AddAttribute(301, "class", "highlight show-code-only"); - builder.OpenElement(400, "pre"); - builder.OpenElement(401, "code"); - builder.AddAttribute(402, "class", $"language-{Language ?? GetLanguageFromFileExtension() ?? "cshtml"}"); - if (code != null) - { - builder.AddContent(403, code.Trim()); - } - builder.CloseElement(); // end: code - builder.CloseElement(); // end: pre - builder.CloseElement(); - - builder.AddMarkupContent(700, ""); - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await base.OnAfterRenderAsync(firstRender); - await JS.InvokeVoidAsync("highlightCode"); - } - - #endregion - - #region Properties - - [Inject] protected IJSRuntime JS { get; set; } = null!; - - [Parameter] public string Language { get; set; } - - [Parameter] public string File { get; set; } - - #endregion -} diff --git a/BlazorBootstrap.Demo.Server/Shared/Components/Demo.cs b/BlazorBootstrap.Demo.Server/Shared/Components/Demo.cs deleted file mode 100644 index 7d9cdfb78..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/Components/Demo.cs +++ /dev/null @@ -1,173 +0,0 @@ -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Rendering; -using Microsoft.JSInterop; - -namespace BlazorBootstrap.Demo.Server; - -public class Demo : ComponentBase -{ - #region Members - - private string code; - - #endregion - - #region Methods - - protected override async Task OnParametersSetAsync() - { - if (code is null) - { - var resourceName = Type.FullName + ".razor"; - using (Stream stream = Type.Assembly.GetManifestResourceStream(resourceName)) - { - try - { - if (stream is null) - return; - - using (StreamReader reader = new StreamReader(stream)) - { - code = await reader.ReadToEndAsync(); - } - } - catch (Exception ex) - { - Console.WriteLine(ex.Message); - } - } - } - } - - protected override void BuildRenderTree(RenderTreeBuilder builder) - { - // no base call - builder.AddMarkupContent(0, ""); // source: https://perishablepress.com/tell-google-to-not-index-certain-parts-of-your-page/ - - if (ShowCodeOnly) - { - builder.OpenElement(300, "div"); - builder.AddAttribute(301, "class", "highlight show-code-only"); - builder.OpenElement(400, "pre"); - builder.OpenElement(401, "code"); - builder.AddAttribute(402, "class", LanguageCssClass); - if (code != null) - { - builder.AddContent(403, code.Trim()); - } - builder.CloseElement(); // end: code - builder.CloseElement(); // end: pre - builder.CloseElement(); - } - else if (!Tabs) - { - builder.OpenElement(100, "div"); - builder.AddAttribute(101, "class", "bb-example"); - builder.OpenComponent(202, Type); - builder.CloseComponent(); // end: div - builder.CloseElement(); - - builder.OpenElement(300, "div"); - builder.AddAttribute(301, "class", "highlight"); - builder.OpenElement(400, "pre"); - builder.OpenElement(401, "code"); - builder.AddAttribute(402, "class", LanguageCssClass); - if (code != null) - { - builder.AddContent(403, code.Trim()); - } - builder.CloseElement(); // end: code - builder.CloseElement(); // end: pre - builder.CloseElement(); - } - else // Tabs = false - { - builder.OpenComponent(300); - builder.AddAttribute(301, "EnableFadeEffect", true); - builder.AddAttribute(302, "ChildContent", (RenderFragment)((childContentBuilder) => - { - childContentBuilder.OpenComponent(303); - childContentBuilder.AddAttribute(304, "TitleTemplate", (RenderFragment)((titleTemplateBuilder) => - { - titleTemplateBuilder.OpenComponent(501); - titleTemplateBuilder.AddAttribute(502, "Name", IconName.Display); - titleTemplateBuilder.AddAttribute(503, "class", "me-2"); - titleTemplateBuilder.CloseComponent(); // end: Icon - - titleTemplateBuilder.OpenElement(504, "b"); - titleTemplateBuilder.AddContent(505, "Example"); - titleTemplateBuilder.CloseElement(); // end: b - })); - - childContentBuilder.AddAttribute(305, "Content", (RenderFragment)((tabContentBuilder) => - { - tabContentBuilder.OpenElement(306, "div"); - tabContentBuilder.AddAttribute(307, "class", "bb-example border-top-0 mt-0"); - - tabContentBuilder.OpenComponent(308, Type); - tabContentBuilder.CloseComponent(); // end: div - - tabContentBuilder.CloseElement(); - })); - - childContentBuilder.CloseComponent(); - - childContentBuilder.OpenComponent(400); - childContentBuilder.AddAttribute(401, "TitleTemplate", (RenderFragment)((titleTemplateBuilder) => - { - titleTemplateBuilder.OpenComponent(601); - titleTemplateBuilder.AddAttribute(602, "Name", IconName.CodeSlash); - titleTemplateBuilder.AddAttribute(603, "class", "me-2"); - titleTemplateBuilder.CloseComponent(); // end: Icon - - titleTemplateBuilder.OpenElement(604, "b"); - titleTemplateBuilder.AddContent(605, "View Source"); - titleTemplateBuilder.CloseElement(); // end: b - })); - - childContentBuilder.AddAttribute(402, "Content", (RenderFragment)((tabContentBuilder) => - { - tabContentBuilder.OpenElement(403, "div"); - tabContentBuilder.AddAttribute(404, "class", "highlight"); - tabContentBuilder.OpenElement(405, "pre"); - tabContentBuilder.OpenElement(406, "code"); - tabContentBuilder.AddAttribute(407, "class", LanguageCssClass); - if (code != null) - { - tabContentBuilder.AddContent(408, code.Trim()); - } - tabContentBuilder.CloseElement(); // end: code - tabContentBuilder.CloseElement(); // end: pre - tabContentBuilder.CloseElement(); - })); - - childContentBuilder.CloseComponent(); - })); - builder.CloseComponent(); - } - - builder.AddMarkupContent(700, ""); // source: https://perishablepress.com/tell-google-to-not-index-certain-parts-of-your-page/ - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await base.OnAfterRenderAsync(firstRender); - await JS.InvokeVoidAsync("highlightCode"); - } - - #endregion - - #region Properties - - [Inject] protected IJSRuntime JS { get; set; } = null!; - - [Parameter] public string LanguageCssClass { get; set; } = "language-cshtml"; - - [Parameter] public bool ShowCodeOnly { get; set; } - - [Parameter] public bool Tabs { get; set; } = false; - - [Parameter] public Type Type { get; set; } - - #endregion -} diff --git a/BlazorBootstrap.Demo.Server/Shared/Components/MetaTags.razor b/BlazorBootstrap.Demo.Server/Shared/Components/MetaTags.razor deleted file mode 100644 index d1e999d02..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/Components/MetaTags.razor +++ /dev/null @@ -1,26 +0,0 @@ -@namespace BlazorBootstrap.Demo.Server - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Shared/Components/MetaTags.razor.cs b/BlazorBootstrap.Demo.Server/Shared/Components/MetaTags.razor.cs deleted file mode 100644 index 1e5f0589c..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/Components/MetaTags.razor.cs +++ /dev/null @@ -1,45 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace BlazorBootstrap.Demo.Server; - -public partial class MetaTags : ComponentBase -{ - #region Members - - private string siteName => "Blazor Bootstrap"; - - private string title => $"{Title} | {siteName}"; - - private string url => $"https://demos.getblazorbootstrap.com{PageUrl}"; - - #endregion - - #region Methods - - #endregion - - #region Properties - - /// - /// Meta Url. - /// Example: /alerts, /modal - /// - [Parameter] public string PageUrl { get; set; } = null!; - - /// - /// Page Title / Meta Title. - /// - [Parameter] public string Title { get; set; } = null!; - - /// - /// Meta Description. - /// - [Parameter] public string Description { get; set; } = null!; - - /// - /// Meta Image Url. - /// - [Parameter] public string ImageUrl { get; set; } = null!; - - #endregion -} diff --git a/BlazorBootstrap.Demo.Server/Shared/Components/SectionHeading.razor b/BlazorBootstrap.Demo.Server/Shared/Components/SectionHeading.razor deleted file mode 100644 index 50a824c2c..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/Components/SectionHeading.razor +++ /dev/null @@ -1,32 +0,0 @@ -@namespace BlazorBootstrap.Demo.Server - -@if (Size == HeadingSize.H2) -{ -

- @Text# -

-} -else if (Size == HeadingSize.H3) -{ -

- @Text# -

-} -else if (Size == HeadingSize.H4) -{ -

- @Text# -

-} -else if (Size == HeadingSize.H5) -{ -
- @Text# -
-} -else if (Size == HeadingSize.H6) -{ -
- @Text# -
-} diff --git a/BlazorBootstrap.Demo.Server/Shared/Components/SectionHeading.razor.cs b/BlazorBootstrap.Demo.Server/Shared/Components/SectionHeading.razor.cs deleted file mode 100644 index c8a0f19d0..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/Components/SectionHeading.razor.cs +++ /dev/null @@ -1,43 +0,0 @@ -using Microsoft.AspNetCore.Components; -using Microsoft.JSInterop; - -namespace BlazorBootstrap.Demo.Server; - -public partial class SectionHeading : ComponentBase -{ - #region Members - - private string link => $"{PageUrl}#{HashTagName}".Trim().ToLower(); - - #endregion - - #region Methods - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await Task.Delay(200); - await JS.InvokeVoidAsync("navigateToHeading"); - await base.OnAfterRenderAsync(firstRender); - } - - private async Task OnClick() - { - await JS.InvokeVoidAsync("navigateToHeading"); - } - - #endregion - - #region Properties - - [Parameter] public HeadingSize Size { get; set; } - - [Parameter] public string Text { get; set; } = null!; - - [Parameter] public string PageUrl { get; set; } = null!; - - [Parameter] public string HashTagName { get; set; } = null!; - - [Inject] protected IJSRuntime JS { get; set; } = null!; - - #endregion -} diff --git a/BlazorBootstrap.Demo.Server/Shared/EmptyLayout.razor b/BlazorBootstrap.Demo.Server/Shared/EmptyLayout.razor deleted file mode 100644 index 66d65c35c..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/EmptyLayout.razor +++ /dev/null @@ -1,129 +0,0 @@ -@inherits LayoutComponentBase - -
- -
-
- @Body -
- - -@code { - private string version = default!; - private string docsUrl = default!; - private string blogUrl = default!; - private string githubUrl = default!; - private string twitterUrl = default!; - private string githubIssuesUrl = default!; - private string githubDiscussionsUrl = default!; - private string stackoverflowUrl = default!; - - [Inject] public IConfiguration Configuration { get; set; } = default!; - - protected override void OnInitialized() - { - version = $"v{Configuration.GetValue("version")}"; // example: v0.6.1 - docsUrl = $"{Configuration.GetValue("urls:docs")}"; - blogUrl = $"{Configuration.GetValue("urls:blog")}"; - githubUrl = $"{Configuration.GetValue("urls:github")}"; - twitterUrl = $"{Configuration.GetValue("urls:twitter")}"; - githubIssuesUrl = $"{Configuration.GetValue("urls:github_issues")}"; - githubDiscussionsUrl = $"{Configuration.GetValue("urls:github_discussions")}"; - stackoverflowUrl = $"{Configuration.GetValue("urls:stackoverflow")}"; - - base.OnInitialized(); - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.Server/Shared/EmptyLayout.razor.css b/BlazorBootstrap.Demo.Server/Shared/EmptyLayout.razor.css deleted file mode 100644 index 9b7d3744b..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/EmptyLayout.razor.css +++ /dev/null @@ -1,3 +0,0 @@ -main, .main { - height: auto !important; -} diff --git a/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor b/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor deleted file mode 100644 index 347b84d65..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor +++ /dev/null @@ -1,20 +0,0 @@ -@inherits LayoutComponentBase - -
- - - -
-
- @Body -
-
-
- - - - diff --git a/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.cs deleted file mode 100644 index b8b3a6ebe..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.cs +++ /dev/null @@ -1,88 +0,0 @@ -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Routing; - -namespace BlazorBootstrap.Demo.Server.Shared; - -public partial class MainLayout : LayoutComponentBase -{ - private string version = default!; - private Sidebar sidebar = default!; - private IEnumerable navItems = default!; - - [Inject] public IConfiguration Configuration { get; set; } = default!; - - protected override void OnInitialized() - { - version = $"v{Configuration.GetValue("version")}"; // example: v0.6.1 - base.OnInitialized(); - } - - 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 (){ Id = "1", Text = "Getting Started", IconName = IconName.HouseDoorFill }, - new (){ Id = "100", Text = "Blazor WebAssembly", Href = "/getting-started/blazor-webassembly", IconName = IconName.BrowserChrome, ParentId = "1" }, - new (){ Id = "101", Text = "Blazor Server", Href = "/getting-started/blazor-server", IconName = IconName.Server, ParentId = "1" }, - new (){ Id = "102", Text = "MAUI Blazor", Href = "/getting-started/maui-blazor", IconName = IconName.PhoneFill, ParentId = "1" }, - - new (){ Id = "2", Text = "Layout", IconName = IconName.LayoutTextWindowReverse, IconColor = IconColor.Success }, - new (){ Id = "200", Text = "Blazor WebAssembly", Href = "/layout-setup/blazor-webassembly", IconName = IconName.BrowserEdge, ParentId = "2" }, - new (){ Id = "201", Text = "Blazor Server", Href = "/layout-setup/blazor-server", IconName = IconName.Server, ParentId = "2" }, - - new (){ Id = "3", Text = "Content", IconName = IconName.BodyText, IconColor = IconColor.Primary }, - new (){ Id = "300", Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare, ParentId = "3" }, - - new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success }, - new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" }, - new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" }, - new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" }, - new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, - new (){ Id = "404", Text = "Switch", Href = "/form/switch", IconName = IconName.ToggleOn, ParentId = "4" }, - new (){ Id = "405", Text = "Time Input", Href = "/form/time-input", IconName = IconName.ClockFill, ParentId = "4" }, - - new (){ Id = "5", Text = "Components", IconName = IconName.GearFill, IconColor = IconColor.Danger }, - new (){ Id = "500", Text = "Accordion", Href = "/accordion", IconName = IconName.ChevronBarExpand, ParentId = "5" }, - new (){ Id = "501", Text = "Alerts", Href = "/alerts", IconName = IconName.CheckCircleFill, ParentId = "5" }, - new (){ Id = "502", Text = "Badge", Href = "/badge", IconName = IconName.AppIndicator, ParentId = "5" }, - new (){ Id = "503", Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav, ParentId = "5" }, - new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" }, - new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" }, - new (){ Id = "506", Text = "Card", Href = "/card", IconName = IconName.CardHeading, ParentId = "5" }, - new (){ Id = "507", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, - new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" }, - new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" }, - new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" }, - new (){ Id = "511", Text = "Grid", Href = "/grid", IconName = IconName.Grid, ParentId = "5" }, - new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" }, - new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" }, - new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" }, - new (){ Id = "515", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" }, - new (){ Id = "516", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" }, - new (){ Id = "517", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" }, - new (){ Id = "518", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" }, - new (){ Id = "519", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" }, - new (){ Id = "520", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, - new (){ Id = "521", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, - - new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning }, - new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, - new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, - - new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success }, - new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, - }; - - return navItems; - } -} diff --git a/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.css b/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.css deleted file mode 100644 index 710ea05e1..000000000 --- a/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.css +++ /dev/null @@ -1,73 +0,0 @@ -.page { - position: relative; - display: flex; - flex-direction: column; -} - -.main { - flex: 1; - overflow-x: hidden; - /*width: 100%;*/ -} - -.sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); -} - -.top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; - height: 3.5rem; - display: flex; - align-items: center; -} - - .top-row ::deep a, .top-row .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - } - - .top-row a:first-child { - overflow: hidden; - text-overflow: ellipsis; - } - -@media (max-width: 640.98px) { - .top-row:not(.auth) { - display: none; - } - - .top-row.auth { - justify-content: space-between; - } - - .top-row a, .top-row .btn-link { - margin-left: 0; - } -} - -@media (min-width: 641px) { - .page { - flex-direction: row; - } - - .sidebar { - width: 260px !important; - height: 100vh !important; - overflow-y: auto !important; - position: sticky !important; - top: 0 !important; - } - - .top-row { - position: sticky; - top: 0; - z-index: 1; - } - - .main > div { - padding-left: 2rem !important; - padding-right: 1.5rem !important; - } -} diff --git a/BlazorBootstrap.Demo.Server/Usings.cs b/BlazorBootstrap.Demo.Server/Usings.cs index 96c1947f3..7c1cdc2e8 100644 --- a/BlazorBootstrap.Demo.Server/Usings.cs +++ b/BlazorBootstrap.Demo.Server/Usings.cs @@ -1,3 +1 @@ -global using System.Drawing; -global using System.Linq.Expressions; -global using System.Net.Http.Json; +global using BlazorBootstrap.Demo.RCL; diff --git a/BlazorBootstrap.Demo.Server/_Imports.razor b/BlazorBootstrap.Demo.Server/_Imports.razor index 036fc33c1..4a64d3b6a 100644 --- a/BlazorBootstrap.Demo.Server/_Imports.razor +++ b/BlazorBootstrap.Demo.Server/_Imports.razor @@ -8,4 +8,3 @@ @using Microsoft.JSInterop @using BlazorBootstrap; @using BlazorBootstrap.Demo.Server -@using BlazorBootstrap.Demo.Server.Shared