Link-Komponente für Stripe-Apps

Links werden verwendet, um Nutzer/innen von einer Seite zur nächsten zu leiten. Außerdem dienen sie für Aktionen, die mehr Subtilität erfordern als eine Schaltfläche bietet.

SDK-Version

So fügen Sie Ihrer App die Link Komponente hinzu:

import {Link} from '@stripe/ui-extension-sdk/ui';

Bei den Stripe-Produkten gibt es zwei Arten von Links: primäre und sekundäre.

Beispiel wird geladen ...

<Link href="https://www.stripe.com">Primary link</Link>
<Link type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

Verknüpfungseigenschaften

Eigenschaft	Typ
`children`	Pflichtfeld `React.ReactNode` Der Inhalt der Komponente.
`css`	Optional `CSS \| undefined` Verwandte Typen: CSS.
`disabled`	Optional `boolean \| undefined` Ob die Aktion deaktiviert ist.
`external`	Optional `boolean \| undefined` Ob eine Verknüpfung mit einer externen Ressource erfolgt.
`href`	Optional `string \| undefined` Natives `href`.
`onPress`	Optional `((event: PressEvent) => void) \| undefined` Handler, der aufgerufen wird, wenn die Presse über dem Ziel losgelassen wird.
`rel`	Optional `string \| undefined` Natives `rel`-Attribut.
`tabIndex`	Optional `number \| undefined` Setzt das Standardverhalten der Tabulatortasten außer Kraft. Vermeiden Sie die Verwendung anderer Werte als `-1` und `0`.
`target`	Optional `("_self" \| "_blank" \| "_top" \| "_parent") \| undefined` Wo die verlinkte URL als Name für einen Browserkontext angezeigt werden soll.
`type`	Optional `("primary" \| "secondary") \| undefined` Der Typ des `Link`.
`className`	OptionalVeraltet `string \| undefined`

CSS

Eigenschaft Typ

Eigenschaft	Typ
`alignX`	Optional `("start" \| "center" \| "end" \| "stretch") \| undefined` Horizontale Ausrichtung. Siehe Layout-Eigenschaften für weitere Informationen.
`width`	Optional `(number \| "auto" \| "fill" \| "min" \| "max" \| "fit" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| "1/12" \| "2/12" \| "3/12" \| "4/12" \| "5/12" \| "6/12" \| "7/12" \| "8/12" \| "9/12" \| "10/12" \| "11/12") \| undefined` Die Breite der Komponente. Siehe Größenanpassung für weitere Informationen.

alignX

Optional

("start" | "center" | "end" | "stretch") | undefined

Horizontale Ausrichtung. Siehe Layout-Eigenschaften für weitere Informationen.

width

Optional

(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined

Die Breite der Komponente. Siehe Größenanpassung für weitere Informationen.

Primärer Link

Der Standardstil für Links ist der primäre Stil. Dieser sollte verwendet werden, wenn Links zu externen Ressourcen oder zu anderen Seiten innerhalb der Anwendung erstellt werden.

Beispiel wird geladen ...

<Link href="https://www.stripe.com">Primary link</Link>
<Link external href="https://www.example.com">
  External primary link
</Link>

Sekundärer Link

Verwenden Sie sekundäre Links in den folgenden Fällen:

Wenn ein Link andernfalls mit einer anderen benachbarten wichtigen Schaltfläche oder einem Link in Konflikt geraten würde.
Wenn eine Seite zahlreiche Elemente darstellt, die jeweils ein Link sind. Da eine Seite mit vielen primären Links überfordernd sein könnte, verwenden wir in solchen Fällen sekundäre Links.
Bei der Verlinkung mit einem Objekt wie einem/einer Kund/in, einer Zahlung, einem Produkt usw. Überall dort, wo die Nutzeroberfläche auf diese Objekte verweist, sollten sie auch verlinkt sein. Verwenden Sie den sekundären Stil, um ein visuelles Durcheinander zu vermeiden, da zahlreiche Objekte auf einer Seite verlinkt sein können.

Beispiel wird geladen ...

<Link type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

Deaktivierte Links

Beispiel wird geladen ...

<Link disabled href="https://www.stripe.com">
  Primary link
</Link>
<Link disabled type="secondary" href="https://www.stripe.com">
  Secondary link
</Link>

Links in neuen Registerkarten öffnen

Beispiel wird geladen ...

<Link href="https://stripe.com" target="_blank">
  Open link in new tab
</Link>

Zulässige href-Werte

Das Attribut „href“ unterstützt relative URLs und http- oder https-URLs. Andere Werte werden zur Laufzeit bereinigt.

Link-Komponente für Stripe-Apps

Links werden verwendet, um Nutzer/innen von einer Seite zur nächsten zu leiten. Außerdem dienen sie für Aktionen, die mehr Subtilität erfordern als eine Schaltfläche bietet.

Verknüpfungseigenschaften

CSS

Primärer Link

Sekundärer Link

Deaktivierte Links

Links in neuen Registerkarten öffnen

Zulässige href-Werte

Siehe auch