Add lab examples for selectable item

getkirby · Dec 17, 2024 · febbef5 · febbef5
1 parent dab3a6d
commit febbef5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/panel/lab/components/item/1_list/index.vue b/panel/lab/components/item/1_list/index.vue
@@ -69,6 +69,14 @@
 				width="1/2"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Selectable">
+			<k-item
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				:selectable="true"
+				info="With some info"
+				text="This is a nice item"
+			/>
+		</k-lab-example>
 		<k-lab-example label="Theme: disabled">
 			<k-item
 				:image="{ src: 'https://picsum.photos/800/600' }"

diff --git a/panel/lab/components/item/2_cards/index.vue b/panel/lab/components/item/2_cards/index.vue
@@ -73,6 +73,15 @@
 				width="1/2"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Selectable">
+			<k-item
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				:selectable="true"
+				layout="cards"
+				info="With some info"
+				text="This is a nice item"
+			/>
+		</k-lab-example>
 		<k-lab-example label="Theme: disabled">
 			<k-item
 				:image="{ src: 'https://picsum.photos/800/600' }"

diff --git a/panel/lab/components/item/3_cardlets/index.vue b/panel/lab/components/item/3_cardlets/index.vue
@@ -77,6 +77,15 @@
 				width="1/2"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Selectable">
+			<k-item
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				:selectable="true"
+				layout="cardlets"
+				info="With some info"
+				text="This is a nice item"
+			/>
+		</k-lab-example>
 		<k-lab-example label="Theme: disabled">
 			<k-item
 				:image="{ src: 'https://picsum.photos/800/600' }"