safet.purkovic
/
PDFEngineDemoUI
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

Code not rendering fix

master
Igor_Budimski il y a 4 ans
Parent
88dea9b135
révision
f83285ff33
1 fichiers modifiés avec 219 ajouts et 218 suppressions
Vue unifiée Afficher les stats Diff
  1. 219
    218
      src/views/demoComponent/DemoComponent10.js

+ 219
- 218
src/views/demoComponent/DemoComponent10.js Voir le fichier





const DemoComponent10 = () => { const DemoComponent10 = () => {
const [checkValue, setCheckValue] = useState(false);
const [codeValue, setCodeValue] = useState("null");
const values = { portrait: "null", landscape: "br-landscapetable" }


const handleChange = (e) => {
setCheckValue(e.target.value);
const handleChange = (e) => {
setCodeValue(e.target.value);
} }


const exec = () => { const exec = () => {
<h4>PDFEngine</h4> <h4>PDFEngine</h4>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}> <div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<select value={checkValue} onChange={handleChange} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value="false">Portrait</option>
<option value="true">Landscape</option>
<select value={codeValue} onChange={handleChange} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px', width: '150px' }}>
<option value={values.portrait}>Portrait</option>
<option value={values.landscape}>Landscape</option>
</select> </select>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button> <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div> </div>
<div> <div>
<br /> <br />
<div className="demo"> <div className="demo">
<table className="table table-hover table-outline mb-0 d-sm-table" code="br-landscapetable" isolate="true">
<thead className="thead-light">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/1.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-us" title="us" id="us" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
<table className="table table-hover table-outline mb-0 d-sm-table" code={codeValue} isolate="true">
<thead className="thead-light">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/1.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div> </div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div> </div>
</div>
<CProgress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-mastercard" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/2.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">
</td>
<td className="text-center">
<CIcon height={25} name="cif-us" title="us" id="us" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-mastercard" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/2.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">


<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-br" title="br" id="br" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-br" title="br" id="br" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-visa" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/3.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-in" title="in" id="in" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div> </div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
<CProgress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-stripe" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/4.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-secondary"></span>
</div> </div>
</div>
<CProgress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-visa" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/3.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-in" title="in" id="in" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div> </div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</td>
<td className="text-center">
<CIcon height={25} name="cif-fr" title="fr" id="fr" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div> </div>
</div>
<CProgress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-stripe" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/4.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-fr" title="fr" id="fr" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
<CProgress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-paypal" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/5.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div> </div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div> </div>
</div>
<CProgress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-paypal" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/5.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-es" title="es" id="es" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</td>
<td className="text-center">
<CIcon height={25} name="cif-es" title="es" id="es" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div> </div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
<CProgress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-google-pay" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/6.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div> </div>
</div>
<CProgress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-google-pay" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/6.jpg'} className="c-avatar-img" alt="admin@bootstrapmaster.com" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-pl" title="pl" id="pl" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div> </div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</td>
<td className="text-center">
<CIcon height={25} name="cif-pl" title="pl" id="pl" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div> </div>
</div>
<CProgress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-amex" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</table>
<CProgress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-amex" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</CCardBody> </CCardBody>

Écrire Aperçu
Chargement…
Annuler
Enregistrer