@extends('component-base.layout')

@section('title')
    Anchor
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/anchor/anchor2.css?v={{config("sns-line.version")}}">
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="lme-flex lme-card">
            <div style="padding-inline: 10px;">
                <lme-anchor2 v-model="activeHref"
                             placement="right"
                             :anchors="anchors"
                             container=".scroll-section"
                             :offset="10">
                </lme-anchor2>
            </div>
            <div class="scroll-custom scroll-section" style="flex: 1;max-height: 40vh;overflow-y: auto;">
                <div id="part-1" style="height: 40vh;background-color: #2ce4de"></div>
                <div id="part-2" style="height: 40vh;background-color: #da738a"></div>
                <div id="part-3" style="height: 40vh;background-color: #83dc78"></div>
                <div id="part-4" style="height: 40vh;background-color: #cdb86f"></div>
                <div id="part-5" style="height: 40vh;background-color: #cc9178"></div>
                <div id="part-6" style="height: 40vh;background-color: #2947aa"></div>
                <div id="part-7" style="height: 40vh;background-color: #c65059"></div>
                <div id="part-8" style="height: 40vh;background-color: #894ca1"></div>
                <div id="part-9" style="height: 40vh;background-color: #d7d7e1"></div>
                <div id="part-10" style="height: 40vh;background-color: #d5e68f"></div>
            </div>
{{--            <div style="flex: 1;padding-inline: 10px;">--}}
{{--                <lme-anchor2 v-model="activeHref"--}}
{{--                        :anchors="anchors"--}}
{{--                        container=".scroll-section"--}}
{{--                        :offset="10">--}}
{{--                </lme-anchor2>--}}
{{--            </div>--}}
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/component-base/anchor/lme-anchor2.js"></script>
    <script src="/js/component-base/anchor/anchor2.js?v={{config("sns-line.version")}}"></script>
@endpush