Update glasscard.md

kikipoulet · Sep 2, 2024 · de5e43e · de5e43e
1 parent 498d278
commit de5e43e
Showing 1 changed file with 57 additions and 11 deletions.
diff --git a/docs/docs/documentation/controls/layout/glasscard.md b/docs/docs/documentation/controls/layout/glasscard.md
@@ -2,32 +2,78 @@
 
 A simple Card control that can present any control inside.
 
-You can adjust whether the `GlassCard` is opaque or not and with or without interactive effects.
+### Dark Theme
 
-## Show
+<img src="https://sleekshot.app/api/download/GfUS8bUZT6TQ"/>
 
-- Normal
+### Light Theme
 
-<img src="/controls/layout/glasscard-1.webp" height="300px" width="300px"/>
+<img src="https://sleekshot.app/api/download/M1xlZe6nmF72"/>
 
-- Opaque
 
-<img src="/controls/layout/glasscard-2.webp" height="300px" width="300px"/>
+```xml
+<GlassCard>
+    <!-- Content -->
+</GlassCard>
+```
 
-- Interactive
 
-<img src="/controls/layout/glasscard-3.webp" height="300px" width="300px"/>
+## Alternative Style
+
+### Primary
+
+<img src="https://sleekshot.app/api/download/DC48QzG5R1XT"/>
 
-## Example
 
 ```xml
-<GlassCard>
+<GlassCard Classes="Primary">
     <!-- Content -->
 </GlassCard>
 ```
 
+### Accent
+
+<img src="https://sleekshot.app/api/download/cclRRlzglCB8"/>
+
+
+```xml
+<GlassCard Classes="Accent">
+    <!-- Content -->
+</GlassCard>
+```
+
+### Opaque
+
+<img src="https://sleekshot.app/api/download/MW4zpqNj9FLK"/>
+
+
+```xml
+<GlassCard IsOpaque="True">
+    <!-- Content -->
+</GlassCard>
+```
+
+### Interactive
+
+![interactive](https://github.com/user-attachments/assets/0a1ba6ac-b3e0-4eb6-ad7e-f782820a0506)
+
+
+```xml
+<GlassCard IsInteractive="True">
+    <!-- Content -->
+</GlassCard>
+```
+
+## Animations
+
+GlassCard are animated with CompositionAnimations by the property IsAnimated set to 'True' by default. Opacity changes and Size changes of the GlassCard are automatically animated.
+
+![animated](https://github.com/user-attachments/assets/b38d4ec2-067a-443c-ac20-65a2f6302920)
+
+
+
 ## See Also
 
 [Demo: SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI.Demo/Features/ControlsLibrary/CardsView.axaml)
 
-[API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs)
+[API: Controls/GlassMorphism/GlassCard.axaml.cs](https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/Controls/GlassMorphism/GlassCard.axaml.cs)