Slack UI UX design with collapsable columns

0 votes

I want to duplicate the collapsible functionality that slack has on its column. It lets you view 3 columns at a time. Upon expanding the the thrid column, the second column shrinks. When the second col reaches its min width, first column automatically collapses and second column takes it place.

Using Split js, second column collapses upon expanding the third column.

Apr 25, 2023 in UI UX Design by Ashwini
• 5,430 points
337 views

1 answer to this question.

0 votes

To replicate Slack's collapsible functionality using Split.js, you can define a few rules for the column widths and the minimum sizes. Here's a sample code snippet that demonstrates how you can achieve this:

<div class="split">
  <div class="split-item" style="min-width: 300px; flex-basis: 25%;">
    <!-- First column content -->
  </div>
  <div class="split-item" style="min-width: 300px; flex-basis: 50%;">
    <!-- Second column content -->
  </div>
  <div class="split-item" style="min-width: 300px; flex-basis: 25%;">
    <!-- Third column content -->
  </div>
</div>

The above code defines a Split.js container with three columns, each with a minimum width of 300 pixels and a flex-basis of 25%, 50%, and 25%, respectively. You can adjust these values based on your requirements.

To make the second column collapse when the third column is expanded, you can add an event listener to the third column's expand button and trigger a collapse on the second column.

const split = Split(['.split-item'], {
  sizes: [25, 50, 25],
  minSize: [300, 300, 300]
});

const thirdColumnExpandButton = document.querySelector('.third-column-expand-button');
thirdColumnExpandButton.addEventListener('click', () => {
  split.collapse(1);
});

The above code initializes the Split.js container and defines the column sizes and minimum sizes. It also adds an event listener to the third column's expand button and triggers a collapse on the second column when the button is clicked.

With the above code, when the third column is expanded, the second column will collapse to its minimum width, and when the second column reaches its minimum size, the first column will collapse, and the second column will take its place.

To know more about UI UX, It's recommended to join UI UX Design Certification Course today.

answered Apr 25, 2023 by pooja

Related Questions In UI UX Design

0 votes
1 answer

Need UI/UX Design layout name

The layout design that Cleartrip.com uses is ...READ MORE

answered Apr 25, 2023 in UI UX Design by pooja
282 views
0 votes
1 answer

UI/UX design or audit - how to measure the costs?

When it comes to charging for a ...READ MORE

answered Apr 25, 2023 in UI UX Design by Tej
287 views
0 votes
1 answer
0 votes
1 answer

UI / UX designer tool with custom style

Yes, there are several UI/UX design tools ...READ MORE

answered Apr 25, 2023 in UI UX Design by seena
266 views
0 votes
1 answer
0 votes
1 answer
+1 vote
1 answer

What is SQL injection?

hey @Fighnithi, Yes,SQL injection is one of the ...READ MORE

answered Jan 22, 2020 in Web Development by Niroj
• 82,880 points
1,010 views
0 votes
1 answer

How to access PHP var from external javascript file?

Hello @kartik, You don't really access it, you ...READ MORE

answered Jul 6, 2020 in Java-Script by Niroj
• 82,880 points
7,126 views
0 votes
1 answer

UI/UX Design in Real Time Applications

When designing for real-time applications like those ...READ MORE

answered Apr 25, 2023 in UI UX Design by vinayak
301 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP