Basic UI Elements
Buttons Preview link
import { Btn } from '../../../../AbstractElements';
<Btn color="primary">Primary</Btn>
<Btn color="secondary">Secondary</Btn>
<Btn color="success">Success</Btn>
<Btn color="info">Info</Btn>
<Btn color="warning">Warning</Btn>
<Btn color="danger">Danger</Btn>
<Btn color="light">Light</Btn>Tag & pills Preview link
import { Badges } from "../../../../AbstractElements";
<Badges color="primary">Primary</Badges>
<Badges color="secondary">Secondary</Badges>
<Badges color="success">Success</Badges>
<Badges color="info">Info</Badges>
<Badges color="warning text-dark">Warning</Badges>
<Badges color="danger">Danger</Badges>
<Badges color="light text-dark">Light</Badges>
<Badges color="dark">Dark</Badges>Progressbar Preview link
import { Progressbar } from '../../../../AbstractElements'
<Progressbar value={0}/>
<Progressbar color="primary" value={25}/>
<Progressbar color="secondary" value={50}/>
<Progressbar color="success" value={75}/>
<Progressbar color="info" value={100}/>
Alert Preview link
import { Alerts } from '../../../../AbstractElements'
<Alerts color="primary">This is a primary alert—check it out!</Alerts>
<Alerts color="secondary">This is a secondary alert—check it out!</Alerts>
<Alerts color="success">This is a success alert—check it out!</Alerts>
<Alerts color="info">This is a info alert—check it out!</Alerts>
<Alerts color="warning">This is a warning alert—check it out!</Alerts>
<Alerts color="danger">This is a danger alert—check it out!</Alerts>
<Alerts color="light">This is a light alert—check it out!</Alerts>
<Alerts color="dark">This is a dark alert—check it out!</Alerts>
Popover Preview link
import { Btn, Popovers } from '../../../../AbstractElements';
const [basicPopover, setBasicPopover] = useState(false);
const basicToggle = () => setBasicPopover(!basicPopover);
<Btn id="Popover-1" color="primary" className="example-popover mr-1" title="Popover title" onClick={basicToggle}>Click to toggle popover</Btn>
<Popovers className="example-popover" title="Popover title" isOpen={basicPopover} trigger="click">
If the package restore doesn't help, you can look at the Output window in the Visual Studio.
<Popovers/>
Tooltip Preview link
import { Btn, ToolTip } from '../../../../AbstractElements';
const [basictooltip, setbasictooltip] = useState(false);
const toggle = () => setbasictooltip(!basictooltip);
<Btn color="primary" className="example-popover mb-0 me-0" id="TooltipExample" title=" Surprise!!! Thank you for hovering..." </Btn>
<ToolTip isOpen={open} target="TooltipExample" toggle={toggle}> {SurpriseText} </ToolTip>Dropdown Preview link
import { ButtonGroup, Card, CardBody, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
const [open, setOpen] = useState(false);
const toggle = () => setOpen(!open);
<ButtonGroup">
<Dropdown isOpen={open} toggle={toggle}>
<DropdownToggle caret color="primary"/>
<DropdownMenu className="dropdown-block">
<DropdownItem >Action</DropdownItem>
<DropdownItem >Another Action</DropdownItem>
<DropdownItem >Something Else Here</DropdownItem>
</DropdownMenu>
</div>
</div>Tab Preview link
Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
import { Nav, NavItem, NavLink, TabContent, TabPane } from "reactstrap";
import { useState } from "react";
const [basicTab, setBasicTab] = useState("1");
<Nav tabs>
<NavItem>
<NavLink className={`txt-primary ${basicTab === "1" ? "active" : ""}`} onClick={() => setBasicTab("1")}>Home</NavLink>
</NavItem>
<NavItem>
<NavLink className={`txt-primary ${basicTab === "2" ? "active" : ""}`} onClick={() => setBasicTab("2")}>Profile</NavLink>
</NavItem>
<NavItem>
<NavLink className={`txt-primary ${basicTab === "3" ? "active" : ""}`} onClick={() => setBasicTab("3")}>Contact</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={basicTab}>
<TabPane tabId="1">
<P>Home</P>
<TabPane/>
<TabPane tabId="2">
<P>Profile</P>
<TabPane/>
<TabPane tabId="3">
<P>Contact</P>
<TabPane/>
</TabContent>Accordion Preview link
Web design identifies the goals of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.
Search engine optimization: Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.
Mobile responsiveness: Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.
Improved sales:Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.
The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:
- 1. Layout
- 2. Images
- 3. Visual hierarchy
- 4. Color scheme
- 5. Typography
- 6. Navigation
- 7. Readability
- 8. Content
import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "reactstrap";
const [open, setOpen] = useState("1");
const toggle = (id) => (open === id ? setOpen() : setOpen(id));
<Accordion open={open} toggle={toggle} class="default-accordion">
<AccordionItem>
<AccordionHeader targetId="1" className="bg-light-primary txt-primary">
<span className="text-primary">Accordian Item-1
<ChevronDown className="svg-color text-primary"/>
</span>
</AccordionHeader>
<AccordionBody accordionId="1">
<P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader>
<span className="text-primary">Accordian Item-2
<ChevronDown className="svg-color text-primary"/>
</span>
</AccordionHeader>
<AccordionBody accordionId="2">
<P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader>
<span className="text-primary">Accordian Item-3
<ChevronDown className="svg-color text-primary"/>
</span>
</AccordionHeader>
<AccordionBody accordionId="3">
<P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>
</AccordionBody>
</AccordionItem>
</Accordion>