Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add the browser mockup component from README.md list #2147

Merged
merged 5 commits into from
Jul 20, 2023
Merged

feat: add the browser mockup component from README.md list #2147

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
95b21a1
feat: add browser mockup component
malkiii Jul 18, 2023
0a0e07a
docs: add browser mockup component page
malkiii Jul 18, 2023
d6f4579
docs: create browser mockup page
malkiii Jul 18, 2023
b21587f
fix: remove the right icon in browser mockup component
malkiii Jul 20, 2023
e6034bc
docs: use div instead of anchor tag
malkiii Jul 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs: create browser mockup page
  • Loading branch information
@malkiii
malkiii committed Jul 18, 2023
commit d6f457911a3b413a69097515b72c8168bec3f286
56 changes: 56 additions & 0 deletions src/docs/src/routes/components/mockup-browser/+page.svelte.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
title: Browser mockup
desc: Browser mockup shows a box that looks like a browser window.
published: true
---

<script>
import Component from "@components/Component.svelte"
import ClassTable from "@components/ClassTable.svelte"
import { prefix } from '$lib/stores';
import { replace } from '$lib/actions';
</script>

<ClassTable
data="{[
{ type:'component', class: 'mockup-browser', desc: 'Container element' },
]}"
/>

<Component title="browser mockup with border">
<div class="border mockup-browser border-base-300 w-full">
<div class="toolbar">
<div class="input border border-base-300" style="opacity: 0.5;">
<a href="https://daisyui.com" class="link">https://daisyui.com</a>
</div>
</div>
<div class="flex justify-center px-4 py-16 border-t border-base-300">Hello!</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$mockup-browser border border-base-300">
<div class="toolbar">
<div class="input border border-base-300">https://daisyui.com</div>
</div>
<div class="flex justify-center px-4 py-16 border-t border-base-300">Hello!</div>
</div>`
}</pre>
</Component>

<Component title="browser mockup with background color">
<div class="border mockup-browser bg-base-300 w-full">
<div class="toolbar">
<div class="input">
<a href="https://daisyui.com" class="link">https://daisyui.com</a>
</div>
</div>
<div class="flex justify-center px-4 py-16 bg-base-200">Hello!</div>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$mockup-browser border bg-base-300">
<div class="toolbar">
<div class="input">https://daisyui.com</div>
</div>
<div class="flex justify-center px-4 py-16 bg-base-200">Hello!</div>
</div>`
}</pre>
</Component>