docs: update documentation (#227)
* chore: renamed docs\ folder to doc\ * docs: update documentation
This commit is contained in:
Xiaotian Gu
GitHub
Родитель
ddb2803e45
Коммит
ff9fd4e2dc
124
README.md
124
README.md
|
|
@ -1,115 +1,25 @@
|
|||
# Uno Toolkit
|
||||
A set of custom controls for the UWP, WinUI and the Uno Platform not offered out of the box by WinUI, such as Card, TabBar, NavigationBar, etc.
|
||||
|
||||
## Getting Started
|
||||
The steps to bootstrap Uno.Toolkit.UI into your application is very similar to those of [Uno.Material/Uno.Cupertino](https://github.com/unoplatform/Uno.Themes#getting-started).
|
||||
Package|Stable|Preview
|
||||
-|-|-
|
||||
Uno.Toolkit.UI|[](https://www.nuget.org/packages/Uno.Toolkit.UI)|[](https://www.nuget.org/packages/Uno.Toolkit.UI)
|
||||
Uno.Toolkit.UI.Material|[](https://www.nuget.org/packages/Uno.Toolkit.UI.Material)|[](https://www.nuget.org/packages/Uno.Toolkit.UI.Material)
|
||||
Uno.Toolkit.UI.Cupertino|[](https://www.nuget.org/packages/Uno.Toolkit.UI.Cupertino)|[](https://www.nuget.org/packages/Uno.Toolkit.UI.Cupertino)
|
||||
Uno.Toolkit.WinUI|[](https://www.nuget.org/packages/Uno.Toolkit.WinUI)|[](https://www.nuget.org/packages/Uno.Toolkit.WinUI)
|
||||
Uno.Toolkit.WinUI.Material|[](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material)|[](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material)
|
||||
Uno.Toolkit.WinUI.Cupertino|[](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Cupertino)|[](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Cupertino)
|
||||
|
||||
1. Install the `Uno.Toolkit.UI` NuGet Package
|
||||
2. Initialize the Toolkit resources. The order in which the different resources are loaded is important. Add this to `App.xaml`
|
||||
```diff
|
||||
<Application.Resources>
|
||||
<ResourceDictionary>
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<!-- Load WinUI resources -->
|
||||
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
|
||||
## Documentation
|
||||
|
||||
+ <!-- Load Toolkit resources -->
|
||||
+ <ToolkitResources xmlns="using:Uno.Toolkit.UI" />
|
||||
All documentation for Uno.Themes can be found [here](doc/) or on [Uno Platform documentation](https://platform.uno/docs/articles/intro.html).
|
||||
|
||||
<!-- Load remaining application resources -->
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
</Application.Resources>
|
||||
```
|
||||
3. (Optional) The Uno Toolkit also comes packaged with Material and Cupertino styles for many of its controls. If you wish to use the styles in your application, add the following to your `App.xaml`. Again, the order in which the resources are loaded is important:
|
||||
## License
|
||||
|
||||
> ⚠️
|
||||
> Please note that you will need to install and initialize the Uno.Material and/or the Uno.Cupertino packages before you can use the Material/Cupertino Toolkit styles.
|
||||
This project is licensed under the Apache 2.0 license - see the
|
||||
[LICENSE](LICENSE) file for details.
|
||||
|
||||
```diff
|
||||
<Application.Resources>
|
||||
<ResourceDictionary>
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<!-- Load WinUI resources -->
|
||||
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
|
||||
|
||||
<!-- Load Uno.UI.Toolkit resources -->
|
||||
<ToolkitResources xmlns="using:Uno.Toolkit.UI" />
|
||||
|
||||
+ <!-- Load Material resources -->
|
||||
+ <MaterialColors xmlns="using:Uno.Material" />
|
||||
+ <MaterialResources xmlns="using:Uno.Material" />
|
||||
|
||||
+ <!-- Load Cupertino resources -->
|
||||
+ <CupertinoColors xmlns="using:Uno.Cupertino" />
|
||||
+ <CupertinoResources xmlns="using:Uno.Cupertino" />
|
||||
|
||||
+ <!-- Load Material Toolkit resources -->
|
||||
+ <MaterialToolkitResources xmlns="using:Uno.Toolkit.UI.Material" />
|
||||
|
||||
+ <!-- Load Cupertino Toolkit resources -->
|
||||
+ <CupertinoToolkitResources xmlns="using:Uno.Toolkit.UI.Cupertino" />
|
||||
|
||||
<!-- Load remaining application resources -->
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
</Application.Resources>
|
||||
```
|
||||
|
||||
4. Start using our controls on your pages!
|
||||
Here is an example of usage for our TabBar control:
|
||||
|
||||
```xml
|
||||
xmlns:utu="using:Uno.Toolkit.UI"
|
||||
|
||||
[...]
|
||||
|
||||
<utu:TabBar>
|
||||
<utu:TabBar.Items>
|
||||
|
||||
<utu:TabBarItem Content="HOME">
|
||||
<utu:TabBarItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
</utu:TabBarItem.Icon>
|
||||
</utu:TabBarItem>
|
||||
<utu:TabBarItem Content="SUPPORT">
|
||||
<utu:TabBarItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
</utu:TabBarItem.Icon>
|
||||
</utu:TabBarItem>
|
||||
<utu:TabBarItem Content="ABOUT">
|
||||
<utu:TabBarItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
</utu:TabBarItem.Icon>
|
||||
</utu:TabBarItem>
|
||||
|
||||
</utu:TabBar.Items>
|
||||
</utu:TabBar>
|
||||
```
|
||||
|
||||
### Further Documentation
|
||||
For further documentation regarding any of the controls within Toolkit, you can find them in the `docs/controls` folder or listed here:
|
||||
- [CardContentControl](docs/controls/CardContentControl.md)
|
||||
- [Chip](docs/controls/Chip.md)
|
||||
- [SegmentedControl](docs/controls/SegmentedControls.md)
|
||||
|
||||
### Material Styles for Toolkit controls
|
||||
| **Controls** | **StyleNames** |
|
||||
|---------------------------|-------------------------------------------------------------------------------|
|
||||
| BottomTabBar | MaterialBottomTabBarStyle <br> MaterialBottomFabTabBarItemStyle <br> MaterialBottomTabBarItemStyle |
|
||||
| Card | MaterialOutlinedCardStyle <br> MaterialElevatedCardStyle <br> MaterialAvatarOutlinedCardStyle <br> MaterialAvatarElevatedCardStyle <br> MaterialSmallMediaOutlinedCardStyle <br> MaterialSmallMediaElevatedCardStyle |
|
||||
| CardContentControl | MaterialOutlinedCardContentControlStyle <br> MaterialElevatedCardContentControlStyle |
|
||||
| Chip | MaterialFilledInputChipStyle<br>MaterialFilledChoiceChipStyle<br>MaterialFilledFilterChipStyle<br>MaterialFilledActionChipStyle<br>MaterialOutlinedInputChipStyle<br>MaterialOutlinedChoiceChipStyle<br>MaterialOutlinedFilterChipStyle<br>MaterialOutlinedActionChipStyle |
|
||||
| ChipGroup | MaterialFilledInputChipGroupStyle<br>MaterialFilledChoiceChipGroupStyle<br>MaterialFilledFilterChipGroupStyle<br>MaterialFilledActionChipGroupStyle<br>MaterialOutlinedInputChipGroupStyle<br>MaterialOutlinedChoiceChipGroupStyle<br>MaterialOutlinedFilterChipGroupStyle<br>MaterialOutlinedActionChipGroupStyle |
|
||||
| Divider | MaterialDividerStyle |
|
||||
| NavigationBar | MaterialNavigationBarStyle <br> MaterialModalNavigationBarStyle <br> MaterialMainCommandStyle <br> MaterialModalMainCommandStyle |
|
||||
| TopTabBar | MaterialTopTabBarStyle <br> MaterialTopTabBarItemStyle |
|
||||
|
||||
|
||||
|
||||
### Cupertino Styles for Toolkit controls
|
||||
| **Controls** | **StyleNames** |
|
||||
|---------------------------|-------------------------------------------------------------------------------|
|
||||
| BottomTabBar | CupertinoBottomTabBarStyle <br> CupertinoBottomTabBarItemStyle |
|
||||
| SegmentedControl | CupertinoSegmentedStyle <br> CupertinoSegmentedItemStyle |
|
||||
| SlidingSegmentedControl | CupertinoSlidingSegmentedStyle <br> CupertinoSlidingSegmentedItemStyle |
|
||||
## Acknowledgments
|
||||
- [Uno Platform](https://platform.uno)
|
||||
- [Material Design](https://material.io/design)
|
||||
- [WinUI](https://microsoft.github.io/microsoft-ui-xaml/)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
# Controls
|
||||
The `Uno.Toolkit.UI` library adds the follows controls:
|
||||
- `AutoLayout`: A custom panel created for the [Figma plugin](https://platform.uno/unofigma/) to bridge the gap between Figma and UWP layout implementation.
|
||||
- [`Card` and `CardContentControl`](controls\CardContentControl.md): \[Material control\] Cards contain content and actions that relate information about a subject.
|
||||
- [`Chip` and `ChipGroup`](controls\Chip.md): \[Material control\] Chips are compact elements that represent an input, attribute, or action.
|
||||
- `Divider`: \[Material control\] A divider is a thin line that groups content in lists and layouts.
|
||||
- `DrawerControl`: A container to display additional content, in a hidden pane that can be revealed using swipe gesture, like a drawer.
|
||||
- `NavigationBar`: todo
|
||||
- `TabBar`: todo
|
||||
|
||||
# Helpers
|
||||
The `Uno.Toolkit.UI` library adds the follows helper classes:
|
||||
- `SystemThemeHelper`: Provides a set of helper methods to check the current operating system theme, and manipulate the application dark/light theme.
|
||||
|
||||
# Control Styles
|
||||
Control|Style Key|Implicit Style*|
|
||||
-|-|-
|
||||
AppBarButton|MainCommandStyle|implicit
|
||||
AppBarButton|ModalMainCommandStyle|
|
||||
utu:Chip|AssistChipStyle|
|
||||
utu:Chip|ElevatedAssistChipStyle|
|
||||
utu:Chip|InputChipStyle|
|
||||
utu:Chip|FilterChipStyle|
|
||||
utu:Chip|ElevatedFilterChipStyle|
|
||||
utu:Chip|SuggestionChipStyle|
|
||||
utu:Chip|ElevatedSuggestionChipStyle|
|
||||
utu:ChipGroup|InputChipGroupStyle|
|
||||
utu:ChipGroup|ElevatedSuggestionChipGroupStyle|
|
||||
utu:ChipGroup|SuggestionChipGroupStyle|
|
||||
utu:ChipGroup|ElevatedFilterChipGroupStyle|
|
||||
utu:ChipGroup|FilterChipGroupStyle|
|
||||
utu:ChipGroup|ElevatedAssistChipGroupStyle|
|
||||
utu:ChipGroup|AssistChipGroupStyle|
|
||||
utu:Divider|DividerStyle|implicit
|
||||
utu:NavigationBar|NavigationBarStyle|implicit
|
||||
utu:NavigationBar|ModalNavigationBarStyle|
|
||||
utu:TabBar|TopTabBarStyle|
|
||||
utu:TabBar|ColoredTopTabBarStyle|
|
||||
|
||||
Implicit Style*: Styles marked with `implicit` can be made into the default implicit styles by setting the `WithImplicitStyles` flag to `True`:
|
||||
```xml
|
||||
<MaterialToolkitResources xmlns="using:Uno.Toolkit.UI.Material" WithImplicitStyles="True" />
|
||||
```
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# Getting Started
|
||||
The Uno.Toolkit.Material library is available as NuGet packages that can be added to any new or existing Uno solution.
|
||||
|
||||
1. Open an existing Uno project, or create a new Uno project using the `Multi-Platform App (Uno Platform)` template.
|
||||
2. In Solution Explorer panel, right click on your solution name and select `Manage NuGet Packages for Solution ...`. Choose [`Uno.Toolkit.UI.Material`](https://www.nuget.org/packages/Uno.Toolkit.UI.Material) package for Uno UWP solution or Choose the [`Uno.Toolkit.WinUI.Material`](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material) package for Uno WinUI solution. And, select the follow projects to include it:
|
||||
- `PROJECT_NAME.Wasm.csproj`
|
||||
- `PROJECT_NAME.Mobile.csproj` (or `PROJECT_NAME.iOS.csproj`, `PROJECT_NAME.Droid.csproj`, `PROJECT_NAME.macOS.csproj` if you have an existing project)
|
||||
- `PROJECT_NAME.Skia.Gtk.csproj`
|
||||
- `PROJECT_NAME.Skia.WPF.csproj`
|
||||
- `PROJECT_NAME.Windows.csproj` (or `PROJECT_NAME.UWP.csproj` for existing projects)
|
||||
3. Add the resources to `App.xaml`:
|
||||
```xml
|
||||
<Application ...>
|
||||
<Application.Resources>
|
||||
<ResourceDictionary>
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
|
||||
<!-- Load WinUI resources -->
|
||||
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
|
||||
|
||||
<!-- Load Uno.Material resources -->
|
||||
<MaterialColors xmlns="using:Uno.Material" />
|
||||
<MaterialFonts xmlns="using:Uno.Material" />
|
||||
<MaterialResources xmlns="using:Uno.Material" />
|
||||
|
||||
<!-- Load Uno.Toolkit.UI resources -->
|
||||
<ToolkitResources xmlns="using:Uno.Toolkit.UI" />
|
||||
<MaterialToolkitResources xmlns="using:Uno.Toolkit.UI.Material" />
|
||||
|
||||
<!-- Load custom application resources -->
|
||||
<!-- ... -->
|
||||
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
</Application.Resources>
|
||||
</Application>
|
||||
```
|
||||
> The styles for the new controls are found in both ToolkitResources (design-agnostic variants) and MaterialToolkitResources(Material Design variants).
|
||||
|
||||
# Customization
|
||||
For instruction on changing the default color palette or the font family, please refer to [this guide](https://github.com/unoplatform/Uno.Themes/blob/master/doc/getting-started.md#customization).
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
items:
|
||||
- name: Getting Started
|
||||
href: getting-started.md
|
||||
- name: Controls and Styles
|
||||
href: controls-styles.md
|
||||
|
||||
- name: Controls
|
||||
items:
|
||||
- name: CardContentControl
|
||||
href: controls/CardContentControl.md
|
||||
- name: Chip
|
||||
href: controls/Chip.md
|
||||
Загрузка…
Ссылка в новой задаче