Foxxy-package

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: [email protected]
Obsahujuce komponenty:
ButtonComponent
FormComponent
ModalComponent
OffCanvasComponent
CarouselComponent

Priklad pouzitia:

ButtonComponent:

  import { ButtonComponent } from 'foxxy-package';  

  <ButtonComponent.ButtonBox>
    <ButtonComponent.Button text="click" {Argumenty}/>
  </ButtonComponent.ButtonBox>

Argumenty:

| 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:

FormComponent:

  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> 

Argumenty:

| 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 |

ModalComponent:

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

Argumenty:

| Argument | Povinný | Typ | Popis | |----------------|-----------|------------------------------|----------------------------------------------------| | variant_mdl | nie | string | default, white, dark | | show | áno | boolean | show={show} | | setShow | áno | SetStateAction | setShow={setShow} |

OffCanvasComponent:

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

Argumenty:

| 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

CarouselsComponent:

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>

Argumenty:

| Argument | Povinný | Typ | Popis | |----------------|-----------|------------------------------|----------------------------------------------------| | variant_crs | nie | string | default, white, dark |

Pridavanie poloziek do CarouselComponentu:

  <CarouselComponent.CarouselItem>
      {elemnet type: string}
  </CarouselComponent.CarouselItem>

DropdownComponent:

import { DropdownComponent } from 'foxxy-package';  

    <DropdownComponent.Dropdopwn {Argumenty}>
        <DropdownComponent.DropdownBox>
            <DropdownComponent.DropdownItems {Argument items}/>
        </DropdownComponent.DropdownBox>
    </DropdownComponent.Dropdopwn>

Argumenty:

| 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} />