Navigation
Navigation003
ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Flex, AutoColumns, Icon, BoxLink, Stack, Text, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Navigation003">
<Container isWrapper="l" bgc="base-2" py="50" hasGutter>
<Stack g="50">
<Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">製品カテゴリー</Heading>
<Stack g="50">
<AutoColumns cols="18rem" g="30">
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="30"
bd
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">キッチン家電</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="arrow-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="30"
bd
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">オーディオ</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="arrow-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="30"
bd
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">生活家電</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="arrow-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="30"
bd
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">冷蔵庫</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="arrow-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="30"
bd
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">洗濯機・衣類ケア</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="arrow-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="30"
bd
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">美容</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="arrow-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="30"
bd
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">照明器具</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="arrow-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="30"
bd
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">パソコン・周辺機器</Text>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="arrow-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
</AutoColumns>
<Flex jc="flex-end">
<BoxLink href="#" layout="flex" ai="center" g="10" hasTransition hov={{ c: 'link' }}>
<Text class="u--trim">全てのカテゴリーを見る</Text>
<Icon icon="arrow-right" />
</BoxLink>
</Flex>
</Stack>
</Stack>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:cLink {
color: var(--_isHov, var(--link));
}
}
</style> style.css