Simpla-link is an editable anchor that you can update inline on your page. You can wrap any other HTML element with it just as you would a regular <a>. It's built on the Simpla content system.
<simpla-link path="/link">
Next page >
</simpla-link>- Installation and setup
- Editing content
- Saving content
- Initializing with static content
- Custom placeholders
- Readonly
- Contributing
Install simpla-link with Bower (Yarn support coming soon)
$ bower i simpla-link --saveSetup Simpla on your page, then import simpla-link into your <head>
<link rel="import" href="/bower_components/simpla-link/simpla-link.html">Wrap the content you want to link with <simpla-link>. Give each link a unique path, where it will store its data in your project
<simpla-link path="/link">
Next page >
</simpla-link>Simpla link plays nicely with other Simpla elements, so you can linkify editable content
<simpla-link path="/button">
<simpla-text path="/button/label" plaintext></simpla-text>
</simpla-link>Edit a simpla-link by entering edit mode with Simpla (which makes all Simpla elements on a page editable) or setting the editable property directly on an element.
// Enter edit mode
Simpla.editable(true);<!-- Make only this image editable -->
<simpla-link path="/link" editable></simpla-link>Entering edit mode with Simpla is the recommended way to edit links. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.
Save a simpla-link by calling Simpla's save() method, which saves all modified content on the page. It returns a promise.
// Save all modified Simpla content
Simpla.save();You must be authenticated with Simpla before saving content
You can set the href of simpla-link just like you would with a regular <a>. If content for the link's path exists on Simpla's API, the locally set href will be overwritten
<simpla-link href="https://google.com" path="/link">
Visit google
</simpla-link>Initializing with static content is useful for converting existing links and buttons to Simpla links, or bootstrapping a project with predefined content. By setting href and then calling Simpla.save() you can easily set content directly to Simpla.
Since static content is overwritten by remote data, you should not have a href set in production
You can set a custom placeholder for the link input prompt with a placeholder attribute
<simpla-link path="/link" placeholder="URL for next page">
Next page >
</simpla-link>Simpla-link has a readonly property that stops it from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-link to purely consume and display content from Simpla's API.
<simpla-link path="/link" readonly>
Next page >
</simpla-link>If you find any issues with simpla-link please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla