LinkBox

ボックス全体をリンクにできるモジュール。

対応するHTML構造

<a href="###" class="is--linkbox">...</a>
 
or
<div class="is--linkbox">
	<a href="###" data-hidden-link></a>
	...
</div>

Memo: [data-hidden-link] → .is--linkbox__hidden とかに変える ?

Props

href: リンク先を指定できます。
as: 指定したLismコンポーネントでLinkBox全体を展開できます。
tag: リンクボックスを<a>ではなく<div>などの別タグにすることができます。
target: target属性を指定できます。
rel: rel属性を指定できます
ariaLabel: aria-label属性を指定できます。
hover: hoverエフェクトの指定ができます。（lism prop）
openNewTab: trueにすると、target="_blank"とrel="noopener noreferrer"が自動で付与されます。?

Import

import { LinkBox } from '@loos/lism-core';

DEMO

<LinkBox>

リサイズ可能エリアです ↑

<LinkBox href="#boxlink01" isFlow='s' p='box' bgc="pale">
	<Text fz="l">このBox全体がリンクです。</Text>
	<p>...</p>
	<Text fz='s' ta="right" mbs={10}>More→</Text>
</LinkBox>

tag='div' で <div>のままリンク化することも可能。

リサイズ可能エリアです ↑

<LinkBox tag='div' href="#boxlink02" isFlow='s' p='box' bgc="pale">
	<Text fz="l">このBox全体がリンクです。</Text>
	<p>...</p>
	<p><Link href="#inner-link">linkBox内にさらにリンク</Link>を配置できる。</p>
	<Text fz='s' ta="right" mbs={10}>More→</Text>
</LinkBox>

`as`で指定したコンポーネントとして展開可能

Center にして中央揃えに

リサイズ可能エリアです ↑

<LinkBox as={Center} href="#boxlink03" gap={20} p="box:l" bgc="pale">
	<Text fz="l">LinkBox as Center</Text>
	<p>...</p>
	<Text>→ More</Text>
</LinkBox>

Frameとして展開

LinkBox as Frame

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

リサイズ可能エリアです ↑

<LinkBox as={Frame} href="#boxlink04" aspect="16/9" bgc="pale" p={20}>
	<Center size="cover" gap={20}>
		<Text fz="l">LinkBox as Frame</Text>
		<p>...</p>
	</Center>
	<Layer position="right bottom" fz="s" p={20}>More →</Layer>
</LinkBox>

openNewTab

...

Frame Avatar

LinkBox

Props

Import

DEMO

asで指定したコンポーネントとして展開可能

openNewTab

`as`で指定したコンポーネントとして展開可能