Histórico da Página
...
Interface aplicada com Fluig Style Guide
...
Para construir a interface de nossa widget, vamos utilizar o Fluig Style Guide, que nos facilita a construção dos componentes visuais. O guia pode ser acessado em Fluig Style Guide.
Para essa widget de notícias por exemplo, precisamos utilizar um form para cadastro de alguns dados, para utiliza o padrão visual do Fluig Style Guide, basta adicionar a classe .form-group. Assim todos os elementos textuais como <input>, <textarea>, e <select> terão seus tamanhos ajustados para 100%.
Bloco de código | ||
---|---|---|
| ||
<form role="form">
<div id="newsSource_${instanceId}" class="form-group">
<!-- código -->
</div>
</form> |
Para criar um botão no padrão, basta adicionar as classes 'btn btn-default'.
Bloco de código | ||
---|---|---|
| ||
<button type="submit" class="btn btn-default" data-save-preferences> Salvar </button> |
Como salvar as preferências da widget
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas