-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add divider component to ui with demo (#438)
- Loading branch information
1 parent
6ee02c6
commit 603cb37
Showing
7 changed files
with
208 additions
and
0 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
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
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
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
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,143 @@ | ||
| <template> | ||
| <UiPage :title="$t('ui.divider.title')" class="demo"> | ||
| <template #toolbar> | ||
| <router-link :to="{ name: 'ui' }" class="back"> | ||
| {{ $t("common.back") }} | ||
| </router-link> | ||
| </template> | ||
|
|
||
| <section> | ||
| <h2>{{ $t("ui.divider.usage.horizontal") }}</h2> | ||
|
|
||
| <div class="section-content"> | ||
| <!-- eslint-disable --> | ||
| <SshPre language="html-vue"> | ||
| <template> | ||
| <div class="content-wrapper"> | ||
| <p class="content-item"> | ||
| Programming isn’t about what you know; it’s about what you can figure out. | ||
| </p> | ||
| <Divider /> | ||
| <p class="content-item"> | ||
| Code is read much more often than it is written. | ||
| </p> | ||
| <Divider orientation="horizontal" /> | ||
| <p class="content-item"> | ||
| The most dangerous phrase in the language is, ‘We’ve always done it this way.' | ||
| </p> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { Divider } from "@dzangolab/vue3-ui"; | ||
| </script> | ||
|
|
||
| <style lang="css"> | ||
| .content-wrapper { | ||
| border: 1px solid #b5b5b5; | ||
| border-radius: 0.3rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 1rem 0.75rem; | ||
| } | ||
| </style> | ||
| </SshPre> | ||
| <!-- eslint-enable --> | ||
|
|
||
| <div class="content-wrapper"> | ||
| <p class="content-item">{{ firstMessage }}</p> | ||
| <Divider /> | ||
| <p class="content-item">{{ secondMessage }}</p> | ||
| <Divider orientation="horizontal" /> | ||
| <p class="content-item">{{ thirdMessage }}</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>{{ $t("ui.divider.usage.vertical") }}</h2> | ||
|
|
||
| <div class="section-content"> | ||
| <!-- eslint-disable --> | ||
| <SshPre language="html-vue"> | ||
| <template> | ||
| <div class="content-wrapper vertical"> | ||
| <p class="content-item"> | ||
| Programming isn’t about what you know; it’s about what you can figure out. | ||
| </p> | ||
| <Divider orientation="vertical" /> | ||
| <p class="content-item"> | ||
| Code is read much more often than it is written. | ||
| </p> | ||
| <Divider orientation="vertical" /> | ||
| <p class="content-item"> | ||
| The most dangerous phrase in the language is, ‘We’ve always done it this way.' | ||
| </p> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { Divider } from "@dzangolab/vue3-ui"; | ||
| </script> | ||
|
|
||
| <style lang="css"> | ||
| .content-wrapper { | ||
| border: 1px solid #b5b5b5; | ||
| border-radius: 0.3rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 1rem 0.75rem; | ||
| } | ||
|
|
||
| .content-wrapper > .content-item { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .content-wrapper.vertical { | ||
| flex-direction: row; | ||
| } | ||
| </style> | ||
| </SshPre> | ||
| <!-- eslint-enable --> | ||
|
|
||
| <div class="content-wrapper vertical"> | ||
| <p class="content-item">{{ firstMessage }}</p> | ||
| <Divider orientation="vertical" /> | ||
| <p class="content-item">{{ secondMessage }}</p> | ||
| <Divider orientation="vertical" /> | ||
| <p class="content-item">{{ thirdMessage }}</p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </UiPage> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { Divider } from "@dzangolab/vue3-ui"; | ||
| const firstMessage = | ||
| "Programming isn’t about what you know; it’s about what you can figure out."; | ||
| const secondMessage = "Code is read much more often than it is written."; | ||
| const thirdMessage = | ||
| "The most dangerous phrase in the language is, ‘We’ve always done it this way.'"; | ||
| import UiPage from "../UiPage.vue"; | ||
| </script> | ||
|
|
||
| <style lang="css"> | ||
| .content-wrapper { | ||
| border: 1px solid #b5b5b5; | ||
| border-radius: 0.3rem; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 1rem 0.75rem; | ||
| } | ||
| .content-wrapper > .content-item { | ||
| width: 100%; | ||
| } | ||
| .content-wrapper.vertical { | ||
| flex-direction: row; | ||
| } | ||
| </style> |
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,39 @@ | ||
| <template> | ||
| <div :data-aria-orientation="orientation" role="separator" class="divider" /> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| export default { | ||
| name: "Divider", | ||
| }; | ||
| </script> | ||
|
|
||
| <script setup lang="ts"> | ||
| defineProps({ | ||
| orientation: { | ||
| default: "horizontal", | ||
| type: String, | ||
| validator: (value: string) => ["horizontal, vertical"].includes(value), | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <style lang="css"> | ||
| .divider[role="separator"] { | ||
| --_border: var(--divider-border, 1px solid #d0d0d0); | ||
| } | ||
| .divider[role="separator"][data-aria-orientation="horizontal"] { | ||
| border-top: var(--_border); | ||
| height: 0; | ||
| margin: 1rem 0; | ||
| width: 100%; | ||
| } | ||
| .divider[role="separator"][data-aria-orientation="vertical"] { | ||
| border-left: var(--_border); | ||
| height: 100%; | ||
| margin: 0 1rem; | ||
| width: 0; | ||
| } | ||
| </style> |
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