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
Width & Height
Style & Class
Visibility
Visible: [
]
Hidden: [
]
Collapsed: [
]
ImageFit
CoverStyle
ImageFit: CenterCover
ImageFit: CenterContain
MaximizeFrame
API
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. |
- On this page