Function createBasicTrait

Example

Creating a traits hierarchy

const ns = createNamespace({ name: 'com.my-company' });

// Declare a trait to distinguish specific elements as valid children.
const childTrait = createBasicTrait(ns, { name: 'controlChild' });

const parentElement = createElement(ns, {
  name: 'My Parent Control',
  description: 'Control with Children',
  traits: [traits.Control],
  propsSchema: createPropsSchema().initial({
    children: props.Children({
      label: 'Children',
      icon: { name: 'Default' },

      // Allow only elements with `childTrait` to be added to this element.
      allowedTraits: [childTrait],
    }),
  }),
  Component(props) {
    return (
      <div>
        Parent Control

        <RenderInstances instances={props.children} />
      </div>
    );
  },
});

const childElement = createElement(ns, {
  name: 'My Child Control',
  description: 'Child Control',
  traits: [
    traits.Control,
    // Mark this element with `childTrait` so that it is available to be added
    // as a child of `parentElement`.
    childTrait,
  ],
  propsSchema: createPropsSchema().initial({}),
  Component() {
    return <div>Child Control</div>;
  },
});
Copy