Compare commits
42 Commits
d7fe9a8908
...
dc49cac63a
| Author | SHA1 | Date | |
|---|---|---|---|
|
dc49cac63a | ||
|
|
c5e97f9600 | ||
|
|
272d19fe8a | ||
|
|
1b35631693 | ||
|
|
cbdd376e91 | ||
|
|
edcc8661e3 | ||
|
|
b7db83fe15 | ||
|
|
a04a0f07e2 | ||
| 25606b926b | |||
|
|
9f1214fd9f | ||
|
|
b01b4e42df | ||
|
|
56cef22d26 | ||
|
|
f4c89aed85 | ||
|
|
f79cc037a8 | ||
|
|
366f2bae6c | ||
|
|
51bbce3407 | ||
| e190dc9ddf | |||
| cfddc25b1c | |||
| a0b6b82efd | |||
| 5ab2444fbc | |||
| 5e4b7e2028 | |||
|
|
9a1a62537e | ||
|
|
8b48fe5959 | ||
|
|
cdff1f4ec4 | ||
|
|
8c61578623 | ||
|
|
8d5445a509 | ||
|
|
7c8ca6fc47 | ||
|
|
63a84810f5 | ||
|
|
d042b55ac6 | ||
|
|
c33820a8a7 | ||
|
|
52a577df0d | ||
| a32c588e82 | |||
| f2bbe04eb5 | |||
| f5bfb347af | |||
|
|
88710e4e3b | ||
|
|
3b6045c3e1 | ||
|
|
663103f1d7 | ||
|
|
1110bbf850 | ||
|
|
580161eb25 | ||
|
|
12798c20f7 | ||
|
|
fe1ef0fbc9 | ||
|
|
53dd3bec33 |
17
.gitignore
vendored
17
.gitignore
vendored
@ -412,5 +412,22 @@ FodyWeavers.xsd
|
|||||||
# Built Visual Studio Code Extensions
|
# Built Visual Studio Code Extensions
|
||||||
*.vsix
|
*.vsix
|
||||||
|
|
||||||
|
# Css files
|
||||||
|
**.css
|
||||||
|
|
||||||
# Minified css files
|
# Minified css files
|
||||||
**.min.css
|
**.min.css
|
||||||
|
|
||||||
|
# css files directly in the wwwroot folder
|
||||||
|
**/wwwroot/**.css
|
||||||
|
|
||||||
|
# Minified js files
|
||||||
|
**.min.js
|
||||||
|
|
||||||
|
# js files directly in the wwwroot folder
|
||||||
|
**/wwwroot/**.js
|
||||||
|
|
||||||
|
# any project with runner in its name
|
||||||
|
**.Runner/**
|
||||||
|
|
||||||
|
**.DS_Store
|
||||||
|
|||||||
@ -5,7 +5,9 @@ VisualStudioVersion = 17.4.33020.496
|
|||||||
MinimumVisualStudioVersion = 10.0.40219.1
|
MinimumVisualStudioVersion = 10.0.40219.1
|
||||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
|
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
|
||||||
EndProject
|
EndProject
|
||||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
|
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
|
||||||
|
EndProject
|
||||||
|
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase.Runner", "Connected.Components.Showcase.Runner\Connected.Components.Showcase.Runner.csproj", "{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}"
|
||||||
EndProject
|
EndProject
|
||||||
Global
|
Global
|
||||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||||
@ -21,6 +23,10 @@ Global
|
|||||||
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||||
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||||
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.Build.0 = Release|Any CPU
|
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||||
|
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
|
||||||
|
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.Build.0 = Debug|Any CPU
|
||||||
|
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.ActiveCfg = Release|Any CPU
|
||||||
|
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.Build.0 = Release|Any CPU
|
||||||
EndGlobalSection
|
EndGlobalSection
|
||||||
GlobalSection(SolutionProperties) = preSolution
|
GlobalSection(SolutionProperties) = preSolution
|
||||||
HideSolutionNode = FALSE
|
HideSolutionNode = FALSE
|
||||||
|
|||||||
1
build/startWatch.ps1
Normal file
1
build/startWatch.ps1
Normal file
@ -0,0 +1 @@
|
|||||||
|
dotnet watch webcompiler ./Styles/Connected.Components.scss -c ./excubowebcompiler.json --project ../src/Connected.Components/Connected.Components.csproj
|
||||||
1
build/startWatch.sh
Normal file
1
build/startWatch.sh
Normal file
@ -0,0 +1 @@
|
|||||||
|
dotnet watch webcompiler ./Styles/Connected.Components.scss -c ./excubowebcompiler.json --project ../src/Connected.Components/Connected.Components.csproj
|
||||||
@ -9,9 +9,11 @@
|
|||||||
<add key="automatic" value="True" />
|
<add key="automatic" value="True" />
|
||||||
</packageRestore>
|
</packageRestore>
|
||||||
<packageSources>
|
<packageSources>
|
||||||
|
<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" />
|
||||||
<add key="Local repository" value="%LOCAL_NUGET%" />
|
|
||||||
</packageSources>
|
</packageSources>
|
||||||
|
|
||||||
<disabledPackageSources />
|
<disabledPackageSources />
|
||||||
</configuration>
|
</configuration>
|
||||||
|
|||||||
@ -41,4 +41,8 @@
|
|||||||
<Copy SourceFiles="$(OutputPath)..\$(PackageId).$(PackageVersion).snupkg" DestinationFolder="$([System.Environment]::GetEnvironmentVariable('LOCAL_NUGET'))" />
|
<Copy SourceFiles="$(OutputPath)..\$(PackageId).$(PackageVersion).snupkg" DestinationFolder="$([System.Environment]::GetEnvironmentVariable('LOCAL_NUGET'))" />
|
||||||
</Target>
|
</Target>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<ProjectReference Include="..\connected.components\Connected.Components.csproj" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
@inherits LayoutComponentBase
|
|
||||||
|
|
||||||
<main>
|
|
||||||
@Body
|
|
||||||
</main>
|
|
||||||
381
src/Connected.Components.Showcase/Pages/AlertShowcase.razor
Normal file
381
src/Connected.Components.Showcase/Pages/AlertShowcase.razor
Normal file
@ -0,0 +1,381 @@
|
|||||||
|
@page "/components/alert"
|
||||||
|
|
||||||
|
@using Connected.Components;
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<Item xs="12">
|
||||||
|
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Simple alert</Text>
|
||||||
|
<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>
|
||||||
|
</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;">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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
@page "/components/app-bar"
|
||||||
|
|
||||||
|
@using Connected.Components;
|
||||||
|
|
||||||
|
<ThemeProvider></ThemeProvider>
|
||||||
|
|
||||||
|
<AppBar Dense="true">This is an alert</AppBar>
|
||||||
36
src/Connected.Components.Showcase/Pages/DrawerShowcase.razor
Normal file
36
src/Connected.Components.Showcase/Pages/DrawerShowcase.razor
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
@page "/components/drawer"
|
||||||
|
|
||||||
|
@using Connected.Components;
|
||||||
|
|
||||||
|
<ThemeProvider></ThemeProvider>
|
||||||
|
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<AppBar Elevation="1">
|
||||||
|
<Button Icon="Icons.Material.Filled.Menu" Edge="Edge.Start" OnClick="ToggleDrawer">aa</Button>
|
||||||
|
</AppBar>
|
||||||
|
<Drawer @bind-Open="_drawerOpen" Elevation="2" Variant="DrawerVariant.Mini" ClassList="info">
|
||||||
|
<DrawerHeader>
|
||||||
|
<Text Typo="Typo.h5" Class="mt-1">Application</Text>
|
||||||
|
</DrawerHeader>
|
||||||
|
<NavMenu>
|
||||||
|
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 border-0">Production</Alert>
|
||||||
|
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 border-0">Production</Alert>
|
||||||
|
|
||||||
|
</NavMenu>
|
||||||
|
</Drawer>
|
||||||
|
<MainContent>
|
||||||
|
<Container>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam fuga necessitatibus illum non earum aperiam consequuntur odit odio a laborum!
|
||||||
|
<Button OnClick="_ToggleDrawer" Color="Color.Primary">Toggle</Button>
|
||||||
|
</Container>
|
||||||
|
</MainContent>
|
||||||
|
</Layout>
|
||||||
|
@code {
|
||||||
|
bool _drawerOpen = true;
|
||||||
|
|
||||||
|
void DrawerToggle()
|
||||||
|
{
|
||||||
|
_drawerOpen = !_drawerOpen;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,3 +0,0 @@
|
|||||||
@page "/"
|
|
||||||
|
|
||||||
<h1>Hello, world!</h1>
|
|
||||||
12
src/Connected.Components/.config/dotnet-tools.json
Normal file
12
src/Connected.Components/.config/dotnet-tools.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"version": 1,
|
||||||
|
"isRoot": true,
|
||||||
|
"tools": {
|
||||||
|
"connected.webcompiler": {
|
||||||
|
"version": "1.0.7-prerelease.g67169cf2c5",
|
||||||
|
"commands": [
|
||||||
|
"webcompiler"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,25 +2,25 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="OnClick">
|
<div role="alert" class="@CompiledClassList" @attributes="CustomAttributes" @onclick="Clicked">
|
||||||
<div class="@ClassPosition">
|
<div name="alert-content" class="alert-content">
|
||||||
|
|
||||||
@if (!GlyphVisible)
|
@if (GlyphVisible)
|
||||||
{
|
{
|
||||||
<div class="alert-icon alert-icon-left">
|
<div class="alert-icon alert-icon-left">
|
||||||
<Icon Glyph="@Glyph" />
|
<Icon Glyph="@Glyph" />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="alert-message">
|
<div class="alert-message">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (CloseGlyphVisible)
|
@if (CloseGlyphVisible)
|
||||||
{
|
{
|
||||||
<div class="alert-close">
|
<div class="alert-close">
|
||||||
<ToggleIconButton Glyph="@CloseGlyph" @onclick="OnCloseGlyphClick" Size="Size.Small" />
|
<GlyphButton ClassList="size-small" Glyph="@CloseGlyph" Clicked="OnCloseGlyphClick" />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
@ -1,143 +1,122 @@
|
|||||||
using System.Diagnostics.CodeAnalysis;
|
using Connected.Utilities;
|
||||||
using Connected.Extensions;
|
|
||||||
using Connected.Utilities;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
|
|
||||||
public partial class Alert : UIComponent
|
public partial class Alert : UIComponent{
|
||||||
{
|
|
||||||
[CascadingParameter(Name = "RightToLeft")]
|
|
||||||
public bool RightToLeft { get; set; }
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Sets the position of the text to the start (Left in LTR and right in RTL).
|
/// Contains the default container classlist and the user defined classes.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
private CssBuilder CompiledClassList
|
||||||
public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Left;
|
{
|
||||||
/// <summary>
|
get
|
||||||
/// The callback, when the close button has been clicked.
|
{
|
||||||
/// </summary>
|
return new CssBuilder("alert")
|
||||||
[Parameter] public EventCallback<Alert> CloseGlyphClicked { get; set; }
|
.AddClass($"alert-{Variant}-{Severity}")
|
||||||
/// <summary>
|
.AddClass(ClassList);
|
||||||
/// Define the icon used for the close button.
|
}
|
||||||
/// </summary>
|
}
|
||||||
[Parameter]
|
|
||||||
public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
|
|
||||||
/// <summary>
|
|
||||||
/// Sets if the alert shows a close icon.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool CloseGlyphVisible { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public int Elevation { set; get; } = 0;
|
|
||||||
/// <summary>
|
|
||||||
/// If true, rounded corners are disabled.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool Square { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// If true, compact padding will be used.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool Dense { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// If true, no alert icon will be used.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool GlyphVisible { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// The severity of the alert. This defines the color and icon used.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public Severity Severity { get; set; } = Severity.Normal;
|
|
||||||
/// <summary>
|
|
||||||
/// The variant to use.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public Variant Variant { get; set; } = Variant.Text;
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Child content of the component.
|
/// Child content of the component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public RenderFragment? ChildContent { get; set; }
|
public RenderFragment? ChildContent { get; set; }
|
||||||
|
|
||||||
|
#region EventCallbacks
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Custom icon, leave unset to use the standard icon which depends on the Severity
|
/// Raised when the alert is clicked.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<MouseEventArgs> Clicked { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The callback, when the close glyph has been clicked.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Content placeholders
|
||||||
|
/// <summary>
|
||||||
|
/// Define the glyph used for the close button.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string Glyph { get; set; } = default!;
|
public string Glyph { get; set; } = default!;
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Styling properties
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Raised when the alert is clicked
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<MouseEventArgs> OnClick { get; set; }
|
public string? ClassList { get; set; }
|
||||||
|
|
||||||
protected string ClassList
|
/// <summary>
|
||||||
{
|
/// Sets if the alert shows a close glyph.
|
||||||
get
|
/// </summary>
|
||||||
{
|
[Parameter]
|
||||||
return new CssBuilder("alert")
|
public bool CloseGlyphVisible { get; set; }
|
||||||
.AddClass($"alert-{Variant.ToDescriptionString()}-{Severity.ToDescriptionString()}")
|
|
||||||
.AddClass($"dense", Dense)
|
|
||||||
.AddClass($"square", Square)
|
|
||||||
.AddClass($"elevation-{Elevation}")
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
protected string ClassPosition
|
/// <summary>
|
||||||
{
|
/// If true, no alert glyph will be used.
|
||||||
get
|
/// </summary>
|
||||||
{
|
[Parameter]
|
||||||
return new CssBuilder("alert-position")
|
public bool GlyphVisible { get; set; }
|
||||||
.AddClass($"justify-sm-{ConvertHorizontalAlignment(Alignment).ToDescriptionString()}")
|
|
||||||
.Build();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private HorizontalAlignment ConvertHorizontalAlignment(HorizontalAlignment contentAlignment)
|
/// <summary>
|
||||||
{
|
/// Specifies the control's display style
|
||||||
return contentAlignment switch
|
/// </summary>
|
||||||
{
|
//TODO: Implement in DOM
|
||||||
HorizontalAlignment.Right => RightToLeft ? HorizontalAlignment.Start : HorizontalAlignment.End,
|
[CascadingParameter(Name = "RightToLeft")]
|
||||||
HorizontalAlignment.Left => RightToLeft ? HorizontalAlignment.End : HorizontalAlignment.Start,
|
public bool RightToLeft { get; set; }
|
||||||
_ => contentAlignment
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The severity of the alert. This defines the color and glyph used.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Severity Severity { get; set; } = Severity.Normal;
|
||||||
|
|
||||||
internal async Task OnCloseGlyphClick()
|
/// <summary>
|
||||||
{
|
/// The variant to use.
|
||||||
if (CloseGlyphClicked.HasDelegate)
|
/// </summary>
|
||||||
{
|
[Parameter]
|
||||||
await CloseGlyphClicked.InvokeAsync(this);
|
public Variant Variant { get; set; } = Variant.Text;
|
||||||
return;
|
#endregion
|
||||||
}
|
|
||||||
|
|
||||||
await Task.CompletedTask;
|
|
||||||
}
|
|
||||||
|
|
||||||
//If we can check this exception can include the coverage again
|
|
||||||
[ExcludeFromCodeCoverage]
|
|
||||||
protected override void OnParametersSet()
|
protected override void OnParametersSet()
|
||||||
{
|
{
|
||||||
if (!string.IsNullOrEmpty(Glyph))
|
if (!string.IsNullOrEmpty(Glyph))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
Glyph = Severity switch
|
Glyph = GetGlyphForSeverity(Severity);
|
||||||
|
}
|
||||||
|
|
||||||
|
private string GetGlyphForSeverity(Severity severity)
|
||||||
|
{
|
||||||
|
return Severity switch
|
||||||
{
|
{
|
||||||
Severity.Normal => Icons.Material.Outlined.EventNote,
|
Severity.Normal => Icons.Material.Outlined.EventNote,
|
||||||
Severity.Info => Icons.Material.Outlined.Info,
|
Severity.Info => Icons.Material.Outlined.Info,
|
||||||
Severity.Success => Icons.Custom.Uncategorized.AlertSuccess,
|
Severity.Success => Icons.Custom.Uncategorized.AlertSuccess,
|
||||||
Severity.Warning => Icons.Material.Outlined.ReportProblem,
|
Severity.Warning => Icons.Material.Outlined.ReportProblem,
|
||||||
Severity.Error => Icons.Material.Filled.ErrorOutline,
|
Severity.Error => Icons.Material.Filled.ErrorOutline,
|
||||||
_ => throw new ArgumentOutOfRangeException(nameof(Severity)),
|
_ => throw new ArgumentOutOfRangeException(nameof(severity)),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
internal async Task OnCloseGlyphClick()
|
||||||
|
{
|
||||||
|
if (!CloseClicked.HasDelegate)
|
||||||
|
return;
|
||||||
|
|
||||||
|
await CloseClicked.InvokeAsync(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,10 +1,10 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<header @attributes="UserAttributes" class="@ClassList" style="@Style">
|
<header @attributes="CustomAttributes" class="@CompiledHeaderClassList">
|
||||||
<ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@ToolBarClassList()">
|
<ToolBar Class="@CompiledToolbarClassList">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</ToolBar>
|
</ToolBar>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,52 +1,37 @@
|
|||||||
using Connected.Extensions;
|
using Connected.Extensions;
|
||||||
using Connected.Utilities;
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using System.Security;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
|
|
||||||
public partial class AppBar : UIComponent
|
public partial class AppBar : UIComponent
|
||||||
{
|
{
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If true, Appbar will be placed at the bottom of the screen.
|
/// The classlist determining the toolbar render.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
private CssBuilder CompiledToolbarClassList
|
||||||
public bool Bottom { get; set; }
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("toolbar-appbar")
|
||||||
|
.AddClass(ToolbarClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
|
/// The classlist determining the header render.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
private CssBuilder CompiledHeaderClassList
|
||||||
public int Elevation { set; get; } = 4;
|
{
|
||||||
|
get
|
||||||
/// <summary>
|
{
|
||||||
/// If true, compact padding will be used.
|
return new CssBuilder("app-bar")
|
||||||
/// </summary>
|
.AddClass($"appbar-fixed-top", Fixed && VerticalAlignment == VerticalAlignment.Top)
|
||||||
[Parameter]
|
.AddClass($"appbar-fixed-bottom", Fixed && VerticalAlignment == VerticalAlignment.Bottom)
|
||||||
public bool Dense { get; set; }
|
.AddClass(HeaderClassList);
|
||||||
|
}
|
||||||
/// <summary>
|
}
|
||||||
/// If true, the left and right padding is removed from from the appbar.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool DisableGutters { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The color of the component. It supports the theme colors.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, appbar will be Fixed.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public bool Fixed { get; set; } = true;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// User class names, separated by spaces for the nested toolbar.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
public string? ToolBarClass { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Child content of the component.
|
/// Child content of the component.
|
||||||
@ -54,22 +39,27 @@ public partial class AppBar : UIComponent
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public RenderFragment? ChildContent { get; set; }
|
public RenderFragment? ChildContent { get; set; }
|
||||||
|
|
||||||
protected string ClassList()
|
/// <summary>
|
||||||
{
|
/// If true, appbar will be fixed.
|
||||||
return new CssBuilder("appbar")
|
/// </summary>
|
||||||
.AddClass($"appbar-dense", Dense)
|
[Parameter]
|
||||||
.AddClass($"appbar-fixed-top", Fixed && !Bottom)
|
public bool Fixed { get; set; } = true;
|
||||||
.AddClass($"appbar-fixed-bottom", Fixed && Bottom)
|
|
||||||
.AddClass($"elevation-{Elevation}")
|
|
||||||
.AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
}
|
|
||||||
|
|
||||||
protected string ToolBarClassList()
|
/// <summary>
|
||||||
{
|
/// Class names for the AppBar header. In case of several, separate by spaces.
|
||||||
return new CssBuilder("toolbar-appbar")
|
/// </summary>
|
||||||
.AddClass(ToolBarClass)
|
[Parameter]
|
||||||
.Build();
|
public string? HeaderClassList { get; set; }
|
||||||
}
|
|
||||||
|
/// <summary>
|
||||||
|
/// Class names for the nested toolbar. In case of several, separate by spaces.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? ToolbarClassList { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Determines the vertical alignment of the AppBar.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public VerticalAlignment VerticalAlignment { get; set; }
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
|
<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
|
||||||
<div class="@AutocompleteClassList">
|
<div class="@AutocompleteClassList">
|
||||||
<InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()" Style="@Style"
|
<InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()"
|
||||||
Error="@HasError" ErrorText="@ErrorText" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
|
Error="@HasError" ErrorText="@ErrorText" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
|
||||||
<InputContent>
|
<InputContent>
|
||||||
<Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text"
|
<Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text"
|
||||||
@ -15,7 +15,7 @@
|
|||||||
Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError"
|
Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError"
|
||||||
OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
|
OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
|
||||||
Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick"
|
Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick"
|
||||||
@attributes="UserAttributes"
|
@attributes="CustomAttributes"
|
||||||
TextChanged="OnTextChanged" OnBlur="OnInputBlurred"
|
TextChanged="OnTextChanged" OnBlur="OnInputBlurred"
|
||||||
OnKeyDown="@this.OnInputKeyDown"
|
OnKeyDown="@this.OnInputKeyDown"
|
||||||
OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault"
|
OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault"
|
||||||
|
|||||||
@ -55,12 +55,12 @@ public partial class Autocomplete<T> : InputBase<T>, IDisposable
|
|||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Dense { get; set; }
|
public bool Dense { get; set; }
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The Open Autocomplete Icon
|
/// The Open Autocomplete Glyph
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
|
public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The Close Autocomplete Icon
|
/// The Close Autocomplete Glyph
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp;
|
public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp;
|
||||||
@ -231,7 +231,6 @@ public partial class Autocomplete<T> : InputBase<T>, IDisposable
|
|||||||
protected string ClassList()
|
protected string ClassList()
|
||||||
{
|
{
|
||||||
return new CssBuilder("select")
|
return new CssBuilder("select")
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,18 +1,18 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
@if(AvatarGroup == null || AvatarGroup.MaxGroupReached(this))
|
@if(AvatarGroup is null || AvatarGroup.MaxGroupReached(this))
|
||||||
{
|
{
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Stylesname">
|
<div @attributes="CustomAttributes" class="@CompiledClassList" style="@CompiledStyles">
|
||||||
@if (!String.IsNullOrEmpty(Image))
|
@if (!String.IsNullOrEmpty(Image))
|
||||||
{
|
{
|
||||||
if (!String.IsNullOrEmpty(Alt))
|
if (!String.IsNullOrEmpty(ImageAltText))
|
||||||
{
|
{
|
||||||
<img src="@Image" alt="@Alt" class="mud-avatar-img" />
|
<img src="@Image" alt="@ImageAltText" class="avatar-img" />
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<img src="@Image" class="mud-avatar-img" />
|
<img src="@Image" class="avatar-img" />
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
|
|||||||
@ -7,88 +7,87 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
partial class Avatar : UIComponent, IDisposable
|
partial class Avatar : UIComponent, IDisposable
|
||||||
{
|
{
|
||||||
[CascadingParameter] protected AvatarGroup AvatarGroup { get; set; }
|
[CascadingParameter]
|
||||||
protected string Classname =>
|
protected AvatarGroup? AvatarGroup { get; set; }
|
||||||
new CssBuilder("mud-avatar")
|
|
||||||
.AddClass($"mud-avatar-{Size.ToDescriptionString()}")
|
|
||||||
.AddClass($"mud-avatar-rounded", Rounded)
|
|
||||||
.AddClass($"mud-avatar-square", Square)
|
|
||||||
.AddClass($"mud-avatar-{Variant.ToDescriptionString()}")
|
|
||||||
.AddClass($"mud-avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
|
||||||
.AddClass($"mud-elevation-{Elevation.ToString()}")
|
|
||||||
.AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected string Stylesname =>
|
protected CssBuilder CompiledClassList
|
||||||
new StyleBuilder()
|
{
|
||||||
.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup != null)
|
get
|
||||||
.AddStyle(Style)
|
{
|
||||||
.Build();
|
return new CssBuilder("avatar")
|
||||||
|
.AddClass($"avatar-{Size}")
|
||||||
|
.AddClass($"avatar-rounded", Kind == AvatarKind.Rounded)
|
||||||
|
.AddClass($"avatar-square", Kind == AvatarKind.Square)
|
||||||
|
.AddClass($"avatar-{Variant}")
|
||||||
|
.AddClass($"avatar-{Variant}-{Color}")
|
||||||
|
.AddClass($"elevation-{Elevation}")
|
||||||
|
.AddClass(ClassList)
|
||||||
|
.AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected StyleBuilder CompiledStyles
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new StyleBuilder()
|
||||||
|
.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup is not null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The higher the number, the heavier the drop-shadow.
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
public string? ClassList { get; set; }
|
||||||
public int Elevation { set; get; } = 0;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, border-radius is set to 0.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public bool Square { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, border-radius is set to the themes default value.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public bool Rounded { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Link to image, if set a image will be displayed instead of text.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Avatar.Behavior)]
|
|
||||||
public string Image { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If set (and Image is also set), will add an alt property to the img element
|
/// If set (and Image is also set), will add an alt property to the img element
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Behavior)]
|
public string? ImageAltText { get; set; }
|
||||||
public string Alt { get; set; }
|
|
||||||
|
/// <summary>
|
||||||
|
/// Child content of the component.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public RenderFragment? ChildContent { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The color of the component. It supports the theme colors.
|
/// The color of the component. It supports the theme colors.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The higher the number, the heavier the drop-shadow.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public int Elevation { set; get; } = 0;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Link to image, if set a image will be displayed instead of text.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? Image { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Sets the avatar appearance
|
||||||
|
/// </summary>
|
||||||
|
public AvatarKind Kind { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The Size of the MudAvatar.
|
/// The Size of the MudAvatar.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public Size Size { get; set; } = Size.Medium;
|
public Size Size { get; set; } = Size.Medium;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The variant to use.
|
/// The variant to use.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Avatar.Appearance)]
|
|
||||||
public Variant Variant { get; set; } = Variant.Filled;
|
public Variant Variant { get; set; } = Variant.Filled;
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Child content of the component.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Avatar.Behavior)]
|
|
||||||
public RenderFragment ChildContent { get; set; }
|
|
||||||
|
|
||||||
protected override void OnInitialized()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
base.OnInitialized();
|
base.OnInitialized();
|
||||||
@ -96,13 +95,7 @@ partial class Avatar : UIComponent, IDisposable
|
|||||||
AvatarGroup?.AddAvatar(this);
|
AvatarGroup?.AddAvatar(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
public void Dispose()
|
public void Dispose() => AvatarGroup?.RemoveAvatar(this);
|
||||||
{
|
|
||||||
AvatarGroup?.RemoveAvatar(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
internal void ForceRedraw()
|
internal void ForceRedraw() => StateHasChanged();
|
||||||
{
|
|
||||||
StateHasChanged();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@CompiledClassList">
|
||||||
<CascadingValue Value="this" IsFixed="true">
|
<CascadingValue Value="this" IsFixed="true">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
@if(_avatars.Count > Max)
|
@if(_avatars.Count > Max)
|
||||||
{
|
{
|
||||||
<Avatar Class="@MaxAvatarClassname" Color="@MaxColor" Size="@MaxSize" Variant="@MaxVariant" Rounded="@MaxRounded" Square="@MaxSquare" Elevation="@MaxElevation">
|
<Avatar Class="@CompiledMaxAvatarClassList" Color="@MaxColor" Size="@MaxSize" Variant="@MaxVariant" Rounded="@MaxRounded" Square="@MaxSquare" Elevation="@MaxElevation">
|
||||||
@($"+{_avatars.Count - Max}")
|
@($"+{_avatars.Count - Max}")
|
||||||
</Avatar>
|
</Avatar>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,27 +8,34 @@ namespace Connected.Components;
|
|||||||
partial class AvatarGroup : UIComponent
|
partial class AvatarGroup : UIComponent
|
||||||
{
|
{
|
||||||
private bool _childrenNeedUpdates = false;
|
private bool _childrenNeedUpdates = false;
|
||||||
|
|
||||||
protected string Classname =>
|
|
||||||
new CssBuilder("mud-avatar-group")
|
|
||||||
.AddClass($"mud-avatar-group-outlined", Outlined)
|
|
||||||
.AddClass($"mud-avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected string MaxAvatarClassname =>
|
|
||||||
new CssBuilder("mud-avatar-group-max-avatar")
|
|
||||||
.AddClass($"ms-n{Spacing}")
|
|
||||||
.AddClass(MaxAvatarClass)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
private int _spacing = 3;
|
private int _spacing = 3;
|
||||||
|
private List<Avatar> _avatars = new();
|
||||||
|
|
||||||
|
private CssBuilder CompiledClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("avatar-group")
|
||||||
|
.AddClass($"avatar-group-outlined", Outlined)
|
||||||
|
.AddClass($"avatar-group-outlined-{OutlineColor.ToDescription()}", Outlined)
|
||||||
|
.AddClass(ClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private CssBuilder CompiledMaxAvatarClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("avatar-group-max-avatar")
|
||||||
|
.AddClass($"ms-n{Spacing}")
|
||||||
|
.AddClass(MaxAvatarClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Spacing between avatars where 0 is none and 16 max.
|
/// Spacing between avatars where 0 is none and 16 max.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.AvatarGroup.Behavior)]
|
|
||||||
public int Spacing
|
public int Spacing
|
||||||
{
|
{
|
||||||
get => _spacing;
|
get => _spacing;
|
||||||
@ -42,6 +49,12 @@ partial class AvatarGroup : UIComponent
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? ClassList { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
|
/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
@ -132,8 +145,6 @@ partial class AvatarGroup : UIComponent
|
|||||||
[Category(CategoryTypes.AvatarGroup.Behavior)]
|
[Category(CategoryTypes.AvatarGroup.Behavior)]
|
||||||
public RenderFragment ChildContent { get; set; }
|
public RenderFragment ChildContent { get; set; }
|
||||||
|
|
||||||
internal List<Avatar> _avatars = new();
|
|
||||||
|
|
||||||
internal void AddAvatar(Avatar avatar)
|
internal void AddAvatar(Avatar avatar)
|
||||||
{
|
{
|
||||||
_avatars.Add(avatar);
|
_avatars.Add(avatar);
|
||||||
|
|||||||
14
src/Connected.Components/Components/Avatar/AvatarKind.cs
Normal file
14
src/Connected.Components/Components/Avatar/AvatarKind.cs
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
using System;
|
||||||
|
using System.Collections.Generic;
|
||||||
|
using System.Linq;
|
||||||
|
using System.Text;
|
||||||
|
using System.Threading.Tasks;
|
||||||
|
|
||||||
|
namespace Connected.Components;
|
||||||
|
public enum AvatarKind
|
||||||
|
{
|
||||||
|
Undefined = 0,
|
||||||
|
Unadorned = 1,
|
||||||
|
Rounded = 2,
|
||||||
|
Square = 3
|
||||||
|
}
|
||||||
@ -1,8 +1,8 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<span @attributes="UserAttributes" class="@Classname" style="@Style">
|
<span @attributes="CustomAttributes" class="@CompiledClassList">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
@if (Visible)
|
@if (Visible)
|
||||||
{
|
{
|
||||||
<span class="@WrapperClass">
|
<span class="@WrapperClass">
|
||||||
@ -11,7 +11,7 @@
|
|||||||
{
|
{
|
||||||
@if (!String.IsNullOrEmpty(Icon))
|
@if (!String.IsNullOrEmpty(Icon))
|
||||||
{
|
{
|
||||||
<Icon Icon="@Icon" Class="mud-icon-badge" />
|
<Icon Icon="@Icon" Class="icon-badge" />
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
|||||||
@ -9,25 +9,25 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
public partial class Badge : UIComponent
|
public partial class Badge : UIComponent
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string CompiledClassList =>
|
||||||
new CssBuilder("mud-badge-root")
|
new CssBuilder("badge-root")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
protected string WrapperClass =>
|
protected string WrapperClass =>
|
||||||
new CssBuilder("mud-badge-wrapper")
|
new CssBuilder("badge-wrapper")
|
||||||
.AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}")
|
.AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string BadgeClassName =>
|
protected string BadgeClassName =>
|
||||||
new CssBuilder("mud-badge")
|
new CssBuilder("badge")
|
||||||
.AddClass("mud-badge-dot", Dot)
|
.AddClass("badge-dot", Dot)
|
||||||
.AddClass("mud-badge-bordered", Bordered)
|
.AddClass("badge-bordered", Bordered)
|
||||||
.AddClass("mud-badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
|
.AddClass("badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
|
||||||
.AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}")
|
.AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
|
||||||
.AddClass($"mud-elevation-{Elevation.ToString()}")
|
.AddClass($"elevation-{Elevation.ToString()}")
|
||||||
.AddClass("mud-theme-" + Color.ToDescriptionString(), Color != ThemeColor.Default)
|
.AddClass("theme-" + Color.ToDescription(), Color != ThemeColor.Default)
|
||||||
.AddClass("mud-badge-default", Color == ThemeColor.Default)
|
.AddClass("badge-default", Color == ThemeColor.Default)
|
||||||
.AddClass("mud-badge-overlap", Overlap)
|
.AddClass("badge-overlap", Overlap)
|
||||||
.AddClass(BadgeClass)
|
.AddClass(BadgeClass)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ public partial class Badge : UIComponent
|
|||||||
public bool Bordered { get; set; }
|
public bool Bordered { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Sets the Icon to use in the badge.
|
/// Sets the Glyph to use in the badge.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Badge.Behavior)]
|
[Category(CategoryTypes.Badge.Behavior)]
|
||||||
|
|||||||
@ -10,7 +10,7 @@ public partial class BreadcrumbLink : UIComponent
|
|||||||
[CascadingParameter]
|
[CascadingParameter]
|
||||||
public Breadcrumbs Parent { get; set; }
|
public Breadcrumbs Parent { get; set; }
|
||||||
|
|
||||||
private string Classname => new CssBuilder("mud-breadcrumb-item")
|
private string Classname => new CssBuilder("breadcrumb-item")
|
||||||
.AddClass("mud-disabled", Item?.Disabled)
|
.AddClass("disabled", Item?.Disabled)
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<li aria-hidden="true" class="mud-breadcrumb-separator mud-ltr mud-flip-x-rtl">
|
<li aria-hidden="true" class="breadcrumb-separator mud-ltr mud-flip-x-rtl">
|
||||||
@if (Parent?.SeparatorTemplate is null)
|
@if (Parent?.SeparatorTemplate is null)
|
||||||
{
|
{
|
||||||
<span>@Parent?.Separator</span>
|
<span>@Parent?.Separator</span>
|
||||||
|
|||||||
@ -7,12 +7,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
<CascadingValue Value="this" IsFixed="true">
|
<CascadingValue Value="this" IsFixed="true">
|
||||||
<ul @attributes="UserAttributes" class=@Classname style="@Style">
|
<ul @attributes="CustomAttributes" class=@Classname>
|
||||||
@if (MaxItems is not null && Collapsed && Items.Count > MaxItems)
|
@if (MaxItems is not null && Collapsed && Items.Count > MaxItems)
|
||||||
{
|
{
|
||||||
<BreadcrumbLink Item="Items[0]"></BreadcrumbLink>
|
<BreadcrumbLink Item="Items[0]"></BreadcrumbLink>
|
||||||
<BreadcrumbSeparator></BreadcrumbSeparator>
|
<BreadcrumbSeparator></BreadcrumbSeparator>
|
||||||
<li class="mud-breadcrumbs-expander" @onclick="Expand">
|
<li class="breadcrumbs-expander" @onclick="Expand">
|
||||||
<Icon Icon="@ExpanderIcon" Size="Size.Small"></Icon>
|
<Icon Icon="@ExpanderIcon" Size="Size.Small"></Icon>
|
||||||
</li>
|
</li>
|
||||||
<BreadcrumbSeparator></BreadcrumbSeparator>
|
<BreadcrumbSeparator></BreadcrumbSeparator>
|
||||||
|
|||||||
@ -49,15 +49,15 @@ public partial class Breadcrumbs : UIComponent
|
|||||||
public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
|
public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
|
||||||
|
|
||||||
public bool Collapsed { get; private set; } = true;
|
public bool Collapsed { get; private set; } = true;
|
||||||
private string Classname => new CssBuilder("mud-breadcrumbs")
|
private string Classname => new CssBuilder("breadcrumbs")
|
||||||
.AddClass("mud-typography-body1")
|
.AddClass("typography-body1")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
internal static string GetItemClassname(BreadcrumbItem item)
|
internal static string GetItemClassname(BreadcrumbItem item)
|
||||||
{
|
{
|
||||||
return new CssBuilder("mud-breadcrumb-item")
|
return new CssBuilder("breadcrumb-item")
|
||||||
.AddClass("mud-disabled", item.Disabled)
|
.AddClass("disabled", item.Disabled)
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,31 +1,17 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
|
|
||||||
@using Connected.Extensions;
|
@using Connected.Extensions;
|
||||||
|
|
||||||
@inherits ButtonBase
|
@inherits ButtonBase
|
||||||
|
|
||||||
<Element @bind-Ref="@_elementReference"
|
<Element type="@ButtonType.ToDescription()"
|
||||||
HtmlTag="@HtmlTag"
|
disabled="@Disabled"
|
||||||
Class="@Classname"
|
HtmlTag="@HtmlTag"
|
||||||
Style="@Style"
|
ClassList="@CompiledClassList.ToString()"
|
||||||
@attributes="UserAttributes"
|
PreventOnClickPropagation="PreventOnClickPropagation"
|
||||||
@onclick="OnClickHandler"
|
@attributes="CustomAttributes"
|
||||||
type="@ButtonType.ToDescriptionString()"
|
@onclick="OnClick">
|
||||||
href="@Href"
|
<span name="button-content" class="button-content">
|
||||||
target="@Target"
|
@ChildContent
|
||||||
rel="@(Target=="_blank"?"noopener":null)"
|
</span>
|
||||||
disabled="@Disabled">
|
|
||||||
<span class="mud-button-label">
|
|
||||||
@if (!string.IsNullOrWhiteSpace(StartIcon))
|
|
||||||
{
|
|
||||||
<span class="@StartIconClass">
|
|
||||||
<Icon Icon="@StartIcon" Size="@Size" Color="@IconColor" />
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
@ChildContent
|
|
||||||
@if (!string.IsNullOrWhiteSpace(@EndIcon))
|
|
||||||
{
|
|
||||||
<span class="@EndIconClass">
|
|
||||||
<Icon Glyph="@EndIcon" Size="@Size" Color="@IconColor" />
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</Element>
|
</Element>
|
||||||
|
|||||||
@ -1,96 +1,41 @@
|
|||||||
using Connected.Annotations;
|
using Connected.Utilities;
|
||||||
using Connected.Extensions;
|
|
||||||
using Connected.Utilities;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
|
|
||||||
public partial class Button : ButtonBase
|
public partial class Button : ButtonBase
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
|
||||||
new CssBuilder("mud-button-root mud-button")
|
|
||||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}")
|
|
||||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
|
||||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
|
|
||||||
.AddClass($"mud-width-full", FullWidth)
|
|
||||||
.AddClass($"mud-ripple", !DisableRipple)
|
|
||||||
.AddClass($"mud-button-disable-elevation", DisableElevation)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected string StartIconClass =>
|
|
||||||
new CssBuilder("mud-button-icon-start")
|
|
||||||
.AddClass($"mud-button-icon-size-{Size.ToDescriptionString()}")
|
|
||||||
.AddClass(IconClass)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected string EndIconClass =>
|
|
||||||
new CssBuilder("mud-button-icon-end")
|
|
||||||
.AddClass($"mud-button-icon-size-{Size.ToDescriptionString()}")
|
|
||||||
.AddClass(IconClass)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Icon placed before the text if set.
|
/// Contains the default container classlist and the user defined classes.
|
||||||
|
/// </summary>
|
||||||
|
private CssBuilder CompiledClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("button-root mud-button")
|
||||||
|
.AddClass($"button-{Variant}")
|
||||||
|
.AddClass(ClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#region Styling properties
|
||||||
|
/// <summary>
|
||||||
|
/// Child content of component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
public RenderFragment? ChildContent { get; set; }
|
||||||
public string StartIcon { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Icon placed after the text if set.
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
public string? ClassList { get; set; }
|
||||||
public string EndIcon { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The color of the icon. It supports the theme colors.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public ThemeColor IconColor { get; set; } = ThemeColor.Inherit;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Icon class names, separated by space
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public string IconClass { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The color of the component. It supports the theme colors.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The Size of the component.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Size Size { get; set; } = Size.Medium;
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The variant to use.
|
/// The variant to use.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Variant Variant { get; set; } = Variant.Text;
|
public Variant Variant { get; set; } = Variant.Text;
|
||||||
|
#endregion
|
||||||
/// <summary>
|
|
||||||
/// If true, the button will take up 100% of available width.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public bool FullWidth { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Child content of component.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public RenderFragment ChildContent { get; set; }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,143 +1,83 @@
|
|||||||
using System.Windows.Input;
|
using System.Windows.Input;
|
||||||
using Connected.Annotations;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using Microsoft.AspNetCore.Components.Web;
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
using static System.String;
|
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
|
|
||||||
public abstract class ButtonBase : UIComponent
|
public abstract class ButtonBase : UIComponent
|
||||||
{
|
{
|
||||||
|
#region EventCallbacks
|
||||||
|
/// <summary>
|
||||||
|
/// Button click event.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<MouseEventArgs> Clicked { get; set; }
|
||||||
|
|
||||||
|
protected async Task OnClick(MouseEventArgs e)
|
||||||
|
{
|
||||||
|
if (Disabled)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (Clicked.HasDelegate)
|
||||||
|
await Clicked.InvokeAsync(e);
|
||||||
|
|
||||||
|
if (Command?.CanExecute(CommandParameters) ?? false)
|
||||||
|
Command.Execute(CommandParameters);
|
||||||
|
|
||||||
|
Activateable?.Activate(this, e);
|
||||||
|
}
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Content placeholders
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Potential activation target for this button. This enables RenderFragments with user-defined
|
/// Potential activation target for this button. This enables RenderFragments with user-defined
|
||||||
/// buttons which will automatically activate the intended functionality.
|
/// buttons which will automatically activate the intended functionality.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[CascadingParameter] protected IActivatable Activateable { get; set; }
|
[CascadingParameter]
|
||||||
|
protected IActivatable? Activateable { get; set; }
|
||||||
|
#endregion
|
||||||
|
|
||||||
/// <summary>
|
#region Styling properties
|
||||||
/// The HTML element that will be rendered in the root by the component
|
#endregion
|
||||||
/// By default, is a button
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public string HtmlTag { get; set; } = "button";
|
|
||||||
|
|
||||||
|
#region Behavior properties
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// The button Type (Button, Submit, Refresh)
|
/// The button Type (Button, Submit, Refresh)
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public ButtonType ButtonType { get; set; }
|
public ButtonType ButtonType { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public string Href { get; set; }
|
|
||||||
/// <summary>
|
|
||||||
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where (Obsolete replaced by Href)
|
|
||||||
/// </summary>
|
|
||||||
|
|
||||||
[Obsolete("Use Href Instead.", false)]
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public string Link
|
|
||||||
{
|
|
||||||
get => Href;
|
|
||||||
set => Href = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The target attribute specifies where to open the link, if Link is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
|
||||||
public string Target { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, the button will be disabled.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public bool Disabled { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, no drop-shadow will be used.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public bool DisableElevation { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, disables ripple effect.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public bool DisableRipple { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Command executed when the user clicks on an element.
|
/// Command executed when the user clicks on an element.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
public ICommand? Command { get; set; }
|
||||||
public ICommand Command { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Command parameter.
|
/// Command parameter.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.ClickAction)]
|
public object? CommandParameters { get; set; }
|
||||||
public object CommandParameter { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Button click event.
|
/// If true, the button will be disabled.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<MouseEventArgs> OnClick { get; set; }
|
public bool Disabled { get; set; }
|
||||||
|
#endregion
|
||||||
|
|
||||||
protected async Task OnClickHandler(MouseEventArgs ev)
|
/// <summary>
|
||||||
{
|
/// The HTML element that will be rendered in the root by the component
|
||||||
if (Disabled)
|
/// By default, is a button.
|
||||||
return;
|
/// </summary>
|
||||||
await OnClick.InvokeAsync(ev);
|
protected string HtmlTag => ButtonType.ToString().ToLower();
|
||||||
if (Command?.CanExecute(CommandParameter) ?? false)
|
|
||||||
{
|
|
||||||
Command.Execute(CommandParameter);
|
|
||||||
}
|
|
||||||
Activateable?.Activate(this, ev);
|
|
||||||
}
|
|
||||||
|
|
||||||
protected override void OnInitialized()
|
/// <summary>
|
||||||
{
|
/// Indicates whether the internal click propagation should be disabled,
|
||||||
SetDefaultValues();
|
/// as it is handled in the component itself.
|
||||||
}
|
/// </summary>
|
||||||
|
protected bool PreventOnClickPropagation => string.Compare(HtmlTag, "button", true) == 0;
|
||||||
|
|
||||||
protected override void OnParametersSet()
|
|
||||||
{
|
|
||||||
//if params change, must set default values again
|
|
||||||
SetDefaultValues();
|
|
||||||
}
|
|
||||||
|
|
||||||
//Set the default value for HtmlTag, Link and Target
|
|
||||||
private void SetDefaultValues()
|
|
||||||
{
|
|
||||||
if (Disabled)
|
|
||||||
{
|
|
||||||
HtmlTag = "button";
|
|
||||||
Href = null;
|
|
||||||
Target = null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render an anchor element if Link property is set and is not disabled
|
|
||||||
if (!IsNullOrWhiteSpace(Href))
|
|
||||||
{
|
|
||||||
HtmlTag = "a";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
protected ElementReference _elementReference;
|
|
||||||
|
|
||||||
public ValueTask FocusAsync() => _elementReference.FocusAsync();
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,19 +4,14 @@
|
|||||||
|
|
||||||
@using Connected.Extensions;
|
@using Connected.Extensions;
|
||||||
|
|
||||||
<Element @bind-Ref="@_elementReference"
|
<Element HtmlTag="@HtmlTag"
|
||||||
HtmlTag="@HtmlTag"
|
|
||||||
Class="@Classname"
|
Class="@Classname"
|
||||||
Style="@Style"
|
@attributes="CustomAttributes"
|
||||||
@attributes="UserAttributes"
|
@onclick="OnClick"
|
||||||
@onclick="OnClickHandler"
|
type="@ButtonType.ToDescription()"
|
||||||
type="@ButtonType.ToDescriptionString()"
|
|
||||||
href="@Href"
|
|
||||||
target="@Target"
|
|
||||||
rel="@(Target=="_blank"?"noopener":null)"
|
|
||||||
disabled="@Disabled"
|
disabled="@Disabled"
|
||||||
title="@Title">
|
title="@Title">
|
||||||
<span class="mud-fab-label">
|
<span class="fab-label">
|
||||||
@if (!string.IsNullOrWhiteSpace(StartIcon))
|
@if (!string.IsNullOrWhiteSpace(StartIcon))
|
||||||
{
|
{
|
||||||
<Icon Icon="@StartIcon" Color="@IconColor" Size="@IconSize" />
|
<Icon Icon="@StartIcon" Color="@IconColor" Size="@IconSize" />
|
||||||
|
|||||||
@ -8,13 +8,10 @@ namespace Connected.Components;
|
|||||||
public partial class Fab : ButtonBase
|
public partial class Fab : ButtonBase
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-button-root mud-fab")
|
new CssBuilder("button-root mud-fab")
|
||||||
.AddClass($"mud-fab-extended", !string.IsNullOrEmpty(Label))
|
.AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
|
||||||
.AddClass($"mud-fab-{Color.ToDescriptionString()}")
|
.AddClass($"fab-{Color.ToDescription()}")
|
||||||
.AddClass($"mud-fab-size-{Size.ToDescriptionString()}")
|
.AddClass($"fab-size-{Size.ToDescription()}")
|
||||||
.AddClass($"mud-ripple", !DisableRipple && !Disabled)
|
|
||||||
.AddClass($"mud-fab-disable-elevation", DisableElevation)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
@ -32,19 +29,19 @@ public partial class Fab : ButtonBase
|
|||||||
public Size Size { get; set; } = Size.Large;
|
public Size Size { get; set; } = Size.Large;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If applied Icon will be added at the start of the component.
|
/// If applied Glyph will be added at the start of the component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Obsolete("This property is obsolete. Use StartIcon instead.")][Parameter] public string Icon { get => StartIcon; set => StartIcon = value; }
|
[Obsolete("This property is obsolete. Use StartIcon instead.")][Parameter] public string Icon { get => StartIcon; set => StartIcon = value; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If applied Icon will be added at the start of the component.
|
/// If applied Glyph will be added at the start of the component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
[Category(CategoryTypes.Button.Behavior)]
|
||||||
public string StartIcon { get; set; }
|
public string StartIcon { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// If applied Icon will be added at the end of the component.
|
/// If applied Glyph will be added at the end of the component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
[Category(CategoryTypes.Button.Behavior)]
|
||||||
@ -72,7 +69,7 @@ public partial class Fab : ButtonBase
|
|||||||
public string Label { get; set; }
|
public string Label { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Title of the icon used for accessibility.
|
/// GlyphTitle of the icon used for accessibility.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
[Category(CategoryTypes.Button.Behavior)]
|
||||||
|
|||||||
27
src/Connected.Components/Components/Button/GlyphButton.razor
Normal file
27
src/Connected.Components/Components/Button/GlyphButton.razor
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
@namespace Connected.Components
|
||||||
|
|
||||||
|
@inherits ButtonBase
|
||||||
|
|
||||||
|
@using Connected.Extensions;
|
||||||
|
|
||||||
|
<Element disabled="@Disabled"
|
||||||
|
title="@GlyphTitle"
|
||||||
|
type="@ButtonType.ToDescription()"
|
||||||
|
ClassList="@CompiledClassList.ToString()"
|
||||||
|
HtmlTag="@HtmlTag"
|
||||||
|
PreventOnClickPropagation="PreventOnClickPropagation"
|
||||||
|
@attributes="CustomAttributes"
|
||||||
|
@onclick="OnClick">
|
||||||
|
@if (!String.IsNullOrEmpty(Glyph))
|
||||||
|
{
|
||||||
|
<span name="glyph-container" class="glyph-button-label">
|
||||||
|
<Icon Glyph="@Glyph" />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<TextContent Typo="Typo.body2">
|
||||||
|
@ChildContent
|
||||||
|
</TextContent>
|
||||||
|
}
|
||||||
|
</Element>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
using Connected.Utilities;
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
|
namespace Connected.Components;
|
||||||
|
|
||||||
|
public partial class GlyphButton : ButtonBase
|
||||||
|
{
|
||||||
|
/// <summary>
|
||||||
|
/// Contains the default container classlist and the user defined classes.
|
||||||
|
/// </summary>
|
||||||
|
private CssBuilder CompiledClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("button-root glyph-button")
|
||||||
|
.AddClass(ClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Child content of component, only shows if Glyph is null or Empty.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public RenderFragment? ChildContent { get; set; }
|
||||||
|
|
||||||
|
#region EventCallbacks
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Content placeholders
|
||||||
|
/// <summary>
|
||||||
|
/// The Glyph that will be used in the component.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? Glyph { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// GlyphTitle of the icon used for accessibility.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? GlyphTitle { get; set; }
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Styling properties
|
||||||
|
/// <summary>
|
||||||
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? ClassList { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The variant to use.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Variant Variant { get; set; } = Variant.Text;
|
||||||
|
#endregion
|
||||||
|
}
|
||||||
@ -1,29 +0,0 @@
|
|||||||
@namespace Connected.Components
|
|
||||||
|
|
||||||
@inherits ButtonBase
|
|
||||||
|
|
||||||
@using Connected.Extensions;
|
|
||||||
|
|
||||||
<Element @bind-Ref="@_elementReference"
|
|
||||||
HtmlTag="@HtmlTag"
|
|
||||||
Class="@Classname"
|
|
||||||
Style="@Style"
|
|
||||||
@attributes="UserAttributes"
|
|
||||||
@onclick="OnClickHandler"
|
|
||||||
type="@ButtonType.ToDescriptionString()"
|
|
||||||
href="@Href"
|
|
||||||
target="@Target"
|
|
||||||
rel="@(Target=="_blank"?"noopener":null)"
|
|
||||||
disabled="@Disabled"
|
|
||||||
title="@Title">
|
|
||||||
@if (!String.IsNullOrEmpty(Icon))
|
|
||||||
{
|
|
||||||
<span class="mud-icon-button-label">
|
|
||||||
<Icon Glyph="@Icon" Size="@Size" />
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<TextContent Typo="Typo.body2" Color="ThemeColor.Inherit">@ChildContent</TextContent>
|
|
||||||
}
|
|
||||||
</Element>
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
using Connected.Annotations;
|
|
||||||
using Connected.Extensions;
|
|
||||||
using Connected.Utilities;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
|
||||||
|
|
||||||
namespace Connected.Components;
|
|
||||||
|
|
||||||
public partial class IconButton : ButtonBase
|
|
||||||
{
|
|
||||||
protected string Classname =>
|
|
||||||
new CssBuilder("mud-button-root mud-icon-button")
|
|
||||||
.AddClass("mud-button", when: AsButton)
|
|
||||||
.AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", !AsButton && Color != ThemeColor.Default)
|
|
||||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}", AsButton)
|
|
||||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
|
|
||||||
.AddClass($"mud-button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
|
|
||||||
.AddClass($"mud-ripple", !DisableRipple)
|
|
||||||
.AddClass($"mud-ripple-icon", !DisableRipple && !AsButton)
|
|
||||||
.AddClass($"mud-icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
|
|
||||||
.AddClass($"mud-icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
|
|
||||||
.AddClass($"mud-button-disable-elevation", DisableElevation)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
protected bool AsButton => Variant != Variant.Text;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The Icon that will be used in the component.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public string Icon { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Title of the icon used for accessibility.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public string Title { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The color of the component. It supports the theme colors.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The Size of the component.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Size Size { get; set; } = Size.Medium;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If set uses a negative margin.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Edge Edge { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Child content of component, only shows if Icon is null or Empty.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public RenderFragment ChildContent { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The variant to use.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Variant Variant { get; set; } = Variant.Text;
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
@namespace Connected.Components
|
||||||
|
|
||||||
|
@inherits UIComponent
|
||||||
|
|
||||||
|
<GlyphButton aria-pressed="@Toggled.ToString()"
|
||||||
|
ClassList="@ClassList"
|
||||||
|
Clicked="Toggle"
|
||||||
|
Disabled="Disabled"
|
||||||
|
Glyph="@(Toggled ? ToggledGlyph : Glyph)"
|
||||||
|
GlyphTitle="@(Toggled && ToggledGlyphTitle != null ? ToggledGlyphTitle : GlyphTitle)"
|
||||||
|
Variant="Variant"
|
||||||
|
@attributes="CustomAttributes"
|
||||||
|
/>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
|
namespace Connected.Components;
|
||||||
|
|
||||||
|
public partial class ToggleGlyphButton : UIComponent
|
||||||
|
{
|
||||||
|
#region EventCallbacks
|
||||||
|
/// <summary>
|
||||||
|
/// Fires whenever toggled is changed.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<bool> ToggledChanged { get; set; }
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Content placeholders
|
||||||
|
/// <summary>
|
||||||
|
/// The glyph that will be used in the untoggled state.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? Glyph { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// GlyphTitle of the icon used for accessibility.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? GlyphTitle { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The glyph that will be used in the toggled state.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? ToggledGlyph { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// GlyphTitle used in toggled state, if different.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? ToggledGlyphTitle { get; set; }
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Styling properties
|
||||||
|
/// <summary>
|
||||||
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? ClassList { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The variant to use.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public Variant Variant { get; set; } = Variant.Text;
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Behavior properties
|
||||||
|
/// <summary>
|
||||||
|
/// If true, the button will be disabled.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public bool Disabled { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// The button toggled state.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public bool Toggled { get; set; }
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
public async Task Toggle()
|
||||||
|
{
|
||||||
|
await SetToggledAsync(!Toggled);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected internal async Task SetToggledAsync(bool toggled)
|
||||||
|
{
|
||||||
|
if (Disabled)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (Toggled != toggled)
|
||||||
|
{
|
||||||
|
Toggled = toggled;
|
||||||
|
|
||||||
|
if (!ToggledChanged.HasDelegate)
|
||||||
|
return;
|
||||||
|
|
||||||
|
await ToggledChanged.InvokeAsync(Toggled);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,21 +0,0 @@
|
|||||||
@namespace Connected.Components
|
|
||||||
|
|
||||||
@inherits UIComponent
|
|
||||||
|
|
||||||
@{
|
|
||||||
var ariaPressedValue = @Toggled ? "true" : "false";
|
|
||||||
}
|
|
||||||
|
|
||||||
<IconButton Icon="@(Toggled ? ToggledIcon : Icon)"
|
|
||||||
Size="(Toggled ? ToggledSize : Size)"
|
|
||||||
Color="(Toggled ? ToggledColor : Color)"
|
|
||||||
Title="@(Toggled && ToggledTitle != null ? ToggledTitle : Title)"
|
|
||||||
Variant="Variant"
|
|
||||||
Disabled="Disabled"
|
|
||||||
Edge="Edge"
|
|
||||||
DisableRipple="DisableRipple"
|
|
||||||
OnClick="Toggle"
|
|
||||||
Class="@Class"
|
|
||||||
Style="@Style"
|
|
||||||
aria-pressed="@ariaPressedValue"
|
|
||||||
@attributes="UserAttributes" />
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
using Connected.Annotations;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
|
||||||
|
|
||||||
namespace Connected.Components;
|
|
||||||
|
|
||||||
public partial class ToggleIconButton : UIComponent
|
|
||||||
{
|
|
||||||
/// <summary>
|
|
||||||
/// The toggled value.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public bool Toggled { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Fires whenever toggled is changed.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter] public EventCallback<bool> ToggledChanged { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The Icon that will be used in the untoggled state.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public string Icon { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The Icon that will be used in the toggled state.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public string ToggledIcon { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Title of the icon used for accessibility.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public string Title { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// Title used in toggled state, if different.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public string ToggledTitle { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The color of the icon in the untoggled state. It supports the theme colors.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public ThemeColor Color { get; set; } = ThemeColor.Default;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The color of the icon in the toggled state. It supports the theme colors.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public ThemeColor ToggledColor { get; set; } = ThemeColor.Default;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The Size of the component in the untoggled state.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Size Size { get; set; } = Size.Medium;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The Size of the component in the toggled state.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Size ToggledSize { get; set; } = Size.Medium;
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If set uses a negative margin.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Edge Edge { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, disables ripple effect.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public bool DisableRipple { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// If true, the button will be disabled.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Behavior)]
|
|
||||||
public bool Disabled { get; set; }
|
|
||||||
|
|
||||||
/// <summary>
|
|
||||||
/// The variant to use.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Button.Appearance)]
|
|
||||||
public Variant Variant { get; set; } = Variant.Text;
|
|
||||||
|
|
||||||
public Task Toggle()
|
|
||||||
{
|
|
||||||
return SetToggledAsync(!Toggled);
|
|
||||||
}
|
|
||||||
|
|
||||||
protected internal async Task SetToggledAsync(bool toggled)
|
|
||||||
{
|
|
||||||
if (Disabled)
|
|
||||||
return;
|
|
||||||
if (Toggled != toggled)
|
|
||||||
{
|
|
||||||
Toggled = toggled;
|
|
||||||
await ToggledChanged.InvokeAsync(Toggled);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,11 +2,11 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<Element HtmlTag="div" Class="@Classname" Style="@Style" Tag="@Tag" UserAttributes="@UserAttributes">
|
<Element HtmlTag="div" Class="@Classname" Tag="@Tag" UserAttributes="@CustomAttributes">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</Element>
|
</Element>
|
||||||
|
|
||||||
@{
|
@{
|
||||||
if(!UserAttributes.ContainsKey("role"))
|
if(!CustomAttributes.ContainsKey("role"))
|
||||||
UserAttributes.Add("role", "group");
|
CustomAttributes.Add("role", "group");
|
||||||
}
|
}
|
||||||
@ -8,16 +8,16 @@ namespace Connected.Components;
|
|||||||
public partial class ButtonGroup : UIComponent
|
public partial class ButtonGroup : UIComponent
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-button-group-root")
|
new CssBuilder("button-group-root")
|
||||||
.AddClass($"mud-button-group-override-styles", OverrideStyles)
|
.AddClass($"button-group-override-styles", OverrideStyles)
|
||||||
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}")
|
.AddClass($"button-group-{Variant.ToDescription()}")
|
||||||
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
|
.AddClass($"button-group-{Variant.ToDescription()}-{Color.ToDescription()}")
|
||||||
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
|
.AddClass($"button-group-{Variant.ToDescription()}-size-{Size.ToDescription()}")
|
||||||
.AddClass($"mud-button-group-vertical", VerticalAlign)
|
.AddClass($"button-group-vertical", VerticalAlign)
|
||||||
.AddClass($"mud-button-group-horizontal", !VerticalAlign)
|
.AddClass($"button-group-horizontal", !VerticalAlign)
|
||||||
.AddClass($"mud-button-group-disable-elevation", DisableElevation)
|
.AddClass($"button-group-disable-elevation", DisableElevation)
|
||||||
.AddClass($"mud-button-group-rtl", RightToLeft)
|
.AddClass($"button-group-rtl", RightToLeft)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -2,6 +2,6 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<Paper @attributes="UserAttributes" Class="@Classname" Style="@Style" Outlined="@Outlined" Square="@Square" Elevation="@Elevation">
|
<Paper @attributes="CustomAttributes" Class="@Classname" Outlined="@Outlined" Square="@Square" Elevation="@Elevation">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</Paper>
|
</Paper>
|
||||||
|
|||||||
@ -7,8 +7,8 @@ namespace Connected.Components;
|
|||||||
public partial class Card : UIComponent
|
public partial class Card : UIComponent
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-card")
|
new CssBuilder("card")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
|||||||
@ -2,6 +2,6 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,8 +7,8 @@ namespace Connected.Components;
|
|||||||
public partial class CardActions : UIComponent
|
public partial class CardActions : UIComponent
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-card-actions")
|
new CssBuilder("card-actions")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
|||||||
@ -2,6 +2,6 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,8 +7,8 @@ namespace Connected.Components;
|
|||||||
public partial class CardContent : UIComponent
|
public partial class CardContent : UIComponent
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-card-content")
|
new CssBuilder("card-content")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
|||||||
@ -2,18 +2,18 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@if (CardHeaderAvatar is not null)
|
@if (CardHeaderAvatar is not null)
|
||||||
{
|
{
|
||||||
<div class="mud-card-header-avatar">@CardHeaderAvatar</div>
|
<div class="card-header-avatar">@CardHeaderAvatar</div>
|
||||||
}
|
}
|
||||||
@if (CardHeaderContent is not null)
|
@if (CardHeaderContent is not null)
|
||||||
{
|
{
|
||||||
<div class="mud-card-header-content">@CardHeaderContent</div>
|
<div class="card-header-content">@CardHeaderContent</div>
|
||||||
}
|
}
|
||||||
@if (CardHeaderActions is not null)
|
@if (CardHeaderActions is not null)
|
||||||
{
|
{
|
||||||
<div class="mud-card-header-actions">@CardHeaderActions</div>
|
<div class="card-header-actions">@CardHeaderActions</div>
|
||||||
}
|
}
|
||||||
@if (ChildContent is not null)
|
@if (ChildContent is not null)
|
||||||
{
|
{
|
||||||
|
|||||||
@ -7,8 +7,8 @@ namespace Connected.Components;
|
|||||||
public partial class CardHeader : UIComponent
|
public partial class CardHeader : UIComponent
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-card-header")
|
new CssBuilder("card-header")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
|||||||
@ -2,4 +2,4 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" title="@Title" class="@Classname" style="@StyleString"></div>
|
<div @attributes="CustomAttributes" title="@Title" class="@Classname" style="@StyleString"></div>
|
||||||
|
|||||||
@ -8,16 +8,15 @@ public partial class CardMedia : UIComponent
|
|||||||
{
|
{
|
||||||
protected string StyleString =>
|
protected string StyleString =>
|
||||||
StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
|
StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
|
||||||
.AddStyle(this.Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-card-media")
|
new CssBuilder("card-media")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Title of the image used for accessibility.
|
/// GlyphTitle of the image used for accessibility.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Card.Behavior)]
|
[Category(CategoryTypes.Card.Behavior)]
|
||||||
|
|||||||
@ -4,10 +4,10 @@
|
|||||||
@implements IAsyncDisposable
|
@implements IAsyncDisposable
|
||||||
@typeparam TData
|
@typeparam TData
|
||||||
|
|
||||||
<section @attributes="UserAttributes" aria-roledescription="carousel" class="@Classname" style="@Style">
|
<section @attributes="CustomAttributes" aria-roledescription="carousel" class="@Classname">
|
||||||
<CascadingValue Value="this">
|
<CascadingValue Value="this">
|
||||||
|
|
||||||
<SwipeArea OnSwipe="OnSwipe" Class="mud-carousel-swipe">
|
<SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">
|
||||||
@*Selected Content*@
|
@*Selected Content*@
|
||||||
@if (ItemsSource == null)
|
@if (ItemsSource == null)
|
||||||
{
|
{
|
||||||
@ -42,7 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@*Bullets*@
|
@*Bullets*@
|
||||||
<div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescriptionString()}")" style="z-index:3">
|
<div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescription()}")" style="z-index:3">
|
||||||
@if (ShowBullets)
|
@if (ShowBullets)
|
||||||
{
|
{
|
||||||
<div class="d-flex justify-center">
|
<div class="d-flex justify-center">
|
||||||
|
|||||||
@ -9,15 +9,15 @@ namespace Connected.Components;
|
|||||||
public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable
|
public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-carousel")
|
new CssBuilder("carousel")
|
||||||
.AddClass($"mud-carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}")
|
.AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescription()}")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string NavigationButtonsClassName =>
|
protected string NavigationButtonsClassName =>
|
||||||
new CssBuilder()
|
new CssBuilder()
|
||||||
.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescriptionString()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
|
.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescription()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
|
||||||
.AddClass("mud-carousel-elements-rtl", RightToLeft)
|
.AddClass("carousel-elements-rtl", RightToLeft)
|
||||||
.AddClass(NavigationButtonsClass)
|
.AddClass(NavigationButtonsClass)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
@if (IsVisible)
|
@if (IsVisible)
|
||||||
{
|
{
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@ -8,31 +8,31 @@ namespace Connected.Components;
|
|||||||
public partial class CarouselItem : UIComponent, IDisposable
|
public partial class CarouselItem : UIComponent, IDisposable
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-carousel-item")
|
new CssBuilder("carousel-item")
|
||||||
.AddClass($"mud-carousel-item-{Color.ToDescriptionString()}")
|
.AddClass($"carousel-item-{Color.ToDescription()}")
|
||||||
.AddClass("mud-carousel-item-exit", !_disposed && Parent.LastContainer == this)
|
.AddClass("carousel-item-exit", !_disposed && Parent.LastContainer == this)
|
||||||
|
|
||||||
.AddClass("mud-carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this)
|
.AddClass("carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this)
|
||||||
.AddClass("mud-carousel-transition-fade-out", !_disposed && Transition == Transition.Fade && Parent.LastContainer == this)
|
.AddClass("carousel-transition-fade-out", !_disposed && Transition == Transition.Fade && Parent.LastContainer == this)
|
||||||
|
|
||||||
.AddClass("mud-carousel-transition-slide-next-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && Parent._moveNext)
|
.AddClass("carousel-transition-slide-next-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && Parent._moveNext)
|
||||||
.AddClass("mud-carousel-transition-slide-next-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && Parent._moveNext)
|
.AddClass("carousel-transition-slide-next-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && Parent._moveNext)
|
||||||
|
|
||||||
.AddClass("mud-carousel-transition-slide-prev-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && !Parent._moveNext)
|
.AddClass("carousel-transition-slide-prev-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && !Parent._moveNext)
|
||||||
.AddClass("mud-carousel-transition-slide-prev-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && !Parent._moveNext)
|
.AddClass("carousel-transition-slide-prev-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && !Parent._moveNext)
|
||||||
|
|
||||||
.AddClass("mud-carousel-transition-slide-next-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && Parent._moveNext)
|
.AddClass("carousel-transition-slide-next-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && Parent._moveNext)
|
||||||
.AddClass("mud-carousel-transition-slide-next-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && Parent._moveNext)
|
.AddClass("carousel-transition-slide-next-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && Parent._moveNext)
|
||||||
|
|
||||||
.AddClass("mud-carousel-transition-slide-prev-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && !Parent._moveNext)
|
.AddClass("carousel-transition-slide-prev-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && !Parent._moveNext)
|
||||||
.AddClass("mud-carousel-transition-slide-prev-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && !Parent._moveNext)
|
.AddClass("carousel-transition-slide-prev-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && !Parent._moveNext)
|
||||||
|
|
||||||
.AddClass("mud-carousel-transition-none", !_disposed && Transition == Transition.None && Parent.SelectedContainer != this)
|
.AddClass("carousel-transition-none", !_disposed && Transition == Transition.None && Parent.SelectedContainer != this)
|
||||||
|
|
||||||
.AddClass(CustomTransitionEnter, !_disposed && Transition == Transition.Custom && Parent.SelectedContainer == this && Parent.SelectedContainer == this)
|
.AddClass(CustomTransitionEnter, !_disposed && Transition == Transition.Custom && Parent.SelectedContainer == this && Parent.SelectedContainer == this)
|
||||||
.AddClass(CustomTransitionExit, !_disposed && Transition == Transition.Custom && Parent.LastContainer == this && Parent.LastContainer == this)
|
.AddClass(CustomTransitionExit, !_disposed && Transition == Transition.Custom && Parent.LastContainer == this && Parent.LastContainer == this)
|
||||||
|
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<CascadingValue Value="@this" IsFixed="true">
|
<CascadingValue Value="@this" IsFixed="true">
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style" dir="ltr">
|
<div @attributes="CustomAttributes" class="@Classname" dir="ltr">
|
||||||
@if (ChartType == ChartType.Donut)
|
@if (ChartType == ChartType.Donut)
|
||||||
{
|
{
|
||||||
<Donut InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Donut>
|
<Donut InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Donut>
|
||||||
|
|||||||
@ -36,9 +36,9 @@ public partial class Chart : UIComponent
|
|||||||
public RenderFragment CustomGraphics { get; set; }
|
public RenderFragment CustomGraphics { get; set; }
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-chart")
|
new CssBuilder("chart")
|
||||||
.AddClass($"mud-chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}")
|
.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescription()}")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
|
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
@using System.Globalization;
|
@using System.Globalization;
|
||||||
@inherits Chart
|
@inherits Chart
|
||||||
|
|
||||||
<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
<svg @attributes="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
||||||
<g class="mud-charts-grid">
|
<g class="charts-grid">
|
||||||
<g class="mud-charts-gridlines-yaxis">
|
<g class="charts-gridlines-yaxis">
|
||||||
@foreach (var horizontalLine in _horizontalLines)
|
@foreach (var horizontalLine in _horizontalLines)
|
||||||
{
|
{
|
||||||
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
|
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
|
||||||
@ -12,7 +12,7 @@
|
|||||||
</g>
|
</g>
|
||||||
@if (ChartParent?.ChartOptions.XAxisLines==true)
|
@if (ChartParent?.ChartOptions.XAxisLines==true)
|
||||||
{
|
{
|
||||||
<g class="mud-charts-gridlines-xaxis-lines">
|
<g class="charts-gridlines-xaxis-lines">
|
||||||
@foreach (var verticalLine in _verticalLines)
|
@foreach (var verticalLine in _verticalLines)
|
||||||
{
|
{
|
||||||
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
|
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
|
||||||
@ -20,22 +20,22 @@
|
|||||||
</g>
|
</g>
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
<g class="mud-charts-yaxis">
|
<g class="charts-yaxis">
|
||||||
@foreach (var horizontalLineValue in _horizontalValues)
|
@foreach (var horizontalLineValue in _horizontalValues)
|
||||||
{
|
{
|
||||||
@((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
@((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
<g class="mud-charts-xaxis">
|
<g class="charts-xaxis">
|
||||||
@foreach (var verticalLineValue in _verticalValues)
|
@foreach (var verticalLineValue in _verticalValues)
|
||||||
{
|
{
|
||||||
@((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
@((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
<g class="mud-charts-bar-series">
|
<g class="charts-bar-series">
|
||||||
@foreach (var bar in _bars)
|
@foreach (var bar in _bars)
|
||||||
{
|
{
|
||||||
<path class="mud-chart-bar" @onclick="() => SelectedIndex = bar.Index" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke-width="8" d="@bar.Data"></path>
|
<path class="chart-bar" @onclick="() => SelectedIndex = bar.Index" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke-width="8" d="@bar.Data"></path>
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
|
|||||||
@ -2,12 +2,12 @@
|
|||||||
@using System.Globalization
|
@using System.Globalization
|
||||||
@inherits Chart
|
@inherits Chart
|
||||||
|
|
||||||
<svg @attributes="UserAttributes" class="mud-chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
|
<svg @attributes="CustomAttributes" class="chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
|
||||||
<Filters />
|
<Filters />
|
||||||
<circle class="mud-donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
|
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
|
||||||
@foreach (var item in _circles.ToList())
|
@foreach (var item in _circles.ToList())
|
||||||
{
|
{
|
||||||
<circle class="mud-chart-serie mud-donut-segment" @onclick="() => SelectedIndex = item.Index" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))"
|
<circle class="chart-serie mud-donut-segment" @onclick="() => SelectedIndex = item.Index" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))"
|
||||||
cx="@ToS(item.CX)"
|
cx="@ToS(item.CX)"
|
||||||
cy="@ToS(item.CY)"
|
cy="@ToS(item.CY)"
|
||||||
r="@ToS(item.Radius)"
|
r="@ToS(item.Radius)"
|
||||||
@ -15,7 +15,7 @@
|
|||||||
stroke-dashoffset="@ToS(item.StrokeDashOffset)">
|
stroke-dashoffset="@ToS(item.StrokeDashOffset)">
|
||||||
</circle>
|
</circle>
|
||||||
}
|
}
|
||||||
<circle class="mud-donut-hole" cx="21" cy="21" r="13.4"></circle>
|
<circle class="donut-hole" cx="21" cy="21" r="13.4"></circle>
|
||||||
|
|
||||||
@ChartParent?.CustomGraphics
|
@ChartParent?.CustomGraphics
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
@using System.Globalization;
|
@using System.Globalization;
|
||||||
@inherits Chart
|
@inherits Chart
|
||||||
|
|
||||||
<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
<svg @attributes="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
|
||||||
<g class="mud-charts-grid">
|
<g class="charts-grid">
|
||||||
<g class="mud-charts-gridlines-yaxis">
|
<g class="charts-gridlines-yaxis">
|
||||||
@foreach (var horizontalLine in _horizontalLines)
|
@foreach (var horizontalLine in _horizontalLines)
|
||||||
{
|
{
|
||||||
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
|
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
|
||||||
@ -12,7 +12,7 @@
|
|||||||
</g>
|
</g>
|
||||||
@if (ChartParent?.ChartOptions.XAxisLines==true)
|
@if (ChartParent?.ChartOptions.XAxisLines==true)
|
||||||
{
|
{
|
||||||
<g class="mud-charts-gridlines-xaxis-lines">
|
<g class="charts-gridlines-xaxis-lines">
|
||||||
@foreach (var verticalLine in _verticalLines)
|
@foreach (var verticalLine in _verticalLines)
|
||||||
{
|
{
|
||||||
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
|
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
|
||||||
@ -20,22 +20,22 @@
|
|||||||
</g>
|
</g>
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
<g class="mud-charts-yaxis">
|
<g class="charts-yaxis">
|
||||||
@foreach (var horizontalLineValue in _horizontalValues)
|
@foreach (var horizontalLineValue in _horizontalValues)
|
||||||
{
|
{
|
||||||
@((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
@((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
<g class="mud-charts-xaxis">
|
<g class="charts-xaxis">
|
||||||
@foreach (var verticalLineValue in _verticalValues)
|
@foreach (var verticalLineValue in _verticalValues)
|
||||||
{
|
{
|
||||||
@((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
@((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
<g class="mud-charts-line-series">
|
<g class="charts-line-series">
|
||||||
@foreach (var chartLine in _chartLines)
|
@foreach (var chartLine in _chartLines)
|
||||||
{
|
{
|
||||||
<path class="mud-chart-line" @onclick="() => SelectedIndex = chartLine.Index" fill="none" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="@(ChartParent.ChartOptions.LineStrokeWidth)" d="@chartLine.Data"></path>
|
<path class="chart-line" @onclick="() => SelectedIndex = chartLine.Index" fill="none" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="@(ChartParent.ChartOptions.LineStrokeWidth)" d="@chartLine.Data"></path>
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
|
|||||||
@ -2,11 +2,11 @@
|
|||||||
@using System.Globalization
|
@using System.Globalization
|
||||||
@inherits Chart
|
@inherits Chart
|
||||||
|
|
||||||
<svg @attributes="UserAttributes" class="mud-chart-pie" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="-1 -1 2 2" style="transform: rotate(-90deg);">
|
<svg @attributes="CustomAttributes" class="chart-pie" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="-1 -1 2 2" style="transform: rotate(-90deg);">
|
||||||
<Filters />
|
<Filters />
|
||||||
@foreach (var item in _paths.ToList())
|
@foreach (var item in _paths.ToList())
|
||||||
{
|
{
|
||||||
<path @onclick="() => SelectedIndex = item.Index" class="mud-chart-serie" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))" d="@item.Data"></path>
|
<path @onclick="() => SelectedIndex = item.Index" class="chart-serie" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))" d="@item.Data"></path>
|
||||||
}
|
}
|
||||||
|
|
||||||
@ChartParent?.CustomGraphics
|
@ChartParent?.CustomGraphics
|
||||||
|
|||||||
@ -3,11 +3,11 @@
|
|||||||
|
|
||||||
@if (ChartParent?.ChartOptions.DisableLegend != true)
|
@if (ChartParent?.ChartOptions.DisableLegend != true)
|
||||||
{
|
{
|
||||||
<div @attributes="UserAttributes" class="mud-chart-legend">
|
<div @attributes="CustomAttributes" class="chart-legend">
|
||||||
@foreach (var item in Data)
|
@foreach (var item in Data)
|
||||||
{
|
{
|
||||||
<div class="mud-chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>
|
<div class="chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>
|
||||||
<span class="mud-chart-legend-marker" style="@($"background-color:{ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count())}")"></span>
|
<span class="chart-legend-marker" style="@($"background-color:{ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count())}")"></span>
|
||||||
<TextContent Typo="Typo.body2" Inline="true">@item.Labels</TextContent>
|
<TextContent Typo="Typo.body2" Inline="true">@item.Labels</TextContent>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,12 +2,12 @@
|
|||||||
@inherits BooleanInput<T>
|
@inherits BooleanInput<T>
|
||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
<InputControl Class="@Classname" Style="@Style" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
|
<InputControl Class="@Classname" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
|
||||||
<InputContent>
|
<InputContent>
|
||||||
<label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation">
|
<label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation">
|
||||||
<span tabindex="0" class="@CheckBoxClassname">
|
<span tabindex="0" class="@CheckBoxClassname">
|
||||||
@*note: stopping the click propagation is important here. otherwise checking the checkbox results in click events on its parent (i.e. table row), which is generally not what you would want*@
|
@*note: stopping the click propagation is important here. otherwise checking the checkbox results in click events on its parent (i.e. table row), which is generally not what you would want*@
|
||||||
<input tabindex="-1" @attributes="UserAttributes" type="checkbox" class="mud-checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
|
<input tabindex="-1" @attributes="CustomAttributes" type="checkbox" class="checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
|
||||||
<Icon Icon="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" />
|
<Icon Icon="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" />
|
||||||
</span>
|
</span>
|
||||||
@if (!String.IsNullOrEmpty(Label))
|
@if (!String.IsNullOrEmpty(Label))
|
||||||
|
|||||||
@ -10,25 +10,25 @@ namespace Connected.Components;
|
|||||||
public partial class CheckBox<T> : BooleanInput<T>
|
public partial class CheckBox<T> : BooleanInput<T>
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-input-control-boolean-input")
|
new CssBuilder("input-control-boolean-input")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string LabelClassname =>
|
protected string LabelClassname =>
|
||||||
new CssBuilder("mud-checkbox")
|
new CssBuilder("checkbox")
|
||||||
.AddClass($"mud-disabled", Disabled)
|
.AddClass($"disabled", Disabled)
|
||||||
.AddClass($"mud-readonly", ReadOnly)
|
.AddClass($"readonly", ReadOnly)
|
||||||
.AddClass(LabelPosition == LabelPosition.End ? "mud-ltr" : "mud-rtl", true)
|
.AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string CheckBoxClassname =>
|
protected string CheckBoxClassname =>
|
||||||
new CssBuilder("mud-button-root mud-icon-button")
|
new CssBuilder("button-root mud-icon-button")
|
||||||
.AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
|
.AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
|
||||||
.AddClass($"mud-{UnCheckedColor?.ToDescriptionString()}-text hover:mud-{UnCheckedColor?.ToDescriptionString()}-hover", UnCheckedColor != null && BoolValue == false)
|
.AddClass($"{UnCheckedColor?.ToDescription()}-text hover:mud-{UnCheckedColor?.ToDescription()}-hover", UnCheckedColor != null && BoolValue == false)
|
||||||
.AddClass($"mud-checkbox-dense", Dense)
|
.AddClass($"checkbox-dense", Dense)
|
||||||
.AddClass($"mud-ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
|
.AddClass($"ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
|
||||||
.AddClass($"mud-disabled", Disabled)
|
.AddClass($"disabled", Disabled)
|
||||||
.AddClass($"mud-readonly", ReadOnly)
|
.AddClass($"readonly", ReadOnly)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
@ -225,7 +225,7 @@ public partial class CheckBox<T> : BooleanInput<T>
|
|||||||
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
|
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
|
||||||
{
|
{
|
||||||
//EnableLogging = true,
|
//EnableLogging = true,
|
||||||
TargetClass = "mud-button-root",
|
TargetClass = "button-root",
|
||||||
Keys = {
|
Keys = {
|
||||||
new KeyOptions { Key=" ", PreventDown = "key+none", PreventUp = "key+none" }, // prevent scrolling page
|
new KeyOptions { Key=" ", PreventDown = "key+none", PreventUp = "key+none" }, // prevent scrolling page
|
||||||
new KeyOptions { Key="Enter", PreventDown = "key+none" },
|
new KeyOptions { Key="Enter", PreventDown = "key+none" },
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div tabindex="0" @attributes="UserAttributes" class="@Classname" style="@Style" @onclick="@OnClickHandler">
|
<div tabindex="0" @attributes="CustomAttributes" class="@Classname" @onclick="@OnClickHandler">
|
||||||
@if (!String.IsNullOrEmpty(Avatar))
|
@if (!String.IsNullOrEmpty(Avatar))
|
||||||
{
|
{
|
||||||
<Avatar Class="@AvatarClass" Color="@Color">
|
<Avatar Class="@AvatarClass" Color="@Color">
|
||||||
@ -10,13 +10,13 @@
|
|||||||
}
|
}
|
||||||
else if (!String.IsNullOrEmpty(Icon) && !IsChecked)
|
else if (!String.IsNullOrEmpty(Icon) && !IsChecked)
|
||||||
{
|
{
|
||||||
<Icon Icon="@Icon" Class="mud-chip-icon" Size="Size.Small" Color="@IconColor" />
|
<Icon Icon="@Icon" Class="chip-icon" Size="Size.Small" Color="@IconColor" />
|
||||||
}
|
}
|
||||||
else if (IsChecked)
|
else if (IsChecked)
|
||||||
{
|
{
|
||||||
<Icon Icon="@CheckedIcon" Class="mud-chip-icon" Size="Size.Small" />
|
<Icon Icon="@CheckedIcon" Class="chip-icon" Size="Size.Small" />
|
||||||
}
|
}
|
||||||
<span class="mud-chip-content">
|
<span class="chip-content">
|
||||||
@if (ChildContent == null)
|
@if (ChildContent == null)
|
||||||
{
|
{
|
||||||
@Text
|
@Text
|
||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
@if (OnClose.HasDelegate || ChipSet?.AllClosable==true)
|
@if (OnClose.HasDelegate || ChipSet?.AllClosable==true)
|
||||||
{
|
{
|
||||||
<IconButton Class="mud-chip-close-button" Icon="@(String.IsNullOrEmpty(CloseIcon) ? $"{Icons.Material.Filled.Cancel}" : $"{CloseIcon}")" OnClick="OnCloseHandler" Size="Size.Small"/>
|
<IconButton Class="chip-close-button" Icon="@(String.IsNullOrEmpty(CloseIcon) ? $"{Icons.Material.Filled.Cancel}" : $"{CloseIcon}")" OnClick="OnCloseHandler" Size="Size.Small"/>
|
||||||
}
|
}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -16,16 +16,16 @@ public partial class Chip : UIComponent, IDisposable
|
|||||||
[Inject] public IJsApiService JsApiService { get; set; }
|
[Inject] public IJsApiService JsApiService { get; set; }
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-chip")
|
new CssBuilder("chip")
|
||||||
.AddClass($"mud-chip-{GetVariant().ToDescriptionString()}")
|
.AddClass($"chip-{GetVariant().ToDescription()}")
|
||||||
.AddClass($"mud-chip-size-{Size.ToDescriptionString()}")
|
.AddClass($"chip-size-{Size.ToDescription()}")
|
||||||
.AddClass($"mud-chip-color-{GetColor().ToDescriptionString()}")
|
.AddClass($"chip-color-{GetColor().ToDescription()}")
|
||||||
.AddClass("mud-clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
|
.AddClass("clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
|
||||||
.AddClass("mud-ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
|
.AddClass("ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
|
||||||
.AddClass("mud-chip-label", Label)
|
.AddClass("chip-label", Label)
|
||||||
.AddClass("mud-disabled", Disabled)
|
.AddClass("disabled", Disabled)
|
||||||
.AddClass("mud-chip-selected", IsSelected)
|
.AddClass("chip-selected", IsSelected)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
//Cannot test the get variant (last line)
|
//Cannot test the get variant (last line)
|
||||||
@ -88,7 +88,7 @@ public partial class Chip : UIComponent, IDisposable
|
|||||||
public ThemeColor SelectedColor { get; set; } = ThemeColor.Inherit;
|
public ThemeColor SelectedColor { get; set; } = ThemeColor.Inherit;
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Avatar Icon, Overrides the regular Icon if set.
|
/// Avatar Glyph, Overrides the regular Glyph if set.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Chip.Behavior)]
|
[Category(CategoryTypes.Chip.Behavior)]
|
||||||
@ -116,7 +116,7 @@ public partial class Chip : UIComponent, IDisposable
|
|||||||
public bool Disabled { get; set; }
|
public bool Disabled { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Sets the Icon to use.
|
/// Sets the Glyph to use.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Chip.Behavior)]
|
[Category(CategoryTypes.Chip.Behavior)]
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style" >
|
<div @attributes="CustomAttributes" class="@Classname">
|
||||||
<CascadingValue IsFixed="true" Value="this">
|
<CascadingValue IsFixed="true" Value="this">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
|
|||||||
@ -8,8 +8,8 @@ public partial class ChipSet : UIComponent, IDisposable
|
|||||||
{
|
{
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-chipset")
|
new CssBuilder("chipset")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
@using System.Globalization;
|
@using System.Globalization;
|
||||||
|
|
||||||
<div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="UserAttributes" class="@Classname" style="@Stylename">
|
<div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="CustomAttributes" class="@Classname" style="@Stylename">
|
||||||
<div @ref="_wrapper" class="mud-collapse-wrapper">
|
<div @ref="_wrapper" class="collapse-wrapper">
|
||||||
<div class="mud-collapse-wrapper-inner">
|
<div class="collapse-wrapper-inner">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -23,15 +23,14 @@ public partial class Collapse : UIComponent
|
|||||||
.AddStyle("height", "auto", _state == CollapseState.Entered)
|
.AddStyle("height", "auto", _state == CollapseState.Entered)
|
||||||
.AddStyle("height", _height.ToPx(), _state is CollapseState.Entering or CollapseState.Exiting)
|
.AddStyle("height", _height.ToPx(), _state is CollapseState.Entering or CollapseState.Exiting)
|
||||||
.AddStyle("animation-duration", $"{CalculatedAnimationDuration.ToString("#.##", CultureInfo.InvariantCulture)}s", _state == CollapseState.Entering)
|
.AddStyle("animation-duration", $"{CalculatedAnimationDuration.ToString("#.##", CultureInfo.InvariantCulture)}s", _state == CollapseState.Entering)
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-collapse-container")
|
new CssBuilder("collapse-container")
|
||||||
.AddClass($"mud-collapse-entering", _state == CollapseState.Entering)
|
.AddClass($"collapse-entering", _state == CollapseState.Entering)
|
||||||
.AddClass($"mud-collapse-entered", _state == CollapseState.Entered)
|
.AddClass($"collapse-entered", _state == CollapseState.Entered)
|
||||||
.AddClass($"mud-collapse-exiting", _state == CollapseState.Exiting)
|
.AddClass($"collapse-exiting", _state == CollapseState.Exiting)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
protected override RenderFragment PickerContent =>
|
protected override RenderFragment PickerContent =>
|
||||||
@<CascadingValue Value="@this" IsFixed="true">
|
@<CascadingValue Value="@this" IsFixed="true">
|
||||||
<PickerToolbar DisableToolbar="@DisableToolbar" Class="mud-picker-color-toolbar">
|
<PickerToolbar DisableToolbar="@DisableToolbar" Class="picker-color-toolbar">
|
||||||
@if (PickerVariant != PickerVariant.Static)
|
@if (PickerVariant != PickerVariant.Static)
|
||||||
{
|
{
|
||||||
<IconButton Class="pa-1 mud-close-picker-button" Size="Size.Small" Color="ThemeColor.Inherit" Icon="@CloseIcon" OnClick="@GetEventCallback()" />
|
<IconButton Class="pa-1 mud-close-picker-button" Size="Size.Small" Color="ThemeColor.Inherit" Icon="@CloseIcon" OnClick="@GetEventCallback()" />
|
||||||
@ -19,19 +19,19 @@
|
|||||||
<IconButton Class="pa-1 mx-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Grid)" Icon="@GridIcon" OnClick="(() => ChangeView(ColorPickerView.Grid))" />
|
<IconButton Class="pa-1 mx-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Grid)" Icon="@GridIcon" OnClick="(() => ChangeView(ColorPickerView.Grid))" />
|
||||||
<IconButton Class="pa-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Palette)" Icon="@PaletteIcon" OnClick="(() => ChangeView(ColorPickerView.Palette))" />
|
<IconButton Class="pa-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Palette)" Icon="@PaletteIcon" OnClick="(() => ChangeView(ColorPickerView.Palette))" />
|
||||||
</PickerToolbar>
|
</PickerToolbar>
|
||||||
<PickerContent Class="mud-picker-color-content">
|
<PickerContent Class="picker-color-content">
|
||||||
@if (!DisableColorField)
|
@if (!DisableColorField)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-picker">
|
<div class="picker-color-picker">
|
||||||
@if (_activeColorPickerView == ColorPickerView.Spectrum)
|
@if (_activeColorPickerView == ColorPickerView.Spectrum)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")">
|
<div class="picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")">
|
||||||
<div class="mud-picker-color-overlay mud-picker-color-overlay-white">
|
<div class="picker-color-overlay mud-picker-color-overlay-white">
|
||||||
<div class="mud-picker-color-overlay mud-picker-color-overlay-black">
|
<div class="picker-color-overlay mud-picker-color-overlay-black">
|
||||||
<div class="mud-picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick">
|
<div class="picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick">
|
||||||
<svg class="mud-picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true">
|
<svg class="picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true">
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="mud-picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%">
|
<filter id="picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
|
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
|
||||||
<feOffset dx="0" dy="5" result="offsetblur" />
|
<feOffset dx="0" dy="5" result="offsetblur" />
|
||||||
<feOffset dx="0" dy="-5" result="offsetblur" />
|
<feOffset dx="0" dy="-5" result="offsetblur" />
|
||||||
@ -48,7 +48,7 @@
|
|||||||
}
|
}
|
||||||
@if (_activeColorPickerView is ColorPickerView.Grid or ColorPickerView.GridCompact)
|
@if (_activeColorPickerView is ColorPickerView.Grid or ColorPickerView.GridCompact)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-grid">
|
<div class="picker-color-grid">
|
||||||
@foreach (var item in _gridList)
|
@foreach (var item in _gridList)
|
||||||
{
|
{
|
||||||
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
||||||
@ -61,32 +61,32 @@
|
|||||||
{
|
{
|
||||||
@if (!DisableSliders || !DisableInputs || !DisablePreview)
|
@if (!DisableSliders || !DisableInputs || !DisablePreview)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-controls">
|
<div class="picker-color-controls">
|
||||||
@if (!DisableSliders || !DisablePreview)
|
@if (!DisableSliders || !DisablePreview)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-controls-row">
|
<div class="picker-color-controls-row">
|
||||||
@if (!DisablePreview)
|
@if (!DisablePreview)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection">
|
<div class="picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection">
|
||||||
<div class="mud-picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div>
|
<div class="picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@if (!DisableSliders && !_collectionOpen)
|
@if (!DisableSliders && !_collectionOpen)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-sliders">
|
<div class="picker-color-sliders">
|
||||||
@if (_activeColorPickerView != ColorPickerView.Grid)
|
@if (_activeColorPickerView != ColorPickerView.Grid)
|
||||||
{
|
{
|
||||||
<Slider Class="mud-picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" />
|
<Slider Class="picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" />
|
||||||
}
|
}
|
||||||
@if (!DisableAlpha)
|
@if (!DisableAlpha)
|
||||||
{
|
{
|
||||||
<Slider Class="mud-picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" />
|
<Slider Class="picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" />
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@if (_collectionOpen)
|
@if (_collectionOpen)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-collection">
|
<div class="picker-color-collection">
|
||||||
@foreach (var item in Palette.Take(5))
|
@foreach (var item in Palette.Take(5))
|
||||||
{
|
{
|
||||||
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
||||||
@ -97,22 +97,22 @@
|
|||||||
}
|
}
|
||||||
@if (!DisableInputs)
|
@if (!DisableInputs)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-controls-row">
|
<div class="picker-color-controls-row">
|
||||||
<div class="mud-picker-color-inputs">
|
<div class="picker-color-inputs">
|
||||||
@switch (ColorPickerMode)
|
@switch (ColorPickerMode)
|
||||||
{
|
{
|
||||||
case ColorPickerMode.RGB:
|
case ColorPickerMode.RGB:
|
||||||
<NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="mud-picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
<NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||||
<NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="mud-picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
<NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||||
<NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="mud-picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
<NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||||
break;
|
break;
|
||||||
case ColorPickerMode.HSL:
|
case ColorPickerMode.HSL:
|
||||||
<NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="mud-picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" />
|
<NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||||
<NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="mud-picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
|
<NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||||
<NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="mud-picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
|
<NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||||
break;
|
break;
|
||||||
case ColorPickerMode.HEX:
|
case ColorPickerMode.HEX:
|
||||||
<TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="mud-picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" />
|
<TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" />
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
@ -120,12 +120,12 @@
|
|||||||
|
|
||||||
@if (!DisableAlpha && ColorPickerMode != ColorPickerMode.HEX)
|
@if (!DisableAlpha && ColorPickerMode != ColorPickerMode.HEX)
|
||||||
{
|
{
|
||||||
<NumericField Value="@( Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="mud-picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" />
|
<NumericField Value="@( Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" />
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
@if (!DisableModeSwitch)
|
@if (!DisableModeSwitch)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-control-switch">
|
<div class="picker-control-switch">
|
||||||
<IconButton OnClick="ChangeMode" Icon="@ImportExportIcon" Class="pa-1 me-n1"></IconButton>
|
<IconButton OnClick="ChangeMode" Icon="@ImportExportIcon" Class="pa-1 me-n1"></IconButton>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@ -135,8 +135,8 @@
|
|||||||
}
|
}
|
||||||
@if (_activeColorPickerView == ColorPickerView.Palette)
|
@if (_activeColorPickerView == ColorPickerView.Palette)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-color-view">
|
<div class="picker-color-view">
|
||||||
<div class="mud-picker-color-view-collection">
|
<div class="picker-color-view-collection">
|
||||||
@foreach (var item in Palette)
|
@foreach (var item in Palette)
|
||||||
{
|
{
|
||||||
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
|
||||||
|
|||||||
@ -535,7 +535,7 @@ public partial class ColorPicker : Picker<Color>, IAsyncDisposable
|
|||||||
private EventCallback<MouseEventArgs> GetSelectPaletteColorCallback(Color color) => new EventCallbackFactory().Create(this, (MouseEventArgs e) => SelectPaletteColor(color));
|
private EventCallback<MouseEventArgs> GetSelectPaletteColorCallback(Color color) => new EventCallbackFactory().Create(this, (MouseEventArgs e) => SelectPaletteColor(color));
|
||||||
|
|
||||||
private ThemeColor GetButtonColor(ColorPickerView view) => _activeColorPickerView == view ? ThemeColor.Primary : ThemeColor.Inherit;
|
private ThemeColor GetButtonColor(ColorPickerView view) => _activeColorPickerView == view ? ThemeColor.Primary : ThemeColor.Inherit;
|
||||||
private string GetColorDotClass(Color color) => new CssBuilder("mud-picker-color-dot").AddClass("selected", color == Value).ToString();
|
private string GetColorDotClass(Color color) => new CssBuilder("picker-color-dot").AddClass("selected", color == Value).ToString();
|
||||||
private string AlphaSliderStyle => new StyleBuilder().AddStyle($"background-image: linear-gradient(to {(RightToLeft ? "left" : "right")}, transparent, {_color.ToString(ColorOutputFormats.RGB)})").Build();
|
private string AlphaSliderStyle => new StyleBuilder().AddStyle($"background-image: linear-gradient(to {(RightToLeft ? "left" : "right")}, transparent, {_color.ToString(ColorOutputFormats.RGB)})").Build();
|
||||||
|
|
||||||
#endregion
|
#endregion
|
||||||
|
|||||||
@ -2,6 +2,6 @@
|
|||||||
|
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@Classname" style="@Style">
|
<div @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</div>
|
</div>
|
||||||
@ -1,36 +1,54 @@
|
|||||||
using Connected.Annotations;
|
using Connected.Utilities;
|
||||||
using Connected.Extensions;
|
|
||||||
using Connected.Utilities;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class Container : UIComponent
|
public partial class Container : UIComponent
|
||||||
{
|
{
|
||||||
protected string Classname =>
|
|
||||||
new CssBuilder("container")
|
|
||||||
.AddClass($"container-fixed", Fixed)
|
|
||||||
.AddClass($"container-maxwidth-{MaxWidth.ToDescriptionString()}", !Fixed)
|
|
||||||
.AddClass(Class)
|
|
||||||
.Build();
|
|
||||||
|
|
||||||
/// <summary>
|
#region Event callbacks
|
||||||
/// Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default.
|
#endregion
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Container.Behavior)]
|
|
||||||
public bool Fixed { get; set; } = false;
|
|
||||||
|
|
||||||
/// <summary>
|
#region Content placeholders
|
||||||
/// Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.
|
|
||||||
/// </summary>
|
|
||||||
[Parameter]
|
|
||||||
[Category(CategoryTypes.Container.Behavior)]
|
|
||||||
public MaxWidth MaxWidth { get; set; } = MaxWidth.Large;
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Child content of component.
|
/// Child content of component.
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Container.Behavior)]
|
|
||||||
public RenderFragment ChildContent { get; set; }
|
public RenderFragment ChildContent { get; set; }
|
||||||
|
|
||||||
|
#endregion
|
||||||
|
|
||||||
|
#region Styling properties
|
||||||
|
private CssBuilder CompiledClassList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new CssBuilder("container")
|
||||||
|
.AddClass(ClassList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected StyleBuilder CompiledStyleList
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return new StyleBuilder()
|
||||||
|
.AddStyle(StyleList);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? ClassList { get; set; }
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// A space separated list of class names, added on top of the default class list.
|
||||||
|
/// </summary>
|
||||||
|
[Parameter]
|
||||||
|
public string? StyleList { get; set; }
|
||||||
|
|
||||||
|
#endregion
|
||||||
}
|
}
|
||||||
|
|||||||
@ -65,8 +65,8 @@ internal class Cell<T>
|
|||||||
{
|
{
|
||||||
return new CssBuilder(_column.CellClassFunc?.Invoke(_item))
|
return new CssBuilder(_column.CellClassFunc?.Invoke(_item))
|
||||||
.AddClass(_column.CellClass)
|
.AddClass(_column.CellClass)
|
||||||
.AddClass("mud-table-cell")
|
.AddClass("table-cell")
|
||||||
.AddClass("mud-table-cell-hide", _column.HideSmall)
|
.AddClass("table-cell-hide", _column.HideSmall)
|
||||||
.AddClass("sticky-left", _column.StickyLeft)
|
.AddClass("sticky-left", _column.StickyLeft)
|
||||||
.AddClass("sticky-right", _column.StickyRight)
|
.AddClass("sticky-right", _column.StickyRight)
|
||||||
.AddClass($"edit-mode-cell", _dataGrid.EditMode == DataGridEditMode.Cell && _column.IsEditable)
|
.AddClass($"edit-mode-cell", _dataGrid.EditMode == DataGridEditMode.Cell && _column.IsEditable)
|
||||||
|
|||||||
@ -151,25 +151,25 @@ public partial class Column<T> : UIComponent
|
|||||||
public Action ColumnStateHasChanged { get; set; }
|
public Action ColumnStateHasChanged { get; set; }
|
||||||
|
|
||||||
internal string headerClassname =>
|
internal string headerClassname =>
|
||||||
new CssBuilder("mud-table-cell")
|
new CssBuilder("table-cell")
|
||||||
.AddClass("mud-table-cell-hide", HideSmall)
|
.AddClass("table-cell-hide", HideSmall)
|
||||||
.AddClass("sticky-left", StickyLeft)
|
.AddClass("sticky-left", StickyLeft)
|
||||||
.AddClass("sticky-right", StickyRight)
|
.AddClass("sticky-right", StickyRight)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
internal string cellClassname;
|
internal string cellClassname;
|
||||||
//internal string cellClassname =>
|
//internal string cellClassname =>
|
||||||
// new CssBuilder("mud-table-cell")
|
// new CssBuilder("table-cell")
|
||||||
// .AddClass("mud-table-cell-hide", HideSmall)
|
// .AddClass("table-cell-hide", HideSmall)
|
||||||
// .AddClass("sticky-right", StickyRight)
|
// .AddClass("sticky-right", StickyRight)
|
||||||
// .AddClass(Class)
|
// .AddClass(Class)
|
||||||
// .Build();
|
// .Build();
|
||||||
|
|
||||||
internal string footerClassname =>
|
internal string footerClassname =>
|
||||||
new CssBuilder("mud-table-cell")
|
new CssBuilder("table-cell")
|
||||||
.AddClass("mud-table-cell-hide", HideSmall)
|
.AddClass("table-cell-hide", HideSmall)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
internal bool grouping;
|
internal bool grouping;
|
||||||
|
|||||||
@ -6,12 +6,12 @@
|
|||||||
<CascadingValue IsFixed="true" Value="this">@Columns</CascadingValue>
|
<CascadingValue IsFixed="true" Value="this">@Columns</CascadingValue>
|
||||||
|
|
||||||
<CascadingValue IsFixed="true" Value="this">
|
<CascadingValue IsFixed="true" Value="this">
|
||||||
<div @attributes="UserAttributes" class="@_classname" style="@_style">
|
<div @attributes="CustomAttributes" class="@_classname" style="@_style">
|
||||||
@if (Items != null || ServerData != null)
|
@if (Items != null || ServerData != null)
|
||||||
{
|
{
|
||||||
@if (ToolBarContent != null)
|
@if (ToolBarContent != null)
|
||||||
{
|
{
|
||||||
<ToolBar Class="mud-table-toolbar">
|
<ToolBar Class="table-toolbar">
|
||||||
@ToolBarContent
|
@ToolBarContent
|
||||||
@if (ShowMenuIcon)
|
@if (ShowMenuIcon)
|
||||||
{
|
{
|
||||||
@ -24,14 +24,14 @@
|
|||||||
@if (ShowMenuIcon)
|
@if (ShowMenuIcon)
|
||||||
{
|
{
|
||||||
@*Add the default toolbar.*@
|
@*Add the default toolbar.*@
|
||||||
<ToolBar Class="mud-table-toolbar">
|
<ToolBar Class="table-toolbar">
|
||||||
<Spacer />
|
<Spacer />
|
||||||
@ToolbarMenu(this)
|
@ToolbarMenu(this)
|
||||||
</ToolBar>
|
</ToolBar>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<div @ref=_gridElement class="@_tableClass" style="@_tableStyle">
|
<div @ref=_gridElement class="@_tableClass" style="@_tableStyle">
|
||||||
<table class="mud-table-root">
|
<table class="table-root">
|
||||||
@if (ColGroup != null)
|
@if (ColGroup != null)
|
||||||
{
|
{
|
||||||
<colgroup>
|
<colgroup>
|
||||||
@ -42,7 +42,7 @@
|
|||||||
<CascadingValue Name="IsOnlyHeader" IsFixed="true" Value="true">
|
<CascadingValue Name="IsOnlyHeader" IsFixed="true" Value="true">
|
||||||
@Header
|
@Header
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
<tr class="mud-table-row">
|
<tr class="table-row">
|
||||||
@foreach (var column in RenderedColumns)
|
@foreach (var column in RenderedColumns)
|
||||||
{
|
{
|
||||||
<HeaderCell SortDirection="@(GetColumnSortDirection(column.Field))" T="T" Column="@column"></HeaderCell>
|
<HeaderCell SortDirection="@(GetColumnSortDirection(column.Field))" T="T" Column="@column"></HeaderCell>
|
||||||
@ -60,7 +60,7 @@
|
|||||||
@Filter(f, null)
|
@Filter(f, null)
|
||||||
}
|
}
|
||||||
</Grid>
|
</Grid>
|
||||||
<Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" OnClick="@AddFilter" Color="@ThemeColor.Primary">Add Filter</Button>
|
<Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" Clicked="@AddFilter" Color="@ThemeColor.Primary">Add Filter</Button>
|
||||||
@if (ServerData != null)
|
@if (ServerData != null)
|
||||||
{
|
{
|
||||||
<Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" OnClick="@ApplyFilters" Color="@ThemeColor.Primary">Apply</Button>
|
<Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" OnClick="@ApplyFilters" Color="@ThemeColor.Primary">Apply</Button>
|
||||||
@ -96,7 +96,7 @@
|
|||||||
}
|
}
|
||||||
@if (Filterable && FilterMode == DataGridFilterMode.ColumnFilterRow)
|
@if (Filterable && FilterMode == DataGridFilterMode.ColumnFilterRow)
|
||||||
{
|
{
|
||||||
<tr class="mud-table-row">
|
<tr class="table-row">
|
||||||
@foreach (var column in RenderedColumns)
|
@foreach (var column in RenderedColumns)
|
||||||
{
|
{
|
||||||
<FilterHeaderCell T="T" Column="@column" />
|
<FilterHeaderCell T="T" Column="@column" />
|
||||||
@ -104,12 +104,12 @@
|
|||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="mud-table-body">
|
<tbody class="table-body">
|
||||||
@if (Loading)
|
@if (Loading)
|
||||||
{
|
{
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="1000" class="mud-table-loading">
|
<td colspan="1000" class="table-loading">
|
||||||
<ProgressLinear Color="@LoadingProgressColor" Class="mud-table-loading-progress" Indeterminate="true" />
|
<ProgressLinear Color="@LoadingProgressColor" Class="table-loading-progress" Indeterminate="true" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
@ -121,13 +121,13 @@
|
|||||||
{
|
{
|
||||||
foreach (var g in _groups)
|
foreach (var g in _groups)
|
||||||
{
|
{
|
||||||
<tr class="mud-table-row">
|
<tr class="table-row">
|
||||||
@{ var groupClass = new CssBuilder(GroupClass).AddClass(GroupClassFunc?.Invoke(g)).Build(); }
|
@{ var groupClass = new CssBuilder(GroupClass).AddClass(GroupClassFunc?.Invoke(g)).Build(); }
|
||||||
@{ var groupStyle = new StyleBuilder().AddStyle(GroupStyle).AddStyle(GroupStyleFunc?.Invoke(g)).Build(); }
|
@{ var groupStyle = new StyleBuilder().AddStyle(GroupStyle).AddStyle(GroupStyleFunc?.Invoke(g)).Build(); }
|
||||||
|
|
||||||
<td class="mud-table-cell @groupClass" colspan="1000" style="background-color:var(--mud-palette-background-grey);@groupStyle">
|
<td class="table-cell @groupClass" colspan="1000" style="background-color:var(--mud-palette-background-grey);@groupStyle">
|
||||||
<IconButton
|
<IconButton
|
||||||
Class="mud-table-row-expander"
|
Class="table-row-expander"
|
||||||
Icon="@(g.IsExpanded ? Icons.Material.Filled.ExpandMore : Icons.Material.Filled.ChevronRight)"
|
Icon="@(g.IsExpanded ? Icons.Material.Filled.ExpandMore : Icons.Material.Filled.ChevronRight)"
|
||||||
OnClick="@(() => ToggleGroupExpansion(g))" />
|
OnClick="@(() => ToggleGroupExpansion(g))" />
|
||||||
|
|
||||||
@ -149,7 +149,7 @@
|
|||||||
@{ var rowClass = new CssBuilder(RowClass).AddClass(RowClassFunc?.Invoke(item, rowIndex)).Build(); }
|
@{ var rowClass = new CssBuilder(RowClass).AddClass(RowClassFunc?.Invoke(item, rowIndex)).Build(); }
|
||||||
@{ var rowStyle = new StyleBuilder().AddStyle(RowStyle).AddStyle(RowStyleFunc?.Invoke(item, rowIndex)).Build(); }
|
@{ var rowStyle = new StyleBuilder().AddStyle(RowStyle).AddStyle(RowStyleFunc?.Invoke(item, rowIndex)).Build(); }
|
||||||
@{ var tmpRowIndex = rowIndex; }
|
@{ var tmpRowIndex = rowIndex; }
|
||||||
<tr class="mud-table-row @rowClass" Style="@rowStyle" @key="item" @onclick="@((args) => OnRowClickedAsync(args, item, tmpRowIndex))">
|
<tr class="table-row @rowClass" Style="@rowStyle" @key="item" @onclick="@((args) => OnRowClickedAsync(args, item, tmpRowIndex))">
|
||||||
<CascadingValue Value="@Validator" IsFixed="true">
|
<CascadingValue Value="@Validator" IsFixed="true">
|
||||||
@foreach (var column in RenderedColumns)
|
@foreach (var column in RenderedColumns)
|
||||||
{
|
{
|
||||||
@ -162,8 +162,8 @@
|
|||||||
</tr>
|
</tr>
|
||||||
@if (ChildRowContent != null && (_openHierarchies.Contains(item) || !hasHierarchyColumn))
|
@if (ChildRowContent != null && (_openHierarchies.Contains(item) || !hasHierarchyColumn))
|
||||||
{
|
{
|
||||||
<tr class="mud-table-row">
|
<tr class="table-row">
|
||||||
<td class="mud-table-cell" colspan="1000">
|
<td class="table-cell" colspan="1000">
|
||||||
@ChildRowContent(new CellContext<T>(this, item))
|
@ChildRowContent(new CellContext<T>(this, item))
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -171,7 +171,7 @@
|
|||||||
@{ rowIndex++; }
|
@{ rowIndex++; }
|
||||||
</Virtualize>
|
</Virtualize>
|
||||||
@*Group Footer*@
|
@*Group Footer*@
|
||||||
<tr class="mud-table-row">
|
<tr class="table-row">
|
||||||
@FooterCells(g.Grouping.ToList())
|
@FooterCells(g.Grouping.ToList())
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
@ -184,7 +184,7 @@
|
|||||||
@{ var rowClass = new CssBuilder(RowClass).AddClass(RowClassFunc?.Invoke(item, rowIndex)).Build(); }
|
@{ var rowClass = new CssBuilder(RowClass).AddClass(RowClassFunc?.Invoke(item, rowIndex)).Build(); }
|
||||||
@{ var rowStyle = new StyleBuilder().AddStyle(RowStyle).AddStyle(RowStyleFunc?.Invoke(item, rowIndex)).Build(); }
|
@{ var rowStyle = new StyleBuilder().AddStyle(RowStyle).AddStyle(RowStyleFunc?.Invoke(item, rowIndex)).Build(); }
|
||||||
@{ var tmpRowIndex = rowIndex; }
|
@{ var tmpRowIndex = rowIndex; }
|
||||||
<tr class="mud-table-row @rowClass" Style="@rowStyle" @key="item" @onclick="@((args) => OnRowClickedAsync(args, item, tmpRowIndex))">
|
<tr class="table-row @rowClass" Style="@rowStyle" @key="item" @onclick="@((args) => OnRowClickedAsync(args, item, tmpRowIndex))">
|
||||||
<CascadingValue Value="@Validator" IsFixed="true">
|
<CascadingValue Value="@Validator" IsFixed="true">
|
||||||
@foreach (var column in RenderedColumns)
|
@foreach (var column in RenderedColumns)
|
||||||
{
|
{
|
||||||
@ -197,8 +197,8 @@
|
|||||||
</tr>
|
</tr>
|
||||||
@if (ChildRowContent != null && (_openHierarchies.Contains(item) || !hasHierarchyColumn))
|
@if (ChildRowContent != null && (_openHierarchies.Contains(item) || !hasHierarchyColumn))
|
||||||
{
|
{
|
||||||
<tr class="mud-table-row">
|
<tr class="table-row">
|
||||||
<td class="mud-table-cell" colspan="1000">
|
<td class="table-cell" colspan="1000">
|
||||||
@ChildRowContent(new CellContext<T>(this, item))
|
@ChildRowContent(new CellContext<T>(this, item))
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@ -210,7 +210,7 @@
|
|||||||
else if(Loading ? LoadingContent != null : NoRecordsContent != null)
|
else if(Loading ? LoadingContent != null : NoRecordsContent != null)
|
||||||
{
|
{
|
||||||
<tr>
|
<tr>
|
||||||
<th colspan="1000" class="mud-table-empty-row">
|
<th colspan="1000" class="table-empty-row">
|
||||||
<div Class="my-3">
|
<div Class="my-3">
|
||||||
@if(Loading)
|
@if(Loading)
|
||||||
{
|
{
|
||||||
@ -226,7 +226,7 @@
|
|||||||
}
|
}
|
||||||
</tbody>
|
</tbody>
|
||||||
<tfoot class="@_footClassname">
|
<tfoot class="@_footClassname">
|
||||||
<tr class="mud-table-row">
|
<tr class="table-row">
|
||||||
@FooterCells(resolvedPageItems)
|
@FooterCells(resolvedPageItems)
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
@ -234,7 +234,7 @@
|
|||||||
</div>
|
</div>
|
||||||
@if (PagerContent != null)
|
@if (PagerContent != null)
|
||||||
{
|
{
|
||||||
<div class="mud-table-pagination">
|
<div class="table-pagination">
|
||||||
@PagerContent
|
@PagerContent
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@ -273,8 +273,8 @@
|
|||||||
</Form>
|
</Form>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
<Button Variant="Variant.Filled" Color="ThemeColor.Default" OnClick="@CancelEditingItemAsync" Class="px-10">Cancel</Button>
|
<Button Variant="Variant.Filled" Color="ThemeColor.Default" Clicked="@CancelEditingItemAsync" Class="px-10">Cancel</Button>
|
||||||
<Button Variant="Variant.Filled" Color="ThemeColor.Primary" OnClick="@CommitItemChangesAsync" Class="px-10">Save</Button>
|
<Button Variant="Variant.Filled" Color="ThemeColor.Primary" Clicked="@CommitItemChangesAsync" Class="px-10">Save</Button>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</CascadingValue>
|
</CascadingValue>
|
||||||
|
|||||||
@ -29,30 +29,29 @@ public partial class DataGrid<T> : UIComponent
|
|||||||
private PropertyInfo[] _properties = typeof(T).GetProperties();
|
private PropertyInfo[] _properties = typeof(T).GetProperties();
|
||||||
|
|
||||||
protected string _classname =>
|
protected string _classname =>
|
||||||
new CssBuilder("mud-table")
|
new CssBuilder("table")
|
||||||
.AddClass("mud-data-grid")
|
.AddClass("data-grid")
|
||||||
.AddClass("mud-xs-table", Breakpoint == Breakpoint.Xs)
|
.AddClass("xs-table", Breakpoint == Breakpoint.Xs)
|
||||||
.AddClass("mud-sm-table", Breakpoint == Breakpoint.Sm)
|
.AddClass("sm-table", Breakpoint == Breakpoint.Sm)
|
||||||
.AddClass("mud-md-table", Breakpoint == Breakpoint.Md)
|
.AddClass("md-table", Breakpoint == Breakpoint.Md)
|
||||||
.AddClass("mud-lg-table", Breakpoint == Breakpoint.Lg || Breakpoint == Breakpoint.Always)
|
.AddClass("lg-table", Breakpoint == Breakpoint.Lg || Breakpoint == Breakpoint.Always)
|
||||||
.AddClass("mud-xl-table", Breakpoint == Breakpoint.Xl || Breakpoint == Breakpoint.Always)
|
.AddClass("xl-table", Breakpoint == Breakpoint.Xl || Breakpoint == Breakpoint.Always)
|
||||||
.AddClass("mud-table-dense", Dense)
|
.AddClass("table-dense", Dense)
|
||||||
.AddClass("mud-table-hover", Hover)
|
.AddClass("table-hover", Hover)
|
||||||
.AddClass("mud-table-bordered", Bordered)
|
.AddClass("table-bordered", Bordered)
|
||||||
.AddClass("mud-table-striped", Striped)
|
.AddClass("table-striped", Striped)
|
||||||
.AddClass("mud-table-outlined", Outlined)
|
.AddClass("table-outlined", Outlined)
|
||||||
.AddClass("mud-table-square", Square)
|
.AddClass("table-square", Square)
|
||||||
.AddClass("mud-table-sticky-header", FixedHeader)
|
.AddClass("table-sticky-header", FixedHeader)
|
||||||
.AddClass("mud-table-sticky-footer", FixedFooter)
|
.AddClass("table-sticky-footer", FixedFooter)
|
||||||
.AddClass($"mud-elevation-{Elevation}", !Outlined)
|
.AddClass($"elevation-{Elevation}", !Outlined)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string _style =>
|
protected string _style =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle("overflow-x", "auto", when: HorizontalScrollbar || ColumnResizeMode == ResizeMode.Container)
|
.AddStyle("overflow-x", "auto", when: HorizontalScrollbar || ColumnResizeMode == ResizeMode.Container)
|
||||||
.AddStyle("position", "relative", when: hasStickyColumns)
|
.AddStyle("position", "relative", when: hasStickyColumns)
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string _tableStyle =>
|
protected string _tableStyle =>
|
||||||
@ -63,14 +62,14 @@ public partial class DataGrid<T> : UIComponent
|
|||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string _tableClass =>
|
protected string _tableClass =>
|
||||||
new CssBuilder("mud-table-container")
|
new CssBuilder("table-container")
|
||||||
.AddClass("cursor-col-resize", when: IsResizing)
|
.AddClass("cursor-col-resize", when: IsResizing)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string _headClassname => new CssBuilder("mud-table-head")
|
protected string _headClassname => new CssBuilder("table-head")
|
||||||
.AddClass(HeaderClass).Build();
|
.AddClass(HeaderClass).Build();
|
||||||
|
|
||||||
protected string _footClassname => new CssBuilder("mud-table-foot")
|
protected string _footClassname => new CssBuilder("table-foot")
|
||||||
.AddClass(FooterClass).Build();
|
.AddClass(FooterClass).Build();
|
||||||
|
|
||||||
internal SortDirection GetColumnSortDirection(string columnName)
|
internal SortDirection GetColumnSortDirection(string columnName)
|
||||||
|
|||||||
@ -2,28 +2,28 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
<ToolBar @attributes="UserAttributes" Class="@Classname" Style="@Style">
|
<ToolBar @attributes="CustomAttributes" Class="@Classname">
|
||||||
<div class="mud-table-pagination-spacer"></div>
|
<div class="table-pagination-spacer"></div>
|
||||||
@if (!DisableRowsPerPage)
|
@if (!DisableRowsPerPage)
|
||||||
{
|
{
|
||||||
<TextContent Typo="Typo.body2" Class="mud-table-pagination-caption">
|
<TextContent Typo="Typo.body2" Class="table-pagination-caption">
|
||||||
@RowsPerPageString
|
@RowsPerPageString
|
||||||
</TextContent>
|
</TextContent>
|
||||||
<Select T="string" ValueChanged="@SetRowsPerPageAsync" Value="@DataGrid?.RowsPerPage.ToString()" Class="mud-table-pagination-select" DisableUnderLine="true" Dense="true" Disabled="@Disabled">
|
<Select T="string" ValueChanged="@SetRowsPerPageAsync" Value="@DataGrid?.RowsPerPage.ToString()" Class="table-pagination-select" DisableUnderLine="true" Dense="true" Disabled="@Disabled">
|
||||||
@foreach (int pageSize in PageSizeOptions)
|
@foreach (int pageSize in PageSizeOptions)
|
||||||
{
|
{
|
||||||
<SelectItem T="string" Value="@pageSize.ToString()">@pageSize.ToString().ToUpper()</SelectItem>
|
<SelectItem T="string" Value="@pageSize.ToString()">@pageSize.ToString().ToUpper()</SelectItem>
|
||||||
}
|
}
|
||||||
</Select>
|
</Select>
|
||||||
}
|
}
|
||||||
<TextContent Typo="Typo.body2" Class="mud-table-pagination-caption">
|
<TextContent Typo="Typo.body2" Class="table-pagination-caption">
|
||||||
@Info
|
@Info
|
||||||
</TextContent>
|
</TextContent>
|
||||||
<div class="mud-table-pagination-actions">
|
<div class="table-pagination-actions">
|
||||||
<IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.FirstPage" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.First))"/>
|
<IconButton Class="flip-x-rtl" Icon="@Icons.Material.Filled.FirstPage" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.First))"/>
|
||||||
<IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.NavigateBefore" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Previous))"/>
|
<IconButton Class="flip-x-rtl" Icon="@Icons.Material.Filled.NavigateBefore" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Previous))"/>
|
||||||
<IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.NavigateNext" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Next))"/>
|
<IconButton Class="flip-x-rtl" Icon="@Icons.Material.Filled.NavigateNext" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Next))"/>
|
||||||
<IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.LastPage" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Last))"/>
|
<IconButton Class="flip-x-rtl" Icon="@Icons.Material.Filled.LastPage" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Last))"/>
|
||||||
</div>
|
</div>
|
||||||
</ToolBar>
|
</ToolBar>
|
||||||
|
|
||||||
|
|||||||
@ -49,8 +49,8 @@ public partial class DataGridPager<T> : UIComponent, IDisposable
|
|||||||
private bool ForwardButtonsDisabled => Disabled || (DataGrid == null ? false : (DataGrid.CurrentPage + 1) * DataGrid.RowsPerPage >= DataGrid.GetFilteredItemsCount());
|
private bool ForwardButtonsDisabled => Disabled || (DataGrid == null ? false : (DataGrid.CurrentPage + 1) * DataGrid.RowsPerPage >= DataGrid.GetFilteredItemsCount());
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-table-pagination-toolbar")
|
new CssBuilder("table-pagination-toolbar")
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private async Task SetRowsPerPageAsync(string size)
|
private async Task SetRowsPerPageAsync(string size)
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
@typeparam T
|
@typeparam T
|
||||||
|
|
||||||
<th scope="col" class="@_classname" style="@_style" colspan="@Column?.HeaderColSpan" @attributes="@UserAttributes">
|
<th scope="col" class="@_classname" style="@_style" colspan="@Column?.HeaderColSpan" @attributes="@CustomAttributes">
|
||||||
@if (null != Column && Column.filterable)
|
@if (null != Column && Column.filterable)
|
||||||
{
|
{
|
||||||
@if (Column.FilterTemplate != null)
|
@if (Column.FilterTemplate != null)
|
||||||
@ -58,7 +58,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</Menu>
|
</Menu>
|
||||||
<IconButton Class="align-self-center" Icon="@Icons.Material.Filled.FilterAltOff" Size="@Size.Small" OnClick="@ClearFilter"></IconButton>
|
<GlyphButton Class="align-self-center" Icon="@Icons.Material.Filled.FilterAltOff" Size="@Size.Small" Clicked="@ClearFilter"></GlyphButton>
|
||||||
</Stack>
|
</Stack>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,14 +17,13 @@ public partial class FilterHeaderCell<T> : UIComponent
|
|||||||
private string _classname =>
|
private string _classname =>
|
||||||
new CssBuilder(Column?.HeaderClass)
|
new CssBuilder(Column?.HeaderClass)
|
||||||
.AddClass(Column?.headerClassname)
|
.AddClass(Column?.headerClassname)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.AddClass("filter-header-cell")
|
.AddClass("filter-header-cell")
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _style =>
|
private string _style =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle(Column?.HeaderStyle)
|
.AddStyle(Column?.HeaderStyle)
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _valueString;
|
private string _valueString;
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
@if (Column is not null)
|
@if (Column is not null)
|
||||||
{
|
{
|
||||||
<td class="@_classname" style="@_style" colspan="@Column.FooterColSpan" @attributes="@UserAttributes">
|
<td class="@_classname" style="@_style" colspan="@Column.FooterColSpan" @attributes="@CustomAttributes">
|
||||||
@if (Column.AggregateDefinition != null)
|
@if (Column.AggregateDefinition != null)
|
||||||
{
|
{
|
||||||
@Column.AggregateDefinition?.GetValue(Column.Field, items)
|
@Column.AggregateDefinition?.GetValue(Column.Field, items)
|
||||||
|
|||||||
@ -19,12 +19,11 @@ public partial class FooterCell<T> : UIComponent
|
|||||||
new CssBuilder("footer-cell")
|
new CssBuilder("footer-cell")
|
||||||
.AddClass(Column?.FooterClass)
|
.AddClass(Column?.FooterClass)
|
||||||
.AddClass(Column?.footerClassname)
|
.AddClass(Column?.footerClassname)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
private string _style =>
|
private string _style =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle(Column?.FooterStyle)
|
.AddStyle(Column?.FooterStyle)
|
||||||
.AddStyle(Style)
|
|
||||||
.AddStyle("font-weight", "600")
|
.AddStyle("font-weight", "600")
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
|
|||||||
@ -4,13 +4,13 @@
|
|||||||
|
|
||||||
@if (IsOnlyHeader)
|
@if (IsOnlyHeader)
|
||||||
{
|
{
|
||||||
<th scope="col" class="mud-table cell @_classname" style="" @attributes="@UserAttributes">
|
<th scope="col" class="table cell @_classname" style="" @attributes="@CustomAttributes">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</th>
|
</th>
|
||||||
}
|
}
|
||||||
else if (Column != null && !Column.Hidden)
|
else if (Column != null && !Column.Hidden)
|
||||||
{
|
{
|
||||||
<th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@UserAttributes">
|
<th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@CustomAttributes">
|
||||||
<span class="column-header">
|
<span class="column-header">
|
||||||
@if (sortable)
|
@if (sortable)
|
||||||
{
|
{
|
||||||
@ -48,7 +48,7 @@ else if (Column != null && !Column.Hidden)
|
|||||||
<IconButton Icon="@Column.SortIcon" Class="@sortIconClass" Size="@Size.Small" OnClick="@SortChangedAsync"></IconButton>
|
<IconButton Icon="@Column.SortIcon" Class="@sortIconClass" Size="@Size.Small" OnClick="@SortChangedAsync"></IconButton>
|
||||||
if(DataGrid.SortMode == SortMode.Multiple)
|
if(DataGrid.SortMode == SortMode.Multiple)
|
||||||
{
|
{
|
||||||
<span class="mud-sort-index mud-text-disabled">@(Column.SortIndex + 1)</span>
|
<span class="sort-index mud-text-disabled">@(Column.SortIndex + 1)</span>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -113,8 +113,8 @@ else if (Column != null && !Column.Hidden)
|
|||||||
@DataGrid.Filter(Column.filterContext.FilterDefinition, Column)
|
@DataGrid.Filter(Column.filterContext.FilterDefinition, Column)
|
||||||
</Item>
|
</Item>
|
||||||
<Item xs="12" Class="d-flex justify-end">
|
<Item xs="12" Class="d-flex justify-end">
|
||||||
<Button Class="clear-filter-button" OnClick="@ClearFilter">Clear</Button>
|
<Button Class="clear-filter-button" Clicked="@ClearFilter">Clear</Button>
|
||||||
<Button Class="apply-filter-button" Color="@ThemeColor.Primary" OnClick="@ApplyFilter">Filter</Button>
|
<Button Class="apply-filter-button" Color="@ThemeColor.Primary" Clicked="@ApplyFilter">Filter</Button>
|
||||||
</Item>
|
</Item>
|
||||||
</Grid>
|
</Grid>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -33,26 +33,24 @@ public partial class HeaderCell<T> : UIComponent, IDisposable
|
|||||||
private string _classname =>
|
private string _classname =>
|
||||||
new CssBuilder(Column?.HeaderClass)
|
new CssBuilder(Column?.HeaderClass)
|
||||||
.AddClass(Column?.headerClassname)
|
.AddClass(Column?.headerClassname)
|
||||||
.AddClass(Class)
|
.AddClass(AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _style =>
|
private string _style =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle(Column?.HeaderStyle)
|
.AddStyle(Column?.HeaderStyle)
|
||||||
.AddStyle("width", _width?.ToPx(), when: _width.HasValue)
|
.AddStyle("width", _width?.ToPx(), when: _width.HasValue)
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _resizerStyle =>
|
private string _resizerStyle =>
|
||||||
new StyleBuilder()
|
new StyleBuilder()
|
||||||
.AddStyle("height", _resizerHeight?.ToPx() ?? "100%")
|
.AddStyle("height", _resizerHeight?.ToPx() ?? "100%")
|
||||||
.AddStyle(Style)
|
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _resizerClass =>
|
private string _resizerClass =>
|
||||||
new CssBuilder()
|
new CssBuilder()
|
||||||
.AddClass("mud-resizing", when: _isResizing)
|
.AddClass("resizing", when: _isResizing)
|
||||||
.AddClass("mud-resizer")
|
.AddClass("resizer")
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private string _sortHeaderClass =>
|
private string _sortHeaderClass =>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<tr class="@Classname" style="@Style" @attributes="@UserAttributes">
|
<tr class="@Classname" @attributes="@CustomAttributes">
|
||||||
@ChildContent
|
@ChildContent
|
||||||
</tr>
|
</tr>
|
||||||
@ -11,6 +11,6 @@ public partial class Row : UIComponent
|
|||||||
{
|
{
|
||||||
[Parameter] public RenderFragment ChildContent { get; set; }
|
[Parameter] public RenderFragment ChildContent { get; set; }
|
||||||
|
|
||||||
protected string Classname => new CssBuilder("mud-table-row")
|
protected string Classname => new CssBuilder("table-row")
|
||||||
.AddClass(Class).Build();
|
.AddClass(AdditionalClassList).Build();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -63,14 +63,14 @@ public class DatePicker : DatePickerBase
|
|||||||
|
|
||||||
protected override string GetDayClasses(int month, DateTime day)
|
protected override string GetDayClasses(int month, DateTime day)
|
||||||
{
|
{
|
||||||
var b = new CssBuilder("mud-day");
|
var b = new CssBuilder("day");
|
||||||
b.AddClass(AdditionalDateClassesFunc?.Invoke(day) ?? string.Empty);
|
b.AddClass(AdditionalDateClassesFunc?.Invoke(day) ?? string.Empty);
|
||||||
if (day < GetMonthStart(month) || day > GetMonthEnd(month))
|
if (day < GetMonthStart(month) || day > GetMonthEnd(month))
|
||||||
return b.AddClass("mud-hidden").Build();
|
return b.AddClass("hidden").Build();
|
||||||
if ((Date?.Date == day && _selectedDate == null) || _selectedDate?.Date == day)
|
if ((Date?.Date == day && _selectedDate == null) || _selectedDate?.Date == day)
|
||||||
return b.AddClass("mud-selected").AddClass($"mud-theme-{Color.ToDescriptionString()}").Build();
|
return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
|
||||||
if (day == DateTime.Today)
|
if (day == DateTime.Today)
|
||||||
return b.AddClass("mud-current mud-button-outlined").AddClass($"mud-button-outlined-{Color.ToDescriptionString()} mud-{Color.ToDescriptionString()}-text").Build();
|
return b.AddClass("current mud-button-outlined").AddClass($"button-outlined-{Color.ToDescription()} mud-{Color.ToDescription()}-text").Build();
|
||||||
return b.Build();
|
return b.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,12 +7,12 @@
|
|||||||
|
|
||||||
protected override RenderFragment PickerContent =>
|
protected override RenderFragment PickerContent =>
|
||||||
@<CascadingValue Value="@this" IsFixed="true">
|
@<CascadingValue Value="@this" IsFixed="true">
|
||||||
<PickerToolbar Class="mud-picker-datepicker-toolbar" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
|
<PickerToolbar Class="picker-datepicker-toolbar" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
|
||||||
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="mud-button-year" OnClick="OnYearClick">@GetFormattedYearString()</Button>
|
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="button-year" OnClick="OnYearClick">@GetFormattedYearString()</Button>
|
||||||
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="mud-button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</Button>
|
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</Button>
|
||||||
</PickerToolbar>
|
</PickerToolbar>
|
||||||
<PickerContent>
|
<PickerContent>
|
||||||
<div class="mud-picker-calendar-content @($"mud-picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")">
|
<div class="picker-calendar-content @($"picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")">
|
||||||
@{
|
@{
|
||||||
int dayId = 0;
|
int dayId = 0;
|
||||||
@if (_picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1)
|
@if (_picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1)
|
||||||
@ -24,14 +24,14 @@
|
|||||||
{
|
{
|
||||||
int tempMonth = displayMonth; //without local variable month names are wrong
|
int tempMonth = displayMonth; //without local variable month names are wrong
|
||||||
|
|
||||||
<div class="mud-picker-calendar-container">
|
<div class="picker-calendar-container">
|
||||||
@if (tempMonth == 0 && CurrentView == OpenTo.Year)
|
@if (tempMonth == 0 && CurrentView == OpenTo.Year)
|
||||||
{
|
{
|
||||||
<div id="pickerYears" class="mud-picker-year-container">
|
<div id="pickerYears" class="picker-year-container">
|
||||||
@for (int i = GetMinYear(); i <= GetMaxYear(); i++)
|
@for (int i = GetMinYear(); i <= GetMaxYear(); i++)
|
||||||
{
|
{
|
||||||
var year = i;
|
var year = i;
|
||||||
<div class="mud-picker-year" id="@(_componentId + year)" @onclick="(() => OnYearClicked(year))" @onclick:stopPropagation="true">
|
<div class="picker-year" id="@(_componentId + year)" @onclick="(() => OnYearClicked(year))" @onclick:stopPropagation="true">
|
||||||
<TextContent Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@GetCalendarYear(year)</TextContent>
|
<TextContent Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@GetCalendarYear(year)</TextContent>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@ -43,26 +43,26 @@
|
|||||||
var prevLabel = $"Go to previous year {calendarYear - 1}";
|
var prevLabel = $"Go to previous year {calendarYear - 1}";
|
||||||
var nextLabel = $"Go to next year {calendarYear + 1}";
|
var nextLabel = $"Go to next year {calendarYear + 1}";
|
||||||
|
|
||||||
<div class="mud-picker-calendar-header">
|
<div class="picker-calendar-header">
|
||||||
<div class="mud-picker-calendar-header-switch">
|
<div class="picker-calendar-header-switch">
|
||||||
@if (!FixYear.HasValue)
|
@if (!FixYear.HasValue)
|
||||||
{
|
{
|
||||||
<IconButton aria-label="@prevLabel" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="mud-flip-x-rtl" />
|
<IconButton aria-label="@prevLabel" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="flip-x-rtl" />
|
||||||
<button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true">
|
<button type="button" class="picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true">
|
||||||
<TextContent Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
|
<TextContent Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
|
||||||
</button>
|
</button>
|
||||||
<IconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="mud-flip-x-rtl" />
|
<IconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="flip-x-rtl" />
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<TextContent Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
|
<TextContent Class="picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mud-picker-month-container">
|
<div class="picker-month-container">
|
||||||
@foreach (var month in GetAllMonths())
|
@foreach (var month in GetAllMonths())
|
||||||
{
|
{
|
||||||
<button type="button" aria-label="@GetMonthName(month)" class="mud-picker-month" @onclick="(() => OnMonthSelected(month))" @onclick:stopPropagation="true">
|
<button type="button" aria-label="@GetMonthName(month)" class="picker-month" @onclick="(() => OnMonthSelected(month))" @onclick:stopPropagation="true">
|
||||||
<TextContent Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</TextContent>
|
<TextContent Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</TextContent>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
@ -74,35 +74,35 @@
|
|||||||
var nextLabel = $"Go to next month {GetMonthName((tempMonth + 1) % 12)}";
|
var nextLabel = $"Go to next month {GetMonthName((tempMonth + 1) % 12)}";
|
||||||
|
|
||||||
<div class="@GetCalendarHeaderClasses(tempMonth)">
|
<div class="@GetCalendarHeaderClasses(tempMonth)">
|
||||||
<div class="mud-picker-calendar-header-switch">
|
<div class="picker-calendar-header-switch">
|
||||||
@if (!FixMonth.HasValue)
|
@if (!FixMonth.HasValue)
|
||||||
{
|
{
|
||||||
<IconButton aria-label="@prevLabel" Class="mud-picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="OnPreviousMonthClick" />
|
<IconButton aria-label="@prevLabel" Class="picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="OnPreviousMonthClick" />
|
||||||
<button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true">
|
<button type="button" class="picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true">
|
||||||
<TextContent Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
|
<TextContent Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
|
||||||
</button>
|
</button>
|
||||||
<IconButton aria-label="@nextLabel" Class="mud-picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="OnNextMonthClick" />
|
<IconButton aria-label="@nextLabel" Class="picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="OnNextMonthClick" />
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<TextContent Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
|
<TextContent Class="picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class="mud-picker-calendar-header-day">
|
<div class="picker-calendar-header-day">
|
||||||
@if (ShowWeekNumbers)
|
@if (ShowWeekNumbers)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-calendar-week">
|
<div class="picker-calendar-week">
|
||||||
<Text Typo="Typo.caption" Class="mud-picker-calendar-week-text"></Text>
|
<Text Typo="Typo.caption" Class="picker-calendar-week-text"></Text>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@foreach (var dayname in GetAbbreviatedDayNames())
|
@foreach (var dayname in GetAbbreviatedDayNames())
|
||||||
{
|
{
|
||||||
<TextContent Typo="Typo.caption" Class="mud-day-label">@dayname</TextContent>
|
<TextContent Typo="Typo.caption" Class="day-label">@dayname</TextContent>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mud-picker-calendar-transition mud-picker-slide-transition">
|
<div class="picker-calendar-transition mud-picker-slide-transition">
|
||||||
<div class="mud-picker-calendar">
|
<div class="picker-calendar">
|
||||||
@for (int week = 0; week < 6; week++)
|
@for (int week = 0; week < 6; week++)
|
||||||
{
|
{
|
||||||
int tempWeek = week;
|
int tempWeek = week;
|
||||||
@ -110,8 +110,8 @@
|
|||||||
|
|
||||||
@if (ShowWeekNumbers)
|
@if (ShowWeekNumbers)
|
||||||
{
|
{
|
||||||
<div class="mud-picker-calendar-week">
|
<div class="picker-calendar-week">
|
||||||
<Text class="mud-picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</Text>
|
<Text class="picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</Text>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@foreach (var day in GetWeek(tempMonth, tempWeek))
|
@foreach (var day in GetWeek(tempMonth, tempWeek))
|
||||||
@ -122,21 +122,21 @@
|
|||||||
{
|
{
|
||||||
var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1);
|
var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1);
|
||||||
<button @key="@(!firstMonthFirstYear ? selectedDay : tempId)" type="button" style="--day-id: @(!firstMonthFirstYear ? tempId: tempId + 1);"
|
<button @key="@(!firstMonthFirstYear ? selectedDay : tempId)" type="button" style="--day-id: @(!firstMonthFirstYear ? tempId: tempId + 1);"
|
||||||
class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))"
|
class="button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))"
|
||||||
@onclick="(() => { var d = selectedDay; OnDayClicked(d); })"
|
@onclick="(() => { var d = selectedDay; OnDayClicked(d); })"
|
||||||
@onclick:stopPropagation="true"
|
@onclick:stopPropagation="true"
|
||||||
aria-label='@selectedDay.ToString("dddd, dd MMMM yyyy")'
|
aria-label='@selectedDay.ToString("dddd, dd MMMM yyyy")'
|
||||||
onmouseover="this.closest('.mud-picker-calendar-content').style.setProperty('--selected-day', @(!firstMonthFirstYear ? tempId: tempId + 1));"
|
onmouseover="this.closest('.mud-picker-calendar-content').style.setProperty('--selected-day', @(!firstMonthFirstYear ? tempId: tempId + 1));"
|
||||||
disabled="@((selectedDay < MinDate) || (selectedDay > MaxDate) || IsDateDisabledFunc(selectedDay))">
|
disabled="@((selectedDay < MinDate) || (selectedDay > MaxDate) || IsDateDisabledFunc(selectedDay))">
|
||||||
<p class="mud-typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p>
|
<p class="typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<button @key="0" type="button" style="--day-id: 1;"
|
<button @key="0" type="button" style="--day-id: 1;"
|
||||||
class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day"
|
class="button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day"
|
||||||
aria-label='' disabled>
|
aria-label='' disabled>
|
||||||
<p class="mud-typography mud-typography-body2 mud-inherit-text"></p>
|
<p class="typography mud-typography-body2 mud-inherit-text"></p>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -497,15 +497,15 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
|
|||||||
private string GetYearClasses(int year)
|
private string GetYearClasses(int year)
|
||||||
{
|
{
|
||||||
if (year == GetMonthStart(0).Year)
|
if (year == GetMonthStart(0).Year)
|
||||||
return $"mud-picker-year-selected mud-{Color.ToDescriptionString()}-text";
|
return $"picker-year-selected mud-{Color.ToDescription()}-text";
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
private string GetCalendarHeaderClasses(int month)
|
private string GetCalendarHeaderClasses(int month)
|
||||||
{
|
{
|
||||||
return new CssBuilder("mud-picker-calendar-header")
|
return new CssBuilder("picker-calendar-header")
|
||||||
.AddClass($"mud-picker-calendar-header-{month + 1}")
|
.AddClass($"picker-calendar-header-{month + 1}")
|
||||||
.AddClass($"mud-picker-calendar-header-last", month == DisplayMonths - 1)
|
.AddClass($"picker-calendar-header-last", month == DisplayMonths - 1)
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -546,7 +546,7 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
|
|||||||
private string GetMonthClasses(DateTime month)
|
private string GetMonthClasses(DateTime month)
|
||||||
{
|
{
|
||||||
if (GetMonthStart(0) == month)
|
if (GetMonthStart(0) == month)
|
||||||
return $"mud-picker-month-selected mud-{Color.ToDescriptionString()}-text";
|
return $"picker-month-selected mud-{Color.ToDescription()}-text";
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
ErrorText="@ErrorText" Disabled="@Disabled" Margin="@Margin" Required="@Required"
|
ErrorText="@ErrorText" Disabled="@Disabled" Margin="@Margin" Required="@Required"
|
||||||
@onclick="() => { if (!Editable) ToggleState(); }" ForId="@FieldId">
|
@onclick="() => { if (!Editable) ToggleState(); }" ForId="@FieldId">
|
||||||
<InputContent>
|
<InputContent>
|
||||||
<RangeInput @ref="_rangeInput" @attributes="UserAttributes" InputType="@InputType.Text" Class="@PickerInputClass" Style="@Style" Variant="@Variant" ReadOnly="@(!Editable)"
|
<RangeInput @ref="_rangeInput" @attributes="CustomAttributes" InputType="@InputType.Text" Class="@PickerInputClass" Variant="@Variant" ReadOnly="@(!Editable)"
|
||||||
@bind-Value="@RangeText" Disabled="@Disabled" Adornment="@Adornment" AdornmentIcon="@AdornmentIcon" AdornmentColor="@AdornmentColor" IconSize="@IconSize" OnAdornmentClick="ToggleState"
|
@bind-Value="@RangeText" Disabled="@Disabled" Adornment="@Adornment" AdornmentIcon="@AdornmentIcon" AdornmentColor="@AdornmentColor" IconSize="@IconSize" OnAdornmentClick="ToggleState"
|
||||||
Required="@Required" RequiredError="@RequiredError" Error="@HasError" ErrorText="@ErrorText" Margin="@Margin" AdornmentAriaLabel="@AdornmentAriaLabel"/>
|
Required="@Required" RequiredError="@RequiredError" Error="@HasError" ErrorText="@ErrorText" Margin="@Margin" AdornmentAriaLabel="@AdornmentAriaLabel"/>
|
||||||
</InputContent>
|
</InputContent>
|
||||||
|
|||||||
@ -168,61 +168,61 @@ public partial class DateRangePicker : DatePickerBase
|
|||||||
|
|
||||||
protected override string GetDayClasses(int month, DateTime day)
|
protected override string GetDayClasses(int month, DateTime day)
|
||||||
{
|
{
|
||||||
var b = new CssBuilder("mud-day");
|
var b = new CssBuilder("day");
|
||||||
if (day < GetMonthStart(month) || day > GetMonthEnd(month))
|
if (day < GetMonthStart(month) || day > GetMonthEnd(month))
|
||||||
{
|
{
|
||||||
return b.AddClass("mud-hidden").Build();
|
return b.AddClass("hidden").Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
if ((_firstDate != null && _secondDate != null && _firstDate < day && _secondDate > day) ||
|
if ((_firstDate != null && _secondDate != null && _firstDate < day && _secondDate > day) ||
|
||||||
(_firstDate == null && _dateRange != null && _dateRange.Start < day && _dateRange.End > day))
|
(_firstDate == null && _dateRange != null && _dateRange.Start < day && _dateRange.End > day))
|
||||||
{
|
{
|
||||||
return b
|
return b
|
||||||
.AddClass("mud-range")
|
.AddClass("range")
|
||||||
.AddClass("mud-range-between")
|
.AddClass("range-between")
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
if ((_firstDate != null && day == _firstDate) ||
|
if ((_firstDate != null && day == _firstDate) ||
|
||||||
(_firstDate == null && _dateRange != null && _dateRange.Start == day && DateRange.End != day))
|
(_firstDate == null && _dateRange != null && _dateRange.Start == day && DateRange.End != day))
|
||||||
{
|
{
|
||||||
return b.AddClass("mud-selected")
|
return b.AddClass("selected")
|
||||||
.AddClass("mud-range")
|
.AddClass("range")
|
||||||
.AddClass("mud-range-start-selected")
|
.AddClass("range-start-selected")
|
||||||
.AddClass("mud-range-selection", _firstDate != null)
|
.AddClass("range-selection", _firstDate != null)
|
||||||
.AddClass($"mud-theme-{Color.ToDescriptionString()}")
|
.AddClass($"theme-{Color.ToDescription()}")
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
if ((_firstDate != null && _secondDate != null && day == _secondDate) ||
|
if ((_firstDate != null && _secondDate != null && day == _secondDate) ||
|
||||||
(_firstDate == null && _dateRange != null && _dateRange.Start != day && _dateRange.End == day))
|
(_firstDate == null && _dateRange != null && _dateRange.Start != day && _dateRange.End == day))
|
||||||
{
|
{
|
||||||
return b.AddClass("mud-selected")
|
return b.AddClass("selected")
|
||||||
.AddClass("mud-range")
|
.AddClass("range")
|
||||||
.AddClass("mud-range-end-selected")
|
.AddClass("range-end-selected")
|
||||||
.AddClass($"mud-theme-{Color.ToDescriptionString()}")
|
.AddClass($"theme-{Color.ToDescription()}")
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day)
|
if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day)
|
||||||
{
|
{
|
||||||
return b.AddClass("mud-selected").AddClass($"mud-theme-{Color.ToDescriptionString()}").Build();
|
return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
|
||||||
}
|
}
|
||||||
else if (_firstDate != null && day > _firstDate)
|
else if (_firstDate != null && day > _firstDate)
|
||||||
{
|
{
|
||||||
return b.AddClass("mud-range")
|
return b.AddClass("range")
|
||||||
.AddClass("mud-range-selection", _secondDate == null)
|
.AddClass("range-selection", _secondDate == null)
|
||||||
.AddClass($"mud-range-selection-{Color.ToDescriptionString()}", _firstDate != null)
|
.AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null)
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (day == DateTime.Today)
|
if (day == DateTime.Today)
|
||||||
{
|
{
|
||||||
return b.AddClass("mud-current")
|
return b.AddClass("current")
|
||||||
.AddClass("mud-range", _firstDate != null && day > _firstDate)
|
.AddClass("range", _firstDate != null && day > _firstDate)
|
||||||
.AddClass("mud-range-selection", _firstDate != null && day > _firstDate)
|
.AddClass("range-selection", _firstDate != null && day > _firstDate)
|
||||||
.AddClass($"mud-range-selection-{Color.ToDescriptionString()}", _firstDate != null && day > _firstDate)
|
.AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null && day > _firstDate)
|
||||||
.AddClass($"mud-{Color.ToDescriptionString()}-text")
|
.AddClass($"{Color.ToDescription()}-text")
|
||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
{
|
{
|
||||||
<FocusTrap DefaultFocus="DefaultFocus">
|
<FocusTrap DefaultFocus="DefaultFocus">
|
||||||
|
|
||||||
<div @attributes="UserAttributes" class="@ContentClass" style="@ContentStyle">
|
<div @attributes="CustomAttributes" class="@ContentClass" style="@ContentStyle">
|
||||||
@DialogContent
|
@DialogContent
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -10,12 +10,12 @@ namespace Connected.Components;
|
|||||||
|
|
||||||
public partial class Dialog : UIComponent
|
public partial class Dialog : UIComponent
|
||||||
{
|
{
|
||||||
protected string ContentClass => new CssBuilder("mud-dialog-content")
|
protected string ContentClass => new CssBuilder("dialog-content")
|
||||||
.AddClass($"mud-dialog-no-side-padding", DisableSidePadding)
|
.AddClass($"dialog-no-side-padding", DisableSidePadding)
|
||||||
.AddClass(ClassContent)
|
.AddClass(ClassContent)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
protected string ActionClass => new CssBuilder("mud-dialog-actions")
|
protected string ActionClass => new CssBuilder("dialog-actions")
|
||||||
.AddClass(ClassActions)
|
.AddClass(ClassActions)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
@ -24,7 +24,7 @@ public partial class Dialog : UIComponent
|
|||||||
[Inject] public IDialogService DialogService { get; set; }
|
[Inject] public IDialogService DialogService { get; set; }
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Define the dialog title as a renderfragment (overrides Title)
|
/// Define the dialog title as a renderfragment (overrides GlyphTitle)
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Dialog.Behavior)]
|
[Category(CategoryTypes.Dialog.Behavior)]
|
||||||
@ -109,7 +109,7 @@ public partial class Dialog : UIComponent
|
|||||||
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Define the dialog title as a renderfragment (overrides Title)
|
/// Define the dialog title as a renderfragment (overrides GlyphTitle)
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Parameter]
|
[Parameter]
|
||||||
[Category(CategoryTypes.Dialog.Behavior)]
|
[Category(CategoryTypes.Dialog.Behavior)]
|
||||||
@ -133,8 +133,7 @@ public partial class Dialog : UIComponent
|
|||||||
Close();
|
Close();
|
||||||
var parameters = new DialogParameters()
|
var parameters = new DialogParameters()
|
||||||
{
|
{
|
||||||
[nameof(Class)] = Class,
|
[nameof(AdditionalClassList)] = AdditionalClassList,
|
||||||
[nameof(Style)] = Style,
|
|
||||||
[nameof(Tag)] = Tag,
|
[nameof(Tag)] = Tag,
|
||||||
[nameof(TitleContent)] = TitleContent,
|
[nameof(TitleContent)] = TitleContent,
|
||||||
[nameof(DialogContent)] = DialogContent,
|
[nameof(DialogContent)] = DialogContent,
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
@namespace Connected.Components
|
@namespace Connected.Components
|
||||||
@inherits UIComponent
|
@inherits UIComponent
|
||||||
|
|
||||||
<div @attributes="UserAttributes" id="@_elementId" class="mud-dialog-container @Position">
|
<div @attributes="CustomAttributes" id="@_elementId" class="dialog-container @Position">
|
||||||
<Overlay Visible="true" OnClick="HandleBackgroundClick" Class="mud-overlay-dialog" DarkBackground="true" />
|
<Overlay Visible="true" OnClick="HandleBackgroundClick" Class="overlay-dialog" DarkBackground="true" />
|
||||||
<div id="_@Id.ToString("N")" role="dialog" class="@Classname" style="@Style">
|
<div id="_@Id.ToString("N")" role="dialog" class="@Classname">
|
||||||
@if (!NoHeader)
|
@if (!NoHeader)
|
||||||
{
|
{
|
||||||
<div class="mud-dialog-title">
|
<div class="dialog-title">
|
||||||
@if (TitleContent == null)
|
@if (TitleContent == null)
|
||||||
{
|
{
|
||||||
<TextContent Typo="Typo.h6">@Title</TextContent>
|
<TextContent Typo="Typo.h6">@Title</TextContent>
|
||||||
|
|||||||
@ -84,7 +84,7 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
|
|
||||||
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
|
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
|
||||||
{
|
{
|
||||||
TargetClass = "mud-dialog",
|
TargetClass = "dialog",
|
||||||
Keys = {
|
Keys = {
|
||||||
new KeyOptions { Key="Escape", SubscribeDown = true },
|
new KeyOptions { Key="Escape", SubscribeDown = true },
|
||||||
},
|
},
|
||||||
@ -172,7 +172,7 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
FullScreen = SetFulScreen();
|
FullScreen = SetFulScreen();
|
||||||
DisableBackdropClick = SetDisableBackdropClick();
|
DisableBackdropClick = SetDisableBackdropClick();
|
||||||
CloseOnEscapeKey = SetCloseOnEscapeKey();
|
CloseOnEscapeKey = SetCloseOnEscapeKey();
|
||||||
Class = Classname;
|
//AdditionalClassList = Classname;
|
||||||
}
|
}
|
||||||
|
|
||||||
private string SetPosition()
|
private string SetPosition()
|
||||||
@ -191,7 +191,7 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
{
|
{
|
||||||
position = DialogPosition.Center;
|
position = DialogPosition.Center;
|
||||||
}
|
}
|
||||||
return $"mud-dialog-{position.ToDescriptionString()}";
|
return $"dialog-{position.ToDescription()}";
|
||||||
}
|
}
|
||||||
|
|
||||||
private string SetMaxWidth()
|
private string SetMaxWidth()
|
||||||
@ -210,7 +210,7 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
{
|
{
|
||||||
maxWidth = MaxWidth.Small;
|
maxWidth = MaxWidth.Small;
|
||||||
}
|
}
|
||||||
return $"mud-dialog-width-{maxWidth.ToDescriptionString()}";
|
return $"dialog-width-{maxWidth.ToDescription()}";
|
||||||
}
|
}
|
||||||
|
|
||||||
private bool SetFullWidth()
|
private bool SetFullWidth()
|
||||||
@ -236,12 +236,12 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected string Classname =>
|
protected string Classname =>
|
||||||
new CssBuilder("mud-dialog")
|
new CssBuilder("dialog")
|
||||||
.AddClass(DialogMaxWidth, !FullScreen)
|
.AddClass(DialogMaxWidth, !FullScreen)
|
||||||
.AddClass("mud-dialog-width-full", FullWidth && !FullScreen)
|
.AddClass("dialog-width-full", FullWidth && !FullScreen)
|
||||||
.AddClass("mud-dialog-fullscreen", FullScreen)
|
.AddClass("dialog-fullscreen", FullScreen)
|
||||||
.AddClass("mud-dialog-rtl", RightToLeft)
|
.AddClass("dialog-rtl", RightToLeft)
|
||||||
.AddClass(_dialog?.Class)
|
.AddClass(_dialog?.AdditionalClassList)
|
||||||
.Build();
|
.Build();
|
||||||
|
|
||||||
private bool SetHideHeader()
|
private bool SetHideHeader()
|
||||||
@ -310,8 +310,7 @@ public partial class DialogInstance : UIComponent, IDisposable
|
|||||||
if (dialog == null)
|
if (dialog == null)
|
||||||
return;
|
return;
|
||||||
_dialog = dialog;
|
_dialog = dialog;
|
||||||
Class = dialog.Class;
|
//AdditionalClassList = dialog.AdditionalClassList;
|
||||||
Style = dialog.Style;
|
|
||||||
TitleContent = dialog.TitleContent;
|
TitleContent = dialog.TitleContent;
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user