Including semantic UI to my angular js

StackOverflow https://stackoverflow.com/questions/21354615

  •  02-10-2022
  •  | 
  •  

Question

I am new to semantic UI. I am trying to include the built in classes of semantic UI to my code. Semantic folder is containing so many built in classes.

1 . How do I find to which css file, my class is going to be associated? 2. In some of the examples, I see class names like - div class="ui large blue icon button" . In such cases how do I find these variations like blue,floated? 

 <html>
    <head>
   <link rel="stylesheet" href="../SemanticUI/semantic/packaged/css/semantic.css"/>
<link rel="stylesheet" href="../SemanticUI/semantic/packaged/css/semantic.min.css"/>
<link rel="stylesheet" href="../SemanticUI/semantic/less/elements/button.less"/>
    </head>
    <body>
    <div class="ui labeled icon button">
      Download <i class="download icon"></i>
    </div>
    <div class="ui icon button">
      <i class="download icon"></i>
    </div>
    <div class="ui button">
      Download
    </div>
    <div class="ui facebook button">
      <i class="facebook icon"></i>
      Facebook
    </div>
    </body>
    </html>

Thanks, Sabari

Was it helpful?

Solution

You need to add the css and the javascript libraries for semantic-ui. Here try this example:

 <html>
    <head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.min.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/javascript/semantic.min.js"></script>

    </head>
    <body>
    <div class="ui labeled icon button">
      Download <i class="download icon"></i>
    </div>
    <div class="ui icon button">
      <i class="download icon"></i>
    </div>
    <div class="ui button">
      Download
    </div>
    <div class="ui facebook button">
      <i class="facebook icon"></i>
      Facebook
    </div>
    </body>
    </html>

Here is a jsbin POC: http://jsbin.com/ubiReqa/1/

Hope it helps.

Cheers, Praney

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top