Add a `div` to render Inline type components

[xiCO2k]

After checking on possible features to add, figured that would be awesome to have the capability to style multiple parts of the same span like its possible to do in HTML with multiple <span> inside of each other.

From this code:

use function Termwind\{span,a};

span([
    span('Termind', 'ml-3 px-1 font-bold text-color-white bg-red'),
    span('it\'s like Tailwind CSS, but for the PHP command-line applications.', 'px-1'),
    a('Check it out on GitHub', 'mr-3 text-color-blue')->href('https://github.com/nunomaduro/termwind'),
])->render();

Output

There is some edge cases still need to be handle. but want to know what do you think about this.

[nunomaduro]

That's not what the current render function does?

[xiCO2k]

Render does like this:

Code:

render([
    span('Termind', 'ml-3 px-1 font-bold text-color-white bg-red'),
    span('it\'s like Tailwind CSS, but for the PHP command-line applications.', 'px-1'),
    a('Check it out on GitHub', 'mr-3 text-color-blue')->href('https://github.com/nunomaduro/termwind'),
]);

[xiCO2k]

Actually this works from render:

render([[
    span('Termind', 'ml-3 px-1 font-bold text-color-white bg-red'),
    span('it\'s like Tailwind CSS, but for the PHP command-line applications.', 'px-1'),
    a('Check it out on GitHub', 'mr-3 text-color-blue')->href('https://github.com/nunomaduro/termwind'),
]]);

So, maybe add just a renderLine method?

[nunomaduro]

I don't know... I feel that we should add something that groups elements. Like a div.

[ju5t]

I think it would be cool to have an API that accepts the return value of a single element, but also accepts an array of multiple elements. I've kept the naming of all methods neutral :)

So for a single line with one element:

render(element('text', 'style'))

And for multiple element on a single line:

render([
    element('text', 'style'), 
    element('text', 'style'),
])

One thing I do want to say about html-tags vs. generic method names: if you want to stick to html-tags, a span should never include a line break. It's an inline-block. In my example element would be a span and render a div.

This would mean that if you wouldn't use render (or div for that matter) a span will always imply that the next element will be on the same line. And a div wouldn't, as that's a block by default.

edit: to be sure, if you want to call it a span, for me that implies that it does not include multiple elements. Only render or div would. But render or div should be usable on its own, too, in case a line break is required.

[xiCO2k]

@nunomaduro I will implement the div method, that will allow a and span elements on a single terminal line. do you think that is a good idea?

[xiCO2k]

Added a div function and also an abstract BlockElement class to handle more cases that will work with another elements that have the display: block like h1.

How it works:

use function Termwind\{render, div, span, a};

div([
    span('Termind', 'ml-3 px-1 font-bold text-color-white bg-red'),
    span('it\'s like Tailwind CSS, but for the PHP command-line applications.', 'px-1'),
    a('Check it out on GitHub', 'mr-3 text-color-blue')->href('https://github.com/nunomaduro/termwind'),
])->render();

// or

render([
    div([
        span('Termind', 'ml-3 px-1 font-bold text-color-white bg-red'),
        span('it\'s like Tailwind CSS, but for the PHP command-line applications.', 'px-1'),
        a('Check it out on GitHub', 'mr-3 text-color-blue')->href('https://github.com/nunomaduro/termwind'),
    ])
]);

To add on future PRs:

• Capability to add styles to the div element;
• On the Element child's it should inherit the styles like text-color and bg-color from div like how it works on HTML.

[ju5t]

For me personally I would prefer:

div([
    span('Termind', 'ml-3 px-1 font-bold text-color-white bg-red'),
    span('it\'s like Tailwind CSS, but for the PHP command-line applications.', 'px-1'),
    a('Check it out on GitHub', 'mr-3 text-color-blue')->href('https://github.com/nunomaduro/termwind'),
])

So without render().

[xiCO2k]

Also works for me, but to have the same API from the Element probably make sense to have the ->render() method.

and also work on having multiple lines with the render method like this:

render([
    span('Termind', 'ml-3 px-1 font-bold text-color-white bg-red'),
    div([
        span('it\'s like Tailwind CSS, but for the PHP command-line applications.', 'px-1'),
        a('Check it out on GitHub', 'mr-3 text-color-blue')->href('https://github.com/nunomaduro/termwind'),
    ]),
    span('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mag'),
]);

[xiCO2k]

Thanks @nunomaduro, just checked the changes on the div and it looks great