@extends('component-base.layout')

@section('title')
    Anchor
@endsection

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

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

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