termwind下載 - termwind原始碼下載

termwind

其他類別

v2.3.0

下載

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} Pad 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 授權授權的開源軟體。

展開

附加信息