Merge pull request #115 from enisn/containers

Add container styles
enisn · Nov 19, 2022 · e17ba46 · e17ba46
2 parents 5ee1518 + bc941f7
commit e17ba46
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 30 deletions.
diff --git a/demo/UraniumApp/MainPage.xaml b/demo/UraniumApp/MainPage.xaml
@@ -19,29 +19,9 @@
             Padding="30"
             VerticalOptions="Center">
 
-            <StackLayout StyleClass="PrimaryContainer" Padding="10">
-                <Label Text="Hello from primary container" />
-            </StackLayout>
-
-            <StackLayout StyleClass="SecondaryContainer" Padding="10">
-                <Label Text="Hello from secondary container" />
-            </StackLayout>
-
-            <StackLayout StyleClass="TertiaryContainer" Padding="10">
-                <Label Text="Hello from tertiary container" />
-            </StackLayout>
-
-            <StackLayout StyleClass="ErrorContainer" Padding="10">
-                <Label Text="Hello from error container" />
-            </StackLayout>
-
-
-
-            <!--<StackLayout>
-                <Frame>
-                    <Label Text="Hello, Uranium ☢️" />
-                </Frame>
-            </StackLayout>-->
+            <Frame>
+                <Label Text="Hello, Uranium ☢️" />
+            </Frame>
 
         </VerticalStackLayout>
     </ScrollView>

diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json
@@ -132,6 +132,10 @@
         {
           "text": "TabView",
           "path": "themes/material/components/TabView.md"
+        },
+        {
+          "text": "Containers",
+          "path": "themes/material/Containers.md"
         }
       ]
     },

diff --git a/docs/en/themes/material/Containers.md b/docs/en/themes/material/Containers.md
@@ -0,0 +1,51 @@
+# Containers
+Uranium UI provies a set of style classes to help you style your application. You can use these classes to style your application in a consistent way.
+Containers are layouts that has a specific background and they modifies elements inside them. If background of a container is a dark color, texts inside it will be a light color and vice versa.
+
+Container classes can be defined any type of View, but they are mostly used with `*Layout` and `Frame`.
+
+## Usage
+You should pass a proper container class as `StyleClass` property of a View. 
+
+Valid container classes are:
+
+- `PrimaryContainer`
+- `SecondaryContainer`
+- `TertiaryContainer`
+- `ErrorContainer`
+
+
+```xml
+<Frame StyleClass="PrimaryContainer">
+    <Label Text="Hello, World!" />
+</Frame>
+```
+
+![Uranium UI Simple Container](images/containers-demo.png)
+
+---
+
+List of all containers:
+
+```xml
+<StackLayout StyleClass="PrimaryContainer" Padding="10">
+    <Label Text="Hello from primary container" />
+</StackLayout>
+
+<StackLayout StyleClass="SecondaryContainer" Padding="10">
+    <Label Text="Hello from secondary container" />
+</StackLayout>
+
+<StackLayout StyleClass="TertiaryContainer" Padding="10">
+    <Label Text="Hello from tertiary container" />
+</StackLayout>
+
+<StackLayout StyleClass="ErrorContainer" Padding="10">
+    <Label Text="Hello from error container" />
+</StackLayout>
+```
+
+
+| Light | Dark |
+| --- | --- |
+| ![Uranium UI Containers Light](images/containers-demo-android-light.png) | ![Uranium UI Containers Dark](images/containers-demo-android-dark.png) |
diff --git a/docs/en/themes/material/images/containers-demo-android-dark.png b/docs/en/themes/material/images/containers-demo-android-dark.png
diff --git a/docs/en/themes/material/images/containers-demo-android-light.png b/docs/en/themes/material/images/containers-demo-android-light.png
diff --git a/docs/en/themes/material/images/containers-demo.png b/docs/en/themes/material/images/containers-demo.png
diff --git a/src/UraniumUI.Material/Resources/StyleResource.xaml b/src/UraniumUI.Material/Resources/StyleResource.xaml
@@ -348,7 +348,7 @@
                                 </Style>
                             </ResourceDictionary>
                         </Setter.Value>
-                    </Setter>                    
+                    </Setter>
                     <Setter Property="VisualStateManager.VisualStateGroups">
                         <VisualStateGroupList>
                             <VisualStateGroup x:Name="CommonStates">
@@ -397,7 +397,7 @@
                     <Setter Property="t:CascadingStyle.Resources">
                         <ResourceDictionary>
                             <Style TargetType="Label">
-                                <Setter Property="TextColor" Value="{AppThemeBinding Light={DynamicResource OnPrimaryContainer},Dark={DynamicResource OnPrimaryContainerDark}}" />
+                                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource OnPrimaryContainer},Dark={StaticResource OnPrimaryContainerDark}}" />
                             </Style>
                         </ResourceDictionary>
                     </Setter>
@@ -408,7 +408,7 @@
                     <Setter Property="t:CascadingStyle.Resources">
                         <ResourceDictionary>
                             <Style TargetType="Label">
-                                <Setter Property="TextColor" Value="{AppThemeBinding Light={DynamicResource OnSecondaryContainer},Dark={DynamicResource OnSecondaryContainerDark}}" />
+                                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource OnSecondaryContainer},Dark={StaticResource OnSecondaryContainerDark}}" />
                             </Style>
                         </ResourceDictionary>
                     </Setter>
@@ -419,23 +419,23 @@
                     <Setter Property="t:CascadingStyle.Resources">
                         <ResourceDictionary>
                             <Style TargetType="Label">
-                                <Setter Property="TextColor" Value="{AppThemeBinding Light={DynamicResource OnTertiaryContainer},Dark={DynamicResource OnTertiaryContainerDark}}" />
+                                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource OnTertiaryContainer},Dark={StaticResource OnTertiaryContainerDark}}" />
                             </Style>
                         </ResourceDictionary>
                     </Setter>
                 </Style>
-                
+
                 <Style TargetType="View" Class="ErrorContainer" ApplyToDerivedTypes="True">
                     <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource ErrorContainer}, Dark={StaticResource ErrorContainerDark}}" />
                     <Setter Property="t:CascadingStyle.Resources">
                         <ResourceDictionary>
                             <Style TargetType="Label">
-                                <Setter Property="TextColor" Value="{AppThemeBinding Light={DynamicResource OnErrorContainer},Dark={DynamicResource OnErrorContainerDark}}" />
+                                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource OnErrorContainer},Dark={StaticResource OnErrorContainerDark}}" />
                             </Style>
                         </ResourceDictionary>
                     </Setter>
                 </Style>
-                
+
             </ResourceDictionary>
         </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>