mirror of
https://github.com/HSLdevcom/digitransit-ui
synced 2025-07-08 04:00:38 +02:00
98 lines
3.4 KiB
Markdown
98 lines
3.4 KiB
Markdown
# @digitransit-component/digitransit-component-control-panel
|
|
|
|
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
|
|
|
|
## NearStopsAndRoutes
|
|
|
|
Show button links to near you page for different travel modes
|
|
|
|
### Parameters
|
|
|
|
- `props` **[Object][1]**
|
|
- `props.modes` **[Array][2]<[string][3]>** Names of transport modes to show buttons for. Should be in lower case. Also defines button order
|
|
- `props.urlPrefix` **[string][3]** URL prefix for links. Must end with /lahellasi
|
|
- `props.language` **[string][3]** Language used for accessible labels
|
|
- `props.showTitle` **[boolean][4]** Show title, default is false
|
|
- `props.alertsContext` **[Object][1]**
|
|
- `props.alertsContext.getModesWithAlerts` **[function][5]** Function which should return an array of transport modes that have active alerts (e.g. [BUS, SUBWAY])
|
|
- `props.alertsContext.currentTime` **[Number][6]** Time stamp with which the returned alerts are validated with
|
|
- `props.alertsContext.feedIds` **[Number][6]** feedIds for which the alerts are fetched for
|
|
- `props.LinkComponent` **[element][7]** React component for creating a link, default is undefined and normal anchor tags are used
|
|
- `props.origin`
|
|
- `props.omitLanguageUrl`
|
|
|
|
### Examples
|
|
|
|
```javascript
|
|
const alertsContext = {
|
|
getModesWithAlerts: () => ({}),
|
|
currentTime: 123456789,
|
|
feedIds: [HSL]
|
|
}
|
|
<CtrlPanel.NearStopsAndRoutes
|
|
modes={['bus', 'tram', 'subway', 'rail', 'ferry', 'citybike']}
|
|
language="fi"
|
|
urlPrefix="http://example.com/lahellasi"
|
|
showTitle
|
|
alertsContext={alertsContext}
|
|
/>
|
|
```
|
|
|
|
## CtrlPanel
|
|
|
|
**Extends React.Component**
|
|
|
|
CtrlPanel gathers multiple components to same area (desktop-size: left or mobile-size: bottom)
|
|
|
|
### Examples
|
|
|
|
```javascript
|
|
<CtrlPanel language="fi" position="left">
|
|
<CtrlPanel.OriginToDestination showTitle />
|
|
<CtrlPanel.SeparatorLine />
|
|
<CtrlPanel.NearStopsAndRoutes
|
|
modes={['bus', 'tram', 'subway', 'rail', 'ferry', 'citybike']}
|
|
language="fi"
|
|
urlPrefix="http://example.com/lahellasi"
|
|
showTitle
|
|
/>
|
|
</CtrlPanel>
|
|
```
|
|
|
|
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
|
|
|
|
[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
|
|
|
|
[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
|
|
|
|
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
|
|
|
|
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
|
|
|
|
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
|
|
|
|
[7]: https://developer.mozilla.org/docs/Web/API/Element
|
|
|
|
<!-- This file is automatically generated. Please don't edit it directly:
|
|
if you find an error, edit the source file (likely index.js), and re-run
|
|
./scripts/generate-readmes in the digitransit-component project. -->
|
|
|
|
---
|
|
|
|
This module is part of the Digitransit-ui project. It is maintained in the
|
|
[HSLdevcom/digitransit-ui](https://github.com/HSLdevcom/digitransit-ui) repository, where you can create
|
|
PRs and issues.
|
|
|
|
### Installation
|
|
|
|
Install this module individually:
|
|
|
|
```sh
|
|
$ npm install @digitransit-component/digitransit-component-control-panel
|
|
```
|
|
|
|
Or install the digitransit-component module that includes it as a class:
|
|
|
|
```sh
|
|
$ npm install @digitransit-component/digitransit-component
|
|
```
|