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)
- Carousel seems broken on doc page HOT 1
- Refactor React components to fall more inline with existing React libraries HOT 4
- RFC: Remove return types from React components
- A little bit of white peeking out on the progress bars (styling issue) HOT 4
- InputChips does not have restProps HOT 2
- Table of Contents: support setting scrollTarget, scrollOffset HOT 1
- AppRailTile on:click not working (v2.10.1) HOT 5
- Revert missing on:click event for App Rail Anchor Tile component
- NEXT: component consistency pass
- Missing import of popup HOT 3
- Carousels example HOT 2
- v3 Component API Revisions HOT 1
- NEXT: Revisit Tab Component and API HOT 1
- NEXT: Accordion missing a11y HOT 1
- NEXT: Dependency updates
- NEXT: Introduce the skeleton-a11y package
- Hover state on buttons in mobile stays after click in incoherent ways HOT 5
- AppRail HTML markup is invalid and not accessible HOT 1
- ListBoxItem HTML markup is invalid and not accessible HOT 2
- Disabled State for AppRailTiles
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.