docs(tile-manager): additional tile manager doc changes #1460
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
adrianptrv
added
status: in-development 🛠️
gedinakova
requested changes
Mar 11, 2025
|
|
||
| ### Columns | ||
|
|
||
| We can specify the number of grid columns for our Tile Manager. To do this, simply set the `column-count` property to the desired number of columns. If the number is less than one, the Tile Manager will create as many columns as can fit, with each column being at least 20px wide and expanding to equally share the available space. |
There was a problem hiding this comment.
I believe the default width is 200px.
Suggested change
| We can specify the number of grid columns for our Tile Manager. To do this, simply set the `column-count` property to the desired number of columns. If the number is less than one, the Tile Manager will create as many columns as can fit, with each column being at least 20px wide and expanding to equally share the available space. | |
| We can specify the number of grid columns for our Tile Manager. To do this, simply set the `column-count` property to the desired number of columns. If the number is less than one, 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. |
| We also have properties for setting the minimum width of the columns (`min-column-width`) and the minimum height of the rows (`min-row-height`) 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. | ||
|
|
||
| ```html | ||
| <igc-tile-manager min-column-widt="200px" min-row-height="150px"> |
There was a problem hiding this comment.
Suggested change
| <igc-tile-manager min-column-widt="200px" min-row-height="150px"> | |
| <igc-tile-manager min-column-width="200px" min-row-height="150px"> |
| There are several constraints and limitations in the resizing process: | ||
|
|
||
| - A tile cannot be resized smaller than its defined minimum width or height (minColWidth, minRowHeight). | ||
| - A tile cannot exceed the maximum available space in the grid. If a tile starts at a specific column or row, and the user tries to resize it beyond the visible grid area, it will only expand up to the maximum available columns or rows from its starting position. |
There was a problem hiding this comment.
"A tile cannot exceed the maximum available space in the grid." - This restriction is valid for horizontal space only.
"If a tile starts at a specific column or row, and the user tries to resize it beyond the visible grid area, it will only expand up to the maximum available columns or rows from its starting position." - Since yesterday, we removed this restriction so now even tiles in the last column could be resized to the maximum column-span as long as there's room to resize to the right.
|
|
||
| The Tile Manager provides methods that help manage the layout of tiles: | ||
|
|
||
| - The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order and positions of all tiles, so you can later restore it to this exact configuration. |
There was a problem hiding this comment.
Suggested change
| - The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order and positions of all tiles, so you can later restore it to this exact configuration. | |
| - 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 Tile Manager provides methods that help manage the layout of tiles: | ||
|
|
||
| - The `saveLayout` method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order and positions 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 Tile Manager to the exact state it was in when the layout was saved, including the order and positions of the tiles. |
There was a problem hiding this comment.
Suggested change
| - The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order and positions of the tiles. | |
| - The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order, size and position of the tiles. |
| | `trigger` | The diagonal adorner | | ||
| | `trigger-bottom` | The vertical adorner. | | ||
|
|
||
| Using these CSS parts you can customize the appearance of the three components as follows: |
There was a problem hiding this comment.
Suggested change
| Using these CSS parts you can customize the appearance of the three components as follows: | |
| Using these CSS parts you can customize the appearance of the two components as follows: |
gedinakova
previously approved these changes
Mar 11, 2025
mtsvyatkova
reviewed
Mar 11, 2025
|
|
||
| # {Platform} Tile Manager Overview | ||
|
|
||
| The `igc-tile-manager` component enables the display of content in individual tiles. It allows users to interact with these tiles by rearranging and resizing them, giving them the freedom to customize the layout and appearance of the content according to their preferences. This flexibility enhances the user experience by enabling a more personalized and efficient way to view and manage content. |
There was a problem hiding this comment.
Suggested change
| The `igc-tile-manager` component enables the display of content in individual tiles. It allows users to interact with these tiles by rearranging and resizing them, giving them the freedom to customize the layout and appearance of the content according to their preferences. This flexibility enhances the user experience by enabling a more personalized and efficient way to view and manage content. | |
| The {Platform} Tile Manager component enables the display of content in individual tiles. It allows users to interact with these tiles by rearranging and resizing them, giving them the freedom to customize the layout and appearance of the content according to their preferences. This flexibility enhances the user experience by enabling a more personalized and efficient way to view and manage content. |
|
|
||
| <img src="../../images/tile-manager-actions.png" /> | ||
|
|
||
| If you want to display just one of the two buttons, you can set it as a slot attribute within the Tile component. Use the `maximize-action` value to show only the maximize button, or the `fullscreen-action` value to show only the fullscreen button. |
There was a problem hiding this comment.
The default action buttons could be removed by setting the corresponding properties disableMaximize or disableFullscreen. The slots are used in case the appearance of the button should be changed.
Suggested change
| If you want to display just one of the two buttons, you can set it as a slot attribute within the Tile component. Use the `maximize-action` value to show only the maximize button, or the `fullscreen-action` value to show only the fullscreen button. | |
| If you want to display just one of the two buttons, you can set either `disable-maximize` or `disable-fullscreen` attributes. To customize the appearance use the `maximize-action` slot for the maximize button, or the `fullscreen-action` slot for the fullscreen button. |
|
|
||
| ```html | ||
| <igc-tile-manager> | ||
| <igc-tile> |
There was a problem hiding this comment.
Suggested change
| <igc-tile> | |
| <igc-tile disable-fullscreen> |
|
|
||
| The Tile Manager automatically rearranges itself when a tile changes size, ensuring that there is minimal empty space. That's why expanding a tile may push adjacent tiles into new positions, while shrinking creates gaps that other tiles may fill dynamically. This ensures that the Tile Manager stays as compact as possible, without any overlapping tiles, and that all movements remain within the defined grid structure. | ||
|
|
||
| We can use the `resize-mode` property to control how resizing is applied in the Tile Manager. It can be set to either `hover` or `always`, which determines when the resize adorners are visible. |
There was a problem hiding this comment.
Suggested change
| We can use the `resize-mode` property to control how resizing is applied in the Tile Manager. It can be set to either `hover` or `always`, which determines when the resize adorners are visible. | |
| We can use the `resize-mode` 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. Default value is `none` and the tile could not be resized. |
| </igc-tile-manager> | ||
| ``` | ||
|
|
||
| You can see the difference between the two states in the example below: |
There was a problem hiding this comment.
Suggested change
| You can see the difference between the two states in the example below: | |
| You can see the difference between the three states in the example below: |
| The Tile Manager provides methods that help manage the layout of tiles: | ||
|
|
||
| - 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 Tile Manager to the exact state it was in when the layout was saved, including the order, size and position of the tiles. |
There was a problem hiding this comment.
Suggested change
| - The `loadLayout` method enables you to load a previously saved layout. When called, it restores the Tile Manager to the exact state it was in when the layout was saved, including the order, size and position of the tiles. | |
| - 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. |
| ```html | ||
| <igc-tile-manager> | ||
| <igc-tile> | ||
| <div slot="maximize-action"></div> |
There was a problem hiding this comment.
May be we could show some icon for the maximize-action here
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Additional Tile Manager topic changes