Options

Bu alanda, form elementlerine ait seçenekler (options) belirlenir. Her bir element tipi, kendine özgü farklı seçeneklere sahiptir. Bu seçeneklere, elementlerin içinden erişilebildiği gibi, /right-control-panel/options üzerinden de bakabilirsiniz.

Store üzerinden form.options datasını detaylı olarak, her bir elemente render edilecek şekilde, column şemasından yönetebilirsiniz. Bu yaklaşım, form elementlerinin özelliklerini dinamik bir şekilde ayarlamanıza olanak tanır. Örneğin, bir select elementi için mümkün seçenekler, bir checkbox için ise seçili olup olmadığı gibi durumlar bu options alanı aracılığıyla tanımlanır.

Nasıl Yapılandırılır?

1. Element Seçeneklerine Erişim: İlgili form elementinin options alanına, doğrudan elementin kendisi üzerinden veya /right-control-panel/options yoluyla erişim sağlayabilirsiniz.

2. Seçenekleri Yönetme: Formun store'unu kullanarak, form.options içindeki data yapısını manipüle ederek, her elementin nasıl davranacağını ve hangi seçeneklere sahip olacağını belirleyin. Bu, özellikle kullanıcıya sunulan seçeneklerin dinamik olarak yönetilmesi gerektiğinde önemlidir.

3. Column Şeması Kullanımı: Elementlere ait seçenekler, column şeması üzerinden yönetilebilir. Bu, form yapısını ve elementler arası ilişkileri daha iyi kontrol etme imkanı sunar.

Her elementin tipine ve kullanım amacına göre farklı options setleri tanımlamak, formun esnekliğini ve kullanıcı deneyimini artırır. Bu seçeneklerin doğru şekilde yapılandırılması, formun işlevselliğini genişletir ve kullanıcıların form ile etkileşimini kolaylaştırır.

<!-- // for input options -->
<template
  v-if="
      formStore.isTypeInput(formStore.selectedElement.html_element) == 'input'
    "
>
  <InputOptions></InputOptions>
</template>

<!-- // for slider options -->
<template
  v-if="
      ['slider', 'range_slider', 'vertical_slider'].includes(
        formStore.selectedElement.html_element
      )
    "
>
  <SliderOptions></SliderOptions>
</template>

<!-- // for switch options -->
<template v-if="formStore.selectedElement.html_element == 'switch'">
  <SwitchOptions></SwitchOptions>
</template>

<!-- // for switch options -->
<template v-if="formStore.selectedElement.html_element == 'text_area'">
  <TextareaOptions></TextareaOptions>
</template>

<!-- // for switch options -->
<template v-if="formStore.selectedElement.html_element == 'checkbox'">
  <CheckboxOptions></CheckboxOptions>
</template>

<!-- // for radio options -->
<template v-if="formStore.selectedElement.html_element == 'radio'">
  <RadioOptions></RadioOptions>
</template>

<!-- // for date, mutiple_dates, date_range options -->
<template
  v-if="
      ['date', 'multiple_dates', 'date_range'].includes(
        formStore.selectedElement.html_element
      )
    "
>
  <DateOptions></DateOptions>
</template>

<!-- // for datetime options -->
<template v-if="formStore.selectedElement.html_element == 'datetime'">
  <DateTimeOptions></DateTimeOptions>
</template>

<!-- // for time options -->
<template v-if="formStore.selectedElement.html_element == 'time'">
  <TimeOptions></TimeOptions>
</template>

<!-- // for tag options -->
<template v-if="formStore.selectedElement.html_element == 'tags'">
  <TagOptions></TagOptions>
</template>

<!-- // for childform options -->
<template v-if="formStore.selectedElement.html_element == 'child_form'">
  <ChildFormOptions></ChildFormOptions>
</template>

<!-- // static -->
<!-- // for static_element options -->
<template v-if="formStore.selectedElement.html_element == 'static_element'">
  <StaticElementOptions></StaticElementOptions>
</template>