northeastern-web/blade-components

此包已被弃用且不再维护。作者建议使用 northeastern-web/kernl-ui-blade 包代替。

东北大学网站 Blade 组件包

维护者

详细信息

github.com/northeastern-web/kernl-ui-blade

主页

源代码

问题

安装: 400

依赖项: 0

建议者: 0

安全性: 0

星标: 5

关注者: 8

分支: 0

开放问题: 4

语言:Blade

v1.0.0-alpha.0 2022-04-05 22:13 UTC

Requires

Requires (Dev)

MIT 302880ee4130e21adbffb1774a389ab45a1ef380

supportnortheastern-web

This package is auto-updated.

Last update: 2022-04-06 18:15:12 UTC

README

东北大学网站 Blade 组件包

先决条件

为了使用此包

安装

您可以通过 composer 安装此包

composer require northeastern-web/kernl-ui-blade

注意：为了加载 kernl-ui blade 包所需的脚本，您需要在主模板的关闭 </body> 标签之前包含这些脚本。示例

Blade 模板

    {{-- Include the scripts needed for the kernl-ui blade package --}}
    @include('kernl-ui::scripts')

WordPress 示例（通过 index.php）

<?php 
    if (!is_admin()) { 
        // Example using the Sage 10 package 
        // and Laravel to render a blade template for 'scripts'
        echo \Roots\view('kernl-ui::scripts')->render(); 
    } 
?>

注意：在安装包之前，您可能需要将以下内容添加到您的 composer.json 文件中。

    "minimum-stability": "dev",
    "prefer-stable": true

如果您的项目使用 PurgeCss，请在您的 tailwind.config.js 中合并来自 @northeaster-web/kernl-ui 包的默认 PurgeCss 内容

// tailwind.config.js
const defaultConfig = require("@northeastern-web/kernl-ui/defaultConfig");

module.exports = {
    purge: {
        content: [
            ...defaultConfig.purge.content,
            // Your project specific content...
        ],
    },
    // Other stuff...
};

用法

Laravel 应用程序

为了在 Laravel 应用程序中使用组件，Service Provider 应该会自动加载，无需额外配置。

Tighten Jigsaw

为了在 tightenco/jigsaw 中使用组件，在 Jigsaw 的 beforeBuild 事件中加载 Northeastern\Blade\JigsawServiceProvider 类

// bootstrap.php

use Northeastern\Blade\JigsawServiceProvider;
use TightenCo\Jigsaw\Jigsaw;

$events->beforeBuild(function (Jigsaw $jigsaw) {
    (new JigsawServiceProvider($jigsaw->app))->boot();
});

组件

本地头部

要使用本地头部组件，请将以下标记添加到您的 Blade 模板中。

<x-kernl-local-header
    :currentPath="$currentPath"
    :links="$links"
    :supportNav="$supportNav"
    :dark="$dark"
    :siteName="$siteName"
    :siteHome="$siteHome"
    :logoDark="$logoDark"
    :logoLight="$logoLight"
    :menuStyle="$menuStyle"
    :search="$search"
    :searchName="$searchName"
    :action="$action"
    :megaMenuCta="$megaMenuCta"
    :megaMenuAlert="$megaMenuAlert"
    :megaMenuCopy="$megaMenuCopy"
>
    {{-- OPTIONAL SLOTS --}}
        <x-slot name="logo">
            {{-- Insert SVG logo here with class="w-full" applied --}}
            {{-- NOTE: This logo will only be used if `logoDark`/`logoLight` are not provided. --}}
        </x-slot>
        <x-slot name="afterLinksMobile">
            {{-- Insert any additional elements that should be included after the links in the mobile menu (logout forms, etc.). This slot it optional. --}}
        </x-slot>
        <x-slot name="afterLinksDesktop">
            {{-- Insert any additional elements that should be included after the links in the desktop menu (logout forms, search modal, etc.).--}}
        </x-slot>
    {{-- / OPTIONAL SLOTS --}}
</x-kernl-local-header>

属性

网站基本信息

  • current-path（可选）- 用于显示每个链接的激活状态。传递当前页面的相对路径（/about/staff）。

  • siteName - 提供您站点的名称。例如：科学学院。此值将用于填充各种 alt 和 name 标签，以用于无障碍性。

  • siteHome - 提供您站点的首页网址。例如：https://www.northeastern.edu/graduate。如果没有提供 siteHome，则默认为 '/'。

  • logoDark - 用于默认、浅色主题的您的站点标志的 SVG。默认为 ITS Web Solutions 标志。

  • logoLight - 如果使用深色主题，则使用的您的站点标志的 SVG。默认为 ITS Web Solutions 标志。

