Merge branch 'features/refactor' of https://git.tompit.com/Connected/Connected.Components into features/refactor
This commit is contained in:
stm
commit
366f2bae6c
26
nuget.config
26
nuget.config
@ -1,33 +1,19 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<configuration>
|
<configuration>
|
||||||
<config>
|
<config>
|
||||||
<!--
|
|
||||||
Used to specify the default location to expand packages.
|
|
||||||
See: nuget.exe help install
|
|
||||||
See: nuget.exe help update
|
|
||||||
|
|
||||||
In this example, %PACKAGEHOME% is an environment variable.
|
|
||||||
This syntax works on Windows/Mac/Linux
|
|
||||||
-->
|
|
||||||
<add key="repositoryPath" value="%PACKAGEHOME%/External" />
|
<add key="repositoryPath" value="%PACKAGEHOME%/External" />
|
||||||
</config>
|
</config>
|
||||||
|
|
||||||
<packageRestore>
|
<packageRestore>
|
||||||
<!-- Allow NuGet to download missing packages -->
|
|
||||||
<add key="enabled" value="True" />
|
<add key="enabled" value="True" />
|
||||||
|
|
||||||
<!-- Automatically check for missing packages during build in Visual Studio -->
|
|
||||||
<add key="automatic" value="True" />
|
<add key="automatic" value="True" />
|
||||||
</packageRestore>
|
</packageRestore>
|
||||||
|
|
||||||
<!--
|
|
||||||
Used to specify the default Sources for list, install and update.
|
|
||||||
See: nuget.exe help list
|
|
||||||
See: nuget.exe help install
|
|
||||||
See: nuget.exe help update
|
|
||||||
-->
|
|
||||||
<packageSources>
|
<packageSources>
|
||||||
<add key="Tom PIT Git - Connected" value="https://git.tompit.com/api/packages/Connected/nuget/index.json" />
|
<add key="Local repository" value="%LOCAL_NUGET%" />
|
||||||
|
<add key="TomPITGit" value="https://git.tompit.com/api/packages/Tom-PIT/nuget/index.json" />
|
||||||
|
<add key="ConnectedGit" value="https://git.tompit.com/api/packages/Connected/nuget/index.json" />
|
||||||
<add key="NuGet official package source" value="https://api.nuget.org/v3/index.json" />
|
<add key="NuGet official package source" value="https://api.nuget.org/v3/index.json" />
|
||||||
</packageSources>
|
</packageSources>
|
||||||
|
|
||||||
|
<disabledPackageSources />
|
||||||
</configuration>
|
</configuration>
|
||||||
@ -5,37 +5,377 @@
|
|||||||
<ThemeProvider></ThemeProvider>
|
<ThemeProvider></ThemeProvider>
|
||||||
|
|
||||||
|
|
||||||
|
<ThemeProvider Theme="MyCustomTheme" />
|
||||||
|
@code {
|
||||||
|
Theme MyCustomTheme = new Theme()
|
||||||
|
{
|
||||||
|
Palette = new Palette()
|
||||||
|
{
|
||||||
|
Error = "#ffd8e4",
|
||||||
|
ErrorContrastText = "#31111d",
|
||||||
|
//ErrorDarken = Colors.Green.Accent4,
|
||||||
|
},
|
||||||
|
LayoutProperties = new LayoutProperties()
|
||||||
|
{
|
||||||
|
DefaultBorderRadius = "1rem",
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<Text Typo="Typo.h3" Align="Align.Left" GutterBottom="true">Alert</Text>
|
||||||
|
<Text Align="Align.Left" GutterBottom="true">An alert is used to notify the user about an important message without interrupting the ongoing task.</Text>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
<Grid>
|
<Grid>
|
||||||
<Item md="4" xs="12">
|
<Item xs="12">
|
||||||
<Alert Severity="Severity.Normal" ClassList="my-2 justify-end dense" CloseGlyphVisible="true">Default Square</Alert>
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Simple alert</Text>
|
||||||
<Alert Severity="Severity.Info" ClassList="my-2">Info Square</Alert>
|
<Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
|
||||||
<Alert Severity="Severity.Success" ClassList="my-2">Success Square</Alert>
|
<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
|
||||||
<Alert Severity="Severity.Warning" ClassList="my-2">Warning Square</Alert>
|
<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
|
||||||
<Alert Severity="Severity.Error" ClassList="my-2">Error Square</Alert>
|
<Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
|
||||||
</Item>
|
<Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
|
||||||
<Item md="4" xs="12">
|
|
||||||
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" CloseGlyphVisible="true"
|
|
||||||
ClassList="my-2 justify-end elevation-1">
|
|
||||||
Default Square
|
|
||||||
</Alert>
|
|
||||||
<Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true"
|
|
||||||
ClassList="my-2 rounded-xl justify-center">
|
|
||||||
Info Square
|
|
||||||
</Alert>
|
|
||||||
<Alert Severity="Severity.Success" Variant="Variant.Outlined" ClassList="my-2">Success Square
|
|
||||||
</Alert>
|
|
||||||
<Alert Severity="Severity.Warning" Variant="Variant.Outlined" ClassList="my-2">Warning Square
|
|
||||||
</Alert>
|
|
||||||
<Alert Severity="Severity.Error" Variant="Variant.Outlined" ClassList="my-2">Error Square</Alert>
|
|
||||||
</Item>
|
|
||||||
<Item md="4" xs="12">
|
|
||||||
<Alert Severity="Severity.Normal" Variant="Variant.Filled" ClassList="mb-2 mt-3">Default Square
|
|
||||||
</Alert>
|
|
||||||
<Alert Severity="Severity.Info" Variant="Variant.Filled" ClassList="my-2">Info Square</Alert>
|
|
||||||
<Alert Severity="Severity.Success" Variant="Variant.Filled" ClassList="my-2">Success Square
|
|
||||||
</Alert>
|
|
||||||
<Alert Severity="Severity.Warning" Variant="Variant.Filled" ClassList="my-2">Warning Square
|
|
||||||
</Alert>
|
|
||||||
<Alert Severity="Severity.Error" Variant="Variant.Filled" ClassList="my-2">Error Square</Alert>
|
|
||||||
</Item>
|
</Item>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
|
<Grid>
|
||||||
|
<Item xs="12">
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Outlined alert</Text>
|
||||||
|
<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>
|
||||||
|
</Item>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: 1rem;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
|
<Grid>
|
||||||
|
<Item xs="12">
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Outlined alert</Text>
|
||||||
|
<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>
|
||||||
|
</Item>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
|
<div>
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Dense</Text>
|
||||||
|
<Text Align="Align.Left" GutterBottom="true">Taking up too much space? Insert dense class in ClassList. It removes the vertical padding and lowers the horizontal.
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Errorr<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Error<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 dense"</span>></span>Dense Error<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
|
<div>
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">No Icons</Text>
|
||||||
|
<Text Align="Align.Left" GutterBottom="true">You can disable the alert icons with the bool GlyphVisible set to false.</Text>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 "</span>></span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 "</span>></span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 "</span>></span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 "</span>></span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 "</span>></span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 "</span>></span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"false"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 "</span>></span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
|
<div>
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Rounded and Square</Text>
|
||||||
|
<Text Align="Align.Left" GutterBottom="true">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.</Text>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-0"</span>></span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded"</span>></span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-sm"</span>></span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-lg"</span>></span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-xl"</span>></span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-0"</span>></span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded"</span>></span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-sm"</span>></span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-lg"</span>></span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Outlined"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-xl"</span>></span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-0"</span>></span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded"</span>></span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-sm"</span>></span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Warning"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-lg"</span>></span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Error"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Variant.Filled"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 rounded-xl"</span>></span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
|
<div>
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Elevation</Text>
|
||||||
|
<Text Align="Align.Left" GutterBottom="true">The component also accepts the Elevation class set a scale from elevation-1 to elevation-24 in ClassList.</Text>
|
||||||
|
</div>
|
||||||
|
<Grid>
|
||||||
|
<Item md="4" xs="12">
|
||||||
|
<Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-8">elevation-8</Alert>
|
||||||
|
</Item>
|
||||||
|
<Item md="4" xs="12">
|
||||||
|
<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 elevation-16">elevation-16</Alert>
|
||||||
|
</Item>
|
||||||
|
<Item md="4" xs="12">
|
||||||
|
<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 elevation-24">elevation-24</Alert>
|
||||||
|
</Item>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 elevation-8"</span>></span>elevation-8 Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 elevation-16"</span>></span>elevation-16 Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 elevation-24"</span>></span>elevation-24 Default<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
|
<div>
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Content Alignment</Text>
|
||||||
|
<Text Align="Align.Left" GutterBottom="true">Insert Utility class for the Alignment property in ClassList to define the content alignment - justify-center or justify-end</Text>
|
||||||
|
</div>
|
||||||
|
<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.Info" GlyphVisible="true" ClassList="my-2 justify-center">Center Alignment</Alert>
|
||||||
|
</Item>
|
||||||
|
<Item md="4" xs="12">
|
||||||
|
<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 justify-end">Right Alignment</Alert>
|
||||||
|
</Item>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>Default Alignment<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 justify-center"</span>></span>Center Alignment<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 justify-end"</span>></span>Right Alignment<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Container ClassList="mt-12">
|
||||||
|
<div>
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Close Icon and Event</Text>
|
||||||
|
<Text Align="Align.Left" GutterBottom="true">Set the CloseGlyphVisible property to True to display a Close icon.
|
||||||
|
CloseIconClicked provides the EventCallback when clicking on the Close icon of the alert</Text>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<pre>
|
||||||
|
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Normal"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2"</span>></span>Time to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Info"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 justify-center"</span>></span>Time to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"4"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"12"</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"><<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"Severity.Success"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"true"</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">"my-2 justify-end"</span>></span>RTime to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>></span>
|
||||||
|
<span style="color:rgb(0, 0, 128); font-weight:400;"></<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>></span></code></pre>
|
||||||
|
</Container>
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
"version": 1,
|
"version": 1,
|
||||||
"isRoot": true,
|
"isRoot": true,
|
||||||
"tools": {
|
"tools": {
|
||||||
"excubo.webcompiler": {
|
"connected.webcompiler": {
|
||||||
"version": "3.5.10",
|
"version": "1.0.7-prerelease.g67169cf2c5",
|
||||||
"commands": [
|
"commands": [
|
||||||
"webcompiler"
|
"webcompiler"
|
||||||
]
|
]
|
||||||
|
|||||||
@ -2,11 +2,8 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div role="alert"
|
<div role="alert" class="@CompiledClassList" @attributes="CustomAttributes" @onclick="Clicked">
|
||||||
class="@CompiledClassList"
|
<div name="alert-content" class="alert-content">
|
||||||
@attributes="CustomAttributes"
|
|
||||||
@onclick="Clicked">
|
|
||||||
<div name="alert-content">
|
|
||||||
|
|
||||||
@if (GlyphVisible)
|
@if (GlyphVisible)
|
||||||
{
|
{
|
||||||
|
|||||||
@ -95,10 +95,23 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-position {
|
.alert-position {
|
||||||
//flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alert-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.justify-end .alert-content {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert.justify-center .alert-content {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.alert-close {
|
.alert-close {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 0;
|
flex: 0;
|
||||||
|
|||||||
@ -26,7 +26,7 @@ $pink: (
|
|||||||
'darken-2': #c2185b,
|
'darken-2': #c2185b,
|
||||||
'darken-3': #ad1457,
|
'darken-3': #ad1457,
|
||||||
'darken-4': #880e4f,
|
'darken-4': #880e4f,
|
||||||
'accent-1': #ff80ab,
|
'accent-1': #00ff00,//#ff80ab,
|
||||||
'accent-2': #ff4081,
|
'accent-2': #ff4081,
|
||||||
'accent-3': #f50057,
|
'accent-3': #f50057,
|
||||||
'accent-4': #c51162
|
'accent-4': #c51162
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
$border-radiuses: ( "0": 0, "sm": 2px, "lg": 8px, "xl": 24px);
|
$border-radiuses: ( "0": 0, "sm": 4px, "lg": 8px, "xl": 24px);
|
||||||
|
|
||||||
@each $size, $value in $border-radiuses {
|
@each $size, $value in $border-radiuses {
|
||||||
.rounded-#{$size} {
|
.rounded-#{$size} {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user