Skip to content

Commit c9b9d09

Browse files
TechQueryTechQuery
committed
[add] more document of Card & Drop Menu
[fix] several details
1 parent 10d682d commit c9b9d09

20 files changed

Lines changed: 4526 additions & 4103 deletions

‎document/source/components/Alert.mdx‎

Lines changed: 114 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,114 @@
1-
---
2-
layout: docs
3-
title: Alert
4-
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
5-
group: Components
6-
---
7-
8-
import { Alert } from 'boot-cell/source/Prompt/Alert';
9-
10-
import { Example } from '../../../source/component/Example';
11-
12-
## Examples
13-
14-
Alerts are available for any length of text, as well as an optional dismiss button.
15-
16-
<Example>
17-
<Alert>A simple primary alert—check it out!</Alert>
18-
<Alert type="secondary">A simple secondary alert—check it out!</Alert>
19-
<Alert type="success">A simple success alert—check it out!</Alert>
20-
<Alert type="danger">A simple danger alert—check it out!</Alert>
21-
<Alert type="warning">A simple warning alert—check it out!</Alert>
22-
<Alert type="info">A simple info alert—check it out!</Alert>
23-
<Alert type="light">A simple light alert—check it out!</Alert>
24-
<Alert type="dark">A simple dark alert—check it out!</Alert>
25-
</Example>
26-
27-
```TSX
28-
import { render, Fragment } from 'web-cell';
29-
import { Alert } from 'boot-cell/source/Prompt/Alert';
30-
31-
render(
32-
<Fragment>
33-
<Alert>A simple primary alert—check it out!</Alert>
34-
<Alert type="secondary">A simple secondary alert—check it out!</Alert>
35-
<Alert type="success">A simple success alert—check it out!</Alert>
36-
<Alert type="danger">A simple danger alert—check it out!</Alert>
37-
<Alert type="warning">A simple warning alert—check it out!</Alert>
38-
<Alert type="info">A simple info alert—check it out!</Alert>
39-
<Alert type="light">A simple light alert—check it out!</Alert>
40-
<Alert type="dark">A simple dark alert—check it out!</Alert>
41-
</Fragment>
42-
);
43-
```
44-
45-
> ##### Conveying meaning to assistive technologies
46-
>
47-
> Using color to add meaning only provides a visual indication,
48-
> which will not be conveyed to users of assistive technologies –
49-
> such as screen readers.
50-
> Ensure that information denoted by the color is either obvious from the content itself
51-
> (e.g. the visible text), or is included through alternative means,
52-
> such as additional text hidden with the `.sr-only` class.
53-
54-
## Additional content
55-
56-
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
57-
58-
<Example>
59-
<Alert type="success" title="Well done!">
60-
<p>
61-
Aww yeah, you successfully read this important alert message. This
62-
example text is going to run a bit longer so that you can see how
63-
spacing within an alert works with this kind of content.
64-
</p>
65-
<hr />
66-
<p className="mb-0">
67-
Whenever you need to, be sure to use margin utilities to keep things
68-
nice and tidy.
69-
</p>
70-
</Alert>
71-
</Example>
72-
73-
```TSX
74-
import { render } from 'web-cell';
75-
import { Alert } from 'boot-cell/source/Prompt/Alert';
76-
77-
render(
78-
<Alert type="success" title="Well done!">
79-
<p>
80-
Aww yeah, you successfully read this important alert message. This
81-
example text is going to run a bit longer so that you can see how
82-
spacing within an alert works with this kind of content.
83-
</p>
84-
<hr />
85-
<p className="mb-0">
86-
Whenever you need to, be sure to use margin utilities to keep things
87-
nice and tidy.
88-
</p>
89-
</Alert>
90-
);
91-
```
92-
93-
## Dismissing
94-
95-
You can see this in action with a live demo:
96-
97-
<Example>
98-
<Alert type="warning" closable>
99-
<strong>Holy guacamole!</strong> You should check in on some of those
100-
fields below.
101-
</Alert>
102-
</Example>
103-
104-
```TSX
105-
import { render } from 'web-cell';
106-
import { Alert } from 'boot-cell/source/Prompt/Alert';
107-
108-
render(
109-
<Alert type="warning" closable>
110-
<strong>Holy guacamole!</strong> You should check in on some of those
111-
fields below.
112-
</Alert>
113-
);
114-
```
1+
---
2+
layout: docs
3+
title: Alert
4+
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
5+
group: Components
6+
---
7+
8+
import { Alert } from 'boot-cell/source/Prompt/Alert';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
## Examples
13+
14+
Alerts are available for any length of text, as well as an optional dismiss button.
15+
16+
<Example>
17+
<Alert>A simple primary alert—check it out!</Alert>
18+
<Alert type="secondary">A simple secondary alert—check it out!</Alert>
19+
<Alert type="success">A simple success alert—check it out!</Alert>
20+
<Alert type="danger">A simple danger alert—check it out!</Alert>
21+
<Alert type="warning">A simple warning alert—check it out!</Alert>
22+
<Alert type="info">A simple info alert—check it out!</Alert>
23+
<Alert type="light">A simple light alert—check it out!</Alert>
24+
<Alert type="dark">A simple dark alert—check it out!</Alert>
25+
</Example>
26+
27+
```TSX
28+
import { render, createCell, Fragment } from 'web-cell';
29+
import { Alert } from 'boot-cell/source/Prompt/Alert';
30+
31+
render(
32+
<Fragment>
33+
<Alert>A simple primary alert—check it out!</Alert>
34+
<Alert type="secondary">A simple secondary alert—check it out!</Alert>
35+
<Alert type="success">A simple success alert—check it out!</Alert>
36+
<Alert type="danger">A simple danger alert—check it out!</Alert>
37+
<Alert type="warning">A simple warning alert—check it out!</Alert>
38+
<Alert type="info">A simple info alert—check it out!</Alert>
39+
<Alert type="light">A simple light alert—check it out!</Alert>
40+
<Alert type="dark">A simple dark alert—check it out!</Alert>
41+
</Fragment>
42+
);
43+
```
44+
45+
> ##### Conveying meaning to assistive technologies
46+
>
47+
> Using color to add meaning only provides a visual indication,
48+
> which will not be conveyed to users of assistive technologies –
49+
> such as screen readers.
50+
> Ensure that information denoted by the color is either obvious from the content itself
51+
> (e.g. the visible text), or is included through alternative means,
52+
> such as additional text hidden with the `.sr-only` class.
53+
54+
## Additional content
55+
56+
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
57+
58+
<Example>
59+
<Alert type="success" title="Well done!">
60+
<p>
61+
Aww yeah, you successfully read this important alert message. This
62+
example text is going to run a bit longer so that you can see how
63+
spacing within an alert works with this kind of content.
64+
</p>
65+
<hr />
66+
<p className="mb-0">
67+
Whenever you need to, be sure to use margin utilities to keep things
68+
nice and tidy.
69+
</p>
70+
</Alert>
71+
</Example>
72+
73+
```TSX
74+
import { render, createCell } from 'web-cell';
75+
import { Alert } from 'boot-cell/source/Prompt/Alert';
76+
77+
render(
78+
<Alert type="success" title="Well done!">
79+
<p>
80+
Aww yeah, you successfully read this important alert message. This
81+
example text is going to run a bit longer so that you can see how
82+
spacing within an alert works with this kind of content.
83+
</p>
84+
<hr />
85+
<p className="mb-0">
86+
Whenever you need to, be sure to use margin utilities to keep things
87+
nice and tidy.
88+
</p>
89+
</Alert>
90+
);
91+
```
92+
93+
## Dismissing
94+
95+
You can see this in action with a live demo:
96+
97+
<Example>
98+
<Alert type="warning" closable>
99+
<strong>Holy guacamole!</strong> You should check in on some of those
100+
fields below.
101+
</Alert>
102+
</Example>
103+
104+
```TSX
105+
import { render, createCell } from 'web-cell';
106+
import { Alert } from 'boot-cell/source/Prompt/Alert';
107+
108+
render(
109+
<Alert type="warning" closable>
110+
<strong>Holy guacamole!</strong> You should check in on some of those
111+
fields below.
112+
</Alert>
113+
);
114+
```

0 commit comments

Comments
 (0)