README

Purephp 是一个受 ReactJS 启发的 PHP 虚拟 DOM 模板引擎。

为什么使用 Purephp？

享受纯粹的 PHP 编程。

在传统方法中，在视图层混合 HTML 代码、PHP 代码和其他模板语法可能会让开发者感到沮丧。

然而，使用 Purephp

• 一切都是 100% 原生 PHP 代码。
• 封装组件以消除重复的 HTML 代码。
• 语法与 HTML 非常相似。

安装

composer require yonlj/purephp

基本用法

以下是一个简单的示例，展示如何使用 Purephp

<?php

use function Pure\HTML\a;
use function Pure\HTML\div;

div(
    'Hello ',
    a('PHP')->href('https://php.ac.cn')
)->class('container')->style('background: #fff;')->data_key('primary')->toPrint();

以上代码将输出

<div class="container" style="background: #fff;" data-key="primary">Hello <a href="https://php.ac.cn">PHP</a></div>

组件

您可以使用 Pure 将重复的代码片段封装成功能组件，这很像 React 的功能组件。

<?php

use function Pure\HTML\div;
use function Pure\HTML\h2;
use function Pure\HTML\h3;
use function Pure\HTML\a;
use function Pure\HTML\p;
use function Pure\SVG\svg;
use function Pure\SVG\svgUse;

// use named arguments
function Section($title, $contents, $classList)
{
    return (
        div(
            h2($title)->class('pb-2 border-bottom'),
            div(...$contents)->class($classList)
        )->class('container px-4 py-5')
    );
}

// use array destructuring assignments
function IconColumn($props)
{
    [
        'icon' => $icon,
        'title' => $title,
        'content' => $content,
        'linkText' => $linkText,
        'link' => $link
    ] = $props;

    return (
        div(
            div(
                Icon($icon)->class('bi')->width('1em')->height('1em')
            )->class('feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3'),
            h3($title)->class('fs-2'),
            p($content),
            a(
                $linkText,
                Icon('chevron-right')->class('bi')->width('1em')->height('1em'),
            )->href($link)->class('icon-link d-inline-flex align-items-center')
        )->class('feature col')
    );
}

// use extract()
function HangingIcon($props)
{
    extract($props);

    return (
        div(
            div(
                Icon($icon)->class('bi')->width('1em')->height('1em')
            )->class('icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3'),
            div(
                h3($title)->class('fs-2'),
                p($content),
                a($linkText)->href($link)->class('btn btn-primary')
            )
        )->class('col d-flex align-items-start')
    );
}

function Icon($icon)
{
    return(
        svg(
            svgUse()->href("#$icon")
        )
    );
}

main(
    Section(
        title: 'Columns with icons',
        contents: array_map(fn($data) => IconColumn($data), $columnsData),
        classList: 'row g-4 py-5 row-cols-1 row-cols-lg-3'
    ),
    Section(
        title: 'Hanging icons',
        contents: array_map(fn($data) => HangingIcon($data), $hangingData),
        classList: 'row g-4 py-5 row-cols-1 row-cols-lg-3'
    ),
)->toPrint();

示例

更多用法示例请见 此处。

许可证

MIT © YonLJ