foxxy-package v1.4.1

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: suchovsky.michal@gmail.com
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:

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

+ vsetky arg. obsahujuci element Form pre udalosti:

Argument pre inputs ( <FormComponent.FormInputs label='my 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:

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:

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:

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:

Pridavanie poloziek do DropdownComponentu:

    <DropdownComponent.DropdownItems {Argument items} />