菜单项
  • links（可选）- 头部导航部分的链接数组。每个链接可以有一个children键，它是一个更链接的数组。这些链接将在父链接下以下拉菜单的形式显示。示例
    $links = [
    [
        'label' => 'Our Programs',
        'url' => '/programs',
        // The `match` key is used to determine if top-level links should have the active state show. Uses Laravel's Str::is() helper under the hood, so wildcards or arrays of possible matches are allowed. If no active state should be shown, omit this key.
        'match' => '/programs*',
    ],
    [
        'label' => 'About',
        'url' => '/about',
        'match' => '/about*',
        'children' => [
            [
                'label' => 'Careers',
                'url' => '/about/careers',
            ],
            [
                'label' => 'Staff',
                'url' => '/about/staff',
            ],
        ],
    ],
];
  • supportNav - 头部支持导航部分的链接数组。此数组应与links属性中的格式完全一致。
菜单选项

  • dark（可选）- 将颜色方案设置为深色。默认为false。如果使用深色模式，您需要向logoLight属性提供浅色徽标，或者在logo的x-slot中使用浅色徽标。

  • menuStyle - 将两个值之一传递到该值：'standard'或'mega'。默认为'standard'。

搜索选项
  • action（可选）- 搜索表单应提交GET请求的URL。输入值将作为表单参数提交。注意，如果没有提供action，即使未将search属性设置为false，搜索也不会在您的网站上显示。
  • search - 将搜索选项添加到您的本地头部。默认为true。设置为false以从本地头部中删除搜索功能。
  • searchName - 这将设置搜索表单输入的name值。默认为"search"，但根据您的网站可能不同。例如，在WordPress网站上使用Relevanssi插件时，searchName应设置为's'。
菜单选项
  • megaMenuCta - 如果您选择menuStyle为'mega'，则可以向每个菜单项的页脚添加一个CTA。它应该这样格式化
    $megaMenuCta = [
        "title" => "Your Link Title",
        "url" => "https://yourlinkurl.com",
        "target" => "_blank"
    ]

  • megaMenuAlert - 这是一个可选的字符串，它将在CTA标题旁边放置一个徽章。

  • megaMenuCopy - 这是一个可选的字符串，它允许您为CTA编写一些关于其的文本以提供上下文。

手风琴

要使用手风琴组件，请将以下标记添加到您的Blade模板中。

<x-kernl-accordion.base label="Leadership roles accordion" default-section="accordion-item-1">
    <x-kernl-accordion.item title="Accordion Item 1 Title" id="accordion-item-1">
        Accordion Item 1 Content
    </x-kernl-accordion.item>
    <x-kernl-accordion.item title="Accordion Item 2 Title" id="accordion-item-2">
        Accordion Item 2 Content
    </x-kernl-accordion.item>
</x-kernl-accordion.base>

或者，您可以使用x-kernl-accordion.with-left-icon组件以稍有不同的设计。

<x-kernl-accordion.base label="Leadership roles accordion" default-section="accordion-item-1">
    <x-kernl-accordion.with-left-icon title="Accordion Item 1 Title" id="accordion-item-`">
        Accordion Item 1 Content
    </x-kernl-accordion.with-left-icon>
    <x-kernl-accordion.item title="Accordion Item 2 Title" id="accordion-item-2">
        Accordion Item 2 Content
    </x-kernl-accordion.item>
</x-kernl-accordion.base>

x-kernl-accordion.base 属性

  • label = 手风琴ul元素的aria-label
  • default-section（可选）= 应默认打开的手风琴项的id

x-kernl-accordion.item/x-kernl-accordion.with-left-icon 属性

  • title - 应显示在手风琴按钮上的标题
  • id（可选）- 应分配给手风琴的ID。这应与传递给基本手风琴组件的default-section属性匹配，以确定应默认打开的手风琴项。

警报

要使用警报组件，请将以下标记添加到您的Blade模板中。

<x-kernl-alert.contained
    label="COVID warning"
    class="absolute bottom-0 inset-x-0 py-4"
    :closable="false"
    :remember="true"
