README

`Termwind`

Termwind 允许您使用 Tailwind CSS API 构建独特且美观的 PHP 命令行应用程序。简而言之，它就像 Tailwind CSS，但用于 PHP 命令行应用程序。

安装

需要 PHP 8.0+

使用 Composer 安装 Termwind

composer require nunomaduro/termwind

用法

use function Termwind\{render};

// single line html...
render('<div class="px-1 bg-green-300">Termwind</div>');

// multi-line html...
render(<<<'HTML'
    <div>
        <div class="px-1 bg-green-600">Termwind</div>
        <em class="ml-1">
          Give your CLI apps a unique look
        </em>
    </div>
HTML);

// Laravel or Symfony console commands...
class UsersCommand extends Command
{
    public function handle()
    {
        render(
            view('users.index', [
                'users' => User::all()
            ])
        );
    }
}

`style()`

style() 函数可用于添加自定义样式并更新颜色。

use function Termwind\{style};

style('green-300')->color('#bada55');
style('btn')->apply('p-4 bg-green-300 text-white');

render('<div class="btn">Click me</div>');

`ask()`

ask() 函数可用于提示用户一个问题。

use function Termwind\{ask};

$answer = ask(<<<HTML
    <span class="mt-1 ml-2 mr-1 bg-green px-1 text-black">
        What is your name?
    </span>
HTML);

ask 方法提供的 return 将是用户提供的答案。

`terminal()`

terminal() 函数返回一个包含以下方法的 Terminal 类实例：

->width(): 返回终端的全宽。
->height(): 返回终端的全高。
->clear(): 清除终端屏幕。

支持的类

所有支持的类都使用与 tailwindcss.com/docs 上相同的逻辑。

背景颜色: bg-{颜色}-{变体}。
文本颜色: text-{颜色}-{变体}。
字体粗细: font-bold, font-normal。
字体样式: italic。
文本装饰: underline, line-through。
文本转换: uppercase, lowercase, capitalize, snakecase。
文本溢出: truncate。
文本对齐: text-left, text-center, text-right。
外边距: m-{外边距}, ml-{左边距}, mr-{右边距}, mt-{上边距}, mb-{下边距}, mx-{水平外边距}, my-{垂直外边距}。
内边距: p-{内边距}, pl-{左边距}, pr-{右边距}, pt-{上边距}, pb-{下边距}, px-{水平内边距}, py-{垂直内边距}。
空间: space-y-{空间}, space-x-{空间}。
宽度: w-{宽度}, w-full, w-auto.
最小宽度: min-w-{宽度}.
最大宽度: max-w-{宽度}.
内容对齐: justify-between, justify-around, justify-evenly, justify-center.
可见性: invisible.
显示: block, flex, hidden.
Flex: flex-1.
列表样式: list-disc, list-decimal, list-square, list-none.
内容: content-repeat-['.'].

响应式设计

与TailwindCSS一样，我们也支持响应式设计媒体查询，以下是支持的断点：

sm: 64个空格（640px）
md: 76个空格（768px）
lg: 102个空格（1024px）
xl: 128个空格（1280px）
2xl: 153个空格（1536px）

render(<<<'HTML'
    <div class="bg-blue-500 sm:bg-red-600">
        If bg is blue is sm, if red > than sm breakpoint.
    </div>
HTML);

CLI的所有大小均基于字体大小15。

支持的HTML元素

所有元素都具备使用class属性的权限。

`<div>`

<div>元素可以用作块类型元素。

默认样式: block

render(<<<'HTML'
    <div>This is a div element.</div>
HTML);

`<p>`

<p>元素可以用作段落。

默认样式: block

render(<<<'HTML'
    <p>This is a paragraph.</p>
HTML);

`<span>`

<span>元素可以用作内联文本容器。

render(<<<'HTML'
    <p>
        This is a CLI app built with <span class="text-green-300">Termwind</span>.
    </p>
HTML);

`<a>`

<a>元素可以用作超链接。点击时允许使用href属性打开链接。

render(<<<'HTML'
    <p>
        This is a CLI app built with Termwind. <a href="/">Click here to open</a>
    </p>
HTML);

`<b>`和`<strong>`

<b>和<strong>元素可以用作将文本标记为粗体。

默认样式: font-bold

render(<<<'HTML'
    <p>
        This is a CLI app built with <b>Termwind</b>.
    </p>
HTML);

`<i>`和`<em>`

<i>和<em>元素可以用作将文本标记为斜体。

默认样式: italic

