Accordion

Cree acordeones que se contraen verticalmente.

Basic Example

Acordion 1

Lorem ipsum 1
Lorem ipsum 1
Lorem ipsum 1
Lorem ipsum 1

Acordion 2

Lorem ipsum 2
Lorem ipsum 2
Lorem ipsum 2
Lorem ipsum 2

const [accordionActive, setAccordionActive] = useState(1);
<AccordionContainer> 
<AccordionItemactive={accordionActive === 1}>
<AccordionTitle onClick={() => setAccordionActive(1)}>
 Acordion 1
 </AccordionTitle> <AccordionBody>
 Body 1
 </AccordionBody> </AccordionItem> 
</AccordionContainer>

API

AccordionContainer Props

import { AccordionContainer } from '@futurasit/components'

El elemento <AccordionContainer> es un contenedor para crear acordeones que se contraen verticalmente.

Nombre	Tipo	Valor por defecto	Descripción
children	any		Elementos a renderear en el Acordion.

AccordionItem Props

import { AccordionItem } from '@futurasit/components'

El elemento <AccordionItem> es el elemento a darle click para mostrar el contenido.

Nombre	Tipo	Valor por defecto	Descripción
children	any		Elementos a renderear en el AccordionItem.
active	boolean	false	Propiedad para expandir el acordeón verticalmente.
boxShadow	boolean	false	Propiedad para establecer una sombra al elemento.
activeBackgroundTitle	string	'white'	Propiedad para establecer un color de fondo al título cuando el elemento se encuentra activo.
activeBackgroundBody	string	'white'	Propiedad para establecer un color de fondo al body cuando el elemento se encuentra activo.
activeColorTitle	string	'black'	Propiedad para establecer un color de letra al título cuando el elemento se encuentra activo.
activeBorderBody	string	'1px solid gray'	Propiedad para establecer un border body cuando el elemento se encuentra activo.

AccordionTitle Props

import { AccordionTitle } from '@futurasit/components'

El elemento <AccordionTitle> es el elemento para mostrar el título del acordeón, se establece una función para el cambio de estado del elemento.

Nombre	Tipo	Valor por defecto	Descripción
children	any		Elementos a renderear en el AccordionTitle.
showArrow	boolean	'false'	Propiedad para darle mostrar/ocultar el ícono.
color	string	'black'	Propiedad para darle color al título.
background	string	'white'	Propiedad para establecer un color de fondo al elemento.
fontSize	string	'clamp(1.2rem, calc(1rem + 3.5vw), 1rem)'	Propiedad para establecer un tamaño al título.
border	string	'1px solid gray'	Propiedad para establecer un border al elemento.
borderRadius	string	'10px'	Propiedad para establecer un border-radius al elemento.
hoverStyled	object		Objeto de estilo para establecer propiedades al hover.
onClick	function		Propiedad para ejecutar un callback para el cambio de estado del elemento.

AccordionBody Props

import { AccordionBody } from '@futurasit/components'

El elemento <AccordionBody> es el elemento que se muestra cuando el <AccordionItem> se encuentra activo.

Nombre	Tipo	Valor por defecto	Descripción
children	any		Elementos a renderear en el AccordionBody.

Badge

Basic Example

SUCCESS

INFO

DANGER

WARNING

LIGHT

DARK

PRIMARY

<Badge color="success" >Info </Badge>
<Badge color="info" >Info </Badge>
<Badge color="danger" >Info </Badge>
<Badge color="warning" >Info </Badge>
<Badge color="light" >Info </Badge>
<Badge color="dark" >Info </Badge>
<Badge color="primary" >Info </Badge>

API

Badge Props

import { Badge } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
borderRadius	String	'3px'	Propiedad para el border-radius.
color	'primary' \| 'success' \| 'info' \| 'danger' \| 'warning' \| 'light' \| 'dark'	'primary'	Variación de combinaciones para el background, color de letra.
colorText	String	'white'	Si es personalizado, color del texto.
skew	String	'0deg'	Propiedad para el skew(inclinación) en grados(deg)

Button

Basic Example

