Kit Digital USS

https://kitdigital.uss.cl
Admin
Kit Digital USS is a design system and UI component library designed to help build consistent,...
Tokens:21,658
Snippets:329
Trust Score:9.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Instalación de la librería

Source: https://kitdigital.uss.cl/desarrollo/componentes-react-intro

Comandos para instalar el paquete del Kit Digital USS React mediante gestores de paquetes.

```bash
yarn add @ussebastian/kitdigital-react@latest
# or
npm i @ussebastian/kitdigital-react@latest
```

--------------------------------

### Implementación de Landing Page

Source: https://kitdigital.uss.cl/desarrollo/ejemplos-landing-react

Ejemplo de importación y uso de componentes del Kit Digital para construir una página básica.

```javascript
import React from 'react';
import { 
  Header, 
  Hero, 
  Cards, 
  Banner, 
  Footer 
} from '@ussebastian/kitdigital-react';

function LandingPage() {
  return (
    <div>
      <Header />
      <Hero 
        title="Bienvenido a USS"
        subtitle="Universidad San Sebastián"
        variant="primary"
      />
      <Cards />
      <Banner 
        title="¿Necesitas más información?"
        variant="secondary"
      />
      <Footer />
    </div>
  );
}

export default LandingPage;
```

--------------------------------

### Instalar el paquete del Kit Digital

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Comandos para añadir la librería al proyecto utilizando gestores de paquetes.

```bash
npm install @ussebastian/kitdigital@latest
# or
yarn add @ussebastian/kitdigital@latest
```

--------------------------------

### Inicializar componentes interactivos

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Métodos para cargar la lógica de componentes interactivos mediante módulos ES o un bundle global.

```javascript
// Importar componente específico
import { Modal } from "@ussebastian/kitdigital/dist/components/esm/Modal.js";

// Inicializar
window.addEventListener("DOMContentLoaded", () => {
  const modalElements = document.querySelectorAll("[data-uss-modal]");
  modalElements.forEach(element => {
    const modalInstance = new Modal(element);
    modalInstance.mount();
  });
});
```

```html
<script src="https://unpkg.com/@ussebastian/kitdigital@latest/dist/js/main.js"></script>
```

--------------------------------

### Implementación de formulario con componentes del Kit

Source: https://kitdigital.uss.cl/desarrollo/ejemplos-forms-react

Ejemplo de un componente funcional que gestiona el estado del formulario y utiliza los componentes de entrada del Kit Digital USS.

```javascript
import React, { useState } from 'react';
import { 
  TextInput, 
  EmailInput, 
  SelectInput, 
  TextareaInput,
  Button,
  Card
} from '@ussebastian/kitdigital-react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <Card className="max-width-600 mx-auto p-32">
      <h2>Formulario de Contacto</h2>
      <form onSubmit={handleSubmit}>
        <TextInput
          label="Nombre completo"
          name="name"
          value={formData.name}
          onChange={handleChange}
          required
        />
        
        <EmailInput
          label="Correo electrónico"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
        
        <SelectInput
          label="Asunto"
          name="subject"
          value={formData.subject}
          onChange={handleChange}
          options={[
            { value: 'general', label: 'Consulta general' },
            { value: 'academic', label: 'Información académica' },
            { value: 'support', label: 'Soporte técnico' }
          ]}
        />
        
        <TextareaInput
          label="Mensaje"
          name="message"
          value={formData.message}
          onChange={handleChange}
          rows={5}
          required
        />
        
        <Button type="submit" variant="primary">
          Enviar mensaje
        </Button>
      </form>
    </Card>
  );
}

export default ContactForm;
```

--------------------------------

### Implementar componentes básicos

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Ejemplos de marcado HTML utilizando las clases CSS del kit para botones y tarjetas.

