From c7f405be1874b6fee1fd9674dea3208e19aab2ce Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Wed, 9 Oct 2024 18:52:23 +0800
Subject: docs: add example about new layout

---
 README.md | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

(limited to 'README.md')

diff --git a/README.md b/README.md
index 3296bd5..8fec281 100644
--- a/README.md
+++ b/README.md
@@ -126,14 +126,24 @@ After `generateMaps()`, the container has the following structure:
 
 Dumbymap switch layouts by attribute `data-layout` of container. Most of the features are done by pure CSS.
 
-You can add custom layout by options `layouts`:
+You can add custom layout by options `layouts`. For example, the following code add a new layout `sticky` to stick `Showcase` at bottom right corner:
+
+```css
+.Dumby[data-layout='sticky'] {
+  .Showcase {
+    display: block;
+    width: 20vw;
+    height: 40vh;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: red;
+  }
+}
+```
 
 ```js
-generateMaps(container, {
-  layouts: [
-    "LAYOUT-NAME"
-  ]
-})
+generateMaps(container, { layouts: "sticky" })
 ```
 
 
-- 
cgit v1.2.3-70-g09d2