JogoTech is a versatile UI component library aimed at simplifying web application development. It provides reusable, customizable, and responsive components, allowing developers to create consistent and beautiful user interfaces effortlessly.

Table of Contents

• Features
• Installation
• Basic Usage
• Components
  • Button
  • Grid

Features

• Reusable Components: Includes components that are commonly used across different projects.
• Customizable Styling: Easily customizable to fit your application's design.
• Responsive Layouts: Supports mobile, tablet, and desktop with ease.
• Well-Documented API: Each component is well-documented with props and examples for quick integration.

Installation

Prerequisites

• Node.js >= 14.x
• npm >= 6.x or yarn >= 1.22.x

Install with npm

To install the JogoTech library, run the following command:

npm install jogotech

Install with yarn

yarn add jogotech

Basic Usage

Here’s a basic example of how to use one of the main components, the Button.

<template>
  <Button type="primary" @click="handleClick">Click Me</Button>
</template>

<script setup>
  function handleClick() {
    alert('Button clicked!');
  }
</script>

Components

Button

The Button component is a flexible, customizable button designed to fit a variety of use cases.

• Props:
  • type (string): Defines the button style. Options are primary, secondary, etc.
  • @click (event): Event triggered when the button is clicked.

Example usage:

<Button type="primary" @click="handleSubmit">Submit</Button>

Grid System

The Grid component is a versatile and responsive grid system designed to simplify the creation of flexible layouts. It leverages CSS Grid under the hood and allows you to define the number of columns and gaps dynamically, adjusting seamlessly for mobile, tablet, and desktop screens.

• Props:
  • columns (number): Specifies the number of grid columns.
  • gap (string): Defines the space between grid items (e.g., 10px, 1rem).
  • children (slot): Grid items to display within the grid.

Example usage:

<template>
  <Grid :columns="3" gap="20px">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Grid>
</template>