Navigation
Navigation002
ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。breakpoint「md」以下は1カラムで表示されます。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Flex, Grid, Icon, LinkBox, Stack, HTML } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Navigation002">
<Container isWrapper="l" bgc="base" py="50" setGutter>
<Grid gtc={['auto', null, 'auto 1fr']} g="50 60">
<Stack ai="flex-s" g="30">
<HTML.h lv="2" class="u--trim" fz="2xl" fw="bold" ta="center">製品カテゴリー</HTML.h>
<HTML.p class="u--trim" fz="s" o="-10">気になるカテゴリーから探せます</HTML.p>
</Stack>
<Stack g="40">
<Grid layout="fluidCols" cols="16rem" g="0 40" pt="1px">
<LinkBox href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y setHov>
<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">キッチン家電</HTML.p>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon="caret-right" fz="xs" c="white" />
</Flex>
</LinkBox>
<LinkBox href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y setHov>
<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">オーディオ</HTML.p>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon="caret-right" fz="xs" c="white" />
</Flex>
</LinkBox>
<LinkBox href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y setHov>
<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">生活家電</HTML.p>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon="caret-right" fz="xs" c="white" />
</Flex>
</LinkBox>
<LinkBox href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y setHov>
<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">冷蔵庫</HTML.p>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon="caret-right" fz="xs" c="white" />
</Flex>
</LinkBox>
<LinkBox href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y setHov>
<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">洗濯機・衣類ケア</HTML.p>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon="caret-right" fz="xs" c="white" />
</Flex>
</LinkBox>
<LinkBox href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y setHov>
<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">美容</HTML.p>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon="caret-right" fz="xs" c="white" />
</Flex>
</LinkBox>
<LinkBox href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y setHov>
<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">照明器具</HTML.p>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon="caret-right" fz="xs" c="white" />
</Flex>
</LinkBox>
<LinkBox href="#" layout="flex" g="30" ai="center" jc="between" p="40 10" mt="-1px" bd-y setHov>
<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">パソコン・周辺機器</HTML.p>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
<Icon icon="caret-right" fz="xs" c="white" />
</Flex>
</LinkBox>
</Grid>
<Flex jc="flex-e">
<LinkBox href="#" layout="flex" ai="center" g="10" setTransition hov={{ c: 'link' }}>
<HTML.p class="u--trim">全てのカテゴリーを見る</HTML.p>
<Icon icon="arrow-right" />
</LinkBox>
</Flex>
</Stack>
</Grid>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:to\:cLink {
color: var(--_isHov, var(--link));
}
}
</style> style.css