diff --git a/packages/vuetify/src/components/VDivider/VDivider.sass b/packages/vuetify/src/components/VDivider/VDivider.sass index 3f2e4f5df3a..1f127759d05 100644 --- a/packages/vuetify/src/components/VDivider/VDivider.sass +++ b/packages/vuetify/src/components/VDivider/VDivider.sass @@ -31,3 +31,21 @@ margin-bottom: $divider-vertical-inset-margin-bottom margin-top: $divider-vertical-inset-margin-top max-height: $divider-vertical-inset-max-height + +.v-divider__content + padding: $divider-content-padding + + .v-divider__wrapper--vertical & + padding: $divider-content-vertical-padding + +.v-divider__wrapper + display: flex + align-items: center + justify-content: center + + &--vertical + flex-direction: column + height: 100% + + .v-divider + margin: 0 auto diff --git a/packages/vuetify/src/components/VDivider/VDivider.tsx b/packages/vuetify/src/components/VDivider/VDivider.tsx index 7c0d4bf8d05..6682f761121 100644 --- a/packages/vuetify/src/components/VDivider/VDivider.tsx +++ b/packages/vuetify/src/components/VDivider/VDivider.tsx @@ -29,7 +29,7 @@ export const VDivider = genericComponent()({ props: makeVDividerProps(), - setup (props, { attrs }) { + setup (props, { attrs, slots }) { const { themeClasses } = provideTheme(props) const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color')) const dividerStyles = computed(() => { @@ -46,31 +46,55 @@ export const VDivider = genericComponent()({ return styles }) - useRender(() => ( -