Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for borders? #177

Open
caendesilva opened this issue Nov 8, 2023 · 4 comments
Open

Support for borders? #177

caendesilva opened this issue Nov 8, 2023 · 4 comments

Comments

@caendesilva
Copy link

I think something like this would be quite cool.

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

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

@caendesilva
Copy link
Author

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
Copy link
Collaborator

xiCO2k commented Nov 10, 2023

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

@caendesilva
Copy link
Author

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.

@caendesilva caendesilva mentioned this issue Nov 11, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@xiCO2k @nunomaduro @caendesilva