```html
<!-- Ejemplo de botón -->
<button class="uss-btn uss-btn--primary">
  Mi botón
</button>

<!-- Ejemplo de card -->
<div class="uss-card">
  <img src="imagen.jpg" class="uss-card__img" alt="Descripción">
  <div class="uss-card__body">
    <h3 class="uss-card__title">Título</h3>
    <p class="uss-card__text">Descripción del contenido</p>
  </div>
</div>
```

--------------------------------

### Importación del componente Tooltip

Source: https://kitdigital.uss.cl/desarrollo/componentes-tooltip-react

Importación necesaria para utilizar el componente Tooltip desde la librería de componentes de Kit Digital.

```javascript
import { Tooltip } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importación de estilos CSS

Source: https://kitdigital.uss.cl/desarrollo/ejemplos-landing-react

Línea necesaria para cargar los estilos globales del kit en la aplicación.

```css
import '@ussebastian/kitdigital-react/dist/css/main.css';
```

--------------------------------

### Aplicación de clases de margen y padding

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Ejemplos de uso de las clases base 'm-' y 'p-' con los valores definidos por el kit.

```html
<span class="p-24">padding</span>
<span class="p-0">padding</span>

<span class="m-160">margin</span>
<span class="m-56">margin</span>

<span class="p-24 m-16">padding + margin</span>
<span class="m-4 p-auto">margin + padding</span>
```

--------------------------------

### Estructura base HTML para Kit Digital USS

Source: https://kitdigital.uss.cl/desarrollo/ejemplos-forms

Plantilla HTML necesaria para inicializar el Kit Digital USS, incluyendo la carga de estilos CSS y scripts JS desde el CDN oficial.

```html
1<!DOCTYPE html>
2<html lang="es" style="height: 100%;">
3  <head>
4    <title>Ejemplo de Formulario - Kit Digital USS</title>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <link
8      rel="stylesheet"
9      href="https://unpkg.com/@ussebastian/kitdigital@latest/dist/css/main.css"
10    />
11  </head>
12  <body>
13    <!-- Inserta acá el código del formulario -->
14    <script
15      type="module"
16      src="https://unpkg.com/@ussebastian/kitdigital@latest/dist/js/main.js"
17    ></script>
18  </body>
19</html>
```

--------------------------------

### Implementación de estilo declarativo

Source: https://kitdigital.uss.cl/desarrollo/componentes-react-intro

Uso de un objeto de configuración para definir el contenido del componente de forma concisa.

```jsx
import { Card } from "@ussebastian/kitdigital-react";

<Card
  variant="simple"
  content={{
    img: {
      src: "/imagen.jpg",
      alt: "Descripción"
    },
    tag: {
      label: "Etiqueta",
      variant: "primary"
    },
    title: "Título del card",
    description: "Descripción del contenido",
    buttonCallToAction: {
      variant: "primary",
      label: "Acción",
      icon: "ri-arrow-right-line"
    }
  }}
/>
```

--------------------------------

### Importar estilos CSS

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Métodos para incluir los estilos base en archivos CSS o directamente en el HTML.

```css
@import url("@ussebastian/kitdigital/dist/css/main.css");
```

```html
<link rel="stylesheet" href="https://unpkg.com/@ussebastian/kitdigital@latest/dist/css/main.css">
```

--------------------------------

### Integrar funcionalidad JavaScript vía CDN

Source: https://kitdigital.uss.cl/desarrollo

Añade el script antes del cierre de la etiqueta <body> para habilitar componentes interactivos.

```html
<script
  crossorigin="anonymous"
  type="module"
  src="https://unpkg.com/@ussebastian/kitdigital@latest/dist/js/main.js"
></script>
```

--------------------------------

### Importación del componente Icon

Source: https://kitdigital.uss.cl/desarrollo/componentes-iconos-react

Importación necesaria para utilizar el componente Icon desde la librería del kit digital.

```javascript
import { Icon } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importar estilos CSS vía NPM

Source: https://kitdigital.uss.cl/desarrollo

Utiliza la directiva @import en el archivo principal de estilos del proyecto.

```css
@import "~@ussebastian/kitdigital/dist/css/main.css";
```

