-
Botão de confirmação, salvar ou ações positivas
<button class="btn btn-medium btn-orange">Confirmar</button>
-
Botão de Cancelamento ou Remoção ou ações negativas
<button class="btn btn-medium btn-black">Cancelar</button>
- Padrão para estrutura ngFor
<!--É interessante sempre utilizar [item] como referencia para mepar
pois assim fica mais fácil de fazer reuso da lista-->
<div *ngFor="let item of list">
<label>{{ item.id }}</label>
</div>
Componente de conclusão de Curso ou Módulo. Este componente traz o resultado de acertos ou erros baseados no desempenho do usuário no curso atual. Ele mostra o percentual de acertos e também ícones demonstrativos que fazer a correlação entre acertos e erros com ✔️ para acertos e ❌ para erros. A quantidade de icones deve ser igual a quantidade de perguntas informadas no Módulo
- Onde é utilizado
app-viewer
app-mini-viewer
- Comportamentos Esperados
- Caso o curso não tenha sido avaliado, o componente deve chamar um outro componente o
app-mini-visualizador-modal-rating
caso seja um mini-curso ouapp-visualizador-modal-rating
- Caso o curso não tenha sido avaliado, o componente deve chamar um outro componente o
- Dados de Entrada
id: number; //ID da Trilha atual
item: ConclusionComponent
//Objeto esperado no [item]
class ConclusionComponent {
public bg: string;
public title: { text: string, align: string, size?: string };
public text: { text: string, align: string, size?: string };
public button: string;
public background: string;
public textColor: string;
public featureColor: string;
public icon_animation;
public title_animation;
public text_animation;
public button_animation;
public feedback: string;
}
Componente de introdução do Visualizador, padrão para qualquer início de curso ou módulo. Totalmente personalizado pelo Painel Admin, onde a o estilo da fonte, a cor da fonte, tamanho podem ser alterados. Tanto quanto A cor do botão e o texto do Botão
-
Onde é utilizado
app-viewer
app-mini-viewer
-
Dados de Entrada Os dados de entrada são a abstração da Classe do component
[item]:IntroComponent
//Objeto esperado no [item]
class IntroComponent {
public title: { text: string, align: string, size: number, color: string, animation: string };
public media: { type: string, text: string, align: string, size: number, color:string, animation: string, image: string, youtube: string, vimeo: string, title: string, description: string };
public link: SafeResourceUrl;
public button: string;
public buttonOptions: { background: string };
public buttonColor:string;
public settings: { background: string, color: string, size: number };
public title_animation;
public text_animation;
public layout: string;
public borderWidth: string;
public borderStyle: string;
public borderRadius: string;
}
Component de vídeos, cursos e módulos recomendados baseado nos dados do Curso visualizado.
- Onde é utilizado
app-mini-curso-visualizador
- Dados de Entrada
[items] 'Array de elementos da Playlist'
- Variações
[type]:int
- Tipo 0 - Recomendados
- Tipo 1 - Episodio
- Tipo 2 - Recomendados Módulo
- Normalização
{ "id": 611, "pasta_id": 188, "client_id": 20, "user_id": 21623, "titulo": "A INFLUÊNCIA DO TREINAMENTO DE FORÇA NO PROCESSO DE EMAGRECIMENTO", "author": "", "descricao": "Como a musculação têm se mostrado indispensável nos programas de emagrecimento.", "arquivo": "https://storage.bhs5.cloud.ovh.net/v1/AUTH_b9cd7ce1b3f94316bd6820419f18f7fe/asap-store/storage/images/68370a6ed618629672b9d8d4f277f342/sm", "nivel": null, "type": 2, "andamento": 0, "isncritos": 0, "chancelamento": "0", "destaque": "0", "status": 1, "created_at": "2019-07-15 21:03:57", "updated_at": "2019-08-05 22:51:36", "porcentagem": 100 }
- Última alteração
- 08/10/2019 - Yuri Carvalho
- Último Teste
- 08/10/2019 - Yuri Carvalho