Image
An image is a graphic representation of something (e.g photo or illustration). The backgrounds have been added to some of examples in order to help visualize empty space in the image frame.
Usage
Basic
![Basic BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![Disabled BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
Width & Height
![BitImage with width](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![BitImage with height](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![BitImage with width and height](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
Style & Class
![Styled BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![Styled BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![Styled BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![Styled BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
Visibility
Visible: [
]
![Visible BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
Hidden: [
]
![Hidden BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
Collapsed: [
]
ImageFit
![ImageFit: None BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![ImageFit: Center BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![ImageFit: Contain BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![ImageFit: Cover BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![ImageFit: CenterContain BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![ImageFit: CenterCover BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
CoverStyle
ImageFit: CenterCover
![Landscape BitImage with ImageFit: CenterCover](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![Portrait BitImage with ImageFit: CenterCover](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
ImageFit: CenterContain
![Landscape BitImage with ImageFit: CenterContain](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
![Portrait BitImage with ImageFit: CenterContain](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
MaximizeFrame
![Maximized BitImage](_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png)
Implementation
BitImage parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
Alt | string? | null | Specifies an alternate text for the image. |
Classes | BitImageClassStyles? | null | Custom CSS classes for different parts of the BitImage. |
CoverStyle | BitImageCoverStyle | null | Specifies the cover style to be used for this image. |
Height | string? | null | The image height value. |
ImageAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the image's parameters |
ImageFit | BitImageFit? | null | Used to determine how the image is scaled and cropped to fit the frame. |
Loading | string? | null | Allows for browser-level image loading (lazy or eager). |
MaximizeFrame | bool | false | If true, the image frame will expand to fill its parent container. |
OnClick | EventCallback<MouseEventArgs> | null | Callback for when the image is clicked. |
OnLoadingStateChange | EventCallback<BitImageLoadingState> | null | Optional callback method for when the image load state has changed. |
ShouldFadeIn | bool | true | If true, fades the image in when loaded. |
ShouldStartVisible | bool | true | If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until it is successfully loaded. |
Src | string? | null | Specifies the src of the image. |
Styles | BitImageClassStyles? | null | Custom CSS styles for different parts of the BitImage. |
Title | string? | null | The title to show when the mouse is placed on the image. |
Width | string? | null | The image width value. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
Class | string? | null | Custom CSS class for the root element of the component. |
Dir | BitDir? | null | Determines the component direction. |
HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
IsEnabled | bool | true | Whether or not the component is enabled. |
Style | string? | null | Custom CSS style for the root element of the component. |
Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
RootElement | ElementReference | The ElementReference of the root element. |
BitImageClassStyles properties
Name |
Type |
Default value |
Description |
---|---|---|---|
Root | string? | null | Custom CSS classes/styles for the root element of the image. |
Image | string? | null | Custom CSS classes/styles for the image element. |
BitImageFit enum
Name |
Value |
Description |
---|---|---|
None | 0 | Neither the image nor the frame are scaled. |
Center | 1 | The image is not scaled. The image is centered and cropped within the content box. |
CenterContain | 2 | The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. |
CenterCover | 3 | The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. |
Contain | 4 | The image is scaled to maintain its aspect ratio while being fully contained within the frame. |
Cover | 4 | The image is scaled to maintain its aspect ratio while filling the frame. |
BitImageCoverStyle enum
Name |
Value |
Description |
---|---|---|
Landscape | 0 | The image will be shown at 100% height of container and the width will be scaled accordingly. |
Portrait | 1 | The image will be shown at 100% width of container and the height will be scaled accordingly. |
BitImageLoadingState enum
Name |
Value |
Description |
---|---|---|
NotLoaded | 0 | The image has not yet been loaded, and there is no error yet. |
Loaded | 1 | The image has been loaded successfully. |
Error | 2 | An error has been encountered while loading the image. |
BitVisibility enum
Name |
Value |
Description |
---|---|---|
Visible | 0 | The content of the component is visible. |
Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
Name |
Value |
Description |
---|---|---|
Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |