LinkBox

ボックス全体をリンク化するコンポーネントです。
デフォルトでは<Lism tag='a'>と同じような構成となり、a.is--linkBox を出力します。

プロパティに合わせて専用処理を加えています。

Props

プロパティ	説明
`href`	リンク先を指定できます。`href`が指定されている場合、is—linkBox は標準で`a`タグとなり、なければ`div`として出力されます。
`layout`	指定したLismコンポーネントでLinkBoxを展開できます。
`target`	target属性を指定できます。
`rel`	rel属性を指定できます

Import

import { LinkBox, Link } from '@lism-ui/core';

Usage

LinkBox(.is--linkBox）は、次の3通りの使い方ができます。

.is--linkBox自体を<a>タグにする。
.is--linkBoxは<div>で、内部にa.is--overlayLinkを配置する。
.is--linkBoxは<div>で、内部にa.is--hiddenLinkを配置する。

2, 3 では、LinkBox内部に別のリンクも配置できます。

`<LinkBox>`自体をリンクにする

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

リサイズ可能

<LinkBox href='#linkbox-demo01' p='40' bgc='base' bdc='divider' bd bdrs='4'>
  <Text fz='xl' fw='bold'>Heading text</Text>
  <Text c='text-2' lh='s' mbs='20'>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
  </Text>
  <Text fz='s' c='text-2' ta='r' lh='1' mbs='10'>MORE →</Text>
</LinkBox>

<a class="is--linkBox -hov:fade -p:40 -bgc:base -bd: -bdc:divider -bdrs:4" href="#linkbox-demo01">
  <p class="-fz:xl -fw:bold">Heading text</p>
  <p class="-c:text-2 -lh:s -mbs:20">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:r -lh:1 -mbs:10">MORE →</p>
</a>

内部に`is--overlayLink`を配置する

LinkBoxにhrefを指定せず、内部のアンカー要素に.is--overlayLinkを併用してもボックス全体をリンクにすることができます。

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

<LinkBox p='40' bgc='base' bdc='divider' bd bdrs='4'>
  <Text fz='xl' fw='bold'>
    <Link isOverlayLink href='#linkbox-demo02'>Heading Link</Link>
  </Text>
  <Text c='text-2' lh='s' mbs='20'>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
  </Text>
  <Text mbs='10' id='inner-link02'>
    <a href='#inner-link02'>Inner Link</a>
  </Text>
</LinkBox>

<div class="is--linkBox -hov:fade -p:40 -bgc:base -bd: -bdc:divider -bdrs:4">
  <p class="-fz:xl -fw:bold">
    <a class="is--overlayLink" href="#linkbox-demo02">Heading Link</a>
  </p>
  <p class="-c:text-2 -lh:s -mbs:20">
    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="-mbs:10" id="inner-link">
    <a href="#inner-link">Inner Link</a>
  </p>
</div>

is--overlayLinkにフォーカスした時のアウトラインをLinkBox全体に広げたい場合は、次のようなCSSを追記してください。

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

内部に`is--hiddenLink`を配置する

<LinkBox>にhreを指定せず、直下に隠しリンク（is--hiddenLink）を配置しても、ボックス全体をリンクにすることができます。