<Button color="success" >Click To Me </Button>
<Button color="info" >Click To Me </Button>
<Button color="danger" >Click To Me </Button>
<Button color="warning" >Click To Me </Button>
<Button color="light" >Click To Me </Button>
<Button color="dark" >Click To Me </Button>
<Button color="link" >Click To Me </Button>
<Button color="primary" >Click To Me </Button>
<Button color="violet" >Click To Me </Button>

API

Button Props

import { Button } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
type	'button' \| 'submit'	'button'	Tipo de boton.
color	'primary' \| 'success' \| 'info' \| 'danger' \| 'warning' \| 'light' \| 'dark' \| 'link' \| 'personalizado'	'primary'	Variación de combinaciones para el background, color de letra.
colorText	String	'white'	Si es personalizado, color del texto.
borderRadius	String	'2px'	Propiedad para el border-radius del elemento.
padding	String	'8px'	Propiedad para el padding.
margin	String	'5px'	Propiedad para el margin.
fontSize	String	'14px'	Propiedad para el font-size.
disabled	boolean	'false'	Propiedad para deshabilitar el botón.

ActionButton

Basic Example

<ActionButton color="success" text="Cargando" />
<ActionButton color="warning" text="Con Progreso" />
<ActionButton color="info" text="Texto" />

API

ActionButton Props

import { ActionButton } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
loading	boolean	'false'	Activa o Inactiva la acción
progress	number	0	Envia el progreso de la acción
text	String	'Aceptar'	Texto informativo del boton
progressText	String	'Procesando'	Texto informativo que identifica la Acción
onClick	function	() => { }	Ejecuta la acción que se requiere al presionar el botón
PD: Espera las misma props que el componente Button de la libreria

ActionButton

Basic Example

<DeleteButton color="danger" text="Eliminar" />

API

ActionButton Props

import { DeleteButton } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
loading	boolean	'false'	Activa o Inactiva la acción
progress	number	0	Envia el progreso de la acción
text	String	'Aceptar'	Texto informativo del boton
onClick	function	() => { }	Ejecuta la acción que se requiere al presionar el botón
PD: Espera las misma props que el componente Button de la libreria

Card

Basic Example

Card Basic

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illo fugit nisi harum officiis quam distinctio, nesciunt sed reiciendis aliquid magni ratione assumenda in quas. Explicabo sequi sapiente laboriosam nam.

Footer

Card Basic

Footer

<CardWrapper>
<CardHeader> Card Basic </CardHeader><CardBody>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illo fugit nisi harum officiis quam distinctio, nesciunt sed reiciendis aliquid magni ratione assumenda in quas. Explicabo sequi sapiente laboriosam nam.
</CardBody>
CardFooter> Footer </CardFooter><CardWrapper>

API

CardWrapper

import { CardWrapper } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
textColor	String		Color de texto de todo el contenido.
backgroundColor	String	'white'	Propiedad para el color de background
boxShadow	String	'0 0 20px rgba(0, 0, 0, 0.05), 0 0px 40px rgba(0, 0, 0, 0.08)'	Propiedad para la sombra
borderRadius	String	'3px'	Propiedad para el border-radius del elemento.
border	String	'1px solid '	Propiedad para el border.
borderColor	String	'rgba(0, 0, 0, 0.007)'	Propiedad para el color de border.

CardHeader

import { CardHeader } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
backgroundColor	String	'transparent'	Color de background
textColor	String	'black'	Color de texto del header.

CardBody

import { CardBody } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
padding	String	'15px'	Propiedad para el padding del contenido.
backgroundColor	String	'transparent'	Color de background
textColor	String	'black'	Color de texto del header.

CardFooter

import { CardFooter } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
backgroundColor	String	'transparent'	Propiedad para el background-color.
textColor	String	'black'	Color de texto del header.

DropDown

Basic Example

const [openDropdown, setOpenDropdown] = useState(false);
<DropDown 
openDropdown={openDropdown}
noHover
onClick={() => setOpenDropdown(!openDropdown)}
>
<DropDownTitle> Dropdown </DropDownTitle>
<DropDownMenu>
<DropDownItem> Item 1 </DropDownItem>
<DropDownItem> Item 2 </DropDownItem>
<DropDownDivider /> 
<DropDownItem> Item 3 </DropDownItem>
</DropDown>

