Разработка пользовательского интерфейса с помощью Chakra UI Vue - стили ввода чисел и всплывающие окна

Chakra UI Vue - это инфраструктура пользовательского интерфейса, созданная для Vue.js, которая позволяет нам добавлять красивые компоненты пользовательского интерфейса в наше приложение Vue.

В этой статье будет рассказано, как начать разработку пользовательского интерфейса с помощью Chakra UI Vue.

Стили ввода чисел

Мы можем изменить стили кнопок ввода числа.

Для этого пишем:

<template>
  <c-box>
    <c-number-input size="sm" :default-value="15" clamp-value-on-blur :max="30">
      <c-number-input-field focus-border-color="red.200" />
      <c-number-input-stepper>
        <c-number-increment-stepper
          bg="green.200"
          :_active="{ bg: 'green.300' }"
        >
          +
        </c-number-increment-stepper>
        <c-number-decrement-stepper bg="pink.200" :_active="{ bg: 'pink.300' }">
          -
        </c-number-decrement-stepper>
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>
<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

Мы устанавливаем опору bg, чтобы установить цвет фона кнопок степпера.

_active prop устанавливает стили, которые применяются, когда кнопки активны.

Трещать

Мы можем добавить всплывающее окно с помощью компонента c-popover.

Например, мы можем написать:

<template>
  <c-box>
    <c-popover placement="top">
      <c-popover-trigger>
        <c-button>Trigger</c-button>
      </c-popover-trigger>
      <c-popover-content z-index="4">
        <c-popover-arrow />
        <c-popover-close-button />
        <c-popover-header>Confirmation!</c-popover-header>
        <c-popover-body>
          Are you sure you want to have that milkshake?
        </c-popover-body>
      </c-popover-content>
    </c-popover>
  </c-box>
</template>
<script>
import {
  CBox,
  CButton,
  CPopover,
  CPopoverTrigger,
  CPopoverContent,
  CPopoverHeader,
  CPopoverBody,
  CPopoverArrow,
  CPopoverCloseButton,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CButton,
    CPopover,
    CPopoverTrigger,
    CPopoverContent,
    CPopoverHeader,
    CPopoverBody,
    CPopoverArrow,
    CPopoverCloseButton,
  },
};
</script>

Мы добавляем всплывающее окно с несколькими компонентами.

c-popover - это основной контейнер.

c-popover-trigger имеет кнопку, которая запускает всплывающее окно.

c-popover-content - это контейнер для всплывающего содержимого.

c-popover-arrow - стрелка всплывающего окна.

c-popover-close-button - кнопка закрытия всплывающего окна.

c-popover-header - это всплывающий заголовок.

c-popover-body - это контейнер для основного всплывающего содержимого.

Мы можем получить состояние всплывающего окна с помощью некоторых свойств слота:

<template>
  <c-box>
    <c-popover
      initialFocusRef="#closeButton"
      placement="right"
      v-slot="{ isOpen, onClose }"
    >
      <c-popover-trigger>
        <c-button>Click to {{ isOpen ? "close" : "open" }}</c-button>
      </c-popover-trigger>
      <c-popover-content z-index="4">
        <c-popover-arrow />
        <c-popover-close-button />
        <c-popover-header>Confirmation!</c-popover-header>
        <c-popover-body>
          <c-box>
            Hello. Nice to meet you! This is the body of the popover
          </c-box>
          <c-button
            mt="4"
            variantColor="blue"
            @click="onClose"
            id="closeButton"
          >
            Close
          </c-button>
        </c-popover-body>
      </c-popover-content>
    </c-popover>
  </c-box>
</template>
<script>
import {
  CBox,
  CButton,
  CPopover,
  CPopoverTrigger,
  CPopoverContent,
  CPopoverHeader,
  CPopoverBody,
  CPopoverArrow,
  CPopoverCloseButton,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CButton,
    CPopover,
    CPopoverTrigger,
    CPopoverContent,
    CPopoverHeader,
    CPopoverBody,
    CPopoverArrow,
    CPopoverCloseButton,
  },
};
</script>

isOpen - это true, когда всплывающее окно открыто.

onClose - это функция, которая закрывает всплывающее окно, когда мы его запускаем.

Заключение

Мы можем добавлять числовые вводы и всплывающие окна с помощью пользовательского интерфейса Chakra Vue.