formkit-ionic

Setup

1. This plugin requires the Ionic and FormKit
2. Setup in main.ts

constapp=createApp(App);import{plugin,defaultConfig}from'@formkit/vue'import{createIonicPlugin}from"formkit-ionic";app.use(plugin,defaultConfig({plugins: [createIonicPlugin()]}))

Usage

Basic

<scriptsetup>import{ref}from"vue";letdata=ref({})letoptions={bacon: 'Bacon',sausage: 'Sausage',egg: 'Egg',cheese: 'Cheese',tomato: 'Tomato',mushroom: 'Mushroom',onion: 'Onion',pepper: 'Pepper',lettuce: 'Lettuce',avocado: 'Avocado',olive: 'Olive',corn: 'Corn',carrot: 'Carrot',cucumber: 'Cucumber',};letonSubmit=()=>{console.log(data.value);};</script><template><div><prewrap>{{ data }}</pre><FormKittype="form" v-model="data" :actions="false" @submit="onSubmit"><FormKittype="ionInput" name="input1" label="input1" validation="required|email"
placeholder="this is a placeholder" label-position="stacked" help="this is a help text" clear-input/><FormKittype="ionInput" input-type="password" name="input1" label="Password" validation="required"
placeholder="this is a placeholder" label-position="stacked" help="this is a help text" clear-input/><FormKittype="ionSelect" name="select1" label="ionSelect" validation="required" label-position="stacked"
placeholder="Select one" help="this is a help text" :options="options"></FormKit><FormKittype="ionTextarea" name="textarea1" label="ionTextarea" label-position="stacked" /><ion-row><ion-col><ion-buttontype="submit" color="danger" expand="block">Sign In</ion-button></ion-col></ion-row></FormKit></div></template>