KAWWA Markup Pattern Library


Editorial

Read more Component Information

  • Class name: (k-readmore)
  • Version: 1.0
  • Tapestry Tapestry Integration

Add to list

This component is made of a simple paragraph that may be used to link to some specific content.

This is an example of text with a link to some content.

HTML5 Plain Code

COPY
  1. <p class="k-readmore">This is an example of text with a link to <a href="#">some content</a>.</p>

CSS Code

COPY
  1. p.k-readmore {
  2. 	clear: both;
  3. 	text-indent: -1em;
  4. 	color: #000;
  5. 	background: #FFF;
  6. 	padding: 0.5em 0 0 1em;
  7. 	border-top: 1px dashed #999;
  8. }
  9. 	p.k-readmore:before {content: "\2315 \0020 "; color: #A40800;}
  10. 	p + p.k-readmore {margin-top: 1em;}
  11. 
                                
  12. 
                                

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

Within the kawwa component tapestry library, you have a ReadMore mixin. It allows you to automatically hide a part of your content and replace it by a link. When the end user clicks this link, the link disappear and the hidden content appears.

Readmore parameters
Name Required Java Type Default Prefix Default Value Description
header false String Message message:read-more-header The text the end user will click to display the hidden content. It should be something like "Read more...".

The Template

COPY
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  3.  	<p class="k-readmore">This is an example of text with read more link displaying some content...
  4. 		<span t:type="any" t:mixins="kawwa2/readMore" t:header="literal: Read more...">
  5.  			And here is the hidden text !
  6.  		</span>
  7. 	</p>
  8. </html>

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce