Giter VIP home page Giter VIP logo

avantstay-ui's Introduction

AvantStay UI

Installation

yarn add @avantstay/avantstay-ui

Components

CollapsibleContainer

import CollapsibleContainer from '@avantstay/avantstay-ui/lib/CollapsibleContainer'
;<CollapsibleContainer
  delay={number} // (optional, default: 250) Delay in milliseconds when expanding/collapsing
  isCollapsed={boolean} // (optional, default: false) Flag to control when it is collapsed
>
  Something to expand/collapse
</CollapsibleContainer>

DateRangePicker

import DateRangePicker from '@avantstay/avantstay-ui/lib/DateRangePicker'

<DateRangePicker
  show={true|false}
  startDate={...}
  endDate={...}
  minDate={...}
  maxDate={...}
  dateLimit={...}
  onClose={...}
  onChange={...}
  onInit={...}
/>

DropDownMenu

import DropDownMenu from '@avantstay/avantstay-ui/lib/DropDownMenu'
;<DropDownMenu
  items={[
    {
      label: 'First item',
      searchable: 'firstItem',
      disabled: true | false,
      action: () => {},
    },
  ]}
>
  <p>Menu label</p>
</DropDownMenu>

ImgLite

import ImgLite from '@avantstay/avantstay-ui/lib/ImgLite'

// This will render an img element:
<ImgLite
  density={number}         // (optional, default: 1.5 on mobile or 1 otherwise)
  fit={ImgLiteFit}         // (optional, default: cover) Check https://sharp.pixelplumbing.com/api-resize#resize
  height={number}          // (optional) Set this value in case you want a fixed height (not responsive)
  isPrintable={boolean}    // (optional, default: false) Set this value if you want the image to be printable
  lowResQuality={number}   // (optional) Quality of low resolution image to load before the better quality image
  lowResWidth={number}     // (optional) Width of low resolution image to load before the better quality image
  gravity={ImgLiteGravity} // (optional, default: entropy) Check sharp.gravity and sharp.strategy on https://sharp.pixelplumbing.com/api-resize#resize
  quality={number}         // (optional, default: 85) Quality of the image
  sharpen={string}         // (optional) Check https://sharp.pixelplumbing.com/api-operation#parameters-4
  sizingStep={number}      // (optional, default: 100) By how much the width or height has to change to request a new image
  src={string}             // The url of the image
  width={number}           // (optional) Set this value in case you want a fixed width (not responsive)
  ...imgElementProps       // (optional) Any React.ImgHTMLAttributes<HTMLImageElement> except for children
/>

// This will render a div element with a background:
<ImgLite
  ...anyOfTheAbovePropsButImgElementProps
  ...divElementProps    // (optional) Any React.HTMLAttributes<HTMLDivElement>
>
  You can put anything here
</ImgLite>

Tooltip

import Tooltip from '@avantstay/avantstay-ui/lib/Tooltip'

<Tooltip
  className={...}
  style={...}
  tip={...}                        // ReactNode
  verticalSpacing={...}            // Default: 5
  backgroundColor={...}            // Default: #003459
  maxWidth={...}                   // Default: 200
  wrapper={...}                    // Default: div
  preferredVerticalGravity={...}   // Default: VerticalGravity.top
  preferredHorizontalGravity={...} // Default: HorizontalGravity.center
  tipContainerBorderRadius={...}   // Default: 3
  tipContainerPadding={...}        // Default: 14px 20px 15px 20px
>
  Triggering content
</Tooltip>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.