>
    <p>Questions about campus opening and COVID-19 testing? Go here to get the latest...</p>
</x-kernl-alert.contained>

或者，您可以使用x-kernl-alert.full-width组件以稍有不同的设计。

<x-kernl-alert.full-width
    label="COVID warning"
    class="absolute bottom-0 inset-x-0"
    :closable="false"
    :remember="true"
>
    <p>Questions about campus opening and COVID-19 testing? Go here to get the latest...</p>
</x-kernl-alert.full-width>

x-kernl-alert.container 和 x-kernl-alert.full-width 属性

  • label - 用于aria-label和“记住”功能。如果使用“记住”功能，则应在整个网站上保持唯一。
  • closeable（可选）- 如果为true，则显示关闭按钮。如果为false，则不显示关闭按钮。默认为true。
  • remember（可选）- 如果为true，组件将使用localStorage记住用户何时关闭了警告，并且不再显示它。

您添加到组件的任何附加类或属性都将传递。

横幅

带偏移卡片

要使用带偏移卡片的横幅组件，请将以下标记添加到您的Blade模板中。

<x-kernl-banners.with-offset-card
    background-url=""
>
    {{--Card content goes here--}}
</x-kernl-banners.with-offset-card>

x-kernl-banners.with-offset-card 属性

  • background-url - 要应用的后台图片的URL。

底部标题

要使用底部标题横幅组件，请将以下标记添加到您的Blade模板中。

<x-kernl-banners.bottom-title
    background-url=""
    title=""
/>

x-kernl-banners.bottom-title 属性

  • background-url - 要应用的后台图片的URL。
  • title - 要展示的标题。

按钮

要使用实心按钮和轮廓按钮组件，请将以下标记添加到您的Blade模板中。

<x-kernl-button.solid color="dark">
    Button Text
</x-kernl-button.solid>

<!-- or -->

<x-kernl-button.outline color="dark">
    Button Text
</x-kernl-button.outline>

默认情况下，按钮组件将渲染一个button元素。如果您需要一个anchor元素，只需包含href属性。

您添加到组件的任何附加类或属性都将传递。

<x-kernl-button.solid color="light" class="rounded-full" @click="doSomething">
    Button
</x-kernl-button.solid>

x-kernl-button.solid 和 x-kernl-button.outline 属性

  • color - 按钮应显示的颜色。选项：dark、light、medium-gray、light-gray、red、blue 和 green。
  • size - （可选）确定按钮是否比默认尺寸更小或更大。选项：small 和 large。
  • href - （可选）确定按钮是否应渲染为锚标签以及锚点应链接到哪里。

轮播

基本和基本幻灯片

要使用基本幻灯片和基本幻灯片组件，请将以下标记添加到您的Blade模板中。

<x-kernl-carousel.base>
    <x-kernl-carousel.base.slide
        :index="0"
        background-classes="text-white bg-red-800"
    >
        Example carousel slide
    <x-kernl-carousel.base.slide
        :index="1"
        background-classes="text-white bg-blue-800 bg-cover bg-no-repeat bg-center"
        slot-classes="max-w-6xl"
        style="background-image: url('...background-image-url')"
    >
        Example carousel slide with background image
    </x-kernl-carousel.base.slide>
    <!-- More slides -->
</x-kernl-carousel.base>

x-kernl-carousel.base 属性

  • delay - （可选）幻灯片旋转的延迟（以毫秒为单位）。默认值为5000。

x-kernl-carousel.base.slide 属性

  • index - 幻灯片的索引。每个幻灯片的索引应递增1，从0开始。
  • background-classes - （可选）您想要应用到外部元素上的任何类。
  • slot-classes - （可选）您想要应用到slot周围的元素上的任何类。

您添加到基本幻灯片组件（style等）的任何附加属性，都将传递到背景元素。

分割和分割幻灯片

要使用Split Carousel和Split Slide组件，请将以下标记添加到您的Blade模板中。

<x-kernl-carousel.split height-classes="h-192 md:h-128 lg:h-96">
    <x-kernl-carousel.split.slide :index="0" class="h-96 md:h-128 lg:h-96">
        <div class="w-full flex items-center px-8 py-20 bg-black md:w-1/2 lg:w-2/3 lg:px-16">
            <div>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo doloremque culpa iure cumque voluptatum! Iure provident eligendi ex. Quidem atque commodi vero facilis totam maxime alias, cum quod voluptate nulla!</p>
            </div>
        </div>
        <img class="h-96 md:h-128 lg:h-96 w-full object-cover md:w-1/2 lg:w-1/3" src="...image-url">
    </x-kernl-carousel.split.slide>
    <!-- More slides -->
