ChoiceField_ger at

Inhaltsverzeichnis

• Beschreibung
• Code
• Parameter
• Code Sandbox

Beschreibung

Mithilfe des ChoiceFields können Sie React-Components bauen und den Administrator der Webseite entscheiden lassen, welchen davon er gerade braucht. Dafür haben Sie zwei Möglichkeiten. Wenn Sie alle Ihre Komponenten immer anzeigen wollen und z.B. nur die Farbe des aktiven ändern wollen oder Sie ein Boolean Verhalten benötigen, können Sie dem onRenderPopover ein null als Wert geben und die Auswahl im onRender definieren. Wenn aber nur einer Ihrer Komponenten angezeigt werden sollte können Sie ein selbst definiertes Popover in onRenderPopover dafür schreben.

Code

import {fields} from '@snek-at/jaen-pages'

import {Button, Box, Text} from '@chakra-ui/react'

const Component = () => {
  return(
    <fields.ChoiceField 
      fieldName="home-choice"
      options={['option1', 'option2']}
      onRender={(selection /*, options, onSelect, isEditing */) => {
        return <Text>{selection}</Text>
      }}
      onRenderPopOver={(selection, options, select) => {
        return (
          <Box>
            {options.map((option, key) => {
              return (
                <Button
                  key={key}
                  onClick={() => select(option)}
                  disabled={option === selection}>
                  {option}
                </Button>
              )
            })}
          </Box>
        )
      }}
    />
  )
}

export default Component

Parameter

Parameter	Art	Erforderlich	Beschreibung
fieldName	string	Ja	Der fieldName wird genutzt um dem Feld einen Namen zu geben. Der Name sollte beschreibend sein, um die Abfrage der Daten für Sie zu erleichtern.
options	string[]	Ja	Der Options Parameter bestimmt die Auswahlmöglichkeiten für Ihr ChoiceField
onRender	function	Ja	onRender ermöglicht es Ihnene React-Components zu schreiben.
onRenderPopover	function oder null	Ja	Mit onRenderPopover können Sie ein selbst definiertes Popover schreiben, mit dem der Administrator zwischen Ihren Auswahlmöglichkeiten wählt. Wenn Sie kein Popover benötigen definieren Sie onRenderPopover als null.

onRender

Property	Type	Description
selection	string	Selection ist die momentan ausgewählte Option.
options	string[]	Das Array von Optionen, das Sie definiert haben.
onSelect	function	onSelect erlaubt es Ihnen eine der Optionen auszuwählen.
isEditing	boolean	isEditing ermöglicht es, Strukturen zu bauen, die nur der Nutzer sieht, der die Webseite editiert.

onRenderPopover

Property	Type	Description
selection	string	Selection ist die momentan ausgewählte Option.
options	string[]	Das Array von Optionen, das Sie definiert haben.
select	function	Select erlaubt es Ihnen eine der Optionen auszuwählen.

Code Sandbox

WIP