Luna docs

Appearance

Создание форм ​

Обычная форма ​

vue
<script setup lang="ts">
import { DateTimePicker, ColorPickerInput } from 'luna';
</script>
<template>
  <form @submit.prevent="submit" class="pad">
    <div class="field-group">
      <label for="name" class="required">Название</label>
      <input id="name" type="text" class="input">
      <div class="error">название обязательно</div>
    </div>
    <div class="field-group">
      <label for="description">Описание</label>
      <textarea id="description" type="textarea"></textarea>
      <div class="description">краткое описание проблемы</div>
    </div>
    <div class="field-group">
      <label for="date">Дата</label>
      <DateTimePicker id="date" :with-time="true"></DateTimePicker>
    </div>
    <div class="field-group">
      <label for="color">Цвет</label>
      <ColorPickerInput id="color"></ColorPickerInput>
    </div>
    <div class="field-group">
      <strong>Выбор</strong>
      <fieldset class="checkbox-group">
        <div class="checkbox-item">
          <input id="one" type="checkbox">
          <label for="one">Один</label>
        </div>
      </fieldset>
    </div>
    <div class="field-group">
      <strong>Выбор 2</strong>
      <fieldset class="radio-group">
        <div class="radio">
          <input id="one2" type="radio" name="radio">
          <label for="one2">Один</label>
        </div>
        <div class="radio">
          <input id="two2" type="radio" name="radio">
          <label for="two2">Два</label>
        </div>
      </fieldset>
    </div>
    <div class="form-footer">
      <button type="submit">Сохранить</button>
    </div>
  </form>
</template>
название обязательно
краткое описание проблемы
Выбор
Выбор 2

Компактный вид ​

html
<form @submit.prevent="submit" class="pad compact">
  <div class="field-group">
    <label for="name" class="required">Название</label>
    <input id="name" type="text" class="input">
    <div class="error">название обязательно</div>
  </div>
  <div class="field-group">
    <label for="description">Описание</label>
    <textarea id="description" type="textarea"></textarea>
    <div class="description">краткое описание проблемы</div>
  </div>
  <div class="field-group">
    <label for="date">Дата</label>
    <DateTimePicker id="date" :with-time="true"></DateTimePicker>
  </div>
</form>
название обязательно
краткое описание проблемы

Горизонтальный вид ​

html
<form @submit.prevent="submit" class="pad horizontal">
  <div class="field-group">
    <label for="name" class="required">Название</label>
    <input id="name" type="text" class="input">
    <div class="error">название обязательно</div>
  </div>
  <div class="field-group">
    <label for="description">Описание</label>
    <textarea id="description" type="textarea"></textarea>
    <div class="description">краткое описание проблемы</div>
  </div>
</form>
название обязательно
краткое описание проблемы