Read View
A Web Component that displays a read view of its content and allows the user to switch to an edit view.
Demo
Basic usage
Example
Live demo
Code
<bl-read-view id="readViewDemo_readView">
<a href="https://bruegmann.github.io/blue-web/" id="readViewDemo_link" target="_blank" rel="noopener noreferrer"
>Link</a
>
Click to edit the link
</bl-read-view>
<form id="readViewDemo_form" class="d-none">
<input type="text" placeholder="Edit me" value="https://bruegmann.github.io/blue-web/" class="form-control" />
<button type="submit" class="btn blue-btn-soft-secondary">Submit</button>
</form>
<script>
readViewDemo_readView.addEventListener("EditRequested", () => {
readViewDemo_readView.classList.add("d-none")
readViewDemo_form.classList.remove("d-none")
})
readViewDemo_form.addEventListener("submit", (e) => {
e.preventDefault()
const input = readViewDemo_form.querySelector("input")
readViewDemo_link.href = input.value
readViewDemo_readView.classList.remove("d-none")
readViewDemo_form.classList.add("d-none")
})
</script>Disabled
Example
Live demo
Code
<bl-read-view disabled>
<a href="https://bruegmann.github.io/blue-web/" id="readViewDemo_link" target="_blank" rel="noopener noreferrer"
>Link</a
>
This one is disabled
</bl-read-view>Style parts
Example
Live demo
ID
See the border?
Code
<style>
#readViewDemo_styledParts {
--transition: var(--blue-read-view-transition), box-shadow 0.2s;
}
#readViewDemo_styledParts.with-border::part(presentation) {
box-shadow: inset 0 0 0 var(--bs-border-width, 1px) var(--bs-border-color);
}
</style>
<bl-read-view id="readViewDemo_styledParts" class="with-border">
<div class="d-flex gap-1">
<a
href="#readViewDemo_styledParts"
class="bg-body border border-secondary-subtle link-offset-1 link-underline link-underline-opacity-75 link-underline-opacity-100-hover rounded-1 px-1"
style="box-shadow: 0 1px 0 var(--bs-secondary-bg);"
>ID</a
>
See the border?
</div>
</bl-read-view>
<button class="btn blue-btn-soft-secondary mt-3" onclick="toggleBorderToReadViewDemo()">Toggle border</button>
<script>
function toggleBorderToReadViewDemo() {
readViewDemo_styledParts.classList.toggle("with-border")
}
</script>Grab the code
When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.
-
Copy and paste the following code into your project. Source: @/src/js/read-view.ts