Skip to content

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