<template>
    <DocSectionText id="style" label="Style" v-bind="$attrs">
        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
        <div class="doc-tablewrapper">
            <table class="doc-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Element</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>p-splitter</td>
                        <td>Container element.</td>
                    </tr>
                    <tr>
                        <td>p-splitter</td>
                        <td>Container element during resize.</td>
                    </tr>
                    <tr>
                        <td>p-splitter-horizontal</td>
                        <td>Container element with horizontal layout.</td>
                    </tr>
                    <tr>
                        <td>p-splitter-vertical</td>
                        <td>Container element with vertical layout.</td>
                    </tr>
                    <tr>
                        <td>p-splitter-panel</td>
                        <td>Splitter panel element.</td>
                    </tr>
                    <tr>
                        <td>p-splitter-gutter</td>
                        <td>Gutter element to use when resizing the panels.</td>
                    </tr>
                    <tr>
                        <td>p-splitter-gutter-handle</td>
                        <td>Handle element of the gutter.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </DocSectionText>
</template>
