Cluster

Cập nhật lần cuối: 27/05/2022

Cluster là component để nhóm các phần tử lại với khả năng kiểm soát khoảng cách lề giữa chúng.

Properties

Name	Type	Default	Description
align	AlignItemsEnum	flex-start	The align-items value (for vertical alignment)
children	React.ReactNode		ReactNode
justify	JustifyContentEnum	flex-start	The justify-content value (for horizontal alignment)
space	string	var(--s1)	The space (margin) between each of the clustered elements

Example

Open Sandbox

import React from "react";
import { Page, Cluster, Button } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Cluster className='section-container' space='2rem'>
        <div
          style={{
            border: "solid 2px",
            width: "20px",
            height: "20px"
          }}
        />
        <div
          style={{
            border: "solid 2px",
            width: "30px",
            height: "20px"
          }}
        />
        <div
          style={{
            border: "solid 2px",
            width: "40px",
            height: "20px"
          }}
        />
        <div
          style={{
            border: "solid 2px",
            width: "50px",
            height: "20px"
          }}
        />
        <div
          style={{
            border: "solid 2px",
            width: "60px",
            height: "20px"
          }}
        />
      </Cluster>
    </Page>
  );
}