--------------------------------

### Alinear elementos individualmente

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para sobrescribir la alineación de un elemento específico dentro de un contenedor flex.

```html
1<div class="flex align-self-start">...</div>
2<div class="flex align-self-end">...</div>
3<div class="flex align-self-center">...</div>
4
5<div class="flex align-self-sm-baseline">...</div>
6<div class="flex align-self-lg-stretch">...</div>
```

--------------------------------

### Aplicación de clases de margen y padding direccionales

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Ejemplos de uso de variantes direccionales (t, r, b, l, x, y) para un control preciso del espaciado.

```html
<span class="pl-24">padding left</span>
<span class="px-20">padding left + right</span>

<span class="mb-auto">margin bottom</span>
<span class="my-56">margin top + bottom</span>

<span class="pt-80 mb-160">padding + margin</span>
<span class="my-56 px-20">margin + padding</span>
```

--------------------------------

### Importación del componente Form

Source: https://kitdigital.uss.cl/desarrollo/componentes-formularios-react

Importación necesaria para utilizar el componente Form desde la librería del kit digital.

```javascript
import { Form } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Integrar estilos CSS vía CDN

Source: https://kitdigital.uss.cl/desarrollo

Incluye la hoja de estilos en la etiqueta <head> del documento HTML.

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@ussebastian/kitdigital@latest/dist/css/main.css"
/>
```

--------------------------------

### Importación del componente Button

Source: https://kitdigital.uss.cl/desarrollo/componentes-buttons-react

Importación necesaria para utilizar el componente Button desde la librería del kit.

```javascript
import { Button } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importar funcionalidad JavaScript vía NPM

Source: https://kitdigital.uss.cl/desarrollo

Importa el módulo en el archivo principal de JavaScript para activar los componentes interactivos.

```javascript
import "@ussebastian/kitdigital/dist/js/main.js";
```

--------------------------------

### Componente <Form />

Source: https://kitdigital.uss.cl/desarrollo/componentes-formularios-react

El componente principal que encapsula un formulario. Acepta todos los atributos nativos de un elemento <form> de HTML.

```APIDOC
## <Form />

### Descripción
Componente contenedor para formularios. No gestiona validaciones, enfocándose exclusivamente en la presentación. Se recomienda utilizar junto con `<FormGroup/>`, `<FormGroupHelp/>` y `<FormLabel/>`.

### Props
- **className** (string) - Opcional - Clases CSS adicionales.
- **style** (object) - Opcional - Estilos en línea.
- **...props** (any) - Opcional - Acepta todos los atributos nativos del elemento <form>.

### Ejemplo de importación
```javascript
import { Form } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```
```

--------------------------------

### Implementar Tabs de forma independiente

Source: https://kitdigital.uss.cl/desarrollo/componentes-consumo

Importa el componente Tabs y monta las instancias encontradas en elementos con la clase uss-tab.

```javascript
import { Tabs } from "@ussebastian/kitdigital/dist/components/esm/Tabs.js";

window.addEventListener("DOMContentLoaded", () => {
  const tabElements = document.getElementsByClassName("uss-tab");
  if (tabElements.length > 0) {
    window.tabInstances = [];
    for (let i = 0; i < tabElements.length; i += 1) {
      window.tabInstances[i] = new Tab(tabElements[i]);
      window.tabInstances[i].mount();
    }
  }
});
```

--------------------------------

### Importación del componente Tag

Source: https://kitdigital.uss.cl/desarrollo/componentes-tags-react

Importación necesaria para utilizar el componente Tag desde la librería de componentes.

```javascript
import { Tag } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importación del componente Tabs

Source: https://kitdigital.uss.cl/desarrollo/componentes-tabs-react

Importación necesaria de los subcomponentes para implementar la estructura de pestañas.

