Custom Components
Components are chunks of reusable code. They allow you to define code in a single place and reuse it throughout your app. Components can be references through HTML or with BF JSON schema
This page is under review and not finalized (beta)
Building and Customizing
Both the BF JSON and the HTML API's are the same. Keys within the BF JSON schema can be references from within the component as `schema`
Component API
fields
array
Optional either html
or fields
keys must be present. Contains BF schema elements normally found in the fields
key of the page editor. The schema will be used as a component.
If supplied will act as the source of the field schema and replace the components default fields if there are any.
schema
object
All schema keys can be accessed from within the component as schema.myTitle
This allows you to pass data dynamically into the component
html
string
Contains HTML to be rendered as a component.
<bfcomp>
HTML tag name needed to identify a BF component
name
string
The component name
modelSource
object
used to supply the model will be for this component, in not supplied, the current model for the element is used.
modelDev
object
Optional. Used to add model keys that can be used for development and tests of components rendered where there is no model
available. ( Used by the BF editor )
source
{ component }
If supplied, this will act as the entire source for the component. This attribute was added to allow the BF component editor to preview live components. You probably will never use this key. component is a complete component object (not documented in this doc, see support if needed)
attributes
various
All additional attributes supplied will override the component's schema keys where applicable.
You can add any additional attribute or 'props' you need. Eg: buttonLabel
Usage as an JSON Schema element
Usage as an HTML Vue component
Context
Components mostly act the same as any other BF element for context. They see model
and app
the same regardless of HTML or BF JSON Elelement schema.
Best Practices
Sizing and Styling
Generally, it should be the implementation of the component that is responsible for the component's size. There are some exceptions. This means that the width of your component is generally full width and the parent or 'implementor' of the component will control the width.
Examples:
Page Header Component
implementation
this allows the header
Button Component
Defined in component
Buttons generally don't take on the shapre of the parent elements. When you need to override a buttons width, you can pass in a class.
Last updated