DaffContentElementSchema

interface

import { DaffContentElementSchema } from '@daffodil/content'

Represents an HTML element in the content schema. Used to render native HTML elements with attributes, styles, and children.

interface DaffContentElementSchema {
  type: "elementSchema"
  element: string
  attributes: { [key: string]: string; }
  children: DaffContentSchema[]
  styles: { base?: { [key: string]: string | number; }; breakpoints?: { [mediaQuery: string]: { [key: string]: string | number; }; }; }
}

Properties

type `"elementSchema"`
Discriminator for element schema nodes.

element `string`
The HTML element tag name (e.g., 'div', 'span', 'section').

attributes `{ [key: string]: string; }`
Optional HTML attributes to apply to the element.

children `DaffContentSchema[]`
Optional child content to render inside the element.

styles `{ base?: { [key: string]: string \| number; }; breakpoints?: { [mediaQuery: string]: { [key: string]: string \| number; }; }; }`
Optional styles to apply to the element.

Examples

const divElement: DaffContentElementSchema = {
  type: 'elementSchema',
  element: 'div',
  attributes: {
    'class': 'container',
    'id': 'main-content'
  },
  styles: {
    base: {
      padding: 16,
      'background-color': '#f5f5f5'
    },
    breakpoints: {
      '(min-width: 768px': {
        padding: 32
      }
    }
  },
  children: [
    { type: 'textSchema', text: 'Welcome!' }
  ]
};

const divElement: DaffContentElementSchema = {
  type: 'elementSchema',
  element: 'div',
  attributes: {
    'class': 'container',
    'id': 'main-content'
  },
  styles: {
    base: {
      padding: 16,
      'background-color': '#f5f5f5'
    },
    breakpoints: {
      '(min-width: 768px': {
        padding: 32
      }
    }
  },
  children: [
    { type: 'textSchema', text: 'Welcome!' }
  ]
};