Responsiveness in Segment Property

Elements Component Development
1

Hi all,

worked on some component today a Divider. I realized if I want to add one which I can select to be horizontal or vertical. The responsivenss is added ad a prefix:

image
image710×776 15.9 KB

What would be a proper way to deal with this? The scenario would be switching between different content based on the responsiveness.

Maybe an option to return the result as a json object?

2

Splitting up the component in 2. And then have a hide / show slider. Does the trick as well.

3

Hey @Beblebroks,

Most properties work responsively out of the box and return a string of classes prefixed with the appropriate screen size that can be used directly in a template file. This is the most common approach and works in most cases.

However, if more complex logic is needed, you can use the hooks file to obtain the current breakpoints, responsive property values and use them to build up a list of classes to apply.

Here’s a sample hooks file that just logs all the relevant data to the debug log.

const transformHook = (rw) => {
        
    // Get all formatted node properties
    console.log(rw.props);
    
    // Get active breakpoint names (ordered)
    console.log(rw.theme.breakpoints.names);
    
    // Get active breakpoint screen sizes (unordered)
    console.log(rw.theme.breakpoints.screens);

    // Get the raw responsive values for all node properties 
    console.log(rw.responsiveProps);
    
}

exports.transformHook = transformHook;

I’ve put together a sample project showing how you might show/hide content based on a responsive size.

:point_right: Orientation Visibility Sample Project

Or follow the instructions below:

Add this to the template. It allows us to set classes on horizontal and vertical content. The classes will just control visibility at different breakpoints.

<div class="p-sm text-lg text-center text-brand-500">
    <div class="{{horizontalClasses}}">Horizontal</div>
    <div class="{{verticalClasses}}">Vertical</div>
</div>

The properties file should contain a segmented control (orientation)

{
    "groups": [{
        "title" : "Settings",
        "properties" : [{
            "title" : "Orientation",
            "property" : "orientation",
            "segmented": {
                "default": {
                    "base": "horizontal"
                },
                "items": [{
                    "value": "horizontal",
                    "icon": "arrow.left.and.right",
                    "default": true
                }, {
                    "value": "vertical",
                    "icon": "arrow.up.and.down"
                }]  
            }
        }]
    }]
}

And finally the hooks file is used to figure out what classes should be applied to each of the content areas. Notice I’m being careful to maintain breakpoint order, otherwise things may not work correctly.

const transformHook = (rw) => {
    
    // Get all breakpoint names (ordered)
    console.log(`Breakpoint names`, rw.theme.breakpoints.names);
    
    // Get all breakpoint screen sizes (unordered)
    console.log(`Breakpoint screens`, rw.theme.breakpoints.screens);

    // Get orientation responsive values
    const { orientation } = rw.responsiveProps

    // Log orientation responsive values (unordered)
    console.log(`Orientation values`, orientation)

    // Get all used breakpoints using rw.theme.breakpoints.names to maintain the correct order
    const usedBreakpoints = rw.theme.breakpoints.names
        .filter(name => Object.keys(orientation).includes(name))

    // Log used breakpoints
    console.log('usedBreakpoints', usedBreakpoints)
    
    // Function to build list of ordered visiblity classnames for an orientation
    const buildClassNames = (requiredOrientation) => 
        ['base', ...usedBreakpoints]
            .reduce((result, key) => {
                // Check for 'horizontal'
                const className = orientation[key] == requiredOrientation ? `${key}:block` : `${key}:hidden` 
                // Return breakpoint prefixed class 
                return [...result, className]
            }, [])
            // Join all classnames in the array
            .join(' ')
            // Remove the 'base:' prefix, it's not required
            .replace('base:', '')

    // Convert the orientation values into block/hidden classes for horizontal content
    const horizontalClasses = buildClassNames('horizontal')

    // Convert the orientation values into block/hidden classes for vertical content
    const verticalClasses = buildClassNames('vertical')

    // Log
    console.log(`horizontalClasses = ${horizontalClasses} `)
    console.log(`verticalClasses = ${verticalClasses} `)

    // Set horizontal / vertical classes for template
    rw.setProps({
        horizontalClasses,
        verticalClasses
    })

}

exports.transformHook = transformHook;
2 Likes