Como usar a interface semântica CDN?
Como incluir UI semânticas na página HTML usando CDN? A ligação CDN é https://cdnjs.com/libraries/semantic-ui , mas como usá-lo?
4 answers
Actualizado para a versão actual 2.4.2
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
</head>
Para verificar a versão actualizada, ver JSDeliver CDN page .
Só precisa de copiar o URL dos ficheiros que deseja usar para UI semânticas, e colocá-lo no seu cabeçalho sob um programa ou etiqueta de ligação como o valor "src" ou "href".
Para uma interface semântica, necessita de três ficheiros para uso geral:
- Semântica.minuto.CSS
Jquery.minuto.js (de Jquery CDN)
Semântica.minuto.js
Por exemplo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Semantic UI CDN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>
<body>
<!-- Your Semantic UI Code -->
</body>
</html>
Eu tive um problema semelhante e tentei seguir a resposta de @NitinJadhav, mas tive dificuldade em obter Componentes / módulos como o Acordeão para ser realmente interativo. Foi estilizado corretamente, mas não abriria ou colapsaria como esperado.
Eu incluí os CDNs, mas eu também {[14] } tive que adicionar algum JavaScript extra. Eu fiz um arquivo JS, application.js e ligado a ele em meu arquivo HTML.
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
<script src="/assets/application.js" ></script>
</head>
application.js precisa vir por último, porque planeio usar o jQuery e o UI jQuery semântico no ficheiro.
Voltei à documentação para o acordeão e clicei na aba "uso" para pegar o jQuery necessário.
$(document).ready(function(){
$('.ui.accordion').accordion();
});