首页>PHP源码>其他类别
下载

Termwind 徽标

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-{color}-{variant} 。
  • 文本颜色： text-{color}-{variant} 。
  • 字体粗细： font-bold 、 font-normal 。
  • 字体样式： italic 。
  • 文本修饰： underline 、 line-through 。
  • 文本转换： uppercase 、 lowercase 、 capitalize 、 snakecase 。
  • 文本溢出： truncate 。
  • 文本对齐： text-left 、 text-center 、 text-right 。
  • 边距： m-{margin} 、 ml-{leftMargin} 、 mr-{rightMargin} 、 mt-{topMargin} 、 mb-{bottomMargin} 、 mx-{horizontalMargin} 、 my-{verticalMargin} 。
  • 填充： p-{padding} 、 pl-{leftPadding} 、 pr-{rightPadding} 、 pt-{topPadding} 、 pb-{bottomPadding} 、 px-{horizontalPadding} 、 py-{verticalPadding} 。
  • 空间： space-y-{space} 、 space-x-{space} 。
  • 宽度： w-{width} 、 w-full 、 w-auto 。
  • 最小宽度： min-w-{width} 。
  • 最大宽度： max-w-{width} 。
  • 对齐内容： justify-between 、 justify-around 、 justify-evenly 、 justify-center 。
  • 可见性： invisible 。
  • 显示： block 、 flex 、 hidden 。
  • 弹性： flex-1 。
  • 列表样式： list-disc 、 list-decimal 、 list-square 、 list-none 。
  • 内容： content-repeat-['.'] 。

响应式设计

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

  • sm : 64 个空格 (640px)
  • md ：76 个空格（768 像素）
  • lg ：102 个空格（1024 像素）
  • xl ：128 个空格（1280 像素）
  • 2xl ：153 个空格（1536 像素） 
 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 许可证授权的开源软件。

展开
附加信息
相关应用
为您推荐
相关资讯 全部