API

DropDown Props

import { DropDown } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
noHover	boolean	false	Propiedad para desplegar en hover.
color	'primary' \| 'success' \| 'info' \| 'danger' \| 'warning' \| 'light' \| 'dark' \| 'link' \| 'personalizado'	'primary'	Variación de combinaciones para el background, color de letra.
openDropdown	boolean	false	Propiedad para mantener desplegado el dropdown.
onClick	function		Función para cambiar de valor la propiedad de openDropdown

DropDownTitle Props

import { DropDownTitle } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
noAfter	boolean	false	Propiedad para mostrar/ ocultar el icono después del texto.

DropDownMenu Props

import { DropDownMenu } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
bgColor	String	'white'	Propiedad para el background-color del menu.
colorText	String	'black'	Propiedad para el color del texto del menu.
position	'down' \| 'up' \|'left' \|'right' \|	'down'	Propiedad para el posicionamiento del menu desplegado.

DropDownItem Props

import { DropDownItem } from '@futurasit/components'

DropDownDivider Props

import { DropDownDivider } from '@futurasit/components'

Form

Basic Example

<Form> <FormTittle>Título Formulario</FormTittle>
<FormGroup>
<InputLabel>Email</InputLabel>
<Input type='text'  placeholder='Email' />
</FormGroup>
<FormGroup>
<InputLabel>Contraseña</InputLabel>
<Input type='password'  placeholder='Contraseña' />
</FormGroup>
<FormGroup>
<Checkbox
 label='Estoy de acuerdo' 
 id='iAgree' 
 name='iAgree' 
checked={iAgree} 
onChange={() => setCheckBox(!iAgree)} 
/>
</FormGroup>
</Form>

API

Form Props

import { Form } from '@futurasit/components'

El elemento <Form> es un contenedor para diferentes tipos de input, como: text, checkbox, radio buttons, buttons, etc.

FormTittle Props

import { FormTittle } from '@futurasit/components'

El <FormTittle> es proporcionado para agregarle un título al formulario, el mismo brinda un border bottom para separar el título del formulario en sí.

Nombre	Tipo	Valor por defecto	Descripción
color	string	'black'	Propiedad para el color del título.
align	'left'\|'center'\|'right'	'left'	Propiedad para el alinear del título.
children	any		Contenido
fontSize	String	'2rem'	Propiedad para el tamaño del título.

FormGroup Props

import { FormGroup } from '@futurasit/components'

El <FormGroup> es la forma más sencilla de agregar algo de estructura a los formularios. Proporciona un contenedor flexible para agrupar labels, inputs, texto de ayuda opcional y mensajes de validación de formularios.

InputLabel Props

import { InputLabel } from '@futurasit/components'

El <InputLabel> representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un input mediante la utilizacion del atributo htmlFor .

Nombre	Tipo	Valor por defecto	Descripción
color	string	'black'	Propiedad para el color del texto.
fontSize	String	'16px'	Propiedad para el tamaño del texto.
fontWeight	String	'500'	Propiedad para el font weight del texto.
margin	String	'0 0 8px'	Propiedad para el margin del texto.

Input Props

import { Input } from '@futurasit/components'

El componente <Input> representa un input de formulario con estilo predeterminado. Para garantizar la accesibilidad, establezca controlId en <FormGroup> y use <InputLabel> para la etiqueta.

Nombre	Tipo	Valor por defecto	Descripción
border	boolean	true	Cuando la propiedad esta en 'true' el input establecera un border completo, en caso de que sea 'false' se mantendra un border bottom.
invalid	boolean	false	Se usaría cuando el value no cumple con los parámetros establecidos. Cuando la propiedad esta en 'true' el input establecera un border de color rojo.
readOnly	boolean	false	En caso que sea 'true' se desactivara el componente y se establecerán estilos predeterminados.
borderRadius	string	'3px'	Propiedad para establecer el border radius del input.

InputDescription Props

import { InputDescription } from '@futurasit/components'

El <InputDescription> es un texto de ayuda a nivel de <FormGroup> en formularios.

Checkbox Props

import { Checkbox } from '@futurasit/components'