render(<<<'HTML'
    <p>
        This is a CLI app built with <i>Termwind</i>.
    </p>
HTML);

`<s>`

<s>元素可以用作在文本上添加~~删除线~~。

默认样式: line-through

render(<<<'HTML'
    <p>
        This is a CLI app built with <s>Termwind</s>.
    </p>
HTML);

`<br>`

<br>元素可以用作换行。

render(<<<'HTML'
    <p>
        This is a CLI <br>
        app built with Termwind.
    </p>
HTML);

`<ul>`

<ul>元素可以用作无序列表。它只能接受<li>元素作为子元素，如果提供了另一个元素，将抛出InvalidChild异常。

默认样式: block, list-disc

render(<<<'HTML'
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
HTML);

`<ol>`

<ol>元素可以用作有序列表。它只能接受<li>元素作为子元素，如果提供了另一个元素，将抛出InvalidChild异常。

默认样式: block, list-decimal

render(<<<'HTML'
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
HTML);

`<li>`

<li>元素可以用作列表项。它应仅作为<ul>和<ol>元素的子元素使用。

默认样式: block, list-decimal

render(<<<'HTML'
    <ul>
        <li>Item 1</li>
    </ul>
HTML);

`<dl>`

可以使用 <dl> 元素来创建描述列表。它只能接受 <dt> 或 <dd> 元素作为子元素，如果提供了其他元素，将会抛出 InvalidChild 异常。

默认样式: block

render(<<<'HTML'
    <dl>
        <dt>🍃 Termwind</dt>
        <dd>Give your CLI apps a unique look</dd>
    </dl>
HTML);

`<dt>`

可以使用 <dt> 元素作为描述标题。它应该仅作为 <dl> 元素的子元素使用。

默认样式: block, font-bold

render(<<<'HTML'
    <dl>
        <dt>🍃 Termwind</dt>
    </dl>
HTML);

`<dd>`

可以使用 <dd> 元素作为描述内容。它应该仅作为 <dl> 元素的子元素使用。

默认样式: block, ml-4

render(<<<'HTML'
    <dl>
        <dd>Give your CLI apps a unique look</dd>
    </dl>
HTML);

`<hr>`

可以使用 <hr> 元素来创建水平线。

render(<<<'HTML'
    <div>
        <div>🍃 Termwind</div>
        <hr>
        <p>Give your CLI apps a unique look</p>
    </div>
HTML);

`<table>`

<table> 元素可以包含列和行。

render(<<<'HTML'
    <table>
        <thead>
            <tr>
                <th>Task</th>
                <th>Status</th>
            </tr>
        </thead>
        <tr>
            <th>Termwind</th>
            <td>✓ Done</td>
        </tr>
    </table>
HTML);

`<pre>`

可以使用 <pre> 元素来显示预格式化的文本。

render(<<<'HTML'
    <pre>
        Text in a pre element
        it preserves
        both      spaces and
        line breaks
    </pre>
HTML);

`<code>`

<code> 元素可以用作代码高亮。它接受 line 和 start-line 属性。

render(<<<'HTML'
    <code line="22" start-line="20">
        try {
            throw new \Exception('Something went wrong');
        } catch (\Throwable $e) {
            report($e);
        }
    </code>
HTML);

Termwind 是一个开源软件，遵循 MIT 许可协议。

nunomaduro / termwind

维护者

详细信息

README

`Termwind`

安装

用法

`style()`

`ask()`

`terminal()`

支持的类

响应式设计

支持的HTML元素

`<div>`

`<p>`

`<span>`

`<a>`

`<b>`和`<strong>`

`<i>`和`<em>`

`<s>`

`<br>`

`<ul>`

`<ol>`

`<li>`

`<dl>`

`<dt>`

`<dd>`

`<hr>`

`<table>`

`<pre>`

`<code>`

nunomaduro / termwind

维护者

详细信息

README

Termwind

安装

用法

style()

ask()

terminal()

支持的类

响应式设计

支持的HTML元素

<div>

<p>

<span>

<a>

<b>和<strong>

<i>和<em>

<s>

<br>

<ul>

<ol>

<li>

<dl>

<dt>

<dd>

<hr>

<table>

<pre>

<code>

`Termwind`

`style()`

`ask()`

`terminal()`

`<div>`

`<p>`

`<span>`

`<a>`

`<b>`和`<strong>`

`<i>`和`<em>`

`<s>`

`<br>`

`<ul>`

`<ol>`

`<li>`

`<dl>`

`<dt>`

`<dd>`

`<hr>`

`<table>`

`<pre>`

`<code>`