diff --git a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
index 4f4f3e3..bd9e724 100644
--- a/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
+++ b/src/Connected.Components.Showcase/Pages/AlertShowcase.razor
@@ -5,37 +5,377 @@
-
- -
- Default Square
- Info Square
- Success Square
- Warning Square
- Error Square
-
- -
-
- Default Square
-
-
- Info Square
-
- Success Square
-
- Warning Square
-
- Error Square
-
- -
- Default Square
-
- Info Square
- Success Square
-
- Warning Square
-
- Error Square
-
-
+
+@code {
+ Theme MyCustomTheme = new Theme()
+ {
+ Palette = new Palette()
+ {
+ Error = "#ffd8e4",
+ ErrorContrastText = "#31111d",
+ //ErrorDarken = Colors.Green.Accent4,
+ },
+ LayoutProperties = new LayoutProperties()
+ {
+ DefaultBorderRadius = "1rem",
+ }
+ };
+}
+
+
+ Alert
+ An alert is used to notify the user about an important message without interrupting the ongoing task.
+
+
+
+
+ -
+ Simple alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+ -
+ Outlined alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+
+ -
+ Outlined alert
+ The reactor type is RBMK-1000
+ The reactor was fired up successfully
+ The reactor is running at optimum temperature
+ The reactor temperature exceeds the optimal range
+ Meltdown is imminent
+
+
+
+
+
+
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
+<Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
+<Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
+<Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
+<Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
+
+
+
+
+
+
+ Dense
+ Taking up too much space? Insert dense class in ClassList. It removes the vertical padding and lowers the horizontal.
+
+
+
+ -
+ Dense Default
+ Dense Info
+ Dense Success
+ Dense Warning
+ Dense Errorr
+
+ -
+ Dense Default
+ Dense Info
+ Dense Success
+ Dense Warning
+ Dense Error
+
+ -
+ Dense Default
+ Dense Info
+ Dense Success
+ Dense Warning
+ Dense Error
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+ <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+ <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+ <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+ <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 dense">Dense Errorr</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+
+ No Icons
+ You can disable the alert icons with the bool GlyphVisible set to false.
+
+
+ -
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+ -
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+ -
+ No Icon Default
+ No Icon Info
+ No Icon Success
+ No Icon Warning
+ No Icon Error
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
+ <Alert Severity="Severity.Info" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
+ <Alert Severity="Severity.Success" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
+ <Alert Severity="Severity.Warning" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
+ <Alert Severity="Severity.Error" GlyphVisible="false" ClassList="my-2">No Icon Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+
+ Rounded and Square
+ By default, the alert is set to rounded corners by your theme's
+ default value. If you need a square Alert but don't want to change the theme, insert class rounded-0 in
+ ClassList or change the default radius width classes rounded-sm, rounded-lg, rounded-xl.
+
+
+ -
+ Rounded-0 Default
+ Rounded Info
+ Rounded-sm Success
+ Rounded-lg Warning
+ Rounded-xl Error
+
+ -
+ Rounded-0 Default
+ Rounded Info
+ Rounded-sm Success
+ Rounded-lg Warning
+ Rounded-xl Error
+
+ -
+ Rounded-0 Default
+ Rounded Info
+ Rounded-sm Success
+ Rounded-lg Warning
+ Rounded-xl Error
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+ <Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+ <Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+ <Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+ <Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
+ <Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
+ <Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
+ <Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
+ <Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+
+
+ Elevation
+ The component also accepts the Elevation class set a scale from elevation-1 to elevation-24 in ClassList.
+
+
+ -
+ elevation-8
+
+ -
+ elevation-16
+
+ -
+ elevation-24
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-8">elevation-8 Default</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-16">elevation-16 Default</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-24">elevation-24 Default</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+ Content Alignment
+ Insert Utility class for the Alignment property in ClassList to define the content alignment - justify-center or justify-end
+
+
+ -
+ Default Alignment
+
+ -
+ Center Alignment
+
+ -
+ Right Alignment
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">Default Alignment</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 justify-center">Center Alignment</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 justify-end">Right Alignment</Alert>
+ </Item>
+</Grid>
+
+
+
+
+
+
+ Close Icon and Event
+ Set the CloseGlyphVisible property to True to display a Close icon.
+ CloseIconClicked provides the EventCallback when clicking on the Close icon of the alert
+
+
+ -
+ Time to leave. Please close me!
+
+ -
+ Time to leave. Please close me!
+
+ -
+ RTime to leave. Please close me!
+
+
+
+
+
+
+ <Grid>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Normal" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2">Time to leave. Please close me!</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Info" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-center">Time to leave. Please close me!</Alert>
+ </Item>
+ <Item md="4" xs="12">
+ <Alert Severity="Severity.Success" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-end">RTime to leave. Please close me!</Alert>
+ </Item>
+</Grid>
+