Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Improve documentation #1011

Closed
wants to merge 1 commit into from
Closed

docs: Improve documentation #1011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

[![Open Uno in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/unoplatform/uno.toolkit.ui)
[![Azure DevOps](https://uno-platform.visualstudio.com/Uno%20Platform/_apis/build/status/Uno%20Platform/Uno.WindowsCommunityToolkit%20-%20CI?branchName=unorel%2F7.1)](https://uno-platform.visualstudio.com/Uno%20Platform/_build/latest?definitionId=14&branchName=unorel%2F7.1)
[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE)
[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE.md)

Uno Toolkit provides a set of higher-level UI Controls designed specifically for multi-platform, responsive applications.

Expand Down
102 changes: 51 additions & 51 deletions doc/controls-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ uid: Toolkit.ControlsHelpersStyles

The `Uno.Toolkit.UI` library adds the following controls:

- `AutoLayout`: A custom panel used by the [Figma plugin](https://platform.uno/unofigma/) to bridge the gap between Figma and UWP layout implementation.
- `AutoLayout`: A custom panel used by the [Figma plugin](https://platform.uno/unofigma/) to bridge the gap between Figma and UWP/WinUI layout implementation.
- [`Card` and `CardContentControl`](controls/CardAndCardContentControl.md): \[Material control\] Cards contain content and actions that relate information about a subject.
- [`Chip` and `ChipGroup`](controls/ChipAndChipGroup.md): \[Material control\] Chips are compact elements that represent an input, attribute, or action.
- [`Divider`](controls/Divider.md): \[Material control\] A divider is a thin line that groups content in lists and layouts.
Expand Down Expand Up @@ -33,54 +33,54 @@ Exposes visual states as attachable properties that lets you bind a string on a

## Control Styles

Control|Style Key|IsDefaultStyle*
-|-|-
AppBarButton|MainCommandStyle|True
AppBarButton|ModalMainCommandStyle|
AppBarButton|PrimaryMainCommandStyle|
AppBarButton|PrimaryModalMainCommandStyle|
AppBarButton|PrimaryAppBarButtonStyle|
utu:Card|FilledCardStyle|
utu:Card|OutlinedCardStyle|
utu:Card|ElevatedCardStyle|
utu:Card|AvatarFilledCardStyle|
utu:Card|AvatarOutlinedCardStyle|
utu:Card|AvatarElevatedCardStyle|
utu:Card|SmallMediaFilledCardStyle|
utu:Card|SmallMediaOutlinedCardStyle|
utu:Card|SmallMediaElevatedCardStyle|
utu:CardContentControl|FilledCardContentControlStyle|
utu:CardContentControl|OutlinedCardContentControlStyle|
utu:CardContentControl|ElevatedCardContentControlStyle|
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|True
FlyoutPresenter|LeftDrawerFlyoutPresenterStyle|
FlyoutPresenter|TopDrawerFlyoutPresenterStyle|
FlyoutPresenter|RightDrawerFlyoutPresenterStyle|
FlyoutPresenter|BottomDrawerFlyoutPresenterStyle|
utu:NavigationBar|NavigationBarStyle|True
utu:NavigationBar|ModalNavigationBarStyle|
utu:NavigationBar|PrimaryNavigationBarStyle|
utu:NavigationBar|PrimaryModalNavigationBarStyle|
utu:TabBar|BottomTabBarStyle|
utu:TabBar|TopTabBarStyle|
utu:TabBar|ColoredTopTabBarStyle|
utu:TabBar|VerticalTabBarStyle|
utu:TabBarItem|BottomFabTabBarItemStyle|
utu:TabBarItem|BottomTabBarItemStyle|
utu:TabBarItem|VerticalTabBarItemStyle|
| Control | Style Key | IsDefaultStyle\* |
|--------------------------|------------------------------------|-----------------|
| `AppBarButton` | `MainCommandStyle` | True |
| `AppBarButton` | `ModalMainCommandStyle` | |
| `AppBarButton` | `PrimaryMainCommandStyle` | |
| `AppBarButton` | `PrimaryModalMainCommandStyle` | |
| `AppBarButton` | `PrimaryAppBarButtonStyle` | |
| `utu:Card` | `FilledCardStyle` | |
| `utu:Card` | `OutlinedCardStyle` | |
| `utu:Card` | `ElevatedCardStyle` | |
| `utu:Card` | `AvatarFilledCardStyle` | |
| `utu:Card` | `AvatarOutlinedCardStyle` | |
| `utu:Card` | `AvatarElevatedCardStyle` | |
| `utu:Card` | `SmallMediaFilledCardStyle` | |
| `utu:Card` | `SmallMediaOutlinedCardStyle` | |
| `utu:Card` | `SmallMediaElevatedCardStyle` | |
| `utu:CardContentControl` | `FilledCardContentControlStyle` | |
| `utu:CardContentControl` | `OutlinedCardContentControlStyle` | |
| `utu:CardContentControl` | `ElevatedCardContentControlStyle` | |
| `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` | True |
| `FlyoutPresenter` | `LeftDrawerFlyoutPresenterStyle` | |
| `FlyoutPresenter` | `TopDrawerFlyoutPresenterStyle` | |
| `FlyoutPresenter` | `RightDrawerFlyoutPresenterStyle` | |
| `FlyoutPresenter` | `BottomDrawerFlyoutPresenterStyle` | |
| `utu:NavigationBar` | `NavigationBarStyle` | True |
| `utu:NavigationBar` | `ModalNavigationBarStyle` | |
| `utu:NavigationBar` | `PrimaryNavigationBarStyle` | |
| `utu:NavigationBar` | `PrimaryModalNavigationBarStyle` | |
| `utu:TabBar` | `BottomTabBarStyle` | |
| `utu:TabBar` | `TopTabBarStyle` | |
| `utu:TabBar` | `ColoredTopTabBarStyle` | |
| `utu:TabBar` | `VerticalTabBarStyle` | |
| `utu:TabBarItem` | `BottomFabTabBarItemStyle` | |
| `utu:TabBarItem` | `BottomTabBarItemStyle` | |
| `utu:TabBarItem` | `VerticalTabBarItemStyle` | |

IsDefaultStyle*: Styles in this column will be set as the default implicit style for the matching control
IsDefaultStyle\*: Styles in this column will be set as the default implicit style for the matching control
42 changes: 21 additions & 21 deletions doc/controls/AutoLayoutControl.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ uid: Toolkit.Controls.AutoLayoutControl

`AutoLayout` arranges child elements into a single row or column, depending on the `Orientation` property. The control is intended to reflect the same behaviors as the [AutoLayout Frame component in Figma](https://www.figma.com/widget-docs/api/component-AutoLayout).

### C# <!-- markdownlint-disable-line -->
### C\#

```csharp
public partial class AutoLayout : Control
Expand All @@ -30,32 +30,32 @@ xmlns:utu="using:Uno.Toolkit.UI"

### Inheritance

Object &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#8594; Control
`Object` &#8594; `DependencyObject` &#8594; `UIElement` &#8594; `FrameworkElement` &#8594; `Control` &#8594; `AutoLayout`

### Constructors

| Constructor | Description |
|-----------------|----------------------------------------------------------|
| AutoLayout() | Initializes a new instance of the `AutoLayout` class. |
| Constructor | Description |
|----------------|-------------------------------------------------------|
| `AutoLayout()` | Initializes a new instance of the `AutoLayout` class. |

### Properties

Property|Type|Description
-|-|-
Orientation | `Orientation` | Gets or sets the dimension by which the items are stacked
Spacing | `double` | Gets or sets a uniform distance (in pixels) between stacked items. It is applied in the direction of the `AutoLayout`'s Orientation
Justify | `AutoLayoutJustify` | Gets or sets the value to determine how items are justified within the container. Options are `Stack` or `SpaceBetween`. Note: if a child has its `PrimaryAlignment` set to `Stretch`, it will default to `Stack`
PrimaryAxisAlignment | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the value of the `Orientation` property. Options are `Start`, `Center`, and `End`. The default is `Start`.
CounterAxisAlignment | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End` and `Stretch`. The default is `Stretch`. If already set in `CounterAlignment` CounterAlignment will have priority.
IsReverseZIndex | `bool` | Gets or sets whether or not the ZIndex of the children should be reversed. The default is `false`
Padding | `Thickness` | **WARNING:** Padding for `AutoLayout` behaves the same as it does within the Figma Plugin: The anchor points determine which sides of the Padding will be taken into consideration. For example, items that are aligned to the Right and Top positions will only take the `Tickness.Right` and `Thickness.Top` values of `Padding` into consideration
| Property | Type | Description |
|------------------------|-----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `Orientation` | `Orientation` | Gets or sets the dimension by which the items are stacked. |
| `Spacing` | `double` | Gets or sets a uniform distance (in pixels) between stacked items. It is applied in the direction of the `AutoLayout`'s Orientation. |
| `Justify` | `AutoLayoutJustify` | Gets or sets the value to determine how items are justified within the container. Options are `Stack` or `SpaceBetween`. Note: If a child has its `PrimaryAlignment` set to `Stretch`, it will default to `Stack`. |
| `PrimaryAxisAlignment` | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the value of the `Orientation` property. Options are `Start`, `Center`, and `End`. The default is `Start`. |
| `CounterAxisAlignment` | `AutoLayoutAlignment` | Gets or sets the alignment characteristics that are applied to the content, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End`, and `Stretch`. The default is `Stretch`. If already set in `CounterAlignment`, CounterAlignment will have priority. |
| `IsReverseZIndex` | `bool` | Gets or sets whether or not the ZIndex of the children should be reversed. The default is `false`. |
| `Padding` | `Thickness` | **WARNING:** Padding for `AutoLayout` behaves the same as it does within the Figma Plugin: The anchor points determine which sides of the Padding will be taken into consideration. For example, items that are aligned to the Right and Top positions will only take the `Tickness.Right` and `Thickness.Top` values of `Padding` into consideration. |

### Attached Properties

Property|Type|Description
-|-|-
PrimaryAlignment|`AutoLayoutPrimaryAlignment`| Gets or sets the alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the value of the `Orientation` property. Options are `Auto` and `Stretch`. The default is `Auto`
CounterAlignment|`AutoLayoutAlignment`| Gets or sets the counter-alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End`, and `Stretch`. The default is `Start`. If already set in `CounterAxisAlignment` CounterAlignment will have priority.
PrimaryLength|`double`| Gets or sets the height or width of the child depending on the `Orientation`. If `Height` or `Width` are already set they will have priority.
CounterLength|`double`| Gets or sets the height or width of the child depending on the inverse of `Orientation`. If `Height` or `Width` are already set they will have priority.
IsIndependentLayout | `bool` | **WARNING:** Should not be used with other Attached Properties. Gets or sets whether the element is independent of the `AutoLayout` positioning. Reflects the `Absolute Position` option from Figma
| Property | Type | Description |
|-----------------------|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `PrimaryAlignment` | `AutoLayoutPrimaryAlignment` | Gets or sets the alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the value of the `Orientation` property. Options are `Auto` and `Stretch`. The default is `Auto`. |
| `CounterAlignment` | `AutoLayoutAlignment` | Gets or sets the counter-alignment characteristics that are applied to this element when it is composed in an `AutoLayout` parent, based on the inverse value of the `Orientation` property. Options are `Start`, `Center`, `End`, and `Stretch`. The default is `Start`. If already set in `CounterAxisAlignment`, CounterAlignment will have priority. |
| `PrimaryLength` | `double` | Gets or sets the height or width of the child depending on the `Orientation`. If `Height` or `Width` are already set they will have priority. |
| `CounterLength` | `double` | Gets or sets the height or width of the child depending on the inverse of `Orientation`. If `Height` or `Width` are already set they will have priority. |
| `IsIndependentLayout` | `bool` | **WARNING:** Should not be used with other Attached Properties. Gets or sets whether the element is independent of the `AutoLayout` positioning. Reflects the `Absolute Position` option from Figma. |
Loading