BoxLink (is--boxLink)

is--boxLink は、ボックス全体をクリック可能にするクラスです。

CSS

@use '../../_mixin' as mixin;

.is--boxLink {
  position: relative;
  display: block;
  color: inherit;
  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate; // 内部のz-index順位と外部のz-indexを混同させない。
}

// リンクをクリック可能にするためにz-indexあげる
.is--boxLink a {
  position: relative;
  z-index: 2; // .is--coverLink::before + 1
}

/* これをしてしまうと z-index 関係がややこしくなる。リンク以外のz-indexはデフォのままにする。 */
// .is--boxLink > * {
// 	z-index: 0;
// }

Lismコンポーネントでの使い方

<Lism isBoxLink> のエイリアスとして <BoxLink> が用意されています。

Import

import { BoxLink } from 'lism-css/react';

専用Props

Prop	説明
`href`	リンク先を指定できます。`href`が指定されている場合は`a`タグとなり、なければ`div`として出力されます。

Usage

<BoxLink>(.is--boxLink）は、主に次の2通りの使い方ができます。

<BoxLink>(.is--boxLink）を<a>タグにしてそのままリンクにする。
<BoxLink>(.is--boxLink）を<div>にして、内部にa.is--coverLinkを配置する。

BoxLink内部に別のリンクも配置するには、2 を採用してください。

1. `<BoxLink>`を`a`タグにして使う

<BoxLink>にhrefを指定すると<BoxLink>自体が<a>タグになります。

↓

例

Heading text

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<BoxLink href="#boxlink-demo01" p="30" bgc="base" bd bdrs="30" hov="o">
  <Group fz="xl" fw="bold">
    Heading text
  </Group>
  <Text lh="s" my-s="15">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
  </Text>
  <Group fz="s" c="text-2" ta="right" lh="1" my-s="10">
    MORE →
  </Group>
</BoxLink>

<a class="is--boxLink -hov:o -p:30 -bgc:base -bd -bdrs:30" href="#boxlink-demo01">
  <p class="-fz:xl -fw:bold">Heading text</p>
  <p class="-c:text-2 -lh:s -my-s:15">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
  </p>
  <p class="-fz:s -c:text-2 -ta:right -lh:1 -my-s:10">MORE →</p>
</a>

2. 内部に`is--coverLink`を配置する

内部のアンカー要素に.is--coverLinkを併用してもボックス全体をリンクにすることができます。

この時、BoxLinkの内部に別のリンクも配置できます。

↓

例

Heading link text

Inner Link

<BoxLink p="30" bgc="base" bd bdrs="30" set="transition" hov="bxsh">
  <Group fz="xl" fw="bold">
    <Link isCoverLink href="#boxlink-demo02">
      Heading link text
    </Link>
  </Group>
  <Text c="text-2" lh="s" my-s="15">
    Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut.
  </Text>
  <Group id="inner-link02" my-s="10">
    <a href="#inner-link02" className="-hov:o">
      Inner Link
    </a>
  </Group>
</BoxLink>

<div class="is--boxLink set--transition -p:30 -bgc:base -bd -bdrs:30 -hov:bxsh">
  <div class="-fz:xl -fw:bold">
    <a class="is--coverLink" href="#boxlink-demo02">
      Heading Link
    </a>
  </div>
  <p class="-c:text-2 -lh:s -my-s:15">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
  </p>
  <div id="inner-link02" class="-my-s:10">
    <a href="#inner-link02" class="-hov:o">
      Inner Link
    </a>
  </div>
</div>

Opt-in

Tabキーでフォーカスした時のアウトラインをBoxLink全体に広げる

is--coverLinkでリンクを設置すると、Tabキーでフォーカスした時はアウトラインがボックス全体ではなくリンクテキスト部分のみになります。

もしこれをボックス全体に広げたい場合、以下のようなCSSを追記してください。

@supports selector(:has(*)) {
  .is--boxLink:has(.is--coverLink:focus-visible) {
    outline: auto 1px;
    outline: auto 1px -webkit-focus-ring-color;
  }
  .is--coverLink:focus {
    outline: 0;
  }
}