Issue #2026Opened May 21, 2019by alikabeer321 reactions

[Feature request] style manager css functions (for example transform: rotate(90deg)) accepts only one parameter

Question

I would like to provide an option for the css function translate(x,y) but the addProperty parameter functionName accepts only one parameter as input. I tried to use translateX() and translateY() but they don't work simultaneously. I'd be grateful if someone could maybe tell me some other method to get the desired effect.

Answers (2)

adamyargerJuly 12, 20191 reactions

@alikabeer32 I ran into the same problem before, you have to set the defaults value for translateY and translateX since the transform property in css is shared across both translateX and translateY. for example grapes outputs transform: translateY(40px) translateX(0);

Here's an example of how you could pass it through the styleManager attribute when constructing grapes.

styleManager: {
    sectors: [
        {
            id: 'dimension',
            name:'Dimension',
            open:false,
            buildProps:[
                'transform'
            ],
            properties:[
                {
                    property:'transform',
                    properties:[
                        {
                            name:'Translate Y',
                            property:'transform-translate-y',
                            functionName: 'translateY',
                            defaults: 0,
                            type: 'integer',
                            units: ['px', '%'],
                            unit: 'px'
                        },
                        {
                            name:'Translate X',
                            property:'transform-translate-x',
                            functionName: 'translateX',
                            defaults: 0,
                            type: 'integer',
                            units: ['px', '%'],
                            unit: 'px'
                        },
                    ]
                }
            ]
        }
    ]
},
alikabeer32July 13, 20190 reactions

Yes! It was the perfect solution. Thank you !

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.