ivyforms / frontend / src / views / admin / testing / testing-page / TestingRadio.vue

TestingRadio.vue in The Innovative Form Builder – IvyForms 0.8.2, at frontend/src/views/admin/testing/testing-page/TestingRadio.vue

147 lines 3.6 KB

Raw Download Zip

1	<template>
2	<div>
3	<h3>Radio Button Props Controls</h3>
4	<div class="radio-controls">
5	<!-- Label Position -->
6	<label>
7	Label Position:
8	<select v-model="labelPosition">
9	<option value="left">Left</option>
10	<option value="right">Right</option>
11	</select>
12	</label>
13
14	<!-- Description -->
15	<label>
16	Description:
17	<input v-model="description" placeholder="Enter description" />
18	</label>
19
20	<!-- Background -->
21	<label>
22	<input v-model="background" type="checkbox" />
23	Background
24	</label>
25
26	<!-- Priority -->
27	<label>
28	Priority:
29	<select v-model="priority">
30	<option value="primary">Primary</option>
31	<option value="secondary">Secondary</option>
32	<option value="amber">Amber</option>
33	</select>
34	</label>
35
36	<!-- Size -->
37	<label>
38	Size:
39	<select v-model="size">
40	<option value="s">Small</option>
41	<option value="d">Default (medium)</option>
42	<option value="l">Large</option>
43	<option value="xl">Extra Large</option>
44	</select>
45	</label>
46
47	<!-- Style -->
48	<label>
49	Style:
50	<select v-model="type">
51	<option value="checkmark">Checkmark</option>
52	<option value="withMarker">With Marker</option>
53	</select>
54	</label>
55
56	<!-- Direction -->
57	<label>
58	Direction:
59	<select v-model="direction">
60	<option value="horizontal">Horizontal</option>
61	<option value="vertical">Vertical</option>
62	</select>
63	</label>
64	</div>
65	<hr />
66
67	<!-- Radio Button Preview -->
68	<div class="radio-preview">
69	<h3>Radio Button Preview</h3>
70	<IvyRadioGroup v-model="radioValue" :direction="direction">
71	<IvyRadio
72	:label-position="labelPosition"
73	:description="description"
74	:background="background"
75	:priority="priority"
76	:size="size"
77	:type="type"
78	value="radio1"
79	>
80	Test Radio Button 1
81	</IvyRadio>
82	<IvyRadio
83	:label-position="labelPosition"
84	:description="description"
85	:background="background"
86	:priority="priority"
87	:size="size"
88	:type="type"
89	value="radio2"
90	>
91	Test Radio Button 2
92	</IvyRadio>
93	<IvyRadio
94	:label-position="labelPosition"
95	:description="description"
96	:background="background"
97	:priority="priority"
98	:size="size"
99	:type="type"
100	value="radio3"
101	disabled
102	>
103	Test Radio Button 3
104	</IvyRadio>
105	</IvyRadioGroup>
106	</div>
107	</div>
108	</template>
109
110	<script setup lang="ts">
111	import { ref } from 'vue'
112	import IvyRadioGroup from '@/views/_components/radio/IvyRadioGroup.vue'
113	const radioValue = ref('') // Set an initial value
114
115	const labelPosition = ref<'left' \| 'right'>('left')
116	const description = ref('')
117	const background = ref(false)
118	const priority = ref<'primary' \| 'secondary' \| 'amber'>('primary')
119	const size = ref<'s' \| 'd' \| 'l' \| 'xl'>('d')
120	const type = ref<'checkmark' \| 'withMarker'>('checkmark')
121	const direction = ref<'horizontal' \| 'vertical'>('horizontal')
122	</script>
123
124	<style scoped>
125	.props-controls {
126	margin-bottom: 20px;
127	padding: 10px;
128	border: 1px solid #ddd;
129	border-radius: 6px;
130	}
131	.props-controls label {
132	display: block;
133	margin-bottom: 10px;
134	}
135	.radio-preview {
136	margin-top: 20px;
137	}
138	.radio-preview h3 {
139	margin-bottom: 20px;
140	}
141	hr {
142	margin: 20px 0;
143	border: none;
144	border-top: 1px solid #ddd;
145	}
146	</style>
147