Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: horizontal scroll PTL-1610 #1983

Merged
merged 2 commits into from
Nov 28, 2024
Merged

docs: horizontal scroll PTL-1610 #1983

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13ee22e
docs: horizontal scroll PTL-1610
Gareth-Spencer-Genesis Nov 28, 2024
fda120a
docs: horizontal scroll PTL-1610
Gareth-Spencer-Genesis Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { CodeSection } from "../../../../../examples/ui/documentationBase.js";
import useIsBrowser from "@docusaurus/useIsBrowser";
import {useRef} from "react";

function setup() {
// Setup
const isBrowser = useIsBrowser();
if (isBrowser) {
const RapidImports = require("../../../../../examples/ui/rapidImports");
RapidImports.registerComponents();
}
}

export default function HorizontalScrollDemo({ children, color }) {
setup();
return (
<CodeSection>
<div style={{ color: 'var(--neutral-foreground-rest)', width: '-webkit-fill-available'}}>
<div style={{ display: 'flex', flexWrap: 'wrap', width: '100%', flexDirection: 'row', justifyContent: 'space-evenly' }}>
<rapid-horizontal-scroll style={{ width: '100%' }} flippers-hidden-from-at>
<rapid-card>
Card number 1
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 2
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 3
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 4
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 5
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 6
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 7
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 8
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 9
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 10
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 11
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 12
<rapid-button>A button</rapid-button>
</rapid-card>
</rapid-horizontal-scroll>



</div>
</div>
</CodeSection>
)
}
216 changes: 216 additions & 0 deletions docs/001_develop/03_client-capabilities/009_presentation/horizontal-scroll.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
---
title: 'Horizontal Scroll'
sidebar_label: 'Horizontal Scroll'
id: client-presentation-horizontal-scroll
keywords: [presentation, horizontal, scroll]
tags:
- presentation
- horizontal scroll
sidebar_position: 9
---

import HorizontalScrollDemo from './examples/horizontal-scroll';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Progress
Gareth-Spencer-Genesis marked this conversation as resolved.
Show resolved Hide resolved

An implementation of a content scroller as a Web Component.
Gareth-Spencer-Genesis marked this conversation as resolved.
Show resolved Hide resolved

Use cases:
-
Gareth-Spencer-Genesis marked this conversation as resolved.
Show resolved Hide resolved

## Example

<HorizontalScrollDemo />

<Tabs defaultValue="genesis" values={[{ label: 'Genesis', value: 'genesis', }, { label: 'React', value: 'react', }, { label: 'Angular', value: 'angular', }]}>

<TabItem value="genesis">

Declaration
```html
<rapid-horizontal-scroll></rapid-horizontal-scroll>
```

Usage
```typescript
@customElement({
name: 'my-element',
template: html`
<rapid-horizontal-scroll>
<rapid-card>
Card number 1
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 2
<rapid-button>A button</rapid-button>
</rapid-card>
</rapid-horizontal-scroll>
`,
})
export class MyElement extends GenesisElement {
}
```

</TabItem>
<TabItem value="react">

Declaration
```html
<rapid-horizontal-scroll></rapid-horizontal-scroll>
```
Usage
```typescript
export function MyComponent() {
return (
<rapid-horizontal-scroll>
<rapid-card>
Card number 1
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 2
<rapid-button>A button</rapid-button>
</rapid-card>
</rapid-horizontal-scroll>
);
}
```
</TabItem>
<TabItem value="angular">

Declaration
```html
<rapid-horizontal-scroll></rapid-horizontal-scroll>
```

Usage
```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'my-root',
template: `
<rapid-horizontal-scroll>
<rapid-card>
Card number 1
<rapid-button>A button</rapid-button>
</rapid-card>
<rapid-card>
Card number 2
<rapid-button>A button</rapid-button>
</rapid-card>
</rapid-horizontal-scroll>
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}
```
</TabItem>
</Tabs>

Gareth-Spencer-Genesis marked this conversation as resolved.
Show resolved Hide resolved
## API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

### Attributes



<table>
<thead><tr><th>Name</th><th>Type</th><th>Description</th><th>Example</th></tr></thead>
<tbody>
<tr>
<td>speed</td>
<td><code>number</code></td>
<td>Speed of scroll in pixels per second. **Default: 600**</td>
<td>

```typescript
<rapid-horizontal-scroll speed="750">
```

</td>
</tr>
<tr>
<td>duration</td>
<td><code>string</code></td>
<td>The CSS time value for the scroll transition duration. Overrides the `speed` attribute. When `duration` is set, the `speed` attribute has no effect.</td>
<td>

```typescript
<rapid-horizontal-scroll duration="300">
```

</td>
</tr>
<tr>
<td>easing</td>
<td><code>"linear" | "ease-in" | "ease-out" | "ease-in-out" | string</code></td>
<td>The easing value of the scroll. **Default "ease-out"**</td>
<td>

```typescript
<rapid-horizontal-scroll easing="ease-in">
```

</td>
</tr>
<tr>
<td>flippers-hidden-from-at</td>
<td><code>boolean</code></td>
<td>Whether the flippers are hidden from assistive technology. **Default: false**</td>
<td>

```typescript
<rapid-horizontal-scroll flippers-hidden-from-at>
```

</td>
</tr>
<tr>
<td>view</td>
<td><code>"default" | "mobile"</code></td>
<td>View for this component. **Default: default**</td>
<td>

```typescript
<rapid-horizontal-scroll view="mobile">
```

</td>
</tr>
</tbody>
</table>

### Properties
This component doesn't have any properties which are not also controlled via attributes.

### Slots
| Name | Description |
|---|---|
Gareth-Spencer-Genesis marked this conversation as resolved.
Show resolved Hide resolved
| start | Content which can be provided before the scroll area |
| end | Content which can be provided after the scroll area |

### Parts
| Name | Description |
|---|---|
| scroll-area | Wraps the entire scrollable region. |
| scroll-view | The visible scroll area. |
| content-container | The container for the content. |
| scroll-prev | The previous flipper container. |
| scroll-action-previous | The element wrapping the previous flipper. |
| scroll-next | The next flipper container. |
| scroll-action-next | The element wrapping the next flipper. |

### Events fired
| Name | Description |
|---|---|
| scrollstart | Fires a custom 'scrollstart' event when scrolling |
| scrollend | Fires a custom 'scrollend' event when scrolling stops |

### Events listened to
This component doesn't listen to any events.