Closed novacbn closed 2 years ago
Added the following Components / Component Features
Interactables
Button
<Button variation={"subtle" | ["subtle", "clear | "outline"]}>
Widgets
Pagination — Built-in Widget for allowing the user to selected the current page in a 1...N range.
Pagination
1...N
<Pagination on:select={CustomEvent<{page: number}>}> — Dispatches whenever a button is clicked.
<Pagination on:select={CustomEvent<{page: number}>}>
<Pagination href={string}> — Renders the navigational buttons as anchors, using a tokening solution to add in paging.
<Pagination href={string}>
${page}
href={"/path/to/view?page=${page}"}
href
href={""}
<Pagination pages={number}> — Controls how many pages there is for the current content, this is used to calculate which buttons to render.
<Pagination pages={number}>
<Pagination steps={number}> — Controls how many steps +/- should be taken rendered from the current page.
<Pagination steps={number}>
<Pagination value={number}> — Controls which in the 1...pages range is the current.
<Pagination value={number}>
1...pages
<Pagination palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
<Pagination palette="accent/dark/light/alert/affirmative/negative">
<Pagination sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.
<Pagination sizing="tiny/small/medium/large/huge">
Updated the following Components / Component Features
<Button variation="outline">
variation="clear"
Preview: https://novacbn-kahi-ui-pr-109-run-603.surge.sh
Preview: https://novacbn-kahi-ui-pr-109-run-607.surge.sh
Preview: https://novacbn-kahi-ui-pr-109-run-609.surge.sh
Preview: https://novacbn-kahi-ui-pr-109-run-615.surge.sh
CHANGELOG
Added the following Components / Component Features
Interactables
Button
<Button variation={"subtle" | ["subtle", "clear | "outline"]}>
— Removes "attention grabbing" animations like scaling on click, leaving only simple color transitions.Widgets
Pagination
— Built-in Widget for allowing the user to selected the current page in a1...N
range.<Pagination on:select={CustomEvent<{page: number}>}>
— Dispatches whenever a button is clicked.<Pagination href={string}>
— Renders the navigational buttons as anchors, using a tokening solution to add in paging.${page}
anywhere in your link to add paging, e.g.href={"/path/to/view?page=${page}"}
.href
property as a string variablehref={""}
.<Pagination pages={number}>
— Controls how many pages there is for the current content, this is used to calculate which buttons to render.<Pagination steps={number}>
— Controls how many steps +/- should be taken rendered from the current page.<Pagination value={number}>
— Controls which in the1...pages
range is the current.<Pagination palette="accent/dark/light/alert/affirmative/negative">
— Alters the rendered color palette.<Pagination sizing="tiny/small/medium/large/huge">
— Alters the sizing of the Widget and children Components.Updated the following Components / Component Features
Interactables
Button
<Button variation="outline">
— Updated background fill on click to be not as bold, matchingvariation="clear"
.