@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

package/src/components/SelectBtnField/SelectBtnField.mdx

@@ -0,0 +1,50 @@
+import {Controls, Canvas, Meta, Source, Story} from '@storybook/blocks';
+
+import SelectBtnField from './SelectBtnField.vue';
+import * as SelectBtnFieldStories from './SelectBtnField.stories';
+
+<Meta title="Composants/Formulaires/SelectBtnField" component={SelectBtnField}/>
+
+# SelectBtnField
+
+Le composant `SelectBtnField` est utilisé pour permettre à l’utilisateur de sélectionner une valeur dans une liste.
+
+<Canvas of={SelectBtnFieldStories.Default}  />
+
+## API
+
+<Controls of={SelectBtnFieldStories.Default} />
+
+## Exemple d'utilisation avec Vue
+
+<Source dark code={`
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import { SelectBtnField } from '@cnamts/synapse'
+
+    const items = [
+      {
+        "text": "Email",
+        "value": "email"
+      },
+      {
+        "text": "Courrier",
+        "value": "courrier"
+      },
+      {
+        "text": "SMS",
+        "value": "sms"
+      }
+    ];
+
+    const selected = ref(null)
+</script>
+
+<template>
+    <SelectBtnField
+        v-model="selected"
+        label="Moyen de contact"
+        :items="items"
+    />
+</template>
+`} />