|
|
---layout : 'default'css : 'comment'
title : 'Comment'description : 'A comment is used to display user feedback to site content'type : 'UI View'
element : 'comment'elementType : 'view'
themes : ['Default', 'Chubby']---
<%- @partial('header') %><link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/comment.less" />
<div class="main container">
<h2 class="ui dividing header">Types</h2>
<div class="example"> <h4 class="ui header">Comments</h4> <p>A basic list of comments</p> <div class="ui ignored info attached message"> <p>These examples uses <a href="/elements/segment.html">ui segment</a> to create content segments. This is not required.</p> </div> <div class="ui ignored bottom attached warning message"> <p><b>UI Views</b> provide structured layouts, but do not hook up site specific code. You will need to add your own javascript behaviors to hide and show the appropriate forms. For example, having a reply button open a reply form<p> </div> <div class="ui comments segment"> <h3 class="ui dividing header">Comments</h3> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/matt.jpg"> </a> <div class="content"> <a class="author">Matt</a> <div class="metadata"> <span class="date">Today at 5:42PM</span> </div> <div class="text"> How artistic! </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/elliot.jpg"> </a> <div class="content"> <a class="author">Elliot Fu</a> <div class="metadata"> <span class="date">Yesterday at 12:30AM</span> </div> <div class="text"> <p>This has been very useful for my research. Thanks as well!</p> </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="comments"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/jenny.jpg"> </a> <div class="content"> <a class="author">Jenny Hess</a> <div class="metadata"> <span class="date">Just now</span> </div> <div class="text"> Elliot you are always so right :) </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/joe.jpg"> </a> <div class="content"> <a class="author">Joe Henderson</a> <div class="metadata"> <span class="date">5 days ago</span> </div> <div class="text"> Dude, this is awesome. Thanks so much </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui blue labeled submit icon button"> <i class="icon edit"></i> Add Reply </div> </form> </div> </div> <h2 class="ui dividing header">Content</h2>
<h3 class="ui header">Comment</h3>
<div class="example"> <h4 class="ui header">Avatar</h4> <p>A comment can contain an image or avatar</p> <div class="ui comments segment"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/elliot.jpg"> </a> <div class="content"> <a class="author">Elliot Fu</a> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Metadata</h4> <p>A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.</p> <div class="ui comments segment"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/stevie.jpg"> </a> <div class="content"> <a class="author">Stevie Feliciano</a> <div class="metadata"> <div class="date">2 days ago</div> <div class="rating"> <i class="star icon"></i> 5 Faves </div> </div> <div class="text"> Hey guys, I hope this example comment is helping you read this documentation. </div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Actions</h4> <p>A comment can contain an list of actions a user may perform related to this comment.</p> <div class="ui comments segment"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/joe.jpg"> </a> <div class="content"> <a class="author">Tom Lukic</a> <div class="text"> This will be great for business reports. I will definitely download this. </div> <div class="actions"> <a class="reply">Reply</a> <a class="save">Save</a> <a class="hide">Hide</a> <a> <i class="expand icon"></i> Full-screen </a> </div> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Reply Form</h4> <p>A comment can contain a form to reply to a comment. This may have arbitrary content.</p> <div class="ui info message"> <p>If a comment form is located inside a <code> ui comment</code> it will be formatted as an nested reply form. If the comment form is included after all comments, it will be formatted as a normal reply form.</p> </div> <div class="ui comments segment"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/steve.jpg"> </a> <div class="content"> <a class="author">Steve Jobes</a> <div class="metadata"> <div class="date">2 days ago</div> </div> <div class="text"> Revolutionary! </div> <div class="actions"> <a class="reply active">Reply</a> </div> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui primary submit labeled icon button"> <i class="icon edit"></i> Add Reply </div> </form> </div> </div> </div> </div> <div class="another example"> <div class="ui comments segment"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/joe.jpg"> </a> <div class="content"> <a class="author">Joe Henderson</a> <div class="metadata"> <div class="date">1 day ago</div> </div> <div class="text"> <p>The hours, minutes and seconds stand as visible reminders that your effort put them all there. </p> <p>Preserve until your next run, when the watch lets you see how Impermanent your efforts are.</p> </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/christian.jpg"> </a> <div class="content"> <a class="author">Christian Rocha</a> <div class="metadata"> <div class="date">2 days ago</div> </div> <div class="text"> I re-tweeted this. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui primary submit labeled icon button"> <i class="icon edit"></i> Add Comment </div> </form> </div> </div>
<h2 class="ui dividing header">States</h2>
<div class="example"> <h4 class="ui header">Collapsed</h4> <p>Comments can be collapsed, or hidden from view</p> <div class="ui comments segment"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/christian.jpg"> </a> <div class="content"> <a class="author">Christian Rocha</a> <div class="metadata"> <span class="date">2 days ago</span> </div> <div class="text"> I'm very interested in this motherboard. Do you know if it'd work in a Intel LGA775 CPU socket? </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="collapsed comments"> <div class="comment"> <a class="avatar"> <img src="/images/demo/avatar2.jpg"> </a> <div class="content"> <a class="author">Pawfin Dog</a> <div class="metadata"> <span class="date">1 day ago</span> </div> <div class="text"> I think this is a great idea and i am voting on it </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="comments"> <div class="comment"> <a class="avatar"> <img src="/images/demo/avatar.jpg"> </a> <div class="content"> <a class="author">Dog Doggington</a> <div class="metadata"> <span class="date">20 minutes ago</span> </div> <div class="text"> I think this is a great idea and i am voting on it </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> </div> </div> </div> </div>
<h2 class="ui dividing header">Variations</h2>
<div class="example"> <h4 class="ui header">Threaded</h4> <p>A comment list can be threaded to showing the relationship between conversations</p> <div class="ui threaded comments segment"> <h3 class="ui dividing header">Comments</h3> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/matt.jpg"> </a> <div class="content"> <a class="author">Matt</a> <div class="metadata"> <span class="date">Today at 5:42PM</span> </div> <div class="text"> How artistic! </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/elliot.jpg"> </a> <div class="content"> <a class="author">Elliot Fu</a> <div class="metadata"> <span class="date">Yesterday at 12:30AM</span> </div> <div class="text"> <p>This has been very useful for my research. Thanks as well!</p> </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="comments"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/jenny.jpg"> </a> <div class="content"> <a class="author">Jenny Hess</a> <div class="metadata"> <span class="date">Just now</span> </div> <div class="text"> Elliot you are always so right :) </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/joe.jpg"> </a> <div class="content"> <a class="author">Joe Henderson</a> <div class="metadata"> <span class="date">5 days ago</span> </div> <div class="text"> Dude, this is awesome. Thanks so much </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui blue labeled submit icon button"> <i class="icon edit"></i> Add Reply </div> </form> </div> </div>
<div class="example"> <h4 class="ui header">Minimal</h4> <p>Comments can hide extra information unless a user shows intent to interact with a comment.</p> <div class="ui minimal comments segment"> <h3 class="ui dividing header">Comments</h3> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/matt.jpg"> </a> <div class="content"> <a class="author">Matt</a> <div class="metadata"> <span class="date">Today at 5:42PM</span> </div> <div class="text"> How artistic! </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/elliot.jpg"> </a> <div class="content"> <a class="author">Elliot Fu</a> <div class="metadata"> <span class="date">Yesterday at 12:30AM</span> </div> <div class="text"> <p>This has been very useful for my research. Thanks as well!</p> </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="comments"> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/jenny.jpg"> </a> <div class="content"> <a class="author">Jenny Hess</a> <div class="metadata"> <span class="date">Just now</span> </div> <div class="text"> Elliot you are always so right :) </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="/images/avatar/small/joe.jpg"> </a> <div class="content"> <a class="author">Joe Henderson</a> <div class="metadata"> <span class="date">5 days ago</span> </div> <div class="text"> Dude, this is awesome. Thanks so much </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <form class="ui reply form"> <div class="field"> <textarea></textarea> </div> <div class="ui blue labeled submit icon button"> <i class="icon edit"></i> Add Reply </div> </form> </div> </div>
</div>
|
