etuikitchen v2.7.3

Pagination

Page Limit: Dikey Data Uzunluğu
Step Length: Yatay Numaralandırma Uzunluğu
TotalCount: istenen Toplam Data Uzunluğu
PageNumber: Aktif Sayfa Numarası

OnClick Result Değerleri

Current: "Aktif Sayfa"
HorizontalLineFirst: "Yatay Çizgide İlk Öğe"
HorizontalLineLast: "Yatay Çizgide Son Öğe"
TotalCount: "Tüm Data Sayısı"
TotalCountSize = "Toplam Sayfalama Adım Uzunluğu"

Kullanımı

  <Pagination
        PrevText="Geri"
        NextText="İleri"
        TotalCount={TotalCount}
        VerticalLimit={VerticalLimit}
        HorizontalLength={HorizontalLength}
        ActivePage={ActivePage}
        onClick={({
          Current,
          HorizontalLineFirst,
          HorizontalLineLast,
          TotalCount,
          TotalCountSize,
        }) => {
          console.log("Aktif Sayfa: ", Current);
          console.log("Yatay Çizgide İlk Öğe: ", HorizontalLineFirst);
          console.log("Yatay Çizgide Son Öğe: ", HorizontalLineLast);
          console.log("Toplam Data Uzunluğu: ", TotalCount);
          console.log("Toplam Sayfalama Adım Uzunluğu: ", TotalCountSize);
        }}
      />

Input

	MinLength: Minimum Karakter Uzunluğu
    MaxLength: Maxium Karakter Uzunluğu
    Placeholder: Input İç Yazı
	Type: Input Tipi
    Title: Input Üstü Başlık
    Margin: {
    Top: number, (Tüm Inputun yukarıdan boşluğu)
    Bottom: number (Tüm Inputun aşağıdan boşluğu)
    }
     IconRender={{
        children: <div>Icon veya Bir Yazı Gelebilir</div>,
        direction: "right", // left yada right - Inputun neresinde olacağını belirtir.
      }}

Yüklenmesi Gerekenler:

npm i jquery
npm i jquery-mask-plugin

Uygulanması Gerekenler:

.env dosyasına REACT_APP_NPM_BRAND değeri markaya uyarlanmalı.

index.html içeriğine eklenmesi gereken linkler:

<link rel="stylesheet" href="%PUBLIC_URL%/plugins/%REACT_APP_NPM_BRAND%/input/index.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/plugins/%REACT_APP_NPM_BRAND%/select/index.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/plugins/%REACT_APP_NPM_BRAND%/dropdown/index.css" />    

**Not:** CSS dosyaları local olarak tutulmaktadır.

Kullanımı

 <Input
      MinLength={4}
      PlaceHolder={"Search Now"}
      Type={"text"}
      Margin={{
        Top: 5,
        Bottom: 5,
      }}
      IconRender={{
        children: <div>Sor</div>,
        direction: "right",
      }}
    />

Genel Örnek Kullanım için Interface Bazlı Data

  const [Users, setUsers] = useState<Array<UserInterface>>([
    {
      id: 1,
      name: "Ercan",
      surname: "Tekin",
    },
    {
      id: 2,
      name: "Necip",
      surname: "Küreyen",
    },
  ]);

Dropdown

Data ile Otomatik Kullanım

  <Dropdown
      Title="Profilim"
      HeaderRender={<div style={{ padding: 10,cursor: 'pointer' }}>Seçenekler</div>}
      Data={Users}
      Key={{
        value: "id",
        text: "name"
      }}
      onChange={({ value, text }) => {
        console.log("Id: " + value + ", Kişi: " + text)
      }}
    />

Data olmadan Manuel Kullanım

  <Dropdown
      HeaderRender={<div style={{ padding: 10, cursor: 'pointer' }}>Seçenekler</div>}
    >
      <>
        <DropdownItem>
          <div onClick={() => {
            console.log("Özel Click 1")
          }}>İlk Menü</div>
        </DropdownItem>
        <DropdownItem>
          <div onClick={() => {
            console.log("Özel Click 2")
          }}>İkinci Menü</div>
        </DropdownItem>
      </>
    </Dropdown>

Select

  <Select
      Header="Üyelik Seçimi"
      Title="Üyelikler"
      Selected={2}
      PlaceHolder="Seçim Yapınız"

      Data={Users}
      Key={{
        value: "id",
        text: "name"
      }}
      onChange={({ value, text }) => {
        console.log("Id: " + value + ", Kişi: " + text)
      }}
    />