```javascript
import {
  Tabs, TabList, Tab, TabPanel
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Activación del Modal mediante HTML

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal

Utiliza el atributo data-uss-modal-open-on-click para abrir un modal específico mediante un botón.

```html
<button class="uss-btn uss-btn--primary" data-uss-modal-open-on-click="modal-1">
  Abrir modal
</button>
```

--------------------------------

### Importación de componentes Modal

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal-react

Importación necesaria de los subcomponentes del modal desde la librería del kit digital.

```javascript
import {
  ModalComponent,
  ModalBody,
  ModalFooter,
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Definir columnas con offset

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Ejemplo de aplicación de clases de columna y offset para posicionar elementos dentro de una fila.

```html
<div class="col-2 offset-2">
  <div>...</div>
</div>
```

--------------------------------

### Implementar Modal de forma independiente

Source: https://kitdigital.uss.cl/desarrollo/componentes-consumo

Importa el componente Modal y monta la instancia sobre el elemento seleccionado.

```javascript
import { Modal } from "@ussebastian/kitdigital/dist/components/esm/Modal.js";
window.addEventListener("DOMContentLoaded", () => {
  const modalElements = document.getElementsByClassName("uss-tab");
  const modalInstance = new ComponentModal(modalElements[0]);
  modalInstance.mount();
});
```

--------------------------------

### Button Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-buttons-react

El componente Button se renderiza como <button> por defecto o como <a> si se proporciona la propiedad href. Acepta atributos estándar de HTML como disabled, target, entre otros.

```APIDOC
## Component: Button

### Description
El componente Button permite la creación de botones de interacción o enlaces de navegación. Se recomienda usar como enlace solo para navegación entre páginas.

### Import
```javascript
import { Button } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

### Props
- **href** (string) - Opcional - Si se proporciona, el componente se renderiza como un elemento <a>.
- **disabled** (boolean) - Opcional - Deshabilita el botón.
- **target** (string) - Opcional - Define el destino del enlace (ej. _blank).
- **...props** (any) - Opcional - Acepta atributos adicionales de los elementos <button> o <a>.

### Usage Example
```jsx
<Button>Botón Primario</Button>
<Button href="/home">Enlace de navegación</Button>
```
```

--------------------------------

### Definir dirección de flexbox

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para establecer la dirección de los elementos dentro de un contenedor flex.

```html
1<div class="flex flex-row">...</div>
2<div class="flex flex-column">...</div>
3<div class="flex flex-row-reverse">...</div>
4<div class="flex flex-column-reverse">...</div>
```

--------------------------------

### Controlar el ajuste de elementos flex

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para gestionar el comportamiento de envoltura (wrap) de los elementos, incluyendo variantes por punto de interrupción.

```html
1<div class="flex flex-wrap">...</div>
2<div class="flex flex-nowrap">...</div>
3<div class="flex flex-wrap-reverse">...</div>
4
5<div class="flex flex-md-wrap">...</div>
6<div class="flex flex-sm-nowrap">...</div>
7<div class="flex flex-xxl-wrap-reverse">...</div>
```

--------------------------------

### Import Footer Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-footer-react

Import the Footer component from the library package.

```javascript
import { Footer } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Tooltip Component Usage

Source: https://kitdigital.uss.cl/desarrollo/componentes-tooltip-react

Basic implementation of the Tooltip component in a React application.

```APIDOC
## Tooltip Component

### Description
The `<Tooltip/>` component is a wrapper that displays a tooltip when the user hovers over or focuses on the wrapped element.

### Import
```javascript
import { Tooltip } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

### Usage Notes
- Do not place the `<Tooltip>` inside a `<p>` tag, as it contains a `<div>` which is invalid HTML inside a paragraph. Use a `<span>` instead.
- Avoid placing interactive elements like buttons or links inside the tooltip, as this may hinder keyboard accessibility.

### Supported Positions
- top
- left
- right
- bottom
```

--------------------------------

### Importación del componente Link

Source: https://kitdigital.uss.cl/desarrollo/componentes-link-react

Importación necesaria para utilizar el componente Link desde la librería de componentes de React.

```javascript
import { Link } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Control del Modal mediante JavaScript

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal

Accede a la instancia del modal a través del objeto global componentModalInstances para abrir o cerrar programáticamente.

```javascript
// open modal
window.componentModalInstances["modal-1"].openModal();

// close modal
window.componentModalInstances["modal-1"].closeModal();
```

--------------------------------

### Importación del componente Hero

Source: https://kitdigital.uss.cl/desarrollo/componentes-hero-react

Importación necesaria para utilizar el componente Hero desde la librería de componentes de React.

```javascript
import { Hero } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Implementación de estilo imperativo

Source: https://kitdigital.uss.cl/desarrollo/componentes-react-intro

Uso de componentes anidados para mayor flexibilidad y control granular sobre la estructura.

```jsx
import { Card, Tag, Button, Icon } from "@ussebastian/kitdigital-react";

<Card>
  <Card.Img src="/imagen.jpg" alt="Descripción" />
  <Card.Body>
    <Tag variant="primary">Etiqueta</Tag>
    <h3>Título del card</h3>
    <p>Descripción del contenido</p>
    <Button variant="primary">
      Acción
      <Icon icon="ri-arrow-right-line" />
    </Button>
  </Card.Body>
</Card>
```

--------------------------------

### Import Pagination Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-pagination-react

Required import statement to use the Pagination component from the Kit BaseReact library.

```javascript
import { Pagination } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importación del componente Accordion

Source: https://kitdigital.uss.cl/desarrollo/componentes-accordion-react

Importación necesaria de los componentes Accordion y AccordionItem desde la librería del Kit Digital USS.

```javascript
import {
  Accordion,
  AccordionItem,
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### ModalComponent

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal-react

Componente principal que encapsula la lógica del modal y gestiona su visibilidad mediante estado controlado.

```APIDOC
## ModalComponent

### Descripción
Componente principal que encapsula `<ModalBody>` y `<ModalFooter>`. Es un componente controlado que requiere el estado de visibilidad y una función para modificarlo.

### Importación
`import { ModalComponent, ModalBody, ModalFooter } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";`

### Props
- **isOpen** (boolean) - Requerido - Estado que controla si el modal está visible.
- **setOpen** (function) - Requerido - Función para actualizar el estado de visibilidad del modal.
```

--------------------------------

### Importación de componentes Carousel

Source: https://kitdigital.uss.cl/desarrollo/componentes-carousel-react

Importación necesaria de los componentes de carrusel desde el paquete del kit digital.

```javascript
import {
  CarouselHero,
  CarouselCards,
  CarouselContent,
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Clases de ancho de borde

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-sombras-y-formas

Lista de las clases CSS disponibles para definir el grosor de los bordes en los componentes.

```text
1. border-0 (0px)
2. border (1px)
3. border-2 (2px)
4. border-4 (4px)
```

--------------------------------

### Importar AlertMessage

Source: https://kitdigital.uss.cl/desarrollo/componentes-alert-message-react

Importación necesaria para utilizar el componente AlertMessage en proyectos React.

```javascript
import { AlertMessage } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importing Stepper Components

Source: https://kitdigital.uss.cl/desarrollo/componentes-stepper-react

Required imports for using the Stepper and StepperCircle components from the library.

```javascript
import {
  Stepper,
  StepperCircle,
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Establecer orden de elementos

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para modificar el orden visual de los elementos dentro de un contenedor flex.

```html
1<div class="flex order-11">...</div>
2<div class="flex order-6">...</div>
3<div class="flex order-9">...</div>
4<div class="flex order-1">...</div>
5<div class="flex order-2">...</div>
6
7<div class="flex order-md-3">...</div>
8<div class="flex order-sm-4">...</div>
9<div class="flex order-lg-12">...</div>
```

--------------------------------

### Import Header Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-header-react

Import the Header component from the Kit Digital React library distribution.

```javascript
import { Header } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```
Tokens:
Raw