Create README
This commit is contained in:
Mathieu Fillion
GitHub
Родитель
c0eb304630
Коммит
67cbfde483
154
README.md
154
README.md
|
|
@ -1,9 +1,11 @@
|
|||
# Uno Material
|
||||
|
||||
This library offers a suite of solutions to help you theme your application with the [material design theme](https://material.io/design):
|
||||
- Color system
|
||||
- Styles for existing WinUI controls
|
||||
- Custom Controls for
|
||||
<!-- TODO : Insert logo/branding -->
|
||||
|
||||
This library is designed to help you use the [material design system](https://material.io/design):
|
||||
- Color system for both Light and Dark theme
|
||||
- Styles for existing WinUI controls like Buttons, TextBox, etc.
|
||||
- Custom Controls for Material Components not offered out of the box by WinUI, such as Cards and BottomNavigationBar.
|
||||
|
||||
Platform support:
|
||||
- WinUI / UWP
|
||||
|
|
@ -11,18 +13,147 @@ Platform support:
|
|||
- Android
|
||||
- WebAssembly
|
||||
|
||||
<!-- TODO : Insert build status, nuget.org badge, etc -->
|
||||
[](LICENSE)
|
||||
|
||||
## Getting Started
|
||||
|
||||
{Instructions to quickly get started using the project: pre-requisites, packages
|
||||
to install, sample code, etc.}
|
||||
1. Install the nuget package Uno.Material
|
||||
2. Unless you want our default color palette (inspired by our Uno logo), you'll want to override the following color resources in you application. We suggest creating a Color.xaml `ResourceDictionary`.
|
||||
For more information on the color system, consult this [page](https://material.io/design/color/the-color-system.html#color-theme-creation) for all the official documentation and tools to help you create your own palette.
|
||||
Here is what Colors.xaml would contain if you want both light and dark theme.
|
||||
```xaml
|
||||
<ResourceDictionary
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:local="using:Uno.Material.Samples.Shared.Content">
|
||||
|
||||
// TODO
|
||||
<!--
|
||||
|
||||
For more information on the color system, consult this page
|
||||
https://material.io/design/color/the-color-system.html#color-theme-creation
|
||||
|
||||
-->
|
||||
<ResourceDictionary.ThemeDictionaries>
|
||||
<!-- Light Theme -->
|
||||
<ResourceDictionary x:Key="Light">
|
||||
<Color x:Key="PrimaryColor">#5B4CF5</Color>
|
||||
<Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
|
||||
<Color x:Key="PrimaryVariantLightColor">#B6A8FB</Color>
|
||||
<Color x:Key="SecondaryColor">#67E5AD</Color>
|
||||
<Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
|
||||
<Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
|
||||
<Color x:Key="BackgroundColor">#FFFFFF</Color>
|
||||
<Color x:Key="SurfaceColor">#FFFFFF</Color>
|
||||
<Color x:Key="ErrorColor">#F85977</Color>
|
||||
<Color x:Key="OnPrimaryColor">#FFFFFF</Color>
|
||||
<Color x:Key="OnSecondaryColor">#000000</Color>
|
||||
<Color x:Key="OnBackgroundColor">#000000</Color>
|
||||
<Color x:Key="OnSurfaceColor">#000000</Color>
|
||||
<Color x:Key="OnErrorColor">#000000</Color>
|
||||
<Color x:Key="OverlayColor">#51000000</Color>
|
||||
</ResourceDictionary>
|
||||
|
||||
<!-- Dark Theme -->
|
||||
<ResourceDictionary x:Key="Dark">
|
||||
<Color x:Key="PrimaryColor">#B6A8FB</Color>
|
||||
<Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
|
||||
<Color x:Key="PrimaryVariantLightColor">#D4CBFC</Color>
|
||||
<Color x:Key="SecondaryColor">#67E5AD</Color>
|
||||
<Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
|
||||
<Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
|
||||
<Color x:Key="BackgroundColor">#121212</Color>
|
||||
<Color x:Key="SurfaceColor">#121212</Color>
|
||||
<Color x:Key="ErrorColor">#CF6679</Color>
|
||||
<Color x:Key="OnPrimaryColor">#000000</Color>
|
||||
<Color x:Key="OnSecondaryColor">#000000</Color>
|
||||
<Color x:Key="OnBackgroundColor">#FFFFFF</Color>
|
||||
<Color x:Key="OnSurfaceColor">#DEFFFFFF</Color>
|
||||
<Color x:Key="OnErrorColor">#000000</Color>
|
||||
<Color x:Key="OverlayColor">#51FFFFFF</Color>
|
||||
</ResourceDictionary>
|
||||
</ResourceDictionary.ThemeDictionaries>
|
||||
</ResourceDictionary>
|
||||
|
||||
```
|
||||
|
||||
|
||||
3. Include the MergedDictionary in your application resources. We recommend in App.xaml like this:
|
||||
```xaml
|
||||
<Application x:Class="Uno.Material.Samples.App"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:material="using:Uno.Material">
|
||||
<Application.Resources>
|
||||
<ResourceDictionary>
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<!-- Import all styles from Uno.Material -->
|
||||
<material:MaterialLibraryResources />
|
||||
<!-- Adjust Path accordingly, this path assumes Colors.xaml is in the same directory as App.xaml -->
|
||||
<ResourceDictionary Source="Colors.xaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
</Application.Resources>
|
||||
</Application>
|
||||
```
|
||||
|
||||
4. Start using the styles in your pages!
|
||||
- To use styles, just find the name of the style from our documentation or sample app and use it like this
|
||||
```
|
||||
<Button Content="CONTAINED"
|
||||
Style="{StaticResource ContainedMaterialButtonStyle}"/>
|
||||
```
|
||||
|
||||
- Here is how to use our custom controls like a Card
|
||||
```
|
||||
xmlns:material="using:Uno.Material.Controls"
|
||||
|
||||
[...]
|
||||
|
||||
<material:Card Header="Outlined card"
|
||||
SubHeader="With title and subitle"
|
||||
Style="{StaticResource OutlinedMaterialCardStyle}" />
|
||||
```
|
||||
5. (Optional) Set material styles as the default for your whole application.
|
||||
For example, if you wish to use our ToggleSwitch style as your default style, simply set it as an implicit style in your app by adding the following code in your App.xaml
|
||||
```
|
||||
<Style TargetType="ToggleSwitch"
|
||||
BasedOn="{StaticResource MaterialToggleSwitchStyle}"/>
|
||||
```
|
||||
You can do the same for each control!
|
||||
Learn more about implicit styles from the Microsoft documentation [here](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-styles#apply-an-implicit-or-explicit-style)
|
||||
|
||||
6. (Optional) Per-control customization.
|
||||
Just like WinUI, we documented a set of control-specific resources you can override to further customize our controls.
|
||||
For example, if you would like change the `CornerRadius` of all the `Buttons` using our material styles, you could simply override the `ButtonBorderRadius` value in your resources (in App.xaml would be the simplest way to put the following code)
|
||||
```
|
||||
<CornerRadius x:Key="ButtonBorderRadius">4</CornerRadius>
|
||||
```
|
||||
<!-- TODO: Add reference on where to get those resource names -->
|
||||
|
||||
## Features
|
||||
|
||||
{More details/listing of features of the project}
|
||||
### Styles for basic controls
|
||||
|
||||
| **Controls** | **StyleNames** | **Visual Reference** |
|
||||
|----------|-------------------------------------------------------------------------------------------|------------------|
|
||||
| Button | ContainedMaterialButtonStyle <br> OutlinedMaterialButtonStyle<br> TextMaterialButtonStyle | TODO |
|
||||
| CheckBox | MaterialCheckBoxStyle | TODO |
|
||||
| ComboBox | MaterialComboBoxStyle | TODO |
|
||||
| CommandBar | MaterialCommandBarStyle | TODO |
|
||||
| NavigationView | MaterialNavigationViewStyle | TODO |
|
||||
| RadioButton | MaterialRadioButtonStyle | TODO |
|
||||
| TextBlock | Headline1 <br> Headline2 <br> Headline3 <br> Headline4 <br> Headline5 <br> Headline6 <br> Subtitle1 <br> Subtitle2 <br> Body1 <br> Body2 <br> Button <br> Caption <br> Overline | TODO |
|
||||
| TextBox | DefaultMaterialTextBoxStyle <br> OutlineMaterialTextBoxStyle | TODO |
|
||||
| ToggleButton | TextMaterialToggleButtonStyle | TODO |
|
||||
| ToggleSwitch | MaterialToggleSwitchStyle | TODO |
|
||||
|
||||
### Styles for custom controls
|
||||
| **Controls** | **StyleNames** | **Visual Reference** |
|
||||
|--------------|---------------------------------------------------------------------------------------|------------------|
|
||||
| Card | OutlinedMaterialCardStyle <br> OtherOutlinedLayoutMaterialCardStyle | TODO |
|
||||
| SnackBar | MaterialSnackBarStyle | TODO |
|
||||
|
||||
|
||||
## Changelog
|
||||
|
||||
|
|
@ -42,6 +173,7 @@ contributing to this project.
|
|||
Be mindful of our [Code of Conduct](CODE_OF_CONDUCT.md).
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
[Material Design](https://material.io/design)
|
||||
[Material Design In XAML, for uwp ripple effect](https://github.com/MaterialDesignInXAML)
|
||||
- [Uno Platform](https://platform.uno)
|
||||
- [Material Design](https://material.io/design)
|
||||
- [Material Design In XAML, for uwp ripple effect](https://github.com/MaterialDesignInXAML)
|
||||
- [WinUI](https://microsoft.github.io/microsoft-ui-xaml/)
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче