Image Container
Usage
This constructor is mainly used with .svg image file types, to create a more unified look and feel when displaying those formats.
This constructor inverts colors in dark mode, so any other image inserted will have its colors inverted. Works best with white/black colors.
Presentation
This is the display format for the ShImgContainer constructor, designed to showcase what are its capabilities.
Example Basic
This is an example caption for the image.
This is how it is constructed
::ShImgContainer
---
urlImage: /images/lwm2m/overall_architecture.drawio.svg
altImage: Sample Image
figcaption: |
This is an example caption for the image.
---
::
Props
These are the properties and attributes associated to the ShImgContainer constructor:
Properties and Attributes Description
The constructor creates a display format showcasing an image and an optional caption. Below is a detailed description of the properties and attributes used in the ShImgContainer constructor.
| Property | Attribute | Deafult | Description |
|---|---|---|---|
ui |
n/a | n/a | The ui property in the ShImgContainer constructor is a comprehensive configuration object that allows for the customization of various styling aspects of the image container component. Each attribute within the ui property targets a specific part of the image display, providing detailed control over its appearance and layout. Below is a detailed description of each attribute within the ui property: |
wrapper |
config.wrapper |
Defines the overall styling for the container that holds both the image and its caption. | |
inner |
config.inner |
Styles applied to the inner section that holds the image. | |
base |
config.base |
A placeholder for additional base styles that can be applied to the image component. | |
image |
config.image |
Styles applied to the image itself, including size, alignment, and additional effects like borders or shadows. | |
figcaption |
n/a | n/a | Optional caption text displayed below the image. This includes font size, color, and alignment settings. |
urlImage |
n/a | n/a | The source URL of the image to be displayed. |
altImage |
n/a | n/a | Alternative text for the image, used for accessibility and in case the image fails to load. |
description |
n/a | n/a | Help content for developers or content writers, does not render on the website. |
Example Usage
Advanced Settings
An example with customized ui attributes for enhanced display:
This is a custom caption with styled text.
This is an example with customized ui attributes for enhanced display:
::ShImgContainer
---
ui:
wrapper: shadow-lg bg-purple-300 dark:bg-purple-900 p-4 rounded-xl
image: rounded-lg border border-gray-300
figcaption: text-lg text-gray-600 italic
urlImage: /images/lwm2m/overall_architecture.drawio.svg
altImage: Custom Image
figcaption: |
This is a custom caption with styled text.
---
::
Config
These style properties can be modified via ui and are stored in the ShImgContainer.ts file:
export default{
wrapper: 'flex-row',
inner: 'bg-white dark:bg-black pt-3 pb-3 mx-32 rounded-lg',
base: 'dark:invert flex flex-col justify-center items-center m-4',
image: '',
figcaption: 'flex justify-center italic text-neutral-600 dark:text-neutral-400',
}
Class Descriptions
These represent the class values utilized in the ShImgContainer constructor. These values are customizable and can be strengthened or overridden through the ui properties' attributes.
wrapper
- Value:
"flex-row" - Description: Defines the flex direction for the container's children, arranging them in a row.
inner
- Value:
"bg-white dark:bg-black pt-3 pb-3 mx-32 rounded-lg" - Description: Provides the inner container with background color support for light and dark modes, top and bottom padding, side margins, and rounded corners.
base
- Value:
"dark:invert flex flex-col justify-center items-center m-4" - Description: Acts as a relative container with inverted colors in dark mode, flex column layout, centered content, and margin.
image
- Value:
"" - Description: No default styles are applied; this class is left intentionally blank for custom image-specific styling.
figcaption
- Value:
"flex justify-center italic text-neutral-600 dark:text-neutral-400" - Description: Applies a centered flex layout with italic text style and neutral text color, adapting for light and dark modes.
These style properties ensure that the ShImgContainer component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.