@corejam/core-components
Version:
Corejam - Core Components
237 lines (220 loc) • 29.7 kB
Markdown
# dershop-ui-box
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------- | ------------------ | ----------- | ------------------------------------------------------------------- | ----------------- |
| `alignContent` | `align-content` | | `"around" \| "between" \| "center" \| "end" \| "start"` | `undefined` |
| `animation` | `animation` | | `string` | `undefined` |
| `bColor` | `b-color` | | `string` | `undefined` |
| `bStyle` | `b-style` | | `string` | `undefined` |
| `bWidth` | `b-width` | | `number` | `undefined` |
| `bWidthBottom` | `b-width-bottom` | | `number` | `undefined` |
| `bWidthLeft` | `b-width-left` | | `number` | `undefined` |
| `bWidthRight` | `b-width-right` | | `number` | `undefined` |
| `bWidthTop` | `b-width-top` | | `number` | `undefined` |
| `basis` | `basis` | | `number` | `undefined` |
| `bg` | `bg` | | `string` | `undefined` |
| `bottom` | `bottom` | | `number` | `undefined` |
| `collapse` | `collapse` | | `"collapse" \| "separate"` | `undefined` |
| `direction` | `direction` | | `"col" \| "col-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `display` | `display` | | `"block" \| "flex" \| "inine" \| "none"` | `"block"` |
| `droppableElements` | -- | | `string[]` | `["corejam-box"]` |
| `flex` | `flex` | | `boolean` | `undefined` |
| `flow` | `flow` | | `"column" \| "column-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `grow` | `grow` | | `number` | `undefined` |
| `h` | `h` | | `string` | `undefined` |
| `hide` | `hide` | | `boolean` | `undefined` |
| `hoverBg` | `hover-bg` | | `string` | `undefined` |
| `hoverShadow` | `hover-shadow` | | `string` | `undefined` |
| `items` | `items` | | `"baseline" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `justify` | `justify` | | `"around" \| "between" \| "center" \| "end" \| "evenly" \| "start"` | `undefined` |
| `left` | `left` | | `number` | `undefined` |
| `lgAlignContent` | `lg-align-content` | | `"around" \| "between" \| "center" \| "end" \| "start"` | `undefined` |
| `lgBasis` | `lg-basis` | | `number` | `undefined` |
| `lgBg` | `lg-bg` | | `string` | `undefined` |
| `lgDirection` | `lg-direction` | | `"col" \| "col-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `lgDisplay` | `lg-display` | | `"block" \| "flex" \| "inine" \| "none"` | `undefined` |
| `lgFlow` | `lg-flow` | | `"column" \| "column-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `lgGrow` | `lg-grow` | | `number` | `undefined` |
| `lgH` | `lg-h` | | `string` | `undefined` |
| `lgHide` | `lg-hide` | | `boolean` | `undefined` |
| `lgHoverBg` | `lg-hover-bg` | | `string` | `undefined` |
| `lgIitems` | `lg-iitems` | | `"baseline" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `lgJustify` | `lg-justify` | | `"around" \| "between" \| "center" \| "end" \| "evenly" \| "start"` | `undefined` |
| `lgM` | `lg-m` | | `number` | `undefined` |
| `lgMax` | `lg-max` | | `string` | `undefined` |
| `lgMb` | `lg-mb` | | `number` | `undefined` |
| `lgMl` | `lg-ml` | | `number` | `undefined` |
| `lgMr` | `lg-mr` | | `number` | `undefined` |
| `lgMt` | `lg-mt` | | `number` | `undefined` |
| `lgMx` | `lg-mx` | | `string` | `undefined` |
| `lgMy` | `lg-my` | | `number` | `undefined` |
| `lgOrder` | `lg-order` | | `number` | `undefined` |
| `lgP` | `lg-p` | | `number` | `undefined` |
| `lgPb` | `lg-pb` | | `number` | `undefined` |
| `lgPl` | `lg-pl` | | `number` | `undefined` |
| `lgPr` | `lg-pr` | | `number` | `undefined` |
| `lgPt` | `lg-pt` | | `number` | `undefined` |
| `lgPx` | `lg-px` | | `number` | `undefined` |
| `lgPy` | `lg-py` | | `number` | `undefined` |
| `lgSelf` | `lg-self` | | `"auto" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `lgShow` | `lg-show` | | `string` | `undefined` |
| `lgShrink` | `lg-shrink` | | `number` | `undefined` |
| `lgW` | `lg-w` | | `number \| string` | `undefined` |
| `lgWrap` | `lg-wrap` | | `"no-wrap" \| "wrap" \| "wrap-reverse"` | `undefined` |
| `m` | `m` | | `number` | `undefined` |
| `max` | `max` | | `string` | `undefined` |
| `mb` | `mb` | | `number` | `undefined` |
| `mdAlignContent` | `md-align-content` | | `"around" \| "between" \| "center" \| "end" \| "start"` | `undefined` |
| `mdBasis` | `md-basis` | | `number` | `undefined` |
| `mdBg` | `md-bg` | | `string` | `undefined` |
| `mdDirection` | `md-direction` | | `"col" \| "col-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `mdDisplay` | `md-display` | | `"block" \| "flex" \| "inine" \| "none"` | `undefined` |
| `mdFlow` | `md-flow` | | `"column" \| "column-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `mdGrow` | `md-grow` | | `number` | `undefined` |
| `mdH` | `md-h` | | `string` | `undefined` |
| `mdHide` | `md-hide` | | `boolean` | `undefined` |
| `mdHoverBg` | `md-hover-bg` | | `string` | `undefined` |
| `mdItems` | `md-items` | | `"baseline" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `mdJustify` | `md-justify` | | `"around" \| "between" \| "center" \| "end" \| "evenly" \| "start"` | `undefined` |
| `mdM` | `md-m` | | `number` | `undefined` |
| `mdMax` | `md-max` | | `string` | `undefined` |
| `mdMb` | `md-mb` | | `number` | `undefined` |
| `mdMl` | `md-ml` | | `number` | `undefined` |
| `mdMr` | `md-mr` | | `number` | `undefined` |
| `mdMt` | `md-mt` | | `number` | `undefined` |
| `mdMx` | `md-mx` | | `string` | `undefined` |
| `mdMy` | `md-my` | | `number` | `undefined` |
| `mdOrder` | `md-order` | | `number` | `undefined` |
| `mdP` | `md-p` | | `number` | `undefined` |
| `mdPb` | `md-pb` | | `number` | `undefined` |
| `mdPl` | `md-pl` | | `number` | `undefined` |
| `mdPr` | `md-pr` | | `number` | `undefined` |
| `mdPt` | `md-pt` | | `number` | `undefined` |
| `mdPx` | `md-px` | | `number` | `undefined` |
| `mdPy` | `md-py` | | `number` | `undefined` |
| `mdSelf` | `md-self` | | `"auto" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `mdShow` | `md-show` | | `string` | `undefined` |
| `mdShrink` | `md-shrink` | | `number` | `undefined` |
| `mdW` | `md-w` | | `number \| string` | `undefined` |
| `mdWrap` | `md-wrap` | | `"no-wrap" \| "wrap" \| "wrap-reverse"` | `undefined` |
| `minH` | `min-h` | | `string` | `undefined` |
| `ml` | `ml` | | `number` | `undefined` |
| `mr` | `mr` | | `number` | `undefined` |
| `mt` | `mt` | | `number` | `undefined` |
| `mx` | `mx` | | `string` | `undefined` |
| `my` | `my` | | `number` | `undefined` |
| `order` | `order` | | `number` | `undefined` |
| `overflow` | `overflow` | | `string` | `undefined` |
| `p` | `p` | | `number` | `undefined` |
| `pb` | `pb` | | `number` | `undefined` |
| `pl` | `pl` | | `number` | `undefined` |
| `position` | `position` | | `"absolute" \| "fixed" \| "relative" \| "static" \| "sticky"` | `undefined` |
| `pr` | `pr` | | `number` | `undefined` |
| `pt` | `pt` | | `number` | `undefined` |
| `px` | `px` | | `number` | `undefined` |
| `py` | `py` | | `number` | `undefined` |
| `right` | `right` | | `number` | `undefined` |
| `rounded` | `rounded` | | `string` | `undefined` |
| `roundedBottom` | `rounded-bottom` | | `string` | `undefined` |
| `roundedLeft` | `rounded-left` | | `string` | `undefined` |
| `roundedRight` | `rounded-right` | | `string` | `undefined` |
| `roundedTop` | `rounded-top` | | `string` | `undefined` |
| `self` | `self` | | `"auto" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `shadow` | `shadow` | | `string` | `undefined` |
| `show` | `show` | | `string` | `undefined` |
| `shrink` | `shrink` | | `number` | `undefined` |
| `smAlignContent` | `sm-align-content` | | `"around" \| "between" \| "center" \| "end" \| "start"` | `undefined` |
| `smBasis` | `sm-basis` | | `number` | `undefined` |
| `smBg` | `sm-bg` | | `string` | `undefined` |
| `smDirection` | `sm-direction` | | `"col" \| "col-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `smDisplay` | `sm-display` | | `"block" \| "flex" \| "inine" \| "none"` | `undefined` |
| `smFlow` | `sm-flow` | | `"column" \| "column-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `smGrow` | `sm-grow` | | `number` | `undefined` |
| `smH` | `sm-h` | | `string` | `undefined` |
| `smHide` | `sm-hide` | | `boolean` | `undefined` |
| `smHoverBg` | `sm-hover-bg` | | `string` | `undefined` |
| `smItems` | `sm-items` | | `"baseline" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `smJustify` | `sm-justify` | | `"around" \| "between" \| "center" \| "end" \| "evenly" \| "start"` | `undefined` |
| `smM` | `sm-m` | | `number` | `undefined` |
| `smMax` | `sm-max` | | `string` | `undefined` |
| `smMb` | `sm-mb` | | `number` | `undefined` |
| `smMl` | `sm-ml` | | `number` | `undefined` |
| `smMr` | `sm-mr` | | `number` | `undefined` |
| `smMt` | `sm-mt` | | `number` | `undefined` |
| `smMx` | `sm-mx` | | `string` | `undefined` |
| `smMy` | `sm-my` | | `number` | `undefined` |
| `smOrder` | `sm-order` | | `number` | `undefined` |
| `smP` | `sm-p` | | `number` | `undefined` |
| `smPb` | `sm-pb` | | `number` | `undefined` |
| `smPl` | `sm-pl` | | `number` | `undefined` |
| `smPr` | `sm-pr` | | `number` | `undefined` |
| `smPt` | `sm-pt` | | `number` | `undefined` |
| `smPx` | `sm-px` | | `number` | `undefined` |
| `smPy` | `sm-py` | | `number` | `undefined` |
| `smSelf` | `sm-self` | | `"auto" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `smShow` | `sm-show` | | `string` | `undefined` |
| `smShrink` | `sm-shrink` | | `number` | `undefined` |
| `smW` | `sm-w` | | `number \| string` | `undefined` |
| `smWrap` | `sm-wrap` | | `"no-wrap" \| "wrap" \| "wrap-reverse"` | `undefined` |
| `top` | `top` | | `number` | `undefined` |
| `transition` | `transition` | | `string` | `undefined` |
| `w` | `w` | | `number \| string` | `undefined` |
| `wrap` | `wrap` | | `"no-wrap" \| "wrap" \| "wrap-reverse"` | `undefined` |
| `xlAlignContent` | `xl-align-content` | | `"around" \| "between" \| "center" \| "end" \| "start"` | `undefined` |
| `xlBasis` | `xl-basis` | | `number` | `undefined` |
| `xlBg` | `xl-bg` | | `string` | `undefined` |
| `xlDirection` | `xl-direction` | | `"col" \| "col-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `xlDisplay` | `xl-display` | | `"block" \| "flex" \| "inine" \| "none"` | `undefined` |
| `xlFlow` | `xl-flow` | | `"column" \| "column-reverse" \| "row" \| "row-reverse"` | `undefined` |
| `xlGrow` | `xl-grow` | | `number` | `undefined` |
| `xlH` | `xl-h` | | `string` | `undefined` |
| `xlHide` | `xl-hide` | | `boolean` | `undefined` |
| `xlHoverBg` | `xl-hover-bg` | | `string` | `undefined` |
| `xlItems` | `xl-items` | | `"baseline" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `xlM` | `xl-m` | | `number` | `undefined` |
| `xlMax` | `xl-max` | | `string` | `undefined` |
| `xlMb` | `xl-mb` | | `number` | `undefined` |
| `xlMl` | `xl-ml` | | `number` | `undefined` |
| `xlMr` | `xl-mr` | | `number` | `undefined` |
| `xlMt` | `xl-mt` | | `number` | `undefined` |
| `xlMx` | `xl-mx` | | `string` | `undefined` |
| `xlMy` | `xl-my` | | `number` | `undefined` |
| `xlOrder` | `xl-order` | | `number` | `undefined` |
| `xlP` | `xl-p` | | `number` | `undefined` |
| `xlPb` | `xl-pb` | | `number` | `undefined` |
| `xlPl` | `xl-pl` | | `number` | `undefined` |
| `xlPr` | `xl-pr` | | `number` | `undefined` |
| `xlPt` | `xl-pt` | | `number` | `undefined` |
| `xlPx` | `xl-px` | | `number` | `undefined` |
| `xlPy` | `xl-py` | | `number` | `undefined` |
| `xlSelf` | `xl-self` | | `"auto" \| "center" \| "end" \| "start" \| "stretch"` | `undefined` |
| `xlShow` | `xl-show` | | `string` | `undefined` |
| `xlShrink` | `xl-shrink` | | `number` | `undefined` |
| `xlW` | `xl-w` | | `number \| string` | `undefined` |
| `xlWrap` | `xl-wrap` | | `"no-wrap" \| "wrap" \| "wrap-reverse"` | `undefined` |
| `xljustify` | `xljustify` | | `"around" \| "between" \| "center" \| "end" \| "evenly" \| "start"` | `undefined` |
| `z` | `z` | | `number` | `undefined` |
## Slots
| Slot | Description |
| ----------- | ----------------------------- |
| `"default"` | The box content. \| Type: any |
## Dependencies
### Used by
- [corejam-flash](../Flash)
- [corejam-form-input](../FormInput)
- [corejam-form-select](../FormSelect)
- [corejam-modal](../Modal)
- [corejam-pagination](../Pagination)
### Graph
```mermaid
graph TD;
corejam-flash --> corejam-box
corejam-form-input --> corejam-box
corejam-form-select --> corejam-box
corejam-modal --> corejam-box
corejam-pagination --> corejam-box
style corejam-box fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*