✨ new components for radio and select
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
		
							parent
							
								
									9aa16763c6
								
							
						
					
					
						commit
						7c3f87079b
					
				
					 3 changed files with 38 additions and 0 deletions
				
			
		
							
								
								
									
										17
									
								
								frontend/src/components/userform/UserFormInput.svelte
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										17
									
								
								frontend/src/components/userform/UserFormInput.svelte
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,17 @@ | ||||||
|  | <script lang="ts"> | ||||||
|  |     export let inputType:string | ||||||
|  |     export let label:string | ||||||
|  |     export let options: string[] | ||||||
|  | 	import RadioButtons from "./inputs/RadioButtons.svelte" | ||||||
|  |     import Select from "./inputs/Select.svelte"; | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <div class="flex justify-start items-center h-1/4 w-full "> | ||||||
|  |     <p class="text-primary font-bold">{label}:</p> | ||||||
|  |     {#if inputType == "radio"} | ||||||
|  |         <RadioButtons options={options}/> | ||||||
|  |     {/if} | ||||||
|  |     {#if inputType == "select"} | ||||||
|  |         <Select options={options}/> | ||||||
|  |     {/if} | ||||||
|  | </div> | ||||||
							
								
								
									
										12
									
								
								frontend/src/components/userform/inputs/RadioButtons.svelte
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								frontend/src/components/userform/inputs/RadioButtons.svelte
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,12 @@ | ||||||
|  | <script lang="ts"> | ||||||
|  |     export let options:string[] | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <div class="flex justify-between"> | ||||||
|  | {#each options as data, index (data)} | ||||||
|  |     <div class="flex flex-col justify-center items-center w-24 "> | ||||||
|  |         <button name={data} class="h-7 w-7 rounded-full border-2 border-primary hover:bg-primary"></button> | ||||||
|  |         <label class="text-primary text-sm mt-1" for={data}>{data}</label> | ||||||
|  |     </div> | ||||||
|  | {/each} | ||||||
|  | </div> | ||||||
							
								
								
									
										9
									
								
								frontend/src/components/userform/inputs/Select.svelte
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										9
									
								
								frontend/src/components/userform/inputs/Select.svelte
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,9 @@ | ||||||
|  | <script lang="ts"> | ||||||
|  |     export let options:string[] | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <select class="ml-6 pl-2 pr-16 py-2 rounded-xl text-primary border-primary border-2 text-start hover:cursor-pointer "> | ||||||
|  |     {#each options as data, index (data)} | ||||||
|  |         <option id={data}>{data}</option> | ||||||
|  |     {/each} | ||||||
|  | </select> | ||||||
		Reference in a new issue
	
	 haraldnilsen
						haraldnilsen