Оформляем страницу

Итак, у нас есть страница с заголовком Давайте откроем в новом окне браузера, введя адрес https://<домен.аккаунта>?/chtm/plugin/

Пока мы видим "голую" страницу с надписью "График ИМТ".

Давайте добавим геткурсовское оформление вокруг этой страницы.

Вернемся в IDE, к редактированию кода. Импортируем компонент PluginLayout из пакета @html/layout и заменим тег <html> на него. В параметрах к тегу добавим ctx={ctx}

import {jsx} from '@app/html-jsx'
import {PluginLayout} from '@html/layout'

app.html('/', async(ctx,req) => {
  return <PluginLayout ctx={ctx}>
    <h1>График ИМТ</h1>
  </PluginLayout>
})

Сохраним, и увидим что изменилось в предпросмотре справа.

Добавляем PluginLayout

Видим, что появилась полоска и меню снизу, а также изменился шрифт заголовка.

Теперь давайте импортируем еще один компонент Container из пакета @html/ui и обернем им весь наш контент внутри PluginLayout, и добавим ему параеметр padding со значением xl

import {jsx} from '@app/html-jsx'
import {PluginLayout} from '@html/layout'
import {Container} from '@html/ui'

app.html('/', async(ctx,req) => {
  return <PluginLayout ctx={ctx}>
    <Container padding='xl'>
      <h1>График ИМТ</h1>
    </Container>
  </PluginLayout>
})

Давайте вернемся к нашей отдельной странице и обновим ее

Видим что наша страница теперь выглядит как стандартная страница внутри GetCourse, с левым меню и шрифтом нашего аккаунта.

Теперь, добавим форму в наш шаблон. Для упрощения, импортируем еще 3 тега из пакета html/ui:

FormRow (строка формы)
Input (текстовое поле ввода)
Button (кнопка)

Мы можем обойтись и без них, но они сразу добавят необходимые стили и сократят количество кода, который нам нужно написать. А вот тег form вставим стандартный, html-ный

Вставим форму и несколько строчек, чтобы получился такой код, заодно добавим свойство width="sm" в тег Container, чтобы форма у нас не была слишком широкой

import {jsx} from '@app/html-jsx'
import {PluginLayout} from '@html/layout'
import {Container, FormRow, Input, Button} from '@html/ui'

app.html('/', async(ctx,req) => {
  return <PluginLayout ctx={ctx}>
    <Container padding='xl' width="sm">
      <h1>График ИМТ</h1>
      <form>
        <FormRow label='Рост' description='в сантиметрах'>
          <Input name='height'/>
        </FormRow>
        <FormRow label='Вес' description='в килограммах'>
          <Input name='weight'/>
        </FormRow>
        <FormRow>
          <Button type='submit' primary>Добавить запись</Button>
        </FormRow>
      </form>
    </Container>
  </PluginLayout>
})

Теперь перейдем в просмотр страницы и посмотрим, что получилось.

Итак, у нас есть страница с формой внутри макета GetCourse-аккаунта. В следующем уроке мы добавим обработчик этой формы, и начнем записывать все что присылает пользователь.

Документация

Оформляем страницу