SQLpage icon indicating copy to clipboard operation
SQLpage copied to clipboard

passings style to embed in card component

Open amrutadotorg opened this issue 1 year ago • 4 comments

Hi, is it possible to pass the style="background-color: #FFFFFF" to embed?

Example embed code would look like this:

<iframe src="https://player.vimeo.com/video/951425265" style="background-color: #FFFFFF" width="1000" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

it might look like this

SELECT 'card' AS component, 1 AS columns;
SELECT
    'https://player.vimeo.com/video/951425265?transparent=0' AS embed,
    'autoplay; fullscreen; picture-in-picture; clipboard-write;' AS allow,
    'iframe' AS embed_mode,
    'background-color: #FFF123"' as style,
    '700' AS height;

amrutadotorg avatar May 30 '24 11:05 amrutadotorg

added PR #355. If it is ok I will add info to the documentation.

amrutadotorg avatar May 30 '24 12:05 amrutadotorg

@lovasoa would be good to have this as an attribute for all elements...

djyotta avatar Jun 02 '24 21:06 djyotta

Shouldn't we encourage using stylesheets instead?

lovasoa avatar Jun 02 '24 22:06 lovasoa

Sure, I'm just thinking about cases where stylesheet could be tricky or overkill. CSS is also a whole other beast to learn and understand if users are wanting a low code solution.

Personally, I've been using CSS via adding <style> tags inline via the text component. It's an abomination, I know, but I'm too lazy to reference and serve a static CSS file via the shell component.

I feel a style parameter for each component would be more elegant than what I'm currently doing.

Then again, eventually I plan to do it properly by adding a CSS file to the shell component, so maybe you're right and we can promote good behaviour by not providing support for style attribute on all components...

djyotta avatar Jun 03 '24 00:06 djyotta