Comments (12)
Sure. Below are two files. The component and the markdown where the component is used.
src/lib/charts/input/Slider.svelte
<script>
// export makes the variable a component property
export let value;
</script>
<input type='range' bind:value min=0 max=10 step=1 />
pages/slider/index.md
<script>
import Slider from '../../../../../src/lib/charts/input/Slider.svelte';
let score = 8;
</script>
## Using component **Slider**
- It's a slider component that lives in `./components`
- We import it here and bind its only attribute `value` to a variable `score` declared in `script` section
- Then we add some text that dynamically changes when we move the slider
- `value` comes from the imported `Slider.svelte`
- `score` is bound to this `value` variable
<Slider bind:value={score}/>
The score is: **{score}**
Here is the screenshot of the folder structure (just in case)
from labs.
Closed by #14! π
from labs.
Hey @kuatroka I think this is an ideal component to add into Evidence Labs (which is where we are hoping to put some of the more "experimental" features of evidence).
https://github.com/evidence-dev/labs
We'd welcome a PR there if you are open to it!
You'd need to
- put the slider component somewhere in
src/lib
(perhaps in a folder calledinput
?) - export the slider in
src/lib/index.js
- put your example code somewhere in
/pages
from labs.
Then anyone could use it if they add @evidence-dev/labs to their evidence.plugins.yaml
from labs.
Happy to help, but I've never done any PR or a proper programming. Let me check what exactly do I need to to here.
- I create a folder structure on my laptop -
input/src/lib/components
withSlider.svelte
file in it? - I create a folder structure on my laptop -
input/pages
withindex.md
file that referencesSlider.svelte
in it? - I don't understand what is the
src/lib/index.js
for or what to put there? - How do I pass the code to you, do I just zip all these folders into one and attach it here?
Sorry if all of these questions are too naive, but honestly I'm not really familiar with all of this PR or other github terminology. I'm used to just copy/paste someone else's code and tweak it for my needs. Thanks
from labs.
Ah gotcha. Let me give some more detail then!
- start by cloning the repository onto your computer: open an terminal and type
git clone https://github.com/evidence-dev/labs
- open that folder, it will already have the folder structure ready for you to add your files
src/lib/index.js
should list any components that are in thesrc/lib
folder that need to be accessible by users of the @evidence-dev/labs package. You can copy the current entry for FranceMap and change it for the component that you need to add- Once you have the code running in the repository, you commit your code into your local repository
git add .
,git commit -m "adding my new slider component"
- Then you push your repo to github
git push origin master
(it will prompt you to create a fork of the evidence-dev/labs repository) - And then open a pull request against the main evidence-dev/labs repo - this is where we can review the code, and then merge it in if it works!
This looks like quite a good generic guide: https://github.com/firstcontributions/first-contributions
from labs.
- I'm trying to push the changes (from my branch called
kuatroka-branch
) but getting an auth error. Not sure what to do now.
~/D/d/labs (kuatroka-branch) [128]> git push -u origin kuatroka-branch
remote: Permission to evidence-dev/labs.git denied to kuatroka.
fatal: unable to access 'https://github.com/evidence-dev/labs.git/': The requested URL returned error: 403
- The way I've got the path to the imported component doesn't look very good to, but the FranceMap example is the same. I've tried to use the
$lib
prefix but would get errors all the time.
<script>
import Slider from '../../../../../src/lib/charts/input/Slider.svelte';
let score = 8;
</script>
from labs.
from labs.
from labs.
I've tried all of that, but still it errors out on me. Still the same authorisation issue.
origin https://github.com/kuatroka/labs-fork.git (fetch)
origin https://github.com/kuatroka/labs-fork.git (push)
~/D/d/labs-fork (kuatroka-branch)> git remote add upstream https://githu
b.com/evidence-dev/labs.git
~/D/d/labs-fork (kuatroka-branch)> git push upstream
remote: Permission to evidence-dev/labs.git denied to kuatroka.
fatal: unable to access 'https://github.com/evidence-dev/labs.git/': The requested URL returned error: 403
from labs.
How about I copy/paste the code for the two files ( Slider.svelte and index.md) here and that's it?
I don't want to become an "auth" burden
from labs.
Hey @kuatroka, if you paste in the code here I can add the components to labs!
from labs.
Related Issues (4)
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 labs.