El componente <Checkbox> es un input de type="checkbox" con estilo predeterminado.

Nombre	Tipo	Valor por defecto	Descripción
id	string	Es requerido	Propiedad para establecer el identificador del input (Es requerido).
name	function		Propiedad para establecer el name del input.
checked	boolean	false	Propiedad para establecer si el Checkbox esta seleccionado o no.
size	string	'16px'	Propiedad para establecer el tamaño del contenedor del checkbox. Mantiene la relación de aspceto entre el ancho y el alto.
value	any		Propiedad para establecer el valor al input
label	string		Texto explicativo del checkbox.
disabled	boolean	false	Propiedad para deshabilitar las acciones sobre el checkbox.
className	string		Propiedad para establecer un estilo de clases al checkbox.
margin	string	'0 0 5px 0'	Propiedad para establecer un margin definido al checkbox.
onChange	function		Función que activa una devolución de llamada cuando cambia la propuesta de valor. Retornar el evento del input, para acceder al value y al checked, sería mediante el objeto e.target.checked y e.target.value.
fontSizeLabel	string	'16px'	Propiedad para establecer el tamaño de letra del label
colorLabel	string	'black'	Propiedad para establecer el color de letra del label
background	string	'white'	Propiedad para establecer el color de background del checkbox cuando no esta checked en 'true'.
colorBorder	string	'#43acb8'	Propiedad para establecer el color de border del checkbox cuando no esta checked en 'true'.
backgroundOnChecked	string	'#43acb8'	Propiedad para establecer el color de background del checkbox cuando esta checked en 'true'.
colorBorderOnChecked	string	'#43acb8'	Propiedad para establecer el color de border del checkbox cuando esta checked en 'true'.
colorOnChecked	string	'#2d2c47'	Propiedad para establecer el color del checked del checkbox cuando esta checked en 'true'.
boxShadowOnChecked	boolean	true	Propiedad para establecer una sombra al checkbox cuando esta checked en 'true'.

Modal

Basic Example

const [showModal, setShowModal] = useState(false);
<Button  onClick={() => setShowModal(!showModal)}> Open Modal </Button>
<Modal  show={showModal} onHide={() => setShowModal(!showModal)}
<ModalHeader  closeButton  onHide={() => setShowModal(!showModal)}
Título
</ModalHeader>
<ModalBody>
Contenido del modal
</ModalBody>
<ModalFooter>
Footer
</ModalFooter>
</Modal>

API

Modal Props

import { Modal } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
show	boolean	false	Propiedad para ocultar/ mostrar el modal.
onHide	function		Función para cerrar el modal.
children	any		Contenido
width	String		Ancho para la dimension mayor que 995px.
widthXS	String	'98%'	Ancho para la dimensión menor que 768px
widthMD	String	'90%'	Ancho para la dimensión de 768px a 995px
borderRadius	String	'0px'	Propiedad para el border-radius.
centered	boolean	false	Ajustar el modal al centro de la pantalla.
colorBackground	String	'rgba(0, 0, 0, 0.6)'	Color de fondo del dialog.

ModalHeader Props

import { ModalHeader } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
border	boolean	true	Propiedad para ocultar/ mostrar el border-bottom.
onHide	function		Función para cerrar el modal.
children	any		Contenido
closeButton	boolean	false	Propiedad para ocultar/ mostrar el boton de cerrar el modal.
fontSize	String	'14px'	Propiedad para el tamaño de la letra.

ModalBody Props

import { ModalBody } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
className	String		Propiedad para para darle estilo al contenido del body.
children	any		Contenido

ModalFooter Props

import { ModalFooter } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
border	boolean	true	Propiedad para ocultar/ mostrar el border-top.
position	'start' \| 'center' \| 'end'	'end'	Propiedad para posicionar los elementos.
children	any		Contenido

Progress

Basic Example

<Progress color="success" percent={50} />
<Progress color="info" percent={20} />
<Progress color="danger" percent={25} />
<Progress color="warning" percent={70} />
<Progress color="light" percent={80} />
<Progress color="dark" percent={90} />
<Progress color="primary" percent={100} />

API

Progress Props