</x-kernl-carousel.split>

x-kernl-carousel.split 属性

  • height-classes - 设置整个轮播高度的类。当幻灯片堆叠时（移动端），应该是每个幻灯片高度的两倍。
  • delay - （可选）幻灯片旋转的延迟（以毫秒为单位）。默认值为5000。

x-kernl-carousel.split.slide 属性

  • index - 幻灯片的索引。 每个幻灯片的索引应增加1，从0开始。
  • class - 您希望应用到槽周围元素上的任何类。这应用于传递高度类。

您添加到Split Slide组件中的任何附加属性（如style等），都将传递到背景元素。

加载器

要使用加载器组件（亮色或暗色），请将以下标记添加到您的Blade模板中。

亮色

<div x-data="{ busy: true|false }" class="relative" >
    {{-- Some other content --}}
    <x-kernl-loaders.dark
        x-show="busy"
    />
</div>

x-kernl-loaders.light 属性

  • x-show - （可选）根据Alpine.js属性显示/隐藏加载器

暗色

<div x-data="{ busy: true|false }" class="relative" >
    {{-- Some other content --}}
    <x-kernl-loaders.light
        x-show="busy"
    />
</div>

x-kernl-loaders.dark 属性

  • x-show - （可选）根据Alpine.js属性显示/隐藏加载器

标签

实心

要使用Solid Tag组件，请将以下标记添加到您的Blade模板中。

<x-kernl-tags.solid
    color="black|white|red|medium-gray|light-gray|blue|green|yellow"
    :pill="true|false"
    :uppercase="true|false"
>
    {{-- Content here --}}
</x-kernl-tags.solid>

x-kernl-tags.solid 属性

  • color - 文本/背景颜色。默认为dark
  • pill - （可选）使角落圆润，呈现药丸状外观。默认为false
  • uppercase - （可选）大写内容。默认为false

轮廓

要使用Outline Tag组件，请将以下标记添加到您的Blade模板中。

<x-kernl-tags.outline
    color="black|white|red|medium-gray|light-gray|blue|green|yellow"
    :pill="true|false"
    :uppercase="true|false"
>
    {{-- Content here --}}
</x-kernl-tags.outline>

x-kernl-tags.outline 属性

  • color - 文本/边框颜色。默认为dark
  • pill - （可选）使角落圆润，呈现药丸状外观。默认为false
  • uppercase - （可选）大写内容。默认为false

模态框

基本模态框

要使用基本模态框组件，请将以下标记添加到您的Blade模板中。模态框可以通过使用NUModals.open和NUModals.close方法在任何页面上触发。

<x-kernl-modals.base
    id="unique-modal-id"
    :closeable="true|false"
    :close-on-click-outside="true|false"
    :close-on-escape-key="true|false"
>
    {{-- Content here --}}
</x-kernl-modals.base>

<button x-data x-on:click="NUModals.open('unique-modal-id')">Open Modal</button>
<button x-data x-on:click="NUModals.close('unique-modal-id')">Close Modal</button>

x-kernl-modals.base 属性

  • id - 模态框的ID。在整个应用程序中必须是唯一的。此ID可以与window.NUModals方法一起使用
  • closeable - （可选）在右上角添加关闭按钮。默认为true
  • close-on-click-outside - （可选）当点击模态框外部时关闭。默认为true
  • close-on-escape-key - （可选）当按下Esc键时关闭。默认为true

页脚

本地

要使用本地页脚组件，请将以下标记添加到您的 Blade 模板中。

<x-kernl-footers.local
    :links="$links"
    logo-url=""
    facebook-url=""
    youtube-url=""
    instagram-url=""
    snapchat-url=""
    linkedin-url=""
    twitter-url=""
>
    <x-slot name="logo">
        {{-- Insert SVG logo here --}}
    </x-slot>
    <x-slot name="address">
        {{-- Insert address here --}}
    </x-slot>
</x-kernl-footers.local>

属性

  • links = 页脚导航部分的标题和链接数组。每个标题都可以有一个 children 键，它是一个包含更多标题/链接的数组。这些标题/链接将在父标题下方显示。示例
