-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Please check demo pages here:
This page is all the same with a demo page on Bootstrap official website. I write my php code below to show you how to achieve it. Also the worth part is to have a chance looking at html source code.
This name is owned by a Mayan fire god. Btw it looks cool so I decide use it to name my code, a project of auto. generating bootstrap html code by PHP object oriental programming. It's very helpful if you are working a lot on building content management system with PHP.
- Put all files under model/ folder into where your models live.
- Things under controller/ and view/ folders are not necessary.
- Include models how you usually do.
- Enjoy it!
A fashion way to install, by composer:
composer require xantico/xantico
- I am not very sure, maybe PHP >= 5.3?
- My development environ. is under XAMPP v3.2.2. Using Boostrap 3.3.7 standards.
Once your can access my model, you can start your painting! The first thing you need to do is initialize a palette.
$btPalette = new Xantico();(you can see my sample code in view/BootstrapView.php.)
Although I wish that not too many prepare work to do, you still have to decide where you to load Bootstrap CSS/JS. I wrote down their CDN path inside Bootstrap model as const. var, and you can call them by this way:
$btPalette->setIsLoadBootstrapFromCDN()->setIsLoadJQueryFromCDN();There are something optional to load more for my samples:
$btPalette->setCustomCSSFiles("https://v3.bootcss.com/dist/css/bootstrap-theme.min.css");
// Bootstrap theme CSS.
$btPalette->setCustomScriptsFiles('https://v3.bootcss.com/assets/js/docs.min.js');
// Bootstrap tutorial page CSS.(There still one line for customizing Style Sheet content. I am going to skip it.)
Then you can start to put some color!
$jumbotron = new Jumbotron();You initialize a class named Jumbotron. in below what component you want to use, there shall be a name matched class you'd like to initialize, like buttons (Button), labels (Label) or tables (Table) etc...
Give some text to the jumbotron (all setters return $this instance, you can operate in chain like Javascript):
$jumbotron->setHeader("Theme example")
->setText("This is a template showcasing the optional theme stylesheets included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.");Almost done. Then you need a container to put your jumbotron in:
$container = new Container();
$container->setInnerElements($jumbotron);Now we finish it and render the HTML code to see your results.
$btPalette->setBodyContents($container);
$btPalette->render(true); // the argument is for printing out result directly.Now switch to browser and key in the URL where you access your web page to see what does happen. There are bunch of beautiful, disciplined and well-formatted html code generated on page, and they are Bootstrap!.
My sample code mimics almost all of Bootstrap official guide web-page. This project would wish to keep this rhythm to create more useful Bootstrap model classes, even a full set of Bootstrap theme. You can use them on works directly.
If you like it, check more from the docs. Have a nice day!
Once you followed the instructions to build a jumbotron on your web-page, you might know the most cues about my code. There are still something you have to know:
Here I am not going to show the class diagram of Xantico, there are only few things you have to remember:
-
<class>HtmlTag is the root of every models. It can render all HTML tags with giving attributes and content inside. -
<class>Typography extends<class>HtmlTag. It has most attributes of Bootstrap standards. like contextual colors (success, info, warning etc...). - All other models extends
<class>Typography, and own they specified attributes and methods. like a<class>Panel model has its head and body attributes, tables have their cell data.
<class>HtmlTag <-- inheritance -- <class>Typography <-- inheritance -- <class>(All of the others)
finished.
If you put Xantico classes and text inside of another class at the same time (both setInnerElements and setText be called), Xantico will show text before inner elements. However you can directly set text as an inner element in your own order.
$anotherHtml->setInnerElements ([$htmltag, "some text", $anotherHtmlTag])This is Okay.
Most setters of array type attributes are converting parameters into an array automatically. They are setCustomClass, setCustomStyle, setAttrs etc... And they all have appending methods (appendCustomClass, appendCustomStyle etc...).
Single variable, an array or multiple arguments are all acceptable for array setters:
$htmltag->setInnerElements($inner1);
$htmltag->appendInnerElements($inner2); // the secondary elements will be appended.
$htmltag->setInnerElements($inner1, $inner2); // these two arguments will be convert into an array automatically.
$htmltag->setInnerElements([$inner1, $inner2]); // regular usage.They are the same thing. and the same behaviour to setItems/setAttrs etc...
The first arugment of most Xantico classes will consider to be inner text of specify type of it. The secondary arugment in most models will pass values to class attrbutes. And the 3rd argument will pass values to html attributes. This is one way you can quick setup a model.
$p = new HtmlTag("p", array ("innerText" => "Lorem ipsum dolor sit amet."));So you do not need to call too many setters after declare a class.
I have write a clone method in <class>HtmlTag, in order to make sure all inner elements of a model would be cloned. but there are still some exceptions. The clone rule shall be:
- Inner elements and items (ol, ul) will be cloned.
- Once the inner element (or item) is an array, even elements in that array are instances of
<class>HtmlTag, they will not be cloned and lost in the cloned model. - There are still many attributes hold objects, like headers, body content else. they maybe not cloned. I will continue to work for these issue.
I suppose you already know it a lot once you started your Bootstrap trip. It's not really cool to say too much here.
There is no well-posed way to approach grid system. in Bootstrap, you start a <div> tag, and write grids in class. That's what we do in Xantico also, use <class>Row create a div model and tell it the grids.
That's how we specify the number of columns in one row:
$row = new Row();
$row->setColumns (array ("text" => ".col-md-6", "width" => 6), array ("text" => ".col-md-6", "width" => 6)); // setColumns if one alias of setItems in <class>Row.Default screen size is set to be "md" (medium). If you want to change this default thing, you can assign new size by setDefaultScreenSize. Permitted values are lg, md, sm, xs that you known. However if you need multiple device screen sizes to be supported, you have to give them all in an array to index width. It still inevitably to be verbose.
$icon = new Icon("ok");
$row->setColumns (array ("text" => $icon, "width" => array ("col-xs-12", "col-md-6")));There is one attribute grid in <class>Typography. Once you give it an integer, it also helps you to add the grid style in html (6 to .col-md-6).
$div = new Typography("div");
$div->setGrid(6); // <-- adds .col-md-6 to attribute class of the div tag.All basic components of Bootstrap are here, and the most basic Xantico class I made it named <class>Typography also. To put a headline like this way:
$h1 = new Typography("h1", array("innerText" => "h1. Bootstrap heading"));The first argument of <class>Typography is the tag name of this Bootstrap component. Like we usually use a div tag to generate one row, beside of <class>Row, you can also generate one row by this way:
$row2 = new Typography("div:row");
$row2 = new Typography(":row"); // <-- div is the default tag.Actually, string after : will be passed to attribute class of a HTML tag.
<class>Code makes a block of highlighted programming language. As using PHP, this is a sample:
$code = new Code("<?php phpinfo(); ?>"); // don't forget the php beginning/ending tag <?php ?>.If you only wish to create a inline code piece, <class>HtmlTag helps you. <class>Code just does too many things.
$codeInline = new Typography("code");
$codeInline->setInnerText("<section>");
$codeSection = new HtmlTag("p");
$codeSection->setInnerHtml("For example, $codeInline should be wrapped as inline.");Note: What setInnerHtml different from setInnerText is that it will not parse HTML tag as entities. Use it in such situation.
As you can tell, we set table cells via arrays. More accurately, arrays of arrays. The first level of arrays points to table rows (tr), and the secondary level points to cells (td). You make a table by this way:
$table = new Table ();
$table->setCells (array (
array (1, 2),
array (3, 4)
));However, tables are not so easy, sometimes you specify width or column spans to those cells, and furthermore, Xantico supports that you give them a contextual color:
$table = new Table ();
$table->setCells (array (
"context" => "success", "td" => array (1, array ("text" => 2, "colspan" => 2)),
array (3, 4, 5)
));Note: Once you set colspan/rowspan to merge your table cells, you just input what you got in arrays. you don't need to put placeholders in cells merged.
There are several styles for a table. They are bordered, condensed and striped. There is also hover effect you can specify to your table (highlights where your pointer is). They make your table looks different:
$table2 = new Table ();
$table2->setIsBordered();
$table2->setIsCondensed();
$table2->setIsStrpied();
$table2->setWithHoverState();Another important function of Bootstrap is that makes table responsive to screen size. Once you set your table to be responsive (setIsResponsive), Xantico sets the tag who encloses it with table-responsive class. You don't need to add that class it's parent tag by yourself. Responsive table will show a horizontal scroll bar under table block once it overflowed.
$table3 = new Table ();
$table3->setIsResponsive();It's a huge section for Xantico, also in Bootstrap. Classes about Forms are <class>Form, <class>Input, <class>Select, <class>Textarea and sometimes <class>Button. We going to explain how you use them together.
First at all there are 4 types of a form. They show different layout. They are inline, horizontal and navbar forms, plus one default style.
In a default form look, inputs width will fit the form, and show caption above it, help text under line. And in a inline form. it shows no caption and help text, inputs width also shorter to let more inputs possible to be within one line. A navbar form do things similar to inline form, with necessary CSS decorating.
In a horizontal form, caption text will occupy fix ratio of one row, depends on the grid system, and let input to share the left part of one row. you can set the ratio between caption and inputs, the default ratio is 3:9.
To create an form, with some usual arguments, you do like this:
$form = new Form ();
$form->setMethod("post");
$form->setAction("yourAction.php");
$form->setFormType("inline");Once your inputs are created - text, password, email, radio - put them into your form via setInnerElements:
$inputName = new Input();
$inputName->setName("username"); // for tag name attribute. about how you catch this input in back-end.
$inputPwd = new Input("password");
$inputPwd->setName("password");
$form->setInnerElements (array ($inputName, $inputPwd));Input radios, checkboxes and selects need options. Set them via array. and there are also setters for you to specify disabled and checked ones.
$radio = new Input("radio");
$radio->setOptions (array (1, 2, 3, 4, 5));
$radio->setActive (0); // for checked item, set them by index, start from 0.
$radio->setDisabled (array (1, 2)); // by index also, and an array input will disable multiple items.Checkboxes and selects have almost the same behaviors.
If you need to put more then one input within a row, you have to use grid system inside of a form. That will be easy to accomplish by that you create a row model at first, then put your inputs inside it, with specify width, then put the row model into a form. Here is the example:
// ...
$inputCity = new Input ();
$inputCity->setCaption("City")->setName("inputCity");
$selectState = new Select();
$selectState->setName("inputState")->setCaption("State")
->setOptions(array ("Choose...", "..."));
$inputZip = new Input();
$inputZip->setCaption("Zip")->setName("inputZip");
$formRow3 = new Row();
$formRow3->setItems(array (
array ("text" => $inputCity, "width" => 6),
array ("text" => $selectState, "width" => 4),
array ("text" => $inputZip, "width" => 2)
));
$form3->appendItems($formRow3);Required input is a problem before Bootstrap. That time you set your input be required, you have to do a lot of Javascript jobs. However, after HTML5, there are browser default validation function. you could just set your input tag with required attribute (via setIsRequired in Xantico). However I decided to preserve the validation scripts that you may to more customize to your form.
An JQuery validation is default to Xantico, you could define it to "browser" via Input::$FORM_VALIDATION_METHOD to back to browser validation. However jquery validation shows an important function of Xantico - Javascript gathering and auto-generating. Once you set any input into required, The necessary Javascripts code will automatically insert into a <script> tag in bottom of your HTML.
Note: Cause Input::$FORM_VALIDATION_METHOD is a static variable, you could not have a form with browser validation form and another jquery validation form at the same time, you have them globally.
This function is very important to Xantico for future when more Javascript controlled plugins joining. You don't need to write scripts by your self (if you just initialize them). And all your customize scripts via setJQuery would be gathered automatically and show up in script tag.
We back to see how our form validation work. we define a couple of inputs we want them to be validated:
$inputName = new Input();
$inputName->setName("username")->setIsRequired();
$inputPwd = new Input("password");
$inputPwd->setName("password")->setIsRequired();
$form4->setInnerElements (array ($inputName, $inputPwd));
$form4->setFormAction (); // magic function, auto-gerenating a submit button with default style.$("#form4").validate({
"rules":{
"inputCity":{"required":true},
"inputZip":{"required":true}
},
"messages":{
"inputCity":{"required":"This field is required."},
"inputZip":{"required":"This field is required."}
}
}); // #form4 shall be in your case, and they shall not be formatted in your code.Once you render this form, you can see some validation scripts under main HTML part. At the same time Xantico helps you to include JQuery library what it needs. Again you don't need to include those libraries by yourself. It's very useful once you have a bunch of plugins which have their own script files waiting you to load in your page.
One word more about the magic function: setFormAction. This will create a default submit button for you if you don't specify any other else to it. I suppose you might put more buttons like reset, history back etc... Once you set anything to form action, the default submit button will not be created.
About server side validation states, you shall use setHasFeedback and setValidationState to controll them. Those inputs will be decorated by Bootstrap common contextual color. A pity thing is that JQuery form validation doesn't supports those states. You might apply them by yourself.
// ...
$inputSuccess = new Input();
$inputSuccess->setCaption("Input with success")
->setValidationState("success")->setName("inputSuccess1")
->setHelp("A block of help text that breaks onto a new line and may extend beyond one line.");
// ...Buttons are the most graceful part of Bootstrap. To initialize a Button like this:
$btn = new Button("Submit");Nothing different. Most time we specify a contextual color to a Xantico model by the same way:
$btn->setContext('success');And there are 4 sizes for buttons (lg, default, sm and xs):
$btn->setSize(5); // 5 to btn-lg, whatever 1 is not used yet. some personal Bootstrap themes use it.
$btn->setSize("lg");
$btn->setSizeLg();There are also block style for buttons. Use them by this way:
$btn->setIsBlock();They could be exist at same time (A block button with success contextual color). Use setIsDisabled to make button unable to be clicked. and Use setUrl to transfer to an Url after you click it.
$btn->setUrl("http://github.com");About button groups, button toolbars and even dropdown button will be discussed in Components chapter.
Note: setUrl will make Button model to generate an <a> tag instead of a button tag. Some model behaviors will change.
To create a image model is nothing big. Specify a image type (they are rounded, circle and thumbnail) to class when you initialize it. It's the all things we have to do.
$thumbnail = new Image("thumbnail");
$thumbnail->setSource("holder.js")->setWidth(140)->setHeight(140);Note: Again, you shall replace holder.js with your own picture path.
Future work of <class>Image might support gallery and avatar usage that usually seen in Bootstrap themes. Don't tuned.
This is what the coolest part.
Icons are another bright feature about Bootstrap. We initialize an Icon model with a name:
$icon = new Icon("asterisk");The name you given must be valid. Bootstrap included Glphyicons font by default. check icons here: Glphyicons.
If you want to use another font icon set, you have to includes that font in your personal CSS like font-awesome (fa). Mostly a Bootstrap theme has it's own icon set. to change the icon set, you can do this way:
$icon->setIconSet("glyphicon"); // It's the default font set, you don't need to call it if you are using Glyphicons excally.To put a icon inside of a button, it's barrier free:
$btn->setInnerElement(["Save", new Icon("floppy-disk")]); // Change the order when you want the icon be front of text.To initialize a Dropdown menu:
$dpm = new Dropdown();To give it items (they may be disabled, activated, heading and separators):
$dd->setItems(array (
array ("text" => "Action", "url" => "#", "active" => true),
array ("text" => "Another action", "url" => "#"),
array ("text" => "Something else here", "url" => "#"),
array ("separator" => true),
array ("text" => "Nav header", "head" => true),
array ("text" => "Seperated link", "url" => "#")
);There is one item set to be head, and another set to be seperator. check their appereances on browser.
With a dropup effect:
$dd->setType("dropup");Dropdown menu combines a part of Button model and a list model (ul), which are enclosed by a tag as parent. But I realize some dropdown models may be put into anywhere, like li tags be in an <class>Nav. To avoid to make a residual tag inside where it is, you can separately call the button or the menu by getters of <class>Dropdown.
$nvb = new Navbar();
$inlineDropdown = new Dropdown();
$inlineDropdown->setMode("inline") // Inline mode make dropdown model not be enclosed by button tag.
->setText("Dropdown")->setItems(array (/* ... */));
$nvb->setItems(array (
// navbar items ...
// more navbar items ...
$innerDropdown
);To make buttons grouped, you use ButtonGroup:
$btnLeft = new Button("Left");
$btnMid = new Button("Middle");
$btnRight = new Button("Right");
$btnGrp = new ButtonGroup();
$btnGrp->setInnerElements([$btnLeft, $btnMid, $btnRight]);A button toolbar groups up button groups. Use them as you do in button group. They can be specified size so you don't need to specify size to each buttons inside.
$btn1 = new Button(1);
$btn2 = new Button(2);
$btn3 = new Button(3);
$btn4 = new Button(4);
$btn5 = new Button(5);
$btn6 = new Button(6);
$btn7 = new Button(7);
$btn8 = new Button(8);
$btnGrp1 = new ButtonGroup();
$btnGrp2 = new ButtonGroup();
$btnGrp3 = new ButtonGroup();
$btnGrp1->setInnerElements(array ($btn1, $btn2, $btn3, $btn4));
$btnGrp2->setInnerElements(array ($btn5, $btn6, $btn7));
$btnGrp3->setInnerElements($btn8);
$btnToolbar = new ButtonToolbar();
$btnToolbar->appendInnerElements($btnGrp1, $btnGrp2, $btnGrp3)->setSizeLg();Usually InputGroup is a text input that has addons on it's wings. Addons maybe signs, buttons and other inputs. You setup a input group via setLeftAddons/setRightAddons beside of regular input setters.
$inputUserGrp = new InputGroup();
$inputUserGrp->setPlaceholder("Username")
->setLeftAddon("@");Input with an segmented dropdown button:
$dropdownAddon = new Dropdown();
$dropdownAddon->setText("Action")->setItems([/* items... */]);
$inputGrp2 = new InputGroup();
$inputGrp2->setLeftAddon($dropdownAddon);Using a nav is like a much dropdown menu, a list group or a navbar. Indeed inside of a navbar we implement the menu by a <class>Nav model. to create a nav instance:
$nav = new Nav();There are also items, activeIndex and disabled attributes. To set items of a nav is like this, text could be more then one Xantico model (via an array):
$nav->setItems(array (
array ("text" => "Home", "url" => "#"),
array ("text" => "About", "url" => "#"),
array ("text" => "Contact", "url" => "#"),
array ("text" => array("Cloud", new Icon("cloud")))
);Bootstrap provides two styles (many more) for navs:
$nav1->setStyle("pills"); // pills and tabs to chosen.A navbar is usually that you put on top of page as fixed. and links you want navigate your visitors. To use a <class>navbar is much the same as <class>Nav we mentioned. To create a Navbar:
$navbar = new Navbar();Besides of lists, there is a header usually be used as a brand of your website. Put it on by this way:
$navbar->setHeader("Bootstrap theme");
$navbar->setIsTop(true); // this is how you put it on top fixed. Items and activeIndex attributes are also up. Additionally there is a magic button for navbar that once you resize your browser window into narrow width, that button will appear to replace overflowed navs. To activate this button:
$navbar->setCollapseButton();It's content will be set up automatically. And there are also foreground and background style setter for a Navbar:
$navbar->setStyle("inverse"); // this shows a Navbar as dark style.To initialize a breadcrumb navigation bar is easy:
$bc = new Breadcrumb();Breadcrumb absolutely need ... crumbs, I mean, paths. set them via setItems:
// ...
$bc->setItems ([
array ("text" => "Home"),
array ("text" => "Library"),
array ("text" => "Data", "url" => "#")
]);Xantico consider crumbs shall be with a URL. It will be "#" as default if you don't specifiy it.
Now "Data" is in the 3rd floor. If you are in this level, set it in active:
$bc->setActiveIndex(2); // An index always starts at zero (0).I made two easy methods to point where you are: stepForward() and stepBackward(). They will do minus or plus to attribute activeIndex. Once you move your page, just call them to relocate where you are.
A pagination works also like a list item (nav, list group). It's not a button group. However you don't need to set the items, you just give it pages or how many items you have and how many items per page.
$pagi = new Pagination();
$pagi->setPages(5);
// or
$page->setRecordsPerPage(10);
$page->setTotalRecords(48); // once both attributes recordsPerPage and pages be set, pages will be in high priority.There is an indicator mode for <class>Pagination that will show a button for going backward and another for forward only.
$pagi2 = new Pagination();
$pagi2->setPages(10)->setMode("pager"); // or aligned-pagerNote: It will still be a problem if your pages are in a huge number because the pagination model will list all pages inside of it. There is no function to show something like ellipsis for it.
For PHP coders, we pager something with a certain query string. we call setQueryString (but via an array) to set this query string. And also we append the pager parameter to query string automatically (you can customize the name of pager parameter).
// ...
$pagi3->setQueryString(["search" => "123", "orderby" => "username"]);
Pagination::$PAGE_PARAM_NAME = "page"; // the pager name in query string will be indexed by "page"Actually <class>Label in Xantico re-uses Badge class. You can build a label by <class>Badge model instead:
$lbl = (new Badge("A Label"))->setType("label");
$lbl = new Label("A Label"); // They are the same thing.That's because badges are really look similar to labels. I was confused between them for a while. I think it's not a big thing you are confused too.
About the size problem of labels, you operate by header tag (<h1>, <h2> etc...). So it doesn't has setSize methods.
To initial a Badge model with text, you do this:
$badge = new Badge("42");Usually we put badges inside of buttons, table cells or anchor tags. This is how you do:
// ...
$a = new Typography("a");
$a->setInnerElements(array ("Inbox", $badge));(See the tutorial part.)
One thing I going to notice that text put inside of body content will be explode by new line character (\n), then each new line will be enclosed by tag <p>. If you don't want Xantico to do this for you, you put models inside of it via setInnerElements by yourself.
Bootstrap version header tag. You can have some sub-text next to the headline.
$pageHeader = new PageHeader("Example page header");
$pageHeader->setSubText("Subtext for header");A thumbnail is one type of <class>Image. You can refer image models usage for thumbnail models. However a image model set with Caption, Xantico supposes to do some custom content.
$tn2 = new Image();
$tn2->setSource("holder.js")->setWidth("100%")->setHeight("200")
->setAttrs(array ("data-holder-rendered" => "true"))->setAlt("100%x200");
$captionH3 = new HtmlTag("h3");
$captionH3->setText("Thumbnail label");
$captionText = new HtmlTag("p");
$captionText->setText("Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.");
$captionBtns = new HtmlTag("p");
$tn2->setCaption(array($captionH3, $captionText)); // once caption be set, you can customize more content.Initialize a Alert model:
$alert = new Alert();Give it a contextual color:
$alert->setContext("success");Give text:
$alert->setText("You successfully read this important alert message.");Give more content inside:
$alert->setInnerElements(array (new Typography("strong", array ("text" => "Well done!")), "You successfully read this important alert message."));To be with a close button on right-top corner:
$alert->withCloseButton();Using setNow to set progress to a progress bar:
$pb = new ProgressBar();
$pb->setNow(60)->setText("60%");Note: While the progress is about close to zero, and you going to show a label on the bar, Xantico will fix the width of progress to match the text automatically.
While multiple progress is going to be set:
$pb10 = new ProgressBar();
$pb10->appendItems(array(
["now" => 35, "context" => "success"],
["now" => 20, "context" => "warning", "isStriped" => true],
["now" => 10, "context" => "danger"]
));<class>Media model is like you are building blog. It has a image alongside text content. You have the image object via setMediaObject and textual part via setBodyContents.
$media = new Media();
$mediaObject = new Image("thumbnail");
$mediaObject->setSource("holder.js")->setWidth(64)->setHeight(64);
$media->setMediaObject($mediaObject);
$media->appendBodyContents(array(
new Typography("h4", array("innerText" => "Media heading")),
"Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. "
));To Specify the media object vertical alignment, you set it on the media object, not on the media model itself.
$media2 = new Media();
$media2->setMediaObject($mediaObject->setVerticalAlign("top"));
// ...To like to show many articles in a website, you could use <class>MediaList to manipulate a list of media.
// ...
$mediaList = new MediaList();
$mediaList->appendInnerElements([$media1, $media2, $media3]);To build list group is easy as much like <class>Nav we mentioned.
To create an instance:
$listGroup = new ListGroup();And this is how we insert it's item, there are two kinds of list group, one is with anchor tags and another is without. Once you give a url to a item, it rendered as anchor tag:
$listGroup->setItems(array (
"Cras justo odio",
"Dapibus ac facilisis in",
"Morbi leo risus",
"Porta ac consectetur ac",
array("text" => "Vestibulum at eros", "url" => "/your/path/"
));Much like <class>Nav or <class>Dropdown, you could set active and disabled etc... to a list group item:
$lstGrp5 = new ListGroup();
$lstGrp5->appendItems(array(
array("text" => "Cras justo odio", "url" => "#", "active" => false, "disabled" => true, "context" => "warning"),
// ... A Panel would be expected to be with header, body and footer. It be called widget or iBox in some personal Bootstrap themes. They show more features like a tool set in right corner, and be minimizable and draggable. Anyway standard Bootstrap Panel provides the basic look. To create a panel:
$panel = new Panel();
$panel->setHeading("Panel title")
->setBodyContents("Panel content")
->setContext("default");A panel permits you to combine other models between your body and footer. Insert them via setInnerElements. They will be showed after body part:
$table = new Table();
// ...
$panel2 = new Panel();
$panel2->setHeading("Panel heading")
->setBodyContents("Some default panel content here.")
->setInnerElements($table);<class>Carousel models could help you to build a slide show on webpage. you need some picture urls and model do other things for you:
$caro = new Carousel();A careusel always needs a item be in active as the default slide:
$caro->setItems(array (
["text" => "holder.js/1140x500/auto/#777:#555/text:First slide", "url" => "", "active" => true],
["text" => "holder.js/1140x500/auto/#666:#444/text:Second slide", "url" => ""],
["text" => "holder.js/1140x500/auto/#555:#333/text:Third slide", "url" => ""]
));Note: holder.js is a javascript to render images by canvas. you shall replace them by the real path of your pictures.
Carousel model could be with indicators (small spots below) and Next/Previous controls in default. However you could choice to shutdown them:
$caro->setWithIndicator(false);
$caro->setWithControl(false);It's nothing big for creating a Well element. Even Xantico made this model, you can just call a Typography model with "div:well" to implement it.
In the first version of Xantico, we decide to make this <class>Video model. This module is called "Plyr", you could check it's official site here. You could have your video via setSource easily.
$video = new Video();
$video->setSource("http://video.touchforu.com/sv/7da05c-163ecbf7536/7da05c-163ecbf7536.mp4")
->setModuleType("plyr")
->setWithControls(); // to show play, pause buttons and a progress bar.This is a goal to show how you put 3rd party plugin into Xantico. Once you know how you to generate tags part of a plugin, left you add script into jQuery attribute. They will be inserted into your HTML automatically just like jquery validation did (again you can check the script tag in bottom of HTML).
// ...
const player = new Plyr('#typography545'); // #typography545 in your case.
// ...It's much about what you have to do when expanding development of Xantico. I am going to make development documents in future if Xantico helps people.