...
| Kotva | ||||
|---|---|---|---|---|
|
Alert
Komponenta Komponent Alert slúži na zobrazovanie dialógových okien. Komponenta používajú Komponent používa ako zdrojovú knižnicu SweetAlert2 a ich jeho rozhranie je zhodné s rozhraním knižnice SweetAlert2. Komponentá Komponent má aj naštýlovanú verziu verziu s preddefinovanými CSS štýlmi.
...
| Kotva | ||||
|---|---|---|---|---|
|
BootstrapDatePicker
Komponenta výberovníka Komponent výberovníka dátumu. Založené sú Založený je na komponente Bootstrap Datepicker, ktorého atribúty rozširujú rozširuje o nasledovné:
| Názov atribútu | Typ | Povinný | Predvolená hodnota | Popis |
|---|---|---|---|---|
| name | string | Unikátne meno pre HTML element <input>. | ||
| className | string | Názov CSS triedy, ktorá bude aplikovaná na HTML element <input> zobrazujúci vybraný dátum. | ||
| defaultValue | string date | Predvolená hodnota. Môže byť zadaná ako text alebo ako objekt date. | ||
| disabled | bool | false | Zakáže alebo povolí modifikáciu. | |
| enableKeyboardEdit | bool | true | Povolí alebo zakáže modifikáciu pomocou kláves. |
...
| Blok kódu | ||
|---|---|---|
| ||
// otémovaná verzia komponentu alert
import DatePicker from 'framework/components/datetime/themedBootstrapDatePicker'
// verzia komponentu bez CSS štýlov - neotémovaná, CSS je nutné ručne naimportovať
// import DatePicker from 'framework/components/datetime/bootstrapDatePicker'
// príklad použitia v JSX
<div className="row">
<div className="col-md-2">
<DatePicker defaultValue={new Date()}/>
</div>
</div>
|
BootstrapDateRangePicker
Komponenta Komponent BootstrapDateRangePicker je rozšírením dátumovníka. Zobrazuje dva dátumy, ktorými sa definuje interval. Atribúty zabaleného komponentu Bootstrap Datepicker rozširuje o nasledovné:
...
Základný kontainer web stránky. Zabezpečuje podporu pre klávesové skratky na prepínanie režimu ladenia (CTRL+ALT+D) a rebundlovania aplikácie (CTRL+ALT+R). Jeho využitie je pre React stránky, ktoré nepotrebujú pripojenie k D2000. Na tvorbu web stránok, ktoré požadujú pripojenie k D2000 slúži potomok tohto komponentu DataContainer.
| Kotva | ||||
|---|---|---|---|---|
|
...
Tabuľkový komponent (framework/components/table)
DataTable a ThemedDataTable
Tabuľkové komponenty DataTable a ThemedDataTable (DataTable naštýlovaná CSS štýlmi) Tabuľkový komponent Table v sebe zabaľujú zabaľuje knižnicu DataTables. Rozhranie tejto knižnice rozširujú rozširuje o nasledovné atribúty:
| Názov atribútu | Typ | Povinný | Predvolená hodnota | Popis |
|---|---|---|---|---|
| className | string | Názov CSS triedy, ktorá bude aplikovaná na hlavný HTML element zobrazujúci tabuľku. | ||
| style | object | CSS štýl, ktorý bude aplikovaný na hlavný HTML element zobrazujúci tabuľku. | ||
| width | string | Šírka tabuľky. | ||
| height | string | Výška tabuľky. | ||
| renderFooter | bool | false | Príznak či názvy stĺpcov budú zobrazené aj v pätičke tabuľky. |
...
| Blok kódu | ||
|---|---|---|
| ||
import React from 'react'
import {DataContainer} from '../custom/components'
import Table from 'framework/components/table/themedDataTable'
// verzia komponentu bez CSS štýlov - neotémovaná, CSS je nutné ručne naimportovať
// import Table from 'framework/components/table/dataTable'
// Príklad použitia komponentu ThemedDataTable, ktorý načítavá dáta volaním RPC
DataContainer.renderComponent(class IndexPage extends React.Component {
async loadData(data, callback, settings) {
const d2Api = this.props.d2;
const response = await d2Api.rpc("E.SmartWebApiTutorial", "GetPersonData", 1000, {
type: 'record',
structType: 'SD.Arr_Person',
returnAs: 'vysledok',
value: []
}).call();
callback({
data: response.vysledok,
recordsTotal: response.vysledok.length
});
}
render() {
return (
<div>
<Table className="table table-striped table-bordered dt-responsive nowrap dataTable" width="100%"
ajax = {(data, callback, settings) => {
this.loadData(data, callback, settings);
}}
columns = {[
{title: "Meno", data: "meno.value"},
{title: "Vek", data: "vek.value"}
]}
select={true}
ref = {(component) => {
this.table = component;
}}/>
</div>
);
}
}); |
...