pages._explore-components-structural-content.title

pages._explore.sections.basic-usage.title

This is content inside the Content component.It provides a scrollable container with overflow handling.

html

<Content>
    <div class="p-6">
        <Text text="This is content inside the Content component." />
        <Text text="It provides a scrollable container with overflow handling." />
    </div>
</Content>

typescript

<script setup lang="ts">

</script>

pages._explore.sections.complex-usage.title

sections..title

sections.undefined.title

The Content component provides a flexible container for your application content. It handles overflow, scrolling, and provides visual indicators when content extends beyond the visible area.

Scrollable ContainerAutomatically handles content overflow with smooth scrolling

Visual IndicatorsShows subtle shadows when content extends beyond viewport

sections..title

sections.undefined.title

Sample Form Fields:

Settings:

Enable notifications

Dark mode

sections..title

sections.undefined.title

This is paragraph 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 11. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 14. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 19. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.This is paragraph 20. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

html

<div class="h-96 border border-gray-300 rounded">
    <Content :scrollbar="true">
        <div class="p-6 space-y-6">
            <ContentSection>
                <ContentSectionHeader 
                    title="Welcome to the Content Area"
                    subtitle="This demonstrates the Content component with multiple sections"
                />
                <div class="space-y-4">
                    <Text 
                        text="The Content component provides a flexible container for your application content. It handles overflow, scrolling, and provides visual indicators when content extends beyond the visible area." 
                    />
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="p-4 bg-gray-50 rounded">
                            <Text 
                                text="Scrollable Container" 
                                :weight="TextWeights.BOLD" 
                                class="mb-2" 
                            />
                            <Text 
                                text="Automatically handles content overflow with smooth scrolling" 
                                :size="TextSizes.SM" 
                            />
                        </div>
                        <div class="p-4 bg-gray-50 rounded">
                            <Text 
                                text="Visual Indicators" 
                                :weight="TextWeights.BOLD" 
                                class="mb-2" 
                            />
                            <Text 
                                text="Shows subtle shadows when content extends beyond viewport" 
                                :size="TextSizes.SM" 
                            />
                        </div>
                    </div>
                </div>
            </ContentSection>

            <ContentSection>
                <ContentSectionHeader title="Interactive Elements" />
                <div class="space-y-4">
                    <div class="space-y-2">
                        <Text text="Sample Form Fields:" :weight="TextWeights.MEDIUM" />
                        <Input v-model="sampleInput" placeholder="Enter some text" />
                        <Textarea v-model="sampleTextarea" placeholder="Enter longer text here..." />
                    </div>
                    <div class="space-y-2">
                        <Text text="Settings:" :weight="TextWeights.MEDIUM" />
                        <div class="flex items-center gap-4">
                            <Toggle v-model="setting1" />
                            <Text text="Enable notifications" />
                        </div>
                        <div class="flex items-center gap-4">
                            <Toggle v-model="setting2" />
                            <Text text="Dark mode" />
                        </div>
                    </div>
                </div>
            </ContentSection>

            <ContentSection>
                <ContentSectionHeader title="Long Content to Demonstrate Scrolling" />
                <div class="space-y-4">
                    <Text 
                        v-for="i in 20" 
                        :key="i"
                        :text="`This is paragraph ${i}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`"
                        class="mb-3"
                    />
                </div>
            </ContentSection>
        </div>
    </Content>
</div>

typescript

<script setup lang="ts">
import { TextWeights, TextSizes } from '#core-types/components/presentational/text'

const sampleInput = ref('')
const sampleTextarea = ref('')
const setting1 = ref(false)
const setting2 = ref(true)
</script>

pages._explore.sections.props.title

Prop	Default	Type
scrollbar	false	boolean

pages._explore.sections.types.title

Name	Type	Options
ContentProps	interface	Main props interface for Content component

pages._explore.sections.slots.title

Slot	Type
default	Main content to be displayed in the scrollable container