$links = [
    [
        'text' => 'About',
        'href' => '/about', // (optional)
        'children' => [
            [
                'text' => 'Careers',
                'href' => '/about/careers',
            ],
            [
                'text' => 'Staff',
                'href' => '/about/staff',
            ],
        ],
    ],
    // ... More links
];
  • logo-url - (可选) 页脚标志的 URL。
  • facebook-url - (可选) 页脚的 Facebook URL。添加 URL 将显示相应的社交网络图标。
  • youtube-url - (可选) 页脚的 YouTube URL。添加 URL 将显示相应的社交网络图标。
  • linkedin-url - (可选) 页脚的 LinkedIn URL。添加 URL 将显示相应的社交网络图标。
  • snapchat-url - (可选) 页脚的 Snapchat URL。添加 URL 将显示相应的社交网络图标。
  • twitter-url - (可选) 页脚的 Twitter URL。添加 URL 将显示相应的社交网络图标。
  • instagram-url - (可选) 页脚的 Instagram URL。添加 URL 将显示相应的社交网络图标。

预页脚

要使用预页脚组件，请使用以下标记到您的 Blade 模板中。注意，对于多列布局，需要将 <x-kernl-footers.pre-footer.column> 元素包裹在 foreach 循环中或手动填充。

<x-kernl-footers.pre-footer.base
    :columns="<integer value>"
>
      <x-kernl-footers.pre-footer.column
        :featherIcon="<string value>"
        :title="<string value>"
        :link="<link array>"
        :description="<string value>"
      >
      </x-kernl-footers.pre-footer.column>
</x-kernl-footers.pre-footer.base>

x-kernl-footers.base 属性

  • columns - (可选) 在大屏幕上显示的网格列数。默认为 3。

x-kernl-footers.base 属性

  • featherIcon - (可选) 从 https://feathericons.com/ 选择一个 Feather 图标并在此处输入其名称。
  • title - (必需) 预页脚列的标题。
  • description - (必需) 预页脚列的描述。
  • link - (必需) 这是一个必须包含 URL 的数组，可选地还可以包含一个目标。示例
    $link = [
        'url' => 'https://www.google.com',
        'target' => '_blank'
    ]

选项卡

下划线

<x-kernl-tabs.underlined :default-active="0">
    <x-kernl-tabs.underlined.item title="Zero">
        Content for panel zero
    </x-kernl-tabs.underlined.item>

    <x-kernl-tabs.underlined.item title="One">
        Content for panel one
    </x-kernl-tabs.underlined.item>

    <x-kernl-tabs.underlined.item title="Two">
        Content for panel two
    </x-kernl-tabs.underlined.item>
</x-kernl-tabs.underlined>

x-kernl-tabs.underlined 属性

  • default-active - (可选) 初始活动选项卡的索引。默认为 0 (零)。

x-kernl-tabs.underlined.item 属性

  • title - 选项卡内容的标题

您添加到 item 组件上的任何额外类或属性都将传递。

边框

<x-kernl-tabs.bordered :default-active="0">
    <x-kernl-tabs.bordered.item title="Zero">
        Content for panel zero
    </x-kernl-tabs.bordered.item>

    <x-kernl-tabs.bordered.item title="One">
        Content for panel one
    </x-kernl-tabs.bordered.item>

    <x-kernl-tabs.bordered.item title="Two">
        Content for panel two
    </x-kernl-tabs.bordered.item>
</x-kernl-tabs.bordered>

x-kernl-tabs.bordered 属性

  • default-active - (可选) 初始活动选项卡的索引。默认为 0 (零)。

x-kernl-tabs.bordered.item 属性

  • title - 选项卡内容的标题

您添加到 item 组件上的任何额外类或属性都将传递。

分离

<x-kernl-tabs.detached :default-active="0">
    <x-kernl-tabs.detached.item title="Zero">
        Content for panel zero
    </x-kernl-tabs.detached.item>

    <x-kernl-tabs.detached.item title="One">
        Content for panel one
    </x-kernl-tabs.detached.item>

    <x-kernl-tabs.detached.item title="Two">
        Content for panel two
    </x-kernl-tabs.detached.item>
</x-kernl-tabs.detached>

x-kernl-tabs.detached 属性

  • default-active - (可选) 初始活动选项卡的索引。默认为 0 (零)。

