Ex.: crn-button

class

Define o ícone do controle que aparecerá no editor de views.

OBS.: Diferente da aplicação que permite o uso dos ícones Glyphicons, font awesome icon e Material Design Icons, os botões dos componentes no editor de views permite apenas o Material Design Icons.

Ex.: adjust-icon mdi mdi-stop

templateURL

Ex.: src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/button.template.html

properties

styles

Ex.: [{ "name": "xattr-fullsize", "type": "options", "target": "class", "values": [{ "key": "btn-block", "value": "Block"},{"key": "", "value": "Inline" }] }]

• true: Permite tratamento diferenciado entre o componente e a <div>.
• false: Não permite tratamento diferenciado entre o componente e a <div> e é o valor default quando a propriedade não é informada.

• true: Agrupa todos os subcomponentes, necessário realizar o desbloqueio para poder selecionar cada subcomponente.
• false: Permite a seleção de cada subcomponente sem a necessidade do desbloqueio e é o valor default quando a propriedade não é informada.

Ex.: {"canIncrement": true, "rules": [{ "sourceHTML": "<div class=\"k-content\" data-component=\"crn-radioOption\"><input class=\"k-radio\" crn-value=\"\" value=\"value${RANDOM}\" type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios${RANDOM}\" ng-checked=\"\">    <label class=\"k-radio-label\" for=\"optionsRadios${RANDOM}\">New option</label>  </div>", "targetSelector": ":self" }]}

Informa qual componente HTML receberá o texto do campo Sugestão no editor de views.

Possui em seu interior o valor "selector" onde será informado o componente HTML.

Ex.: { "selector": "input" }

Nome do atributo.

Ex.: "openEditor"

Nome do atributo.

Ex.: "openEditor"

• true: exibe o controle no editor de views e é o valor default quando a propriedade não é informada.
• false: oculta o controle no editor de views.

Template HTML do componente. Por este ser um arquivo json, será necessário utilizar caracteres de escape para utilizar alguns caracteres.

Exemplo: “\n”e “\””

• true: adiciona uma tag <div> e é o valor default quando a propriedade não é informada.
• false: não adiciona uma tag <div>.

• true: ativa o handleRules do componente.
• false: desativa o handleRules do componente.

Exibe o ícone adicionar ao lado do nome do campo e ao clicar é inserido outro item na lista.

Exemplo: outra coluna em uma tabela ou outro item em uma lista de opções.

• true: insere o ícone adicionar;
• false: oculta o ícone adicionar e é o valor default quando a propriedade não é informada.

• true: possibilita ordenação dos itens e é o valor default a propriedade não é informada;
• false: impede a ordenação dos itens.

Mostra o ícone exibir ao lado do nome do campo e esse ícone recolhe ou expande os itens ou submenus desse controle no editor de views, permitindo visualizar e selecionar seu conteúdo para personalização.

Exemplo: caixa de seleção ou menu.

• true: insere o ícone exibir;
• false: oculta o ícone exibir e é o valor default a propriedade não é informada.

Ex.: [{"activeSelector": ".table-header th.active", "activeClass": "active", "sourceHTML": "<th class=\"k-header\" data-container=\"true\" rowspan=\"\" colspan=\"\"><div data-container=\"true\" data-replace=\"true\">New Title</div></th>", "targetSelector": ".table-header"}]

Cria uma dependência do componente para a exibição de conteúdo.

Ex.: As informações sobre um usuário só irá aparecer na tela quando um dos usuários for selecionado.

Cria uma dependência do componente com a fonte de dados informada para a inserção de conteúdo. Nesse campo deve ser informado o objeto independente em relação ao campo "dependente de postagem de campo sob demanda".

Ex.: As regras para um usuário só será submetida se existir um usuário.

Cria uma dependência do componente com a fonte de dados informada para a inserção de conteúdo. Nesse campo deve ser informado o objeto ou id que ficará dependente.

Ex.: As regras para um usuário só será submetida se existir um usuário.

• true: define como obrigatória.
• false: define como não obrigatória.

Lista pré-definida de mascarás.

Ex.: CEP, CPF, data, telefone etc.

Executa evento antes de atualizar algo.

Executa evento no precionar do clique do botão (JavaScript).

[{ "key": "default", "value_en_US": "Default", "value_pt_BR": "Padrão"}]

Exibe o ícone remover propriedade ao lado do nome do campo e ao clicar, o campo será removido dentre as propriedades ou eventos.

OBS.: É possível chamar novamente a propriedade através do campo nova propriedade.

• true: insere o ícone;
• false: oculta o ícone e é o valor default a propriedade não é informada.

Define o tipo do recurso usado na propriedade.

Ex.: image/jpeg,image/gif,image/png

permite imagens do tipo jpeg, gif ou png.