mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-21 02:19:59 +08:00
2b0c1577b2
* scrollable-markdown-changes-added * made suggested changes * added a new story in Storybook * add changeset * add changeset * tweaks * changes * changes * revert example change * tweaks * demo changes * more tweaks * formatting --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
87 lines
2.3 KiB
Svelte
87 lines
2.3 KiB
Svelte
<script>
|
|
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
|
import Markdown from "./Index.svelte";
|
|
</script>
|
|
|
|
<Meta
|
|
title="Components/Markdown"
|
|
component={Markdown}
|
|
argTypes={{
|
|
rtl: {
|
|
options: [true, false],
|
|
description: "Whether to render right-to-left",
|
|
control: { type: "boolean" },
|
|
defaultValue: false
|
|
},
|
|
height: {
|
|
description: "Maximum height of the Markdown component",
|
|
control: { type: "text" },
|
|
defaultValue: "200px"
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<Template let:args>
|
|
<Markdown
|
|
value="Here's some **bold** text. And some *italics* and some `code`"
|
|
latex_delimiters={[]}
|
|
{...args}
|
|
height={args.height}
|
|
/>
|
|
</Template>
|
|
|
|
<Story name="Simple inline Markdown" />
|
|
|
|
<Story
|
|
name="Multiline Markdown"
|
|
args={{
|
|
value: `
|
|
This should
|
|
all be in one line.
|
|
|
|
---
|
|
|
|
This should be
|
|
|
|
in two separate lines.`
|
|
}}
|
|
/>
|
|
|
|
<Story
|
|
name="Markdown with Wide Content (Horizontal Scrolling)"
|
|
args={{
|
|
value: `| ids | ids | ids |
|
|
| ---------------------------------- | ---------------------------------- | ---------------------------------- |
|
|
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
|
|
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
|
|
| abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz | abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz |
|
|
`
|
|
}}
|
|
/>
|
|
|
|
<Story name="Right aligned Markdown" args={{ rtl: true }} />
|
|
|
|
<Story
|
|
name="Markdown with LaTeX"
|
|
args={{
|
|
value: "What is the solution of $y=x^2$?",
|
|
latex_delimiters: [{ left: "$", right: "$", display: false }]
|
|
}}
|
|
/>
|
|
|
|
<Story
|
|
name="Markdown with header links"
|
|
args={{
|
|
value: "# Visit [Gradio](https://gradio.app) for more information",
|
|
header_links: true
|
|
}}
|
|
/>
|
|
|
|
<Story
|
|
name="Markdown with Long Content (Vertical Scrolling)"
|
|
args={{
|
|
value: `# Heading\n${"This is some text.\n".repeat(100)}`,
|
|
height: "200px"
|
|
}}
|
|
/>
|