Skip to main content

anchor

Anchor​

from dara.components.common.anchor import Anchor

@discover
class Anchor(ModifierComponent)

Anchor

The anchor component can be used to add links to your app. You can either add one to an external website or to somewhere else within the same page of your app. If within the same page the page will scroll to the place where the anchor was defined.

Example: link to some external resource

from dara.components.common import Anchor

Anchor('My link', href='https://www.causalens.com/', new_tab=True)

Example: anchor as a link to somewhere within the same page of your app

from dara.components.common import Anchor, Text, Stack

Stack(
    Anchor('Click here to scroll to anchor', href='`test_anchor`'),
    Text('Large gap', height='100vh'),
    Anchor(Text('Scrolled to here!!!'), name='test_anchor'),
)

Arguments:

  • href: the destination link for this anchor
  • name: a unique name for this anchor, so it can be linked to by another
  • clean: whether to remove all styling from the anchor
  • new_tab: whether to open the link in a new tab

Attributes​

  • href: Optional[str]
  • name: Optional[str]
  • clean: bool
  • new_tab: bool