search

nunomaduro / termwind

🍃 In short, it's like Tailwind CSS, but for the PHP command-line applications.
MIT License
2.29k stars 78 forks source link

Support for borders? #177

Open caendesilva opened 1 year ago

caendesilva commented 1 year ago

I think something like this would be quite cool.

<div class="p-4 border-green-500">
   Hello World!
</div>

╭──────────────────╮
│                  │
│   Hello World!   │
│                  │
╰──────────────────╯
nunomaduro commented 1 year ago

cc @xiCO2k - this could be done with unicode chars.

caendesilva commented 1 year ago

cc @xiCO2k - this could be done with unicode chars.

Here's my super crude proof of concept, as I'm not sure how the library works under the hood. Result looks pretty smooth IMHO.

image

$width = 20;
$spacing = str_repeat('&nbsp;', $width);
$lines = str_repeat('─', $width);

$line1 = sprintf('<span class="text-blue-500">%s</span>',
    str_replace(' ', '&nbsp;', 
        str_pad('Hello World!', $width, ' ', STR_PAD_BOTH)
    )
);

render(<<<HTML
    <div class="text-green-500">
    <br>
    &nbsp;╭{$lines}╮<br>
    &nbsp;│{$spacing}│<br>
    &nbsp;│{$line1}│<br>
    &nbsp;│{$spacing}│<br>
    &nbsp;╰{$lines}╯
    <br>
    </div>
    HTML
);
xiCO2k commented 1 year ago

Yes, that is a good idea, @caendesilva if you want to take this one, go ahead.

caendesilva commented 1 year ago

Yes, that is a good idea, @caendesilva if you want to take this one, go ahead.

I'll try it out, might take a little bit as I have to learn how the package works internally. I'll keep you posted.