Názov balíčka: foxxy-package
Popis: Tento balicek obsahuje zakladne komponenty pre vyvoj frontend vyvoja
Inštalácia: npm i foxxy-package
Licencia: MIT
Email: suchovsky.michal@gmail.com
Obsahujuce komponenty:
ButtonComponent
FormComponent
ModalComponent
OffCanvasComponent
CarouselComponent
import { ButtonComponent } from 'foxxy-package';
<ButtonComponent.ButtonBox>
<ButtonComponent.Button text="click" {Argumenty}/>
</ButtonComponent.ButtonBox>
Argument | Povinný | Typ | Popis |
---|---|---|---|
text | áno | string | Názov Button. Max. 9 znakov! |
variant_btn | nie | string | default, white, dark, funny, sun, ocean |
border | nie | boolean | Určuje, či má Button mať okraj |
round | nie | boolean | Určuje, či má Button mať zaoblené rohy |
lg | nie | boolean | Určuje, či má Button byť veľký (large) |
sm | nie | boolean | Určuje, či má Button byť malý (small) |
+ vsetky arg. obsahujuci element Button pre udalosti:
import { ButtonComponent, FormComponent } from 'foxxy-package';
<FormComponent.Form form_name='my Form' {Argumenty}>
<FormComponent.FormHeader />
<FormComponent.FormInputs {Argument pre input}/>
<ButtonComponent.ButtonBox>
<ButtonComponent.Button text="click me" {Argumenty pre ButtonComponent}/>
</ButtonComponent.ButtonBox>
</FormComponent.Form>
Argument | Povinný | Typ | Popis |
---|---|---|---|
form_name | áno | string | Názov Formulára. |
variant_form | nie | string | default, white, dark, funny |
+ vsetky arg. obsahujuci element Form pre udalosti:
Argument pre inputs ( <FormComponent.FormInputs label='my input' /> )
Argument | Povinný | Typ | Popis |
---|---|---|---|
label | nie | string | Label pre input |
import { ButtonComponent, FormComponent, ModalComponent } from 'foxxy-package';
function App() {
const [show, setShow] = React.useState(false);
const handleClick = (): void => {
setShow(!show);
};
return (
<div className="App">
<div>
<ButtonComponent.ButtonBox>
<ButtonComponent.Button text='click me' onClick={handleClick} {Argumenty pre ButtonComponent}/>
</ButtonComponent.ButtonBox>
</div>
<ModalComponent.Modal show={show} setShow={setShow} {Argumenty}>
<FormComponent.Form formName='me form' {Argumenty pre FormComponent} >
<FormComponent.FormHeader />
<FormComponent.FormInputs {Argumenty pre FormComponent (input)}/>
<ButtonComponent.ButtonBox>
<ButtonComponent.Button text='exit' onClick={handleClick} {Argumenty pre ButtonComponent}/>
</ButtonComponent.ButtonBox>
</FormComponent.Form>
</ModalComponent.Modal>
</div>
)
}
export default App
Argument | Povinný | Typ | Popis |
---|---|---|---|
variant_mdl | nie | string | default, white, dark |
show | áno | boolean | show={show} |
setShow | áno | SetStateAction | setShow={setShow} |
import { ButtonComponent, OffCanvasComponent } from 'foxxy-package';
function App() {
const [show, setShow] = React.useState(false);
const handleClick = (): void => {
setShow(!show);
};
return (
<div className="App">
<div>
<ButtonComponent.ButtonBox>
<ButtonComponent.Button text='click me' onClick={handleClick} {Argumenty pre ButtonComponent}/>
</ButtonComponent.ButtonBox>
</div>
<OffCanvasComponent.OffCanvas show={show} setShow={setShow} position="left" {Argumenty}>
<OffCanvasComponent.OffCanvasHeader>
{textHeader}
</OffCanvasComponent.OffCanvasHeader>
<OffCanvasComponent.OffCanvasBody>
{textBody}
</OffCanvasComponent.OffCanvasBody>
<OffCanvasComponent.OffCanvasButoonBox>
<ButtonComponent.ButtonBox>
<ButtonComponent.Button text='exit' onClick={handleClick} {Argumenty pre ButtonComponent}/>
</ButtonComponent.ButtonBox>
</OffCanvasComponent.OffCanvasButoonBox>
</OffCanvasComponent.OffCanvas>
</div>
)
}
export default App
Argument | Povinný | Typ | Popis |
---|---|---|---|
variant_offCnv | nie | string | default, white, dark |
position | áno | string | left, top, right |
show | áno | boolean | show={show} |
setShow | áno | SetStateAction | setShow={setShow} |
textHeader: Vlozte nadpis OffCanvas, typ: string
textBody: Vlozte content OffCanvas, typ: string
import { CarouselComponent } from 'foxxy-package';
<CarouselComponent.Carousel {Argumenty}>
<CarouselComponent.CarouselBox>
<CarouselComponent.CarouselItem>
<h1>1</h1>
</CarouselComponent.CarouselItem>
<CarouselComponent.CarouselItem>
<h1>2</h1>
</CarouselComponent.CarouselItem>
<CarouselComponent.CarouselItem>
<h1>3</h1>
</CarouselComponent.CarouselItem>
</CarouselComponent.CarouselBox>
</CarouselComponent.Carousel>
Argument | Povinný | Typ | Popis |
---|---|---|---|
variant_crs | nie | string | default, white, dark |
Pridavanie poloziek do CarouselComponentu:
<CarouselComponent.CarouselItem>
{elemnet type: string}
</CarouselComponent.CarouselItem>
import { DropdownComponent } from 'foxxy-package';
<DropdownComponent.Dropdopwn {Argumenty}>
<DropdownComponent.DropdownBox>
<DropdownComponent.DropdownItems {Argument items}/>
</DropdownComponent.DropdownBox>
</DropdownComponent.Dropdopwn>
Argument | Povinný | Typ | Popis |
---|---|---|---|
variant_drop | nie | string | default, white, dark |
drop_text | ano | string | nazov dropdown |
Argument items | Povinný | Typ | Popis |
---------------- | ----------- | ------------------------------ | ---------------------------------------------------- |
href | ano | string | link pre items |
name_link | ano | string | nazov items |
Pridavanie poloziek do DropdownComponentu:
<DropdownComponent.DropdownItems {Argument items} />