DocSet

С чего начать

Подключите модуль с компонентами документации:

import { DocSetModule } from '@diasoft/qpalette-doc-set';

Выполните установку компонента

npm install @diasoft/qpalette-doc-set

В основной стилевой файл проекта произведите подключение стилей для подсветки кода

@import '@diasoft/qpalette-doc-set/styles/highlight-code';

Страница

Тело страницы обозначается тегомdoc-page, заголовок страницы задается с помощью свойстваdocTitle:

<doc-page docTitle="***ваше название***">
  ***ваш контент***
</doc-page>

По умолчанию боковое меню навигации скрыто, для его активации следует воспользоваться свойствомnav:

<doc-page docTitle="***ваше название***" [nav]="true">
  ***ваш контент***
</doc-page>

Контент

Разделы

Контент должен быть разбит на соответствующие на разделы, в зависимости от сути содержимого. Разбиение на разделы производится с помощью тегаdoc-section, заголовок раздела задается с помощью свойстваtitle. Также, для работоспобности навигации к разделу и генереции якорной ссылки на него, должно быть задано соответствущее имя ссылки, которое задается с помощью свойстваlink:

<doc-section docTitle="***ваше название***" link="docset-***ваша ссылка***">
  ***ваш контент***
</doc-section>

Если на странице активирована навигация, созданная секция автоматически отобразится в боковом меню

Подразделы

Разбиение на подразделы производится помощью тегаdoc-chapter, подразделу должны быть присвоены название и имя ссылки, по аналогии с разделом. Сам подраздел должен быть создаван внутри раздела, т.е. внутри тегаdoc-section:

<doc-section docTitle="***название раздела***" link="docset-ссылка раздела">
  ***контент раздела***
  <doc-chapter docTitle="***название подраздела***"" link="docset-***ссылка подраздела***"">
    ***контент подраздела***
  </doc-chapter>
</doc-section>

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

Если на странице активирована навигация, созданная секция автоматически отобразится в боковом меню и будет размещена в соответствующем разделе.

Отображение кода

Код в тексте

Код, размещенный в тексте необходимо обрамлять тегом<code></code>

Код в блоке

Для отображения кода в выделенном блоке следует использовать следующую конструкцию:

<doc-code language="html" content='
  ***ваш код***
'></doc-code>

Поддерживаемые компонентом языки и форматы, которые следует указывать в language:

plaintext
html
svg
xml
css
scss
javascript
js
typescript
ts
json
webmanifest

Будьте внимательны! Для отображения html кода содержимое свойства "content" должно быть обрамлено в одиночные кавычки, во всех остальных случаях следует использовать двойные.

Код в блоке с шапкой

Предусмотрено отображения кода в выделенном блоке с шапкой:

***ваш код***

Для отображения кода в выделенном блоке с шапкой следует добавить свойствоdocTitle:

<doc-code docTitle="filename.ts" language="ts" content="
  ***ваш код***
"></doc-code>

Код в табах

Предусмотрено отображения кода в табах

Для отображения кода в табах поместите ваши блоки кода в специальную оберткуdoc-code-tabs:

<doc-code-tabs>
  <doc-code
    docTitle="filename1"
    language="html"
    content="
***ваш код 1***
"
  ></doc-code>
 
  <doc-code
    docTitle="filename2"
    language="html"
    content="
***ваш код 2***
"
  ></doc-code>
 
  <doc-code
    docTitle="filename3"
    language="html"
    content="
***ваш код 3***
"
  ></doc-code>
</doc-code-tabs>

Отображение различных языков кода

В зависимости от различных языков код следует обрамлять разными типами кавычек.

HTML

HTML код следует обрамлять одинарными кавычками:

<doc-code
  docTitle="html"
  language="html"
  content='
    <div>
      <p>Lorem ipsum dolor sit amet.</p>
    /div>
'
></doc-code>

Если в верстке используется символ ' (апостроф), то в размещаемом коде он должен быть заменен соответствующим символом мнемоником.

TS

TS код следует обрамлять двойными кавычками:

<doc-code
  docTitle="ts"
  language="ts"
  content="
    import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
    @Component({
      selector: 'app-prime-badge',
      templateUrl: './prime-badge.component.html',
      styleUrls: ['./prime-badge.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class PrimeBadgeComponent implements OnInit {
 
      constructor() {
      }
 
      ngOnInit(): void {
     }
}
"
></doc-code>

JSON

JSON код следует обрамлять одинарными кавычками:

<doc-code
  docTitle="json"
  language="json"
  content="
  {
    id: "1000",
    code: "f230fh0g3",
    name: "Bamboo Watch",
    description: "Product Description",
    image: "bamboo-watch.jpg",
    price: 65,
    category: "Accessories",
    quantity: 24,
    inventoryStatus: "INSTOCK",
    rating: 5,
  },
"
></doc-code>

Permissions MindElixir