Skip to content

Commit

Permalink
Update modal docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Jul 2, 2017
1 parent 673c731 commit 673a0a5
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 79 deletions.
131 changes: 52 additions & 79 deletions server/documents/hotfix.html.eco
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,95 +6,68 @@ standalone : true
title : 'Test Page'
type : 'Library'
---
<div class="ui container">
<form class="ui form">
<div class="field">
<label>Empty</label>
<input name="empty" type="text">
<button id='btn1'>
show modal 1
</button>
<button id='btn2'>
show modal 2
</button>
<div class="ui modal" id='modal1'>
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="field">
<label>Dropdown</label>
<select class="ui dropdown" name="dropdown">
<option value="">Select</option>
<option value="male">Choice 1</option>
<option value="female">Choice 2</option>
</select>
<div class="image content">
<div class="ui medium image">
<img src="/images/avatar/large/chris.jpg">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="checkbox" type="checkbox">
<label>Checkbox</label>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<div class="ui modal" id='modal2'>
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="inline field">
<div class="ui radio checkbox">
<input name="radio" type="radio">
<label>Radio</label>
<div class="image content">
<div class="ui medium image">
<img src="/images/avatar/large/chris.jpg">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
<div class="ui radio checkbox">
<input name="radio" type="radio">
<label>Radio</label>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui radio checkbox">
<input name="radio" type="radio">
<label>Radio</label>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
<p style="color:red;">The radio field is validated, but is not included in onFailure field parameter values.</p>
<div class="output"></div>
</form>
</div>
<script>
$(document).ready(function() {$('.ui.form')
.form({
on: 'blur',
onFailure: function(formErrors, fields){
$('.output').html(JSON.stringify(fields));
return false;
},
fields: {
empty: {
identifier : 'empty',
rules: [
{
type : 'empty',
prompt : 'Please enter a value'
}
]
},
dropdown: {
identifier : 'dropdown',
rules: [
{
type : 'empty',
prompt : 'Please select a dropdown value'
}
]
},
checkbox: {
identifier : 'checkbox',
rules: [
{
type : 'checked',
prompt : 'Please check the checkbox'
}
]
},
radio: {
identifier : 'radio',
rules: [
{
type : 'checked',
prompt : 'Please check the radio'
}
]
}
}
})
;

$(document).ready(function() {
$('#modal1').modal({closable: false})
$('#modal2').modal({inverted: true})
$('#btn1').click(function(){$('#modal1').modal('show')})
$('#btn2').click(function(){$('#modal2').modal('show')})

});

Expand Down
65 changes: 65 additions & 0 deletions server/documents/modules/modal.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,40 @@ themes : ['Default', 'Material']
</div>
</div>

<div class="ui longer test modal">
<div class="header">
Profile Picture
</div>
<div class="scrolling image content">
<div class="ui medium image">
<img src="/images/wireframe/image.png">
</div>
<div class="description">
<div class="ui header">Modal Header</div>
<p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<div class="ui divider"></div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<div class="ui divider"></div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<div class="ui divider"></div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<div class="ui divider"></div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<div class="ui divider"></div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<div class="ui divider"></div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="actions">
<div class="ui primary approve button">
Proceed
<i class="right chevron icon"></i>
</div>
</div>
</div>

<div class="ui long test modal">
<div class="header">
Profile Picture
Expand Down Expand Up @@ -456,6 +490,27 @@ themes : ['Default', 'Material']
</div>
</div>

<div class="no example">
<h4 class="ui header">
Scrolling Content
<div class="ui teal label">New in 2.2.11</div>
</h4>
<p>A modal can use the entire size of the screen</p>
<div class="code" data-type="html" data-variation="scrolling">
<div class="ui modal">
<div class="header">Header</div>
<div class="scrolling content">
<p>Very long content goes here</p>
</div>
</div>
</div>
<div class="code" data-demo="true">
$('.ui.longer.modal')
.modal('show')
;
</div>
</div>

<h2 class="ui dividing header">States</h2>

<div class="no example">
Expand All @@ -481,6 +536,16 @@ themes : ['Default', 'Material']
</div>
</div>

<div class="no example">
<h4 class="ui header">Internally Scrolling Content</h4>
<p>You may prefer to have the content of your modal scroll itself, you can do this by using the <code>scrolling content</code> variation.</p>
<div class="code" data-demo="true">
$('.longer.modal')
.modal('show')
;
</div>
</div>

<div class="no example">
<h4 class="ui header">Multiple Modals</h4>
<p>A modal can open a second modal. If you use <code>allowMultiple: true</code> parameter the second modal will be opened on top of the first modal. Otherwise the modal will be closed before the second modal is opened.</p>
Expand Down

0 comments on commit 673a0a5

Please sign in to comment.