import { Progress } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
percent	number	0	Porciento de la barra de progreso
color	'primary' \| 'success' \| 'info' \| 'danger' \| 'warning' \| 'light' \| 'dark'	'primary'	Variación de combinaciones para el color del progress.

Range

Basic Example

130

Miníno: 0

Máximo: 0

const [rangesValues, setRangesValues] = useState(null);
<RangeSlider 
value={rangesValues}
min={0}
max={130}
 onCallbackValue={(e) => setRangesValues(e)}
 />

API

RangeSlider Props

import { RangeSlider } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
min	number	Es requerido	Valor mínimo del rango.
max	number	Es requerido	Valor máximo del rango.
value	object		Valor del rango, mínimo y máximo.
onCallbackValue	function		Retorna un objecto con el valor mínimo y el máximo seleccionado, ex:{ minVal: 4, maxVal:9 }.
label	String		Texto a mostrar en valor.
fontLabel	String	'15px'	Tamaño del texto a mostrar en valor.
colorLabel	String	'black'	Color del texto a mostrar en valor.
colorTrack	String	'white'	Color de los botones.
colorLine	String	'gray'	Color del rango sin seleccionar.
colorLineActive	String	'#3dd9eb'	Color del rango seleccionado.

Spinners

Basic Example

<SpinnerBorder color="success" />
<SpinnerGrow color="success" />
<SpinnerBorder color="info" />
<SpinnerGrow color="info" />
<SpinnerBorder color="danger" />
<SpinnerGrow color="danger" />
<SpinnerBorder color="warning" />
<SpinnerGrow color="warning" />
<SpinnerBorder color="light" /> 
<SpinnerGrow color="light" />
<SpinnerBorder color="dark" />
<SpinnerGrow color="dark" />
<SpinnerBorder color="primary" />
<SpinnerGrow color="primary" />

API

SpinnerGrow, SpinnerBorder Props

import { SpinnerGrow, SpinnerBorder } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
color	'primary' \| 'success' \| 'info' \| 'danger' \| 'warning' \| 'light' \| 'dark'	'primary'	Variación de combinaciones de color.
speed	Number	1	Velocidad de transición.
size	String	'2rem'	Tamaño del elemento.

Table

Basic Example

Color Default (light)

Header 1	Header 2	Header 3	Header 4	Header 5
Valor 1	Valor 2	Valor 3	Valor 4	Valor 5

Color Primary

Header 1	Header 2	Header 3	Header 4	Header 5
Valor 1	Valor 2	Valor 3	Valor 4	Valor 5

Color Success

Header 1	Header 2	Header 3	Header 4	Header 5
Valor 1	Valor 2	Valor 3	Valor 4	Valor 5

Color Dark

Header 1	Header 2	Header 3	Header 4	Header 5
Valor 1	Valor 2	Valor 3	Valor 4	Valor 5

<Table> 
<THead>
<Tr>
<Th>
Header 1</Th>
<Th>
Header 2</Th>
<Th>
Header 2</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>
Data 1</Td>
<Td>
Data 2</Td>
<Td>
Data 2</Td>
</Tr>
</TBody>
</Table>

API

Table Props

import { Table } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
disabled	Boolean	false	Propiedad para deshabilitar las acciones sobre la tabla.
boxShadow	Boolean	false	Propiedad mostrar/ocultar sombra de la tabla.
bordered	Boolean	false	Propiedad mostrar/ocultar los border de la tabla, en caso de ser falso la tabla solo mostrará los border-bottom.
color	'primary' \| 'success' \| 'info' \| 'danger' \| 'warning' \| 'light' \| 'dark' \| 'other'	'light'	Variación de combinaciones para el background, color de letra. En caso de ser 'other'
bgColor	String		Color de background de la tabla, en caso de que color='other'
textColor	String		Color de texto de la tabla, en caso de que color='other'
borderColor	String		Color de border de la tabla, en caso de que color='other'
hoverColor	String		Color de hover de los elementos de la tabla, en caso de que color='other'

THead, TBody, Tr Props

import { THead, TBody, Tr } from '@futurasit/components'

Th, Td Props

import { Th, Td } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
position	'left' \| 'center' \| 'end'	'left'	Propiedad para posicionar el texto del elemento.

