lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add new docs

intro
jlukic 9 years ago
parent
af84c6dcee
commit
f3be2d2652
6 changed files with 129 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 88
      server/documents/behaviors/visibility.html.eco
  2. 28
      server/documents/collections/grid.html.eco
  3. 83
      server/documents/hotfix.html.eco
  4. 8
      server/documents/introduction/advanced-usage.html.eco
  5. 21
      server/files/javascript/docs.js
  6. 1
      server/files/javascript/visibility.js

88
server/documents/behaviors/visibility.html.eco
View File

@ -432,6 +432,89 @@ type : 'UI Behavior'
</tbody>
</table>
</div>
<h2 class="ui header">Behaviors</h2>
<div class="no example">
<p>Visibility includes several useful behaviors for interacting with the component</p>
<table class="ui celled definition table">
<thead>
<tr>
<th class="three wide">Behavior</th>
<th class="six wide">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>
disable callbacks
</td>
<td>
Disable callbacks temporarily. This is useful if you need to adjust scroll position and do not want to trigger callbacks during the position change.
</td>
</tr>
<tr>
<td>
enable callbacks
</td>
<td>
Re-enable callbacks
</td>
</tr>
<tr>
<td>
is on screen
</td>
<td>
Returns whether element is on screen
</td>
</tr>
<tr>
<td>
is off screen
</td>
<td>
Returns whether element is off screen
</td>
</tr>
<tr>
<td>
get pixels passed
</td>
<td>
Returns number of pixels passed in current element from top of element
</td>
</tr>
<tr>
<td>
get element calculations
</td>
<td>
Returns element calculations as object
</td>
</tr>
<tr>
<td>
get screen calculations
</td>
<td>
Returns screen calculations as object
</td>
</tr>
<tr>
<td>
get screen size
</td>
<td>
Returns screen size as object
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ui tab" data-tab="examples">
@ -726,6 +809,11 @@ type : 'UI Behavior'
<td>true</td>
<td>Whether visibility conditions should be checked immediately on init</td>
</tr>
<tr>
<td>checkOnResize</td>
<td>true</td>
<td>Whether visibility conditions should be checked on <code>visibility('refresh')</code> and window <code>resize</code>. Useful when content resizes causes continuous changes in position</td>
</tr>
<tr>
<td>offset</td>
<td>0</td>

28
server/documents/collections/grid.html.eco
View File

@ -1273,11 +1273,35 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Device Visibility</h4>
<p>A columns or row can appear only for a specific device</p>
<p>A columns or row can appear only for a specific device, or screen sizes</p>
<div class="ui text message info ignore">
Breakpoints are 768px and below for mobile, 768-992px for tablet and 992px+ for computer</i>
See <a href="/elements/container.html">container documentation</a> for information on breakpoint calculations
</div>
<div class="ui grid">
<div class="two column large screen only row">
<div class="column">
<div class="ui segment">
Large Screen
</div>
</div>
<div class="column">
<div class="ui segment">
Large Screen
</div>
</div>
</div>
<div class="two column large screen only row">
<div class="column">
<div class="ui segment">
Widescreen
</div>
</div>
<div class="column">
<div class="ui segment">
Widescreen
</div>
</div>
</div>
<div class="two column mobile only row">
<div class="column">
<div class="ui segment">

83
server/documents/hotfix.html.eco
View File

@ -6,86 +6,3 @@ standalone : true
title : 'Test Page'
type : 'Library'
---
<!-- TEST JS HERE !-->
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.toggle.checkbox').checkbox()
});
</script>
<div class="ui container">
<div class="ui vertical fluid accordion menu ">
<div class="item">
<a class="active title">
<i class="dropdown icon"></i>
Electronics
</a>
<div class="active content">
<div class="accordion menu">
<div class="active title">
<i class="dropdown icon"></i>
Mobile Phones
</div>
<div class="active content">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox ">
<input type="checkbox" name="a" value="small" checked>
<label>All Mobiles</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="b" value="a">
<label>Apple</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class=" title">
<i class="dropdown icon"></i>
Tablets
</div>
<div class="content">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox ">
<input type="checkbox" name="a" value="small" checked>
<label>All Mobiles</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="b" value="a">
<label>Apple</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

8
server/documents/introduction/advanced-usage.html.eco
View File

@ -21,8 +21,9 @@ type : 'Introduction'
watch = require('semantic/tasks/watch'),
build = require('semantic/tasks/build')
;
// import task with a custom task name
gulp.task('watch ui', 'Watch Semantic UI', watch));
gulp.task('build ui', 'Watch Semantic UI', build));
gulp.task('build ui', 'Build Semantic UI', build));
</div>
</div>
@ -31,6 +32,9 @@ type : 'Introduction'
<h4>Single Component Repos</h4>
<p>Component repos are automatically updated with each release. You can browse all available component repos by <a href="https://github.com/Semantic-Org?utf8=%E2%9C%93&query=ui-">browsing Semantic Org</a> on GitHub</p>
<p>Each component's release notes will automatically update with the relevant notes automatically parsed from the main repository</p>
<div class="ignored code">
npm install semantic-ui-component
</div>
</div>
<div class="no example">
<h4>Browserify and NPM</h4>
@ -63,7 +67,7 @@ type : 'Introduction'
<h4>Single Components</h4>
<p>If you need to import individual components, you will need to scope each import to avoid variable collisions</p>
<div class="ignored code" data-type="LESS" data-title="Importing LESS Components">
/* Import specific components */
/* Import specific components with scope */
& { @import 'src/definitions/elements/button'; }
& { @import 'src/definitions/elements/list'; }
</div>

21
server/files/javascript/docs.js
View File

@ -938,19 +938,17 @@ semantic.ready = function() {
codeHeight
;
var entityMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;'
"&amp;" : "&",
"&lt;" : "<",
"&gt;" : ">",
'&quot;' : '"',
'&#39;' : "'",
'&#x2F;' : "/"
};
contentType = contentType.toLowerCase();
function escapeHTML(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
return $('<div>').html(string).text();
}
// evaluate if specified
@ -969,10 +967,9 @@ semantic.ready = function() {
}
// escape html entities
if(contentType != 'javascript' && contentType != 'less') {
//formattedCode = escapeHTML(formattedCode);
if(contentType != 'html') {
formattedCode = escapeHTML(formattedCode);
}
formattedCode = formattedCode.replace(/&amp;/g, '&'); // saving me some frustration
// color code
formattedCode = window.hljs.highlightAuto(formattedCode);

1
server/files/javascript/visibility.js
View File

@ -52,7 +52,6 @@ semantic.visiblity.ready = function() {
};
$pageTabs.tab('setting', 'onLoad', function() {
console.log($('.ui.sticky'));
$('.ui.sticky')
.sticky('refresh')
;

Write Preview
Loading…
Cancel
Save