From 8230de3317a47f3e3596a1a6ede592964bdf7ef6 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Fri, 31 May 2024 13:54:55 +0300 Subject: [PATCH 1/3] docs(action-strip): Add action strip topic for Web components --- doc/en/components/inputs/action-strip.md | 195 +++++++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 doc/en/components/inputs/action-strip.md diff --git a/doc/en/components/inputs/action-strip.md b/doc/en/components/inputs/action-strip.md new file mode 100644 index 000000000..fa1c51bcc --- /dev/null +++ b/doc/en/components/inputs/action-strip.md @@ -0,0 +1,195 @@ +--- +title: {Platform} Action Strip | Infragistics +_description: Infragistics' {Platform} Action Strip component represents a template area for one or more actions. The Action Strip requires to be inside a relative container, as it is going to overlay it. +_keywords: {Platform}, UI controls, web widgets, UI widgets, Web Components, {Platform} Action Strip Components, {Platform} Action Strip control, Infragistics +mentionedTypes: ['Action Strip'] +--- + +# {Platform} Action Strip Overview + +The Ignite UI {Platform} Action Strip component provides an overlay area containing one or more actions allowing additional UI and functionality to be shown on top of a specific target container upon user interaction e.g. hover. The container should be positioned relatively as the Action Strip attempts to overlay it and is itself positioned absolutely. Despite overlapped by an Action Strip, the main interactions and user access to the target container remain available. + +
+ +## {Platform} Action Strip Example + +`sample="/inputs/action-strip/action-strip-paragraph", height="400", alt="{Platform} Action Strip Example"` + +
+ +## Getting Started with {Platform} Action Strip + + + +First, you need to install the `igniteui-webcomponents` and `igniteui-webcomponents-grids` by running the following command: + +```cmd +npm install igniteui-webcomponents +npm install igniteui-webcomponents-grids +``` + +For a complete introduction to the {ProductName}, read the [_Getting Started_](../general-getting-started.md) topic. + +You will then need to import the `Action Strip` and its necessary CSS like so: + +```ts +import { IgcActionStripComponent } from "igniteui-webcomponents-grids/grids"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +``` + +Now that you have the {Platform} Action Strip imported, you can start with a basic configuration of the `igc-action-strip` component. + + + +## Using the {Platform} Action Strip + +To initialize and position the Action Strip correctly, it needs to be inside a relatively positioned container: + + + +```html +
+ + + + + +
+
+``` + + + +By default, the Action Strip will be visible, but this can be configured via the `hidden` property. + +### Menu look and feel + + + +For scenarios where more than three action items will be shown, it is best to use the button `slot` of the {Platform} Action Strip. + +```html +
+ +
+``` + + + +`sample="/inputs/action-strip/action-strip-paragraph-menu", height="400", alt="{Platform} Action Strip Example"` + +### Reusing the Action Strip + +The same Action Strip instance can be used in multiple places in the document as long as the actions need not be visible simultaneously for them. + +The Action Strip can change its parent container, which is possible by changing the `context`. The best way to do so is via the `show` API method and passing the `context` as an argument. + +> [!NOTE] +> The `show` API method uses `context` to append the Action Strip to that `element`. + +## Usage in Grids + + + +The Action Strip provides additional functionality and UI for the `igc-grid`. + + + +This can be utilized via grid action components and we are providing two default ones: + + + +- `IgcGridPinningActions` - includes functionality and UI related to grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. +- `IgcGridEditingActions` - includes functionality and UI related to grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the value of the `rowEditable` option of the grid and whether deleting rows is allowed. + + +```html + + + + + + + +``` + + + +> [!NOTE] +> When `IgcActionStrip` is a child component of the grid, hovering a row will automatically show the UI. + + + +`sample="/inputs/action-strip/grid-action-strip", height="600", alt="{Platform} Action Strip Example"` + +> [!NOTE] +> More information about how to use ActionStrip in the grid component could be found [here](/components/grid/row-actions.html). + +## Styling + +The `Action Strip` component exposes `action-strip` CSS part that allows us to style the action strip container. + +```css +igc-action-strip { + --ig-action-strip-background: #005eec; +} +``` + +Also, the `Action Strip Actions's` provide `action-strip-actions` CSS part that could be used to style the buttons in the action strip. + +```css +igc-action-strip { + --ig-action-strip-actions-background: #005eec; +} +``` + +We can even style each button with `base` exposed CSS part of the button component that allows us to style the wrapped element (`