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(() => ( -
- )) + useRender(() => { + const divider = ( +
+ ) + + if (!slots.default) return divider + + return ( +
+ { divider } + +
+ { slots.default() } +
+ + { divider } +
+ ) + }) return {} }, diff --git a/packages/vuetify/src/components/VDivider/_variables.scss b/packages/vuetify/src/components/VDivider/_variables.scss index 7bc43fd2c78..f8d521faf37 100644 --- a/packages/vuetify/src/components/VDivider/_variables.scss +++ b/packages/vuetify/src/components/VDivider/_variables.scss @@ -4,6 +4,8 @@ $divider-border-color: null !default; $divider-border-style: settings.$border-style-root !default; $divider-border-width: thin 0 0 0 !default; +$divider-content-padding: 0 16px !default; +$divider-content-vertical-padding: 4px 0 !default; $divider-flex: 1 1 100% !default; $divider-inset-margin: 72px !default; $divider-inset-max-width: calc(100% - #{$divider-inset-margin}) !default;