properties.config.ts
import { PropertyValue } from 'https://unpkg.com/@reallyland/really-elements@latest/dist/code-configurator/code-configurator.js?module';
const properties: PropertyValue[] = [
{
name: 'propertyString',
value: 'property',
type: 'string',
},
{
name: 'propertyNumber',
value: 0,
type: 'number',
},
{
name: 'propertyBoolean',
value: true,
type: 'boolean',
},
{
name: 'propertyWithSelectableOptions',
value: 'option-1',
type: 'string',
options: [
{
label: 'option-1',
value: 'option-1',
},
{
label: 'option-2',
value: 'option-2',
},
{
label: 'option-3',
value: 'option-3',
},
],
},
];
const cssProperties: PropertyValue[] = [
{
name: '--test-property-width',
value: '2px',
}
];
export { properties, cssProperties };index.html
<html>
<head>
<script type="module">
import '/path/to/test-property.js';
import { properties, cssProperties } from '/path/to/properties.config.js';
import 'https://unpkg.com/@reallyland/really-elements@latest/dist/code-configurator/code-configurator.js?module';
const configuratorEl = document.createElement('.configurator');
/** Load `properties` and `cssProperties` */
if (configuratorEl) {
configuratorEl.properties = properties;
configuratorEl.cssProperties = cssProperties;
}
</script>
</head>
<body>
<really-code-configurator class="configurator" customelement="test-property">
<test-property></test-property>
</really-code-configurator>
</body>
</html>Coming soon
MIT License © Rong Sen Ng (motss)