mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Card: make elements in metadata clickable (#46336)
* Card: make elements in metadata clickable * add docs
This commit is contained in:
parent
52decfaebc
commit
8b9e27c4ba
@ -126,7 +126,7 @@ Tags can be rendered inside the Card, by being wrapped in `Card.Tags` component.
|
||||
|
||||
### As a link
|
||||
|
||||
Card can be used as a clickable link item by specifying `href` prop. In this case the Card's content will be rendered inside `a`.
|
||||
Card can be used as a clickable link item by specifying `href` prop.
|
||||
|
||||
```jsx
|
||||
<Card href="https://grafana.com">
|
||||
@ -142,6 +142,45 @@ Card can be used as a clickable link item by specifying `href` prop. In this cas
|
||||
</Card>
|
||||
</Preview>
|
||||
|
||||
### As a button
|
||||
|
||||
Card can be used as a clickable buttons item by specifying `onClick` prop.
|
||||
|
||||
```jsx
|
||||
<Card onClick={() => alert('Hello, Grafana!')}>
|
||||
<Card.Heading>Hello, Grafana</Card.Heading>
|
||||
<Card.Description>Clicking this card will create an alert</Card.Description>
|
||||
</Card>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Card onClick={() => alert('Hello, Grafana!')}>
|
||||
<Card.Heading>Hello, Grafana</Card.Heading>
|
||||
<Card.Description>Clicking this card will create an alert</Card.Description>
|
||||
</Card>
|
||||
</Preview>
|
||||
|
||||
> **Note**: When used in conjunction with [Metadata elements](#multiple-metadata-elements), clicking on any element
|
||||
> inside `<Card.Meta>` will prevent the card action to be executed (either `href` to be followed or `onClick` to be called).
|
||||
>
|
||||
> Example:
|
||||
|
||||
```jsx
|
||||
<Card onClick={() => alert('Hello, Grafana!')}>
|
||||
<Card.Heading>Hello, Grafana</Card.Heading>
|
||||
<Card.Meta>Clicking on this text (Meta) WILL NOT trigger the alert!</Card.Meta>
|
||||
<Card.Description>Clicking on this text (Description) WILL trigger the alert!</Card.Description>
|
||||
</Card>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Card onClick={() => alert('Hello, Grafana!')}>
|
||||
<Card.Heading>Hello, Grafana</Card.Heading>
|
||||
<Card.Meta>Clicking on this text (Meta) WILL NOT trigger the alert!</Card.Meta>
|
||||
<Card.Description>Clicking on this text (Description) WILL trigger the alert!</Card.Description>
|
||||
</Card>
|
||||
</Preview>
|
||||
|
||||
### Inside a list item
|
||||
|
||||
To render cards in a list, it is possible to nest them inside `li` items.
|
||||
|
@ -261,6 +261,7 @@ const getMetaStyles = (theme: GrafanaTheme2) => ({
|
||||
margin: theme.spacing(0.5, 0, 0),
|
||||
lineHeight: theme.typography.bodySmall.lineHeight,
|
||||
overflowWrap: 'anywhere',
|
||||
zIndex: 0,
|
||||
}),
|
||||
separator: css({
|
||||
margin: `0 ${theme.spacing(1)}`,
|
||||
|
Loading…
Reference in New Issue
Block a user