Permalink
Browse files

add `balloon` example - issue #385

  • Loading branch information...
spipu committed Oct 26, 2018
1 parent 3e1d8c4 commit 446ce717198c77333f083dbc2bc089e5510188db
Showing with 146 additions and 0 deletions.
  1. +1 −0 CHANGELOG.md
  2. +31 −0 examples/balloon.php
  3. +104 −0 examples/res/balloon.php
  4. BIN examples/res/check.png
  5. +10 −0 src/Tests/ExamplesTest.php
@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
## [5.2.1](https://github.com/spipu/html2pdf/compare/v5.2.0...master) - unreleased
* add `cert` tag - thanks to @LittleBigFox
* add `balloon` example - issue #385
* change the name of all the examples from `exemple` to `example`
* fix tag parser - css style corruption
* fix issue on relative margin calculation
@@ -0,0 +1,31 @@
<?php
/**
* Html2Pdf Library - example
*
* HTML => PDF converter
* distributed under the OSL-3.0 License
*
* @package Html2pdf
* @author Laurent MINGUET <webmaster@html2pdf.fr>
* @copyright 2017 Laurent MINGUET
*/
require_once dirname(__FILE__).'/../vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;
use Spipu\Html2Pdf\Exception\Html2PdfException;
use Spipu\Html2Pdf\Exception\ExceptionFormatter;
try {
ob_start();
include dirname(__FILE__).'/res/balloon.php';
$content = ob_get_clean();
$html2pdf = new Html2Pdf('P', 'A4', 'fr');
$html2pdf->writeHTML($content);
$html2pdf->output('baloon.pdf');
} catch (Html2PdfException $e) {
$html2pdf->clean();
$formatter = new ExceptionFormatter($e);
echo $formatter->getHtmlMessage();
}
@@ -0,0 +1,104 @@
<style type="text/css">
.balloon {
width: 75%;
position: relative;
}
.on-left {
margin-left: 0;
}
.on-right {
margin-left: 25%;
}
.balloon .balloon-content {
position: relative;
padding: 4mm;
padding: 4mm;
margin-left: 2.8mm;
margin-right: 2.8mm;
margin-bottom: 4mm;
border: 0.1mm solid grey;
border-top: none;
border-radius: 2mm;
text-align: left;
color: black;
}
.balloon .balloon-corner {
width: 0;
height: 0;
border: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
.on-left .balloon-content {
background-color: #FEFEFE;
border-top-left-radius: 0;
}
.on-right .balloon-content {
background-color: #E2FECB;
border-top-right-radius: 0;
}
.on-left .balloon-corner {
border-top: solid 3mm #FEFEFE;
border-left: solid 3mm transparent;
left: 0;
}
.on-right .balloon-corner {
border-top: solid 3mm #E2FECB;
border-right: solid 3mm transparent;
right: 0;
}
.balloon .balloon-status {
color: grey;
position: absolute;
right: 2mm;
bottom: 2mm;
font-size: 80%
}
.balloon .balloon-status img {
width: 3mm;
}
</style>
<page backcolor="#DDD">
<div class="balloon on-right">
<div class="balloon-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum. In id consectetur enim. Donec eu erat ut magna consectetur vestibulum ac malesuada turpis. Suspendisse turpis risus, feugiat id gravida eu, euismod id orci. Nunc egestas ut erat molestie rutrum. Morbi posuere posuere sapien sed mattis. Fusce dapibus nunc leo, viverra mollis massa varius non. Ut in maximus quam. Aliquam volutpat consectetur odio, sed viverra eros tincidunt non. Ut consequat mi maximus congue faucibus. Morbi id finibus nisi.
<div class="balloon-status">10:01 PM <img src="./res/check.png" alt="check" /></div>
</div>
<div class="balloon-corner"></div>
</div>
<div class="balloon on-left">
<div class="balloon-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum. In id consectetur enim. Donec eu erat ut magna consectetur vestibulum ac malesuada turpis. Suspendisse turpis risus, feugiat id gravida eu, euismod id orci. Nunc egestas ut erat molestie rutrum. Morbi posuere posuere sapien sed mattis. Fusce dapibus nunc leo, viverra mollis massa varius non. Ut in maximus quam. Aliquam volutpat consectetur odio, sed viverra eros tincidunt non. Ut consequat mi maximus congue faucibus. Morbi id finibus nisi.
<div class="balloon-status">10:02 PM <img src="./res/check.png" alt="check" /></div>
</div>
<div class="balloon-corner"></div>
</div>
<div class="balloon on-right">
<div class="balloon-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum.
<div class="balloon-status">10:03 PM</div>
</div>
<div class="balloon-corner"></div>
</div>
<div class="balloon on-left">
<div class="balloon-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum.
<div class="balloon-status">10:04 PM</div>
</div>
<div class="balloon-corner"></div>
</div>
</page>
BIN +448 Bytes examples/res/check.png
Binary file not shown.
@@ -82,6 +82,16 @@ public function testBookmark()
$this->launchExample('bookmark');
}
/**
* test: bookmark
*
* @return void
*/
public function testBalloon()
{
$this->launchExample('balloon');
}
/**
* test: example01
*

0 comments on commit 446ce71

Please sign in to comment.