x-kernl-tabs.detached.item 属性

  • title - 选项卡内容的标题

您添加到 item 组件上的任何额外类或属性都将传递。

英雄

分割布局媒体内容

<x-kernl-heroes.split-layout-content-media
    media-url="https://media-url"
    title="Title"
    body="Body"
    call-to-action="Call to Action"
    call-to-action-url="https://call-to-action-url"
/>

{{-- OR --}}
<x-kernl-heroes.split-layout-content-media
    media-url="https://media-url"
>
    {{-- Your content --}}
</x-kernl-heroes.split-layout-content-media>

x-kernl-heroes.split-layout-content-media 属性

  • media-url - 显示的图片的URL
  • title - 内容的标题
  • body - 内容的主体
  • call-to-action - 激励行动按钮的标签
  • call-to-action-url - 激励行动按钮的URL

您添加到组件的任何附加类或属性都将传递。

注意：在使用 $slot 版本时，标题、主体、激励行动和激励行动URL不是必需的。

全背景媒体居中内容

<x-kernl-heroes.full-centered-content
    title="Title"
    subtitle="Title"
    body="Body"
/>

{{-- OR --}}
<x-kernl-heroes.full-centered-content>
    {{-- Your content --}}
</x-kernl-heroes.full-centered-content>

x-kernl-heroes.full-centered-content 属性

  • title - 内容的标题
  • subtitle - 内容的副标题
  • body - 内容的主体

您添加到组件的任何附加类或属性都将传递。

注意：在使用 $slot 版本时，标题、主体、激励行动和激励行动URL不是必需的。

内部导航

<x-kernl-interior-navigation.base
    title="About"
    title-url="#"
    :links="[
        [
            'text' => 'Our Staff',
            'href' => '#',
        ],
        [
            'text' => 'Job Opportunities',
            'expandable' => true,
            'expanded' => true,
            'children' => [
                ['text' => 'Part Time', 'href' => '#'],
                ['text' => 'Full Time', 'href' => '#'],
            ],
        ],
    ]"
/>

x-kernl-interior-navigation.base 属性

  • title - 导航的标题
  • title-url - （可选）导航的URL
  • links - 导航项的数组。通过 children 键支持子导航。导航项可以有以下属性
    • text - 导航项的文本
    • href - 导航项的URL
    • active - 设置导航项为活动状态。默认为 false
    • children - 导航项的子导航
    • expandable - 设置子导航是否可展开/折叠。当使用 children 时适用。默认为 false
    • expanded - 设置子导航是否默认展开。当使用 expandable 时适用。默认为 false

您放置在 base 组件上的任何附加类或属性都将通过根 div 组件传递。

卡片

简单链接

<x-kernl-cards.simple-link
    title="Title Text"
    body="Body Text"
    color="red|light|light-gray|dark"
    size="sm|default"
    :with-footer="true|false"
    footer-text="Footer Text"
    url="https://www.google.com"
/>

{{-- OR --}}

<x-kernl-cards.simple-link
    url="https://www.google.com"
    :with-footer="true"
>
    <x-slot name="main">
        {{-- Main Content --}}
    </x-slot>
    <x-slot name="footer">
        {{-- Footer Content --}}
    </x-slot>
</x-kernl-cards.simple-link>

x-kernl-cards.simple-link 属性

  • title - 标题文本
  • body - 主体文本
  • color - （可选）卡片的背景颜色。默认为 'light'
  • size - （可选）文本大小。默认为 'default'
  • :with-footer - （可选）显示/隐藏页脚。默认为 false
  • footer-text - 页脚文本
  • url - 点击卡片时跳转的URL

您添加到组件的任何附加类或属性都将传递。

注意：$slot 版本有两个命名插槽：'main' 和 'footer'。分别使用它们来覆盖主内容和页脚内容。

简单带操作

<x-kernl-cards.simple-with-actions
    title="Title text"
    body="Body text"
    color="red|light|light-gray|dark"
    size="sm|default"
    primary-action-text="Primary action text"
    primary-action-url="https://www.google.com"
    secondary-action-text="Secondary action text"
    secondary-action-url="https://www.google.com"
/>

{{-- OR --}}

<x-kernl-cards.simple-with-actions
    title="Title text"
    body="Body text"
    color="red"
    color="red|light|light-gray|dark"
    size="sm|default"
