A simple Svelte component to make styled sections group things together. It uses <fieldset> tag to make the section stand out.
For live example see: https://svelte.technology/repl?version=2.15.3&gist=cf3d25a679ced9fbb73ead6501113dce
Last active
November 9, 2018 14:57
-
-
Save lacikawiz/cf3d25a679ced9fbb73ead6501113dce to your computer and use it in GitHub Desktop.
A styled `Section` with slots for Title, Header, Content & Footer
This file contains hidden or 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
| <Section> | |
| <p slot="title">Information</p> | |
| <p slot=header>Read the stuff below carefully!</p> | |
| <p slot=footer>Did you read it carefully?</p> | |
| <p slot=footer>Did you read it carefully?</p> | |
| <p>Blah, blah, blah...</p> | |
| a <svg width=10 height=10> | |
| <circle cx="5" cy="5" r="5" style="stroke:#00F;stroke-width:1;fill:#ffff0080"/> | |
| </svg> b | |
| </Section> | |
| <style> | |
| p { | |
| margin:0 | |
| } | |
| </style> | |
| <script> | |
| export default { | |
| data(){return { | |
| }}, | |
| components: { | |
| Section: "./Section.html" | |
| } | |
| } | |
| </script> |
This file contains hidden or 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 hidden or 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
| { | |
| "svelte": true | |
| } |
This file contains hidden or 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
| <fieldset> | |
| <legend><slot name=title>Agent Information</slot></legend> | |
| <div class="header"> | |
| <slot name=header/> | |
| </div> | |
| <div class="content"> | |
| <slot/> | |
| </div> | |
| <div class="footer"> | |
| <slot name=footer/> | |
| </div> | |
| </fieldset> | |
| <style> | |
| fieldset { | |
| border:2px outset #000; | |
| background: #eec; | |
| box-shadow: 0.1rem 0.1rem 0.1rem #888; | |
| margin-top: 1rem; | |
| padding-top: 0.5rem | |
| } | |
| legend { | |
| font-size: 1.5em; | |
| font-weight: bold; | |
| background: #fd7; | |
| border: 1px solid #000; | |
| box-shadow: 0.1em 0.1em 0.1em #000; | |
| padding: .2em; | |
| } | |
| .header { | |
| font-weight:bold; | |
| } | |
| .header:after { | |
| margin-bottom: 0.5rem; | |
| padding-bottom: 0.2rem; | |
| content: ""; | |
| display: block; | |
| width:100%; | |
| height:2px; | |
| margin-top:-2px; | |
| box-shadow: 0px 3px 2px -2px #000000; | |
| } | |
| .footer { | |
| font-size: 0.8rem; | |
| } | |
| .footer:before { | |
| margin-top: 0.5rem; | |
| padding-top: 0.2rem; | |
| content: ""; | |
| display: block; | |
| width:100%; | |
| border-top: 1px dotted #00000080 | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment