Update VList.stories.tsx

inokawa · Oct 8, 2023 · 7812b79 · 7812b79
1 parent bc81d7b
commit 7812b79
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/stories/basics/VList.stories.tsx b/stories/basics/VList.stories.tsx
@@ -120,6 +120,47 @@ export const Reverse: StoryObj = {
   },
 };
 
+export const Responsive: StoryObj = {
+  render: () => {
+    const itemClass = "item";
+    return (
+      <>
+        <VList style={{ height: "100vh" }}>
+          {Array.from({ length: 1000 }).map((_, i) => {
+            return (
+              <div
+                key={i}
+                className={itemClass}
+                style={{
+                  borderBottom: "solid 1px #ccc",
+                  background: "#fff",
+                }}
+              >
+                {i}
+              </div>
+            );
+          })}
+        </VList>
+        <style>{`
+          .${itemClass} {
+            height: 40px;
+
+            @media (max-width: 1024px) {
+              height: 80px;
+            }
+            @media (max-width: 700px) {
+              height: 160px;
+            }
+            @media (max-width: 400px) {
+              height: 320px;
+            }
+          }
+        `}</style>
+      </>
+    );
+  },
+};
+
 export const Sticky: StoryObj = {
   render: () => {
     return (