>
    <x-slot name="main">
        {{-- Main Content --}}
    </x-slot>
    <x-slot name="actions">
        {{-- Actions Content --}}
    </x-slot>
</x-kernl-cards.simple-with-actions>

x-kernl-cards.simple-with-actions 属性

  • title - 标题文本
  • body - 主体文本
  • color - （可选）卡片的背景颜色。默认为 'light'
  • size - （可选）文本大小。默认为 'default'
  • primary-action-text - 主要操作的显示文本
  • primary-action-url - 点击主要操作时跳转的URL
  • secondary-action-text - （可选）次要操作的显示文本
  • secondary-action-url - （可选）点击二级操作时导航到的URL

您添加到组件的任何附加类或属性都将传递。

注意：$slot版本有两个命名插槽：'main' 和 'actions'。使用它们分别覆盖主内容和操作内容。

带有媒体的链接

<x-kernl-cards.link-with-media
    title="Title text"
    body="Body text"
    color="red|light|light-gray|dark"
    aspect-ratio="1:1|16:9|4:5|5:4"
    image-url="URL to image"
    badge="Badge text"
    orientation="vertical|horizontal|horizontal-flipped"
    pre-header="Pre Header text"
    :with-footer="true|false"
    footer-text="Footer text"
    url="URL for link"
/>

{{-- OR --}}

<x-kernl-cards.link-with-media
    title="Title text"
    body="Body text"
    color="red|light|light-gray|dark"
    aspect-ratio="1:1|16:9|4:5|5:4"
    image-url="URL to image"
    url="URL for link"
    orientation="vertical|horizontal|horizontal-flipped"
    badge="Badge text"
    pre-header="Pre Header text"
    :with-footer="true|false"
    footer-text="Footer text"
>
    <x-slot name="main">
        {{-- Main Content --}}
    </x-slot>
    <x-slot name="footer">
        {{-- Footer Content --}}
    </x-slot>
</x-kernl-cards.link-with-media>

x-kernl-cards.link-with-media 属性

  • title - 标题文本
  • body - 主体文本
  • color - （可选）卡片的背景颜色。默认为 'light'
  • aspect-ratio - （可选）图片的宽高比。默认为 '16:9'。
  • image-url - 图片的URL
  • url - 点击时导航到的URL
  • orientation - （可选）图片的方向。默认为 '垂直'。
  • badge - （可选）徽章文本
  • pre-header - （可选）预标题文本
  • :with-footer - （可选）显示/隐藏页脚。默认为 false。
  • footer-text - （可选）页脚文本

您添加到组件的任何附加类或属性都将传递。

注意：$slot 版本有两个命名插槽：'main' 和 'footer'。分别使用它们来覆盖主内容和页脚内容。

注意：此组件要正确工作，需要 @tailwindcss/aspect-ratio 插件。请参阅 文档

带有媒体和动作的链接

<x-kernl-cards.link-with-media-and-actions
    title="Title text"
    body="Body text"
    color="red|light|light-gray|dark"
    aspect-ratio="1:1|16:9|4:5|5:4"
    image-url="URL to image"
    url="URL for link"
    badge="Badge text"
    orientation="vertical|horizontal|horizontal-flipped"
    pre-header="Pre Header text"
    primary-action-text="Primary action text"
    primary-action-url="https://www.google.com"
    secondary-action-text="Secondary action text"
    secondary-action-url="https://www.google.com"
/>

{{-- OR --}}

<x-kernl-cards.link-with-media-and-actions
    title="Title text"
    body="Body text"
    color="red|light|light-gray|dark"
    aspect-ratio="1:1|16:9|4:5|5:4"
    image-url="URL to image"
    url="URL for link"
    badge="Badge text"
    orientation="vertical|horizontal|horizontal-flipped"
    pre-header="Pre Header text"
>
    <x-slot name="main">
        {{-- Main Content --}}
    </x-slot>
    <x-slot name="actions">
        {{-- Actions Content --}}
    </x-slot>
</x-kernl-cards.link-with-media-and-actions>

