1.0.1 • Published 5 years ago

@stencil/router v1.0.1

Weekly downloads
6,657
License
MIT
Repository
github
Last release
5 years ago

npm

Stencil Router

A simple router, inspired by React Router v4, for Stencil apps and vanilla Web Component apps.

<stencil-router>
  <stencil-route url="/" component="landing-page" exact={true}></stencil-route>
  <stencil-route url="/docs" component="docs-page"></stencil-route>
  <stencil-route url="/demos" component="demos-page"></stencil-route>
</stencil-router>

Included components

  • stencil-router

    You should have one single stencil-router component in your project. This component controls all interactions with the browser history and it aggregates updates through an event system.

  • stencil-route

    This component renders based on whether the supplied url matches the current location.

    properties:

    • url (string): the pathname to match on. Accepts paths similar to expressjs. So that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
    • component (string): the component name that you would like the route to render
    • componentProps (key/value Object): a key value object({ 'red': true, 'blue': 'white'}) containing props that should be passed to the defined component when rendered.
    • routeRender (function): function that accepts props as an argument. If this exists it will be used in place of the component defined.
    • exact (boolean): If true then only render this route when the url matches exactly to the location, if false it will render if the current url 'matches' the url defined.
  • stencil-route-link

    This component is used to render links to defined routes. It applys a specific style based on whether the link matches the current location.

    properties:

    • url (string): the pathname to link to.
    • exact (boolean): If true then only apply the active class when the url matches exactly to the location.
    • activeClass (string): The class to apply if the link matches the current location. This defaults to 'link-active'.
  • stencil-route-redirect

    This component redirects the current location.

    properties:

    • url (string): the url to redirect to.

Note: for apps using Ionic, we recommend using the Ionic navigation system and router for more native-style navigation.

@socrate/lms-pluginsparkle-core-testarc-bt-stencil-pocreference-data-maintainreference-data-maintainencereference-data-maintainesreference-data-maintains@dhyanitest/coreevents-wiget-chartreading-level-reportsmartvideo@square33/cookie-opt-inojgenn-test@infinitebrahmanuniverse/nolb-_stentest-web-componentstest-web-componets@everything-registry/sub-chunk-872taavi-skepticweb-component-pokedexweb-components-trialworkflow-designer-kcworkflow-designer-kcv2xbank-wwwxhw-stencil-demotechwatchtest-stencil-publishthesis_jan_stencilvitalijdemo-stencilvloc-retailva-botuwe-dsvoth-components@benjamin.tanguay/ticksmith-namejinceilkarapincha-componentsjinneejavglex-stencil-testjbradarionic-image-viewerinput-characters-countip-stencil-route-listeneridentity-verification-uiin-app-notificationhealthpro-appointmentins-policieslithium-componentsmat-design-systemkittenco-pensionbee-componentsmcf-content-container@webcomponents-daniel/customproduct1@ultradent/upi-web-components@ui-guys/form-generator@ui-guys/stencil-bs-ui-lib@toba/elements@themesquatch_test/mynd-components@thebrockellis/loading-spinner@thebrockellis/stencil-loading-spinner@zentropy/stenciltest2aegon-lifeadmir-component-factoryadvanced-searchbaradvanced-sheet-handleratajo-web-componentsavto-card-infoapp-mangement-system@crds_npm/crds-components@alex-roman/oli@corejam/run@counterfactual/dapp-high-roller@counterfactual/playgroundlumavate-toolbarluma-ionstx-abtestst-handsontablest-lookout-forst-qrstage-internal-searchstage-ts-searchstencil-ionic-budget-and-walletstencil-demo-route-teststencil-auth-componentstencil-bootrapstencil-bootrap-teststencil-bootstrap-componentsstencil-bs-libstencil-bs-ui-libstencil-rkc-project-teststencil-pocstereo-scope-componentstenciljs-componentsstencilstarterstencil-test-davidstencil-test-mjsstencil-wenbostefans-awesome-stencil-appuacpcomponentstun-settings-hubtun-stencil-sampleuic-jstus-bocatas
2.0.0-2

5 years ago

2.0.0-1

5 years ago

2.0.0-0

5 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-1

6 years ago

1.0.0-0

6 years ago

0.3.4-2

7 years ago

0.3.4-1

7 years ago

0.3.4-0

7 years ago

0.3.3-1

7 years ago

0.3.3-0

7 years ago

0.3.3

7 years ago

0.3.2

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.7-5

7 years ago

0.2.7-4

7 years ago

0.2.7-3

7 years ago

0.2.7-2

7 years ago

0.2.7-1

7 years ago

0.2.7-0

7 years ago

0.2.6

7 years ago

0.2.6-2

7 years ago

0.2.6-1

7 years ago

0.2.6-0

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.2-2

7 years ago

0.2.2-1

7 years ago

0.2.2-0

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.3-1

7 years ago

0.1.3-0

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.29-12

7 years ago

0.0.29-11

7 years ago

0.0.29-10

8 years ago

0.0.29-9

8 years ago

0.0.29-8

8 years ago

0.0.29-7

8 years ago

0.0.29-6

8 years ago

0.0.29-5

8 years ago

0.0.29-4

8 years ago

0.0.29-3

8 years ago

0.0.29-2

8 years ago

0.0.29-1

8 years ago

0.0.29-0

8 years ago

0.0.28

8 years ago

0.0.27

8 years ago

0.0.26

8 years ago

0.0.25

8 years ago

0.0.24

8 years ago

0.0.24-1

8 years ago

0.0.24-0

8 years ago

0.0.23

8 years ago

0.0.22

8 years ago

0.0.21

8 years ago

0.0.20

8 years ago

0.0.19

8 years ago

0.0.18

8 years ago

0.0.17

8 years ago

0.0.17-1

8 years ago

0.0.17-0

8 years ago

0.0.16

8 years ago

0.0.15

8 years ago

0.0.14

8 years ago

0.0.13

8 years ago

0.0.12

8 years ago

0.0.11

8 years ago

0.0.10

8 years ago

0.0.10-0

8 years ago

0.0.9

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.7-7

8 years ago

0.0.7-6

8 years ago

0.0.7-5

8 years ago

0.0.7-4

8 years ago

0.0.7-3

8 years ago

0.0.7-2

8 years ago

0.0.7-1

8 years ago

0.0.7-0

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago