<PopupActionLink />

Constructor

PropTypes:
Name Type Required Description Default
title union Yes The title of the action item (if a custom child component is not specified)
children node No The content of the action item (takes precendence over `title`)
disabled bool No Determines if the action item should be disabled
onClick func No Callback fired when the action item is clicked () => {}
style object No Styles applied to
feature object No OpenLayers feature on which the action is being done
href string Yes Link to open when action item is clicked
target enum No Determines how link should be open - _blank means new tab '_blank'
windowFeatures array No A DOMString containing a comma-separated list of window features given with their corresponding values in the form "name=value". See https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features for more details

View Source Popup/PopupInsert/PopupActionLink/index.js, line 11

Example

Examples

A PopupActionLink is a list item which renders within a popup. You can pass PopupActionLink a simple string title and bind an onClick to do whatever you wish when a user selects the item. If an item should be disabled, pass disabled={true} and your onClick won't be called when the item is clicked.

return (
  <Popup show={true} pixel={[50, 10]} inline={true}>
    <PopupActionLink title="My Action" href="https://ol-kit.com" />
    <PopupActionLink disabled={true} title="Disabled Action" href="https://ol-kit.com" />
  </Popup>
)

If you desire to completely customize your action item, pass a child component into the PopupActionLink to render a completely custom item.

return (
  <Popup show={true} pixel={[50, 10]} inline={true}>
    <PopupActionLink title="My Action" href="#" />
    <PopupActionLink href="#">
      <div style={{background: '#ec0000', padding: '20px', color: 'white'}}>
        <i className="zmdi zmdi-delete" style={{ paddingRight: '20px'}}></i>
        Custom Danger Action
      </div>
    </PopupActionLink>
  </Popup>
)