@ -107,7 +107,7 @@ Docpad should now run an instance of semantic-ui.com locally you can access at `
If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in `/src/{type}/{elementname}/` while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.
To see exactly what this is doing you can check out our [commented gruntfile](https://github.com/jlukic/Semantic-UI/blob/master/node/Gruntfile.js)
To see exactly what this is doing you can check out our [commented gruntfile](https://github.com/jlukic/Semantic-UI/blob/master/Gruntfile.js)
<li>Using <code>data-html</code> for specific html</li>
<li>Using the content property in the initialization of the popup</li>
</ul>
<p>Popups can also specify some other frequently used settings using metadata<p>
<ul class="list">
<li><code>data-variation</code>: the popup variation to use </li>
<li><code>data-offset</code>: a pixel offset correction for popup</li>
<li><code>data-position</code>: the side to position popup on</li>
<li><code>data-variation</code>: the popup variation to use </li>
</ul>
</div>
</div>
</div>
<div class="code" data-type="html">
<i class="heart icon" title="Hello I am a popup"></i>
</div>
<div class="ui horizontal divider">Or</div>
<div class="code">
<h4 class="ui header">Initializing with javascript content</h4>
<div class="code" data-type="html">
<i class="heart icon" title="Hello I am a popup"></i>
</div>
<div class="ui horizontal divider">Or</div>
<h4 class="ui header">Initializing with metadata</h4>
<div class="code">
$('.ui.popup')
.popup({
content: 'Hello I am a popup'
})
;
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Popup</h4>
<p>A standard popup</p>
<i class="large heart circular icon link" data-content="Hello, I am a pop-up."></i>
</div>
<div class="example">
<h4 class="ui header">Title</h4>
<p>A popup can be formatted with a title</p>
<i class="circular heart icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
</div>
<div class="example">
<h4 class="ui header">HTML</h4>
<p>A popup can be formatted with html</p>
<i class="circular heart icon link" data-html="<div class='ui red button'>Button</div>"></i>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Size</h4>
<p>A popup can be large or small</p>
<i class="circular heart icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
<i class="circular heart icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
</div>
<div class="example">
<h4 class="ui header">Inverted</h4>
<p>A popup can have its colors inverted</p>
<i class="circular heart icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
</div>
<div class="ui tab" data-tab="examples">
<h2 class="ui dividing header">Examples</h2>
<h2 class="ui dividing header">Examples</h2>
<div class="example">
<h4 class="ui header">Specifying a trigger event</h4>
<p>A popup trigger event can be specified</p>
<div class="evaluated code">
<div class="example">
<h3 class="ui header">Specifying a trigger event</h3>
<p>A popup trigger event can be specified</p>
<div class="evaluated code">
$('.example .teal.button')
.popup({
on: 'click'
@ -111,18 +126,18 @@ type : 'UI Module'
on: 'focus'
})
;
</div>
<div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
<div class="ui icon input">
<input type="text" placeholder="Focus me..." data-content="You can use me to enter data">
<i class="search icon"></i>
</div>
</div>
<div class="ui teal button" data-title="Using click events" data-content="Clicked popups will close if you click away, but not if you click inside the popup">Click Me</div>
<div class="ui icon input">
<input type="text" placeholder="Focus me..." data-content="You can use me to enter data">
<i class="search icon">
</i>
</div>
<div class="example">
<h4 class="ui header">Target Element</h4>
<p>A popup can specify a different target element than itself to show a popup</p>
<div class="evaluated code">
<div class="example">
<h3 class="ui header">Target Element</h3>
<p>A popup can specify a different target element than itself to show a popup</p>
<div class="evaluated code">
$('.test.button')
.popup({
position : 'top right',
@ -131,80 +146,80 @@ type : 'UI Module'
content : 'My favorite dog would like other dogs as much as themself'
})
;
</div>
<div class="ui basic test button">Hover Me</div>
<div class="ui divider"></div>
<img class="medium ui test image" src="/images/demo/photo.jpg">
<h4 class="ui header">Inline or relative to page</h4>
<p>A popup can either be inserted directly after an element, or added as a child element to the page's <code>body</code>.</p>
<div class="ui warning message">
An inline popup will remain in your page's html after being hidden, while a non-inline popup will remove itself after being hidden.
</div>
<div class="ui info message">
If you want to style each popup individually it makes sense to keep popup <code>inline: true</code>. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set <code>inline: false</code>.
</div>
<div class="code" data-type="css">
</div>
<div class="ui basic test button">Hover Me</div>
<div class="ui divider"></div>
<img class="medium ui test image" src="/images/demo/photo.jpg">
<h3 class="ui header">Inline or relative to page</h3>
<p>A popup can either be inserted directly after an element, or added as a child element to the page's <code>body</code>.</p>
<div class="ui warning message">
An inline popup will remain in your page's html after being hidden, while a non-inline popup will remove itself after being hidden.
</div>
<div class="ui info message">
If you want to style each popup individually it makes sense to keep popup <code>inline: true</code>. If you are worried that your pop up might mistakingly inherit styles that it shouldn't, you should set <code>inline: false</code>.
</div>
<div class="code" data-type="css">
/* this will only style the popup if inline is true */
.example .popup {
color: #FF0000;
}
</div>
<div class="evaluated code">
</div>
<div class="evaluated code">
$('.inline.icon')
.popup({
inline: true
})
;
</div>
<i class="heart circular icon link" data-content="This is a child element to the page's body and will not be styled" ></i>
<i class="mail inline circular icon link" data-content="This popup was inserted inline and will be styled" ></i>
</div>
<i class="heart circular icon link" data-content="This is a child element to the page's body and will not be styled" ></i>
<i class="mail inline circular icon link" data-content="This popup was inserted inline and will be styled" ></i>
</div>
<div class="position example">
<h4 class="ui header">Positioning</h4>
<p>A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.</p>
<p>A popup position can be adjusted manually by specifying an offset propery using <code>data-offset="value"</code></p>
<i class="heart circular icon link" data-offset="50" data-content="As expected this popup is way off to the right"></i>
</div>
<div class="position example">
<h3 class="ui header">Positioning</h3>
<p>A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.</p>
<td>Attaches sidebar action to given selector. Default event if none specified is toggle</td>
</tr>
<tr>
<td>show</td>
<td>Shows popup</td>
</tr>
<tr>
<td>hide</td>
<td>Hides popup</td>
</tr>
<tr>
<td>hide all</td>
<td>Hides all visible pop ups on the page</td>
</tr>
<tr>
<td>toggle</td>
<td>Toggles visibility of popup</td>
</tr>
<tr>
<td>is visible</td>
<td>Returns whether popup is visible</td>
</tr>
<tr>
<td>is hidden</td>
<td>Returns whether popup is hidden</td>
</tr>
<tr>
<td>exists</td>
<td>Returns whether popup is created and inserted into the page</td>
</tr>
<tr>
<td>set position</td>
<td>Repositions a popup</td>
</tr>
<tr>
<td>remove</td>
<td>Removes popup from the page</td>
</tr>
</table>
<h2 class="ui dividing header">Settings</h2>
<h3 class="ui header">
Popup Settings
<div class="sub header">Settings to configure popup behavior</div>
</h3>
<table class="ui red celled definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>position</td>
<td>top center</td>
<td>Position that the popup should appear</td>
</tr>
<tr>
<td>inline</td>
<td>false</td>
<td>If a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.</td>
</tr>
<tr>
<td>preserve</td>
<td>false</td>
<td>Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.</td>
</tr>
<tr>
<td>on</td>
<td>hover</td>
<td>Event used to trigger popup. Can be either <b>focus, click or hover</b></td>
</tr>
<tr>
<td>delay</td>
<td>150</td>
<td>Delay in milliseconds before showing a popup when using hover or focus events.</td>
</tr>
<tr>
<td>transition</td>
<td>
slide down
</td>
<td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
</tr>
<tr>
<td>duration</td>
<td>
250
</td>
<td>Duration of animation events</td>
</tr>
<div class="ui tab" data-tab="behaviors">
<h2 class="ui dividing header">Behavior</h2>
All the following behaviors can be called using the syntax <code>$('.foo').sidebar('behavior name', argumentOne, argumentTwo)</code>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
<td>remove</td>
<td>Removes popup from the page</td>
</tr>
<tr>
<td>selector</td>
<td>
<div class="code">
</table>
</div>
<div class="ui tab" data-tab="settings">
<h2 class="ui dividing header">Settings</h2>
<h3 class="ui header">
Popup Settings
<div class="sub header">Settings to configure popup behavior</div>
</h3>
<table class="ui red celled definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>position</td>
<td>top center</td>
<td>Position that the popup should appear</td>
</tr>
<tr>
<td>inline</td>
<td>false</td>
<td>If a popup is inline it will be created next to current element, allowing for local css rules to apply. It will not be removed from the DOM after being hidden. Otherwise popups will appended to body and removed after being hidden.</td>
</tr>
<tr>
<td>preserve</td>
<td>false</td>
<td>Whether popup contents should be preserved in the page after being hidden, allowing it to re-appear slightly faster on subsequent loads.</td>
</tr>
<tr>
<td>on</td>
<td>hover</td>
<td>Event used to trigger popup. Can be either <b>focus, click or hover</b></td>
</tr>
<tr>
<td>delay</td>
<td>150</td>
<td>Delay in milliseconds before showing a popup when using hover or focus events.</td>
</tr>
<tr>
<td>transition</td>
<td>
slide down
</td>
<td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
</tr>
<tr>
<td>duration</td>
<td>
250
</td>
<td>Duration of animation events</td>
</tr>
<tr>
<td>closable</td>
<td>true</td>
<td>When using <code>on: 'click'</code> specifies whether clicking the page should close the popup</td>
</tr>
<tr>
<td>target</td>
<td>false</td>
<td>If a selector or jQuery object is specified this allows the popup to be positioned relative to that element.</td>
</tr>
<tr>
<td>distanceAway</td>
<td>0</td>
<td>Offset for distance of popup from element</td>
</tr>
<tr>
<td>offset</td>
<td>0</td>
<td>Offset in pixels from calculated position</td>
</tr>
<tr>
<td>maxSearchDepth</td>
<td>10</td>
<td>Number of iterations before giving up search for popup position when a popup cannot fit on screen</td>
</tr>
</tbody>
</table>
<h3 class="ui header">
Content Settings
<div class="sub header">Settings to specify popup contents</div>
</h3>
<table class="ui red celled definition table segment">
<thead>
<th>Setting</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>variation</td>
<td>Popup variation to use, can use multiple variations with a space delimiter</td>
</tr>
<tr>
<td>content</td>
<td>Content to display</td>
</tr>
<tr>
<td>title</td>
<td>Title to display alongside content</td>
</tr>
<tr>
<td>html</td>
<td>HTML content to display instead of preformatted title and content</td>
</tr>
</tbody>
</table>
<h3 class="ui header">
DOM Settings
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
jlukic
11 years ago