← Qmap · c18

control-components.md

Components

c16: I like the start here, but want to make a better view context configurator.

  • Let's create a component that can be opened at any time that contains all the properties that can be configured.
  • Let's create better patterns for reusable compoents, qflow will use these same components for a similar purpose
  • We are doing something very similar ../q-nuxt-layer
    • see : components/dev/meta/PropsMachine.vue
      • note the structure of adminProps in sister project : ../design/app/pages/components/_demos/DataMetric_Base.vue
    • by just passing an object to DevCanvas (adminProps / localAdminProps), we get an entire UI

Data structure:

data:
  category:
    property: <Boolean> - Renders a toggle
    property: <Select> [option1, option2, option3] - Renders Select
    property: <Color> - Renders Color picker
    property: <Text> - Renders textfield
    property: <Range> - Renders a slider between two numbers
    etc

Component structure:

Configurator

  • Simple layout of categories–probably horizontal
  • easy show / hide functionality for entire config panel

Category

  • title property
  • vertically stacked set of properties
  • eash show / hide functinality for category

Property

  • presents a UI to edit a particular property

Qpoint Brand Style Guide