Skip to content

feat: add style prop support to element for passing styles as an object#286

Open
tuncayyildirtanuk wants to merge 1 commit intolightning-js:masterfrom
tuncayyildirtanuk:feat/add-style-prop
Open

feat: add style prop support to element for passing styles as an object#286
tuncayyildirtanuk wants to merge 1 commit intolightning-js:masterfrom
tuncayyildirtanuk:feat/add-style-prop

Conversation

@tuncayyildirtanuk
Copy link

@tuncayyildirtanuk tuncayyildirtanuk commented Feb 11, 2025

Description

This PR introduces support for the style prop in the Element component, allowing styles to be passed as an object. This enhances flexibility by enabling dynamic style updates based on component state or props.

Changes Introduced
• Added the style prop to to support object-based styling.
• Updated the Box component example to demonstrate passing styles dynamically using elementStyle.

Code Example:

const Box = Blits.Component('Box', {
  components: {},
  template: `
    <Element
      w="150"
      h="150"
      color="#eeaabb"
      :scale="$focused ? 1.3 : 1"
      color="{top: 'red', right:'white', left: 'black', bottom: 'blue'}"
      style="$elementStyle"
    >
      <Text content="$item.title" :textStyle="{fontSize: 20, textColor: 0xffffff}" />
    </Element>`,
  props: ['index', 'item', 'focused'],
  state() {
    return {
      elementStyle: { a: 1, b: 2, c: 3, width: 120 }
    };
  },
});

@michielvandergeest michielvandergeest self-requested a review as a code owner October 9, 2025 19:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant