carbon-components
Version:
Carbon Components is a component library for IBM Cloud
83 lines (56 loc) • 5.45 kB
Markdown
### SCSS
#### Variables
All configurable variables are located in [src/globals/scss/\_vars.scss](https://github.com/IBM/carbon-components/blob/master/src/globals/scss/_vars.scss)
| name | description |
| -------------------------- | ----------------------------------------------------------------------------------------- |
| `$structured-list-padding` | Set padding value for structured-list. This will change gutter sizes between table cells. |
#### Mixins
Mixins specific to structured-list are located in [src/components/structured-list/\_mixins.scss](https://github.com/IBM/carbon-components/blob/master/src/components/structured-list/_mixins.scss).
All mixins listed below take an optional `$padding` parameter. Default value for `$padding` is equal to `$structured-list-padding: 2rem !default;`, which can be overwritten.
| name | params | description |
| ------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `padding-td--condensed` | `$padding` | Customizes padding when `.bx--structured-list--condensed` modifier class is used. Default padding is the value of `$structured-list-padding` (`2rem`). |
| `padding--data-structured-list` | `$padding` | Customizes padding. Only used when `[data-structured-list]` attribute is on HTML indicating that this component uses `<input type="radio">` controls. |
| `padding-td` | `$padding` | Customizes padding for `.bx--structured-list-td` |
| `padding-th` | `$padding` | Customizes padding for `.bx--structured-list-th` |
#### Modifiers
Use these modifiers with `.bx--structured-list` class.
| Selector | Description |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `.bx--structured-list--border` | Applies border around structured-list and white background-color |
| `.bx--structured-list--condensed` | Applies condensed styles for all body rows |
| `.bx--structured-list-content--nowrap` | Applies `white-space: nowrap;` on content. Prevents titles from wrapping in small viewports. |
| `.bx--structured-list--selection` | Applies styles used for selection variant of structured-list. |
| `.bx--structured-list-row--selected` | Applies modifier class to label row. This changes the background color to indicate that the row is selected. |
Use these modifiers with `.bx--structured-list-td` class.
| Selector | Description |
| -------------------------------------- | ----------------------------------------- |
| `.bx--structured-list-content--nowrap` | Applies `white-space: nowrap;` on content |
### Javascript
#### Options
| Option | Default Selector | Description |
| --------------------- | ----------------------------------------------------- | ------------------------------------------------ |
| `selectorInit` | `[data-structured-list]` | The selector to find the StructuredList element. |
| `selectorStepElement` | `.bx--structured-list-tbody .bx--structured-list-row` | The selector to find the step element. |
| `classActive` | `'bx--structured-list-row--selected'` | The class to indicate a selected row |
### FAQ
#### Keydown event
Once `StructuredList` instance is initialized, use [structured-list--selection.html](https://github.com/IBM/carbon-components/blob/master/src/components/structured-list/structured-list--selection.html) and users will be able to make row selections with keyboard similar to radio buttons.
- `up` and `down` arrow keys for navigation (focus and select)
- `tab` and `shift + tab` for navigation (focus only)
- `enter` and `space` for selecting
**Chrome**: `up` and `down` arrow keys will set `focus` on `<label>` elements and associated `<input type="radio">` will recieve `checked` attribute via `StructuredList` JavaScript.
**Firefox**: `up` and `down` arrows keys will set focus on `<input type="radio">` through the associated `<label>` and will only set the `checked` attribute on the input. Arrow keys will not set focus on the `<label>`.
#### Add visual styles to text
You can add text to each cell in a structured-list.
Use CSS to add visual styles to text.
**HTML**
```html
<div class="bx--structured-list-td bold">Apache Spark</div>
```
**CSS**
```css
.bold {
font-weight: 700;
}
```