leita-components-ui v0.1.10

Leita Components UI

Ejercicio de creación de libreria de componentes para React JS

Installation

    npm install leita-components-ui

Para usar los iconos instalar @mdi/font

    npm install @mdi/font

    import '@mdi/font/css/materialdesignicons.min.css';

• MDIcons: https://materialdesignicons.com/

Componentes

• Theme
• SideBar
• BottomNavigation
• Button
• RadioButton
• TextField
• TextArea
• Select
• List
• ChipList
• Tabs
• Notification
• ImagePicker
• ToggleButton
• MDIcon
• Tooltip

Theme

El módulo Tema abarca completamente el uso de variables CSS para la tematización en tiempo de ejecución. Esto permite algunos casos de uso realmente potentes, como un modo oscuro incorporado o paletas personalizadas para sus clientes.

    import { Theme } from 'leita-components-ui'

    <Theme primary="#2274A5" fontFamily={['Raleway', 'BlinkMacSystemFont']}>
        <div className='container'> </div>
    </Theme>

Props

SideBar

Barra lateral desplegable

    import { SideBar, SideBarItem } from 'leita-components-ui'

    <SideBar title="MyApp">
        <SideBarItem label="Elemento con acción" icon="chevron-left" onClick={() => console.log('Hello')}/>
        <SideBarItem label="Item 1" icon="account" />
        <SideBarItem label="Item 2" icon="menu" />
        <SideBarItem label="Item 3" icon="dots-horizontal" />
    </SideBar>

SideBar Props

SideBarItem Props

BottomNavigation

Barra inferior de opciones

    import { BottomNavigation, NavigationItem } from 'leita-components-ui'

    <BottomNavigation title="MyApp">
        <NavigationItem active icon='logout' label='Cerrar sesión' />
        <NavigationItem icon="view-list" label="Lista" />
        <NavigationItem icon="plus" label="Agregar" />
        <NavigationItem icon="account" label="Perfil" />
    </BottomNavigation>

BottomNavigation Props

NavigationItem Props

Button

Comunica la accion que se producirá cuando el usuario lo toque.

    import { Button } from 'leita-components-ui'

    <Button loading label="Abrir notificacion" onClick={() => console.log('Hello')} type="danger" />
    <Button loading label="Abrir notificacion" onClick={() => console.log('Hello')} trailingIcon="account" />

Props

RadioButton

Permite al ususario seleccionar unicamente una opción.

    import { RadioButton } from 'leita-components-ui'

    <div style={{ display: 'flex', flexDirection: 'row', gap: '10px', margin: '10px' }}>
        <RadioButton label="Prueba2" id="prueba2" value="2" disabled name="test" onChange={(e) => console.log(e.target.value)}/>
        <RadioButton label="Prueba3" id="prueba3" value="3" name="test" checked onChange={(e) => console.log(e.target.value)}/>
        <RadioButton label="Prueba4" id="prueba4" value="4" name="test" onChange={(e) => console.log(e.target.value)}/>
    </div>

Props

Sin propiedades especiales.

TextField

Permite a los usuarios ingresar editar y seleccionar texto.

    import { TextField } from 'leita-components-ui'

    <TextField
        icon='account'
        label="Prueba"
        id="prueba"
        value="hola"
        onChange={(e) => console.log(e)}
    />

Props

TextArea

Permite a los usuarios ingresar editar y seleccionar texto.

    import { TextArea } from 'leita-components-ui'

    <TextArea label="Prueba" id="area" value="Lorem ipsum dolor..." onChange={(e) => console.log(e)}/>

Props

Select

Permite a los usuarios seleccionar opciones listadas.

    import { Select } from 'leita-components-ui'

    <Select
        id={"comida"}
        label="Comida"
        options={[{ label: 'pizza', value: '1'}, { label: 'hotdog', value: '2'}]}
        value="1"
    />

Props

List

Indices verticales continuos.

    import { List, ListItem } from 'leita-components-ui'

    <List>
        <ListItem
            label="Hamburguesa"
            value="1"
            onClick={(e) => console.log(e)}
            description="$10.00"
            picture="https://www.infobae.com/NFO7LU.jpg"
            trailingIcon="account"            
        />
        <ListItem
            label="Hotdog con queso y cebolla"
            value="2"
            description="$15.00"
            picture="https://cnnespanol.cnn.com/CNN-hotdog.jpeg?quality=100&strip=info"
            trailingIcon="chevron-right"
        />
        <ListItem
            label="Item sin imagen"
            value="2"
            description="$15.00"
            trailingIcon="chevron-right"
        />
    </List>

List Props

ListItem Props

ChipList

Lista horizontal de tarjetas.

    import { ChipList, ChipListItem } from 'leita-components-ui'

    <ChipList>
        <ChipListItem
            label="Categoria 1"
            value="0"
            picture="https://cnnespanol.cnn.com/quality=100&strip=info"
        />
        <ChipListItem
            label="Categoria 1"
            value="1"
            active
        />
        <ChipListItem
            onClick={() => console.log('hola')}
            label="Categoria 2"
            value="2"
            picture="https://cnnespanol.cnn.com/quality=100&strip=info"
        />
        <ChipListItem
            label="Categoria 3"
            value="3"
            picture="https://cnnespanol.cnn.com/quality=100&strip=info"
        />
    </ChipList>

ChipList Props

ChipListItem Props

Tabs

Permita explorar y cambiar entre vistas de manera sencilla.

    import { Tabs, TabItem } from 'leita-components-ui'

    <Tabs>
        <TabItem onClick={() => console.log('Hola')} label='Item 1' />
        <TabItem label="Item 2" active/>
        <TabItem label="Item 3" />
    </Tabs>

Tabs Props

TabItem Props

Notification

Permite mantener informado al usuario de las acciones que realiza.

    import { Notification } from 'leita-components-ui'

    <Notification 
        text='This is a notification'
        description='This is a description'
        icon='alert'
        show={show}
        type='success'
    />

Props

ImagePicker

    import { ImagePicker } from 'leita-components-ui'

    <ImagePicker
        multiple
        imageList={imageList}
        maxSize={5}
        maxSizeMB={50000000}
        onChange={(e) => testChange(e)}
    />

Cuando el componente cuenta con visualización de las imagenes cargadas, se puede cambiar el orden de las imagenes arrastrando y soltando las miniaturas en el orden deseado.

Props

ToggleButton

Permite ocultar opciones en un unico boton.

    import { ToggleButton, ToggleButtonItem } from 'leita-components-ui'

    <ToggleButton label="Contactame" icon="message">
        <ToggleButtonItem value="facebook" icon="facebook" />
        <ToggleButtonItem value="twitter" icon="twitter" />
    </ToggleButton>

ToggleButton Props

ToggleButtonItem Props

MDIcon

Agerga iconos para reforzar el mensaje.

    import { MDIcon } from 'leita-components-ui'

    <MDIcon name="loading" className="rotate" />

Props

Tooltip

Permite mostrar mensajes cortos que aparecen cuando tienen el foco o el cursor pasa sobre el elemento.

    import { Tooltip } from 'leita-components-ui'

    <Tooltip align='top' content='Pequeño tip'>
        <RadioButton label="Prueba Tooltip " />
    </Tooltip>

Props

License

MIT