nunomaduro/termwind

Support for borders?

caendesilva opened this issue · 4 comments

caendesilva commented

I think something like this would be quite cool.

<div class="p-4 border-green-500">
   Hello World!
</div>
╭──────────────────╮
│                  │
│   Hello World!   │
│                  │
╰──────────────────╯
nunomaduro commented

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

caendesilva commented

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
);
  • 👍1
xiCO2k commented

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

caendesilva commented

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.