@itrocks/action-bar
Version:
CSS for action button bars with flexible layout and basic styling
195 lines (139 loc) • 6.3 kB
Markdown
[](https://www.npmjs.org/package/@itrocks/action-bar)
[](https://www.npmjs.org/package/@itrocks/action-bar)
[](https://github.com/itrocks-ts/action-bar)
[](https://github.com/itrocks-ts/action-bar/issues)
[](https://25.re/ditr)
# action-bar
CSS for action button bars with flexible layout and basic styling.
*This documentation was written by an artificial intelligence and may contain errors or approximations.
It has not yet been fully reviewed by a human. If anything seems unclear or incomplete,
please feel free to contact the author of this package.*
## Installation
```bash
npm i @itrocks/action-bar
```
Include the generated CSS in your HTML, either directly from `node_modules`
or via your usual bundler / asset pipeline.
```html
<link href="./node_modules/@itrocks/action-bar/action.css" rel="stylesheet">
```
## Usage
`@itrocks/action-bar` provides a small set of CSS classes to display
action buttons as a flexible horizontal bar.
At its core, you:
1. Wrap your actions in a `<ul class="actions">` list.
2. Put each action inside a `<li>` element.
3. Use a clickable element (`<button>`, `<a>`, `<input type="submit">`,
etc.) inside each `<li>`.
The stylesheet takes care of:
- horizontal layout with wrapping when there is not enough space,
- basic button look (border, background, hover effect),
- consistent padding so there is room for an optional icon on the left.
### Minimal example
```html
<link href="./node_modules/@itrocks/action-bar/action.css" rel="stylesheet">
<ul class="actions">
<li><button type="submit" name="save">Save</button></li>
<li><button type="submit" name="cancel">Cancel</button></li>
</ul>
```
This renders two buttons side by side, with a small gap between them and a
neutral default styling.
### Example with general / selection bars and icons
In a typical it.rocks application you often have two distinct action bars:
- a **general** bar for actions that apply to the whole page,
- a **selection** bar for actions that apply to the current selection
(for example selected rows in a table).
```html
<link href="./node_modules/@itrocks/action-bar/action.css" rel="stylesheet">
<!-- General actions at the top of a page -->
<ul class="actions general">
<li>
<button type="button" class="new" style="background-image: url('/icons/add.svg')">
New
</button>
</li>
<li>
<button type="submit" class="search" style="background-image: url('/icons/search.svg')">
Search
</button>
</li>
</ul>
<!-- Selection‑based actions below a list or table -->
<ul class="actions selection">
<li>
<button type="submit" class="delete" style="background-image: url('/icons/delete.svg')">
Delete selected
</button>
</li>
</ul>
```
Only the layout and base look (padding, border, hover background) come from
`@itrocks/action-bar`; the icon is provided by a `background-image` (inline
style in the example above, but most projects use dedicated CSS classes
instead).
## API
The package exposes a single stylesheet, `action.css`, which defines a few
CSS selectors. There is no JavaScript API.
### `ul.actions`
Turns an unordered list into a horizontal action bar.
- Display: `flex` with wrapping enabled (`flex-wrap: wrap`).
- Spacing: `gap: 5px`, `padding: 5px`, no default margin.
- Intended children: `<li>` elements, each containing one clickable
element.
#### `ul.actions.general`
General action bar, usually displayed at the top of a page or card.
- Adds a bottom border: `border-bottom: 1px solid #ccc`.
#### `ul.actions.selection`
Selection‑based action bar, usually displayed below a list or table
to act on the current selection.
- Adds a top border: `border-top: 1px solid #ccc`.
### `.action`
Generic class for standalone actions or for use on the clickable element
inside an action bar.
- Pointer cursor.
- Base padding: `4px 8px 4px 26px` (left padding keeps room for an icon).
- Line height: `16px`.
You can apply `.action` on:
- a button that is not inside a `.actions` list but should look the
same as the others;
- an `<input type="submit">` rendered by other components (for example
the `search` submit button in the movie search form of this project).
### Shared styles for `.action` and `ul.actions > li`
Both standalone actions and list items share the same visual treatment:
- white background,
- 1‑pixel grey border with a small radius,
- inline‑block display,
- smooth background hover transition,
- support for an optional background icon:
- `background-position: left center`,
- `background-repeat: no-repeat`,
- `background-size: 24px`.
You are expected to provide the icon yourself by setting
`background-image` (directly or via a custom CSS class).
### `ul.actions > li > *`
Normalises the content of each list item (typically a link, button
or input):
- same line height and padding as `.action` (`4px 8px 4px 26px`).
### `ul.actions > li > a`
Ensures links inside an action bar behave like buttons:
- displayed as `inline-block` so that padding and hover styles apply
properly.
### `ul.actions > li > input`
Resets the browser’s default styling for inputs so they match other
actions:
- transparent background,
- no border,
- pointer cursor.
## Typical use cases
- Grouping several **form submit** buttons (search, save, reset, export)
into a consistent horizontal bar.
- Displaying **page‑level actions** (new, duplicate, delete, back) at the
top or bottom of an entity screen.
- Providing **selection actions** below a table or list (delete selected,
export selected, mark as read, etc.).
- Styling a few **standalone buttons** with the same look as the global
action bars by simply applying the `.action` class.
- Integrating with the rest of the it.rocks UI stack, for example in
association with `@itrocks/list`, `@itrocks/edit` or custom pages
that need a compact, reusable action area.