Carregando documentação...

Instalação

Tudo que você precisa para começar a usar o ozi-ui no seu projeto.

Requisitos

Requisito	Versão mínima
jQuery	3.6+

Para mais detalhes de compatibilidade com frameworks e UI → [ver Compatibilidade]

Método 1 — Composer + Laravel

Instalação recomendada para projetos Laravel. Assets publicados automaticamente.

1. Instale o oziCore

composer require ozi-ui/core:v0.19.3-alpha

2. Publique os assets

php artisan vendor:publish --tag=ozi-ui

3. Configure o layout

Adicione no seu layout principal — ex: layouts/app.blade.php:

<head>
    @oziStyles
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    @oziScripts
</body>

4. Verifique a instalação

php artisan ozi:check

Saída esperada:

✔ oziCore    v1.2.0  OK
✔ oziSelect  v4.3.1  OK
✔ oziEditor  v1.1.0  OK

Dica: comece pelo oziLoadData para listagens ou pelo oziSelect para campos avançados.

Método 2 — CDN

Sem instalação — ideal para protótipos, projetos simples ou qualquer stack.

<head>
    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

    <!-- ozi-ui core -->
    <link rel="stylesheet" href="https://cdn.oziui.com/v0.19.3/ozi-core.css">
    <script src="https://cdn.oziui.com/v0.19.3/ozi-core.js"></script>
</head>

Carregue apenas os plugins que precisar:

<!-- oziSelect -->
<link rel="stylesheet" href="https://cdn.oziui.com/v0.19.3/ozi-select/css/ozi-select.css">
<script src="https://cdn.oziui.com/v0.19.3/ozi-select/js/ozi-select.js"></script>

<!-- oziLoadData -->
<script src="https://cdn.oziui.com/v0.19.3/ozi-loaddata/js/ozi-loaddata.js"></script>

<!-- oziEditor -->
<link rel="stylesheet" href="https://cdn.oziui.com/v0.19.3/ozi-editor/css/ozi-editor.css">
<script src="https://cdn.oziui.com/v0.19.3/ozi-editor/js/ozi-editor.js"></script>

Método 3 — Uso programático

Controle total sobre quais assets são carregados e como. Funciona com Laravel, PHP puro ou qualquer backend.

Via diretivas Blade

{{-- Tudo --}}
@oziStyles
@oziScripts

{{-- Só alguns plugins --}}
@oziStyles(['select', 'editor'])
@oziScripts(['loaddata', 'select', 'editor'])

{{-- Grupo pré-definido --}}
@oziStyles(['forms'])
@oziScripts(['forms'])

{{-- Grupo full = tudo --}}
@oziStyles(['full'])
@oziScripts(['full'])

Via PHP puro 8.2

<?php
$ozi = new \OziUI\Core\OziAssets();

// Tudo
echo $ozi->styles();
echo $ozi->scripts();

// Seletivo
echo $ozi->styles(['select', 'editor']);
echo $ozi->scripts(['loaddata', 'select', 'editor']);

// Grupo pré-definido
echo $ozi->scripts(['forms']);

// Base e versão customizadas
echo $ozi->setBase('/assets/ozi/')->setVersion('1.0.0')->scripts();

Método 4 — Integração Manual

Via PHP puro 8.1 versões anteriores

Instale de forma manual, faça donwload: → [acesse GitHub] De forma manual aceita mais antigas do PHP até do laravel

HTML Gerado

Para quem prefere o controle total — sem composer, sem diretivas, só o HTML na mão:

<!-- Adicione na pasta /public -->

<!-- HEAD -->
<link href="/plugins/ozi-ui/ozi-core.css" rel="stylesheet">

<!-- FOOTER -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="/plugins/ozi-ui/ozi-core.js"></script>

HTML gerado

<!-- @oziStyles(['select', 'editor']) -->
<link rel="stylesheet" href="/plugins/ozi-ui/ozi-select/css/ozi-select.css?v=0.19.3">
<link rel="stylesheet" href="/plugins/ozi-ui/ozi-editor/css/ozi-editor.css?v=0.19.3">

<!-- @oziScripts(['loaddata', 'select', 'editor']) -->
<script src="/plugins/ozi-ui/ozi-loaddata/js/ozi-loaddata.js?v=0.19.3"></script>
<script src="/plugins/ozi-ui/ozi-select/js/ozi-select.js?v=0.19.3"></script>
<script src="/plugins/ozi-ui/ozi-editor/js/ozi-editor.js?v=0.19.3"></script>

Adicione os plugins que precisar:

<!-- HEAD — CSS dos plugins -->
<link href="./public/plugins/ozi-ui/ozi-select/css/ozi-select.css" rel="stylesheet">
<link href="./public/plugins/ozi-ui/ozi-editor/css/ozi-editor.css" rel="stylesheet">

<!-- FOOTER — jQuery primeiro, plugins depois -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="./public/plugins/ozi-ui/ozi-core.js"></script>
<script src="./public/plugins/ozi-ui/ozi-loaddata/js/ozi-loaddata.js"></script>
<script src="./public/plugins/ozi-ui/ozi-select/js/ozi-select.js"></script>
<script src="./public/plugins/ozi-ui/ozi-editor/js/ozi-editor.js"></script>

oziCore

→