diff --git a/CodeBeam.MudBlazor.Extensions.Docs.Server/Program.cs b/CodeBeam.MudBlazor.Extensions.Docs.Server/Program.cs index 80f41ef0..712ca150 100644 --- a/CodeBeam.MudBlazor.Extensions.Docs.Server/Program.cs +++ b/CodeBeam.MudBlazor.Extensions.Docs.Server/Program.cs @@ -12,6 +12,7 @@ builder.Services.AddMudServices(); builder.Services.AddMudExtensions(); builder.Services.AddScoped(); +builder.Services.AddScoped(); var app = builder.Build(); diff --git a/CodeBeam.MudBlazor.Extensions.Docs.Server/Properties/launchSettings.json b/CodeBeam.MudBlazor.Extensions.Docs.Server/Properties/launchSettings.json index ee85a022..2278ac02 100644 --- a/CodeBeam.MudBlazor.Extensions.Docs.Server/Properties/launchSettings.json +++ b/CodeBeam.MudBlazor.Extensions.Docs.Server/Properties/launchSettings.json @@ -12,7 +12,7 @@ "commandName": "Project", "dotnetRunMessages": true, "launchBrowser": true, - "applicationUrl": "https://localhost:7009;http://localhost:5009", + "applicationUrl": "https://localhost:7010;http://localhost:5010", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } diff --git a/CodeBeam.MudBlazor.Extensions.Docs.Wasm/CodeBeam.MudBlazor.Extensions.Docs.Wasm.csproj b/CodeBeam.MudBlazor.Extensions.Docs.Wasm/CodeBeam.MudBlazor.Extensions.Docs.Wasm.csproj index e4eaa4df..58f3dc81 100644 --- a/CodeBeam.MudBlazor.Extensions.Docs.Wasm/CodeBeam.MudBlazor.Extensions.Docs.Wasm.csproj +++ b/CodeBeam.MudBlazor.Extensions.Docs.Wasm/CodeBeam.MudBlazor.Extensions.Docs.Wasm.csproj @@ -21,6 +21,13 @@ + + + + true diff --git a/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml b/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml new file mode 100644 index 00000000..a43d47d7 --- /dev/null +++ b/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml @@ -0,0 +1,7113 @@ + + + + CodeBeam.MudBlazor.Extensions + + + + + The extended base input fundamentals. + + + + + + + + + + + Disable input component if true. Default is false. + + + + + Get the input component is disabled or not. + + + + + + If true, the input will be read-only. + + + + + Get the input component is readonly or not. + + + + + + Fires on input. + + + + + Fires on change. + + + + + Set the text-align on the component. + + + + + If true, the input will take up the full width of its container. + + + + + If true, the input will update the Value immediately on typing. + If false, the Value is updated only on Enter. + + + + + If false, the input will not have an underline. + + + + + The HelperText will be displayed below the text field. + + + + + If true, the helper text will only be visible on focus. + + + + + Icon that will be used if Adornment is set to Start or End. + + + + + Text that will be used if Adornment is set to Start or End, the Text overrides Icon. + + + + + The Adornment if used. By default, it is set to None. + + + + + The Adornment if used. By default, it is set to None. + + + + + The Adornment if used. By default, it is set to None. + + + + + The aria-label of the adornment. + + + + + The validation is only triggered if the user has changed the input value at least once. By default, it is false + + + + + If true shrinks label directly. + + + + + The color of the adornment if used. It supports the theme colors. + + + + + The Icon Size. + + + + + Button click event if set and Adornment used. + + + + + Variant to use. + + + + + Will adjust vertical spacing. + + + + + The short hint displayed in the input before the user enters a value. + + + + + If set, will display the counter, value 0 will display current count but no stop count. + + + + + Maximum number of characters that the input will accept + + + + + If string has value the label text will be displayed in the input, and scaled down at the top if the input has value. + + + + + If true the input will focus automatically. + + + + + A multiline input (textarea) will be shown, if set to more than one line. + + + + + The text to be displayed. + + + + + When TextUpdateSuppression is true (which is default) the text can not be updated by bindings while the component is focused in BSS (not WASM). + This solves issue #1012: Textfield swallowing chars when typing rapidly + If you need to update the input's text while it is focused you can set this parameter to false. + Note: on WASM text update suppression is not active, so this parameter has no effect. + + + + + Hints at the type of data that might be entered by the user while editing the input + + + + + The pattern attribute, when specified, is a regular expression which the input's value must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression + Not Supported in multline input + + + + + CSS style of the child content. + + + + + Sync the value, values and text, calls validation manually. Useful to call after user changes value or text programmatically. + + + + + + Derived classes need to override this if they can be something other than text + + + + + + + + + + + + + Text change hook for descendants. Called when Text needs to be refreshed from current Value property. + + + + + Focus to the element. + + The ValueTask + + + + Blur from the element. + + + + + + Focus and select all text. + + + + + + Focus and select partial text with given positions. + + + + + + + + Fired when the text value changes. + + + + + Fired when the element loses focus. + + + + + Fired when the element changes internally its text value. + + + + + + + + + + + + + + + + + Fired on the KeyDown event. + + + + + + + + + + + + Prevent the default action for the KeyDown event. + + + + + If true disables paste to input component. Default is false. + + + + + Fired on the KeyUp event. + + + + + + + + + + + + Prevent the default action for the KeyUp event. + + + + + Fired when the Value property changes. + + + + + The value of this input element. + + + + + + + + + + + + + + Value change hook for descendants. Called when Value needs to be refreshed from current Text property. + + + + + + + + + + + + + + + + + + + Conversion format parameter for ToString(), can be used for formatting primitive types, DateTimes and TimeSpans + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + The result that used in MudBarcode component to show one of the barcode formats. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Determines which barcode format will shown. Default is QR Code. + + + + + The outer div classname. + + + + + The outer div classname. + + + + + The image source shows when the value is null. + + + + + If true, it goes to specified href when click. + + + + + The error content. + + + + + The width value as integer. + + + + + The height value as integer. + + + + + Use this value on not square sized barcode formats like UPC_A and UPC_E. + + + + + Increase the stroke width if readers can not read the barcode easily. + + + + + Determines how user go to href content. Default is open in a new tab. + + + + + The value of the barcode format. + + + + + The color of the barcode as string. Accepts all kinds of CSS property values. (ex. #123456) Default is "black". + + + + + The background color of the barcode as string. Accepts all kinds of CSS property values. (ex. #123456) Default is "white". + + + + + Fires when value changed. + + + + + Shows a component inside the barcode. + + + + + Barcode process that returns BarcodeResult. Returns null if value is also null or empty. + + + + + + A Mud input component has special features to working with chips. + + + + + + Protected classes. + + + + + Protected styles. + + + + + /The list of values. + + + + + Fires when values changed + + + + + If false, pressing delimeter key has no effect if the value is already in values. Default is false. + + + + + Determines chip size with small, medium or large values. + + + + + The char that created a new chip with current value. + + + + + CSS classes of the chips, seperated by space. + + + + + CSS styles of the chips. + + + + + Color of the chips. + + + + + Variant of the chips. + + + + + If true, the chips that exceed width goes to the below line. + + + + + Determines that chips have close button. Default is true. + + + + + Removes last created chip value when press Backspace. Default is true. + + + + + Maximum chip count. Set 0 to unlimited. Default is 0. + + + + + Max width for each chip as integer value. Default is 80. + + + + + Protected keydown event. + + + + + + + Protected keyup event. + + + + + + + + + + + + + Remove process of the specified chip. + + + + + + + Clear the text field. + + + + + + Inputs which each input box can contain only one character. + + + + + + MudCodeInput constructor. + + + + + Protected classes. + + + + + Protected classes. + + + + + The CSS classes for each input, seperated by space. + + + + + The CSS classes for input container div, seperated by space. + + + + + The CSS styles for input container div. + + + + + Type of the input element. It should be a valid HTML5 input type. + + + + + The value of the input. + + + + + The event fires when value changed. + + + + + The number of text fields. + + + + + Determines the spacing between each input. + + + + + If true disables the component. Default is false. + + + + + If true removes all interactivity of the component. Default is false. + + + + + Variant of the component. + + + + + Margin of the component that determines component size. + + + + + Protected keydown event. + + + + + + + + + + + + + Focuses next input box. + + + + + + Focuses previous input box. + + + + + + + + + + + Set value for the input boxes. + + + + + + Call this method to set value programmatically. + + + + + + + + + + + + Get CSS property value as RGB format. + + + + + + + + Converts HEX value to RGB format. + + + + + + + + Implements RGB tone algorithm. + + + + + + + + Hex value to int calculator. + + + + + + + The hex value of primary color. + + + + + The hex value of secondary color. + + + + + The hex value of tertiary color. + + + + + The hex value of neutral color. + + + + + The hex value of neutral variant color. + + + + + The hex value of error color. + + + + + The hex values of custom colors. + + + + + The color shade between 0 (black) and 100 (white). Default is 40 (20 for dark mode). If its on default, the value will change automatically for dark mode. + + + + + The color shade between 0 (black) and 100 (white) for container colors. Default is 90 (30 for dark mode). If its on default, the value will change automatically for dark mode. + + + + + If true, the current CSS variables also be overriden (--mud-palette-primary etc.). Default is false. + + + + + Component that has select and autocomplete features. + + + + + + Constructor for ComboBox + + + + + Protected search string converter. + + + + + + Item list of ComboBox. + + + + + Eligible items of ComboBox. + + + + + Icon string. + + + + + Main CSS classes. + + + + + Input CSS classes. + + + + + CSS classes for popover content. + + + + + CSS styles for mock input. + + + + + If true, combobox goes to autocomplete mode. + + + + + If false, all items are eligible regarding what user search in textfield. + + + + + If true, searched text has highlight. + + + + + Overrides the highlight class. + + + + + If true, selected or active items in popover has border. + + + + + User class names for the input, separated by space. + + + + + User style names for the input, separated by space. + + + + + Fired when dropdown opens. + + + + + Fired when dropdown closes. + + + + + Add the MudComboBoxItems here. + + + + + Content that placed on top in popover. + + + + + Content that placed on bottom in popover. + + + + + Content that shown when no items found. + + + + + Optional presentation template for items + + + + + Optional presentation template for selected items + + + + + Optional presentation template for disabled items + + + + + Function to be invoked when checking whether an item should be disabled or not. Works both with renderfragment and ItemCollection approach. + + + + + Classname for item template or chips. + + + + + If true the active (hilighted) item select on tab key. Designed for only single selection. Default is false. + + + + + User class names for the popover, separated by space + + + + + The text that shown on empty searchbox. + + + + + If true, compact vertical padding will be applied to all Select items. + + The default is + + + + The Open Select Icon + + The default is + + + + The Close Select Icon + + The default is + + + + Dropdown color of select. Supports theme colors. + + The default is + + + + The color of the text. It supports the theme colors. + + The default is + + + + The color of the checked checkbox. It supports the theme colors. + + + + + The color of the unchecked checkbox. It supports the theme colors. + + + + + The size of the checkbox. + + The default is + + + + The input's visual. + + The default is + + + + The items' visual in popover. + + The default is + + + + If true, shows checkbox when multiselection is true. + + The default is true + + + + If set to true and the MultiSelection option is set to true, a "select all" checkbox is added at the top of the list of items. + + + + + Sets position of the Select All checkbox + + The default is + + + + Define the text of the Select All option. + + The default is Select All + + + + Function to define a customized multiselection text. + + + + + Custom search func for searchbox. If doesn't set, it search with "Contains" logic by default. Passed value and searchString values. + + + + + If true, chips has close button and remove from SelectedValues when pressed the close button. + + + + + CSS classes for chips. + + + + The default is + + + The default is + + + + Parameter to define the delimited string separator. + + The default is , + + + + If true popover width will be the same as the combobox component. + + The default is true + + + + Sets the maxheight of the popover. + + The default is 300 + + + + Set the anchor origin point to determine where the popover will open from. + + The default is + + + + Sets the transform origin point for the popover. + + The default is + + + + If false, combobox allows value from out of bound. + + The default is true + + + + Show clear button. + + + + + If true will open the menu when the clear button is clicked. + + + + + If true, shows a searchbox for filtering items. Only works with ItemCollection approach. + + + + + If true, the search-box will be focused when the dropdown is opened. + + The default is true + + + + If true, the search-box has a clear icon. + + + + + If true, prevent scrolling while dropdown is open. + + The default is true + + + + Button click event for clear button. Called after text and value has been cleared. + + + + + Custom indeterminate icon. + + The default is + + + + If true, multiple values can be selected via checkboxes which are automatically shown in the dropdown + + + + + If true, clicking on selected item can unselect the item. + + + + + Protected selectedvalues sync. + + + + + + + The Comparer to use for comparing selected values internally. + + + + + Defines how values are displayed in the drop-down list + + + + + Set of selected values. If MultiSelection is false it will only ever contain a single value. This property is two-way bindable. + + + + + Fires when SelectedValues changes. + + + + + Protected method. + + + + + + + + + + + + + + + + + + + + + Gets DataVisualiserText. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Protected keydown event. + + + + + + Protected searchbox keydown event. + + + + + + + Protected searchbox keyup event. + + + + + + Protected keyup event. + + + + + + Protected blur event. + + + + + + + + + + + + + Focuses the component. + + + + + + Blur from the component. + + + + + + Focus and select all text. + + + + + + Focus and select partial text regard of given positions. + + + + + + + + Toggles the menu. + + + + + + Opens menu. + + + + + + Closes menu. + + + + + + Select or unselect the ComboBoxItem. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Extra handler for clearing selection. + + + + + Clear the selection + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Highlights the first item. + + + + + + + Highlight previous or next items. + + + + + + + Highlights the last item. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + The parent select component + + + + + Prevents the user from interacting with this item. + + + + + Shows a ripple effect when the user clicks the button. + + + Defaults to true. + + + + + The text to display + + + + + A user-defined option that can be selected + + + + + The content within this item. + + + + + The color of the text. It supports the theme colors. + + + + + The color of the checked checkbox. It supports the theme colors. + + + + + The color of the unchecked checkbox. It supports the theme colors. + + + + + The size of the checkbox. + + + + + OnClick event. + + + + + + + + + + + + + + + Change the item's active status. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Default fields in your database + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Header fields in your CSV File + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + A class for provide all local strings at once. + + + + + Choose Table Column Headers + + + + + CsvFile as BrowserFile + + + + + + + + + + Use this dictionary if you want to see what was mapped. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + CSS classes for popover content. + + + + + CSS styles for popover content. + + + + + The date format that determines the text and wheel order. Default is Thread.CurrentThread.CurrentUICulture.DateTimeFormat.ShortDatePattern. + + + + + If false, users have to click the "done" button to submit value before close popover. Default is true. + + + + + The minimum swipe delta to change wheel value on touch devices. Default is 30. + + + + + If true, the year wheel is disabled. + + + + + If true, the month wheel is disabled. + + + + + If true, the hour wheel is disabled. + + + + + If true, the minute wheel is disabled. + + + + + If true, the second wheel is disabled. + + + + + If true, the day wheel is disabled. + + + + + If true, only adornment click opens popover and users can directly write to the input. + + + + + Determines the wheels are dense or not. + + + + + The color of various parts of the component. + + + + + The time wheels (hour, minute and second) color. If its inherit (by default) it takes the Color value. + + + + + Show wheel labels. + + + + + Show toolbar that allows change between DateViews dynamically. + + + + + A class for provide all local strings at once. + + + + + Show clear button. + + + + + Determines the view of wheels. + + + + + Displayed number range as days. + + + + + Displayed number range as months. + + + + + Displayed number range as years. + + + + + Displayed number range as hours. + + + + + Displayed number range as minutes. + + + + + Displayed number range as seconds. + + + + + Max height of popover content. Default is 300. + + + + + The icon displayed as adornment in input. + + + + + The adornment position in input. + + + + + Sets the anchor origin point for the popover. + + + + + Sets the transform origin point for the popover. + + + + + If true, prevent scrolling while dropdown is open. + + + + + Button click event for clear button. Called after text and value has been cleared. + + + + + + + + + + + + Toggles the menu. + + + + + + Opens the menu. + + + + + + Closes the menu. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Focuses the component. + + + + + + Blur from the component. + + + + + + Focus and select all text. + + + + + + Focus and select partial text show with positions. + + + + + + + + + + + + + + + + + + + + + + + + + + Clear the text field, set Value to default(T) and Text to null + + + + + + + + + + + + Sets the input text from outside programmatically + + + + + + + + + + + + Selected font. + + + + + Fonts will show in popover. Default is Google latin font list. + + + + + The css import url for adding custom fonts. Default is google font url. Ex. 'https://font.something.com' + + + + + If true, the input's label and text always use the theme font instead of font picker's value. + + + + + Fires on font changed. + + + + + Import selected font automatically. + + + + + + + Clears selected font. + + + + + + + + + + + + + Gallery component. + + + + + + + + + + + + + + + CSS classes for selected image. + + + + + CSS styles for selected image. + + + + + Sets how many images show per gallery line. Default is 3. + + + + + If true, closes selected image on backdrop click. Default is true. + + + + + If true, disables the default animation on image changing. + + + + + If true, close button shows on selected imgae view. + + + + + If true, toolbox buttons shows on selected imgae view. + + + + + The max width for selected image. The remaining space fills with an overlay. Default is Medium. + + + + + Renderfragment for top section on selected view. + + + + + Renderfragment for bottom section on selected view. + + + + + Gallery's image source. + + + + + + + + + + + Change menu visible. + + + + + + + + + + + + + + + + + + + + + + + + + Interval to be awaited in milliseconds before changing the Text value + + + + + callback to be called when the debounce interval has elapsed + receives the Text as a parameter + + + + + + + + + + + + + + + + + + + + + + + + + + + + The extended input component. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + CSS styles for data visualiser container. + + + + + Type of the input element. It should be a valid HTML5 input type. + + + + + + + + + + + + + + + + + + + + + + + + Forces input height to fit the text content. + + + + + + If true, automatically resize the height regard to the text. Needs Lines parameter to set more than 1. + + + + + Paste hook for descendants. + + + + + ChildContent of the MudInput will only be displayed if InputType.Hidden and if its not null. + + + + + + + + + + Focuses component. + + + + + + Blur from component. + + + + + + Focus and select all text. + + + + + + Focus and select partial text described with positions. + + + + + + + + Invokes the callback when the Up arrow button is clicked when the input is set to . + Note: use the optimized control if you need to deal with numbers. + + + + + Invokes the callback when the Down arrow button is clicked when the input is set to . + Note: use the optimized control if you need to deal with numbers. + + + + + Hides the spin buttons. + + + + + DavaVisualiser content. + + + + + Show clear button. + + + + + + + + + + Button click event for clear button. Called after text and value has been cleared. + + + + + Mouse wheel event for input. + + + + + Custom clear icon. + + + + + Custom numeric up icon. + + + + + Custom numeric down icon. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Sets the input text from outside programmatically + + + + + + + Represents a tree view which displays a snippet of JSON. + + + + + The JSON to be displayed. + + + Use the parameter instead if you have a available. + + + + + The root node of the JSON to display. + + + Use the parameter instead if you only have JSON available as a string. + + + + + Sets the property and raises the event. + + The new JSON to use. + + + + Sets the property and raises the event. + + The new JSON to use. + + + + Occurs when the JSON has changed. + + + + + Gets or sets a value indicating whether the tree contents are compacted. + + + + + Gets or sets a value indicating whether the current row is highlighted. + + + + + Gets or sets a value indicating whether items are sorted by key. + + + + + Represents the child leaf of a JSON tree view. + + + + + Gets or sets the node to display (including children). + + + + + Gets or sets a value indicating whether items are sorted by key. + + + + + Gets or sets a children text. + + + + + The list component with extended features. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + The color of the selected List Item. + + + + + Child content of component. + + + + + Optional presentation template for items + + + + + Optional presentation template for selected items + + + + + Optional presentation template for disabled items + + + + + Optional presentation template for select all item + + + + + Function to be invoked when checking whether an item should be disabled or not. Works both with renderfragment and ItemCollection approach. + + + + + + + + + + + + + + + Defines how values are displayed in the drop-down list + + + + + Predefined enumerable items. If its not null, creates list items automatically. + + + + + Custom search func for searchbox. If doesn't set, it search with "Contains" logic by default. Passed value and searchString values. + + + + + If true, shows a searchbox for filtering items. Only works with ItemCollection approach. + + + + + Search box text field variant. + + + + + Search box icon position. + + + + + If true, the search-box will be focused when the dropdown is opened. + + + + + If true, the search-box has a clear icon. + + + + + SearchBox's CSS classes, seperated by space. + + + + + The text shown when searchbox is empty. + + + + + Fired when the search value changes. + + + + + Allows virtualization. Only work if ItemCollection parameter is not null. + + + + + Set max items to show in list. Other items can be scrolled. Works if list items populated with ItemCollection parameter. + + + + + Overscan value for Virtualized list. Default is 2. + + + + + Allows multi selection and adds MultiSelectionComponent for each list item. + + + + + The MultiSelectionComponent's placement. Accepts Align.Start and Align.End + + + + + The component which shows as a MultiSelection check. + + + + + Set true to make the list items clickable. This is also the precondition for list selection to work. + + + + + If true the active (hilighted) item select on tab key. Designed for only single selection. Default is true. + + + + + If true, vertical padding will be removed from the list. + + + + + If true, selected items doesn't have a selected background color. + + + + + If true, compact vertical padding will be applied to all list items. + + + + + If true, the left and right padding is removed on all list items. + + + + + If true, will disable the list item if it has onclick. + + + + + If set to true and the MultiSelection option is set to true, a "select all" checkbox is added at the top of the list of items. + + + + + Sets position of the Select All checkbox + + + + + Define the text of the Select All option. + + + + + If true, change background color to secondary for all nested item headers. + + + + + Fired on the KeyDown event. + + + + + Fired on the OnFocusOut event. + + + + + Fired on the OnDoubleClick event. + + + + + + + + + + + + + + + + + + + + + + The current selected value. + Note: Make the list Clickable or set MultiSelection true for item selection to work. + + + + + The current selected values. Holds single value (SelectedValue) if MultiSelection is false. + + + + + The current selected list item. + Note: make the list Clickable or MultiSelection or both for item selection to work. + + + + + The current selected listitems. + Note: make the list Clickable for item selection to work. + + + + + Called whenever the selection changed. Can also be called even MultiSelection is true. + + + + + Called whenever selected values changes. Can also be called even MultiSelection is false. + + + + + Called whenever the selected item changed. Can also be called even MultiSelection is true. + + + + + Called whenever the selected items changed. Can also be called even MultiSelection is false. + + + + + Get all MudListItems in the list. + + + + + Get all items that holds value. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Searchbox keydown event. + + + + + + + Keydown event. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Custom checked icon. + + + + + Custom unchecked icon. + + + + + Custom indeterminate icon. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Clears value(s) and item(s) and deactive all items. + + + + + + + + + + + + + + + + + + Refresh all styles. + + + + + + Refresh all items. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Functional items does not hold values. If a value set on Functional item, it ignores by the MudList. They can not count on Items list (they count on AllItems), cannot be subject of keyboard navigation and selection. + + + + + The text to display + + + + + The secondary text to display + + + + + Value of the item. + + + + + Avatar to use if set. + + + + + Avatar CSS Class to apply if Avatar is set. + + + + + Link to a URL when clicked. + + + + + If true, force browser to redirect outside component router-space. + + + + + If true, will disable the list item if it has onclick. + The value can be overridden by the parent list. + + + + + If true, the left and right padding is removed. + + + + + If true, disables ripple effect. + + + + + Overrided component for multiselection. Keep it null to have default one that MudList has. + + + + + Icon to use if set. + + + + + The color of the icon. + + + + + Sets the Icon Size. + + + + + The color of the adornment if used. It supports the theme colors. + + + + + Custom expand less icon. + + + + + Custom expand more icon. + + + + + If true, the List Subheader will be indented. + + + + + If true, stop propagation on click. Default is true. + + + + + If true, compact vertical padding will be used. + + + + + Prevent default behavior when click on MudSelectItem. Default behavior is selecting the item and style adjustments. + + + + + Display content of this list item. If set, overrides Text. + + + + + Add child list items here to create a nested list. + + + + + List click event. + + + + + If true, expands the nested list on first display. + + + + + Expand or collapse nested list. Two-way bindable. Note: if you directly set this to + true or false (instead of using two-way binding) it will force the nested list's expansion state. + + + + + Called when expanded state change. + + + + + + + + + + + + + + + Selected state of the option. Readonly. Use SetSelected for selecting. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + The child render fragment. + + + + + Disables the left and right spaces. + + + + + If true subheader has more padding. Default is false. + + + + + If true, subheader behaves sticky and remains on top until other subheader comes to top. + + + + + If true, subheader has darken background. + + + + + + + + + + MudLoadingButton constructor. + + + + + Two way binded loading state. + + + + + Fires when loading changed. + + + + + Color of circular loading content. + + + + + Placement of the loading adornment. Default is start. + + + + + Icon placed before the text if set. + + + + + Icon placed before the text if set. Only works for IconButton variant. For button variant use Start and EndIcon. + + + + + Icon placed after the text if set. + + + + + The color of the icon. It supports the theme colors. + + + + + Icon class names, separated by space + + + + + The color of the component. It supports the theme colors. + + + + + The Size of the component. + + + + + Variant of button. + + + + + The variant to use. + + + + + If true, the button will take up 100% of available width. + + + + + Custom loader content. If it is set, the overlap, darken and loadertype parameters ignored. + + + + + The child content. + + + + + The size of the icon. + + + + + If applied the text will be added to the component. + + + + + If not null, LoadingButton goes for loading state for determined miliseconds. + + + + + + + + + + + + Loading component that covers a loading content with a parameter. + + + + + MudLoading constructor. + + + + + + + + + + Two way binded loading state. + + + + + Fires when loading changed. + + + + + If true, the background still remain visible, but user cannot interact them. + + + + + The text shows after the loading indicator. + + + + + CSS classes for the text, seperated by space. + + + + + CSS classes for the progress component, seperated by space. + + + + + CSS style for the text. + + + + + CSS style for the progress component. + + + + + If true, show a darken background. + + + + + The color of loading indicator. Default is Color.Primary. + + + + + Set the indicator type. A middle placed circular or top placed linear progress. + + + + + Custom loader content. If it is set, the overlap, darken and loadertype parameters ignored. + + + + + The child content. + + + + + + + + + + + + + + + + + + + + The content inside the component. + + + + + Number of columns. Default is 4. + + + + + Number of rows. Default is 4. + + + + + Determines MudPage's height. + + + + + Determines MudPage's height with a string value. + + + + + Fires when click. + + + + + If true stop progpagation on click. + + + + + Fires when context menu (ex. right click). + + + + + If true prevent default context menu event. + + + + + If true stop propagation context menu event. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Mud input component with enhanced password features. + + + + + + MudPasswordField constructor. + + + + + + + + + + + + + + + Type of the input element. It should be a valid HTML5 input type. + + + + + Show clear button. + + + + + If true disable paste to the component. + + + + + If true, adornment button accepts tab stop. Default is false. + + + + + Button click event for clear button. Called after text and value has been cleared. + + + + + RenderFragment for start adornment. + + + + + RenderFragment for end adornment. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Clear the text field, set Value to default(T) and Text to null + + + + + + Sets the input text from outside programmatically + + + + + + + If true, masks text with password mode. + + + + + Fires when password mode changed. + + + + + + + + + + + Popup content to show useful infos like GDPR. + + + + + + + + + + + + + + + Placement of Popup. Default is bottom. + + + + + The popup's visible state. + + + + + Popup's space between the borders. Has no effect on centered popups. + + + + + If true, popup appears with a fade animation. + + + + + The higher the number, the heavier the drop-shadow. + + + + + The icon at the start of the popup. Can be overridden with ChildContent. + + + + + The text coming after the icon of the popup. Can be overridden with ChildContent. + + + + + Icon and text color. + + + + + Custom content for override everything. + + + + + The action button section. If this renderfragment null, a close icon button will be appear. + + + + + The MudLink content continues after the text. + + + + + Fires when popup visible changed. + + + + + + + + + + + Mud slider with range abilities. + + + + + + + + + + + + + + + + If this is a Range Slider + + + + + Custom text for ValueLabel + + + + + Custom text for upper ValueLabel + + + + + The minimum allowed value of the slider. Should not be equal to max. + + + + + The minimum value can slider thumb has. + + + + + The minimum value the upper slider thumb can have. + + + + + The maximum allowed value of the slider. Should not be equal to min. + + + + + The maximum value can slider thumb has. + + + + + The maximum value the lower slider thumb can have. + + + + + The minimum distance between the upper and lower values + + + + + + How many steps the slider should take on each move. + + + + + + If true, the slider will be disabled. + + + + + + If true and , the slider's min value will be disabled. + + + + + + If true and , the slider's max value will be disabled. + + + + + + Child content of component. + + + + + + + + + + Fires when value changed. + + + + + Fires when upper value changed. + + + + + Value of the component. + + + + + If range set, holds the higher value. + + + + + The color of the component. It supports the Primary, Secondary and Tertiary theme colors. + + + + + + + + + + If true, displays the Values below the slider + + + + + If true, the dragging the slider will update the Value immediately. + If false, the Value is updated only on releasing the handle. + + + + + If true, displays the slider vertical. + + + + + If true, displays tick marks on the track. + + + + + Labels for tick marks, will attempt to map the labels to each step in index order. + + + + + Labels for tick marks, will attempt to map the labels to each step in index order. + + + + + The variant to use. + + + + + Displays the value over the slider thumb. + + + + + + + + + + Select component with advanced features. + + + + + + + + + + + The collection of items within this select + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + User class names for the input, separated by space + + + + + User style names for the input, separated by space + + + + + Fired when dropdown opens. + + + + + Fired when dropdown closes. + + + + + Add the MudSelectItems here + + + + + Optional additional content to display above the list within the popover. + + + + + Whether to show at the bottom of the popover. + + + + + Optional presentation template for items + + + + + Optional presentation template for selected items + + + + + Optional presentation template for disabled items + + + + + Function to be invoked when checking whether an item should be disabled or not. Works both with renderfragment and ItemCollection approach. + + + + + Classname for item template or chips. + + + + + If true the active (hilighted) item select on tab key. Designed for only single selection. Default is true. + + + + + If false multiline text show. Default is false. + + + + + User class names for the popover, separated by space + + + + + + + + + + If true, selected items doesn't have a selected background color. + + + + + + + + + + If true, compact vertical padding will be applied to all Select items. + + + + + The Open Select Icon + + + + + Dropdown color of select. Supports theme colors. + + + + + The Close Select Icon + + + + + The value presenter. + + + + + If set to true and the MultiSelection option is set to true, a "select all" checkbox is added at the top of the list of items. + + + + + Sets position of the Select All checkbox + + + + + Define the text of the Select All option. + + + + + Function to define a customized multiselection text. + + + + + Custom search func for searchbox. If doesn't set, it search with "Contains" logic by default. Passed value and searchString values. + + + + + If not null, select items will automatically created regard to the collection. + + + + + Allows virtualization. Only work is ItemCollection parameter is not null. + + + + + If true, chips has close button and remove from SelectedValues when pressed the close button. + + + + + + + + + + + + + + + + + + + + Parameter to define the delimited string separator. + + + + + If true popover width will be the same as the select component. + + + + + Sets the maxheight the Select can have when open. + + + + + Set the anchor origin point to determen where the popover will open from. + + + + + Sets the transform origin point for the popover. + + + + + If true, the Select's input will not show any values that are not defined in the dropdown. + This can be useful if Value is bound to a variable which is initialized to a value which is not in the list + and you want the Select to show the label / placeholder instead. + + + + + Show clear button. + + + + + If true, shows a searchbox for filtering items. Only works with ItemCollection approach. + + + + + If true, the search-box will be focused when the dropdown is opened. + + + + + If true, the search-box has a clear icon. + + + + + Search box text field variant. + + + + + Search box icon position. + + + + + Fired when the search value changes. + + + + + If true, prevent scrolling while dropdown is open. + + + + + Button click event for clear button. Called after text and value has been cleared. + + + + + Custom checked icon. + + + + + Custom unchecked icon. + + + + + Custom indeterminate icon. + + + + + If true, multiple values can be selected via checkboxes which are automatically shown in the dropdown + + + + + The MultiSelectionComponent's placement. Accepts Align.Start and Align.End + + + + + The component which shows as a MultiSelection check. + + + + + The Comparer to use for comparing selected values internally. + + + + + Defines how values are displayed in the drop-down list + + + + + Set of selected values. If MultiSelection is false it will only ever contain a single value. This property is two-way bindable. + + + + + + + + + + + + + + + Fires when SelectedValues changes. + + + + + Should only be used for debugging and development purposes. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Refresh all items. + + + + + + + + + + + Keydown event. + + + + + + Keyup event. + + + + + + Blur event. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Extra handler for clearing selection. + + + + + Clear the selection + + + + + + + + + + + + + + + + + + + + + + + + + + + + Fixes issue #4328 + Returns true when MultiSelection is true and it has selected values(Since Value property is not used when MultiSelection=true + + + True when component has a value + + + + + + + + + + + returns the value of the internal property _isOpen + + + + + + Represents an option of a select or multi-select. To be used inside MudSelect. + + + + + + + + + + The parent select component + + + + + Functional items does not hold values. If a value set on Functional item, it ignores by the MudSelect. They cannot be subject of keyboard navigation and selection. + + + + + The text to display + + + + + Select items with HideContent==true are only there to register their RenderFragment with the select but + wont render and have no other purpose! + + + + + A user-defined option that can be selected + + + + + The URL to navigate to when this item is clicked. + + + + + The content within this item. + + + + + Mirrors the MultiSelection status of the parent select + + + + + OnClick event. + + + + + Prevents the user from interacting with this item. + + + + + + + + + + + + + + + + + + + + + + + + + + Represents an option of a select or multi-select. To be used inside MudSelect. + + + + + A user-defined option that can be selected + + + + + A user-defined option that can be selected + + + + + The content within this item. + + + + + A user-defined option that can be selected + + + + + Sets the group's expanded state on popover opening. Works only if nested is true. + + + + + Sticky header for item group. Works only with nested is false. + + + + + Select items with HideContent==true are only there to register their RenderFragment with the select but + wont render and have no other purpose! + + + + + + + + + + + + Signature pad component. + + + + + + + + + + + + + + + + + + + + + + + + + Fires when value changed. + + + + + Localized strings for Signature Pad. + + + + + + + + + + + + + + + + + + + + + + + + + Shadow level of the component. Default is 4. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Option class for SignaturePad. + + + + + + + + + + MudLoading constructor. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Split two panels with a bar. + + + + + + + + + + + + + + + + + + + + The two contents' (sections) classes, seperated by space. + + + + + The height of splitter. For example: "400px" + + The default is 100% + + + + The height of splitter. + + + + + If true, splitter has borders. + + + + + The style to apply to both content sections, seperated by space. + + + + + The style of the , seperated by space. + + + + + The style of the , seperated by space. + + + + + The splitter bar's styles, seperated by space. The style string should end with: "!important;" + + The default is 2px + + + + The slide sensitivity that should between 0.01 and 10. Smaller values increase the smooth but reduce performance. Default is 0.1 + + + + + If true, user can interact with splitter bar. + + The default is true + + + + Enables the default margin. + + The default is true, which adds class: "ma-2" + + + + + + + + + + + + + + The start content's percentage. + Default is 50. + + The default is 50 + + + + + + + + + Fires when double click. + + + + + + + + + + + + + + + + + + + + + + + + + + + Step text to show on header. + + + + + The order of the step. + + + + + + + + + + The step status flag to show step is continued, skipped or completed. Do not set it directly unless you know what you do exactly. + + + + + If true the step is skippable. + + + + + If true, the step show when the stepper is completed. There should be only one result step. + + + + + + + + + + Fires when step status changed. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Stepper component with extended features. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Provides CSS classes for the step content. + + + + + Provides CSS styles for the step content. + + + + + Provides CSS classes for the step actions. + + + + + Determines how action buttons justified. + + + + + If true, the header can not be clickable and users can step one by one. + + + + + If true, disables ripple effect when click on step headers. + + + + + If true, disables the default animation on step changing. + + + + + If true, disables built-in "previous" step action button. + + + + + If true, disables built-in "next" step action button. + + + + + If true, disables built-in "skip" step action button. + + + + + If true, disables built-in "completed"/"skipped" step result indictors shown in the actions panel. + + + + + + + + + + If true, a linear loading indicator shows under the header. + + + + + A static content that always show with all steps. + + + + + If true, action buttons have icons instead of text to gain more space. + + + + + The predefined Mud color for header and action buttons. + + + + + The variant for header and action buttons. + + + + + Choose header badge view. Default is all. + + + + + Choose header text view. Default is all. + + + + + Choose header text view. Default is all. + + + + + Choose header alignment + + + + + A class for provide all local strings at once. + + + + + The child content where MudSteps should be inside. + + + + + Custom content to be shown between the "previous" and "next" action buttons. + + + If set, you must also supply a somewhere in your render fragment + to ensure that the built-in action buttons are aligned correctly. + + + + + Fires when active step changed. + + + + + Runs a task to prevent step change. Has change direction (backwards or forwards) and target index and returns a bool value. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Update all component and render again. + + + + + + + + + + + + + + + + + + + + Switch component with M3 specifications. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Shows an icon on Switch's thumb. + + + + + Shows an icon on Switch's thumb (off state). + + + + + Keydown event. + + + + + + + + + + + + + + + + + + + + + + + + Teleport content to different containers. + + + + + + + + + + The class name that shows the parent which the teleport content will teleport. + + + + + The class name that used to return teleport content to the container. + + + + + If true teleported content returns the container, otherwise the content remains the last teleported place. Default is false. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + If true, automatically resize the height regard to the text. Needs Lines parameter to set more than 1. + + + + + + + + + + + The render fragment for child content. + + + + + Type of the input element. It should be a valid HTML5 input type. + + + + + Show clear button. + + + + + + + + + + Button click event for clear button. Called after text and value has been cleared. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Clear the text field, set Value to default(T) and Text to null + + + + + + Sets the input text from outside programmatically + + + + + + + Provide a masking object. Built-in masks are PatternMask, MultiMask, RegexMask and BlockMask + Note: when Mask is set, TextField will ignore some properties such as Lines, Pattern or HideSpinButtons, OnKeyDown and OnKeyUp, etc. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + The start list's collection. + + + + + Fires when start collection changed. + + + + + The end list's collection. + + + + + Fires when end collection changed. + + + + + + + + + + Fires before transfer process start. Useful to backup items or prevent transfer. + + + + + Fires when start collection changed. Takes a "StartToEnd" direction bool parameter. + + + + + Fires when start collection changed. Takes a "StartToEnd" direction bool parameter. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + If true, double click transfers the item. Doesn't have any effect on multitransfer is true. + + + + + Allows the transfer multiple items at once. + + + + + + + + + + Select all types. If button is selected, 2 transfer all button appears. If Selectall item is selected, a list item appears. + + + + + The color of lists and buttons. Default is primary. + + + + + The variant of buttons. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + MudText component with M3 specification. + + + + + + + + + + + + + + + + + + + + Set the text-align on the component. + + + + + Set the text-align on the component. + + + + + Child content of component. + + + + + Set the text-align on the component. + + + + + The color of the component. It supports the theme colors. + + + + + If true, the text will have a bottom margin. + + + + + If true, Sets display inline + + + + + + + + + + Typography definitions + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + The delimiter string that seperates hour, minute, second and millisecond values. + + + + + If true, components shows days. Default is false. + + + + + If true, components shows hours. Default is true. + + + + + If true, components shows minutes. Default is true. + + + + + If true, components shows seconds. Default is true. + + + + + If true, components shows milliseconds. Default is true. + + + + + If true, components shows MudWheels. + + + + + If true, components shows MudWheels. + + + + + If true, components shows MudWheels. + + + + + Fires when value changed. + + + + + Fires when countdown reach to 0. + + + + + Determines the wheels are dense or not. + + + + + The color of various parts of the component. + + + + + The records that builds with Lap method or created manually. + + + + + Fires when new lap record added. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Determines how many items will show before and after the middle one. + + + + + The minimum swipe delta to change wheel value on touch devices. Default is 40. + + + + + + + + + + + + + + + + + + + + Color for middle item and borders + + + + + Defines how values are displayed in the drop-down list + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Adds ScrollManagerExtended as a transient instance. + + IServiceCollection + + + + Adds CssManager as a transient instance. + + IServiceCollection + + + + Adds TeleportManager as a transient instance. + + + + + + + Adds common services required by MudBlazor components + + IServiceCollection + Defines options for all MudBlazor services. + Continues the IServiceCollection chain. + + + + Adds common services required by MudBlazor components + + IServiceCollection + Defines options for all MudBlazor services. + Continues the IServiceCollection chain. + + + + Inject with the AddMudBlazorScrollServices extension + + + + + + + + + + + + + + + + + + + + + + + + Scrolls to the coordinates of the element. + + id of element + x coordinate + y coordinate + smooth or auto + + + + + Scrolls the first instance of the selector into view. + + + + + + + + Scrolls to the top of the element. + + id of element + smooth or auto + + + + + Scroll to the bottom of the element (or if not found to the bottom of the page). + + id of element of null to scroll to page bottom + smooth or auto + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Scroll to an url fragment + + The id of the selector that is going to be scrolled to + smooth or auto + + + + + + + + + + + + + Smooth: scrolls in a smooth fashion; + Auto: is immediate + + + + + Localized strings for CSV Mapper. + + + + + Localized strings for DateWheelPicker. + + + + + Class for Google Font names. + + + + + Google latin font list. + + + + + Generates CSS animation keyframes for MudAnimate. + + + + + + + + + + + + + + + + + + + + + + + + + Built-in keyframe values. + + + + + Holds value for MudWatch. + + + + + + + + + + Difference between previous timespan. + + + + + Manage CSS properties with C#. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Localized strings for MudSignaturePad + + + + + Localized strings for MudStepper + + + + + Supports id and class selection. Use "#idName" for id selectors (ex. ) or ".idName" for class selectors (ex. ). Leave it null or empty to effect all scrollbars. + + + + + The predefined animation type that runs. + + + + + The primary value depends on animation type. + + + + + The secondary value that sets the start value of animation. + + + + + Sets how long the animation will last. + + + + + The time before animation starts. + + + + + If true, amination runs when hover. + + + + + If true, amination runs contuniously. + + + + + If true, animation pauses. Set if false again to continue where it pauses. + + + + + How many times the animation repeats in one run. If the value is 0, the animation doesn't run. + + + + + The speed curve of the animation. + + + + + The running line of the animation. + + + + + Determines the styles which the element has. Forwards for last keyframe, backwards for first keyframe. + + + + + Animation keyframe with plain string. For advanced users. + + + + + The refresh delay in miliseconds. Higher value means stability between multiple refreshes. + + + + + Supports id and class selection. Use "#idName" for id selectors (ex. ) or ".idName" for class selectors (ex. ). Leave it null or empty to effect all. + + + + + If true, selected colors applies even the input does not have focus. Default is false. + + + + + The base color that affects text, label and borders. Can be overrided with other color parameters. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)" + + + + + The text color. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)" + + + + + The label style. Add !important if style doesn't applied. + + + + + The label text color. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)" + + + + + The label background color. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)" + + + + + The border color. Supports hex values "#ffffff", valid keywords "blue" and CSS variables "var(--mud-palette-primary)" + + + + + Supports id and class selection. Use "#idName" for id selectors (ex. ) or ".idName" for class selectors (ex. ). Leave it null or empty to effect all scrollbars. + + + + + Firefox ignores the other parameters. It can be only done with this parameter. + + + + + Custom thumb styles for scrollbar. Must end with ";" character for each style. Doesn't support by firefox (see FirefoxStyle). + + + + + Custom track styles for scrollbar. Must end with ";" character for each style. Doesn't support by firefox (see FirefoxStyle). + + + + + Width of both scrollbar thumb and track. Doesn't support by firefox (see FirefoxStyle). + + + + + Width of both scrollbar thumb and track on hover. Doesn't support by firefox (see FirefoxStyle). + + + + + Border radius for scrollbar thumb. Doesn't support by firefox (see FirefoxStyle). + + + + + Color for scrollbar thumb. Supports hex values, color names and MudTheme color keywords (ex. "primary", "secondary"). Doesn't support by firefox (see FirefoxStyle). + + + + + Scrollbar's color when container hovered. Supports hex values, color names and MudTheme color keywords (ex. "primary", "secondary"). Doesn't support by firefox (see FirefoxStyle). + + + + + Hover color for scrollbar thumb on hover. Supports hex values, color names and MudTheme color keywords (ex. "primary", "secondary"). Doesn't support by firefox (see FirefoxStyle). + + + + + Track color for scrollbar track. Supports hex values, color names and MudTheme color keywords (ex. "primary", "secondary"). Doesn't support by firefox (see FirefoxStyle). + + + + + Hide the scrollbar with securing scroll functionality. Also supported by firefox. + + + + diff --git a/CodeBeam.MudBlazor.Extensions.Docs/CodeBeam.MudBlazor.Extensions.Docs.csproj b/CodeBeam.MudBlazor.Extensions.Docs/CodeBeam.MudBlazor.Extensions.Docs.csproj index f01fd156..103365b5 100644 --- a/CodeBeam.MudBlazor.Extensions.Docs/CodeBeam.MudBlazor.Extensions.Docs.csproj +++ b/CodeBeam.MudBlazor.Extensions.Docs/CodeBeam.MudBlazor.Extensions.Docs.csproj @@ -21,6 +21,8 @@ + + true diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Components/DocsApiTable.razor b/CodeBeam.MudBlazor.Extensions.Docs/Components/DocsApiTable.razor index 0873124c..4d9ff7b8 100644 --- a/CodeBeam.MudBlazor.Extensions.Docs/Components/DocsApiTable.razor +++ b/CodeBeam.MudBlazor.Extensions.Docs/Components/DocsApiTable.razor @@ -1,22 +1,28 @@ @namespace MudExtensions.Docs.Components @using System.Text.RegularExpressions +@using System.Reflection +@inject HttpClient Http Parameters - x.Name).ToList())" Elevation="0" Hover="true" Dense="true"> + Name Type Default + Description @context.Name - @context.PropertyType.Name.Replace("`1", "") - - @if (true) - { - object? instance = Activator.CreateInstance(Type ?? typeof(string)); - @(context.GetValue(instance)?.ToString() ?? "null") + @DocUtilities.GetFriendlyTypeName(context.PropertyType) + + @{ + object? instance = TryCreateInstance(SafeComponentType); + string? value = instance != null ? context.GetValue(instance)?.ToString() : "null"; } + @value + + + @(_docReader?.GetSummary(context) ?? "—") @@ -25,14 +31,16 @@ Events - x.Name).ToList())" Elevation="0" Hover="true" Dense="true"> + Name Type + Description @context.Name - @context.PropertyType.Name.Replace("`1", "") + @DocUtilities.GetFriendlyTypeName(context.PropertyType) + @(_docReader?.GetSummary(context) ?? "—") No specific items. @@ -40,20 +48,23 @@ Methods - x.Name).ToList())" Elevation="0" Hover="true" Dense="true"> + Name - Type + Return Type + Description @context.Name - @context.ReturnType.Name.Replace("`1", "") + @DocUtilities.GetFriendlyTypeName(context.ReturnType) + @(_docReader?.GetSummary(context) ?? "—") No specific items. + @if (Component?.RelatedComponents != null) { foreach (var comp in Component.RelatedComponents) @@ -64,13 +75,71 @@ } } -@code{ - [Parameter] - public Type? Type { get; set; } +@code { + [Parameter] public Type? Type { get; set; } + [Parameter] public MudExtensionComponentInfo? Component { get; set; } + + private SimpleXmlDocReader? _docReader; + + private List _excludedMethods = new() + { + "SetParametersAsync", "Equals", "GetHashCode", "GetType", "ToString" + }; + + private Type? SafeComponentType => + (Type?.IsGenericTypeDefinition == true) + ? Type?.MakeGenericType(Type.GetGenericArguments().Select(_ => typeof(string)).ToArray()) + : Type; + + private IEnumerable SafeProperties => + SafeComponentType?.GetProperties() + .Where(x => !x.PropertyType.Name.Contains("EventCallback") && + x.Name != "FieldId" && x.Name != "UserAttributes") + .OrderBy(x => x.Name) ?? Enumerable.Empty(); - [Parameter] - public MudExtensionComponentInfo? Component { get; set; } + private IEnumerable SafeEventProperties => + SafeComponentType?.GetProperties() + .Where(x => x.PropertyType.Name.Contains("EventCallback")) + .OrderBy(x => x.Name) ?? Enumerable.Empty(); - List _excludedMethods = new() - { "SetParametersAsync", "Equals", "GetHashCode", "GetType", "ToString"}; + private IEnumerable SafeMethods => + SafeComponentType?.GetMethods() + .Where(x => !_excludedMethods.Contains(x.Name) && + Regex.IsMatch(x.Name[0].ToString(), "[A-Z]")) + .OrderBy(x => x.Name) ?? Enumerable.Empty(); + + private object? TryCreateInstance(Type? type) + { + try + { + return (type?.ContainsGenericParameters == false) + ? Activator.CreateInstance(type) + : null; + } + catch + { + return null; + } + } + + protected override async Task OnInitializedAsync() + { + string? xmlContent = null; + + if (OperatingSystem.IsBrowser()) + { + xmlContent = await Http.GetStringAsync("CodeBeam.MudBlazor.Extensions.xml"); + } + else + { + var xmlPath = Path.Combine(AppContext.BaseDirectory, "CodeBeam.MudBlazor.Extensions.xml"); + if (File.Exists(xmlPath)) + xmlContent = await File.ReadAllTextAsync(xmlPath); + } + + if (!string.IsNullOrEmpty(xmlContent)) + { + _docReader = new SimpleXmlDocReader(xmlContent); + } + } } diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs b/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs index e726a47d..22d479a9 100644 --- a/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs +++ b/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs @@ -8,36 +8,36 @@ public class MudExtensionsDocsService { new MudExtensionComponentInfo() {Title = "MudAnimate", Component = typeof(MudAnimate), Usage = ComponentUsage.Utility, IsUnique = true, Description = "A revolutionary next generation animate component."}, new MudExtensionComponentInfo() {Title = "MudBarcode", Component = typeof(MudBarcode), Usage = ComponentUsage.Display, IsUnique = true, Description = "A QR and barcode viewer with defined value."}, - new MudExtensionComponentInfo() {Title = "MudChipField", Component = typeof(MudChipField), Usage = ComponentUsage.Input, IsUnique = true, Description = "A textfield which transform a text to a chip when pressed pre-defined key."}, - new MudExtensionComponentInfo() {Title = "MudCodeInput", Component = typeof(MudCodeInput), Usage = ComponentUsage.Input, IsUnique = true, Description = "A group of textfields that each one contains a char."}, + new MudExtensionComponentInfo() {Title = "MudChipField", Component = typeof(MudChipField<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A textfield which transform a text to a chip when pressed pre-defined key."}, + new MudExtensionComponentInfo() {Title = "MudCodeInput", Component = typeof(MudCodeInput<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A group of textfields that each one contains a char."}, new MudExtensionComponentInfo() {Title = "MudColorProvider", Component = typeof(MudColorProvider), Usage = ComponentUsage.Utility, IsUnique = true, Description = "An extension for primary, secondary and tertiary colors to support Material 3.", IsMaterial3 = true}, - new MudExtensionComponentInfo() {Title = "MudComboBox", Component = typeof(MudComboBox), RelatedComponents = new List() {typeof(MudComboBoxItem)}, Usage = ComponentUsage.Input, IsUnique = true, Description = "Unites MudSelect and MudAutocomplete features."}, + new MudExtensionComponentInfo() {Title = "MudComboBox", Component = typeof(MudComboBox<>), RelatedComponents = new List() {typeof(MudComboBoxItem)}, Usage = ComponentUsage.Input, IsUnique = true, Description = "Unites MudSelect and MudAutocomplete features."}, new MudExtensionComponentInfo() {Title = "MudCssManager", Component = typeof(MudCssManager), Usage = ComponentUsage.Utility, IsUnique = true, IsUtility = true, Description = "Directly and dynamically get or set component's css property."}, new MudExtensionComponentInfo() {Title = "MudCsvMapper", Component = typeof(MudCsvMapper), Usage = ComponentUsage.Display, IsUnique = true, Description = "A .csv file uploader that matches the .csv file headers to supplied / expected headers."}, new MudExtensionComponentInfo() {Title = "MudDateWheelPicker", Component = typeof(MudDateWheelPicker), Usage = ComponentUsage.Input, IsUnique = true, Description = "A date time picker with MudWheels."}, new MudExtensionComponentInfo() {Title = "MudGallery", Component = typeof(MudGallery), Usage = ComponentUsage.Display, IsUnique = true, Description = "Mobile friendly image gallery component."}, new MudExtensionComponentInfo() {Title = "MudInputStyler", Component = typeof(MudInputStyler), Usage = ComponentUsage.Utility, IsUnique = true, Description = "Applies colors or other CSS styles easily for mud inputs like MudTextField and MudSelect."}, new MudExtensionComponentInfo() {Title = "MudJsonTreeView", Component = typeof(MudJsonTreeView), Usage = ComponentUsage.Display, RelatedComponents = new List() {typeof(MudJsonTreeViewNode)}, IsUnique = true, Description = "A treeview for display json data."}, - new MudExtensionComponentInfo() {Title = "MudListExtended", Component = typeof(MudListExtended), Usage = ComponentUsage.Input, RelatedComponents = new List() {typeof(MudListItemExtended)}, IsUnique = false, Description = "The extended MudList component with richer features."}, + new MudExtensionComponentInfo() {Title = "MudListExtended", Component = typeof(MudListExtended<>), Usage = ComponentUsage.Input, RelatedComponents = new List() {typeof(MudListItemExtended)}, IsUnique = false, Description = "The extended MudList component with richer features."}, new MudExtensionComponentInfo() {Title = "MudLoading", Component = typeof(MudLoading), Usage = ComponentUsage.Display, IsUnique = true, Description = "Loading container for a whole page or a specific section."}, new MudExtensionComponentInfo() {Title = "MudLoadingButton", Component = typeof(MudLoadingButton), Usage = ComponentUsage.Button, IsUnique = true, Description = "A classic MudButton with loading improvements."}, new MudExtensionComponentInfo() {Title = "MudPage", Component = typeof(MudPage), Usage = ComponentUsage.Layout, RelatedComponents = new List() {typeof(MudSection)}, IsUnique = true, Description = "A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan."}, - new MudExtensionComponentInfo() {Title = "MudPasswordField", Component = typeof(MudPasswordField), Usage = ComponentUsage.Input, IsUnique = true, Description = "A specialized textfield that designed for working easily with passwords."}, + new MudExtensionComponentInfo() {Title = "MudPasswordField", Component = typeof(MudPasswordField<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A specialized textfield that designed for working easily with passwords."}, new MudExtensionComponentInfo() {Title = "MudPopup", Component = typeof(MudPopup), Usage = ComponentUsage.Display, IsUnique = true, Description = "A mobile friendly multi-functional popup content."}, new MudExtensionComponentInfo() {Title = "MudRangeSlider", Component = typeof(MudRangeSlider), Usage = ComponentUsage.Input, IsUnique = true, Description = "A slider with range capabilities, set upper and lower values."}, new MudExtensionComponentInfo() {Title = "MudScrollbar", Component = typeof(MudScrollbar), Usage = ComponentUsage.Utility, IsUnique = true, Description = "Customize all or defined scrollbars."}, - new MudExtensionComponentInfo() {Title = "MudSelectExtended", Component = typeof(MudSelectExtended), Usage = ComponentUsage.Input, RelatedComponents = new List() {typeof(MudSelectItemExtended)}, IsUnique = false, Description = "The extended MudSelect component with richer features."}, + new MudExtensionComponentInfo() {Title = "MudSelectExtended", Component = typeof(MudSelectExtended<>), Usage = ComponentUsage.Input, RelatedComponents = new List() {typeof(MudSelectItemExtended)}, IsUnique = false, Description = "The extended MudSelect component with richer features."}, new MudExtensionComponentInfo() {Title = "MudSignaturePad", Component = typeof(MudSignaturePad), Usage = ComponentUsage.Display, IsUnique = true, Description = "Draw and export a signature on a canvas."}, new MudExtensionComponentInfo() {Title = "MudSpeedDial", Component = typeof(MudSpeedDial), Usage = ComponentUsage.Button, IsUnique = true, Description = "One button that stack other buttons in a popover."}, new MudExtensionComponentInfo() {Title = "MudSplitter", Component = typeof(MudSplitter), Usage = ComponentUsage.Layout, IsUnique = true, Description = "A resizeable content splitter."}, new MudExtensionComponentInfo() {Title = "MudStepperExtended", Component = typeof(MudStepperExtended), Usage = ComponentUsage.Display, RelatedComponents = new List() {typeof(MudStepExtended)}, IsUnique = false, Description = "A wizard-like steps to control the flow with rich options."}, new MudExtensionComponentInfo() {Title = "MudSwitchM3", Component = typeof(MudSwitchM3), Usage = ComponentUsage.Input, IsUnique = true, IsMaterial3 = true, Description = "Material 3 switch component that has all MudSwitch features."}, new MudExtensionComponentInfo() {Title = "MudTeleport", Component = typeof(MudTeleport), Usage = ComponentUsage.Layout, IsUnique = true, Description = "Teleport the content to the specified parent and redesign the DOM hierarchy."}, - new MudExtensionComponentInfo() {Title = "MudTextFieldExtended", Component = typeof(MudTextFieldExtended), Usage = ComponentUsage.Input, IsUnique = false, Description = "The extended MudTextField component with richer features."}, + new MudExtensionComponentInfo() {Title = "MudTextFieldExtended", Component = typeof(MudTextFieldExtended<>), Usage = ComponentUsage.Input, IsUnique = false, Description = "The extended MudTextField component with richer features."}, new MudExtensionComponentInfo() {Title = "MudTextM3", Component = typeof(MudTextM3), Usage = ComponentUsage.Display, IsUnique = true, IsMaterial3 = true, Description = "Material 3 typography."}, - new MudExtensionComponentInfo() {Title = "MudTransferList", Component = typeof(MudTransferList), Usage = ComponentUsage.Input, IsUnique = true, Description = "A component that has 2 lists that transfer items to another."}, + new MudExtensionComponentInfo() {Title = "MudTransferList", Component = typeof(MudTransferList<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A component that has 2 lists that transfer items to another."}, new MudExtensionComponentInfo() {Title = "MudWatch", Component = typeof(MudWatch), Usage = ComponentUsage.Display, IsUnique = true, Description = "A performance optimized watch to show current time or show stopwatch or countdown."}, - new MudExtensionComponentInfo() {Title = "MudWheel", Component = typeof(MudWheel), Usage = ComponentUsage.Input, IsUnique = true, Description = "Smoothly changes values in a wheel within defined ItemCollection."}, + new MudExtensionComponentInfo() {Title = "MudWheel", Component = typeof(MudWheel<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "Smoothly changes values in a wheel within defined ItemCollection."}, }; public List GetAllComponentInfo() diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Services/SimpleXmlDocReader.cs b/CodeBeam.MudBlazor.Extensions.Docs/Services/SimpleXmlDocReader.cs new file mode 100644 index 00000000..0435c5fa --- /dev/null +++ b/CodeBeam.MudBlazor.Extensions.Docs/Services/SimpleXmlDocReader.cs @@ -0,0 +1,110 @@ +using System.Reflection; +using System.Xml.Linq; + +namespace MudExtensions.Docs.Services +{ + public class SimpleXmlDocReader + { + private readonly Dictionary _summaries; + + public SimpleXmlDocReader(string xmlContent) + { + var doc = XDocument.Parse(xmlContent); + + _summaries = doc.Descendants("member") + .Where(m => m.Attribute("name") != null) + .ToDictionary( + m => m.Attribute("name")!.Value, + m => CleanSummaryText(m.Element("summary")?.Value) + ); + } + + private string CleanSummaryText(string? summary) + { + if (string.IsNullOrWhiteSpace(summary)) + return ""; + + return string.Join(" ", summary.Trim().Split(new[] { '\r', '\n' }, StringSplitOptions.RemoveEmptyEntries).Select(s => s.Trim())); + } + + private static string GetParameterTypeName(Type type) + { + if (type.IsGenericType) + { + var mainType = type.GetGenericTypeDefinition().FullName; + var genericArgs = type.GetGenericArguments().Select(GetParameterTypeName); + // Generic format: Namespace.Type`1[System.String] + // XML doc: Namespace.Type{System.String} + mainType = mainType?.Split('`')[0] ?? ""; + return $"{mainType}{{{string.Join(",", genericArgs)}}}"; + } + + // Array tipi için [] + if (type.IsArray) + { + return $"{GetParameterTypeName(type.GetElementType()!)}[]"; + } + + return type.FullName ?? type.Name; + } + + public string? GetSummary(MemberInfo member) + { + var memberName = GetMemberName(member); + return _summaries.TryGetValue(memberName, out var summary) ? summary : null; + } + + public string? GetSummary(string memberName) + { + return _summaries.TryGetValue(memberName, out var var) ? var : null; + } + + public static string GetMemberName(MemberInfo member) + { + return member.MemberType switch + { + MemberTypes.TypeInfo or MemberTypes.NestedType => $"T:{FormatTypeName((Type)member)}", + MemberTypes.Property => $"P:{FormatTypeName(member.DeclaringType!)}.{member.Name}", + MemberTypes.Method => $"M:{FormatTypeName(member.DeclaringType!)}.{member.Name}{FormatMethodParameters((MethodInfo)member)}", + _ => member.Name + }; + } + + private static string FormatTypeName(Type type) + { + if (type.IsGenericType) + { + var baseName = type.FullName?.Split('`')[0]; // Remove `1, `2 etc. + var argCount = type.GetGenericArguments().Length; + return $"{baseName}`{argCount}"; + } + + return type.FullName!; + } + + private static string FormatMethodParameters(MethodInfo method) + { + var parameters = method.GetParameters(); + if (parameters.Length == 0) return ""; + + var formatted = string.Join(",", parameters.Select(p => FormatParameterType(p.ParameterType))); + return $"({formatted})"; + } + + private static string FormatParameterType(Type type) + { + if (type.IsGenericType) + { + var genericTypeName = type.GetGenericTypeDefinition().FullName!.Split('`')[0]; + var args = string.Join(",", type.GetGenericArguments().Select(FormatParameterType)); + return $"{genericTypeName}{{{args}}}"; + } + + if (type.IsArray) + return $"{FormatParameterType(type.GetElementType()!)}[]"; + + return type.FullName!; + } + + } +} diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Utilities/DocUtilities.cs b/CodeBeam.MudBlazor.Extensions.Docs/Utilities/DocUtilities.cs new file mode 100644 index 00000000..baa8ebf1 --- /dev/null +++ b/CodeBeam.MudBlazor.Extensions.Docs/Utilities/DocUtilities.cs @@ -0,0 +1,45 @@ + +namespace MudExtensions.Docs +{ + public static class DocUtilities + { + public static string GetFriendlyTypeName(Type type) + { + if (type.IsGenericType) + { + var genericTypeName = type.GetGenericTypeDefinition().Name; + var backtickIndex = genericTypeName.IndexOf('`'); + if (backtickIndex > 0) + genericTypeName = genericTypeName.Substring(0, backtickIndex); + + var genericArgs = type.GetGenericArguments() + .Select(GetFriendlyTypeName) + .ToArray(); + + return $"{genericTypeName}<{string.Join(", ", genericArgs)}>"; + } + + if (type.IsArray) + { + return $"{GetFriendlyTypeName(type.GetElementType()!)}[]"; + } + + return type.Name switch + { + "String" => "string", + "Int32" => "int", + "Boolean" => "bool", + "Object" => "object", + "Void" => "void", + "Decimal" => "decimal", + "Double" => "double", + "Single" => "float", + "Int64" => "long", + "Int16" => "short", + "Byte" => "byte", + _ => type.Name + }; + } + + } +}