BlockContainer_ger at

Inhaltsverzeichnis

• Beschreibung
• Code
• Parameter
• Code Sandbox

Beschreibung

Das Jaen BlockContainer erlaubt es Blöcke zu nehmen und sie sooft sie wollen auf Ihrer Webseite zu wiederholen. Um dieses Feld zu nutzen müssen Sie zuerst einen Block bauen.

Code

import {BlockContainer, JaenTemplate} from '@snek-at/jaen-pages'
import {CardBlock} from '...'

const HomePage: JaenTemplate = () => {
  return (
    <div style={{width: '50%'}}>
      <BlockContainer
        reverseOrder={false}
        name="home-blockcontainer"
        blocks={[CardBlock]}
	wrap={true}
	wrapProps={{justify: 'center', spacing: '5'}}
      />
    </div>
  )
}

HomePage.TemplateName = 'HomePage'

export default HomePage

Chakra UI Wrap Beispiel

Dieses Beispiel zeigt fünf farbige Quadrate an, die untereinander einen Abstand von 1 rem haben, die in einem Flex sind, das in eine neue Zeile geht, wenn die Quadrate mehr Platz benötigen als das Browserfenster hat und die zentriert sind.

import {Wrap, Box} from '@chakra-ui/react'
import {fields} from '@snek-at/jaen-pages'


const Component = () => {
  return(
    <Wrap spacing="1rem" justify="center">
      <Box boxSize="300px" bg="red"/>
      <Box boxSize="300px" bg="teal"/>
      <Box boxSize="300px" bg="orange"/>
      <Box boxSize="300px" bg="blue"/>
      <Box boxSize="300px" bg="green"/>
    </Wrap>
  )
}

Parameter

Parameter	Art	Erforderlich	Beschreibung
name	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.
blocks	array	Ja	Mit dem blocks Parameter können Sie entscheiden welche Blöcke im StreamField sein sollten. Wenn Sie mehrere Blöcke ins Array schreiben werden Sie beim bearbeiten ein Menü zum Auswählen des Blocks sehen.
reverseOrder	boolean	Nein	Mit dem reverseOrder Atribut können Sie entscheiden ob Sie die Reihefolge der Blöcke ändern wollen. Die Optionen sind "first in first out" (false) und "first in last out" (true).
initValue	object	Ja	Mit dem initValue können Sie einen Wert setzen, den das StreamField hat, wenn Sie es nicht bearbeiten.
wrap	boolean	Nein	Wrap erlaubt es Ihnen Ihre Blöcke in einen Chakra UI Wrap zu packen, der ein Flex, das wenn die breite des Browsers erreicht wird, die Blöcke in die nächste Zeile schiebt.
wrapProps	object	Nein	Mit den wrapProps können Sie dem Wrap Parameter geben.

Code Sandbox

WIP