You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
4.3 KiB
117 lines
4.3 KiB
---
|
|
layout : 'default'
|
|
css : 'guide'
|
|
|
|
title : 'Overview'
|
|
description : 'An introduction to Semantic style coding'
|
|
type : 'UI Introduction'
|
|
---
|
|
<script src="/javascript/intro.js"></script>
|
|
<script>
|
|
$(document)
|
|
.ready(function() {
|
|
$('.demo.menu .item')
|
|
.tab()
|
|
;
|
|
})
|
|
;
|
|
</script>
|
|
|
|
<%- @partial('header') %>
|
|
<div class="main container">
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Interfacing</a>
|
|
<a class="item">APIs</a>
|
|
</div>
|
|
</div>
|
|
<h2 class="ui dividing header">Interfacing Carefully</h2>
|
|
|
|
<p>UI definitions in Semantic are given the class name <code>ui</code>. This is to help tell the difference between ui elements and parts of the definition of an element. This means any element with the class name UI has a corresponding UI definition.
|
|
|
|
<p>For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name <code>ui</code> because they are part of a UI menu collection.</p>
|
|
|
|
<div class="code" data-type="html" data-title="A Simple Menu" data-preview="true">
|
|
<div class="ui menu">
|
|
<a class="item">Home</a>
|
|
<a class="item">Inbox</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="ui header">Changing an Element</h3>
|
|
|
|
<p>Class names in Semantic always use single english words. If a class name is an adjective it is either a <a href="/introduction/types.html">type</a> of element or <a href="/introduction/variations.html">variation</a> of an element. <b>CSS definitions always define adjectives in the context of a noun</b>. In this way class names cannot pollute the namespace.</p>
|
|
|
|
<div class="code" data-type="html" data-title="A Compact Menu Variation" data-preview="true">
|
|
<div class="ui compact menu">
|
|
<a class="item">Home</a>
|
|
<a class="item">Inbox</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
|
|
<h3 class="ui header">Combining elements</h3>
|
|
<p>All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.</p>
|
|
|
|
<p>For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.</p>
|
|
|
|
<div class="code" data-type="html" data-title="Using a UI Label inside a UI Menu" data-preview="true">
|
|
<div class="ui compact menu">
|
|
<a class="item">Home</a>
|
|
<a class="item">
|
|
Inbox
|
|
<div class="ui label">22</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Semantic APIs</h2>
|
|
|
|
<p>Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.</p>
|
|
|
|
<div class="code" data-type="html" data-label="true" data-preview="true">
|
|
<div class="ui pointing secondary demo menu">
|
|
<a class="active red item" data-tab="first">First</a>
|
|
<a class="blue item" data-tab="second">Second</a>
|
|
<a class="green item" data-tab="third">Third</a>
|
|
</div>
|
|
<div class="ui active tab segment" data-tab="first">First</div>
|
|
<div class="ui tab segment" data-tab="second">Second</div>
|
|
<div class="ui tab segment" data-tab="third">Third</div>
|
|
</div>
|
|
<h3 class="ui header">Opening a new tab with a behavior</h3>
|
|
<p>Modules have simple behaviors for triggering common actions</p>
|
|
<div class="code" data-demo="true">
|
|
$('.demo.menu .item')
|
|
.tab('change tab', 'second')
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Opening a new tab with multiple behaviors</h3>
|
|
<p>Any internal behavior is accessible as well</p>
|
|
<div class="code" data-demo="true">
|
|
$('.demo.menu .item')
|
|
.tab('deactivate all')
|
|
.tab('activate tab', 'third')
|
|
.tab('activate navigation', 'third')
|
|
;
|
|
</div>
|
|
<h3 class="ui header">Turning on HTML5 State</h3>
|
|
<p>Modules can be re-initialized at any time with different settings</p>
|
|
<div class="code" data-demo="true">
|
|
$('.demo.menu .item')
|
|
.tab({
|
|
history : true,
|
|
path : '/introduction/getting-started.html'
|
|
})
|
|
;
|
|
</div>
|
|
|
|
<div class="ui divider"></div>
|
|
|
|
<a class="ui large right labeled teal icon button" href="/introduction/types.html">
|
|
Next: UI Types
|
|
<i class="right arrow icon"></i>
|
|
</a>
|
|
|
|
</div>
|