@gemeente-denhaag/pagination NPM | npm.io

0.1.1-alpha.348 • Published 9 months ago

Install

Weekly downloads

-

License

EUPL-1.2

Repository

Last release

9 months ago

Pagination

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

When to use

Generally, pagination is used if there are more than 25 items displayed in one view.

Alternatives and related components

None.

Anatomy

The pagination consists of:

Page: shows the number of pages
Arrow: allows you to go to the previous or next page

(Interactive) states

The pagination contains the states inactive, active, hover and focus.

Design properties

Typography

Page: TheSans/md/400

Color

Inactive page: text color Grey/4
Active page: text color white, background-color Green/3
Arrow: svg color Grey/4

Interactive states

Hover inactive: page text color Green/3
Hover active: page text color white, background-color Green/3
Disabled inactive: page text color Grey/2
Disabled active: page text color white, background-color Grey/2
Focus: border color Ocher/5

Structure

Page: height and width 32px
Arrow: height and width 20px
Arrow-left: padding-right 10px
Arrow-right: padding-left 10px

Accessibility

technical requirements

Content guidelines

None.

Pagination alignment

The pagination can be left, right and center aligned based on the parent. The alignment depends on the layout of the rest of elements.

Best practices

Dos

Paginations should:

Only be used for lists with more than 25 items
Clearly identify which page the user is on by displaying the current page number
Be placed at the bottom of a long list that has been split up into pages
Navigate to the previous and next set of items in the paged list
Hint when users are at the first or the last page by disabling the corresponding button
Always show the first and last page
Replace infinite scrolling on very long pages

Don’ts

Paginations should:

Not show more than 5 pages next to each other. Instead, use the dots and show on the right the last page

Logic

Only use dots if there are more than 5 pages.

If there are many pages and the user is on one of the first three pages, show these pages followed by the dots and then show the last page.
If there are many pages and the user is on one of the last three pages, show the first page followed by the dots and then show the last 4 pages.
If there are many pages, always show the active page in the middle and show the first and last page next to the dots.

References

Figma Design https://www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/

@infinitebrahmanuniverse/nolb-_gem @everything-registry/sub-chunk-355 @gemeente-denhaag/storybook @gemeente-denhaag/components-react @nl-portal/nl-portal-user-interface

0.1.1-alpha.348

9 months ago

0.1.1-alpha.347

9 months ago

0.1.1-alpha.346

9 months ago

0.1.1-alpha.345

9 months ago

0.1.1-alpha.344

9 months ago

0.1.1-alpha.343

9 months ago

0.1.1-alpha.342

9 months ago

0.1.1-alpha.341

9 months ago

0.1.1-alpha.340

9 months ago

0.1.1-alpha.339

9 months ago

0.1.1-alpha.338

9 months ago

0.1.1-alpha.337

10 months ago

0.1.1-alpha.336

11 months ago

0.1.1-alpha.335

11 months ago

0.1.1-alpha.334

11 months ago

0.1.1-alpha.333

11 months ago

0.1.1-alpha.332

11 months ago

0.1.1-alpha.319

1 year ago

0.1.1-alpha.318

1 year ago

0.1.1-alpha.325

1 year ago

0.1.1-alpha.324

1 year ago

0.1.1-alpha.323

1 year ago

0.1.1-alpha.322

1 year ago

0.1.1-alpha.321

1 year ago

0.1.1-alpha.320

1 year ago

0.1.1-alpha.329

11 months ago

0.1.1-alpha.328

12 months ago

0.1.1-alpha.327

1 year ago

0.1.1-alpha.326

1 year ago

0.1.1-alpha.331

11 months ago

0.1.1-alpha.330

11 months ago

0.1.1-alpha.317

1 year ago

0.1.1-alpha.316

1 year ago

0.1.1-alpha.315

1 year ago

0.1.1-alpha.314

1 year ago

0.1.1-alpha.313

1 year ago

0.1.1-alpha.312

1 year ago

0.1.1-alpha.311

1 year ago

0.1.1-alpha.310

1 year ago

0.1.1-alpha.309

1 year ago

0.1.1-alpha.308

1 year ago

0.1.1-alpha.307

1 year ago

0.1.1-alpha.306

1 year ago

0.1.1-alpha.305

1 year ago

0.1.1-alpha.304

1 year ago

0.1.1-alpha.303

1 year ago

0.1.1-alpha.302

1 year ago

0.1.1-alpha.301

1 year ago

0.1.1-alpha.300

1 year ago

0.1.1-alpha.299

