React Tile Manager 개요

    Ignite UI for React Tile Manager 구성 요소를 사용하면 개별 타일에 콘텐츠를 표시할 수 있습니다. 이를 통해 사용자는 이러한 타일을 재정렬하고 크기를 조정하여 상호 작용할 수 있으므로 기본 설정에 따라 콘텐츠의 레이아웃과 모양을 자유롭게 사용자 지정할 수 있습니다. 이러한 유연성은 콘텐츠를 보다 개인화되고 효율적인 방식으로 보고 관리할 수 있도록 하여 사용자 환경을 향상시킵니다.

    React Tile Manager Example

    다음 Ignite UI for React Tile Manager Example은 작동 중인 컴포넌트를 보여줍니다.

    [!Warning] Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner.

    Usage

    The IgrTileManager provides a base tile layout behavior, managing the placement of tiles in maximized or normal state. The tiles can be sized independently of each other and used to form complex layouts. End users can reorder tiles by dragging and dropping them, providing a flexible and intuitive experience.

    타일 매니저는 사용할 수 있는 두 가지 컴포넌트를 제공합니다.

    • IgrTile - This component represents an individual tile displayed within the Tile Manager.
    • IgrTileManager - This is the main component that contains all of the tile components, serving as the container for the entire tile layout.

    시작하기

    Tile Manager를 사용하려면 먼저 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    타일 매니저를 사용하기 전에 다음과 같이 가져와야 합니다.

    import { IgrTile, IgrTileManager } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    이제 React Tile Manager의 기본 구성부터 시작할 수 있습니다.

      <IgrTileManager>
    <IgrTile>
      <p>Tile 1</p>
    </IgrTile>
    <IgrTile>
      <p>Tile 2</p>
    </IgrTile>
    <IgrTile>
      <p>Tile 3</p>
    </IgrTile>
  </IgrTileManager>

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    Layout

    Columns and Rows

    We can specify the number of grid columns for our Tile Manager. To do this, simply set the columnCount property to the desired number of columns. If the number is less than one or the property is not set, the Tile Manager will create as many columns as can fit, with each column being at least 200px wide and expanding to equally share the available space. When the viewport dimensions change, the tiles will also rearrange themselves to maximize the use of space.

    <IgrTileManager columnCount={2}>
  <IgrTile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 3 header</span>
    <p>Tile 3 Content</p>
  </IgrTile>
  ...
</IgrTileManager>

    이 코드 스니펫에서 타일 관리자의 3개 타일은 2개의 행과 2개의 열로 정렬됩니다.

    Gap

    Another property that can be used in the Tile Manager is the gap property, which defines the space between tiles. The value of the gap property must be a number followed by a length unit (e.g., px, rem, em, ...). This value will apply to both the horizontal gap (width) and the vertical gap (height) between tiles.

    <IgrTileManager gap="20px">
  <IgrTile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
  ...
</IgrTileManager>

    Minimum width and height

    We also have properties for setting the minimum width of the columns (minColumnWidth) and the minimum height of the rows (minRowHeight) in the Tile Manager. Similar to the gap property, the values for these properties must be a number followed by a length unit. These values will define the minimum width for all columns and the minimum height for all rows in the Tile Manager.

    <IgrTileManager minColumnWidth="200px" minRowHeight="150px">
  <IgrTile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
  ...
</IgrTileManager>

    Example

    Tile component

    Tile 구성 요소에는 각 타일에 대해 개별적으로 설정할 수 있는 속성이 있습니다. 이러한 속성 중 일부는 다음과 같습니다.

    • The colSpan property specifies how many columns the tile will span across in the layout, allowing you to control its horizontal size.
    • The rowSpan property determines how many rows the tile will span vertically, adjusting the tile's height within the layout.
    • The colStart property specifies the starting column where the tile is placed.
    • The rowStart property specifies the starting row where the tile is placed.
    • The disableFullscreen property hides the default fullscreen action button.
    • The disableMaximize property hides the default maximize toggle action button.
    • The disableResize property prevents the tile from being resized by the user.
    <IgrTileManager>
  <IgrTile colSpan={2} disableResize={true}>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
  ...
