Library for Blazor based on Material Design Component
- Build on Dotnet 5.0
- Wrap of Material Design Component Web 10.0
- Source of javascript code build in Typescript
- Embedded Google Roboto Fonts and Material Icons for scenarios with no Internet access
Exentials.MdcBlazor wraps the base Mdc components, Exentials.MdcBlazor.Tools depens on them but aim to serve richer and productive controls with less markup and code.
docker run -it exentials/mdc-blazor-server-demo:latest
Install-Package Exentials.MdcBlazor
Install-Package Exentials.MdcBlazor.ToolsAdd on the service registration section of your Startup.cs file
services.AddMdcBlazor(); // Enable MdcBlazor services@using Exentials.MdcBlazor<link href="_content/Exentials.MdcBlazor/mdcBlazor.css" rel="stylesheet" /> <!-- develop -->
<!-- OR -->
<link href="_content/Exentials.MdcBlazor/mdcBlazor.min.css" rel="stylesheet" /> <!-- production -->
.
.
<body class="@MdcStyle.Typography"><link href="_content/Exentials.MdcBlazor/roboto/roboto.css" rel="stylesheet" />
<link href="_content/Exentials.MdcBlazor/material-icons/material-icons.css" rel="stylesheet" /><script type="module" src="_content/Exentials.MdcBlazor/mdcBlazor.js"></script> <!-- develop -->
<!-- OR -->
<script type="module" src="_content/Exentials.MdcBlazor/mdcBlazor.min.js"></script> <!-- production -->Install-Package Exentials.MdcBlazorServer project: Add on the service registration section of Startup.cs file
services.AddMdcBlazor(); // Enable MdcBlazor services@using Exentials.MdcBlazor<link href="_content/Exentials.MdcBlazor/mdcBlazor.css" rel="stylesheet" /> <!-- develop -->
<link href="_content/Exentials.MdcBlazor/mdcBlazor.min.css" rel="stylesheet" /> <!-- production -->
.
.
<body class="@MdcStyle.Typography"><link href="_content/Exentials.MdcBlazor/roboto/roboto.css" rel="stylesheet" />
<link href="_content/Exentials.MdcBlazor/material-icons/material-icons.css" rel="stylesheet" /><script type="module" src="_content/Exentials.MdcBlazor/mdcBlazor.js"></script> <!-- develop -->
<script type="module" src="_content/Exentials.MdcBlazor/mdcBlazor.min.js"></script> <!-- production -->@using Exentials.MdcBlazor| Components | Status | Material docs |
|---|---|---|
| MdcBanner | In progress | material.io - github |
| MdcButton | Complete | material.io - github |
| MdcCard | Complete | material.io - github |
| MdcCheckbox | Complete | material.io - github |
| MdcChip | In progress | material.io - github |
| MdcCircularProgress | Complete | material.io - github |
| MdcDataTable | In progress | material.io - github |
| MdcDialog | Complete | material.io - github |
| MdcDrawer | Complete | material.io - github |
| MdcElevation | Complete | github |
| MdcFab | Complete | material.io - github |
| MdcIconButton | Complete | material.io - github |
| MdcImageList | - | material.io - github |
| MdcLayoutGrid | Complete | material.io - github |
| MdcLinearProgress | Complete | material.io - github |
| MdcList | Complete | material.io - github |
| MdcMenu | In progress | material.io - github |
| MdcRadio | Complete | material.io - github |
| MdcSegmentedButton | - | github |
| MdcSelect | In progress | github |
| MdcSlider | In progress | material.io - github |
| MdcSnackbar | Complete | material.io - github |
| MdcSwitch | Complete | material.io - github |
| MdcTabBar | Complete | material.io - github |
| MdcTextField | Complete | material.io - github |
| MdcTextarea | Complete | material.io - github |
| MdcTooltip | In progress | material.io - github |
| MdcTopAppBar | Complete | material.io - github |
| MdcTypography | Complete | github |
| MdcIcon | Complete | material.io |
Simplify the table building by passing a data source and the columns definitions to display.
Handle a centralized queue of Snackbar messages. Must place <MdcSnackbarService/> on the main layout component. By injecting the SnackbarService, messages could be sent to the main control.
To see it action download and execute MdcBlazor.ServerDemo project
- A lot of todos
MIT