| Version | Tag | Status | API |
|---|---|---|---|
| v1 | - | Deprecated, NOT allowed for generation | - |
Deprecated, NOT allowed for generation. Do not use this component when generating OTTO apps, pages or PDFs.
API from Storybook controls (RowV1.stories.ts)
No generated API page exists for this component; these are the documented controls (argTypes).
| Name | Category | Type | Default | Description |
|---|---|---|---|---|
innerText |
content | Sets the text content of the row. | ||
interactive |
classes | Specifies if the row is interactive. It is recommended to use with selected=true. Set to true to make the row interactive. |
||
selected |
classes | Specifies if the row is selectable. It is recommended to use with interactive=true. Set to true to make the row selectable. |
||
hideDivider |
classes | Specifies if the top divider of the row is hidden. Set to true to hide the divider. |
Overview
Source: ./src/css-only-components/row/Row.mdx
Row
Important
This is a deprecated version of the row component. For the latest version, see the updated component documentation. Refer to this migration guide to update your project to the latest version.
Default
Default
Story: css-only-components-row-deprecated-latest--default · tags: autodocs, components
Default row
Args: innerText=<oc-placeholder-v1 class="oc-headline-100 oc-p-0 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1>
Hide Divider
Hide Divider
Story: css-only-components-row-deprecated-latest--hide-divider · tags: autodocs, components
Row with top divider hidden
<div class="oc-row-v1 oc-row-v1--hide-divider">Label</div>
Args: innerText=<oc-placeholder-v1 class="oc-headline-100 oc-p-0 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1>, hideDivider=true
Interactive
Interactive
Story: css-only-components-row-deprecated-latest--interactive · tags: autodocs, components
Interactive row
<div tabIndex="0" class="oc-row-v1 oc-row-v1--interactive">Label</div>
Args: innerText=<oc-placeholder-v1 class="oc-headline-100 oc-p-0 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1>, interactive=true
InteractiveSelected
Interactive Selected
Story: css-only-components-row-deprecated-latest--interactive-selected · tags: autodocs, components
Interactive selected row
<div tabIndex="0" class="oc-row-v1 oc-row-v1--selected">Label</div>
Args: innerText=<oc-placeholder-v1 class="oc-headline-100 oc-p-0 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1>, interactive=true, selected=true
latest (v1)
Source: ./src/css-only-components/row/v1/RowV1.stories.ts
Story Default:
Story Hide Divider:
Story Interactive:
Story Interactive Selected:
Demo Spacings Overridden
Story: css-only-components-row-deprecated-latest--demo-spacings-overridden · tags: autodocs, components
Args: innerText=<oc-placeholder-v1 class="oc-headline-100 oc-p-0 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1>
Story source (TypeScript, verbatim from Storybook)
{
render: args => {
return `<div class="oc-row-v1 oc-pt-150 oc-pb-25">${args.innerText}</div>`;
},
args: {
innerText: placeholder
}
}
Demo Headline
Story: css-only-components-row-deprecated-latest--demo-headline · tags: autodocs, components
Args: innerText=Headline, hideDivider=true
Story source (TypeScript, verbatim from Storybook)
{
render: args => {
return `<div class="oc-row-v1 oc-row-v1--hide-divider oc-pt-150 oc-pb-25 oc-copy-75" style="text-transform: uppercase; color: var(--oc-base-color-gray-400)">${args.innerText}</div>`;
},
args: {
innerText: "Headline",
hideDivider: true
},
argTypes: disableControls,
parameters: {
controls: {
disabled: true
}
}
}
Demo Icons
Story: css-only-components-row-deprecated-latest--demo-icons · tags: autodocs, components
Story source (TypeScript, verbatim from Storybook)
{
parameters: {
controls: {
disabled: true
}
},
render: () => {
return `
<style>
.oc-row-v1 {
display: flex;
align-items: center;
justify-content: space-between;
}
.oc-row-v1 > oc-icon-v1 {
flex: 0 0 auto;
}
.oc-row-v1 > div {
flex: 1 1 auto;
}
</style>
<a href="#" class="oc-row-v1 oc-row-v1--interactive">
<oc-icon-v1 type="smiley-positive" size="100"></oc-icon-v1>
<div class="oc-copy-100 oc-pl-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<script>
const clickableRows = document.querySelectorAll('.oc-row-v1--interactive');
clickableRows.forEach((row) => {
row.addEventListener('click', (event) => {
event.preventDefault();
});
});
</script>
`;
},
argTypes: disableControls
}
Demo Navigation
Story: css-only-components-row-deprecated-latest--demo-navigation · tags: autodocs, components
Story source (TypeScript, verbatim from Storybook)
{
parameters: {
controls: {
disabled: true
}
},
render: () => {
return `
<style>
.oc-block-v1 {
display: flex;
flex-direction: column;
}
.oc-row-v1 {
display: flex;
align-items: center;
justify-content: space-between;
}
.oc-row-v1 > oc-icon-v1 {
flex: 0 0 auto;
}
.oc-row-v1 > div {
flex: 1 1 auto;
}
</style>
<div class="oc-block-v1">
<a href="#" class="oc-row-v1 oc-row-v1--interactive oc-row-v1--selected">
<div class="oc-pr-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive">
<div class="oc-pr-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive">
<div class="oc-pr-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive">
<div class="oc-pr-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive">
<div class="oc-pr-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive">
<div class="oc-pr-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
</div>
<script>
const clickableRows = document.querySelectorAll('.oc-row-v1--interactive');
clickableRows.forEach((row) => {
row.addEventListener('click', (event) => {
event.preventDefault();
});
});
</script>
`;
},
argTypes: disableControls
}
Demo Interactive List With Images
Story: css-only-components-row-deprecated-latest--demo-interactive-list-with-images · tags: autodocs, components
Story source (TypeScript, verbatim from Storybook)
{
parameters: {
controls: {
disabled: true
}
},
render: () => {
return `
<style>
.oc-block-v1 {
display: flex;
flex-direction: column;
}
.oc-row-v1 {
display: flex;
align-items: center;
justify-content: space-between;
}
.oc-row-v1 > oc-icon-v1 {
flex: 0 0 auto;
}
.oc-row-v1 > div {
flex: 1 1 auto;
}
</style>
<div class="oc-block-v1">
<a href="#" class="oc-row-v1 oc-row-v1--interactive oc-row-v1--selected oc-py-25">
<oc-placeholder-v1 class="oc-br-50 oc-mx-25" variant="image" border-radius="4px" width="40px" height="40px" style="height: 40px"></oc-placeholder-v1>
<div class="oc-px-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive oc-py-25">
<oc-placeholder-v1 class="oc-br-50 oc-mx-25" variant="image" border-radius="4px" width="40px" height="40px"></oc-placeholder-v1>
<div class="oc-px-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive oc-py-25">
<oc-placeholder-v1 class="oc-br-50 oc-mx-25" variant="image" border-radius="4px" width="40px" height="40px"></oc-placeholder-v1>
<div class="oc-px-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive oc-py-25">
<oc-placeholder-v1 class="oc-br-50 oc-mx-25" variant="image" border-radius="4px" width="40px" height="40px"></oc-placeholder-v1>
<div class="oc-px-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive oc-py-25">
<oc-placeholder-v1 class="oc-br-50 oc-mx-25" variant="image" border-radius="4px" width="40px" height="40px"></oc-placeholder-v1>
<div class="oc-px-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
<a href="#" class="oc-row-v1 oc-row-v1--interactive oc-py-25">
<oc-placeholder-v1 class="oc-br-50 oc-mx-25" variant="image" border-radius="4px" width="40px" height="40px"></oc-placeholder-v1>
<div class="oc-px-100">Label</div>
<oc-icon-v1 type="arrow-right" size="100"></oc-icon-v1>
</a>
</div>
<script>
const clickableRows = document.querySelectorAll('.oc-row-v1--interactive');
clickableRows.forEach((row) => {
row.addEventListener('click', (event) => {
event.preventDefault();
});
});
</script>
`;
},
argTypes: disableControls
}
Demo List View
Story: css-only-components-row-deprecated-latest--demo-list-view · tags: autodocs, components
Story source (TypeScript, verbatim from Storybook)
{
parameters: {
controls: {
disabled: true
}
},
render: () => {
return `
<style>
.two-column-layout {
display: flex;
}
.left {
flex: 1 0 40%;
font: var(--oc-semantic-font-copy-100);
font-weight: 700;
}
.right {
flex: 1 0 60%;
font: var(--oc-semantic-font-copy-100);
}
</style>
<dl class="oc-block-v1">
<div class="oc-row-v1 two-column-layout">
<dt class="left">Funktionen</dt>
<dd class="right">3D-Audio<br>Mikrofon integriert</dd>
</div>
<div class="oc-row-v1 two-column-layout">
<dt class="left">Sensoren</dt>
<dd class="right">Magnetometer</dd>
</div>
<div class="oc-row-v1 two-column-layout">
<dt class="left">Bedienelemente</dt>
<dd class="right">Stick<br>Tasten<br>Touch Plus Controller</dd>
</div>
</dl>
`;
},
argTypes: disableControls
}