README

Admix 组件

Admix 组件是基于Blade UI Kit的一组组件，使用Boostrap而不是Tailwind。我们的布局基础是Tabler。

要求

• Laravel 9
• PHP 8.1

功能

• 按钮
• 卡片
• 表单

文档

• 入门
• Blade 组件

入门

通过运行以下命令安装包

composer require agenciafmd/admix-components

Blade 组件

我们有一些可以在项目中使用的组件。

按钮

卡片

表单

默认情况下，我们使用 livewire 处理表单和输入，并且验证已经包含在内。

输入

基本用法

<x-form.input name="email"/>

这将输出以下HTML

<input name="email" type="text" id="name" wire:model.lazy="email" class="form-control">

接受属性

• type : 输入类型。例如 text，email
• label : 输入的标签
• wire:model : 输入的 wire 模型
• hint : 输入的辅助文本
• value : 当不使用 wire:model 时输入的值

完整组件

<x-form.input type="email"
              name="email"
              :hint="__('Do not use a personal account')"
              :label="__('E-mail')"
/>

输出

<label for="email" class="form-label">E-mail</label>
<input name="email" type="email" id="email" wire:model.lazy="email" class="form-control">
<small class="form-hint">Do not use a personal account</small>

密码

基本用法

<x-form.password name="password"
                 :label="__('Password')"
/>

这将输出以下HTML

<label for="password" class="form-label">Password</label>
<div class="input-group input-group-flat " x-data="{ isPassword: true }">
    <input name="password" :type="isPassword ? 'password' : 'text'" id="password" wire:model.lazy="password"
           class="form-control" type="password">
    <span class="input-group-text">
        <a href="#" @click="isPassword = !isPassword" :class="isPassword ? 'd-block' : 'd-none'"
           class="link-secondary d-block" data-bs-toggle="tooltip" aria-label="Mostrar senha"
           data-bs-original-title="Mostrar senha">
            <!-- Download SVG icon from http://tabler-icons.io/i/eye -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                 stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
                <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
            </svg>
        </a>
        <a href="#" @click="isPassword = !isPassword" :class="!isPassword ? 'd-block' : 'd-none'"
           class="link-secondary d-none" data-bs-toggle="tooltip" aria-label="Ocultar senha"
           data-bs-original-title="Ocultar senha">
            <!-- Download SVG icon from http://tabler-icons.io/i/eye-off -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                 stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"></path>
                <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"></path>
                <path d="M3 3l18 18"></path>
            </svg>
        </a>
    </span>
</div>

复选框

基本用法

<x-form.checkbox name="remember"
                 :label="__('Remember me')"
/>

这将输出以下HTML

<label class="form-check">
    <input name="remember" type="checkbox" id="remember" wire:model.lazy="remember" class="form-check-input">
    <span class="form-check-label">Remember me</span>
</label>

我们可以自定义复选框以像开关一样操作

<x-form.checkbox name="can_notify"
                 class="form-switch form-switch-lg"
                 :label-on="__('Yes')"
                 :label-off="__('No')"
/>

选择框

基本用法

<x-form.select name="user.role_id"
               :label="__('admix::fields.role_id')"
               :options="[1 => 'Administrator', 2 => 'Editor', 3 => 'User']"
               :placeholder="__('Choose a role')"
/>

这将输出以下HTML

<label for="user.role_id" class="form-label">
    Grupo
</label>
<select name="user.role_id" id="user.role_id" wire:model.lazy="user.role_id" class="form-select">
    <option value="">Choose a role</option>
    <option value="1">Administrator</option>
    <option value="2">Editor</option>
    <option value="3">User</option>
</select>

许可证

Admix 组件是开源软件，许可协议为MIT许可。