Nombre	Tipo	Valor por defecto	Descripción
disabled	Boolean	false	Propiedad para deshabilitar el componente.
value	Array	[ ]	Arreglo de String de valores.
onChange	Function	null	Función para actualizar cambios de valores existentes o agregar uno nuevo
onError	Function	null	Función que detecta si una palabra existe en el arreglo de valores guardados
separators	Array	['enter', 'tab']	Arreglo de teclas para agregar un nuevo valor.
textSeparator	String	'Para adicionar debes presionar: '	Texto descriptivo de las teclas a presionar para adicionar.
colorTextSeparator	String	'gray'	Color del texto descriptivo de las teclas a presionar para adicionar.
itemTagColorRemoveBg	String	'#333333'	Color de background de la opción de eliminar un elemento.
itemTagColorRemoveText	String	'#ffffff'	Color de texto de la opción de eliminar un elemento.
itemTagColorBg	String	'#85a3bf'	Color de background de los elementos.
itemTagColorText	String	'#ffffff'	Color de texto de los elementos.

Toggle

Basic Example

Activo false

const [toggle, setToggle] = useState(false);
<Toggle checked={toggle}
textLabel={'activo'}
onCallback={() => setToggle(!toggle)}
 />

API

Toggle Props

import { Toggle } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
onCallback	function		Función para cambiar el estado del toggle ('true'/'false')
className	String		Clase de css, para darle estilo al componente.
checked	boolean	false	Valor del estado.
textLabel	String		Texto del label a mostrar.
backgroundColor	String	'gray'	Color del background.
backgroundToggle	String	'white'	Color del botón.
textLabelSize	String	'16px'	Tamaño de letra del label.
textLabelColor	String	'black'	Color de letra del label.
itemOn	object	null	Elemento(Icono) a mostrar cuando esta en true el estado.
itemOff	object	null	Elemento(Icono) a mostrar cuando esta en false el estado.
noAnimated	boolean	false	Animación del elemento mostado en el cambio de estado.

Truncate

Basic Example

Lorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisd

<Truncate text='Lorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisdLorem ipsum asd asd asd aslkd ajsdlk ajsidj askdj alskdj ausjd alksdj alsdj lausdj lkasdj alisd'
lines={3}
seeMore={false}
 />

API

Truncate Props

import { Truncate } from '@futurasit/components'

Nombre	Tipo	Valor por defecto	Descripción
width	String	'100%'	Ancho del contenido.
text	'String' \| 'Elemento HTML'		Contenido a mostrar.
styleText	object style	null	Estilo css para el contenido.
lines	number	5	Número de filas a mostrar.
seeMore	boolean	false	Mostar acción de mostrar/ocultar contenido.
textSeeMore	String	'See More'	Texto para la acción de mostrar contenido.
textSeeLess	String	'See Lees'	Texto para la acción de ocultar contenido.
styleSee	object style	null	Estilo css para la accion de mostrar/ocultar contenido.

Accordion

Basic Example

API

AccordionContainer Props

AccordionItem Props

AccordionTitle Props

AccordionBody Props

Badge

Basic Example

API

Badge Props

Button

Basic Example

API

Button Props

ActionButton

Basic Example

API

ActionButton Props

ActionButton

Basic Example

API

ActionButton Props

Card

Basic Example

API

CardWrapper

CardHeader

CardBody

CardFooter

DropDown

Basic Example

API

DropDown Props

DropDownTitle Props

DropDownMenu Props

DropDownItem Props

DropDownDivider Props

Form

Basic Example

Título Formulario

API

Form Props

FormTittle Props

FormGroup Props

InputLabel Props

Input Props

InputDescription Props

Checkbox Props

Modal

Basic Example

API

Modal Props

ModalHeader Props

ModalBody Props

ModalFooter Props

Progress

Basic Example

API

Progress Props

Range

Basic Example

API

RangeSlider Props

Spinners

Basic Example

API

SpinnerGrow, SpinnerBorder Props

Table

Basic Example

Color Default (light)

Color Primary

Color Success

Color Dark

API

Table Props

THead, TBody, Tr Props

Th, Td Props

Tags

Basic Example