x-kernl-cards.link-with-media-and-actions 属性

  • title - 标题文本
  • body - 主体文本
  • color - （可选）卡片的背景颜色。默认为 'light'
  • aspect-ratio - （可选）图片的宽高比。默认为 '16:9'。
  • image-url - 图片的URL
  • url - 点击时导航到的URL
  • orientation - （可选）图片的方向。默认为 '垂直'。
  • badge - （可选）徽章文本
  • pre-header - （可选）预标题文本
  • primary-action-text - 主要操作的显示文本
  • primary-action-url - 点击主要操作时跳转的URL
  • secondary-action-text - （可选）次要操作的显示文本
  • secondary-action-url - （可选）点击二级操作时导航到的URL

您添加到组件的任何附加类或属性都将传递。

注意：$slot版本有两个命名插槽：'main' 和 'actions'。使用它们分别覆盖主内容和操作内容。

注意：此组件要正确工作，需要 @tailwindcss/aspect-ratio 插件。请参阅 文档

事件

<x-kernl-cards.event
    title="Title text"
    body="Body text"
    url="URL for link"
    image-url="URL to image"
    color="light|light-gray|dark"
    date="Date text"
    time="Time text"
    :with-footer="true|false"
    footer-text="Footer text"
/>

{{-- OR --}}

<x-kernl-cards.event
    title="Title text"
    body="Body text"
    url="URL for link"
    image-url="URL to image"
    color="light|light-gray|dark"
    date="Date text"
    time="Time text"
    :with-footer="true|false"
>
    <x-slot name="main">
        {{-- Main Content --}}
    </x-slot>
    <x-slot name="footer">
        {{-- Footer Content --}}
    </x-slot>
</x-kernl-cards.event>

x-kernl-cards.event 属性

  • title - 标题文本
  • body - 主体文本
  • date - 要显示的日期
  • time - 要显示的时间
  • color - （可选）卡片的背景颜色。默认为 'light'
  • url - 点击时导航到的URL
  • image-url - 图片的URL
  • :with-footer - （可选）显示/隐藏页脚。默认为 false。
  • footer-text - （可选）页脚文本

您添加到组件的任何附加类或属性都将传递。

注意：$slot 版本有两个命名插槽：'main' 和 'footer'。分别使用它们来覆盖主内容和页脚内容。

注意：此组件要正确工作，需要 @tailwindcss/aspect-ratio 插件。请参阅 文档

选择

<x-kernl-selects.select
    name="example-input"
    :options="[
        ['value' => 'value_1', 'label' => 'Value 1', 'category' => 'SINGLE'],
        ['value' => 'value_2', 'label' => 'Value 2', 'category' => 'SINGLE'],
        ['value' => 'value_3', 'label' => 'Value 3', 'category' => 'MULTI'],
    ]"
    :multiple="true|false"
    placeholder="Placeholder text"
    :listens="[
        'category-changed' => ['filter' => 'category'],
    ]"
    x-on:example-input-changed="someMethod($event.detail.value)"
/>

x-kernl-selects.select 属性

  • name - 输入框的名称。
  • :options - 可选择选项的数组。必须包含至少 value 和 label 键。
  • :multiple - （可选）允许选择多个选项。默认为 false。
  • placeholder - （可选）未进行选择时显示的文本。
  • :listens - （可选）允许在另一个选择输入更改时自动过滤选项。键数组必须包含 input-changed 事件的键和带有要过滤的属性的 filter。例如：当接收到 category-changed 时，:options 将使用每个选项中的 category 的值进行过滤。
  • x-on:{input-name}-changed - （可选）监听下拉菜单的变化。

您添加到组件的任何附加类或属性都将传递。

注意：此组件要正确工作，需要 @tailwindcss/forms 插件。请参阅 文档

分页器

<x-kernl-paginators.base
    :number-of-pages="available pages"
    :current-page="current page"
    mode="php|js"
    pagination-url="url for pagination"
    query-param-name="name of page query param"
    :appends="extra values for pagination"
    emits="name of the event to emit"
/>

x-kernl-paginators.base 属性

  • :number-of-pages - 分页可用的页数。
  • :current-page - 初始选定的页。
  • mode - （可选）php 或 js。默认为 php。
  • pagination-url - （仅 php 模式）用于分页链接的基本URL。
  • query-param-name - （可选 - 仅 php 模式）页查询参数的名称。默认为 page。
  • :appends - （可选 - 仅 php 模式）附加到分页URL的额外查询参数的键值数组。
  • emits - （可选 - 仅在 js 模式下）切换页面时派发的事件名称。

在 js 模式下监听页面更改事件时，您可以通过 $event.detail.page 访问新页面。