</IgrTileManager>

    Tile 컴포넌트는 또한 사용할 수 있는 여러 슬롯을 노출합니다.

    슬롯 이름 설명
    title 타일 헤더에 대한 콘텐츠입니다.
    fullscreen-action 기본 전체 화면 작업 내용을 덮어씁니다.
    maximize-action Overwrite the default maximize action content.
    actions 기본 작업 후에 렌더링된 사용자 지정 콘텐츠.
    side-adorner Overwrite the default horizontal resize adorner.
    corner-adorner Overwrite the default diagonal resize adorner.
    bottom-adorner Overwrite the default vertical resize adorner.

    Header section actions

    기본적으로 헤더 섹션에는 두 개의 작업 버튼이 포함되어 있습니다.

    • The maximize button enlarges the tile's content to fill the entire width of the Tile Manager, offering a wider view of the content.
    • The fullscreen button enables the tile to open in fullscreen mode in the user's browser.
    타일 관리자 행동

    If you want to display just one of the two buttons, you can set either disableMaximize or disableFullscreen property. To customize the appearance you can use the maximize-action slot for the maximize button, or the fullscreen-action slot for the fullscreen button.

    <IgrTileManager>
  <IgrTile disableFullscreen={true}>
    <IgrIconButton slot="maximize-actions" name="north_east" collection="material">
    </IgrIconButton>
    <p>Tile 1 Content</p>
  </IgrTile>
</IgrTileManager>

    또한 두 작업 버튼을 모두 비활성화하고 기본 설정에 따라 사용자 지정 버튼을 만들 수 있는 옵션도 있습니다.

    이 예에서는 Ignite UI Icon Button 구성 요소를 사용하여 사용자 지정 작업 버튼을 만들었습니다.

    Resizing

    타일 관리자의 크기 조정은 세 가지 다른 크기 조정 표시기를 사용하여 타일 크기를 조정할 수 있는 기능입니다.

    • Side Adorner: 열 범위를 수정하여 너비를 조정합니다.
    • 아래쪽 표시기: 행 범위를 수정하여 높이를 조정합니다.
    • 모서리 표시기: 너비와 높이를 동시에 조정합니다.

    부드러운 크기 조정을 위해 타일의 크기를 직접 수정하는 대신 고스트 요소가 사용됩니다. 이 요소는 원래 타일 위에 나타나 크기 조정이 시작될 때 현재 크기를 표시하며 사용자가 크기 조정 핸들을 드래그하면 실시간으로 업데이트됩니다.

    [!Note] If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits.

    Tile Manager는 타일의 크기가 변경될 때 자동으로 재정렬되어 빈 공간이 최소화되도록 합니다. 그렇기 때문에 타일을 확장하면 인접한 타일이 새로운 위치로 밀려날 수 있고, 축소하면 다른 타일이 동적으로 채울 수 있는 틈이 생깁니다. 이렇게 하면 Tile Manager가 겹치는 타일 없이 가능한 한 컴팩트하게 유지되고 모든 이동이 정의된 그리드 구조 내에서 유지됩니다.

    We can use the resizeMode property to control how resizing is applied in the Tile Manager. It can be set to none, hover or always, which determines when the resize adorners are visible. The default value is none and the tile could not be resized.

    <IgrTileManager resizeMode="hover">
  <IgrTile>
    <p>Tile 1</p>
  </IgrTile>
  <IgrTile>
    <p>Tile 2</p>
  </IgrTile>
