From 373842b33344163a6d26dbe62fb4ed8deff189f5 Mon Sep 17 00:00:00 2001 From: Carl de Billy Date: Mon, 20 Jul 2020 12:00:00 -0400 Subject: [PATCH] docs(elevatedview): applied suggested corerctions to documentation Co-authored-by: David Oliver --- doc/articles/features/ElevatedView.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/doc/articles/features/ElevatedView.md b/doc/articles/features/ElevatedView.md index 8fefaa917602..95a1780d0922 100644 --- a/doc/articles/features/ElevatedView.md +++ b/doc/articles/features/ElevatedView.md @@ -1,9 +1,9 @@ # ElevatedView -On many design languages like _Material Design_, there's a notion of elevation where a portion of the UI should be presented has been _elevated_ over the rest of the content. +In many design languages (like [_Material Design_](https://material.io/design)), there's a notion of 'elevation' where a portion of the UI should be presented as being _elevated_ over the rest of the content. -In this case, the UWP proposed solution can't work on all platforms because of technical limitations. To address this problem, Uno provides a control called `ElevatedView`, able to produce a similar result on all platforms, providing an elevated result. +In this case, UWP's native elevation API can't work on all platforms because of technical limitations. To address this problem, Uno provides a control called `ElevatedView`, able to produce a similar elevated effect on all platforms (UWP, Android, iOS, WebAssembly, and macOS). -This control is very useful to create cards with both rounded corners and elevated effect - which could be challenging to produce on some platforms. +This control is very useful to create cards with both rounded corners and an elevated effect - which could otherwise be challenging to produce on some platforms. ## How to use the `ElevatedView` @@ -30,20 +30,19 @@ Will produce the following result: ![ElevatedView sample](../Assets/features/elevatedview/elevatedview-sample.png) -> **ATTENTION FOR UWP**: When there is an error seeing the `` on UWP, the common mistake is to forget to include the `Uno.UI` package for all platforms, including UWP. On this platform, the only available component is the Toolkit. +> **ATTENTION FOR UWP**: When there is an error seeing the `` on UWP, the common mistake is to forget to include the `Uno.UI` package for all platforms, including UWP. On UWP, the only component that the `Uno.UI` package adds is the Toolkit. ## Settings You can set the following properties: -* `Elevation`: numeric number representing the level of the elevation effect. Typical values are between 5 and 30. Default to `0` - no elevation. -* `ShadowColor`: By default the casted shadow will be `Black`, but you can set any other value. You can reduce the shadow effect by using the alpha channel [except Android]. On Android, the shadow color can only be changed since Android Pie (API 28+). Default to `Black` with alpha channel at 25%. -* `Background`: Default to `Transparent`. Setting `null` will remove the shadow effect. -* `CornerRadius`: Use it to create rounded corner effects. The shadow should follow them. +* `Elevation`: numeric number representing the level of the elevation effect. Typical values are between 5 and 30. The default is `0` - no elevation. +* `ShadowColor`: By default the shadow will be `Black`, but you can set any other value. You can reduce the shadow effect by using the alpha channel [except Android]. On Android, the shadow color can only be changed since Android Pie (API 28+). The default is `Black` with alpha channel at 25%. +* `Background`: The default is `Transparent`. Setting `null` will remove the shadow effect. +* `CornerRadius`: Use it to create rounded corner effects. The shadow will follow them. ## Particularities -* Make sure to _give room_ for the shadow in the layout. Some platforms like macOS could easily clip the shadow. For the same reason, avoid wrapping the `` directly in a ` ` because it's designed to clip its content. - +* Make sure to _give room_ for the shadow in the layout (eg by setting a `Margin` on the `ElevatedView`). Some platforms like macOS may clip the shadow otherwise. For the same reason, avoid wrapping the `` directly in a ` ` because it's designed to clip its content.