Experimental.
Selective editor for providing a rich UI for editing structured data.
See the typescript docs or example.
For an out-of-box experience you can instead use the styling used by the example.
@import "selective-edit/sass/selective"
If you desire full control over the styling there are a few basic style rules that the selective editor requires in order to function correctly.
They are available in the /sass/selective-core.sass
file.
@import "selective-edit/sass/selective-core"
See the example and example source to see how to create a selective editor with an assortment of fields and validation rules.
The selective editor comes with several standard field types which can be used directly or extended and customized. Custom field types can also be designed and used with the selective editor.
Custom field types can extend one of the existing field types, the base Field, or follow the FieldComponent interface.
Selective edit uses the html-lit
library to handle the UI of the editor.
Every field can be validated. Selective edit comes with some basic rules (length, matching, pattern matching, range, required), but projects can also define their own validation rules. Follow the RuleComponent interface to create a custom rule or extend one of the existing rules to improve it for your needs.
The editor uses field configurations to control what to display in the editor.
// Add a field for the editor to display.
selective.fields.addField({
type: "text",
key: "title",
label: "Title",
help: "Title for the data.",
})
Different field types have different configurations options:
Generated using TypeDoc