Default values for traits field
Traits should read the default directly from their props/attributes, so in your case, it should be something like this:
Read full answer below ↓Question
I have created component with certain traits. I am not able to assign default value to traits by passing values. It is coming as undefined for color type, blank for text field.
traits: [ {
type: 'text',
label: 'Placeholder',
changeProp: 1,
name: 'placeholder',
value: 'Type your text here'
},
{
type: 'color',
label: 'Icon Color',
changeProp: 1,
name: 'iconColor',
value: '#000000'
}]
Any changes in field is getting reflected in component
Answers (3)
Traits should read the default directly from their props/attributes, so in your case, it should be something like this:
iconColor: '#000000',
placeholder: 'Type your text here',
traits: [ {
type: 'text',
label: 'Placeholder',
changeProp: 1,
name: 'placeholder'
},
{
type: 'color',
label: 'Icon Color',
changeProp: 1,
name: 'iconColor'
}]
in your case, defaults should be like
typeid: 0 pointing to the first element as default
Thanks!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1959
[Question] Edit innerHTML in a custom button
Hi All, I am trying to change the text in a button component, but I am not able to edit it. I added this type: I included the editable: tru...
Issue #1779
Traits type Checkbox not checked from the initialization of the Component type.
Hi, Artur When I try to check traits (type: checkbox) from the init() of the domCom Type the value set as true but not checked. Code: Thank...
Issue #738
image reverted to original size after resized
hi, i got a strange issue with component: i got 2 types, image and icon the issue is when i first drag and drop the image component, i'm ab...
Issue #1543
[Question] Enable Traist-checkbox by default
Hi. I am new to GrapesJs and really liking it so far. But now I have a (probably beginner) question: How can I make a trait-checkbox be sel...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.