зеркало из https://github.com/telerik/blazor-docs.git
docs(common): Add information about Fluent theme (#1136)
This commit is contained in:
Dimo Dimov
GitHub
Родитель
74efca5cf1
Коммит
9731910e0b
|
|
@ -16,6 +16,8 @@ The UI for Blazor suite comes with a set of built-in themes that you can choose
|
|||
* **Default** - our own neutral styling that suits most cases. Includes the [Ocean Blue accessibility swatch]({%slug themes-accessibility-swatch%}).
|
||||
* **Bootstrap** - a theme that matches the Bootstrap styling. Read more in the [Bootstrap Notes](#bootstrap-notes) section.
|
||||
* **Material** - implements the [Material Design Guidelines](https://material.io/design/). Read more in the [Material Notes](#material-notes) section.
|
||||
* **Fluent** - based on [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui/).
|
||||
|
||||
|
||||
The UI for Blazor suite has the same HTML rendering and SASS Theme stylesheets like other Kendo UI suites, so previous experience with them can be helpful. The components in **UI for Blazor are native components** and not wrappers over jQuery widgets, however.
|
||||
|
||||
|
|
@ -195,9 +197,12 @@ If you do not want to use the Bootstrap framework to create your layouts, there
|
|||
|
||||
* Many other components help with navigation and layouts, review the [list of available components in our demos](https://demos.telerik.com/blazor-ui).
|
||||
|
||||
## Next Steps
|
||||
|
||||
* [Create a custom theme]({%slug themes-custom%})
|
||||
|
||||
## See Also
|
||||
|
||||
* [Custom Themes]({%slug themes-custom%})
|
||||
* [Style Form Elements]({%slug themes-form-elements%})
|
||||
* [Live Demos](https://demos.telerik.com/blazor-ui/)
|
||||
* [Change Theme at Runtime]({%slug change-theme-runtime%})
|
||||
* [Style Form Elements]({%slug themes-form-elements%})
|
||||
* [Change Theme at Runtime]({%slug change-theme-runtime%})
|
||||
* [Live UI for Blazor Demos](https://demos.telerik.com/blazor-ui/)
|
||||
|
|
|
|||
|
|
@ -28,14 +28,14 @@ Telerik UI for Blazor distributed swatches:
|
|||
|
||||
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
|
||||
|
||||
| Default | Bootstrap | Material |
|
||||
| ----------- | ----------- | -------|
|
||||
| Main | Main | Main
|
||||
| Main Dark | Main Dark | Arctic
|
||||
| [Ocean Blue]({%slug themes-accessibility-swatch%}) | Nordic | Nova
|
||||
| Nordic | Urban | Lime Dark
|
||||
| Purple | Vintage | Main Dark
|
||||
| Turquoise
|
||||
| Default | Bootstrap | Material | Fluent |
|
||||
| --- | --- | --- | --- |
|
||||
| Main | Main | Main | Main |
|
||||
| Main Dark | Main Dark | Arctic |
|
||||
| [Ocean Blue]({%slug themes-accessibility-swatch%}) | Nordic | Nova |
|
||||
| Nordic | Urban | Lime Dark |
|
||||
| Purple | Vintage | Main Dark |
|
||||
| Turquoise |
|
||||
|
||||
|
||||
## Distribution Options
|
||||
|
|
@ -87,6 +87,15 @@ Swatch | CDN |
|
|||
| Main Dark | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/swatches/material-main-dark.css
|
||||
|
||||
|
||||
#### Fluent
|
||||
|
||||
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
|
||||
|
||||
Swatch | CDN |
|
||||
| ----------- | ----------- |
|
||||
| Main | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-fluent/swatches/fluent-main.css
|
||||
|
||||
|
||||
### ZIP archive
|
||||
|
||||
One of the ways to install Telerik UI for Blazor is to use the ZIP Archive. Its `styles` folder contains all the above swatches. You can [download it from your Telerik account](https://www.telerik.com/account/downloads). Here is [more information about the ZIP Archive]({%slug installation/zip%})...
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ Here is a complete list of the base themes, all available swatches and their CDN
|
|||
|
||||
* [Material](#material) - Based on Material Design. Main is our "[Material]({%slug general-information/themes%}#material-notes)" theme, which itself is built around the initial theme of <a href = "https://material.angular.io/" target = "_blank">material.angular.io</a>.
|
||||
|
||||
* [Fluent](#fluent) - Based on [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui/).
|
||||
|
||||
>important Make sure that the theme version in the CDN URL is compatible with the UI for Blazor version. Our [release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) provide theme compatibility information for each UI for Blazor version. You can also use a [newer theme version](https://github.com/telerik/kendo-themes/releases), if it doesn't contain breaking changes and has a fix that you need.
|
||||
|
||||
>tip We distribute the most commonly used swatches in a separate [Telerik Blazor CDN]({%slug themes-swatch-distribution%}#telerik-blazor-cdn). The CDN URLs contain the Telerik UI for Blazor version. Thus, you do not need to manually track the theme compatibility, just make sure to use the CDN URL including your UI for Blazor version.
|
||||
|
|
@ -98,3 +100,10 @@ Here is a complete list of the base themes, all available swatches and their CDN
|
|||
| Material Sky Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-sky-dark.css
|
||||
| Material Smoke | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-smoke.css
|
||||
|
||||
### Fluent
|
||||
|
||||
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
|
||||
|
||||
| Swatch | CDN |
|
||||
| ----------- | ----------- |
|
||||
| Fluent Main | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/fluent/fluent-main.css
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче