SettingsSection

Settings block with a title, description and a column of fields. Size prop: xs, sm, md, lg, xl.

Import

Vue

import { UiSettingsSection } from '@ziyarago/ui/vue'

Sizes

Notifications

Choose when we contact you.

Email updates, SMS reminders

Notifications

Choose when we contact you.

Email updates, SMS reminders

Notifications

Choose when we contact you.

Email updates, SMS reminders

Notifications

Choose when we contact you.

Email updates, SMS reminders

Notifications

Choose when we contact you.

Email updates, SMS reminders

Vue

<UiSettingsSection
  size="xs"
  title="Notifications"
  description="Choose when we contact you."
>
  Email updates, SMS reminders
</UiSettingsSection>

<UiSettingsSection
  size="sm"
  title="Notifications"
  description="Choose when we contact you."
>
  Email updates, SMS reminders
</UiSettingsSection>

<UiSettingsSection
  size="md"
  title="Notifications"
  description="Choose when we contact you."
>
  Email updates, SMS reminders
</UiSettingsSection>

<UiSettingsSection
  size="lg"
  title="Notifications"
  description="Choose when we contact you."
>
  Email updates, SMS reminders
</UiSettingsSection>

<UiSettingsSection
  size="xl"
  title="Notifications"
  description="Choose when we contact you."
>
  Email updates, SMS reminders
</UiSettingsSection>

Section

Notifications

Choose when we contact you about bookings.

Email updates, SMS reminders

Vue

<UiSettingsSection
  title="Notifications"
  description="Choose when we contact you about bookings."
>
  Email updates, SMS reminders
</UiSettingsSection>

API reference

Settings block with a title and description on the left and fields below.

Props

PropType and valuesDefaultDescription

titlerequiredstring—Section title.

descriptionstring—Helper text under the title.

sizexssmmdlgxl'md'Padding, title and field spacing.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultFields and controls of the section.