1 year ago

0.1.1-alpha.298

1 year ago

0.1.1-alpha.297

1 year ago

0.1.1-alpha.296

1 year ago

0.1.1-alpha.295

1 year ago

0.1.1-alpha.294

2 years ago

0.1.1-alpha.293

2 years ago

0.1.1-alpha.292

2 years ago

0.1.1-alpha.291

2 years ago

0.1.1-alpha.290

2 years ago

0.1.1-alpha.289

2 years ago

0.1.1-alpha.288

2 years ago

0.1.1-alpha.287

2 years ago

0.1.1-alpha.286

2 years ago

0.1.1-alpha.284

2 years ago

0.1.1-alpha.283

2 years ago

0.1.1-alpha.282

2 years ago

0.1.1-alpha.281

2 years ago

0.1.1-alpha.280

2 years ago

0.1.1-alpha.285

2 years ago

0.1.1-alpha.262

2 years ago

0.1.1-alpha.261

2 years ago

0.1.1-alpha.260

2 years ago

0.1.1-alpha.269

2 years ago

0.1.1-alpha.268

2 years ago

0.1.1-alpha.267

2 years ago

0.1.1-alpha.266

2 years ago

0.1.1-alpha.265

2 years ago

0.1.1-alpha.264

2 years ago

0.1.1-alpha.263

2 years ago

0.1.1-alpha.273

2 years ago

0.1.1-alpha.272

2 years ago

0.1.1-alpha.271

2 years ago

0.1.1-alpha.270

2 years ago

0.1.1-alpha.279

2 years ago

0.1.1-alpha.278

2 years ago

0.1.1-alpha.277

2 years ago

0.1.1-alpha.276

2 years ago

0.1.1-alpha.275

2 years ago

0.1.1-alpha.274

2 years ago

0.1.1-alpha.248

2 years ago

0.1.1-alpha.247

2 years ago

0.1.1-alpha.246

2 years ago

0.1.1-alpha.245

2 years ago

0.1.1-alpha.249

2 years ago

0.1.1-alpha.251

2 years ago

0.1.1-alpha.250

2 years ago

0.1.1-alpha.259

2 years ago

0.1.1-alpha.258

2 years ago

0.1.1-alpha.257

2 years ago

0.1.1-alpha.256

2 years ago

0.1.1-alpha.255

2 years ago

0.1.1-alpha.254

2 years ago

0.1.1-alpha.253

2 years ago

0.1.1-alpha.252

2 years ago

0.1.1-alpha.244

2 years ago

0.1.1-alpha.243

2 years ago

0.1.1-alpha.240

2 years ago

0.1.1-alpha.242

2 years ago

0.1.1-alpha.241

2 years ago

0.1.1-alpha.229

2 years ago

0.1.1-alpha.237

2 years ago

0.1.1-alpha.236

2 years ago

0.1.1-alpha.235

2 years ago

0.1.1-alpha.234

2 years ago

0.1.1-alpha.233

2 years ago

0.1.1-alpha.232

2 years ago

0.1.1-alpha.231

2 years ago

0.1.1-alpha.230

2 years ago

0.1.1-alpha.239

2 years ago

0.1.1-alpha.238

2 years ago

0.1.1-alpha.226

3 years ago

0.1.1-alpha.225

3 years ago

0.1.1-alpha.224

3 years ago

0.1.1-alpha.223

3 years ago

0.1.1-alpha.222

3 years ago

0.1.1-alpha.221

3 years ago

0.1.1-alpha.220

3 years ago

0.1.1-alpha.228

3 years ago

0.1.1-alpha.227

3 years ago

0.1.1-alpha.215

3 years ago

0.1.1-alpha.214

3 years ago

0.1.1-alpha.213

3 years ago

0.1.1-alpha.219

3 years ago

0.1.1-alpha.218

3 years ago

0.1.1-alpha.217

3 years ago

0.1.1-alpha.216

3 years ago

0.1.1-alpha.185

3 years ago

0.1.1-alpha.189

3 years ago

0.1.1-alpha.188

3 years ago

0.1.1-alpha.187

3 years ago

0.1.1-alpha.186

3 years ago

0.1.1-alpha.196

3 years ago

0.1.1-alpha.195

3 years ago

0.1.1-alpha.194

3 years ago

0.1.1-alpha.193

3 years ago

0.1.1-alpha.192

3 years ago

0.1.1-alpha.191

3 years ago

0.1.1-alpha.190

3 years ago

0.1.1-alpha.199

