Comments (5)
Man, I love this component Library.....
from skeleton.
Hi Luke, unfortunately I'm having trouble replicating your issue. The target attribute works for for me. To test I copied your code snippet straight into a local Skeleton project and all three worked without issue. In fact we even use buttons with the target attribute on the documentation site. Try the "view stylesheet example" button near the top of this page:
https://skeleton.brainandbonesllc.com/guides/styling
You can view the source for this here:
https://github.com/Brain-Bones/skeleton/blob/dev/src/routes/guides/styling.svelte#L37
You mention you're writing a Chrome Extension, so I'm not sure if there's anything notable about how those operate compared to a standard webpage. My guess is both would use Chrome's Blink rendering engine and produce similar results though.
FYI I did also testing clicking all over the button and no issue there. The entire button parent is the anchor, so there should be no click area issues:
Happy to keep this open in case others can replicate to help troubleshoot. My suggestion would be to see if you get similar results when you open in the page, rather than an extension. Then that can at least help narrow our focus.
from skeleton.
Hey Endigo,
I have no clue what I was doing wrong but it is now operating perfectly.
I apologize for this confusion.
As an output of this could we include the target value and maybe any other props like it on the Button Properties section of the skeleton site?
https://skeleton.brainandbonesllc.com/components/buttons
from skeleton.
Ha, happens to the best of us! There's that old coding meme of "It's NOT working, and I don't know why - or - it IS working, and I don't know why!" :)
I think you raise a good point and that our documentation is missing critical information - that being that several of the components, including Buttons, already support ALL attributes! However, there's too many to document. It would be a mile long!
We do this by using the $$restProps
feature in Svelte. Essentially it's a catch all to pass through any attribute defined on the component definition. So every attribute you want is available on the button right now. Give it a try! Use your browser's inspect tools to view the final results of the rendered element to see all this in action.
Just keep in mind the button is multi-purpose and works as both a native <button>
as well as an anchor <a>
. It defaults to the former unless an href is provided, otherwise it's an anchor. You'll only want to use attributes that are appropriate to the underlying tag.
I'll make note of this as we should explain this on the component docs for sure! For now I'll go ahead and close the issue as it appears to be resolved.
from skeleton.
Ha, yeah we've thought of everything! Except for all the things we haven't yet :)
from skeleton.
Related Issues (20)
- Svelte v5 RC: TreeView component is non-function HOT 1
- Svelte v5 RC: Theme Generator live previews are non-functional HOT 1
- Why Paginator pagging component is theme inverted? HOT 4
- Fast hover breaks popup HOT 1
- Autocomplete: input should be of type string. HOT 2
- Finalize v3 installation instructions for all meta-frameworks
- Autocomplete 'on:selection' Event never triggers when inside of a Modal HOT 4
- TypeError: mediaQueryList is not a function.
- NEXT Document minimum versions for all dependencies and supported platforms
- Old LightSwitch component link in Dark Mode section of Essentials/Themes
- Additional a11y warnings to resolve
- TabGroup spacing prop does not seem to override default value HOT 3
- Autocomplete: only visible items are reachable via tab when autocomplete is scrollable HOT 2
- NEXT Focus ring/border flashes white when switching focus HOT 3
- tabs vertical HOT 6
- Update README assets for Skeleton v3 HOT 1
- NEXT Doc Search HOT 7
- Package and doc issues to resolve HOT 3
- NEXT: Installation page misspells "configure" twice HOT 1
- Web site Theme Error On Arc HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skeleton.