Floating box

O container de classe floatingBoxContainer possui um modificador active. Terá o modificador active quando visível. Quando o conteúdo estiver escondido, esse modificador não existe. Utilize-o para estilização baseada no estado do dropdown. Ao clicar no trigger, é adicionardo o modificador shownContent ao trigger e ao content.

floating-box-containe props

Conteúdo deve ser passado via children

Prop name	Type	Description	Default value
clickOutside	boolean	Ao clicar fora do container, oconteúdo é escondido e o modificadoractive e shownContent são retirados. Utilize-a quando não houver a necessidade de overlay, mas for necessário esconder o conteúdo ao clicar fora.	true
pixelEvent	object	Defines a pixelEvent.	undefined
showOverlay	boolean	Renderiza ou não uma div para overlay	false

The pixelEvent object

Prop name	Type	Description	Default value
customPixelEventId	string	Event ID responsible for triggering a block that listens to pixelEvent.	undefined
customPixelEventName	string	Event name responsible for triggering a block that listens to pixelEvent.	undefined

trigger-floating-box props

Prop name	Type	Description	Default value
text	String	Texto a ser renderizado como trigger. Para renderizar um conteúdo como trigger, outra opção é viachildren.	-

content-floating-box props

Prop name	Type	Description	Default value
text	String	Texto a ser renderizado como conteúdo. Para renderizar um conteúdo, outra opção é viachildren.	-

close-floating-box props

Ao clicar no botão fechar, o modificador active e shownContent são retirados e o conteúdo é escondido.

Prop name	Type	Description	Default value
text	String	Texto a ser renderizado como conteúdo. Para renderizar um conteúdo, outra opção é viachildren.	-

Exemplo de utilização:

	"floating-box-container#container": {
		"props": {
			"blockClass": ["container"],
			"showOverlay": true
		},
		"children": [
			"close-floating-box#button-close",
			"trigger-floating-box#trigger",
			"content-floating-box#content"
		]
	},

	// TRIGGER
	"trigger-floating-box#trigger": {
		"props": {
			"blockClass": ["trigger"]
		},
		"children": ["rich-text#trigger"]
	},

	// CONTEÚDO
	"content-floating-box#content": {
		"props": {
			"blockClass": ["content"]
		},
		"children": [
			"rich-text#content"
		]
	},

	// BOTÃO FECHAR
	"close-floating-box#button-close": {
		"props": {
			"text": "x",
			"blockClass": ["button-close"]
		}
	},

	"rich-text#trigger": {
		"props": {
			"blockClass": "trigger",
			"text": "Trigger"
		}
	},

	"rich-text#content": {
		"props": {
			"blockClass": "content",
			"text": "Conteúdo"
		}
	}