LinkBox

ボックス全体をリンク化するis--linkBoxクラスを出力できる<Lism>コンポーネントです。

デフォルトでは<Lism isLinkBox>のエイリアスで、プロパティに合わせて専用処理を加えています。

Import

import { LinkBox, Link } from 'lism-css/react';

Props

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

Usage

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

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

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

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

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

<LinkBox href='#linkbox-demo01' p='30' bgc='base' bd bdrs='30' hov='o'>
  <HTML.div fz='xl' fw='bold'>Heading text</HTML.div>
  <HTML.p 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.
  </HTML.p>
  <HTML.div fz='s' c='text-2' ta='right' lh='1' my-s='10'>MORE →</HTML.div>
</LinkBox>

<a class="is--linkBox -hov:o -p:30 -bgc:base -bd -bdc:divider -bdrs:30" href="#linkbox-demo01" hov='o'>
  <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. 内部に`u-expandedLink`を配置する

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

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

<LinkBox p='30' bgc='base' bd bdrs='30' setTransition hov='bxsh'>
  <HTML.div fz='xl' fw='bold'>
    <HTML.a className='u-expandedLink' href='#linkbox-demo02'>Heading link text</HTML.a>
  </HTML.div>
  <Dummy c='text-2' lh='s' my-s='15' />
  <HTML.div id='inner-link02' my-s='10'>
    <a href='#inner-link02' className='-hov:o'>Inner Link</a>
  </HTML.div>
</LinkBox>

<div class="is--linkBox -hov:bxsh -p:30 -bgc:base -bdc:divider -bd -bdrs:30 set-transition">
  <div class="-fz:xl -fw:bold">
    <a class="u-expandedLink" href="#linkbox-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キーでフォーカスした時のアウトラインをLinkBox全体に広げる

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

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

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