Die MudBlazor Component Library kommt im modernen Material Design und eignet sich hervorragend gleichermaßen für mobile Apps und Desktop Apps. Nur eine einzige Sache ist für einige Mac-User störend: Die Switch Buttons im Android Style. Dieser Beitrag zeigt, wie man die Switch Buttons mit wenig CSS in den iOS-Style transformiert:
MudBlazor Switch Button: Vom Material- zum iOS-Style
Die Lösung ist einfach. Wir platzieren den folgenden CSS-Code in einer globalen CSS-Datei, z.B. in wwwroot/css/custom.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.mud-switch-base-large .mud-switch-button { padding: 10px 0 5px 11px; zoom: 0.55; } .mud-switch-base-medium .mud-switch-button { padding: 10px 0 5px 10px; zoom: 0.5; } .mud-switch-base-small .mud-switch-button { padding: 4px 0 5px 5px; zoom: 0.6; } |
Eingebunden wird der Code dann in wwwroot/index.html vor dem </head> tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> <base href="/" /> <link rel="stylesheet" href="/_content/Radzen.Blazor/css/material-base.css" /> <link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="blazor_maui_app.styles.css" /> <link rel="icon" href="data:,"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> <link rel="stylesheet" href="css/custom.css" /> </head> |
Und unserem neuen iOS Look & Feel steht nichts mehr im Weg :-)
