# ivyforms/1.0/frontend/src/views/admin/testing/testing-page/TestingFAB.vue

The Innovative Form Builder – IvyForms, version 1.0. 64 lines.

- Page: https://pluginprobe.com/plugins/ivyforms/1.0/code/frontend/src/views/admin/testing/testing-page/TestingFAB.vue
- Raw: https://pluginprobe.com/plugins/ivyforms/1.0/raw/frontend/src/views/admin/testing/testing-page/TestingFAB.vue
- Modified: 2025-06-12T10:29:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ivyforms/1.0/code/frontend/src/views/admin/testing/testing-page/TestingFAB.vue#L10-L20`.

```vue
<template>
  <h3>FAB Props Controls</h3>
  <div class="fab-controls">
    <label>
      <select v-model="color">
        <option value="fab">FAB</option>
        <option value="tertiary">Tertiary</option>
      </select>
    </label>

    <label>
      <input v-model="indicator" type="checkbox" />
      Indicator
    </label>

    <label>
      Indicator Priority:
      <select v-model="priority">
        <option value="primary">Primary</option>
        <option value="secondary">Secondary</option>
        <option value="amber">Amber</option>
      </select>
    </label>

    <label>
      Option:
      <select v-model="option">
        <option value="sort">Sort</option>
        <option value="filter">Filter</option>
        <option value="folder">Folder</option>
        <option value="datepicker">Date Picker</option>
        <option value="import">Import</option>
        <option value="export">Export</option>
      </select>
    </label>
  </div>

  <h3>FAB Component Preview</h3>
  <div class="fab-preview">
    <IvyIndicatorButton
      :color="color"
      :type="option"
      :indicator-priority="priority"
      :indicator="indicator"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref<'fab' | 'tertiary'>('fab')
const priority = ref<'primary' | 'secondary' | 'amber'>('secondary')
const option = ref<'sort' | 'filter' | 'folder' | 'datepicker' | 'import' | 'export'>('sort')
const indicator = ref(true)
</script>

<style lang="scss">
.fab-preview {
  width: 600px;
  align-items: center;
}
</style>

```