example section
This commit is contained in:
Gerard Burns
parent
7b52811f10
commit
feef3450b7
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { Block, Subject, Section } from './components'
|
||||
import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
|
||||
|
||||
let timestamp = Date.now();
|
||||
|
||||
|
|
@ -28,13 +28,23 @@
|
|||
A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX epoch</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
Examples:
|
||||
<br />
|
||||
1st Jan 2000: <Block>946684800000</Block>
|
||||
<br />
|
||||
1st Jan 2020: <Block>1577836800000</Block>
|
||||
<br />
|
||||
Now: <Block>{timestamp}</Block>
|
||||
</Section>
|
||||
<ExampleSection
|
||||
heading="Examples:"
|
||||
>
|
||||
<ExampleLine>
|
||||
1st Jan 2000<span class="separator">: </span><Block>946684800000</Block>
|
||||
</ExampleLine>
|
||||
<ExampleLine>
|
||||
1st Jan 2020<span class="separator">: </span><Block>1577836800000</Block>
|
||||
</ExampleLine>
|
||||
<ExampleLine>
|
||||
Now<span class="separator">:</span> <Block>{timestamp}</Block>
|
||||
</ExampleLine>
|
||||
</ExampleSection>
|
||||
</Subject>
|
||||
|
||||
<style>
|
||||
.separator {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { Body } from "@budibase/bbui"
|
||||
import { Block, Subject, Section } from './components'
|
||||
import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
|
||||
|
||||
export let schema
|
||||
export let columnName
|
||||
|
|
@ -38,25 +38,19 @@
|
|||
</Section>
|
||||
|
||||
{#if scalarDescendants.length > 0}
|
||||
<Section>
|
||||
Examples scalar descendants of this object:
|
||||
<br />
|
||||
|
||||
<ExampleSection
|
||||
heading="Examples scalar descendants of this object:"
|
||||
>
|
||||
{#each scalarDescendants as descendant}
|
||||
<div class="example">
|
||||
<ExampleLine>
|
||||
<Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
|
||||
</div>
|
||||
</ExampleLine>
|
||||
{/each}
|
||||
</Section>
|
||||
</ExampleSection>
|
||||
{/if}
|
||||
</Subject>
|
||||
|
||||
<style>
|
||||
.example {
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 4px;
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Block, Subject, Section } from './components'
|
||||
import { ExampleSection, ExampleLine, Block, Subject, Section } from './components'
|
||||
</script>
|
||||
|
||||
<Subject heading="Text as Numbers">
|
||||
|
|
@ -7,19 +7,33 @@
|
|||
Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten integer or decimal value may lead to unexpected behavior.
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
Examples:
|
||||
<br />
|
||||
<Block>"100"</Block>{" -> "}<Block>100</Block>
|
||||
<br />
|
||||
<Block>"100k"</Block>{" -> "}<Block>100</Block>
|
||||
<br />
|
||||
<Block>"100,000"</Block>{" -> "}<Block>100</Block>
|
||||
<br />
|
||||
<Block>"100 million"</Block>{" -> "}<Block>100</Block>
|
||||
<br />
|
||||
<Block>"100.9"</Block>{" -> "}<Block>100.9</Block>
|
||||
<br />
|
||||
<Block>"One hundred"</Block>{" -> "}<Block>Error</Block>
|
||||
</Section>
|
||||
<ExampleSection
|
||||
heading="Examples:"
|
||||
>
|
||||
<ExampleLine>
|
||||
<Block>"100"</Block><span class="separator">{"->"}</span><Block>100</Block>
|
||||
</ExampleLine>
|
||||
<ExampleLine>
|
||||
<Block>"100k"</Block><span class="separator">{"->"}</span><Block>100</Block>
|
||||
</ExampleLine>
|
||||
<ExampleLine>
|
||||
<Block>"100,000"</Block><span class="separator">{"->"}</span><Block>100</Block>
|
||||
</ExampleLine>
|
||||
<ExampleLine>
|
||||
<Block>"100 million"</Block><span class="separator">{"->"}</span><Block>100</Block>
|
||||
</ExampleLine>
|
||||
<ExampleLine>
|
||||
<Block>"100.9"</Block><span class="separator">{"->"}</span><Block>100.9</Block>
|
||||
</ExampleLine>
|
||||
<ExampleLine>
|
||||
<Block>"One hundred"</Block><span class="separator">{"->"}</span><Block>Error</Block>
|
||||
</ExampleLine>
|
||||
</ExampleSection>
|
||||
</Subject>
|
||||
|
||||
<style>
|
||||
.separator {
|
||||
margin: 0 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
export let truncate = false
|
||||
export let noShrink = false
|
||||
</script>
|
||||
|
||||
<span class:truncate class:noShrink class="block">
|
||||
<slot />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<li>
|
||||
<div class="exampleLine">
|
||||
<slot />
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
.exampleLine {
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
import Section from "./Section.svelte"
|
||||
export let heading
|
||||
</script>
|
||||
|
||||
<Section>
|
||||
<span class="exampleSectionHeading">
|
||||
<slot name="heading">
|
||||
{heading}
|
||||
</slot>
|
||||
</span>
|
||||
<ul>
|
||||
<slot />
|
||||
</ul>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.exampleSectionHeading {
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 23px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,8 +8,4 @@
|
|||
margin-bottom: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section :global(ul) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,3 +4,5 @@ export { default as JSONValue } from "./JSONValue.svelte"
|
|||
export { default as BindingValue } from "./BindingValue.svelte"
|
||||
export { default as Section } from "./Section.svelte"
|
||||
export { default as Block } from "./Block.svelte"
|
||||
export { default as ExampleSection } from "./ExampleSection.svelte"
|
||||
export { default as ExampleLine } from "./ExampleLine.svelte"
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<Line>
|
||||
<InfoWord
|
||||
on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
|
||||
on:mouseleave={() => setExplanationSubject(subjects.none)}
|
||||
>Scalar JSON values</InfoWord>
|
||||
<Text
|
||||
value=" can be used with this component if their individual types are supported"
|
||||
|
|
|
|||
Loading…
Reference in New Issue