-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #49 from nightswinger/update-container-docs
Update container docs
- Loading branch information
Showing
7 changed files
with
217 additions
and
219 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <template> | ||
| <DocSection label="Container" :code="code"> | ||
| <template #description> | ||
| A standard container | ||
| </template> | ||
| <template #example> | ||
| <SuiContainer> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo | ||
| ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et | ||
| magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, | ||
| ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa | ||
| quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, | ||
| arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. | ||
| Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras | ||
| dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. | ||
| Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. | ||
| Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus | ||
| viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. | ||
| Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. | ||
| </p> | ||
| </SuiContainer> | ||
| </template> | ||
| </DocSection> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import DocSection from '@/components/doc/DocSection.vue' | ||
| import { SuiContainer } from 'vue-fomantic-ui' | ||
| const code = `<template> | ||
| <SuiContainer> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo | ||
| ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et | ||
| magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, | ||
| ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa | ||
| quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, | ||
| arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. | ||
| Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras | ||
| dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. | ||
| Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. | ||
| Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus | ||
| viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. | ||
| Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. | ||
| </p> | ||
| </SuiContainer> | ||
| <\/template>` | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <template> | ||
| <DocSection label="Fluid" :code="code"> | ||
| <template #description> | ||
| A fluid container has no maximum width | ||
| </template> | ||
| <template #example> | ||
| <SuiContainer fluid> | ||
| <SuiHeader as="h2">Dogs Roles with Humans</SuiHeader> | ||
| <p> | ||
| Domestic dogs inherited complex behaviors, such as bite inhibition, from | ||
| their wolf ancestors, which would have been pack hunters with complex | ||
| body language. These sophisticated forms of social cognition and | ||
| communication may account for their trainability, playfulness, and | ||
| ability to fit into human households and social situations, and these | ||
| attributes have given dogs a relationship with humans that has enabled | ||
| them to become one of the most successful species on the planet today. | ||
| </p> | ||
| </SuiContainer> | ||
| </template> | ||
| </DocSection> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import DocSection from '@/components/doc/DocSection.vue' | ||
| import { SuiContainer, SuiHeader } from 'vue-fomantic-ui' | ||
| const code = `<template> | ||
| <SuiContainer fluid> | ||
| <SuiHeader as="h2">Dogs Roles with Humans</SuiHeader> | ||
| <p> | ||
| Domestic dogs inherited complex behaviors, such as bite inhibition, from | ||
| their wolf ancestors, which would have been pack hunters with complex | ||
| body language. These sophisticated forms of social cognition and | ||
| communication may account for their trainability, playfulness, and | ||
| ability to fit into human households and social situations, and these | ||
| attributes have given dogs a relationship with humans that has enabled | ||
| them to become one of the most successful species on the planet today. | ||
| </p> | ||
| </SuiContainer> | ||
| <\/template>` | ||
| </script> |
24 changes: 24 additions & 0 deletions
24
docs/src/components/elements/Container/TextAlignmentDoc.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <template> | ||
| <DocSection label="Text Alignment" :code="code"> | ||
| <template #description> | ||
| A container can specify its text alignment | ||
| </template> | ||
| <template #example> | ||
| <SuiContainer textAlign="left">Left Aligned</SuiContainer> | ||
| <SuiContainer textAlign="center">Center Aligned</SuiContainer> | ||
| <SuiContainer textAlign="right">Right Aligned</SuiContainer> | ||
| </template> | ||
| </DocSection> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import DocSection from '@/components/doc/DocSection.vue' | ||
| import { SuiContainer } from 'vue-fomantic-ui' | ||
| const code = `<template> | ||
| <SuiContainer textAlign="left">Left Aligned</SuiContainer> | ||
| <SuiContainer textAlign="center">Center Aligned</SuiContainer> | ||
| <SuiContainer textAlign="right">Right Aligned</SuiContainer> | ||
| <\/template>` | ||
| </script> |
52 changes: 52 additions & 0 deletions
52
docs/src/components/elements/Container/TextContainerDoc.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <template> | ||
| <DocSection label="Text Container" :code="code"> | ||
| <template #description> | ||
| A container can reduce its maximum width to more naturally accommodate a single column of text | ||
| </template> | ||
| <template #example> | ||
| <SuiContainer text> | ||
| <SuiHeader as="h2">Header</SuiHeader> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo | ||
| ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et | ||
| magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, | ||
| ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa | ||
| quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, | ||
| arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. | ||
| Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras | ||
| dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. | ||
| Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. | ||
| Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus | ||
| viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. | ||
| Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. | ||
| </p> | ||
| </SuiContainer> | ||
| </template> | ||
| </DocSection> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import DocSection from '@/components/doc/DocSection.vue' | ||
| import { SuiContainer, SuiHeader } from 'vue-fomantic-ui' | ||
| const code = `<template> | ||
| <SuiContainer text> | ||
| <SuiHeader as="h2">Header</SuiHeader> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo | ||
| ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et | ||
| magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, | ||
| ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa | ||
| quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, | ||
| arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. | ||
| Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras | ||
| dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. | ||
| Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. | ||
| Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus | ||
| viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. | ||
| Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. | ||
| </p> | ||
| </SuiContainer> | ||
| <\/template>` | ||
| </script> |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.