Skip to content

Commit

Permalink
Add documentation for triplecolumn and remove test from GroupAView
Browse files Browse the repository at this point in the history
  • Loading branch information
daniel-panhead committed Sep 29, 2023
1 parent 298f8b3 commit 994b915
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 13 deletions.
30 changes: 27 additions & 3 deletions NOTEBOOK.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ You're welcome.
All you need to get started is import is the `@/components/lab-notebook/Notebook.vue` file.
The component takes two slots - `title` and `body`. Enter the section title directly into the `title` slot.

For the `body` section, you can populate the content using the `SingleColumn` and `DoubleColumn` components.
For the `body` section, you can populate the content using the `SingleColumn`, `DoubleColumn`, and `TripleColumn` components.
Both components are already designed to be fully responsive - no need to account for resizing.
The table of contents will also automatically populate with the titles provided to these components.

Expand Down Expand Up @@ -51,7 +51,7 @@ The `DoubleColumn` component takes a `title`, `left-title`, `left-body`, `right-
Like `SingleColumn`, the titles require no tags, and other slots can be directly populated with just `<p>` tags.

```html
<SingleColumn>
<DoubleColumn>
<template #title> Title </template>

<template #left-title>Subheading 1</template>
Expand All @@ -63,7 +63,31 @@ Like `SingleColumn`, the titles require no tags, and other slots can be directly
<template #right-body>
<p>Right text</p>
</template>
</SingleColumn>
</DoubleColumn>
```

### TripleColumn
Now you're asking for it. FYI, I didn't implement NColumn because I'm not about to figure out how to make arbitrary-arity trees in Vue. This works the same way as `DoubleColumn`, just with a third `mid-` column.

```html
<TripleColumn>
<template #title> Title </template>

<template #left-title>Subheading 1</template>
<template #left-body>
<p>Left text</p>
</template>

<template #mid-title>Subheading 2</template>
<template #mid-body>
<p>Middle text</p>
</template>

<template #right-title>Subheading 3</template>
<template #right-body>
<p>Right text</p>
</template>
</TripleColumn>
```

## CustomTable
Expand Down
10 changes: 0 additions & 10 deletions src/views/enzymosome/GroupAView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import Notebook from '@/components/lab-notebook/Notebook.vue'
import SingleColumn from '@/components/lab-notebook/SingleColumn.vue'
import DoubleColumn from '@/components/lab-notebook/DoubleColumn.vue'
import TripleColumn from '@/components/lab-notebook/TripleColumn.vue'
import CustomTable from '@/components/CustomTable.vue'
const tableData = {
Expand Down Expand Up @@ -102,15 +101,6 @@ const tableData = {
</p>
</template>
</SingleColumn>
<TripleColumn>
<template #title>Title</template>
<template #left-title>Left Title</template>
<template #left-body>Left body stuff</template>
<template #mid-title>Mid Title</template>
<template #mid-body>Mid body stuff</template>
<template #right-title>Right Title</template>
<template #right-body>Right body stuff</template>
</TripleColumn>
<SingleColumn>
<template #title>Results</template>
<template #graphic>
Expand Down

0 comments on commit 994b915

Please sign in to comment.