3 years ago

0.1.1-alpha.198

3 years ago

0.1.1-alpha.197

3 years ago

0.1.1-alpha.204

3 years ago

0.1.1-alpha.203

3 years ago

0.1.1-alpha.202

3 years ago

0.1.1-alpha.201

3 years ago

0.1.1-alpha.200

3 years ago

0.1.1-alpha.209

3 years ago

0.1.1-alpha.208

3 years ago

0.1.1-alpha.207

3 years ago

0.1.1-alpha.206

3 years ago

0.1.1-alpha.205

3 years ago

0.1.1-alpha.212

3 years ago

0.1.1-alpha.211

3 years ago

0.1.1-alpha.210

3 years ago

0.1.1-alpha.141

3 years ago

0.1.1-alpha.140

3 years ago

0.1.1-alpha.149

3 years ago

0.1.1-alpha.148

3 years ago

0.1.1-alpha.147

3 years ago

0.1.1-alpha.146

3 years ago

0.1.1-alpha.145

3 years ago

0.1.1-alpha.144

3 years ago

0.1.1-alpha.143

3 years ago

0.1.1-alpha.142

3 years ago

0.1.1-alpha.152

3 years ago

0.1.1-alpha.151

3 years ago

0.1.1-alpha.150

3 years ago

0.1.1-alpha.159

3 years ago

0.1.1-alpha.158

3 years ago

0.1.1-alpha.157

3 years ago

0.1.1-alpha.156

3 years ago

0.1.1-alpha.155

3 years ago

0.1.1-alpha.154

3 years ago

0.1.1-alpha.153

3 years ago

0.1.1-alpha.138

3 years ago

0.1.1-alpha.137

3 years ago

0.1.1-alpha.136

3 years ago

0.1.1-alpha.135

3 years ago

0.1.1-alpha.134

3 years ago

0.1.1-alpha.133

3 years ago

0.1.1-alpha.139

3 years ago

0.1.1-alpha.184

3 years ago

0.1.1-alpha.183

3 years ago

0.1.1-alpha.182

3 years ago

0.1.1-alpha.181

3 years ago

0.1.1-alpha.180

3 years ago

0.1.1-alpha.163

3 years ago

0.1.1-alpha.162

3 years ago

0.1.1-alpha.161

3 years ago

0.1.1-alpha.160

3 years ago

0.1.1-alpha.169

3 years ago

0.1.1-alpha.168

3 years ago

0.1.1-alpha.167

3 years ago

0.1.1-alpha.166

3 years ago

0.1.1-alpha.165

3 years ago

0.1.1-alpha.164

3 years ago

0.1.1-alpha.174

3 years ago

0.1.1-alpha.173

3 years ago

0.1.1-alpha.172

3 years ago

0.1.1-alpha.171

3 years ago

0.1.1-alpha.170

3 years ago

0.1.1-alpha.179

3 years ago

0.1.1-alpha.178

3 years ago

0.1.1-alpha.177

3 years ago

0.1.1-alpha.176

3 years ago

0.1.1-alpha.175

3 years ago

0.1.1-alpha.127

3 years ago

0.1.1-alpha.126

3 years ago

0.1.1-alpha.125

3 years ago

0.1.1-alpha.123

3 years ago

0.1.1-alpha.122

3 years ago

0.1.1-alpha.121

3 years ago

0.1.1-alpha.120

3 years ago

0.1.1-alpha.129

3 years ago

0.1.1-alpha.128

3 years ago

0.1.1-alpha.130

3 years ago

0.1.1-alpha.132

3 years ago

0.1.1-alpha.131

3 years ago

0.1.1-alpha.119

3 years ago

0.1.1-alpha.105

3 years ago

0.1.1-alpha.104

3 years ago

0.1.1-alpha.103

3 years ago

0.1.1-alpha.102

3 years ago

0.1.1-alpha.101

3 years ago

0.1.1-alpha.100

3 years ago

3 years ago

0.1.1-alpha.109

3 years ago

0.1.1-alpha.108

3 years ago

0.1.1-alpha.107

3 years ago

0.1.1-alpha.106

3 years ago

0.1.1-alpha.116

3 years ago

0.1.1-alpha.115

3 years ago

0.1.1-alpha.114

3 years ago

0.1.1-alpha.113

3 years ago

0.1.1-alpha.112

3 years ago

0.1.1-alpha.111

3 years ago

0.1.1-alpha.110

3 years ago

0.1.1-alpha.118

3 years ago

0.1.1-alpha.117

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago