How to change splitter options from javascript?

Get help with using Metro 4 components
Post Reply
hokiedsp
Posts: 2
Joined: Mon Sep 30, 2019 5:27 am
Status: Offline

How to change splitter options from javascript?

Post by hokiedsp » Mon Sep 30, 2019 5:43 am

Hi,

I'm new to Metro UI and really javascript in general. I'm using it for my electron project, and so far love what it offers. That being said, I cannot get grasp of how to change Metro component options dynamically. Specifically, I'm currently working on a splitter component and wanting to change its data-split-sizes and data-min-sizes when viewport resizes.

mysplitter has 2 horizontal panes, and here is what I tried unsuccessfully:

Code: Select all

splitter = $('#mysplitter')
splitter.attr({'data-min-sizes': '300,467', 'data-split-sizes': '68,32'});
and

Code: Select all

splitter_data = $('#mysplitter').data('splitter')
splitter_data.options.splitSizes='68,32'
splitter_data.options.minSizes='300,467'
Both cases, I confirmed what I set are set on the dev console but the changes aren't reflected on the UI. How should I go about it?

Much thanks in advance and apology if I missed it in the documentation.
Kesh, hokiedsp

User avatar
olton
Site Admin
Posts: 238
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sat Oct 12, 2019 8:19 pm

the current version of splitter hasn't API for interact with splitter from javascript. Please create an issue on GitHub to add it.

User avatar
olton
Site Admin
Posts: 238
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sun Oct 13, 2019 3:11 pm

In 4.3.2 I added method `size(str)` for change panel sizes at runtime and observing for attribute `data-split-sizes` for change panel sizes at runtime

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css" rel="stylesheet">

    <title>% - Metro 4 :: Popular HTML, CSS and JS library</title>
    
</head>
<body class="m4-cloak">
<div class="container mt-20">
    <div class="text-center">
        <button class="button" onclick="$('#s1').attr('data-split-sizes', '30, 70')">30/70</button>
        <button class="button" onclick="$('#s1').attr('data-split-sizes', '50, 50')">50/50</button>
        <button class="button" onclick="Metro.getPlugin('#s1', 'splitter').size('70, 30')">70/30</button>
    </div>
    <div style="height: 500px">
        <div data-role="splitter" class="h-100 border bd-red" id="s1">
            <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
            <div class="d-flex flex-justify-center flex-align-center">This is panel 2</div>
        </div>
    </div>
</div>
    <script src="../metro/js/metro.js"></script>
</body>
</html>

Post Reply