@billes/components

    3.0.0 • Public • Published

    Billes Components

    Install

    yarn add @billes/components
    

    Action

     <Action icon={ <ReactComponent /> } label={ 'Some label' } action={() => { console.log('hello world')}}>
    
    {
        action = null // fn to be called on click,
        disabled = false // unable to use action and hovering is off
        icon = null, // An object, component or a string that would be used as img-src
        link = null, // Shows as link in statusfield, converts from button to a
        label // Label to be displayed
        style = {} // Custom styling of action. caveats: background must be hex
        flip = false // puts the icon on the right side with label still aligned to the left 
    }
    

    Icon object passed to action

    icon: {
        component: <Component />,
        width: 40 // integer for setting a custom width. Height is locked to 24px or less depending on main style
    }
    

    Dropdown

    Dropdown is basically an elaborate collection of <Action />. The dropdown button itself is converted to <Action /> with a custom action that displays items. The items will convert to a list of <Action>. The dropdown will expand left or up if it will render outside of viewport

    NOTE: items array does not take the <Action /> (the react-component) as a valid item

     <Dropdown icon={ <ReactComponent /> } name={ 'Label' } items={ items } />
    
    disabled = false // unable to use action and hovering is off
    icon // A component or a string that would be used as img-src
    items: [
      {
        action = null // fn to be called on click,
        disabled = false // unable to use action and hovering is off
        icon = null, // A component or a string that would be used as img-src
        link = null, // Shows as link in statusfield, converts from button to a
        label // Label to be displayed
        style = {} // Custom styling of action. caveats: background must be hex
        flip = false // puts the icon on the right side with label still aligned to the left 
      }
    ],
    label // Label to be displayed
    style = {} // Custom styling of action
    flip = false // puts the icon on the right side with label still aligned to the left 
    wrapper = false // It can expand up or left based on a wrapper as well as a window. Wants an id of an element (no pound/hash sign)
    chevron = false // if you want to display chevron or not 
    

    Install

    npm i @billes/components

    DownloadsWeekly Downloads

    4

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    28.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • edgesoft
    • ingenting