</IgrTileManager>

    아래 예에서 세 가지 상태의 차이점을 볼 수 있습니다.

    Snapping

    타일은 전체 그리드 단위로 크기가 조정되므로 전체 열 또는 행에 의해서만 확장되거나 축소될 수 있습니다. 고스트 요소는 중간 지점을 지나 확장될 때 다음 열 또는 행으로 스냅되고 중간 지점을 지나 축소될 때 이전 열 또는 행으로 스냅됩니다. 이는 모든 표시기(아래쪽, 측면 및 모서리)에 적용되어 타일이 항상 그리드에 정렬된 상태로 유지되도록 합니다.

    그리드 간격도 고려하여 크기를 조정하는 동안 레이아웃을 일관되게 유지합니다.

    Limitations

    크기 조정 프로세스에는 몇 가지 제약 조건과 제한 사항이 있습니다.

    • A tile cannot be resized smaller than its defined minimum width or height (minColumnWidth, minRowHeight).
    • 바둑판식 배열은 그리드에서 사용 가능한 최대 가로 공간을 초과할 수 없습니다.

    Reorder

    You can reorder tiles in the Tile Manager using the drag-and-drop feature. By default, tiles are not draggable. To enable this functionality, set the dragMode property on the Tile Manager to either tile or tile-header.

    • 이 옵션을 사용하면tile 개별 타일의 아무 곳을 클릭하고 길게 눌러 드래그할 수 있습니다.
    • With the tile-header option, you can only click and hold in the tile's header section to start the dragging process.

    [!Note] While the tile is in maximized or fullscreen state, the tile cannot be dragged.

    크기 조정과 유사하게, 드래그 앤 드롭 프로세스를 시작하면 잡은 타일 아래에 고스트 요소가 나타납니다. 타일을 드래그하면 고스트 요소가 함께 이동하여 다른 타일의 순서를 실시간으로 동적으로 변경합니다. 이렇게 하면 타일을 놓을 때 타일 그리드가 어떻게 보이는지 미리 볼 수 있습니다.

    <IgrTileManager dragMode="tile-header">
  <IgrTile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
</IgrTileManager>

    Serialization

    타일 관리자는 타일의 레이아웃을 관리하는 데 도움이 되는 메서드를 제공합니다.

    • The saveLayout method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order, size and position of all tiles, so you can later restore it to this exact configuration.
    • The loadLayout method enables you to load a previously saved layout. When called, it restores the tiles to the exact state they were in when the layout was saved, including their order, size and position.

    Styling

    You can also customize the appearance of the two components - IgrTileManager and IgrTile. The IgrTileManager exposes only one CSS property - base which can be used for styling the base wrapper of the Tile Manager. The IgrTile exposes several CSS properties we can use:

    부품명 설명
    base 타일 구성 요소의 래핑 컨테이너입니다.
    header title 및 actions 부분을 포함하는 타일의 헤더 컨테이너입니다.
    title 제목 컨테이너입니다.
    actions actions 컨테이너입니다.
    content-container 타일 기본 슬롯을 래핑하는 컨테이너입니다.
    trigger-side The horizontal adorner.
    trigger The diagonal adorner
    trigger-bottom The vertical adorner.

    이러한 CSS 부분을 사용하여 다음과 같이 두 구성 요소의 모양을 사용자 지정할 수 있습니다.

    igc-tile-manager::part(base) {
  background-color: var(--ig-surface-900);
}

igc-tile::part(content-container) {
  color: var(--ig-secondary-200);
}

igc-tile::part(header) {
  background-color: var(--ig-gray-300);
}

igc-tile::part(title) {
  color: var(--ig-primary-400);
}

igc-tile:nth-child(n+2)::part(trigger-side),
igc-tile:nth-child(n+2)::part(trigger-bottom) {
  background-color: var(--ig-success-500);
}

igc-tile:nth-child(n+2)::part(trigger) {
  background-color: var(--ig-error-500);
}

    You can also change the icon of the adorners to a custom one using the side-adorner, corner-adorner, and bottom-adorner slots. For instance:

    <IgrTile>
  <IgrIcon slot="side-adorner" className="side" name="indicator"></IgrIcon>
  <IgrIcon slot="corner-adorner" className="corner" name="indicator"></IgrIcon>
  <IgrIcon slot="bottom-adorner" className="bottom" name="indicator"></IgrIcon>
  <span slot="title">Tile header</span>
</IgrTile>

    API Reference

    Additional Resources